/* The web app's own stylesheet. It repeats the site's tokens rather than extending
   style.css, so marketing layout rules (hero, header, section spacing) can never
   reach into the app, and the app's rules can never disturb the site. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/inter.woff2') format('woff2')}
:root{
 --paper:#fff;--ink:#0A0A0A;--muted:#505050;--line:#252525;--rule:#E4E4DF;--faint:#F2F2EE;--gold:#8A6508;
 --danger:#A1342E;--success:#2F6B45;--radius:8px;--shadow:3px 5px 0 rgba(10,10,10,.16);--ease:cubic-bezier(.22,.61,.36,1);
 font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 font-feature-settings:'cv11','ss01';color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--faint)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted);line-height:1.6}
.small{font-size:12.5px}
.icon{width:1.05em;height:1.05em;flex:none}
.spacer{flex:1}

/* Buttons ------------------------------------------------------------------ */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1.35px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:#fff;font-size:14px;font-weight:800;letter-spacing:-.1px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s var(--ease)}
.button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow)}
.button:active:not(:disabled){transform:translateY(0);box-shadow:none;opacity:.85}
.button.ghost{background:var(--paper);color:var(--ink)}
.button.small{min-height:36px;padding:7px 13px;font-size:13px}
.button.danger{color:var(--danger);border-color:var(--danger)}
.button.google{background:var(--paper);color:var(--ink);width:100%}
.link-button{border:0;background:none;padding:6px 2px;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.link-button:hover{color:var(--ink)}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border:1.25px solid var(--line);border-radius:var(--radius);background:var(--paper);font-size:19px;transition:background .2s var(--ease),color .2s var(--ease)}
.icon-button:hover{background:var(--faint)}
.icon-button.danger{color:var(--danger);border-color:#D8B3B0}

/* App chrome --------------------------------------------------------------- */
.app-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;height:72px;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--rule)}
.app-brand img{width:auto;height:30px}
.app-nav{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.app-nav::-webkit-scrollbar{display:none}
.app-nav a{padding:9px 15px;border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.app-nav a:hover{background:var(--faint);color:var(--ink)}
.app-nav a[aria-current="true"]{background:var(--ink);color:#fff}
.app-account{margin-left:auto;display:flex;align-items:center;gap:12px}
.app-email{display:flex;align-items:center;gap:7px;max-width:230px;color:var(--muted);font-size:13px}
.app-email>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{max-width:1680px;margin:0 auto;padding:26px 28px 72px}
.app-main:focus{outline:none}
.page-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.page-head h2{font-size:27px;letter-spacing:-.9px;font-weight:800}
.page-head .button{margin-left:auto}
/* Only the releases view: its heading and hint sit above a full-width calendar, so
   they read as a title for the page rather than a label for a list on the left. */
.page-head-centered{justify-content:center;text-align:center}

/* Cards and shared blocks --------------------------------------------------- */
.card{background:var(--paper);border:1.35px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:14px}
.empty{grid-column:1/-1;padding:64px 24px;text-align:center;color:var(--muted)}
.empty h3{margin-bottom:8px;font-size:20px;color:var(--ink);letter-spacing:-.5px}
.empty p{line-height:1.6}
.empty .button{margin-top:16px}
.notice{margin:2px 0;padding:11px 14px;border:1.2px solid var(--danger);border-radius:var(--radius);background:#fdf6f5;color:var(--danger);font-size:13.5px;line-height:1.5}
.notice.ok{border-color:var(--success);background:#f3f8f4;color:var(--success)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:5px;background:var(--faint);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.tag-new{background:var(--ink);color:#fff}
.tag-restock{background:#fff}
.tag-stock{border-color:var(--success);color:var(--success);background:#f3f8f4}
.toast{position:fixed;left:50%;bottom:26px;z-index:60;transform:translateX(-50%);margin:0;padding:12px 20px;border:1.35px solid var(--ink);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);font-size:14px;font-weight:700}
.toast.error{border-color:var(--danger);color:var(--danger)}
[hidden]{display:none!important}

/* Feed --------------------------------------------------------------------- */
.feed-layout{display:grid;grid-template-columns:294px minmax(0,1fr);gap:26px;align-items:start}
.rail{position:sticky;top:98px;max-height:calc(100vh - 124px);overflow:auto;padding:16px;background:var(--paper);border:1.35px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overscroll-behavior:contain}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.rail-head h2{font-size:15px;font-weight:800;letter-spacing:-.2px}
.rail-toggle{display:none;align-items:center;gap:9px;border:0;background:none;padding:8px 0;font-size:16px;font-weight:800;letter-spacing:-.3px}
.rail-section{border-top:1px solid var(--rule);padding:4px 0}
.rail-section summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;font-size:13.5px;font-weight:700;cursor:pointer;list-style:none}
.rail-section summary::-webkit-details-marker{display:none}
.rail-section summary small{color:var(--muted);font-weight:600}
.rail-section[open] summary{color:var(--ink)}
.rail-field{padding:2px 2px 10px}
.rail-field input,.rail-field select{width:100%;min-height:38px;padding:7px 10px;border:1.2px solid var(--line);border-radius:6px;background:var(--paper)}
.rail-pair{display:flex;gap:10px;padding:2px 2px 10px}
.rail-pair label{flex:1;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.rail-pair input{min-height:38px;padding:7px 10px;border:1.2px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.scroll-list{max-height:230px;overflow:auto;overscroll-behavior:contain}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 12px}
.chip{display:inline-flex;align-items:center;border:1.2px solid var(--line);border-radius:99px;background:var(--paper);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{padding:6px 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip:hover{background:var(--faint)}
.chip:has(input:checked){background:var(--ink);color:#fff}
.chip:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.chip.standalone{align-self:flex-start}

.feed-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.search{position:relative;flex:1;display:flex;align-items:center;gap:9px;min-height:46px;padding:0 14px;border:1.25px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px}
.new-badge{display:flex;justify-content:center;margin:0 0 12px}
.new-badge button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:1.2px solid var(--line);border-radius:19px;background:var(--paper);box-shadow:2px 3px 0 rgba(10,10,10,.12);font-size:13px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.grid.is-empty{display:block}
.feed-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin:26px 0 0}

.product{display:flex;flex-direction:column;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.product:hover{transform:translateY(-2px);box-shadow:5px 8px 0 rgba(10,10,10,.16)}
.product-shot{position:relative;height:186px;display:grid;place-items:center;overflow:hidden;background:var(--faint);border-bottom:1.35px solid var(--line)}
/* Absolute, not a centred grid item: a percentage height on a grid item that is not
   stretched does not resolve, so the picture kept its own aspect ratio from width:100%
   and spilled over the title and the tags. Against the padding box of a positioned
   ancestor the percentages are definite, and overflow:hidden is the second lock. */
.product-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px}
.product-shot-empty{color:#B6B6B0;font-size:34px;display:grid;place-items:center}
.save-button{position:absolute;top:9px;right:9px;width:38px;height:38px;display:grid;place-items:center;border:1.2px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.94);font-size:18px}
.save-button[aria-pressed="true"]{background:var(--ink);color:#fff}
.product-body{display:flex;flex-direction:column;gap:7px;padding:13px 14px 14px}
.product-title{font-size:14.5px;line-height:1.35;font-weight:800;letter-spacing:-.25px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-title a:hover{color:var(--gold)}
.product-meta{color:var(--muted);font-size:12px;line-height:1.5}
.product-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.price{font-size:17px;font-weight:800;letter-spacing:-.4px}
.product-foot time{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-link{display:inline-flex;align-items:center;gap:6px;padding-top:8px;border-top:1px dashed var(--rule);color:var(--muted);font-size:12.5px;font-weight:700}
.store-link:hover{color:var(--ink)}

/* Release calendar ---------------------------------------------------------- */
.release-hint{margin:-12px 0 18px;text-align:center}
.cal-month{display:flex;flex-direction:column;gap:10px}
.cal-head{display:flex;align-items:center;gap:8px}
.cal-head .icon-button{width:34px;height:34px;font-size:20px;line-height:1}
.cal-title{flex:1;text-align:center;font-size:15px;font-weight:800;letter-spacing:-.3px;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-weekday{padding:4px 0;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase}
.cal-cell{min-height:38px;border:0;background:none;padding:0}
.cal-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:7px;font-size:14px;color:var(--muted)}
.cal-day:not(:disabled){color:var(--ink);font-weight:800}
.cal-day:not(:disabled):hover{background:var(--faint)}
.cal-day:disabled{opacity:1;color:#A9A9A3;cursor:default}
.cal-day[data-today="1"]{box-shadow:inset 0 0 0 1.2px var(--line)}
.cal-day[aria-pressed="true"]{background:var(--ink);color:#fff}
.cal-dot{width:4px;height:4px;border-radius:50%;background:transparent}
.cal-dot[data-on="true"]{background:currentColor}
.rail-section[data-key="games"]{margin-top:6px}
.rel-scope{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--muted)}
.release details{overflow:hidden;border-radius:var(--radius)}
.release summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}
.release summary::-webkit-details-marker{display:none}
.release summary:hover{background:var(--faint)}
.rel-day{display:flex;flex-direction:column;align-items:center;width:44px;flex:none}
.rel-day b{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.1}
.rel-day i{font-size:10px;font-style:normal;text-transform:uppercase;color:var(--muted)}
.rel-head{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rel-head small{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.rel-name{font-size:16px;font-weight:800;letter-spacing:-.4px;line-height:1.25}
.rel-head em{font-size:11.5px;font-style:normal;color:var(--muted)}
.rel-hype{display:flex;align-items:baseline;flex:none;color:var(--gold);font-weight:800}
.rel-hype b{font-size:16px}
.rel-hype i{font-size:10px;font-style:normal;opacity:.7}
.rel-open{flex:none;width:22px;text-align:center;font-size:19px;color:var(--muted);transition:rotate .2s var(--ease)}
.release details[open] .rel-open{rotate:45deg}
.rel-details{display:flex;flex-direction:column;gap:18px;padding:4px 16px 18px;border-top:1px solid var(--rule)}
.rel-facts-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 24px;margin:14px 0 0}
.rel-facts-list div{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px dashed var(--rule);font-size:12.5px}
.rel-facts-list dt{color:var(--muted)}
.rel-facts-list dd{margin:0;font-weight:700;text-align:right}
.rel-block h4{margin-bottom:6px;font-size:13px;font-weight:800}
.rel-block p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.rel-block a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rel-facts,.rel-sources{margin:0;padding-left:20px;font-size:14px;line-height:1.65;color:var(--muted)}
.rel-facts li,.rel-sources li{margin-bottom:5px}

/* Alerts ------------------------------------------------------------------- */
.plan-card{display:flex;flex-direction:column;gap:6px;padding:15px 17px;margin-bottom:18px;border:1.2px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
.plan-name{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.plan-body{font-size:15px;line-height:1.5}
.plan-pitch{margin-top:6px;font-size:15px;line-height:1.45;font-weight:700;letter-spacing:-.2px}
.plan-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0 4px}
.plan-option{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1.2px solid var(--rule);border-radius:var(--radius);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.plan-option.is-selected{border-color:var(--ink);border-width:2px;padding:13px 15px;background:var(--faint)}
.plan-option input{position:absolute;opacity:0;width:0;height:0}
.plan-option:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.plan-option-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-option-name{font-size:14px;font-weight:800}
.plan-save{font-size:13px;font-weight:800;color:#2F6B45}
.plan-price{font-size:22px;font-weight:800;letter-spacing:-.6px}
.plan-per{font-size:13.5px;font-weight:400;color:var(--muted)}
.plan-card .button{align-self:flex-start;margin-top:6px}
.alert-row{display:flex;align-items:flex-start;gap:18px;padding:15px 17px}
.alert-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.alert-main h3{font-size:18px;font-weight:800;letter-spacing:-.45px;line-height:1.25}
.alert-keyword{color:var(--muted);font-size:13px}
.alert-actions{display:flex;align-items:center;gap:9px}
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{width:34px;height:20px;flex:none;border:1.2px solid var(--line);border-radius:11px;background:var(--paper);position:relative;transition:background .2s var(--ease)}
.switch-track::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:translate .2s var(--ease),background .2s var(--ease)}
.switch input:checked+.switch-track{background:var(--ink)}
.switch input:checked+.switch-track::after{translate:14px 0;background:#fff}
.switch input:focus-visible+.switch-track{outline:3px solid var(--gold);outline-offset:2px}
.switch input:checked~.switch-label{color:var(--ink)}

/* Editor dialog ------------------------------------------------------------- */
.editor{width:min(720px,94vw);max-height:88vh;padding:0;border:1.35px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);color:var(--ink)}
.editor::backdrop{background:rgba(10,10,10,.42)}
.editor-form{display:flex;flex-direction:column;max-height:88vh}
.editor-head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--rule)}
.editor-head h3{flex:1;font-size:20px;font-weight:800;letter-spacing:-.6px}
.editor-body{flex:1;overflow:auto;display:flex;flex-direction:column;gap:14px;padding:18px}
.editor-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--rule);background:var(--faint)}
.field{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}
.field>span,.field legend{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);padding:0 0 4px}
.field input,.field select{min-height:44px;padding:9px 12px;border:1.25px solid var(--line);border-radius:6px;background:var(--paper);width:100%}
.field input[type=search]{margin-bottom:8px}

/* Settings ------------------------------------------------------------------ */
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;align-items:start;max-width:1100px}
.panel{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--paper);border:1.35px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel h3{font-size:17px;font-weight:800;letter-spacing:-.4px}
.panel .plan-card{margin:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;border-bottom:1px solid var(--rule);font-size:15px}
.switch-input{width:44px;height:24px;flex:none;appearance:none;border:1.2px solid var(--line);border-radius:13px;background:var(--paper);position:relative;cursor:pointer;transition:background .2s var(--ease)}
.switch-input::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--muted);transition:translate .2s var(--ease),background .2s var(--ease)}
.switch-input:checked{background:var(--ink)}
.switch-input:checked::after{translate:20px 0;background:#fff}

/* Sign in ------------------------------------------------------------------- */
.gate{display:grid;place-items:center;min-height:100vh;padding:34px 20px}
.gate-card{width:min(430px,100%);display:flex;flex-direction:column;gap:14px;padding:32px}
.gate-brand{align-self:flex-start;margin-bottom:4px}
.gate-brand img{width:auto;height:30px}
.gate-card h1{font-size:25px;font-weight:800;letter-spacing:-.8px}
.gate-card form{display:flex;flex-direction:column;gap:12px}
.password{position:relative;display:block}
.password input{padding-right:50px}
.reveal{position:absolute;top:50%;right:4px;translate:0 -50%;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--muted);font-size:18px}
.reveal:hover{color:var(--ink)}
.terms{display:flex;align-items:flex-start;gap:10px;cursor:pointer;color:var(--muted);font-size:12.5px;line-height:1.5}
.terms input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.terms a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gate-switch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px;color:var(--muted);font-size:13.5px}
.gate-switch .link-button{color:var(--ink);font-size:13.5px;font-weight:800}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;margin:2px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--rule)}
.gate-links{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;font-size:12.5px;color:var(--muted)}
.gate-links .link-button{font-size:12.5px;padding:0}
.gate-recover{display:flex;align-items:baseline;gap:8px}
.gate-links a{text-decoration:underline;text-underline-offset:3px}

/* Narrow screens ------------------------------------------------------------ */
@media (max-width:1180px){
 .feed-layout{grid-template-columns:minmax(0,1fr)}
 .rail{position:static;max-height:none;order:-1;padding:6px 16px}
 /* The products come first on a narrow screen; the rail is a disclosure above them. */
 .rail-head h2{display:none}
 .rail-toggle{display:inline-flex}
 #rail-body{display:none;padding-bottom:8px}
 .rail.is-open #rail-body{display:block}
}
@media (max-width:860px){
 .app-bar{height:auto;flex-wrap:wrap;gap:10px;padding:10px 16px}
 .app-nav{order:3;width:100%}
 .app-email{max-width:150px}
 .app-main{padding:18px 16px 64px}
 .alert-row{flex-direction:column;gap:12px}
 .alert-actions{width:100%}
 .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
 .product-shot{height:146px}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:540px){
 .app-nav a{padding:9px 10px;font-size:13px}
 /* A two-column grid leaves the price and the age no room to sit side by side. */
 .product-foot{flex-direction:column;align-items:flex-start;gap:2px}
 .app-brand img{height:26px}
 .app-email>span{display:none}
 .settings{grid-template-columns:minmax(0,1fr)}
}