:root {
  --ground: #12110e;
  --sheet: #1b1a16;
  --ink: #ece8dd;
  --soft: #cfc9bc;
  --muted: #949085;
  --rule: rgba(236, 232, 221, .13);
  --accent: #f0a35e; /* the desk lamp */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;
  --body: "Fira Sans", system-ui, sans-serif;
  --mono: "Fira Code", ui-monospace, Menlo, monospace;
  --osd: "VT323", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}

/* one language at a time: every text comes as a lang="tr" / lang="en" pair */
html[lang="tr"] [lang="en"], html[lang="en"] [lang="tr"] { display: none !important; }

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--soft); font: 16px/1.6 var(--body); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- static page ---------- */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

.site { max-width: 1100px; margin: 0 auto; padding: 16px 16px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.site .name { font: 850 14px/1 var(--display); font-stretch: 125%; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.site nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.site nav a { font: 19px/1 var(--osd); letter-spacing: .07em; text-decoration: none; color: var(--muted); padding: 4px 8px 2px; border-radius: 3px; }
.site nav a:hover { color: var(--ink); }
.langb { all: unset; cursor: pointer; font: 17px/1 var(--osd); letter-spacing: .07em; color: var(--muted); padding: 3px 8px 1px; margin-left: 6px; border: 1px solid var(--rule); border-radius: 3px; }
.langb:hover { color: var(--ink); border-color: var(--muted); }
.langb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero { margin: clamp(4px, 1.5vw, 18px) 0 0; line-height: 0; border-radius: 4px; overflow: hidden; background: #07080d; }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 1720 / 716; object-fit: cover; object-position: 50% 60%; }

.note { margin: 16px 0 0; padding: 16px 20px 18px; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 9px, transparent 9px 18px); background-size: 100% 4px; background-repeat: no-repeat; }
.note[hidden] { display: none; }
.note p { margin: 0; }
.note .k { padding-top: 4px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.note .t { margin-top: 9px; font-size: 15px; line-height: 1.55; }
.note .a { margin-top: 14px; }
.note .a a { display: inline-block; font: 12px/1 var(--mono); letter-spacing: .04em; text-decoration: none; color: var(--ground); background: var(--ink); border-radius: 2px; padding: 9px 12px 8px; }
.note .a a::before { content: "\25B6\FE0E"; margin-right: .7em; font-size: .8em; }
.note .a a:hover { background: var(--accent); }

.intro { padding: clamp(26px, 4vw, 40px) 0 clamp(22px, 3vw, 32px); border-bottom: 1px solid var(--rule); }
.lede { margin: 0; font: 400 clamp(20px, 2.2vw, 25px)/1.4 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: clamp(18px, 3vw, 26px) 0 0; }
.chips a { font: 11.5px/1 var(--mono); letter-spacing: .08em; text-decoration: none; color: var(--soft); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 10px 7px; }
.chips a:hover { color: var(--ink); border-color: var(--muted); }

.sec { margin-top: clamp(40px, 6vw, 64px); scroll-margin-top: 16px; }
.sec h2 { margin: 0; padding: 0 10px 8px; border-bottom: 1px solid var(--rule); font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.prose { padding: 4px 10px 0; max-width: 660px; }
.prose p { margin: 1em 0 0; font-size: 17px; line-height: 1.65; }
.prose h3 { margin: 28px 0 0; font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.cols, .rows .row { display: grid; grid-template-columns: minmax(0, 1fr) 16ch 9ch; gap: 0 18px; align-items: baseline; }
.cols { font: 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 18px 10px 0; }
.cols span:nth-child(n+3) { text-align: right; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows .row { padding: 15px 10px 16px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.rows .b { display: grid; gap: 4px; min-width: 0; }
.rows .t { font: 500 clamp(18px, 1.5vw, 20px)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.rows .x { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.rows .d, .rows .r { font: 12.5px/1.4 var(--mono); color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .d { grid-column: 2; }
.rows .r { grid-column: 3; }
.links .row { grid-template-columns: minmax(0, 1fr) 9ch; }
.links .r { grid-column: 2; font-size: 15px; }
a.row:hover, a.row:focus-visible { background: var(--sheet); outline: none; }
a.row:hover .t, a.row:focus-visible .t { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.credits { margin-top: 56px; font: 12px/1.6 var(--mono); color: var(--muted); }
.credits h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink); margin: 0 0 10px; }
.credits p, .credits ul { margin: 0 0 8px; }
.credits ul { padding-left: 18px; }
.credits a { color: inherit; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 18px; padding-bottom: 40px; border-top: 1px solid var(--rule); font: 12px/1.5 var(--mono); color: var(--muted); }

@media (max-width: 640px) {
  .hero img { aspect-ratio: 16 / 10; object-position: 45% 60%; }
  .cols { display: none; }
  .rows .row, .links .row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "d r" "b b"; gap: 6px 18px; }
  .rows .b { grid-area: b; }
  .rows .d { grid-area: d; text-align: left; font-size: 12px; }
  .rows .r { grid-area: r; font-size: 12px; }
  .links .row { grid-template-areas: "b r"; grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- the 3D room ---------- */
html:not(.room) #room { display: none; }
html.room .static { display: none; }
html.room, html.room body { height: 100%; overflow: hidden; background: #07080d; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: fixed; z-index: 2; }
.hud.top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; pointer-events: none; }
.hud.top > * { pointer-events: auto; }
.hud .name { all: unset; cursor: pointer; font: 850 14px/1 var(--display); font-stretch: 125%; letter-spacing: .04em; color: #f3efe6; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.hud .name:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { font: 24px/1 var(--osd); letter-spacing: .08em; color: rgba(236, 232, 221, .72); text-decoration: none; padding: 4px 10px 2px; border-radius: 3px; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.menu a:hover { color: #fff; }
.menu a[aria-current="page"] { background: #ece8dd; color: #0b0b0e; text-shadow: none; }
/* (marked at the TV, or on the desk while the tapes change; not at the computer, the window or anything else) */
:root:not([data-spot="tv"]):not([data-spot="desk"]) .menu a[aria-current="page"] { background: none; color: rgba(236, 232, 221, .72); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.menu .snd[aria-pressed="false"] { text-decoration: line-through; opacity: .55; }
.menu .langb { font-size: 20px; color: rgba(236, 232, 221, .72); border-color: rgba(236, 232, 221, .25); background: rgba(10, 10, 12, .4); margin-left: 10px; }

.btn { all: unset; cursor: pointer; display: inline-block; font: 17px/1 var(--osd); letter-spacing: .08em; color: var(--ink); background: rgba(10, 10, 12, .55); border: 1px solid rgba(236, 232, 221, .22); border-radius: 999px; padding: 7px 13px 5px; text-decoration: none; white-space: nowrap; backdrop-filter: blur(6px); }
.btn:hover { background: rgba(236, 232, 221, .14); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ctl { right: 22px; bottom: 18px; display: flex; align-items: center; gap: 14px; }
.ctl .hint { margin: 0; font: 13px/1 var(--mono); color: rgba(236, 232, 221, .66); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
/* the room's own hint: gone a few seconds after the room has been tried (room/input.js: .tried), and while a channel's panel is read */
.ctl .hint > .room { transition: opacity .6s ease; }
html.tried .ctl .hint > .room, html[data-spot="tv"] .ctl .hint > .room { opacity: 0; }

.panel { top: 72px; right: 22px; bottom: 70px; width: min(480px, 40vw); display: flex; flex-direction: column; color: var(--soft);
  background: rgba(16, 15, 12, .88); border: 1px solid var(--rule); border-radius: 6px; backdrop-filter: blur(12px);
  animation: panel-in .35s ease-out; }
.panel[hidden] { display: none; }
.panel header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--rule); }
.panel .ch { font: 20px/1 var(--osd); letter-spacing: .08em; color: var(--accent); }
.panel h2 { margin: .3em 0 0; font: 900 34px/1 var(--display); font-stretch: 80%; text-transform: uppercase; color: var(--ink); outline: none; }
.panel .body { overflow: auto; overscroll-behavior: contain; padding: 0 10px 20px; }
.panel .prose { padding-top: 0; }
.panel .prose p { font-size: 16px; }
.panel .cols { display: none; }
.panel .rows .row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "d r" "b b"; gap: 6px 18px; }
.panel .rows .b { grid-area: b; }
.panel .rows .d { grid-area: d; text-align: left; font-size: 12px; }
.panel .rows .r { grid-area: r; font-size: 12px; }
.panel .links .row { grid-template-areas: "b r"; grid-template-columns: minmax(0, 1fr) auto; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

#tip { position: fixed; z-index: 3; left: 0; top: 0; pointer-events: none; font: 20px/1 var(--osd); letter-spacing: .05em; color: #111; background: #ece8dd; padding: 4px 8px 2px; border-radius: 2px; white-space: nowrap; }
#tip[hidden] { display: none; }

/* the loading screen, which turns into the gate: the still where the room will stand (blurred, it fills what it does
   not reach), and the TV's picture on its glass (index.html places both); at the gate the still gives way to the room
   itself, seen from the same place, and a click anywhere goes in */
#loader { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #07080d; transition: opacity .7s ease, background .9s ease; }
#loader::before { content: ""; position: absolute; inset: -48px; background: url(still.jpg) center / cover no-repeat; filter: blur(24px) brightness(.55); transition: opacity .9s ease; }
#loader .still { position: absolute; left: 0; top: 0; width: 1720px; height: 716px; max-width: none; transform-origin: 0 0; transition: opacity .9s ease; }
#loader.gate-on { background: transparent; cursor: pointer; }
#loader.gate-on::before, #loader.gate-on .still { opacity: 0; }
#loader.done { opacity: 0; pointer-events: none; }
#loader .blink { animation: blink 1.1s steps(2, jump-none) infinite; }
/* the TV's picture: its own blue screen (tv.js's), its lines, a 4:3 box drawn onto the glass by a matrix3d */
.tv-osd { position: absolute; left: 0; top: 0; width: 320px; height: 240px; box-sizing: border-box; transform-origin: 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px 20px; border-radius: 14px; overflow: hidden; background: linear-gradient(#2448e2, #1631b8); color: #f4f1ea; font: 32px/1 var(--osd); letter-spacing: .06em; text-shadow: 2px 2px 0 rgba(0, 0, 30, .5); }
.tv-osd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 20, .14) 0 1px, transparent 1px 3px); }
.tv-osd p { margin: 0; }
.tv-top { display: flex; justify-content: space-between; gap: .5em; font-size: 28px; } /* ("▶▶ YÜKLENİYOR" and "CH 00" kept apart) */
.tv-load { display: grid; gap: 12px; }
.tv-meter { height: 22px; border: 3px solid #f4f1ea; padding: 2px; box-shadow: 2px 2px 0 rgba(0, 0, 30, .5); }
.tv-meter i { display: block; width: 0; height: 100%; background: #f4f1ea; }
.tv-pc { text-align: center; font-size: 44px; }
#loader.gate-on .tv-load, #loader.gate-on .tv-top > span:first-child { visibility: hidden; }
#loader.gate-on .tv-load { display: none; }
.gate { display: grid; justify-items: center; gap: 18px; margin-bottom: 8px; }
.gate[hidden] { display: none; }
.tv-cta, .tv-mute { all: unset; display: block; cursor: pointer; font: inherit; color: inherit; text-align: center; }
.tv-cta { font-size: 38px; text-wrap: balance; } /* (two even lines, no word left alone) */
/* the way in muted: the button reaches 20 px past its frame (a thumb's size on a phone), the frame drawn inside it */
.tv-mute { position: relative; z-index: 0; font-size: 30px; padding: 31px 31px 29px; margin: -20px -12px; }
.tv-mute::before { content: ""; position: absolute; z-index: -1; inset: 20px 12px; border: 3px solid #f4f1ea; box-shadow: 2px 2px 0 rgba(0, 0, 30, .5); }
.tv-mute:hover::before { background: rgba(244, 241, 234, .16); }
.tv-cta:focus-visible { outline: none; text-decoration: underline 3px; text-underline-offset: 7px; } /* (it has the focus as the gate opens: a box would be a second button) */
.tv-mute:focus-visible { outline: none; }
.tv-mute:focus-visible::before { outline: 3px solid #f4f1ea; outline-offset: 5px; }
.tv-cta .touch { display: none; }
.tv-cta .short { display: none; }
/* a phone's TV (under 120 px): on its glass only CH 00 and the loading's count, then a big ▶; the two ways in leave it for
   the foot of the screen (index.html moves the gate there) as the site's own buttons, a thumb's size */
.tv-play { display: none; }
#loader.gate-on .tv-osd.small .tv-play { display: block; margin: auto; font-size: 150px; line-height: 1; }
.tv-osd.small .tv-top { justify-content: flex-end; font-size: 44px; }
.tv-osd.small .tv-top > span:first-child { display: none; }
.tv-osd.small .tv-pc { font-size: 76px; }
#loader > .gate { position: absolute; left: 16px; right: 16px; bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px)); display: flex; justify-content: center; gap: 12px; margin: 0; }
#loader > .gate[hidden] { display: none; }
#loader > .gate .tv-cta, #loader > .gate .tv-mute { box-sizing: border-box; min-height: 48px; margin: 0; padding: 2px 22px 0; display: inline-flex; align-items: center; gap: .45em;
  border-radius: 999px; font: 20px/1 var(--osd); letter-spacing: .08em; text-shadow: none; white-space: nowrap; }
#loader > .gate .tv-cta { background: #ece8dd; color: #0b0b0e; }
#loader > .gate .tv-mute { color: #ece8dd; background: rgba(10, 10, 12, .55); border: 1px solid rgba(236, 232, 221, .35); backdrop-filter: blur(6px); }
#loader > .gate .tv-mute::before { display: none; }
#loader > .gate .tv-cta .mouse, #loader > .gate .tv-cta .touch { display: none; }
#loader > .gate .tv-cta .short { display: inline; }
#loader > .gate :is(.tv-cta, .tv-mute):focus-visible { text-decoration: none; outline: 2px solid #ece8dd; outline-offset: 3px; }
@media (pointer: coarse) { .tv-cta .mouse { display: none; } .tv-cta .touch { display: inline; } }
html.room:not(.entered) .hud { opacity: 0; pointer-events: none; }
.hud { transition: opacity .8s ease .6s; }
@keyframes blink { 50% { opacity: .35; } }

.hint .touch { display: none; }
/* the hint says what to do where one is: a close-up that works its own way has its own (camera.js puts the spot on html) */
.hint .at, html[data-spot="sketchbook"] .hint > .room, html[data-spot="typewriter"] .hint > .room { display: none; }
html[data-spot="sketchbook"] .hint > [data-at="sketchbook"], html[data-spot="typewriter"] .hint > [data-at="typewriter"] { display: inline; }
@media (pointer: coarse) {
  .hint .mouse { display: none; }
  .hint .touch { display: inline; }
  .key { display: none; } /* (no Esc key on a phone) */
  .menu a, .menu .langb, .btn { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; } /* (a thumb's size) */
}
.panel header > div { min-width: 0; }
.panel header .btn { flex: none; }
/* a phone: the menu takes a row of its own under the name, the controls span the bottom */
@media (max-width: 700px) {
  .hud.top { flex-wrap: wrap; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 0; }
  .menu { width: 100%; justify-content: space-between; gap: 0; }
  .menu a { font-size: 17px; padding: 4px 5px 2px; }
  .menu .langb { font-size: 15px; margin-left: 2px; padding: 3px 6px 1px; }
  .ctl { left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); justify-content: space-between; gap: 10px; }
  .ctl .hint { font-size: 11px; }
  .ctl .btn { font-size: 14px; }
}
@media (max-aspect-ratio: 23/20) {
  .panel { top: auto; left: 16px; right: 16px; bottom: 64px; width: auto; height: 46vh; }
}
/* the Discman's booklet (room/desk.js): a cream insert at the left, the song playing printed dark; on a phone, under it */
.tracks { left: 22px; top: 50%; translate: 0 -50%; width: min(330px, 30vw); max-height: calc(100% - 170px); overflow: auto; overscroll-behavior: contain;
  padding: 16px 12px 10px; background: #ebe3cf; color: #2a2620; border-radius: 3px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); animation: panel-in .35s ease-out; }
.tracks[hidden] { display: none; }
.tracks h2 { margin: 0 6px 8px; padding-bottom: 10px; border-bottom: 1px solid rgba(42, 38, 32, .25); font: 850 12px/1 var(--display); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: #8a3d1c; }
.tracks ol { list-style: none; margin: 0; padding: 0; }
.tracks button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template: "n t d" auto "n by d" auto / 2em minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 6px; border-radius: 3px; }
.tracks button:hover { background: rgba(42, 38, 32, .09); }
.tracks button:focus-visible { outline: 2px solid #8a3d1c; outline-offset: -2px; }
.tracks button[aria-current="true"] { background: #2a2620; color: #ebe3cf; }
.tracks .n { grid-area: n; font: 13px/1.6 var(--mono); opacity: .6; }
.tracks .t { grid-area: t; font: 600 15px/1.3 var(--serif); }
.tracks .by { grid-area: by; font: 12px/1.3 var(--body); opacity: .7; }
.tracks .d { grid-area: d; align-self: center; font: 12px/1 var(--mono); opacity: .7; }
@media (max-aspect-ratio: 23/20) {
  .tracks { top: auto; translate: none; left: 16px; right: 16px; bottom: 64px; width: auto; max-height: 25vh; padding: 12px 8px 6px; }
  .tracks button { padding: 5px 6px; }
}
/* the sketchbook's pages (room/sketch.js): bottom left; on a phone, centred over the controls */
.sk { left: 22px; bottom: 18px; display: flex; align-items: center; gap: 12px; font: 22px/1 var(--osd); letter-spacing: .08em; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.sk[hidden] { display: none; }
.sk .btn { padding: 6px 14px 4px; }
@media (max-width: 700px) { .sk { left: 50%; translate: -50% 0; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); } }
/* the typewriter (room/typewriter.js): its hint over the controls; the field a phone's keyboard types into, unseen (at
   the top: at the bottom, iOS pans the page to keep it over its keyboard) */
.tw-hint { left: 50%; translate: -50% 0; bottom: 64px; margin: 0; font: 22px/1 var(--osd); letter-spacing: .08em; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); pointer-events: none; }
.tw-hint[hidden] { display: none; }
.tw-input { position: fixed; left: 50%; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; resize: none; }
@media (max-width: 700px) { .tw-hint { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); } }
/* the play mode (room/games.js): the game's keys take the room's hint's place; a way out; on touch screens a pad,
   grey and purple for the Game Boy, black and orange for the Atari */
.game-hint, .game-exit, .pad { display: none; }
html.playing .ctl { display: none; }
html.playing .game-hint { display: block; left: 22px; bottom: 22px; margin: 0; font: 13px/1 var(--mono); color: rgba(236, 232, 221, .75); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
html.playing .game-exit { display: inline-block; position: fixed; right: 22px; bottom: 18px; } /* (.btn unsets .hud's position) */
/* a part for some consoles only: its data-console lists them */
html:not([data-console="gb"]) [data-console="gb"], html:not([data-console="atari"]) [data-console="atari"],
html:not([data-console="snes"]) [data-console="snes"], html:not([data-console="nes"]) [data-console="nes"],
html:not([data-console="nes"]):not([data-console="snes"]) [data-console="nes snes"],
html:not([data-console="gb"]):not([data-console="nes"]):not([data-console="snes"]) [data-console="gb nes snes"] { display: none; }
.pad { --u: min(46px, 11.5vw); left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); padding: 0 16px; justify-content: space-between; align-items: flex-end; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button { all: unset; pointer-events: auto; display: grid; place-items: center; font: 18px/1 var(--osd); letter-spacing: .06em; color: #f3efe6; background: rgba(110, 108, 120, .55); border: 1px solid rgba(236, 232, 221, .3); backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; }
.pad .dpad { display: grid; grid-template: ". u ." var(--u) "l . r" var(--u) ". d ." var(--u) / var(--u) var(--u) var(--u); }
.pad .dpad [data-b="up"] { grid-area: u; } .pad .dpad [data-b="left"] { grid-area: l; } .pad .dpad [data-b="right"] { grid-area: r; } .pad .dpad [data-b="down"] { grid-area: d; }
.pad .dpad button { border-radius: 6px; }
.pad .mid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pad .mid button { padding: 6px 10px 4px; border-radius: 999px; font-size: 14px; }
.pad .ab { display: flex; gap: 12px; align-items: flex-end; }
.pad .ab button { width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); border-radius: 50%; font-size: 24px; background: rgba(150, 40, 100, .6); }
.pad .ab [data-b="b"] { margin-bottom: 26px; }
/* the SNES: four face buttons (Y X over B A) and its shoulders over Select and Start; the others leave them out */
html:not([data-console="snes"]) .pad :is([data-b="x"], [data-b="y"], .lr) { display: none; }
html[data-console="snes"] .pad .ab { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; }
html[data-console="snes"] .pad .ab button { width: var(--u); height: var(--u); font-size: 20px; }
html[data-console="snes"] .pad .ab [data-b="b"] { margin-bottom: 0; }
.pad .lr { display: flex; gap: 8px; }
.pad .lr button { padding: 6px 12px 4px; border-radius: 6px; font-size: 14px; }
html[data-console="atari"] .pad button { background: rgba(20, 20, 20, .65); }
html[data-console="atari"] .pad .ab [data-b="a"] { background: rgba(230, 110, 30, .75); }
html[data-console="atari"] .pad .ab [data-b="b"] { display: none; }
@media (pointer: coarse) {
  html.playing .pad { display: flex; }
  html.playing .game-hint { display: none; }
  html.playing .game-exit { top: calc(env(safe-area-inset-top) + 92px); bottom: auto; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #loader .blink, .panel, .tracks, .gate { animation: none; }
}