:root{--bg: #fbf8f3;--surface: #ffffff;--text: #1b1b1b;--muted: #4a4a4a;--line: #d9d4cc;--red: #d60812;--navy: #004093;--green: #01a045;--orange: #ff7821;--teal: #0fb4a3;--purple: #6c2b77;--cyan: #0090c1;--focus: var(--navy);--selected: var(--green);--radius: 24px;--tap: 72px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica Neue,Arial,sans-serif;font-size:20px;line-height:1.4;-webkit-text-size-adjust:100%}body{min-height:100dvh}img{display:block;max-width:100%}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:var(--navy)}:focus-visible{outline:5px solid var(--focus);outline-offset:4px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.screen{min-height:100dvh;display:flex;flex-direction:column;padding:12px clamp(12px,3vw,40px) 24px;padding-left:max(clamp(12px,3vw,40px),env(safe-area-inset-left));padding-right:max(clamp(12px,3vw,40px),env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom));gap:16px}.screen-header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:10px;background:var(--bg);border-bottom:2px solid var(--line)}.character-name{margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--purple)}.character-role{margin:2px 0 0;color:var(--muted);font-size:1rem}.question-title{margin:0;font-size:clamp(1.7rem,4vw,2.8rem);font-weight:700;line-height:1.2}.question-hint{margin:4px 0 0;color:var(--muted);font-size:1.1rem}.title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.speak{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);min-width:var(--tap);padding:0 22px;border:3px solid var(--navy);border-radius:999px;background:var(--surface);color:var(--navy);font-weight:700;font-size:1.1rem}.speak[aria-pressed=true]{background:var(--navy);color:#fff}.speak svg{width:30px;height:30px;flex:none}.tiles{display:grid;grid-template-columns:repeat(var(--cols, 3),minmax(0,1fr));gap:clamp(12px,2vw,28px);align-items:stretch;align-content:start}@media(min-width:901px)and (max-width:1280px){.tiles[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles[data-count="5"] .tile-image{max-height:clamp(220px,40vh,520px)}}@media(max-width:900px)and (orientation:portrait){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px)and (orientation:portrait){.tiles{grid-template-columns:1fr;gap:20px}.tile-image{max-height:min(56vh,520px)}.screen-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding-bottom:8px}.character-name{font-size:1.2rem}.character-role{font-size:.9rem}.question-title{font-size:1.45rem}.question-hint{display:none}.speak{width:64px;min-width:64px;height:64px;min-height:64px;padding:0;justify-content:center}.speak span{display:none}}@media(max-height:480px)and (orientation:landscape){.tile-image{max-height:48vh}.tile{min-height:0}}.tile{position:relative;--label-size: clamp(1.3rem, 2.4vw, 1.8rem);display:grid;grid-template-rows:auto calc(2.5 * var(--label-size)) auto;align-content:start;gap:12px;padding:14px;border:5px solid var(--line);border-radius:var(--radius);background:var(--surface);text-align:center;transition:transform .12s ease}@media(hover:hover)and (pointer:fine){.tile:not([disabled]):hover{border-color:var(--navy)}}.tile:active{transform:scale(.99)}.tile[aria-pressed=true]{border-color:var(--selected);border-width:8px;padding:11px;background:#eaf7ef;box-shadow:0 0 0 4px #01a04540}.tile-image-wrap{display:flex;align-items:flex-start;justify-content:center;min-height:0}.tile-image{width:100%;height:auto;aspect-ratio:3 / 4;max-height:clamp(220px,52vh,620px);object-fit:contain}.tile-label{font-size:var(--label-size);font-weight:700;line-height:1.2;display:flex;align-items:center;justify-content:center}.tile-desc{font-size:clamp(.95rem,1.4vw,1.15rem);line-height:1.3;color:var(--muted);padding:0 4px 4px;min-height:3.9em}.tile-tick{position:absolute;top:-18px;right:-18px;width:64px;height:64px;border-radius:50%;background:var(--selected);color:#fff;display:grid;place-items:center;border:5px solid var(--surface)}.tile-tick svg{width:36px;height:36px}.tile:has(.tile-meta){grid-template-rows:auto auto calc(2.5 * var(--label-size)) auto}.tile-meta{justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}.tile-votes{display:inline-flex;align-items:baseline;gap:6px;padding:6px 18px;border-radius:999px;background:var(--navy);color:#fff}.tile-winner{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:var(--selected);color:#fff;font-weight:800;font-size:1rem}.tile--winner{border-color:var(--selected);border-width:8px;padding:11px;box-shadow:0 0 0 4px #01a04540}.tile--text{grid-template-rows:auto auto}.tile--text:has(.tile-meta){grid-template-rows:auto auto auto}.tile-text{white-space:pre-line;display:grid;place-items:center;min-height:clamp(150px,22vh,240px);padding:18px 16px;border-radius:16px;background:#eef3fa;color:var(--navy);font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.25;text-align:center;overflow-wrap:anywhere}.tile[aria-pressed=true] .tile-text,.tile--winner .tile-text{background:#dff3e7;color:#0b5a2b}.tiles[data-landscape=true]{grid-template-columns:1fr}.tiles[data-landscape=true] .tile{grid-template-columns:minmax(0,3fr) minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"img label" "img desc";align-items:center;text-align:left;column-gap:20px}.tiles[data-landscape=true] .tile:has(.tile-meta){grid-template-rows:auto auto auto;grid-template-areas:"img label" "img meta" "img desc"}.tiles[data-landscape=true] .tile-image-wrap{grid-area:img;align-items:center}.tiles[data-landscape=true] .tile-image{aspect-ratio:auto;height:clamp(150px,22vh,340px);max-height:none;width:100%}.tiles[data-landscape=true] .tile-label{grid-area:label;justify-content:flex-start;min-height:0}.tiles[data-landscape=true] .tile-meta{grid-area:meta;justify-self:start}.tiles[data-landscape=true] .tile-desc{grid-area:desc;min-height:0;padding:0}@media(max-width:600px)and (orientation:portrait){.tiles[data-landscape=true] .tile{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"img" "label" "desc";text-align:center}.tiles[data-landscape=true] .tile:has(.tile-meta){grid-template-rows:auto auto auto auto;grid-template-areas:"img" "label" "meta" "desc"}.tiles[data-landscape=true] .tile-label{justify-content:center}.tiles[data-landscape=true] .tile-meta{justify-self:center}.tiles[data-landscape=true] .tile-image{height:auto;aspect-ratio:auto}}.tiles[data-wide=true] .tile-image{aspect-ratio:16 / 9;max-height:clamp(160px,42vh,520px)}@media(min-width:901px)and (max-width:1280px){.tiles[data-text=true][data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}.tile-votes-number{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;line-height:1}.tile-votes-word{font-size:1rem;font-weight:700}.tile-placeholder-badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:var(--orange);color:#1b1b1b;font-size:.8rem;font-weight:700}.tile[disabled]{cursor:default}.status{min-height:2.4rem;font-size:1.2rem;font-weight:700;color:var(--green);text-align:center}.status.muted{color:var(--muted);font-weight:400}.results{display:grid;grid-template-columns:repeat(var(--cols, 3),minmax(0,1fr));gap:clamp(12px,2vw,28px)}@media(max-width:720px){.results{grid-template-columns:1fr}}.result{display:flex;flex-direction:column;gap:8px;align-items:center}.result-bar{width:100%;height:28px;border-radius:999px;background:#ece7df;overflow:hidden}.result-fill{height:100%;background:var(--green);border-radius:999px;transition:width .3s ease}.result-faces{font-size:1.6rem;letter-spacing:2px;line-height:1;min-height:1.8rem;word-break:break-all;text-align:center}.result-count{font-size:1rem;color:var(--muted)}.host-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 16px;border:3px solid var(--line);border-radius:16px;background:var(--surface)}.host-controls{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:56px;padding:0 20px;border-radius:12px;border:3px solid var(--navy);background:var(--surface);color:var(--navy);font-weight:700;font-size:1rem}.btn.primary{background:var(--navy);color:#fff}.btn.active{background:var(--green);border-color:var(--green);color:#fff}.btn.danger{border-color:var(--red);color:var(--red)}.btn[disabled]{opacity:.4;cursor:not-allowed}.host-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:1rem}.join-url{font-weight:700;color:var(--text);font-size:1.2rem}.notes{border:3px dashed var(--line);border-radius:16px;padding:12px 16px;background:#fffdf9}.notes summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.notes ul{margin:8px 0 0;padding-left:22px}.save-results{border:3px solid var(--green);border-radius:16px;padding:16px 20px;background:var(--surface)}.save-results h2{margin:0 0 4px;color:var(--green);font-size:1.4rem}.save-results p{margin:0 0 12px}.save-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.save-message{font-weight:600;color:var(--navy)}.save-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.save-list li{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}.save-list .btn{text-decoration:none}.home{position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;max-width:900px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) clamp(16px,4vw,40px) max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:32px}.home-hero{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.home-kicker{margin:0;font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.home-title{margin:0;font-size:clamp(3rem,12vw,5.5rem);line-height:1;font-weight:800;color:var(--red)}.home-title span{color:var(--navy)}.home-lead{margin:8px 0 0;font-size:clamp(1.4rem,4vw,1.9rem);font-weight:600}.home-sub{margin:0;font-size:1.2rem;color:var(--muted)}.home-start{margin-top:16px;width:min(100%,360px);min-height:108px;font-size:2.2rem;box-shadow:0 6px #017a34}.home-start.is-waiting{background:#b9b5ae;color:#f6f4f0;box-shadow:0 6px #8f8b84;cursor:not-allowed;transition:background .4s ease,box-shadow .4s ease}.home-start:active{transform:translateY(3px);box-shadow:0 3px #017a34}.home-hint{margin:0;color:var(--muted)}.home-footer{text-align:center;margin-top:auto;padding-top:8px}.zap{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.zap-bolt{position:absolute;top:-20px;opacity:0;animation:zap-flash 7.5s ease-out infinite;filter:drop-shadow(0 0 6px rgba(255,200,0,.9))}.zap-bolt-glow{fill:none;stroke:var(--orange);stroke-width:10;stroke-opacity:.35;stroke-linecap:round;stroke-linejoin:round}.zap-bolt-core{fill:none;stroke:#ffd400;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}@keyframes zap-flash{0%,to{opacity:0}2%{opacity:.6}4%{opacity:.1}6%{opacity:.7}10%{opacity:.4}16%{opacity:0}}@media(max-width:720px){.zap-bolt{transform:scale(.6);transform-origin:top left}.zap-bolt:nth-child(n+4){display:none}}.home-hero>*{position:relative}.home-hero:before{content:"";position:absolute;inset:20% 0;background:radial-gradient(closest-side,#fbf8f3f2,#fbf8f300);z-index:0}.home-hero{position:relative}@media(prefers-reduced-motion:reduce){.zap-bolt{display:none}}.start{min-height:100dvh;display:grid;place-items:center;padding:24px;text-align:center}.start-card{display:flex;flex-direction:column;gap:24px;align-items:center;max-width:720px}.start h1{margin:0;font-size:clamp(2.2rem,6vw,4rem);color:var(--red)}.start p{margin:0;font-size:1.3rem}.big-link{display:inline-flex;align-items:center;justify-content:center;min-height:96px;min-width:280px;padding:0 40px;border-radius:999px;background:var(--green);color:#fff;font-size:1.8rem;font-weight:700;text-decoration:none}.small-link{font-size:1rem;color:var(--muted)}.login-card{width:min(100%,420px)}.login-label{display:flex;flex-direction:column;gap:8px;width:100%;font-weight:600;text-align:left}.login-input{min-height:var(--tap);padding:0 20px;font:inherit;font-size:1.3rem;border:3px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text)}.login-input:focus-visible{outline:4px solid var(--focus);outline-offset:2px}.login-error{color:var(--red);font-weight:600}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(prefers-contrast:more){:root{--line: #1b1b1b;--muted: #1b1b1b}.tile{border-width:6px}}.qr-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:var(--cream, #faf7f2)}.qr-title{font-size:clamp(2.4rem,7vw,4.5rem)}.qr-lead{margin:0;font-size:clamp(1.2rem,3vw,1.8rem);color:var(--navy)}.qr-code{width:min(78vw,56vh,640px);height:auto;padding:16px;background:#fff;border:6px solid var(--navy);border-radius:24px;image-rendering:pixelated}.qr-url{margin:0;font-size:clamp(1.1rem,2.6vw,1.6rem);font-weight:700;color:var(--navy);word-break:break-all}