/* Une table de collection : encre verte, laiton patiné et papier ivoire. */
:root {
  color-scheme: dark;
  --bg: #141c19; --surface: #1b2520; --raised: #242e27; --ink: #ede8db;
  --muted: #a8afa2; --faint: #98a18f; --line: #d5bc8226;
  --accent: #d4b779; --accent-soft: #cbaa6512; --accent-ink: #23271d;
  --gold-1: #ead4a0; --gold-2: #b99352; --gold-3: #695033;
  --focus: #efcf8d; --ok: #a9c7a1; --warn: #deb192;
  --z0: #a45549; --z1: #b88140; --z2: #b19b4c; --z3: #61846b;
  --z4: #5e939b; --z5: #587b9f; --z6: #8d759d; --z7: #8a928b;
  --zi0: #f1d7c8; --zi1: #f4dfb5; --zi2: #f1e5ba; --zi3: #d0e2c7;
  --zi4: #cbe6e4; --zi5: #d4e2ee; --zi6: #e4d7eb; --zi7: #e1e2d7;
  --zs0: #a45549; --zs1: #a87536; --zs2: #94803c; --zs3: #52755a;
  --zs4: #4c8085; --zs5: #496d92; --zs6: #7f658f; --zs7: #717c72;
  --good: #e1cf9c; --good-ink: #42442d; --bad: #453939; --bad-ink: #d6c1ba;
  --pawn-me: #e6c382; --pawn-bot: #9bc6c3;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font: 13px/1.55 var(--font-body); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .09; background: radial-gradient(ellipse at 50% 30%, #6d7a4c70, transparent 65%), url(assets/sanctuary.png) center / cover; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
button[aria-disabled="true"] { cursor: default; }
button, .sector, .character-art img { transition: background .18s, border-color .18s, transform .18s, box-shadow .18s, opacity .18s; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
h2 { font-size: 29px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; flex: none; }
.gl { width: 1em; height: 1em; fill: currentColor; display: block; flex: none; }
.lotus { display: block; width: 48px; height: 48px; flex: none; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; }
.faint { color: var(--faint); font-size: 11px; }
.empty { color: var(--faint); font-size: 11px; }
.warning { color: var(--warn); }
.positive { color: var(--ok); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #8e967a55; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 42px; padding: 10px 18px; border: 1px solid var(--line); background: var(--raised); border-radius: 4px; font-size: 12px; font-weight: 700; }
button.btn:hover { background: #354034; border-color: var(--accent); }
button.btn.primary { background: linear-gradient(115deg, #e0c58c, #c4a468); border-color: #e2c991; color: var(--accent-ink); box-shadow: inset 0 1px #fff4; }
button.btn.primary:hover { background: #ebd29a; transform: translateY(-1px); box-shadow: 0 4px 20px #bea06426; }
.text-button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; background: none; color: var(--muted); font-size: 11px; }
.text-button:hover { color: var(--accent); }
.text-button .ico { width: 15px; height: 15px; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); }
.icon-button:hover { color: var(--ink); background: var(--raised); border-color: #d5bc8255; }
kbd { font: 9px var(--font-body); padding: 1px 4px; color: var(--muted); border: 1px solid #b1b7a833; border-radius: 3px; }

/* La navigation reste discrète ; l'espace revient au jeu. */
.topbar { height: 76px; padding: 0 34px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: relative; background: #141c19d9; flex: none; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.brand .lotus { width: 38px; height: 43px; }
.brand > span { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: .22em; }
.brand small { display: block; font-family: var(--font-body); font-size: 6.5px; letter-spacing: .29em; margin-top: 5px; color: var(--muted); }
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; color: var(--faint); font-size: 8px; letter-spacing: .25em; }
.tiny-diamond { width: 4px; height: 4px; border: 1px solid var(--gold-2); transform: rotate(45deg); }
.topbar nav { display: flex; align-items: center; gap: 8px; }
.toolbar-button { background: none; display: inline-flex; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); padding: 7px 0; }
.toolbar-button:hover { color: var(--accent); }
.toolbar-button .ico { width: 16px; height: 16px; }

/* Le choix du personnage : une couverture de livre qui s'ouvre sur la table. */
.intro { width: min(1250px, calc(100% - 80px)); margin: 0 auto; padding: 30px 0 12px; }
.intro-hero { min-height: 200px; padding: 24px 36px; position: relative; overflow: hidden; border: 1px solid #c3a77536; border-radius: 5px; background: linear-gradient(90deg, #14201af7 0%, #14201ac9 33%, #14201a05 80%), url(assets/sanctuary.png) center 56% / cover; }
.intro-hero::after { content: ""; position: absolute; inset: 7px; border: 1px solid #dfc88b1c; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { font-size: 9px; letter-spacing: .27em; }
.hero-copy h1 { font-size: clamp(44px, 4.5vw, 66px); margin: 12px 0 16px; line-height: .98; letter-spacing: -.025em; }
.hero-copy h1 em { color: var(--accent); font-weight: 400; }
.hero-copy > p { color: #c4cbba; font-size: 11px; line-height: 1.85; }
.hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 20px; color: #c6cab7; font-size: 9px; }
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-meta .ico { width: 14px; height: 14px; color: var(--accent); }
.hero-meta i { height: 3px; width: 3px; background: var(--accent); border-radius: 50%; }
.hero-seal { position: absolute; bottom: 26px; right: 26px; color: #f0d6a0b3; display: grid; justify-items: center; gap: 6px; }
.hero-seal .lotus { width: 40px; height: 40px; }
.hero-seal > span { font-family: var(--font-display); font-size: 12px; letter-spacing: .26em; }
.character-section { margin-top: 25px; }
.character-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 17px; }
.character-heading h2 { font-size: 31px; margin-top: 5px; }
.character-heading > p { color: var(--faint); font-size: 10px; padding-bottom: 3px; }
.choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.choice { position: relative; border: 1px solid #b5c4a52b; border-radius: 5px; background: #1a241f; text-align: left; padding: 0; overflow: hidden; }
.choice:hover { border-color: #d4b77988; transform: translateY(-3px); }
.choice.on { border-color: #d4b779; box-shadow: 0 0 0 1px #d4b77940, 0 8px 30px #0003; }
.character-art { position: relative; overflow: hidden; height: clamp(134px, 16.7vh, 205px); }
.character-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #10201a05 45%, #1a241f 100%); pointer-events: none; }
.character-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: saturate(.68); }
.choice:hover img, .choice.on img { filter: saturate(.95); transform: scale(1.03); }
.character-index { position: absolute; left: 12px; top: 9px; color: #fff8dc; font-size: 9px; letter-spacing: .1em; text-shadow: 0 1px 5px #000; }
.choice-check { display: none; position: absolute; top: 10px; right: 10px; color: #2a2d21; background: var(--accent); border-radius: 50%; width: 22px; height: 22px; align-items: center; justify-content: center; }
.choice-check .ico { width: 14px; height: 14px; }
.choice.on .choice-check { display: flex; }
.character-copy { padding: 0 16px 15px; position: relative; }
.character-copy h3 { font-size: 25px; margin-bottom: 3px; }
.choice.on h3 { color: var(--accent); }
.character-copy > span { color: var(--muted); font-size: 10px; }
.character-detail { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 17px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--accent); }
.character-description p { font-family: var(--font-display); font-size: 19px; margin-top: 3px; color: #c8cfbd; }
.character-powers { display: flex; align-items: center; gap: 25px; }
.character-powers > div { display: flex; align-items: center; gap: 10px; }
.character-powers > div > span:last-child { font-size: 10px; line-height: 1.6; color: var(--muted); }
.character-powers .pw { color: var(--accent); }
.start-row { display: flex; align-items: center; gap: 32px; padding: 22px 0 14px; }
.start-row > div:first-child > .eyebrow { display: block; margin-bottom: 8px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #111b1666; }
.seg button { background: transparent; border-radius: 2px; padding: 7px 14px; font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.seg button .ico { width: 13px; height: 13px; }
.seg button.on { background: #d4b77920; color: var(--accent); }
.seg button:hover { color: var(--ink); }
.matchup { display: flex; gap: 11px; align-items: center; margin-left: auto; }
.matchup img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
.matchup p { font-size: 11px; color: var(--muted); }
.matchup strong { color: var(--ink); font-weight: 600; }
.matchup p > span { display: block; font-size: 9px; color: var(--faint); margin-top: 3px; }
button.start-button { min-height: 49px; min-width: 235px; }
.intro-footer { display: flex; justify-content: space-between; align-items: center; color: var(--faint); font-size: 9px; }

/* Disposition desktop : les panneaux défilent indépendamment, jamais le plateau. */
.playing::before { opacity: .035; }
.playing #app { min-height: 100svh; }
.playing .topbar { height: 66px; }
.table { --hand-height: clamp(204px, 25.7vh, 272px); --card-height: calc(var(--hand-height) - 72px); display: grid; grid-template-columns: clamp(200px, 16vw, 260px) minmax(0, 1fr) clamp(248px, 19vw, 300px); grid-template-rows: minmax(0, 1fr) var(--hand-height); grid-template-areas: "panel wheel market" "me me me"; gap: 16px 22px; height: calc(100svh - 66px); min-height: 598px; max-width: 1900px; margin: 0 auto; padding: 18px 28px 16px; }
.a-panel { grid-area: panel; } .a-wheel { grid-area: wheel; } .a-market { grid-area: market; } .a-me { grid-area: me; }
.panel, .market-box { border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(155deg, #223027b8, #18221dd9); min-width: 0; min-height: 0; overflow: hidden; }
.panel { display: flex; flex-direction: column; padding: 18px 16px; align-self: start; max-height: 100%; }
.turn-status { display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 10px; font-weight: 600; margin-bottom: 20px; }
.turn-status > span:first-child { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #d4b77912; }
.turn-status.bot { color: var(--pawn-bot); }
.turn-status.bot > span:first-child { background: var(--pawn-bot); box-shadow: 0 0 0 4px #9bc6c312; }
.round-label { margin-left: auto; color: var(--faint); font-size: 9px; font-weight: 400; border: 1px solid var(--line); padding: 1px 7px; border-radius: 3px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line); gap: 6px; flex: none; }
.steps li { position: relative; text-align: center; font-size: 8px; color: var(--faint); display: grid; justify-items: center; gap: 6px; }
.steps li > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #91a18c40; background: #19231e; position: relative; z-index: 1; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 14px); top: 14px; height: 1px; width: calc(100% - 22px); background: #91a18c30; }
.steps li.on { color: var(--accent); }
.steps li.on > span { border-color: var(--accent); background: #d4b7791a; box-shadow: 0 0 0 3px #d4b77908; }
.steps li.done { color: var(--ok); }
.steps li.done > span { border-color: #a9c7a155; }
.steps .ico { width: 15px; height: 15px; }
.decision-body { flex: 1; min-height: 0; overflow: auto; padding: 1px 3px 10px; margin: 0 -3px; }
.decision-body h2 { font-size: clamp(24px, 2vw, 31px); max-width: 240px; }
.panel-description { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 12px; }
.options { display: grid; gap: 7px; margin-top: 18px; }
.opt { width: 100%; display: flex; align-items: center; text-align: left; gap: 9px; background: #15201b77; border: 1px solid #b5c4a52b; border-radius: 4px; padding: 9px; min-height: 43px; }
.opt:hover { border-color: #d4b77988; background: #d4b7790b; }
.opt .t { flex: 1; font-size: 12px; min-width: 0; }
.opt .key { color: var(--faint); font-size: 9px; width: 9px; flex: none; }
.opt .x { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; }
.opt .x .ico, .opt .x .gl { width: 12px; height: 12px; }
.opt .warn { color: var(--accent); }
.opt.go { color: #242c20; background: #ccb17a; border-color: #d7bd86; margin-top: 5px; }
.opt.go:hover { background: #e0c58c; }
.opt.go .key { color: #4a513f; }
.opt.go .t { font-weight: 700; }
.opt.go .ico { width: 16px; height: 16px; }
.opt.picked { border-color: var(--focus); background: #d4b77926; }
.move-options { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.move-option { justify-content: center; min-height: 28px; padding: 4px 2px; gap: 0; }
.move-option .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.move-option .key { font-size: 10px; width: auto; color: var(--muted); }
.move-option .dot { display: none; width: 18px; height: 18px; }
.move-option .dot .gl { width: 10px; height: 10px; }
.panel-bottom { border-top: 1px solid var(--line); padding: 10px 0; flex: none; }
.panel-bottom .text-button { width: 100%; font-size: 10px; }
.panel-bottom .text-button > .ico:last-child { margin-left: auto; }
.zone-preview { flex: none; max-height: 240px; overflow: auto; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.zone-preview:empty { display: none; }
.decision-cue { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--accent); min-height: 90px; font-size: 26px; font-family: var(--font-display); }
.decision-cue > .ico, .decision-cue > .gl { width: 30px; height: 30px; }
.preview-symbols { display: flex; align-items: center; gap: 6px; color: var(--accent); margin: 16px 0 10px; font-size: 13px; }
.preview-symbols .gl { width: 18px; height: 18px; }
.distance { display: inline-flex; align-items: center; gap: 4px; }
.distance .ico { width: 13px; height: 13px; }
.options:empty { display: none; }
.preview-placeholder { padding: 0 3px; text-align: center; color: var(--faint); }
.preview-placeholder > .ico { display: none; width: 23px; height: 23px; color: var(--gold-2); opacity: .75; margin-bottom: 5px; }
.preview-placeholder p { font-family: var(--font-display); font-style: italic; font-size: 19px; color: #b9c0ae; }
.preview-placeholder > span { display: block; font-size: 11px; line-height: 1.8; margin: 7px auto 0; max-width: 180px; }
.preview-title { display: flex; align-items: center; gap: 10px; }
.preview-title strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.preview-title > div > span { display: block; font-size: 8px; color: var(--faint); }
.distance { margin-left: auto; color: var(--accent); font-size: 10px; white-space: nowrap; }
.preview-effect { color: var(--muted); font-size: 11px; line-height: 1.8; margin-top: 11px; }
.preview-facts { display: grid; gap: 5px; margin-top: 10px; font-size: 9px; color: var(--faint); }
.preview-facts > span { display: flex; gap: 6px; align-items: center; }
.preview-facts .ico { width: 12px; height: 12px; }
.notice { padding: 9px; margin-top: 11px; display: flex; gap: 7px; font-size: 10px; line-height: 1.7; background: #d4b77908; border: 1px solid #d4b7791a; border-radius: 4px; }
.notice .ico { width: 14px; height: 14px; margin-top: 1px; }
.thinking { display: flex; gap: 6px; padding: 23px 0; }
.thinking span { height: 5px; width: 5px; background: var(--accent); border-radius: 50%; animation: breathe 1.5s infinite; }
.thinking span:nth-child(2) { animation-delay: .2s; }.thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes breathe { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.bot-live { display: grid; gap: 9px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.bot-live p { padding-left: 10px; border-left: 1px solid var(--line); }

/* Plateau en SVG, sans texture sur les éléments qui doivent rester lisibles. */
.arena { display: flex; flex-direction: column; align-items: stretch; min-height: 0; min-width: 0; position: relative; }
.board-space { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; position: relative; }
.board-space::before { content: ""; position: absolute; inset: 2% 0; pointer-events: none; background: radial-gradient(ellipse, #9d9d3f0c, transparent 70%); }
.wheel { height: 100%; max-width: 100%; aspect-ratio: 1; position: relative; }
.wheel > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.board-shadow { fill: #060d09; filter: drop-shadow(0 8px 13px #0006); }
.board-base { fill: url(#board-glow); stroke: #9c8348; stroke-width: 1; }
.board-rim { fill: none; stroke: #bfa56b; stroke-width: 1.2; opacity: .7; }
.board-rim.fine { stroke-width: .7; opacity: .45; }
.board-tick { stroke: #bfa56b; stroke-width: 1; opacity: .65; }
.sector { stroke: #d8bc7233; stroke-width: 1; }
.sector-g.legal { cursor: pointer; }
.sector-g.legal .sector { stroke: #d8bc7280; }
.sector-g.legal:hover .sector, .sector-g.legal:focus-visible .sector { fill: var(--zc); stroke: var(--focus); stroke-width: 2; }
.sector-g.legal:focus-visible { outline: none; }
.sector-g.dim .sector { opacity: .32; }
.sector-g.dim .sector-symbol, .sector-g.dim .zt { opacity: .45; }
.sector-symbol { fill: var(--zk); pointer-events: none; filter: drop-shadow(0 2px 2px #0004); }
.zt { text-anchor: middle; pointer-events: none; font-family: var(--font-body); fill: var(--zk); }
.zt.name { font-family: var(--font-display); font-size: 25px; font-weight: 600; }
.zt.subtitle { font-size: 11px; opacity: .7; letter-spacing: .04em; }
.zt.supply { font-size: 16px; font-weight: 600; }
.supply-disc { fill: #101b18a0; stroke: #e2ddba40; stroke-width: .7; }
.move-marker circle { fill: #c9b47b; stroke: #111b14; stroke-width: 1.3; }
.move-marker text { font-family: var(--font-body); font-size: 14px; text-anchor: middle; fill: #25301e; font-weight: 700; }
.move-marker.caution circle { fill: #d1a17c; }
.start-line { stroke: var(--gold-1); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .8; }
.hub { fill: #19231e; stroke: #bfa56b77; stroke-width: 1.2; }
.hub-line { fill: none; stroke: #bfa56b44; stroke-width: .7; }
.hub-line.dotted { stroke-dasharray: 1 5; }
.hub-lotus { color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .8; }
.hub-title { font-family: var(--font-display); font-size: 31px; fill: var(--gold-1); letter-spacing: .14em; text-anchor: middle; }
.hub-subtitle { font-family: var(--font-body); font-size: 7px; fill: #c7c4aa; letter-spacing: .23em; text-anchor: middle; }
.hub-karma text { fill: #c9d0bc; font-family: var(--font-body); font-size: 16px; text-anchor: middle; }
.pawn-halo { fill: #182019; stroke-width: 1; }.pawn-halo.me { stroke: #e6c38255; }.pawn-halo.bot { stroke: #9bc6c355; }
.pawn-ring { fill: none; stroke-width: 2.5; }.pawn-ring.me { stroke: var(--pawn-me); }.pawn-ring.bot { stroke: var(--pawn-bot); }
.board-caption { flex: none; min-height: 23px; display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 9px; color: var(--faint); }
.board-caption > span { display: inline-flex; align-items: center; gap: 6px; }
.board-caption > span:nth-child(2) { color: #bcb79b; font-family: var(--font-display); font-size: 14px; font-style: italic; }
.board-caption .ico { width: 12px; height: 12px; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; }.legend-dot.me { background: var(--pawn-me); }.legend-dot.bot { background: var(--pawn-bot); }

/* Le joueur en face : les cartes cachées le restent. */
.seat { min-width: 0; }
.opp { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #1a251f80; border: 1px solid var(--line); border-radius: 5px; min-height: 74px; flex: none; }
.opp.active { border-color: #9bc6c377; }
.who { display: flex; align-items: center; gap: 10px; flex: none; }
.portrait-button { position: relative; padding: 2px; border: 1px solid #d4b77970; background: transparent; border-radius: 50%; }
.portrait-button:hover { border-color: var(--accent); transform: scale(1.05); }
.portrait-button img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.opp .portrait-button { border-color: #9bc6c366; }
.player-label { font-size: 7px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; }
.nm { font-family: var(--font-display); font-size: 22px; display: flex; align-items: center; gap: 8px; line-height: 1.15; }
.player-tag { font-family: var(--font-body); font-size: 6px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 2px; color: var(--accent); letter-spacing: .08em; }
.opp .player-tag { color: var(--pawn-bot); }
.player-progress { padding-left: 8px; }
.slots { display: flex; gap: 4px; }
.slots svg { width: 19px; height: 19px; }
.chip { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 3px 7px; font-size: 10px; }
.chip .ico { width: 12px; height: 12px; }
.chip.bad { color: #bca89b; }
.opp .who { flex-wrap: wrap; gap: 4px 9px; max-width: 162px; }
.opp .portrait-button { grid-row: span 2; }
.opp .player-progress { padding: 0; margin-left: 50px; margin-top: -3px; }
.opp .slots { gap: 3px; }.opp .slots svg { width: 12px; height: 12px; }
.opp .who > .chip { position: absolute; opacity: 0; pointer-events: none; }
.opp .nm { font-size: 20px; }.opp .player-label { font-size: 7px; }
.opponent-hand { flex: none; display: grid; gap: 5px; justify-items: center; }
.opponent-hand > span { font-size: 7px; color: var(--faint); }
.backs { display: flex; padding-left: 8px; }
.backs .back { width: 25px; height: 34px; margin-left: -8px; }
.opponent-storage { display: flex; gap: 10px; min-width: 0; }
.opponent-storage > div { display: grid; gap: 4px; min-width: 0; }
.opponent-storage > div > span:first-child { font-size: 7px; color: var(--faint); white-space: nowrap; }
.opponent-storage .ico { width: 10px; height: 10px; }
.opponent-storage .cards { max-width: 65px; max-height: 32px; overflow: auto; flex-wrap: nowrap; gap: 2px; }
.opponent-storage .card.mini { width: 23px; height: 32px; border-radius: 2px; }
.opponent-storage .card-emblem .gl { width: 12px; height: 12px; }
.opponent-powers { display: none; }
.back { display: block; position: relative; border-radius: 4px; background: radial-gradient(ellipse at center, #b9a46713, transparent 70%), repeating-linear-gradient(45deg, #c5b27508 0 1px, transparent 1px 6px), #23372d; border: 1px solid #ad995e88; box-shadow: 0 2px 4px #0005; }
.back::before { content: ""; position: absolute; inset: 4px; border: 1px solid #ad995e66; border-radius: 2px; }
.back::after { content: "✧"; position: absolute; inset: 0; display: grid; place-items: center; color: #b7a369; font-family: Georgia, serif; font-size: 22px; }
.pile { display: grid; justify-items: center; gap: 10px; flex: none; background: none; padding: 9px 3px 4px; border: 1px solid transparent; border-radius: 5px; }
.pile:hover { border-color: var(--line); background: #d4b7790a; }
.pile .stack { width: 56px; height: 79px; position: relative; }
.pile .stack > * { position: absolute; inset: 0; }
.pile .stack .back:nth-child(2) { transform: translate(-3px, -3px); }.pile .stack .back:nth-child(3) { transform: translate(-6px, -6px); }
.pile .slot { border: 1px dashed #99a2884d; border-radius: 4px; }
.pile .cnt { position: absolute; inset: auto -7px -5px auto; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; background: #29392b; border: 1px solid #afa66d66; color: #e1d9ba; border-radius: 50%; font-size: 9px; z-index: 2; }
.pile .lbl { display: flex; gap: 4px; align-items: center; font-size: 9px; color: var(--muted); }
.pile .lbl .ico { width: 12px; height: 12px; }
.pile .card { pointer-events: none; }
.pile .top .card { width: 100%; height: 100%; }
.pile.small .stack { width: 32px; height: 42px; }.pile.small .lbl { font-size: 8px; }.pile.small .cnt { font-size: 8px; height: 17px; min-width: 17px; }
.pile.small { padding: 5px 2px 3px; gap: 6px; }

/* Cartes : nom, symboles et effet sont lisibles sans infobulle. */
.card { --zc: #a45549; --zk: #f1d7c8; --zs: #a45549; position: relative; flex: none; width: 116px; height: 167px; padding: 8px; border: 1px solid var(--zk); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(145deg, #ffffff20, #00000018), var(--zc); color: var(--zk); box-shadow: 0 3px 7px #0005, inset 0 0 0 3px #fff2; isolation: isolate; }
.card::before { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffff33; border-radius: 3px; pointer-events: none; z-index: 2; }
.syms { display: flex; justify-content: space-between; gap: 4px; position: relative; z-index: 2; }
.pair { display: flex; gap: 2px; }
.sym { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; }
.sym .gl { width: 10px; height: 10px; }
.sym.l { background: #f7f3e7; color: var(--zs); box-shadow: inset 0 0 0 1px var(--zs); }
.sym.d { background: #354237; color: var(--zk); box-shadow: inset 0 0 0 1px #14291c; }
.sym.joker.l { color: #7d794b; box-shadow: inset 0 0 0 1px #7d794b; }
.sym.joker.d { color: #e5dbaa; }
.card-art { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.card-emblem { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #ffffff55; border-radius: 50%; color: var(--zk); background: radial-gradient(circle, #0002 0 51%, transparent 52%), repeating-conic-gradient(from 0deg, #ffffff20 0deg 1deg, transparent 1deg 15deg); outline: 1px solid #ffffff33; outline-offset: 4px; }
.card-emblem .gl { width: 32px; height: 32px; }
.card .foot { display: grid; justify-items: center; position: relative; z-index: 2; text-align: center; gap: 3px; padding-top: 4px; }
.card-category { font-size: 6px; text-transform: uppercase; letter-spacing: .1em; color: var(--zs); }
.card .foot b { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1; }
.card-effect { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 1.4; min-height: 19px; margin-top: 3px; color: var(--zk); }
.card-effect .ico, .card-effect .gl { width: 13px; height: 13px; }
.card .evan { position: absolute; top: 30px; right: 9px; color: var(--zk); }
.card .evan .ico { width: 10px; height: 10px; }
.card .tag { position: absolute; z-index: 3; right: 8px; top: 47px; padding: 1px 4px; font-size: 8px; color: #313b26; background: #dfc88f; border-radius: 3px; }
.card-key { position: absolute; left: 9px; top: 28px; font: 9px var(--font-body); color: var(--zk); }
.card.karma .card-key { color: inherit; background: #eadfc4; border-radius: 3px; padding: 0 4px; }
.card.karma { background: linear-gradient(180deg, #23302300 35%, #f0e8cf 79%), var(--art) center 28% / cover; border-color: #bcae85; color: #3f422f; }
.card.karma.bad { background: linear-gradient(180deg, #17201900 25%, #242a27 81%), var(--art) center 26% / cover; color: #ddd2b8; border-color: #797d65; }
.card.karma .foot { padding-top: 5px; }
.card.karma .foot b { font-size: 17px; }
.card.karma .syms { min-height: 15px; }
.card.karma .card-effect { font-size: 7px; }
.card.selectable { cursor: pointer; border-color: #f0d498; box-shadow: 0 0 0 1px #d9b66d, 0 4px 9px #0005; }
.card.selectable:hover, .card.selectable:focus-visible { transform: translateY(-7px); box-shadow: 0 0 0 2px #e6c582, 0 12px 18px #0005; }
.card.selected { transform: translateY(-7px); box-shadow: 0 0 0 3px var(--focus), 0 10px 18px #0005; }
.card.selected::after { content: "✓"; position: absolute; top: 28px; left: 8px; background: var(--focus); border-radius: 50%; width: 19px; height: 19px; color: #283622; z-index: 4; }
.card.inert { cursor: help; }.card.faded { opacity: .5; cursor: help; }
.card.mini { width: 34px; height: 47px; padding: 4px; border-radius: 3px; }
.card.mini::before, .card.mid::before { inset: 2px; border-radius: 2px; }
.card.mini .syms, .card.mini .foot, .card.mini .evan, .card.mini .tag { display: none; }
.card.mini .card-emblem, .card.mid .card-emblem { width: auto; height: auto; border: 0; outline: 0; background: none; }
.card.mini .card-emblem .gl { width: 20px; height: 20px; }
.card.mini.karma, .card.mid.karma { background: var(--art) center / cover; }
.card.mid { width: 43px; height: 62px; padding: 5px; border-radius: 3px; }
.card.mid .foot, .card.mid .evan, .card.mid .tag { display: none; }
.card.mid .sym { width: 6px; height: 6px; }.card.mid .sym .gl { width: 4px; height: 4px; }.card.mid .syms { gap: 1px; }.card.mid .pair { gap: 1px; }
.card.mid .card-emblem .gl { width: 24px; height: 24px; }
.cards { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }

/* Amulettes, avec le paiement à côté de la décision. */
.market-box { display: flex; flex-direction: column; padding: 17px 15px 0; align-self: start; max-height: 100%; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid var(--line); flex: none; }
.section-heading h2 { font-size: 28px; margin-top: 4px; }
.section-heading .eyebrow { font-size: 7px; letter-spacing: .17em; }
.number-badge { width: 27px; height: 27px; border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; border-radius: 50%; font-size: 9px; }
.market-scroll { min-height: 0; overflow: auto; flex: 1; padding: 8px 1px 0; }
.market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 9px; }
.amulet { background: none; border: 1px solid transparent; padding: 3px 1px; border-radius: 5px; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; }
.amulet:hover, .amulet:focus-visible { background: #c9b47b0c; border-color: #c9b47b55; }
.amulet-art { width: clamp(52px, 6.5vh, 76px); max-width: 100%; position: relative; display: block; filter: drop-shadow(0 3px 3px #0005); }
.amulet-art > svg { display: block; width: 100%; height: auto; }
.am-ring { fill: url(#gold); stroke: #d7bb7933; stroke-width: 1; }
.am-badge { fill: #eae2c9; stroke: #1a251e55; stroke-width: 1; }.am-num { font-family: var(--font-body); font-size: 17px; font-weight: 800; fill: #35432e; text-anchor: middle; }
.amulet-label { display: block; font-size: 8px; color: var(--muted); line-height: 1.4; }
.amulet-label > span { color: var(--gold-2); padding: 0 3px; }
.amulet.payable .amulet-art { filter: drop-shadow(0 0 5px #d1b37570); }
.amulet.payable .amulet-label { color: #e2c99a; }
.amulet.selectable { border-color: #c5af6970; background: #c9b47b0b; cursor: pointer; }
.amulet.selectable:hover { transform: translateY(-2px); background: #c9b47b22; border-color: var(--accent); }
.cost { position: absolute; top: -1px; right: -2px; min-width: 19px; height: 17px; padding: 0 4px; border: 1px solid #c5b271; border-radius: 10px; display: grid; place-items: center; background: #23382b; color: #d9d9b2; font-size: 8px; }
.cost .ico { width: 10px; height: 10px; }
.costly .cost { background: #594b37; color: #efddc4; }
.market-hint { display: flex; gap: 10px; padding: 4px 0; }
.market-hint > .ico { color: var(--accent); width: 23px; height: 23px; margin-top: 2px; }
.market-hint strong { display: block; color: #c3c9b4; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.2; }
.market-hint p > span { color: var(--faint); font-size: 9px; display: block; margin-top: 7px; line-height: 1.8; }
.market-footer { flex: none; display: flex; gap: 6px; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding: 7px 0; color: var(--muted); font-size: 11px; }.market-footer .ico { width: 14px; height: 14px; color: var(--gold-2); }

/* Le chevalet occupe la largeur disponible. Une grande main défile horizontalement. */
.seat.me { background: linear-gradient(180deg, #253127c7, #1c261fef); border: 1px solid #c9b47b3d; border-radius: 6px; position: relative; display: flex; flex-direction: column; padding: 0 18px 10px; min-height: 0; }
.seat.me.active { border-color: #c9b47b80; box-shadow: inset 0 1px #d4b7790d; }
.hand-header { display: flex; align-items: center; gap: 18px; height: 53px; flex: none; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.hand-header .portrait-button img { width: 31px; height: 31px; }
.hand-header .nm { font-size: 20px; }.hand-header .slots svg { width: 18px; height: 18px; }.hand-header .chip { margin-left: 5px; }
.hand-title { font-family: var(--font-display); font-size: 20px; color: #d5d9c6; margin-left: auto; display: flex; gap: 9px; align-items: center; }
.hand-title > span { font-family: var(--font-body); font-size: 8px; color: var(--faint); }
.hand-powers { display: flex; gap: 12px; align-items: center; margin-left: auto; }.hand-powers > span { font-size: 8px; color: var(--faint); }
.me-main { display: grid; grid-template-columns: 144px 60px minmax(0, 1fr) 60px 144px; align-items: center; gap: 16px; flex: 1; min-height: 0; }
.p-cards { min-width: 0; height: 100%; display: flex; justify-content: center; align-items: center; }
.hand-cards { display: flex; align-items: center; gap: 9px; overflow-x: auto; width: max-content; max-width: 100%; height: 100%; padding: 8px 5px 5px; }
.hand-cards > .card { height: var(--card-height); width: clamp(99px, calc(var(--card-height) * .7), 142px); }
.frame { border: 1px dashed #b4b98e33; border-radius: 4px; padding: 9px; min-width: 0; min-height: 100px; background: #15201b44; }
.flbl { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); background: none; padding: 0; width: 100%; }.flbl:hover { color: var(--accent); }.flbl .ico { width: 12px; height: 12px; }.flbl > span { margin-left: auto; color: var(--faint); font-size: 9px; }
.frame .cards { margin-top: 9px; flex-wrap: nowrap; overflow: auto; padding-bottom: 4px; max-height: 95px; }
.frame-empty { display: grid; justify-items: center; gap: 7px; padding-top: 14px; color: #8e9e815e; }.frame-empty .ico { width: 22px; height: 22px; }.frame-empty > span { font-size: 7px; color: var(--faint); }
.played-strip { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); display: flex; gap: 15px; border: 1px solid var(--line); background: #1c281f; border-radius: 4px; padding: 2px 7px; z-index: 3; max-width: 80%; overflow: auto; }
.played-strip > span { display: inline-flex; align-items: center; gap: 4px; font-size: 7px; color: var(--faint); white-space: nowrap; }.played-strip .ico { width: 10px; height: 10px; }.played-strip .dot { width: 13px; height: 13px; }.played-strip .dot .gl { width: 8px; height: 8px; }
.pw { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; white-space: nowrap; }.pw .ico { width: 15px; height: 15px; }.pw.lg .ico { width: 15px; height: 15px; }
.kchip { display: inline-grid; place-items: center; border-radius: 50%; width: 17px; height: 17px; flex: none; }.kchip .gl, .kchip .ico { width: 11px; height: 11px; }.kchip.good { color: var(--good-ink); background: var(--good); }.kchip.bad { color: var(--bad-ink); background: var(--bad); }
.powers { display: flex; gap: 6px; }.power { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #15201b55; color: #c4c6aa; min-height: 30px; }.power .mk:empty { display: none; }.power.used { opacity: .43; }.power .mk .ico { width: 10px; height: 10px; }.power.selectable { border-color: #d4b77999; color: var(--accent); background: #d4b77914; }.power.selectable:hover { background: #d4b77930; }
.dot { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--zc); color: var(--zk); flex: none; }.dot .gl, .dot .ico { width: 15px; height: 15px; }
.setup-mode { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0; }
.neutral-pawn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #23332a; color: var(--pawn-me); }
.neutral-pawn.bot { color: var(--pawn-bot); }
.neutral-pawn .lotus { width: 26px; height: 26px; }
.hand-header .neutral-pawn { width: 31px; height: 31px; }
.result .neutral-pawn { width: 80px; height: 80px; }
.result .neutral-pawn .lotus { width: 50px; height: 50px; }
.hand-title { margin-left: auto; font-family: var(--font-body); font-size: 12px; }
.opponent-hand { background: transparent; padding: 4px; border-radius: 4px; }
.opponent-hand > span:last-child { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.opponent-hand .ico { width: 13px; height: 13px; }
.opponent-storage > button { background: none; padding: 5px; border-radius: 4px; display: grid; gap: 7px; justify-items: center; color: var(--muted); font-size: 10px; }
.opponent-storage > button:hover, .opponent-hand:hover { background: #d4b77910; }
.opponent-storage > button > span:first-child { display: flex; gap: 4px; align-items: center; }
.opponent-storage .ico { width: 15px; height: 15px; }
.storage-symbols { display: flex; gap: 2px; max-width: 62px; overflow: hidden; }
.storage-symbols .dot { width: 17px; height: 17px; }.storage-symbols .dot .gl { width: 10px; height: 10px; }
.played-strip > button { background: none; padding: 2px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.played-strip > button:hover { color: var(--accent); }
.played-strip > button .dot .ico { width: 9px; height: 9px; }
.collection-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.collection-tabs button { background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.collection-tabs button:hover, .collection-tabs button.on { color: var(--accent); background: #d4b77912; border-color: #d4b77966; }
.collection-tabs button span { margin-left: 4px; color: var(--ink); }
.collection-tabs .ico { width: 14px; height: 14px; }
.collection-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 12px; }
.collection-item { position: relative; justify-self: center; padding-bottom: 8px; }
.collection-count { position: absolute; bottom: 0; right: 4px; padding: 2px 7px; background: var(--accent); color: var(--accent-ink); border-radius: 4px; font-size: 12px; font-weight: 700; }
.collection-note { font-size: 10px; color: var(--muted); margin-top: 20px; }
.hidden-collection { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 35px; color: var(--muted); }
.hidden-collection .ico { width: 35px; height: 35px; color: var(--accent); }
.dialog-body .dialog-powers { margin-top: 24px; }
.ichip { display: inline-flex; vertical-align: -4px; }.ichip .dot { width: 17px; height: 17px; }.ichip .dot .gl, .ichip .dot .ico { width: 10px; height: 10px; }
.game-footer { height: 30px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 8px; color: var(--faint); max-width: 1900px; margin: 0 auto; }
.game-footer > span { display: flex; align-items: center; gap: 5px; }.game-footer .ico { width: 12px; height: 12px; color: var(--gold-2); }.footer-separator { margin: 0 7px; }

/* Informations contextuelles et fenêtres accessibles au clavier. */
.tip { position: fixed; z-index: 30; max-width: min(290px, calc(100vw - 24px)); padding: 10px 13px; border: 1px solid #d4b77966; border-radius: 5px; background: #131d17fa; color: #d9ddc9; box-shadow: 0 8px 30px #0006; font-size: 11px; line-height: 1.75; pointer-events: none; }
.tip[hidden] { display: none; }.tip.rich { max-width: min(380px, calc(100vw - 24px)); }
.deck-grid { display: flex; flex-wrap: wrap; gap: 11px; margin: 14px 0; }.deck-item { position: relative; }.deck-item .n { position: absolute; bottom: -5px; right: -5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #d5bc82; color: #233320; font-size: 9px; }.deck-where { display: flex; gap: 12px; flex-wrap: wrap; font-size: 9px; color: var(--muted); }.deck-where .ico { width: 12px; height: 12px; }
.game-dialog { color: var(--ink); background: #1b261f; border: 1px solid #c6ac7066; border-radius: 8px; padding: 0; width: min(730px, calc(100vw - 32px)); max-height: min(85svh, 900px); box-shadow: 0 25px 110px #0009; }
.game-dialog::backdrop { background: #060f0caa; backdrop-filter: blur(7px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #1b261ff5; z-index: 1; }
.dialog-header h2 { font-size: 32px; margin-top: 6px; }.dialog-header .icon-button { flex: none; }
.dialog-body { padding: 24px 28px 28px; font-size: 12px; }
.dialog-body h3 { font-size: 22px; margin: 20px 0 10px; }
.dialog-intro { color: var(--muted); font-size: 12px; line-height: 1.9; margin-bottom: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.dialog-body .deck-grid { margin-bottom: 24px; }
.dialog-powers { color: var(--muted); display: grid; gap: 10px; font-size: 11px; }.dialog-powers .pw { color: var(--accent); margin-right: 6px; }
.rules-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 30px; margin-bottom: 25px; }.rules-steps section > span { color: var(--accent); font-size: 10px; letter-spacing: .12em; }.rules-steps h3 { margin-top: 6px; }.rules-steps p, .rules-notes p { color: var(--muted); font-size: 11px; line-height: 1.9; }.rules-notes { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 13px; }.rules-notes strong { color: #d7dac7; font-weight: 600; }
.rules-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; border-top: 1px solid var(--line); margin-top: 25px; padding-top: 23px; }.rules-cards > div { display: flex; gap: 10px; }.rules-cards strong { display: block; font-size: 11px; font-weight: 600; margin-bottom: 3px; }.rules-cards strong span { color: var(--faint); font-size: 9px; font-weight: 400; }.rules-cards p > span { color: var(--muted); font-size: 10px; line-height: 1.8; display: block; }
.keyboard-help { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.log { display: grid; gap: 0; }.log-row { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); line-height: 1.9; }.log-round { font-size: 9px; min-width: 24px; padding-top: 2px; color: var(--faint); }.log-row strong { color: #bfcdc6; font-weight: 500; }.log-row strong.me { color: var(--accent); }
.result { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 25px 0; flex: 1; align-content: center; }.result img { width: 90px; height: 90px; border: 1px solid var(--accent); padding: 4px; border-radius: 50%; }.result h2 { font-size: 35px; color: var(--accent); }.result p { font-size: 11px; color: var(--muted); }.result .btn { width: 100%; font-size: 11px; }

@media (min-width: 1650px) { .opponent-powers { display: block; }.opponent-powers .powers { flex-direction: column; gap: 2px; }.opponent-powers .power { padding: 1px 5px; min-height: 0; }.opponent-powers .pw { font-size: 8px; }.opponent-powers .ico { width: 11px; height: 11px; }.opponent-powers .kchip { width: 12px; height: 12px; } }
@media (min-width: 1101px) and (max-height: 940px) {
  .market { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px 5px; }
  .amulet-art { width: 48px; }
}
@media (max-height: 820px) and (min-width: 1101px) {
  .playing .topbar { height: 56px; }.table { height: calc(100svh - 56px); min-height: 590px; gap: 12px 16px; padding: 12px 22px; }
  .panel { padding: 13px; }.turn-status { margin-bottom: 12px; }.steps { margin-bottom: 14px; padding-bottom: 12px; }.decision-body h2 { font-size: 25px; }.options { margin-top: 8px; gap: 5px; }.zone-preview { max-height: 190px; margin-top: 6px; padding: 10px 0 0; }.notice { font-size: 10px; margin-top: 7px; padding: 7px; }.decision-cue { min-height: 65px; }
  .opp { min-height: 62px; padding: 6px 10px; gap: 9px; }.opp .portrait-button img { width: 30px; height: 30px; }.opp .who { max-width: 140px; }.opp .player-progress { margin-left: 42px; }.opp .nm { font-size: 18px; }.opp .player-label { font-size: 6px; }.board-caption { min-height: 19px; font-size: 8px; }.board-caption > span:nth-child(2) { font-size: 12px; }
  .market-box { padding: 12px 12px 0; }.section-heading { padding-bottom: 10px; }.section-heading h2 { font-size: 25px; }.market { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 4px; }.market-scroll { padding-top: 7px; }.amulet-art { width: 44px; }.amulet-label { font-size: 8px; }.market-hint strong { font-size: 16px; }.market-hint p > span { font-size: 8px; }.market-footer { padding: 7px 0; font-size: 7px; }
  .card .foot b { font-size: 17px; }.card .card-emblem { width: 39px; height: 39px; }.card-emblem .gl { width: 25px; height: 25px; }.card.karma .foot b { font-size: 15px; }.card .sym { width: 13px; height: 13px; }.card .sym .gl { width: 8px; height: 8px; }.card .card-effect { font-size: 10px; }.card.mini .card-emblem, .card.mid .card-emblem { width: auto; height: auto; }
  .hand-header { height: 48px; }.seat.me { padding-bottom: 8px; }.me-main { gap: 12px; grid-template-columns: 126px 50px minmax(0, 1fr) 50px 126px; }.frame { min-height: 92px; }.hand-title { font-size: 18px; }
  .intro { padding-top: 22px; }.intro-hero { min-height: 240px; padding: 22px 30px; }.hero-copy h1 { font-size: 52px; margin: 10px 0 12px; }.hero-meta { margin-top: 14px; }.character-section { margin-top: 18px; }.character-heading { margin-bottom: 12px; }.character-heading h2 { font-size: 27px; }.character-art { height: 126px; }.character-detail { margin-top: 13px; padding: 13px 0; }.start-row { padding-top: 16px; }
}
@media (max-width: 1250px) and (min-width: 1101px) {
  .table { grid-template-columns: 220px minmax(0, 1fr) 230px; padding-inline: 16px; gap: 12px; }.topbar { padding-inline: 22px; }.opp { gap: 7px; padding-inline: 8px; }.opponent-storage { gap: 6px; }.opponent-storage > div > span:first-child { font-size: 6px; }.opponent-hand { display: none; }.hand-powers > span { display: none; }.hand-header .who { gap: 7px; }.hand-header .chip { display: none; }.me-main { grid-template-columns: 112px 45px minmax(0, 1fr) 45px 112px; gap: 11px; }.game-footer > span:last-child { display: none; }
}
/* En dessous d'un desktop, la page retrouve un défilement naturel. */
@media (max-width: 1100px) {
  .topbar { padding: 0 22px; height: 68px; }.topbar-center { display: none; }.table { height: auto; min-height: 0; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(480px, auto) auto auto; grid-template-areas: "panel wheel" "me me" "market market"; padding: 18px 20px 10px; --hand-height: 230px; --card-height: 158px; gap: 18px; }.arena { min-height: 480px; }.board-space { height: 390px; }.wheel { max-height: 450px; width: 100%; }.opp { gap: 9px; }.opponent-hand { display: none; }.opponent-storage { margin-left: auto; }.panel { min-height: 480px; }.seat.me { min-height: 230px; }.me-main { grid-template-columns: 102px 43px minmax(0, 1fr) 43px 102px; gap: 10px; }.hand-header .player-progress { display: none; }.market-box { padding: 18px; }.market-scroll { overflow: visible; }.market { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }.amulet-art { width: 70px; }.amulet-label { font-size: 8px; }.market-hint { padding: 0; }.market-footer { padding-bottom: 0; }.game-footer { height: auto; min-height: 35px; padding: 6px 20px 14px; }.game-footer > span:last-child { display: none; }.hand-title { display: none; }.hand-powers { margin-left: auto; }
  .intro { width: calc(100% - 48px); }.choices { gap: 11px; }.character-copy { padding: 0 11px 12px; }.character-copy h3 { font-size: 23px; }.character-copy > span { font-size: 8px; }.character-detail { grid-template-columns: 1fr; gap: 14px; }.character-description p { display: inline; margin-left: 12px; font-size: 17px; }.start-row { gap: 22px; }.matchup { margin-left: 0; }.start-button { margin-left: auto; }
}
@media (max-width: 760px) {
  .topbar, .playing .topbar { height: 65px; padding: 0 16px; }.brand > span { font-size: 20px; }.brand .lotus { width: 30px; height: 34px; }.brand { gap: 8px; }.topbar nav { gap: 14px; }.topbar .new-game { font-size: 9px; }.toolbar-button span { display: none; }.fullscreen-button { display: none; }.brand small { font-size: 5px; }
  .table { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "wheel" "panel" "me" "market"; gap: 14px; padding: 12px; --card-height: 150px; }.arena { min-height: 0; }.board-space { height: auto; aspect-ratio: 1; max-height: none; }.wheel { height: auto; width: 100%; max-height: none; }.opp { min-height: 66px; }.opp .who { max-width: 155px; }.opponent-storage { display: flex; }.opponent-storage > div > span:first-child { font-size: 7px; }.panel { min-height: 0; max-height: none; padding: 15px 15px 0; }.turn-status { margin-bottom: 12px; }.steps { margin-bottom: 14px; }.decision-body { overflow: visible; }.decision-body h2 { max-width: none; }.move-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }.move-option { gap: 4px; padding: 6px 4px; }.move-option .t { font-size: 8px; }.move-option .dot { width: 16px; height: 16px; }.move-option .key { font-size: 7px; width: 5px; }.zone-preview { margin-top: 12px; padding-top: 12px; }.preview-placeholder { padding: 2px; }.preview-placeholder > span { max-width: none; }.preview-placeholder > .ico { display: none; }.zone-preview .notice { font-size: 10px; }.panel-bottom { margin-top: 6px; }.options:not(.move-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); }.options .opt.go { grid-column: 1 / -1; }.opt .x { display: none; }
  .seat.me { min-height: 0; padding: 0 12px 15px; }.hand-header { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px; padding: 8px 0; }.hand-header .who { gap: 8px; }.hand-header .chip { margin-left: 0; }.hand-header .nm { font-size: 20px; }.hand-powers { gap: 6px; }.hand-powers > span { display: none; }.power { padding: 5px; }.power .pw { font-size: 9px; }.power .ico { width: 12px; height: 12px; }.power .kchip { width: 13px; height: 13px; }.me-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.p-cards { order: -1; grid-column: 1 / -1; height: 171px; }.p-draw, .p-disc { display: none; }.frame { min-height: 85px; }.frame-empty { padding-top: 10px; }.frame-empty .ico { display: none; }.frame .cards { max-height: 82px; }.played-strip { bottom: -8px; }.hand-cards { gap: 8px; }.hand-cards > .card { width: 105px; }
  .market-box { padding: 15px 15px 0; }.market { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 7px; }.amulet-art { width: 62px; }.amulet-label { font-size: 7px; }.market-footer { padding-bottom: 10px; }.game-footer { padding: 10px 16px; justify-content: center; }.game-footer > span:nth-child(2) { display: none; }
  .intro { width: calc(100% - 28px); padding-top: 16px; }.intro-hero { min-height: 300px; padding: 25px 22px; background-position: center, 62% center; }.hero-copy h1 { font-size: 48px; line-height: 1; margin: 18px 0; }.hero-copy > p { font-size: 10px; max-width: 260px; }.desktop-break { display: none; }.hero-meta { gap: 10px; font-size: 8px; }.hero-seal { display: none; }.character-heading { display: block; }.character-heading > p { font-size: 10px; margin-top: 10px; }.character-heading h2 { font-size: 30px; }.choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.choice:last-child { grid-column: 1 / -1; display: flex; align-items: center; }.choice:last-child .character-art { width: 45%; height: 110px; flex: none; }.choice:last-child .character-art::after { background: linear-gradient(90deg, transparent, #1a241f); }.choice:last-child .character-copy { padding: 15px; }.character-art { height: 150px; }.character-copy { padding: 0 15px 15px; }.character-copy h3 { font-size: 25px; }.character-copy > span { font-size: 10px; }.character-detail { padding: 17px 0; }.character-description p { display: block; margin: 5px 0 0; font-size: 20px; }.character-powers { grid-template-columns: 1fr; gap: 13px; }.character-powers > div > span:last-child { font-size: 11px; }.character-powers .pw { min-width: 70px; }.start-row { flex-wrap: wrap; padding-top: 10px; gap: 18px; }.start-row > div:first-child { flex: 1 1 100%; }.seg { width: 100%; }.seg button { flex: 1; justify-content: center; padding: 10px 8px; font-size: 11px; }.matchup { flex: 1; }.matchup p { font-size: 10px; }.matchup p > span { font-size: 8px; }.start-row .start-button { flex: 1 1 100%; width: 100%; font-size: 13px; }.intro-footer { justify-content: center; padding: 10px 0; }.intro-footer > span { display: none; }
  .dialog-header { padding: 19px; }.dialog-header h2 { font-size: 27px; }.dialog-body { padding: 20px; }.rules-steps, .rules-cards { grid-template-columns: 1fr; }.dialog-actions { flex-wrap: wrap; }.dialog-actions .btn { flex: 1; }
}
@media (max-width: 760px) {
  .setup-mode { align-items: stretch; flex-direction: column; }
  .panel { padding-bottom: 15px; }
  .opp { gap: 5px; padding: 8px; }
  .opp .who { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 3px 6px; flex: 1 1 130px; min-width: 0; max-width: none; }
  .opp .portrait-button { grid-row: span 2; padding: 1px; }
  .opp .portrait-button img, .opp .neutral-pawn { width: 28px; height: 28px; }
  .opp .nm { font-size: 16px; gap: 3px; flex-wrap: wrap; }
  .opp .player-progress { grid-column: 2; margin: 0; padding: 0; }
  .opp .slots { gap: 2px; }.opp .slots svg { width: 10px; height: 10px; }
  .pile.small .lbl { font-size: 7px; }.pile.small .lbl .ico { display: none; }
  .opponent-storage { gap: 1px; margin-left: 0; }.opponent-storage > button { padding: 3px; }
  .me-main { grid-template-columns: 1fr 1fr; grid-template-areas: "hand hand" "draw discard" "evan reserve"; }
  .p-cards { grid-area: hand; }.p-draw { grid-area: draw; }.p-disc { grid-area: discard; }.p-evan { grid-area: evan; }.p-res { grid-area: reserve; }
  .p-draw, .p-disc { display: flex; justify-content: center; }
  .hand-header .player-progress { display: block; }
  .character-powers { gap: 16px; }.character-powers .pw { min-width: 0; }
}
/* Les emplacements restent compacts à vide et grandissent avec leurs cartes. */
.table {
  --card-height: clamp(110px, 13.5vh, 152px);
  --card-width: calc(var(--card-height) * .7);
  grid-template-columns: clamp(260px, 19vw, 300px) minmax(0, 1fr) clamp(280px, 20vw, 320px);
  grid-template-rows: auto minmax(400px, 1fr) auto;
  grid-template-areas: "opponent opponent recent" "market wheel panel" "me me me";
  gap: 12px 20px;
  height: auto;
  min-height: calc(100svh - 56px);
  padding: 12px 24px;
}
.table > .opp { grid-area: opponent; min-height: 0; align-self: start; }
/* Sur grand écran, le tour d'action et les actions récentes se placent chacun dans la grille. */
.action-sidebar { grid-area: sidebar; display: contents; flex-direction: column; gap: 16px; align-self: start; min-width: 0; }
.action-sidebar > aside { width: 100%; }
.table > .action-sidebar > .panel { align-self: end; }
.table > .action-sidebar > .recent-actions { align-self: stretch; }
.arena { min-height: 0; }
.panel, .market-box { align-self: start; }
.market-box { padding: 12px; max-height: none; overflow: visible; border-color: #b4b98e66; }
.market-box .section-heading { padding-bottom: 8px; }.market-box h2 { font-size: 25px; }
.market { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.market .amulet { padding: 3px 0; gap: 0; grid-template-columns: minmax(0, 1fr); }
.market .amulet-art { width: 100%; max-width: 78px; }
.market .cost { right: 0; top: 0; }
.market-scroll { flex: none; max-height: none; overflow: visible; padding-block: 8px; }
.market-footer { padding-block: 6px; font-size: 9px; }
.panel { padding: 16px; max-height: none; border-color: #b4b98e66; overflow: visible; }
.panel.awaiting-action { border: 2px solid var(--accent); background: linear-gradient(155deg, #38432a, #1b2b20); box-shadow: 0 0 0 4px #d4b77912, 0 8px 24px #0003; }
.turn-status { font-size: 20px; font-weight: 800; margin-bottom: 16px; gap: 10px; }
.round-label { font-size: 11px; white-space: nowrap; }
.decision-body h2 { font-size: 30px; max-width: none; }
.panel-description { font-size: 13px; line-height: 1.65; margin-top: 10px; color: #e1e4d5; }
.decision-body { overflow: visible; }
.decision-options .options { margin-top: 14px; }
.decision-options .opt { min-height: 48px; padding: 11px; border-width: 2px; }
.decision-options .opt .t { font-size: 14px; }
.decision-body { flex: 0 1 auto; }.zone-preview { max-height: 150px; }
.recent-actions { grid-area: recent; align-self: start; min-height: 112px; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid #9bc6c366; border-radius: 5px; background: #17251ff0; min-width: 0; }
.recent-actions h2 { font: 600 11px var(--font-body); color: var(--pawn-bot); display: flex; justify-content: space-between; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.recent-actions h2 span { font-size: 8px; font-weight: 400; color: var(--muted); }
.recent-log { padding-top: 10px; font-size: 12px; line-height: 1.65; color: #d6ded0; }
.recent-log ol { list-style: none; padding: 0; margin: 0; }.recent-log li + li { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.recent-log strong { color: var(--ink); font-weight: 700; }
.recent-round { display: block; color: var(--pawn-bot); font-size: 10px; margin-bottom: 2px; }
.recent-actions > .text-button { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--pawn-bot); }
.opp { display: grid; grid-template-columns: 190px 168px minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 154px; max-height: none; align-items: start; }
.opponent-overview { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; }
.opp .who { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 7px; max-width: none; }
.opp .portrait-button { grid-row: 1 / span 2; }.opp .portrait-button img, .opp .neutral-pawn { width: 32px; height: 32px; }
.opp .nm { font-size: 19px; }.opp .player-progress { grid-column: 2; margin: 0; padding: 0; }
.opp .who > .chip { display: none; }
.opponent-hand { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid #9bc6c355; }
.opponent-hand .backs { padding-left: 16px; }.opponent-hand .backs .back { width: 38px; height: 54px; margin-left: -16px; }
.opponent-hand > span:last-child { font-size: 20px; color: var(--pawn-bot); }.opponent-hand .ico { width: 20px; height: 20px; }
.opponent-hand strong { font-variant-numeric: tabular-nums; }
.opp .slots svg { width: 36px; height: 36px; }.opp .slots { gap: 2px; }
.opp .who { grid-template-columns: 38px minmax(0, 1fr); }.opp .player-progress { grid-column: 1 / -1; margin: 4px 0; }
.opponent-piles { display: flex; align-items: center; gap: 12px; }.opponent-piles .pile { padding: 4px 0; gap: 6px; }
.opponent-piles .stack { width: 64px; height: 91px; }
.opponent-collections { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; min-width: 0; }
.opponent-collections .frame { padding: 8px; min-width: 0; }.opponent-collections .frame .cards { max-height: none; overflow: visible; }
.opponent-collections .card.mid { width: 60px; height: 86px; }
.opponent-played .card.mid { width: 72px; height: 103px; }.opponent-played .card.mid.karma .foot { display: grid; }
.opponent-played .card.mid .foot b { font-size: 12px; }.opponent-played .card.mid .card-effect, .opponent-played .card.mid .syms { display: none; }
.sector-stock { opacity: .9; pointer-events: none; }
.sector-stock rect { fill: #15231e; stroke: #e4dbc09c; stroke-width: 1.5; }
.sector-stock text { fill: #f2e9d1; font: 700 15px var(--font-body); text-anchor: middle; }
.arena { border: 1px solid #b4b98e66; border-radius: 8px; background: radial-gradient(ellipse, #4d654122, #14221b99); padding: 10px; }
.board-heading { display: flex; align-items: center; justify-content: center; gap: 8px; color: #c4ceba; font-size: 12px; font-weight: 700; }
.board-heading .ico { width: 16px; height: 16px; }
.choose-board .arena, .choose-amulet .market-box, .choose-hand .p-cards, .choose-hand .p-play > .frame { border: 2px solid var(--accent); box-shadow: 0 0 0 3px #d4b77916; }
.choose-board .board-heading { color: var(--accent); }
.sector-g.legal .sector { stroke: #efcf8d; stroke-width: 2.5; fill-opacity: 1; }
.sector-g.legal:hover .sector, .sector-g.legal:focus-visible .sector { stroke-width: 4; filter: brightness(1.25); }
.card.selectable { box-shadow: 0 0 0 2px #efd49b, 0 0 18px #d4b77944; }
.sector-stock svg { fill: none; stroke: var(--zk); stroke-width: 1.6; }
.zt.supply { font-size: 12px; font-weight: 400; }
.karma-slot { fill: #111c17; stroke: #bfa56b66; stroke-width: 1; stroke-dasharray: 3 3; }
.karma-stack { fill: #27362b; stroke: #d4b77999; stroke-width: 1; }
.karma-supply text { fill: #c9d0bc; font: 12px var(--font-body); text-anchor: middle; }
.seat.me { padding: 8px 12px; min-height: 0; }
.hand-header { height: 32px; min-height: 32px; padding: 0; margin-bottom: 6px; gap: 10px; }
.hand-header .portrait-button img, .hand-header .neutral-pawn { width: 25px; height: 25px; }
.hand-header .nm { font-size: 19px; }
.hand-header .who { gap: 8px; }
.hand-header .chip { display: inline-flex; padding: 1px 6px; }
.me-main {
  grid-template-columns: clamp(210px, 22vw, 360px) minmax(0, 1fr) calc(var(--card-width) + 24px) calc(var(--card-width) + 24px);
  grid-template-rows: auto calc(var(--card-height) + 68px) auto;
  grid-template-areas: "storage storage storage storage" "played hand draw discard" "achievements achievements achievements achievements";
  gap: 8px 12px;
  align-items: stretch;
}
.player-storage { grid-area: storage; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; }
.player-storage > .frame, .opponent-collections > .frame:not(.opponent-played) { grid-area: auto; width: max-content; min-width: calc(var(--card-width) + 18px); max-width: 100%; }
.player-storage > .p-evan { justify-self: end; }.player-storage > .p-res { justify-self: start; }
.player-storage .p-evan .cards { justify-content: flex-end; }
.frame { height: auto; min-height: 54px; border: 1px solid #b4b98e55; padding: 6px 8px; background: #111c1766; }
.p-evan { border-top: 2px solid #c7b97888; }.p-res { border-top: 2px solid #8faeaa88; }
.frame .cards { height: auto; max-height: 138px; margin-top: 5px; padding-bottom: 2px; flex-wrap: wrap; align-content: start; overflow: auto; }
.player-storage .cards { max-height: none; overflow: visible; gap: 8px; }
.player-storage .card, .tucked-card .card { width: var(--card-width); height: var(--card-height); }
.player-storage .card-emblem, .tucked-card .card-emblem { width: 35px; height: 35px; }.player-storage .card-emblem .gl, .tucked-card .card-emblem .gl { width: 22px; height: 22px; }
.player-storage .card .foot b { font-size: 16px; }
.tucked-card { display: block; flex: none; width: var(--card-width); height: calc(var(--card-height) / 3); overflow: hidden; border-radius: 6px 6px 0 0; border-bottom: 2px solid #b4b98e88; box-shadow: 0 3px 6px #0005; }
.tucked-card .card { box-shadow: none; padding: 5px 6px; }.tucked-card .card-art { flex: none; height: calc(var(--card-height) / 3 - 22px); margin-top: 1px; }.tucked-card .card-emblem { border: 0; outline: 0; background: none; width: auto; height: auto; }
.tucked-card .card-emblem .gl { width: min(22px, calc(var(--card-height) / 3 - 22px)); height: min(22px, calc(var(--card-height) / 3 - 22px)); }.tucked-card .card .evan { top: 24px; right: 7px; }
.frame-empty { height: 25px; padding-top: 5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.frame-empty .ico { display: block; width: 15px; height: 15px; }
.frame-empty > span { font-size: 9px; }
.p-play { grid-area: played; min-height: 0; position: relative; }
.p-play .frame { border: 2px solid #b4b98e88; height: 100%; padding: 10px; background: linear-gradient(135deg, #42523855, #19281f); }
.p-play .flbl, .hand-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.flbl { font-size: 11px; }.flbl > span { font-size: 13px; font-weight: 800; color: var(--ink); }
.p-play .cards { height: calc(var(--card-height) + 8px); max-height: none; margin-top: 4px; padding-bottom: 0; flex-wrap: nowrap; align-items: flex-start; gap: 8px; overflow-y: hidden; }
.next-hand { position: absolute; bottom: 5px; left: 5px; right: 5px; display: flex; align-items: center; gap: 3px; padding: 4px; background: #15201bf2; font-size: 8px; }
.next-hand .ico, .next-hand .dot { width: 13px; height: 13px; }
.p-cards { grid-area: hand; order: 0; height: auto; min-height: 0; flex-direction: column; border: 1px solid #c9b47b55; border-radius: 4px; background: #25362a66; padding: 4px 6px; }
.hand-title { display: flex; align-self: flex-start; gap: 6px; font: 700 13px var(--font-body); color: var(--ink); margin: 0; }
.hand-title .ico { width: 12px; height: 12px; }
.hand-title > span { color: var(--accent); font-size: 14px; }
.hand-cards { flex: 1; min-height: 0; margin: auto; gap: 8px; padding: 8px 4px 4px; height: auto; }
.hand-cards > .card, .p-play .card { height: var(--card-height); max-height: none; width: var(--card-width); min-height: 0; }
.hand-cards .card-emblem, .p-play .card-emblem { width: 35px; height: 35px; }
.hand-cards .card-emblem .gl, .p-play .card-emblem .gl { width: 22px; height: 22px; }
.hand-cards .card .foot b, .p-play .card .foot b { font-size: 16px; }
.hand-cards .card .card-effect, .p-play .card .card-effect { margin-top: 0; min-height: 15px; }
.card:not(.karma) .foot { background: #12201755; color: #fff6e3; border-radius: 3px; padding: 3px 1px; }
.card:not(.karma) .card-effect { color: inherit; }
.p-draw, .p-disc { display: flex; align-items: center; justify-content: center; border: 1px solid #b4b98e55; border-radius: 4px; background: #111c1744; }
.p-draw { grid-area: draw; }.p-disc { grid-area: discard; }
.p-draw .pile, .p-disc .pile { width: 100%; min-width: 0; padding: 6px 0 4px; gap: 6px; }
.p-draw .stack, .p-disc .stack { width: calc(var(--card-width) * 1.02); height: calc(var(--card-height) * 1.02); }
.hand-achievements { grid-area: achievements; position: relative; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; align-items: center; min-width: 0; padding-top: 8px; }
.personal-amulets { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--accent); font-size: 12px; white-space: nowrap; }
.personal-amulets .slots svg { width: 44px; height: 44px; }
.hand-powers { position: static; margin: 0; gap: 4px; }
.hand-powers .power { padding: 3px 5px; min-height: 26px; }
.hand-powers .ico { width: 13px; height: 13px; }
.hand-powers .pw { font-size: 9px; }
.own-deck { position: static; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #d4b77988; border-radius: 4px; background: #d4b77912; color: var(--ink); font-size: 13px; white-space: nowrap; }
.own-deck > span { font-size: 22px; font-weight: 800; color: var(--accent); }
.pile .cnt, .pile.small .cnt { min-width: 36px; height: 36px; inset: auto -5px -5px auto; padding: 0 7px; border: 2px solid #e5ca93; background: #eee0bc; color: #1c2b20; border-radius: 9px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px #0008; }
.pile .lbl { font-size: 12px; font-weight: 700; color: var(--ink); }
.pile:hover, .pile:focus-visible { border-color: var(--accent); background: #d4b77918; }
.card-transfer { position: fixed; width: 56px; z-index: 21; pointer-events: none; display: grid; justify-items: center; gap: 5px; filter: drop-shadow(0 6px 10px #0008); }
.card-transfer > .card, .card-transfer > .back { width: 56px; height: 80px; padding: 4px; }.card-transfer .foot, .card-transfer .syms, .card-transfer .evan { display: none; }.card-transfer .card-emblem { border: 0; outline: 0; width: 35px; height: 35px; }.card-transfer .card-emblem .gl { width: 24px; height: 24px; }
.transfer-label { white-space: nowrap; padding: 4px 9px; color: #17271d; background: #efcf8d; border-radius: 4px; font-size: 12px; font-weight: 800; }
.own-deck .ico { width: 14px; height: 14px; }
.table-turn { display: flex; align-items: center; gap: 12px; padding: 5px 18px; border: 1px solid #e6c38270; border-radius: 5px; background: #e6c38212; color: var(--pawn-me); }
.table-turn > .ico { width: 25px; height: 25px; }
.table-turn > div { display: grid; gap: 1px; }.table-turn strong { font-size: 13px; }
.table-turn span { font-size: 9px; color: var(--muted); }
.table-turn.bot { color: var(--pawn-bot); border-color: #9bc6c370; background: #9bc6c312; }
.opponent-turn { flex: none; min-height: 0; border-top: 1px solid #9bc6c344; padding-top: 10px; margin-top: 8px; }
.opponent-turn h3 { font: 600 10px var(--font-body); color: var(--pawn-bot); margin-bottom: 7px; }
.opponent-turn-log { max-height: 115px; overflow: auto; font-size: 10px; color: var(--muted); line-height: 1.8; }
.opponent-turn ol { padding-left: 17px; margin: 0; }.opponent-turn li + li { margin-top: 5px; }
.decision-cue { min-height: 45px; }
.decision-options { flex: none; }.decision-options .options { margin-top: 0; }
.pawn-caption rect { fill: #182019; stroke: var(--pawn-me); stroke-width: 1; }
.pawn-caption text { fill: var(--pawn-me); font: 700 11px var(--font-body); text-anchor: middle; }
.pawn.bot .pawn-caption rect { stroke: var(--pawn-bot); }.pawn.bot .pawn-caption text { fill: var(--pawn-bot); }
.pawn-ring.bot { stroke-dasharray: 5 3; stroke-width: 3; }
.pawn.current .pawn-halo { stroke-width: 3; stroke: var(--pawn-me); }
.pawn.bot.current .pawn-halo { stroke: var(--pawn-bot); }
.playback-event { position: fixed; width: 116px; z-index: 20; pointer-events: none; transform-origin: 50% 83px; display: grid; justify-items: center; gap: 10px; filter: drop-shadow(0 8px 18px #0009); }
.playback-event > .card, .playback-event > .back { width: 116px; height: 167px; }
.playback-caption { width: 220px; padding: 9px 12px; display: grid; gap: 3px; text-align: center; background: #122019f5; border: 1px solid var(--pawn-bot); border-radius: 5px; }
.playback-caption strong { font-size: 13px; color: var(--ink); }.playback-caption span { font-size: 10px; color: var(--pawn-bot); }
.playback-symbol { width: 116px; height: 167px; background: #19291ff2; border: 1px solid var(--pawn-bot); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--accent); }
.playback-symbol > svg { width: 100px; height: 100px; }.playback-symbol > .ico { width: 25px; height: 25px; }
.pawn-travel { position: fixed; z-index: 19; pointer-events: none; overflow: visible; }

@media (min-width: 1101px) and (max-height: 820px) {
  .table { height: auto; min-height: calc(100svh - 56px); grid-template-rows: auto minmax(400px, 1fr) auto; }
  .opp { padding: 6px 10px; min-height: 112px; }
  .opponent-played .card.mid { width: 72px; height: 103px; }
  .opponent-piles .stack { width: 52px; height: 74px; }
  .opponent-piles .pile { gap: 4px; padding-block: 2px; }
  .recent-actions { min-height: 100px; }
  .turn-status { margin-bottom: 8px; }
  .steps { margin-bottom: 8px; padding-bottom: 8px; }
  .opponent-turn-log { max-height: 50px; }
  .decision-body { min-height: 32px; }
  .decision-cue { display: none; }
  .zone-preview { max-height: 75px; }
}
@media (max-width: 1100px) {
  .table { height: auto; min-height: 0; grid-template-columns: 240px minmax(0, 1fr) 260px; grid-template-rows: auto minmax(400px, auto) auto; gap: 12px; padding: 12px; }
  .board-space { height: auto; }.wheel { width: auto; max-height: 100%; }
  .panel { min-height: 0; }.seat.me { min-height: 0; }
  .opp { grid-template-columns: 190px minmax(0, 1fr); gap: 8px; }
  .opponent-piles { gap: 10px; }.opponent-piles .stack { width: 52px; height: 74px; }
  .opponent-collections { grid-column: 1 / -1; }
  .hand-achievements { min-height: 34px; }
  .decision-body { overflow: visible; }
}
@media (max-width: 900px) {
  .table { grid-template-columns: 1fr 1fr; grid-template-rows: auto 400px auto auto; grid-template-areas: "opponent opponent" "wheel wheel" "market sidebar" "me me"; }
  .action-sidebar { display: flex; }
  .table > .action-sidebar > .panel, .table > .action-sidebar > .recent-actions { align-self: auto; }
  .recent-actions { min-height: 0; }
  .panel, .market-box { max-height: none; }.seat.me { min-height: 0; }
  .me-main { grid-template-columns: clamp(180px, 26vw, 260px) minmax(0, 1fr) calc(var(--card-width) + 18px) calc(var(--card-width) + 18px); grid-template-rows: auto calc(var(--card-height) + 68px) auto; gap: 8px; }
  .hand-achievements { grid-column: 1 / -1; min-height: 34px; gap: 8px 12px; flex-wrap: wrap; }
  .personal-amulets { flex-basis: 100%; order: -1; }
  .hand-powers, .own-deck { position: static; margin: 0; }
}
@media (max-width: 560px) {
  .table { grid-template-rows: auto auto auto auto auto; grid-template-areas: "opponent opponent" "wheel wheel" "sidebar sidebar" "market market" "me me"; --card-height: 126px; }
  .board-space { aspect-ratio: 1; }.wheel { width: 100%; height: auto; }
  .panel, .market-box { padding: 12px; }.decision-body h2 { font-size: 23px; }
  .market { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .seat.me { min-height: 0; padding: 8px; }
  .me-main { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, calc(var(--card-height) + 68px)) auto; grid-template-areas: "storage storage" "played played" "hand hand" "draw discard" "achievements achievements"; }
  .player-storage { gap: 8px; }.hand-cards { width: max-content; }.hand-title { display: flex; }
  .hand-achievements { flex-wrap: wrap; gap: 8px; padding: 5px 0; }
  .hand-powers { margin-left: 0; }.hand-powers .powers { flex-wrap: wrap; justify-content: center; }
  .personal-amulets { flex-direction: row; }
  .opp { grid-template-columns: 110px minmax(0, 1fr); max-height: none; padding: 8px; }
  .opponent-overview { grid-column: 1; }.opponent-piles { grid-column: 2; justify-content: flex-end; gap: 16px; }
  .opponent-piles .stack { width: 54px; height: 78px; }
  .opponent-overview .opponent-hand { display: none; }
  .opponent-collections { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }.opponent-played { grid-column: 1 / -1; }
  .opponent-overview .opponent-hand { display: flex; }.opponent-hand .backs .back { width: 28px; height: 40px; }
  .opp .slots svg { width: 26px; height: 26px; }
  .opp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .personal-amulets { flex-wrap: wrap; }
  .playing .topbar { height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; padding-block: 8px; }
  .table-turn { order: 3; flex: 1 1 100%; justify-content: center; padding: 4px 8px; }
  .table-turn > div { display: flex; gap: 12px; align-items: center; }.table-turn > .ico { width: 18px; height: 18px; }
  .table-turn strong { font-size: 11px; }.table-turn span { font-size: 9px; }
  .opponent-turn-log { max-height: 135px; }
  .opponent-storage { gap: 0; }.opponent-storage > button { padding-inline: 3px; }
  .opponent-storage .storage-symbols { max-width: 30px; }
}
/* Suggestion de l'IA : un repère turquoise, distinct de l'éclairage doré des choix possibles. */
:root { --advice: #8fd8cc; }
.suggestion-toggle.on { color: var(--advice); border-color: #8fd8cc88; background: #8fd8cc14; }
.advice { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 10px 11px; border: 1px solid #8fd8cc66; border-radius: 4px; background: #8fd8cc10; font-size: 13px; line-height: 1.45; }
.advice > .ico { color: var(--advice); width: 18px; height: 18px; margin-top: 1px; }
.advice-label { display: block; color: var(--advice); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2px; }
.advice > div { min-width: 0; flex: 1; }
.advice-odds { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.advice-odds strong { color: var(--advice); font-weight: 700; }
.advice-alt { list-style: none; margin: 7px 0 0; padding: 6px 0 0; border-top: 1px solid #8fd8cc33; display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.advice-alt li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.advice-alt li > span:last-child { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.advice.pending { color: var(--muted); }
.advice.pending > .ico { animation: breathe 1.6s ease-in-out infinite; }
@keyframes advice-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--advice), 0 0 14px #8fd8cc55; } 50% { box-shadow: 0 0 0 3px var(--advice), 0 0 26px #8fd8cc99; } }
.card.suggested, .amulet.suggested, .power.suggested, .opt.suggested { border-color: var(--advice); animation: advice-pulse 1.8s ease-in-out infinite; }
.sector-g.suggested .sector { stroke: var(--advice); stroke-width: 5; }

/* Page de conseils : une lecture calme, dans la palette de la table. */
.tips-page .topbar { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.tips-back { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--accent); font-size: 12px; font-weight: 700; }
.tips-back:hover { background: var(--raised); border-color: #d5bc8255; }
.tips { width: min(1080px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 64px; }
.tips-hero { position: relative; padding: 36px 40px; border: 1px solid #c3a77536; border-radius: 5px; background: linear-gradient(90deg, #14201afa 0%, #14201ae0 48%, #14201a55 100%), url(assets/sanctuary.png) center 56% / cover; }
.tips-hero h1 { font-size: clamp(40px, 5vw, 64px); margin: 12px 0 16px; line-height: 1; letter-spacing: -.02em; }
.tips-hero h1 em { color: var(--accent); font-weight: 400; }
.tips-hero p { max-width: 660px; color: #c9cfbf; font-size: 14px; line-height: 1.8; }
.tips-essentials { margin-top: 22px; padding: 20px 24px; border: 1px solid #8fd8cc55; border-radius: 5px; background: #8fd8cc0d; }
.tips-essentials h2 { margin-bottom: 10px; font-size: 26px; color: var(--advice); }
.tips-essentials ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; color: #d9e3dc; font-size: 14px; line-height: 1.6; }
.tips-essentials strong { color: var(--ink); font-weight: 700; }
.tips-toc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 6px; }
.tips-toc a { display: flex; gap: 10px; align-items: baseline; padding: 10px 13px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 13px; }
.tips-toc a:hover { color: var(--ink); border-color: #d5bc8255; background: var(--raised); }
.tips-toc span { color: var(--accent); font-size: 10px; letter-spacing: .12em; }
.tips-section { padding: 40px 0 8px; scroll-margin-top: 90px; }
.tips-section + .tips-section { border-top: 1px solid var(--line); margin-top: 26px; }
.tips-section > header { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; }
.tips-section > header > span { color: var(--accent); font-size: 11px; letter-spacing: .14em; }
.tips-section h2 { font-size: clamp(30px, 3vw, 40px); }
.tips-lead { max-width: 780px; margin-bottom: 20px; color: #dfe2d3; font-size: 15px; line-height: 1.75; }
.tips-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.tips-card { padding: 17px 19px; border: 1px solid #b5c4a52b; border-radius: 5px; background: #1b2520cc; }
.tips-card h3 { margin-bottom: 7px; font-size: 22px; }
.tips-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.tips-card p + p { margin-top: 8px; }
.tips-card strong, .tips-lead strong { color: var(--ink); font-weight: 600; }
.tips-stat { display: flex; gap: 18px; align-items: center; margin: 20px 0; padding: 14px 18px; border-left: 2px solid var(--advice); background: #8fd8cc0d; color: #d9e3dc; font-size: 13px; line-height: 1.7; }
.tips-stat > strong { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1; color: var(--advice); white-space: nowrap; }
.card-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: -5px; white-space: nowrap; font-weight: 600; color: var(--ink); }
.card-chip .dot { width: 21px; height: 21px; }
.card-chip .dot svg { width: 12px; height: 12px; fill: currentColor; }
.tips-characters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tips-character { overflow: hidden; border: 1px solid #b5c4a52b; border-radius: 5px; background: #1a241f; }
.tips-character img { width: 100%; height: 130px; object-fit: cover; object-position: center 24%; filter: saturate(.8); }
.tips-character > div { padding: 12px 14px 15px; }
.tips-character h3 { font-size: 24px; }
.tips-character .rank { display: block; margin-bottom: 3px; color: var(--accent); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.tips-character p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.tips-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; line-height: 1.8; }
.tips-sources h2 { margin-bottom: 8px; font-size: 24px; color: var(--muted); }
.tips-sources a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .tips-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tips-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tips { width: calc(100% - 32px); padding-top: 18px; }
  .tips-hero { padding: 24px 20px; }
  .tips-essentials { padding: 16px; }
  .tips-toc, .tips-grid { grid-template-columns: 1fr; }
  .tips-stat { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 480px) { .tips-characters { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }