:root {
  --hs-fond:#141c1c; --hs-fond-sombre:#0d1414; --hs-surface:#111b1b;
  --hs-accent:#49adb6; --hs-texte:#fcfbe4; --hs-texte-muted:#8a9a8a;
  --cyan:#63e6ff; --cyan-core:#d9fbff; --cyan-soft:rgba(99,230,255,.18);
  --orange:#ff942d; --orange-core:#ffe2b0; --orange-soft:rgba(255,148,45,.18);
  --board-dark:#0b1212; --board-light:#162220;
  --font-text:Roboto,Arial,sans-serif; --font-title:Oswald,"Arial Narrow",sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box} html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#070d0d;color:var(--hs-texte)}
body{font-family:var(--font-text);user-select:none;-webkit-user-select:none;touch-action:none}
button{font:inherit}.hidden{display:none!important}
.chess2256-app{position:fixed;inset:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(circle at 50% 50%,rgba(73,173,182,.07),transparent 44%),linear-gradient(rgba(5,11,10,.91),rgba(5,11,10,.96)),repeating-linear-gradient(135deg,#16211f 0 4px,#0f1918 4px 10px)}
.chess2256-app::before,.chess2256-app::after{content:"";position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:contain;filter:grayscale(1) invert(1) brightness(1.2) contrast(.9);mix-blend-mode:screen;opacity:.11}
.chess2256-app::before{right:-2vw;bottom:-4vw;width:min(42vw,590px);height:min(42vw,565px);background-image:url("../img/ui/interface-circuit-top-left.png");background-position:right bottom}
.chess2256-app::after{left:-3vw;top:3vw;width:min(40vw,560px);height:min(40vw,535px);background-image:url("../img/ui/interface-circuit-bottom-right.png");transform:scaleX(-1)}
.scanlines{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:.13;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.topbar,.arena,.console{position:relative;z-index:2}.topbar{min-height:70px;padding:10px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;border-bottom:1px solid rgba(73,173,182,.24);background:linear-gradient(180deg,rgba(9,17,16,.97),rgba(7,13,13,.86))}
.brand{min-width:0;display:flex;align-items:center;gap:12px}.brand img{width:46px;height:46px;object-fit:contain;opacity:.86}.brand h1{margin:1px 0 0;font-family:var(--font-title);font-size:clamp(20px,2.6vw,32px);font-weight:600;letter-spacing:.12em;line-height:1}.eyebrow{color:var(--hs-accent);font-family:var(--font-mono);font-size:9px;letter-spacing:.16em}
.status-chips{display:flex;gap:7px}.chip{min-height:29px;padding:5px 9px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.1);color:var(--hs-texte-muted);font-family:var(--font-mono);font-size:9px;letter-spacing:.11em}.chip--cyan{border-color:rgba(99,230,255,.42);color:var(--cyan)}.chip--orange{border-color:rgba(255,148,45,.42);color:var(--orange)}
.ui-button{min-height:40px;padding:9px 13px;border:1px solid rgba(73,173,182,.45);border-right:2px solid var(--hs-accent);background:rgba(73,173,182,.06);color:var(--hs-accent);font-family:var(--font-title);font-size:11px;letter-spacing:.1em;cursor:pointer}.ui-button:disabled{opacity:.3;cursor:default}.ui-button--orange{border-color:rgba(255,148,45,.45);border-right-color:var(--orange);color:var(--orange);background:rgba(255,148,45,.05)}.ui-button--compact{min-height:34px;padding:7px 10px;font-size:9px}
.arena{min-height:0;padding:10px 16px 7px;display:grid;grid-template-columns:80px minmax(0,1fr) 80px;align-items:center;justify-items:center;gap:7px}.board-frame{position:relative;width:min(100%,calc(100vh - 158px));max-width:820px;aspect-ratio:1;padding:clamp(6px,1vw,11px);border:1px solid rgba(73,173,182,.34);background:linear-gradient(135deg,rgba(73,173,182,.08),transparent 20%,transparent 80%,rgba(177,101,23,.07)),rgba(7,13,13,.92);box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.02)}
.board-frame::before,.board-frame::after{content:"";position:absolute;width:31px;height:31px;pointer-events:none}.board-frame::before{left:-1px;top:-1px;border-left:2px solid var(--orange);border-top:2px solid var(--orange)}.board-frame::after{right:-1px;bottom:-1px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan)}.board-glow{position:absolute;inset:8%;pointer-events:none;filter:blur(34px);opacity:.22;background:linear-gradient(180deg,var(--orange-soft),transparent 45% 55%,var(--cyan-soft))}
.board{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:1px solid rgba(145,205,205,.28);background:#0c1413;transform:perspective(1100px) rotateX(2.8deg);transform-origin:center;box-shadow:inset 0 0 26px rgba(73,173,182,.08),0 0 26px rgba(73,173,182,.07)}
.square{position:relative;min-width:0;min-height:0;padding:0;border:0;display:flex;align-items:center;justify-content:center;background:var(--board-dark);color:inherit;cursor:pointer;touch-action:manipulation}.square[data-tone="light"]{background:var(--board-light)}.square::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(117,174,174,.065)}.square:focus-visible{outline:2px solid var(--hs-texte);outline-offset:-3px;z-index:5}.square--last{box-shadow:inset 0 0 0 2px rgba(177,101,23,.44),inset 0 0 22px rgba(177,101,23,.08)}.square--selected{box-shadow:inset 0 0 0 2px rgba(252,251,228,.8),inset 0 0 26px rgba(252,251,228,.15)}
.square--legal::before,.square--capture::before{content:"";position:absolute;z-index:1;width:22%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(252,251,228,.42);background:rgba(252,251,228,.12);box-shadow:0 0 13px rgba(252,251,228,.12)}.square--capture::before{width:74%;background:transparent;border-color:rgba(255,143,77,.52);box-shadow:inset 0 0 14px rgba(255,143,77,.08),0 0 14px rgba(255,143,77,.08)}
.piece{position:relative;z-index:2;width:82%;height:90%;display:flex;align-items:center;justify-content:center;font-family:"Times New Roman",Georgia,serif;font-size:clamp(28px,min(7vw,8vh),76px);line-height:1;transform-origin:50% 80%;transition:transform .14s ease,filter .14s ease}.piece::after{content:"";position:absolute;left:18%;right:18%;bottom:6%;height:5%;border-radius:50%;opacity:.7;filter:blur(1px)}.piece--cyan{color:rgba(211,249,255,.88);-webkit-text-stroke:1px rgba(99,230,255,.8);text-shadow:0 0 3px var(--cyan-core),0 0 8px var(--cyan),0 0 20px rgba(99,230,255,.72),0 9px 18px rgba(99,230,255,.18);filter:drop-shadow(0 0 5px rgba(99,230,255,.55));transform:perspective(320px) rotateX(-10deg) scaleY(1.02)}.piece--cyan::after{background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 20px rgba(99,230,255,.6)}.piece--orange{color:rgba(255,227,181,.9);-webkit-text-stroke:1px rgba(255,148,45,.78);text-shadow:0 0 3px var(--orange-core),0 0 8px var(--orange),0 0 20px rgba(255,148,45,.72),0 -9px 18px rgba(255,148,45,.18);filter:drop-shadow(0 0 5px rgba(255,148,45,.55));transform:perspective(320px) rotateX(10deg) rotateZ(180deg) scaleY(1.02)}.piece--orange::after{background:var(--orange);box-shadow:0 0 10px var(--orange),0 0 20px rgba(255,148,45,.6)}.square--selected .piece{filter:brightness(1.28) drop-shadow(0 0 9px currentColor);transform:translateY(-5%) scale(1.05)}
.coord{position:absolute;z-index:4;pointer-events:none;color:rgba(213,231,225,.42);font-family:var(--font-mono);font-size:clamp(6px,.85vw,10px);line-height:1}.coord--file{right:4px;bottom:3px}.coord--rank{left:4px;top:3px}.side{width:70px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;writing-mode:vertical-rl;font-family:var(--font-mono);letter-spacing:.12em}.side strong{font-size:11px}.side small{font-size:7px;color:var(--hs-texte-muted)}.side--orange{color:var(--orange);transform:rotate(180deg)}.side--cyan{color:var(--cyan)}.side span{width:1px;height:62px;background:currentColor;box-shadow:0 0 10px currentColor}
.console{min-height:68px;padding:8px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(73,173,182,.2);background:linear-gradient(0deg,rgba(7,13,13,.98),rgba(9,17,16,.86))}.console-state{min-width:0;display:grid;gap:2px}.console-label{color:var(--hs-texte-muted);font-family:var(--font-mono);font-size:8px;letter-spacing:.15em}.console-state strong{font-family:var(--font-title);font-size:15px;letter-spacing:.08em}.console-detail{color:var(--hs-accent);font-family:var(--font-mono);font-size:8px;letter-spacing:.07em}.console-actions{display:flex;gap:8px}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(2,7,7,.82)}.modal-panel{width:min(430px,calc(100vw - 32px));padding:22px;border:1px solid rgba(73,173,182,.45);background:#0b1312;box-shadow:0 24px 70px rgba(0,0,0,.6)}.modal-panel h2{font-family:var(--font-title);letter-spacing:.06em}.promotion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.promotion-grid button{min-height:50px;border:1px solid rgba(73,173,182,.35);background:rgba(73,173,182,.07);color:var(--hs-texte);font-family:var(--font-title);cursor:pointer}.toast{position:fixed;z-index:120;left:50%;bottom:86px;transform:translateX(-50%);max-width:min(560px,calc(100vw - 28px));padding:9px 13px;border:1px solid rgba(255,148,45,.5);background:#160f09;color:#ffd2a2;font-family:var(--font-mono);font-size:10px;box-shadow:0 12px 38px rgba(0,0,0,.5)}
@media(max-width:760px){.topbar{grid-template-columns:1fr auto}.brand img{width:38px;height:38px}.status-chips{display:none}.arena{grid-template-columns:24px minmax(0,1fr) 24px;padding-inline:6px}.side{width:20px}.side small{display:none}.side strong{font-size:7px}.side span{height:35px}.board-frame{width:min(100%,calc(100vh - 142px));padding:5px}.console-detail{display:none}.ui-button--compact{font-size:0}.ui-button--compact::after{content:"⛶";font-size:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Chess2256 V4 — hologrammes, rotation physique du plateau et drag tactile/souris */
.topbar-actions{display:flex;gap:8px;align-items:center}
.board{touch-action:none}
.board-frame{transform:rotate(0deg);transform-origin:50% 50%;transition:transform .32s cubic-bezier(.2,.75,.25,1)}
.orientation-horizontal .board-frame{transform:rotate(90deg)}

.piece{font-size:clamp(28px,min(7vw,8vh),76px);transform-style:preserve-3d;isolation:isolate;will-change:transform;pointer-events:none}
.piece-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:inherit;line-height:1;transform-origin:50% 72%;pointer-events:none}
.piece-layer--depth{opacity:.20;filter:blur(.15px);transform:translate(calc(var(--depth) * .55px),calc(var(--depth) * 1.25px))}
.piece-layer--face{opacity:.94;z-index:8;-webkit-text-stroke:1px currentColor;background:linear-gradient(90deg,rgba(255,255,255,.32),currentColor 35%,rgba(255,255,255,.95) 52%,currentColor 68%,rgba(255,255,255,.28));-webkit-background-clip:text;background-clip:text;color:transparent}
.piece-scan{position:absolute;z-index:10;left:12%;right:12%;top:8%;height:6%;opacity:.38;background:currentColor;filter:blur(.5px);box-shadow:0 0 8px currentColor;animation:holo-scan 2.8s linear infinite;mix-blend-mode:screen}
.piece-base{position:absolute;z-index:0;left:14%;right:14%;bottom:5%;height:9%;border-radius:50%;background:currentColor;opacity:.48;filter:blur(4px);box-shadow:0 0 10px currentColor,0 0 24px currentColor}
.piece--cyan{color:var(--cyan);text-shadow:none;filter:drop-shadow(0 0 3px var(--cyan-core)) drop-shadow(0 0 8px rgba(99,230,255,.78)) drop-shadow(0 0 20px rgba(99,230,255,.46));transform:perspective(380px) rotateX(-18deg) scaleY(1.06)}
.piece--orange{color:var(--orange);text-shadow:none;filter:drop-shadow(0 0 3px var(--orange-core)) drop-shadow(0 0 8px rgba(255,148,45,.78)) drop-shadow(0 0 20px rgba(255,148,45,.46));transform:perspective(380px) rotateX(18deg) rotateZ(180deg) scaleY(1.06)}
.piece--cyan .piece-layer--depth{color:#1593aa}
.piece--orange .piece-layer--depth{color:#a94f0f}
.square--selected .piece{filter:brightness(1.35) drop-shadow(0 0 11px currentColor)}

/* En mode gauche/droite, l'ensemble frame + grille + coordonnées + pièces tourne réellement d'un quart de tour. */
.orientation-horizontal .board-glow{background:linear-gradient(180deg,var(--orange-soft),transparent 45% 55%,var(--cyan-soft))}

.board--dragging .square{cursor:grabbing}
.board--dragging .square--selected .piece{opacity:.22}
.drag-ghost{position:fixed!important;z-index:9999!important;width:clamp(48px,7vw,88px)!important;height:clamp(54px,8vw,96px)!important;transform:translate(-50%,-58%) scale(1.12)!important;pointer-events:none!important;opacity:.96!important;filter:brightness(1.25) drop-shadow(0 0 12px currentColor)!important}
.drag-ghost.piece--orange{transform:translate(-50%,-58%) rotate(180deg) scale(1.12)!important}
.drag-ghost[data-orientation="horizontal"].piece--cyan{transform:translate(-50%,-58%) rotate(90deg) scale(1.12)!important}
.drag-ghost[data-orientation="horizontal"].piece--orange{transform:translate(-50%,-58%) rotate(-90deg) scale(1.12)!important}

@keyframes holo-scan{0%{top:10%;opacity:.12}18%{opacity:.5}50%{opacity:.28}82%{opacity:.5}100%{top:84%;opacity:.1}}

@media(max-width:760px){.topbar-actions{gap:5px}.topbar-actions .ui-button{min-width:38px}.topbar-actions #rotate-board{font-size:0}.topbar-actions #rotate-board::after{content:"↻";font-size:17px}}
@media(prefers-reduced-motion:reduce){.piece-scan{animation:none;top:46%;opacity:.22}.board-frame{transition:none}}


/* Chess2256 V5 — vrai rendu 3D Three.js, low-poly holographique */
.board{transform:none!important;overflow:visible}
.pieces3d{position:absolute;left:-12.5%;top:-12.5%;width:125%!important;height:125%!important;z-index:3;pointer-events:none;display:block;overflow:visible;filter:drop-shadow(0 0 8px rgba(255,255,255,.06))}
.square{z-index:auto}
.square .coord{z-index:5}
.square--legal::before,.square--capture::before{z-index:4}
.square--selected{z-index:2}
.square--selected::after{border-color:rgba(252,251,228,.55)}
.board--dragging{cursor:grabbing}
.board--dragging .square--selected{box-shadow:inset 0 0 0 2px rgba(252,251,228,.42),inset 0 0 24px rgba(252,251,228,.08)}
/* Les anciens glyphes 2.5D ne sont plus rendus ; styles conservés uniquement pour compatibilité de patch. */
.piece,.drag-ghost{display:none!important}

/* V8 — laisse respirer les volumes 3D autour du damier */
.board,.board-frame{overflow:visible!important}


/* V12 — bouton scanline */
.ui-button.is-off{opacity:.6;border-color:rgba(255,255,255,.18);border-right-color:rgba(255,255,255,.28);color:var(--hs-texte-muted);background:rgba(255,255,255,.03)}


/* V13 — labels latéraux simplifiés et toggle scan */
.side{gap:8px}.side strong{font-size:12px;letter-spacing:.18em}.side small{display:none!important}.side--orange{transform:rotate(180deg)}.side--cyan{transform:none}.ui-button.is-off{opacity:.55;border-color:rgba(255,255,255,.14)!important;color:rgba(212,228,225,.52)!important;background:rgba(255,255,255,.03)!important;box-shadow:none!important}


/* V14 — symétrie parfaite des labels latéraux */
.side{writing-mode:horizontal-tb!important;flex-direction:column;gap:8px}
.side strong{writing-mode:horizontal-tb!important;white-space:nowrap;display:block;transform-origin:center center}
.side--orange{transform:none!important}
.side--cyan{transform:none!important}
.side--orange strong{transform:rotate(-90deg)}
.side--cyan strong{transform:rotate(90deg)}

/* V15 — Mode Échecs Augmenté / Tempête */
.chip--button{background:rgba(73,173,182,.05);cursor:pointer}.chip--button:hover{border-color:rgba(73,173,182,.45);color:var(--hs-accent)}.chip--button.is-active{border-color:rgba(255,148,45,.5);color:var(--orange);background:rgba(255,148,45,.06)}
.augmented-panel{width:min(760px,calc(100vw - 30px));padding:20px}.augmented-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.augmented-head h2{margin:5px 0 0}.augmented-session-line{margin:14px 0 16px;padding:9px 11px;border:1px solid rgba(73,173,182,.2);font:9px var(--font-mono);letter-spacing:.14em;color:var(--hs-texte-muted)}.augmented-session-line strong{color:var(--hs-texte);margin-left:8px}.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.qr-card{padding:14px;border:1px solid rgba(255,255,255,.12);background:rgba(5,11,10,.66);text-align:center}.qr-card--orange{border-color:rgba(255,148,45,.36)}.qr-card--cyan{border-color:rgba(99,230,255,.36)}.qr-title{margin-bottom:10px;font:700 14px var(--font-mono);letter-spacing:.18em}.qr-card--orange .qr-title,.qr-card--orange .qr-status{color:var(--orange)}.qr-card--cyan .qr-title,.qr-card--cyan .qr-status{color:var(--cyan)}.qr-shell{width:min(230px,100%);aspect-ratio:1;margin:auto;padding:12px;background:#f2f4ec;border:4px solid rgba(255,255,255,.92)}.qr-shell img{display:block;width:100%;height:100%}.qr-status{margin-top:10px;font:10px var(--font-mono);letter-spacing:.12em}.qr-status.is-connected::before{content:"● ";}.augmented-help{margin:14px 0 0;text-align:center;color:var(--hs-texte-muted);font:9px/1.55 var(--font-mono);letter-spacing:.05em}
@media(max-width:700px){.qr-grid{grid-template-columns:1fr}.augmented-panel{max-height:90vh;overflow:auto}.qr-shell{max-width:210px}}


/* V16 — animation publique des cartes Tempête */
.tempest-card-layer{position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden}
.tempest-card-flight{position:absolute;width:clamp(150px,17vw,235px);min-height:210px;padding:16px 15px;border:1px solid currentColor;border-left-width:4px;background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 45%),rgba(8,16,15,.96);box-shadow:0 18px 50px rgba(0,0,0,.52),0 0 28px color-mix(in srgb,currentColor 36%,transparent);display:flex;flex-direction:column;gap:9px;opacity:0;transition:transform .72s cubic-bezier(.18,.82,.2,1),left .72s cubic-bezier(.18,.82,.2,1),right .72s cubic-bezier(.18,.82,.2,1),top .72s cubic-bezier(.18,.82,.2,1),bottom .72s cubic-bezier(.18,.82,.2,1),opacity .24s ease;transform-origin:center}
.tempest-card-flight--orange{color:var(--orange);left:50%;bottom:-28%;transform:translateX(-50%) rotate(0deg)}
.tempest-card-flight--cyan{color:var(--cyan);left:50%;top:-28%;transform:translateX(-50%) rotate(0deg)}
.tempest-card-flight--orange.is-landed{bottom:auto;top:9%;opacity:1;transform:translateX(-50%) rotate(180deg)}
.tempest-card-flight--cyan.is-landed{top:auto;bottom:9%;opacity:1;transform:translateX(-50%) rotate(180deg)}
.orientation-horizontal .tempest-card-flight--orange{left:-28%;bottom:auto;top:50%;transform:translateY(-50%) rotate(-90deg)}
.orientation-horizontal .tempest-card-flight--cyan{left:auto;right:-28%;top:50%;transform:translateY(-50%) rotate(90deg)}
.orientation-horizontal .tempest-card-flight--orange.is-landed{left:auto;right:8%;top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(90deg)}
.orientation-horizontal .tempest-card-flight--cyan.is-landed{right:auto;left:8%;top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(270deg)}
.tempest-card-flight.is-fading{opacity:0!important;transition:opacity .48s ease,transform .48s ease}
.tempest-card-flight__category{font:9px var(--font-mono);letter-spacing:.16em;opacity:.9}
.tempest-card-flight__name{font:600 clamp(18px,2vw,28px)/1.05 var(--font-title);letter-spacing:.05em;color:var(--hs-texte)}
.tempest-card-flight__text{margin-top:auto;font:9px/1.5 var(--font-mono);color:#c4d3ce}
.tempest-card-flight__effect{padding-top:8px;border-top:1px solid currentColor;font:700 9px/1.35 var(--font-mono);letter-spacing:.08em}
.tempest-card-flight.is-countered{filter:saturate(.35);text-decoration-color:#ff654f}
@media(max-width:760px){.tempest-card-flight{width:132px;min-height:180px;padding:11px}.tempest-card-flight__text{font-size:8px}}

/* V18 — primitives visuelles Tempête */
.tempest-fx{position:fixed;z-index:92;pointer-events:none;transform:translate(-50%,-50%);--fx-color:var(--orange)}
.tempest-fx--orange{--fx-color:var(--orange);color:var(--orange)}
.tempest-fx--cyan{--fx-color:var(--cyan);color:var(--cyan)}
.tempest-fx--highlight{width:calc(var(--fx-size,70px)*.82);height:calc(var(--fx-size,70px)*.82);border:2px solid var(--fx-color);border-radius:50%;box-shadow:0 0 12px var(--fx-color),inset 0 0 14px color-mix(in srgb,var(--fx-color) 35%,transparent);animation:tempest-highlight .8s ease-out forwards}
.tempest-fx--borrow{min-width:calc(var(--fx-size,70px)*.82);padding:3px 6px;border:1px solid var(--fx-color);background:rgba(5,12,12,.72);font:700 8px var(--font-mono);letter-spacing:.08em;text-align:center;box-shadow:0 0 12px color-mix(in srgb,var(--fx-color) 55%,transparent);animation:tempest-borrow 1.05s ease-out forwards}
.tempest-fx--trace{height:3px;transform-origin:0 50%!important;background:linear-gradient(90deg,transparent,var(--fx-color) 12%,var(--fx-color) 88%,transparent);box-shadow:0 0 8px var(--fx-color),0 0 18px color-mix(in srgb,var(--fx-color) 65%,transparent);animation:tempest-trace .82s ease-out forwards}
.tempest-fx--particles{width:var(--fx-size,70px);height:var(--fx-size,70px)}
.tempest-fx--particles i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:1px;background:var(--fx-color);box-shadow:0 0 7px var(--fx-color);animation:tempest-dissolve .82s var(--delay,0ms) ease-out forwards}
.tempest-fx--materialize i{animation-name:tempest-materialize}
.tempest-fx--freeze{display:grid;place-items:center;width:calc(var(--fx-size,70px)*.78);height:calc(var(--fx-size,70px)*.78);border:1px solid rgba(210,225,225,.5);border-radius:12%;background:repeating-linear-gradient(0deg,rgba(210,225,225,.08) 0 2px,transparent 2px 5px);color:#d7e0df!important;font-size:clamp(15px,2vw,25px);filter:grayscale(1);box-shadow:0 0 12px rgba(210,225,225,.28);animation:tempest-freeze 1.45s ease-in-out forwards}
.tempest-fx--shield{width:calc(var(--fx-size,74px)*1.05);height:calc(var(--fx-size,74px)*1.05);border-radius:50%;border:3px solid var(--fx-color);background:radial-gradient(circle,transparent 46%,color-mix(in srgb,var(--fx-color) 20%,transparent) 49%,transparent 67%);box-shadow:0 0 22px var(--fx-color),inset 0 0 24px color-mix(in srgb,var(--fx-color) 65%,transparent);animation:tempest-shield .9s ease-out forwards}
.tempest-fx--ripple{width:calc(var(--fx-size,70px)*.65);height:calc(var(--fx-size,70px)*.65);border:2px solid var(--fx-color);border-radius:50%;animation:tempest-ripple .95s ease-out forwards}
.tempest-fx--banner{min-width:min(390px,70vw);padding:12px 22px;border:1px solid var(--fx-color);border-left-width:5px;background:rgba(5,12,12,.92);color:var(--hs-texte);box-shadow:0 0 28px color-mix(in srgb,var(--fx-color) 35%,transparent),0 18px 42px rgba(0,0,0,.55);font:700 clamp(15px,2vw,26px) var(--font-title);letter-spacing:.12em;text-align:center;animation:tempest-banner 1.35s ease-in-out forwards}
.tempest-fx--failure{--fx-color:#ff4f45!important;border-color:#ff4f45;color:#ffd2cc;box-shadow:0 0 30px rgba(255,79,69,.42)}
.tempest-fx-blackout{position:fixed;z-index:91;pointer-events:none;background:#020505;opacity:0;animation:tempest-blackout 1.25s ease-in-out forwards}
.tempest-counter-marker{position:fixed;z-index:89;pointer-events:none;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid currentColor;background:rgba(5,12,12,.9);font:700 8px var(--font-mono);letter-spacing:.12em;box-shadow:0 0 14px currentColor}
.tempest-counter-marker b{display:grid;place-items:center;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-size:12px}
.tempest-counter-marker--orange{color:var(--orange);left:16px;bottom:88px}
.tempest-counter-marker--cyan{color:var(--cyan);right:16px;top:86px;transform:rotate(180deg)}
.orientation-horizontal .tempest-counter-marker--orange{left:18px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-90deg)}
.orientation-horizontal .tempest-counter-marker--cyan{right:18px;top:50%;transform:translateY(-50%) rotate(90deg)}
@keyframes tempest-highlight{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes tempest-borrow{0%{opacity:0;transform:translate(-50%,-35%) scale(.88)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.05)}}
@keyframes tempest-trace{0%{opacity:0;clip-path:inset(0 100% 0 0)}25%{opacity:1}65%{clip-path:inset(0 0 0 0);opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes tempest-dissolve{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}
@keyframes tempest-materialize{0%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes tempest-freeze{0%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}22%,75%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}}
@keyframes tempest-shield{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}58%{opacity:1;transform:translate(-50%,-50%) scale(.98)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes tempest-ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes tempest-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes tempest-blackout{0%{opacity:0}25%,68%{opacity:.96}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tempest-fx,.tempest-fx-blackout{animation-duration:.01ms!important}.tempest-fx--particles i{animation-duration:.01ms!important}}


/* V19 — rotation cyclique, QR cliquables, labels latéraux symétriques */
.qr-link{display:block;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.qr-link:hover,.qr-link:focus-visible{transform:scale(1.018);outline:none;box-shadow:0 0 0 2px currentColor,0 0 22px currentColor}
.qr-card--orange .qr-link{color:var(--orange)}
.qr-card--cyan .qr-link{color:var(--cyan)}
.board-frame{transform:rotate(0deg)!important;transition:transform .32s cubic-bezier(.2,.75,.25,1)}
.orientation-q0 .board-frame{transform:rotate(0deg)!important}
.orientation-q1 .board-frame{transform:rotate(90deg)!important}
.orientation-q2 .board-frame{transform:rotate(180deg)!important}
.orientation-q3 .board-frame{transform:rotate(270deg)!important}
.side{writing-mode:horizontal-tb!important;width:80px!important;gap:0!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important}
.side strong{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:12px;font:700 12px var(--font-mono);letter-spacing:.18em;white-space:nowrap}
.side strong::after{content:"";display:block;width:62px;height:1px;background:currentColor;box-shadow:0 0 9px currentColor}
.side>span{display:none!important}
.side--orange strong{transform:rotate(-90deg)}
.side--cyan strong{transform:rotate(90deg)}
.orientation-q1 .tempest-card-flight--orange,.orientation-q3 .tempest-card-flight--orange{left:-28%;bottom:auto;top:50%;transform:translateY(-50%) rotate(-90deg)}
.orientation-q1 .tempest-card-flight--cyan,.orientation-q3 .tempest-card-flight--cyan{left:auto;right:-28%;top:50%;transform:translateY(-50%) rotate(90deg)}
.orientation-q1 .tempest-card-flight--orange.is-landed,.orientation-q3 .tempest-card-flight--orange.is-landed{left:auto;right:8%;top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(90deg)}
.orientation-q1 .tempest-card-flight--cyan.is-landed,.orientation-q3 .tempest-card-flight--cyan.is-landed{right:auto;left:8%;top:50%;bottom:auto;opacity:1;transform:translateY(-50%) rotate(270deg)}
.orientation-q1 .tempest-counter-marker--orange,.orientation-q3 .tempest-counter-marker--orange{left:18px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-90deg)}
.orientation-q1 .tempest-counter-marker--cyan,.orientation-q3 .tempest-counter-marker--cyan{right:18px;top:50%;transform:translateY(-50%) rotate(90deg)}


/* V20 — orientation définitive des labels vers l'extérieur */
.side{writing-mode:vertical-rl!important;transform:none!important}
.side--orange{transform:rotate(180deg)!important}
.side--cyan{transform:rotate(180deg)!important}
/* Le conteneur droit est physiquement opposé : on inverse le flux pour conserver une lecture vers l'extérieur. */
.side--cyan{writing-mode:vertical-lr!important}
.side--cyan strong{transform:rotate(180deg)}
.side--cyan span{transform:none}


/* V25 — labels joueurs : règle autoritaire, sans writing-mode hérité.
   Le mot et sa ligne sont deux éléments d'un même petit repère tourné vers le joueur extérieur. */
.side{
  writing-mode:horizontal-tb!important;
  width:80px!important;
  gap:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
}
.side>span{display:none!important}
.side strong{
  writing-mode:horizontal-tb!important;
  position:relative!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  font:700 12px var(--font-mono)!important;
  letter-spacing:.18em!important;
  white-space:nowrap!important;
  transform-origin:center center!important;
}
.side strong::after{
  content:"";
  display:block;
  width:62px;
  height:1px;
  background:currentColor;
  box-shadow:0 0 9px currentColor;
}
/* Inversion de la paire précédente : chaque libellé se lit depuis SON bord extérieur. */
.side--orange strong{transform:rotate(90deg)!important}
.side--cyan strong{transform:rotate(-90deg)!important}