@font-face { font-family: 'Lilita One'; src: url('fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------------------------------------------------------------- tokens (dark by default, light on request) */
:root {
  /* the tile fits the height that is left after the top bar, the title, the dock and the hints */
  --tile-fit: calc(var(--app-h) - 290px);
  --bg: #12121a;
  --bg2: #1b1b27;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-hi: rgba(255, 255, 255, 0.12);
  --ink: #f4f3fa;
  --ink-2: #a9a7bd;
  --ring: #3ad3ff;
  --ring-2: #7cf0ff;
  --accent: #ffcc4d;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --tile: clamp(96px, min(22vw, var(--tile-fit)), 300px);
  --app-h: 100dvh;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) { --bg: #eceef3; --bg2: #ffffff; --panel: rgba(20, 24, 40, 0.06); --panel-hi: rgba(20, 24, 40, 0.1); --ink: #1d2030; --ink-2: #646a80; --ring: #12a6e8; --ring-2: #47c9ff; --shadow: 0 14px 30px rgba(30, 36, 60, 0.22); color-scheme: light; }
}
:root[data-theme='light'] { --bg: #eceef3; --bg2: #ffffff; --panel: rgba(20, 24, 40, 0.06); --panel-hi: rgba(20, 24, 40, 0.1); --ink: #1d2030; --ink-2: #646a80; --ring: #12a6e8; --ring-2: #47c9ff; --shadow: 0 14px 30px rgba(30, 36, 60, 0.22); color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- background: the selected game's art, blurred and tinted */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.bg-art {
  position: absolute; inset: -8%; background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.25); opacity: 0; transform: scale(1.06);
  transition: opacity 0.7s ease, transform 4s ease;
}
.bg-art.on { opacity: 0.55; transform: scale(1); }
:root[data-theme='light'] .bg-art.on { opacity: 0.32; }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .bg-art.on { opacity: 0.32; } }
.bg-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, transparent 0%, var(--bg) 92%),
    linear-gradient(to bottom, transparent 55%, var(--bg) 100%);
}

/* ---------------------------------------------------------------- layout */
#home {
  position: relative; z-index: 1; height: var(--app-h); display: grid;
  grid-template-rows: auto 1fr auto auto;
  /* the shelf scrolls inside its column; it must never widen the page */
  grid-template-columns: minmax(0, 1fr);
  padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profiles { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(from 200deg, #ff5f8a, #ffb44d, #6ee7a6, #3ad3ff, #a77bff, #ff5f8a);
  padding: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.avatar:hover { transform: scale(1.07); }
.avatar .face {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg2); font-family: 'Lilita One', sans-serif; font-size: 20px; color: var(--ink);
}
.hello { color: var(--ink-2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hello b { color: var(--ink); }
.status { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ico { width: 20px; height: 20px; fill: currentColor; }
.wifi.off { opacity: 0.3; }
.battery { display: inline-flex; align-items: center; gap: 6px; }
.battery .cell { width: 28px; height: 13px; border: 2px solid currentColor; border-radius: 4px; padding: 1px; position: relative; }
.battery .cell::after { content: ''; position: absolute; right: -5px; top: 3px; width: 3px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }
.battery .cell i { display: block; height: 100%; width: 50%; background: currentColor; border-radius: 1px; }
.battery.low .cell i { background: #ff5a6a; }

/* ---------------------------------------------------------------- the shelf */
.stage { display: flex; flex-direction: column; justify-content: center; min-height: 0; min-width: 0; gap: clamp(2px, 1vh, 10px); }
.now { padding-left: 4px; min-height: 64px; text-align: center; }
.now h1 { margin: 0; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(26px, 4.6vh, 44px); letter-spacing: 0.5px; line-height: 1.05; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.35); }
.now p { margin: 4px 0 0; color: var(--ink-2); font-size: clamp(13px, 2.1vh, 17px); }
.now.swap h1, .now.swap p { animation: rise 0.35s ease both; }
.now.swap p { animation-delay: 0.05s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.shelf {
  display: flex; gap: clamp(14px, 2vw, 26px); align-items: center;
  overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* generous padding inside the scroller so the focus ring and the tiles' shadows are never clipped */
  padding: 34px 56px 38px; margin: -16px -56px; outline: none; scrollbar-width: none;
  justify-content: safe center;
}
.shelf::-webkit-scrollbar { display: none; }
.tile {
  position: relative; flex: none; width: var(--tile); aspect-ratio: 1; border-radius: 22px; scroll-snap-align: center;
  background: var(--bg2) center / cover no-repeat; box-shadow: var(--shadow);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.25), box-shadow 0.22s ease;
  overflow: visible;
}
.tile .art { position: absolute; inset: 0; border-radius: inherit; background: inherit; overflow: hidden; }
.tile .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent 45%); }
.tile .label {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1;
  font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(16px, calc(var(--tile) * 0.12), 30px); color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.5); line-height: 1;
}
.tile .badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: #12121a; background: var(--accent);
}
.tile.sel { transform: scale(1.08); }
.tile.sel::before {
  content: ''; position: absolute; inset: -7px; border-radius: 28px; border: 4px solid var(--ring);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 26px var(--ring);
  animation: ring 1.6s ease-in-out infinite;
}
@keyframes ring { 0%, 100% { border-color: var(--ring); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 18px var(--ring); } 50% { border-color: var(--ring-2); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 0 34px var(--ring-2); } }
.tile.locked .art { filter: grayscale(0.7) brightness(0.65); }
.tile.locked .lock { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: 13px; color: #fff; letter-spacing: 1px; text-transform: uppercase; }
.tile.locked .lock span { padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); }
.tile:active { transform: scale(1.03); }

