:root{
  --navy:#04192b;--navy2:#062b49;--panel:#073a61;--panel2:#0a4f7d;--line:#1a78b2;
  --cyan:#11c6f4;--blue:#1399ef;--green:#7df230;--orange:#ff7a13;--yellow:#ffd43b;
  --white:#fff;--muted:#b7d4e5;--danger:#ff493f;--shadow:0 18px 42px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#00111f;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
body{display:flex;justify-content:center;background:radial-gradient(circle at 50% -10%,#0d5790 0,#031a2c 44%,#00111f 100%)}
.phone-app{position:relative;width:min(100%,430px);min-height:100vh;background:linear-gradient(180deg,#062d4e,#031a2d 62%,#021422);overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.55)}
.appbar{height:58px;padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(2,22,38,.95);border-bottom:1px solid rgba(77,173,225,.24);position:sticky;top:0;z-index:20}
.home-screen~*{}
.mini-brand{font-weight:900;display:flex;gap:8px;align-items:center}
.piece-logo{filter:saturate(1.4)}
.icon-button,.back-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(120,198,238,.5);background:rgba(4,39,64,.85);color:#fff;font-size:22px}
.screen{display:none;min-height:calc(100vh - 58px);padding:16px 14px 28px}
.screen.active{display:block}
.availability{display:none!important}
.section-head{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.section-head h1{font-size:22px;margin:0}
.setup-card,.lobby-card{background:linear-gradient(180deg,rgba(7,61,100,.95),rgba(4,38,65,.97));border:1px solid rgba(53,154,209,.38);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.setup-mode-note{font-size:20px;font-weight:900;color:#fff;margin-bottom:16px}
.field-label,.stacked-field{display:block;color:#cfe8f6;font-weight:800;font-size:13px;margin:14px 0 7px}
.stacked-field input,.stacked-field select{width:100%;height:48px;border-radius:12px;border:1px solid #1b73a6;background:#052a48;color:#fff;padding:0 13px;outline:none}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segment,.round-options button,.difficulty-row button{border:1px solid #1b76ab;background:#062e4d;color:#d9edf7;border-radius:12px;padding:11px 8px;font-weight:800}
.segment strong{font-size:24px;display:block}
.segment small{display:block;font-size:11px;color:#acd2e8}
.segment.active,.round-options button.active,.difficulty-row button.active{background:linear-gradient(180deg,#19bfff,#0884d3);border-color:#4fe5ff;color:#fff;box-shadow:0 0 0 2px rgba(48,204,255,.12)}
.difficulty-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.difficulty-row button[data-difficulty="easy"].active{background:linear-gradient(180deg,#9cf444,#43d52a);color:#082b16;border-color:#aaff75}
.difficulty-row button[data-difficulty="expert"].active{background:linear-gradient(180deg,#ff9f2c,#ff5e1b);border-color:#ffc066}
.helper-copy{font-size:11px;color:#a9d1e5;line-height:1.35;margin-top:8px}
.round-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.primary-action,.secondary-action,.mic-test{width:100%;border:0;border-radius:16px;min-height:54px;font-weight:900;font-size:18px}
.primary-action{background:linear-gradient(180deg,#ffd83d,#ff8b11);color:#0b2340;box-shadow:0 9px 20px rgba(0,0,0,.25)}
.secondary-action{background:#083c64;color:#fff;border:1px solid #176c9d}
.bottom{margin-top:18px}
.form-error{min-height:18px;color:#ffb6af;font-size:12px;margin-top:8px}
.voice-setup{margin-top:17px;padding:13px;border:1px solid rgba(48,168,225,.28);border-radius:14px;background:#052e4d;display:flex;align-items:center;justify-content:space-between;gap:12px}
.voice-setup small{display:block;color:#a8cde0;margin-top:4px;line-height:1.25}
.switch input{display:none}
.switch span{display:block;width:52px;height:28px;border-radius:20px;background:#475c69;position:relative;transition:.2s}
.switch span:after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+span{background:#23cb65}
.switch input:checked+span:after{left:27px}
.mic-test{margin-top:10px;background:#087db5;color:#fff;border:1px solid #27c6f5}
.mic-test-status{font-size:12px;color:#afe7ff;min-height:18px;margin-top:6px}
.room-code-label{text-align:center;color:#acd4e8;font-size:12px;text-transform:uppercase;letter-spacing:2px}
.room-code{text-align:center;font-size:38px;font-weight:1000;letter-spacing:5px;color:#ffe548;margin:4px 0}
.qr-image{display:block;width:138px;height:138px;margin:10px auto;background:white;border-radius:10px;padding:6px}
.settings-line{text-align:center;color:#b9d8e8;font-size:12px;margin-bottom:14px}
.players-title{font-weight:900;margin:12px 0 7px}
.player-list{display:grid;gap:7px}
.player-row{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;background:#062f50;border-radius:11px;border:1px solid rgba(49,132,177,.25)}
.player-name{display:flex;align-items:center;gap:9px}
.player-color{width:11px;height:11px;border-radius:50%;display:inline-block}
.player-color.blue{background:#35b7ff}
.player-color.purple{background:#bb72ff}
.player-color.gold{background:#ffd440}
.player-color.green{background:#53dd68}
.you-badge{font-size:9px;line-height:1;padding:4px 6px;border-radius:9px;background:#159bf0;color:white;font-weight:900;margin-left:6px}
.waiting-line{text-align:center;color:#b8d5e4;margin:15px 0;font-size:13px}
.game-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.round-chip,.score-chip{font-weight:800;color:#cce9f7}
.score-chip{text-align:right;display:flex;flex-direction:column}
.score-chip small{font-size:9px;color:#91bcd2}
.score-chip span{font-size:20px}
.timer-ring{border:2px solid #1599dc;background:#052d4c;border-radius:20px;padding:7px 13px;font-size:21px;font-weight:1000;box-shadow:0 0 20px rgba(16,164,231,.13)}
.puzzle-stage{margin:13px auto 7px;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#0a4b74,#031a2b 70%);border:1px solid rgba(41,131,179,.45);position:relative;box-shadow:inset 0 0 40px rgba(0,0,0,.35)}
#jigsawSvg{width:100%;height:100%;display:block}
.portrait-once{pointer-events:none}
.jig-cover{fill:url(#coverGrad);stroke:rgba(126,217,255,.55);stroke-width:4;vector-effect:non-scaling-stroke;transition:transform .62s cubic-bezier(.16,.85,.22,1),opacity .46s ease;opacity:.98;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 5px 7px rgba(0,0,0,.35))}
.jig-cover.fly-away{opacity:0}
.piece-grid{stroke:rgba(255,255,255,.34);stroke-width:3;vector-effect:non-scaling-stroke;fill:none;pointer-events:none}
.no-motion .jig-cover{transition:none!important}
.piece-line{text-align:center;color:#9ac9df;font-size:12px;margin:4px 0 10px}
.clue-box{background:linear-gradient(180deg,#073a61,#062e4e);border:1px solid #166b9d;border-radius:14px;padding:13px;margin-top:8px}
.clue-kicker{font-size:11px;font-weight:1000;color:#ffd441}
.clue-copy{font-size:16px;line-height:1.35;margin-top:7px}
.buzz-button{width:100%;height:68px;border:0;border-radius:17px;background:linear-gradient(180deg,#ff5b50,#ef251e);color:white;font-size:25px;font-weight:1000;margin-top:12px;box-shadow:0 9px 22px rgba(151,18,18,.35)}
.buzz-button:disabled{opacity:.45;filter:grayscale(.45)}
.buzz-button.buzz-pressed{transform:scale(.98)}
.status-line,.answering-line{text-align:center;color:#b7d8e8;font-size:12px;margin:8px 0}
.answering-line{color:#7fe7ff;min-height:16px}
.mini-scoreboard{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.mini-player{display:flex;justify-content:space-between;background:#052942;border-radius:9px;padding:7px 9px;font-size:11px}
.result-icon,.trophy{text-align:center;font-size:64px;margin-top:30px}
.result-title{text-align:center;margin:4px 0 8px}
.winner-line{text-align:center;color:#d9f4ff;font-weight:800;margin-bottom:15px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}
.result-grid>div{background:#062f50;border-radius:13px;padding:13px;text-align:center}
.result-grid strong{display:block;font-size:23px;color:#ffe448}
.result-grid span{font-size:10px;color:#a7c9dc}
.overlay{position:fixed;z-index:100;inset:0;background:rgba(0,10,18,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.modal-card{width:min(100%,390px);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#083c64,#04243d);border:1px solid #2179a8;border-radius:20px;padding:20px;box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative}
.modal-card.compact{text-align:center;max-width:330px}
.modal-card h2{margin:4px 0 14px}
.close-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border-radius:50%;border:0;background:#062c4a;color:#fff;font-size:24px}
.spinner{width:58px;height:58px;border-radius:50%;border:7px solid rgba(89,192,239,.18);border-top-color:#19b8f5;margin:8px auto 17px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.answer-top{display:flex;align-items:center;justify-content:space-between}
.answer-count-wrap{width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#06345a;border:5px solid #55e755}
.answer-count-wrap span{font-size:30px;font-weight:1000}
.answer-count-wrap small{font-size:9px;color:#bcd8e8}
.answer-progress{height:10px;border-radius:8px;background:#173e55;overflow:hidden;margin:7px 0 9px}
.answer-progress>div{height:100%;width:100%;background:linear-gradient(90deg,#41e66e,#e5f93b);transition:width .15s linear}
.timer-pause-note{text-align:center;color:#a9d5e9;font-size:11px;margin-bottom:12px}
.timer-pause-note.paused{color:#ffe34f;font-weight:900}
.mic-button{width:110px;height:110px;border-radius:50%;border:2px solid #77ff8d;background:radial-gradient(circle,#2bd86c,#077650);color:white;display:block;margin:10px auto;font-size:16px;font-weight:900;box-shadow:0 0 25px rgba(54,230,116,.25)}
.or-line{text-align:center;color:#8fbcd2;font-size:11px;margin:8px 0}
.answer-card input{width:100%;height:52px;border-radius:12px;border:1px solid #1c78ab;background:white;color:#102a3b;padding:0 13px;font-size:17px;margin-bottom:10px}
.text-action{display:block;margin:12px auto 0;border:0;background:transparent;color:#9fdcf7;font-weight:800}
.status-symbol{font-size:48px}
.how-scroll{max-height:65vh;overflow:auto;padding-right:4px}
.how-card h3{color:#52dcff;margin:16px 0 5px}
.how-card p,.how-list,.score-rules{font-size:13px;line-height:1.45;color:#e2f1f8}
.how-list,.score-rules{padding-left:20px}
.how-list li,.score-rules li{margin-bottom:8px}
.tutorial-steps{display:grid;gap:11px;margin:13px 0 18px}
.tutorial-steps>div{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center}
.tutorial-steps b{display:flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:#159ae7}
.loading-card p{color:#a9cfe2}
@media(min-width:700px){
body{padding:22px}
.phone-app{min-height:calc(100vh - 44px);border-radius:26px}
.screen{min-height:calc(100vh - 102px)}
.home-hero{height:560px}
.home-actions{padding-bottom:16px}
}
@media(max-height:760px){
.home-hero{min-height:405px;height:50vh}
.home-title-lockup{top:85px}
.home-title .guess-word{font-size:54px}
.home-title .face-word{font-size:59px}
.tagline{font-size:17px;margin-top:20px}
.home-actions button{min-height:58px;font-size:21px}
.home-footer{margin-top:12px}
.puzzle-stage{max-height:43vh;width:auto}
.clue-copy{font-size:14px}
.buzz-button{height:59px}
}
html,body{width:100%;max-width:100%;overflow-x:hidden}
.phone-app{width:min(100%,430px);max-width:430px;min-height:100dvh}
.screen{min-height:calc(100dvh - 58px);overflow-x:hidden}
.back-btn.back-text{width:auto;min-width:88px;height:40px;border-radius:20px;padding:0 14px;font-size:14px;font-weight:900;white-space:nowrap}
.screen-kicker{text-transform:uppercase;letter-spacing:1.8px;font-size:10px;font-weight:1000;color:#8edcff;text-align:center;margin:-2px 0 7px}
.captain-badge{font-size:8px;line-height:1;padding:4px 6px;border-radius:9px;background:#ffd744;color:#152843;font-weight:1000;margin-left:5px}
.choice-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice-pills button{min-height:46px;border:1px solid #1b76ab;background:#062e4d;color:#d9edf7;border-radius:12px;padding:9px 14px;font-weight:900}
.choice-pills button.active{background:linear-gradient(180deg,#88ed45,#37c92d);border-color:#b8ff8b;color:#082b16;box-shadow:0 0 0 2px rgba(123,242,48,.12)}
.compact-pills{width:132px;flex:none}
.compact-pills button{min-height:38px;padding:6px 9px;font-size:12px}
.mic-test.prominent{min-height:66px;font-size:20px;margin-top:14px;background:linear-gradient(180deg,#14a9e8,#0670ae);box-shadow:0 10px 22px rgba(0,0,0,.22)}
.team-name-display{text-align:center;font-size:23px;font-weight:1000;color:#fff;margin-bottom:9px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.share-action{min-height:45px;margin:4px 0 8px}
.share-status{text-align:center;min-height:17px;color:#8fe7ff;font-size:11px;margin-bottom:4px}
.settings-card{max-width:410px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid rgba(117,197,238,.18)}
.settings-row strong{display:block;font-size:16px}
.settings-row small{display:block;color:#9ec8dd;font-size:11px;line-height:1.3;margin-top:3px}
.settings-action{width:100%;min-height:54px;margin-top:10px;border-radius:13px;border:1px solid #1c78aa;background:#07385d;color:#fff;padding:0 14px;display:flex;align-items:center;justify-content:space-between;font-weight:900;text-align:left}
.settings-action span{font-size:24px}
.danger-action{background:#6c321c;border-color:#d46b35}
.about-line{margin-top:16px;border-radius:12px;background:#052a47;color:#b8d8e8;padding:11px 12px;font-size:11px;display:flex;justify-content:space-between;gap:10px}
.mic-card{text-align:center}
.giant-mic{width:122px;height:122px;border-radius:50%;border:5px solid rgba(255,255,255,.8);background:linear-gradient(180deg,#ff6a55,#d82c34);color:#fff;font-size:53px;box-shadow:0 12px 30px rgba(0,0,0,.35);margin:8px auto 17px}
.giant-mic.listening{animation:micPulse 1s infinite alternate}
@keyframes micPulse{from{transform:scale(1);box-shadow:0 0 0 0 rgba(255,102,79,.42)}to{transform:scale(1.05);box-shadow:0 0 0 15px rgba(255,102,79,0)}}
.speech-transcript{background:#edf8ff;color:#08263d;border-radius:13px;padding:13px;text-align:left;margin:10px 0;min-height:72px}
.speech-transcript strong{font-size:12px}
.speech-transcript>div{margin-top:7px;font-size:16px;font-weight:700;line-height:1.35;word-break:break-word}
.mic-result{min-height:42px;margin:8px 0;color:#bcf8d2;font-weight:800;font-size:13px;line-height:1.35}
#answerTranscriptWrap{margin:8px 0;padding:10px;min-height:0}
#answerTranscriptWrap>div{font-size:14px}
.jig-cover{stroke:rgba(34,95,13,.72)!important;stroke-width:4!important;filter:drop-shadow(0 5px 7px rgba(0,0,0,.28))!important}
.piece-grid{stroke:rgba(25,69,12,.46)!important}
.modal-card{max-width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
input,select,button{max-width:100%}
.setup-card,.lobby-card{max-width:100%;overflow-x:hidden}
.room-code{word-break:break-word}
@media (orientation:landscape){
.phone-app{width:100vw;max-width:none;min-height:100dvh}
.appbar{height:52px;padding:env(safe-area-inset-top) 18px 0}
.screen{min-height:calc(100dvh - 52px);padding:10px 20px 16px;max-width:1180px;margin:0 auto}
#screen-game.active{display:grid;grid-template-columns:minmax(280px,48%) minmax(280px,1fr);grid-template-areas:"kicker kicker" "top top" "puzzle clue" "puzzle buzz" "piece status" "scores scores";column-gap:20px;row-gap:6px;align-items:start}
#screen-game .screen-kicker{grid-area:kicker;margin:0}
#screen-game .game-top{grid-area:top}
#screen-game .puzzle-stage{grid-area:puzzle;margin:2px auto;width:min(100%,calc(100dvh - 130px));max-height:calc(100dvh - 130px)}
#screen-game .piece-line{grid-area:piece;margin-top:2px}
#screen-game .clue-box{grid-area:clue;margin-top:4px;min-height:110px}
#screen-game .buzz-button{grid-area:buzz;margin-top:5px}
#screen-game .status-line{grid-area:status}
#screen-game .answering-line{grid-area:status;margin-top:28px}
#screen-game .mini-scoreboard{grid-area:scores;grid-template-columns:repeat(4,minmax(0,1fr))}
.setup-card,.lobby-card{max-width:900px;margin:0 auto}
.section-head{max-width:900px;margin:0 auto 10px}
.modal-card{max-width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 18px)}
}
@media (max-width:360px){
.screen{padding-left:10px;padding-right:10px}
.setup-card,.lobby-card{padding:14px}
.segment strong{font-size:21px}
.difficulty-row button,.round-options button{padding:10px 5px}
.room-code{font-size:31px}
.modal-card{padding:16px}
.compact-pills{width:114px}
.settings-row{gap:8px}
}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.puzzle-stage{background:radial-gradient(circle at 50% 44%,#0a4066,#021523 72%)}
.photo-piece{stroke:rgba(255,255,255,.76);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;transition:transform .62s cubic-bezier(.16,.85,.22,1),opacity .42s ease;filter:drop-shadow(0 5px 7px rgba(0,0,0,.5))}
.photo-piece.in-place{opacity:1;transform:translate(0 0) rotate(0deg)!important}
.piece-slot{fill:rgba(255,255,255,.015);stroke:rgba(146,215,245,.14);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.no-motion .photo-piece{transition:none!important}
.piece-grid,.jig-cover,.portrait-once{display:none!important}
.color-row{display:flex;gap:14px;align-items:center;justify-content:center;margin:7px 0 4px}
.color-dot{width:46px;height:46px;min-width:46px;border-radius:50%;border:3px solid rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);padding:0;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.color-dot.blue{background:#35b7ff}
.color-dot.purple{background:#a85cff}
.color-dot.gold{background:#ffc52e}
.color-dot.green{background:#44c767}
.color-dot.active{transform:scale(1.10);border-color:#fff;box-shadow:0 0 0 4px #0f91da,0 5px 12px rgba(0,0,0,.30)}
.color-choice-status{text-align:center;color:#bceaff;font-size:12px;font-weight:800;min-height:18px;margin-bottom:8px}
.no-scroll-screen{height:calc(100dvh - 58px)!important;min-height:0!important;overflow:hidden!important}
#screen-join.active{display:flex;flex-direction:column}
#screen-join .setup-card{flex:1;display:flex;flex-direction:column;justify-content:center;margin-bottom:8px}
#screen-game.active{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;align-content:stretch;padding-top:8px;padding-bottom:8px;gap:4px}
#screen-game .screen-kicker{margin:0}
#screen-game .puzzle-stage{width:min(100%,43dvh);height:auto;max-height:43dvh;margin:2px auto;align-self:center}
#screen-game .piece-line{margin:1px 0 3px}
#screen-game .clue-box{margin-top:1px;padding:9px 11px;min-height:0}
#screen-game .clue-copy{font-size:14px;margin-top:4px;line-height:1.24}
.game-action-row{display:grid;grid-template-columns:minmax(118px,.42fr) minmax(0,1fr);gap:8px;align-items:stretch;margin-top:2px}
.game-action-row .buzz-button{margin:0;height:58px}
.dont-know-button{height:58px;border-radius:16px;border:1px solid #4894be;background:#073957;color:#fff;font-weight:900;font-size:15px}
#screen-game .status-line,#screen-game .answering-line{margin:2px 0;font-size:11px}
.mini-scoreboard{max-height:56px;overflow:auto}
.round-answer{text-align:center;font-size:20px;font-weight:1000;color:#ffe34f;margin:8px 0 12px}
.stats-card{text-align:center}
.stats-card h2{margin-bottom:4px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
.stats-grid>div{background:#062f50;border:1px solid rgba(69,163,212,.30);border-radius:14px;padding:14px 8px}
.stats-grid strong{display:block;color:#ffe34f;font-size:28px}
.stats-grid span{display:block;color:#b8d8e8;font-size:11px;margin-top:3px}
@media (orientation:landscape){
.no-scroll-screen{height:calc(100dvh - 52px)!important}
#screen-game.active{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"kicker kicker" "top top" "puzzle clue" "puzzle actions" "piece status" "scores scores";gap:5px}
#screen-game .game-action-row{grid-area:actions;grid-template-columns:1fr 1.35fr}
#screen-game .game-action-row .buzz-button,#screen-game .dont-know-button{height:56px}
#screen-game .puzzle-stage{width:min(100%,calc(100dvh - 138px));max-height:calc(100dvh - 138px)}
}
@media (max-height:690px) and (orientation:portrait){
#screen-game .puzzle-stage{width:min(100%,36dvh);max-height:36dvh}
#screen-game .clue-copy{font-size:12px}
.game-action-row .buzz-button,.dont-know-button{height:50px}
}
#screen-lobby.active,#screen-round.active,#screen-final.active{height:calc(100dvh - 58px);min-height:0;overflow:hidden}
#screen-lobby .lobby-card{max-height:calc(100dvh - 120px);overflow:hidden;display:flex;flex-direction:column}
#screen-lobby .player-list,#screen-round .player-list,#screen-final .player-list{overflow:auto;min-height:0;max-height:34dvh}
@media (orientation:landscape){
#screen-lobby.active,#screen-round.active,#screen-final.active{height:calc(100dvh - 52px)}
}
html,body{height:100%;height:100dvh;min-height:0;overflow:hidden}
body{padding:0!important}
.phone-app{height:100dvh!important;min-height:0!important;overflow:hidden!important;border-radius:0!important}
.screen.active{max-height:100dvh;overflow:hidden}
:root{--green:#238247}
.difficulty-row button[data-difficulty="easy"].active,.choice-pills button.active{background:linear-gradient(180deg,#2f9a48,#176d34)!important;color:#fff!important;border-color:#7dcf93!important}
.switch input:checked+span{background:#238247}
.color-dot.green{background:#238247}
#appbar.hidden{display:none!important}
.icon-button#homeBtn{display:flex;align-items:center;justify-content:center;line-height:1;padding:0 0 3px}
.game-side{display:flex;flex-direction:column;gap:10px;min-height:0}
.game-controls{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:12px;border:1px solid #166b9d;border-radius:16px;background:rgba(3,35,61,.92)}
.game-controls .status-line,.game-controls .answering-line{margin:0!important;min-height:0;text-align:left}
.game-controls .game-action-row{margin:0;width:100%}
.game-side .mini-scoreboard{grid-template-columns:repeat(2,minmax(0,1fr));max-height:20dvh;overflow:auto}
.puzzle-stage .piece-slot{display:none!important}
.photo-piece{stroke:rgba(255,255,255,.92);stroke-linecap:round;stroke-linejoin:round;stroke-width:3;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
@media (orientation:landscape){
#screen-game.active{max-width:1400px!important;display:grid!important;grid-template-columns:minmax(0,45%) minmax(0,55%)!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;grid-template-areas:'kicker kicker' 'top top' 'puzzle side' 'piece side'!important;column-gap:22px;row-gap:6px;align-items:stretch;height:calc(100dvh - 52px)!important}
#screen-game .puzzle-stage{grid-area:puzzle;width:min(100%,calc(100dvh - 150px));height:auto;max-height:calc(100dvh - 150px);justify-self:center;align-self:center}
#screen-game .game-side{grid-area:side;max-height:calc(100dvh - 145px);padding:4px 0;justify-content:space-between}
#screen-game .game-side .clue-box{margin:0;flex:0 0 auto;min-height:90px}
#screen-game .game-side .game-controls{flex:0 0 auto}
#screen-game .game-side .mini-scoreboard{flex:0 1 auto;max-height:24dvh}
#screen-game .piece-line{grid-area:piece}
}
@media (orientation:portrait){
#screen-game.active{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto minmax(0,40dvh) auto minmax(0,1fr)!important;grid-template-areas:'kicker' 'top' 'puzzle' 'piece' 'side'!important;gap:4px;max-height:calc(100dvh - 58px)}
#screen-game .puzzle-stage{grid-area:puzzle;max-height:40dvh;width:min(100%,40dvh);align-self:center}
#screen-game .piece-line{grid-area:piece}
#screen-game .game-side{grid-area:side;gap:5px;min-height:0;overflow:hidden}
#screen-game .game-side .clue-box{padding:7px 10px;margin:0}
#screen-game .game-side .game-controls{padding:8px;gap:5px}
#screen-game .game-side .mini-scoreboard{max-height:9dvh;overflow:auto}
#screen-game .game-action-row .buzz-button,#screen-game .game-action-row .dont-know-button{height:48px}
}
.score-menu-icon{width:24px;height:24px;fill:#fff;stroke:#fff;stroke-width:2;stroke-linecap:round}
@media (orientation:portrait){
.how-template-shell::after{content:'';position:absolute;left:2.1%;top:86.8%;width:95.8%;height:3.7%;box-sizing:border-box;z-index:3;background:#05345e;border:2px solid #20daf4;border-top:0;border-radius:0 0 18px 18px;pointer-events:none}
}
@media (orientation:portrait){
.how-template-shell::after{content:none!important}
}