/* baduigames: a console-style home screen. The featured game fills the screen, the library sits
   along the bottom, and everything is driven by keyboard, controller, mouse or touch. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-800-italic.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(/assets/fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/fraunces-italic-100-900.woff2) format('woff2'); }

:root {
  --bg: #05060d;
  --ink: #f3f6ff;
  --ink-soft: rgba(229, 234, 255, 0.78);
  --ink-faint: rgba(229, 234, 255, 0.48);
  --stroke: rgba(210, 222, 255, 0.16);
  --glass: rgba(16, 20, 40, 0.5);
  --gold: #ffc53d;
  --gold-hi: #ffe39a;
  --gold-ink: #1f1404;
  --azure: #59bbff;
  --glow: rgba(89, 187, 255, 0.55);
  --disp: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  --logo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pad: max(clamp(20px, 5.4vw, 104px), env(safe-area-inset-left));
  --pad-r: max(clamp(20px, 5.4vw, 104px), env(safe-area-inset-right));
  --tile: clamp(112px, 9.4vw, 176px);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ background art */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-art { position: absolute; inset: 0; transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1), filter 0.9s; }
.bg-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; opacity: 0; transition: opacity 1.1s ease; animation: drift 36s ease-in-out infinite alternate; }
.bg-art img.on { opacity: 1; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, -0.8%); } }
.bg-soon { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; background: radial-gradient(ellipse 60% 70% at 72% 40%, rgba(64, 86, 190, 0.35), transparent 70%), radial-gradient(ellipse 40% 50% at 30% 70%, rgba(150, 70, 190, 0.22), transparent 70%), linear-gradient(160deg, #0d1230 0%, #070914 60%, #05060d 100%); }
.bg-soon::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); }
body.soon .bg-soon { opacity: 1; }
.bg-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(5, 6, 13, 0.9) 0%, rgba(5, 6, 13, 0.72) 26%, rgba(5, 6, 13, 0.18) 52%, transparent 68%),
  linear-gradient(0deg, rgba(5, 6, 13, 0.96) 0%, rgba(5, 6, 13, 0.7) 20%, transparent 46%),
  linear-gradient(180deg, rgba(5, 6, 13, 0.6) 0%, transparent 16%); }
body.launching .bg-art { transform: scale(1.14); filter: brightness(0.45) saturate(1.2); }

