:root{--ink:#20204a;--muted:#6b6b91;--violet:#6d4aff;--indigo:#4338ca;--cyan:#22d3ee;--gold:#fbbf24;--panel:rgba(255,255,255,.92)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 5%,#fff 0 8%,transparent 28%),radial-gradient(circle at 90% 15%,#d9f7ff 0 5%,transparent 25%),linear-gradient(145deg,#eef7ff,#f6efff 55%,#e7fbff);background-attachment:fixed}.crystals{position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(30deg,transparent 40%,rgba(109,74,255,.12) 41% 43%,transparent 44%),linear-gradient(150deg,transparent 43%,rgba(34,211,238,.12) 44% 46%,transparent 47%);background-size:95px 95px}.wrap{position:relative;max-width:1380px;margin:auto;padding:22px}.phone-wrap{max-width:980px}.panel{background:var(--panel);border:1px solid rgba(125,123,211,.24);border-radius:24px;padding:20px;box-shadow:0 18px 48px rgba(65,58,139,.12),inset 0 1px #fff;margin-bottom:16px;backdrop-filter:blur(12px)}.hero{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,rgba(255,255,255,.96),rgba(238,242,255,.94));border-top:4px solid var(--violet)}.hero h1{font-family:Georgia,serif;font-size:clamp(28px,5vw,54px);margin:4px 0;background:linear-gradient(90deg,#312e81,#7c3aed,#0891b2);background-clip:text;color:transparent}.hero p{margin:0;color:var(--muted);font-weight:700}.hero.compact h1{font-size:clamp(25px,7vw,40px)}.eyebrow{font-size:12px;letter-spacing:.2em;color:#7c3aed;font-weight:900}.academy-seal{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;font-size:38px;background:linear-gradient(145deg,#fef3c7,#e0e7ff);border:3px double #8b5cf6;box-shadow:0 8px 25px rgba(109,74,255,.2)}h2{font-family:Georgia,serif;color:#3f3b82;margin:0 0 14px}button,input,select{width:auto;padding:12px 15px;border-radius:13px;border:1px solid #c7c9e6;background:#fff;color:var(--ink);font:inherit}label{display:grid;gap:7px;font-size:13px;color:var(--muted);font-weight:800;margin-bottom:13px}button{cursor:pointer;font-weight:900;transition:.2s transform,.2s box-shadow,.2s opacity}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(79,70,229,.18)}button:disabled{opacity:.5;cursor:not-allowed}.primary{color:#fff;border:0;background:linear-gradient(100deg,#4f46e5,#8b5cf6 60%,#0891b2)}.wide{width:100%}.hidden{display:none!important}.notice{padding:12px 16px;margin-bottom:15px;border-radius:14px;background:#fff1f2;border:1px solid #fda4af;color:#be123c;font-weight:700}.setup-row{display:flex;gap:18px;align-items:end}.setup-row label{margin:0}.scope-note,.scope-line{display:block;color:#5b21b6;font-size:12px;font-weight:800;letter-spacing:.02em}.scope-note{margin:13px 0 0}.scope-line{margin-top:6px}.room-banner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px}.bigcode{font:900 clamp(42px,8vw,78px) Georgia,serif;color:#4338ca;letter-spacing:.14em;text-shadow:0 4px 0 #e0e7ff}.small{color:var(--muted);font-size:13px}.center{text-align:center}.qr{padding:12px;background:#fff;border:1px solid #ddd6fe;border-radius:18px}.qr img,.qr canvas{display:block}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{margin:0}.pill,.privacy{border-radius:999px;padding:7px 11px;background:#ede9fe;color:#5b21b6;font-size:12px;font-weight:900}.pill.good{background:#dcfce7;color:#15803d}.pill.bad{background:#fee2e2;color:#b91c1c}.player-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}.player-card{display:flex;align-items:center;gap:12px;border:1px solid #ddd6fe;padding:13px;border-radius:18px;background:linear-gradient(145deg,#fff,#f5f3ff)}.player-card.current{outline:3px solid #fbbf24;box-shadow:0 0 25px rgba(251,191,36,.25)}.player-card strong,.player-card small,.player-card span{display:block}.player-card small{color:var(--muted);margin:3px 0 7px}.avatar{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:50%;font-size:25px;background:linear-gradient(145deg,#cffafe,#ddd6fe)}.ready{color:#15803d;font-size:11px;font-weight:900}.waiting{color:#b45309;font-size:11px;font-weight:900}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{min-height:115px;padding:16px;border-radius:19px;border:1px solid #dbeafe;background:linear-gradient(145deg,#fff,#eff6ff)}.stat span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.stat strong{display:block;font-size:clamp(25px,3vw,40px);margin-top:12px;color:#312e81}.stat.active{background:linear-gradient(145deg,#fefce8,#f5f3ff);border-color:#fde68a}.mini-element{display:grid!important;place-items:center;width:54px;height:58px;margin-top:8px!important;border:3px solid var(--card-color);border-radius:10px;background:#fff;font:900 26px Georgia!important}.transit-stat>div{display:flex;align-items:center;gap:10px}.log{max-height:300px;overflow:auto}.log div{display:flex;justify-content:space-between;gap:20px;padding:10px;border-bottom:1px solid #e8e7f4}.log time{color:var(--muted);font-size:12px}.log-winner{color:#92400e;background:#fef3c7;font-weight:900}.winner{text-align:center;padding:32px;border-radius:24px;color:#4c1d95;background:linear-gradient(135deg,#fef3c7,#ddd6fe,#cffafe);box-shadow:0 18px 50px rgba(109,74,255,.2);margin-bottom:16px}.winner .trophy{font-size:72px}.winner h2{font-size:clamp(26px,5vw,48px)}.status-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.status-strip div{text-align:center}.status-strip span{display:block;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em}.status-strip strong{font-size:20px;color:#4338ca}.turn-banner{text-align:center;padding:14px;border-radius:16px;margin-bottom:16px;color:#78350f;background:linear-gradient(90deg,#fef3c7,#fff7ed,#fef3c7);font-weight:900;letter-spacing:.12em;animation:pulse 1.5s infinite}.hand-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:11px}.element-card{position:relative;overflow:hidden;min-height:190px;padding:12px;border:2px solid var(--card-color);border-radius:17px;text-align:center;background:linear-gradient(150deg,#fff 60%,color-mix(in srgb,var(--card-color) 18%,white));box-shadow:0 8px 20px rgba(55,48,120,.09)}.element-card:before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--card-color)}.element-card .num{text-align:left;color:var(--muted);font-size:12px}.element-card .symbol{font:900 58px Georgia;color:#312e81;margin:8px 0}.element-card .ename{font-weight:900}.element-card .group,.element-card .category{font-size:10px;color:var(--muted);margin-top:7px}.selectable .element-card{cursor:pointer}.selectable .element-card:hover,.selectable .element-card:focus{transform:translateY(-5px);outline:3px solid #fbbf24}.single-card{max-width:180px}.actions{display:flex;gap:10px;flex-wrap:wrap}.incoming-panel{border:2px solid #fbbf24}.action-dock{position:sticky;bottom:8px;z-index:3}.empty{color:var(--muted);font-style:italic}.busy button{pointer-events:none;opacity:.65}@keyframes pulse{50%{box-shadow:0 0 30px rgba(251,191,36,.35)}}
.classroom-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.classroom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:13px;margin-top:16px}.classroom-card{position:relative;padding:16px;border:1px solid #ddd6fe;border-radius:19px;background:linear-gradient(145deg,#fff,#f5f3ff);box-shadow:0 8px 24px rgba(65,58,139,.08)}.classroom-card.selected{outline:3px solid var(--violet);box-shadow:0 12px 30px rgba(109,74,255,.18)}.classroom-card.status-playing{border-color:#67e8f9;background:linear-gradient(145deg,#ecfeff,#eef2ff)}.classroom-card.status-finished{border-color:#fde68a;background:linear-gradient(145deg,#fffbeb,#f5f3ff)}.room-number{font-size:10px;letter-spacing:.16em;color:#7c3aed;font-weight:900}.room-code{display:inline-block;margin:6px 8px 10px 0;font:900 29px Georgia,serif;letter-spacing:.1em;color:#312e81}.room-status{display:inline-block;padding:5px 8px;border-radius:999px;background:#e0e7ff;color:#4338ca;font-size:9px;font-weight:900;vertical-align:middle}.status-playing .room-status{background:#cffafe;color:#0e7490}.status-finished .room-status{background:#fef3c7;color:#92400e}.room-metrics{display:flex;gap:6px;flex-wrap:wrap}.room-metrics span{padding:5px 7px;border-radius:8px;background:#fff;color:#5b5b80;font-size:10px;font-weight:800}.classroom-card p{min-height:18px;margin:10px 0;color:var(--muted);font-size:12px}.room-card-actions{display:flex;gap:7px;flex-wrap:wrap}.room-card-actions button{flex:1;padding:9px 10px;font-size:10px}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}.hand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.wrap{padding:10px}.panel{padding:15px;border-radius:19px}.academy-seal{width:58px;height:58px;font-size:27px}.hero p{font-size:12px}.room-banner{grid-template-columns:1fr;text-align:center}.qr{justify-self:center}.bigcode{font-size:46px}.room-banner a{font-size:11px;overflow-wrap:anywhere}.setup-row{display:grid}.classroom-actions button{width:100%}.classroom-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.hand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.element-card{min-height:170px}.element-card .symbol{font-size:46px}.privacy{font-size:9px}.actions button{width:100%}.status-strip{padding:12px 8px}.status-strip strong{font-size:15px}.section-title{align-items:flex-start}}