@layer base, layout, components, themes, responsive;
@layer base {
  :root { --bg:#f7f8fa; --surface:#fff; --ink:#252b36; --muted:#757d89; --line:#e9ebef; --accent:#e7462d; --accent-soft:#fff0eb; --accent-ink:#fff; --hero-bg:#dfeef4; --hero-ink:#263742; --hero-muted:#4c6371; --radius:20px; --shadow:0 16px 48px #2939550c; --sidebar:216px; --font:Inter,"Avenir Next","Segoe UI","PingFang SC","Hiragino Sans","Noto Sans Arabic",system-ui,sans-serif; color-scheme:light; }
  * { box-sizing:border-box; }
  body { margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.6; }
  button,input,select { font:inherit; } button,a,select { -webkit-tap-highlight-color:transparent; }
  button { cursor:pointer; color:inherit; } button { border:0; background:none; } a { color:inherit; text-decoration:none; }
  h1,h2,h3,p { margin:0; } button:disabled { cursor:default; opacity:.65; }
  img { display:block; max-width:100%; } svg { width:20px; height:20px; display:block; flex-shrink:0; }
  button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
  [hidden] { display:none!important; }
  .skip-link { position:fixed; inset-block-start:-60px; inset-inline-start:12px; z-index:100; background:var(--surface); padding:12px; } .skip-link:focus { inset-block-start:12px; }
  html { scroll-behavior:smooth; } ::selection { background:var(--accent-soft); }
}
@layer layout {
  .sidebar { position:fixed; inset-block:0; inset-inline-start:0; width:var(--sidebar); background:var(--surface); border-inline-end:1px solid var(--line); display:flex; flex-direction:column; padding:30px 19px 20px; z-index:5; }
  .mobile-brand,.mobile-nav { display:none; }
  .workspace { margin-inline-start:var(--sidebar); }
  .topbar { height:84px; display:flex; align-items:center; gap:32px; padding-inline:36px; border-block-end:1px solid var(--line); background:var(--surface); }
  main { max-width:1520px; padding:32px 36px 0; margin-inline:auto; }
  .welcome { display:flex; align-items:center; justify-content:space-between; margin-block-end:23px; gap:16px; }
  .hero { position:relative; overflow:hidden; border-radius:24px; min-height:336px; background:var(--hero-bg); isolation:isolate; }
  .hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
  .hero-scrim { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--hero-bg) 0%,color-mix(in srgb,var(--hero-bg) 94%,transparent) 24%,color-mix(in srgb,var(--hero-bg) 20%,transparent) 52%,transparent 68%); }
  [dir=rtl] .hero-scrim { transform:scaleX(-1); } [dir=rtl] .hero>img { transform:scaleX(-1); }
  .hero-copy { padding:31px 38px 26px; position:relative; width:54%; color:var(--hero-ink); }
  .theme-ribbon { display:flex; align-items:center; gap:22px; margin-block:19px 33px; }
  .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:19px; }
  .game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 20px; }
  .editorial { display:flex; overflow:hidden; position:relative; border-radius:var(--radius); background:var(--surface); margin-block:36px; min-height:222px; border:1px solid var(--line); }
  footer { display:flex; align-items:center; gap:22px; border-block-start:1px solid var(--line); padding-block:24px; color:var(--muted); font-size:12px; }
}
@layer components {
  .brand { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:850; letter-spacing:-1.15px; margin-block-end:42px; }
  .brand-symbol { display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); height:36px; width:36px; border-radius:12px; font-size:39px; line-height:1; font-weight:850; position:relative; padding-block-end:5px; letter-spacing:-2px; flex-shrink:0; }
  .brand-symbol>span { position:absolute; width:8px; height:8px; background:#ffd070; border-radius:50%; inset-block-start:-3px; inset-inline-end:-2px; border:2px solid var(--surface); }
  .brand-caption { display:block; font-size:9px; font-weight:500; color:var(--muted); letter-spacing:.15px; margin-block-start:3px; }
  .side-label { font-size:10px; color:var(--muted); font-weight:650; letter-spacing:1px; padding-inline:14px; margin-block-end:13px; }
  .main-nav,.category-nav { display:grid; gap:6px; }
  .nav-button { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; text-align:start; font-size:13px; font-weight:550; color:var(--muted); min-height:45px; }
  .nav-button.selected { background:var(--accent-soft); color:var(--accent); font-weight:700; }
  .nav-button:hover,.category-nav button:hover { background:var(--accent-soft); }
  .nav-dot { margin-inline-start:auto; width:5px; height:5px; background:var(--accent); border-radius:50%; }
  .count { margin-inline-start:auto; color:var(--muted); font-size:10px; background:var(--bg); min-width:20px; border-radius:6px; text-align:center; }
  .category-label { margin-block-start:33px; }
  .category-nav button { display:flex; align-items:center; gap:12px; text-align:start; padding:9px 14px; border-radius:10px; color:var(--muted); font-size:12px; }
  .category-symbol { display:grid; place-items:center; width:23px; height:23px; font-size:20px; line-height:1; }
  .coral { color:#e96957; }.purple { color:#9780c5; }.green { color:#66a582; }.blue { color:#6c9fc9; }.ochre { color:#cfa86b; }
  .sidebar-bottom { margin-block-start:auto; padding-block-start:25px; }
  .little-world { padding:18px 15px 15px; border-radius:16px; background:var(--bg); border:1px solid var(--line); width:100%; text-align:start; position:relative; overflow:hidden; }
  .little-world>strong { display:block; font-size:12px; margin-block:14px 4px; }.little-world>span:not(.world-orb):not(.world-link) { font-size:10px; color:var(--muted); }
  .world-orb { display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border-radius:50%; width:38px; height:38px; font-size:27px; }
  .world-link { display:block; color:var(--accent); margin-block-start:12px; font-size:10px; font-weight:650; }
  .sidebar-note { margin-block-start:19px; font-size:9px; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--muted); }
  .online-dot { width:6px; height:6px; background:#619b77; border-radius:50%; display:inline-block; flex-shrink:0; }
  .breadcrumb { display:flex; gap:10px; color:var(--muted); font-size:12px; align-items:center; flex-shrink:0; }.breadcrumb svg { width:17px; }
  .searchbox { max-width:430px; width:100%; display:flex; align-items:center; gap:11px; padding:10px 14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; margin-inline-start:auto; color:var(--muted); }
  .searchbox input { background:none; border:0; outline:none; width:100%; min-width:0; color:var(--ink); font-size:12px; }.searchbox input::placeholder { color:var(--muted); } .searchbox:focus-within { border-color:var(--accent); }
  kbd { font:11px var(--font); padding:0 5px; border:1px solid var(--line); border-radius:4px; color:var(--muted); }
  .top-actions { display:flex; align-items:center; gap:15px; flex-shrink:0; }.icon-button { display:grid; place-items:center; min-width:36px; height:36px; border-radius:10px; color:var(--muted); }.icon-button:hover { background:var(--accent-soft); color:var(--accent); }
  .language-control { display:flex; align-items:center; gap:7px; color:var(--muted); }.language-control select { border:0; background:var(--surface); color:var(--ink); max-width:102px; font-size:11px; cursor:pointer; padding:5px 0; }
  .avatar { height:32px; width:32px; display:grid; place-items:center; border-radius:50%; background:#f9e9d1; color:#a67d4e; font-size:19px; }
  .eyebrow { font-size:9px; letter-spacing:1.7px; font-weight:700; color:var(--muted); margin-block-end:7px; }.welcome h1 { font-size:27px; letter-spacing:-.8px; font-weight:750; line-height:1.4; }.heading-spark { display:inline-block; margin-inline-start:12px; color:var(--accent); font-size:27px; font-weight:400; }
  .welcome-note { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:7px; margin-block-start:20px; }
  .hero-label { display:inline-flex; align-items:center; gap:7px; padding:4px 9px; font-size:8px; font-weight:750; letter-spacing:1.2px; border:1px solid color-mix(in srgb,var(--hero-ink) 15%,transparent); border-radius:6px; margin-block-end:15px; }.tiny-star { color:var(--accent); font-size:13px; }
  .hero h2 { font-size:46px; line-height:1.12; letter-spacing:-1.5px; font-weight:850; }.hero p { margin-block:13px 18px; color:var(--hero-muted); font-size:12px; line-height:1.8; }
  .primary-button { background:var(--accent); color:var(--accent-ink); padding:12px 18px; min-height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:12px; font-weight:700; box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 14%,transparent); transition:transform .18s,filter .18s; }.primary-button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.04); }.primary-button svg { width:16px; height:16px; }.button-arrow { padding-inline-start:8px; font-size:17px; }
  .secondary-button { padding:10px 15px; min-height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:12px; }
  .secondary-button:hover { background:var(--bg); }.secondary-button svg { width:17px; }
  .share-url { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--bg); margin-block-start:14px; font-size:12px; }
  .hero-footnote { display:flex; align-items:center; gap:6px; font-size:9px; margin-block-start:15px; color:var(--hero-muted); }.hero-footnote svg { height:13px; width:13px; }
  .hero-stamp { position:absolute; inset-block-start:25px; inset-inline-end:24px; width:74px; height:74px; border-radius:50%; border:1px dashed color-mix(in srgb,var(--hero-ink) 40%,transparent); display:grid; align-content:center; justify-items:center; transform:rotate(12deg); color:var(--hero-ink); background:color-mix(in srgb,var(--hero-bg) 60%,transparent); }.hero-stamp>span { font-size:26px; line-height:1.1; }.hero-stamp small { font-size:7px; letter-spacing:1px; text-align:center; line-height:1.3; font-weight:700; }
  .hero-index { position:absolute; inset-block-end:18px; inset-inline-end:22px; color:var(--hero-ink); font-size:9px; font-weight:650; letter-spacing:1.5px; }
  .theme-caption { font-size:10px; color:var(--muted); display:flex; align-items:center; gap:7px; white-space:nowrap; }.theme-caption svg { height:15px; width:15px; } #theme-chips { display:flex; gap:8px; flex-wrap:wrap; }.theme-chip { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:7px 12px; font-size:10px; color:var(--muted); white-space:nowrap; }.theme-chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }.theme-swatch { width:11px; height:11px; border-radius:50%; display:block; border:2px solid #ffffffa0; box-shadow:0 0 0 1px #0000000c; }
  .text-button { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); padding:6px 0; }.text-button:hover { color:var(--accent); }.theme-ribbon>.text-button { margin-inline-start:auto; white-space:nowrap; }
  .section-heading h2 { font-size:21px; letter-spacing:-.5px; font-weight:750; }.section-note { color:var(--muted); font-size:10px; }
  .filters { display:flex; gap:8px; flex-wrap:wrap; margin-block-end:21px; }.filter { border:1px solid var(--line); background:var(--surface); border-radius:9px; font-size:11px; padding:7px 13px; color:var(--muted); }.filter.active { background:var(--ink); color:var(--surface); border-color:var(--ink); }
  .game-card { border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:0 2px 4px #29395502; transition:transform .2s,box-shadow .2s; position:relative; }.game-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.game-open { display:block; width:100%; padding:0; text-align:start; }.game-cover { position:relative; overflow:hidden; aspect-ratio:1.65; background:var(--bg); }.game-cover>img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }.game-card:hover .game-cover>img { transform:scale(1.055); }.game-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 50%,#10213038); pointer-events:none; }
  .game-category { position:absolute; inset-block-start:11px; inset-inline-start:11px; z-index:1; padding:3px 8px; border-radius:6px; background:#ffffffe6; color:#3b4952; font-size:9px; font-weight:600; backdrop-filter:blur(8px); }
  .save-button { position:absolute; inset-block-start:8px; inset-inline-end:8px; z-index:2; width:29px; height:29px; padding:6px; background:#ffffffe3; border-radius:50%; color:#5a626e; box-shadow:0 1px 8px #00000010; }.save-button svg { width:17px; height:17px; }.save-button.saved { color:#d94a36; }.save-button.saved svg { fill:#d94a36; }
  .hover-play { position:absolute; inset-block-end:12px; inset-inline-end:12px; display:flex; gap:5px; align-items:center; font-size:9px; font-weight:700; color:#fff; opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; z-index:1; }.hover-play svg { height:13px; width:13px; }.game-card:hover .hover-play,.game-card:focus-within .hover-play { opacity:1; transform:none; }
  .game-meta { padding:13px 14px 14px; }.game-meta h3 { font-size:13px; letter-spacing:-.15px; margin-block-end:3px; font-weight:750; }.game-subtitle { font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.game-meta-bottom { display:flex; align-items:center; gap:6px; margin-block-start:10px; font-size:9px; color:var(--muted); }.game-meta-bottom svg { width:12px; height:12px; }.ready-badge { margin-inline-start:auto; color:#4e8361; display:flex; align-items:center; gap:4px; }.ready-badge .online-dot { width:4px; height:4px; }.preview-label { margin-inline-start:auto; color:var(--muted); font-size:8px; }
  .empty-state { text-align:center; padding:65px 20px; border:1px dashed var(--line); border-radius:var(--radius); }.empty-state>span { font-size:40px; color:var(--accent); }.empty-state h3 { margin-block:10px; }.empty-state p { color:var(--muted); margin-block-end:20px; }
  .editorial-image { width:43%; position:relative; }.editorial-image img { width:100%; height:100%; object-fit:cover; }.editorial-copy { padding:29px 34px; z-index:1; width:57%; }.editorial h2 { font-size:25px; line-height:1.4; letter-spacing:-.8px; }.editorial p { color:var(--muted); max-width:360px; font-size:11px; margin-block:10px; }.editorial .text-button { color:var(--accent); font-weight:700; }.editorial-flower { font-size:110px; position:absolute; inset-inline-end:24px; inset-block-end:-37px; color:var(--accent-soft); transform:rotate(-15deg); }
  .footer-brand { font-weight:850; font-size:18px; letter-spacing:-1px; color:var(--ink); display:flex; gap:5px; align-items:center; }.footer-brand span { color:var(--accent); font-size:21px; }footer>.text-button { margin-inline-start:auto; }.prototype-badge { font-size:9px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; white-space:nowrap; }
  dialog { padding:0; border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:24px; box-shadow:0 24px 120px #00000040; max-height:90dvh; overscroll-behavior:contain; }dialog::backdrop { background:#1b293b70; backdrop-filter:blur(7px); }.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }.dialog-heading h2 { font-size:27px; letter-spacing:-.7px; }.themes-dialog { width:min(860px,calc(100% - 32px)); padding:30px; }.dialog-intro { color:var(--muted); font-size:12px; margin-block:12px 24px; }.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.theme-option { border:1px solid var(--line); border-radius:15px; padding:0; overflow:hidden; text-align:start; position:relative; background:var(--bg); }.theme-option>img { width:100%; aspect-ratio:2.5; object-fit:cover; }.theme-option-body { padding:16px; }.theme-option h3 { display:flex; gap:8px; align-items:center; font-size:15px; }.theme-option p { font-size:11px; color:var(--muted); margin-block-start:5px; }.theme-option.active { outline:2px solid var(--accent); outline-offset:1px; }.theme-check { position:absolute; inset-block-start:10px; inset-inline-end:10px; border-radius:50%; background:var(--accent); color:var(--accent-ink); width:25px; height:25px; display:grid; place-items:center; font-size:13px; }.theme-bottom { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:10px; margin-block-start:22px; }.theme-bottom svg { width:15px; height:15px; }
  .game-dialog { width:min(560px,calc(100% - 32px)); }.game-detail-art { position:relative; }.game-detail-art>img { width:100%; height:240px; object-fit:cover; }.game-detail-art>.close-dialog { position:absolute; inset-block-start:15px; inset-inline-end:15px; background:#fffffff0; color:#334; }.game-detail-content { padding:28px; }.game-detail-content h2 { font-size:28px; line-height:1.3; margin-block:4px 12px; }.game-detail-content>p { color:var(--muted); font-size:13px; }.detail-facts { display:flex; gap:23px; margin-block:22px; color:var(--muted); font-size:11px; flex-wrap:wrap; }.detail-facts>span { display:flex; align-items:center; gap:7px; }.detail-facts svg { width:16px; height:16px; }.detail-actions { display:flex; gap:10px; }.game-detail-content .build-status { font-size:10px; margin-block-start:15px; }
  .player-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; background:#131922; }.player-topbar { height:66px; padding-inline:22px; display:flex; align-items:center; justify-content:space-between; gap:15px; background:var(--surface); }.player-topbar>strong { font-size:14px; }.player-controls { display:flex; gap:10px; }.player-stage { position:relative; height:calc(100dvh - 106px); background:#101720; display:grid; place-items:center; }.player-stage iframe { width:100%; height:100%; border:0; display:block; background:#101720; }.player-loading { position:absolute; inset:0; z-index:2; background:#101720; color:#e3e9ed; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; }.player-loading>span:not(.loader) { color:#93a1ae; font-size:12px; }.player-loading p { font-size:12px; color:#bdc7cd; }.loader { width:34px; height:34px; border:3px solid #ffffff15; border-block-start-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; }.player-bottom { display:flex; align-items:center; gap:8px; height:40px; padding-inline:22px; background:var(--surface); font-size:10px; color:var(--muted); }.player-bottom svg { width:14px; }.player-bottom .online-dot { margin-inline-start:auto; }
  .about-dialog { width:min(540px,calc(100% - 32px)); padding:28px; }.about-dialog p { font-size:13px; color:var(--muted); margin-block-start:20px; }
  .toast { position:fixed; inset-block-end:24px; inset-inline-start:50%; transform:translate(-50%,10px); padding:12px 22px; background:var(--ink); color:var(--surface); border-radius:12px; z-index:50; box-shadow:var(--shadow); font-size:12px; pointer-events:none; opacity:0; transition:.2s; white-space:nowrap; }.toast.visible { opacity:1; transform:translate(-50%,0); }[dir=rtl] .toast { transform:translate(50%,10px); }[dir=rtl] .toast.visible { transform:translate(50%,0); }
  @keyframes spin { to { transform:rotate(360deg); } }
}
@layer themes {
  [data-theme=forest] { --bg:#f3f4ed; --surface:#fffdf7; --ink:#2e4236; --muted:#6f7c6a; --line:#e4e7da; --accent:#386b4b; --accent-soft:#e8efe0; --hero-bg:#dce5c8; --hero-ink:#2b452f; --hero-muted:#52684c; --radius:23px; }
  [data-theme=forest] .hero { border-radius:30px 30px 60px 30px; }[data-theme=forest] .primary-button { border-radius:22px; }[data-theme=forest] .game-card { border-radius:19px; }
  [data-theme=neon] { --bg:#10121d; --surface:#191c2b; --ink:#eff0fa; --muted:#a0a4be; --line:#2a2e43; --accent:#c3f36a; --accent-soft:#28322a; --accent-ink:#18231a; --hero-bg:#11132b; --hero-ink:#f1f2ff; --hero-muted:#c0c1da; --shadow:0 10px 32px #00000035; color-scheme:dark; --radius:14px; }
  [data-theme=neon] .hero { border:1px solid #3e4262; border-radius:16px; }[data-theme=neon] .primary-button { border-radius:9px; }[data-theme=neon] .hero h2 { text-shadow:0 0 25px #c3f36a14; }[data-theme=neon] .avatar { background:#35304b; color:#d4bfff; }[data-theme=neon] .game-card { border-radius:12px; }[data-theme=neon] .game-card:hover { border-color:#637947; }[data-theme=neon] .ready-badge { color:#b4d887; }[data-theme=neon] .filter.active { color:#191c2b; }[data-theme=neon] .editorial { background:#1c2130; }
  [data-theme=paper] { --bg:#f6f2ea; --surface:#fffcf6; --ink:#3c4140; --muted:#777a70; --line:#e5e0d5; --accent:#b74735; --accent-soft:#f7e8df; --hero-bg:#f0e9d9; --hero-ink:#3b4844; --hero-muted:#626c62; --radius:9px; }
  [data-theme=paper] .hero { border-radius:7px; border:1px solid var(--line); }[data-theme=paper] .hero h2,[data-theme=paper] .editorial h2 { font-family:"Iowan Old Style","Songti SC","Hiragino Mincho ProN",serif; font-weight:700; }[data-theme=paper] .game-card { border-radius:8px; }[data-theme=paper] .primary-button { border-radius:6px; }[data-theme=paper] .sidebar { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='.35' fill='%23907d62' opacity='.15'/%3E%3C/svg%3E"); }
}
@layer responsive {
  @media(min-width:1650px) { .hero { min-height:395px; }.hero-copy { padding:42px 45px; }.hero h2 { font-size:56px; }.game-grid { gap:26px; }.game-meta h3 { font-size:15px; } }
  @media(max-width:1200px) { :root { --sidebar:188px; }.sidebar { padding-inline:14px; }.brand { font-size:20px; gap:8px; }.brand-caption { font-size:8px; }main { padding-inline:26px; }.topbar { padding-inline:26px; gap:20px; }.top-actions { gap:9px; }.theme-ribbon { gap:12px; }.theme-caption { display:none; }.game-grid { gap:18px 14px; }.game-cover { aspect-ratio:1.45; }.game-meta { padding:11px; }.hero h2 { font-size:42px; }.hero-copy { padding-inline:29px; } }
  @media(max-width:980px) { :root { --sidebar:76px; }.sidebar { padding-inline:12px; }.brand>span:last-child,.side-label,.nav-button>span:not(:first-child),.category-nav button>span:last-child,.sidebar-bottom { display:none; }.brand { justify-content:center; margin-block-end:36px; }.nav-button { justify-content:center; padding:13px; }.category-nav { margin-block-start:32px; }.category-nav button { justify-content:center; padding:11px; }.breadcrumb { display:none; }.searchbox { margin-inline-start:0; max-width:none; }.game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.welcome-note { display:none; }.hero-copy { width:63%; }.hero-stamp { display:none; }.theme-ribbon>.text-button { display:none; } }
  @media(max-width:700px) { .sidebar { display:none; }.workspace { margin:0; }.topbar { height:69px; padding-inline:18px; gap:11px; }.top-actions { gap:4px; }.top-actions .avatar,.language-control>span,kbd { display:none; }.language-control select { max-width:79px; font-size:10px; }.searchbox { padding:9px 10px; }.searchbox input { font-size:11px; }.searchbox svg { width:16px; }main { padding:23px 18px 0; }.welcome { margin-block-end:18px; }.welcome h1 { font-size:24px; }.eyebrow { font-size:8px; letter-spacing:1.2px; }.hero { min-height:370px; }.hero-copy { width:90%; padding:28px 24px; }.hero h2 { font-size:42px; }.hero p { font-size:11px; max-width:210px; }.hero>img { object-position:66% center; opacity:.7; }.hero-scrim { background:linear-gradient(90deg,var(--hero-bg),color-mix(in srgb,var(--hero-bg) 80%,transparent) 28%,transparent 100%); }.hero-label { font-size:7px; }.hero-footnote { max-width:220px; font-size:8px; }.theme-ribbon { margin-block:16px 26px; overflow:auto; padding:2px; }.theme-ribbon #theme-chips { flex-wrap:nowrap; gap:6px; }.theme-chip { font-size:9px; padding:7px 10px; }.section-heading { align-items:flex-end; }.section-heading h2 { font-size:19px; }.section-note { font-size:9px; text-align:end; }.filters { gap:6px; margin-block-end:16px; }.filter { font-size:10px; padding:6px 10px; }.game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 12px; }.game-cover { aspect-ratio:1.3; }.game-meta h3 { font-size:12px; }.game-subtitle { font-size:9px; }.game-meta-bottom { font-size:8px; gap:4px; }.game-meta-bottom>svg { display:none; }.ready-badge { font-size:8px; }.game-category { font-size:8px; inset-inline-start:8px; padding:3px 6px; }.game-meta { padding:10px; }.editorial { display:block; margin-block:26px; }.editorial-image { width:100%; height:155px; }.editorial-copy { width:100%; padding:23px; }.editorial h2 { font-size:24px; }.editorial p { font-size:11px; }footer { flex-wrap:wrap; gap:12px; }footer>.text-button { margin-inline-start:0; }.prototype-badge { margin-inline-start:auto; }.footer-brand { font-size:17px; }.themes-dialog { padding:23px; }.dialog-heading h2 { font-size:23px; }.theme-options { grid-template-columns:1fr; }.theme-option>img { aspect-ratio:3; }.theme-option-body { padding:13px; }.game-detail-art>img { height:190px; }.game-detail-content { padding:23px; }.detail-actions { flex-wrap:wrap; }.player-topbar { height:58px; padding-inline:10px; gap:6px; }.player-topbar>strong { font-size:11px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-topbar .secondary-button { padding:7px 9px; font-size:10px; min-height:36px; }.player-controls { gap:2px; }.player-stage { height:calc(100dvh - 92px); }.player-bottom { height:34px; padding-inline:10px; font-size:8px; }.player-bottom>span:last-child,.player-bottom>.online-dot { display:none; } }
  @media(max-width:350px) { main { padding-inline:12px; }.theme-chip { padding-inline:7px; }.game-meta-bottom { flex-wrap:wrap; }.ready-badge,.preview-label { margin-inline-start:0; }.hero-copy { padding-inline:21px; }.topbar { padding-inline:12px; }.game-meta h3 { font-size:11px; } }
  @media(max-width:700px) { .mobile-brand { display:block; flex-shrink:0; }.mobile-nav { display:flex; gap:20px; border-block-end:1px solid var(--line); margin-block:-5px 21px; padding-block-end:10px; }.mobile-nav button { padding:6px 0; font-size:11px; color:var(--muted); }.mobile-nav button.selected { color:var(--accent); font-weight:750; } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
}