/* Reserved bottom row: the placeholder never overlays the game. */
:root { --support-height: calc(48px + env(safe-area-inset-bottom)); --play-height: calc(100dvh - var(--support-height)); }
html { height: 100%; }
body { height: 100dvh; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--support-height); overflow: hidden; }
#app { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.home, .shell, .boot { min-height: var(--play-height); }
.privacy-link { border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 30px; padding: 3px 4px; }
.privacy-policy { color: #75472e; font-size: .875rem; text-underline-offset: 3px; }
.rules-dialog, .confirm-dialog { max-height: calc(var(--play-height) - 24px); top: 0; bottom: var(--support-height); }
.toast { bottom: calc(var(--support-height) + 12px); }
.home-foot { gap: .6rem; }
.player-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .55rem 0; color: #75472e; }
.player-pager > span { font-size: .8125rem; text-align: center; }
.player-pager .icon-button { width: 44px; height: 44px; flex-shrink: 0; color: #75472e; border-color: #a767324d; }
.vote-selection { color: #75472e; font-size: .8125rem; margin-bottom: .65rem; overflow-wrap: anywhere; }
.vote-player > span:nth-child(2) { overflow-wrap: anywhere; min-width: 0; }
.defect-marks { flex-wrap: wrap; }
.progress-track { gap: clamp(3px, 1vw, 8px); }
.winner-roster { margin: .75rem 0; color: #75472e; }
.winner-roster summary { padding: .5rem; cursor: pointer; font-size: .875rem; }
.winner-roster .winner-list { margin-block: .6rem; }
@media (max-width: 900px) {
  .home-content { min-height: 0; }
  .home-main { min-height: 0; }
  .workbench { margin-block: 0; }
}

/* Options choisies avant la partie : aucun réglage ne change les camps en cours. */
.setup-options { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px .65rem; align-items: center; margin-top: .8rem; min-height: 52px; padding: .5rem .75rem; border: 1px solid #b5824c66; border-radius: 8px; background: #f4dfbe; color: #593722; text-align: left; font: inherit; cursor: pointer; }
.setup-options > span { font-size: .8125rem; }
.setup-options > strong { grid-column: 1; font-size: .875rem; font-weight: 500; }
.setup-options > .icon { grid-column: 2; grid-row: 1 / 3; width: 20px; }
.setup-options:hover { background: #efd4ad; }
.setup-options:focus-visible { outline: 3px solid #985333; outline-offset: 3px; }
.settings-dialog { width: min(480px, calc(100vw - 28px)); }
.settings-sections { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.settings-sections button { min-height: 44px; border: 1px solid #b5824c80; border-radius: 8px; padding: .4rem; background: #f9e8cd; color: #593722; font: inherit; cursor: pointer; }
.settings-sections button[aria-pressed="true"] { background: #86442b; border-color: #86442b; color: #fff4e2; }
.settings-sections button:focus-visible { outline: 3px solid #985333; outline-offset: 3px; }
.settings-panels { min-height: 236px; }
.difficulty-panel { display: grid; gap: .75rem; }
.settings-panel[hidden] { display: none !important; }
.incompris-settings { border: 0; padding: 0; min-width: 0; margin: 0 0 1rem; }
.incompris-settings legend { font-weight: 500; color: #593722; margin-bottom: .4rem; }
.incompris-controls { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.incompris-controls .stepper { gap: .6rem; }
.incompris-controls .icon-button { width: 44px; height: 44px; color: #75472e; background: #efd6b2; border-color: #b5824c80; }
.incompris-controls output { min-width: 1.5rem; text-align: center; font-size: 1.6rem; font-weight: 500; color: #593722; }
.count-auto { min-height: 44px; border: 1px solid #b5824c80; border-radius: 8px; padding: .45rem .65rem; background: #f9e8cd; color: #593722; font: inherit; font-size: .8125rem; cursor: pointer; }
.count-auto[aria-pressed="true"] { background: #86442b; border-color: #86442b; color: #fff4e2; }
.incompris-settings > p { color: #79573e; font-size: .8125rem; line-height: 1.4; margin-top: .4rem; }
.settings-done { margin-top: 1rem; }
.incompris-controls button:focus-visible { outline: 3px solid #985333; outline-offset: 3px; }
.time-settings { min-width: 0; border: 0; padding: 0; margin: 0 0 1.2rem; }
.time-settings legend { font-weight: 500; margin-bottom: .6rem; color: #593722; }
.time-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.time-options label { position: relative; cursor: pointer; }
.time-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.time-options span { display: flex; align-items: center; justify-content: center; min-height: 48px; height: 100%; padding: .45rem .25rem; border: 1px solid #b5824c80; border-radius: 8px; background: #f9e8cd; color: #593722; font-size: .9375rem; text-align: center; line-height: 1.2; }
.time-options input:checked + span { color: #fff4e2; background: #86442b; border-color: #86442b; box-shadow: inset 0 -3px 0 #65321f; }
.time-options input:focus-visible + span { outline: 3px solid #985333; outline-offset: 3px; }
.settings-dialog .time-settings > p { font-size: .8125rem; color: #79573e; margin-top: .55rem; }
.help-setting { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem; background: #efd6b2; border: 1px solid #b5824c66; border-radius: 8px; cursor: pointer; }
.help-setting > input { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; accent-color: #86442b; }
.help-setting strong { display: block; font-size: 1rem; font-weight: 500; color: #593722; }
.help-setting small { display: block; margin-top: .3rem; color: #79573e; font-size: .8125rem; line-height: 1.45; }
.settings-dialog .settings-note { color: #79573e; font-size: .8125rem; line-height: 1.5; margin: .9rem 0 1.2rem; }
.cipher-help { margin-top: .9rem; padding-top: .65rem; border-top: 1px solid #b5824c4d; }
.cipher-help > p { font-size: .75rem; color: #79573e; text-align: center; margin-bottom: .4rem; }
.cipher-help ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; list-style: none; padding: 0; margin: 0; }
.cipher-help li { display: flex; align-items: center; justify-content: center; gap: .22rem; min-height: 38px; padding: .25rem .1rem; background: #efcf9e80; border: 1px solid #b5824c66; border-radius: 6px; color: #4b2c1c; font-size: 1rem; }
.cipher-help strong { font-weight: 500; }
.hint-equals { font-size: .75rem; color: #79573e; }
.untimed-choice { display: flex; align-items: center; justify-content: center; gap: .4rem; color: #79573e; font-size: .8125rem; }
.untimed-choice .icon { width: 16px; height: 16px; }
.conversion-notice { margin-top: .8rem; text-align: left; }
@media (max-width: 600px) {
  .setup-options { margin-top: .6rem; min-height: 46px; padding-block: .4rem; }
  .cipher-help { margin-top: .65rem; padding-top: .5rem; }
  #app[data-phase="answer"] .question-instruction { margin-top: .6rem; }
  #app[data-phase="expulsion"] .seal-large { width: 60px; height: 60px; margin-bottom: .7rem; }
  #app[data-phase="expulsion"] .expulsion-name { font-size: 2rem !important; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .setup-options { margin-top: .4rem; }
  #app[data-phase="answer"] .question-panel { padding: .85rem 1rem; }
  #app[data-phase="answer"] .question-theme { margin-block: .55rem .75rem; }
  #app[data-phase="answer"] .question-theme h1 { font-size: 1.85rem; }
  #app[data-phase="answer"] .question-theme.strange h1 { font-size: 1.5rem; }
  #app[data-phase="answer"] .answer-list { gap: .65rem; }
  #app[data-phase="answer"] .answer-btn { min-height: 62px; padding-block: .6rem; }
  #app[data-phase="answer"] .player-strip { margin-bottom: .55rem; }
  #app[data-phase="answer"] .panel-footer { margin-top: .4rem; }
  .cipher-help li { min-height: 34px; font-size: .9375rem; }
  #app[data-phase="expulsion"] .seal-large { display: none; }
  #app[data-phase="expulsion"] .conversion-notice { font-size: .8125rem; padding: .65rem; }
}
@media (max-width: 600px) and (max-height: 600px) {
  #app[data-screen="setup"] .panel > .subtext { display: none; }
  #app[data-phase="answer"] .question-panel { padding: .65rem .8rem; }
  #app[data-phase="answer"] .question-theme { margin-block: .35rem .5rem; }
  #app[data-phase="answer"] .question-theme h1 { font-size: 1.6rem; }
  #app[data-phase="answer"] .question-theme.strange h1 { font-size: 1.2rem; }
  #app[data-phase="answer"] .answer-btn { min-height: 54px; }
  #app[data-phase="answer"] .question-instruction { font-size: .75rem; margin-top: .45rem; }
  .cipher-help { margin-top: .4rem; padding-top: .35rem; }
  .settings-dialog .dialog-body, .settings-dialog .dialog-head { padding: 1rem; }
  .time-settings { margin-bottom: .8rem; }
  .settings-dialog .settings-note { margin-block: .7rem .9rem; }
  #app[data-phase="expulsion"] .expulsion-name { font-size: 1.65rem !important; }
}
@media (max-width: 600px) {
  .home { height: var(--play-height); }
  .home .header { padding-top: calc(.5rem + env(safe-area-inset-top)); padding-bottom: .5rem; min-height: 68px; }
  .home-content { padding-top: .3rem; }
  .home-content .eyebrow { margin-bottom: .5rem; }
  .home-actions { padding-top: 16px; margin-top: auto; gap: .7rem; }
  .home-meta { margin-top: .85rem; gap: .8rem; }
  .home-foot { padding-top: .4rem; padding-bottom: .4rem; flex-wrap: wrap; }
  .home-foot > span:last-child { display: block; }
  .home-foot .footer-signature { display: none; }
  .home-foot .privacy-link { font-size: .8125rem; }
  .shell .header { padding-top: calc(.55rem + env(safe-area-inset-top)); padding-bottom: .55rem; min-height: 64px; }
  .workbench { padding: .3rem 1rem .65rem; }
  .step-label { margin-bottom: .6rem; }
  .panel { padding: 1.2rem 1.15rem; }
  .panel-footer { margin-top: .65rem; }
  #app[data-screen="setup"] .panel h1 { font-size: 1.8rem; margin: .35rem 0 .6rem; }
  #app[data-screen="setup"] .setup-count { margin: .75rem 0; padding-block: .65rem; }
  #app[data-screen="setup"] .actions { margin-top: 1rem; }
  #app[data-screen="setup"] .name-grid { gap: .55rem; grid-template-columns: 1fr 1fr; }
  #app[data-screen="setup"] .name-field { gap: .35rem; padding: .15rem .5rem; }
  #app[data-screen="setup"] .name-field input { padding-block: .4rem; }
  #app[data-screen="setup"] .small { margin-top: .65rem; }
  #setup-form > .small { margin-top: .65rem !important; }
  .vote-list { grid-template-columns: 1fr 1fr; }
  .vote-player { min-height: 54px; }
  .vote-player .avatar { display: none; }
  .header-tools .icon-button { width: 44px; height: 44px; }
  .winner-list { gap: .35rem; }
  .winner-chip { padding: .2rem .4rem; font-size: .8125rem; }
  .winner-chip .avatar { width: 24px; height: 24px; }
  #app[data-phase="discussion"] .panel > .seal { display: none; }
  #app[data-phase="discussion"] .discussion-rules { margin-block: 1rem; }
  .pass-panel { padding-block: 1.4rem; }
  .pass-panel .seal-large { width: 68px; height: 68px; margin-bottom: .85rem; }
  .progress-track { margin-bottom: 1rem; }
  .question-theme { margin: .8rem 0 1rem; }
  .question-instruction { margin-top: .85rem; }
  .player-strip { margin-bottom: .85rem; }
  .answer-btn { min-height: 76px; padding-block: .95rem; }
  .actions { margin-top: 1.15rem; }
}
@media (max-width: 600px) and (max-height: 740px) {
  #app[data-phase="round-result"] .panel > .seal { display: none; }
  .winner-panel > .seal { width: 52px; height: 52px; margin-bottom: .6rem; }
  #app[data-screen="setup"] .panel h1 { font-size: 1.65rem; }
  #app[data-screen="setup"] .panel h1 br { display: none; }
  .home h1 { font-size: clamp(4rem, 19vw, 5rem); }
  .home-divider { margin: .55rem 0 .4rem; }
  .home-description { font-size: .9375rem; padding: .45rem .7rem; }
  .home-content .eyebrow { font-size: .7rem; }
  .home-actions .btn { min-height: 48px; padding-block: .7rem; }
  .home-meta { margin-top: .6rem; }
  .panel { padding: .9rem 1rem; }
  .panel h1 { font-size: 1.9rem; margin-block: .4rem .65rem; }
  .panel .subtext { line-height: 1.45; }
  .panel-footer { font-size: .8125rem; }
  #app[data-screen="setup"] .setup-count { margin-block: .5rem; padding-block: .45rem; }
  #app[data-screen="setup"] .name-field input { padding-block: .3rem; }
  #app[data-screen="setup"] .name-grid { gap: .4rem; }
  #app[data-screen="setup"] .actions { margin-top: .75rem; }
  .result-stats { margin-block: .85rem; }
  .stat { padding-block: .65rem; }
  .vote-list { margin-block: .85rem; }
  .vote-player { min-height: 52px; }
}

@media (max-width: 600px) and (max-height: 680px) {
  .shell .header { min-height: 54px; padding-block: .3rem; }
  .workbench { padding: .1rem .75rem .5rem; }
  .step-label { margin-bottom: .4rem; }
  .panel { padding: .7rem .85rem; }
  #app[data-screen="setup"] .panel > .eyebrow { font-size: .6rem; letter-spacing: .12em; }
  #app[data-screen="setup"] .panel h1 { font-size: 1.55rem; margin-block: .25rem .4rem; }
  #app[data-screen="setup"] .panel h1 br { display: none; }
  #app[data-screen="setup"] .subtext { font-size: .8125rem; line-height: 1.4; }
  #app[data-screen="setup"] .setup-count { margin-block: .4rem; padding-block: .25rem; font-size: .875rem; }
  #app[data-screen="setup"] .name-field { min-height: 44px; }
  #app[data-screen="setup"] .name-field input { min-height: 40px; padding-block: 0; }
  #app[data-screen="setup"] .actions { margin-top: .5rem; }
  #setup-form > .small { font-size: .75rem; margin-top: .4rem !important; }
  .player-pager { margin-block: .25rem; }
  .panel-footer { margin-top: .4rem; font-size: .75rem; }
  .btn { min-height: 48px; padding: .65rem .75rem; }
  .pass-panel { padding-block: 1rem; }
  .answer-btn { min-height: 62px; padding-block: .65rem; }
  .question-theme { margin-block: .5rem .65rem; }
  .question-instruction { font-size: .8125rem; }
  .vote-list { margin-block: .5rem; gap: .45rem; }
  .vote-player { min-height: 48px; padding-block: .5rem; }
  .vote-selection { margin-bottom: .4rem; }
  .winner-panel > .seal { display: none; }
  .winner-panel .winner-title { font-size: 1.7rem !important; }
  .winner-title br { display: none; }
  .winner-panel .subtext { font-size: .875rem; line-height: 1.45; }
  .winner-panel .actions { margin-top: .65rem; gap: .5rem; }
  .winner-panel .btn { font-size: .8125rem; }
  .winner-roster { margin-block: .35rem; }
  #app[data-phase="discussion"] .panel h1 { font-size: 1.35rem; margin-block: .3rem; }
  #app[data-phase="discussion"] .panel h1 br { display: none; }
  #app[data-phase="discussion"] .subtext { font-size: .8125rem; line-height: 1.4; }
  .timer { margin-block: .35rem; }
  .timer-digits { font-size: 2.3rem; }
  .timer .icon-button { width: 44px; height: 44px; }
  .timer-note { font-size: .75rem; line-height: 1.4; }
  #app[data-phase="discussion"] .discussion-rules { margin-block: .65rem; gap: .35rem; }
  .discussion-rules p { font-size: .8125rem; line-height: 1.4; }
  #app[data-phase="discussion"] .actions { margin-top: .5rem; }
  #app[data-phase="round-result"] .panel h1 { font-size: 1.55rem; }
  #app[data-phase="round-result"] .panel h1 br { display: none; }
  .result-stats { margin-block: .5rem; }
  .stat { padding-block: .35rem; }
  .stat strong { font-size: 2rem; }
  .defect-marks { margin-block: .6rem; gap: 4px; }
  .defect-marks span { width: 12px; height: 12px; }
  #app[data-phase="round-result"] .notice { padding: .6rem; font-size: .8125rem; }
  .history { margin-top: .5rem; }
}
@media (max-width: 600px) and (max-height: 600px) {
  #app[data-screen="setup"] .panel h1 { font-size: 1.35rem; }
  #app[data-screen="setup"] .setup-count { margin-block: .2rem; }
  #app[data-screen="setup"] .player-pager { margin-block: 0; }
  #app[data-screen="setup"] .panel-footer { line-height: 1.3; }
  #app[data-screen="setup"] .workbench { padding-bottom: .25rem; }
  #app[data-phase="vote"] .panel h1 { font-size: 1.55rem; }
  #app[data-phase="vote"] .panel > .eyebrow { font-size: .625rem; }
  #app[data-phase="vote"] .subtext { font-size: .8125rem; line-height: 1.4; }
  #app[data-phase="vote"] .panel > .center { margin-top: .3rem !important; }
  #app[data-phase="vote"] .panel-footer { line-height: 1.3; }
  #app[data-phase="vote"] .player-pager { margin-block: 0; }
}
@media (max-height: 740px) {
  .settings-dialog .dialog-head { padding: .5rem .9rem; }
  .settings-dialog .dialog-head h2 { font-size: 1.4rem; }
  .settings-dialog .dialog-body { padding: .8rem .9rem; }
  .settings-sections { margin-bottom: .6rem; }
  .settings-sections button { font-size: .9375rem; }
  .settings-panels { min-height: 190px; }
  .settings-dialog .incompris-settings { margin-bottom: .5rem; }
  .settings-dialog .incompris-settings legend { line-height: 1.25; margin-bottom: 0; }
  .settings-dialog .incompris-settings > p { font-size: .75rem; line-height: 1.35; margin-top: .15rem; }
  .settings-dialog .time-settings { margin-bottom: .5rem; }
  .settings-dialog .time-settings legend { line-height: 1.25; margin-bottom: .25rem; }
  .settings-dialog .time-options span { min-height: 44px; padding: .35rem .2rem; font-size: .8125rem; }
  .settings-dialog .time-settings > p { display: none; }
  .settings-dialog .help-setting { padding: .5rem; gap: .6rem; }
  .settings-dialog .help-setting strong { font-size: .9375rem; line-height: 1.35; }
  .settings-dialog .help-setting small { margin-top: .15rem; font-size: .75rem; line-height: 1.35; }
  .settings-dialog .settings-done { margin-top: .5rem; }
}
@media (min-width: 600px) and (max-height: 500px) {
  .settings-dialog { width: min(740px, calc(100vw - 28px)); }
  .settings-dialog .settings-panels { min-height: 100px; }
  .settings-dialog .settings-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; align-items: start; }
  .settings-dialog .incompris-settings, .settings-dialog .time-settings { margin: 0; align-self: start; }
  .settings-dialog .settings-done { margin-top: .5rem; }
}