/* ------------------------------------------------------------------ top bar */
.topbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--pad-r) 0 var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 6px 10px 6px 4px; border-radius: 10px; }
.brand .mark { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(255, 190, 60, 0.45)); }
.brand .word, .boot-word { font: 800 italic 23px/1 var(--disp); letter-spacing: 0.06em; }
.brand .word b, .boot-word b { color: var(--gold); font-weight: 800; }
.status { display: flex; align-items: center; gap: 18px; font: 600 18px/1 var(--disp); letter-spacing: 0.08em; color: var(--ink-soft); }
.status svg { width: 24px; height: 24px; }
.pad { display: inline-flex; align-items: center; gap: 7px; color: var(--azure); text-transform: uppercase; font-size: 14px; letter-spacing: 0.14em; animation: padIn 0.5s var(--ease); }
@keyframes padIn { from { opacity: 0; transform: translateY(-6px); } }
.sound { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); transition: background 0.2s, color 0.2s; }
.sound:hover, .sound:focus-visible { background: rgba(255, 255, 255, 0.1); color: var(--ink); outline: none; }
.sound .x { display: none; }
.sound[aria-pressed='false'] .w1, .sound[aria-pressed='false'] .w2 { display: none; }
.sound[aria-pressed='false'] .x { display: inline; }
.clock { font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: 0.06em; color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.hub { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.hero { flex: 1; display: flex; align-items: center; padding: clamp(10px, 3vh, 40px) var(--pad-r) clamp(8px, 2vh, 24px) var(--pad); }
.info { width: min(600px, 46vw); animation: infoIn 0.7s var(--ease) both; }
.info.swap { animation: infoIn 0.5s var(--ease) both; }
@keyframes infoIn { from { opacity: 0; transform: translateX(-26px); } }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 700 14px/1 var(--disp); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.badge { padding: 5px 9px 4px; border-radius: 5px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); letter-spacing: 0.16em; box-shadow: 0 0 18px rgba(255, 190, 60, 0.4); }
.badge.dim { background: rgba(255, 255, 255, 0.12); color: var(--ink); box-shadow: none; }

/* the game's own logo */
.logo { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; line-height: 0.9; font-weight: 400; }
.logo .lg-a { font: 900 italic clamp(70px, 7.4vw, 138px)/0.95 var(--logo); letter-spacing: -0.01em; padding: 0 0.12em 0.1em 0; background: linear-gradient(100deg, #f4ad38 0%, #ffe9a6 28%, #ffffff 36%, #ffe9a6 44%, #f2a534 68%, #e0861d 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #0a1440) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5)); animation: shine 6s ease-in-out infinite; }
@keyframes shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.logo .lg-b { display: flex; align-items: center; gap: 0.5em; margin-top: 0.02em; padding-left: 0.18em; font: 800 italic clamp(22px, 2.2vw, 40px)/1 var(--disp); letter-spacing: 0.6em; color: #fff; text-shadow: 0 3px 0 #0a1440, 0 0 20px rgba(80, 140, 255, 0.55); }
.logo .lg-b i { display: block; width: 2.4em; height: 0.11em; background: linear-gradient(90deg, var(--gold), transparent); transform: skewX(-20deg); }
.logo .lg-b i:first-child { display: none; }
.logo .lg-b i:last-child { margin-left: -0.6em; }
.soon-title { margin: 6px 0 4px; font: 800 italic clamp(64px, 7vw, 128px)/0.9 var(--disp); letter-spacing: 0.01em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(240, 244, 255, 0.85); text-shadow: 0 0 40px rgba(110, 140, 255, 0.35); }

.desc { max-width: 34em; margin: 14px 0 0; font: 500 clamp(16px, 1.12vw, 20px)/1.5 var(--body); color: var(--ink-soft); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { padding: 7px 13px 6px; border: 1px solid var(--stroke); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 14px/1 var(--disp); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3.2vh, 34px); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 60px; padding: 0 34px 0 20px; border-radius: 14px; font: 800 26px/1 var(--disp); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; outline: none; transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, color 0.2s; }
.btn.primary { min-width: 220px; color: var(--gold-ink); background: linear-gradient(180deg, #fff0bf 0%, #ffd062 40%, #ffad2a 100%); box-shadow: 0 12px 34px rgba(255, 164, 32, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(160, 80, 0, 0.35); }
.btn.primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 62%); background-size: 300% 100%; animation: sweep 3.8s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
.btn.ghost { color: var(--ink); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* time-of-day thumbnails */
.moods { display: flex; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.mood { display: flex; flex-direction: column; gap: 7px; width: clamp(96px, 6.6vw, 118px); text-align: left; outline: none; border-radius: 10px; transition: transform 0.2s var(--ease); }
.mood img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; border: 2px solid rgba(255, 255, 255, 0.14); transition: border-color 0.2s, box-shadow 0.2s; }
.mood span { overflow: hidden; text-overflow: ellipsis; font: 700 13px/1 var(--disp); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); transition: color 0.2s; }
.mood.on img { border-color: var(--gold); }
.mood.on span { color: var(--gold-hi); }

/* ------------------------------------------------------------------ library row */
.library { padding: 0 var(--pad-r) 6px var(--pad); }
.library h2 { margin: 0; font: 700 15px/1 var(--disp); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }
.library .count { margin-left: 12px; letter-spacing: 0.12em; color: var(--ink-faint); }
.row { display: flex; gap: clamp(14px, 1.4vw, 22px); margin: 0 -12px; padding: 18px 12px 44px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.tile { position: relative; flex: none; width: var(--tile); aspect-ratio: 1; border-radius: 18px; scroll-snap-align: start; outline: none; transition: transform 0.22s var(--ease), box-shadow 0.22s; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(0deg, rgba(4, 6, 20, 0.85) 0%, transparent 55%); }
.t-logo { position: absolute; left: 11%; bottom: 9%; display: flex; flex-direction: column; line-height: 0.85; }
.t-logo b { font: 900 italic calc(var(--tile) * 0.2) / 1 var(--logo); background: linear-gradient(100deg, #f4ad38, #ffe9a6 40%, #f2a534); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #0a1440); }
.t-logo i { font: 800 italic calc(var(--tile) * 0.085) / 1 var(--disp); letter-spacing: 0.5em; color: #fff; margin-top: 2px; }
.tile.soon { background: linear-gradient(150deg, #1b2148 0%, #0d1028 55%, #090b1a 100%); border: 1px solid rgba(160, 180, 255, 0.12); color: var(--ink-faint); }
.tile.soon::before { background: radial-gradient(circle at 30% 20%, rgba(120, 150, 255, 0.18), transparent 60%); }
.tile.soon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 5s ease-in-out infinite; }
.t-no { position: absolute; left: 12%; top: 8%; font: 800 italic calc(var(--tile) * 0.42) / 1 var(--disp); color: transparent; -webkit-text-stroke: 1.5px rgba(210, 222, 255, 0.28); }
.t-lock { position: absolute; right: 12%; bottom: 12%; width: 22%; height: 22%; color: rgba(210, 222, 255, 0.5); }
.t-cap { position: absolute; left: 2px; top: calc(100% + 12px); display: flex; flex-direction: column; gap: 4px; text-align: left; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.t-name { font: 700 18px/1 var(--disp); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.t-tag { font: 600 12px/1 var(--disp); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-hi); }
.tile.soon .t-tag { color: var(--ink-faint); }
.tile.on .t-cap, .tile.focus .t-cap { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ focus (console style) */
.nav.focus { z-index: 2; }
.btn.focus { transform: scale(1.05); }
.btn.primary.focus { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(89, 187, 255, 0.35), 0 14px 40px rgba(255, 164, 32, 0.5); }
.btn.ghost.focus { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px #fff, 0 0 26px var(--glow); }
.mood.focus { transform: translateY(-3px) scale(1.06); }
.mood.focus img { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 22px var(--glow); }
.mood.focus span { color: var(--ink); }
.tile.focus { transform: translateY(-6px) scale(1.09); box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(89, 187, 255, 0.3), 0 22px 44px rgba(0, 0, 0, 0.6), 0 0 40px var(--glow); }
.tile.on:not(.focus) { box-shadow: 0 0 0 2px rgba(255, 197, 61, 0.7), 0 10px 26px rgba(0, 0, 0, 0.45); }
:focus-visible { outline: none; }

/* ------------------------------------------------------------------ button prompts */
.prompts { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px var(--pad-r) max(14px, env(safe-area-inset-bottom)) var(--pad); border-top: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgba(5, 6, 13, 0.2), rgba(5, 6, 13, 0.75)); }
.copy { font: 600 12px/1 var(--disp); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.pr-list { display: flex; align-items: center; gap: 22px; }
.pr { display: inline-flex; align-items: center; gap: 9px; font: 600 16px/1 var(--disp); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.glyph { display: inline-grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px; background: linear-gradient(180deg, #fbfcff, #d6dcea); color: #10173a; font: 800 14px/1 var(--disp); letter-spacing: 0.04em; box-shadow: 0 2px 0 #8792b4, 0 4px 9px rgba(0, 0, 0, 0.35); text-shadow: none; }
.glyph:empty { display: none; }
.glyph.pad-btn { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 50%; color: #fff; font-size: 16px; background: radial-gradient(circle at 35% 28%, var(--g1), var(--g2) 62%, var(--g3)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.glyph.ga { --g1: #a3f17f; --g2: #4cb52a; --g3: #2b7514; }
.glyph.gb { --g1: #ff9d93; --g2: #e23b30; --g3: #961c14; }
.glyph.gy { --g1: #ffe68f; --g2: #f0b417; --g3: #a67804; color: #2a1d00; text-shadow: none; }
.glyph.gps { --g1: #59617d; --g2: #252b3f; --g3: #131726; }
.glyph.dpad { --g1: #59617d; --g2: #252b3f; --g3: #131726; }
.glyph svg { width: 18px; height: 18px; }
.btn .glyph { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
body[data-dev='touch'] .pr-list, body[data-dev='touch'] .btn .glyph, body[data-dev='touch'] .g-foot .pr:first-child .glyph { display: none; }

/* ------------------------------------------------------------------ gallery */
.gallery { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 1fr auto auto; gap: 16px; padding: max(24px, env(safe-area-inset-top)) var(--pad-r) max(16px, env(safe-area-inset-bottom)) var(--pad); background: rgba(3, 4, 10, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.g-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.g-img { max-width: 100%; max-height: calc(100% - 40px); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); animation: imgIn 0.4s var(--ease); }
@keyframes imgIn { from { opacity: 0.2; transform: scale(0.97); } }
.g-cap { margin: 0; font: 700 18px/1 var(--disp); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-hi); }
.g-thumbs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.g-thumb { width: clamp(76px, 9vw, 140px); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.15); outline: none; transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-thumb.on { border-color: var(--gold); }
.g-thumb.focus { transform: scale(1.08); border-color: #fff; box-shadow: 0 0 22px var(--glow); }
.g-foot { display: flex; justify-content: center; gap: 26px; }
.g-close { cursor: pointer; }

/* ------------------------------------------------------------------ launch */
.launch { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 30px; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s 0.45s; background: radial-gradient(ellipse at 50% 45%, rgba(10, 20, 64, 0.55), rgba(3, 4, 12, 0.92) 70%); }
.launch .logo { align-items: center; transform: scale(0.9); transition: transform 0.9s var(--ease); }
.launch .logo .lg-a { font-size: clamp(72px, 12vw, 156px); padding: 0 0.12em 0.08em; }
.launch .logo .lg-b { font-size: clamp(24px, 3.6vw, 46px); padding-left: 0.6em; }
.launch .logo .lg-b i:first-child { display: block; background: linear-gradient(90deg, transparent, var(--gold)); }
.launch-bar { width: min(280px, 60vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.launch-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
body.launching .launch { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
body.launching .launch .logo { transform: none; }

/* ------------------------------------------------------------------ boot */
.boot { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px; background: #000; animation: bootOut 0.45s ease 1.15s forwards; }
.boot-mark svg { width: 86px; height: 86px; filter: drop-shadow(0 0 22px rgba(255, 190, 60, 0.6)); animation: markIn 0.9s var(--ease) both; }
@keyframes markIn { from { opacity: 0; transform: scale(0.6) rotate(-30deg); } }
.boot-word { font-size: 30px; letter-spacing: 0.3em; padding-left: 0.3em; animation: wordIn 0.8s ease 0.35s both; }
@keyframes wordIn { from { opacity: 0; letter-spacing: 0.7em; } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }
.no-boot .boot, .boot.skip { display: none; }

/* ------------------------------------------------------------------ tablets and phones */
@media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
  .info { width: min(520px, 52vw); }
  .moods { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  body { min-height: 100svh; }
  .bg { position: absolute; bottom: auto; height: 66svh; }
  .bg-art img { object-position: 74% 42%; }
  .bg-shade { background: linear-gradient(180deg, rgba(5, 6, 13, 0.55) 0%, transparent 18%, transparent 46%, rgba(5, 6, 13, 0.85) 80%, var(--bg) 100%); }
  .hero { align-items: flex-end; padding-top: 36svh; }
  .info { width: 100%; max-width: 640px; }
  .logo .lg-a { font-size: clamp(56px, 15vw, 120px); }
  .logo .lg-b { font-size: clamp(18px, 4.6vw, 34px); }
  .soon-title { font-size: clamp(54px, 15vw, 110px); }
  .desc { font-size: clamp(15px, 3.9vw, 19px); }
  .actions .btn.primary { flex: 1; }
  .moods { overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
  .moods::-webkit-scrollbar { display: none; }
  .mood { flex: none; width: clamp(92px, 26vw, 140px); }
  .library { padding-top: 14px; }
  :root { --tile: clamp(104px, 28vw, 168px); }
}
@media (max-width: 520px) {
  .brand .word { font-size: 20px; }
  .status { gap: 10px; }
  .pad-label { display: none; }
  .chips li { font-size: 12.5px; padding: 6px 10px 5px; }
  .btn { height: 54px; font-size: 22px; padding: 0 22px 0 16px; }
  .btn.primary { min-width: 0; }
  .prompts { justify-content: center; }
}
@media (max-height: 760px) and (min-aspect-ratio: 1/1) {
  .moods { display: none; }
}
@media (max-height: 1000px) and (min-aspect-ratio: 1/1) {
  :root { --tile: clamp(88px, 14vh, 150px); }
  .hero { padding-top: 1.5vh; padding-bottom: 0.5vh; }
  .logo .lg-a { font-size: clamp(56px, 12vh, 112px); }
  .logo .lg-b { font-size: clamp(18px, 3.4vh, 32px); }
  .soon-title { font-size: clamp(56px, 12vh, 112px); }
  .desc { margin-top: 1.2vh; font-size: clamp(15px, 2.1vh, 18px); }
  .chips { margin-top: 1.6vh; }
  .actions { margin-top: 2.6vh; }
  .btn { height: clamp(48px, 7vh, 60px); font-size: clamp(20px, 3vh, 26px); }
  .moods { margin-top: 2.4vh; }
  .mood { width: clamp(96px, 11vh, 110px); }
  .row { padding-top: 1.6vh; padding-bottom: 50px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 1/1) {
  :root { --tile: clamp(70px, 17vh, 120px); }
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  .brand .mark { width: 24px; height: 24px; }
  .brand .word { font-size: 19px; }
  .clock { font-size: 18px; }
  .hero { padding-top: 4px; padding-bottom: 2px; }
  .kicker { font-size: 12px; margin-bottom: 2px; }
  .logo .lg-a { font-size: clamp(42px, 13vh, 74px); }
  .logo .lg-b { font-size: clamp(14px, 4vh, 22px); }
  .soon-title { font-size: clamp(42px, 13vh, 74px); }
  .desc { margin-top: 6px; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .chips { display: none; }
  .actions { margin-top: 12px; gap: 10px; }
  .btn { height: 44px; font-size: 19px; padding: 0 20px 0 12px; border-radius: 11px; }
  .btn.primary { min-width: 150px; }
  .glyph { min-width: 24px; height: 24px; font-size: 12px; }
  .glyph.pad-btn { width: 26px; min-width: 26px; height: 26px; font-size: 14px; }
  .moods { display: none; }
  .library h2 { display: none; }
  .row { padding: 8px 12px 10px; }
  .t-cap { display: none; }
  body[data-dev='touch'] .prompts { display: none; }
  .prompts { padding-top: 6px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .pr { font-size: 14px; }
}
@media (min-width: 1800px) {
  .info { width: min(720px, 40vw); }
  .btn { height: 68px; font-size: 30px; }
  .chips li { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .boot { display: none; }
}