:root{--ink: #101827;--ink-2: #18233a;--ink-3: #22304d;--panel: #1f2d49;--line: #344461;--rose: #6d7dff;--rose-deep: #4859d6;--gold: #ffc25e;--mint: #54e0c7;--sky: #8fb4ff;--cloud: #eef5ff;--muted: #92a3c0;--danger: #ff5a5a;--radius: 18px;--radius-sm: 12px;--font-display: "Avenir Next", "Trebuchet MS", "PingFang TC", "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif;--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", Roboto, system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);color:var(--cloud);background:radial-gradient(120% 80% at 50% -10%,#24365d 0%,var(--ink) 55%,#0b111e 100%);-webkit-font-smoothing:antialiased;overscroll-behavior:none}.app{min-height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);background:radial-gradient(120% 80% at 50% -10%,#24365d 0%,var(--ink) 55%,#0b111e 100%)}.app[data-theme=lover]{--ink: #170f2b;--ink-2: #221742;--ink-3: #2c1f54;--panel: #281b4d;--line: #3a2b66;--rose: #ff5d8f;--rose-deep: #d83e72;--gold: #ffc25e;--mint: #54e0c7;--sky: #8fb4ff;--cloud: #f6eefb;--muted: #9a86c4;background:radial-gradient(120% 80% at 50% -10%,#2a1d55 0%,var(--ink) 55%,#100a20 100%)}.topbar{display:flex;align-items:center;gap:12px;padding:14px 2px 10px}.topbar .brand{display:flex;flex-direction:column;line-height:1.05}.topbar .brand b{font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.2px}.topbar .brand small{color:var(--muted);font-size:11px;margin-top:2px}.topbar .spacer{flex:1}.iconbtn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--ink-2);color:var(--cloud);height:38px;padding:0 12px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.iconbtn:active{transform:translateY(1px)}.langswitch{display:inline-flex;gap:4px;background:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:3px}.langswitch button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;padding:5px 10px;border-radius:999px;cursor:pointer}.langswitch button.on{background:var(--rose);color:#fff}.theme-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:4px}.theme-switch button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:10px;background:transparent;color:var(--muted);padding:10px 12px;font-weight:800;cursor:pointer}.theme-switch button.on{background:var(--rose);color:#fff}.heartlink{display:inline-flex;align-items:center}.card{background:linear-gradient(180deg,var(--ink-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px}.stack{display:flex;flex-direction:column;gap:14px}.center-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px 8px}.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:800;color:var(--gold)}.h1{font-family:var(--font-display);font-weight:800;font-size:30px;margin:0}.h2{font-family:var(--font-display);font-weight:800;font-size:21px;margin:0}.muted{color:var(--muted)}.tiny{font-size:12px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:100%;border:0;border-radius:14px;padding:15px 18px;font-family:var(--font-display);font-weight:800;font-size:16px;color:#2a0f1c;background:var(--gold);box-shadow:0 4px #c8923f;transition:transform .04s,box-shadow .04s}.btn:active{transform:translateY(3px);box-shadow:0 1px #c8923f}.btn.rose{color:#fff;background:var(--rose);box-shadow:0 4px 0 var(--rose-deep)}.btn.rose:active{box-shadow:0 1px 0 var(--rose-deep)}.btn.ghost{color:var(--cloud);background:var(--ink-2);border:1px solid var(--line);box-shadow:0 4px #1a1233}.btn.ghost:active{box-shadow:0 1px #1a1233}.btn:disabled{opacity:.5;box-shadow:none;transform:none;cursor:default}.field{display:flex;flex-direction:column;gap:7px}.field label{font-size:12px;font-weight:700;color:var(--muted)}.input{width:100%;border:1px solid var(--line);background:var(--ink);color:var(--cloud);border-radius:12px;padding:13px 14px;font-size:16px;font-family:var(--font-body)}.input::placeholder{color:#6b5b95}.input.code{font-family:var(--font-display);font-weight:800;letter-spacing:8px;text-align:center;text-transform:uppercase;font-size:22px}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}.error-banner{border:1px solid #5a2740;background:#3a1830;color:#ffd0de;border-radius:12px;padding:11px 13px;font-size:13px}.codebox{font-family:var(--font-display);font-weight:800;font-size:46px;letter-spacing:12px;text-align:center;color:var(--gold);background:var(--ink-2);border:1px dashed var(--line);border-radius:16px;padding:22px 10px 22px 22px}.dots{display:inline-flex;gap:5px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}@keyframes blink{0%,to{opacity:.25}50%{opacity:1}}.gamegrid{display:grid;gap:12px}.gamecard{text-align:left;cursor:pointer;position:relative;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--ink-2),var(--panel));padding:16px;display:flex;gap:14px;align-items:flex-start;transition:transform .06s,border-color .06s;color:var(--cloud)}.gamecard:active{transform:scale(.985)}.gamecard.pickable:hover{border-color:var(--rose)}.gamecard .glyph{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:24px;background:var(--ink);border:1px solid var(--line)}.gamecard h3{margin:0 0 3px;font-family:var(--font-display);font-size:17px}.gamecard p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}.tag{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mint);border:1px solid #2f5a52;background:#15302c;padding:3px 8px;border-radius:999px}.tag.versus{color:var(--gold);border-color:#5a4a2a;background:#2e2615}.tag.coop{color:var(--mint)}.menu-veil{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);background:#140c26b8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:grid;place-items:center;text-align:center;padding:20px;color:var(--cloud);font-weight:700}.game-wrap{flex:1;display:flex;flex-direction:column;gap:12px;padding-top:4px}.role-chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;border:1px solid var(--line);background:var(--ink-2);color:var(--cloud);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}.role-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--mint)}.role-chip.alt .dot{background:var(--gold)}.hint{color:var(--muted);font-size:13px;line-height:1.5}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:#0d081ad1;padding:24px;animation:fade .25s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay .panel{width:100%;max-width:360px;text-align:center;background:linear-gradient(180deg,var(--ink-2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:28px 22px}.overlay .big{font-family:var(--font-display);font-weight:800;font-size:30px;margin:0 0 6px}.surface{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,var(--ink-3),var(--ink));touch-action:none;user-select:none;-webkit-user-select:none}.statusbar{display:flex;gap:10px;align-items:stretch}.stat{flex:1;text-align:center;border:1px solid var(--line);background:var(--ink-2);border-radius:14px;padding:9px 6px}.stat .k{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.stat .v{font-family:var(--font-display);font-weight:800;font-size:22px;margin-top:2px}.stat .v.warn{color:var(--gold)}.stat .v.bad{color:var(--danger)}button{font-family:inherit}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
