/* A single illustrated world, from the invitation to the final answer. */
:root{--bg:#d7f1ec;--paper:#fffcf0;--ink:#214c52;--muted:#49686b;--accent:#167568;--line:#b5d4ca;--yellow:#ffd16a;--pink:#ed8066;--water:#a9dfdd;--field:#edf2df;--tile-ink:#214c52;--hill-far:#91c5b2;--hill-near:#58a69b;--shore:#2e9695;--button-base:#09564d;--panel-edge:#e8d8ad;--sky-top:#62bdcf;--sky-bottom:#dbf3d9}
body{background:var(--bg)}
.game-environment{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 78%);z-index:0}
#app{position:relative;z-index:1}
.world-sun{position:absolute;top:9%;left:8%;width:130px;height:130px;border-radius:50%;background:#fff2ad;box-shadow:0 0 0 22px #fff2ad15,0 0 0 50px #fff2ad0c}
.cloud{position:absolute;width:190px;height:40px;background:#fffdf0;opacity:.65;border-radius:100px}
.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%}.cloud:before{width:80px;height:80px;left:30px;bottom:5px}.cloud:after{width:100px;height:100px;right:20px;bottom:0}
.cloud-one{top:23%;left:-3%;transform:scale(.85)}.cloud-two{top:15%;right:8%;transform:scale(1.2)}.cloud-three{top:53%;right:31%;transform:scale(.6);opacity:.35}
.far-islands{position:absolute;bottom:0;width:100%;height:70%;min-height:350px}
.foreground-leaf{position:absolute;bottom:-90px;width:220px;height:370px;border-radius:100% 0 100% 0;background:linear-gradient(40deg,#286c62,#458e72);transform-origin:bottom;opacity:.85}.leaf-left{left:-140px;transform:rotate(28deg)}.leaf-right{right:-130px;transform:scaleX(-1) rotate(18deg)}
.world-spark{position:absolute;color:#fff8cf;font-style:normal;font-size:24px}.spark-one{left:6%;top:48%}.spark-two{right:5%;top:64%;font-size:16px}
header{position:relative;max-width:1600px;margin:auto;padding-top:20px;padding-bottom:16px;align-items:center}
.brand{color:#fffdf0;text-shadow:0 3px 0 #246573,0 5px 9px #24657325;font-size:29px;letter-spacing:-1.4px}.brand span{color:#ffce72;text-shadow:0 2px 0 #c78043}
.room-chip{background:var(--paper);border:2px solid var(--panel-edge);border-radius:12px;padding:6px 12px;line-height:1.6}
.sound-toggle{gap:5px;white-space:nowrap}.sound-toggle>span:first-child{font-size:21px;line-height:1}.top-actions .ghost{min-height:44px}
.primary,.secondary,.ghost,.level,.answer{border:2px solid transparent;transition:transform .16s,box-shadow .16s,background .16s}
.primary{background:linear-gradient(#269483,#167568);color:#fffdf0;border-color:#ffffff40;box-shadow:0 5px 0 var(--button-base),inset 0 1px 0 #ffffff40;text-shadow:0 1px 1px #164d5050;border-radius:16px;font-size:17px}
.secondary{background:linear-gradient(#ffe39c,#ffd16a);box-shadow:0 5px 0 #bd9145;color:#3b4c43;border-color:#fff8d9}
.ghost{background:var(--paper);color:var(--ink);border-color:var(--panel-edge);box-shadow:0 3px 0 var(--panel-edge);border-radius:13px}
button:active:not(:disabled):not(.welcome-film-picture){transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--panel-edge)}
button:disabled{opacity:.55}.answer:disabled{opacity:.72}.answer.correct:disabled,.answer.wrong:disabled{opacity:1}
@media(hover:hover){.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.ghost:hover:not(:disabled),.level:hover:not(:disabled){transform:translateY(-2px)}.answer:hover:not(:disabled){border-color:var(--accent);background:var(--paper)}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #784720;outline-offset:4px}
.welcome{max-width:1260px;grid-template-columns:minmax(0,1.15fr) minmax(350px,.9fr);gap:70px;padding:30px 32px 48px;align-items:center}
.welcome-intro{position:relative;text-align:center;padding-bottom:65px}
.adventure-ribbon{display:inline-block;position:relative;padding:9px 25px;background:#2c7b79;color:#fffbed;font-size:12px;font-weight:1000;letter-spacing:1.8px;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}
.welcome-intro h1{max-width:none;margin:20px 0 16px;color:#fffbed;font-size:clamp(46px,5.2vw,72px);letter-spacing:-2.5px;line-height:1.03;text-shadow:0 4px 0 #327882,0 7px 0 #32788222}
.welcome-intro h1 em{font-style:normal;color:#ffdb80;text-shadow:0 4px 0 #9f6b3f,0 7px 0 #9f6b3f22}
.welcome-intro>p{margin:0 auto 20px;font-weight:800;font-size:17px;color:#214c52;line-height:1.5}
.island-window{position:relative;margin:22px auto 0;max-width:530px;transform:rotate(-2deg);border:8px solid #fff7dc;border-radius:38% 38% 27% 27% / 24% 24% 20% 20%;box-shadow:0 7px 0 #6d9c8650,0 22px 30px #25647020;background:var(--water)}
#welcome-film-host{margin:0;max-width:none}.welcome-film-picture{border-radius:36% 36% 25% 25% / 22% 22% 18% 18%;background:#a3dce1}.welcome-film-picture>img,.welcome-film-picture>video{object-fit:cover}
.island-label{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%) rotate(2deg);padding:7px 24px;background:#fff6d8;border:2px solid #e1c48a;box-shadow:0 3px 0 #c2a36c;border-radius:12px;color:#5e583e;font-weight:1000;font-size:16px;white-space:nowrap;pointer-events:none}.island-label span{color:#c58921;margin-left:9px}
.welcome-crew{position:absolute;left:0;right:0;bottom:-4px;height:195px;pointer-events:none}.crew-character{position:absolute;bottom:0;display:block;width:150px;height:180px;filter:drop-shadow(0 10px 4px #245f6530);transform-origin:50% 90%}.crew-bear{left:0;transform:rotate(-7deg)}.crew-fox{right:14%;width:165px;height:210px}.crew-rabbit{right:-8%;transform:rotate(8deg)}
.crew-bubble{position:absolute;right:3%;bottom:166px;padding:9px 17px;background:var(--paper);border:2px solid var(--panel-edge);border-radius:18px 18px 18px 3px;transform:rotate(7deg);font-size:14px;font-weight:1000}
.welcome-intro .welcome-caption{position:absolute;bottom:0;left:26%;right:30%;font-size:12px;line-height:1.4;margin:0}
.welcome-folder{padding:0;position:relative;filter:drop-shadow(0 14px 18px #22596522)}
.role-tabs{gap:8px;padding:0 14px;position:relative;top:8px;z-index:1}.role-tabs button{background:#257e80;color:#fff9e9;box-shadow:inset 0 3px 0 #ffffff20;border:2px solid #fff3cc66;border-bottom:0;padding:14px 8px;border-radius:18px 18px 0 0;font-size:15px}.role-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);position:relative;z-index:1}
.role-panel{border:3px solid var(--panel-edge);border-top:5px solid var(--paper);border-radius:24px;padding:26px 28px 24px;box-shadow:0 6px 0 var(--panel-edge),inset 0 0 0 3px #ffffff25}
.panel-kicker{display:block;font-size:10px;letter-spacing:1.7px;font-weight:1000;color:var(--muted);margin-bottom:8px}.role-panel h2{font-size:28px;margin-bottom:8px}.role-panel>p{font-size:14px;line-height:1.5;margin-bottom:20px}.role-panel label{font-size:14px;margin-bottom:6px}.role-panel .field-help{font-size:12px;line-height:1.45}.role-panel .primary{margin-top:22px}
input,select{border:2px solid var(--line);border-radius:13px;background:var(--field);box-shadow:inset 0 2px 0 #214c5208;min-height:48px;padding:10px 12px;font-weight:800;font-size:15px}input{font-size:16px}
.folder-note{font-size:12px;color:#214c52;font-weight:900;padding-top:18px}
.profile-page{background:var(--paper);border:3px solid var(--panel-edge);border-radius:30px;padding:28px 32px;margin-top:20px;box-shadow:0 7px 0 var(--panel-edge),0 20px 40px #24657320}.profile-heading{position:relative;padding-right:76px}.profile-heading:after{content:'';position:absolute;right:-8px;top:-12px;width:95px;height:110px;background:url('/assets/pawns/fox.png') center/contain no-repeat;transform:rotate(8deg)}
.character-choice>span{background:var(--field);border:2px solid var(--line);border-bottom-width:5px;border-radius:22px;position:relative;transition:transform .2s,background .2s}.character-choice input:checked+span{border-color:var(--accent);background:var(--water);transform:translateY(-4px)}.character-choice input:checked+span:after{content:'✓';position:absolute;top:5px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--paper);font-size:14px;font-weight:1000}
.team-choice>span{background:var(--field);border-color:var(--line);border-left-color:var(--team-color)}
.lobby-invite{background:var(--paper);border:4px solid var(--panel-edge);box-shadow:0 7px 0 var(--panel-edge),0 14px 24px #245f6520;position:relative}.invite-code{color:var(--accent);letter-spacing:.12em}.join-qr{border:3px dashed #b1cbbb;border-radius:22px;padding:14px}
.lobby-roster{background:var(--paper);border:3px solid var(--panel-edge);border-radius:28px;padding:24px;box-shadow:0 7px 0 var(--panel-edge)}.lobby-team{background:var(--field);border:2px solid var(--line);border-top:6px solid var(--team-color);border-radius:20px}.lobby-team.has-players{box-shadow:0 3px 0 var(--line)}.empty-slot{border:2px dashed var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.waiting-banner{background:var(--paper);border:3px solid var(--panel-edge);box-shadow:0 6px 0 var(--panel-edge)}.player-lobby>.lobby-heading{padding:15px 18px;background:var(--paper);border-radius:18px}.player-lobby .lobby-team{background:var(--paper)}
.game-heading,.controller-heading,.phone-heading{background:var(--paper);border:2px solid var(--panel-edge);border-radius:20px;padding:12px 18px;box-shadow:0 3px 0 #245f6515}
.stage-info,.panel,.world-card{border:3px solid var(--panel-edge);box-shadow:0 5px 0 var(--panel-edge),0 10px 25px #1b5b6520}
.board{border:3px solid #fff8df;box-shadow:0 5px 0 #568c84}.board-hint{background:#f6ffe9d9}
.scene-companion{display:flex;gap:10px;align-items:center;min-height:46px;padding:0 0 6px;border-bottom:2px solid var(--line);font-size:13px;font-weight:900;color:var(--muted)}.scene-companion>span:first-child{display:block;width:50px;height:44px;flex:none}.scene-companion img{width:66px;height:66px;position:relative;top:-15px;left:-8px;transform-origin:50% 90%}.scene-companion[data-mood=happy]{color:#257556}
.category-icon{align-self:center;display:grid;place-items:center;width:68px;height:68px;border-radius:24px;background:linear-gradient(145deg,#ffe7a7,#f7c25f);border:3px solid #fff2c7;box-shadow:0 4px 0 #c9a26c;color:#4b6044;font-size:34px;transform:rotate(-5deg);margin:4px 0 6px}.control>.eyebrow{color:var(--muted);font-size:11px;letter-spacing:1.4px;font-weight:1000}.control[data-phase=difficulty]>h2,.control[data-phase=difficulty]>.eyebrow{text-align:center}
.level{background:var(--field);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:15px;padding:14px;min-height:52px}.level span{font-size:12px}.level[data-payload*="2"]{background:var(--water)}.level[data-payload*="3"]{background:var(--yellow);color:#374d45;border-color:#d8b66c;box-shadow:0 3px 0 #d8b66c}
.answer{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-bottom-width:4px;background:var(--paper);border-radius:15px;padding:10px 12px;min-height:56px;position:relative}.answer-letter{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:var(--field);color:var(--muted);font-size:13px;font-weight:1000}.answer>span:nth-child(2){flex:1}.answer-mark{font-size:21px;flex:none}.answer.correct{background:#e0f2d9;border-color:#64a875;color:#234f39}.answer.correct .answer-letter{background:#2f7755;color:#fff}.answer.wrong{background:#f9e9dd;border-color:#c68a6d;color:#6e3f30}.answer.wrong .answer-letter{background:#ae634c;color:#fff}.answer-pending{border-color:#c89535;background:#fff0c8!important;color:#294e4f!important}
.result-message{font-size:17px;border-radius:12px;padding:9px 12px;background:var(--field)}.result-success{color:#235e41;background:#dff1d6}.result-gentle{color:#714a33;background:#f7e9d7}
.auto-next{height:6px;border-radius:999px;background:var(--field);overflow:hidden;margin:0}.auto-next>span{display:block;height:100%;background:var(--accent);border-radius:inherit;transform-origin:left;animation:auto-next linear forwards}@keyframes auto-next{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.event-card{--event-a:#fff1b8;--event-b:#9fdc9a;--event-edge:#4f9a5e;--event-ink:#1f4a32;display:grid;justify-items:center;gap:6px;padding:18px 16px 16px;border-radius:22px;text-align:center;color:var(--event-ink);background:radial-gradient(circle at 50% 0,#ffffffb0,transparent 60%),linear-gradient(160deg,var(--event-a),var(--event-b));border:3px solid var(--event-edge);box-shadow:0 5px 0 var(--event-edge);animation:event-in .45s cubic-bezier(.2,1.4,.4,1) both}.event-card[data-tone=bad]{--event-a:#dfe3f7;--event-b:#a9b2dc;--event-edge:#5d679e;--event-ink:#262d55}.event-card h2{color:inherit;font-size:clamp(26px,2.4vw,36px);margin:0}.event-card p{margin:0;font-size:17px;font-weight:800;color:inherit}.event-kicker{font-size:11px;letter-spacing:1.6px;font-weight:1000;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:#ffffff99}.event-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fffdf4;border:3px solid var(--event-edge);font-size:38px;line-height:1;color:var(--event-edge);box-shadow:0 4px 0 #00000018}@keyframes event-in{from{opacity:0;transform:scale(.85) rotate(-3deg)}to{opacity:1;transform:none}}.control[data-event] .scene-companion{display:none}
@media(prefers-reduced-motion:reduce){.event-card{animation:none}.auto-next>span{animation:none;transform:scaleX(.5)}}
.timer-bar{height:10px;border:2px solid var(--line);background:var(--field)}.timer-fill{background:linear-gradient(90deg,#329c88,#72bfa0)}.timer.low .timer-fill{background:#ca693d}
.team{border:2px solid var(--panel-edge);border-radius:16px;box-shadow:0 3px 0 var(--panel-edge)}.team.current{border-color:var(--accent);box-shadow:0 3px 0 var(--accent)}.score-count{display:inline-block;color:var(--accent);font-variant-numeric:tabular-nums}.status{background:var(--paper);border-radius:10px;padding:5px 12px}.status:empty{display:none}
.turn-banner-card{border:4px solid var(--panel-edge);border-top:8px solid var(--team-color);box-shadow:0 7px 0 var(--panel-edge),0 18px 60px #214c5255}.winner{align-self:center;text-shadow:0 5px 0 #c2954725}
#game-effects{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}.reward-particle{position:absolute;color:var(--particle);font-size:17px;font-style:normal;opacity:0;animation:reward-burst .85s cubic-bezier(.15,.6,.35,1) forwards;text-shadow:0 1px 1px #214c5230}
.confetti-piece{position:absolute;width:9px;height:14px;border-radius:1px;background:var(--confetti);box-shadow:inset 2px 1px 0 #ffffff65,1px 2px 2px #214c5220;opacity:0;animation:confetti-fall 3s linear forwards}.confetti-piece.is-round{width:7px;height:22px}
@keyframes confetti-fall{0%{opacity:0;transform:perspective(500px) translate(0,0) rotateX(0) rotateY(0) rotateZ(0)}6%{opacity:1}35%{transform:perspective(500px) translate(calc(var(--dx)*.45),calc(var(--dy)*.15)) rotateX(180deg) rotateY(120deg) rotateZ(calc(var(--spin)*.4))}80%{opacity:1}100%{opacity:0;transform:perspective(500px) translate(var(--dx),var(--dy)) rotateX(540deg) rotateY(300deg) rotateZ(var(--spin))}}

.world-team-label.is-offline{display:inline-flex;align-items:center;gap:5px;background:#e4e8ee;color:#354556}
.pawn-label-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pawn-offline{flex-shrink:0;font-weight:800}
.world-team-label .pawn-offline{font-size:.85em;border-left:1px solid #8a96a5;padding-left:5px}
.offline-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:6px;background:#e4e8ee;color:#354556;font-size:11px;font-weight:800;vertical-align:middle}
.world-bubble[data-mood=sleeping]{background:#edf0f8;color:#52617c;border-color:#8794ae;font-size:13px;letter-spacing:1px}

@keyframes reward-burst{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.6)}}
@keyframes cloud-drift{50%{translate:30px 0}}@keyframes crew-idle{50%{translate:0 -5px;rotate:2deg}}@keyframes spark-idle{50%{opacity:.35;scale:.7}}
@media(prefers-reduced-motion:no-preference){.cloud{animation:cloud-drift 18s ease-in-out infinite}.cloud-two{animation-delay:-7s;animation-duration:24s}.cloud-three{animation-delay:-11s}.crew-character{animation:crew-idle 4.8s ease-in-out infinite}.crew-bear{animation-delay:-1.6s}.crew-rabbit{animation-delay:-3.2s}.world-spark{animation:spark-idle 4s ease-in-out infinite}.spark-two{animation-delay:-2s}.character-choice input:checked+span .character-image{animation:crew-idle 3s ease-in-out infinite}.scene-companion[data-mood=idle] img{animation:crew-idle 5s ease-in-out infinite}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reward-particle{display:none}}
@media(max-width:1000px){.welcome{gap:32px;padding:24px}.welcome-intro h1{font-size:52px}.role-panel{padding:24px}.crew-character{width:120px;height:155px}.crew-fox{height:180px}.crew-bubble{bottom:150px;font-size:12px}.welcome-intro .welcome-caption{display:none}.lobby-roster{padding:18px}}
@media(max-width:720px){
 header{padding:14px 16px;gap:12px}.brand{font-size:26px}.top-actions .ghost{min-height:44px}.sound-toggle{font-size:12px}.room-chip{line-height:1.5;padding:6px 9px}
 .welcome{display:flex;padding:16px 18px 36px;gap:28px}.welcome-intro{display:block;width:100%;padding-bottom:68px}.adventure-ribbon{font-size:9px;padding:7px 19px;letter-spacing:1.4px}.welcome-intro h1{font-size:clamp(40px,10.8vw,62px);margin:14px 0;letter-spacing:-1.8px}.welcome-intro>p{font-size:14px;line-height:1.45;margin:0 auto 12px;max-width:32ch}.island-window{max-width:420px;margin-top:15px;border-width:5px}.welcome-crew{height:135px;bottom:0}.crew-character{width:110px;height:135px}.crew-bear{left:4%}.crew-fox{right:16%;height:155px;width:125px}.crew-rabbit{right:4%}.crew-bubble{right:1%;bottom:119px;font-size:11px;padding:7px 12px}.island-label{font-size:13px;bottom:-16px;padding:5px 18px}.welcome-folder{width:100%}.role-panel{padding:22px 20px}.role-panel h2{font-size:25px}.role-tabs{padding:0 10px}.role-tabs button{font-size:14px;padding:13px 6px}.world-sun{width:90px;height:90px;top:12%;left:-20px}
 .profile-page{width:calc(100% - 28px);padding:24px 18px;margin:10px auto 28px}.profile-heading{padding-right:64px}.profile-heading h1{font-size:32px}.profile-heading p{font-size:14px}.profile-heading:after{width:80px;height:95px}.profile-details{grid-template-columns:minmax(0,1fr) 110px}.character-grid{gap:8px}.character-choice>span{padding:10px 2px}.character-choice b{font-size:12px}.character-symbol{width:56px;height:65px}.character-choice input:checked+span:after{width:18px;height:18px;top:2px;right:2px;font-size:11px}
 .lobby-roster{padding:20px 16px}.lobby-invite{padding:24px 20px}.host-lobby{gap:24px}.lobby-team{padding:14px}.lobby-heading h1{font-size:32px}.lobby-heading p{font-size:14px}.lobby-teams{grid-template-columns:1fr}.player-lobby .lobby-teams{grid-template-columns:1fr 1fr}.waiting-banner{padding:22px 18px}
 .phone-heading{padding:8px 12px}.phone-heading h1{font-size:21px}.phone-board{height:calc(100dvh - 225px);min-height:540px}.world-card{padding:8px 12px 12px;border-width:2px}.world-card .scene-companion{min-height:32px;padding-bottom:4px;font-size:11px;gap:8px}.world-card .scene-companion>span:first-child{width:35px;height:28px}.world-card .scene-companion img{width:45px;height:45px;top:-10px;left:-5px}.world-card .category-icon{width:46px;height:46px;font-size:25px;border-radius:17px;margin:0}.world-card .control{gap:8px}.world-card .control h2{font-size:20px}.world-card .answer{gap:6px;padding:8px;min-height:54px;font-size:14px}.world-card .answer-letter{width:24px;height:25px;font-size:11px;border-radius:7px}.world-card .answer-mark{font-size:16px}.world-card .result-message{font-size:14px;padding:7px 10px}.world-card .primary{min-height:46px;font-size:15px}.world-card .control .small{font-size:12px}.card-toggle{min-height:36px}.world-card.is-waiting{padding:12px}.watch-toggle{min-height:44px}.game-heading{padding:10px 14px}.game-heading h1{font-size:22px}.stage-info{padding:20px 16px}.controller-heading{padding:12px}.controller-heading h1{font-size:24px}.team .small{font-size:12px}
}
@media(max-width:360px){.brand{font-size:23px}.top-actions .sound-toggle{padding:7px 9px}.welcome{padding:12px 14px 30px}.welcome-intro h1{font-size:39px}.role-panel{padding:22px 16px}.role-tabs button{font-size:12px}.profile-page{padding:22px 12px}.profile-details{grid-template-columns:1fr 100px}.player-lobby .lobby-teams{grid-template-columns:1fr}.world-card .answer{font-size:13px}.world-card .answer-letter{width:20px}.phone-board{min-height:580px}}
/* Preserve the board's usable area on mirrored phones and compact landscape screens. */
@media(orientation:landscape) and (max-height:599px){
 .game-environment .world-spark,.scene-companion{display:none}.sound-toggle>span:last-child{display:none}header .sound-toggle{min-width:32px}.game-heading,.controller-heading{padding:5px 9px;border-radius:12px}.category-icon{width:35px;height:35px;font-size:22px;border-width:2px;border-radius:12px;margin:0}.control{gap:8px}.level{padding:8px;min-height:38px}.answer{padding:7px;min-height:38px;gap:6px}.answer-letter{width:22px;height:22px;font-size:10px}.result-message{font-size:13px;padding:5px 8px}.world-card .scene-companion{display:none}.phone-board{height:calc(100dvh - 66px);min-height:280px}.world-card .control h2{font-size:17px}.world-card .answer{min-height:40px;padding:6px;font-size:13px}.world-card .primary{min-height:38px}.world-card .control{gap:6px}.world-card .category-icon{width:32px;height:32px;font-size:20px}.world-card .result-message{padding:5px 8px;font-size:13px}.world-card .small{font-size:11px}.phone-mode .phone-heading{display:none}.tv-mode .lobby-roster{padding:10px;border-radius:18px}.tv-mode .lobby-teams{grid-template-columns:1fr 1fr}.tv-mode .panel-kicker{display:none}.tv-mode .game-heading{border:0;background:none;box-shadow:none;padding:0}.tv-mode .stage-info{border-width:2px}.tv-mode .board{border-width:2px}.tv-mode .team{border-radius:9px;box-shadow:none}.tv-mode .empty-slot{padding:6px}.tv-mode .lobby-team{border-top-width:4px}.tv-mode .lobby-heading h1{font-size:22px}
}
.controller-mode #app{display:flex;flex-direction:column;height:100dvh;min-height:480px}.controller-mode header{flex-shrink:0}.controller{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;width:100%;max-width:560px;margin:0 auto;padding:0 16px 16px}.controller-me{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:900;color:var(--muted)}.controller-me .avatar{width:34px;height:34px}.controller-me .avatar .character-image{width:44px;height:44px}.controller>.control{flex:1;min-height:0;justify-content:center;align-items:stretch;text-align:center;padding:20px 16px;background:var(--paper);border:3px solid var(--panel-edge);border-radius:24px;box-shadow:0 5px 0 var(--panel-edge)}.controller.is-turn>.control{border-color:var(--team-color);box-shadow:0 5px 0 var(--team-color)}.controller .control h2{font-size:26px;margin:0}.controller .control>p{margin:0}.controller-eye{font-size:56px;line-height:1;opacity:.85}
.controller-answers{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;flex:1;min-height:0;max-height:440px}.controller-answers .answer{justify-content:center;min-height:96px;padding:0;border-radius:20px}.controller-answers .answer-letter{width:auto;height:auto;background:none;color:inherit;font-size:clamp(44px,14vw,64px);line-height:1}.controller-answers .answer.correct .answer-letter{background:none;color:#234f39}.controller-answers .answer.wrong .answer-letter{background:none;color:#74372d}.controller-levels{display:grid;gap:12px}.controller-levels .level{min-height:72px;font-size:22px;padding:14px 18px}.controller-levels .level span{font-size:14px}.controller .primary,.controller .secondary{min-height:64px;font-size:19px}
@media(orientation:landscape) and (max-height:599px){.controller-mode #app{min-height:0}.controller-mode header{padding-top:6px;padding-bottom:6px}.controller{max-width:760px;padding-bottom:8px;gap:6px}.controller-me{display:none}.controller>.control{padding:10px 14px;gap:8px}.controller .control h2{font-size:19px}.controller-answers{grid-template-columns:repeat(4,1fr)}.controller-answers .answer{min-height:0}.controller-levels{grid-template-columns:repeat(3,1fr)}.controller-levels .level{min-height:56px;font-size:18px}.controller-eye{font-size:36px}}
/* Event medal: pops out of the pawn like a coin from a question block, hovers and shrinks away. */
.event-medal{--medal-a:#fff4bf;--medal-b:#f2c24b;--medal-edge:#b07d14;--medal-ink:#5b3d00;position:absolute;left:0;top:0;z-index:3;display:none;pointer-events:none;perspective:220px}.event-medal[data-tone=bad]{--medal-a:#eef0fb;--medal-b:#a9b2dc;--medal-edge:#5d679e;--medal-ink:#262d55}.event-medal.is-shown{display:block}
.event-medal-coin{position:relative;display:grid;place-items:center;width:clamp(44px,5.4vw,64px);aspect-ratio:1;border-radius:50%;font-size:clamp(22px,2.8vw,34px);line-height:1;font-weight:1000;color:var(--medal-ink);background:radial-gradient(circle at 35% 28%,#fffffff0 0 14%,transparent 40%),radial-gradient(circle,var(--medal-a) 0 54%,var(--medal-b) 56%);border:3px solid var(--medal-edge);box-shadow:inset 0 0 0 3px #ffffff80,0 4px 0 var(--medal-edge),0 8px 14px #1a2a2a40;animation:medal-fade 2.6s ease-out both}
.event-medal-coin::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:3px dotted var(--medal-b);opacity:0}
@media(prefers-reduced-motion:no-preference){.event-medal-coin{animation:medal-pop 2.6s cubic-bezier(.2,.9,.3,1) both}.event-medal-coin::before{animation:medal-burst .7s ease-out .12s both}}
@keyframes medal-pop{0%{opacity:0;transform:translateY(34px) scale(.2) rotateY(0)}14%{opacity:1;transform:translateY(-18px) scale(1.18) rotateY(360deg)}24%{transform:translateY(0) scale(.94) rotateY(360deg)}32%{transform:translateY(-6px) scale(1.04) rotateY(360deg)}40%,58%{transform:translateY(0) scale(1) rotateY(360deg)}72%{opacity:1;transform:translateY(-5px) scale(1) rotateY(360deg)}100%{opacity:0;transform:translateY(-20px) scale(.3) rotateY(540deg)}}
@keyframes medal-burst{from{opacity:.9;transform:scale(.5) rotate(0)}to{opacity:0;transform:scale(1.5) rotate(40deg)}}
@keyframes medal-fade{0%,80%{opacity:1}100%{opacity:0}}

/* Online mode (ONLINE_MODE): three role tabs, the Publik choice and the Hitta spelare list. */
.role-panel .public-choice{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:12px 14px;border:2px solid var(--line);border-radius:16px;cursor:pointer}.public-choice input{width:22px;height:22px;min-height:0;margin:2px 0 0;accent-color:var(--teal,#257e80)}.public-choice b{display:block}.public-choice small{display:block;font-size:12px;line-height:1.4;color:var(--muted);font-weight:700}
/* Köpet del F: Frågepaket on the Spela form, only with a paid pack delivered; each pack is a .public-choice row. */
.pack-choice{margin-top:16px}.pack-choice-title{display:block;font-size:14px}.pack-choice .field-help{margin:2px 0 0}.role-panel .pack-choice .public-choice{margin-top:8px}
.public-lobbies{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}.public-lobbies li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:#ffffff40}.public-lobbies b{display:block;font-size:16px}.public-lobbies small{display:block;font-size:12px;color:var(--muted);font-weight:700}.role-panel .public-lobbies .primary{margin-top:0;width:auto;flex:none;padding:10px 14px}
.public-empty{margin-bottom:16px}

/* Host lobby fits the screen without scrolling (2026-10-31): laptop, desktop, tv and phone. The page is one screen high,
   the QR code and the player cards shrink with the height, and each card scrolls on its own only as a last resort. */
#app:has(>.host-lobby){display:flex;flex-direction:column;height:100dvh;min-height:0}
#app:has(>.host-lobby)>header{flex-shrink:0;padding-top:clamp(8px,1.6dvh,20px);padding-bottom:clamp(6px,1.2dvh,16px)}
.host-lobby{flex:1;min-height:0;width:100%;padding-top:0;padding-bottom:clamp(12px,2.4dvh,36px);align-items:stretch;align-content:start}
.host-lobby>.lobby-invite,.host-lobby>.lobby-roster{max-height:100%;min-height:0;overflow:auto;scrollbar-width:thin}
.host-lobby>.lobby-invite{display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,2.4dvh,40px) clamp(16px,2vw,40px)}
.host-lobby .invite h2{font-size:clamp(20px,3dvh,30px)}
.host-lobby .invite>p{margin:clamp(4px,.8dvh,12px) auto clamp(6px,1.2dvh,20px);font-size:clamp(13px,1.8dvh,16px)}
.host-lobby .invite-large .join-qr{width:clamp(150px,min(27vw,100dvh - 430px),520px);padding:clamp(6px,1dvh,14px);margin:clamp(6px,1.2dvh,20px) auto}
.host-lobby .family-qr-tip{margin:clamp(4px,.8dvh,14px) 0 clamp(2px,.6dvh,10px)}
.host-lobby .invite-code{font-size:clamp(32px,6dvh,64px);line-height:1.1}
.host-lobby .join-link{margin:clamp(4px,.8dvh,12px) auto;font-size:13px}
.host-lobby .sharing-hint{margin-top:clamp(6px,1.2dvh,20px);font-size:13px}
.host-lobby>.lobby-roster{display:flex;flex-direction:column;padding:clamp(14px,2.4dvh,28px) clamp(16px,2vw,28px)}
.host-lobby .lobby-heading{margin:0 0 clamp(8px,1.6dvh,22px)}
.host-lobby .lobby-heading h1{font-size:clamp(28px,5dvh,52px);line-height:1.05}
.host-lobby .lobby-heading p{margin-top:clamp(4px,.8dvh,12px)}
.host-lobby .lobby-roster>.field-help{margin:0 0 clamp(6px,1dvh,12px)}
.host-lobby .lobby-teams{gap:clamp(8px,1.2dvh,14px)}
.host-lobby .lobby-team{padding:clamp(8px,1.3dvh,18px) clamp(10px,1.2vw,18px)}
.host-lobby .lobby-team .member{margin-top:0}
.host-lobby .lobby-team .avatar{width:clamp(34px,5dvh,44px);height:clamp(34px,5dvh,44px)}
.host-lobby .empty-slot{margin:0;padding:clamp(8px,1.4dvh,12px) 8px}
/* Start and "Spela själv också" side by side, the status line under them. */
.host-lobby .lobby-actions{margin-top:clamp(10px,2dvh,24px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(6px,1dvh,12px) 10px;align-items:center}
.host-lobby .lobby-actions>.primary{grid-column:1;grid-row:1;margin:0}
.host-lobby .lobby-actions>.ghost{grid-column:2;grid-row:1;width:auto;margin:0}
.host-lobby .lobby-actions>.field-help{grid-column:1/-1;grid-row:2;margin:0}
.host-lobby .family-knocks{margin-bottom:clamp(8px,1.4dvh,18px)}

/* Phones and upright tablets: the QR code beside the room code, a compact two-column roster and a slimmer header. */
@media(max-width:720px),(orientation:portrait) and (max-width:1100px){
 #app:has(>.host-lobby)>header{padding:8px 12px;gap:6px;align-items:center}
 #app:has(>.host-lobby) .brand{font-size:22px}
 #app:has(>.host-lobby) .room-chip{display:none}
 #app:has(>.host-lobby) .top-actions .ghost{min-height:38px;padding:6px 10px;font-size:13px}
 #app:has(>.host-lobby) header .sound-toggle>span:last-child{display:none}
 .host-lobby{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px}
 .host-lobby>.lobby-invite{flex-shrink:0;padding:12px 14px;border-radius:20px}
 .host-lobby .invite{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;text-align:left}
 .host-lobby .invite>*{grid-column:2;margin:0}
 .host-lobby .invite>p,.host-lobby .sharing-hint,.host-lobby .join-link{display:none}
 .host-lobby .invite h2{font-size:18px}
 .host-lobby .invite-large .join-qr{grid-column:1;grid-row:1/span 5;width:clamp(130px,min(46vw,100dvh - 520px),280px);padding:6px;margin:0;border-radius:14px}
 .host-lobby .family-qr-tip{font-size:12px;margin:4px 0}
 .host-lobby .invite-code{font-size:clamp(24px,7vw,48px)}
 .host-lobby .lobby-roster>.field-help{display:none}
 .host-lobby>.lobby-roster{padding:14px;border-radius:20px}
 .host-lobby .lobby-heading .panel-kicker{display:none}
 .host-lobby .lobby-heading h1{font-size:24px}
 .host-lobby .lobby-heading p{font-size:13px;margin-top:2px}
 .host-lobby .lobby-teams{grid-template-columns:1fr 1fr;gap:6px}
 .host-lobby .lobby-team{padding:6px 8px;border-radius:14px;border-top-width:4px}
 .host-lobby .member{gap:6px}
 .host-lobby .member b{font-size:13px}.host-lobby .member small{font-size:11px}
 .host-lobby .lobby-team .avatar{width:30px;height:30px}
 .host-lobby .member .kick{font-size:0;min-height:32px;min-width:32px;padding:0;flex-shrink:0}
 .host-lobby .member .kick{text-decoration:none}
 .host-lobby .member .kick::after{content:"✕";font-size:15px}
 .host-lobby .lobby-actions>.primary,.host-lobby .lobby-actions>.ghost{min-height:46px;padding:8px 12px;font-size:15px}
 .host-lobby .lobby-actions>.field-help{font-size:12px}
}
/* Narrow phones: Tillbaka shrinks to its arrow (the full text stays its accessible name) so the header keeps one row. */
@media(max-width:420px){
 #app:has(>.host-lobby) #close-room{font-size:0;min-width:44px;padding:6px 8px}
 #app:has(>.host-lobby) #close-room::before{content:"←";font-size:18px}
 #app:has(>.host-lobby)>header{flex-wrap:nowrap}
 #app:has(>.host-lobby) .top-actions{flex-wrap:nowrap}
}
@media(max-width:720px) and (max-height:700px){
 .host-lobby .lobby-heading p{font-size:12px}
 .host-lobby .lobby-team{padding:4px 8px}
 .host-lobby .lobby-actions{margin-top:8px;row-gap:4px}
 .host-lobby .lobby-heading{margin-bottom:6px}
 .host-lobby .invite-large .join-qr{width:clamp(120px,min(46vw,100dvh - 520px),280px)}
 .host-lobby>.lobby-roster{padding:10px 12px}
}
/* Phones on their side: the desktop layout, small. */
@media(orientation:landscape) and (max-height:500px){
 #app:has(>.host-lobby)>header{padding:4px 12px}
 #app:has(>.host-lobby) .brand{font-size:20px}
 #app:has(>.host-lobby) .top-actions .ghost{min-height:32px;padding:4px 9px;font-size:12px}
 #app:has(>.host-lobby) .room-chip{display:none}
 .host-lobby{gap:10px;padding:0 10px 8px}
 .host-lobby>.lobby-invite,.host-lobby>.lobby-roster{padding:8px 12px;border-radius:18px}
 .host-lobby .invite>p,.host-lobby .sharing-hint,.host-lobby .join-link,.host-lobby .family-qr-tip,.host-lobby .lobby-heading .panel-kicker,.host-lobby .lobby-roster>.field-help{display:none}
 .host-lobby .invite h2{font-size:16px}
 .host-lobby .invite-large .join-qr{width:clamp(110px,100dvh - 190px,240px);padding:4px;margin:4px auto;border-radius:10px}
 .host-lobby .invite-code{font-size:26px}
 .host-lobby .lobby-heading h1{font-size:20px}
 .host-lobby .lobby-heading p{font-size:12px;margin-top:0}
 .host-lobby .lobby-teams{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .host-lobby .lobby-team:not(.has-players){grid-column:span 2}
 .host-lobby .lobby-team{padding:4px 6px;border-top-width:3px}
 .host-lobby .lobby-team .avatar{width:26px;height:26px}
 .host-lobby .member{gap:4px}.host-lobby .member b{font-size:12px}.host-lobby .member small{display:none}
 .host-lobby .member .kick{font-size:0;min-height:28px;min-width:28px;padding:0;text-decoration:none}.host-lobby .member .kick::after{content:"✕";font-size:13px}
 .host-lobby .lobby-actions{margin-top:6px}
 .host-lobby .lobby-actions>.primary,.host-lobby .lobby-actions>.ghost{min-height:36px;padding:4px 10px;font-size:13px}
 .host-lobby .lobby-actions>.field-help{font-size:11px}
}

/* Places 1–3 on the end card (2026-10-31): one row per place, shared places on the same row. */
/* Vinstpallen och matchkorten (2026-11-02): places 1–3 on steps, the winner in the middle, the cards under them. */
.control[data-phase="finished"]{gap:10px}
.control[data-phase="finished"] .scene-companion{display:none}
.finish-title{text-align:center;font-size:clamp(22px,2.2vw,32px);animation:finish-title .5s cubic-bezier(.2,1.4,.4,1) both}
.podium{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:8px}
.podium>li{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 1 150px;min-width:0}
.podium>li[data-place="2"]{order:1}.podium>li[data-place="1"]{order:2}.podium>li[data-place="3"]{order:3}
.podium-players{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;animation:podium-drop .5s cubic-bezier(.2,1.3,.4,1) both;animation-delay:var(--player-delay)}
.podium-player{display:flex;flex-direction:column;align-items:center;min-width:0;font-size:clamp(13px,1.1vw,16px)}
.podium-player b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-avatar{display:grid;place-items:center;width:var(--podium-avatar,52px);height:var(--podium-avatar,52px);border-radius:50%;background:#fff;border:3px solid var(--team-color);box-shadow:0 3px 0 #0000001a}
.podium-avatar img{width:86%;height:86%;object-fit:contain}
.podium>li[data-place="1"]{--podium-avatar:68px}
.podium-step{width:100%;height:var(--step,44px);display:grid;place-items:start center;padding-top:6px;border-radius:12px 12px 4px 4px;font-size:clamp(24px,2.2vw,34px);font-weight:900;color:#fff;text-shadow:0 2px 0 #0000003a;line-height:1;transform-origin:bottom;animation:podium-rise .45s cubic-bezier(.3,1.2,.5,1) both;animation-delay:var(--step-delay)}
.podium>li[data-place="1"]{--step:84px;--step-delay:.5s;--player-delay:.85s}.podium>li[data-place="1"] .podium-step{background:linear-gradient(#f9dc7a,#e5ae35);box-shadow:inset 0 -5px 0 #c58d1f}
.podium>li[data-place="2"]{--step:62px;--step-delay:.3s;--player-delay:.6s}.podium>li[data-place="2"] .podium-step{background:linear-gradient(#eef2f4,#bcc7cc);box-shadow:inset 0 -5px 0 #98a6ad}
.podium>li[data-place="3"]{--step:46px;--step-delay:.1s;--player-delay:.4s}.podium>li[data-place="3"] .podium-step{background:linear-gradient(#f2c49e,#cf8b5b);box-shadow:inset 0 -5px 0 #ad6c40}
.match-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.match-cards:has(>li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
.match-card{display:grid;align-content:start;gap:4px;padding:8px 10px 9px;border-radius:14px;background:var(--field);border-top:5px solid var(--team-color);font-size:14px;min-width:0;animation:match-card-in .4s ease-out both;animation-delay:1.2s}
.match-card:nth-child(2){animation-delay:1.3s}.match-card:nth-child(3){animation-delay:1.4s}.match-card:nth-child(n+4){animation-delay:1.5s}
.match-who{display:flex;align-items:center;gap:6px;min-width:0}
.match-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.match-avatar{flex:none;width:28px;height:28px}.match-avatar img{width:100%;height:100%;object-fit:contain}
.match-place{margin-left:auto;flex:none;font-size:12px;font-weight:800;color:var(--muted)}
.match-facts{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:13px}
.match-points{margin:0;font-size:13px}.match-points b{font-size:16px;color:#1f7a5a}
.milestones{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.milestone{padding:3px 10px;border-radius:999px;background:#fbefc8;color:#4d3a08;font-weight:800;font-size:13px;line-height:1.35;animation:milestone-pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:1.7s}
.match-next{margin:0;font-size:12px;color:var(--muted);display:grid;gap:3px}
.match-progress{display:block;height:6px;border-radius:999px;background:#00000014;overflow:hidden}.match-progress>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.match-cards.is-own{grid-template-columns:1fr}.is-own .match-card{font-size:16px;padding:12px 14px}.is-own .match-facts,.is-own .milestone{font-size:15px}.is-own .match-avatar{width:36px;height:36px}
/* The end card takes the row of pieces' place at the bottom: the cards below the podium say the same and more. */
.host-game .tv-board:has(.control[data-phase="finished"])>.teams{display:none}
.host-game .tv-card:has(>.control[data-phase="finished"]){width:min(1000px,calc(100% - 32px));--teams-room:12px}
@media(max-height:760px){.podium>li[data-place="1"]{--step:50px;--podium-avatar:46px}.podium>li[data-place="2"]{--step:38px}.podium>li[data-place="3"]{--step:28px}.podium-avatar{--podium-avatar:36px}.podium-step{font-size:20px;padding-top:4px}.control[data-phase="finished"]{gap:8px}.finish-title{font-size:24px}.match-card{gap:3px;padding:6px 10px 7px}}
@media(max-height:640px){.mobile-wrap:has(.control[data-phase="finished"]){margin-top:6px;padding-bottom:8px}.mobile-wrap .panel:has(>.control[data-phase="finished"]){padding:12px 14px}.control[data-phase="finished"] .podium-player{font-size:12px}}
@keyframes finish-title{from{opacity:0;transform:scale(.6)}}
@keyframes podium-rise{from{transform:scaleY(0)}}
@keyframes podium-drop{from{opacity:0;transform:translateY(-40px) scale(.7)}}
@keyframes match-card-in{from{opacity:0;transform:translateY(12px)}}
@keyframes milestone-pop{from{opacity:0;transform:scale(.5)}}
@media(prefers-reduced-motion:reduce){.finish-title,.podium-players,.podium-step,.match-card,.milestone{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Phone controller with the question (2026-10-31): category and level, the question and the four answers with their
   text in one column. Long text scrolls inside the card; the page stays still. */
.controller>.control{overflow:auto;justify-content:safe center}
.controller-category{margin:0;font-size:15px;font-weight:900;color:var(--muted)}
.controller-watch{margin:0;font-weight:800;color:var(--muted)}
.controller-question{display:flex;flex-direction:column;gap:10px;text-align:left}
.controller .controller-question h2{font-size:clamp(19px,5.4vw,25px);line-height:1.3}
.controller-question .controller-answers{grid-template-columns:1fr;grid-auto-rows:auto;flex:none;max-height:none;gap:8px}
.controller-question .controller-answers .answer{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:56px;padding:10px 14px;border-radius:16px;text-align:left}
.controller-question .controller-answers .answer-letter{flex:none;min-width:1.1em;font-size:26px;text-align:center}
.controller-question .answer-text{font-size:17px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.controller-result{margin:0;font-size:18px;font-weight:900}
/* The explanation after an answer (2026-11-02): its own card that zooms in once the right answer is marked, while the
   other choices step back so the eye goes to the right answer and the explanation. */
.explanation{position:relative;margin:2px 0;padding:14px 18px 16px;border:2px solid #e2b85a;border-bottom-width:4px;border-radius:18px;background:linear-gradient(180deg,#fff8e4,#fdf0cf);color:#3b3326;box-shadow:0 10px 26px rgba(70,50,20,.16);transform-origin:50% 30%}
.explanation-kicker{display:block;font-size:12px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#9a6a12;margin-bottom:4px}
.explanation p{margin:0;font-size:clamp(17px,1.1vw + 9px,26px);font-weight:750;line-height:1.38;text-wrap:pretty}
.explanation.is-fresh{animation:explain-in .7s cubic-bezier(.2,.9,.3,1.25) .45s both,explain-glow 1.6s ease-out 1.1s}
@keyframes explain-in{from{opacity:0;transform:scale(.55) translateY(18px)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes explain-glow{0%{box-shadow:0 0 0 0 rgba(226,184,90,.75),0 10px 26px rgba(70,50,20,.16)}100%{box-shadow:0 0 0 18px rgba(226,184,90,0),0 10px 26px rgba(70,50,20,.16)}}
.control[data-phase="reveal"] .answer:not(.correct):not(.wrong){opacity:.38;transform:scale(.97);transition:opacity .4s,transform .4s}
:is(.control,.controller-question):has(.explanation) .answer:not(.correct):not(.wrong){display:none}
:is(.control,.controller-question):has(.explanation.is-fresh) .answer:not(.correct):not(.wrong){display:flex;animation:answer-fold .4s ease-in .2s forwards}
@keyframes answer-fold{from{opacity:.38;max-height:90px}to{opacity:0;min-height:0;max-height:0;padding-block:0;margin-block:-4px;border-width:0;overflow:hidden}}
.controller-question:has(.explanation) .controller-answers{flex:none;grid-auto-rows:auto}
.controller-explanation p{font-size:18px}
/* Room for the explanation: the companion row steps aside and the question and answers tighten. */
.control:has(.explanation) .scene-companion{display:none}
.control:has(.explanation) h2{font-size:clamp(17px,.9vw + 10px,24px);line-height:1.2}
.control:has(.explanation) .answer{min-height:42px;padding-block:6px}
.control:has(.explanation) .result-message{padding-block:5px}
.explanation{padding:10px 16px 12px}
.is-tight .eyebrow,.is-tight .controller-category{display:none}.is-tight h2{font-size:15px!important}
@media(prefers-reduced-motion:reduce){.explanation.is-fresh{animation:none}:is(.control,.controller-question):has(.explanation.is-fresh) .answer:not(.correct):not(.wrong){display:none}}
@media(orientation:landscape) and (max-height:599px){
 .controller-category{font-size:13px}
 .controller .controller-question h2{font-size:17px}
 .controller-question{gap:6px}
 .controller-question .controller-answers{grid-template-columns:1fr 1fr;gap:6px}
 .controller-question .controller-answers .answer{min-height:44px;padding:6px 12px}
 .controller-question .controller-answers .answer-letter{font-size:20px}
 .controller-question .answer-text{font-size:15px}
}

/* Frågan på skärmen (Dold fråga), right under the help text of Var visas spelplanen?. */
label[for="question-view"]{display:block;margin-top:14px}label[for="timer"]{display:block;margin-top:18px}

/* Topplista (online mode, 2026-10-31): a fourth landing tab with the week's and the all-time top ten. */
.role-tabs.is-crowded{gap:4px}.role-tabs.is-crowded button{flex:1;min-width:0;font-size:13px;padding:14px 4px;line-height:1.2}
@media(max-width:420px){.role-tabs.is-crowded button{font-size:11px;padding:12px 2px}}
.top-periods{display:flex;gap:6px;margin:4px 0 8px}
.top-periods button{flex:1;min-height:44px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--ink);font-weight:900}
.top-periods button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.top-span{margin:0 0 8px}
.top-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.top-list li{display:flex;align-items:center;gap:10px;padding:6px 12px;border:2px solid var(--line);border-radius:14px;background:#ffffff40}
.top-rank{display:grid;place-items:center;min-width:1.6em;min-height:1.6em;flex:none;text-align:center;font-weight:900;font-size:18px;border-radius:50%}
.top-rank-1{color:#684713;background:#f5dfa3}.top-rank-2{color:#3c5860;background:#dce8e8}.top-rank-3{color:#71472e;background:#eed8c7}
.top-list .avatar{width:34px;height:34px;flex:none}
.top-list .avatar .character-image{width:42px;height:42px}
.top-who{flex:1;min-width:0;display:grid}
.top-who b,.top-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-who small{color:var(--muted);font-size:13px}
.top-points{font-weight:900;font-size:18px;white-space:nowrap}
.top-points small{font-size:13px;color:var(--muted)}
.top-empty{margin-bottom:12px}

/* The optional weekly view shares the paper, ink and teal of the existing account folder. */
@media(min-width:1001px){
 .welcome.welcome-leaderboard{max-width:1360px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px}
}
.weekly-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 22px}
.weekly-award{min-width:0;border:2px solid var(--line);border-radius:16px;padding:12px 10px;background:#ffffff40}
.weekly-award-icon{display:block;width:28px;height:28px;color:var(--accent);margin-bottom:8px}
.weekly-icon{display:block;width:100%;height:100%;flex:none}
.weekly-award h3{font-size:13px;line-height:1.35;margin:0 0 8px}
.weekly-award-value{font-size:14px;font-weight:900;line-height:1.4;margin:0 0 10px}
.weekly-award ul,.weekly-challenge ul,.weekly-profiles{list-style:none;margin:0;padding:0}
.weekly-award li+li{margin-top:8px}
.weekly-award li b,.weekly-award li small{display:block;overflow-wrap:anywhere;line-height:1.4;font-size:12px}
.weekly-award li small{color:var(--muted);font-size:11px}
.weekly-award-empty{font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.weekly-award .field-help{margin:10px 0 0}
.weekly-list-heading,.weekly-personal h3,.weekly-challenge h3{font-size:18px;line-height:1.3;margin:0 0 6px}
.weekly-list-heading+.field-help{margin:0 0 12px}
.weekly-personal{margin-top:24px;padding-top:20px;border-top:2px solid var(--line)}
.weekly-personal>.field-help{margin:0 0 12px}
.weekly-private{font-size:12px;line-height:1.5;margin:0 0 12px;padding:10px 12px;background:#ffffff40;border-radius:12px}
.weekly-profiles{display:grid;gap:8px}
.weekly-profiles li{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 0}
.weekly-profiles .avatar{width:34px;height:34px;flex:none}
.weekly-profiles .character-image{width:42px;height:42px}
.weekly-profile-name{min-width:0;flex:1;display:grid;gap:3px}
.weekly-profile-name b{overflow-wrap:anywhere;font-size:14px}
.weekly-profile-name small{font-size:12px;color:var(--muted);line-height:1.4}
.weekly-placement{display:grid;gap:3px;text-align:right;flex:none;font-size:13px}
.weekly-placement small{font-size:12px;color:var(--muted)}
.weekly-challenge{margin-top:22px;padding:18px;border:2px solid var(--line);border-radius:18px;background:#ffffff40}
.weekly-challenge>p{font-size:14px;line-height:1.5;margin:8px 0}
.weekly-challenge li{margin-top:16px}
.weekly-challenge-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.weekly-challenge-line>b{overflow-wrap:anywhere;min-width:0}
.weekly-challenge-line>span{flex:none}
.weekly-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:900}
.weekly-badge .weekly-icon{width:14px;height:14px}
.weekly-challenge progress{display:block;width:100%;height:9px;margin-top:8px;accent-color:var(--accent);border:0;border-radius:8px;overflow:hidden;background:var(--line)}
.weekly-challenge progress::-webkit-progress-bar{background:var(--line);border-radius:8px}
.weekly-challenge progress::-webkit-progress-value{background:var(--accent);border-radius:8px}
.weekly-challenge progress::-moz-progress-bar{background:var(--accent);border-radius:8px}
.weekly-challenge>.field-help:last-child{margin-bottom:0}
@media(max-width:420px){.weekly-awards{grid-template-columns:1fr}.weekly-award{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:8px;padding:12px}.weekly-award-icon{grid-row:1/4;margin:0}.weekly-award h3{font-size:14px;margin-bottom:4px}.weekly-award>p,.weekly-award>ul{grid-column:2}.weekly-award-value{margin-bottom:6px}.weekly-award li b{font-size:13px}.weekly-award li small{font-size:12px}.weekly-challenge{padding:14px}}

/* "Rapportera frågan" (2026-11-01): a small, quiet flag under the question; it must never look like an answer. */
.report-question,.control .report-question{align-self:flex-end;background:none;border:0;box-shadow:none;padding:6px 4px;min-height:44px;font-size:13px;font-weight:800;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.report-question:disabled{text-decoration:none;cursor:default;opacity:1}
.controller-question .report-question{align-self:flex-end}
@media(orientation:landscape) and (max-height:599px){.controller-question .report-question{min-height:32px;padding:2px 4px}}

/* Spellägen (2026-11-01): Hur vill ni spela? as two large cards, then the Spela form with Fler inställningar folded away. */
.mode-choice{display:grid;gap:12px;margin-top:4px}
.mode-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;min-height:96px;padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:#ffffff70;color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.mode-card:hover:not(:disabled),.mode-card:focus-visible{border-color:var(--teal,#257e80);box-shadow:0 6px 0 #00000014;transform:translateY(-2px)}
.mode-card:disabled{cursor:default;opacity:.62;background:transparent}
.mode-faces{display:flex}.mode-faces .character-image{width:46px;height:46px;object-fit:contain}.mode-faces .character-image+.character-image{margin-left:-14px}
.mode-text b{display:block;font-size:20px}.mode-text small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted);font-weight:700}
.mode-arrow{font-size:22px;font-weight:900}
.mode-soon{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:var(--line);font-size:12px;font-weight:900}
.mode-picked{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 20px;font-size:14px;line-height:1.5}.mode-picked .text-button{min-height:44px;padding:0 4px;text-decoration:underline}
.more-settings{margin:16px 0 4px;padding:10px 14px;border:2px solid var(--line);border-radius:16px}
.more-settings summary{min-height:28px;cursor:pointer;font-weight:900}.more-settings summary small{margin-left:6px;color:var(--muted);font-weight:700}
.more-settings[open] summary{margin-bottom:12px}
.play-setup-scroll>#active-map-description{margin-top:8px}
.role-panel .play-setup-actions>.primary{margin-top:16px}
.play-setup-actions>.field-help{margin:14px 0 0}
@media(prefers-reduced-motion:reduce){.mode-card{transition:none}.mode-card:hover:not(:disabled),.mode-card:focus-visible{transform:none}}

/* "Är du säker?" (2026-11-01): a modal dialog instead of the browser's confirm() for Avsluta, Stäng rummet and Ta bort. */
.confirm-dialog{width:min(420px,calc(100vw - 32px));padding:24px;border:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 18px 50px #0b2f3140,0 6px 0 #00000014}
.confirm-dialog::backdrop{background:#0b2f3166;backdrop-filter:blur(3px)}
.confirm-dialog[open]{animation:confirm-in .18s ease-out}
.confirm-dialog h2{margin:0 0 8px;font-size:24px}
.confirm-dialog p{margin:0;color:var(--muted);line-height:1.5}
.confirm-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:22px}
.confirm-actions button{width:auto;min-width:120px;min-height:48px;margin:0;flex:1 1 140px}
.confirm-actions .secondary{background:var(--field);color:var(--ink)}
.confirm-actions .danger{background:var(--pink);color:#fff}
.offline-turn-dialog{max-height:calc(100dvh - 32px);overflow:auto}
.offline-turn-dialog .eyebrow{margin-bottom:10px;color:var(--teal)}
.offline-turn-dialog .confirm-actions{flex-direction:column}
.offline-turn-dialog .confirm-actions button{flex:auto;width:100%}
@keyframes confirm-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.confirm-dialog[open]{animation:none}}

/* Datorspelaren (2026-11-01): Lägg till datorn in the host's lobby, the computer's row, and its turn. */
.bot-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;margin-top:6px}
.bot-add span{flex:1 0 100%;font-size:13px;font-weight:900;color:var(--muted)}
.bot-add button{flex:1 1 0;min-height:44px}
.member.is-bot small{color:var(--accent);font-weight:900}
.bot-thinking{font-weight:900}

/* Separate music preference directly beneath effects on the host screen. */
.audio-controls{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.music-toggle{gap:5px;white-space:nowrap}.music-toggle>span:first-child{font-size:21px;line-height:1}
.host-game .top-actions{align-items:flex-start}
.phone-menu-actions .audio-controls{grid-column:1/-1}
.phone-menu-actions .sound-toggle>span:last-child{display:inline}
@media(max-width:720px){.music-toggle{font-size:12px}}
header.game-menu-toolbar{justify-content:flex-end}
header.game-menu-toolbar #phone-menu-open{min-width:72px;min-height:44px}
#phone-menu .sound-toggle>span:last-child{display:inline}
.music-volume{display:block;min-width:0;margin:6px 0 0}
.music-volume>span{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:900}
.music-volume output{font-variant-numeric:tabular-nums;white-space:nowrap}
.music-volume-slider{display:block;width:100%;min-width:0;min-height:44px;height:44px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--accent);cursor:pointer}
/* The lobby keeps its navigation separate from the shared settings menu. */
#app:has(>.host-lobby) .top-actions #phone-menu-open{min-width:72px;min-height:44px}

.answer-description{display:block;font-size:12px;line-height:1.4;margin-bottom:3px;font-weight:900}