:root {
       --gold: #e7bd68;
       --gold-light: #fff0b5;
       --ink: #091426;
       --ink-2: #101f38;
       --sky: #cde8ff;
       --cloud: #eef8ff;
       --left-panel: 220px;
       --right-panel: 238px;
       --player-color: #63d9ff;
       --panel-border: rgba(231, 189, 104, .92);
       --text: #f7fbff;
       --muted: #c9d9ea;
   }

   * {
       box-sizing: border-box
   }

   html,
   body {
       margin: 0;
       width: 100%;
       height: 100%;
       overflow: hidden
   }

   body {
       font-family: Inter, Segoe UI, Arial, sans-serif;
       color: var(--text);
       user-select: none;
       /* Même ciel que la règle finale de index.html (#v74-3d-contrast-css),
          visible pendant le chargement avant qu'elle ne s'applique. */
       background: linear-gradient(180deg, #82c8df 0%, #a9d8e8 54%, #c9e5ee 100%) fixed;
   }

   button,
   input,
   select {
       font: inherit
   }

   button {
       cursor: pointer
   }

   button:disabled {
       cursor: not-allowed
   }

   .hidden {
       display: none !important
   }

   .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
   }

   /* ---------- Shared controls ---------- */
   .primary-btn,
   .secondary-btn,
   .small-btn {
       border: 1px solid rgba(255, 235, 173, .62);
       color: #fff8dd;
       font-weight: 900;
       text-transform: uppercase;
       letter-spacing: .045em;
       background: linear-gradient(180deg, #3f2d19, #1f160d);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 #5b3714, 0 8px 16px rgba(0, 0, 0, .28);
       transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
   }

   .primary-btn:hover:not(:disabled),
   .secondary-btn:hover:not(:disabled),
   .small-btn:hover:not(:disabled) {
       transform: translateY(-1px);
       filter: brightness(1.08)
   }

   .primary-btn:active:not(:disabled),
   .secondary-btn:active:not(:disabled),
   .small-btn:active:not(:disabled) {
       transform: translateY(2px);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #5b3714
   }

   .primary-btn {
       padding: 13px 22px;
       border-radius: 14px;
       font-size: 18px
   }

   .secondary-btn {
       padding: 11px 17px;
       border-radius: 12px;
       font-size: 14px
   }

   .small-btn {
       padding: 8px 10px;
       border-radius: 10px;
       font-size: 11px
   }

   button:disabled {
       opacity: .36;
       filter: saturate(.45)
   }

   /* ---------- Setup ---------- */
   #setupScreen {
       height: 100dvh;
       display: grid;
       place-items: center;
       padding: 20px
   }

   .setup-card {
       width: min(820px, 94vw);
       padding: 34px 36px 30px;
       position: relative;
       overflow: hidden;
       border: 2px solid #8b632f;
       border-radius: 28px;
       background:
           radial-gradient(circle at 50% 0%, rgba(126, 217, 255, .22), transparent 36%),
           linear-gradient(180deg, rgba(23, 49, 82, .96), rgba(7, 17, 32, .98));
       box-shadow: inset 0 0 0 2px rgba(247, 212, 129, .68), 0 24px 60px rgba(15, 45, 80, .42);
   }

   .setup-card::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .08) 42%, transparent 58%)
   }

   .logo {
       margin: 0;
       text-align: center;
       font-family: Georgia, serif;
       font-size: clamp(56px, 8vw, 94px);
       letter-spacing: .11em;
       color: #fff0b2;
       text-shadow: 0 4px 0 #754515, 0 0 28px rgba(255, 232, 150, .58)
   }

   .subtitle {
       margin: 0 0 24px;
       text-align: center;
       text-transform: uppercase;
       letter-spacing: .35em;
       color: #d8efff;
       font-weight: 800
   }

   .intro {
       display: none
   }

   .setup-row {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 14px;
       margin: 8px 0 18px
   }

   .setup-row label {
       font-weight: 900;
       color: #ffe7a8;
       text-transform: uppercase;
       letter-spacing: .08em
   }

   select,
   .player-name {
       border: 1px solid rgba(255, 229, 164, .42);
       border-radius: 11px;
       background: #071426;
       color: white;
       padding: 10px 13px;
       outline: none
   }

   select:focus,
   .player-name:focus {
       border-color: #8eeaff;
       box-shadow: 0 0 0 3px rgba(88, 213, 255, .16)
   }

   .players-form {
       display: grid;
       grid-template-columns: repeat(2, minmax(220px, 1fr));
       gap: 12px
   }

   .player-field {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 9px;
       border-radius: 13px;
       background: rgba(255, 255, 255, .055);
       border: 1px solid rgba(255, 255, 255, .08)
   }

   .player-dot {
       width: 23px;
       height: 23px;
       border-radius: 50%;
       border: 2px solid rgba(255, 255, 255, .72);
       box-shadow: 0 0 12px currentColor;
       flex: none
   }

   .player-name {
       width: 100%
   }

   .setup-actions {
       display: flex;
       justify-content: center;
       gap: 12px;
       margin-top: 22px
   }

   /* ---------- Game layout ---------- */
   #gameScreen {
       height: 100dvh;
       display: grid;
       grid-template-rows: 52px minmax(0, 1fr);
       gap: 0;
       padding: 4px 6px 3px
   }

   .topbar {
       min-width: 0;
       display: grid;
       grid-template-columns: minmax(210px, 280px) minmax(260px, 1fr) auto;
       align-items: center;
       gap: 12px;
       padding: 5px 12px;
       border: 1px solid #8b632f;
       border-radius: 18px 18px 14px 14px;
       background: linear-gradient(180deg, rgba(17, 35, 59, .97), rgba(7, 18, 34, .98));
       box-shadow: inset 0 0 0 1px rgba(243, 210, 132, .48), 0 7px 16px rgba(0, 0, 0, .24);
   }

   .player-summary {
       min-width: 0;
       display: flex;
       align-items: center;
       gap: 10px
   }

   .portrait {
       width: 42px;
       height: 42px;
       display: grid;
       place-items: center;
       flex: none;
       border-radius: 50%;
       font-size: 24px;
       background: #0c1a2c;
       border: 2px solid var(--player-color);
       box-shadow: 0 0 13px color-mix(in srgb, var(--player-color), transparent 26%), inset 0 0 0 2px rgba(255, 255, 255, .12)
   }

   .player-text {
       min-width: 0
   }

   .player-text h2 {
       margin: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font: 800 17px Georgia, serif;
       color: var(--player-color)
   }

   .player-text small {
       display: block;
       margin-top: 2px;
       font-size: 10px;
       font-weight: 900;
       letter-spacing: .09em;
       text-transform: uppercase;
       color: #edf7ff
   }

   .turn-summary {
       min-width: 0;
       text-align: center
   }

   .turn-summary strong {
       display: block;
       font: 800 16px Georgia, serif;
       color: #ffe9a8
   }

   #instruction {
       margin-top: 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 10px;
       color: #d5e6f5
   }

   .turn-steps {
       display: flex;
       justify-content: center;
       gap: 4px;
       margin-top: 4px
   }

   .turn-steps span {
       width: 22px;
       height: 3px;
       border-radius: 999px;
       background: rgba(255, 255, 255, .14)
   }

   .turn-steps span.active {
       background: var(--player-color);
       box-shadow: 0 0 7px var(--player-color)
   }

   .turn-steps span.done {
       background: #8ce1a0
   }

   .score-list {
       display: flex;
       justify-content: flex-end;
       gap: 6px;
       min-width: 0
   }

   .score-card {
       min-width: 76px;
       padding: 4px 7px;
       border-radius: 10px;
       background: rgba(255, 255, 255, .045);
       border: 1px solid color-mix(in srgb, var(--pcolor), transparent 52%);
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05)
   }

   .score-card.active {
       background: color-mix(in srgb, var(--pcolor), transparent 86%);
       box-shadow: 0 0 10px color-mix(in srgb, var(--pcolor), transparent 58%)
   }

   .score-card strong {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 5px;
       font-size: 9px
   }

   .score-card .name-wrap {
       max-width: 48px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #fff
   }

   .score-card .gems {
       font-size: 9px;
       letter-spacing: 1px
   }

   .score-card small {
       display: none
   }

   .game-main {
       min-width: 0;
       min-height: 0;
       display: grid;
       grid-template-columns: var(--left-panel) minmax(0, 1fr) var(--right-panel);
       gap: 6px
   }

   .banner-panel {
       min-height: 0;
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 14px 10px 12px;
       overflow: hidden;
       border: 1px solid #8b632f;
       background: linear-gradient(180deg, rgba(23, 53, 78, .96), rgba(7, 20, 35, .98));
       box-shadow: inset 0 0 0 1px rgba(235, 198, 112, .54), 0 12px 24px rgba(7, 27, 52, .32);
       clip-path: polygon(0 0, 100% 0, 100% 96%, 50% 100%, 0 96%);
   }

   .right-panel {
       background: linear-gradient(180deg, rgba(43, 35, 83, .97), rgba(12, 13, 31, .98))
   }

   .banner-panel::before {
       content: "";
       position: absolute;
       left: 8px;
       right: 8px;
       top: 7px;
       height: 5px;
       border-radius: 999px;
       background: linear-gradient(90deg, #3d2b1c, #eccb7a 15%, #715027 50%, #eccb7a 85%, #3d2b1c);
       box-shadow: 0 2px 4px rgba(0, 0, 0, .45)
   }

   .banner-panel::after {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       opacity: .17;
       background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19px), linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, .08) 50%, transparent 58%)
   }

   .panel-title {
       position: relative;
       z-index: 1;
       margin: 10px 0 8px;
       text-align: center;
       font: 800 16px Georgia, serif;
       letter-spacing: .17em;
       color: #f6e2ad;
       text-shadow: 0 2px 0 #4a2e10
   }

   .left-panel.choice-focus {
       box-shadow: inset 0 0 0 1px rgba(255, 242, 184, .64), 0 0 0 2px rgba(255, 226, 115, .18), 0 0 25px rgba(255, 224, 109, .28), 0 12px 24px rgba(7, 27, 52, .32)
   }

   .left-panel.choice-focus .panel-title {
       color: #fff5c8;
       text-shadow: 0 0 12px rgba(255, 239, 165, .62), 0 2px 0 #4a2e10
   }

   .left-panel.choice-focus .panel-title::after {
       content: "À POSER";
       display: block;
       margin-top: 3px;
       font: 900 8px Inter, Arial, sans-serif;
       letter-spacing: .18em;
       color: #ffdf74
   }

   /* ---------- Island selector ---------- */
   .island-selector {
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       grid-auto-rows: minmax(58px, 1fr);
       gap: 6px;
       min-height: 0;
       align-content: start;
       flex: 1
   }

   .island-choice {
       min-width: 0;
       display: grid;
       place-items: center;
       padding: 4px;
       border: 1px solid rgba(255, 255, 255, .10);
       border-radius: 13px;
       background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 10px rgba(0, 0, 0, .18);
       transition: transform .14s ease, filter .14s ease, box-shadow .14s ease
   }

   .island-choice:hover:not(:disabled) {
       transform: translateY(-2px);
       filter: brightness(1.12)
   }

   .island-choice.choice-ready {
       animation: islandReady 1.2s ease-in-out infinite alternate
   }

   .island-choice.active {
       background: radial-gradient(circle, color-mix(in srgb, var(--player-color), transparent 70%), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 15px var(--player-color), 0 6px 12px rgba(0, 0, 0, .2);
       transform: translateY(-1px) scale(1.02)
   }

   .island-choice:disabled {
       opacity: .28
   }

   .island-choice {
       position: relative;
   }

   .island-choice-limit {
       position: absolute;
       top: 3px;
       right: 5px;
       font-size: 9px;
       font-weight: 700;
       letter-spacing: .02em;
       color: rgba(255, 255, 255, .55);
   }

   .island-choice-limit[data-maxed="true"] {
       color: #ff8f78;
   }

   .island-choice.choice-maxed {
       filter: saturate(.5);
   }

   .island-mini {
       display: grid;
       grid-template-columns: repeat(var(--mini-cols), 17px);
       grid-template-rows: repeat(var(--mini-rows), 17px);
       gap: 0;
       filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .46))
   }

   .island-mini i {
       display: block;
       background: linear-gradient(180deg, #b3dd78 0%, #8dbf5d 42%, #699649 62%, #4f743b 100%);
       box-shadow: inset 0 1px 0 rgba(250, 255, 232, .58), inset 0 -4px 0 rgba(50, 79, 41, .62), 0 0 0 1px rgba(229, 246, 206, .62)
   }

   .island-choice-preview {
       position: relative;
       display: inline-block;
   }

   .island-choice-flip {
       position: absolute;
       top: -6px;
       right: -8px;
       width: 15px;
       height: 15px;
       display: grid;
       place-items: center;
       border-radius: 50%;
       background: linear-gradient(180deg, #2a3542, #10161d);
       border: 1px solid rgba(230, 183, 75, .75);
       color: #f4d28e;
       font-size: 9px;
       line-height: 1;
       box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
   }

   .rotation-tools {
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 6px;
       margin-top: 7px
   }

   .rotation-tools .small-btn {
       font-size: 16px;
       padding: 7px
   }

   .panel-footer {
       position: relative;
       z-index: 1;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 5px;
       margin-top: 8px
   }

   .panel-footer .small-btn {
       font-size: 8px;
       padding: 7px 4px
   }

   /* ---------- Board ---------- */
   .board-wrap {
       min-width: 0;
       min-height: 0;
       position: relative;
       display: grid;
       align-items: start;
       justify-items: center;
       overflow: visible;
       perspective: 1900px
   }

   .board-wrap::before {
       content: "";
       position: absolute;
       inset: 5% 2%;
       pointer-events: none;
       background: radial-gradient(ellipse at center, rgba(255, 255, 255, .33), transparent 66%);
       filter: blur(24px)
   }

   #board {
       width: min(calc(100dvh - 66px), calc(100vw - var(--left-panel) - var(--right-panel) - 24px), 1160px);
       max-width: none;
       aspect-ratio: 1;
       position: relative;
       z-index: 2;
       display: grid;
       /* --board-n suit GRID (11 ou 13), posé par setBoardSize(). */
       grid-template-columns: repeat(var(--board-n, 11), 1fr);
       grid-template-rows: repeat(var(--board-n, 11), 1fr);
       gap: 0;
       padding: 8px;
       border: 5px solid #8fa9c1;
       border-radius: 13% 10% 14% 10%/10% 13% 10% 12%;
       background:
           radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, .62) 0 7%, transparent 18%),
           radial-gradient(ellipse at 72% 25%, rgba(255, 255, 255, .38) 0 8%, transparent 20%),
           radial-gradient(ellipse at 48% 76%, rgba(255, 255, 255, .24) 0 10%, transparent 25%),
           linear-gradient(180deg, #cfe8f8 0%, #b2d2ea 52%, #91b7d6 100%);
       box-shadow: 0 8px 0 #6f879e, 0 15px 0 #4c6178, 0 27px 26px rgba(30, 62, 100, .28), inset 0 0 22px rgba(255, 255, 255, .22);
       transform: translateY(-1px) perspective(1900px) rotateX(2.5deg);
       transform-origin: center top;
   }

   #board::before {
       content: "";
       position: absolute;
       left: 3%;
       right: 3%;
       bottom: -25px;
       height: 30px;
       z-index: -1;
       background: linear-gradient(180deg, #7890a9, #52677d);
       clip-path: polygon(0 0, 100% 0, 91% 100%, 76% 43%, 62% 100%, 47% 48%, 32% 100%, 16% 42%);
       filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .16))
   }

   #board::after {
       content: "";
       position: absolute;
       left: 6%;
       right: 6%;
       bottom: -38px;
       height: 34px;
       z-index: -2;
       background: radial-gradient(ellipse, rgba(27, 57, 94, .24), transparent 68%);
       filter: blur(7px)
   }

   .cell {
       position: relative;
       min-width: 0;
       min-height: 0;
       padding: 0;
       border: 0;
       border-radius: 0;
       background: transparent;
       overflow: visible;
       transition: filter .1s ease, box-shadow .12s ease
   }

   .cell.void {
       background: linear-gradient(145deg, rgba(255, 255, 255, .23), rgba(111, 153, 190, .12));
       box-shadow: inset 0 0 0 1px rgba(54, 84, 113, .30), inset 1px 1px 0 rgba(255, 255, 255, .24)
   }

   .cell.void.cloud-b {
       background: linear-gradient(145deg, rgba(255, 255, 255, .15), rgba(91, 135, 174, .15));
       box-shadow: inset 0 0 0 1px rgba(49, 78, 106, .34), inset 1px 1px 0 rgba(255, 255, 255, .18)
   }

   .cell.land {
       background: linear-gradient(180deg, #add774 0%, #82b655 40%, #649045 66%, #4b7138 100%);
       box-shadow: inset 0 2px 0 rgba(249, 255, 229, .40), inset 0 -7px 0 rgba(46, 73, 38, .80)
   }

   .cell.land.island-outline-top {
       border-top: 2px solid color-mix(in srgb, var(--island-owner), white 60%)
   }

   .cell.land.island-outline-left {
       border-left: 2px solid color-mix(in srgb, var(--island-owner), white 52%)
   }

   .cell.land.island-outline-right {
       border-right: 2px solid color-mix(in srgb, var(--island-owner), #203122 58%)
   }

   .cell.land.island-outline-bottom {
       box-shadow: inset 0 2px 0 rgba(249, 255, 229, .40), inset 0 -9px 0 rgba(40, 63, 34, .94), 0 2px 0 color-mix(in srgb, var(--island-owner), #15251b 68%)
   }

   .cell:hover {
       filter: brightness(1.08);
       z-index: 8
   }

   .cell.village {
       box-shadow: inset 0 0 0 3px var(--village-color), 0 0 14px color-mix(in srgb, var(--village-color), transparent 34%)
   }

   .village-icon,
   .artifact,
   .character,
   .sanctuary-ring {
       position: absolute;
       inset: 0;
       display: grid;
       place-items: center;
       pointer-events: none
   }

   .village-icon {
       font-size: clamp(17px, 2.4vw, 30px);
       filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .46))
   }

   .sanctuary {
       background: radial-gradient(circle, #fff4bf 0 15%, #c79837 16% 35%, #d5e7f7 36%) !important
   }

   .sanctuary-ring::before {
       content: "";
       width: 50%;
       height: 50%;
       border-radius: 50%;
       border: 3px solid #ffe893;
       box-shadow: 0 0 14px #fff1a5, inset 0 0 8px #fff6d2
   }

   .artifact {
       font-size: clamp(20px, 2.8vw, 35px);
       filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px rgba(194, 154, 255, .92)) drop-shadow(0 6px 7px rgba(0, 0, 0, .30));
       animation: artifactFloat 1s ease-in-out infinite alternate
   }

   .character {
       font-size: clamp(22px, 2.8vw, 35px);
       z-index: 7;
       transform: perspective(900px) rotateX(-7deg);
       transform-origin: center 78%;
       filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .28)) drop-shadow(0 9px 10px rgba(0, 0, 0, .62))
   }

   .character::before {
       content: "";
       position: absolute;
       left: 20%;
       right: 20%;
       bottom: 8%;
       height: 14%;
       border-radius: 50%;
       background: rgba(0, 0, 0, .58);
       filter: blur(3px);
       z-index: -1
   }

   .character.carrying {
       filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 19px rgba(194, 154, 255, .90)) drop-shadow(0 9px 10px rgba(0, 0, 0, .62))
   }

   .character.carrying::after {
       content: "🪄";
       position: absolute;
       right: 6%;
       top: 0;
       font-size: 12px;
       filter: drop-shadow(0 0 6px #fff)
   }

   .character.selectable,
   .character.ready-action {
       animation: allyPulse 1s ease-in-out infinite alternate
   }

   .spawn-preview {
       opacity: .58;
       transform: perspective(900px) rotateX(-7deg);
       filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px var(--player-color))
   }

   .cell.ally-ready {
       box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--player-color), white 18%), 0 0 16px color-mix(in srgb, var(--player-color), transparent 30%);
       z-index: 6
   }

   .cell.reachable {
       box-shadow: inset 0 0 0 3px #67eaff, 0 0 14px #4fe6ff;
       z-index: 6
   }

   .cell.selected,
   .cell.selected-character {
       box-shadow: inset 0 0 0 3px #ffe37c, 0 0 16px #ffe37c;
       z-index: 7
   }

   .cell.preview-valid {
       background: linear-gradient(180deg, #9ef28b, #55bd68) !important;
       box-shadow: inset 0 0 0 3px #eaffd7, 0 0 16px #65ff7d !important;
       z-index: 9
   }

   .cell.preview-invalid {
       background: linear-gradient(180deg, #ff9c95, #be4650) !important;
       box-shadow: inset 0 0 0 3px #ffe1df, 0 0 16px #ff626e !important;
       z-index: 9
   }

   .cell.magic-valid,
   .cell.magic-selected-island {
       background: linear-gradient(180deg, #ffe880, #d7aa37) !important;
       box-shadow: inset 0 0 0 2px #fff5c6, 0 0 15px #ffdd61, inset 0 -7px 0 rgba(140, 96, 20, .48) !important;
       z-index: 8
   }

   .cell.magic-invalid {
       background: linear-gradient(180deg, #ff9992, #b64049) !important;
       box-shadow: inset 0 0 0 2px #ffe0dd, 0 0 15px #ff5f69 !important;
       z-index: 8
   }

   .cell.magic-pivot {
       box-shadow: inset 0 0 0 3px #67eaff, 0 0 18px #4fe5ff !important;
       z-index: 10
   }

   .cell.spawn-choice {
       box-shadow: inset 0 0 0 3px #d9fff1, 0 0 13px #71ffd0;
       z-index: 7
   }

   .cell.fx-move::after {
       content: "";
       position: absolute;
       inset: 15%;
       border-radius: 50%;
       border: 3px solid #6feaff;
       animation: fxPulse .42s ease-out;
       pointer-events: none;
       z-index: 10
   }

   .cell.fx-push::before {
       content: "";
       position: absolute;
       left: 10%;
       right: 10%;
       top: 50%;
       height: 4px;
       transform: translateY(-50%);
       background: linear-gradient(90deg, transparent, #ffd866, transparent);
       box-shadow: 0 -8px 0 rgba(255, 216, 102, .78), 0 8px 0 rgba(255, 216, 102, .78), 0 0 12px rgba(255, 216, 102, .72);
       animation: pushLines .42s ease-out;
       pointer-events: none;
       z-index: 10
   }

   /* ---------- Actions ---------- */
   .action-list {
       position: relative;
       z-index: 1;
       display: flex;
       flex-direction: column;
       gap: 8px;
       min-height: 0
   }

   .action-banner {
       min-height: 112px;
       position: relative;
       display: grid;
       grid-template-columns: 54px minmax(0, 1fr) auto;
       grid-template-rows: 1fr auto;
       gap: 3px 8px;
       padding: 10px 9px 20px;
       overflow: hidden;
       cursor: pointer;
       color: white;
       border: 1px solid rgba(255, 255, 255, .24);
       clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 14px rgba(0, 0, 0, .34);
       transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
   }

   .action-banner::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       opacity: .28;
       background: repeating-linear-gradient(90deg, transparent 0 19px, rgba(255, 255, 255, .10) 19px 20px), radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .22), transparent 40%)
   }

   .action-move {
       background: linear-gradient(180deg, #48afe3, #2076ae 58%, #174a78)
   }

   .action-push {
       background: linear-gradient(180deg, #f28a36, #ba4c20 58%, #74301d)
   }

   .action-magic {
       background: linear-gradient(180deg, #9472de, #6243aa 58%, #352468)
   }

   .action-banner:hover:not(.empty) {
       transform: translateY(-2px);
       filter: brightness(1.08)
   }

   .action-banner.active {
       box-shadow: inset 0 0 0 2px #fff4c5, 0 0 17px color-mix(in srgb, var(--player-color), transparent 28%), 0 8px 14px rgba(0, 0, 0, .35);
       transform: translateY(-2px)
   }

   .action-banner.empty {
       opacity: .34;
       filter: grayscale(.35);
       cursor: not-allowed
   }

   .action-emblem {
       position: relative;
       z-index: 1;
       grid-row: 1/3;
       display: grid;
       place-items: center;
       font-size: 31px;
       filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .28))
   }

   .action-copy {
       position: relative;
       z-index: 1;
       grid-column: 2/4;
       grid-row: 1;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 6px;
       min-width: 0
   }

   .action-copy strong {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font: 800 13px Georgia, serif;
       color: #fff8df
   }

   .action-copy span {
       font-size: 15px;
       font-weight: 900
   }

   .action-reserve {
       position: relative;
       z-index: 1;
       grid-column: 2;
       grid-row: 2;
       align-self: center;
       font-size: 8px;
       font-weight: 800;
       letter-spacing: .04em;
       color: rgba(255, 255, 255, .78)
   }

   .all-action {
       position: relative;
       z-index: 1;
       grid-column: 3;
       grid-row: 2;
       padding: 4px 8px;
       border: 1px solid rgba(255, 255, 255, .42);
       border-radius: 999px;
       background: rgba(9, 23, 42, .48);
       color: #fff4c6;
       font-size: 9px;
       font-weight: 900
   }

   .all-action:hover:not(:disabled) {
       filter: brightness(1.2)
   }

   .action-buttons {
       position: relative;
       z-index: 1;
       display: grid;
       gap: 8px;
       margin-top: auto;
       padding-bottom: 8px
   }

   .cancel-action {
       min-height: 38px
   }

   .end-turn {
       min-height: 64px;
       border-color: #d8f7f1;
       background: linear-gradient(180deg, #63d8d2, #289e9b);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #176864, 0 8px 16px rgba(0, 0, 0, .28);
       font-size: 15px
   }

   .end-turn:disabled {
       background: linear-gradient(180deg, #5e6877, #323a47);
       border-color: #788594;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 0 #20252d;
       color: #d7dde5;
       opacity: .72
   }

   /* ---------- Modals, toast, movement ---------- */
   .modal {
       position: fixed;
       inset: 0;
       z-index: 90;
       display: grid;
       place-items: center;
       padding: 18px;
       background: rgba(5, 14, 27, .82);
       backdrop-filter: blur(6px)
   }

   .modal-card {
       width: min(720px, 94vw);
       max-height: 86vh;
       overflow: auto;
       padding: 24px;
       border: 2px solid #8b632f;
       border-radius: 22px;
       background: linear-gradient(180deg, #203657, #091426);
       box-shadow: inset 0 0 0 2px rgba(239, 204, 120, .60), 0 24px 60px rgba(0, 0, 0, .42)
   }

   .modal-card h2 {
       margin-top: 0;
       text-align: center;
       font: 800 30px Georgia, serif;
       color: #ffe7a5
   }

   .modal-card li {
       margin: 8px 0;
       line-height: 1.45;
       color: #e8f2fb
   }

   .modal-actions {
       display: flex;
       justify-content: center;
       gap: 10px;
       margin-top: 18px
   }

   #toast {
       position: fixed;
       left: 50%;
       top: 57px;
       z-index: 120;
       transform: translateX(-50%) translateY(-12px);
       max-width: min(520px, 84vw);
       padding: 10px 17px;
       border: 1px solid #e5bd68;
       border-radius: 11px;
       background: rgba(7, 18, 34, .94);
       color: #fff0b7;
       font-size: 12px;
       font-weight: 900;
       text-align: center;
       opacity: 0;
       pointer-events: none;
       box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
       transition: .18s ease
   }

   #toast.show {
       opacity: 1;
       transform: translateX(-50%) translateY(0)
   }

   .moving-token {
       position: fixed;
       z-index: 130;
       display: grid;
       place-items: center;
       pointer-events: none;
       font-size: clamp(22px, 2.8vw, 35px);
       filter: drop-shadow(0 0 10px var(--ghost-color)) drop-shadow(0 7px 8px rgba(0, 0, 0, .58))
   }

   .moving-token.moving-push::before,
   .moving-token.moving-push::after {
       content: "";
       position: absolute;
       left: 20%;
       right: 20%;
       top: 50%;
       height: 3px;
       background: linear-gradient(90deg, transparent, #ffd866, transparent);
       box-shadow: 0 0 9px rgba(255, 216, 102, .72)
   }

   .moving-token.moving-push::before {
       margin-top: -8px
   }

   .moving-token.moving-push::after {
       margin-top: 8px
   }

   @keyframes artifactFloat {
       to {
           transform: translateY(-4px) scale(1.05)
       }
   }

   @keyframes allyPulse {
       from {
           transform: perspective(900px) rotateX(-7deg) translateY(0) scale(1)
       }

       to {
           transform: perspective(900px) rotateX(-7deg) translateY(-3px) scale(1.10);
           filter: drop-shadow(0 0 12px var(--token-color)) drop-shadow(0 0 20px color-mix(in srgb, var(--token-color), transparent 35%)) drop-shadow(0 9px 10px rgba(0, 0, 0, .62))
       }
   }

   @keyframes islandReady {
       from {
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 10px rgba(0, 0, 0, .18)
       }

       to {
           box-shadow: inset 0 0 0 1px rgba(255, 235, 168, .20), 0 0 12px rgba(255, 226, 126, .17), 0 5px 10px rgba(0, 0, 0, .18)
       }
   }

   @keyframes fxPulse {
       from {
           transform: scale(.45);
           opacity: 1
       }

       to {
           transform: scale(1.35);
           opacity: 0
       }
   }

   @keyframes pushLines {
       from {
           opacity: 1;
           transform: translateY(-50%) scaleX(.45)
       }

       to {
           opacity: 0;
           transform: translateY(-50%) scaleX(1.25)
       }
   }

   @keyframes playerSweep {
       0% {
           filter: brightness(.78)
       }

       45% {
           filter: brightness(1.2)
       }

       100% {
           filter: brightness(1)
       }
   }

   .player-switch .topbar,
   .player-switch .banner-panel {
       animation: playerSweep .66s ease
   }

   /* ---------- Responsive landscape ---------- */
   @media(max-width:1200px) {
       :root {
           --left-panel: 180px;
           --right-panel: 194px
       }

       #gameScreen {
           grid-template-rows: 50px minmax(0, 1fr);
           gap: 0;
           padding: 3px 4px 2px
       }

       .topbar {
           grid-template-columns: minmax(180px, 230px) minmax(220px, 1fr) auto;
           padding: 4px 9px
       }

       .portrait {
           width: 38px;
           height: 38px;
           font-size: 21px
       }

       .player-text h2 {
           font-size: 15px
       }

       .score-card {
           min-width: 62px;
           padding: 3px 5px
       }

       .score-card .name-wrap {
           max-width: 34px
       }

       .game-main {
           gap: 4px
       }

       .banner-panel {
           padding: 12px 7px 10px
       }

       .panel-title {
           font-size: 14px
       }

       .island-selector {
           grid-auto-rows: minmax(50px, 1fr);
           gap: 5px
       }

       .island-mini {
           grid-template-columns: repeat(var(--mini-cols), 14px);
           grid-template-rows: repeat(var(--mini-rows), 14px)
       }

       .action-list {
           gap: 5px
       }

       .action-banner {
           min-height: 78px;
           grid-template-columns: 40px minmax(0, 1fr) auto;
           padding: 7px 6px 14px
       }

       .action-emblem {
           font-size: 24px
       }

       .action-copy strong {
           font-size: 10px
       }

       .action-reserve {
           font-size: 7px
       }

       .action-buttons {
           gap: 5px;
           padding-bottom: 4px
       }

       .cancel-action {
           min-height: 30px
       }

       .end-turn {
           min-height: 46px;
           font-size: 11px
       }

       #board {
           width: min(calc(100dvh - 58px), calc(100vw - var(--left-panel) - var(--right-panel) - 14px));
           padding: 7px;
           border-width: 4px
       }
   }

   @media(max-width:880px) {
       :root {
           --left-panel: 142px;
           --right-panel: 156px
       }

       .topbar {
           grid-template-columns: 160px minmax(170px, 1fr) auto
       }

       #instruction {
           display: none
       }

       .score-card {
           min-width: 44px
       }

       .score-card .name-wrap,
       .score-card .gems {
           display: none
       }

       .banner-panel {
           padding-left: 5px;
           padding-right: 5px
       }

       .panel-title {
           font-size: 12px
       }

       .island-selector {
           grid-auto-rows: minmax(45px, 1fr);
           gap: 4px
       }

       .island-mini {
           grid-template-columns: repeat(var(--mini-cols), 12px);
           grid-template-rows: repeat(var(--mini-rows), 12px)
       }

       .rotation-tools .small-btn {
           padding: 5px
       }

       .panel-footer {
           grid-template-columns: 1fr
       }

       .panel-footer .small-btn {
           font-size: 7px;
           padding: 5px 3px
       }

       .action-banner {
           min-height: 68px;
           grid-template-columns: 34px minmax(0, 1fr) auto;
           padding: 6px 5px 12px
       }

       .action-emblem {
           font-size: 21px
       }

       .action-copy strong {
           font-size: 10px
       }

       .action-copy span {
           font-size: 12px
       }

       .all-action {
           padding: 3px 6px;
           font-size: 8px
       }

       .end-turn {
           min-height: 42px;
           font-size: 10px
       }

       #board {
           width: min(calc(100dvh - 56px), calc(100vw - var(--left-panel) - var(--right-panel) - 10px));
           padding: 6px;
           border-width: 4px
       }
   }

   /* ===== V22.22.8 — personnages restaurés, plateau ajusté ===== */

   #board {
       width: min(calc(100dvh - 138px),
               calc(100vw - var(--left-panel) - var(--right-panel) - 24px),
               1040px) !important;
       transform: translateY(4px) perspective(1450px) rotateX(26deg) !important;
       transform-origin: center top !important;
   }

   /* Personnages volontairement non modifiés */

   /* ===== V22.5 — personnages V12 authentiques uniquement ===== */

   .character {
       width: 62% !important;
       height: 94% !important;
       left: 19% !important;
       top: auto !important;
       bottom: 4% !important;
       inset: auto !important;
       position: absolute !important;
       border: none !important;
       border-radius: 0 !important;
       background: transparent !important;
       box-shadow: none !important;
       display: block !important;
       overflow: visible !important;
       transform: none !important;
       transform-origin: center bottom !important;
       filter: none !important;
       z-index: 15 !important;
       pointer-events: none !important;
   }

   .character::before,
   .character.carrying::after {
       content: none !important;
       display: none !important;
   }

   .character.selectable,
   .character.ready-action {
       animation: vertical-selectable 1s infinite alternate !important;
   }

   .character-standee {
       position: absolute;
       left: 50%;
       bottom: 18% !important;
       width: 62% !important;
       height: 74% !important;
       transform: translateX(-50%);
       display: flex;
       align-items: flex-end !important;
       justify-content: center;
       font-size: clamp(24px, 3vw, 38px) !important;
       line-height: 1;
       filter:
           drop-shadow(0 1px 0 rgba(255, 255, 255, .42)) drop-shadow(0 5px 6px rgba(0, 0, 0, .58));
       z-index: 3;
   }

   .character-base {
       position: absolute;
       left: 50%;
       bottom: 2% !important;
       width: 72% !important;
       height: 16% !important;
       transform: translateX(-50%);
       border-radius: 50%;
       background:
           radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, .82) 0 13%, transparent 14%),
           linear-gradient(180deg, var(--pcolor), color-mix(in srgb, var(--pcolor), #000 46%));
       border: 2px solid rgba(255, 255, 255, .72);
       box-shadow:
           0 0 12px var(--pcolor),
           0 4px 8px rgba(0, 0, 0, .50);
       z-index: 2;
   }

   .character.carrying .character-base {
       box-shadow:
           0 0 22px #7ef0ff,
           0 0 14px var(--pcolor),
           0 4px 8px rgba(0, 0, 0, .50);
   }

   .carrier-crown {
       position: absolute;
       left: 50%;
       top: -10% !important;
       transform: translateX(-50%);
       font-size: 13px !important;
       color: #8ff6ff;
       text-shadow: 0 0 12px #fff, 0 0 20px #56ebff;
       background: rgba(6, 24, 38, .62);
       padding: 2px 5px;
       border-radius: 999px;
       border: 1px solid rgba(143, 246, 255, .55);
       white-space: nowrap;
       z-index: 6;
       animation: carrierPulse 1.15s ease-in-out infinite alternate;
   }

   .character.spawn-preview {
       opacity: .58 !important;
   }

   @keyframes vertical-selectable {
       to {
           transform: translateY(-4px) scale(1.05);
           filter: brightness(1.15);
       }
   }

   @keyframes carrierPulse {
       to {
           transform: translateX(-50%) translateY(-2px) scale(1.08);
       }
   }


   /* ===== LABORATOIRE : vrai rendu d'îles produit par HTML/CSS/SVG ===== */

   #board {
       isolation: isolate;
   }

   .cell {
       z-index: 2;
   }

   .cell.placed-island-cell {
       background: transparent !important;
       border-color: transparent !important;
       box-shadow: inset 0 0 0 1px rgba(47, 75, 44, .13) !important;
   }

   .cell.placed-island-cell.island-outline-top,
   .cell.placed-island-cell.island-outline-right,
   .cell.placed-island-cell.island-outline-bottom,
   .cell.placed-island-cell.island-outline-left {
       border: 0 !important;
   }

   .cell.placed-island-cell.preview-valid {
       background: linear-gradient(180deg, #9ef28b, #55bd68) !important;
   }

   .cell.placed-island-cell.preview-invalid {
       background: linear-gradient(180deg, #ff9c95, #be4650) !important;
   }

   .cell.placed-island-cell.magic-valid,
   .cell.placed-island-cell.magic-selected-island {
       background: linear-gradient(180deg, #ffe880, #d7aa37) !important;
   }

   .island-art-layer {
       position: absolute;
       left: 8px;
       top: 8px;
       width: calc(100% - 16px);
       height: calc(100% - 16px);
       overflow: visible;
       pointer-events: none;
       z-index: 1;
   }

   .island-art-layer path {
       vector-effect: non-scaling-stroke;
       stroke-linejoin: round;
       stroke-linecap: round;
   }

   .island-deep-shadow {
       fill: #1b2a21;
       opacity: .34;
       filter: url(#softShadow);
   }

   .island-cliff {
       stroke-width: .09;
   }

   .island-rim {
       fill: none;
       stroke-width: .16;
   }

   .island-top {
       stroke-width: .07;
   }

   .island-texture {
       fill: url(#grassSpeckles);
       opacity: .46;
       stroke: none;
   }

   .island-owner-line {
       fill: none;
       stroke: var(--owner-color);
       stroke-width: .025;
       opacity: .50;
   }

   body[data-island-style="A"] .island-cliff {
       fill: url(#cliffNatural);
       stroke: #5c4736
   }

   body[data-island-style="A"] .island-rim {
       stroke: #efe6c9
   }

   body[data-island-style="A"] .island-top {
       fill: url(#grassNatural);
       stroke: #6f934d;
       filter: url(#softShadow)
   }

   body[data-island-style="A"] .island-texture {
       opacity: .42
   }

   body[data-island-style="B"] .island-cliff {
       fill: url(#cliffGolden);
       stroke: #56361d
   }

   body[data-island-style="B"] .island-rim {
       stroke: #f0cf77;
       stroke-width: .20
   }

   body[data-island-style="B"] .island-top {
       fill: url(#grassGolden);
       stroke: #9d742d;
       stroke-width: .085;
       filter: url(#softShadow)
   }

   body[data-island-style="B"] .island-texture {
       opacity: .34
   }

   body[data-island-style="B"] .island-owner-line {
       opacity: .28
   }

   body[data-island-style="C"] .island-cliff {
       fill: url(#cliffMagic);
       stroke: #294553
   }

   body[data-island-style="C"] .island-rim {
       stroke: #b9f3ff;
       stroke-width: .13;
       filter: url(#magicGlow)
   }

   body[data-island-style="C"] .island-top {
       fill: url(#grassMagic);
       stroke: #5dcce5;
       filter: url(#magicGlow)
   }

   body[data-island-style="C"] .island-texture {
       opacity: .32
   }

   body[data-island-style="C"] .island-owner-line {
       opacity: .22
   }

   body[data-island-style="D"] .island-cliff {
       fill: url(#cliffStone);
       stroke: #4d4036;
       stroke-width: .12
   }

   body[data-island-style="D"] .island-rim {
       stroke: #e8dcc1;
       stroke-width: .24
   }

   body[data-island-style="D"] .island-top {
       fill: url(#grassStone);
       stroke: #776952;
       stroke-width: .10;
       filter: url(#softShadow)
   }

   body[data-island-style="D"] .island-texture {
       opacity: .52
   }

   body[data-island-style="D"] .island-deep-shadow {
       opacity: .48
   }


   .artifact {
       filter:
           drop-shadow(0 0 8px rgba(255, 255, 255, .98)) drop-shadow(0 0 20px rgba(255, 205, 56, .96)) drop-shadow(0 7px 9px rgba(0, 0, 0, .34)) !important;
   }



   /* ===== V22.7 — Option D + personnages précédents simplement recentrés ===== */

   .character {
       width: 62% !important;
       height: 94% !important;
       left: 19% !important;
       top: 0% !important;
       bottom: auto !important;
       inset: auto !important;
   }

   /* The spawn preview uses the same unchanged V12 character rendering. */
   .character.spawn-preview {
       left: 19% !important;
       top: 0% !important;
       bottom: auto !important;
   }


   /* ===== V22.9 — position uniquement : personnage dans le carré ===== */
   .character,
   .character.spawn-preview {
       top: -8% !important;
       bottom: auto !important;
   }


   /* ===== V22.10 — léger décalage à droite + ombre renforcée ===== */
   .character,
   .character.spawn-preview {
       left: 22% !important;
   }

   .character::before {
       left: 16% !important;
       right: 16% !important;
       bottom: 6% !important;
       height: 18% !important;
       background: rgba(0, 0, 0, .52) !important;
       filter: blur(5px) !important;
   }

   .character-standee {
       filter:
           drop-shadow(0 1px 0 rgba(255, 255, 255, .42)) drop-shadow(0 7px 9px rgba(0, 0, 0, .72)) !important;
   }

   .character-base {
       box-shadow:
           0 0 12px var(--pcolor),
           0 6px 12px rgba(0, 0, 0, .62) !important;
   }

   .character.carrying .character-base {
       box-shadow:
           0 0 22px #7ef0ff,
           0 0 14px var(--pcolor),
           0 6px 12px rgba(0, 0, 0, .62) !important;
   }


   /* ===== V22.11 — magie sombre, couronne éclatante, meilleur feedback, ambiance sonore ===== */

   .magic-selected-island {
       background: linear-gradient(180deg, rgba(73, 62, 38, .88), rgba(42, 34, 21, .94)) !important;
       box-shadow:
           inset 0 0 0 2px rgba(255, 224, 130, .34),
           0 0 10px rgba(47, 33, 15, .55),
           inset 0 -8px 0 rgba(23, 18, 11, .48) !important;
       filter: saturate(.9) brightness(.78);
   }

   .magic-selected-island.island-outline-top {
       border-top-color: rgba(255, 236, 173, .50) !important
   }

   .magic-selected-island.island-outline-left {
       border-left-color: rgba(234, 207, 149, .44) !important
   }

   .magic-selected-island.island-outline-right {
       border-right-color: rgba(73, 52, 24, .94) !important
   }

   .magic-selected-island .sanctuary-ring {
       filter: brightness(.9)
   }

   .magic-valid {
       filter: brightness(1.08) saturate(1.04) !important;
   }

   .carrier-crown {
       min-width: 0 !important;
       padding: 1px 6px !important;
       font-size: 16px !important;
       color: #ffe98d !important;
       text-shadow:
           0 0 10px rgba(255, 255, 255, .95),
           0 0 18px rgba(255, 223, 98, .92),
           0 0 28px rgba(255, 223, 98, .48) !important;
       background: rgba(26, 19, 7, .46) !important;
       border: 1px solid rgba(255, 230, 132, .68) !important;
       box-shadow:
           0 0 18px rgba(255, 217, 97, .55),
           inset 0 0 8px rgba(255, 241, 194, .26) !important;
   }

   .character.carrying {
       filter:
           drop-shadow(0 0 16px rgba(255, 246, 176, .95)) drop-shadow(0 0 30px rgba(255, 214, 87, .92)) drop-shadow(0 0 40px rgba(119, 245, 255, .55)) !important;
   }

   .character.carrying .character-standee {
       filter:
           drop-shadow(0 0 10px rgba(255, 247, 188, .95)) drop-shadow(0 9px 10px rgba(0, 0, 0, .76)) !important;
   }

   .character.carrying .character-base {
       box-shadow:
           0 0 28px rgba(255, 216, 95, .92),
           0 0 18px #7ef0ff,
           0 8px 14px rgba(0, 0, 0, .68) !important;
   }

   .cell.ally-ready {
       box-shadow:
           inset 0 0 0 4px color-mix(in srgb, var(--player-color), white 28%),
           0 0 20px color-mix(in srgb, var(--player-color), transparent 12%),
           0 0 34px color-mix(in srgb, var(--player-color), transparent 42%) !important;
       background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--player-color), transparent 83%), transparent 72%);
       z-index: 6;
   }

   .character.ready-action,
   .character.selectable {
       animation: playerReadyPulse 0.9s ease-in-out infinite alternate !important;
   }

   .character.ready-action .character-base,
   .character.selectable .character-base {
       box-shadow:
           0 0 20px color-mix(in srgb, var(--pcolor), white 20%),
           0 8px 14px rgba(0, 0, 0, .68) !important;
   }

   @keyframes playerReadyPulse {
       from {
           transform: none
       }

       to {
           transform: translateY(-2px) scale(1.04)
       }
   }

   .crown-claimable {
       box-shadow:
           inset 0 0 0 4px #ffe07d,
           0 0 20px rgba(255, 218, 102, .62),
           0 0 30px rgba(255, 218, 102, .24) !important;
   }

   .sound-btn {
       min-width: 122px;
   }

   .sound-btn.active {
       background: linear-gradient(180deg, #ffde87, #d5a53b) !important;
       color: #2f1b03 !important;
       border-color: #fff1bf !important;
       box-shadow: 0 0 16px rgba(255, 224, 119, .46) !important;
   }


   /* ===== V22.12 — ambiance sonore renforcée et animations finales ===== */

   .player-name {
       text-transform: uppercase;
       letter-spacing: .04em;
       font-weight: 900;
   }

   .player-text h2,
   .score-card .name-wrap span {
       text-transform: uppercase;
       letter-spacing: .035em;
   }

   #soundBtn {
       min-height: 34px;
       font-size: 8px;
       transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
   }

   #soundBtn.active {
       color: #2d1b03 !important;
       background: linear-gradient(180deg, #ffe694, #d8aa43) !important;
       border-color: #fff1bc !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .58),
           0 0 15px rgba(255, 222, 111, .52),
           0 3px 0 #8b6020 !important;
   }

   #soundBtn.active::before {
       content: "";
       display: inline-block;
       width: 5px;
       height: 5px;
       margin-right: 4px;
       border-radius: 50%;
       background: #42cf71;
       box-shadow: 0 0 7px #42ef80;
       animation: soundDot 1s ease-in-out infinite alternate;
   }

   .action-banner {
       transition:
           transform .18s cubic-bezier(.2, .75, .2, 1),
           filter .18s ease,
           box-shadow .18s ease;
   }

   .action-banner:hover:not(.empty) {
       transform: translateY(-3px) scale(1.015);
       filter: brightness(1.10) saturate(1.06);
   }

   .action-banner.active {
       transform: translateY(-4px) scale(1.025);
       filter: brightness(1.14) saturate(1.10);
       animation: activeCardPulse .85s ease-in-out infinite alternate;
   }

   .action-banner.empty {
       filter: grayscale(.50) brightness(.74);
   }

   .island-choice:not(:disabled):hover {
       transform: translateY(-3px) scale(1.035) !important;
   }

   .island-choice.active {
       animation: selectedIslandChoice .82s ease-in-out infinite alternate;
   }

   .artifact {
       animation: crownFloat 1.05s ease-in-out infinite alternate !important;
   }

   .island-arrival {
       animation: islandArrival .72s cubic-bezier(.15, .86, .23, 1.22) both;
       animation-delay: var(--arrival-delay, 0ms);
       z-index: 12 !important;
   }

   .spawn-arrival {
       animation: spawnArrival .70s cubic-bezier(.16, .84, .24, 1.18);
       z-index: 15 !important;
   }

   .crown-burst {
       animation: crownBurst .72s ease-out;
       z-index: 18 !important;
   }

   #board.magic-board-pulse {
       animation: magicBoardPulse .58s ease-out;
   }

   #board.magic-board-pulse .island-art-layer {
       animation: magicLayerPulse .58s ease-out;
   }

   .cell.preview-valid,
   .cell.preview-invalid {
       animation: previewBreath .75s ease-in-out infinite alternate;
   }

   .cell.reachable {
       animation: reachableBreath .82s ease-in-out infinite alternate;
   }

   #toast.show {
       animation: toastArrive .28s cubic-bezier(.18, .82, .24, 1.15);
   }

   .moving-token {
       will-change: transform, opacity;
   }

   .moving-token.moving-move {
       filter:
           drop-shadow(0 0 10px rgba(104, 232, 255, .72)) drop-shadow(0 9px 10px rgba(0, 0, 0, .55)) !important;
   }

   .moving-token.moving-push {
       filter:
           drop-shadow(0 0 15px rgba(255, 203, 79, .86)) drop-shadow(0 10px 12px rgba(0, 0, 0, .62)) !important;
   }

   @keyframes soundDot {
       to {
           transform: scale(1.32);
           filter: brightness(1.2)
       }
   }

   @keyframes activeCardPulse {
       from {
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 15px rgba(0, 0, 0, .45)
       }

       to {
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 0 20px color-mix(in srgb, var(--player-color), transparent 35%), 0 10px 18px rgba(0, 0, 0, .48)
       }
   }

   @keyframes selectedIslandChoice {
       to {
           filter: drop-shadow(0 0 16px var(--player-color)) brightness(1.12)
       }
   }

   @keyframes crownFloat {
       from {
           transform: translateY(1px) scale(.98) rotate(-2deg)
       }

       to {
           transform: translateY(-5px) scale(1.08) rotate(2deg)
       }
   }

   @keyframes islandArrival {
       0% {
           transform: translateY(-18px) scale(.76);
           opacity: 0;
           filter: brightness(1.65)
       }

       62% {
           transform: translateY(3px) scale(1.06);
           opacity: 1
       }

       100% {
           transform: translateY(0) scale(1);
           opacity: 1;
           filter: none
       }
   }

   @keyframes spawnArrival {
       0% {
           transform: scale(.34);
           filter: brightness(1.8);
           opacity: 0
       }

       55% {
           transform: scale(1.18);
           opacity: 1
       }

       100% {
           transform: scale(1);
           filter: none
       }
   }

   @keyframes crownBurst {
       0% {
           box-shadow: inset 0 0 0 2px #fff, 0 0 0 rgba(255, 220, 91, 0)
       }

       45% {
           box-shadow: inset 0 0 0 4px #fff4bd, 0 0 34px rgba(255, 220, 91, .98)
       }

       100% {
           box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), 0 0 0 rgba(255, 220, 91, 0)
       }
   }

   @keyframes magicBoardPulse {
       0% {
           filter: brightness(1)
       }

       38% {
           filter: brightness(1.16) saturate(1.14)
       }

       100% {
           filter: brightness(1)
       }
   }

   @keyframes magicLayerPulse {
       0% {
           filter: none
       }

       42% {
           filter: drop-shadow(0 0 10px rgba(182, 113, 255, .74))
       }

       100% {
           filter: none
       }
   }

   @keyframes previewBreath {
       to {
           filter: brightness(1.10)
       }
   }

   @keyframes reachableBreath {
       to {
           filter: brightness(1.12);
           box-shadow: inset 0 0 0 3px #75efff, 0 0 20px #55eaff
       }
   }

   @keyframes toastArrive {
       from {
           transform: translateX(-50%) translateY(-18px) scale(.92);
           opacity: 0
       }

       to {
           transform: translateX(-50%) translateY(0) scale(1);
           opacity: 1
       }
   }

   @media(prefers-reduced-motion:reduce) {

       .action-banner,
       .island-choice,
       .artifact,
       .cell,
       #board,
       .island-art-layer {
           animation-duration: .01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: .01ms !important;
       }
   }


   /* ===== V22.12.1 — démarrage sonore fiable et commandes équilibrées ===== */
   .panel-footer {
       grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   }

   .panel-footer .small-btn {
       min-width: 0;
       padding-left: 3px !important;
       padding-right: 3px !important;
   }

   @media(max-width:880px) {
       .panel-footer {
           grid-template-columns: 1fr !important;
       }
   }


   /* ===== V22.13 — véritable menu audio ===== */

   .sound-menu {
       position: fixed;
       z-index: 180;
       width: 300px;
       padding: 12px;
       border-radius: 16px;
       color: #eef9ff;
       background:
           radial-gradient(circle at 78% 8%, rgba(117, 216, 255, .13), transparent 38%),
           linear-gradient(180deg, rgba(25, 48, 76, .98), rgba(8, 20, 35, .99));
       border: 2px solid #a77a35;
       box-shadow:
           inset 0 0 0 1px rgba(255, 232, 161, .62),
           0 16px 38px rgba(0, 0, 0, .48),
           0 0 18px rgba(76, 194, 255, .16);
       font-family: Arial, sans-serif;
   }

   .sound-menu::before {
       content: "";
       position: absolute;
       top: -7px;
       right: 22px;
       width: 12px;
       height: 12px;
       transform: rotate(45deg);
       background: #18304c;
       border-left: 2px solid #a77a35;
       border-top: 2px solid #a77a35;
   }

   .sound-menu-head {
       position: relative;
       z-index: 1;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 10px;
       margin-bottom: 9px;
       color: #ffe7a1;
       letter-spacing: .07em;
       font-size: 13px;
   }

   .sound-menu-head button {
       width: 27px;
       height: 27px;
       padding: 0;
       border-radius: 50%;
       border: 1px solid rgba(255, 255, 255, .30);
       color: #fff;
       background: #233d5d;
       font-size: 19px;
       line-height: 1;
   }

   .sound-main-toggle,
   .sound-test-btn {
       width: 100%;
       border-radius: 10px;
       border: 1px solid #e2bd65;
       font-weight: 900;
       letter-spacing: .045em;
   }

   .sound-main-toggle {
       padding: 9px;
       color: #2a1b05;
       background: linear-gradient(180deg, #ffe797, #d7a83f);
       box-shadow: 0 4px 0 #80551b, 0 0 13px rgba(255, 220, 103, .25);
   }

   .sound-main-toggle.off {
       color: #dbe8f4;
       border-color: #607891;
       background: linear-gradient(180deg, #334d68, #1b2e43);
       box-shadow: 0 4px 0 #102033;
   }

   .sound-slider {
       display: block;
       margin-top: 13px;
   }

   .sound-slider>span {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
       margin-bottom: 5px;
       font-size: 12px;
   }

   .sound-slider output {
       min-width: 47px;
       text-align: right;
       color: #8eeeff;
       font-weight: 900;
   }

   .sound-slider input {
       width: 100%;
       height: 7px;
       padding: 0;
       border: 0;
       border-radius: 999px;
       appearance: none;
       background: linear-gradient(90deg, #46c7e8, #ffe078);
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
   }

   .sound-slider input::-webkit-slider-thumb {
       appearance: none;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       border: 2px solid #fff2b2;
       background: #18334e;
       box-shadow: 0 0 9px rgba(100, 224, 255, .80);
   }

   .sound-slider input::-moz-range-thumb {
       width: 16px;
       height: 16px;
       border-radius: 50%;
       border: 2px solid #fff2b2;
       background: #18334e;
       box-shadow: 0 0 9px rgba(100, 224, 255, .80);
   }

   .sound-test-btn {
       margin-top: 14px;
       padding: 8px;
       color: #e8f9ff;
       background: linear-gradient(180deg, #296a83, #183e57);
       box-shadow: 0 3px 0 #0c2638;
   }

   .sound-menu small {
       display: block;
       margin-top: 9px;
       color: #bcd0df;
       font-size: 10px;
       line-height: 1.35;
       text-align: center;
   }

   #soundBtn {
       white-space: nowrap;
   }

   @media(max-width:700px) {
       .sound-menu {
           max-height: calc(100vh - 16px);
           max-height: calc(100dvh - 16px);
           overflow: auto;
       }
   }


   /* ===== V22.14 — prévisualisations complètes, playlist et stock ===== */

   .top-right-summary {
       min-width: 0;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       gap: 7px;
   }

   .action-stock {
       flex: none;
       display: grid;
       grid-template-columns: auto repeat(3, auto);
       align-items: center;
       gap: 3px;
       padding: 3px 5px;
       border: 1px solid rgba(241, 205, 119, .40);
       border-radius: 10px;
       background: rgba(5, 16, 29, .66);
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
   }

   .action-stock-title {
       color: #f6dda0;
       font: 900 7px Arial, sans-serif;
       letter-spacing: .11em;
       writing-mode: vertical-rl;
       transform: rotate(180deg);
   }

   .action-stock-chip {
       min-width: 31px;
       height: 31px;
       display: grid;
       grid-template-columns: auto auto;
       grid-template-rows: 1fr auto;
       align-items: center;
       justify-content: center;
       gap: 0 3px;
       padding: 2px 4px;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, .18);
       background: rgba(255, 255, 255, .055);
   }

   .action-stock-chip i {
       grid-row: 1 / 3;
       font-style: normal;
       font-size: 13px;
   }

   .action-stock-chip b {
       color: #fff;
       font: 900 11px Arial, sans-serif;
   }

   .action-stock-chip small {
       color: #a9c1d4;
       font: 800 6px Arial, sans-serif;
   }

   .stock-move {
       box-shadow: inset 0 -2px 0 rgba(80, 220, 255, .46)
   }

   .stock-push {
       box-shadow: inset 0 -2px 0 rgba(255, 188, 77, .48)
   }

   .stock-magic {
       box-shadow: inset 0 -2px 0 rgba(190, 113, 255, .56)
   }

   .magic-hover-island {
       background: linear-gradient(180deg, rgba(78, 98, 116, .78), rgba(34, 46, 60, .90)) !important;
       box-shadow:
           inset 0 0 0 2px rgba(145, 222, 255, .52),
           0 0 11px rgba(80, 200, 255, .28) !important;
       filter: brightness(.88) saturate(.85);
       z-index: 8 !important;
   }

   .magic-hover-pivot {
       box-shadow:
           inset 0 0 0 4px #8cecff,
           inset 0 0 14px rgba(83, 215, 255, .48),
           0 0 19px rgba(83, 215, 255, .72) !important;
       z-index: 12 !important;
   }

   .magic-hover-pivot::after {
       content: "PIVOT";
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       padding: 2px 3px;
       border-radius: 4px;
       color: #e8fbff;
       background: rgba(7, 31, 48, .78);
       font: 900 6px Arial, sans-serif;
       letter-spacing: .08em;
       pointer-events: none;
   }

   .magic-rotation-preview {
       background: rgba(174, 113, 255, .34) !important;
       box-shadow:
           inset 0 0 0 3px rgba(226, 197, 255, .94),
           inset 0 0 14px rgba(152, 77, 255, .45),
           0 0 14px rgba(148, 78, 255, .58) !important;
       animation: rotationSquarePreview .72s ease-in-out infinite alternate !important;
       z-index: 13 !important;
   }

   .magic-rotation-preview.magic-invalid {
       background: rgba(214, 66, 82, .45) !important;
       box-shadow:
           inset 0 0 0 3px rgba(255, 208, 211, .94),
           0 0 14px rgba(255, 75, 92, .62) !important;
   }

   .action-target-preview {
       z-index: 14 !important;
   }

   .move-target-preview {
       background: rgba(84, 225, 255, .24) !important;
       box-shadow:
           inset 0 0 0 4px #9af1ff,
           inset 0 0 18px rgba(72, 218, 255, .42),
           0 0 20px rgba(72, 218, 255, .56) !important;
   }

   .push-target-preview {
       background: rgba(255, 184, 64, .25) !important;
       box-shadow:
           inset 0 0 0 4px #ffd47b,
           inset 0 0 18px rgba(255, 170, 48, .42),
           0 0 20px rgba(255, 170, 48, .56) !important;
   }

   .push-target-preview::after {
       content: "➜";
       position: absolute;
       right: -18%;
       top: 50%;
       transform: translateY(-50%);
       color: #ffe49b;
       font-size: clamp(14px, 1.8vw, 25px);
       text-shadow: 0 0 9px #ffb83f;
       pointer-events: none;
       z-index: 21;
   }

   .push-destination-preview {
       box-shadow:
           inset 0 0 0 3px #ffe49a,
           0 0 18px rgba(255, 188, 70, .66) !important;
       z-index: 13 !important;
   }

   .action-ghost {
       position: absolute;
       inset: 8%;
       display: grid;
       place-items: center;
       pointer-events: none;
       opacity: .58;
       z-index: 20;
       animation: ghostPreviewFloat .66s ease-in-out infinite alternate;
   }

   .action-ghost>span {
       display: grid;
       place-items: center;
       width: 72%;
       height: 82%;
       font-size: clamp(20px, 2.6vw, 34px);
       filter:
           drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px var(--ghost-color)) drop-shadow(0 7px 7px rgba(0, 0, 0, .55));
   }

   .action-ghost::after {
       content: "";
       position: absolute;
       left: 24%;
       right: 24%;
       bottom: 5%;
       height: 13%;
       border-radius: 50%;
       background: var(--ghost-color);
       border: 2px solid rgba(255, 255, 255, .72);
       box-shadow: 0 0 14px var(--ghost-color);
   }

   .selected-character {
       box-shadow:
           inset 0 0 0 4px #ffe27b,
           0 0 18px rgba(255, 218, 93, .74) !important;
       z-index: 15 !important;
   }

   .music-track-choice {
       display: block;
       margin-top: 12px;
   }

   .music-track-choice>span {
       display: block;
       margin-bottom: 5px;
       font-size: 12px;
   }

   .music-track-choice select {
       width: 100%;
       padding: 8px 9px;
       border: 1px solid rgba(255, 231, 160, .48);
       border-radius: 9px;
       color: #eef9ff;
       background: #18324d;
       font: 700 12px Arial, sans-serif;
   }

   @keyframes rotationSquarePreview {
       to {
           filter: brightness(1.16);
           transform: translateY(-1px)
       }
   }

   @keyframes ghostPreviewFloat {
       to {
           transform: translateY(-4px);
           opacity: .76
       }
   }

   @media(max-width:1180px) {
       .action-stock-title {
           display: none
       }

       .action-stock {
           grid-template-columns: repeat(3, auto)
       }

       .action-stock-chip {
           min-width: 28px;
           padding: 2px 3px
       }
   }

   @media(max-width:980px) {
       .action-stock {
           display: none
       }
   }


   /* ===== V22.15 — interactions intelligentes et finition visuelle ===== */

   .top-right-summary {
       align-items: stretch !important;
       gap: 8px !important;
   }

   .action-stock {
       min-width: 166px;
       display: flex !important;
       flex-direction: column;
       justify-content: center;
       gap: 3px !important;
       padding: 4px 6px !important;
       border-radius: 11px !important;
       background:
           radial-gradient(circle at 100% 0, rgba(255, 255, 255, .08), transparent 45%),
           rgba(5, 16, 29, .72) !important;
   }

   .stock-player-row {
       min-width: 0;
       display: grid;
       grid-template-columns: minmax(48px, 1fr) auto;
       align-items: center;
       gap: 5px;
       min-height: 24px;
       padding: 3px 5px;
       border-radius: 7px;
       border: 1px solid transparent;
       color: #d7e4ef;
       background: rgba(255, 255, 255, .025);
       opacity: .74;
   }

   .stock-player-row.active {
       color: #fff;
       opacity: 1;
       border-color: color-mix(in srgb, var(--stock-player), white 22%);
       background: color-mix(in srgb, var(--stock-player), transparent 88%);
       box-shadow:
           inset 3px 0 0 var(--stock-player),
           0 0 10px color-mix(in srgb, var(--stock-player), transparent 68%);
   }

   .stock-player-row>strong {
       min-width: 0;
       display: flex;
       align-items: center;
       gap: 4px;
       font: 900 7px Arial, sans-serif;
       letter-spacing: .045em;
   }

   .stock-player-row>strong i {
       width: 7px;
       height: 7px;
       flex: none;
       border-radius: 50%;
       background: var(--stock-player);
       box-shadow: 0 0 7px var(--stock-player);
   }

   .stock-player-row>strong span {
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

   .stock-values {
       display: flex;
       align-items: center;
       gap: 3px;
   }

   .stock-values>span {
       min-width: 27px;
       height: 19px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2px;
       padding: 1px 3px;
       border-radius: 6px;
       border: 1px solid rgba(255, 255, 255, .10);
       background: rgba(255, 255, 255, .055);
   }

   .stock-values em {
       font-style: normal;
       font-size: 9px;
   }

   .stock-values b {
       font: 900 9px Arial, sans-serif;
       color: #fff4c4;
   }

   .cell.selected-character {
       box-shadow:
           inset 0 0 0 4px #ffe27b,
           inset 0 0 17px rgba(255, 222, 111, .31),
           0 0 22px rgba(255, 218, 93, .82) !important;
       z-index: 18 !important;
   }

   .cell.selected-character::after {
       content: "";
       position: absolute;
       inset: 4%;
       border: 1px solid rgba(255, 247, 195, .68);
       border-radius: 5px;
       pointer-events: none;
       animation: selectedSquareBreath .82s ease-in-out infinite alternate;
   }

   .move-path-preview {
       z-index: 12 !important;
   }

   .move-path-preview::before {
       content: "";
       position: absolute;
       left: 50%;
       top: 50%;
       width: 9px;
       height: 9px;
       transform: translate(-50%, -50%);
       border-radius: 50%;
       background: #baf7ff;
       border: 2px solid #3fcaeb;
       box-shadow:
           0 0 0 4px rgba(75, 219, 249, .17),
           0 0 13px rgba(77, 223, 255, .80);
       pointer-events: none;
       z-index: 19;
       animation: pathDotPulse .62s ease-in-out infinite alternate;
   }

   .move-target-preview::after {
       content: "ARRIVÉE";
       position: absolute;
       left: 50%;
       bottom: 4%;
       transform: translateX(-50%);
       padding: 2px 4px;
       border-radius: 5px;
       color: #eaffff;
       background: rgba(6, 42, 58, .78);
       font: 900 6px Arial, sans-serif;
       letter-spacing: .07em;
       pointer-events: none;
       z-index: 22;
   }

   .push-target-preview::before {
       content: "POUSSER";
       position: absolute;
       left: 50%;
       bottom: 4%;
       transform: translateX(-50%);
       padding: 2px 4px;
       border-radius: 5px;
       color: #fff3cf;
       background: rgba(73, 39, 5, .80);
       font: 900 6px Arial, sans-serif;
       letter-spacing: .07em;
       pointer-events: none;
       z-index: 22;
   }

   .smart-cancel-preview {
       box-shadow:
           inset 0 0 0 4px #ff938c,
           inset 0 0 16px rgba(255, 92, 83, .32),
           0 0 18px rgba(255, 91, 82, .65) !important;
   }

   .smart-cancel-preview::before {
       content: "QUITTER";
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       padding: 3px 4px;
       border-radius: 5px;
       color: #fff;
       background: rgba(96, 21, 19, .86);
       font: 900 6px Arial, sans-serif;
       letter-spacing: .06em;
       z-index: 25;
       pointer-events: none;
   }

   .carrier-crown {
       pointer-events: auto !important;
       cursor: pointer;
   }

   .carrier-crown:hover {
       transform: translateX(-50%) translateY(-3px) scale(1.16) !important;
       filter: brightness(1.20);
   }

   .topbar {
       background:
           radial-gradient(circle at 8% 0, color-mix(in srgb, var(--player-color), transparent 82%), transparent 34%),
           linear-gradient(180deg, rgba(18, 43, 69, .94), rgba(8, 22, 39, .96)) !important;
       border-bottom-color: rgba(255, 224, 145, .48) !important;
       box-shadow:
           inset 0 -1px 0 rgba(255, 255, 255, .08),
           0 8px 18px rgba(12, 38, 65, .18) !important;
   }

   .score-card {
       transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
   }

   .score-card.active {
       transform: translateY(-1px);
       filter: brightness(1.08);
   }

   .banner-panel {
       border-color: #9c7139 !important;
       box-shadow:
           inset 0 0 0 1px rgba(241, 210, 137, .56),
           inset 0 18px 28px rgba(255, 255, 255, .025),
           0 12px 24px rgba(7, 27, 52, .34) !important;
   }

   .board-wrap::after {
       content: "✦  ·  ✧  ·  ✦";
       position: absolute;
       left: 50%;
       bottom: 1%;
       transform: translateX(-50%);
       color: rgba(255, 255, 255, .30);
       letter-spacing: 1.6em;
       font-size: 10px;
       pointer-events: none;
       animation: skySparkle 2.4s ease-in-out infinite alternate;
   }

   .cell.land:hover {
       filter: brightness(1.07) saturate(1.04);
   }

   @keyframes selectedSquareBreath {
       to {
           inset: 1%;
           border-color: #fff7c3;
           box-shadow: 0 0 10px rgba(255, 226, 112, .60);
       }
   }

   @keyframes pathDotPulse {
       to {
           transform: translate(-50%, -50%) scale(1.24);
           filter: brightness(1.15);
       }
   }

   @keyframes skySparkle {
       to {
           opacity: .75;
           filter: drop-shadow(0 0 7px rgba(255, 255, 255, .72));
       }
   }

   @media(max-width:1180px) {
       .action-stock {
           min-width: 145px
       }

       .stock-player-row {
           grid-template-columns: minmax(40px, 1fr) auto;
           padding: 2px 3px
       }

       .stock-values>span {
           min-width: 24px;
           padding: 1px 2px
       }
   }

   @media(max-width:980px) {
       .action-stock {
           display: none !important
       }
   }


   /* ===== V22.16 — villages diagonaux, sorties et barre supérieure corrigée ===== */

   .top-right-summary {
       display: block !important;
   }

   .score-list {
       gap: 7px !important;
   }

   .score-card {
       min-width: 112px !important;
       padding: 4px 6px 5px !important;
   }

   .score-card strong {
       margin-bottom: 3px;
   }

   .score-card .score-value {
       flex: none;
       padding: 1px 4px;
       border-radius: 5px;
       color: #fff4bd;
       background: rgba(0, 0, 0, .22);
       font-size: 9px;
   }

   .score-card .gems {
       display: none !important;
   }

   .score-actions {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 3px;
   }

   .score-actions>span {
       min-width: 0;
       height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2px;
       border-radius: 6px;
       border: 1px solid rgba(255, 255, 255, .10);
       background: rgba(255, 255, 255, .055);
       box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pcolor), transparent 54%);
   }

   .score-actions i {
       font-style: normal;
       font-size: 10px;
   }

   .score-actions b {
       color: #fff;
       font: 900 9px Arial, sans-serif;
   }

   .action-stock {
       display: none !important;
   }

   .cell.village {
       background:
           radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--village-color), white 52%), transparent 31%),
           linear-gradient(180deg, color-mix(in srgb, var(--village-color), white 21%), color-mix(in srgb, var(--village-color), #17331e 63%)) !important;
       box-shadow:
           inset 0 0 0 4px color-mix(in srgb, var(--village-color), white 20%),
           inset 0 -8px 0 color-mix(in srgb, var(--village-color), #172415 66%),
           0 0 18px color-mix(in srgb, var(--village-color), transparent 24%) !important;
       z-index: 10;
   }

   .village-owner-mark {
       position: absolute;
       right: 4%;
       top: 3%;
       width: 18px;
       height: 18px;
       display: grid;
       place-items: center;
       border-radius: 50%;
       color: #fff;
       background: color-mix(in srgb, var(--village-color), #07111c 45%);
       border: 2px solid color-mix(in srgb, var(--village-color), white 48%);
       box-shadow: 0 0 10px var(--village-color);
       font: 900 8px Arial, sans-serif;
       z-index: 18;
       pointer-events: none;
   }

   .exit-gate {
       --gate-size: calc((100% - 16px) / 11);
       position: absolute;
       z-index: 46;
       display: block;
       margin: 0;
       padding: 0;
       border: 0;
       border-radius: 999px;
       background:
           linear-gradient(90deg,
               color-mix(in srgb, var(--gate-color), white 56%),
               var(--gate-color) 25% 75%,
               color-mix(in srgb, var(--gate-color), white 56%));
       box-shadow:
           0 0 5px #fff,
           0 0 12px var(--gate-color),
           0 0 21px color-mix(in srgb, var(--gate-color), transparent 28%);
       cursor: pointer;
       transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
   }

   .exit-top,
   .exit-bottom {
       left: calc(8px + var(--gate-index) * var(--gate-size) + var(--gate-size) * .13);
       width: calc(var(--gate-size) * .74);
       height: 7px;
   }

   .exit-left,
   .exit-right {
       top: calc(8px + var(--gate-index) * var(--gate-size) + var(--gate-size) * .13);
       width: 7px;
       height: calc(var(--gate-size) * .74);
       background:
           linear-gradient(180deg,
               color-mix(in srgb, var(--gate-color), white 56%),
               var(--gate-color) 25% 75%,
               color-mix(in srgb, var(--gate-color), white 56%));
   }

   .exit-top {
       top: -7px
   }

   .exit-bottom {
       bottom: -7px
   }

   .exit-left {
       left: -7px
   }

   .exit-right {
       right: -7px
   }

   .exit-gate::after {
       content: "SORTIE";
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       color: #fff;
       text-shadow: 0 1px 2px #000, 0 0 6px var(--gate-color);
       font: 900 5px Arial, sans-serif;
       letter-spacing: .06em;
       white-space: nowrap;
       pointer-events: none;
   }

   .exit-left::after,
   .exit-right::after {
       transform: translate(-50%, -50%) rotate(90deg);
   }

   .exit-gate:hover,
   .exit-gate.exit-hover {
       transform: scale(1.15);
       filter: brightness(1.22);
       box-shadow:
           0 0 7px #fff,
           0 0 18px var(--gate-color),
           0 0 30px var(--gate-color);
   }

   .exit-gate.exit-ready {
       animation: exitReadyPulse .75s ease-in-out infinite alternate;
   }

   .exit-gate.exit-scoring {
       animation: exitScoreBurst .38s ease-out forwards !important;
   }

   @keyframes exitReadyPulse {
       to {
           filter: brightness(1.26);
           box-shadow:
               0 0 8px #fff,
               0 0 20px var(--gate-color),
               0 0 34px var(--gate-color);
       }
   }

   @keyframes exitScoreBurst {
       0% {
           transform: scale(1)
       }

       55% {
           transform: scale(1.65);
           filter: brightness(1.8)
       }

       100% {
           transform: scale(.7);
           opacity: 0
       }
   }

   @media(max-width:1060px) {
       .score-card {
           min-width: 92px !important;
       }

       .score-actions i {
           font-size: 8px;
       }
   }

   @media(max-width:880px) {
       .score-card {
           min-width: 70px !important;
           padding: 3px !important;
       }

       .score-card .name-wrap {
           display: block !important;
           max-width: 42px;
       }

       .score-actions>span {
           height: 18px;
           gap: 1px;
       }

       .score-actions i {
           display: none;
       }
   }


   /* ===== V22.17 — sorties reliées, deck visible et finition graphique ===== */

   :root {
       --font-ui: "Trebuchet MS", "Avenir Next", Arial, sans-serif;
       --font-display: "Trebuchet MS", "Avenir Next Condensed", "Arial Narrow", Arial, sans-serif;
   }

   body,
   button,
   input,
   select {
       font-family: var(--font-ui);
   }

   .logo,
   .panel-title,
   .phase-label,
   .score-card strong,
   .action-copy strong,
   .topbar .turn-badge {
       font-family: var(--font-display);
       letter-spacing: .06em;
   }

   .topbar {
       background:
           radial-gradient(circle at 15% 0, rgba(115, 211, 255, .10), transparent 26%),
           radial-gradient(circle at 85% 0, rgba(255, 221, 134, .10), transparent 24%),
           linear-gradient(180deg, rgba(19, 44, 71, .98), rgba(8, 21, 38, .98)) !important;
   }

   .score-card {
       border-color: rgba(241, 210, 137, .54) !important;
       backdrop-filter: blur(9px);
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
           rgba(10, 22, 37, .72) !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .12),
           0 10px 18px rgba(0, 0, 0, .20),
           0 0 0 1px rgba(255, 255, 255, .03) !important;
   }

   .score-card small {
       margin-top: 3px;
       color: #cbd9e5 !important;
       font-size: 8px !important;
       letter-spacing: .04em;
   }

   .score-actions {
       gap: 4px !important;
       margin-top: 2px;
   }

   .score-actions>span {
       height: 22px !important;
       gap: 4px !important;
       border-radius: 7px !important;
       background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)) !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .11),
           inset 0 -2px 0 color-mix(in srgb, var(--pcolor), transparent 50%) !important;
   }

   .score-actions em {
       font-style: normal;
       color: #ffd98c;
       font: 900 9px var(--font-display);
       letter-spacing: .04em;
   }

   .score-actions b {
       font-size: 10px !important;
   }

   .action-banner {
       border-color: rgba(244, 212, 139, .62) !important;
       background:
           radial-gradient(circle at 100% 0, rgba(255, 255, 255, .08), transparent 33%),
           linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
           rgba(8, 22, 37, .72) !important;
       backdrop-filter: blur(10px);
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .12),
           0 11px 22px rgba(0, 0, 0, .22) !important;
   }

   .action-copy strong {
       font-size: 12px !important;
   }

   .action-copy span,
   .action-reserve {
       font-size: 9px !important;
       letter-spacing: .04em;
   }

   .all-action {
       font-size: 8px !important;
       letter-spacing: .08em;
   }

   .deck-widget {
       margin-top: 8px;
       padding: 7px 8px;
       display: flex;
       align-items: center;
       gap: 10px;
       border-radius: 10px;
       border: 1px solid rgba(255, 229, 162, .38);
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
           rgba(13, 27, 43, .58);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
   }

   .deck-stack-visual {
       position: relative;
       width: 30px;
       height: 34px;
       flex: none;
   }

   .deck-stack-visual span {
       position: absolute;
       inset: 0;
       border-radius: 8px;
       border: 1px solid rgba(255, 234, 172, .75);
       background:
           radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .24), transparent 32%),
           linear-gradient(180deg, #214569, #12273e);
       box-shadow: 0 0 12px rgba(115, 207, 255, .16);
   }

   .deck-stack-visual span:nth-child(1) {
       transform: translate(-5px, 3px) rotate(-8deg)
   }

   .deck-stack-visual span:nth-child(2) {
       transform: translate(-1px, 1px) rotate(-3deg)
   }

   .deck-stack-visual span:nth-child(3) {
       transform: translate(4px, -2px) rotate(4deg);
       border-color: #ffe4a0;
       box-shadow: 0 0 15px rgba(255, 216, 123, .20);
   }

   .deck-copy small {
       display: block;
       color: #a8bdd0;
       font-size: 8px;
       letter-spacing: .10em;
       text-transform: uppercase;
   }

   .deck-copy strong {
       display: block;
       color: #fff4d0;
       font: 900 11px var(--font-display);
       letter-spacing: .05em;
   }

   .board-wrap {
       filter: drop-shadow(0 22px 26px rgba(3, 10, 20, .22));
   }

   #board {
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .12),
           0 12px 28px rgba(4, 15, 28, .26),
           0 0 0 1px rgba(255, 255, 255, .03) !important;
   }

   .cell.land {
       transition: filter .16s ease, transform .16s ease, box-shadow .16s ease !important;
   }

   .cell.land:hover {
       transform: translateY(-1px);
       box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
   }

   .exit-gate {
       --gate-size: calc((100% - 16px) / 11);
       border-radius: 999px !important;
   }

   .exit-top,
   .exit-bottom {
       left: calc(8px + var(--gate-index) * var(--gate-size) - var(--gate-size) * .08) !important;
       width: calc(var(--gate-size) * 1.04) !important;
       height: 8px !important;
   }

   .exit-left,
   .exit-right {
       top: calc(8px + var(--gate-index) * var(--gate-size) - var(--gate-size) * .08) !important;
       width: 8px !important;
       height: calc(var(--gate-size) * 1.04) !important;
   }

   .exit-top {
       top: -8px !important
   }

   .exit-bottom {
       bottom: -8px !important
   }

   .exit-left {
       left: -8px !important
   }

   .exit-right {
       right: -8px !important
   }

   .exit-gate::after {
       content: "";
   }

   .exit-corner {
       position: absolute;
       z-index: 45;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background:
           radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gate-color), white 55%), var(--gate-color) 60%, color-mix(in srgb, var(--gate-color), #0b1625 35%) 100%);
       box-shadow:
           0 0 6px #fff,
           0 0 16px var(--gate-color),
           0 0 24px color-mix(in srgb, var(--gate-color), transparent 30%);
       pointer-events: none;
   }

   .corner-top-left {
       left: -9px;
       top: -9px
   }

   .corner-top-right {
       right: -9px;
       top: -9px
   }

   .corner-bottom-left {
       left: -9px;
       bottom: -9px
   }

   .corner-bottom-right {
       right: -9px;
       bottom: -9px
   }

   .village-owner-mark {
       font-size: 7px !important;
       letter-spacing: .04em;
   }

   .phase-bar {
       font-size: 11px;
       letter-spacing: .05em;
   }

   .small-btn,
   .primary-btn {
       font-family: var(--font-display);
       letter-spacing: .05em;
   }

   .unit-card p {
       letter-spacing: .015em;
       line-height: 1.35;
   }

   .push-target-preview::before {
       content: "Poussée";
       font-size: 7px !important;
   }

   .move-target-preview::after {
       content: "Arrivée";
       font-size: 7px !important;
   }

   @media(max-width:920px) {
       .deck-widget {
           gap: 7px;
           padding: 6px;
       }

       .deck-copy strong {
           font-size: 10px;
       }

       .score-actions>span {
           height: 20px !important;
       }
   }


   /* ===== V22.17.1 — deck au-dessus d'annuler, actions recolorées, grand L ===== */

   .right-panel {
       gap: 10px;
   }

   .action-list {
       gap: 10px !important;
   }

   .action-banner {
       min-height: 112px !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .18),
           0 10px 18px rgba(0, 0, 0, .24) !important;
   }

   .action-move {
       background:
           radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 28%),
           linear-gradient(180deg, #5fc7ff, #2791d4 58%, #195f92) !important;
       border-color: rgba(185, 238, 255, .68) !important;
   }

   .action-push {
       background:
           radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 28%),
           linear-gradient(180deg, #ffb056, #e06b29 58%, #8d391f) !important;
       border-color: rgba(255, 219, 169, .68) !important;
   }

   .action-magic {
       background:
           radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .18), transparent 28%),
           linear-gradient(180deg, #b18cff, #7657d3 58%, #422c85) !important;
       border-color: rgba(224, 198, 255, .72) !important;
   }

   .action-copy strong {
       font: 900 14px var(--font-display) !important;
       letter-spacing: .06em !important;
       text-transform: uppercase;
       color: #fff8df !important;
   }

   .action-copy span {
       font: 900 16px var(--font-display) !important;
       color: #ffffff !important;
       text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
   }

   .action-reserve {
       font: 800 9px var(--font-ui) !important;
       letter-spacing: .05em !important;
       text-transform: uppercase;
       color: rgba(255, 249, 232, .90) !important;
   }

   .all-action {
       background: rgba(7, 17, 31, .34) !important;
       color: #fff4c6 !important;
       font: 900 9px var(--font-display) !important;
       letter-spacing: .08em !important;
   }

   .deck-display {
       margin-top: 2px;
   }

   .deck-widget {
       margin-top: 0 !important;
       padding: 8px 9px !important;
       border-radius: 12px !important;
       background:
           radial-gradient(circle at 100% 0, rgba(255, 255, 255, .11), transparent 32%),
           linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)),
           rgba(9, 23, 38, .68) !important;
       border: 1px solid rgba(255, 229, 162, .44) !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .11),
           0 8px 16px rgba(0, 0, 0, .18) !important;
   }

   .deck-copy small {
       font: 800 8px var(--font-ui) !important;
       letter-spacing: .12em !important;
   }

   .deck-copy strong {
       font: 900 12px var(--font-display) !important;
       letter-spacing: .05em !important;
   }

   .action-buttons {
       margin-top: 0 !important;
   }

   .exit-corner {
       width: 36px !important;
       height: 36px !important;
       border-radius: 0 !important;
       background: none !important;
       box-shadow: none !important;
       overflow: visible;
       pointer-events: none;
   }

   .exit-corner::before,
   .exit-corner::after {
       content: "";
       position: absolute;
       border-radius: 999px;
       background: linear-gradient(180deg,
               color-mix(in srgb, var(--gate-color), white 56%),
               var(--gate-color) 30% 72%,
               color-mix(in srgb, var(--gate-color), white 56%));
       box-shadow:
           0 0 6px #fff,
           0 0 16px var(--gate-color),
           0 0 24px color-mix(in srgb, var(--gate-color), transparent 30%);
   }

   .corner-top-left {
       left: -8px !important;
       top: -8px !important
   }

   .corner-top-right {
       right: -8px !important;
       top: -8px !important
   }

   .corner-bottom-left {
       left: -8px !important;
       bottom: -8px !important
   }

   .corner-bottom-right {
       right: -8px !important;
       bottom: -8px !important
   }

   .corner-top-left::before,
   .corner-top-right::before,
   .corner-bottom-left::before,
   .corner-bottom-right::before {
       width: 10px;
       height: 36px;
       left: 13px;
       top: 0;
   }

   .corner-top-left::after,
   .corner-top-right::after,
   .corner-bottom-left::after,
   .corner-bottom-right::after {
       width: 36px;
       height: 10px;
       left: 0;
       top: 13px;
   }


   /* ===== V22.17.2 — accueil amélioré + grand angle de sortie ===== */

   #setupScreen {
       position: relative;
       overflow: hidden;
       background:
           radial-gradient(circle at 20% 10%, rgba(117, 214, 255, .11), transparent 22%),
           radial-gradient(circle at 80% 0, rgba(255, 215, 132, .10), transparent 26%),
           radial-gradient(circle at 50% 100%, rgba(143, 118, 255, .08), transparent 30%);
   }

   #setupScreen::before,
   #setupScreen::after {
       content: "";
       position: absolute;
       inset: auto;
       width: 34vw;
       height: 34vw;
       border-radius: 50%;
       pointer-events: none;
       filter: blur(40px);
       opacity: .26;
   }

   #setupScreen::before {
       left: -8vw;
       top: -10vw;
       background: radial-gradient(circle, #59cfff, transparent 62%);
   }

   #setupScreen::after {
       right: -10vw;
       bottom: -12vw;
       background: radial-gradient(circle, #8c6dff, transparent 62%);
   }

   .setup-card {
       width: min(860px, 94vw) !important;
       padding: 34px 38px 32px !important;
       border-radius: 30px !important;
       background:
           radial-gradient(circle at 50% 0%, rgba(126, 217, 255, .16), transparent 38%),
           radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .06), transparent 30%),
           linear-gradient(180deg, rgba(22, 45, 74, .97), rgba(7, 17, 32, .99)) !important;
       box-shadow:
           inset 0 0 0 2px rgba(247, 212, 129, .60),
           inset 0 1px 0 rgba(255, 255, 255, .08),
           0 28px 70px rgba(15, 45, 80, .48) !important;
       backdrop-filter: blur(10px);
   }

   .setup-card::before {
       background:
           linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, .08) 42%, transparent 58%),
           radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .04), transparent 40%) !important;
   }

   .setup-stars {
       margin-bottom: 6px;
       text-align: center;
       color: #bceeff;
       font: 900 14px var(--font-display);
       letter-spacing: .65em;
       text-shadow: 0 0 10px rgba(130, 226, 255, .5);
   }

   .logo {
       font-family: var(--font-display) !important;
       font-size: clamp(58px, 8vw, 96px) !important;
       letter-spacing: .14em !important;
       text-transform: uppercase;
   }

   .subtitle {
       margin: 0 0 10px !important;
       color: #d7efff !important;
       font: 800 12px var(--font-ui) !important;
       letter-spacing: .34em !important;
   }

   .intro {
       display: block !important;
       max-width: 680px;
       margin: 0 auto 18px;
       text-align: center;
       color: #e5f3ff;
       font: 600 14px/1.55 var(--font-ui);
       letter-spacing: .015em;
       text-wrap: balance;
       opacity: 1;
   }

   .setup-highlights {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 10px;
       margin: 0 auto 18px;
       max-width: 720px;
   }

   .setup-badge {
       padding: 12px 10px;
       border-radius: 14px;
       border: 1px solid rgba(255, 229, 164, .26);
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)),
           rgba(9, 24, 40, .48);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
       text-align: center;
   }

   .setup-badge strong {
       display: block;
       color: #fff2c4;
       font: 900 18px var(--font-display);
       letter-spacing: .08em;
   }

   .setup-badge span {
       display: block;
       margin-top: 2px;
       color: #bdd4e7;
       font: 800 10px var(--font-ui);
       text-transform: uppercase;
       letter-spacing: .11em;
   }

   .setup-config {
       max-width: 760px;
       margin: 0 auto;
       padding: 14px 16px 16px;
       border: 1px solid rgba(255, 233, 177, .20);
       border-radius: 18px;
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
           rgba(6, 18, 31, .34);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
   }

   .setup-row {
       margin: 2px 0 16px !important;
       justify-content: flex-start !important;
       gap: 16px !important;
   }

   .setup-row label {
       min-width: 86px;
       font: 900 11px var(--font-display) !important;
       letter-spacing: .12em !important;
   }

   select,
   .player-name {
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
           #071426 !important;
       border-color: rgba(255, 229, 164, .46) !important;
       border-radius: 12px !important;
       font: 700 14px var(--font-ui);
   }

   .players-form {
       gap: 10px !important;
   }

   .player-field {
       padding: 10px 11px !important;
       border-radius: 14px !important;
       background:
           linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)),
           rgba(255, 255, 255, .04) !important;
       border-color: rgba(255, 255, 255, .10) !important;
   }

   .player-dot {
       width: 24px !important;
       height: 24px !important;
   }

   .setup-actions {
       margin-top: 20px !important;
   }

   .setup-actions .primary-btn {
       min-width: 220px;
   }

   .setup-actions .secondary-btn {
       min-width: 122px;
   }

   /* grand angle de sortie couvrant les 3 cases du coin */
   .exit-corner {
       --gate-size: calc((100% - 16px) / 11);
       width: calc(var(--gate-size) * 2.12) !important;
       height: calc(var(--gate-size) * 2.12) !important;
       border-radius: 0 !important;
       background: none !important;
       box-shadow: none !important;
       overflow: visible;
       pointer-events: none;
   }

   .exit-corner::before,
   .exit-corner::after {
       content: "";
       position: absolute;
       border-radius: 999px;
       background: linear-gradient(180deg,
               color-mix(in srgb, var(--gate-color), white 60%),
               var(--gate-color) 32% 72%,
               color-mix(in srgb, var(--gate-color), white 60%));
       box-shadow:
           0 0 6px #fff,
           0 0 15px var(--gate-color),
           0 0 24px color-mix(in srgb, var(--gate-color), transparent 32%);
   }

   .corner-top-left {
       left: -8px !important;
       top: -8px !important
   }

   .corner-top-right {
       right: -8px !important;
       top: -8px !important
   }

   .corner-bottom-left {
       left: -8px !important;
       bottom: -8px !important
   }

   .corner-bottom-right {
       right: -8px !important;
       bottom: -8px !important
   }

   .corner-top-left::before,
   .corner-top-right::before,
   .corner-bottom-left::before,
   .corner-bottom-right::before {
       width: 10px;
       height: calc(var(--gate-size) * 2.12);
       left: 0;
       top: 0;
   }

   .corner-top-left::after,
   .corner-top-right::after,
   .corner-bottom-left::after,
   .corner-bottom-right::after {
       width: calc(var(--gate-size) * 2.12);
       height: 10px;
       left: 0;
       top: 0;
   }

   .corner-top-right::before,
   .corner-bottom-right::before {
       left: calc(var(--gate-size) * 2.12 - 10px);
   }

   .corner-bottom-left::after,
   .corner-bottom-right::after {
       top: calc(var(--gate-size) * 2.12 - 10px);
   }

   @media(max-width:860px) {
       .setup-card {
           padding: 28px 20px 24px !important;
       }

       .setup-highlights {
           grid-template-columns: 1fr;
       }

       .setup-config {
           padding: 12px;
       }

       .setup-row {
           flex-direction: column;
           align-items: stretch !important;
           gap: 8px !important;
       }

       .setup-row label {
           min-width: 0;
       }

       .players-form {
           grid-template-columns: 1fr !important;
       }

       .setup-actions {
           flex-direction: column;
           align-items: stretch;
       }

       .setup-actions .primary-btn,
       .setup-actions .secondary-btn {
           min-width: 0;
           width: 100%;
       }
   }


   /* ===== V22.17.3 — accueil simplifié + sorties réalignées ===== */

   .setup-highlights {
       display: none !important;
   }

   .intro {
       margin: 0 auto 16px !important;
       max-width: 700px !important;
   }

   .setup-config {
       margin-top: 6px !important;
   }

   /* réalignement précis des zones de sortie sur les cases adjacentes */
   .exit-gate {
       --gate-size: calc((100% - 16px) / 11);
   }

   .exit-top,
   .exit-bottom {
       left: calc(8px + var(--gate-index) * var(--gate-size) + 1px) !important;
       width: calc(var(--gate-size) - 2px) !important;
       height: 8px !important;
   }

   .exit-left,
   .exit-right {
       top: calc(8px + var(--gate-index) * var(--gate-size) + 1px) !important;
       width: 8px !important;
       height: calc(var(--gate-size) - 2px) !important;
   }

   .exit-top {
       top: -8px !important
   }

   .exit-bottom {
       bottom: -8px !important
   }

   .exit-left {
       left: -8px !important
   }

   .exit-right {
       right: -8px !important
   }

   /* grand angle sur la case de village, qui rejoint les deux barres adjacentes */
   .exit-corner {
       --gate-size: calc((100% - 16px) / 11);
       width: calc(var(--gate-size) + 8px) !important;
       height: calc(var(--gate-size) + 8px) !important;
       background: none !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       pointer-events: none;
       overflow: visible;
   }

   .corner-top-left {
       left: 0 !important;
       top: 0 !important;
   }

   .corner-top-right {
       right: 0 !important;
       top: 0 !important;
   }

   .corner-bottom-left {
       left: 0 !important;
       bottom: 0 !important;
   }

   .corner-bottom-right {
       right: 0 !important;
       bottom: 0 !important;
   }

   .exit-corner::before,
   .exit-corner::after {
       content: "";
       position: absolute;
       border-radius: 999px;
       background: linear-gradient(180deg,
               color-mix(in srgb, var(--gate-color), white 60%),
               var(--gate-color) 32% 72%,
               color-mix(in srgb, var(--gate-color), white 60%));
       box-shadow:
           0 0 6px #fff,
           0 0 15px var(--gate-color),
           0 0 24px color-mix(in srgb, var(--gate-color), transparent 32%);
   }

   /* bras verticaux */
   .corner-top-left::before,
   .corner-bottom-left::before {
       left: 0;
       width: 9px;
       height: calc(var(--gate-size) + 8px);
       top: 0;
   }

   .corner-top-right::before,
   .corner-bottom-right::before {
       right: 0;
       width: 9px;
       height: calc(var(--gate-size) + 8px);
       top: 0;
   }

   /* bras horizontaux */
   .corner-top-left::after,
   .corner-top-right::after {
       top: 0;
       height: 9px;
       width: calc(var(--gate-size) + 8px);
       left: 0;
   }

   .corner-bottom-left::after,
   .corner-bottom-right::after {
       bottom: 0;
       height: 9px;
       width: calc(var(--gate-size) + 8px);
       left: 0;
   }


   /* ===== V22.18 — chronomètre 3 minutes + mode solo contre l'ordinateur ===== */

   .turn-heading {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 9px;
   }

   .turn-timer {
       min-width: 58px;
       padding: 3px 7px;
       border-radius: 8px;
       border: 1px solid rgba(153, 229, 255, .48);
       color: #dff8ff;
       background:
           linear-gradient(180deg, rgba(91, 204, 239, .18), rgba(11, 31, 48, .62));
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .13),
           0 0 10px rgba(82, 211, 255, .17);
       font: 900 13px var(--font-display);
       letter-spacing: .08em;
       text-align: center;
       font-variant-numeric: tabular-nums;
   }

   .turn-timer.warning {
       color: #ffe59c;
       border-color: rgba(255, 204, 84, .72);
       background: linear-gradient(180deg, rgba(255, 183, 54, .24), rgba(65, 38, 9, .64));
       box-shadow: 0 0 13px rgba(255, 178, 45, .35);
   }

   .turn-timer.danger {
       color: #fff;
       border-color: #ff8b80;
       background: linear-gradient(180deg, #d95850, #7d211d);
       box-shadow: 0 0 17px rgba(255, 77, 69, .66);
       animation: timerDanger .48s ease-in-out infinite alternate;
   }

   .ai-player-field {
       position: relative;
       border-color: rgba(159, 130, 255, .34) !important;
       background:
           radial-gradient(circle at 90% 20%, rgba(165, 132, 255, .15), transparent 35%),
           linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)) !important;
   }

   .ai-dot {
       box-shadow:
           0 0 13px currentColor,
           0 0 24px color-mix(in srgb, currentColor, transparent 40%) !important;
   }

   .ai-player-name {
       min-width: 0;
       flex: 1;
   }

   .ai-player-name b {
       display: block;
       color: #f1e9ff;
       font: 900 13px var(--font-display);
       letter-spacing: .08em;
   }

   .ai-player-name small {
       display: block;
       margin-top: 2px;
       color: #bcb1d5;
       font: 700 9px var(--font-ui);
   }

   .ai-chip {
       flex: none;
       padding: 4px 7px;
       border-radius: 999px;
       color: #fff;
       background: linear-gradient(180deg, #9675e9, #5d3ca5);
       border: 1px solid #d8c7ff;
       box-shadow: 0 0 11px rgba(151, 111, 239, .42);
       font: 900 9px var(--font-display);
   }

   #gameScreen.ai-turn .topbar {
       background:
           radial-gradient(circle at 18% 0, rgba(164, 124, 255, .17), transparent 30%),
           linear-gradient(180deg, rgba(34, 34, 78, .98), rgba(12, 17, 43, .98)) !important;
   }

   #gameScreen.ai-turn .right-panel,
   #gameScreen.ai-turn .left-panel {
       filter: saturate(.72) brightness(.86);
   }

   #gameScreen.ai-turn .board-wrap::before {
       content: "L’ORDINATEUR JOUE";
       position: absolute;
       left: 50%;
       top: 2%;
       z-index: 90;
       transform: translateX(-50%);
       padding: 6px 12px;
       border-radius: 999px;
       color: #f3eaff;
       background: rgba(48, 28, 91, .88);
       border: 1px solid rgba(211, 191, 255, .67);
       box-shadow: 0 0 18px rgba(153, 107, 255, .42);
       font: 900 9px var(--font-display);
       letter-spacing: .12em;
       pointer-events: none;
       animation: aiThinking 1s ease-in-out infinite alternate;
   }

   #gameScreen.ai-turn .island-choice,
   #gameScreen.ai-turn .action-banner,
   #gameScreen.ai-turn .exit-gate {
       pointer-events: none !important;
   }

   @keyframes timerDanger {
       to {
           transform: scale(1.07);
           filter: brightness(1.18)
       }
   }

   @keyframes aiThinking {
       to {
           transform: translateX(-50%) translateY(2px);
           filter: brightness(1.16);
           box-shadow: 0 0 25px rgba(153, 107, 255, .62);
       }
   }

   @media(max-width:880px) {
       .turn-heading {
           gap: 4px
       }

       .turn-timer {
           min-width: 48px;
           padding: 2px 4px;
           font-size: 10px
       }

       #gameScreen.ai-turn .board-wrap::before {
           font-size: 7px;
           padding: 4px 7px
       }
   }


   /* ===== V22.19 — difficultés IA, jeu en ligne, vol de couronne et force de poussée ===== */

   .mode-options {
       margin-top: 12px;
   }

   .mode-option-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 16px;
       padding: 11px 12px;
       border-radius: 13px;
       border: 1px solid rgba(255, 229, 164, .24);
       background: rgba(255, 255, 255, .035);
   }

   .mode-option-row>span {
       min-width: 0;
   }

   .mode-option-row b {
       display: block;
       color: #fff1bd;
       font: 900 11px var(--font-display);
       letter-spacing: .07em;
       text-transform: uppercase;
   }

   .mode-option-row small {
       display: block;
       margin-top: 3px;
       color: #b8cbdc;
       font-size: 9px;
   }

   .mode-option-row select {
       min-width: 160px;
   }

   .online-setup-panel {
       padding: 12px;
       border-radius: 15px;
       border: 1px solid rgba(132, 222, 255, .30);
       background:
           radial-gradient(circle at 100% 0, rgba(75, 194, 255, .11), transparent 36%),
           rgba(5, 19, 34, .42);
   }

   .online-choice-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
   }

   .online-choice-row label>span {
       display: block;
       margin-bottom: 5px;
       color: #dff7ff;
       font: 900 9px var(--font-display);
       letter-spacing: .08em;
       text-transform: uppercase;
   }

   .online-choice-row select,
   .online-room-input {
       width: 100%;
   }

   .online-room-input {
       border: 1px solid rgba(255, 229, 164, .42);
       border-radius: 11px;
       background: #071426;
       color: #fff;
       padding: 10px 13px;
       outline: none;
       font: 900 14px var(--font-display);
       letter-spacing: .12em;
       text-transform: uppercase;
   }

   .online-setup-status {
       margin: 10px 0 0;
       color: #b8d2e3;
       font-size: 10px;
       line-height: 1.4;
       text-align: center;
   }

   .online-setup-status.success {
       color: #aef0bf
   }

   .online-setup-status.error {
       color: #ffaaa3
   }

   .resume-online-btn {
       width: 100%;
       margin-top: 9px;
       padding: 9px;
       border: 1px solid rgba(210, 190, 255, .60);
       border-radius: 10px;
       color: #f5edff;
       background: linear-gradient(180deg, #6d55b7, #443078);
       box-shadow: 0 3px 0 #2c1d51;
       font: 900 10px var(--font-display);
       letter-spacing: .07em;
   }

   .online-badge {
       padding: 3px 7px;
       border-radius: 999px;
       color: #dff9ff;
       background: rgba(19, 72, 91, .74);
       border: 1px solid rgba(126, 228, 255, .60);
       box-shadow: 0 0 10px rgba(80, 208, 239, .28);
       font: 900 7px var(--font-display);
       letter-spacing: .08em;
       white-space: nowrap;
   }

   .online-badge.waiting {
       color: #ffe6a0;
       background: rgba(91, 55, 13, .76);
       border-color: rgba(255, 197, 70, .70);
       box-shadow: 0 0 12px rgba(255, 174, 47, .32);
       animation: onlineWaiting .8s ease-in-out infinite alternate;
   }

   .online-badge.connected {
       color: #e7ffed;
       background: rgba(16, 94, 49, .72);
       border-color: rgba(105, 238, 145, .70);
       box-shadow: 0 0 12px rgba(80, 225, 125, .30);
   }

   .push-force-picker {
       position: relative;
       z-index: 4;
       grid-column: 2 / 4;
       grid-row: 2;
       display: grid;
       grid-template-columns: 28px 1fr 28px;
       align-items: center;
       gap: 4px;
       margin-right: 45px;
   }

   .push-force-picker button {
       height: 25px;
       padding: 0;
       border-radius: 7px;
       border: 1px solid rgba(255, 244, 211, .56);
       color: #fff;
       background: rgba(58, 25, 5, .42);
       font: 900 16px var(--font-display);
       line-height: 1;
   }

   .push-force-picker span {
       height: 25px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 5px;
       border-radius: 7px;
       color: #fff4d7;
       background: rgba(70, 30, 6, .38);
       border: 1px solid rgba(255, 222, 171, .25);
       font: 900 8px var(--font-display);
       letter-spacing: .07em;
       text-transform: uppercase;
   }

   .push-force-picker b {
       color: #fff;
       font-size: 13px;
   }

   .action-push .action-reserve {
       display: none;
   }

   .action-push .all-action {
       grid-row: 2;
       align-self: center;
   }

   @keyframes onlineWaiting {
       to {
           filter: brightness(1.22);
           transform: scale(1.025)
       }
   }

   @media(max-width:760px) {
       .online-choice-row {
           grid-template-columns: 1fr;
       }

       .mode-option-row {
           align-items: stretch;
           flex-direction: column;
       }

       .mode-option-row select {
           min-width: 0;
           width: 100%;
       }

       .online-badge {
           display: none;
       }
   }


   /* ===== V22.19.2 — récupération intelligente de la couronne ===== */

   .carrier-crown.opponent-crown {
       cursor: grab;
   }

   .carrier-crown.opponent-crown:hover {
       filter:
           brightness(1.28) drop-shadow(0 0 7px #fff) drop-shadow(0 0 13px #ffde72) !important;
   }

   .carrier-crown.own-crown:hover {
       filter:
           brightness(1.18) drop-shadow(0 0 8px #fff3a6) !important;
   }


   /* ===== V22.20 — rotation soulevée, double couronne et roulette de poussée ===== */
   .artifact.crown-2 {
       transform: translate(7px, -5px) scale(.90);
       filter: drop-shadow(0 0 8px rgba(255, 255, 255, .98)) drop-shadow(0 0 20px rgba(135, 222, 255, .96)) drop-shadow(0 7px 9px rgba(0, 0, 0, .34)) !important
   }

   .artifact[data-artifact-id] {
       pointer-events: auto !important;
       cursor: pointer
   }

   .island-art {
       transform-box: fill-box;
       transform-origin: center
   }

   .island-art.island-lift-rotate {
       animation: islandLiftRotate .50s cubic-bezier(.20, .78, .24, 1) forwards;
       filter: drop-shadow(0 18px 15px rgba(0, 0, 0, .40)) drop-shadow(0 0 12px rgba(196, 132, 255, .60))
   }

   .cell.island-lift-cell {
       animation: islandLiftCell .50s ease-in-out forwards;
       z-index: 34 !important
   }

   .action-push::after {
       content: "Roulette : régler la force";
       position: absolute;
       left: 50%;
       bottom: 4px;
       transform: translateX(-50%);
       color: rgba(255, 247, 221, .76);
       font: 800 6px var(--font-ui);
       letter-spacing: .07em;
       text-transform: uppercase;
       pointer-events: none;
       white-space: nowrap
   }

   .action-push:hover {
       box-shadow: inset 0 0 0 2px rgba(255, 245, 211, .62), 0 0 19px rgba(255, 137, 51, .42), 0 12px 20px rgba(0, 0, 0, .28) !important
   }

   @keyframes islandLiftRotate {
       0% {
           transform: translateY(0) scale(1) rotate(0deg);
           opacity: 1
       }

       38% {
           transform: translateY(-.32px) scale(1.035) rotate(0deg);
           filter: brightness(1.20) drop-shadow(0 22px 16px rgba(0, 0, 0, .45)) drop-shadow(0 0 15px rgba(196, 132, 255, .74))
       }

       100% {
           transform: translateY(-.38px) scale(1.025) rotate(var(--island-turn));
           opacity: .12
       }
   }

   @keyframes islandLiftCell {
       0% {
           transform: translateY(0);
           filter: none
       }

       42% {
           transform: translateY(-6px);
           filter: brightness(1.16)
       }

       100% {
           transform: translateY(-7px);
           filter: brightness(1.10);
           opacity: .24
       }
   }


   /* ===== V22.21 — stratégie avancée de couronne pour l'ordinateur ===== */

   #gameScreen.ai-turn .carrier-crown,
   #gameScreen.ai-turn .artifact {
       filter:
           brightness(1.18) drop-shadow(0 0 8px rgba(255, 255, 255, .88)) drop-shadow(0 0 17px rgba(255, 218, 91, .82));
   }

   #gameScreen.ai-turn .action-push {
       box-shadow:
           inset 0 0 0 1px rgba(255, 241, 206, .36),
           0 0 16px rgba(255, 137, 51, .22),
           0 10px 18px rgba(0, 0, 0, .22) !important;
   }


   /* ===== V22.22 — audit stabilité, reprise, connexion et lisibilité ===== */

   .crown-status {
       min-width: 88px;
       padding: 3px 7px;
       border-radius: 8px;
       color: #fff0ad;
       background: linear-gradient(180deg, rgba(255, 198, 74, .18), rgba(56, 36, 8, .55));
       border: 1px solid rgba(255, 218, 116, .55);
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 10px rgba(255, 190, 49, .18);
       font: 900 9px var(--font-display);
       letter-spacing: .04em;
       white-space: nowrap;
   }

   .resume-local-panel {
       margin-top: 12px;
       display: grid;
       grid-template-columns: 1fr auto auto;
       align-items: center;
       gap: 8px;
       padding: 10px;
       border-radius: 13px;
       border: 1px solid rgba(132, 225, 255, .34);
       background:
           radial-gradient(circle at 100% 0, rgba(85, 205, 255, .12), transparent 38%),
           rgba(6, 21, 36, .48);
   }

   .resume-local-copy {
       min-width: 0;
   }

   .resume-local-copy strong,
   .resume-local-copy small {
       display: block;
   }

   .resume-local-copy strong {
       color: #e8f9ff;
       font: 900 10px var(--font-display);
       letter-spacing: .05em;
       text-transform: uppercase;
   }

   .resume-local-copy small {
       margin-top: 3px;
       color: #aec7d9;
       font-size: 8px;
   }

   #resumeLocalBtn,
   #deleteLocalSaveBtn {
       padding: 7px 9px;
       border-radius: 9px;
       border: 1px solid rgba(216, 239, 255, .46);
       color: #fff;
       background: linear-gradient(180deg, #2e7292, #18455f);
       font: 900 9px var(--font-display);
   }

   #deleteLocalSaveBtn {
       width: 29px;
       padding: 7px 0;
       color: #ffd3ce;
       background: linear-gradient(180deg, #8c4944, #5b2724);
   }

   .online-tools {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 5px;
       margin-top: 8px;
       padding: 7px;
       border-radius: 10px;
       border: 1px solid rgba(120, 225, 255, .26);
       background: rgba(5, 20, 34, .47);
   }

   .online-tools>div {
       grid-row: span 2;
       align-self: center;
       min-width: 0;
   }

   .online-tools small,
   .online-tools strong {
       display: block;
   }

   .online-tools small {
       color: #91afc3;
       font-size: 7px;
       letter-spacing: .12em;
       text-transform: uppercase;
   }

   .online-tools strong {
       margin-top: 2px;
       color: #dffaff;
       font: 900 11px var(--font-display);
       letter-spacing: .13em;
   }

   .online-tool-btn {
       min-width: 70px;
       padding: 5px 7px;
       border-radius: 7px;
       border: 1px solid rgba(170, 230, 255, .42);
       color: #edfaff;
       background: linear-gradient(180deg, #285f7a, #173c52);
       font: 900 7px var(--font-display);
       letter-spacing: .05em;
   }

   .push-line-preview {
       z-index: 16 !important;
       box-shadow:
           inset 0 0 0 3px rgba(255, 222, 139, .88),
           inset 0 0 15px rgba(255, 154, 39, .27),
           0 0 13px rgba(255, 160, 47, .40) !important;
   }

   .push-fall-preview {
       background: rgba(208, 53, 57, .30) !important;
       box-shadow:
           inset 0 0 0 4px #ff9c94,
           0 0 18px rgba(255, 68, 61, .68) !important;
   }

   .push-fall-preview::after {
       content: "CHUTE";
       position: absolute;
       left: 50%;
       top: 6%;
       transform: translateX(-50%);
       padding: 2px 4px;
       border-radius: 5px;
       color: #fff;
       background: rgba(101, 15, 14, .84);
       font: 900 6px var(--font-display);
       letter-spacing: .07em;
       z-index: 28;
       pointer-events: none;
   }

   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
       outline: 3px solid #8eeaff !important;
       outline-offset: 2px;
   }

   @media(prefers-reduced-motion:reduce) {

       *,
       *::before,
       *::after {
           animation-duration: .001ms !important;
           animation-iteration-count: 1 !important;
           scroll-behavior: auto !important;
           transition-duration: .001ms !important;
       }
   }

   @media(max-width:980px) {
       .crown-status {
           display: none
       }

       .online-tools {
           grid-template-columns: 1fr
       }

       .online-tools>div {
           grid-row: auto
       }

       .online-tool-btn {
           width: 100%
       }
   }


   /* ===== V22.22.8 — nettoyage visuel IA sans toucher aux personnages ===== */

   #gameScreen.ai-turn .board-wrap::before {
       inset: auto !important;
       left: 50% !important;
       right: auto !important;
       top: 2% !important;
       bottom: auto !important;
       width: max-content !important;
       height: auto !important;
       max-width: 80% !important;
       filter: none !important;
       transform: translateX(-50%) !important;
       border-radius: 12px !important;
       background: rgba(13, 26, 43, .97) !important;
       box-shadow: 0 5px 14px rgba(0, 0, 0, .38) !important;
   }

   #gameScreen.ai-turn .cell.fx-move::after,
   #gameScreen.ai-turn .cell.crown-burst::after,
   #gameScreen.ai-turn .action-ghost::after {
       content: none !important;
       display: none !important;
       animation: none !important;
   }


   /* ===== V22.22.11 — profondeur statique sans modifier les animations ===== */

   /*
   * Profondeur appliquée uniquement aux conteneurs fixes.
   * Aucune règle ne touche aux éléments animés de la magie,
   * aux îles SVG, aux personnages, aux couronnes ou aux cases.
   */

   .topbar {
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .08),
           0 10px 24px rgba(4, 12, 26, .24),
           0 0 0 1px rgba(255, 245, 202, .04);
   }

   .banner-panel {
       box-shadow:
           inset 0 0 0 1px rgba(241, 210, 137, .56),
           inset 0 18px 28px rgba(255, 255, 255, .025),
           0 15px 30px rgba(7, 27, 52, .34) !important;
   }

   .board-wrap {
       perspective: 2100px !important;
   }

   #board {
       box-shadow:
           0 1px 0 rgba(255, 255, 255, .14),
           0 16px 0 #6f879e,
           0 28px 0 #566b7f,
           0 42px 28px rgba(12, 30, 56, .24),
           0 56px 42px rgba(7, 20, 40, .27),
           inset 0 0 22px rgba(255, 255, 255, .18) !important;
   }

   #board::before {
       bottom: -34px !important;
       height: 42px !important;
       background: linear-gradient(180deg, #7e97af, #51667c) !important;
       filter: drop-shadow(0 10px 11px rgba(0, 0, 0, .18)) !important;
   }

   #board::after {
       bottom: -54px !important;
       height: 46px !important;
       background: radial-gradient(ellipse, rgba(20, 49, 82, .30), transparent 68%) !important;
       filter: blur(9px) !important;
   }


   /* ===== V22.22.12 — déplacement direct 1 à X + sorties recalées ===== */

   .action-move.active {
       box-shadow:
           inset 0 0 0 2px rgba(220, 249, 255, .86),
           0 0 19px rgba(74, 205, 255, .62),
           0 12px 22px rgba(0, 0, 0, .25) !important;
   }

   .action-move .all-action {
       min-width: 42px;
   }

   .cell.move-path-preview {
       z-index: 17 !important;
       box-shadow:
           inset 0 0 0 3px rgba(113, 234, 255, .90),
           inset 0 0 14px rgba(59, 194, 255, .20),
           0 0 13px rgba(74, 217, 255, .42) !important;
   }

   .exit-gate[style] {
       margin: 0 !important;
   }


   /* ===== V22.22.13 — sorties sur les deux bords extérieurs du Village ===== */

   /* Le grand L de raccord est supprimé. */
   .exit-corner {
       display: none !important;
   }

   /*
   * Les deux sorties couvrent exactement les deux côtés extérieurs
   * de la case Village, sans rond ni raccord supplémentaire.
   */
   .exit-gate {
       border-radius: 999px !important;
       margin: 0 !important;
       z-index: 48 !important;
   }

   .exit-top,
   .exit-bottom {
       height: 8px !important;
   }

   .exit-left,
   .exit-right {
       width: 8px !important;
   }


   /* ===== V22.22.14 — aucune sortie visible, validation sur 3 cases ===== */

   .exit-gate,
   .exit-corner {
       display: none !important;
   }

   .cell.crown-validation-ready {
       z-index: 22 !important;
       box-shadow:
           inset 0 0 0 3px rgba(255, 226, 103, .96),
           inset 0 0 18px rgba(255, 218, 79, .28),
           0 0 18px rgba(255, 218, 79, .62) !important;
   }

   .crown-score-option {
       position: absolute;
       left: 50%;
       bottom: 4%;
       z-index: 38;
       min-width: 78%;
       transform: translateX(-50%);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1px;
       padding: 4px 5px;
       border: 1px solid rgba(255, 241, 164, .95);
       border-radius: 8px;
       background:
           linear-gradient(180deg, rgba(78, 55, 11, .96), rgba(30, 22, 8, .97));
       color: #fff2a7;
       box-shadow:
           0 0 12px rgba(255, 220, 82, .72),
           0 5px 10px rgba(0, 0, 0, .42);
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .04em;
       cursor: pointer;
       pointer-events: auto;
       animation: crownValidationPulse .8s ease-in-out infinite alternate;
   }

   .crown-score-option strong {
       font-size: 8px;
       white-space: nowrap;
   }

   .crown-score-option small {
       color: #fff;
       font-size: 6px;
       font-weight: 800;
       white-space: nowrap;
   }

   .crown-score-option:hover {
       filter: brightness(1.18);
   }

   @keyframes crownValidationPulse {
       from {
           transform: translateX(-50%) translateY(0) scale(1)
       }

       to {
           transform: translateX(-50%) translateY(-2px) scale(1.04)
       }
   }


   /* ===== V22.22.15 — les 2 cases adjacentes sont visuellement intégrées au village ===== */

   .cell.village-zone-extension {
       z-index: 9;
       background:
           radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--village-color), white 42%), transparent 32%),
           linear-gradient(180deg,
               color-mix(in srgb, var(--village-color), white 14%),
               color-mix(in srgb, var(--village-color), #284331 48%),
               color-mix(in srgb, var(--village-color), #19291f 72%)) !important;
       box-shadow:
           inset 0 0 0 3px color-mix(in srgb, var(--village-color), white 15%),
           inset 0 -7px 0 color-mix(in srgb, var(--village-color), #172415 64%),
           0 0 12px color-mix(in srgb, var(--village-color), transparent 38%) !important;
   }

   .village-zone-fill {
       position: absolute;
       inset: 0;
       background:
           radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16), transparent 58%);
       pointer-events: none;
   }

   .village-zone-owner-mark {
       position: absolute;
       right: 4%;
       top: 4%;
       width: 15px;
       height: 15px;
       display: grid;
       place-items: center;
       border-radius: 50%;
       color: #fff;
       background: color-mix(in srgb, var(--village-color), #07111c 45%);
       border: 2px solid color-mix(in srgb, var(--village-color), white 42%);
       box-shadow: 0 0 8px var(--village-color);
       font: 900 7px Arial, sans-serif;
       z-index: 18;
       pointer-events: none;
   }

   .cell.village-zone-extension::before {
       content: "";
       position: absolute;
       z-index: 4;
       background: color-mix(in srgb, var(--village-color), white 16%);
       box-shadow:
           0 0 8px color-mix(in srgb, var(--village-color), transparent 35%),
           inset 0 0 0 1px rgba(255, 255, 255, .10);
       pointer-events: none;
   }

   .cell.zone-link-right::before {
       top: 20%;
       right: -1px;
       width: 26%;
       height: 60%;
       border-radius: 0 10px 10px 0;
   }

   .cell.zone-link-left::before {
       top: 20%;
       left: -1px;
       width: 26%;
       height: 60%;
       border-radius: 10px 0 0 10px;
   }

   .cell.zone-link-top::before {
       left: 20%;
       top: -1px;
       width: 60%;
       height: 26%;
       border-radius: 10px 10px 0 0;
   }

   .cell.zone-link-bottom::before {
       left: 20%;
       bottom: -1px;
       width: 60%;
       height: 26%;
       border-radius: 0 0 10px 10px;
   }


   /* ===== V22.22.16 — zone Village discrète + cycle deck/défausse ===== */

   .cell.village-zone-extension {
       z-index: 7 !important;
       background:
           linear-gradient(180deg,
               color-mix(in srgb, #add774, var(--village-color) 10%) 0%,
               color-mix(in srgb, #82b655, var(--village-color) 12%) 42%,
               color-mix(in srgb, #649045, var(--village-color) 10%) 68%,
               color-mix(in srgb, #4b7138, var(--village-color) 8%) 100%) !important;
       box-shadow:
           inset 0 0 0 2px color-mix(in srgb, var(--village-color), transparent 58%),
           inset 0 2px 0 rgba(249, 255, 229, .32),
           inset 0 -7px 0 rgba(46, 73, 38, .76) !important;
   }

   .village-zone-fill {
       position: absolute;
       inset: 0;
       background:
           linear-gradient(135deg,
               color-mix(in srgb, var(--village-color), transparent 91%),
               transparent 58%) !important;
       pointer-events: none;
   }

   /* Suppression totale des anciens marqueurs et raccords visuels. */
   .village-zone-owner-mark,
   .cell.village-zone-extension::before {
       display: none !important;
       content: none !important;
   }

   .action-reserve {
       display: none !important;
   }


   /* ===== V22.22.17 — zones constructibles et IA renforcée ===== */

   .cell.village-zone-extension {
       background:
           linear-gradient(145deg,
               color-mix(in srgb, rgba(255, 255, 255, .18), var(--village-color) 8%),
               color-mix(in srgb, rgba(91, 135, 174, .13), var(--village-color) 10%)) !important;
       box-shadow:
           inset 0 0 0 2px color-mix(in srgb, var(--village-color), transparent 70%),
           inset 1px 1px 0 rgba(255, 255, 255, .18) !important;
   }

   .cell.village-zone-extension:hover {
       filter: brightness(1.08);
   }


   /* ===== V22.22.18b — animations intégrées à la DA existante ===== */

   /* Deck + défausse : un seul encadré compact adapté au panneau étroit. */
   .deck-cycle-widget {
       position: relative;
       display: grid !important;
       grid-template-columns: 44px minmax(0, 1fr) 44px;
       align-items: center;
       gap: 5px !important;
       min-height: 70px;
       margin-top: 0 !important;
       padding: 7px 6px !important;
       overflow: hidden;
       border-radius: 12px !important;
       background:
           radial-gradient(circle at 50% 0, rgba(255, 255, 255, .07), transparent 45%),
           linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
           rgba(8, 20, 36, .72) !important;
       border: 1px solid rgba(237, 205, 130, .42) !important;
   }

   .deck-zone {
       min-width: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
   }

   .deck-zone small {
       color: #c8d8e8;
       font: 900 6.5px/1 Inter, Arial, sans-serif;
       letter-spacing: .09em;
   }

   .compact-card-stack {
       position: relative;
       width: 28px;
       height: 38px;
   }

   .compact-card-stack>span {
       position: absolute;
       inset: 0;
       border-radius: 6px;
       border: 1px solid rgba(255, 230, 163, .58);
       background:
           radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .18), transparent 35%),
           linear-gradient(180deg, #24496b, #122a43);
       box-shadow: 0 5px 8px rgba(0, 0, 0, .22);
   }

   .compact-card-stack>span:nth-child(1) {
       transform: translate(-3px, 2px) rotate(-7deg);
       opacity: .46
   }

   .compact-card-stack>span:nth-child(2) {
       transform: translate(-1px, 1px) rotate(-3deg);
       opacity: .72
   }

   .compact-card-stack>span:nth-child(3) {
       transform: none
   }

   .discard-stack>span {
       background:
           radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .12), transparent 35%),
           linear-gradient(180deg, #553c60, #2a2136);
   }

   .compact-card-stack b {
       position: absolute;
       right: -5px;
       bottom: -5px;
       z-index: 4;
       min-width: 18px;
       height: 18px;
       padding: 0 4px;
       display: grid;
       place-items: center;
       border-radius: 999px;
       background: #fff1bb;
       color: #17233a;
       border: 1px solid rgba(89, 58, 19, .28);
       box-shadow: 0 4px 8px rgba(0, 0, 0, .28);
       font: 900 8px/1 Inter, Arial, sans-serif;
   }

   .turn-card-track {
       min-width: 0;
       min-height: 43px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2px;
       position: relative;
   }

   .turn-card {
       width: 17px;
       height: 29px;
       flex: none;
       display: grid;
       place-items: center;
       border-radius: 5px;
       border: 1px solid rgba(255, 255, 255, .30);
       color: #fff;
       font-size: 10px;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .24),
           0 5px 8px rgba(0, 0, 0, .24);
       transform-origin: center;
   }

   .turn-card-move {
       background: linear-gradient(180deg, #58c6f6, #267fb9)
   }

   .turn-card-push {
       background: linear-gradient(180deg, #f5a553, #b95229)
   }

   .turn-card-magic {
       background: linear-gradient(180deg, #aa88ed, #6244aa)
   }

   .turn-card-placeholder {
       color: rgba(220, 234, 247, .52);
       font: 800 7px/1.1 Inter, Arial, sans-serif;
       text-align: center;
       text-transform: uppercase;
       letter-spacing: .05em;
   }

   .deal-card {
       animation: compactDeal .54s cubic-bezier(.20, .84, .24, 1) both;
       animation-delay: calc(var(--card-index) * .085s);
   }

   @keyframes compactDeal {
       0% {
           opacity: 0;
           transform: translateX(-48px) translateY(-3px) scale(.62) rotate(-10deg);
       }

       72% {
           opacity: 1;
           transform: translateX(2px) translateY(-1px) scale(1.04) rotate(2deg);
       }

       100% {
           opacity: 1;
           transform: none;
       }
   }

   .discard-card {
       animation: compactDiscard .44s cubic-bezier(.55, .02, .86, .38) both;
       animation-delay: calc(var(--card-index) * .04s);
   }

   @keyframes compactDiscard {
       from {
           opacity: 1;
           transform: none
       }

       to {
           opacity: 0;
           transform: translateX(48px) translateY(2px) scale(.62) rotate(10deg);
       }
   }

   /* Transition courte : pas de plein écran, pas d'assombrissement. */
   .turn-ribbon {
       position: fixed;
       left: 50%;
       top: 61px;
       z-index: 132;
       display: flex;
       align-items: center;
       gap: 10px;
       min-width: 260px;
       max-width: 70vw;
       padding: 7px 13px 7px 8px;
       border-radius: 999px;
       pointer-events: none;
       opacity: 0;
       transform: translate(-50%, -10px) scale(.96);
       background:
           linear-gradient(180deg, rgba(22, 39, 65, .97), rgba(10, 23, 42, .97));
       border: 1px solid rgba(236, 204, 130, .58);
       box-shadow:
           0 10px 24px rgba(5, 14, 27, .28),
           inset 0 1px 0 rgba(255, 255, 255, .10);
       transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .25, 1);
   }

   .turn-ribbon.visible {
       opacity: 1;
       transform: translate(-50%, 0) scale(1);
   }

   .turn-ribbon-portrait {
       width: 42px;
       height: 42px;
       flex: none;
       font-size: 25px;
       border: 2px solid color-mix(in srgb, var(--pcolor, #fff), white 28%);
       box-shadow:
           0 0 11px color-mix(in srgb, var(--pcolor, #fff), transparent 48%),
           0 5px 10px rgba(0, 0, 0, .25);
   }

   .turn-ribbon-copy {
       min-width: 0;
       display: grid;
       grid-template-columns: auto auto;
       column-gap: 8px;
       align-items: baseline;
   }

   .turn-ribbon-copy small {
       grid-column: 1 / -1;
       color: #efd294;
       font: 900 6.5px/1 Inter, Arial, sans-serif;
       letter-spacing: .15em;
   }

   .turn-ribbon-copy strong {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #fff;
       font: 900 14px/1.1 Georgia, serif;
   }

   .turn-ribbon-copy span {
       color: #c7d9ea;
       font: 800 8px/1.1 Inter, Arial, sans-serif;
       white-space: nowrap;
   }

   /* Score : impulsion locale et couronne, sans flash sur tout l'écran. */
   .score-card.score-updated {
       animation: scoreUpdated .88s cubic-bezier(.18, .84, .24, 1);
   }

   .score-card.score-updated::after {
       content: "👑";
       position: absolute;
       right: 8px;
       top: -12px;
       z-index: 5;
       font-size: 18px;
       filter: drop-shadow(0 0 8px rgba(255, 224, 107, .92));
       animation: scoreCrownRise .88s ease-out both;
   }

   .score-card.score-updated .score-value {
       display: inline-block;
       animation: scoreNumberPulse .74s cubic-bezier(.22, .86, .25, 1);
   }

   @keyframes scoreUpdated {
       0% {
           transform: translateY(0) scale(1)
       }

       28% {
           transform: translateY(-3px) scale(1.035);
           box-shadow:
               0 0 0 2px rgba(255, 222, 112, .68),
               0 0 17px rgba(255, 211, 76, .38);
       }

       100% {
           transform: translateY(0) scale(1)
       }
   }

   @keyframes scoreCrownRise {
       0% {
           opacity: 0;
           transform: translateY(12px) scale(.65)
       }

       35% {
           opacity: 1;
           transform: translateY(0) scale(1.08)
       }

       100% {
           opacity: 0;
           transform: translateY(-11px) scale(.92)
       }
   }

   @keyframes scoreNumberPulse {
       0% {
           transform: scale(1)
       }

       38% {
           transform: scale(1.28)
       }

       100% {
           transform: scale(1)
       }
   }

   /* Victoire : spectaculaire mais dans la même esthétique céleste/médiévale. */
   .victory-card {
       position: relative;
       overflow: hidden;
       max-width: min(560px, 90vw);
       padding: 28px 28px 24px !important;
       text-align: center;
       background:
           radial-gradient(circle at 50% 6%, rgba(255, 231, 147, .18), transparent 32%),
           linear-gradient(180deg, rgba(29, 47, 76, .98), rgba(10, 22, 40, .99)) !important;
       border: 1px solid rgba(235, 203, 126, .58) !important;
       box-shadow:
           0 24px 54px rgba(4, 11, 22, .42),
           inset 0 1px 0 rgba(255, 255, 255, .10) !important;
   }

   .victory-card::before {
       content: "";
       position: absolute;
       inset: 8px;
       border: 1px solid rgba(255, 232, 173, .16);
       border-radius: inherit;
       pointer-events: none;
   }

   .victory-light {
       position: absolute;
       left: 50%;
       top: -110px;
       width: 290px;
       height: 290px;
       transform: translateX(-50%);
       border-radius: 50%;
       background:
           repeating-conic-gradient(from 0deg,
               rgba(255, 224, 125, .10) 0 8deg,
               transparent 8deg 19deg);
       opacity: .56;
       animation: victoryLightTurn 12s linear infinite;
       pointer-events: none;
   }

   @keyframes victoryLightTurn {
       to {
           transform: translateX(-50%) rotate(360deg)
       }
   }

   .victory-emblem {
       position: relative;
       display: grid;
       place-items: center;
       margin-bottom: 9px;
   }

   .victory-portrait {
       width: 86px;
       height: 86px;
       font-size: 49px;
       border: 3px solid color-mix(in srgb, var(--pcolor, #fff), white 28%);
       box-shadow:
           0 0 0 7px rgba(255, 234, 172, .07),
           0 0 27px color-mix(in srgb, var(--pcolor, #fff), transparent 45%),
           0 13px 23px rgba(0, 0, 0, .34);
       animation: victoryPortraitEnter .72s cubic-bezier(.18, .88, .25, 1) both;
   }

   @keyframes victoryPortraitEnter {
       from {
           opacity: 0;
           transform: translateY(18px) scale(.76)
       }

       to {
           opacity: 1;
           transform: none
       }
   }

   .victory-crowns {
       display: flex;
       gap: 5px;
       margin-top: -7px;
       position: relative;
       z-index: 3;
   }

   .victory-crowns span {
       font-size: 18px;
       filter: drop-shadow(0 0 7px rgba(255, 224, 113, .62));
       animation: victoryCrownEnter .48s ease-out both;
   }

   .victory-crowns span:nth-child(1) {
       animation-delay: .18s
   }

   .victory-crowns span:nth-child(2) {
       animation-delay: .29s
   }

   .victory-crowns span:nth-child(3) {
       animation-delay: .40s
   }

   @keyframes victoryCrownEnter {
       from {
           opacity: 0;
           transform: translateY(8px) scale(.5)
       }

       to {
           opacity: 1;
           transform: none
       }
   }

   .victory-kicker {
       position: relative;
       display: block;
       color: #e7c77f;
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .19em;
   }

   .victory-card h2 {
       position: relative;
       margin: 7px 0 8px;
       font-size: clamp(28px, 4vw, 43px);
       text-shadow:
           0 3px 0 rgba(0, 0, 0, .24),
           0 0 18px currentColor;
   }

   /* Défaite et égalité : même fenêtre, lumière éteinte (pas de rayons
      dorés qui tournent) et couronnes ternies. Voir tonFinDePartie (ui.js). */
   #victoryModal.fin-defaite .victory-light,
   #victoryModal.fin-egalite .victory-light {
       display: none;
   }

   #victoryModal.fin-defaite .victory-crowns span {
       filter: grayscale(1) brightness(.62);
       animation: none;
   }

   #victoryModal.fin-defaite .victory-kicker {
       color: #9aa6bf;
   }

   #victoryModal.fin-egalite .victory-kicker {
       color: #cfd6ea;
   }

   .victory-text {
       position: relative;
       max-width: 440px;
       margin: 0 auto;
       color: #f3f8ff;
       font-size: 16px;
       line-height: 1.38;
       text-align: center;
   }

   .victory-stats {
       position: relative;
       width: max-content;
       max-width: 100%;
       margin: 13px auto 4px;
       padding: 7px 12px;
       border-radius: 999px;
       color: #d8e8f7;
       background: rgba(5, 15, 29, .42);
       border: 1px solid rgba(255, 255, 255, .08);
       font: 800 9px/1 Inter, Arial, sans-serif;
       letter-spacing: .04em;
   }

   #victoryModal.victory-visible .victory-card {
       animation: victoryCardEnter .55s cubic-bezier(.18, .88, .24, 1) both;
   }

   @keyframes victoryCardEnter {
       from {
           opacity: 0;
           transform: translateY(18px) scale(.96)
       }

       to {
           opacity: 1;
           transform: none
       }
   }

   @media(max-width:920px) {
       .deck-cycle-widget {
           grid-template-columns: 38px minmax(0, 1fr) 38px;
           gap: 3px !important;
           padding: 6px 4px !important;
       }

       .turn-card {
           width: 14px;
           height: 25px;
           font-size: 8px;
       }

       .compact-card-stack {
           width: 24px;
           height: 33px;
       }

       .turn-ribbon {
           top: 53px;
           min-width: 230px;
       }
   }

   @media(prefers-reduced-motion:reduce) {

       .deal-card,
       .discard-card,
       .score-card.score-updated,
       .score-card.score-updated::after,
       .score-card.score-updated .score-value,
       .victory-light,
       .victory-portrait,
       .victory-crowns span,
       #victoryModal.victory-visible .victory-card {
           animation: none !important;
       }
   }


   /* ===== V22.22.19 — deck 15 cartes + mode Duel symétrique ===== */

   .starting-board-row {
       border-color: rgba(111, 218, 255, .28) !important;
       background:
           radial-gradient(circle at 8% 50%, rgba(90, 207, 255, .09), transparent 38%),
           rgba(255, 255, 255, .025);
   }

   .starting-board-row select {
       min-width: 210px;
   }

   .online-starting-board {
       margin-top: 8px;
   }

   .starting-board-row select:disabled {
       opacity: .46;
       cursor: not-allowed;
   }

   @media(max-width:760px) {
       .starting-board-row select {
           min-width: 0;
           width: 100%;
       }
   }


   /* ===== V22.22.20 — accueil amélioré, duel corrigé, transmission couronne ===== */

   #setupScreen {
       padding: 14px !important;
   }

   .setup-card {
       width: min(980px, 96vw) !important;
       padding: 24px 30px 26px !important;
   }

   .setup-stars {
       margin-bottom: 2px !important;
   }

   .logo {
       font-size: clamp(50px, 6.6vw, 82px) !important;
       line-height: .92 !important;
   }

   .subtitle {
       margin: 4px 0 13px !important;
   }

   .setup-hero-grid {
       display: grid;
       grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr);
       align-items: center;
       gap: 22px;
       max-width: 850px;
       margin: 0 auto 15px;
   }

   .setup-hero-copy {
       min-width: 0;
   }

   .setup-hero-grid .intro {
       max-width: 560px;
       margin: 0 0 13px !important;
       text-align: left !important;
       font-size: 13px !important;
       line-height: 1.48 !important;
   }

   .setup-hero-grid .setup-highlights {
       margin: 0 !important;
       max-width: none !important;
   }

   .setup-board-preview {
       position: relative;
       min-height: 154px;
       display: grid;
       place-items: center;
       border-radius: 20px;
       overflow: hidden;
       background:
           radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .50), transparent 31%),
           linear-gradient(180deg, #bfe8ff 0%, #82b9df 70%, #6196c1 100%);
       border: 1px solid rgba(255, 239, 184, .38);
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .38),
           inset 0 -16px 24px rgba(34, 76, 119, .18),
           0 14px 28px rgba(1, 11, 25, .24);
   }

   .setup-board-preview::before {
       content: "";
       position: absolute;
       inset: 0;
       background:
           linear-gradient(125deg, transparent 18%, rgba(255, 255, 255, .20) 36%, transparent 52%);
       opacity: .54;
       pointer-events: none;
   }

   .preview-cloud {
       display: none;
   }

   .preview-cloud {
       position: absolute;
       width: 82px;
       height: 24px;
       border-radius: 999px;
       background: rgba(255, 255, 255, .58);
       filter: blur(1px);
       box-shadow:
           24px -5px 0 rgba(255, 255, 255, .42),
           52px 3px 0 rgba(255, 255, 255, .35);
   }

   .cloud-one {
       left: -18px;
       top: 25px
   }

   .cloud-two {
       right: 17px;
       bottom: 27px;
       transform: scale(.72);
       opacity: .56
   }

   .preview-board {
       position: relative;
       z-index: 2;
       width: 132px;
       height: 132px;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: repeat(3, 1fr);
       gap: 3px;
       padding: 6px;
       transform: perspective(420px) rotateX(21deg) rotateZ(-3deg);
       border-radius: 15px;
       background: rgba(65, 105, 143, .46);
       border: 3px solid rgba(238, 246, 255, .58);
       box-shadow:
           0 8px 0 rgba(58, 88, 117, .55),
           0 16px 22px rgba(20, 48, 78, .26);
   }

   .preview-cell {
       position: relative;
       display: grid;
       place-items: center;
       border-radius: 7px;
       background: rgba(255, 255, 255, .15);
       border: 1px solid rgba(255, 255, 255, .12);
       font-size: 18px;
   }

   .preview-cell[class*="island"] {
       background:
           linear-gradient(180deg, #b6df80, #72a64f);
       border-color: rgba(248, 255, 225, .58);
       box-shadow:
           inset 0 -5px 0 rgba(49, 80, 38, .44),
           0 3px 0 rgba(54, 80, 45, .38);
   }

   .village-a {
       background: linear-gradient(180deg, #74d3f4, #287ca9) !important;
       box-shadow: inset 0 0 0 2px rgba(209, 250, 255, .54);
   }

   .village-b {
       background: linear-gradient(180deg, #ffae7a, #b95338) !important;
       box-shadow: inset 0 0 0 2px rgba(255, 226, 202, .54);
   }

   .crown-cell {
       background:
           radial-gradient(circle, #fff7c5 0 18%, #caa241 20% 39%, rgba(255, 255, 255, .18) 42%) !important;
       filter: drop-shadow(0 0 6px rgba(255, 230, 128, .76));
   }

   .preview-guardian {
       position: absolute;
       z-index: 5;
       font-size: 23px;
       filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .36));
   }

   .guardian-a {
       left: 22px;
       top: 19px
   }

   .guardian-b {
       right: 21px;
       bottom: 18px
   }

   .preview-caption {
       position: absolute;
       z-index: 5;
       left: 50%;
       bottom: 7px;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       gap: 5px;
       white-space: nowrap;
       color: #f8fcff;
       font: 900 6.5px/1 Inter, Arial, sans-serif;
       letter-spacing: .11em;
       text-shadow: 0 2px 4px rgba(0, 0, 0, .34);
   }

   .preview-caption b {
       color: #ffe8a7;
   }

   .setup-config {
       max-width: 850px !important;
       padding: 12px 14px 14px !important;
   }

   .setup-row {
       margin-bottom: 11px !important;
   }

   .setup-row label {
       min-width: 108px !important;
   }

   .mode-options {
       margin-top: 9px !important;
   }

   .mode-option-row {
       padding: 9px 11px !important;
   }

   .setup-actions {
       margin-top: 15px !important;
   }

   /*
   * Quand un allié adjacent peut recevoir la couronne, la couronne du porteur
   * le signale discrètement sans ajouter un nouveau bouton.
   */
   .carrier-crown.own-crown {
       cursor: pointer;
   }

   .character.carrying .carrier-crown.own-crown:hover {
       transform: translateY(-2px) scale(1.12);
       filter:
           drop-shadow(0 0 7px #fff8c8) drop-shadow(0 0 14px rgba(255, 220, 90, .90));
   }

   @media(max-width:820px) {
       .setup-card {
           padding: 20px 22px 22px !important;
       }

       .setup-hero-grid {
           grid-template-columns: 1fr;
           gap: 10px;
           margin-bottom: 10px;
       }

       .setup-hero-grid .intro {
           text-align: center !important;
           margin-left: auto !important;
           margin-right: auto !important;
       }

       .setup-board-preview {
           min-height: 112px;
       }

       .preview-board {
           width: 96px;
           height: 96px;
       }

       .preview-guardian {
           font-size: 17px;
       }

       .setup-highlights {
           display: none !important;
       }
   }

   @media(max-height:720px) and (min-width:821px) {
       .setup-card {
           padding-top: 18px !important;
           padding-bottom: 18px !important;
       }

       .setup-board-preview {
           min-height: 126px;
       }

       .preview-board {
           width: 105px;
           height: 105px;
       }

       .setup-hero-grid {
           margin-bottom: 10px;
       }

       .setup-actions {
           margin-top: 10px !important;
       }
   }


   /* ===== V22.22.21 — bibliothèque de setups Duel symétrique ===== */

   .symmetric-setup-panel {
       margin-top: 8px;
       padding: 10px;
       border-radius: 15px;
       border: 1px solid rgba(113, 218, 255, .26);
       background:
           radial-gradient(circle at 12% 0, rgba(94, 205, 255, .10), transparent 40%),
           rgba(5, 18, 34, .34);
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .05),
           0 9px 18px rgba(2, 11, 23, .13);
   }

   .symmetric-setup-toolbar {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: end;
       gap: 8px;
       margin-bottom: 9px;
   }

   .symmetric-setup-toolbar label {
       display: flex;
       flex-direction: column;
       gap: 5px;
       min-width: 0;
   }

   .symmetric-setup-toolbar label>span {
       color: #eaf6ff;
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .10em;
       text-transform: uppercase;
   }

   .symmetric-setup-toolbar select {
       width: 100%;
       min-width: 0;
   }

   .random-setup-btn {
       min-height: 34px;
       padding: 0 11px;
       border-radius: 10px;
       border: 1px solid rgba(255, 223, 137, .48);
       background:
           linear-gradient(180deg, rgba(255, 230, 155, .15), rgba(255, 230, 155, .04)),
           rgba(11, 26, 47, .82);
       color: #fff0ba;
       font: 900 9px/1 Inter, Arial, sans-serif;
       letter-spacing: .03em;
       cursor: pointer;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .08),
           0 6px 12px rgba(0, 0, 0, .16);
   }

   .random-setup-btn:hover:not(:disabled) {
       filter: brightness(1.12);
       transform: translateY(-1px);
   }

   .random-setup-btn.random-picked {
       animation: randomSetupPicked .42s cubic-bezier(.18, .86, .25, 1);
   }

   @keyframes randomSetupPicked {
       0% {
           transform: rotate(0) scale(1)
       }

       32% {
           transform: rotate(-3deg) scale(1.05)
       }

       68% {
           transform: rotate(3deg) scale(1.05)
       }

       100% {
           transform: rotate(0) scale(1)
       }
   }

   .symmetric-setup-content {
       display: grid;
       grid-template-columns: 124px minmax(0, 1fr);
       align-items: center;
       gap: 11px;
   }

   .symmetric-setup-preview {
       width: 124px;
       aspect-ratio: 1;
       display: grid;
       grid-template-columns: repeat(var(--board-n, 11), 1fr);
       grid-template-rows: repeat(var(--board-n, 11), 1fr);
       gap: 1px;
       padding: 5px;
       border-radius: 13px;
       background:
           linear-gradient(180deg, #b9def5, #77aad0);
       border: 2px solid rgba(225, 244, 255, .58);
       box-shadow:
           0 6px 0 rgba(62, 93, 120, .54),
           0 12px 16px rgba(3, 15, 28, .20),
           inset 0 0 10px rgba(255, 255, 255, .18);
       transform: perspective(460px) rotateX(11deg);
       transform-origin: center bottom;
   }

   .symmetric-setup-preview.preview-refresh {
       animation: setupPreviewRefresh .28s ease-out;
   }

   @keyframes setupPreviewRefresh {
       from {
           opacity: .58;
           transform: perspective(460px) rotateX(11deg) scale(.97)
       }

       to {
           opacity: 1;
           transform: perspective(460px) rotateX(11deg) scale(1)
       }
   }

   .setup-preview-cell {
       position: relative;
       display: grid;
       place-items: center;
       min-width: 0;
       min-height: 0;
       background: rgba(255, 255, 255, .10);
       border-radius: 2px;
       box-shadow: inset 0 0 0 1px rgba(37, 72, 105, .13);
   }

   .setup-island-p0 {
       background: linear-gradient(180deg, #a9dc78, #669c4b);
       box-shadow:
           inset 0 -2px 0 rgba(47, 78, 38, .56),
           inset 0 0 0 1px rgba(119, 225, 255, .64);
   }

   .setup-island-p1 {
       background: linear-gradient(180deg, #b2df7d, #709d4e);
       box-shadow:
           inset 0 -2px 0 rgba(47, 78, 38, .56),
           inset 0 0 0 1px rgba(255, 151, 111, .66);
   }

   .setup-village-p0 {
       background: linear-gradient(180deg, #6ed5f5, #247fac) !important;
   }

   .setup-village-p1 {
       background: linear-gradient(180deg, #ffaf7d, #b85439) !important;
   }

   .setup-preview-cell i {
       position: absolute;
       inset: 0;
       display: grid;
       place-items: center;
       margin: 0;
       font-style: normal;
       font-size: 7px;
       line-height: 1;
   }

   .setup-preview-village {
       color: #fff;
       text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
   }

   .setup-preview-crown {
       background:
           radial-gradient(circle, rgba(255, 246, 184, .96), rgba(211, 169, 59, .68) 42%, rgba(255, 255, 255, .08) 44%) !important;
   }

   .setup-preview-character {
       position: absolute;
       z-index: 4;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       border: 1px solid #fff;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
   }

   .setup-character-p0 {
       background: #43c9f1
   }

   .setup-character-p1 {
       background: #ff845e
   }

   .symmetric-setup-description {
       min-width: 0;
   }

   .symmetric-setup-description>strong {
       display: block;
       margin-bottom: 5px;
       color: #fff2bc;
       font: 900 15px/1.08 Georgia, serif;
   }

   .symmetric-setup-description p {
       margin: 0;
       color: #d4e4f2;
       font: 700 10px/1.38 Inter, Arial, sans-serif;
   }

   .symmetric-setup-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 5px;
       margin-top: 8px;
   }

   .symmetric-setup-tags span {
       padding: 4px 7px;
       border-radius: 999px;
       color: #dff5ff;
       background: rgba(63, 160, 207, .13);
       border: 1px solid rgba(118, 218, 255, .22);
       font: 900 7px/1 Inter, Arial, sans-serif;
       letter-spacing: .03em;
   }

   .symmetric-setup-panel select:disabled,
   .random-setup-btn:disabled {
       opacity: .42;
       cursor: not-allowed;
   }

   @media(max-width:760px) {
       .symmetric-setup-content {
           grid-template-columns: 96px minmax(0, 1fr);
       }

       .symmetric-setup-preview {
           width: 96px;
           padding: 4px;
       }

       .symmetric-setup-description>strong {
           font-size: 13px;
       }
   }

   @media(max-width:540px) {
       .symmetric-setup-toolbar {
           grid-template-columns: 1fr;
       }

       .random-setup-btn {
           width: 100%;
       }
   }


   /* ===== V22.22.22 — saut de couronne, actions fluides, setups variables ===== */

   .action-banner {
       cursor: pointer;
   }

   .action-banner:not(.empty):active {
       transform: translateY(1px) scale(.995);
   }

   .symmetric-setup-tags {
       align-items: center;
   }

   .symmetric-setup-tags span {
       white-space: nowrap;
   }


   /* ===== V22.22.23 — stock d’actions, diagonales et choix du setup sur plateau ===== */

   .action-stock {
       align-self: center;
       padding: 3px 6px;
       border-radius: 999px;
       color: #d8e9f8;
       background: rgba(255, 255, 255, .055);
       border: 1px solid rgba(255, 255, 255, .08);
       font: 900 7px/1 Inter, Arial, sans-serif;
       letter-spacing: .04em;
       white-space: nowrap;
   }

   .symmetric-board-overlay {
       /* !important nécessaire : "#gameScreen > *{position:relative}" (id
          dans le sélecteur, voir css/hud-v2.css) bat un position:fixed en
          simple classe, ce qui repassait cet overlay dans le flux normal de
          #gameScreen. Concrètement, le bouton "Lancer ce setup" se
          retrouvait alors sous la barre HUD fixe (z-index 100000) : le clic
          touchait "FIN DU TOUR" en dessous à la place, sans jamais confirmer
          le setup — donc, vu du joueur, plus aucune île ne se posait. */
       position: fixed !important;
       inset: 0;
       z-index: 100050 !important;
       display: grid;
       place-items: center;
       padding: 18px;
       background:
           radial-gradient(circle at 50% 35%, rgba(147, 215, 255, .14), transparent 39%),
           rgba(4, 12, 24, .72);
       backdrop-filter: blur(7px);
       opacity: 0;
       transition: opacity .20s ease;
   }

   .symmetric-board-overlay.visible {
       opacity: 1;
   }

   .symmetric-board-card {
       width: min(720px, 94vw);
       max-height: min(620px, 88vh);
       overflow: auto;
       padding: 20px;
       border-radius: 23px;
       background:
           radial-gradient(circle at 12% 0, rgba(105, 211, 255, .12), transparent 36%),
           linear-gradient(180deg, rgba(24, 43, 69, .98), rgba(8, 20, 38, .99));
       border: 1px solid rgba(233, 205, 137, .56);
       box-shadow:
           0 30px 70px rgba(0, 0, 0, .48),
           inset 0 1px 0 rgba(255, 255, 255, .10);
   }

   .symmetric-board-heading {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       gap: 18px;
       margin-bottom: 14px;
   }

   .symmetric-board-heading small {
       display: block;
       margin-bottom: 4px;
       color: #e8c77d;
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .17em;
   }

   .symmetric-board-heading h2 {
       margin: 0 0 6px;
       color: #fff;
       font-size: clamp(23px, 3.2vw, 35px);
       line-height: 1.05;
   }

   .symmetric-board-heading p {
       max-width: 520px;
       margin: 0;
       color: #cfe0ef;
       font: 700 11px/1.4 Inter, Arial, sans-serif;
   }

   .symmetric-board-emblem {
       flex: none;
       display: grid;
       place-items: center;
       width: 54px;
       height: 54px;
       border-radius: 18px;
       font-size: 28px;
       background: rgba(255, 229, 153, .09);
       border: 1px solid rgba(255, 229, 153, .22);
       box-shadow: 0 9px 20px rgba(0, 0, 0, .20);
   }

   .symmetric-board-controls {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: end;
       gap: 9px;
       margin-bottom: 14px;
   }

   .symmetric-board-controls label {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .symmetric-board-controls label>span {
       color: #eaf6ff;
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .10em;
       text-transform: uppercase;
   }

   .symmetric-board-controls select {
       width: 100%;
   }

   .symmetric-board-content {
       display: grid;
       grid-template-columns: 180px minmax(0, 1fr);
       align-items: center;
       gap: 17px;
       padding: 14px;
       border-radius: 17px;
       background: rgba(3, 13, 26, .27);
       border: 1px solid rgba(255, 255, 255, .06);
   }

   .board-setup-preview {
       width: 180px !important;
   }

   .board-setup-description>strong {
       font-size: 20px !important;
   }

   .board-setup-description p {
       font-size: 11px !important;
   }

   .symmetric-setup-custom {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 16px;
       margin-top: 14px;
       padding: 12px 14px;
       border-radius: 15px;
       background: rgba(3, 13, 26, .27);
       border: 1px solid rgba(255, 255, 255, .06);
   }

   .symmetric-setup-custom-title {
       flex: 0 0 100%;
       color: #e8c77d;
       font: 900 9px/1 Inter, Arial, sans-serif;
       letter-spacing: .14em;
       text-transform: uppercase;
   }

   .symmetric-setup-custom label {
       display: flex;
       flex-direction: column;
       gap: 5px;
   }

   .symmetric-setup-custom label>span:first-child {
       color: #eaf6ff;
       font: 900 8px/1 Inter, Arial, sans-serif;
       letter-spacing: .10em;
       text-transform: uppercase;
   }

   .symmetric-setup-custom select {
       min-width: 110px;
   }

   .symmetric-setup-toggle {
       flex-direction: row !important;
       align-items: center;
       gap: 8px !important;
       cursor: pointer;
   }

   .symmetric-setup-toggle span {
       color: #cfe0ef;
       font: 700 11px/1.3 Inter, Arial, sans-serif;
   }

   .symmetric-setup-toggle input {
       width: 16px;
       height: 16px;
       accent-color: #d8aa4c;
   }

   .symmetric-board-actions {
       display: flex;
       justify-content: flex-end;
       margin-top: 15px;
   }

   .symmetric-board-actions .primary-btn {
       min-width: 190px;
   }

   .symmetric-setup-waiting {
       margin-top: 13px;
       padding: 10px 12px;
       border-radius: 12px;
       text-align: center;
       color: #d9ebf8;
       background: rgba(74, 164, 208, .10);
       border: 1px solid rgba(105, 205, 250, .19);
       font: 800 10px/1.3 Inter, Arial, sans-serif;
   }

   /* L'ancien panneau de setup de l'accueil n'est plus utilisé. */
   #setupScreen .symmetric-setup-panel {
       display: none !important;
   }

   @media(max-width:650px) {
       .symmetric-board-card {
           padding: 15px;
       }

       .symmetric-board-heading p {
           display: none;
       }

       .symmetric-board-content {
           grid-template-columns: 115px minmax(0, 1fr);
           gap: 10px;
           padding: 10px;
       }

       .board-setup-preview {
           width: 115px !important;
       }

       .symmetric-board-controls {
           grid-template-columns: 1fr;
       }

       .random-setup-btn {
           width: 100%;
       }

       .symmetric-board-actions .primary-btn {
           width: 100%;
       }
   }


   /* ===== V22.22.23.1 — stock consommable et diagonales visibles ===== */

   .cell.diagonal-step-preview::after {
       content: "↗";
       position: absolute;
       right: 5%;
       top: 3%;
       z-index: 24;
       display: grid;
       place-items: center;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       color: #e9fbff;
       background: rgba(21, 102, 152, .82);
       border: 1px solid rgba(185, 238, 255, .72);
       box-shadow: 0 0 8px rgba(80, 205, 255, .62);
       font: 900 9px/1 Arial, sans-serif;
       pointer-events: none;
   }

   .action-stock {
       transition: background .15s ease, border-color .15s ease;
   }

   .action-banner.active .action-stock {
       color: #fff4c6;
       background: rgba(255, 220, 112, .10);
       border-color: rgba(255, 220, 112, .20);
   }


   /* ===== V22.22.24 — choix couronne, flèche directionnelle, Expert maximal ===== */

   .cell.crown-transfer-choice {
       box-shadow:
           inset 0 0 0 4px rgba(255, 232, 128, .96),
           inset 0 0 20px rgba(255, 213, 70, .30),
           0 0 18px rgba(255, 213, 70, .54) !important;
   }

   .cell.crown-transfer-choice::after {
       content: "⇄ 👑";
       position: absolute;
       left: 50%;
       top: 4%;
       z-index: 25;
       transform: translateX(-50%);
       padding: 2px 5px;
       border-radius: 999px;
       color: #fff6c8;
       background: rgba(90, 61, 8, .86);
       border: 1px solid rgba(255, 228, 128, .58);
       box-shadow: 0 0 9px rgba(255, 214, 71, .45);
       font: 900 7px/1 Arial, sans-serif;
       white-space: nowrap;
       pointer-events: none;
   }

   .push-target-preview::after {
       content: "➜" !important;
       left: 50% !important;
       right: auto !important;
       top: 50% !important;
       bottom: auto !important;
       transform:
           translate(-50%, -50%) rotate(var(--push-arrow-angle, 0deg)) !important;
       transform-origin: center !important;
       font-size: clamp(22px, 2.8vw, 38px) !important;
       color: #fff0b5 !important;
       text-shadow:
           0 0 5px #fff5cf,
           0 0 13px #ffac38 !important;
       animation: pushArrowDirection .58s ease-in-out infinite alternate;
   }

   @keyframes pushArrowDirection {
       from {
           filter: brightness(.90) drop-shadow(-2px 0 0 rgba(255, 168, 45, .22))
       }

       to {
           filter: brightness(1.20) drop-shadow(4px 0 2px rgba(255, 168, 45, .48))
       }
   }

   #gameScreen.ai-turn .score-card.active::before {
       content: "ANALYSE MAXIMALE";
   }


   /* ===== V22.22.25 — sanctuaire fixe, magie universelle, 5 gardiens ===== */

   .cell.sanctuary {
       position: relative;
       overflow: visible;
       background:
           radial-gradient(circle at 48% 40%, rgba(255, 248, 193, .92), rgba(216, 174, 76, .68) 38%, rgba(172, 126, 46, .52) 68%, rgba(111, 76, 31, .45)) !important;
       border-color: rgba(255, 235, 157, .86) !important;
       box-shadow:
           inset 0 0 0 2px rgba(255, 244, 196, .46),
           inset 0 -7px 0 rgba(112, 76, 29, .34),
           0 0 12px rgba(255, 218, 105, .22) !important;
   }

   .cell.sanctuary-center {
       z-index: 5;
       background:
           radial-gradient(circle, #fffbe1 0 13%, #f4d779 14% 31%, #c99b3e 33% 58%, #8f672b 60%) !important;
       box-shadow:
           inset 0 0 0 3px rgba(255, 246, 200, .76),
           inset 0 -8px 0 rgba(99, 65, 24, .40),
           0 0 20px rgba(255, 218, 92, .48) !important;
   }

   .cell.sanctuary-arm::before {
       content: "";
       position: absolute;
       inset: 18%;
       border-radius: 8px;
       border: 1px solid rgba(255, 242, 184, .66);
       background:
           linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 226, 139, .06));
       box-shadow:
           inset 0 0 8px rgba(255, 244, 199, .19);
       pointer-events: none;
   }

   .sanctuary-arm-mark {
       position: absolute;
       inset: 0;
       display: grid;
       place-items: center;
       pointer-events: none;
   }

   .sanctuary-arm-mark::before {
       content: "✦";
       color: rgba(255, 247, 204, .82);
       font-size: clamp(10px, 1.2vw, 17px);
       text-shadow: 0 0 8px rgba(255, 221, 101, .74);
   }

   .setup-preview-sanctuary {
       background:
           radial-gradient(circle, #fff6bd, #d2a548 55%, #90662c) !important;
       box-shadow:
           inset 0 0 0 1px rgba(255, 244, 192, .78),
           0 0 4px rgba(255, 221, 111, .48) !important;
   }

   .action-magic .all-action:disabled {
       opacity: .82;
       color: #eadcff;
       border-color: rgba(198, 155, 255, .30);
       background: rgba(127, 75, 199, .14);
   }


   /* =======================================================================
     V22.22.26 — ILYOS // ASCENSION
     Moteur visuel alternatif immersif, grille abyssale et personnages 3D
     ======================================================================= */

   .alternative-start-btn {
       position: relative;
       min-width: 270px;
       min-height: 54px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 3px;
       padding: 9px 18px;
       overflow: hidden;
       border-radius: 15px;
       border: 1px solid rgba(121, 240, 255, .56);
       color: #efffff;
       background:
           radial-gradient(circle at 50% 0, rgba(154, 255, 252, .20), transparent 45%),
           linear-gradient(120deg, #143b5f, #342663 54%, #6c285e);
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .18),
           0 0 18px rgba(86, 220, 255, .24),
           0 12px 24px rgba(0, 0, 0, .28);
       cursor: pointer;
       transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
   }

   .alternative-start-btn::before {
       content: "";
       position: absolute;
       inset: -70% -20%;
       background:
           conic-gradient(from 0deg,
               transparent,
               rgba(108, 244, 255, .22),
               transparent 30%,
               rgba(255, 97, 218, .16),
               transparent 65%);
       animation: altButtonOrbit 5.8s linear infinite;
   }

   .alternative-start-btn span,
   .alternative-start-btn small {
       position: relative;
       z-index: 2;
   }

   .alternative-start-btn span {
       font: 900 13px/1 Inter, Arial, sans-serif;
       letter-spacing: .15em;
   }

   .alternative-start-btn small {
       color: #bfeeff;
       font: 800 7px/1 Inter, Arial, sans-serif;
       letter-spacing: .09em;
   }

   .alternative-start-btn:hover {
       transform: translateY(-2px) scale(1.015);
       filter: brightness(1.12);
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .22),
           0 0 28px rgba(86, 220, 255, .42),
           0 16px 28px rgba(0, 0, 0, .32);
   }

   @keyframes altButtonOrbit {
       to {
           transform: rotate(360deg)
       }
   }

   .setup-actions {
       flex-wrap: wrap;
   }

   .alt-mode-intro {
       position: fixed;
       inset: 0;
       z-index: 170;
       display: grid;
       place-items: center;
       overflow: hidden;
       pointer-events: none;
       opacity: 0;
       background:
           radial-gradient(circle at center, rgba(70, 198, 255, .13), transparent 42%),
           linear-gradient(180deg, rgba(3, 7, 20, .96), rgba(4, 14, 31, .92));
       transition: opacity .34s ease;
   }

   .alt-mode-intro.visible {
       opacity: 1
   }

   .alt-intro-grid {
       position: absolute;
       left: -20%;
       right: -20%;
       bottom: -38%;
       height: 78%;
       background:
           linear-gradient(rgba(97, 225, 255, .20) 1px, transparent 1px),
           linear-gradient(90deg, rgba(97, 225, 255, .20) 1px, transparent 1px);
       background-size: 56px 56px;
       transform: perspective(600px) rotateX(66deg);
       transform-origin: center top;
       -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%, black 74%, transparent);
       mask-image: linear-gradient(to bottom, transparent, black 24%, black 74%, transparent);
       animation: altIntroGrid 1.5s linear both;
   }

   .alt-intro-copy {
       position: relative;
       z-index: 3;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       text-align: center;
       animation: altIntroCopy 1.35s cubic-bezier(.18, .84, .24, 1) both;
   }

   .alt-intro-copy small {
       color: #6ceeff;
       font: 900 9px/1 Inter, Arial, sans-serif;
       letter-spacing: .28em;
   }

   .alt-intro-copy strong {
       color: #f3ffff;
       font: 900 clamp(38px, 7vw, 88px)/.94 Inter, Arial, sans-serif;
       letter-spacing: .03em;
       text-shadow: 0 0 12px rgba(120, 242, 255, .58), 0 0 34px rgba(127, 91, 255, .40);
   }

   .alt-intro-copy span {
       color: #c9d9ff;
       font: 700 13px/1.2 Inter, Arial, sans-serif;
       letter-spacing: .06em;
   }

   @keyframes altIntroGrid {
       from {
           transform: perspective(600px) rotateX(66deg) translateY(70px);
           opacity: 0
       }

       to {
           transform: perspective(600px) rotateX(66deg) translateY(0);
           opacity: 1
       }
   }

   @keyframes altIntroCopy {
       0% {
           opacity: 0;
           transform: translateY(18px) scale(.94);
           filter: blur(5px)
       }

       30% {
           opacity: 1;
           transform: none;
           filter: blur(0)
       }

       78% {
           opacity: 1;
           transform: none;
           filter: blur(0)
       }

       100% {
           opacity: 0;
           transform: translateY(-8px) scale(1.02);
           filter: blur(2px)
       }
   }

   body[data-visual-mode="alternative"] {
       --alt-cyan: #69ecff;
       --alt-violet: #8774ff;
       --alt-pink: #ff68d4;
       --alt-deep: #060a18;
       background:
           radial-gradient(circle at 50% 9%, rgba(80, 95, 255, .28), transparent 28%),
           radial-gradient(circle at 12% 54%, rgba(54, 220, 255, .15), transparent 35%),
           radial-gradient(circle at 88% 67%, rgba(255, 75, 200, .12), transparent 31%),
           linear-gradient(180deg, #050817 0%, #08152b 46%, #04101f 100%) !important;
       color: #eaffff;
   }

   body[data-visual-mode="alternative"]::before {
       content: "";
       position: fixed;
       inset: 0;
       z-index: -3;
       pointer-events: none;
       background-image:
           radial-gradient(circle, rgba(255, 255, 255, .92) 0 1px, transparent 1.4px),
           radial-gradient(circle, rgba(115, 232, 255, .72) 0 1px, transparent 1.5px);
       background-size: 92px 92px, 137px 137px;
       background-position: 0 0, 31px 44px;
       opacity: .34;
       animation: altStarsDrift 34s linear infinite;
   }

   body[data-visual-mode="alternative"]::after {
       content: "";
       position: fixed;
       left: -10%;
       right: -10%;
       bottom: -18%;
       height: 54%;
       z-index: -2;
       pointer-events: none;
       background:
           radial-gradient(ellipse at center, rgba(70, 186, 255, .17), transparent 58%),
           repeating-linear-gradient(90deg, transparent 0 72px, rgba(95, 223, 255, .035) 73px 74px);
       filter: blur(1px);
       transform: perspective(900px) rotateX(66deg);
       transform-origin: center top;
   }

   @keyframes altStarsDrift {
       to {
           background-position: 92px 92px, 168px 181px
       }
   }

   body[data-visual-mode="alternative"] .topbar,
   body[data-visual-mode="alternative"] .banner-panel {
       background:
           linear-gradient(180deg, rgba(13, 31, 59, .84), rgba(5, 15, 32, .79)) !important;
       border-color: rgba(111, 231, 255, .25) !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .07),
           0 14px 32px rgba(0, 0, 0, .28),
           0 0 28px rgba(75, 188, 255, .06) !important;
       backdrop-filter: blur(12px) saturate(1.2);
   }

   body[data-visual-mode="alternative"] .topbar {
       position: relative;
       overflow: visible;
   }

   body[data-visual-mode="alternative"] .topbar::after {
       content: "ASCENSION // RENDU IMMERSIF";
       position: absolute;
       left: 50%;
       top: 100%;
       transform: translate(-50%, -1px);
       padding: 4px 10px;
       border-radius: 0 0 9px 9px;
       color: #aaf4ff;
       background: rgba(6, 20, 39, .88);
       border: 1px solid rgba(99, 225, 255, .18);
       border-top: 0;
       font: 900 6.5px/1 Inter, Arial, sans-serif;
       letter-spacing: .16em;
       white-space: nowrap;
   }

   body[data-visual-mode="alternative"] .panel-title,
   body[data-visual-mode="alternative"] .phase-label,
   body[data-visual-mode="alternative"] .turn-heading strong {
       color: #dfffff !important;
       text-shadow: 0 0 12px rgba(91, 224, 255, .36);
   }

   body[data-visual-mode="alternative"] .action-banner {
       background:
           radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .10), transparent 28%),
           linear-gradient(135deg, rgba(19, 54, 82, .92), rgba(22, 25, 60, .88)) !important;
       border: 1px solid rgba(109, 225, 255, .21) !important;
       box-shadow:
           inset 0 1px 0 rgba(255, 255, 255, .09),
           0 8px 18px rgba(0, 0, 0, .22) !important;
       clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 100%, 6% 100%, 0 88%);
   }

   body[data-visual-mode="alternative"] .action-banner.active {
       border-color: rgba(123, 243, 255, .68) !important;
       box-shadow:
           inset 0 0 20px rgba(94, 220, 255, .09),
           0 0 18px rgba(76, 219, 255, .28),
           0 11px 22px rgba(0, 0, 0, .26) !important;
   }

   body[data-visual-mode="alternative"] .score-card {
       background: rgba(9, 24, 47, .66) !important;
       border-color: color-mix(in srgb, var(--pcolor), transparent 58%) !important;
   }

   body[data-visual-mode="alternative"] .game-main {
       position: relative !important;
       display: block !important;
       overflow: hidden !important;
   }

   body[data-visual-mode="alternative"] .left-panel,
   body[data-visual-mode="alternative"] .right-panel {
       position: absolute !important;
       top: 10px;
       bottom: 10px;
       width: min(244px, 24vw);
       z-index: 14 !important;
       backdrop-filter: blur(10px);
       background: linear-gradient(180deg, rgba(18, 27, 49, .82), rgba(7, 13, 29, .86)) !important;
       box-shadow: 0 14px 32px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
   }

   body[data-visual-mode="alternative"] .left-panel {
       left: 10px
   }

   body[data-visual-mode="alternative"] .right-panel {
       right: 10px
   }

   body[data-visual-mode="alternative"] .topbar {
       position: relative;
       z-index: 18
   }

   body[data-visual-mode="alternative"] .board-wrap {
       perspective: 1600px;
       align-items: center;
       overflow: visible;
   }

   body[data-visual-mode="alternative"] .board-wrap::before {
       inset: -8% -10%;
       background:
           radial-gradient(ellipse at center, rgba(70, 214, 255, .11), transparent 53%),
           radial-gradient(ellipse at 50% 72%, rgba(132, 97, 255, .13), transparent 46%);
       filter: blur(18px);
   }

   body[data-visual-mode="alternative"] .board-wrap::after {
       content: "";
       position: absolute;
       left: 4%;
       right: 4%;
       bottom: -3%;
       height: 36%;
       z-index: 0;
       pointer-events: none;
       background:
           linear-gradient(180deg, transparent, rgba(48, 163, 220, .08)),
           repeating-linear-gradient(90deg, transparent 0 9%, rgba(103, 224, 255, .045) 9.3% 9.6%);
       filter: blur(4px);
       transform: translateZ(-100px);
   }

   body[data-visual-mode="alternative"] #board {
       width: min(calc(100dvh - 68px), calc(100vw - var(--left-panel) - var(--right-panel) - 30px), 1120px);
       gap: 4px;
       padding: 18px;
       overflow: visible;
       isolation: isolate;
       transform-style: preserve-3d;
       border: 1px solid rgba(103, 228, 255, .20);
       border-radius: 24px;
       background:
           linear-gradient(rgba(105, 229, 255, .032), rgba(105, 229, 255, .012)),
           rgba(3, 10, 24, .14);
       box-shadow:
           0 0 0 1px rgba(102, 226, 255, .05) inset,
           0 32px 70px rgba(0, 0, 0, .43),
           0 0 52px rgba(62, 187, 255, .08);
       transform: translateY(-1.6%) perspective(1600px) rotateX(50deg) rotateZ(-1.1deg) scale(.96);
       transform-origin: center 45%;
   }

   body[data-visual-mode="alternative"] #board::before {
       left: -3%;
       right: -3%;
       top: -2%;
       bottom: -3%;
       height: auto;
       z-index: -4;
       background:
           linear-gradient(rgba(89, 223, 255, .07) 1px, transparent 1px),
           linear-gradient(90deg, rgba(89, 223, 255, .07) 1px, transparent 1px);
       background-size: calc(100% / 11) calc(100% / 11);
       clip-path: none;
       filter: blur(.15px);
       opacity: .48;
   }

   body[data-visual-mode="alternative"] #board::after {
       left: 6%;
       right: 6%;
       bottom: -74px;
       height: 86px;
       z-index: -6;
       background: radial-gradient(ellipse at center, rgba(87, 214, 255, .18), transparent 68%);
       filter: blur(18px);
   }

   body[data-visual-mode="alternative"] .cell {
       transform-style: preserve-3d;
       border-radius: 7px;
       transition: filter .12s ease, box-shadow .12s ease, transform .15s ease, background .15s ease;
   }

   body[data-visual-mode="alternative"] .cell.void,
   body[data-visual-mode="alternative"] .cell.void.cloud-b {
       background: transparent !important;
       border: 1px solid transparent;
       box-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .cell.void::before {
       display: none;
   }

   body[data-visual-mode="alternative"] .cell:hover {
       z-index: 18;
       transform: translateZ(8px);
       filter: brightness(1.22);
   }

   body[data-visual-mode="alternative"] .cell.reachable {
       background: rgba(55, 202, 255, .10) !important;
       box-shadow:
           inset 0 0 0 2px rgba(103, 238, 255, .68),
           0 0 14px rgba(77, 222, 255, .34) !important;
   }

   body[data-visual-mode="alternative"] .cell.preview-valid {
       background: rgba(78, 255, 190, .16) !important
   }

   body[data-visual-mode="alternative"] .cell.preview-invalid {
       background: rgba(255, 83, 128, .17) !important
   }

   .island-alt-core,
   .island-alt-runes {
       display: none
   }

   body[data-visual-mode="alternative"] .island-art-layer {
       left: 18px;
       top: 18px;
       width: calc(100% - 36px);
       height: calc(100% - 36px);
       z-index: 4;
       overflow: visible;
   }

   body[data-visual-mode="alternative"] .island-art {
       filter: url(#altIslandGlow)
   }

   body[data-visual-mode="alternative"] .island-deep-shadow {
       fill: #020511;
       opacity: .82;
   }

   body[data-visual-mode="alternative"] .island-alt-core {
       display: block;
       fill: url(#altIslandCore);
       stroke: #7deeff;
       stroke-width: .05;
       opacity: .78;
       filter: drop-shadow(0 0 .10px #64edff);
   }

   body[data-visual-mode="alternative"] .island-cliff {
       fill: url(#altIslandCliff) !important;
       stroke: #244f70 !important;
       stroke-width: .11 !important;
   }

   body[data-visual-mode="alternative"] .island-rim {
       stroke: #c8ffff !important;
       stroke-width: .13 !important;
       filter: drop-shadow(0 0 .05px #6cf1ff);
   }

   body[data-visual-mode="alternative"] .island-top {
       fill: url(#altIslandTop) !important;
       stroke: #78efff !important;
       stroke-width: .055 !important;
       filter:
           drop-shadow(0 .12px .10px rgba(0, 0, 0, .68)) drop-shadow(0 0 .04px rgba(110, 240, 255, .64)) !important;
   }

   body[data-visual-mode="alternative"] .island-texture {
       fill: url(#altRunes) !important;
       opacity: .38 !important;
   }

   body[data-visual-mode="alternative"] .island-alt-runes {
       display: block;
       fill: url(#altRunes);
       stroke: none;
       opacity: .33;
       mix-blend-mode: screen;
   }

   body[data-visual-mode="alternative"] .island-owner-line {
       stroke: var(--owner-color);
       stroke-width: .045;
       opacity: .88;
       filter: drop-shadow(0 0 .05px var(--owner-color));
   }

   body[data-visual-mode="alternative"] .cell.sanctuary {
       transform: translateZ(15px);
       border-radius: 11px;
       background:
           radial-gradient(circle at 50% 42%, rgba(255, 249, 196, .82), rgba(104, 223, 255, .20) 36%, rgba(74, 64, 183, .16) 69%, rgba(8, 17, 38, .35)) !important;
       border: 1px solid rgba(194, 251, 255, .74) !important;
       box-shadow:
           inset 0 0 18px rgba(134, 237, 255, .19),
           0 0 20px rgba(112, 222, 255, .28),
           0 11px 18px rgba(0, 0, 0, .32) !important;
   }

   body[data-visual-mode="alternative"] .cell.sanctuary-center {
       transform: translateZ(24px);
       background:
           radial-gradient(circle, #fffad0 0 11%, #8bf5ff 12% 29%, #7a71ff 31% 55%, #171940 58%) !important;
       box-shadow:
           inset 0 0 0 2px rgba(239, 255, 255, .76),
           0 0 25px rgba(110, 236, 255, .55),
           0 15px 24px rgba(0, 0, 0, .37) !important;
   }

   body[data-visual-mode="alternative"] .village-icon {
       font-size: 0 !important;
       transform: translateZ(48px) rotateX(-50deg) rotateZ(1.1deg);
       transform-style: preserve-3d;
   }

   body[data-visual-mode="alternative"] .village-icon::before {
       content: "";
       width: 34%;
       height: 56%;
       border-radius: 9px 9px 5px 5px;
       background:
           linear-gradient(90deg, rgba(255, 255, 255, .20), transparent 38%),
           linear-gradient(180deg, color-mix(in srgb, var(--village-color), white 26%), var(--village-color));
       clip-path: polygon(14% 21%, 31% 21%, 31% 0, 46% 0, 46% 20%, 60% 20%, 60% 0, 76% 0, 76% 21%, 90% 21%, 90% 100%, 10% 100%, 10% 21%);
       box-shadow:
           inset 0 0 0 1px rgba(255, 255, 255, .32),
           0 0 16px color-mix(in srgb, var(--village-color), transparent 34%),
           0 13px 12px rgba(0, 0, 0, .32);
   }

   body[data-visual-mode="alternative"] .village-icon::after {
       content: "";
       position: absolute;
       width: 48%;
       height: 15%;
       bottom: 14%;
       border-radius: 50%;
       border: 1px solid color-mix(in srgb, var(--village-color), white 34%);
       background: color-mix(in srgb, var(--village-color), transparent 70%);
       box-shadow:
           0 0 14px var(--village-color),
           inset 0 0 9px color-mix(in srgb, var(--village-color), white 30%);
   }

   .alt-guardian-3d,
   .alt-moving-guardian {
       display: none
   }

   body[data-visual-mode="alternative"] .character {
       width: 100% !important;
       height: 100% !important;
       left: 0 !important;
       top: 0 !important;
       inset: 0 !important;
       z-index: 24;
       filter: none !important;
       transform: translateZ(54px) rotateX(-50deg) rotateZ(1.1deg);
       transform-origin: center 70%;
       transform-style: preserve-3d;
   }

   body[data-visual-mode="alternative"] .character::before {
       left: 25%;
       right: 25%;
       bottom: 12%;
       height: 11%;
       background: rgba(0, 0, 0, .62);
       filter: blur(5px);
   }

   body[data-visual-mode="alternative"] .character-standee,
   body[data-visual-mode="alternative"] .character-base {
       display: none !important;
   }

   body[data-visual-mode="alternative"] .alt-guardian-3d,
   .alt-moving-token .alt-moving-guardian {
       position: relative;
       width: 44%;
       height: 72%;
       display: block;
       transform-style: preserve-3d;
       filter:
           drop-shadow(0 0 8px color-mix(in srgb, var(--token-color), transparent 38%)) drop-shadow(0 10px 8px rgba(0, 0, 0, .42));
   }

   .alt-guardian-aura {
       position: absolute;
       left: 50%;
       bottom: -8%;
       width: 116%;
       height: 26%;
       transform: translateX(-50%) rotateX(72deg);
       border-radius: 50%;
       border: 1px solid color-mix(in srgb, var(--token-color), white 24%);
       background: radial-gradient(ellipse, color-mix(in srgb, var(--token-color), transparent 56%), transparent 68%);
       box-shadow:
           0 0 12px color-mix(in srgb, var(--token-color), transparent 38%),
           inset 0 0 10px color-mix(in srgb, var(--token-color), transparent 48%);
       animation: altGuardianAura 1.4s ease-in-out infinite alternate;
   }

   .alt-guardian-legs {
       position: absolute;
       left: 27%;
       right: 27%;
       bottom: 8%;
       height: 27%;
       display: flex;
       justify-content: space-between;
   }

   .alt-guardian-legs i {
       width: 31%;
       height: 100%;
       border-radius: 4px 4px 7px 7px;
       background:
           linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 35%),
           linear-gradient(180deg, color-mix(in srgb, var(--token-color), white 10%), #13233c);
       box-shadow: inset -2px 0 0 rgba(0, 0, 0, .20), 0 5px 5px rgba(0, 0, 0, .30);
   }

   .alt-guardian-body {
       position: absolute;
       left: 18%;
       right: 18%;
       bottom: 28%;
       height: 39%;
       border-radius: 42% 42% 25% 25% / 24% 24% 58% 58%;
       background:
           linear-gradient(90deg, rgba(255, 255, 255, .25), transparent 28%, rgba(0, 0, 0, .24) 82%),
           linear-gradient(180deg, color-mix(in srgb, var(--token-color), white 20%), color-mix(in srgb, var(--token-color), #17203c 42%));
       box-shadow:
           inset -5px -5px 8px rgba(0, 0, 0, .22),
           inset 4px 3px 6px rgba(255, 255, 255, .10),
           0 6px 8px rgba(0, 0, 0, .28);
       clip-path: polygon(14% 0, 86% 0, 100% 28%, 86% 100%, 14% 100%, 0 28%);
   }

   .alt-guardian-core {
       position: absolute;
       left: 50%;
       bottom: 40%;
       width: 22%;
       aspect-ratio: 1;
       transform: translateX(-50%);
       border-radius: 50%;
       background: radial-gradient(circle, #fff 0 10%, #8ff7ff 14% 38%, var(--token-color) 42% 67%, transparent 70%);
       box-shadow: 0 0 8px #b8ffff, 0 0 16px var(--token-color);
       animation: altCorePulse .9s ease-in-out infinite alternate;
   }

   .alt-guardian-head {
       position: absolute;
       left: 50%;
       top: 5%;
       width: 48%;
       aspect-ratio: 1;
       transform: translateX(-50%);
       border-radius: 48% 48% 42% 42%;
       background:
           radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .48), transparent 19%),
           linear-gradient(145deg, #e7faff 0%, #7197b4 45%, #20344c 100%);
       border: 1px solid rgba(222, 251, 255, .62);
       box-shadow: inset -5px -5px 9px rgba(0, 0, 0, .28), 0 5px 7px rgba(0, 0, 0, .30);
   }

   .alt-guardian-visor {
       position: absolute;
       left: 50%;
       top: 19%;
       width: 39%;
       height: 13%;
       transform: translateX(-50%);
       border-radius: 999px;
       background: linear-gradient(90deg, #76f9ff, var(--token-color), #ff7ee5);
       box-shadow: 0 0 7px #70f5ff, inset 0 0 3px #fff;
   }

   .alt-guardian-crest {
       position: absolute;
       left: 50%;
       top: -2%;
       width: 19%;
       height: 17%;
       transform: translateX(-50%);
       clip-path: polygon(50% 0, 100% 100%, 50% 73%, 0 100%);
       background: linear-gradient(180deg, #efffff, var(--token-color));
       filter: drop-shadow(0 0 5px var(--token-color));
   }

   body[data-visual-mode="alternative"] .character.carrying .alt-guardian-core {
       background: radial-gradient(circle, #fff 0 10%, #fff6ae 14% 39%, #ffbd38 42% 67%, transparent 70%);
       box-shadow: 0 0 9px #fff7bc, 0 0 19px #ffc94e;
   }

   body[data-visual-mode="alternative"] .character.carrying {
       filter: none !important
   }

   body[data-visual-mode="alternative"] .carrier-crown {
       transform: translateY(-21px) translateZ(14px) scale(.82);
       filter: drop-shadow(0 0 8px #fff8c7) drop-shadow(0 0 16px #ffc943);
   }

   body[data-visual-mode="alternative"] .character.selectable,
   body[data-visual-mode="alternative"] .character.ready-action {
       animation: altGuardianReady .82s ease-in-out infinite alternate;
   }

   body[data-visual-mode="alternative"] .character.character-in-motion {
       opacity: 0
   }

   @keyframes altGuardianAura {
       to {
           transform: translateX(-50%) rotateX(72deg) scale(1.12);
           opacity: .68
       }
   }

   @keyframes altCorePulse {
       to {
           transform: translateX(-50%) scale(1.13);
           filter: brightness(1.18)
       }
   }

   @keyframes altGuardianReady {
       from {
           transform: translateZ(54px) rotateX(-50deg) rotateZ(1.1deg) translateY(0)
       }

       to {
           transform: translateZ(58px) rotateX(-50deg) rotateZ(1.1deg) translateY(-3px)
       }
   }

   .alt-moving-token {
       overflow: visible;
       perspective: 700px;
       filter: none !important;
   }

   .alt-moving-token .alt-moving-guardian {
       --token-color: var(--ghost-color);
       width: 44%;
       height: 76%;
       transform: translateX(64%) translateY(8%) rotateX(-10deg);
   }

   .alt-moving-token.moving-move::after {
       content: "";
       position: absolute;
       left: 25%;
       right: 25%;
       bottom: 13%;
       height: 12%;
       border-radius: 50%;
       background: rgba(64, 224, 255, .34);
       filter: blur(7px);
       box-shadow: 0 0 16px rgba(80, 224, 255, .55);
   }

   body[data-visual-mode="alternative"] .artifact {
       transform: translateZ(44px) rotateX(-50deg) rotateZ(1.1deg);
       filter:
           drop-shadow(0 0 7px rgba(255, 255, 255, .98)) drop-shadow(0 0 21px rgba(255, 204, 59, .98)) drop-shadow(0 13px 10px rgba(0, 0, 0, .38)) !important;
   }

   @media(max-width:900px) {
       .alternative-start-btn {
           min-width: 220px
       }

       body[data-visual-mode="alternative"] #board {
           gap: 2px;
           padding: 11px;
           transform: translateY(-1%) perspective(1400px) rotateX(46deg) rotateZ(-.8deg) scale(.97);
       }

       body[data-visual-mode="alternative"] .island-art-layer {
           left: 11px;
           top: 11px;
           width: calc(100% - 22px);
           height: calc(100% - 22px);
       }
   }

   @media(prefers-reduced-motion:reduce) {

       .alternative-start-btn::before,
       body[data-visual-mode="alternative"]::before,
       .alt-guardian-aura,
       .alt-guardian-core,
       body[data-visual-mode="alternative"] .character.selectable,
       body[data-visual-mode="alternative"] .character.ready-action {
           animation: none !important;
       }
   }


   /* =======================================================================
     V22.22.27 — Correctifs version alternative
     - personnages de nouveau lisibles sur les cases
     - fond alternatif retiré, image d'origine restaurée
     ======================================================================= */

   body[data-visual-mode="alternative"] {
       background: linear-gradient(180deg, #82c8df 0%, #a9d8e8 54%, #c9e5ee 100%) fixed !important;
       color: var(--text) !important;
   }

   body[data-visual-mode="alternative"]::before,
   body[data-visual-mode="alternative"]::after {
       display: none !important;
       animation: none !important;
       content: none !important;
   }

   body[data-visual-mode="alternative"] .setup-card,
   body[data-visual-mode="alternative"] .topbar,
   body[data-visual-mode="alternative"] .banner-panel {
       backdrop-filter: blur(8px) saturate(1.08);
   }

   /* On conserve l'ambiance alternative du plateau, mais on rend les personnages
     immédiatement visibles en revenant à une lecture type standee/emoji. */
   body[data-visual-mode="alternative"] .character {
       width: 100% !important;
       height: 100% !important;
       left: 0 !important;
       top: 0 !important;
       inset: 0 !important;
       display: block !important;
       transform: translateZ(40px) rotateX(-50deg) rotateZ(1.1deg) !important;
       transform-origin: center 72% !important;
       transform-style: preserve-3d;
       opacity: 1 !important;
   }

   body[data-visual-mode="alternative"] .character.character-in-motion {
       opacity: 0 !important;
   }

   body[data-visual-mode="alternative"] .character::before {
       left: 22% !important;
       right: 22% !important;
       bottom: 10% !important;
       height: 14% !important;
       border-radius: 50% !important;
       background: rgba(0, 0, 0, .62) !important;
       filter: blur(4px) !important;
       opacity: 1 !important;
   }

   body[data-visual-mode="alternative"] .character-standee {
       display: grid !important;
       place-items: center !important;
       position: absolute !important;
       inset: 0 !important;
       width: 100% !important;
       height: 100% !important;
       z-index: 3 !important;
       font-size: clamp(18px, 1.75vw, 27px) !important;
       line-height: 1 !important;
       transform: translateY(-1px) !important;
       text-shadow:
           0 3px 0 rgba(255, 255, 255, .28),
           0 8px 10px rgba(0, 0, 0, .55),
           0 0 8px color-mix(in srgb, var(--token-color), transparent 45%) !important;
       filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .52));
   }

   body[data-visual-mode="alternative"] .character-base {
       display: block !important;
       position: absolute !important;
       left: 25% !important;
       right: 25% !important;
       bottom: 11% !important;
       height: 10% !important;
       border-radius: 50% !important;
       background: radial-gradient(ellipse, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 62%, transparent 72%) !important;
       box-shadow:
           0 0 8px color-mix(in srgb, var(--token-color), transparent 45%),
           inset 0 0 5px rgba(255, 255, 255, .25) !important;
       opacity: .95 !important;
   }

   body[data-visual-mode="alternative"] .alt-guardian-3d {
       display: none !important;
   }

   body[data-visual-mode="alternative"] .alt-moving-token .alt-moving-guardian {
       display: none !important;
   }

   body[data-visual-mode="alternative"] .alt-moving-token {
       font-size: 24px !important;
       text-shadow:
           0 8px 10px rgba(0, 0, 0, .55),
           0 0 8px color-mix(in srgb, var(--ghost-color), transparent 42%);
   }

   body[data-visual-mode="alternative"] .cell:hover .character-standee {
       filter: drop-shadow(0 0 8px rgba(255, 255, 255, .42)) drop-shadow(0 4px 6px rgba(0, 0, 0, .56));
   }

   body[data-visual-mode="alternative"] .character.selectable .character-standee,
   body[data-visual-mode="alternative"] .character.ready-action .character-standee {
       text-shadow:
           0 0 12px color-mix(in srgb, var(--token-color), white 18%),
           0 8px 10px rgba(0, 0, 0, .56) !important;
   }

   body[data-visual-mode="alternative"] .character.carrying .character-standee {
       filter:
           drop-shadow(0 0 10px rgba(255, 223, 113, .80)) drop-shadow(0 4px 6px rgba(0, 0, 0, .58)) !important;
   }



   /* =======================================================================
   ILYOS — KAYKIT EDITION
   Nouvelle direction artistique Three.js / KayKit. Le plateau DOM original
   reste le moteur de règles et devient la couche d'interaction invisible.
   ======================================================================= */
   :root {
       --kay-cream: #fff6db;
       --kay-paper: #f8e8bd;
       --kay-ink: #26384b;
       --kay-blue: #4eb8e8;
       --kay-blue-dark: #267ca6;
       --kay-green: #68b94b;
       --kay-green-dark: #32723d;
       --kay-gold: #f2bd48;
       --kay-red: #e96354;
       --kay-shadow: rgba(39, 60, 72, .25);
   }

   body[data-visual-mode="alternative"] {
       background:
           radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .92) 0 5%, transparent 20%),
           radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .66) 0 4%, transparent 17%),
           linear-gradient(180deg, #8ed6f1 0%, #bfeaf6 48%, #ecf9f5 100%) !important;
       color: var(--kay-ink) !important;
   }

   body[data-visual-mode="alternative"]::before {
       opacity: .34 !important;
       background:
           radial-gradient(ellipse at 12% 25%, rgba(255, 255, 255, .9) 0 5%, transparent 15%),
           radial-gradient(ellipse at 84% 34%, rgba(255, 255, 255, .72) 0 6%, transparent 16%),
           radial-gradient(ellipse at 52% 8%, rgba(255, 255, 255, .6) 0 4%, transparent 12%) !important;
       filter: blur(10px) !important;
   }

   body[data-visual-mode="alternative"]::after {
       display: none !important
   }

   body[data-visual-mode="alternative"] .topbar,
   body[data-visual-mode="alternative"] .banner-panel,
   body[data-visual-mode="alternative"] .turn-steps,
   body[data-visual-mode="alternative"] .sound-menu,
   body[data-visual-mode="alternative"] .online-status {
       color: var(--kay-ink) !important;
       background: linear-gradient(180deg, #fff9e9, #f4dfad) !important;
       border: 3px solid #fff !important;
       outline: 2px solid #bd8c43 !important;
       box-shadow: 0 7px 0 #9b6d35, 0 14px 26px rgba(55, 77, 90, .18) !important;
       text-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .topbar {
       border-radius: 0 0 22px 22px !important;
       background: linear-gradient(180deg, #fffdf5, #f7e7b8) !important;
   }

   body[data-visual-mode="alternative"] .banner-panel {
       border-radius: 22px !important;
       overflow: visible !important;
   }

   body[data-visual-mode="alternative"] .banner-panel::before,
   body[data-visual-mode="alternative"] .banner-panel::after {
       display: none !important
   }

   body[data-visual-mode="alternative"] .panel-title,
   body[data-visual-mode="alternative"] .active-name,
   body[data-visual-mode="alternative"] #activeName,
   body[data-visual-mode="alternative"] .turn-summary,
   body[data-visual-mode="alternative"] .instruction {
       color: var(--kay-ink) !important;
       text-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .panel-title {
       background: #5dad48 !important;
       color: white !important;
       border: 2px solid #fff !important;
       outline: 2px solid #397735 !important;
       border-radius: 999px !important;
       padding: 7px 10px !important;
       transform: translateY(-4px);
       box-shadow: 0 4px 0 #397735 !important;
   }

   body[data-visual-mode="alternative"] .portrait {
       background: linear-gradient(145deg, #fff, #e6f6ff) !important;
       border: 3px solid #fff !important;
       outline: 3px solid var(--player-color) !important;
       box-shadow: 0 5px 0 color-mix(in srgb, var(--player-color), #17394a 45%) !important;
   }

   body[data-visual-mode="alternative"] .score-card,
   body[data-visual-mode="alternative"] .island-option,
   body[data-visual-mode="alternative"] .action-banner,
   body[data-visual-mode="alternative"] .deck-display,
   body[data-visual-mode="alternative"] .unit-card {
       background: linear-gradient(180deg, #fffef8, #f3dfae) !important;
       color: var(--kay-ink) !important;
       border: 2px solid rgba(255, 255, 255, .96) !important;
       outline: 2px solid rgba(133, 91, 43, .62) !important;
       border-radius: 15px !important;
       box-shadow: 0 4px 0 rgba(117, 76, 35, .58), 0 8px 14px rgba(50, 73, 84, .12) !important;
       text-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .island-option:hover,
   body[data-visual-mode="alternative"] .action-banner:hover {
       transform: translateY(-2px) !important;
       filter: brightness(1.04) saturate(1.05) !important;
   }

   body[data-visual-mode="alternative"] .island-option.selected,
   body[data-visual-mode="alternative"] .action-banner.active {
       outline-color: var(--kay-gold) !important;
       box-shadow: 0 4px 0 #a66d26, 0 0 0 4px rgba(242, 189, 72, .34), 0 10px 20px rgba(50, 73, 84, .16) !important;
   }

   body[data-visual-mode="alternative"] button {
       font-family: Inter, Segoe UI, Arial, sans-serif;
   }

   body[data-visual-mode="alternative"] .primary-btn,
   body[data-visual-mode="alternative"] .small-btn,
   body[data-visual-mode="alternative"] .online-tool-btn {
       color: white !important;
       background: linear-gradient(180deg, #71c957, #4a9c3e) !important;
       border: 2px solid white !important;
       outline: 2px solid #2d6d35 !important;
       border-radius: 12px !important;
       box-shadow: 0 5px 0 #2d6d35 !important;
       text-shadow: 0 1px 0 rgba(0, 0, 0, .22) !important;
   }

   body[data-visual-mode="alternative"] .primary-btn:active,
   body[data-visual-mode="alternative"] .small-btn:active,
   body[data-visual-mode="alternative"] .online-tool-btn:active {
       transform: translateY(4px) !important;
       box-shadow: 0 1px 0 #2d6d35 !important;
   }

   /* L'édition KayKit devient la seule version proposée. */
   #startBtn {
       display: none !important
   }

   .alternative-start-btn {
       min-width: min(480px, 82vw) !important;
       padding: 18px 28px !important;
       border: 4px solid white !important;
       outline: 3px solid #2d6d35 !important;
       border-radius: 22px !important;
       background: linear-gradient(180deg, #77cc59, #46973b) !important;
       color: white !important;
       box-shadow: 0 9px 0 #2d6d35, 0 18px 30px rgba(45, 91, 64, .28) !important;
       letter-spacing: .07em !important;
       text-shadow: 0 2px 0 rgba(0, 0, 0, .22) !important;
   }

   .alternative-start-btn::before {
       background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent) !important;
   }

   .alternative-start-btn span {
       font-size: clamp(20px, 3vw, 34px) !important
   }

   .alternative-start-btn small {
       color: #efffe7 !important;
       letter-spacing: .04em !important
   }

   .setup-card {
       background: linear-gradient(180deg, rgba(255, 253, 244, .98), rgba(246, 226, 177, .98)) !important;
       color: var(--kay-ink) !important;
       border: 5px solid #fff !important;
       outline: 3px solid #a9793f !important;
       border-radius: 30px !important;
       box-shadow: 0 12px 0 #8b6132, 0 28px 70px rgba(50, 83, 92, .28) !important;
   }

   .logo {
       color: #3d8f43 !important;
       text-shadow: 0 4px 0 #fff, 0 7px 0 #d2a152 !important
   }

   .subtitle,
   .intro,
   .setup-badge,
   .setup-card label {
       color: var(--kay-ink) !important;
       text-shadow: none !important
   }

   /* Zone 3D : le plateau DOM conserve uniquement sa géométrie et ses règles. */
   body[data-visual-mode="alternative"] .board-wrap {
       position: absolute !important;
       inset: 0 !important;
       align-items: center !important;
       justify-items: center !important;
       perspective: none !important;
       filter: none !important;
       overflow: hidden !important;
       isolation: isolate;
       z-index: 1;
   }

   body[data-visual-mode="alternative"] .board-wrap::before {
       inset: -3% -4% !important;
       border-radius: 40px;
       background: radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, .78), rgba(95, 190, 222, .18) 52%, transparent 72%) !important;
       filter: blur(17px) !important;
   }

   body[data-visual-mode="alternative"] .board-wrap::after {
       display: none !important
   }

   body[data-visual-mode="alternative"] #board {
       width: min(calc(100dvh - 84px), calc(100vw - 24px), 1240px) !important;
       aspect-ratio: 1 !important;
       padding: 0 !important;
       gap: 0 !important;
       border: 0 !important;
       outline: 0 !important;
       border-radius: 28px !important;
       background: transparent !important;
       box-shadow: none !important;
       transform: none !important;
       overflow: visible !important;
   }

   body.kaykit-ready[data-visual-mode="alternative"] #board {
       opacity: .001 !important;
       pointer-events: none !important;
       z-index: 1 !important;
       /* Plateau HTML conservé sous le canvas 3D (événements, tests) mais
          invisible : son ombre portée floue et ses animations en boucle étaient
          recalculées à chaque image, sans rien montrer. */
       filter: none !important;
       transition: none !important;
   }

   body.kaykit-ready[data-visual-mode="alternative"] #board *,
   body.kaykit-ready[data-visual-mode="alternative"] #board *::before,
   body.kaykit-ready[data-visual-mode="alternative"] #board *::after {
       animation: none !important;
       transition: none !important;
   }

   body.kaykit-ready[data-visual-mode="alternative"] #board::before,
   body.kaykit-ready[data-visual-mode="alternative"] #board::after,
   body.kaykit-ready[data-visual-mode="alternative"] #board .cell,
   body.kaykit-ready[data-visual-mode="alternative"] #board .island-art-layer,
   body.kaykit-ready[data-visual-mode="alternative"] #board .exit-gate,
   body.kaykit-ready[data-visual-mode="alternative"] #board .exit-corner {
       opacity: 0 !important;
       background: transparent !important;
       border: 0 !important;
       box-shadow: none !important;
       filter: none !important;
       pointer-events: none !important;
   }

   .kaykit-canvas {
       position: absolute;
       z-index: 4;
       display: block;
       border: 4px solid rgba(255, 255, 255, .94);
       outline: 3px solid rgba(63, 119, 96, .72);
       border-radius: 30px;
       background: linear-gradient(180deg, #79cce9 0%, #bceaf4 58%, #e8f8ed 100%);
       box-shadow: 0 12px 0 rgba(61, 116, 91, .48), 0 34px 64px rgba(27, 63, 78, .25), inset 0 0 60px rgba(255, 255, 255, .18);
       cursor: pointer;
       touch-action: none;
   }

   .kaykit-canvas:focus-visible {
       outline: 5px solid #ffd75e
   }

   .board-wrap:fullscreen,
   .board-wrap:-webkit-full-screen {
       position: fixed !important;
       inset: 0 !important;
       width: 100vw !important;
       height: 100vh !important;
       height: 100dvh !important;
       display: grid !important;
       place-items: center !important;
       padding: 0 !important;
       margin: 0 !important;
       background: linear-gradient(180deg, #9adff6 0%, #d9f7ff 60%, #f4fff9 100%) !important;
       z-index: 9999 !important;
       overflow: hidden !important;
   }

   body[data-visual-mode="alternative"] .board-wrap:fullscreen #board,
   body[data-visual-mode="alternative"] .board-wrap:-webkit-full-screen #board {
       width: 100vw !important;
       height: 100vh !important;
       height: 100dvh !important;
       aspect-ratio: auto !important;
       max-width: none !important;
       max-height: none !important;
       border-radius: 0 !important;
   }

   .board-wrap:fullscreen .kaykit-ui,
   .board-wrap:-webkit-full-screen .kaykit-cursor-label {
       position: absolute;
       left: 50%;
       bottom: 58px;
       z-index: 12;
       transform: translateX(-50%) translateY(8px);
       min-width: 170px;
       padding: 8px 13px;
       border: 1px solid rgba(255, 255, 255, .42);
       border-radius: 999px;
       background: rgba(13, 35, 50, .88);
       color: #f5fbff;
       font-size: 11px;
       font-weight: 900;
       letter-spacing: .06em;
       text-align: center;
       box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
       backdrop-filter: blur(10px);
       pointer-events: none;
       opacity: 0;
       transition: opacity .12s ease, transform .12s ease, border-color .12s ease
   }

   .kaykit-cursor-label.visible {
       opacity: 1;
       transform: translateX(-50%) translateY(0)
   }

   .kaykit-cursor-label[data-kind="move"] {
       border-color: #67e38f;
       color: #eafff0
   }

   .kaykit-cursor-label[data-kind="push"] {
       border-color: #ff975c;
       color: #fff0e5
   }

   .kaykit-cursor-label[data-kind="magic"] {
       border-color: #c986ff;
       color: #f6e9ff
   }

   .kaykit-cursor-label[data-kind="place"] {
       border-color: #62ef9a;
       color: #e8fff0
   }

   .kaykit-cursor-label[data-kind="invalid"] {
       border-color: #ff6675;
       color: #ffe9ec
   }

   .kaykit-cursor-label[data-kind="select"] {
       border-color: #f4c84b;
       color: #fff2b8
   }

   .kaykit-ui {
       z-index: 10010 !important;
   }

   .board-wrap:fullscreen .kaykit-controls,
   .board-wrap:-webkit-full-screen .kaykit-controls {
       right: 20px !important;
       top: 20px !important;
       flex-wrap: wrap;
       max-width: min(620px, 72vw);
       justify-content: flex-end;
   }

   .board-wrap:fullscreen .kaykit-badge,
   .board-wrap:-webkit-full-screen .kaykit-badge {
       left: 20px !important;
       top: 20px !important;
   }

   .board-wrap:fullscreen .kaykit-status,
   .board-wrap:-webkit-full-screen .kaykit-status {
       left: 50% !important;
       transform: translateX(-50%);
       bottom: 20px !important;
   }

   .board-wrap:fullscreen .kaykit-camera-hint,
   .board-wrap:-webkit-full-screen .kaykit-camera-hint {
       bottom: 58px !important;
   }

   .board-wrap:fullscreen .kaykit-canvas,
   .board-wrap:-webkit-full-screen .kaykit-canvas {
       width: 100vw !important;
       height: 100vh !important;
       height: 100dvh !important;
       border-radius: 0 !important;
       border-width: 0 !important;
       outline: 0 !important;
       box-shadow: none !important;
   }

   .kaykit-ui {
       position: absolute;
       z-index: 8;
       display: flex;
       align-items: center;
       gap: 7px;
       pointer-events: none;
       font-weight: 900;
       color: #2f4d49;
       text-shadow: none;
   }

   .kaykit-ui>* {
       pointer-events: auto
   }

   .kaykit-camera-hint {
       position: absolute;
       left: 50%;
       bottom: 48px;
       z-index: 9;
       transform: translateX(-50%);
       padding: 7px 12px;
       border: 1px solid rgba(255, 255, 255, .82);
       border-radius: 999px;
       background: rgba(28, 54, 61, .68);
       color: #fff;
       font-size: 10px;
       font-weight: 900;
       letter-spacing: .06em;
       pointer-events: none;
       backdrop-filter: blur(8px);
       opacity: .9;
       transition: opacity .25s ease;
   }

   .kaykit-camera-hint.hidden {
       opacity: 0
   }

   .kaykit-badge {
       left: 18px;
       top: 18px;
       padding: 7px 11px;
       border: 2px solid white;
       outline: 2px solid #397735;
       border-radius: 999px;
       background: linear-gradient(180deg, #7bcc5e, #4d9d40);
       color: white;
       box-shadow: 0 4px 0 #397735;
       font-size: 10px;
       letter-spacing: .08em;
   }

   .kaykit-controls {
       right: 18px;
       top: 18px
   }

   .kaykit-control-btn {
       min-height: 32px;
       padding: 7px 11px;
       border: 2px solid white;
       outline: 2px solid #315c78;
       border-radius: 10px;
       background: linear-gradient(180deg, #69c8ed, #3695c3);
       color: white;
       box-shadow: 0 4px 0 #315c78;
       font-size: 10px;
       font-weight: 900;
       letter-spacing: .04em;
   }

   .kaykit-control-btn:active {
       transform: translateY(3px);
       box-shadow: 0 1px 0 #315c78
   }

   .kaykit-status {
       left: 50%;
       bottom: 16px;
       transform: translateX(-50%);
       padding: 7px 12px;
       border-radius: 999px;
       background: rgba(255, 250, 229, .92);
       border: 2px solid white;
       outline: 2px solid rgba(121, 86, 43, .62);
       box-shadow: 0 4px 0 rgba(121, 86, 43, .48);
       color: #4b563f;
       font-size: 10px;
       white-space: nowrap;
       transition: opacity .25s ease;
   }

   .kaykit-status.loaded {
       opacity: .55
   }

   .alt-mode-intro {
       background: rgba(66, 139, 111, .18) !important;
       backdrop-filter: blur(8px) !important;
   }

   .alt-intro-copy {
       color: #28473f;
       background: linear-gradient(180deg, #fffdf4, #f4e2b6);
       border: 4px solid white;
       outline: 3px solid #4a8d45;
       border-radius: 24px;
       box-shadow: 0 9px 0 #397735, 0 22px 55px rgba(35, 71, 64, .24);
       text-shadow: none;
   }

   .alt-intro-grid {
       opacity: .12 !important;
       background-size: 38px 38px !important
   }

   @media(max-width:1050px) {
       .kaykit-badge {
           display: none
       }

       .kaykit-controls {
           right: 10px;
           top: 10px
       }

       .kaykit-status {
           bottom: 10px
       }
   }

   @media(max-height:720px) {
       body[data-visual-mode="alternative"] #board {
           width: min(calc(100dvh - 84px), calc(100vw - 18px), 1080px) !important;
       }

       .kaykit-canvas {
           border-radius: 22px
       }
   }



   /* Lisibilité finale des libellés sur les panneaux clairs KayKit. */
   body[data-visual-mode="alternative"] #turnLabel,
   body[data-visual-mode="alternative"] #phaseLabel,
   body[data-visual-mode="alternative"] #instruction,
   body[data-visual-mode="alternative"] .action-copy,
   body[data-visual-mode="alternative"] .action-copy strong,
   body[data-visual-mode="alternative"] .action-copy span,
   body[data-visual-mode="alternative"] .action-count,
   body[data-visual-mode="alternative"] .island-option,
   body[data-visual-mode="alternative"] .island-option strong,
   body[data-visual-mode="alternative"] .island-option small,
   body[data-visual-mode="alternative"] .score-card,
   body[data-visual-mode="alternative"] .score-card strong,
   body[data-visual-mode="alternative"] .score-card small,
   body[data-visual-mode="alternative"] .deck-display,
   body[data-visual-mode="alternative"] .unit-card,
   body[data-visual-mode="alternative"] .turn-steps,
   body[data-visual-mode="alternative"] .turn-steps span,
   body[data-visual-mode="alternative"] .panel-footer,
   body[data-visual-mode="alternative"] .online-status,
   body[data-visual-mode="alternative"] .online-status * {
       color: var(--kay-ink) !important;
       text-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .action-banner[disabled],
   body[data-visual-mode="alternative"] .action-banner.disabled {
       opacity: .58 !important;
   }

   body[data-visual-mode="alternative"] .action-banner .action-emblem {
       filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .7)) !important;
   }

   body[data-visual-mode="alternative"] .turn-steps .active {
       color: #fff !important;
       background: #56aa46 !important;
       border-color: #fff !important;
   }

   body[data-visual-mode="alternative"] .turn-steps .done {
       color: #fff !important;
       background: #3e92bd !important;
   }


   /* =====================================================================
   ILYOS V12 — UI/UX ONLINE COHERENTE
   HUD léger, lisible et pensé pour un déploiement statique (Netlify).
   ===================================================================== */
   :root {
       --v12-panel: rgba(15, 28, 43, .88);
       --v12-panel-soft: rgba(19, 38, 55, .74);
       --v12-stroke: rgba(191, 234, 244, .38);
       --v12-text: #f5fbff;
       --v12-muted: #b9d3dc;
       --v12-cyan: #67d8ee;
       --v12-green: #74d56c;
       --v12-gold: #ffd36b;
       --v12-danger: #ff8078;
       --v12-shadow: 0 18px 50px rgba(5, 15, 24, .28);
   }

   body[data-visual-mode="alternative"] {
       background: linear-gradient(180deg, #77c6e7 0%, #b7e6f2 52%, #e9f6f0 100%) !important;
       font-family: Inter, Segoe UI, Arial, sans-serif !important;
   }

   body[data-visual-mode="alternative"]::before,
   body[data-visual-mode="alternative"]::after {
       display: none !important
   }

   /* Accueil : une seule carte claire, sans concurrence avec l'illustration. */
   body[data-visual-mode="alternative"] #setupScreen {
       min-height: 100dvh;
       display: grid;
       place-items: center;
       padding: clamp(18px, 3vw, 44px);
       background:
           linear-gradient(180deg, rgba(10, 30, 46, .18), rgba(10, 30, 46, .42)),
           radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .30), transparent 38%);
   }

   body[data-visual-mode="alternative"] .setup-card {
       width: min(900px, 94vw) !important;
       max-height: min(820px, 92dvh);
       overflow: auto;
       padding: clamp(24px, 4vw, 46px) !important;
       border: 1px solid rgba(255, 255, 255, .72) !important;
       outline: 0 !important;
       border-radius: 30px !important;
       background: linear-gradient(155deg, rgba(250, 254, 255, .96), rgba(225, 244, 247, .93)) !important;
       box-shadow: 0 30px 90px rgba(9, 37, 54, .30) !important;
       backdrop-filter: blur(20px);
   }

   body[data-visual-mode="alternative"] .logo {
       margin: 0 !important;
       color: #285e67 !important;
       font-size: clamp(52px, 8vw, 88px) !important;
       letter-spacing: .12em !important;
       text-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .subtitle {
       color: #52747c !important;
       letter-spacing: .22em !important;
       font-size: 11px !important;
   }

   body[data-visual-mode="alternative"] .intro {
       max-width: 620px;
       margin-inline: auto;
       color: #31525b !important;
       font-size: 14px !important;
       line-height: 1.55 !important;
   }

   body[data-visual-mode="alternative"] .setup-mode-row,
   body[data-visual-mode="alternative"] .setup-options,
   body[data-visual-mode="alternative"] .setup-players {
       border: 1px solid rgba(62, 115, 128, .18) !important;
       border-radius: 18px !important;
       background: rgba(255, 255, 255, .58) !important;
       box-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .alternative-start-btn {
       min-width: min(430px, 100%) !important;
       padding: 16px 26px !important;
       border: 1px solid rgba(255, 255, 255, .86) !important;
       outline: 0 !important;
       border-radius: 18px !important;
       background: linear-gradient(135deg, #3e9d82, #58b96f) !important;
       box-shadow: 0 12px 26px rgba(40, 115, 91, .28) !important;
       transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
   }

   body[data-visual-mode="alternative"] .alternative-start-btn:hover {
       transform: translateY(-2px) !important;
       filter: saturate(1.08) brightness(1.04) !important;
       box-shadow: 0 16px 32px rgba(40, 115, 91, .32) !important;
   }

   body[data-visual-mode="alternative"] .alternative-start-btn:active {
       transform: translateY(0) !important
   }

   /* Jeu : la 3D occupe toute la scène, le HUD flotte au-dessus. */
   body[data-visual-mode="alternative"] #gameScreen {
       height: 100dvh !important;
       padding: 0 !important;
       grid-template-rows: auto minmax(0, 1fr) !important;
       overflow: hidden;
       background: transparent !important;
   }

   body[data-visual-mode="alternative"] .game-main {
       position: relative !important;
       display: block !important;
       min-height: 0;
       overflow: hidden !important;
   }

   body[data-visual-mode="alternative"] .topbar {
       position: relative !important;
       z-index: 40 !important;
       min-height: 64px;
       margin: 10px 12px 0;
       padding: 8px 14px !important;
       border: 1px solid var(--v12-stroke) !important;
       outline: 0 !important;
       border-radius: 20px !important;
       color: var(--v12-text) !important;
       background: linear-gradient(180deg, rgba(14, 31, 46, .90), rgba(11, 25, 38, .82)) !important;
       box-shadow: var(--v12-shadow) !important;
       backdrop-filter: blur(16px) saturate(1.15);
   }

   body[data-visual-mode="alternative"] .topbar * {
       text-shadow: none !important
   }

   body[data-visual-mode="alternative"] .topbar .player-text h2,
   body[data-visual-mode="alternative"] .topbar #turnLabel,
   body[data-visual-mode="alternative"] .topbar #phaseLabel,
   body[data-visual-mode="alternative"] .topbar #instruction {
       color: var(--v12-text) !important;
   }

   body[data-visual-mode="alternative"] .topbar #instruction {
       color: var(--v12-muted) !important
   }

   body[data-visual-mode="alternative"] .portrait {
       width: 44px !important;
       height: 44px !important;
       background: rgba(255, 255, 255, .10) !important;
       border: 1px solid rgba(255, 255, 255, .65) !important;
       outline: 2px solid var(--player-color) !important;
       box-shadow: 0 0 18px color-mix(in srgb, var(--player-color), transparent 58%) !important;
   }

   body[data-visual-mode="alternative"] .score-card {
       min-width: 72px !important;
       padding: 6px 8px !important;
       color: var(--v12-text) !important;
       border: 1px solid rgba(255, 255, 255, .16) !important;
       outline: 0 !important;
       border-radius: 12px !important;
       background: rgba(255, 255, 255, .07) !important;
       box-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .score-card.active {
       background: color-mix(in srgb, var(--pcolor), transparent 80%) !important;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcolor), white 10%) !important;
   }

   /* Panneaux latéraux compacts, repliables, et non bloquants pour le plateau. */
   body[data-visual-mode="alternative"] .banner-panel {
       position: absolute !important;
       top: 14px !important;
       bottom: 14px !important;
       width: clamp(190px, 19vw, 252px) !important;
       z-index: 30 !important;
       padding: 14px 12px 12px !important;
       border: 1px solid var(--v12-stroke) !important;
       outline: 0 !important;
       border-radius: 20px !important;
       color: var(--v12-text) !important;
       background: linear-gradient(180deg, var(--v12-panel), rgba(11, 25, 38, .82)) !important;
       box-shadow: var(--v12-shadow) !important;
       backdrop-filter: blur(16px) saturate(1.15);
       overflow: hidden !important;
       transition: transform .24s ease, opacity .24s ease;
   }

   body[data-visual-mode="alternative"] .left-panel {
       left: 14px !important
   }

   body[data-visual-mode="alternative"] .right-panel {
       right: 14px !important
   }

   body[data-visual-mode="alternative"] .banner-panel.panel-collapsed {
       opacity: .10;
       pointer-events: none
   }

   body[data-visual-mode="alternative"] .left-panel.panel-collapsed {
       transform: translateX(calc(-100% - 18px))
   }

   body[data-visual-mode="alternative"] .right-panel.panel-collapsed {
       transform: translateX(calc(100% + 18px))
   }

   body[data-visual-mode="alternative"] .panel-title {
       margin: 0 0 12px !important;
       padding: 0 !important;
       border: 0 !important;
       outline: 0 !important;
       border-radius: 0 !important;
       color: var(--v12-text) !important;
       background: transparent !important;
       box-shadow: none !important;
       transform: none !important;
       font: 800 13px/1.2 Inter, Segoe UI, sans-serif !important;
       letter-spacing: .14em !important;
       text-align: left !important;
   }

   body[data-visual-mode="alternative"] .island-selector,
   body[data-visual-mode="alternative"] .action-list {
       gap: 8px !important
   }

   body[data-visual-mode="alternative"] .island-option,
   body[data-visual-mode="alternative"] .action-banner,
   body[data-visual-mode="alternative"] .deck-display {
       color: var(--v12-text) !important;
       border: 1px solid rgba(255, 255, 255, .14) !important;
       outline: 0 !important;
       border-radius: 14px !important;
       background: rgba(255, 255, 255, .075) !important;
       box-shadow: none !important;
       transition: background .16s ease, border-color .16s ease, transform .16s ease;
   }

   body[data-visual-mode="alternative"] .island-option:hover,
   body[data-visual-mode="alternative"] .action-banner:hover {
       transform: translateY(-1px) !important;
       background: rgba(255, 255, 255, .12) !important;
       border-color: rgba(103, 216, 238, .50) !important;
       filter: none !important;
   }

   body[data-visual-mode="alternative"] .island-option.selected,
   body[data-visual-mode="alternative"] .action-banner.active {
       background: rgba(103, 216, 238, .16) !important;
       border-color: var(--v12-cyan) !important;
       box-shadow: inset 0 0 0 1px rgba(103, 216, 238, .26) !important;
   }

   body[data-visual-mode="alternative"] .action-copy,
   body[data-visual-mode="alternative"] .action-copy strong,
   body[data-visual-mode="alternative"] .action-copy span,
   body[data-visual-mode="alternative"] .island-option strong,
   body[data-visual-mode="alternative"] .island-option small,
   body[data-visual-mode="alternative"] .deck-display {
       color: var(--v12-text) !important
   }

   body[data-visual-mode="alternative"] .action-reserve,
   body[data-visual-mode="alternative"] .island-option small {
       color: var(--v12-muted) !important
   }

   body[data-visual-mode="alternative"] .primary-btn,
   body[data-visual-mode="alternative"] .small-btn,
   body[data-visual-mode="alternative"] .online-tool-btn {
       min-height: 36px;
       color: var(--v12-text) !important;
       border: 1px solid rgba(255, 255, 255, .18) !important;
       outline: 0 !important;
       border-radius: 11px !important;
       background: rgba(255, 255, 255, .09) !important;
       box-shadow: none !important;
       text-shadow: none !important;
       transition: background .16s ease, transform .16s ease, border-color .16s ease;
   }

   body[data-visual-mode="alternative"] .primary-btn:hover,
   body[data-visual-mode="alternative"] .small-btn:hover,
   body[data-visual-mode="alternative"] .online-tool-btn:hover {
       background: rgba(255, 255, 255, .16) !important;
       border-color: rgba(103, 216, 238, .48) !important;
   }

   body[data-visual-mode="alternative"] .primary-btn:active,
   body[data-visual-mode="alternative"] .small-btn:active,
   body[data-visual-mode="alternative"] .online-tool-btn:active {
       transform: translateY(1px) !important;
       box-shadow: none !important;
   }

   body[data-visual-mode="alternative"] .end-turn {
       background: linear-gradient(135deg, #3d9b84, #57b26d) !important;
       border-color: rgba(153, 246, 194, .42) !important;
       font-weight: 900 !important;
   }

   /* Le style ".primary-btn" V12 (vitre translucide, texte blanc quasi
      invisible) convient au HUD compact mais rend ces deux CTA de modale
      illisibles : "Lancer ce setup" (survole une carte déjà sombre) et
      "Rejouer" (premier bouton vu à la victoire). Même logique que
      .end-turn ci-dessus : on les re-démarque avec un fond doré plein et un
      texte foncé, cohérent avec le reste de l'identité visuelle "or". */
   body[data-visual-mode="alternative"] #confirmSymmetricSetupBtn,
   body[data-visual-mode="alternative"] #replayBtn {
       color: #241705 !important;
       background: linear-gradient(180deg, #f4d28e, #d8aa4c) !important;
       border: 1px solid rgba(255, 240, 200, .7) !important;
       font-weight: 800 !important;
       box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
   }

   body[data-visual-mode="alternative"] #confirmSymmetricSetupBtn:hover,
   body[data-visual-mode="alternative"] #replayBtn:hover {
       background: linear-gradient(180deg, #f9dfa6, #e6b95c) !important;
       border-color: #fff3d6 !important;
   }

   body[data-visual-mode="alternative"] #confirmSymmetricSetupBtn:disabled {
       color: rgba(36, 23, 5, .55) !important;
       background: linear-gradient(180deg, rgba(244, 210, 142, .55), rgba(216, 170, 76, .55)) !important;
   }

   body[data-visual-mode="alternative"] .cancel-action {
       color: #ffd1cc !important
   }

   /* Scène 3D : aucune bordure décorative épaisse. */
   body[data-visual-mode="alternative"] .board-wrap {
       position: absolute !important;
       inset: 0 !important;
       overflow: hidden !important;
       background: transparent !important;
   }

   body[data-visual-mode="alternative"] .board-wrap::before,
   body[data-visual-mode="alternative"] .board-wrap::after {
       display: none !important
   }

   .kaykit-canvas {
       border: 0 !important;
       outline: 0 !important;
       border-radius: 0 !important;
       box-shadow: none !important;
       background: linear-gradient(180deg, #78c9e8, #b9e8f3 58%, #e8f6ef) !important;
   }

   .kaykit-badge {
       display: none !important
   }

   .kaykit-controls {
       right: 18px !important;
       top: auto !important;
       bottom: 18px !important;
       gap: 6px !important;
       padding: 6px;
       border: 1px solid rgba(255, 255, 255, .20);
       border-radius: 14px;
       background: rgba(12, 28, 41, .68);
       backdrop-filter: blur(12px);
   }

   .kaykit-control-btn {
       min-height: 34px !important;
       padding: 7px 10px !important;
       border: 1px solid rgba(255, 255, 255, .16) !important;
       outline: 0 !important;
       border-radius: 9px !important;
       background: rgba(255, 255, 255, .10) !important;
       box-shadow: none !important;
       font-size: 9px !important;
   }

   .kaykit-control-btn:hover {
       background: rgba(255, 255, 255, .18) !important
   }

   .kaykit-status {
       bottom: 18px !important;
       max-width: min(520px, 54vw);
       overflow: hidden;
       text-overflow: ellipsis;
       padding: 7px 11px !important;
       border: 1px solid rgba(255, 255, 255, .18) !important;
       outline: 0 !important;
       color: var(--v12-muted) !important;
       background: rgba(12, 28, 41, .66) !important;
       box-shadow: none !important;
       backdrop-filter: blur(12px);
   }

   .kaykit-status.loaded {
       opacity: .28 !important
   }

   .kaykit-camera-hint {
       bottom: 58px;
       color: var(--v12-muted);
       background: rgba(12, 28, 41, .58);
       border-color: rgba(255, 255, 255, .14);
   }

   /* Poignées pour ouvrir/replier le HUD. */
   .v12-panel-toggle {
       position: absolute;
       top: 50%;
       z-index: 44;
       width: 38px;
       height: 62px;
       display: grid;
       place-items: center;
       transform: translateY(-50%);
       border: 1px solid rgba(255, 255, 255, .22);
       border-radius: 13px;
       color: #fff;
       background: rgba(12, 28, 41, .72);
       box-shadow: 0 10px 28px rgba(5, 15, 24, .20);
       backdrop-filter: blur(12px);
       cursor: pointer;
       font-size: 17px;
       transition: background .16s ease, transform .16s ease;
   }

   .v12-panel-toggle:hover {
       background: rgba(18, 47, 63, .90)
   }

   .v12-panel-toggle.left {
       left: 8px
   }

   .v12-panel-toggle.right {
       right: 8px
   }

   .v12-panel-toggle:active {
       transform: translateY(-50%) scale(.96)
   }

   /* Menu son cohérent avec le HUD. */
   body[data-visual-mode="alternative"] .sound-menu {
       color: var(--v12-text) !important;
       border: 1px solid var(--v12-stroke) !important;
       outline: 0 !important;
       border-radius: 20px !important;
       background: linear-gradient(180deg, rgba(14, 31, 46, .96), rgba(11, 25, 38, .94)) !important;
       box-shadow: var(--v12-shadow) !important;
       backdrop-filter: blur(18px);
   }

   body[data-visual-mode="alternative"] .sound-menu * {
       color: inherit
   }

   @media(max-width:980px) {
       body[data-visual-mode="alternative"] .topbar {
           margin: 6px 7px 0;
           min-height: 56px;
           grid-template-columns: minmax(150px, 220px) minmax(160px, 1fr) auto !important;
           gap: 7px !important;
       }

       body[data-visual-mode="alternative"] .banner-panel {
           width: min(248px, 78vw) !important;
           top: 8px !important;
           bottom: 8px !important;
       }

       body[data-visual-mode="alternative"] .left-panel {
           left: 8px !important
       }

       body[data-visual-mode="alternative"] .right-panel {
           right: 8px !important
       }

       .kaykit-controls {
           right: 10px !important;
           bottom: 10px !important;
           max-width: calc(100vw - 20px);
           flex-wrap: wrap;
           justify-content: flex-end
       }

       .kaykit-status {
           left: 10px !important;
           transform: none !important;
           bottom: 10px !important;
           max-width: 42vw
       }
   }

   @media(max-width:700px) {
       body[data-visual-mode="alternative"] .score-list {
           display: none !important
       }

       body[data-visual-mode="alternative"] .topbar {
           grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) !important
       }

       .kaykit-camera-hint {
           display: none
       }

       .kaykit-control-btn[data-kay-zoom-in],
       .kaykit-control-btn[data-kay-zoom-out] {
           display: none
       }
   }

   /* ===== V13 — scène bord à bord, HUD plein écran et sélections nettes ===== */
   body[data-visual-mode="alternative"] .game-main {
       isolation: isolate
   }

   body[data-visual-mode="alternative"] .board-wrap {
       inset: 0 !important
   }

   body[data-visual-mode="alternative"] .kaykit-canvas {
       inset: 0 !important;
       width: 100% !important;
       height: 100% !important
   }

   body[data-visual-mode="alternative"] .banner-panel {
       top: 0 !important;
       bottom: 0 !important;
       border-radius: 0 18px 18px 0 !important
   }

   body[data-visual-mode="alternative"] .right-panel {
       border-radius: 18px 0 0 18px !important
   }

   body[data-visual-mode="alternative"] .left-panel {
       left: 0 !important
   }

   body[data-visual-mode="alternative"] .right-panel {
       right: 0 !important
   }

   body[data-visual-mode="alternative"] .v12-panel-toggle.left {
       left: 4px
   }

   body[data-visual-mode="alternative"] .v12-panel-toggle.right {
       right: 4px
   }

   #gameScreen:fullscreen,
   #gameScreen:-webkit-full-screen {
       width: 100vw !important;
       height: 100vh !important;
       height: 100dvh !important;
       background: #87d2eb !important
   }

   #gameScreen:fullscreen .topbar,
   #gameScreen:-webkit-full-screen .topbar {
       display: grid !important;
       margin: 0 !important;
       border-radius: 0 !important
   }

   #gameScreen:fullscreen .game-main,
   #gameScreen:-webkit-full-screen .game-main {
       min-height: 0 !important
   }

   #gameScreen:fullscreen .board-wrap,
   #gameScreen:-webkit-full-screen .board-wrap {
       position: absolute !important;
       inset: 0 !important
   }

   #gameScreen:fullscreen .banner-panel,
   #gameScreen:-webkit-full-screen .banner-panel {
       display: flex !important;
       z-index: 80 !important
   }

   #gameScreen:fullscreen .v12-panel-toggle,
   #gameScreen:-webkit-full-screen .v12-panel-toggle {
       display: grid !important;
       z-index: 90 !important
   }

   #gameScreen:fullscreen .kaykit-controls,
   #gameScreen:-webkit-full-screen .kaykit-controls {
       z-index: 95 !important
   }

   #gameScreen:fullscreen .kaykit-status,
   #gameScreen:-webkit-full-screen .kaykit-status {
       z-index: 94 !important
   }

   .sound-test-btn {
       display: none
   }

   /* V17 — sanctuaire retiré du rendu : la case logique demeure pour préserver les règles. */
   body[data-visual-mode="alternative"] .sanctuary-ring,
   body[data-visual-mode="alternative"] .sanctuary-arm-mark {
       display: none !important
   }

   /* V23 — intentions de ciblage explicites */
   .kaykit-cursor-label[data-kind="crown-place"] {
       border-color: #ffd45c !important;
       color: #fff4b3 !important;
       background: rgba(66, 43, 5, .96) !important
   }

   .kaykit-cursor-label[data-kind="invocation"] {
       border-color: #62ead8 !important;
       color: #e9fffb !important;
       background: rgba(5, 58, 55, .96) !important
   }



   /* ================= ILYOS V25 — lisibilité et rendu 3D ================= */
   body[data-visual-mode="alternative"] .kaykit-cursor-label[data-kind="place"],
   body[data-visual-mode="alternative"] .kaykit-cursor-label[data-kind="select"] {
       background: linear-gradient(180deg, rgba(54, 43, 12, .96), rgba(23, 18, 7, .96)) !important;
       border-color: #ffe783 !important;
       color: #fff5c0 !important;
       box-shadow: 0 0 0 2px rgba(255, 218, 78, .22), 0 10px 28px rgba(0, 0, 0, .42) !important;
   }

   body[data-visual-mode="alternative"] .kaykit-canvas {
       background: linear-gradient(180deg, #65c9ef 0%, #bfeef8 54%, #effdf4 100%) !important;
   }

   body[data-visual-mode="alternative"] .island-choice.active {
       box-shadow: 0 0 0 3px #ffe166, 0 0 22px rgba(255, 213, 69, .72), inset 0 0 0 2px rgba(255, 255, 255, .5) !important;
   }

   /* V26 — sélection forte et aperçu de rotation */
   body[data-visual-mode="alternative"] .cell.selected,
   body[data-visual-mode="alternative"] .cell.selected-character,
   body[data-visual-mode="alternative"] .cell.preview-valid,
   body[data-visual-mode="alternative"] .cell.preview-invalid,
   body[data-visual-mode="alternative"] .cell.magic-valid,
   body[data-visual-mode="alternative"] .cell.magic-selected-island {
       outline: 5px solid rgba(255, 255, 255, .98) !important;
       outline-offset: -6px !important;
   }

   body[data-visual-mode="alternative"] .cell.selected,
   body[data-visual-mode="alternative"] .cell.selected-character {
       box-shadow: inset 0 0 0 9px #f2b91f, 0 0 22px rgba(255, 202, 55, .95) !important;
   }
/* Carte jouée qui s'envole vers le plateau (carteJoueeEnvol, ui.js). */
.carte-envol {
  position: fixed;
  width: 34px;
  height: 48px;
  border-radius: 5px;
  background: linear-gradient(160deg, #222a3d, #12172a);
  border: 1px solid rgba(221, 182, 83, .85);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 6px rgba(221, 182, 83, .25);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 60;
  will-change: transform, opacity;
}
.carte-envol svg { width: 22px; height: 22px; }

/* Joueur au trait (renderTourActif, ui.js) : son portrait brille à sa
   couleur, sans animation ; l'autre camp s'efface. Le portrait rogne son
   contenu (overflow:hidden) : la lueur passe donc par box-shadow, jamais
   par un pseudo-élément. */
html body[data-visual-mode] #gameScreen #ilyosHudOrganicV2 .ov2-side.ov2-side-active .ov2-avatar {
  border-color: var(--tour-plein, #ffd27a) !important;
  box-shadow:
    0 0 0 2px rgba(10, 8, 22, .8),
    0 0 0 6px var(--tour-plein, #ffd27a),
    0 0 20px 12px var(--tour-halo, rgba(255, 210, 122, .85)),
    0 0 60px 30px var(--tour-lueur, rgba(255, 210, 122, .45)),
    inset 0 0 18px var(--tour-halo, rgba(255, 210, 122, .85)) !important;
}
body[data-tour-actif="0"] #ilyosHudOrganicV2 .ov2-right,
body[data-tour-actif="1"] #ilyosHudOrganicV2 .ov2-left { opacity: .55; filter: saturate(.5); transition: opacity .4s ease; }