:root{--bg: #fff7ed;--surface: #ffffff;--surface-2: #fdf6ec;--text: #1f2937;--text-soft: #475569;--accent: #7a5af8;--accent-soft: #f1edff;--success: #16a34a;--danger: #ef4444;--warn: #f59e0b;--border: #e7e2d5;--shadow: 0 6px 18px rgba(20, 16, 50, .08);--radius: 18px;--radius-lg: 26px}[data-theme=dark]{--bg: #0f0a1c;--surface: #1c1633;--surface-2: #14102a;--text: #f3f0ff;--text-soft: #c4bcd9;--accent: #a78bfa;--accent-soft: #2a2050;--border: #2c244d;--shadow: 0 8px 24px rgba(0, 0, 0, .4)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0f0a1c;--surface: #1c1633;--surface-2: #14102a;--text: #f3f0ff;--text-soft: #c4bcd9;--accent: #a78bfa;--accent-soft: #2a2050;--border: #2c244d;--shadow: 0 8px 24px rgba(0, 0, 0, .4)}}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Apple Color Emoji","Segoe UI Emoji",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font-family:inherit;cursor:pointer}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding-top:calc(clamp(12px,1.4vw,18px) + env(safe-area-inset-top,0px));padding-right:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-right,0px));padding-bottom:clamp(12px,1.4vw,18px);padding-left:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-left,0px));border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.topbar .title{font-weight:700;font-size:clamp(18px,2.2vw,24px);display:flex;gap:10px;align-items:center}.topbar .brand-logo{width:clamp(28px,3vw,38px);height:clamp(28px,3vw,38px);border-radius:8px;display:block}.topbar .brand-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;padding:4px 6px;border-radius:12px;color:inherit;font-weight:inherit;font-size:inherit;cursor:pointer}.topbar .brand-btn:hover:not(:disabled){background:var(--surface-2)}.topbar .brand-btn:disabled{cursor:default;opacity:1}.topbar .user-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:clamp(13px,1.4vw,16px);color:var(--text-soft);font-weight:600;cursor:pointer}.topbar .user-pill:hover:not(:disabled){border-color:var(--accent);color:var(--text)}.topbar .user-pill:disabled{cursor:default}.topbar .actions{display:flex;gap:clamp(8px,1vw,12px)}.icon-btn{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:clamp(8px,1.2vw,12px) clamp(12px,1.6vw,18px);font-size:clamp(16px,1.6vw,18px);display:inline-flex;align-items:center;gap:6px;min-height:40px}.icon-btn:hover{background:var(--accent-soft)}.icon-btn[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.screen{flex:1;padding:18px;max-width:1200px;width:100%;margin:0 auto}.screen h1{margin:8px 0 4px;font-size:clamp(24px,4vw,38px)}.screen .lede{margin:0 0 18px;color:var(--text-soft);font-size:clamp(14px,1.6vw,18px)}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,22vw,240px),1fr));gap:clamp(12px,2vw,22px)}.tile{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:clamp(18px,3vw,28px) clamp(14px,2.4vw,22px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,12px);font-size:clamp(15px,1.7vw,20px);font-weight:600;color:var(--text);box-shadow:var(--shadow);transition:transform .12s ease,border-color .12s ease;min-height:clamp(120px,18vw,200px)}.tile:hover{transform:translateY(-2px)}.tile:disabled{opacity:.45;cursor:not-allowed}.tile .glyph{font-size:clamp(38px,5.5vw,64px);line-height:1}.tile .glyph-img{width:clamp(48px,7vw,84px);height:clamp(48px,7vw,84px);object-fit:contain;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.tile .glyph-img.cover{width:clamp(80px,12vw,132px);height:clamp(80px,12vw,132px);border-radius:14px;object-fit:cover;box-shadow:0 4px 10px #1410322e}.tile.locked .glyph-img{filter:grayscale(.6);opacity:.7}.tile .sub{font-size:clamp(12px,1.3vw,15px);color:var(--text-soft);font-weight:500}.tile.locked .glyph:after{content:"🔒";position:relative;margin-left:4px;font-size:18px}.profile-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(12px,2vw,20px) clamp(14px,2vw,22px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;min-height:56px;font-size:clamp(15px,1.6vw,19px)}.profile-row .who{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);font-weight:600}.profile-row .who .avatar{font-size:clamp(26px,3.4vw,38px)}.input-row{display:flex;gap:8px;margin:12px 0}.input-row input{flex:1;padding:clamp(12px,1.6vw,16px) clamp(14px,1.8vw,20px);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:clamp(16px,1.8vw,20px);min-height:48px}.avatar-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(64px,13vw,96px),1fr));gap:clamp(8px,1.4vw,14px);margin-top:12px}.avatar-tile{aspect-ratio:1 / 1;position:relative;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--surface-2);border:2px solid var(--border);padding:0;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .14s ease;min-height:64px}.avatar-tile:hover{transform:translateY(-1px)}.avatar-tile img{width:70%;height:70%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.avatar-tile.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 4px #a78bfa59;transform:translateY(-2px)}.avatar-check{position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:var(--accent);color:#fff;border-radius:50%;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000040;border:2px solid var(--surface)}.input-row .emoji-pick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.btn{padding:clamp(12px,1.6vw,18px) clamp(18px,2.4vw,28px);border-radius:14px;border:none;background:var(--accent);color:#fff;font-weight:700;font-size:clamp(15px,1.7vw,19px);min-height:44px}.btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.board-wrap{padding:clamp(12px,1.6vw,20px);max-width:1400px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,1.4vw,16px)}.hud{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(10px,1.4vw,16px) clamp(14px,2vw,22px);font-weight:600}.hud .stat{display:flex;flex-direction:column;align-items:center;font-size:clamp(12px,1.2vw,14px);color:var(--text-soft)}.hud .stat strong{font-size:clamp(20px,2.4vw,28px);color:var(--text)}.board{display:grid;gap:clamp(6px,1vw,12px);width:100%}.card{position:relative;width:100%;aspect-ratio:1 / 1;perspective:800px;background:transparent;border:0;padding:0}.card .inner{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1)}.card.flipped .inner,.card.matched .inner{transform:rotateY(180deg)}.card .face,.card .back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-weight:800;box-shadow:var(--shadow)}.card .back{background:linear-gradient(135deg,#a78bfa,#7a5af8);color:#fff;font-size:clamp(20px,5vw,44px)}.card .face{background:var(--surface);color:var(--text);border:2px solid var(--border);transform:rotateY(180deg);font-size:clamp(22px,5.5vw,56px);overflow:hidden;word-break:break-word;text-align:center;padding:clamp(4px,.8vw,10px)}.card .swatch{width:60%;height:60%;border-radius:50%;box-shadow:inset 0 0 0 4px #0000000f}.card .face-img{width:78%;height:78%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.card .face-img.bundled{width:94%;height:94%;border-radius:10px;object-fit:contain;background:#fff}.card .face-text{font-size:clamp(15px,3.4vw,30px);line-height:1.1;text-align:center;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.card .face-text.long{font-size:clamp(12px,2.6vw,22px)}.card .face-text.xlong{font-size:clamp(10px,2vw,17px)}.card.matched .face{border-color:var(--success);animation:pulse .54s ease}.card.miss .inner{animation:shake .36s ease}@keyframes pulse{0%{transform:rotateY(180deg) scale(1)}35%{transform:rotateY(180deg) scale(1.12)}to{transform:rotateY(180deg) scale(1)}}@keyframes shake{0%,to{transform:rotateY(180deg) translate(0)}20%{transform:rotateY(180deg) translate(-6px)}40%{transform:rotateY(180deg) translate(6px)}60%{transform:rotateY(180deg) translate(-4px)}80%{transform:rotateY(180deg) translate(4px)}}.results{text-align:center;padding:clamp(20px,3vw,40px)}.results .stars{font-size:clamp(56px,9vw,96px);letter-spacing:clamp(6px,1vw,14px);margin:8px 0}.results .badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}.badge-pill{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;display:inline-flex;gap:6px;align-items:center}.results .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.confirm-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}.confirm-card{width:min(440px,100%);background:var(--surface);color:var(--text);border-radius:var(--radius-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow);text-align:center}.confirm-card h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,26px)}.confirm-card p{margin:0 0 16px;color:var(--text-soft)}.confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn.danger{background:var(--danger);color:#fff}.btn.primary-cta{font-size:clamp(17px,2vw,22px);padding:clamp(14px,2vw,22px) clamp(22px,3vw,36px);min-height:56px;box-shadow:0 6px 14px #7a5af859}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:99}.confetti span{position:absolute;top:-30px;font-size:22px;animation:fall 1.6s ease-in forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:0}}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}.settings-row:last-child{border-bottom:0}.settings-row .label{font-weight:600}.settings-row .desc{color:var(--text-soft);font-size:13px}.toggle{width:clamp(48px,5vw,64px);height:clamp(28px,3vw,36px);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;position:relative;transition:background .12s ease;flex-shrink:0}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:calc(100% / 2.18);aspect-ratio:1;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:transform .14s ease}.toggle[aria-pressed=true]{background:var(--accent)}.toggle[aria-pressed=true]:after{transform:translate(calc(100% + 4px))}.empty{padding:40px;text-align:center;color:var(--text-soft)}.skip-link{position:absolute;left:12px;top:12px;background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;transform:translateY(-150%);transition:transform .12s ease;z-index:100}.skip-link:focus{transform:translateY(0)}.tutorial{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:14px 0;display:flex;gap:12px}.tutorial .glyph{font-size:32px}.tutorial .body{font-size:14px;color:var(--text-soft)}.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}