:root{--bg:#faf8f3;--surface:#fff;--text:#1a1a1a;--muted:#6b6b6b;--border:#1a1a1a;--red:#e8332b;--green:#4caf1e;--blue:#2a4fe8;--amber:#e8960b;--tile:#e9e8e2;--error:#e8332b;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);min-height:100vh;margin:0}#root{min-height:100vh}.page{max-width:640px;margin:0 auto;padding:3rem 1.5rem;position:relative}.language-switcher{border:2px solid var(--border);border-radius:999px;display:flex;position:absolute;top:1.25rem;right:1.5rem;overflow:hidden}.language-switcher button{background:var(--surface);color:var(--text);box-shadow:none;border:none;border-radius:0;padding:.3rem .7rem;font-size:.78rem;font-weight:700}.language-switcher button:hover{box-shadow:none;background:var(--tile);transform:none}.language-switcher button.active{background:var(--blue);color:#fff}.logo{width:auto;height:100px;margin:0 auto;display:block}.logo.small{height:56px;margin:0 auto 1.5rem}.landing{text-align:center;max-width:480px}.landing .logo{height:140px;margin-bottom:1.5rem}.landing p{color:var(--muted);margin:.75rem 0 2rem;font-size:1.05rem}.landing p.landing-pricing{margin-top:-1.25rem;font-size:.9rem}.landing-actions{justify-content:center;gap:1rem;display:flex}.button,button{background:var(--blue);color:#fff;border:2px solid var(--border);cursor:pointer;box-shadow:3px 3px 0 var(--border);border-radius:12px;padding:.7rem 1.4rem;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-block}.button:hover,button:hover{box-shadow:4px 4px 0 var(--border);transform:translate(-1px,-1px)}.button:active,button:active{box-shadow:1px 1px 0 var(--border);transform:translate(2px,2px)}.button.secondary,button.secondary{background:var(--tile);color:var(--text)}.form{flex-direction:column;gap:1rem;margin:1.5rem 0;display:flex}.form label{color:var(--muted);flex-direction:column;gap:.35rem;font-size:.9rem;font-weight:600;display:flex}.form input{background:var(--surface);border:2px solid var(--border);color:var(--text);border-radius:10px;padding:.6rem .75rem;font-size:1rem}.form input:focus{border-color:var(--blue);outline:none}.error{color:var(--error);font-size:.9rem;font-weight:600}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:3.25rem;margin-bottom:1.5rem;display:flex}.dashboard-header-text{align-items:center;gap:.85rem;display:flex}.dashboard-header-text .logo{height:44px;margin:0}.dashboard-header-text h1{margin:0;font-size:1.4rem}.dashboard-header-actions{align-items:center;gap:.6rem;display:flex}.billing-row{background:var(--tile);border:2px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.85rem 1.1rem;display:flex}.billing-row p{margin:0}.dashboard-section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.dashboard-section-head h2{margin:0}.game-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;margin-top:1rem;display:grid}.game-card{background:var(--surface);border:3px solid var(--border);box-shadow:4px 4px 0 var(--border);border-radius:20px;flex-direction:column;gap:.5rem;padding:1.4rem;display:flex;position:relative;overflow:hidden}.game-card:before{content:attr(data-watermark);opacity:.22;pointer-events:none;font-size:7rem;line-height:1;position:absolute;bottom:-1.4rem;right:-.5rem;transform:rotate(-8deg)}.game-card.accent-red{border-top:6px solid var(--red)}.game-card.accent-green{border-top:6px solid var(--green)}.game-card.accent-blue{border-top:6px solid var(--blue)}.game-card h3{margin:0;font-size:1.2rem;position:relative}.game-card p{color:var(--muted);flex-grow:1;font-size:.9rem;position:relative}.game-card .button{align-self:flex-start;position:relative}.game-card.beta-locked{filter:grayscale(.55);opacity:.8}.ipapa-made-badge{vertical-align:middle;border:1.5px solid var(--border);background:var(--surface);border-radius:5px;width:auto;height:1.3em;margin-left:.45rem;padding:1px;display:inline-block;position:relative;top:-1px}.game-card-ribbon{background:var(--amber);width:190px;color:var(--text);letter-spacing:.02em;text-transform:uppercase;text-align:center;border-top:2px solid var(--border);border-bottom:2px solid var(--border);z-index:2;padding:.3rem 0;font-size:.65rem;font-weight:800;position:absolute;top:22px;right:-46px;transform:rotate(45deg)}.beta-tag{vertical-align:middle;background:var(--amber);color:var(--text);border:2px solid var(--border);letter-spacing:.03em;border-radius:6px;margin-left:.5rem;padding:.05rem .4rem;font-size:.65rem;font-weight:800;display:inline-block}.badge-beta{border-color:var(--amber)}.metrics-page{align-items:flex-start;gap:2rem;max-width:980px;margin:0 auto;padding:2.5rem 1.5rem 5rem;display:flex}.metrics-sidebar{background:var(--surface);border:2px solid var(--border);border-radius:14px;flex-direction:column;flex:0 0 230px;gap:1.25rem;padding:1.1rem;display:flex;position:sticky;top:1.5rem}.metrics-back{color:var(--text);font-size:.9rem;font-weight:700;text-decoration:none}.metrics-sidebar h2{margin:0;font-size:1rem}.filters-summary{cursor:pointer;border:2px solid var(--border);background:var(--tile);width:100%;color:var(--text);border-radius:8px;justify-content:space-between;align-items:center;gap:.4rem;margin:0;padding:.4rem .5rem;font-family:inherit;font-size:1rem;font-weight:700;display:flex}.filters-summary:hover{background:var(--bg)}.filters-summary:after{content:"▾";color:var(--muted);font-size:.8rem;transition:transform .15s}.filters-summary--open:after{transform:rotate(180deg)}.filters-details .filter-group{margin-top:1rem}.filter-group h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .5rem;font-size:.78rem}.filter-check{cursor:pointer;align-items:center;gap:.5rem;padding:.2rem 0;font-size:.92rem;display:flex}.metrics-main{flex:auto;min-width:0;position:relative}.filter-select-row{color:var(--text);flex-direction:column;gap:.3rem;margin-bottom:.75rem;font-size:.82rem;font-weight:600;display:flex}.filter-select-row select{background:var(--bg);border:2px solid var(--border);color:var(--text);border-radius:8px;padding:.35rem .5rem;font-size:.85rem;font-weight:400}.filter-select-row--active{background:color-mix(in srgb, var(--blue) 12%, var(--surface));border:2px solid var(--blue);box-sizing:border-box;border-radius:8px;width:calc(100% + 1rem);margin-left:-.5rem;margin-right:-.5rem;padding:.4rem .5rem}.filter-select-row--active select{background:var(--surface)}.filter-reset{width:100%;margin-top:.5rem;font-size:.85rem}.filter-metrics-link{text-align:center;box-sizing:border-box;width:100%;margin-top:1rem;font-size:.85rem;display:block}.metrics-main h1{margin:0 0 .5rem}.metrics-lede{color:var(--muted);max-width:62ch}.metrics-game-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0 2.5rem;display:grid}.metrics-game-cards .game-card{box-shadow:none}.metrics-meta{color:var(--muted);margin-top:.4rem;font-size:.78rem}.metrics-empty{color:var(--muted);font-style:italic}.metric-dim{border-top:2px solid var(--tile);padding:1.75rem 0}.metric-dim-head{align-items:baseline;gap:.7rem;display:flex}.metric-dim-num{color:var(--muted);font-family:ui-monospace,monospace;font-size:.85rem}.metric-dim-head h2{margin:0;font-size:1.25rem}.metric-dim-def{color:var(--muted);max-width:62ch;margin:.4rem 0 1rem;font-size:.92rem}.metric-rows{flex-direction:column;gap:.8rem;display:flex}.metric-row{grid-template-columns:110px 1fr;align-items:center;gap:.9rem;display:grid}.metric-row-label{font-size:.9rem;font-weight:700}.metric-row.accent-green .metric-row-label{color:var(--green)}.metric-row.accent-blue .metric-row-label{color:var(--blue)}.metric-row.accent-red .metric-row-label{color:var(--red)}.metric-row-data{flex-direction:column;gap:.3rem;display:flex}.score-bar{gap:3px;display:flex}.score-bar span{background:var(--tile);border:1px solid var(--border);border-radius:2px;width:1.05rem;height:.6rem}.score-bar.accent-green span.filled{background:var(--green)}.score-bar.accent-blue span.filled{background:var(--blue)}.score-bar.accent-red span.filled{background:var(--red)}.metric-score-row{align-items:center;gap:.6rem;display:flex}.metric-score-num{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:700}.metric-caption{color:var(--muted);font-size:.85rem}.metric-caption-na{font-style:italic}.metric-note{color:var(--muted);border-left:3px solid var(--tile);margin-top:.9rem;padding:.5rem .9rem;font-size:.85rem}.metrics-synthesis{border-top:2px solid var(--tile);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.5rem;padding-top:1.75rem;display:grid}.synth-card h3{margin:0 0 .4rem}.synth-card.accent-green h3{color:var(--green)}.synth-card.accent-blue h3{color:var(--blue)}.synth-card.accent-red h3{color:var(--red)}.synth-card p{color:var(--muted);margin:0;font-size:.9rem}.metrics-methodology{border-top:1px solid var(--tile);color:var(--muted);margin-top:2.5rem;padding-top:1.25rem;font-size:.78rem}@media (width<=720px){.metrics-page{flex-direction:column}.metrics-sidebar{flex:none;width:100%;position:static}.metric-row{grid-template-columns:84px 1fr}}.button.locked{background:var(--tile);color:var(--muted);font-size:.85rem}.button.locked:hover{background:var(--tile);color:var(--text)}.game-card-actions{flex-direction:column;align-items:flex-start;gap:.5rem;display:flex;position:relative}.tutorial-link{color:var(--blue);font-size:.82rem;font-weight:600;text-decoration:underline}.tutorial-page{max-width:560px}.tutorial-card{background:var(--surface);border:3px solid var(--border);border-top:6px solid var(--accent,var(--blue));box-shadow:4px 4px 0 var(--border);border-radius:20px;margin-top:1.5rem;padding:1.6rem}.tutorial-card.accent-green{--accent:var(--green)}.tutorial-card.accent-blue{--accent:var(--blue)}.tutorial-card.accent-red{--accent:var(--red)}.tutorial-card h2{margin:0 0 .6rem}.tutorial-card p{color:var(--text);min-height:4.5rem}.tutorial-progress{gap:.4rem;margin-bottom:1rem;display:flex}.tutorial-progress .dot{background:var(--tile);border:1.5px solid var(--border);border-radius:50%;width:.55rem;height:.55rem}.tutorial-progress .dot.active{background:var(--accent,var(--blue))}.tutorial-nav{justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.25rem;display:flex}.tutorial-step-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.legal-link-line{color:var(--muted);font-size:.82rem}.legal-page{line-height:1.6}.legal-page h1{margin:1.5rem 0 .25rem}.legal-updated{color:var(--muted);margin:0 0 1.5rem;font-size:.85rem}.legal-notice{background:var(--tile);border:2px solid var(--border);border-radius:12px;margin-bottom:2rem;padding:1rem 1.25rem;font-size:.9rem}.legal-page h2{margin:2rem 0 .75rem;font-size:1.15rem}.legal-page ul{margin:0 0 1rem;padding-left:1.25rem}.legal-page li{margin-bottom:.5rem}.legal-page a{color:var(--blue)}.profile-fields{flex-direction:column;gap:.6rem;margin:1.5rem 0 2.5rem;display:flex}.profile-field{background:var(--tile);border:2px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.1rem;display:flex}.profile-field span{color:var(--muted);font-size:.85rem;font-weight:600}.profile-playtime h2{margin:0 0 .25rem;font-size:1.05rem}.profile-playtime-empty{color:var(--muted);margin:.5rem 0 2rem;font-size:.9rem}.danger-zone{border:2px solid var(--error);border-radius:14px;padding:1.25rem 1.5rem}.danger-zone h2{color:var(--error);margin:0 0 .5rem;font-size:1.05rem}.danger-zone p{color:var(--muted);margin:0 0 1rem;font-size:.88rem}button.danger{background:var(--error)}.admin-page{max-width:900px}.admin-summary{color:var(--muted);margin:.5rem 0 1.5rem;font-weight:600}.admin-table-wrap{border:2px solid var(--border);border-radius:12px;overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;font-size:.9rem}.admin-table th,.admin-table td{text-align:left;border-bottom:1px solid var(--tile);white-space:nowrap;padding:.65rem .9rem}.admin-table th{background:var(--tile);text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-size:.78rem}.admin-beta-toggle{padding:.35rem .7rem;font-size:.8rem}.admin-beta-toggle.active{background:var(--green);color:#fff;border-color:var(--border)}.admin-table tr:last-child td{border-bottom:none}.admin-status{color:var(--muted);font-weight:600}.admin-status.active{color:var(--green)}.badge{background:var(--tile);color:var(--muted);border:2px solid var(--border);border-radius:999px;align-self:flex-start;padding:.25rem .75rem;font-size:.8rem;font-weight:700;position:relative}.loading-game-page{text-align:center;max-width:480px}.loading-game-spinner{border:3px solid var(--border);background:var(--surface);width:96px;height:96px;box-shadow:4px 4px 0 var(--border);border-radius:20px;justify-content:center;align-items:center;margin:1rem auto 1.5rem;animation:1.6s linear infinite loading-game-spin;display:flex}.loading-game-spinner[data-failed=true]{border-color:var(--error);box-shadow:4px 4px 0 var(--error);animation:none}.loading-game-emoji{font-size:2.4rem;animation:1.6s linear infinite loading-game-spin-counter;display:inline-block}@keyframes loading-game-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-game-spin-counter{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.loading-game-subtitle{color:var(--muted);margin:.5rem 0 1.5rem;font-size:.95rem}.loading-game-actions{justify-content:center;gap:1rem;margin-bottom:1.5rem;display:flex}.friends-add-form{flex-flow:wrap;align-items:flex-end;gap:.75rem}.friends-add-form label{flex:200px}.friends-sent{color:var(--green);margin-top:-.5rem;font-size:.9rem;font-weight:600}.friends-section{margin:2rem 0}.friends-section h2{margin:0 0 .75rem;font-size:1.05rem}.friends-actions{align-items:center;gap:.6rem;display:flex}.friends-actions select{background:var(--surface);border:2px solid var(--border);color:var(--text);border-radius:8px;padding:.4rem .6rem;font-size:.85rem}.friends-name{align-items:center;gap:.5rem;display:flex}.online-dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:.6rem;height:.6rem}.online-dot.online{background:var(--green);box-shadow:0 0 0 3px #4caf1e33}.invite-popup-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.invite-popup{background:var(--surface);border:2px solid var(--border);box-shadow:6px 6px 0 var(--border);text-align:center;border-radius:16px;max-width:360px;padding:1.75rem}.invite-popup p{margin:0 0 1.25rem;font-size:1.05rem;font-weight:700}.invite-popup-actions{justify-content:center;gap:1rem;display:flex}