:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#070a0f;
  --bg-2:#0b1018;
  --surface:#101722;
  --surface-2:#141e2b;
  --surface-3:#182536;
  --line:#243246;
  --line-strong:#35506b;
  --text:#eef7ff;
  --muted:#8fa3b8;
  --muted-2:#64788c;
  --cyan:#51f6d2;
  --cyan-2:#22d3ee;
  --violet:#a78bfa;
  --amber:#f7c76d;
  --danger:#ff6b81;
  --success:#6ef5ae;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --glow:0 0 0 1px rgba(81,246,210,.08),0 0 28px rgba(34,211,238,.06);
  --radius:16px;
  line-height:1.5;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* --- Vector icons (replace emoji/glyphs) --- */
.icon{
  width:1.1em;height:1.1em;flex:0 0 auto;display:inline-block;vertical-align:-0.15em;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none
}
.icon-rating{width:1em;height:1em;fill:currentColor;stroke:none;color:var(--amber);vertical-align:-0.12em}
.icon-lg{width:1.35rem;height:1.35rem}
/* Filled state for toggle controls when active */
.icon-action.selected .icon-heart,
.icon-action.selected.favorite .icon-heart,
.icon-action.selected .icon-thumb,
.icon-action.selected .icon-star{fill:currentColor;stroke:currentColor}
.winner-icon{color:var(--amber);vertical-align:-0.15em}
.lang-badge{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;margin-left:4px;font-size:.68rem;font-weight:800;letter-spacing:.03em;color:var(--muted)
}
.skip-link{
  position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-160%);
  padding:10px 16px;border-radius:10px;font-weight:850;font-size:.85rem;
  color:#04100d;background:linear-gradient(135deg,var(--cyan),var(--cyan-2));
  box-shadow:var(--shadow);transition:transform .18s
}
.skip-link:focus-visible{transform:translateY(0);color:#04100d;outline:3px solid rgba(255,255,255,.65);outline-offset:2px}
.toast{
  position:fixed;left:50%;bottom:24px;z-index:80;
  display:flex;align-items:center;gap:9px;max-width:min(92vw,440px);
  padding:12px 16px;border:1px solid rgba(81,246,210,.32);border-radius:12px;
  background:rgba(13,20,29,.96);backdrop-filter:blur(12px);color:var(--text);
  font-size:.86rem;font-weight:700;box-shadow:var(--shadow);
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:transform .22s ease,opacity .22s ease
}
.toast:before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 12px rgba(110,245,174,.7)}
.toast.is-visible{transform:translate(-50%,0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .skip-link,.toast{transition:none!important}
}
.auth-card{max-width:560px;margin-inline:auto}
.auth-card h1{font-size:1.65rem;line-height:1.2}
.auth-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.auth-remember{display:flex;align-items:center;gap:10px}
.recovery-code{font-family:ui-monospace,monospace;overflow-wrap:anywhere;margin:10px 0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;color:var(--text);min-height:100vh;
  background:
    radial-gradient(circle at 18% -10%,rgba(81,246,210,.09),transparent 30rem),
    radial-gradient(circle at 92% 8%,rgba(167,139,250,.08),transparent 28rem),
    linear-gradient(180deg,#090d14 0%,var(--bg) 38%,#06080c 100%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
a{color:var(--cyan-2);text-decoration:none}
a:hover{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(81,246,210,.42);outline-offset:2px
}
button,input,select,textarea{font:inherit}
button{appearance:none}
.app-header{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid rgba(81,246,210,.12);
  background:rgba(7,10,15,.82);backdrop-filter:blur(18px);
}
.header-inner{
  min-height:66px;max-width:1180px;margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.brand-group{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#07120f;background:linear-gradient(135deg,var(--cyan),var(--cyan-2));
  font-weight:950;box-shadow:0 0 24px rgba(81,246,210,.18);
}
.brand-mark .icon{width:19px;height:19px;stroke-width:2.2}
.brand{font-weight:820;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.brand:hover{color:#fff}
.local-badge,.pill,.status-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:999px;padding:4px 8px;
  background:rgba(16,23,34,.82);color:var(--muted);font-size:.72rem;font-weight:750;
}
.local-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 10px rgba(110,245,174,.7)}
.top-nav{display:flex;align-items:center;gap:8px}
.top-nav a{
  color:var(--muted);font-size:.88rem;font-weight:700;padding:8px 10px;border-radius:9px
}
.top-nav a:hover{background:var(--surface);color:var(--text)}
.top-nav .nav-mobile-only{display:none}
.catalog-search{display:flex;gap:8px;position:relative}
.header-search{flex:1;max-width:380px;margin-inline:auto}
.header-search input{min-height:40px;background:rgba(10,16,24,.9)}
.header-search button{min-width:42px;min-height:40px;padding:7px 11px;font-size:1.25rem}
.catalog-search-large{max-width:760px;margin-top:24px}
.catalog-search-large input{min-height:50px;font-size:1rem}
.search-hero{padding-top:12px}
.search-game-card .button{align-self:end}
.search-suggestions{
  position:absolute;z-index:50;inset-inline:0;top:calc(100% + 7px);margin:0;padding:6px;
  max-height:min(420px,65vh);overflow-y:auto;list-style:none;border:1px solid var(--line-strong);
  border-radius:12px;background:#0d141d;box-shadow:var(--shadow)
}
.search-suggestions li{margin:0}
.search-suggestions a{display:grid;gap:2px;padding:10px 11px;border-radius:8px;color:var(--text)}
.search-suggestions a:hover,.search-suggestions [aria-selected="true"] a{background:var(--surface-3);color:var(--cyan)}
.search-suggestions .meta{margin:0;color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.app-header .menu-toggle{display:none;min-height:44px;padding:8px 11px;color:var(--text);background:var(--surface-2);border-color:var(--line);box-shadow:none}
.menu-toggle:hover{color:#fff;background:var(--surface-3);border-color:var(--line-strong);filter:none}
.menu-toggle>span:first-child{font-size:1.2rem;line-height:1}
main{max-width:1180px;margin:0 auto;padding:40px 22px 88px}
#main-content:focus{outline:none}
.crumb{
  display:flex;gap:9px;align-items:flex-start;margin:0 0 20px;padding:9px 11px;
  border:1px solid rgba(143,163,184,.16);border-radius:10px;background:rgba(16,23,34,.42);font-size:.82rem;color:var(--muted)
}
.crumb-label{flex:0 0 auto;color:var(--muted-2);font-weight:760}
.crumb ol{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.crumb li{display:flex;align-items:center;gap:7px}
.crumb li+li:before{content:"/";color:var(--muted-2)}
.crumb a{color:#b9cfdf;font-weight:690}
.crumb a:hover{color:var(--cyan)}
.crumb [aria-current=page]{color:var(--text);font-weight:790}
.hero{
  position:relative;margin:0 0 26px;padding:4px 0 2px
}
.hero h1,.detail-head h1{
  margin:0 0 7px;font-size:clamp(1.85rem,4vw,3rem);line-height:1.05;letter-spacing:-.045em
}
.hero p{max-width:760px;margin:0;color:var(--muted);font-size:1rem}
.hero.split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  color:var(--cyan);font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.12em
}
.eyebrow:before{content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.actions{display:flex;gap:9px;flex-wrap:wrap}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{
  background:linear-gradient(180deg,rgba(20,30,43,.95),rgba(13,19,28,.97));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;
  box-shadow:var(--shadow);position:relative;overflow:hidden
}
.card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(81,246,210,.25),transparent)
}
.card h2{margin:0 0 15px;font-size:1.03rem;letter-spacing:-.015em}
.section-title,.recommend-title{display:flex;align-items:center;justify-content:space-between;gap:14px}
.section-title>*,.recommend-title>*{min-width:0}
.section-title{margin:28px 0 13px}
.section-title h2{margin:0}
.stack{display:grid;gap:14px}
label{display:grid;gap:7px;font-size:.84rem;font-weight:760;color:#c9d7e4}
input,select,textarea{
  width:100%;min-height:43px;border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;color:var(--text);background:#0a1018;
  transition:border-color .18s,box-shadow .18s,background .18s
}
input::placeholder{color:#596d81}
textarea{min-height:100px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--cyan-2);background:#0b121b;box-shadow:0 0 0 4px rgba(34,211,238,.07)}
input[type=checkbox]{width:16px;height:16px;min-height:0;accent-color:var(--cyan)}
input[type=range]{min-height:28px;padding:0;border:0;background:transparent;accent-color:var(--cyan);cursor:pointer}
input[type=range]:focus{background:transparent;box-shadow:none}
input[type=range]:focus-visible{outline:3px solid var(--cyan-2);outline-offset:3px}
button,.button{
  min-height:42px;border:1px solid transparent;border-radius:10px;padding:9px 14px;
  background:linear-gradient(135deg,var(--cyan),#35dfbc);color:#04100d;
  font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 8px 28px rgba(81,246,210,.10);transition:transform .16s,filter .16s,border-color .16s,background .16s
}
button:hover,.button:hover{color:#04100d;filter:brightness(1.07);transform:translateY(-1px)}
button:active,.button:active{transform:translateY(0)}
button:disabled{cursor:not-allowed;opacity:.48;filter:none;transform:none}
.back-button{
  min-height:44px;padding:9px 14px;white-space:nowrap;
  color:var(--text);background:linear-gradient(135deg,#162c38,#14202e);
  border-color:rgba(81,246,210,.52);box-shadow:0 0 0 1px rgba(81,246,210,.10),0 8px 24px rgba(34,211,238,.12);
}
.back-icon{font-size:1.18em;line-height:1;transition:transform .16s}
.back-button:hover{color:#fff;background:linear-gradient(135deg,#1d3945,#182938);border-color:var(--cyan);filter:none}
.back-button:hover .back-icon{transform:translateX(-3px)}
.secondary{
  color:var(--text);background:var(--surface-2);border-color:var(--line);box-shadow:none
}
.secondary:hover{color:#fff;background:var(--surface-3);border-color:var(--line-strong)}
.small{min-height:34px;padding:5px 10px;font-size:.8rem}
.link,.link-button{
  min-height:auto;padding:5px 7px;background:transparent;border:0;box-shadow:none;color:var(--muted);font-weight:720
}
.link:hover,.link-button:hover{background:rgba(255,255,255,.04);color:var(--text);transform:none}
.danger{color:var(--danger)}
.danger:hover{color:#ff9aac;background:rgba(255,107,129,.07)}
.text-link{font-size:.84rem;color:var(--muted);padding:8px}
.muted,.meta{color:var(--muted)}
.meta{font-size:.8rem;margin-top:5px}
.list{display:grid}
.row,.game-row{
  display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 2px;
  border-bottom:1px solid rgba(143,163,184,.12);text-decoration:none;color:inherit
}
.row:last-child,.game-row:last-child{border-bottom:0}
a.row:hover{background:rgba(255,255,255,.025);margin-inline:-8px;padding-inline:10px;border-radius:9px}
.search{display:flex;gap:9px}
.search input{flex:1}
.search-results{margin-top:12px;border-top:1px solid var(--line)}
.game-result-main{display:flex;align-items:center;gap:11px;min-width:0}
.game-result-main>div{min-width:0}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}
.game-card{
  min-width:0;background:linear-gradient(180deg,var(--surface),#0c121a);border:1px solid var(--line);
  border-radius:14px;padding:11px;display:grid;grid-template-rows:auto 1fr auto;gap:11px;
  position:relative;box-shadow:0 10px 28px rgba(0,0,0,.20);transition:transform .18s,border-color .18s,box-shadow .18s
}
.game-card:hover{transform:translateY(-2px);border-color:#33536a;box-shadow:0 16px 34px rgba(0,0,0,.27),var(--glow)}
.game-card strong{color:var(--text);font-size:.96rem}
.game-card a:hover strong{color:var(--cyan)}
.game-card form{grid-column:1}
.cover-link{display:block;overflow:hidden;border-radius:10px;background:#0a0f16}
.thumb{
  width:100%;aspect-ratio:4/3;object-fit:contain;background:#0a0f16;border-radius:10px;
  transition:transform .22s
}
.game-card:hover .thumb{transform:scale(1.018)}
.thumb-small{width:48px;height:48px;aspect-ratio:1;flex:0 0 48px;border-radius:8px}
.thumb-placeholder,.cover.placeholder{
  display:grid;place-items:center;background:linear-gradient(135deg,#121a25,#0a0e14);
  border:1px dashed var(--line);color:var(--muted-2);font-size:.78rem
}
.thumb-placeholder{width:100%;aspect-ratio:4/3;border-radius:10px}
.empty{
  border:1px dashed var(--line-strong);border-radius:14px;padding:30px 20px;text-align:center;color:var(--muted);
  background:rgba(16,23,34,.38)
}
.filters{display:grid;gap:12px;align-items:end}
.filters.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.filters.compact{grid-template-columns:minmax(220px,360px) auto;justify-content:start}
.filter-action{display:flex;gap:8px;align-items:center;min-height:43px}
.manual{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.manual summary,.link-editor summary{
  cursor:pointer;color:var(--muted);font-size:.84rem;font-weight:760;padding:5px 0
}
.manual summary:hover,.link-editor summary:hover{color:var(--text)}
.manual-form{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;margin-top:12px}
.detail-head{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start}
.detail-head>*{min-width:0}
.detail-head.card{padding:18px}
.detail-head h1{font-size:clamp(2rem,4vw,3.1rem)}
.add-to-collection{margin-top:20px;padding:15px 16px;border:1px solid rgba(81,246,210,.18);border-radius:12px;background:rgba(81,246,210,.045)}
.add-to-collection h2{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.95rem}
.add-to-collection h2 .icon{color:var(--cyan)}
.add-collection-form{display:grid;gap:9px}
.add-collection-form>label{margin-bottom:-1px}
.add-collection-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.add-collection-row select{flex:1 1 220px;min-width:0}
.add-collection-row button{flex:0 0 auto}
.success{color:var(--success);font-weight:750}
.add-collection-form .new-collection-field{margin-top:2px}
.detail-head .actions{margin-top:16px}
.detail-actions{padding-top:16px;border-top:1px solid var(--line)}
.compact-title{margin-top:0}
.expansion-list{display:grid}
.expansion-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid rgba(143,163,184,.12)}
.expansion-row:last-child{border-bottom:0}
.expansion-main{display:flex;align-items:center;gap:11px;min-width:0;color:var(--text)}
.expansion-main>span:last-child{display:grid;min-width:0}
.expansion-main strong{overflow-wrap:anywhere}
.expansion-placeholder{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:1px dashed var(--line);border-radius:8px;color:var(--muted)}
.expansion-add-form{display:grid;grid-template-columns:minmax(0,1fr) 43px;align-items:end;gap:7px;width:100%;min-width:0}
.expansion-add-form select{min-width:0;grid-column:1}
.expansion-add-form .plus-button{grid-column:2;grid-row:1}
.expansion-add-form .new-collection-field{grid-column:1/-1;min-width:0}
.plus-button{min-width:43px;min-height:43px;padding:7px;font-size:1.35rem;line-height:1}
.cover{width:100%;max-height:320px;object-fit:contain;border-radius:12px;background:#080c12}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.game-description{white-space:pre-line;line-height:1.65}
.localized-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:18px 0}
.localized-facts>div{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.localized-facts dt{margin-bottom:4px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.localized-facts dd{margin:0;overflow-wrap:anywhere}
.facts span,.tag{
  display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  padding:5px 9px;background:#111b27;color:#bed0df;font-size:.8rem
}
.tag{border-color:rgba(81,246,210,.14);background:rgba(81,246,210,.045)}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.recommendation-filters{display:grid;gap:20px;margin-top:18px}
.recommendation-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.range-filter{grid-template-columns:1fr auto;align-items:center}
.range-filter>span{grid-column:2;color:var(--cyan);font-variant-numeric:tabular-nums}
.range-filter>input{grid-column:1/-1}
.dual-range-filter{min-width:0;margin:0;padding:0;border:0}
.dual-range-filter legend{padding:0;font-size:.84rem;font-weight:760;color:#c9d7e4}
.dual-range-filter>output{display:block;margin-top:7px;color:var(--cyan);font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums}
.dual-range-track{--range-start:0%;--range-end:100%;position:relative;height:32px;margin-top:5px;background:linear-gradient(to right,var(--line) 0 var(--range-start),var(--cyan) var(--range-start) var(--range-end),var(--line) var(--range-end) 100%) center/100% 5px no-repeat}
.dual-range-track input[type=range]{position:absolute;inset:0;width:100%;height:32px;margin:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;outline:0}
.dual-range-track input[type=range]::-webkit-slider-runnable-track{height:5px;background:transparent}
.dual-range-track input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px;border:2px solid #071019;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px var(--cyan-2);pointer-events:auto;-webkit-appearance:none;appearance:none;cursor:pointer}
.dual-range-track input[type=range]::-moz-range-track{height:5px;background:transparent}
.dual-range-track input[type=range]::-moz-range-progress{height:5px;background:transparent}
.dual-range-track input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #071019;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px var(--cyan-2);pointer-events:auto;cursor:pointer}
.dual-range-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--cyan-2);outline-offset:3px}
.dual-range-track input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--cyan-2);outline-offset:3px}
.facet-filter{min-width:0;margin:0;padding:0;border:0}
.facet-filter legend{padding:0;font-size:.9rem;font-weight:850;color:#c9d7e4}
.facet-filter>.meta{margin:5px 0 9px}
.facet-dropdown{border:1px solid var(--line);border-radius:12px;background:rgba(10,16,24,.62)}
.facet-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-size:.9rem;font-weight:850;color:#c9d7e4}
.facet-dropdown>summary::marker{content:""}
.facet-dropdown>summary::after{content:"";width:.85em;height:.85em;flex:0 0 auto;background:var(--cyan);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .16s}
.facet-dropdown[open]>summary::after{transform:rotate(180deg)}
.facet-dropdown>summary output{margin-inline-start:auto;color:var(--cyan);font-size:.78rem;font-weight:800}
.facet-dropdown[open]>summary{border-bottom:1px solid var(--line)}
.facet-dropdown>.meta{margin:12px 14px 8px}
.facet-dropdown>.filter-chip-list{margin:0 11px 10px}
.mechanics-more{margin:0 14px 12px}
.mechanics-more>summary{width:max-content;cursor:pointer;color:var(--cyan);font-size:.8rem;font-weight:800}
.mechanics-more>.filter-chip-list{margin-top:10px;max-height:240px}
.filter-chip-list{display:flex;gap:7px;flex-wrap:wrap;max-height:190px;overflow:auto;padding:2px 3px 6px}
.filter-chip{display:inline-flex;position:relative;cursor:pointer}
.filter-chip input{position:absolute;clip-path:inset(50%);width:1px;height:1px;margin:-1px;overflow:hidden}
.filter-chip span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#111b27;color:#bed0df;font-size:.8rem;transition:border-color .16s,background .16s,color .16s}
.filter-chip small{color:var(--muted);font-size:.68rem}
.filter-chip input:checked+span{border-color:var(--cyan);background:rgba(81,246,210,.14);color:var(--cyan)}
.filter-chip input:focus-visible+span{outline:3px solid var(--cyan-2);outline-offset:2px}
.filter-reset-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:-8px}
.filter-reset-actions button{min-height:36px;padding:7px 11px;font-size:.78rem}
.recommendation-filter-actions{display:flex;align-items:center;gap:14px}
@media(max-width:760px){
  .recommendation-filter-grid{grid-template-columns:1fr}
  .filter-chip-list{max-height:240px}
}
.score{
  display:inline-flex;align-items:center;justify-content:center;min-width:52px;
  font-weight:900;color:#06120f;background:linear-gradient(135deg,var(--cyan),var(--cyan-2));
  border-radius:999px;padding:5px 9px;font-size:.8rem;white-space:nowrap;
  box-shadow:0 0 18px rgba(81,246,210,.12)
}
.recommend-list{display:grid;gap:12px}
.recommend-card{
  background:linear-gradient(180deg,var(--surface),#0d141d);border:1px solid var(--line);
  border-radius:14px;padding:13px;display:grid;grid-template-columns:92px 1fr;gap:16px;
  transition:border-color .18s,transform .18s
}
.recommend-card:hover{border-color:#33536a;transform:translateY(-1px)}
.recommend-main{min-width:0}
.recommend-cover img{width:92px;height:92px;object-fit:contain;background:#080c12;border-radius:9px}
.recommend-card-reactions{margin-top:13px}
.recommend-card-reactions .recommendation-add{flex:0 1 auto}
.reason-bars{display:grid;gap:6px;margin-top:12px}
.reason-bars>div{display:grid;grid-template-columns:105px minmax(80px,250px) 40px;gap:9px;align-items:center;font-size:.74rem;color:var(--muted)}
.taste-score{font-size:1rem;min-width:66px;padding:8px 12px}
.taste-bars{gap:9px;margin-block:18px;max-width:720px}
.taste-bars>div{grid-template-columns:145px minmax(120px,1fr) 44px;font-size:.8rem}
.taste-bars progress{width:100%;height:11px}
progress{
  width:100%;height:7px;border:0;border-radius:999px;overflow:hidden;background:#1a2634
}
progress::-webkit-progress-bar{background:#1a2634;border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--violet),var(--cyan-2));border-radius:999px}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--violet),var(--cyan-2));border-radius:999px}
.top-gap{margin-top:32px}
.match-row{
  display:flex;align-items:flex-start;gap:12px;padding:13px 2px;border-bottom:1px solid rgba(143,163,184,.12)
}
.match-row:last-child{border-bottom:0}
.match-row input{margin-top:4px}
.error{color:var(--danger)}
.external-link-row{align-items:center}
.external-link-row .meta span{margin-left:5px}
.resources-card{padding:14px 17px;background:rgba(13,19,28,.68);box-shadow:none;border-color:rgba(143,163,184,.13)}
.resources-card:before{opacity:.35}
.resources-card h2{margin-bottom:7px;font-size:.9rem;color:var(--muted)}
.resources-card .external-link-row{padding-block:8px}
.external-link-copy{min-width:0}
.external-link{display:inline-block;color:#c9d7e4;font-size:.9rem;font-weight:720;text-decoration:none;overflow-wrap:anywhere}
.external-link:hover{text-decoration:underline;text-underline-offset:3px;color:var(--cyan)}
.external-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:3px}
.resources-card .link-editor{margin-top:8px;padding-top:8px}
.resources-card .link-button.danger{font-size:.76rem;opacity:.68}
.resources-card .link-button.danger:hover{opacity:1}
.link-editor{margin-top:15px;border-top:1px solid var(--line);padding-top:12px}
.status-panel{
  display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(81,246,210,.13);
  border-radius:10px;background:rgba(81,246,210,.035);color:var(--muted);font-size:.82rem
}
.status-dot{width:7px;height:7px;border-radius:999px;background:var(--success);box-shadow:0 0 12px rgba(110,245,174,.65)}
.kicker{color:var(--cyan);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:850}
.stat{display:grid;gap:2px}
.stat strong{font-size:1.4rem;line-height:1;color:var(--text)}
.stat span{font-size:.74rem;color:var(--muted)}
.stat-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:17px}
@media(max-width:960px){
  .header-inner{padding-inline:16px;gap:10px;flex-wrap:wrap}
  .app-header .menu-toggle{display:inline-flex;flex-shrink:0}
  .brand-group{gap:8px}
  .brand{white-space:normal;font-size:.9rem}
  .brand-mark{flex-shrink:0}
  .header-search{order:4;flex-basis:100%;max-width:none;margin:0 0 10px}
  .top-nav{display:none;position:absolute;top:calc(100% + 8px);right:16px;min-width:190px;padding:7px;align-items:stretch;flex-direction:column;border:1px solid var(--line-strong);border-radius:12px;background:#0d141d;box-shadow:var(--shadow)}
  .top-nav.is-open{display:flex}
  .top-nav a{padding:10px 11px}
  .top-nav .nav-mobile-only{display:block}
}
@media(max-width:840px){
  .filters.four{grid-template-columns:1fr 1fr}
  .detail-head{grid-template-columns:150px 1fr}
  .expansion-row{grid-template-columns:minmax(0,1fr) minmax(230px,290px)}
  .hero.split{align-items:flex-start;flex-direction:column}
  .actions{width:100%}.actions .button{flex:1}
  .recommend-card{grid-template-columns:76px 1fr}.recommend-cover img{width:76px;height:76px}
}
@media(max-width:700px){
  .back-button{min-width:44px;padding-inline:11px}
  main{padding:28px 16px 70px}
  .grid.two{grid-template-columns:1fr}
  .search{flex-direction:column}
  .manual-form{grid-template-columns:1fr}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game-card{padding:9px}
}
@media(max-width:520px){
  .local-badge{display:none}
  .back-label{display:none}
  .menu-toggle-label{display:none}
  .crumb{gap:6px;padding:8px 9px}
  .crumb-label{font-size:.76rem}
  .filters.four,.filters.compact,.detail-head{grid-template-columns:1fr}
  .detail-head .cover{max-height:270px}
  .game-grid{grid-template-columns:1fr}
  .recommend-card{grid-template-columns:1fr}
  .recommend-cover img{width:100%;height:170px}
  .section-title{align-items:flex-start;flex-wrap:wrap}
  .reason-bars>div{grid-template-columns:minmax(76px,88px) minmax(70px,1fr) 34px;gap:7px}
  .row,.game-row{align-items:flex-start}
  .catalog-search-large{grid-template-columns:1fr;display:grid}
  .catalog-search-large .search-suggestions{top:52px}
  .add-collection-row{flex-direction:column;align-items:stretch}
  .add-collection-row select{flex:0 0 auto;width:100%}
  .add-collection-row button{width:100%;justify-content:center}
  .expansion-row{grid-template-columns:1fr;align-items:stretch}
  .expansion-add-form{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.segmented{display:inline-flex;gap:4px;padding:4px;margin:0 0 16px;border:1px solid var(--line);border-radius:11px;background:#0a1018}
.segmented a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;color:var(--muted);font-size:.8rem;font-weight:780}
.segmented a:hover{color:var(--text);background:var(--surface)}
.segmented a.active{color:#06120f;background:var(--cyan);box-shadow:0 0 16px rgba(81,246,210,.10)}
.segmented .disabled{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;color:var(--muted);font-size:.8rem;font-weight:780;opacity:.45;cursor:not-allowed}
.feed-results-title{align-items:flex-end}
.feed-view-switcher{margin:0;flex-wrap:wrap}
.feed-view-switcher a{display:inline-flex;align-items:center;gap:6px}
.feed-games{display:grid;gap:12px}
.feed-game{min-width:0;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),#0c121a);transition:border-color .18s,background .18s}
.feed-game:hover{border-color:#33536a;background:var(--surface-2)}
.feed-game-cover{display:grid;place-items:center;overflow:hidden;background:#0a0f16;color:var(--muted-2)}
.feed-game-cover img{width:100%;height:100%;object-fit:contain}
.feed-game-copy{min-width:0}
.feed-game-copy strong{color:var(--text);overflow-wrap:anywhere}
.feed-game-copy>a:hover strong{color:var(--cyan)}
.feed-game-score{align-self:start}
.feed-view-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:15px}
.feed-view-tiles .feed-game{display:grid;grid-template-rows:150px 1fr auto;gap:10px;padding:10px;border-radius:14px}
.feed-view-tiles .feed-game-cover{border-radius:10px}
.feed-view-list,.feed-view-compact{grid-template-columns:1fr}
.feed-view-list .feed-game{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px;border-radius:11px}
.feed-view-list .feed-game-cover{width:78px;height:62px;border-radius:8px}
.feed-view-compact{gap:5px}
.feed-view-compact .feed-game{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border-radius:8px}
.feed-view-compact .feed-game-cover,.feed-view-compact .feed-game-details{display:none}
.feed-view-compact .meta{display:inline;margin-left:7px}
@media(max-width:520px){
  .feed-results-title{align-items:stretch}
  .feed-view-switcher{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .feed-view-switcher a{justify-content:center;padding-inline:6px}
  .feed-view-switcher a span{font-size:.72rem}
  .feed-view-list .feed-game{grid-template-columns:58px minmax(0,1fr) auto;gap:9px}
  .feed-view-list .feed-game-cover{width:58px;height:52px}
}
.game-actions{display:flex;align-items:center;gap:4px;border-top:1px solid rgba(143,163,184,.1);padding-top:8px}
.game-actions form{display:inline-flex}
.game-actions .remove-action{margin-left:auto}
.icon-action{min-width:34px;min-height:32px;padding:4px 7px;background:#0b121a;border:1px solid var(--line);box-shadow:none;color:var(--muted);font-weight:800}
.icon-action:hover{background:var(--surface-3);border-color:var(--line-strong);color:var(--text);transform:none}
.icon-action.selected{color:#07120f;background:var(--cyan);border-color:var(--cyan)}
.icon-action.selected.favorite{color:#190a11;background:#ff7aa2;border-color:#ff7aa2}
.icon-action.selected.dislike{color:#18090d;background:var(--danger);border-color:var(--danger)}
.icon-action.labeled{padding-inline:10px}
.preference-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.preference-bar>span{margin-right:auto;font-size:.72rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em;color:var(--muted-2)}
.preference-bar form{display:inline-flex}
.game-cover-column{min-width:0}
.game-cover-column .game-reaction-bar{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px;padding-top:11px}
.game-cover-column .game-reaction-bar>span{margin:0}
.game-cover-column .game-reaction-bar form,.game-cover-column .game-reaction-bar button{width:100%}
.game-cover-column .game-reaction-bar button{justify-content:flex-start;gap:9px;min-height:42px}
.game-reaction-bar .icon{width:1.15rem;height:1.15rem}
.game-opinion{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.game-opinion h2{font-size:.8rem;font-weight:600;color:var(--muted);margin:0}
.game-opinion-actions{gap:6px;margin:0;padding:0;border:0}
.game-opinion-actions button{width:40px;min-height:40px;padding:8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.game-opinion-actions button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.daily-recommendations{padding:22px}
.daily-recommendation-heading{margin-top:0;align-items:flex-start}
.daily-recommendation-heading h2{margin-bottom:4px;font-size:1.25rem}
.daily-recommendation-heading p{margin:0;max-width:660px}
.daily-recommendation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.daily-recommendation-card{
  min-width:0;display:grid;grid-template-rows:auto 1fr auto;gap:11px;padding:11px;
  border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--surface),#0b1119)
}
.daily-recommendation-cover{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:#080c12;color:var(--muted-2);font-size:2rem}
.daily-recommendation-cover img{width:100%;height:100%;object-fit:contain;transition:transform .2s}
.daily-recommendation-card:hover .daily-recommendation-cover img{transform:scale(1.02)}
.daily-recommendation-copy{min-width:0}
.daily-recommendation-copy strong{color:var(--text)}
.daily-recommendation-copy a:hover strong{color:var(--cyan)}
.daily-recommendation-reason{min-height:1.2em;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recommendation-reactions{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;padding-top:9px;border-top:1px solid rgba(143,163,184,.12)}
.recommendation-reactions form{display:flex}
.recommendation-reaction{gap:5px;font-size:.72rem;white-space:nowrap}
.recommendation-reaction>span[aria-hidden]{font-size:1rem}
.recommendation-reaction .icon{width:1rem;height:1rem}
.recommendation-reaction.add{color:var(--cyan)}
.recommendation-add{flex:1 1 100%;gap:6px}
.recommendation-add select{min-width:0;min-height:34px;padding:5px 8px;font-size:.75rem}
.recommendation-add .recommendation-reaction{flex:0 0 auto}
.universal-game-card{container-type:inline-size;content-visibility:auto;contain-intrinsic-size:auto none auto 190px}
.universal-game-cover{display:grid;place-items:center;min-height:112px;background:#080c12;color:var(--muted-2);font-size:2rem}
.universal-game-cover img{width:100%;height:100%;object-fit:contain}
.universal-game-main{min-width:0;display:grid;align-content:start;gap:8px}
.universal-game-subtitle{margin:0}
.discovery-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:15px}
.universal-game-card-tile{grid-template-columns:1fr;padding:0;gap:0;overflow:hidden;grid-template-rows:auto 1fr}
.universal-game-card-tile .universal-game-cover{width:100%;min-height:0;aspect-ratio:4/3;border-radius:0;overflow:hidden}
.universal-game-card-tile .universal-game-cover img{width:100%;height:100%;border-radius:0}
.universal-game-card-tile .universal-game-main{padding:11px 12px 12px}
.universal-game-card-tile .recommend-card-reactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.universal-game-card-tile .recommend-card-reactions form:not(.recommendation-add){min-width:0}
.universal-game-card-tile .recommend-card-reactions form:not(.recommendation-add) button{width:100%;justify-content:center;padding-inline:6px}
.universal-game-card-tile .recommend-card-reactions form:not(.recommendation-add) button span{display:none}
.universal-game-card-tile .recommend-card-reactions .recommendation-add{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 38px;width:100%;min-width:0}
.universal-game-card-tile .recommend-card-reactions .recommendation-add select{width:100%;max-width:100%}
.universal-game-card-tile .recommend-card-reactions .recommendation-add button{width:38px;min-width:38px;justify-content:center;padding-inline:7px}
.universal-game-card-tile .recommend-card-reactions .recommendation-add button span{display:none}
@container (min-width:300px){
  .universal-game-card-tile .recommend-card-reactions form:not(.recommendation-add) button span{display:inline}
}
.daily-discovery-link{margin-top:16px;text-align:right;font-size:.84rem}
.home-feeds{margin-top:20px}
.home-feeds-heading{margin-top:0}
.home-feeds>p{margin-top:-7px}
.home-feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}
.home-feed-link{
  min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);color:var(--text)
}
.home-feed-link:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--text)}
.home-feed-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--surface-3);color:var(--cyan)}
.home-feed-icon .icon{width:1.25rem;height:1.25rem}
.home-feed-copy{min-width:0;display:grid;gap:2px}
.home-feed-copy strong{overflow-wrap:anywhere}
.home-feed-copy small{color:var(--muted);font-size:.75rem}
.profile-bgg-connect{margin-top:28px}

@media(max-width:840px){
  .daily-recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .daily-recommendation-grid{grid-template-columns:1fr}
  .daily-recommendation-heading form,.daily-recommendation-heading button{width:100%}
  .home-feeds-heading .button{width:100%;justify-content:center}
  .home-feed-grid{grid-template-columns:1fr}
  .home-feed-link{grid-template-columns:38px minmax(0,1fr) auto;padding:10px;gap:9px}
  .home-feed-icon{width:38px;height:38px}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions form:not(.recommendation-add){min-width:0}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions form:not(.recommendation-add) button{width:100%;justify-content:center;padding-inline:6px}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions form:not(.recommendation-add) button span{display:none}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add{grid-column:1/-1}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add:has(select){display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add:has(select) select{width:100%}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add:has(select) button{width:38px;min-width:38px;justify-content:center;padding-inline:7px}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add:has(select) button span{display:none}
  :is(.daily-recommendation-card,.universal-game-card) .recommendation-reactions .recommendation-add:not(:has(select)) button{width:100%;justify-content:center}
}

.chosen-card{border-color:rgba(81,246,210,.32);box-shadow:var(--shadow),0 0 38px rgba(81,246,210,.07)}
.chosen-card h2{font-size:1.55rem;margin:0}

.alias,.profile-alias{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan);font-size:.82rem;letter-spacing:.01em}
.profile-alias{margin-top:-10px;margin-bottom:14px;font-size:.95rem}
.field-help{display:block;margin-top:5px;color:var(--muted);font-size:.72rem;font-weight:500}
.scanner-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.add-game-mode{margin-top:18px;margin-bottom:0}
.barcode-create-form{display:grid;gap:12px;width:min(100%,640px);margin-top:20px;padding:16px;border:1px solid rgba(81,246,210,.22);border-radius:12px;background:rgba(81,246,210,.035)}
.barcode-create-form h3{margin:0}
.camera-choice{max-width:360px;margin-top:12px}
.barcode-video-wrap{position:relative;width:min(100%,560px);aspect-ratio:4/3;max-height:min(52svh,420px);margin-top:14px;overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#05080c}
.barcode-video-wrap video{display:block;width:100%;height:100%;object-fit:cover}
.scan-guide{position:absolute;inset:25% 8%;border:2px solid rgba(81,246,210,.8);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.12);pointer-events:none}
.timeline{display:grid;gap:12px}
.play-entry{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.play-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;border:1px solid var(--line);border-radius:12px;background:#091019}
.play-date strong{font-size:1.35rem;color:var(--cyan)}
.play-date span{font-size:.68rem;color:var(--muted)}
.play-main h2{margin:0}
.participant-list{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.participant{display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#091019;font-size:.82rem}
.participant small{color:var(--cyan)}
.participant.winner{border-color:rgba(81,246,210,.38);box-shadow:0 0 16px rgba(81,246,210,.05)}
.play-meta{margin-top:8px}
.play-notes{margin:8px 0 0;color:var(--muted)}
.compact-list{margin-top:14px}
.compact-gap{gap:10px}
.player-rows{display:grid;gap:9px}
.player-row{display:grid;grid-template-columns:minmax(180px,2fr) minmax(85px,.7fr) minmax(85px,.7fr) auto auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:12px;background:#091019}
.player-row label{margin:0}
.player-search-wrap{position:relative}
.alias-results{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);padding:5px;border:1px solid var(--line-strong);border-radius:10px;background:#0b1119;box-shadow:var(--shadow)}
.alias-result{display:block;width:100%;padding:8px 9px;text-align:left;border:0;border-radius:7px;background:transparent;color:var(--text);box-shadow:none;font-size:.8rem}
.alias-result:hover{background:var(--surface-3);transform:none}
.winner-check{display:flex!important;align-items:center;gap:5px;min-height:39px;padding:0 5px;white-space:nowrap}
.form-footer{display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(7,10,15,.92);backdrop-filter:blur(12px);z-index:10}
@media(max-width:700px){
  .player-row{grid-template-columns:1fr 1fr}
  .player-search-wrap{grid-column:1/-1}
  .play-entry{grid-template-columns:48px 1fr}
}

.freshness{margin-top:5px;font-size:.72rem}
.freshness.new{color:var(--cyan);font-weight:760}
.play-modes{margin-top:14px;flex-wrap:wrap}
.stats-panel .stat-row{margin-bottom:8px}
.play-entry .section-title .actions{gap:10px;align-items:center}
.play-entry .section-title form{display:inline-flex}
@media(max-width:700px){
  .play-modes{display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .play-modes a{white-space:nowrap}
}

.bgg-connect-card{border-color:rgba(34,211,238,.22)}
.status-card.success-card{border-color:rgba(110,245,174,.32)}
.status-card.error-card{border-color:rgba(255,107,129,.32)}
.bgg-preview-list{display:grid;gap:7px;margin:14px 0 84px}
.bgg-preview-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#091019;cursor:pointer}
.bgg-preview-row:hover{border-color:var(--line-strong);background:var(--surface-2)}
.bgg-preview-row.already-owned{opacity:.72}
.bgg-preview-row>input{width:18px;height:18px}
.bgg-preview-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.bgg-preview-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgg-preview-status{display:flex;justify-content:flex-end}
.new-pill{color:#06120f!important;background:var(--cyan)!important;border-color:var(--cyan)!important}
.selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:72px;z-index:8;padding:10px 12px;margin-top:12px;border:1px solid var(--line);border-radius:10px;background:rgba(7,10,15,.94);backdrop-filter:blur(12px)}
.selection-toolbar label{display:flex;align-items:center;gap:7px;margin:0}
.local-info-panel{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid rgba(81,246,210,.2);border-radius:10px;background:rgba(81,246,210,.04)}
.local-info-panel span{color:var(--muted);font-size:.8rem}
@media(max-width:700px){
  .bgg-preview-row{grid-template-columns:auto minmax(0,1fr)}
  .bgg-preview-status{grid-column:2}
  .selection-toolbar{top:64px}
}

.same-authors-filter{display:flex;align-items:center;gap:10px;margin:16px 0;cursor:pointer}
.same-authors-filter input{appearance:none;width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0;padding:0;border:1px solid var(--muted);border-radius:6px;background:transparent;box-shadow:none;cursor:pointer}
.same-authors-filter:hover input{border-color:var(--cyan)}
.same-authors-filter input:checked{border-color:var(--cyan);background-color:var(--cyan);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 10 3 3 7-7' stroke='%2306120f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:18px;background-position:center;background-repeat:no-repeat}
.same-authors-filter input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media(forced-colors:active){.same-authors-filter input{appearance:auto}}

/* Recommendations: quiet controls and compact, readable results. */
.recommendations-page{max-width:1100px;margin-inline:auto}
.recommendations-heading{margin:26px 0}
.recommendations-heading h1{margin-bottom:8px}
.recommendations-heading p{margin:0;color:var(--muted)}
.recommendation-filter-panel{padding:24px;background:var(--surface);box-shadow:none}
.recommendation-filter-panel h2{font-size:1rem;margin:0}
.recommendations-page .recommendation-filter-grid{gap:24px;align-items:start}
.recommendations-page .range-filter{display:grid;grid-template-columns:1fr;gap:7px;min-width:0}
.recommendations-page .range-filter>span{grid-column:1;font-size:.8rem}
.recommendations-page .range-filter>input{margin:5px 0 0;height:32px}
.recommendations-page .same-authors-filter{margin:0;min-height:44px;font-weight:500}
.recommendations-page .facet-dropdown{background:transparent;border-radius:8px}
.recommendations-page .facet-dropdown>summary{font-weight:600}
.recommendations-page .mechanics-reset{margin:0 14px 14px;font-size:.78rem}
.recommendations-page .recommendation-filter-actions{flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.recommendations-page .recommendation-filter-actions .secondary{background:transparent;box-shadow:none}
.recommendations-page #recommendation-results{margin-top:32px}
.recommendations-page .recommend-card{grid-template-columns:96px minmax(0,1fr);padding:20px;gap:20px;background:var(--surface);box-shadow:none}
.recommendations-page .recommend-card:hover{transform:none}
.recommendations-page .recommend-cover img{width:96px;height:96px;border-radius:8px}
.recommendations-page .recommend-title{align-items:flex-start}
.recommendations-page .recommend-title a{font-size:1.05rem;overflow-wrap:anywhere}
.affinity-indicator{flex:0 0 112px;max-width:100%;font-variant-numeric:tabular-nums}
.affinity-caption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:.7rem;color:var(--muted)}
.affinity-caption strong{font-size:.85rem;font-weight:650;color:var(--text)}
.affinity-indicator meter{display:block;appearance:none;width:100%;height:6px;border:0;border-radius:3px;background:var(--line);overflow:hidden}
.affinity-indicator meter::-webkit-meter-bar{height:6px;border:0;border-radius:3px;background:var(--line);box-shadow:none}
.affinity-indicator meter::-webkit-meter-optimum-value{background:var(--cyan);border-radius:3px}
.affinity-indicator meter::-moz-meter-bar{background:var(--cyan);border-radius:3px}
@media(forced-colors:active){.affinity-indicator meter{appearance:auto}}

/* --- Public landing page --- */
.landing-hidden{display:none}
.landing-page{display:grid;gap:0;margin-top:-40px}
.landing-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);align-items:center;gap:72px;min-height:680px;padding:76px 0 64px}
.landing-hero-copy{max-width:650px}
.landing-hero h1{margin:18px 0 24px;font-size:clamp(3.1rem,6.3vw,6rem);line-height:.94;letter-spacing:-.065em;text-wrap:balance}
.landing-hero h1 span{color:var(--cyan)}
.landing-lead{max-width:600px;color:#b7c7d7;font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.65}
.landing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.landing-actions .button{min-height:50px;padding:12px 20px}
.landing-primary{gap:10px}
.landing-arrow{transform:rotate(180deg);transition:transform .18s ease}
.landing-primary:hover .landing-arrow{transform:rotate(180deg) translateX(-3px)}
.landing-note{margin:14px 0 0;color:var(--muted-2);font-size:.82rem}
.recommendation-preview{position:relative;padding:20px;border:1px solid rgba(81,246,210,.18);border-radius:24px;background:linear-gradient(145deg,rgba(20,30,43,.96),rgba(9,15,23,.96));box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 70px rgba(34,211,238,.06)}
.recommendation-preview:before{content:"";position:absolute;z-index:-1;inset:-22px;border-radius:40px;background:radial-gradient(circle at 60% 40%,rgba(81,246,210,.12),transparent 64%)}
.preview-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.preview-live{display:flex;align-items:center;gap:7px;color:var(--success)}
.preview-live:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
.preview-game{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:22px}
.preview-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;overflow:hidden;padding:17px 14px;border-radius:7px;background:linear-gradient(#f6d78d 0 46%,#285c4f 47% 100%);color:#fff;box-shadow:0 18px 32px rgba(0,0,0,.35)}
.preview-cover:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(transparent 45%,rgba(4,25,22,.75))}
.preview-cover strong{font-family:Georgia,serif;font-size:1.25rem;letter-spacing:.12em;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.preview-cover small{font-size:.59rem;text-transform:uppercase;letter-spacing:.08em}
.preview-sun{position:absolute;z-index:-2;top:25px;right:20px;width:46px;height:46px;border-radius:50%;background:#f4a84d}
.preview-hill{position:absolute;z-index:-1;left:-20%;bottom:21%;width:140%;height:45%;border-radius:50% 50% 0 0;transform:rotate(-7deg);background:#4b8061}
.preview-hill.hill-two{left:8%;bottom:5%;background:#173e3c;transform:rotate(9deg)}
.preview-score{display:flex;align-items:baseline;gap:8px;color:var(--cyan)}
.preview-score strong{font-size:1.55rem}.preview-score span{color:var(--muted);font-size:.72rem}
.preview-copy h2{margin:8px 0 2px;font-size:1.65rem}.preview-copy p{margin:0;color:var(--muted);font-size:.86rem}
.preview-signals{display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}.preview-signals span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:#bfd0df;font-size:.68rem}
.preview-reason{display:grid;grid-template-columns:36px 1fr;gap:11px;margin-top:20px;padding:13px;border:1px solid rgba(167,139,250,.2);border-radius:12px;background:rgba(167,139,250,.055)}
.preview-reason>span{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:rgba(167,139,250,.13);color:var(--violet)}
.preview-reason p{margin:0;color:var(--muted);font-size:.77rem}.preview-reason strong{display:block;margin-bottom:2px;color:var(--text)}
.landing-trust{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-block:1px solid var(--line)}
.landing-trust p{margin:0;color:var(--muted);font-size:.82rem}.landing-trust ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:24px;margin:0;padding:0;list-style:none;color:#b9cad9;font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.landing-trust li{display:flex;align-items:center;gap:8px}.landing-trust li:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--cyan)}
.landing-section{padding:112px 0}.landing-section-heading{max-width:720px;margin-bottom:48px}.landing-section-heading h2,.landing-values h2,.landing-final h2{margin:16px 0;font-size:clamp(2rem,4vw,3.45rem);line-height:1.07;letter-spacing:-.045em;text-wrap:balance}.landing-section-heading p{max-width:620px;color:var(--muted);font-size:1.05rem}
.landing-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.landing-features article{position:relative;min-height:290px;padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,var(--surface),rgba(11,16,24,.72));transition:border-color .18s ease,transform .18s ease}.landing-features article:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.feature-number{position:absolute;top:25px;right:25px;color:var(--muted-2);font:700 .7rem ui-monospace,monospace}.feature-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:46px;border-radius:13px;background:rgba(81,246,210,.09);color:var(--cyan);font-size:1.35rem}.landing-features h3{margin:0 0 10px;font-size:1.2rem}.landing-features p{margin:0;color:var(--muted);font-size:.91rem}
.landing-values{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;padding:80px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,rgba(20,30,43,.9),rgba(11,16,24,.68))}.values-list{display:grid;gap:0;margin:0;padding:0;list-style:none}.values-list li{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:20px 0;color:var(--muted);font-size:.88rem}.values-list li:not(:last-child){border-bottom:1px solid var(--line)}.values-list li>span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(81,246,210,.08);color:var(--cyan)}.values-list strong{display:block;margin-bottom:3px;color:var(--text);font-size:.98rem}
.landing-final{padding:128px 20px 64px;text-align:center}.landing-final .eyebrow{justify-content:center}.landing-final>p{max-width:560px;margin:0 auto;color:var(--muted);font-size:1.05rem}.landing-final .landing-actions{justify-content:center}
@media(max-width:900px){.landing-hero{grid-template-columns:1fr;gap:50px;padding-top:64px}.landing-hero-copy{max-width:760px}.recommendation-preview{max-width:620px}.landing-features{grid-template-columns:1fr}.landing-features article{min-height:0}.feature-icon{margin-bottom:30px}.landing-values{grid-template-columns:1fr;gap:30px;padding:48px}}
@media(max-width:600px){.landing-page{margin-top:-22px}.landing-hero{min-height:0;padding:48px 0}.landing-hero h1{font-size:clamp(2.7rem,14vw,4rem)}.landing-actions{display:grid}.landing-actions .button{width:100%}.preview-game{grid-template-columns:100px 1fr;gap:15px}.preview-signals span:last-child{display:none}.recommendation-preview{padding:14px}.landing-trust{align-items:flex-start;flex-direction:column}.landing-trust ul{justify-content:flex-start;gap:12px 20px}.landing-section{padding:80px 0}.landing-values{padding:30px 22px}.landing-final{padding:96px 0 40px}}
@media(prefers-reduced-motion:reduce){.landing-features article,.landing-arrow{transition:none}.landing-features article:hover{transform:none}}
.recommend-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.78rem;color:var(--muted)}
.recommend-explanation{margin-top:14px}
.recommend-explanation summary{width:fit-content;cursor:pointer;color:var(--muted);font-size:.78rem;padding:5px 0}
.recommend-explanation summary:hover{color:var(--text)}
.recommendations-page summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.recommendations-page .reason-bars>div{grid-template-columns:120px minmax(60px,250px) 36px}
@media(max-width:900px){.recommendations-page .recommendation-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){
  .recommendation-filter-panel{padding:18px}
  .recommendations-page .recommendation-filter-grid{grid-template-columns:1fr}
  .recommendations-page .recommend-card{grid-template-columns:64px minmax(0,1fr);padding:14px;gap:12px}
  .recommendations-page .recommend-cover img{width:64px;height:64px}
  .recommendations-page .recommend-title{flex-wrap:wrap;gap:6px}
  .recommendations-page .reason-bars>div{grid-template-columns:minmax(0,1fr) minmax(40px,1fr) 30px;gap:6px}
  .recommendations-page .recommend-card-reactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .recommendations-page .recommend-card-reactions form:not(.recommendation-add){min-width:0}
  .recommendations-page .recommend-card-reactions form:not(.recommendation-add) button{width:100%;justify-content:center;padding-inline:6px}
  .recommendations-page .recommend-card-reactions form:not(.recommendation-add) button span{display:none}
  .recommendations-page .recommend-card-reactions .recommendation-add{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 40px;width:100%;min-width:0}
  .recommendations-page .recommend-card-reactions .recommendation-add select{width:100%;max-width:100%}
  .recommendations-page .recommend-card-reactions .recommendation-add button{width:40px;min-width:40px;justify-content:center;padding-inline:6px}
  .recommendations-page .recommend-card-reactions .recommendation-add button span{display:none}
  .recommendations-page .recommendation-filter-actions button{width:100%}
}

.recommendation-filter-panel .filter-panel-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:36px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text);font:inherit;text-align:left;transform:none}
.filter-panel-triangle{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--text);flex-shrink:0;margin-right:5px}
.filter-panel-toggle[aria-expanded=false] .filter-panel-triangle{transform:rotate(-90deg)}
.filter-panel-toggle:hover .filter-panel-triangle{border-top-color:var(--cyan)}
.filter-panel-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:5px;border-radius:4px}
.recommendation-filter-panel.is-collapsed{padding:22px 22px}
.recommendation-filter-panel.is-collapsed .filter-panel-toggle{min-height:36px}

/* Collection page — modernised library view */
.collection-page{max-width:1120px;margin-inline:auto}
.collection-hero .stat-row{margin-top:14px}
.collection-page .library-filter-panel,.collection-page .library-search-card{background:var(--surface);box-shadow:none}
.collection-page .library-filters{display:grid;gap:18px;margin-top:2px}
.collection-page .library-filters .filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.collection-page .range-filter{display:grid;grid-template-columns:1fr;gap:6px;min-width:0}
.collection-page .range-filter>span{grid-column:1;font-size:.8rem;color:var(--cyan);font-variant-numeric:tabular-nums}
.collection-page .range-filter>input{grid-column:1;margin:4px 0 0;height:32px}
.library-filter-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.collection-page .segmented{flex-wrap:wrap}
.collection-page .game-card.library-card{padding:0;gap:0;overflow:hidden;grid-template-rows:auto 1fr auto}
.library-cover{position:relative;display:block;background:#0a0f16}
.library-cover .thumb{border-radius:0;aspect-ratio:4/3;width:100%}
.library-cover .thumb-placeholder{border-radius:0;border:0;aspect-ratio:4/3}
.library-flag{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:rgba(7,10,15,.7);backdrop-filter:blur(6px);color:#ff7aa2;border:1px solid rgba(255,122,162,.42)}
.library-flag .icon{width:15px;height:15px;fill:currentColor;stroke:currentColor}
.library-body{min-width:0;display:grid;gap:6px;padding:11px 12px 4px}
.library-name strong{font-size:.95rem}
.library-name:hover strong{color:var(--cyan)}
.library-facts{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.76rem;color:var(--muted);align-items:center}
.library-facts span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.library-freshness{margin-top:2px}
.collection-page .game-card.library-card .game-actions{padding:8px 10px;margin-top:auto}
@media(max-width:760px){
  .collection-page .library-filters .filter-grid{grid-template-columns:1fr;gap:16px}
}