/* Bilsene 8.2: clearer surfaces, compact salon and synchronized question presentation. */
:root{--border:#d5e7e3;--ink:#173f43;--purple:#07898c;--purple-dark:#066b71}
body{background:#edf5f4;color:var(--ink)}
.panel,.side-panel,.quiz-card,.stat{border:1px solid #c9e0db;box-shadow:0 4px 18px #0a515108}
.panel h2,.section-title h2,.quiz-title{color:#114c52}
.page-heading h1{font-weight:760;color:#123f48}
.page-heading p,.section-title p,.panel>p,.legal-document p{color:#4c6e72}
.button.primary{background:#087f85;border-color:#087f85;color:#fff;font-weight:750}
.button.primary:hover{background:#06666f;border-color:#06666f}
.button.secondary{background:#fff;color:#17616a;border-color:#a9cfc8;font-weight:650}
.button.secondary:hover{background:#eaf7f3;border-color:#63aaa5}
.badge{background:#d8f1ea;color:#126459;border:1px solid #bce2d5;font-weight:700}
.quiz-card:hover{border-color:#6eb8b1;box-shadow:0 8px 24px #07565312}
.quiz-preview-link{display:inline-flex;padding:5px 9px;border-radius:7px;background:#ddf4ee;color:#0b6769;font-weight:750;font-size:12px}
.quiz-bottom{gap:7px;flex-wrap:wrap}.quiz-bottom>span{font-size:11px}
.preview-actions{display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0}
.all-question-preview{display:grid;gap:20px;margin-top:20px}
.preview-question-card{margin:0;padding:24px;break-inside:avoid}
.preview-question-card>header{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #cce2dd;padding-bottom:13px;margin-bottom:18px}
.preview-question-card>header h2{color:#08787a;font-size:20px}
.preview-question-card>h3{font-size:clamp(19px,2.2vw,27px);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;color:#173f48}
.preview-question-card .preview-option{background:#f3f8f7;border-color:#c9dfd8;align-items:center;min-width:0}
.preview-question-card .preview-option>span:not(.answer-symbol){min-width:0;overflow-wrap:anywhere;font-size:16px;color:#254f55}
.preview-question-card .preview-correct{background:#e2f7e9;border:2px solid #5abf88}
.preview-key{font-size:12px;color:#086343;font-weight:800;white-space:nowrap}
.preview-question-card .answer-symbol{border-radius:8px;min-height:45px;background:#d8eeea;padding:5px}
.all-preview-dialog{width:min(1120px,96vw);max-width:96vw;max-height:92dvh;border:1px solid #79bcb0;border-radius:20px;background:#edf6f2;padding:22px;color:#173f43;box-shadow:0 25px 100px #07333155}
.all-preview-dialog::backdrop{background:#0c343acc;backdrop-filter:blur(3px)}
.preview-dialog-header{position:sticky;top:-22px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;background:#edf6f2;border-bottom:1px solid #accfc3;margin-bottom:14px}
/* The salon uses the screen width without a tall, disconnected header. */
body.salon-host .sidebar,body.salon-host .topbar,body.salon-host .footer{display:none}
body.salon-host .main-shell{margin-left:0}
body.salon-host .content{max-width:1500px;padding:22px 30px}
body.salon-host .footer{padding-top:12px}
.salon-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:0 0 20px;padding:22px 26px;background:#fff;border:1px solid #c1ded7;border-radius:20px;box-shadow:0 5px 20px #11544808}
.salon-title h1{font-size:clamp(25px,2.5vw,38px);line-height:1.2;max-width:650px;overflow-wrap:anywhere;margin:7px 0}
.salon-heading .overline{font-size:11px;letter-spacing:1.4px;color:#168482}
.salon-back{display:inline-flex;font-size:12px;font-weight:650;color:#52777b;margin-bottom:18px}
.salon-heading p{font-size:14px;color:#496d71}
.salon-entry{gap:22px;flex-direction:row-reverse;align-items:center}
.salon-entry .join-qr{width:175px;margin:0}
.salon-entry .join-qr small{font-size:11px;max-width:205px}
.salon-entry .join-code{min-width:280px;padding:18px 24px;text-align:center;background:#e2f7ef;border:2px solid #7acabb;border-radius:18px}
.salon-entry .join-code>small:first-child{font-size:12px;letter-spacing:2px;font-weight:750;color:#21746d}
.salon-entry .join-code button{font-size:clamp(44px,5vw,70px);font-weight:900;line-height:1.15;letter-spacing:5px;color:#086e73;padding:5px 0}
.salon-entry .join-code>small:last-child{font-size:12px;letter-spacing:0;color:#3b7473}
body.salon-host .game-board{max-width:none;margin:0 0 16px;padding:22px 26px;border-radius:20px;border:1px solid #acd3c9}
.game-tools{display:flex;gap:8px;justify-content:flex-end;margin:0 0 10px;flex-wrap:wrap;position:absolute;right:22px;top:18px}
.salon-host .game-board{position:relative}
.game-tools .button{padding:7px 12px;font-size:12px}
.game-board #game-error:empty{display:none}
.game-board #game-error:not(:empty){margin:12px 0;padding:12px;background:#fff0d8;border:1px solid #e7c583;border-radius:10px;color:#7d4d12}
.game-board .waiting{padding:28px 0 10px}
.salon-host .waiting:has(.salon-welcome){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 30px;text-align:left;padding:15px 8px 0}
.salon-welcome h2{font-size:clamp(24px,3vw,35px);font-weight:800;color:#075f66}
.salon-welcome p{font-size:15px;color:#4a7374;margin:8px 0 0}
.salon-live-dot{display:none}
.salon-count{display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid #d0e5df;padding:0 15px 0 35px;color:#3e7275}
.waiting .salon-count .participant-count{font-size:clamp(48px,5vw,66px);line-height:1;margin:0 0 9px;color:#007f83}
.salon-count>span{font-weight:750}.salon-count small{margin-top:5px;font-size:12px}
.participant-tiles{grid-column:1/-1;justify-content:flex-start;max-width:none;width:100%;margin:12px 0 0;gap:10px}
.participant-tiles:empty::before{content:'Katılım kodunu paylaşın. İlk katılımcıyı bekliyoruz…';display:block;width:100%;padding:25px;border:2px dashed #c1dfd5;background:#f4faf7;border-radius:14px;text-align:center;font-size:15px;color:#537c77}
.participant-tile{padding:11px 17px;border-radius:12px;font-size:18px}
.game-board .game-controls{margin-top:20px;gap:12px}
.game-board .game-controls .primary{min-width:220px;padding:14px 24px;font-size:16px}
.host-participants{max-width:none;margin:20px 0 0;text-align:left;padding-top:15px}
/* Countdown and reading transitions are driven by local time synchronized with PHP. */
#game-content{position:relative}
.round-countdown{display:none;min-height:52dvh;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at center,#ddf6ed 0,transparent 65%);border-radius:18px}
.round-countdown p{font-size:clamp(21px,3vw,34px);font-weight:800;color:#15636a}
.round-countdown small{font-size:16px;color:#4f7678}
.countdown-number{font-size:clamp(100px,23vh,220px);font-weight:900;color:#008d8b;line-height:1;text-shadow:0 8px 0 #bce9de;font-variant-numeric:tabular-nums}
.round-counting .round-countdown{display:flex}
.round-counting>.game-meta,.round-counting>.question-stage,.round-counting>.answer-area,.round-counting>.status-message{display:none!important}
.game-board .question-stage{padding:8px 0;overflow:hidden;max-height:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.game-board .question-stage .game-question{font-size:clamp(24px,3vw,42px);line-height:1.2;margin:0 auto;width:100%;max-width:1200px;text-wrap:balance;overflow-wrap:anywhere;flex:none;transition:none}
.game-board .question-stage .question-image{max-height:18dvh;margin:10px auto 0;flex-shrink:1;min-height:0;object-fit:contain}
.question-intro .question-stage{max-height:none;padding:8px 0;overflow:hidden}
.question-intro .question-stage .game-question{font-size:clamp(28px,5vw,76px)}
.question-intro .answer-area{display:none!important}
.question-intro .question-stage .question-image{max-height:22dvh}
.question-intro:not(:has(.question-stage))::after{content:'Öğretmen ekranındaki soruyu oku. Simgeler birazdan açılacak.';display:flex;align-items:center;justify-content:center;min-height:45dvh;padding:25px;color:#16686d;font-size:clamp(21px,4vw,34px);font-weight:800;text-align:center}
body.player-options-only .answer-area.symbols-only.single-choice .answer-symbol{width:clamp(66px,16vh,145px);height:clamp(66px,16vh,145px);border-radius:16px;background:#ffffff20}
body.player-options-only .answer-area.symbols-only.single-choice .answer-symbol svg{width:75%;height:75%}
body.player-options-only .answer-area.symbols-only .answer-symbol small{font-size:clamp(15px,2.5vh,24px);font-weight:850}
.answer-area.symbols-only .answer-body{display:none}
.answer-area.symbols-only.order-answers .order-row{gap:18px;justify-content:center}
.answer-area.symbols-only.order-answers .answer-symbol{width:60px;height:60px;border-radius:10px}
.game-board .game-meta{margin-bottom:8px;gap:12px;color:#285e66;font-weight:700}
body.active-game .game-board{min-height:calc(100dvh - 40px)}
body.active-game .game-tools{margin-bottom:6px}
@media(min-width:1400px){.salon-entry .join-qr{width:230px}}
@media(max-height:800px) and (min-width:1001px){.salon-heading{padding:16px 24px;margin-bottom:16px}.salon-entry .join-qr{width:155px}.salon-title h1{font-size:30px}.salon-back{margin-bottom:10px}.salon-entry .join-code button{font-size:58px}.salon-entry .join-code{padding:14px 20px}body.salon-host .game-board{padding:20px}.participant-tiles:empty::before{padding:18px}}
@media(max-width:1000px){.salon-heading{grid-template-columns:1fr;gap:18px}.salon-entry{justify-content:space-between}.salon-entry .join-code{flex:1}.salon-title h1{max-width:none}.salon-back{margin-bottom:12px}.salon-entry .join-qr{width:180px}}
@media(max-width:600px){body.salon-host .content{padding:12px}.salon-heading{padding:18px;gap:12px;border-radius:15px}.salon-title h1{font-size:25px}.salon-heading p{font-size:12px}.salon-entry{gap:10px;flex-wrap:nowrap}.salon-entry .join-qr{width:125px}.salon-entry .join-qr small{font-size:9px}.salon-entry .join-code{min-width:0;padding:14px 8px}.salon-entry .join-code button{font-size:37px;letter-spacing:3px}.salon-entry .join-code>small:first-child{font-size:9px;letter-spacing:1px}.salon-entry .join-code>small:last-child{font-size:10px}body.salon-host .game-board{padding:16px 12px}.salon-host .waiting:has(.salon-welcome){grid-template-columns:1fr auto;gap:12px}.salon-welcome h2{font-size:22px}.salon-welcome p{font-size:12px}.salon-count{padding:0 0 0 12px}.waiting .salon-count .participant-count{font-size:44px}.salon-count>span{font-size:11px}.participant-tiles:empty::before{font-size:12px;padding:18px}.game-tools{justify-content:center}.preview-question-card{padding:16px}.preview-question-card>header{flex-wrap:wrap}.preview-options{grid-template-columns:1fr}.preview-actions .button{padding:9px 12px}.all-preview-dialog{padding:14px}.preview-dialog-header{top:-14px}.game-board .game-controls .primary{min-width:180px}.salon-live-dot{margin-bottom:12px}}
@media(print){.sidebar,.topbar,.footer,.preview-actions,.info-box,.preview-dialog-header,.public-header{display:none!important}.main-shell{margin:0}.content{padding:0;max-width:none}.all-question-preview{display:block}.preview-question-card{box-shadow:none;border:1px solid #bbb;margin:12px 0}.preview-question-card img{max-height:180px}.preview-heading{display:block}.preview-correct{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media(prefers-reduced-motion:reduce){.round-countdown,.participant-tile{animation:none}.all-preview-dialog::backdrop{backdrop-filter:none}}
@media(max-width:600px){.game-tools{position:static;margin-bottom:12px}}