.account-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.account-bar button{width:auto;min-height:38px;padding:.55rem .9rem;font-size:.95rem}
.yatzy-layout{display:grid;grid-template-columns:minmax(340px,38%) 1fr;gap:1rem;align-items:start}
.score-panel{max-height:76vh;overflow:auto;background:rgba(10,15,28,.18);border:1px solid rgba(117,134,173,.18);border-radius:18px;padding:1rem}
.dice-panel{background:rgba(10,15,28,.18);border:1px solid rgba(117,134,173,.18);border-radius:18px;padding:1rem}
.three-scene{position:relative;min-height:520px;border-radius:22px;background:radial-gradient(circle at 50% 28%,#447e5d,#173522 72%);overflow:hidden;box-shadow:inset 0 0 50px #0008}
.three-scene canvas{display:block;width:100%!important;height:100%!important}
.dice-strip{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;padding:.85rem 0 .3rem}
.die-chip{width:64px;height:64px;border-radius:16px;border:2px solid #dfe5f8;background:linear-gradient(180deg,#ffffff,#eef2ff);color:#111;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:900;box-shadow:0 10px 20px #0003;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.die-chip small{font-size:.7rem;font-weight:800;opacity:.72}
.die-chip.held{transform:translateY(-8px);border-color:#39b86f;box-shadow:0 0 0 4px #39b86f22,0 12px 22px #0004;background:linear-gradient(180deg,#f4fff8,#ddf8e8)}
.die-chip[disabled]{opacity:.65;cursor:not-allowed}
.dice-actions{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.score-table{width:100%;border-collapse:collapse;margin-bottom:1rem;background:#12192a;border:1px solid #3a4768;border-radius:16px;overflow:hidden;color:#eef3ff;transition:opacity .2s,transform .2s,box-shadow .2s}
.score-table th,.score-table td{padding:.5rem .55rem;border-bottom:1px solid #29324a;text-align:right}
.score-table thead th{background:#0d1425;color:#dfe7ff;font-weight:800}
.score-table tbody tr:nth-child(odd) td{background:#131b2e}
.score-table tbody tr:nth-child(even) td{background:#101726}
.score-table th:first-child,.score-table td:first-child{text-align:left}
.score-choice{cursor:pointer;font-weight:700}
.score-choice td{background:#153021!important}.score-choice td:last-child{color:#97efb6}.score-choice:hover td{background:#1b412d!important}
.active-player{outline:3px solid #39b86f;box-shadow:0 0 0 4px #39b86f22,0 12px 24px #0002;transform:translateY(-2px)}
.active-player thead th:first-child::before{content:'▶ ';color:#6de6a1}
.result-row{display:grid;grid-template-columns:2rem 1fr auto auto;gap:.8rem;padding:.8rem;border-bottom:1px solid #2a344f}.match-table-wrap{overflow:auto;margin-bottom:1rem;border:1px solid #334161;border-radius:12px;background:#0e1525;scrollbar-width:thin}.match-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;background:#12192a;font-size:.78rem}.match-table th,.match-table td{height:28px;min-width:46px;padding:.2rem .3rem;border-right:1px solid #26304a;border-bottom:1px solid #26304a;text-align:center;white-space:nowrap}.match-table thead th{position:sticky;top:0;z-index:2;background:#101a30;color:#f3f6ff}.match-table .match-label{position:sticky;left:0;z-index:3;min-width:48px;text-align:left;background:#111a2c}.match-table thead .match-label{z-index:4;background:#0b1324}.match-player-head{font-weight:900}.match-total-row th{background:#18233c;font-weight:900}.match-table .active-match-column{background:#183726!important;box-shadow:inset 2px 0 #4bdb84,inset -2px 0 #4bdb84}.room-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}.room-head b{font-size:1.1rem}
.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:1rem;z-index:1200}.modal.hidden{display:none}.modal-card{position:relative;background:linear-gradient(180deg,#f2f4fb,#ffffff);color:#111827;border-radius:22px;padding:1.35rem;max-width:560px;width:min(100%,560px);max-height:90vh;overflow:auto;box-shadow:0 28px 60px #0008}.modal-card h2,.modal-card h3{margin-top:0;color:#111827}.modal-card label{color:#475069}.modal-card input,.modal-card select,.modal-card textarea{background:#131b33;color:#f1f5ff;border-color:#44537d}.modal-card button{box-shadow:none}.modal-card .message{color:#a65d00}.stats-modal{max-width:900px;width:min(100%,900px)}.close{position:absolute;right:.9rem;top:.85rem;width:auto!important;min-height:38px!important;padding:.45rem .8rem!important;border-radius:10px!important;background:linear-gradient(180deg,#8796ff,#6d7eee)!important;color:#10162b!important;font-size:1.2rem;line-height:1}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem}.stat-card{padding:1rem;border:1px solid #d4d9ea;border-radius:12px;text-align:center;background:#fff}.stat-card strong{font-size:1.5rem;display:block}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{padding:.5rem;border-bottom:1px solid #e1e5f0;text-align:left}
.turn-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding:1rem 1.2rem;border-radius:16px;background:linear-gradient(135deg,#233247,#182335);color:#fff;border:2px solid #52657c;box-shadow:0 10px 26px #0003}.turn-banner.hidden{display:none}.turn-banner.is-mine{background:linear-gradient(135deg,#17613a,#0d3d25);border-color:#6ee7a8;box-shadow:0 0 0 4px #6ee7a826,0 12px 30px #0004}.turn-banner strong{display:block;font-size:clamp(1.15rem,2.2vw,1.65rem);letter-spacing:.02em}.turn-banner span{display:block;margin-top:.2rem;opacity:.9}.turn-countdown{min-width:92px;text-align:center;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;font-variant-numeric:tabular-nums;padding:.35rem .7rem;border-radius:12px;background:#0004}.turn-countdown.warning{background:#9a6700}.turn-countdown.danger{background:#9f1d2d;animation:timerPulse .7s infinite alternate}.turn-toast{position:fixed;left:50%;top:23%;transform:translate(-50%,-50%);z-index:1300;padding:1rem 1.5rem;border-radius:18px;background:#146c43;color:#fff;font-size:clamp(1.4rem,4vw,2.2rem);font-weight:900;box-shadow:0 16px 45px #0007;pointer-events:none}.turn-toast.hidden{display:none}.turn-text{font-weight:800}.roll-counter{font-weight:700}.held-label{text-align:center;margin-top:.75rem;font-size:.92rem;opacity:.8}.player-disconnected{opacity:.55}.player-disconnected::after{content:' · yhteys katkennut';color:#a33;font-size:.85em}.auto-message{font-weight:800;color:#9f1d2d}@keyframes timerPulse{from{transform:scale(1)}to{transform:scale(1.06)}}
.dice-mode-choice{display:flex;gap:.65rem;align-items:end;flex-wrap:wrap;margin:.8rem 0}.dice-mode-choice label{flex:1}.dice-mode-choice button{width:auto}
.camera-scene{position:relative;min-height:520px;border-radius:22px;background:#101820;overflow:hidden;box-shadow:inset 0 0 50px #000}.camera-scene video{width:100%;height:520px;object-fit:cover;display:block}.camera-scene canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.camera-status{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.75rem 1rem;border-radius:12px;background:#000b;color:#fff;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.camera-status strong{color:#83efb6}.camera-modal{max-width:700px}.camera-options{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.camera-options button{min-height:64px}.phone-pair code,#phoneUrl{display:block;word-break:break-all;padding:.6rem;background:#edf2ff;border-radius:8px;color:#1a2341}#qrCanvas{display:block;margin:1rem auto;max-width:240px;width:100%}.camera-fallback{background:#7d2531!important}.dice-mode-badge{font-size:.76rem;font-weight:700;opacity:.75;margin-left:.35rem}
.camera-dice-controls{position:absolute;left:50%;bottom:5.2rem;transform:translateX(-50%);display:flex;gap:.55rem;z-index:4}.camera-die{width:62px;height:62px;border-radius:12px;background:#fff;color:#111;border:3px solid #d9dee6;box-shadow:0 5px 14px #0006;display:grid;place-items:center;padding:.2rem}.camera-die b{font-size:1.5rem}.camera-die span{font-size:.62rem;font-weight:900}.camera-die.held{border-color:#4ee393;background:#dffff0;transform:translateY(-10px)}
.local-players-box{margin:1rem 0;padding:1rem;border:1px solid #334161;border-radius:16px;background:linear-gradient(180deg,#1a223a,#131a2d);color:#eef3ff}.local-players-box h3{margin:.1rem 0 1rem}.local-player-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;margin:.5rem 0}.local-player-row input{min-width:0}.local-player-row button{width:auto}.player-device-badge{display:inline-block;margin-left:.45rem;padding:.15rem .45rem;border-radius:999px;background:#e8eef7;font-size:.75rem;color:#1b243c}.player-device-badge.account{background:#dff5e4}.player-device-badge.local{background:#fff0c9}@media(max-width:650px){.local-player-row{grid-template-columns:1fr}.local-player-row button{width:100%}}
.camera-test-modal{max-width:720px}.camera-test-progress{display:flex;gap:.5rem;margin:.8rem 0}.camera-test-step{flex:1;padding:.55rem;border-radius:10px;background:#e9edf2;text-align:center;font-weight:800}.camera-test-step.active{background:#dff5e8;color:#12643b}.camera-test-step.ok{background:#bff0d1;color:#0b5a31}.camera-test-step.fail{background:#f7cbd1;color:#8d1d2e}.camera-test-video{border-radius:14px;overflow:hidden;background:#111;min-height:260px}.camera-test-video video{display:block;width:100%;height:320px;object-fit:cover}.camera-test-actions,#cameraTestConfirm{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:1rem}#cameraTestConfirm p{width:100%;margin:.2rem 0}
@media(max-width:900px){.yatzy-layout{grid-template-columns:1fr}.score-panel{order:2;max-height:none}.three-scene,.camera-scene,.camera-scene video{min-height:390px;height:390px}.account-bar{justify-content:center}.turn-banner{position:sticky;top:90px;z-index:20}.turn-countdown{min-width:76px}.camera-options{grid-template-columns:1fr}}
@media(max-width:600px){.die-chip{width:54px;height:54px}.camera-die{width:50px;height:54px}.camera-dice-controls{gap:.3rem}.camera-test-video video{height:240px}.modal-card{padding:1rem 1rem 1.25rem}.room-head{display:grid}}

/* Yhteinen kompakti Yatzy-pistetaulu */
.yatzy-layout{grid-template-columns:minmax(360px,46%) minmax(360px,54%);gap:.8rem}
.score-panel{padding:.65rem;max-height:72vh}
.score-panel h2{margin:.15rem 0 .55rem;font-size:1.15rem}
.combined-score-wrap{overflow:auto;border:1px solid #34415f;border-radius:12px;background:#0e1525;scrollbar-width:thin}
.combined-score-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:.78rem;color:#edf2ff}
.combined-score-table th,.combined-score-table td{height:29px;min-width:46px;padding:.22rem .32rem;text-align:center;border-right:1px solid #28334d;border-bottom:1px solid #28334d;white-space:nowrap}
.combined-score-table thead th{position:sticky;top:0;z-index:4;background:#101a30;color:#f3f6ff}
.combined-score-table .score-category{position:sticky;left:0;z-index:3;min-width:96px;max-width:112px;text-align:left;background:#111a2c;font-weight:700}
.combined-score-table thead .score-category{z-index:6;background:#0b1324}
.player-score-head{font-weight:900;text-transform:none}.player-score-head small{display:block;margin-top:1px;color:#9faccd;font-size:.62rem;font-weight:700}
.player-score-cell{background:#121b2e}.combined-score-table tbody tr:nth-child(even) .player-score-cell{background:#101827}
.combined-score-table .active-score-column{background:#183726!important;box-shadow:inset 2px 0 #4bdb84,inset -2px 0 #4bdb84}
.player-score-head.active-score-column{background:#17613a!important;color:#fff}
.combined-score-table .score-choice{cursor:pointer;color:#a7f4c2;font-weight:900;background:#1a432d!important}
.combined-score-table .score-choice:hover{background:#245b3c!important}
.summary-row th,.summary-row td{background:#172039!important;color:#cbd5f1}.summary-row.strong th,.summary-row .strong{font-weight:900;color:#fff}
.grand-total-row th,.grand-total-row td{position:sticky;bottom:0;background:#0b1324!important;font-weight:900;color:#fff;z-index:2}.grand-total-row .score-category{z-index:5}
.grand-total{font-size:.88rem}
.dice-panel{padding:.7rem}.three-scene{min-height:420px}.camera-scene{min-height:420px}.camera-scene video{height:420px}.die-chip{width:56px;height:56px;border-radius:14px}.die-chip span{font-size:.95rem}
@media(max-width:980px){.yatzy-layout{grid-template-columns:minmax(320px,44%) minmax(330px,56%)}.combined-score-table{font-size:.72rem}.combined-score-table th,.combined-score-table td{min-width:42px;padding:.18rem .25rem}.combined-score-table .score-category{min-width:88px}.three-scene{min-height:390px}}
@media(max-width:760px){.yatzy-layout{grid-template-columns:1fr}.score-panel{order:2;max-height:none}.combined-score-wrap{max-height:68vh}.three-scene,.camera-scene,.camera-scene video{min-height:340px;height:340px}}

/* Yatzy-näkymän sovitus headerin ja footerin väliin */
.yatzy-page{min-height:100dvh;display:flex;flex-direction:column;padding-top:0;overflow-x:hidden}
.yatzy-page .site-header{position:sticky;top:0;flex:0 0 auto}
.yatzy-page main{flex:1 1 auto;min-height:0;margin:10px auto;display:flex;flex-direction:column}
.yatzy-page main>.card{flex:1 1 auto;min-height:0}
.yatzy-page .site-footer{flex:0 0 auto;margin-top:auto;margin-bottom:0;padding:8px 0}
.yatzy-page #room{min-height:0;overflow:hidden}
.yatzy-page #game{min-height:0;height:calc(100dvh - 170px)}
.yatzy-page .score-panel,.yatzy-page .dice-panel{min-height:0}
.yatzy-page .score-panel{max-height:100%;overflow:auto}
.yatzy-page .three-scene{min-height:280px;height:clamp(280px,48vh,480px)}
.yatzy-page .camera-scene,.yatzy-page .camera-scene video{min-height:280px;height:clamp(280px,48vh,480px)}
.score-suggestion{margin:.35rem 0 .65rem;padding:.55rem .65rem;border-radius:10px;background:#182b22;border:1px solid #397653;color:#a9f0c1;font-size:.78rem;font-weight:800}
.recommended-score{position:relative;background:#24442f!important;box-shadow:inset 0 0 0 2px #64d990!important}
.recommended-score::after{content:'★';position:absolute;right:3px;top:1px;color:#ffe08a;font-size:.7rem}
.local-players-box .hint{color:#b8c2de}
@media(max-width:900px){.yatzy-page{overflow:auto}.yatzy-page #room{overflow:visible}.yatzy-page #game{height:auto}.yatzy-page .score-panel{max-height:none}.yatzy-page .three-scene{height:390px}}