*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8fafc;--surface: #ffffff;--surface2: #f1f5f9;--surface3: #e2e8f0;--primary: #4f46e5;--primary-hover: #4338ca;--primary-fg: #ffffff;--primary-subtle: rgba(79, 70, 229, .08);--danger: #dc2626;--danger-subtle: rgba(220, 38, 38, .08);--success: #16a34a;--success-subtle: rgba(22, 163, 74, .08);--warning: #b45309;--warning-subtle: rgba(180, 83, 9, .08);--text: #0f172a;--text-muted: #64748b;--border: #e2e8f0;--border-strong: #cbd5e1;--shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);--shadow: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);--shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);--radius: 12px;--radius-sm: 8px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}:root[data-theme=dark]{--bg: #0c0f1a;--surface: #141826;--surface2: #1c2236;--surface3: #242c46;--primary: #818cf8;--primary-hover: #a5b4fc;--primary-fg: #0c0f1a;--primary-subtle: rgba(129, 140, 248, .12);--danger: #f87171;--danger-subtle: rgba(248, 113, 113, .12);--success: #4ade80;--success-subtle: rgba(74, 222, 128, .12);--warning: #fbbf24;--warning-subtle: rgba(251, 191, 36, .12);--text: #e2e8f0;--text-muted: #94a3b8;--border: #293455;--border-strong: #3d4f76;--shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);--shadow: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);--shadow-lg: 0 12px 32px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.35)}html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:1.5;min-height:100%;overscroll-behavior:none;-webkit-overflow-scrolling:touch;transition:background-color .2s,color .2s}input,select,textarea{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:1rem;padding:.75rem 1rem;outline:none;width:100%;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;-moz-appearance:none;appearance:none}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-subtle)}a{color:var(--primary);text-decoration:none}h1{font-size:1.6rem;font-weight:700;letter-spacing:-.025em}h2{font-size:1.2rem;font-weight:600;margin-bottom:.75rem}header{background:var(--surface);border-bottom:1px solid var(--border);padding:.75rem 1.25rem;padding-top:calc(.75rem + var(--safe-top));padding-left:calc(1.25rem + var(--safe-left));padding-right:calc(1.25rem + var(--safe-right));display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:10;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);transition:background-color .2s,border-color .2s}header>span:first-child{font-size:1.05rem;font-weight:700;color:var(--primary);letter-spacing:-.01em}.page{padding:1rem 1rem calc(1.5rem + var(--safe-bottom));padding-left:calc(1rem + var(--safe-left));padding-right:calc(1rem + var(--safe-right));max-width:680px;margin:0 auto}.page-title{margin-bottom:1.25rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:.875rem;transition:border-color .15s,box-shadow .15s;box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent}.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.875rem}.field label{font-size:.85rem;color:var(--text-muted);font-weight:500}.btn{background:var(--primary);border:none;border-radius:var(--radius-sm);color:var(--primary-fg);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:600;min-height:48px;padding:.65rem 1.25rem;transition:background-color .15s,transform .08s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;outline:none}.btn:active:not(:disabled){transform:scale(.97)}.btn:hover:not(:disabled){background:var(--primary-hover)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn:focus-visible{box-shadow:0 0 0 3px var(--primary-subtle),0 0 0 5px var(--primary)}.btn-sm{min-height:36px;padding:.35rem .85rem;font-size:.875rem}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){filter:brightness(1.1)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(1.1)}.btn-warning{background:var(--warning);color:#fff}.btn-warning:hover:not(:disabled){filter:brightness(1.1)}.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text)}.btn-ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}.btn-primary{background:var(--primary);color:var(--primary-fg)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-icon{background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;font-size:.95rem;height:38px;width:38px;min-height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,background-color .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.btn-icon:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.badge{display:inline-block;padding:.18rem .58rem;border-radius:999px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge-draft{background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}.badge-open{background:var(--success-subtle);color:var(--success)}.badge-running{background:var(--primary-subtle);color:var(--primary)}.badge-paused{background:var(--warning-subtle);color:var(--warning)}.badge-finished{background:#0ea5e91a;color:#0ea5e9}.badge-closed{background:var(--danger-subtle);color:var(--danger)}.section-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm)}.scoreboard{width:100%;border-collapse:collapse;font-size:.9rem}.scoreboard th{text-align:left;padding:.5rem .6rem;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.scoreboard td{padding:.5rem .6rem;border-bottom:1px solid var(--border)}.scoreboard tr:last-child td{border-bottom:none}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.5rem}.gap-2{gap:1rem}.flex-wrap{flex-wrap:wrap}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.text-muted{color:var(--text-muted);font-size:.9rem}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.spinner{display:inline-block;width:1.2rem;height:1.2rem;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:.95rem}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-top:1rem}@media(max-width:480px){.answer-grid{grid-template-columns:1fr}}.answer-btn{background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:500;min-height:68px;padding:1rem 1.1rem;text-align:left;transition:border-color .15s,background-color .15s,transform .08s;width:100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}.answer-btn:active:not(:disabled){transform:scale(.97)}.answer-btn:hover:not(:disabled){border-color:var(--primary);background:var(--primary-subtle)}.answer-btn.selected{border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 1px var(--primary)}.answer-btn.correct{border-color:var(--success);background:var(--success-subtle);color:var(--success)}.answer-btn.wrong{border-color:var(--danger);background:var(--danger-subtle);opacity:.7}.answer-btn:disabled{cursor:default;transform:none}.pwa-install-banner{position:fixed;bottom:calc(1rem + var(--safe-bottom));left:calc(1rem + var(--safe-left));right:calc(1rem + var(--safe-right));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-lg);z-index:100;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.join-form{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}.join-form-actions{display:flex;gap:.5rem;flex-wrap:wrap}.join-form-actions .btn{flex:1;min-width:110px;justify-content:center}.game-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.game-header h1{font-size:1.1rem;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55vw}.game-header-right{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}.connection-dot{font-size:.75rem;white-space:nowrap}@media(max-width:400px){.game-header h1{max-width:40vw}}.order-item{display:flex;align-items:center;gap:.75rem;background:var(--surface2);border:2px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:.5rem;font-size:.95rem;font-weight:500;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.order-handle{color:var(--text-muted);font-size:1.1rem;flex-shrink:0}