/* ---------------------------------------------------------------- dock */
.dock {
  justify-self: center; display: flex; align-items: center; gap: clamp(10px, 2vw, 22px);
  padding: 10px 22px; border-radius: 99px; background: var(--panel); backdrop-filter: blur(14px);
  margin: clamp(8px, 2vh, 18px) 0 8px;
}
.sys {
  width: clamp(40px, 6.5vh, 54px); height: clamp(40px, 6.5vh, 54px); border-radius: 50%; display: grid; place-items: center;
  background: var(--bg2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, background 0.15s ease;
}
.sys svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sys circle { fill: currentColor; stroke: none; }
.sys:hover, .sys.sel { transform: translateY(-2px) scale(1.06); background: var(--panel-hi); }
.sys.sel { box-shadow: 0 0 0 3px var(--ring), 0 0 18px var(--ring); }
.sys.muted .wave { opacity: 0.15; }
.sys[data-sys='news'] { color: #39c86a; }
.sys[data-sys='controls'] { color: #ff6b6b; }
.sys[data-sys='theme'] { color: #a77bff; }
.sys[data-sys='sound'] { color: #3ab4ff; }
.sys[data-sys='fullscreen'] { color: #ffae35; }
.sys[data-sys='install'] { color: #19c3b0; }
.sys.brand { width: auto; padding: 0 14px; border-radius: 99px; font-family: 'Lilita One', sans-serif; font-size: 15px; letter-spacing: 1px; color: var(--ink); background: linear-gradient(135deg, rgba(58, 211, 255, 0.22), rgba(167, 123, 255, 0.22)); }

/* ---------------------------------------------------------------- hints */
.hints { display: flex; justify-content: flex-end; gap: 18px; font-size: 14px; color: var(--ink-2); min-height: 26px; align-items: center; }
.hints .k { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-right: 6px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 900; }

/* ---------------------------------------------------------------- sheets (news, controls, about) */
.sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(6, 6, 12, 0.55); backdrop-filter: blur(6px); padding: 20px; }
.sheet[hidden] { display: none; }
.sheet-card { width: min(560px, 100%); max-height: calc(var(--app-h) - 40px); overflow: auto; border-radius: 22px; background: var(--bg2); padding: 22px 24px; box-shadow: var(--shadow); animation: rise 0.25s ease both; }
.sheet-card h2 { margin: 0 0 10px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 28px; }
.sheet-card p, .sheet-card li { color: var(--ink-2); font-weight: 600; line-height: 1.45; }
.sheet-card b { color: var(--ink); }
.sheet-card ul { padding-left: 20px; }
.sheet-card .close { margin-top: 14px; padding: 10px 22px; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 900; }
.name-row { display: flex; gap: 10px; margin-top: 8px; }
.name-row input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--panel-hi); background: var(--bg); color: var(--ink); font: inherit; }

/* ---------------------------------------------------------------- launch: the tile grows to fill the screen */
.launch { position: fixed; z-index: 30; border-radius: 22px; background: center / cover no-repeat; transition: all 0.42s cubic-bezier(0.6, 0, 0.3, 1); pointer-events: none; }
.launch.go { left: 0 !important; top: 0 !important; width: 100vw !important; height: var(--app-h) !important; border-radius: 0; filter: brightness(0.35); }

/* ---------------------------------------------------------------- phones */
@media (max-height: 480px) {
  :root { --tile-fit: calc(var(--app-h) - 196px); --tile: clamp(90px, min(24vw, var(--tile-fit)), 190px); }
  .now { min-height: 0; }
  .now h1 { font-size: 24px; }
  .now p { font-size: 13px; margin-top: 2px; }
  .sys { width: 40px; height: 40px; }
  .hints { display: none; }
  #home { padding-top: max(8px, env(safe-area-inset-top)); }
  .avatar { width: 38px; height: 38px; }
  .dock { padding: 6px 16px; margin: 6px 0 2px; }
}
@media (orientation: portrait) and (max-width: 700px) {
  :root { --tile: clamp(130px, 44vw, 220px); }
  #home { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .stage { justify-content: center; }
  .now { padding: 0 6px; }
  .hints { justify-content: center; text-align: center; }
  .dock { gap: 6px; padding: 7px 10px; max-width: 100%; }
  .sys { width: 38px; height: 38px; }
  .sys.brand { padding: 0 10px; font-size: 13px; }
  .status { gap: 9px; font-size: 15px; }
}
@media (max-width: 520px) {
  .hello { display: none; }
  .battery .pct { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}