/* Repère Illustrator v10 : 1170 × 1705. 1 em = coefficient de rendu.
   Les textes SVG gardent leur ligne de base exacte sans polices système. */
html, body { width:100%; height:100%; margin:0; min-height:0; padding:0; overflow:hidden; }
body { display:block; background:var(--surround-color,#185b80); }
body::before, body::after, main::before, main::after { content:none !important; }
[hidden] { display:none !important; }
#safeArea { position:fixed; visibility:hidden; pointer-events:none; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#gameCanvas { position:fixed; width:1170em; min-width:0; min-height:0; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:translateX(-50%); zoom:1; overflow:hidden; isolation:isolate; font-size:.3px; }
.game-backdrop { position:absolute; left:0; width:100%; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; }
.backdrop-z0 { z-index:-2; top:0; height:2250em; background-image:url('assets/v10/svg/z0-fond1.svg'); }
.backdrop-z1 { z-index:-1; bottom:0; height:727em; background-image:url('assets/v10/svg/z1-fond1.svg'); }
[data-background='2'] .backdrop-z0 { height:100%; background-image:none; background-color:var(--game-color,#31769a); }
[data-background='2'] .backdrop-z1 { height:1260em; background-image:url('assets/v10/svg/z1-fond2.svg'); }
#fixedUI { position:absolute; left:0; top:var(--ui-top,200em); width:1170em; height:1705em; font-size:1em; }
.fixed-art, .ui-text { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.fixed-art { user-select:none; }
.ui-text { overflow:visible; fill:white; font-family:'WordZeu Typewriter',monospace; }
.ui-text .name-text { font-size:40.0561px; font-weight:700; }
.ui-text .score-text { font-size:84.3286px; font-weight:700; letter-spacing:-.06em; }
.ui-text .bag-text { font-size:33.7315px; font-weight:700; }
.ui-text #status { font:48px 'WordZeu Typewriter',monospace; letter-spacing:.02em; fill:#fff; }
.profile-hit, .cpu-hit { position:absolute; top:15em; width:100em; height:100em; margin:0; padding:0; border:0; border-radius:50%; background:transparent; font-size:1em; }
.profile-hit { left:103em; } .cpu-hit { left:969em; }
#playSurface { position:absolute; inset:0; width:100%; height:100%; touch-action:none; pointer-events:none; font-size:1em; }
#board { position:absolute; top:188em; left:63em; width:1044em; height:1044em; max-width:none; min-height:0; margin:0; padding:0; border:0; border-radius:0; aspect-ratio:auto; background:none; box-shadow:none; display:grid; grid-template-columns:repeat(15,var(--board-tile-size)); grid-template-rows:repeat(15,var(--board-tile-size)); gap:var(--board-grid-gap); font-size:1em; pointer-events:auto; }
#board .cell { width:var(--board-tile-size); height:var(--board-tile-size); min-width:0; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#board .cell::after, #board .cell small { display:none; }
#board .board-tile { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#fixedUI .rack-line { position:absolute; top:1300em; left:200em; width:770em; height:110em; display:block; font-size:1em; pointer-events:auto; }
#rack { position:relative; display:flex; align-items:start; justify-content:start; width:var(--rack-width); height:var(--rack-tile-size); min-height:0; max-width:none; padding:0; margin:0; gap:0; border:0; border-radius:0; aspect-ratio:auto; background:none; box-shadow:none; font-size:1em; }
#rack .rack-slot { display:block; flex:0 0 var(--rack-tile-size); width:var(--rack-tile-size); height:var(--rack-tile-size); transform:none; }
#rack .tile { width:100%; height:100%; padding:0; background:transparent; box-shadow:none; }
#rack .tile.selected, #rack .tile.exchange-selected { outline:3px solid #fff; outline-offset:-3px; }
#fixedUI .actions { position:absolute; top:1465em; left:265em; width:640em; height:120em; gap:10em; margin:0; padding:0; display:flex; font-size:1em; }
#fixedUI .actions button { position:relative; inset:auto; order:initial; flex:0 0 120em; width:120em; height:120em; margin:0; padding:0; border:0; border-radius:50%; font-size:1em; color:transparent; background-color:transparent; background-size:100% 100%; }
#fixedUI #pass { background-image:url('assets/v10/svg/btn-passer.svg') !important; }
#fixedUI #exchange { background-image:url('assets/v10/svg/btn-echanger.svg') !important; }
#fixedUI #validate { background-image:url('assets/v10/svg/btn-valider.svg') !important; }
#fixedUI #shuffleRack { display:block; background-image:url('assets/v10/svg/btn-melanger.svg') !important; }
#fixedUI #cancel { background-image:url('assets/v10/svg/btn-effacer.svg') !important; }

#fixedUI .turn-marker { top:140em; width:30em; height:26em; }
#fixedUI .turn-marker[data-turn='you'] { left:140em; }
#fixedUI .turn-marker[data-turn='cpu'] { left:1000em; }
.v10-toolbar { position:absolute; inset:0 0 auto; height:128em; font-size:1em; }
.v10-toolbar button { position:absolute; top:48em; width:80em; height:80em; margin:0; padding:0; border:0; background:transparent; color:white; font-size:1em; }
#fullscreen { right:48em; } #fullscreen img { width:100%; height:100%; }
#preferencesButton { left:48em; font-size:60em; top:.8em; width:1.3333em; height:1.3333em; left:.8em; line-height:1; }
#historyDrawer { position:absolute; z-index:50; left:0; bottom:-541.667em; width:1170em; height:606.667em; font-size:1em; background:url('assets/v10/svg/onglet-historique.svg') 0 0 / 100% 100% no-repeat; transform:translateY(0); transition:transform .25s ease; }
#historyDrawer.is-open { transform:translateY(-541.667em); }
#historyToggle { position:absolute; top:0; left:0; width:325em; height:65em; border:0; margin:0; padding:0; background:transparent; color:white; font:700 1em 'WordZeu Typewriter',monospace; }
#historyToggle .tab-label { font-size:30em; }
#historyToggle .tab-arrow { display:inline-block; margin-left:.4em; }
#historyDrawer.is-open .tab-arrow { transform:rotate(180deg); }
#cpuWordHistory { position:absolute; inset:80em 24em 24em; width:auto; max-width:none; height:auto; max-height:none; margin:0; padding:0; border:0; background:transparent; box-shadow:none; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; color:white; font:1em 'WordZeu Typewriter',monospace; }
#cpuWordHistoryContent p { margin:0 0 .35em; font-size:30em; line-height:1.35; overflow-wrap:anywhere; }
#cpuWordHistoryContent { padding:0; }
#preferencesDialog { width:min(420px,calc(100vw - 32px)); }
#preferencesDialog label { display:block; margin-bottom:8px; }
#backgroundTheme { width:100%; margin-bottom:16px; }
#palette { margin:0 0 16px; border:1px solid #ffffff55; border-radius:8px; }
#colorChoices { display:flex; flex-wrap:wrap; gap:10px; padding:8px 0; }
#colorChoices button { width:36px; height:36px; border:2px solid transparent; border-radius:50%; padding:0; }
#colorChoices button[aria-pressed='true'] { border-color:white; box-shadow:0 0 0 2px #142c3d; }
.preference-actions { display:grid; gap:10px; margin:12px 0 20px; }
dialog { position:fixed; max-height:calc(100dvh - 32px); overflow:auto; font-size:16px; }
button:focus-visible { outline:3px solid #ffe39d; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { #historyDrawer { transition:none; } }
/* Le libellé HISTORIQUE est déjà dessiné dans le SVG fourni. */
#historyToggle .tab-arrow { position:absolute; right:.35em; top:.25em; margin:0; }
/* Le fond fourni est translucide : un aplat sous le corps du panneau évite
   que les messages et boutons du jeu traversent les lignes de l'historique. */
#historyDrawer::before { content:''; position:absolute; z-index:-1; top:65em; right:0; bottom:0; left:0; background:#173b39; }
#cpuWordHistoryContent, #cpuWordHistoryContent p { text-align:left; }

/* Un même rythme doux signale le dernier mot et l'échange en cours. */
#board .board-tile.word-pulse { z-index:4; }
#board .word-pulse .tile-art,
#fixedUI #exchange.is-selecting {
  animation:attention-pulse 1.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes attention-pulse {
  0%,100% { transform:scale(1); filter:brightness(1); }
  50% { transform:scale(1.075); filter:brightness(1.2); }
}
@media(prefers-reduced-motion:reduce) {
  #board .word-pulse .tile-art,
  #fixedUI #exchange.is-selecting { animation:none; filter:brightness(1.2); }
}

#portraitNotice {
  position:fixed; inset:0; z-index:2147483647; display:grid;
  place-content:center; padding:32px; margin:0;
  background:var(--surround-color,#185b80); color:white;
  text-align:center; font:20px/1.5 'WordZeu Typewriter',monospace;
}
body.phone-landscape > :not(#portraitNotice) { visibility:hidden; }
body.phone-landscape dialog::backdrop { background:transparent; }