:root { font-family: Tahoma, Verdana, sans-serif; color: #27302e; background: #487f86; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cabinet { width: min(760px, 100%); min-height: 460px; background: #edeee8; border: 2px solid; border-color: #fff #66736d #66736d #fff; box-shadow: 5px 5px 0 #315e65; display: flex; flex-direction: column; }
.bar { background: #225b65; color: #f4f5e9; padding: 15px 20px; display: flex; justify-content: space-between; gap: 10px; font: 700 12px 'Lucida Console', monospace; }
.body { flex: 1; padding: clamp(24px, 6vw, 48px); }
.eyebrow, .foot { font: 700 12px 'Lucida Console', monospace; letter-spacing: .03em; }
.eyebrow { color: #49655d; }
h1 { margin: 18px 0 36px; font: 900 clamp(38px, 8vw, 64px)/1 'Lucida Console', monospace; letter-spacing: -.08em; }
h1 span { color: #bd602a; }
.game { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px; color: inherit; text-decoration: none; background: #dfe2db; border: 2px solid; border-color: #fff #7b837c #7b837c #fff; }
.game:hover { background: #bddbd2; }
.game:focus-visible { outline: 3px solid #225b65; outline-offset: 4px; }
.badge { flex: 0 0 48px; height: 48px; display: grid; place-items: center; background: #225b65; color: #f1c56e; font-size: 28px; }
.game-copy { display: grid; gap: 5px; }
.game-copy strong { font-size: 20px; }
.game-copy small { font-size: 14px; line-height: 1.4; }
.arrow { margin-left: auto; font: 700 22px monospace; }
.foot { padding: 10px 20px; border-top: 1px solid #aab2aa; color: #52645f; }
@media (max-width: 440px) { body { padding: 0; } .cabinet { min-height: 100vh; border: 0; box-shadow: none; } .bar { font-size: 10px; } .game { gap: 11px; padding: 12px; } .badge { flex-basis: 40px; height: 40px; } .game-copy strong { font-size: 18px; } .game-copy small { font-size: 13px; } }