:root{--accent:#7b478f;--accent2:#e08c45;--grad:linear-gradient(120deg,var(--accent),var(--accent2));--btn-c1:var(--accent);--btn-c2:var(--accent2);--btn-grad:linear-gradient(120deg,var(--btn-c1),var(--btn-c2));--bg:#f7f2ec;--card-bg:#fff;--text:#29252b;--muted:#66606a;--card-border:#e3d9df;--danger:#be3131;--hero-grid:rgba(20,20,40,.05)}
:root[data-theme="dark"]{--accent:#d78ee7;--accent2:#ffc17a;--btn-c1:#7b478f;--btn-c2:#c57836;--bg:#151418;--card-bg:#211f25;--text:#f0edf2;--muted:#bbb3bd;--card-border:#3a3540;--danger:#ff8f7a;--hero-grid:rgba(255,255,255,.06)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;background-color:var(--bg);background-image:radial-gradient(circle,var(--hero-grid) 1px,transparent 1px);background-size:22px 22px;color:var(--text)}
.site-nav{width:100%;padding:.7rem 1rem;font-size:.85rem}.site-nav a{display:inline-flex;color:var(--text);background:var(--card-bg);border:1px solid var(--card-border);border-radius:999px;padding:.35rem .9rem;text-decoration:none}.site-header{text-align:center;padding:.8rem 1rem}.site-header h1{margin:0;font-size:1.8rem;background:var(--grad);background-clip:text;color:transparent}.subtitle,.status,.label{color:var(--muted)}.subtitle{margin:.35rem 0 0}.ad-slot{width:100%;max-width:640px;min-height:60px;margin:.8rem auto;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e2e2e2 10px,#e2e2e2 20px);color:#999;font-size:.8rem;border-radius:6px}:root[data-theme="dark"] .ad-slot{background:repeating-linear-gradient(45deg,#1c1c20,#1c1c20 10px,#232328 10px,#232328 20px);color:#9a9aa2}main{width:100%;max-width:720px;padding:1rem 1rem 2rem}.hidden{display:none!important}
.panel,.role-box{width:100%;margin:0 0 1rem;padding:1.25rem;border-radius:12px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 4px 16px #0001;text-align:center}.panel h2,.panel h3{margin-top:0}.text-input{padding:.65rem .75rem;border:1px solid var(--card-border);border-radius:7px;background:var(--card-bg);color:var(--text);font:inherit;text-align:center}.panel>.text-input{width:min(100%,260px);display:block;margin:.5rem auto 1rem}
.primary{border:0;border-radius:8px;padding:.75rem 1rem;background:var(--btn-grad);color:#fff;font:inherit;font-weight:bold;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--btn-c1) 35%,transparent)}.primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.choice-button{border:1px solid var(--accent);border-radius:8px;padding:.75rem 1rem;background:var(--card-bg);color:var(--text);font:inherit;font-weight:bold;cursor:pointer}.choice-button:disabled{opacity:.5;cursor:not-allowed}.link-button{border:0;padding:.35rem;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}.secondary-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:8px;padding:.75rem 1rem;background:transparent;color:var(--accent);font:inherit;font-weight:bold;text-decoration:none;cursor:pointer}.online-choice{display:flex;flex-direction:column;align-items:center;gap:1rem}.join-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.join-row .text-input{width:140px;text-transform:uppercase;letter-spacing:.14em}.error{min-height:1.2em;color:var(--danger)}.host-code{padding-bottom:1rem;border-bottom:1px solid var(--card-border)}.room-code{color:var(--accent);font-size:2rem;font-weight:bold;letter-spacing:.2em}.roster{padding:0;list-style:none}.roster li{margin:.35rem 0;padding:.5rem;border-radius:6px;background:color-mix(in srgb,var(--accent) 8%,var(--card-bg));font-weight:bold}
.game{display:flex;flex-direction:column;align-items:center}.role-box{margin-bottom:.7rem}.topic{margin:.3rem;font-size:1.7rem;font-weight:bold;color:var(--accent)}canvas{width:min(100%,320px);height:auto;aspect-ratio:1;border:3px solid var(--accent);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair}.drawing-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:.8rem}.reveal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}.drawing-card{padding:.7rem;border:1px solid var(--card-border);border-radius:9px}.drawing-card h3{margin:.1rem 0 .5rem}.drawing-card .card-topic{margin:.1rem 0 .5rem;font-weight:bold;color:var(--accent)}.drawing-card canvas{width:100%;border-width:1px;cursor:default}
.candidates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1rem 0}.candidates button{display:flex;flex-direction:column;gap:.45rem;align-items:center;border:1px solid var(--accent);border-radius:8px;padding:.55rem;background:var(--card-bg);color:var(--text);font:inherit;font-weight:bold;cursor:pointer}.candidates button canvas{width:100%;border:1px solid var(--card-border);border-radius:6px;cursor:pointer;pointer-events:none}.candidates button.selected{background:color-mix(in srgb,var(--accent) 14%,var(--card-bg));outline:3px solid var(--accent)}
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#0009}.overlay-card{width:420px;max-width:90%;max-height:85vh;overflow:auto;padding:1.5rem;border-radius:12px;background:var(--card-bg);text-align:center}.result-title{font-size:1.35rem;font-weight:bold}.result-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.6rem 0 1rem}.result-stat{margin:0;padding:.35rem .7rem;border-radius:999px;font-weight:bold;font-size:.9rem;background:color-mix(in srgb,var(--muted) 15%,var(--card-bg));color:var(--muted)}.result-stat.success{background:color-mix(in srgb,var(--accent2) 22%,var(--card-bg));color:var(--accent2)}.result-stat.fail{background:color-mix(in srgb,var(--danger) 15%,var(--card-bg));color:var(--danger)}.result-topic{color:var(--accent);font-size:1.35rem;font-weight:bold}.counts{display:inline-block;text-align:left}.counts li{margin:.3rem 0;padding:.4rem .6rem;border-radius:6px;background:color-mix(in srgb,var(--accent) 7%,var(--card-bg))}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}.howto{text-align:left}.howto h2{text-align:center}.howto li{margin:.5rem 0;line-height:1.55}footer{margin-top:auto;padding:1.2rem;color:var(--muted);font-size:.82rem;text-align:center}footer a{color:inherit}
@media(max-width:480px){.site-header h1{font-size:1.45rem}.panel{padding:1rem}.reveal-grid{grid-template-columns:1fr 1fr}.result-actions{flex-direction:column}}
.connection-health{position:sticky;top:.5rem;z-index:20;margin:.5rem auto;padding:.7rem 1rem;max-width:42rem;border:1px solid #d97706;border-radius:.6rem;background:#fffbeb;color:#92400e;font-weight:700;text-align:center}.connection-health.hidden{display:none}