@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');
@import url('./components/card.css');

:root {
  --ink:#eaf3ff;
  --muted:#8c9eb5;
  --line:rgba(173,206,255,.15);
  --panel:rgba(11,23,42,.82);
  --cyan:#65d7ff;
  --gold:#f5ce7b;
  --bg:#050b16;
  --font-display:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Palatino,serif;
  --font-ui:'Source Sans 3','Avenir Next',Avenir,ui-sans-serif,system-ui,sans-serif;
  --font-label:'Barlow Condensed','Arial Narrow',ui-sans-serif,sans-serif;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
}
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 80% 0%,#122a55 0,transparent 30%),radial-gradient(circle at 15% 100%,#17213b 0,transparent 35%),var(--bg); } button { font:inherit; color:inherit; cursor:pointer; } button:disabled { cursor:not-allowed; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.card { isolation:isolate; }.card:after { content:''; position:absolute; z-index:0; inset:0; opacity:.18; pointer-events:none; background-image:linear-gradient(rgba(5,12,24,.16),rgba(5,12,24,.58)),var(--source-art); background-size:cover; background-position:center; mix-blend-mode:screen; }.card > * { position:relative; z-index:1; }
.landing { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden; padding:32px; } .stars { position:absolute; inset:0; opacity:.6; background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#83c4ff 1px,transparent 1.5px); background-size:90px 90px,137px 137px; background-position:0 0,30px 66px; mask-image:linear-gradient(to bottom,black,transparent); }
.hero { z-index:1; width:min(720px,100%); text-align:center; } .eyebrow { margin:0 0 10px; color:#89a9c8; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.18em; } h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; font:600 clamp(50px,11vw,108px)/.9 'Playfair Display',serif; letter-spacing:.04em; } h1 span,.brand span { color:var(--cyan); }.subtitle { margin:0 auto 16px; color:#f0cf89; font:600 18px/1.3 'Playfair Display',serif; letter-spacing:.02em; } .lede { max-width:510px; margin:0 auto 30px; color:#b6c6da; font-size:17px; line-height:1.7; } .hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .primary,.secondary { border-radius:10px; border:1px solid var(--line); padding:13px 18px; transition:.2s transform,.2s background; } .primary { background:linear-gradient(135deg,#4dd2ff,#687bff); color:#031221; border:0; font-weight:800; } .primary:hover:not(:disabled) { transform:translateY(-2px); } .primary:disabled { background:#23364b; color:#7f94aa; } .secondary { background:rgba(255,255,255,.04); color:#d9e8fa; } .secondary:hover:not(:disabled) { background:rgba(255,255,255,.1); } .landing-notes { display:flex; justify-content:center; gap:22px; margin-top:36px; color:#6f859e; font-size:12px; } .landing-notes span+span:before { content:'·'; margin-right:22px; color:#4c6889; }
.protocol-card { z-index:1; position:absolute; bottom:28px; right:28px; width:250px; padding:19px; border:1px solid var(--line); border-radius:14px; background:rgba(8,18,35,.72); color:#9eb2c9; font-size:12px; line-height:1.6; } .protocol-card strong { display:block; color:#edf7ff; font-size:16px; }.rule-line { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }.rule-line i { display:inline-block; width:8px; height:8px; margin-right:6px; background:var(--gold); border-radius:50%; box-shadow:0 0 13px var(--gold); }
.game-shell { min-height:100vh; padding-bottom:26px; } .topbar { height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,4vw,54px); border-bottom:1px solid var(--line); background:rgba(5,11,22,.68); backdrop-filter:blur(14px); }.brand { border:0; background:transparent; font:600 23px 'Playfair Display',serif; letter-spacing:.12em; }.phase-pill { font:500 10px 'DM Mono',monospace; color:#b3c5d9; letter-spacing:.12em; }.phase-pill span { display:inline-block; width:7px; height:7px; background:#61e6bd; border-radius:50%; box-shadow:0 0 12px #61e6bd; margin-right:8px; }.header-actions { display:flex; gap:7px; }.icon-button { width:31px; height:31px; border-radius:7px; border:1px solid var(--line); background:transparent; color:#b8cbe1; }
.scoreboard { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1080px,94vw); margin:20px auto 6px; }.player-panel { display:flex; align-items:center; gap:10px; color:#95a9c2; }.player-panel.human { justify-self:end; text-align:right; flex-direction:row-reverse; }.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-weight:800; font-size:13px; border:1px solid #5e82a5; }.avatar.nova { background:linear-gradient(135deg,#5645ae,#1a2652); }.avatar.you { background:linear-gradient(135deg,#1c6b87,#1a383f); }.player-panel p { margin:0; font-size:10px; letter-spacing:.13em; }.player-panel strong { display:block; color:#f4f8ff; font-size:23px; line-height:1.1; }.player-panel strong small { font-size:10px; color:#849bb4; }.player-panel span { font-size:10px; }.center-status { min-width:120px; text-align:center; }.trump { display:flex; align-items:center; gap:5px; justify-content:center; }.trump small { font:10px 'DM Mono'; color:#7088a2; }.trump b { font-size:17px; }.trump span { font-size:11px; font-weight:700; }.round-marker { margin-top:6px; font:9px 'DM Mono'; letter-spacing:.12em; color:#7492b2; }.trump.none b { color:#8191a6; }.trump.fire b,.fire .card-glyph { color:#ff835e; }.trump.water b,.water .card-glyph { color:#60d9ff; }.trump.wind b,.wind .card-glyph { color:#a6f3d1; }.trump.earth b,.earth .card-glyph { color:#e8bc79; }.trump.light b,.light .card-glyph { color:#ffe69b; }.darkness .card-glyph { color:#b28aff; }.chaos .card-glyph { color:#dc6dff; }
.character-portrait { --portrait-accent:#65d7ff; position:relative; flex:none; display:grid; place-items:center; width:84px; aspect-ratio:1; overflow:hidden; border:1px solid color-mix(in srgb,var(--portrait-accent) 50%,#8198b3); border-radius:12px; background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--portrait-accent) 24%,transparent),transparent 58%),linear-gradient(145deg,#172238,#080e1a); box-shadow:inset 0 0 24px rgba(255,255,255,.04); }.character-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.character-portrait b { color:#f4f8ff; font:600 26px 'Playfair Display'; text-shadow:0 0 18px var(--portrait-accent); }.character-portrait.fire { --portrait-accent:#ff835e; }.character-portrait.water { --portrait-accent:#60d9ff; }.character-portrait.wind { --portrait-accent:#a6f3d1; }.character-portrait.earth { --portrait-accent:#e8bc79; }.character-portrait.chaos { --portrait-accent:#dc6dff; }.character-portrait--score { width:44px; border-radius:50%; }.character-portrait--score b { font-size:16px; }.character-portrait--compact { width:38px; border-radius:50%; }.character-portrait--toast { width:42px; border-radius:50%; }.player-panel p small { color:#788ea6; font:500 9px Manrope,sans-serif; letter-spacing:0; }.player-panel.fire,.player-panel.water,.player-panel.wind,.player-panel.earth,.player-panel.chaos { color:#aebed0; }
.table { width:min(1080px,94vw); margin:0 auto; padding:10px 20px 0; min-height:302px; border-radius:22px; position:relative; overflow:hidden; border:1px solid var(--line); background:radial-gradient(ellipse at center,rgba(26,59,99,.28),transparent 65%),linear-gradient(150deg,rgba(11,31,58,.86),rgba(4,10,21,.92)); }.table:before { content:''; position:absolute; inset:7px; pointer-events:none; border:1px solid rgba(124,206,255,.08); border-radius:17px; }.opponent-zone { position:relative; z-index:1; display:flex; align-items:center; gap:9px; font-size:11px; }.opponent-zone small { display:block; color:#7690aa; }.hidden-hand { margin-left:auto; display:flex; }.hidden-hand i { width:26px; height:37px; margin-left:-12px; border-radius:4px; background:linear-gradient(135deg,#42618a,#111e35 60%); border:1px solid #5b7ba3; }.table-core { position:relative; z-index:1; display:grid; grid-template-columns:86px 1fr 86px; align-items:center; max-width:750px; min-height:187px; margin:0 auto; }.deck-zone,.discard-zone { display:flex; flex-direction:column; align-items:center; gap:5px; color:#8098ae; font-size:10px; text-align:center; }.deck,.discard { width:52px; height:72px; border-radius:8px; border:1px solid #739ac7; background:repeating-linear-gradient(135deg,#142d51 0 4px,#16365e 4px 8px); box-shadow:5px 5px 0 #0b1729,9px 9px 0 #080f1e; }.deck span { color:#91dbff; font-size:21px; }.discard { display:grid; place-items:center; background:#111d31; color:#7b97b8; font-size:20px; }.battlefield { text-align:center; }.battlefield .eyebrow { font-size:9px; }.played-lines { display:flex; min-height:96px; align-items:center; justify-content:center; gap:15px; }.played-line { display:flex; min-width:116px; flex-wrap:wrap; justify-content:center; align-content:center; gap:4px; }.played-line em { color:#58718c; }.table-card { width:30px; height:45px; padding:3px; position:relative; display:grid; place-items:center; border-radius:5px; border:1px solid currentColor; background:#101c31; color:#d7eaff; font-size:17px; }.table-card b { position:absolute; top:2px; right:3px; color:#ecf7ff; font-size:8px; }.vs { color:#6688ac; font:13px 'Playfair Display'; }.reserve-strip { position:relative; z-index:1; border-top:1px solid var(--line); display:flex; justify-content:center; align-items:center; gap:10px; padding:9px; color:#7e96af; font:9px 'DM Mono'; letter-spacing:.11em; }.reserve-strip div { display:flex; gap:3px; }.reserve-token { display:grid; place-items:center; width:20px; height:20px; border:1px solid currentColor; border-radius:50%; font-size:10px; }.reserve-strip em { font-style:normal; font-size:10px; }.reserve-strip small { color:#b6c8dc; }
.hand-area { width:min(1080px,94vw); margin:18px auto 0; }.hand-heading { display:flex; align-items:end; justify-content:space-between; }.hand-heading h2 { margin:0; font-size:19px; }.selection-summary { color:#819bb5; font-size:12px; }.hand-scroll { display:flex; gap:10px; min-height:235px; overflow-x:auto; padding:18px 4px 10px; scrollbar-color:#3b597d transparent; }.card { flex:0 0 136px; height:202px; position:relative; overflow:hidden; display:flex; flex-direction:column; text-align:left; padding:10px; border-radius:11px; border:1px solid rgba(166,211,255,.26); color:#ddecff; background:radial-gradient(circle at 50% 42%,rgba(100,188,255,.13),transparent 32%),linear-gradient(150deg,#152b4d,#0d172a 70%); box-shadow:0 8px 17px rgba(0,0,0,.2); transition:.18s transform,.18s border,.18s box-shadow; }.card:hover:not(:disabled) { transform:translateY(-8px); border-color:#7fcbff; }.card.selected { transform:translateY(-12px); border-color:#8ce6ff; box-shadow:0 0 0 2px rgba(102,219,255,.2),0 16px 27px rgba(0,0,0,.35); }.card.muted { opacity:.7; }.card-top { display:flex; justify-content:space-between; position:relative; z-index:1; font-size:13px; }.card-top b { font-family:'Playfair Display'; font-size:21px; }.card-orbit { position:absolute; top:34px; left:21px; width:94px; height:94px; border:1px solid currentColor; opacity:.25; border-radius:50%; transform:rotate(35deg) scaleY(.42); }.card-glyph { display:grid; place-items:center; min-height:88px; position:relative; z-index:1; font-size:50px; text-shadow:0 0 22px currentColor; }.card-type { font:8px 'DM Mono'; letter-spacing:.13em; color:#9ab2ca; }.card-name { position:relative; z-index:1; margin-top:4px; font:600 15px 'Playfair Display'; }.card-text { height:31px; margin-top:4px; overflow:hidden; color:#b7cbe0; font-size:8px; line-height:1.35; }.card-cost { color:#88a5c6; font-size:8px; margin-top:auto; }.card.compact { flex-basis:122px; height:180px; pointer-events:none; transform:none; }.card.compact .card-glyph { min-height:69px; }.card.compact .card-text { display:none; }.card.fire { background:radial-gradient(circle at 50% 42%,rgba(255,103,68,.2),transparent 32%),linear-gradient(150deg,#4c1a24,#170f1a 70%); }.card.water { background:radial-gradient(circle at 50% 42%,rgba(62,198,255,.2),transparent 32%),linear-gradient(150deg,#103e5a,#091923 70%); }.card.wind { background:radial-gradient(circle at 50% 42%,rgba(151,255,204,.15),transparent 32%),linear-gradient(150deg,#19483f,#0b1d1d 70%); }.card.earth { background:radial-gradient(circle at 50% 42%,rgba(241,176,87,.18),transparent 32%),linear-gradient(150deg,#523b22,#1d160d 70%); }.card.light { background:radial-gradient(circle at 50% 42%,rgba(255,236,145,.22),transparent 32%),linear-gradient(150deg,#4a4125,#17140b 70%); }.card.darkness { background:radial-gradient(circle at 50% 42%,rgba(165,111,255,.2),transparent 32%),linear-gradient(150deg,#291b4e,#130e27 70%); }.card.chaos { background:radial-gradient(circle at 50% 42%,rgba(219,81,255,.22),transparent 32%),linear-gradient(150deg,#351145,#180c25 70%); }
.control-bar { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:56px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(10,23,42,.7); }.effect-control { color:#8ca4bd; font-size:11px; }.effect-control label { color:#d1e2f5; }.effect-control small { color:#7f98b1; }.effect-control input { accent-color:#70ddff; }.action-controls { display:flex; gap:8px; flex-shrink:0; }.validation { margin:8px 0 0; color:#ffad96; font-size:11px; }.log-panel { position:fixed; left:14px; bottom:14px; z-index:4; width:220px; padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(7,16,30,.84); backdrop-filter:blur(12px); }.log-panel p:not(.eyebrow) { margin:5px 0; color:#91a7c0; font-size:10px; line-height:1.35; }.modal-wrap { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,5,13,.72); backdrop-filter:blur(8px); }.finish-modal,.debug-modal,.library-modal { position:relative; width:min(520px,100%); padding:30px; border:1px solid rgba(152,210,255,.33); border-radius:18px; background:linear-gradient(160deg,#132946,#080f1e); text-align:center; box-shadow:0 28px 90px rgba(0,0,0,.56); }.finish-orb { display:grid; place-items:center; width:90px; height:90px; margin:12px auto 18px; border:1px solid #74d9ff; border-radius:50%; color:#9de9ff; font-size:38px; box-shadow:0 0 42px rgba(85,210,255,.28),inset 0 0 35px rgba(85,210,255,.2); }.finish-modal h2 { margin-bottom:8px; font:600 34px 'Playfair Display'; }.finish-modal p { color:#afc3d9; }.modal-close { position:absolute; right:12px; top:10px; border:0; background:transparent; color:#a8bfd8; font-size:24px; }.debug-modal { max-width:750px; text-align:left; }.debug-modal pre { max-height:60vh; overflow:auto; padding:13px; text-align:left; color:#b9d4ed; border-radius:9px; background:#06101e; font:10px/1.45 'DM Mono'; }.library-modal { width:min(950px,100%); text-align:left; }.library-modal h2 { margin-bottom:8px; font:600 27px 'Playfair Display'; }.library-modal > p:not(.eyebrow) { color:#a7bbd2; line-height:1.5; font-size:13px; }.library-grid { display:flex; overflow:auto; gap:9px; margin:20px 0 12px; padding:3px; }.library-modal > small { color:#7793ad; font-size:11px; }
.character-toast { position:fixed; right:18px; bottom:18px; z-index:6; display:flex; align-items:center; gap:10px; width:min(360px,calc(100vw - 36px)); padding:10px 12px; border:1px solid rgba(152,210,255,.24); border-radius:14px; background:rgba(7,16,30,.9); backdrop-filter:blur(14px); box-shadow:0 18px 55px rgba(0,0,0,.35); }.character-toast p { display:grid; gap:2px; margin:0; min-width:0; }.character-toast b { color:#f4f8ff; font-size:12px; }.character-toast span { color:#a9bfd3; font-size:12px; line-height:1.35; }.character-toast .icon-button { margin-left:auto; width:26px; height:26px; }.finish-modal blockquote { margin:16px 0 20px; padding:12px; border:1px solid var(--line); border-radius:10px; color:#bfd1e3; background:rgba(255,255,255,.035); font-size:12px; line-height:1.45; }
.characters-modal { position:relative; width:min(980px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:30px; border:1px solid rgba(152,210,255,.3); border-radius:20px; background:linear-gradient(155deg,#132846,#070e1c 74%); box-shadow:0 28px 90px rgba(0,0,0,.58); text-align:left; }.characters-modal h2 { margin-bottom:8px; font:600 32px 'Playfair Display'; }.characters-modal > p:not(.eyebrow) { max-width:690px; color:#aebfd2; font-size:13px; line-height:1.55; }.characters-modal code { color:#f3d08b; }.character-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:13px; margin-top:20px; }.character-card { display:grid; grid-template-columns:84px 1fr; align-items:center; gap:13px; width:100%; min-height:134px; padding:13px; border:1px solid rgba(152,210,255,.18); border-radius:14px; color:#dce9f7; background:rgba(255,255,255,.035); text-align:left; }.character-card:is(button) { cursor:pointer; }.character-card:is(button):hover,.character-card.is-selected { border-color:#78ddff; background:rgba(93,205,255,.08); }.character-card h3 { margin:0; font:600 22px 'Playfair Display'; }.character-card strong { display:block; color:#d7c397; font-size:12px; }.character-card span { display:block; margin-top:5px; color:#9dc0d8; font-size:11px; }.character-card small { display:block; margin-top:8px; color:#93a7bb; font-size:11px; line-height:1.35; }.character-card em { display:inline-block; margin-top:8px; color:#91f0cf; font-size:10px; font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.opponent-preview { display:flex; align-items:center; gap:12px; margin:18px 0 0; padding:13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }.opponent-preview .eyebrow { margin:0; }.opponent-preview b { display:block; color:#f4f8ff; }.opponent-preview span { color:#9fb2c5; font-size:12px; }.character-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Interactive reserve effects */
.reserve-effect-wrap { z-index:30; padding:14px; }
.reserve-effect-modal { width:min(1040px,100%); max-height:calc(100vh - 28px); overflow:auto; padding:30px; border:1px solid rgba(152,210,255,.3); border-radius:20px; background:radial-gradient(circle at 50% 0%,rgba(80,169,224,.13),transparent 35%),linear-gradient(155deg,#122743,#070e1c 76%); box-shadow:0 32px 100px rgba(0,0,0,.66); }
.reserve-effect-modal h2 { margin-bottom:7px; font:600 clamp(29px,5vw,42px)/1 'Playfair Display'; }
.reserve-effect-instruction { max-width:680px; margin-bottom:22px; color:#b2c4d7; font-size:13px; line-height:1.55; }
.reserve-effect-zones { display:grid; grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr); align-items:center; gap:16px; }
.reserve-effect-zones > section { min-width:0; padding:16px; border:1px solid rgba(152,210,255,.16); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.reserve-effect-zones header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; text-transform:capitalize; }
.reserve-effect-zones header b { color:#dceafb; font-size:12px; }
.reserve-effect-zones header span { color:#80a3c2; font:9px 'DM Mono',monospace; }
.reserve-effect-cards { display:flex; gap:14px; min-height:226px; padding:5px 3px 10px; overflow-x:auto; scrollbar-color:#3b597d transparent; }
.reserve-effect-card { position:relative; flex:0 0 156px; width:156px; min-height:220px; padding:0; border:1px solid transparent; border-radius:14px; background:transparent; transition:.18s transform,.18s border-color,.18s background; }
.reserve-effect-card:hover { transform:translateY(-3px); border-color:rgba(112,221,255,.5); }
.reserve-effect-card.is-selected { border-color:#73e0ff; background:rgba(91,210,248,.1); box-shadow:0 0 0 2px rgba(91,210,248,.12); }
.reserve-effect-card .game-card { width:100%; pointer-events:none; }
.reserve-effect-check { position:absolute; z-index:6; top:9px; right:9px; display:grid; place-items:center; width:30px; height:30px; border:1px solid #6c91b5; border-radius:50%; color:#bbd7ed; background:#0a1728; font-weight:800; box-shadow:0 5px 16px rgba(0,0,0,.42); }
.reserve-effect-card.is-selected .reserve-effect-check { border-color:#7ce5ff; color:#031522; background:#7ce5ff; }
.reserve-effect-bridge { display:grid; justify-items:center; gap:9px; color:#7acde9; }
.reserve-effect-bridge > b { font:500 18px 'DM Mono',monospace; opacity:.72; }
.reserve-effect-seal { position:relative; display:grid; place-items:center; width:66px; aspect-ratio:1; border:1px solid rgba(225,189,120,.42); transform:rotate(45deg); color:#f0d49d; background:radial-gradient(circle,rgba(208,145,79,.22),rgba(28,21,26,.92) 68%); box-shadow:0 0 0 6px rgba(225,189,120,.035),0 15px 30px rgba(0,0,0,.35); }
.reserve-effect-seal::after { content:""; position:absolute; inset:7px; border:1px solid rgba(225,189,120,.2); }
.reserve-effect-seal i,.reserve-effect-seal small { transform:rotate(-45deg); }
.reserve-effect-seal i { font-style:normal; font-size:22px; text-shadow:0 0 14px rgba(225,189,120,.42); }
.reserve-effect-seal small { position:absolute; top:45px; color:#aa8c67; font:500 6px 'DM Mono',monospace; letter-spacing:.18em; text-transform:uppercase; }
.reserve-effect-empty { align-self:center; margin:auto; color:#708ba4; font-size:12px; }
.reserve-effect-validation { margin:14px 0 0; }
.reserve-effect-modal footer { position:sticky; bottom:-28px; display:flex; justify-content:flex-end; gap:10px; margin:22px -28px -28px; padding:15px 28px 20px; border-top:1px solid var(--line); background:linear-gradient(to top,#07101f 76%,rgba(7,16,31,.92)); }
.trump-choice-grid { display:grid; grid-template-columns:repeat(5,minmax(108px,1fr)); gap:12px; margin:24px 0 4px; }
.trump-choice { position:relative; display:grid; justify-items:center; gap:7px; min-height:158px; padding:20px 10px 16px; overflow:hidden; border:1px solid rgba(225,189,120,.2); border-radius:4px 17px 4px 17px; color:#f3e5d0; background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); transition:.2s transform,.2s border-color,.2s box-shadow; }
.trump-choice::before { content:""; position:absolute; inset:8px; border:1px solid currentColor; opacity:.12; pointer-events:none; }
.trump-choice:hover { transform:translateY(-5px); border-color:currentColor; box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 24px color-mix(in srgb,currentColor 28%,transparent); }
.trump-choice i { display:grid; place-items:center; width:58px; aspect-ratio:1; border:1px solid currentColor; border-radius:50%; font-size:28px; font-style:normal; background:rgba(0,0,0,.2); box-shadow:inset 0 0 22px color-mix(in srgb,currentColor 18%,transparent),0 0 24px color-mix(in srgb,currentColor 18%,transparent); }
.trump-choice span { font-family:var(--font-display); font-size:21px; font-weight:700; }
.trump-choice small { color:#9d8f83; font-family:var(--font-label); font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.trump-choice.fire { color:#ff8b5f; }.trump-choice.water { color:#6ddfff; }.trump-choice.wind { color:#aaf4e9; }.trump-choice.earth { color:#d49358; }.trump-choice.light { color:#f4d98b; }

/* Guided tutorial */
.tutorial-entry { border-color:rgba(245,206,123,.34); color:#f5d99c; background:linear-gradient(135deg,rgba(245,206,123,.09),rgba(117,91,44,.08)); }
.tutorial-wrap { z-index:40; background:radial-gradient(circle at 50% 28%,rgba(30,91,137,.22),transparent 44%),rgba(1,5,13,.86); }
.tutorial-modal { width:min(780px,100%); max-height:calc(100vh - 32px); overflow:auto; border:1px solid rgba(152,210,255,.28); border-radius:22px; background:linear-gradient(152deg,#102643,#070e1c 72%); box-shadow:0 35px 110px rgba(0,0,0,.72); }
.tutorial-modal > header { position:sticky; z-index:5; top:0; padding:20px 28px 0; background:linear-gradient(to bottom,#102643 78%,transparent); }
.tutorial-modal > header > div:first-child { display:flex; justify-content:space-between; padding-right:28px; color:#86a6c4; font:500 9px 'DM Mono',monospace; letter-spacing:.17em; }
.tutorial-modal > header b { color:#d6e7f8; }
.tutorial-progress { height:3px; margin-top:15px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.tutorial-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#5edcff,#9c91ff,#f3cf82); box-shadow:0 0 12px rgba(94,220,255,.58); transition:width .25s ease; }
.tutorial-content { min-height:480px; padding:28px 38px 20px; text-align:left; }
.tutorial-content h2 { margin-bottom:10px; color:#f4f8ff; font:600 clamp(29px,5vw,43px)/1.04 'Playfair Display',serif; text-wrap:balance; }
.tutorial-lede { max-width:640px; color:#aebfd2; font-size:14px; line-height:1.65; }
.tutorial-tip { margin:22px 0 0; padding:13px 15px; border-left:2px solid #f0cb7b; color:#9fb2c6; background:rgba(240,203,123,.055); font-size:12px; line-height:1.55; }
.tutorial-tip b { color:#f0d79d; }
.tutorial-modal > footer { position:sticky; z-index:5; bottom:0; display:flex; justify-content:space-between; gap:12px; padding:17px 28px 21px; border-top:1px solid var(--line); background:rgba(7,14,28,.96); backdrop-filter:blur(16px); }
.tutorial-modal > footer button { min-width:130px; }
.tutorial-score-demo { display:flex; align-items:center; justify-content:center; gap:24px; margin:42px auto; }
.tutorial-score-demo > div { display:grid; place-items:center; width:132px; height:132px; border:1px solid rgba(117,219,255,.34); border-radius:50%; background:radial-gradient(circle,rgba(78,187,255,.18),transparent 68%); box-shadow:inset 0 0 34px rgba(76,177,255,.09); }
.tutorial-score-demo small { color:#7f9ab5; font:9px 'DM Mono'; letter-spacing:.15em; }
.tutorial-score-demo b { font:600 42px 'Playfair Display'; }
.tutorial-score-demo > span { color:#6f879f; font-size:11px; }
.tutorial-deal { display:flex; align-items:center; justify-content:center; gap:17px; min-height:230px; }
.tutorial-mini-hand { display:flex; align-items:center; padding-left:28px; }
.tutorial-mini-hand i { display:grid; place-items:center; width:52px; height:76px; margin-left:-28px; border:1px solid #577da7; border-radius:7px; color:#94cbea; background:repeating-linear-gradient(135deg,#152f52 0 5px,#10243f 5px 10px); box-shadow:0 7px 15px rgba(0,0,0,.28); font:600 15px 'Playfair Display'; }
.tutorial-mini-hand.is-six i { width:35px; height:54px; }
.tutorial-reserve-demo { display:grid; place-items:center; width:90px; height:118px; border:1px dashed #b99350; border-radius:10px; color:#f2ce83; background:rgba(185,147,80,.08); }
.tutorial-reserve-demo small { font:8px 'DM Mono'; letter-spacing:.12em; }.tutorial-reserve-demo b { font:600 34px 'Playfair Display'; }
.tutorial-card-pair { position:relative; display:flex; align-items:center; justify-content:center; min-height:250px; gap:0; }
.tutorial-card { flex:none; width:134px; }.tutorial-card .game-card { width:134px; }.tutorial-card-pair .is-front { transform:rotate(-4deg); }.tutorial-card-pair .is-back { margin-left:-42px; transform:translateY(14px) rotate(5deg); }
.tutorial-arrow { margin:0 26px; color:#72d9ff; font-size:28px; }.tutorial-table-stack { display:flex; align-items:center; gap:6px; }.tutorial-table-stack i,.tutorial-equation i { display:grid; place-items:center; width:44px; height:62px; border:1px solid #688fb8; border-radius:6px; color:white; background:#11253e; font:600 22px 'Playfair Display'; }.tutorial-table-stack b { margin-left:8px; color:#f1d187; }
.tutorial-signal { display:flex; align-items:center; justify-content:space-between; margin:18px 0; padding:11px 14px; border:1px solid rgba(255,117,72,.24); border-radius:9px; background:rgba(109,34,20,.16); }.tutorial-signal span { color:#9eafc1; font:8px 'DM Mono'; letter-spacing:.13em; }.tutorial-signal strong { color:#ff8c68; font-size:13px; }
.tutorial-question { margin:18px 0 10px; color:#d8e4f1; font-weight:700; }
.tutorial-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tutorial-choice-grid > button { display:flex; align-items:center; gap:13px; padding:12px; border:1px solid var(--line); border-radius:13px; color:#dceaf8; background:rgba(255,255,255,.035); text-align:left; }
.tutorial-choice-grid > button:hover { border-color:#6bcff6; background:rgba(87,198,240,.08); }.tutorial-choice-grid .tutorial-card { width:92px; }.tutorial-choice-grid .game-card { width:92px; }.tutorial-choice-grid > button > span { font-weight:700; }
.tutorial-feedback { margin:14px 0 0; padding:10px 12px; border-radius:8px; font-size:12px; }.tutorial-feedback.is-correct { color:#a6f2d2; background:rgba(67,188,139,.12); }.tutorial-feedback.is-wrong { color:#ffb5a6; background:rgba(206,75,56,.12); }
.tutorial-trump-demo { display:flex; align-items:center; justify-content:center; gap:21px; min-height:250px; }.tutorial-trump-orb,.tutorial-result-orb { display:grid; place-items:center; width:104px; height:104px; border:1px solid #e2a863; border-radius:50%; background:radial-gradient(circle,rgba(255,117,63,.2),transparent 68%); }.tutorial-trump-orb small { font:8px 'DM Mono'; color:#9caabd; }.tutorial-trump-orb b { color:#ff815b; font-size:26px; }.tutorial-trump-orb span { font-size:10px; font-weight:700; }.tutorial-energy-token { display:grid; place-items:center; width:105px; height:145px; border:1px solid #a95b43; border-radius:12px; background:linear-gradient(145deg,#3d1718,#150d13); }.tutorial-energy-token b { color:#ff7652; font-size:32px; }.tutorial-energy-token span { font-size:11px; font-weight:700; }.tutorial-energy-token small { color:#958a8b; }.tutorial-result-orb { color:#f8d38f; font:600 21px 'Playfair Display'; }
.tutorial-figure-demo { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:32px; margin-top:18px; }.tutorial-figure-demo .tutorial-card,.tutorial-figure-demo .game-card { width:150px; }.tutorial-figure-demo p { margin:0 0 16px; padding:13px; border:1px solid var(--line); border-radius:10px; color:#aebfd1; font-size:12px; line-height:1.55; }.tutorial-figure-demo p b { color:#eaf4ff; }
.tutorial-equation { display:flex; align-items:center; justify-content:center; gap:12px; margin:42px 0 30px; }.tutorial-equation span { color:#7990a9; }.tutorial-equation b { color:#f2d28d; font:600 24px 'Playfair Display'; }.tutorial-order { display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; padding-left:22px; color:#a9bbce; font-size:12px; line-height:1.5; }.tutorial-order li::marker { color:#6ed9ff; }
.tutorial-final-demo { display:flex; align-items:center; justify-content:center; gap:25px; min-height:220px; }.tutorial-final-demo div { display:grid; place-items:center; width:150px; height:105px; border:1px solid #bd9551; border-radius:12px; color:#edcf93; background:rgba(189,149,81,.08); }.tutorial-final-demo small { font:8px 'DM Mono'; letter-spacing:.12em; }.tutorial-final-demo div b { font:600 24px 'Playfair Display'; }.tutorial-final-demo > strong { color:#78e1ff; font:600 25px 'Playfair Display'; }.tutorial-ready { display:grid; gap:5px; padding:14px; border:1px solid rgba(96,220,255,.2); border-radius:10px; color:#a8bbcf; background:rgba(79,198,240,.06); font-size:12px; }.tutorial-ready b { color:#eaf7ff; font-size:16px; }
@media (max-width:700px) { .protocol-card { display:none; }.landing-notes { gap:10px; font-size:10px; }.landing-notes span+span:before { margin-right:10px; }.topbar { padding:0 16px; }.phase-pill { display:none; }.scoreboard { margin-top:13px; }.table { min-height:260px; padding:9px 8px 0; }.table-core { grid-template-columns:55px 1fr 55px; }.deck,.discard { transform:scale(.78); }.played-lines { gap:5px; }.played-line { min-width:74px; }.vs { font-size:10px; }.log-panel { display:none; }.hand-area { width:100%; padding:0 14px; }.hand-heading { align-items:start; gap:10px; }.hand-heading h2 { font-size:16px; }.selection-summary { text-align:right; font-size:10px; }.hand-scroll { margin-right:-14px; padding-left:2px; min-height:222px; }.card { flex-basis:128px; height:192px; }.control-bar { align-items:flex-start; flex-direction:column; }.action-controls { width:100%; }.action-controls button { flex:1; }.library-modal { padding:23px 16px; }.scoreboard .player-panel strong { font-size:19px; }.center-status { min-width:103px; } }
@media (max-width:700px) { .scoreboard { grid-template-columns:1fr; gap:9px; }.scoreboard .center-status { order:-1; }.player-panel,.player-panel.human { width:100%; justify-self:stretch; justify-content:space-between; text-align:left; flex-direction:row; }.player-panel.human { flex-direction:row-reverse; text-align:right; }.character-portrait--score { width:38px; }.opponent-zone { align-items:flex-start; }.character-toast { right:10px; bottom:10px; width:calc(100vw - 20px); }.characters-modal { max-height:calc(100vh - 20px); padding:24px 16px; border-radius:16px; }.character-grid { grid-template-columns:1fr; }.character-card { grid-template-columns:76px 1fr; }.character-portrait { width:76px; }.opponent-preview { align-items:flex-start; }.character-actions { flex-direction:column-reverse; }.character-actions button { width:100%; } }
@media (max-width:700px) { .reserve-effect-wrap { padding:6px; }.reserve-effect-modal { max-height:calc(100vh - 12px); padding:22px 14px; border-radius:16px; }.reserve-effect-zones { grid-template-columns:1fr; gap:12px; }.reserve-effect-zones > section { padding:11px; }.reserve-effect-bridge { grid-template-columns:auto auto; align-items:center; justify-content:center; }.reserve-effect-bridge > b { transform:rotate(90deg); }.reserve-effect-seal { width:54px; }.reserve-effect-seal small { top:36px; }.reserve-effect-cards { min-height:205px; }.reserve-effect-card { flex-basis:144px; width:144px; min-height:202px; }.reserve-effect-modal footer { bottom:-22px; flex-direction:column-reverse; margin:18px -14px -22px; padding:13px 14px 16px; }.reserve-effect-modal footer button { width:100%; min-height:48px; } }
@media (max-width:700px) { .trump-choice-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.trump-choice { min-height:112px; padding:13px 8px; }.trump-choice:last-child { grid-column:1 / -1; }.trump-choice i { width:42px; font-size:21px; }.trump-choice span { font-size:18px; } }
@media (max-width:700px) { .tutorial-wrap { padding:8px; }.tutorial-modal { max-height:calc(100vh - 16px); border-radius:16px; }.tutorial-modal > header { padding:16px 17px 0; }.tutorial-content { min-height:530px; padding:22px 18px 18px; }.tutorial-content h2 { font-size:30px; }.tutorial-lede { font-size:13px; }.tutorial-modal > footer { padding:13px 15px 15px; }.tutorial-modal > footer button { min-width:0; padding:12px 13px; }.tutorial-score-demo { gap:12px; margin:35px 0; }.tutorial-score-demo > div { width:105px; height:105px; }.tutorial-deal { flex-wrap:wrap; gap:11px; }.tutorial-mini-hand.is-six { display:none; }.tutorial-card-pair { transform:scale(.82); margin:-15px -30px; }.tutorial-choice-grid { grid-template-columns:1fr; }.tutorial-choice-grid > button { min-height:108px; }.tutorial-choice-grid .tutorial-card,.tutorial-choice-grid .game-card { width:92px; }.tutorial-trump-demo { gap:9px; transform:scale(.85); margin:0 -25px; }.tutorial-figure-demo { grid-template-columns:92px 1fr; gap:15px; }.tutorial-figure-demo .tutorial-card,.tutorial-figure-demo .game-card { width:92px; }.tutorial-figure-demo p { padding:10px; font-size:11px; }.tutorial-equation { gap:7px; margin:35px -8px 24px; }.tutorial-equation i { width:35px; height:51px; }.tutorial-equation b { font-size:18px; }.tutorial-order { grid-template-columns:1fr; }.tutorial-final-demo { gap:13px; }.tutorial-final-demo div { width:115px; }.tutorial-final-demo > strong { font-size:20px; } }

/* Tutorial transmission — a compact, navigable tactical briefing. */
.tutorial-wrap {
  padding:16px;
  background:
    radial-gradient(circle at 50% 12%,rgba(84,197,255,.16),transparent 35%),
    radial-gradient(circle at 85% 76%,rgba(213,166,83,.12),transparent 28%),
    rgba(1,5,12,.9);
  backdrop-filter:blur(14px);
}
.tutorial-modal {
  width:min(1120px,calc(100vw - 32px));
  height:min(760px,calc(100svh - 32px));
  max-height:none;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid rgba(179,211,237,.23);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(86,158,209,.055),transparent 34%),
    #07101c;
  box-shadow:0 38px 120px rgba(0,0,0,.78),inset 0 1px rgba(255,255,255,.06);
}
.tutorial-modal:before,.tutorial-modal:after {
  content:'';
  position:absolute;
  z-index:6;
  width:54px;
  height:54px;
  pointer-events:none;
}
.tutorial-modal:before { top:7px; left:7px; border-top:1px solid rgba(239,203,131,.54); border-left:1px solid rgba(239,203,131,.54); border-radius:10px 0 0; }
.tutorial-modal:after { right:7px; bottom:7px; border-right:1px solid rgba(93,208,255,.48); border-bottom:1px solid rgba(93,208,255,.48); border-radius:0 0 10px; }
.tutorial-header {
  position:relative !important;
  z-index:8 !important;
  top:auto !important;
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 74px;
  align-items:center;
  gap:22px;
  padding:12px 20px 13px !important;
  border-bottom:1px solid rgba(151,190,220,.14);
  background:linear-gradient(90deg,rgba(14,31,50,.98),rgba(6,15,27,.98)) !important;
}
.tutorial-brand { display:flex; align-items:center; min-width:0; gap:12px; }
.tutorial-brand-mark {
  flex:0 0 42px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(239,199,119,.4);
  color:#f2cf88;
  background:radial-gradient(circle,rgba(235,196,112,.13),transparent 66%);
  box-shadow:inset 0 0 22px rgba(240,197,111,.08),0 0 24px rgba(235,195,104,.07);
  transform:rotate(45deg);
}
.tutorial-brand-mark::first-letter { transform:rotate(-45deg); }
.tutorial-brand > div { display:grid; min-width:0; gap:2px; }
.tutorial-brand small,.tutorial-status span,.tutorial-close small,.tutorial-scene-label,.tutorial-next-context,.tutorial-kicker,.tutorial-scene-note {
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.15em;
}
.tutorial-brand small { overflow:hidden; color:#7793ab; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }
.tutorial-brand b { overflow:hidden; color:#edf5fb; font:600 18px/1.08 var(--font-display); letter-spacing:.025em; white-space:nowrap; text-overflow:ellipsis; }
.tutorial-status { display:flex; align-items:center; gap:17px; }
.tutorial-status > span { display:flex; align-items:center; gap:7px; color:#718ca3; font-size:8px; }
.tutorial-status > span i { width:6px; height:6px; border-radius:50%; background:#65d9bc; box-shadow:0 0 10px #65d9bc; }
.tutorial-status > b { color:#f0d294; font:600 25px/1 var(--font-display); }
.tutorial-status > b small { color:#71869a; font:600 11px var(--font-label); }
.tutorial-close {
  position:static;
  width:60px;
  height:48px;
  display:grid;
  place-items:center;
  gap:0;
  border:1px solid rgba(148,183,210,.15);
  border-radius:8px;
  color:#849caf;
  background:rgba(255,255,255,.025);
}
.tutorial-close span { font:300 22px/1 var(--font-ui); }
.tutorial-close small { font-size:6px; }
.tutorial-close:hover { border-color:rgba(111,214,255,.5); color:#e6f7ff; background:rgba(85,191,237,.08); }
.tutorial-progress {
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  margin:0;
  background:rgba(255,255,255,.035);
}
.tutorial-progress i { background:linear-gradient(90deg,#4abfe9,#7e9cfb 58%,#eccb86); box-shadow:0 0 14px rgba(76,193,238,.45); }
.tutorial-shell { min-height:0; display:grid; grid-template-columns:205px minmax(0,1fr); }
.tutorial-rail {
  min-height:0;
  overflow:auto;
  display:grid;
  align-content:center;
  gap:3px;
  padding:13px 12px;
  border-right:1px solid rgba(146,184,214,.12);
  background:
    linear-gradient(rgba(83,137,177,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,137,177,.035) 1px,transparent 1px),
    rgba(3,11,20,.7);
  background-size:24px 24px;
  scrollbar-width:none;
}
.tutorial-rail::-webkit-scrollbar { display:none; }
.tutorial-chapter {
  position:relative;
  min-height:52px;
  display:grid;
  grid-template-columns:23px 28px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border:1px solid transparent;
  border-radius:7px;
  color:#647d92;
  background:transparent;
  text-align:left;
}
.tutorial-chapter:before { content:''; position:absolute; top:50%; left:-13px; width:2px; height:0; background:#61cdf3; transform:translateY(-50%); transition:.2s height; box-shadow:0 0 10px #61cdf3; }
.tutorial-chapter:hover { color:#b7ccdc; background:rgba(99,190,233,.045); }
.tutorial-chapter.is-current { border-color:rgba(98,205,246,.19); color:#e9f7ff; background:linear-gradient(90deg,rgba(78,182,227,.13),rgba(78,182,227,.025)); }
.tutorial-chapter.is-current:before { height:28px; }
.tutorial-chapter.is-complete { color:#829cad; }
.tutorial-chapter-index { color:#536b7e; font:600 8px var(--font-label); letter-spacing:.1em; }
.tutorial-chapter > i { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(133,168,195,.15); border-radius:50%; color:#7891a5; font-style:normal; font-size:11px; }
.tutorial-chapter.is-current > i { border-color:rgba(100,211,250,.52); color:#9ee7ff; background:rgba(86,203,244,.09); box-shadow:0 0 18px rgba(82,197,239,.13); }
.tutorial-chapter.is-complete > i { color:#e4c57f; border-color:rgba(228,197,127,.22); }
.tutorial-chapter > span:last-child { display:grid; min-width:0; gap:2px; }
.tutorial-chapter b { overflow:hidden; color:inherit; font:600 11px/1.05 var(--font-ui); white-space:nowrap; text-overflow:ellipsis; }
.tutorial-chapter small { color:#4f687c; font:600 6px var(--font-label); letter-spacing:.15em; }
.tutorial-content {
  position:relative;
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(320px,.88fr) minmax(400px,1.12fr);
  align-items:center;
  gap:clamp(24px,4vw,60px);
  padding:34px clamp(28px,4vw,58px);
  text-align:left;
  isolation:isolate;
}
.tutorial-content:before {
  content:'';
  position:absolute;
  z-index:-2;
  inset:0 0 0 43%;
  background:
    linear-gradient(90deg,#07101c 1%,rgba(7,16,28,.48) 34%,rgba(7,16,28,.18)),
    linear-gradient(0deg,#07101c 0%,transparent 24%,transparent 78%,#07101c 100%),
    var(--tutorial-art) center/cover no-repeat;
  opacity:.27;
  filter:saturate(.8) contrast(1.05);
}
.tutorial-content:after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 70% 52%,transparent 0 25%,rgba(7,16,28,.24) 56%,rgba(7,16,28,.68)); }
.tutorial-copy { align-self:center; }
.tutorial-kicker { display:flex; align-items:center; gap:9px; margin:0 0 12px; color:#718da3; font-size:8px; }
.tutorial-kicker span { color:#efca80; }
.tutorial-kicker:before { content:''; width:20px; height:1px; background:#d1a85d; }
.tutorial-content h2 { max-width:540px; margin:0 0 15px; color:#f3f7fa; font:600 clamp(34px,4.2vw,54px)/.91 var(--font-display); letter-spacing:-.018em; text-wrap:balance; }
.tutorial-lede { max-width:510px; margin:0; color:#a7b8c7; font:400 14px/1.66 var(--font-ui); }
.tutorial-tip {
  display:grid;
  grid-template-columns:27px 1fr;
  gap:10px;
  margin:22px 0 0;
  padding:13px 15px;
  border:1px solid rgba(229,194,121,.16);
  border-left:2px solid #dfb865;
  color:#849bae;
  background:linear-gradient(90deg,rgba(223,184,101,.08),transparent);
  font:400 11px/1.48 var(--font-ui);
}
.tutorial-tip > span:first-child { display:grid; place-items:center; color:#efcb7d; font-size:15px; }
.tutorial-tip > span:last-child { display:grid; gap:2px; }
.tutorial-tip b { color:#e9d5aa; font:600 9px var(--font-label); letter-spacing:.12em; text-transform:uppercase; }
.tutorial-scene {
  position:relative;
  min-height:360px;
  display:grid;
  place-items:center;
  align-content:center;
  padding:46px 28px 32px;
  border:1px solid rgba(145,190,221,.16);
  border-radius:4px;
  background:
    linear-gradient(rgba(126,184,221,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,184,221,.035) 1px,transparent 1px),
    rgba(3,11,21,.67);
  background-size:27px 27px;
  box-shadow:inset 0 0 60px rgba(39,119,170,.045),0 20px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(9px);
}
.tutorial-scene:before,.tutorial-scene:after { content:''; position:absolute; width:23px; height:23px; pointer-events:none; }
.tutorial-scene:before { top:8px; left:8px; border-top:1px solid #ba9d60; border-left:1px solid #ba9d60; }
.tutorial-scene:after { right:8px; bottom:8px; border-right:1px solid #5aaed5; border-bottom:1px solid #5aaed5; }
.tutorial-scene-label {
  position:absolute;
  top:13px;
  right:17px;
  left:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#6f889d;
  font-size:7px;
}
.tutorial-scene-label i { color:#c7a963; font-style:normal; }
.tutorial-scene-note { position:absolute; right:18px; bottom:14px; left:18px; color:#60778a; font-size:6px; text-align:center; }
.tutorial-score-demo { gap:29px; margin:0; }
.tutorial-score-demo > div {
  position:relative;
  width:128px;
  height:128px;
  border-color:rgba(101,205,246,.28);
  background:radial-gradient(circle,rgba(76,187,231,.15),transparent 65%);
}
.tutorial-score-demo > div:last-child { border-color:rgba(222,183,104,.23); background:radial-gradient(circle,rgba(222,183,104,.1),transparent 65%); }
.tutorial-score-demo small { color:#7892a5; font:600 7px var(--font-label); letter-spacing:.18em; }
.tutorial-score-demo b { color:#eef7fc; font:600 46px var(--font-display); }
.tutorial-score-demo em { color:#5f8298; font:600 6px var(--font-label); letter-spacing:.14em; font-style:normal; }
.tutorial-score-demo > span { display:flex; align-items:center; gap:7px; color:#607587; font:600 7px var(--font-label); letter-spacing:.12em; text-transform:uppercase; }
.tutorial-score-demo > span i { width:13px; height:1px; background:#526f84; }
.tutorial-deal { width:100%; min-height:0; gap:18px; }
.tutorial-deal > div:first-child { display:grid; gap:12px; }
.tutorial-deal > div:first-child > small { color:#738ca0; font:600 7px var(--font-label); letter-spacing:.14em; text-align:center; }
.tutorial-mini-hand { padding-left:23px; }
.tutorial-mini-hand i { width:43px; height:65px; margin-left:-23px; border-color:rgba(100,184,226,.4); color:#8dd6f5; background:linear-gradient(145deg,#122c45,#081422); font:600 13px var(--font-display); }
.tutorial-mini-hand.is-six { display:none; }
.tutorial-flow-arrow { color:#6fcdef; font-size:21px; }
.tutorial-reserve-demo { width:91px; height:118px; border-style:solid; border-color:rgba(221,181,99,.38); background:linear-gradient(145deg,rgba(218,177,91,.11),rgba(218,177,91,.02)); }
.tutorial-reserve-demo small,.tutorial-reserve-demo em { color:#9d875d; font:600 6px var(--font-label); letter-spacing:.15em; font-style:normal; }
.tutorial-reserve-demo b { color:#efd18f; font:600 36px var(--font-display); }
.tutorial-card-pair { min-height:0; }
.tutorial-card { width:118px; }
.tutorial-card .game-card { width:118px; }
.tutorial-card-pair .is-back { margin-left:-47px; }
.tutorial-arrow { margin:0 20px; color:#66c9ee; }
.tutorial-table-stack i,.tutorial-equation i { border-color:rgba(102,176,218,.4); color:#dff4ff; background:#0e2539; font-family:var(--font-display); }
.tutorial-table-stack b { display:grid; color:#f0cd81; font:600 34px/1 var(--font-display); }
.tutorial-table-stack b small { color:#89784e; font:600 6px var(--font-label); letter-spacing:.14em; }
.tutorial-signal { margin:20px 0 0; border-radius:4px; }
.tutorial-signal span { font-family:var(--font-label); }
.tutorial-signal strong i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#ff704a; box-shadow:0 0 8px #ff704a; }
.tutorial-question { margin:17px 0 0; color:#dce8f0; font:600 12px/1.4 var(--font-ui); }
.tutorial-choice-grid { width:100%; grid-template-columns:1fr 1fr; gap:10px; }
.tutorial-choice-grid > button {
  min-width:0;
  min-height:218px;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  padding:10px;
  border-radius:4px;
  color:#d7e5ef;
  background:rgba(3,12,22,.78);
}
.tutorial-choice-grid > button:hover { transform:translateY(-3px); border-color:#66cef4; }
.tutorial-choice-grid > button.is-valid { border-color:rgba(85,218,169,.52); background:linear-gradient(rgba(51,173,128,.1),rgba(3,12,22,.78)); }
.tutorial-choice-grid .tutorial-card,.tutorial-choice-grid .game-card { width:82px; }
.tutorial-choice-grid > button > span { display:grid; gap:2px; font:600 10px var(--font-ui); text-align:center; }
.tutorial-choice-grid > button > span small,.tutorial-choice-grid > button > span i { color:#687f91; font:600 6px var(--font-label); letter-spacing:.14em; font-style:normal; }
.tutorial-choice-grid > button.is-valid > span i { color:#62d8ae; }
.tutorial-feedback {
  position:absolute;
  z-index:4;
  right:clamp(28px,4vw,58px);
  bottom:11px;
  width:min(420px,42%);
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  margin:0;
  border:1px solid rgba(82,211,162,.23);
  border-radius:4px;
  font:400 9px/1.4 var(--font-ui);
}
.tutorial-feedback > span:first-child { display:grid; place-items:center; color:#61ddb0; }
.tutorial-feedback > span:last-child { display:grid; gap:1px; }
.tutorial-feedback b { font:600 7px var(--font-label); letter-spacing:.12em; text-transform:uppercase; }
.tutorial-cycle { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:20px 0 0; color:#7e96a9; font:600 8px var(--font-label); letter-spacing:.12em; }
.tutorial-cycle span { padding:6px 8px; border:1px solid rgba(117,162,192,.13); background:rgba(255,255,255,.025); }
.tutorial-cycle i { color:#c3a35f; font-style:normal; }
.tutorial-trump-demo { min-height:0; gap:12px; }
.tutorial-trump-orb,.tutorial-result-orb { width:86px; height:86px; }
.tutorial-trump-orb small,.tutorial-result-orb small,.tutorial-energy-token small { font-family:var(--font-label); }
.tutorial-energy-token { width:90px; height:126px; border-radius:5px; }
.tutorial-trump-demo > strong { color:#d4b775; font:600 22px var(--font-display); }
.tutorial-connector { width:20px; height:1px; background:#765f3d; }
.tutorial-result-orb { display:grid; align-content:center; color:#f6d991; font-family:var(--font-display); }
.tutorial-result-orb b { font-size:26px; }
.tutorial-result-orb small { color:#8d7b57; font-size:6px; letter-spacing:.12em; }
.tutorial-effect-modes { display:grid; gap:7px; margin-top:18px; }
.tutorial-effect-modes p { display:grid; grid-template-columns:26px 1fr; gap:9px; margin:0; padding:9px; border:1px solid rgba(121,161,191,.11); color:#8097a9; font:400 10px/1.4 var(--font-ui); background:rgba(255,255,255,.018); }
.tutorial-effect-modes p > i { display:grid; place-items:center; color:#d0ad69; font:600 7px var(--font-label); font-style:normal; }
.tutorial-effect-modes p > span { display:grid; gap:2px; }
.tutorial-effect-modes p b { color:#dbe8ef; font-size:10px; }
.tutorial-figure-demo { grid-template-columns:130px 1fr; gap:25px; margin:0; }
.tutorial-figure-demo .tutorial-card,.tutorial-figure-demo .game-card { width:130px; }
.tutorial-cost-path { display:grid; grid-template-columns:repeat(2,32px); align-items:center; justify-content:center; gap:8px; color:#8298a9; }
.tutorial-cost-path > span { grid-column:1/-1; color:#778da0; font:600 7px var(--font-label); letter-spacing:.12em; text-align:center; }
.tutorial-cost-path > i { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(224,187,107,.28); color:#d9b868; font-style:normal; transform:rotate(45deg); }
.tutorial-cost-path > b { grid-column:1/-1; color:#5bbedf; text-align:center; transform:rotate(90deg); }
.tutorial-cost-path > em { grid-column:1/-1; padding:8px; border:1px solid rgba(87,197,237,.24); color:#94dbf4; font:600 7px var(--font-label); letter-spacing:.15em; font-style:normal; text-align:center; }
.tutorial-order { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:20px 0 0; padding:0; list-style:none; }
.tutorial-order li { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:7px; padding:8px; border:1px solid rgba(127,165,194,.1); color:#879caf; background:rgba(255,255,255,.017); font:400 9px/1.32 var(--font-ui); }
.tutorial-order li span { color:#d3ae68; font:600 7px var(--font-label); }
.tutorial-equation { margin:0 0 33px; }
.tutorial-equation i { width:47px; height:66px; }
.tutorial-equation b { display:grid; color:#f0cf88; font:600 28px/1 var(--font-display); }
.tutorial-equation b small { color:#897855; font:600 6px var(--font-label); letter-spacing:.12em; }
.tutorial-resolution-line { display:flex; align-items:center; justify-content:center; width:100%; gap:6px; color:#71889a; font:600 6px var(--font-label); letter-spacing:.1em; }
.tutorial-resolution-line i { flex:1; height:1px; background:linear-gradient(90deg,transparent,#4f849e); }
.tutorial-resolution-line i:first-child { display:none; }
.tutorial-final-demo { min-height:0; gap:22px; }
.tutorial-final-demo div { width:135px; height:105px; border-radius:4px; }
.tutorial-final-demo div small,.tutorial-final-demo div em,.tutorial-final-demo > strong small { font:600 6px var(--font-label); letter-spacing:.13em; font-style:normal; }
.tutorial-final-demo div b { font-family:var(--font-display); }
.tutorial-final-demo > span { color:#66ccee; }
.tutorial-final-demo > strong { display:grid; gap:3px; color:#f2d28b; font:600 26px var(--font-display); }
.tutorial-final-demo > strong small { color:#8a7956; }
.tutorial-ready { grid-template-columns:28px 1fr; margin-top:20px; border-radius:4px; font:400 10px/1.45 var(--font-ui); }
.tutorial-ready > i { display:grid; place-items:center; color:#e7c473; font-style:normal; }
.tutorial-ready > span { display:grid; gap:2px; }
.tutorial-ready b { font:600 8px var(--font-label); letter-spacing:.13em; text-transform:uppercase; }
.tutorial-complete-seal { position:absolute; right:24px; bottom:24px; display:grid; place-items:center; width:83px; height:83px; color:#d7b873; }
.tutorial-complete-seal:before { content:''; position:absolute; inset:0; border:1px solid rgba(215,184,115,.35); border-radius:50%; box-shadow:inset 0 0 25px rgba(215,184,115,.07); }
.tutorial-complete-seal span { font-size:19px; }
.tutorial-complete-seal i { width:30px; height:1px; margin:3px; background:#806e49; }
.tutorial-complete-seal b { font:600 5px var(--font-label); letter-spacing:.12em; text-align:center; }
.tutorial-footer {
  position:relative !important;
  z-index:8 !important;
  bottom:auto !important;
  min-height:70px;
  display:grid !important;
  grid-template-columns:180px 1fr 220px;
  align-items:center;
  gap:18px;
  padding:10px 18px !important;
  border-top:1px solid rgba(147,184,212,.13) !important;
  background:rgba(4,12,22,.98) !important;
}
.tutorial-footer button {
  min-width:0 !important;
  min-height:47px;
  display:grid;
  align-items:center;
  padding:8px 12px !important;
  border-radius:5px;
}
.tutorial-back { grid-template-columns:28px 1fr; text-align:left; }
.tutorial-back > span { grid-row:1/3; color:#7690a4; font-size:18px; }
.tutorial-footer button small { color:#637d92; font:600 6px var(--font-label); letter-spacing:.16em; }
.tutorial-footer button b { color:#d9e7f0; font:600 11px var(--font-ui); }
.tutorial-next-context { display:flex; align-items:center; justify-content:center; gap:16px; color:#597286; font-size:6px; }
.tutorial-next-context > span { display:grid; gap:2px; text-align:right; }
.tutorial-next-context > span b { color:#98adbd; font-size:8px; }
.tutorial-next-context > i { color:#668296; font-style:normal; }
.tutorial-next-context > i b { color:#e2c279; }
.tutorial-next {
  grid-template-columns:1fr 25px;
  text-align:left;
  background:linear-gradient(135deg,#d6ad5e,#f0d28d) !important;
  box-shadow:0 9px 24px rgba(219,178,94,.12);
}
.tutorial-next > small,.tutorial-next > b { color:#1c1a14 !important; }
.tutorial-next > span { grid-column:2; grid-row:1/3; color:#372c1a; font-size:18px; }
.tutorial-next:hover:not(:disabled) { box-shadow:0 12px 30px rgba(219,178,94,.24); }
.tutorial-next:disabled { background:#172837 !important; box-shadow:none; }
.tutorial-next:disabled > small,.tutorial-next:disabled > b,.tutorial-next:disabled > span { color:#617588 !important; }
.tutorial-footer button:focus-visible,.tutorial-chapter:focus-visible,.tutorial-choice-grid > button:focus-visible,.tutorial-close:focus-visible { outline:2px solid #7edcff; outline-offset:2px; }

@media (max-width:900px) {
  .tutorial-modal { width:calc(100vw - 20px); height:calc(100svh - 20px); }
  .tutorial-shell { grid-template-columns:164px minmax(0,1fr); }
  .tutorial-content { grid-template-columns:1fr; align-content:start; gap:24px; padding:28px; }
  .tutorial-content:before { inset:36% 0 0 0; }
  .tutorial-scene { min-height:330px; }
  .tutorial-feedback { position:static; width:auto; grid-column:1; margin-top:-14px; }
}
@media (max-width:700px) {
  .tutorial-wrap { padding:0; align-items:stretch; }
  .tutorial-modal { width:100vw; height:100svh; max-height:none; border-radius:0; border-right:0; border-left:0; }
  .tutorial-modal:before,.tutorial-modal:after { display:none; }
  .tutorial-header {
    min-height:65px;
    grid-template-columns:minmax(0,1fr) 47px;
    gap:8px;
    padding:9px 12px 10px !important;
  }
  .tutorial-brand { gap:9px; }
  .tutorial-brand-mark { flex-basis:33px; width:33px; height:33px; font-size:12px; }
  .tutorial-brand small { font-size:6px; letter-spacing:.1em; }
  .tutorial-brand b { font-size:15px; }
  .tutorial-status { display:none; }
  .tutorial-close { width:44px; height:40px; }
  .tutorial-close small { display:none; }
  .tutorial-shell { min-height:0; display:flex; flex-direction:column; }
  .tutorial-rail {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    align-content:initial;
    gap:5px;
    overflow-x:auto;
    padding:7px 9px;
    border-right:0;
    border-bottom:1px solid rgba(146,184,214,.12);
    background:#06101c;
  }
  .tutorial-chapter {
    flex:0 0 67px;
    min-height:40px;
    grid-template-columns:1fr;
    place-items:center;
    gap:2px;
    padding:4px;
    text-align:center;
  }
  .tutorial-chapter:before { top:auto; bottom:-8px; left:50%; width:0; height:2px; transform:translateX(-50%); }
  .tutorial-chapter.is-current:before { width:28px; height:2px; }
  .tutorial-chapter-index { position:absolute; top:3px; left:4px; font-size:5px; }
  .tutorial-chapter > i { width:24px; height:24px; font-size:9px; }
  .tutorial-chapter > span:last-child { display:block; }
  .tutorial-chapter b { display:block; max-width:58px; font-size:7px; text-transform:uppercase; }
  .tutorial-chapter small { display:none; }
  .tutorial-content {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    display:block;
    padding:22px 16px 28px;
  }
  .tutorial-content:before { inset:34% 0 0; opacity:.18; }
  .tutorial-content h2 { max-width:390px; margin-bottom:10px; font-size:34px; }
  .tutorial-lede { font-size:12px; line-height:1.56; }
  .tutorial-tip { margin-top:15px; padding:10px 11px; }
  .tutorial-scene { min-height:280px; margin-top:22px; padding:40px 14px 30px; }
  .tutorial-scene-note { right:13px; left:13px; font-size:5px; }
  .tutorial-score-demo { gap:12px; }
  .tutorial-score-demo > div { width:104px; height:104px; }
  .tutorial-score-demo b { font-size:38px; }
  .tutorial-deal { flex-wrap:nowrap; gap:8px; }
  .tutorial-mini-hand i { width:31px; height:48px; margin-left:-19px; }
  .tutorial-reserve-demo { width:74px; height:96px; }
  .tutorial-card-pair { margin:0; transform:none; }
  .tutorial-card { width:94px; }
  .tutorial-card .game-card { width:94px; }
  .tutorial-card-pair .is-back { margin-left:-53px; }
  .tutorial-arrow { margin:0 9px; }
  .tutorial-table-stack i { width:34px; height:50px; }
  .tutorial-choice-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .tutorial-choice-grid > button { min-height:182px; padding:7px; }
  .tutorial-choice-grid .tutorial-card,.tutorial-choice-grid .game-card { width:70px; }
  .tutorial-feedback { margin-top:12px; }
  .tutorial-trump-demo { min-height:190px; gap:6px; margin:0 -8px; transform:scale(.91); }
  .tutorial-trump-orb,.tutorial-result-orb { width:72px; height:72px; }
  .tutorial-energy-token { width:72px; height:105px; }
  .tutorial-connector { width:9px; }
  .tutorial-figure-demo { grid-template-columns:105px 1fr; gap:18px; margin:0; }
  .tutorial-figure-demo .tutorial-card,.tutorial-figure-demo .game-card { width:105px; }
  .tutorial-order { grid-template-columns:1fr; }
  .tutorial-equation { gap:5px; margin:0 0 27px; }
  .tutorial-equation i { width:34px; height:50px; }
  .tutorial-equation b { font-size:22px; }
  .tutorial-resolution-line { gap:3px; font-size:5px; }
  .tutorial-final-demo div { width:105px; }
  .tutorial-final-demo > strong { font-size:21px; }
  .tutorial-complete-seal { right:13px; bottom:13px; width:64px; height:64px; }
  .tutorial-footer {
    min-height:64px;
    grid-template-columns:88px 1fr;
    gap:8px;
    padding:8px 10px !important;
  }
  .tutorial-footer button { min-height:46px; padding:7px 9px !important; }
  .tutorial-back { grid-template-columns:20px 1fr; }
  .tutorial-back > span { font-size:15px; }
  .tutorial-footer button small { font-size:5px; }
  .tutorial-footer button b { font-size:9px; }
  .tutorial-next-context { display:none; }
  .tutorial-next { grid-column:2; grid-row:1; }
}

/* New artwork system: real illustrations sit behind a concise hand interface. */
.card-artwork { position:absolute; z-index:0 !important; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.card:has(.card-artwork):after { opacity:1; background:linear-gradient(to bottom,rgba(2,7,15,.06) 28%,rgba(2,7,15,.32) 58%,rgba(2,7,15,.84) 100%); }
.card:has(.card-artwork) .card-orbit,.card:has(.card-artwork) .card-glyph { visibility:hidden; }
.card.art-missing .card-orbit,.card.art-missing .card-glyph { visibility:visible; }
.card-info { position:relative; z-index:1; display:flex; flex-direction:column; margin-top:auto; }
.card:has(.card-artwork) { height:221px; padding:10px; }
.card:has(.card-artwork) .card-artwork { object-position:center center; }
.card:has(.card-artwork) .card-top { z-index:2; text-shadow:0 2px 5px #05070c; }
.card:has(.card-artwork) .card-info { position:absolute; z-index:2; right:10px; bottom:9px; left:10px; min-height:56px; margin:0; justify-content:flex-start; text-shadow:0 2px 5px #05070c; }
.card:has(.card-artwork) .card-type { font-size:8px; line-height:1.1; }
.card:has(.card-artwork) .card-name { min-height:0; margin:2px 0 0; font-size:16px; line-height:1.02; }
.card:has(.card-artwork) .card-cost { margin-top:2px; font-size:8px; line-height:1.1; }
.card.wind { background:radial-gradient(circle at 50% 42%,rgba(151,255,240,.18),transparent 32%),linear-gradient(150deg,#16465a,#071822 70%); }
.card { flex-basis:158px; height:230px; padding:11px; }
.hand-scroll { min-height:260px; }
.card-top b { font-size:28px; }
.card-type { font-size:10px; }
.card-name { min-height:39px; font-size:18px; line-height:1.04; text-wrap:balance; }
.card-text { display:none; }
.card-cost { font-size:10px; line-height:1.25; }
.card.compact { flex-basis:134px; height:188px; }
.library-grid .card.compact { pointer-events:auto; }
.card.compact .card-name { min-height:32px; font-size:15px; }
.card.compact .card-cost { font-size:8px; }
.card.compact:has(.card-artwork) .card-info { right:8px; bottom:7px; left:8px; min-height:47px; }
.card.compact:has(.card-artwork) .card-name { min-height:0; font-size:14px; }
.detail-wrap { z-index:20; }
.detail-modal { position:relative; display:grid; grid-template-columns:minmax(0,220px) 1fr; width:min(720px,100%); overflow:hidden; border:1px solid rgba(152,210,255,.36); border-radius:18px; background:linear-gradient(140deg,#132946,#080f1e); box-shadow:0 28px 90px rgba(0,0,0,.56); }
.detail-art { position:relative; min-height:360px; overflow:hidden; background:radial-gradient(circle at center,rgba(89,185,255,.24),transparent 55%),#0b1729; }
.detail-art img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
.detail-art:after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(2,7,15,.8),transparent 48%); }
.detail-art span { position:absolute; z-index:1; left:18px; bottom:15px; color:white; font-size:32px; text-shadow:0 0 22px currentColor; }
.detail-content { padding:37px 30px 27px; }
.detail-content h2 { margin-bottom:18px; font:600 clamp(29px,5vw,42px)/1 'Playfair Display'; }
.detail-content > p:not(.eyebrow) { color:#c0d0e1; font-size:14px; line-height:1.65; }
.detail-stats { display:grid; gap:9px; margin-bottom:18px; }
.detail-stats span { display:flex; flex-direction:column; padding:9px 11px; border:1px solid var(--line); border-radius:8px; color:#9fb5cb; font-size:10px; }
.detail-stats b { color:#f0f7ff; font-size:14px; }
.detail-note { color:#8fb9db !important; }
.detail-modal.fire .detail-art { background-color:#2d1217; }.detail-modal.water .detail-art { background-color:#09253c; }.detail-modal.wind .detail-art { background-color:#0b2935; }.detail-modal.earth .detail-art { background-color:#2a1b0d; }.detail-modal.darkness .detail-art,.detail-modal.chaos .detail-art { background-color:#1b102d; }
@media (max-width:700px) { .card { flex-basis:146px; height:204px; }.hand-scroll { min-height:232px; }.card-top b { font-size:25px; }.card-name { min-height:34px; font-size:16px; }.card.compact { flex-basis:128px; height:179px; }.card.compact:has(.card-artwork) .card-info { min-height:45px; }.library-modal { width:calc(100vw - 40px); max-width:none; }.detail-modal { grid-template-columns:1fr; max-height:calc(100vh - 32px); overflow:auto; }.detail-art { min-height:260px; height:38vh; }.detail-content { padding:28px 22px 24px; }.detail-content h2 { font-size:32px; }.action-controls { flex-wrap:wrap; } }

/* ==========================================================================
   Royaume Infini — ceremonial game interface
   ========================================================================== */
:root {
  --realm-void:#07070b;
  --realm-ink:#f5ead7;
  --realm-muted:#b8a993;
  --realm-copper:#b7793d;
  --realm-gold:#e1bd78;
  --realm-ember:#ef8a45;
  --realm-violet:#9b62dd;
  --realm-magenta:#d967dd;
  --realm-green:#79b39a;
  --realm-metal:#343038;
  --realm-metal-hi:#75695d;
  --realm-stone:#17171d;
  --realm-wood:#21140f;
  --realm-line:rgba(224,188,119,.24);
  --realm-line-soft:rgba(224,188,119,.11);
  --realm-shadow:0 28px 80px rgba(0,0,0,.58);
  --realm-shadow-soft:0 15px 38px rgba(0,0,0,.34);
  --radius-panel:18px;
  --radius-control:8px;
  --motion-fast:150ms;
  --motion-card:420ms;
  --motion-resolve:760ms;
  --motion-scene:950ms;
  --ease-ritual:cubic-bezier(.22,.72,.2,1);
  --ease-impact:cubic-bezier(.18,.82,.22,1);
  --z-scene:0;
  --z-table:2;
  --z-hud:5;
  --z-toast:20;
  --z-modal:40;
  color:var(--realm-ink);
  background:var(--realm-void);
}
html { min-height:100%; background:var(--realm-void); }
body {
  min-height:100vh;
  color:var(--realm-ink);
  background:
    radial-gradient(circle at 50% -10%,rgba(151,77,154,.18),transparent 34%),
    linear-gradient(180deg,#100d14 0%,#08080c 55%,#050507 100%);
}
body:before {
  content:''; position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:.18;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px);
  mix-blend-mode:soft-light;
}
button:focus-visible,input:focus-visible { outline:2px solid var(--realm-gold); outline-offset:3px; }
.eyebrow { color:#c4a879; letter-spacing:.22em; }
.primary,.secondary {
  position:relative; min-height:46px; padding:12px 18px; overflow:hidden;
  border-radius:var(--radius-control); border:1px solid var(--realm-line);
  transition:transform var(--motion-fast) ease,border-color var(--motion-fast) ease,filter var(--motion-fast) ease,background var(--motion-fast) ease;
}
.primary {
  color:#1b1008; border:1px solid #f0c77b;
  background:linear-gradient(180deg,#f5d391 0%,#c88746 52%,#9b5d2d 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.55),inset 0 -2px rgba(62,27,10,.32),0 8px 24px rgba(205,113,48,.2);
  text-shadow:0 1px rgba(255,255,255,.24);
}
.primary:before {
  content:''; position:absolute; inset:3px; pointer-events:none; border:1px solid rgba(65,30,13,.22);
  clip-path:polygon(0 0,100% 0,100% 68%,94% 100%,6% 100%,0 68%);
}
.primary:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.primary:active:not(:disabled),.secondary:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.primary:disabled { color:#796d61; border-color:#514b48; background:linear-gradient(#39363a,#242328); box-shadow:none; }
.secondary {
  color:#ded1bf;
  background:linear-gradient(180deg,rgba(70,62,63,.78),rgba(30,28,33,.92));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.22);
}
.secondary:hover:not(:disabled) { border-color:rgba(225,189,120,.52); background:linear-gradient(180deg,rgba(84,69,65,.84),rgba(35,31,35,.96)); }
.button-rune { margin-right:7px; font-size:.78em; }

/* Landing vista */
.landing { isolation:isolate; align-items:center; min-height:100svh; padding:clamp(24px,5vw,72px); background:linear-gradient(180deg,rgba(18,11,18,.04),rgba(6,5,8,.72) 88%); }
.landing:after { content:''; position:absolute; z-index:-1; inset:auto 0 0; height:34%; background:linear-gradient(180deg,transparent,rgba(5,4,7,.96)); }
.realm-vista { position:absolute; z-index:-3; inset:0; overflow:hidden; background:
  radial-gradient(circle at 50% 31%,rgba(255,202,126,.86) 0 4%,rgba(233,133,88,.26) 12%,transparent 35%),
  linear-gradient(180deg,#23162c 0%,#6d354b 36%,#d17a5d 49%,#433041 69%,#100d14 100%); }
.realm-vista:before { content:''; position:absolute; inset:0; opacity:.48; background:
  radial-gradient(circle at 14% 18%,#fff 0 1px,transparent 1.5px),
  radial-gradient(circle at 78% 12%,#f6d8b0 0 1px,transparent 1.4px),
  radial-gradient(circle at 64% 24%,#fff 0 1px,transparent 1.4px);
  background-size:143px 143px,197px 197px,251px 251px; }
.realm-sun { position:absolute; top:28%; left:50%; width:clamp(75px,9vw,132px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:#ffe2a1; box-shadow:0 0 60px rgba(255,178,100,.72),0 0 160px rgba(255,128,105,.38); }
.realm-mountains { position:absolute; right:-5%; bottom:14%; left:-5%; height:48%; background:#342638; clip-path:polygon(0 86%,8% 70%,17% 78%,28% 42%,38% 66%,49% 28%,56% 52%,66% 35%,78% 67%,89% 39%,100% 64%,100% 100%,0 100%); }
.realm-mountains--far { opacity:.56; filter:blur(1.5px); background:#765166; transform:translateY(-8%); }
.realm-mountains--near { background:linear-gradient(180deg,#2f2736,#0c0b10 86%); clip-path:polygon(0 82%,11% 58%,21% 75%,31% 50%,40% 71%,53% 45%,64% 71%,74% 55%,86% 73%,94% 49%,100% 65%,100% 100%,0 100%); }
.realm-trees { position:absolute; right:0; bottom:0; left:0; height:28%; opacity:.84; background:repeating-linear-gradient(82deg,transparent 0 5.5%,#08080b 5.8% 6.1%,transparent 6.4% 10%); clip-path:polygon(0 75%,6% 57%,11% 74%,17% 37%,23% 71%,31% 45%,37% 78%,44% 32%,51% 73%,58% 48%,66% 76%,74% 35%,82% 70%,90% 47%,100% 67%,100% 100%,0 100%); }
.stars { z-index:-2; opacity:.42; background-size:133px 133px,211px 211px; mask-image:linear-gradient(to bottom,black 50%,transparent 83%); }
.celestial-dial { position:absolute; z-index:-1; top:7%; left:50%; width:min(760px,84vw); aspect-ratio:1; border:1px solid rgba(240,198,130,.16); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 90px rgba(206,109,151,.12) inset; animation:dial-breathe 8s ease-in-out infinite; }
.celestial-dial:before,.celestial-dial:after,.celestial-dial i { content:''; position:absolute; inset:9%; border:1px solid rgba(240,198,130,.1); border-radius:50%; }
.celestial-dial:after { inset:22%; }
.celestial-dial i:nth-child(2) { inset:35%; }.celestial-dial i:nth-child(3) { inset:48%; }
.hero { width:min(780px,100%); padding:clamp(24px,4vw,52px); text-shadow:0 3px 20px rgba(0,0,0,.62); animation:scene-arrive var(--motion-scene) var(--ease-ritual) both; }
.hero:before,.hero:after { content:''; display:block; width:min(380px,70%); height:1px; margin:0 auto 24px; background:linear-gradient(90deg,transparent,var(--realm-gold),transparent); opacity:.62; }
.hero:after { margin:30px auto 0; }
.hero-sigil { display:grid; place-items:center; width:66px; aspect-ratio:1; margin:0 auto 16px; border:1px solid var(--realm-line); transform:rotate(45deg); background:rgba(22,13,22,.55); box-shadow:0 0 32px rgba(234,138,91,.18); }
.hero-sigil span { color:var(--realm-gold); transform:rotate(-45deg); font-size:22px; }
.hero h1 { color:#fff4df; font-size:clamp(52px,9.2vw,118px); letter-spacing:.055em; text-shadow:0 4px 34px rgba(0,0,0,.8),0 0 42px rgba(213,117,108,.2); }
.hero h1 span { display:inline-block; margin-left:.08em; color:var(--realm-gold); font-size:.55em; vertical-align:.2em; }
.subtitle { color:#f0c985; font-size:clamp(17px,2vw,23px); }
.lede { color:#e0d4c6; }
.hero-actions { align-items:center; }
.landing-notes { color:#bcae9c; text-transform:uppercase; letter-spacing:.1em; }
.landing-notes span+span:before { color:var(--realm-copper); }
.protocol-card { border-color:var(--realm-line); border-radius:5px 18px 5px 18px; background:linear-gradient(145deg,rgba(47,34,37,.88),rgba(16,15,20,.94)); color:#bcae9d; box-shadow:var(--realm-shadow-soft); }
.protocol-card:before { content:''; position:absolute; inset:6px; pointer-events:none; border:1px solid var(--realm-line-soft); border-radius:2px 12px 2px 12px; }
.protocol-card strong { color:#f0ddbe; font-family:'Playfair Display',serif; }
.rule-line i { background:var(--realm-ember); box-shadow:0 0 13px rgba(239,138,69,.54); }

/* Layered ceremonial table */
.game-shell { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; padding-bottom:32px; background:
  radial-gradient(ellipse at 50% 31%,rgba(165,82,104,.2),transparent 42%),
  linear-gradient(180deg,#1b1118 0%,#100d12 38%,#07070a 100%); }
.realm-backdrop { position:absolute; z-index:-2; inset:0; pointer-events:none; overflow:hidden; }
.realm-backdrop:before { content:''; position:absolute; top:-24%; left:50%; width:min(1100px,110vw); aspect-ratio:1; border:1px solid rgba(229,182,111,.11); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 0 80px rgba(229,182,111,.025),0 0 0 160px rgba(229,182,111,.018); }
.realm-backdrop:after { content:''; position:absolute; inset:0; opacity:.2; background-image:radial-gradient(#f6d8b0 0 .8px,transparent 1px); background-size:89px 89px; mask-image:linear-gradient(black,transparent 62%); }
.realm-backdrop i:nth-child(1) { position:absolute; right:-8%; bottom:26%; left:-8%; height:32%; opacity:.42; background:#1a141c; clip-path:polygon(0 75%,12% 45%,22% 68%,36% 34%,49% 67%,61% 42%,74% 69%,88% 39%,100% 66%,100% 100%,0 100%); }
.realm-backdrop i:nth-child(2) { position:absolute; right:0; bottom:0; left:0; height:37%; background:radial-gradient(ellipse at 50% 0%,rgba(112,60,60,.2),transparent 50%),linear-gradient(#0d0a0c,#050507); clip-path:polygon(0 32%,14% 17%,29% 27%,45% 8%,60% 24%,77% 11%,100% 28%,100% 100%,0 100%); }
.realm-backdrop i:nth-child(3) { position:absolute; top:60px; bottom:0; left:50%; width:1px; opacity:.25; background:linear-gradient(var(--realm-gold),transparent); box-shadow:-340px 90px var(--realm-line),340px 90px var(--realm-line); }
.topbar { position:relative; z-index:var(--z-hud); height:70px; padding:0 clamp(16px,3vw,44px); border:0; border-bottom:1px solid var(--realm-line-soft); background:linear-gradient(180deg,rgba(20,17,22,.96),rgba(14,12,16,.82)); backdrop-filter:blur(10px); box-shadow:0 10px 35px rgba(0,0,0,.28); }
.topbar:after { content:''; position:absolute; right:4%; bottom:-1px; left:4%; height:1px; background:linear-gradient(90deg,transparent,var(--realm-copper),transparent); }
.brand { display:flex; align-items:center; gap:10px; color:#ead9bd; font:500 10px/1.05 'DM Mono',monospace; letter-spacing:.17em; text-align:left; }
.brand b { color:#fff0d6; font:600 16px 'Playfair Display',serif; letter-spacing:.12em; }
.brand-mark { display:grid; place-items:center; width:35px; aspect-ratio:1; border:1px solid var(--realm-line); transform:rotate(45deg); color:var(--realm-gold); }
.brand-mark::first-letter { transform:rotate(-45deg); }
.phase-pill { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:8px; color:#d3c4b2; }
.phase-pill > span { grid-row:1 / 3; width:9px; height:9px; background:var(--realm-ember); box-shadow:0 0 16px rgba(239,138,69,.72); animation:active-pulse 1.8s ease-in-out infinite; }
.phase-pill b { font:500 10px 'DM Mono',monospace; letter-spacing:.13em; }
.phase-pill small { color:#8f8175; font:8px 'DM Mono',monospace; letter-spacing:.12em; }
.icon-button { min-width:42px; width:42px; min-height:42px; height:42px; border-color:var(--realm-line); border-radius:50%; color:#d9c8ae; background:linear-gradient(145deg,#393137,#16151a); box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 18px rgba(0,0,0,.28); }
.scoreboard { position:relative; z-index:var(--z-hud); width:min(1180px,95vw); margin:18px auto 10px; }
.player-panel { min-width:220px; padding:8px 14px 8px 8px; color:#b7a996; border-bottom:1px solid var(--realm-line); background:linear-gradient(90deg,rgba(53,43,45,.68),transparent); clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%); }
.player-panel.human { padding:8px 8px 8px 14px; background:linear-gradient(-90deg,rgba(53,43,45,.68),transparent); clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%); }
.player-panel .character-portrait--score { width:50px; border:2px solid color-mix(in srgb,var(--portrait-accent) 35%,var(--realm-copper)); box-shadow:0 0 0 4px rgba(11,10,13,.72),0 0 22px color-mix(in srgb,var(--portrait-accent) 19%,transparent); }
.player-panel p { color:#d4c3aa; font-size:9px; }
.player-panel p small { color:#7f7167; letter-spacing:.1em; }
.player-panel strong { position:relative; color:#fff0d7; font:600 27px 'Playfair Display',serif; font-variant-numeric:tabular-nums; }
.player-panel strong em { position:absolute; top:-3px; left:calc(100% + 7px); color:#ffce7a; font:700 13px Manrope,sans-serif; font-style:normal; animation:score-rise var(--motion-resolve) var(--ease-impact) both; }
.player-panel.human strong em { right:calc(100% + 7px); left:auto; }
.player-panel > div > span { color:#948475; font:9px 'DM Mono',monospace; letter-spacing:.08em; }
.player-panel > div > span i { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--realm-copper); }
.player-panel.score-changed strong { animation:score-flare var(--motion-resolve) var(--ease-impact); }
.center-status { min-width:170px; }
.trump { position:relative; display:grid; grid-template-columns:1fr; place-items:center; width:90px; aspect-ratio:1; margin:auto; gap:0; border:1px solid var(--realm-line); border-radius:50%; background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.1),rgba(59,43,48,.76) 38%,rgba(11,10,14,.92) 72%); box-shadow:inset 0 0 0 5px rgba(9,8,11,.55),0 12px 32px rgba(0,0,0,.42); }
.trump:before { content:''; position:absolute; inset:-7px; border:1px solid rgba(225,189,120,.18); border-radius:50%; clip-path:polygon(0 0,65% 0,65% 34%,100% 34%,100% 100%,35% 100%,35% 66%,0 66%); }
.trump small { color:#9c8d7d; font-size:7px; letter-spacing:.18em; }
.trump b { font-size:25px; line-height:1; }
.trump > span:not(.trump-orbit) { color:#e8d8c1; font-size:9px; }
.trump-orbit { position:absolute; inset:10px; border:1px solid currentColor; border-radius:50%; opacity:.18; transform:rotate(35deg) scaleY(.5); }
.trump.is-revealed { animation:trump-reveal 850ms var(--ease-impact) both; }
.round-marker { color:#a49078; }
.table { z-index:var(--z-table); width:min(1180px,95vw); min-height:365px; padding:13px 30px 0; border:0; border-radius:46% 46% 18px 18px / 13% 13% 18px 18px; overflow:visible; background:
  radial-gradient(ellipse at 50% 48%,rgba(112,55,74,.28),transparent 25%),
  radial-gradient(ellipse at 50% 48%,transparent 0 37%,rgba(197,129,69,.08) 37.3% 37.8%,transparent 38.1%),
  repeating-radial-gradient(ellipse at 50% 48%,rgba(229,182,111,.035) 0 1px,transparent 1px 32px),
  linear-gradient(165deg,#291a19 0%,#171215 58%,#0b0a0d 100%);
  box-shadow:inset 0 1px rgba(255,221,173,.12),inset 0 -28px 80px rgba(0,0,0,.44),0 35px 75px rgba(0,0,0,.48); }
.table:before { inset:7px; border-color:rgba(225,189,120,.14); border-radius:45% 45% 15px 15px / 12% 12% 15px 15px; box-shadow:inset 0 0 0 6px rgba(5,5,7,.22); }
.table:after { content:''; position:absolute; z-index:-1; right:4%; bottom:-18px; left:4%; height:34px; border-radius:50%; background:#050507; filter:blur(8px); }
.table-engraving { position:absolute; inset:60px 15% 52px; pointer-events:none; border:1px solid rgba(217,164,91,.1); border-radius:50%; }
.table-engraving i { position:absolute; inset:12%; border:1px solid rgba(217,164,91,.075); border-radius:50%; }
.table-engraving i:nth-child(2) { inset:26%; }.table-engraving i:nth-child(3) { inset:39%; }
.table-engraving span { position:absolute; top:50%; left:50%; color:rgba(225,189,120,.18); transform:translate(-50%,-50%); font-size:50px; }
.opponent-zone { min-height:44px; padding:4px 2px 5px; color:#dccbb4; }
.opponent-zone small { color:#897b71; }
.hidden-hand i { width:30px; height:42px; border:1px solid #8b6545; border-radius:5px; background:radial-gradient(circle at 50% 30%,rgba(190,93,160,.24),transparent 31%),repeating-linear-gradient(45deg,#241c2a 0 4px,#141219 4px 8px); box-shadow:3px 4px 0 #09080b; transform:rotate(calc((var(--i,0) - 3) * 2deg)); }
.table-core { grid-template-columns:100px 1fr 100px; min-height:235px; }
.deck-zone,.discard-zone { color:#a89580; }
.deck,.discard { position:relative; width:62px; height:87px; border:1px solid #9d6a3e; border-radius:7px; background:radial-gradient(circle at center,rgba(196,98,167,.18),transparent 38%),repeating-linear-gradient(45deg,#29202d 0 5px,#17141a 5px 10px); box-shadow:5px 5px 0 #171115,9px 9px 0 #09080b,0 0 24px rgba(185,105,73,.12); }
.deck:before { content:''; position:absolute; inset:7px; border:1px solid rgba(226,188,121,.24); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.deck i { position:absolute; inset:14px; border:1px solid rgba(210,123,190,.18); border-radius:50%; }
.deck span { color:var(--realm-gold); text-shadow:0 0 14px rgba(225,189,120,.34); }
.discard { display:grid; place-items:center; background:linear-gradient(145deg,rgba(55,42,43,.75),rgba(14,13,16,.9)); box-shadow:0 10px 24px rgba(0,0,0,.36); }
.discard span { color:#7d6d64; font-size:22px; }
.deck-zone small,.discard-zone small { display:grid; gap:1px; color:#88796d; letter-spacing:.15em; }
.deck-zone small b,.discard-zone small b { color:#ddc49f; font-size:12px; }
.battlefield { position:relative; min-height:220px; display:grid; align-content:center; }
.battlefield-seal { position:absolute; top:50%; left:50%; width:min(390px,82%); aspect-ratio:2.3; border:1px solid rgba(229,182,111,.13); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 12px rgba(229,182,111,.025),inset 0 0 55px rgba(181,86,137,.08); }
.battlefield-seal:before,.battlefield-seal:after { content:''; position:absolute; inset:18%; border:1px solid rgba(229,182,111,.1); border-radius:50%; }
.battlefield-seal:after { inset:38%; background:rgba(225,189,120,.06); }
.battlefield .eyebrow { position:relative; z-index:1; margin-bottom:8px; color:#b39b7b; }
.played-lines { position:relative; z-index:2; min-height:150px; gap:18px; }
.played-line { min-width:190px; gap:5px; }
.played-line em { color:#665950; font:21px 'Playfair Display',serif; }
.vs { display:grid; gap:1px; color:var(--realm-gold); }
.vs span { font-size:17px; }.vs small { color:#76675d; font:7px 'DM Mono',monospace; letter-spacing:.14em; }
.reserve-strip { min-height:62px; justify-content:flex-start; padding:8px 16px 10px; border-top:1px solid var(--realm-line-soft); color:#aa9680; }
.reserve-strip > span { display:flex; align-items:center; gap:7px; min-width:125px; }
.reserve-strip > span i { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--realm-line); transform:rotate(45deg); color:var(--realm-gold); font-style:normal; }
.reserve-strip > span i::first-letter { transform:rotate(-45deg); }
.reserve-strip > div { flex:1; align-items:center; min-height:44px; overflow-x:auto; }
.reserve-strip em { color:#74675e; }
.reserve-strip > small { margin-left:auto; color:#d2baa0; }
.hand-area { position:relative; z-index:var(--z-hud); width:min(1180px,96vw); margin:18px auto 0; }
.hand-heading { padding:0 8px; }
.hand-heading h2 { color:#f0dfc5; font:600 21px 'Playfair Display',serif; }
.selection-summary { color:#948575; font:10px 'DM Mono',monospace; letter-spacing:.06em; }
.selection-summary b { color:var(--realm-gold); font-size:16px; }
.hand-scroll { min-height:244px; gap:8px; padding:15px 8px 12px; scroll-snap-type:x proximity; }
.hand-scroll .game-card { scroll-snap-align:center; animation:deal-card-in var(--motion-card) var(--ease-ritual) both; animation-delay:calc(var(--deal-index) * 55ms); transform-origin:50% 100%; }
.hand-scroll .game-card:hover:not(:disabled) { transform:translateY(-10px) rotate(-.35deg); }
.hand-scroll .game-card.is-selected { transform:translateY(-17px) scale(1.025); filter:drop-shadow(0 0 9px var(--card-glow)) brightness(1.08); }
.hand-scroll .game-card.is-selected:after { content:''; position:absolute; z-index:8; inset:2px; pointer-events:none; border:1px solid var(--card-primary); border-radius:inherit; box-shadow:inset 0 0 20px color-mix(in srgb,var(--card-glow) 38%,transparent),0 0 15px color-mix(in srgb,var(--card-glow) 35%,transparent); }
.hand-scroll .game-card:active:not(:disabled) { transform:translateY(-13px) scale(.985); }
.control-bar { min-height:64px; padding:9px 10px 9px 16px; border-color:var(--realm-line); border-radius:4px 14px 4px 14px; background:linear-gradient(180deg,rgba(52,43,44,.92),rgba(20,18,22,.96)); box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 32px rgba(0,0,0,.3); }
.effect-control { color:#998a7c; }
.effect-control label { color:#e0d0ba; }
.effect-control input { width:18px; height:18px; accent-color:var(--realm-ember); vertical-align:middle; }
.validation { width:fit-content; max-width:100%; margin:8px 0 0; padding:8px 11px; border-left:2px solid #d77a55; border-radius:0 8px 8px 0; color:#ffb18f; background:rgba(80,40,38,.24); font-size:11px; line-height:1.45; }
.validation.is-guidance { border-left-color:var(--realm-gold); color:#c9b89f; background:rgba(129,91,50,.14); }
.log-panel { left:16px; bottom:16px; width:245px; border-color:var(--realm-line); border-radius:3px 14px 3px 14px; background:linear-gradient(145deg,rgba(46,36,38,.94),rgba(15,14,18,.96)); box-shadow:var(--realm-shadow-soft); }
.log-panel p:not(.eyebrow) { color:#a99a88; }
.round-resolution { position:fixed; z-index:25; top:49%; left:50%; display:flex; align-items:center; gap:14px; min-width:280px; padding:13px 20px; border-top:1px solid var(--realm-gold); border-bottom:1px solid var(--realm-copper); transform:translate(-50%,-50%); background:linear-gradient(90deg,transparent,rgba(29,21,27,.94) 16% 84%,transparent); filter:drop-shadow(0 14px 30px rgba(0,0,0,.58)); animation:resolution-reveal var(--motion-resolve) var(--ease-impact) both; pointer-events:none; }
.round-resolution__sigil { display:grid; place-items:center; width:42px; aspect-ratio:1; border:1px solid var(--realm-line); transform:rotate(45deg); color:var(--realm-gold); }
.round-resolution p { display:grid; margin:0; }
.round-resolution small { color:#a89172; font:8px 'DM Mono',monospace; letter-spacing:.16em; }
.round-resolution b { color:#f2dfc0; font:600 20px 'Playfair Display',serif; }
.round-resolution em { color:#c6ad8c; font:10px 'DM Mono',monospace; font-style:normal; }
.bot-card-flight { position:fixed; z-index:80; display:grid; place-items:center; width:68px; aspect-ratio:5/7; border:1px solid var(--realm-gold); border-radius:7px; color:var(--realm-gold); background:radial-gradient(circle,rgba(194,78,170,.26),transparent 35%),repeating-linear-gradient(45deg,#2e2032 0 6px,#151219 6px 12px); box-shadow:0 18px 42px rgba(0,0,0,.58); pointer-events:none; }
.card-flight { transform-origin:center; filter:drop-shadow(0 18px 25px rgba(0,0,0,.5)); }
.game-shell.is-bot-thinking .phase-pill > span { background:var(--realm-magenta); box-shadow:0 0 18px rgba(217,103,221,.72); }
.game-shell.is-resolving .control-bar { pointer-events:none; opacity:.78; }

/* Modal hierarchy: carved, not SaaS glass */
.modal-wrap { z-index:var(--z-modal); background:rgba(4,3,6,.78); backdrop-filter:blur(6px) saturate(.78); animation:veil-in 220ms ease both; }
.finish-modal,.debug-modal,.library-modal,.characters-modal,.tutorial-modal,.detail-card-modal,.reserve-effect-modal {
  border-color:var(--realm-line); color:var(--realm-ink);
  background:radial-gradient(circle at 50% 0%,rgba(132,69,92,.18),transparent 34%),linear-gradient(155deg,#292126,#111014 72%);
  box-shadow:var(--realm-shadow),inset 0 1px rgba(255,255,255,.05);
  animation:panel-summon 380ms var(--ease-ritual) both;
}
.finish-modal,.library-modal,.characters-modal,.reserve-effect-modal { border-radius:5px 24px 5px 24px; }
.modal-close { width:44px; height:44px; color:#d4b994; }
.library-modal h2,.characters-modal h2,.reserve-effect-modal h2 { color:#f3dfbf; }
.library-modal > p:not(.eyebrow),.characters-modal > p:not(.eyebrow),.reserve-effect-instruction { color:#b8aa99; }
.library-grid { scrollbar-color:#7c593b transparent; }
.library-section-label { color:#c09a67; }
.character-card { border-color:var(--realm-line-soft); border-radius:3px 14px 3px 14px; background:linear-gradient(145deg,rgba(69,52,54,.44),rgba(22,19,23,.74)); }
.character-card:is(button):hover,.character-card.is-selected { border-color:var(--realm-gold); background:linear-gradient(145deg,rgba(103,70,58,.5),rgba(29,22,28,.82)); box-shadow:inset 3px 0 var(--realm-copper); }
.character-card h3 { color:#f0ddbf; }
.character-card strong { color:#d1a76e; }
.character-select-modal .character-actions { position:sticky; z-index:6; bottom:-30px; margin:18px -30px -30px; padding:14px 30px 20px; border-top:1px solid var(--realm-line-soft); background:linear-gradient(to top,#111014 78%,rgba(17,16,20,.9)); backdrop-filter:blur(12px); }
.opponent-preview { border-color:var(--realm-line); border-radius:3px 14px 3px 14px; background:rgba(48,38,41,.48); }
.reserve-effect-zones > section { border-color:var(--realm-line-soft); border-radius:3px 14px 3px 14px; background:rgba(52,41,44,.34); }
.reserve-effect-card.is-selected { border-color:var(--realm-gold); background:rgba(190,126,63,.11); box-shadow:0 0 0 2px rgba(225,189,120,.1); }
.reserve-effect-card.is-selected .reserve-effect-check { color:#221207; border-color:var(--realm-gold); background:var(--realm-gold); }
.reserve-effect-modal footer { border-top-color:var(--realm-line-soft); background:linear-gradient(to top,#111014 78%,rgba(17,16,20,.88)); }
.finish-wrap { background:radial-gradient(circle at 50% 38%,rgba(206,128,75,.2),transparent 31%),rgba(4,3,6,.88); }
.finish-modal { position:relative; isolation:isolate; width:min(660px,100%); overflow:hidden; padding:42px 38px; }
.finish-rays { position:absolute; z-index:-1; top:50%; left:50%; width:520px; aspect-ratio:1; transform:translate(-50%,-50%); opacity:.18; background:repeating-conic-gradient(from 0deg,var(--realm-gold) 0 1deg,transparent 1deg 16deg); mask-image:radial-gradient(circle,transparent 0 18%,black 19% 49%,transparent 70%); animation:finish-rays 18s linear infinite; }
.finish-orb { border-color:var(--realm-gold); color:var(--realm-gold); background:radial-gradient(circle at 40% 35%,rgba(255,228,173,.32),rgba(120,62,56,.18) 42%,rgba(10,9,12,.9) 72%); box-shadow:0 0 0 8px rgba(225,189,120,.045),0 0 52px rgba(225,150,87,.23),inset 0 0 35px rgba(225,139,93,.14); animation:finish-orb 1.2s var(--ease-impact) both; }
.finish-modal h2 { color:#f6e3c2; }
.final-score { display:flex; align-items:center; justify-content:center; gap:25px; margin:22px 0; }
.final-score span { display:grid; min-width:120px; color:#a99884; font:9px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.final-score b { color:#fff0d4; font:600 38px 'Playfair Display',serif; }
.final-score i { color:#8e765d; font-style:normal; }
.finish-modal blockquote { border-color:var(--realm-line-soft); color:#c7b6a2; background:rgba(46,35,39,.4); }
.finish-actions { display:flex; justify-content:center; gap:10px; }
.character-toast { right:18px; bottom:112px; width:min(330px,calc(100vw - 36px)); border-color:var(--realm-line); border-radius:3px 14px 3px 14px; background:linear-gradient(145deg,rgba(48,36,40,.96),rgba(15,14,18,.97)); }

/* Motion language */
@keyframes scene-arrive { from { opacity:0; transform:translateY(24px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes dial-breathe { 50% { opacity:.68; transform:translateX(-50%) scale(1.015); } }
@keyframes active-pulse { 50% { opacity:.52; transform:scale(.78); } }
@keyframes deal-card-in { from { opacity:0; transform:translate(70px,-60px) rotate(8deg) scale(.82); } to { opacity:1; transform:translate(0,0) rotate(0) scale(1); } }
@keyframes trump-reveal { 0% { opacity:.3; transform:scale(.72) rotate(-8deg); filter:brightness(1.8); } 65% { transform:scale(1.08) rotate(1deg); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes score-rise { 0% { opacity:0; transform:translateY(12px) scale(.8); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-22px) scale(1.08); } }
@keyframes score-flare { 45% { color:#ffd790; text-shadow:0 0 18px rgba(255,187,94,.65); transform:scale(1.12); } }
@keyframes resolution-reveal { 0% { opacity:0; transform:translate(-50%,-44%) scale(.85); filter:blur(4px); } 25%,72% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); } 100% { opacity:0; transform:translate(-50%,-56%) scale(1.02); } }
@keyframes veil-in { from { opacity:0; } to { opacity:1; } }
@keyframes panel-summon { from { opacity:0; transform:translateY(18px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes finish-rays { to { transform:translate(-50%,-50%) rotate(1turn); } }
@keyframes finish-orb { 0% { opacity:0; transform:scale(.45) rotate(-45deg); } 62% { opacity:1; transform:scale(1.08) rotate(4deg); } 100% { transform:none; } }

/* Mobile is a dedicated play surface, not compressed desktop */
@media (max-width:700px) {
  .landing { align-items:end; padding:24px 16px 34px; }
  .realm-sun { top:25%; }
  .realm-mountains { bottom:23%; height:40%; }
  .hero { padding:18px 4px; }
  .hero:before { margin-bottom:18px; }
  .hero:after,.protocol-card { display:none; }
  .hero h1 { font-size:clamp(46px,15vw,68px); }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .hero-actions .primary { grid-column:1 / -1; min-height:54px; }
  .landing-notes { margin-top:22px; gap:7px; font-size:8px; }
  .landing-notes span+span:before { margin-right:7px; }
  .topbar { height:60px; padding:0 12px; }
  .brand span:last-child { display:none; }
  .brand-mark { width:34px; }
  .phase-pill { display:grid; position:absolute; top:64px; right:14px; z-index:7; padding:7px 10px; border:1px solid var(--realm-line-soft); background:rgba(20,16,20,.88); clip-path:polygon(0 0,100% 0,100% 75%,92% 100%,0 100%); }
  .phase-pill small { display:none; }
  .phase-pill b { font-size:11px; }
  .header-actions { gap:4px; }
  .icon-button { min-width:44px; width:44px; min-height:44px; height:44px; }
  .scoreboard { grid-template-columns:1fr 104px 1fr; gap:4px; width:calc(100% - 16px); margin:15px 8px 7px; }
  .scoreboard .center-status { order:0; min-width:0; }
  .player-panel,.player-panel.human { min-width:0; width:auto; padding:5px; background:none; clip-path:none; border:0; }
  .player-panel .character-portrait--score { width:34px; }
  .player-panel > div { min-width:0; }
  .player-panel p { max-width:75px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
  .player-panel p small,.player-panel > div > span { display:none; }
  .player-panel strong { font-size:20px; }
  .trump { width:69px; }
  .trump b { font-size:20px; }.trump small { font-size:7px; }.trump > span:not(.trump-orbit) { font-size:8px; }
  .round-marker { font-size:8px; }
  .table { width:calc(100% - 10px); min-height:300px; padding:9px 8px 0; border-radius:42% 42% 12px 12px / 9% 9% 12px 12px; }
  .opponent-zone { min-height:40px; font-size:9px; }
  .opponent-zone .character-portrait { width:32px; }
  .hidden-hand i { width:22px; height:33px; margin-left:-11px; }
  .table-core { grid-template-columns:54px 1fr 54px; min-height:190px; }
  .deck,.discard { width:45px; height:64px; transform:none; box-shadow:3px 3px 0 #171115,6px 6px 0 #09080b; }
  .deck-zone small,.discard-zone small { font-size:8px; letter-spacing:.08em; }
  .battlefield { min-height:185px; }
  .battlefield .eyebrow { max-width:190px; margin:0 auto 5px; font-size:8px; }
  .battlefield-seal { width:94%; }
  .played-lines { min-height:115px; gap:6px; }
  .played-line { min-width:67px; max-width:92px; gap:3px; }
  .vs small { display:none; }
  .reserve-strip { min-height:52px; padding:6px 8px; gap:6px; }
  .reserve-strip > span { min-width:0; font-size:0; }
  .reserve-strip > span i { width:22px; height:22px; font-size:9px; }
  .reserve-strip > div { gap:2px; }
  .reserve-strip > small { font-size:9px; }
  .hand-area { width:100%; margin:10px auto 92px; padding:0 8px; }
  .hand-heading { align-items:center; }
  .hand-heading .eyebrow { font-size:8px; }
  .hand-heading h2 { font-size:17px; }
  .selection-summary { max-width:110px; font-size:9px; }
  .hand-scroll { min-height:225px; margin-right:-8px; padding:13px 12px 9px 3px; gap:7px; }
  .hand-scroll .game-card--compact { flex-basis:137px; width:137px; }
  .control-bar { position:fixed; z-index:16; right:7px; bottom:max(7px,env(safe-area-inset-bottom)); left:7px; min-height:72px; padding:8px; border-radius:4px 16px 4px 16px; backdrop-filter:blur(12px); }
  .effect-control { width:100%; max-height:25px; overflow:hidden; font-size:9px; }
  .effect-control span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .effect-control label { display:flex; align-items:center; gap:4px; }
  .effect-control small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .action-controls { width:100%; flex-wrap:nowrap; }
  .action-controls button { min-height:46px; padding:9px 11px; }
  .action-controls .primary { flex:1.4; }
  .validation { position:fixed; z-index:17; right:12px; bottom:88px; left:12px; width:auto; margin:0; padding:8px 10px; background:rgba(34,21,23,.96); box-shadow:0 10px 28px rgba(0,0,0,.34); }
  .round-resolution { top:43%; width:calc(100% - 32px); min-width:0; }
  .log-panel { display:none; }
  .modal-wrap { padding:8px; }
  .library-modal,.characters-modal { width:100%; max-height:calc(100svh - 16px); padding:24px 14px 18px; }
  .character-card { grid-template-columns:70px 1fr; padding:10px; }
  .character-card .character-portrait { width:70px; }
  .character-select-modal .character-actions { bottom:-18px; margin:18px -14px -18px; padding:12px 14px calc(16px + env(safe-area-inset-bottom)); }
  .finish-modal { padding:34px 16px 24px; }
  .finish-modal h2 { font-size:30px; }
  .final-score { gap:12px; }
  .final-score span { min-width:90px; }
  .final-score b { font-size:32px; }
  .finish-actions { flex-direction:column-reverse; }
  .finish-actions button { width:100%; }
  .character-toast { bottom:92px; }
}

@media (min-width:1100px) and (min-height:820px) {
  .game-shell { padding-bottom:20px; }
  .scoreboard { margin-top:8px; }
  .table { min-height:320px; }
  .table-core { min-height:205px; }
  .battlefield { min-height:195px; }
  .hand-area { margin-top:6px; }
  .hand-scroll { min-height:202px; padding-top:10px; }
  .hand-scroll .game-card--compact { flex-basis:132px; width:132px; }
}

/* Editorial typography — mythic display, readable interface, compact game data. */
body,button,input,select,textarea {
  font-family:var(--font-ui);
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.subtitle,.protocol-card strong,.brand b,
.player-panel strong,.trump b,.hand-heading h2,
.finish-modal h2,.library-modal h2,.characters-modal h2,
.reserve-effect-modal h2,.tutorial-content h2,.detail-content h2,
.character-card h3,.round-resolution b,.final-score b,
.game-card__value,.game-card__name,.character-portrait b,
.played-line em,.vs span {
  font-family:var(--font-display);
}

.eyebrow,.phase-pill,.phase-pill b,.phase-pill small,.round-marker,
.trump small,.reserve-strip,.selection-summary,.deck-zone small,
.discard-zone small,.opponent-zone small,.vs small,
.round-resolution small,.round-resolution em,.final-score span,
.library-section-label,.reserve-effect-zones header span,
.reserve-effect-seal small,.tutorial-modal > header > div:first-child,
.tutorial-score-demo small,.tutorial-reserve-demo small,
.tutorial-signal span,.tutorial-trump-orb small,.tutorial-final-demo small,
.game-card__type,.game-card__cost,
.game-card--detail .game-card__element small {
  font-family:var(--font-label);
  font-weight:600;
  letter-spacing:.09em;
}

.brand {
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.brand b {
  font-size:19px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:none;
}
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.11em; }
.phase-pill { font-size:11px; letter-spacing:.08em; }
.phase-pill b { font-size:12px; letter-spacing:.08em; }
.phase-pill small { font-size:9px; letter-spacing:.07em; }
.player-panel p {
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.055em;
}
.player-panel p small {
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:500;
}
.player-panel strong {
  font-size:29px;
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
}
.player-panel > div > span {
  font-family:var(--font-label);
  font-size:10px;
  font-weight:500;
  letter-spacing:.035em;
}
.trump small { font-size:9px; letter-spacing:.09em; }
.trump b { font-size:21px; font-weight:700; }
.round-marker { font-size:10px; letter-spacing:.08em; }
.opponent-zone { font-size:12px; }
.opponent-zone small { font-size:9px; letter-spacing:.06em; }
.deck-zone small,.discard-zone small { font-size:9px; letter-spacing:.07em; }
.battlefield .eyebrow { font-size:10px; letter-spacing:.1em; }
.reserve-strip { font-size:10px; letter-spacing:.055em; }
.hand-heading h2 { font-size:25px; font-weight:700; letter-spacing:.015em; }
.selection-summary { font-size:11px; letter-spacing:.055em; }
.log-panel p:not(.eyebrow) { font-size:11px; line-height:1.48; }
.primary,.secondary { font-weight:600; letter-spacing:.01em; }

.game-card__value {
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
}
.game-card--premium .game-card__value { font-size:22px; }
.game-card--premium .game-card__type,
.game-card--premium .game-card__cost {
  font-size:7.5px;
  letter-spacing:.115em;
}
.game-card--premium .game-card__name {
  margin-top:3px;
  font-size:17.5px;
  font-weight:700;
  line-height:.94;
  letter-spacing:.005em;
}
.game-card--atelier .game-card__type,
.game-card--atelier .game-card__cost {
  font-family:var(--font-label);
  font-weight:600;
  letter-spacing:.105em;
}
.game-card--atelier .game-card__name {
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:700;
  line-height:.96;
}
.game-card--detail .game-card__name { font-size:30px; line-height:.94; }
.detail-content h2,.tutorial-content h2 { font-weight:700; letter-spacing:.005em; }
.library-modal h2,.characters-modal h2,.reserve-effect-modal h2,.finish-modal h2 {
  font-weight:700;
  letter-spacing:.01em;
}
.round-resolution small { font-size:9px; letter-spacing:.1em; }
.round-resolution b { font-size:22px; font-weight:700; }
.round-resolution em { font-size:10px; letter-spacing:.045em; }
.final-score span { font-size:10px; letter-spacing:.08em; }
.final-score b {
  font-size:40px;
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
}

@media (max-width:700px) {
  .brand b { font-size:18px; }
  .phase-pill b { font-size:11px; }
  .player-panel p { font-size:9px; letter-spacing:.04em; }
  .player-panel strong { font-size:22px; }
  .trump small { font-size:8px; }
  .trump b { font-size:21px; }
  .round-marker { font-size:9px; }
  .opponent-zone { font-size:10px; }
  .deck-zone small,.discard-zone small { font-size:8.5px; }
  .battlefield .eyebrow,.hand-heading .eyebrow { font-size:9px; }
  .hand-heading h2 { font-size:20px; }
  .selection-summary { font-size:10px; letter-spacing:.04em; }
  .game-card--premium .game-card__name { font-size:16.5px; }
  .game-card--premium .game-card__type,
  .game-card--premium .game-card__cost { font-size:7px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .card-flight,.bot-card-flight { display:none !important; }
}

/* ==========================================================================
   Technology ritual — a physical 2.5D board with restrained holographic data.
   ========================================================================== */
.game-shell {
  --signal:#e1bd78;
  --signal-rgb:225,189,120;
  --signal-soft:rgba(225,189,120,.16);
  --signal-bright:#fff0c7;
  perspective:1600px;
  background:
    radial-gradient(ellipse at 50% 27%,rgba(var(--signal-rgb),.105),transparent 34%),
    radial-gradient(circle at 11% 18%,rgba(94,66,155,.12),transparent 25%),
    linear-gradient(180deg,#100c14 0%,#09090e 43%,#050609 100%);
}
.game-shell[data-trump="fire"] { --signal:#ff7042; --signal-rgb:255,112,66; --signal-soft:rgba(255,112,66,.18); --signal-bright:#ffd0ae; }
.game-shell[data-trump="water"] { --signal:#56cdff; --signal-rgb:86,205,255; --signal-soft:rgba(86,205,255,.17); --signal-bright:#c8f1ff; }
.game-shell[data-trump="wind"] { --signal:#7ee8cc; --signal-rgb:126,232,204; --signal-soft:rgba(126,232,204,.16); --signal-bright:#d5fff3; }
.game-shell[data-trump="earth"] { --signal:#e0ab5b; --signal-rgb:224,171,91; --signal-soft:rgba(224,171,91,.17); --signal-bright:#ffe3aa; }
.game-shell[data-trump="light"] { --signal:#ffe597; --signal-rgb:255,229,151; --signal-soft:rgba(255,229,151,.17); --signal-bright:#fffbe7; }
.game-shell[data-trump="darkness"] { --signal:#9c66ea; --signal-rgb:156,102,234; --signal-soft:rgba(156,102,234,.19); --signal-bright:#ddc8ff; }
.game-shell[data-trump="chaos"] { --signal:#de5bef; --signal-rgb:222,91,239; --signal-soft:rgba(222,91,239,.18); --signal-bright:#f5c4ff; }
.game-shell::before {
  content:"";
  position:fixed;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(90deg,transparent 49.94%,rgba(var(--signal-rgb),.13) 50%,transparent 50.06%),
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.013) 4px 5px);
  mask-image:linear-gradient(to bottom,black,transparent 74%);
  mix-blend-mode:screen;
}
.ritual-fx {
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.72;
  mask-image:linear-gradient(to bottom,black 0 65%,transparent 93%);
}
.realm-backdrop { z-index:-1; }
.realm-backdrop::before {
  border-color:rgba(var(--signal-rgb),.12);
  box-shadow:0 0 0 80px rgba(var(--signal-rgb),.018),0 0 0 160px rgba(var(--signal-rgb),.012);
}
.realm-backdrop i:nth-child(3) {
  background:linear-gradient(rgba(var(--signal-rgb),.8),transparent);
  box-shadow:-340px 90px rgba(var(--signal-rgb),.12),340px 90px rgba(var(--signal-rgb),.12);
}

.topbar {
  border-bottom-color:rgba(var(--signal-rgb),.16);
  background:
    linear-gradient(90deg,transparent,rgba(var(--signal-rgb),.035) 50%,transparent),
    linear-gradient(180deg,rgba(15,15,22,.97),rgba(9,9,14,.87));
}
.topbar::before {
  content:"SYSTEM / RITUAL-OS 7.4";
  position:absolute;
  bottom:4px;
  left:50%;
  color:rgba(var(--signal-rgb),.38);
  font:600 7px/1 var(--font-label);
  letter-spacing:.18em;
  transform:translateX(-50%);
}
.topbar::after { background:linear-gradient(90deg,transparent,var(--signal),transparent); opacity:.7; }
.phase-pill > span { background:var(--signal); box-shadow:0 0 18px rgba(var(--signal-rgb),.7); }
.icon-button {
  border-color:rgba(var(--signal-rgb),.24);
  background:radial-gradient(circle at 35% 28%,rgba(var(--signal-rgb),.11),transparent 40%),linear-gradient(145deg,#2d2931,#121219);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.32),0 0 15px rgba(var(--signal-rgb),.04);
}
.icon-button:hover { color:var(--signal-bright); border-color:rgba(var(--signal-rgb),.58); box-shadow:inset 0 0 16px rgba(var(--signal-rgb),.08),0 0 22px rgba(var(--signal-rgb),.1); }

.scoreboard { perspective:900px; }
.player-panel {
  position:relative;
  overflow:visible;
  border:1px solid rgba(var(--signal-rgb),.18);
  border-right:0;
  background:
    linear-gradient(90deg,rgba(var(--signal-rgb),.07),transparent 68%),
    linear-gradient(110deg,rgba(46,40,50,.86),rgba(16,16,22,.22));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.22);
}
.player-panel.human {
  border:1px solid rgba(var(--signal-rgb),.18);
  border-left:0;
  background:
    linear-gradient(-90deg,rgba(var(--signal-rgb),.07),transparent 68%),
    linear-gradient(-110deg,rgba(46,40,50,.86),rgba(16,16,22,.22));
}
.player-panel::after {
  content:"LINK · STABLE";
  position:absolute;
  top:6px;
  right:11%;
  color:rgba(var(--signal-rgb),.44);
  font:600 7px/1 var(--font-label);
  letter-spacing:.12em;
}
.player-panel.human::after { right:auto; left:11%; content:"PILOTE · ACTIF"; }
.center-status { transform:translateZ(28px); }
.trump {
  border-color:rgba(var(--signal-rgb),.4);
  color:var(--signal);
  background:
    radial-gradient(circle at 50% 50%,rgba(var(--signal-rgb),.18),transparent 38%),
    conic-gradient(from 15deg,rgba(var(--signal-rgb),.05),rgba(var(--signal-rgb),.22),rgba(var(--signal-rgb),.05),rgba(var(--signal-rgb),.15),rgba(var(--signal-rgb),.05)),
    #0b0b11;
  box-shadow:inset 0 0 0 5px rgba(9,8,11,.68),inset 0 0 24px rgba(var(--signal-rgb),.11),0 12px 32px rgba(0,0,0,.45),0 0 26px rgba(var(--signal-rgb),.08);
}
.trump::after {
  content:"";
  position:absolute;
  inset:-13px;
  border:1px dashed rgba(var(--signal-rgb),.24);
  border-radius:50%;
  animation:ritual-orbit 18s linear infinite;
}
.trump b { color:var(--signal) !important; text-shadow:0 0 14px rgba(var(--signal-rgb),.62); }
.trump-orbit { animation:ritual-orbit 8s linear infinite reverse; }

.table {
  --table-rx:-1.15deg;
  --table-ry:0deg;
  --table-light-x:50%;
  transform:rotateX(var(--table-rx)) rotateY(var(--table-ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform 500ms cubic-bezier(.2,.75,.2,1);
  border:1px solid rgba(var(--signal-rgb),.26);
  border-radius:34px 34px 18px 18px;
  background:
    radial-gradient(ellipse at var(--table-light-x) 20%,rgba(var(--signal-rgb),.11),transparent 28%),
    linear-gradient(90deg,transparent 0 8%,rgba(var(--signal-rgb),.035) 8.1% 8.25%,transparent 8.35% 91.65%,rgba(var(--signal-rgb),.035) 91.75% 91.9%,transparent 92%),
    radial-gradient(ellipse at 50% 48%,rgba(117,61,116,.16),transparent 29%),
    repeating-radial-gradient(ellipse at 50% 48%,rgba(var(--signal-rgb),.028) 0 1px,transparent 1px 32px),
    linear-gradient(164deg,#211923 0%,#121218 58%,#09090e 100%);
  box-shadow:
    inset 0 1px rgba(255,240,218,.12),
    inset 0 -30px 80px rgba(0,0,0,.54),
    0 1px 0 rgba(var(--signal-rgb),.3),
    0 16px 0 -6px #09090d,
    0 18px 0 -6px rgba(var(--signal-rgb),.16),
    0 42px 90px rgba(0,0,0,.58);
}
.table::before {
  inset:8px;
  border-color:rgba(var(--signal-rgb),.16);
  border-radius:28px 28px 13px 13px;
  box-shadow:inset 0 0 0 5px rgba(4,5,9,.3),inset 0 0 42px rgba(var(--signal-rgb),.035);
}
.table::after {
  right:2.6%;
  bottom:-20px;
  left:2.6%;
  height:23px;
  border:1px solid rgba(var(--signal-rgb),.12);
  border-top:0;
  border-radius:0 0 38% 38%;
  background:linear-gradient(180deg,#111116,#050508 72%);
  box-shadow:0 24px 34px rgba(0,0,0,.45);
  filter:none;
  transform:translateZ(-20px);
}
.ritual-grid {
  position:absolute;
  z-index:0;
  inset:9px;
  overflow:hidden;
  border-radius:26px;
  pointer-events:none;
  opacity:.58;
  background:
    linear-gradient(90deg,transparent 49.9%,rgba(var(--signal-rgb),.13) 50%,transparent 50.1%),
    linear-gradient(0deg,transparent 49.8%,rgba(var(--signal-rgb),.08) 50%,transparent 50.2%);
  mask-image:radial-gradient(ellipse at center,black,transparent 76%);
}
.ritual-grid i {
  position:absolute;
  top:50%;
  left:50%;
  width:48%;
  aspect-ratio:1;
  border:1px solid rgba(var(--signal-rgb),.13);
  border-radius:50%;
  transform:translate(-50%,-50%) scaleY(.45);
}
.ritual-grid i:nth-child(2) { width:64%; border-style:dashed; animation:ritual-orbit-flat 24s linear infinite; }
.ritual-grid i:nth-child(3) { width:80%; opacity:.54; }
.ritual-grid i:nth-child(4) { width:96%; border-style:dotted; opacity:.42; animation:ritual-orbit-flat 34s linear infinite reverse; }
.table-engraving { border-color:rgba(var(--signal-rgb),.1); transform:translateZ(1px); }
.table-engraving i { border-color:rgba(var(--signal-rgb),.075); }
.table-engraving span { color:rgba(var(--signal-rgb),.18); text-shadow:0 0 30px rgba(var(--signal-rgb),.22); }

.opponent-zone {
  margin:0 5px;
  padding:6px 10px;
  border-bottom:1px solid rgba(var(--signal-rgb),.11);
  background:linear-gradient(90deg,rgba(var(--signal-rgb),.05),transparent 50%);
  transform:translateZ(8px);
}
.opponent-zone::after {
  content:attr(data-zone-label);
  position:absolute;
  top:7px;
  right:10px;
  color:rgba(var(--signal-rgb),.4);
  font:600 7px/1 var(--font-label);
  letter-spacing:.16em;
}
.hidden-hand { padding-right:2px; perspective:500px; }
.hidden-hand i {
  border-color:rgba(var(--signal-rgb),.35);
  background:
    radial-gradient(circle at 50% 40%,rgba(var(--signal-rgb),.16),transparent 32%),
    repeating-linear-gradient(45deg,#211a28 0 4px,#101117 4px 8px);
  box-shadow:3px 4px 0 #08090d,0 0 14px rgba(var(--signal-rgb),.04);
  transform:rotateY(-8deg) rotateZ(-1deg);
}
.table-core { max-width:850px; transform-style:preserve-3d; }
.deck-zone,.discard-zone {
  position:relative;
  min-height:124px;
  justify-content:center;
  border:1px solid rgba(var(--signal-rgb),.08);
  background:linear-gradient(145deg,rgba(var(--signal-rgb),.035),transparent 62%);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transform:translateZ(12px);
}
.deck-zone::before,.discard-zone::before {
  content:attr(data-zone-label);
  position:absolute;
  top:7px;
  left:9px;
  color:rgba(var(--signal-rgb),.34);
  font:600 7px/1 var(--font-label);
}
.deck,.discard {
  border-color:rgba(var(--signal-rgb),.46);
  background:
    radial-gradient(circle at 50% 42%,rgba(var(--signal-rgb),.18),transparent 35%),
    repeating-linear-gradient(45deg,#211a27 0 5px,#101117 5px 10px);
  box-shadow:5px 5px 0 #111117,9px 9px 0 #07070b,0 0 28px rgba(var(--signal-rgb),.1);
  transform:translateZ(14px);
}
.discard { background:linear-gradient(145deg,rgba(var(--signal-rgb),.08),rgba(12,12,17,.92)); }
.deck::before { border-color:rgba(var(--signal-rgb),.34); }
.deck span { color:var(--signal); text-shadow:0 0 15px rgba(var(--signal-rgb),.65); }
.deck-zone small b,.discard-zone small b { color:var(--signal-bright); }

.battlefield {
  min-height:235px;
  transform-style:preserve-3d;
  transform:translateZ(7px);
}
.battlefield-seal {
  width:min(520px,94%);
  aspect-ratio:2.42;
  border-color:rgba(var(--signal-rgb),.22);
  background:
    radial-gradient(circle at center,rgba(var(--signal-rgb),.12),transparent 11%),
    repeating-conic-gradient(from 0deg,rgba(var(--signal-rgb),.09) 0 .7deg,transparent .7deg 14deg);
  box-shadow:0 0 0 12px rgba(var(--signal-rgb),.018),inset 0 0 72px rgba(var(--signal-rgb),.075),0 0 42px rgba(var(--signal-rgb),.045);
  mask-image:radial-gradient(ellipse at center,black 0 67%,transparent 72%);
  animation:seal-breathe 4.8s ease-in-out infinite;
}
.battlefield-seal::before,.battlefield-seal::after,.battlefield-seal i {
  position:absolute;
  content:"";
  inset:12%;
  border:1px solid rgba(var(--signal-rgb),.16);
  border-radius:50%;
}
.battlefield-seal::before { inset:20%; border-style:dashed; animation:ritual-orbit-flat 28s linear infinite; }
.battlefield-seal::after { inset:37%; background:rgba(var(--signal-rgb),.055); box-shadow:0 0 26px rgba(var(--signal-rgb),.12); }
.battlefield-seal i:nth-child(1) { transform:rotate(60deg) scaleY(.55); }
.battlefield-seal i:nth-child(2) { transform:rotate(-60deg) scaleY(.55); }
.battlefield-seal i:nth-child(3) { inset:28%; border-style:dotted; animation:ritual-orbit-flat 18s linear infinite reverse; }
.ritual-core {
  position:absolute;
  z-index:0;
  top:53%;
  left:50%;
  display:grid;
  place-items:center;
  width:94px;
  aspect-ratio:1;
  border:1px solid rgba(var(--signal-rgb),.22);
  border-radius:50%;
  color:var(--signal);
  transform:translate(-50%,-50%) translateZ(-2px) scaleY(.64);
  background:radial-gradient(circle,rgba(var(--signal-rgb),.19),rgba(8,8,13,.76) 48%,transparent 70%);
  box-shadow:inset 0 0 24px rgba(var(--signal-rgb),.14),0 0 34px rgba(var(--signal-rgb),.12);
}
.ritual-core b {
  color:var(--signal);
  font:700 19px/1 var(--font-display);
  text-shadow:0 0 14px rgba(var(--signal-rgb),.8);
  transform:scaleY(1.56);
}
.ritual-core span { position:absolute; top:8px; right:22px; width:5px; aspect-ratio:1; border-radius:50%; background:var(--signal); box-shadow:0 0 14px var(--signal); animation:core-pulse 1.7s ease-in-out infinite; }
.ritual-core__orbit { position:absolute; border:1px dashed rgba(var(--signal-rgb),.28); border-radius:50%; }
.ritual-core__orbit--outer { inset:-10px; animation:ritual-orbit 15s linear infinite; }
.ritual-core__orbit--inner { inset:14px; animation:ritual-orbit 9s linear infinite reverse; }
.battlefield .eyebrow {
  color:var(--signal-bright);
  text-shadow:0 0 18px rgba(var(--signal-rgb),.25);
}
.played-lines { transform:translateZ(28px); }
.played-line {
  min-height:116px;
  padding:8px;
  border:1px solid rgba(var(--signal-rgb),.07);
  background:radial-gradient(ellipse at center,rgba(var(--signal-rgb),.04),transparent 72%);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
.vs { color:var(--signal); text-shadow:0 0 13px rgba(var(--signal-rgb),.54); }
.ritual-telemetry {
  position:absolute;
  z-index:3;
  right:11%;
  bottom:2px;
  left:11%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  color:rgba(var(--signal-rgb),.52);
  font:600 7px/1 var(--font-label);
  letter-spacing:.12em;
}
.ritual-telemetry i { height:1px; background:linear-gradient(90deg,transparent,var(--signal),transparent); opacity:.34; }
.reserve-strip {
  margin-top:4px;
  border-top-color:rgba(var(--signal-rgb),.14);
  background:linear-gradient(90deg,rgba(var(--signal-rgb),.035),transparent 36% 64%,rgba(var(--signal-rgb),.025));
  transform:translateZ(10px);
}
.reserve-strip > span i { border-color:rgba(var(--signal-rgb),.38); color:var(--signal); box-shadow:0 0 16px rgba(var(--signal-rgb),.07); }

.hand-area { perspective:1200px; }
.hand-heading {
  position:relative;
  border-left:1px solid rgba(var(--signal-rgb),.27);
  border-right:1px solid rgba(var(--signal-rgb),.27);
}
.hand-heading::after {
  content:"HAND / MATERIALIZED";
  position:absolute;
  right:12px;
  bottom:-8px;
  color:rgba(var(--signal-rgb),.32);
  font:600 7px/1 var(--font-label);
  letter-spacing:.15em;
}
.hand-scroll {
  perspective:1100px;
  perspective-origin:50% 30%;
  mask-image:linear-gradient(90deg,transparent,black 2%,black 98%,transparent);
}
.hand-scroll .game-card {
  --tilt-x:0deg;
  --tilt-y:0deg;
  --glare-x:50%;
  --glare-y:30%;
  --card-lift:0px;
  --card-scale:1;
  animation-fill-mode:backwards;
  transform:perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 190ms ease,filter 190ms ease,box-shadow 190ms ease;
}
.hand-scroll .game-card::before {
  content:"";
  position:absolute;
  z-index:7;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at var(--glare-x) var(--glare-y),rgba(255,255,255,.34),transparent 17%),
    linear-gradient(115deg,transparent 25%,rgba(119,222,255,.08) 37%,rgba(255,167,237,.12) 48%,rgba(255,232,158,.09) 58%,transparent 72%);
  mix-blend-mode:screen;
  transition:opacity 180ms ease;
}
.hand-scroll .game-card:hover:not(:disabled) {
  --card-lift:-12px;
  transform:perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
  filter:brightness(1.07) saturate(1.04);
  box-shadow:0 24px 42px rgba(0,0,0,.5),0 0 0 1px rgba(var(--signal-rgb),.24),0 0 30px color-mix(in srgb,var(--card-glow) 18%,transparent);
}
.hand-scroll .game-card:hover:not(:disabled)::before { opacity:.8; }
.hand-scroll .game-card.is-selected {
  --card-lift:-18px;
  --card-scale:1.025;
  transform:perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
}
.hand-scroll .game-card:active:not(:disabled) {
  --card-lift:-10px;
  --card-scale:.985;
  transform:perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
}
.game-card--table {
  box-shadow:0 18px 28px rgba(0,0,0,.52),0 0 0 1px rgba(var(--signal-rgb),.1),0 0 20px color-mix(in srgb,var(--card-glow) 14%,transparent);
  transform:translateZ(34px);
}
.control-bar {
  position:relative;
  border-color:rgba(var(--signal-rgb),.24);
  background:
    linear-gradient(90deg,rgba(var(--signal-rgb),.055),transparent 30% 70%,rgba(var(--signal-rgb),.035)),
    linear-gradient(180deg,rgba(38,35,44,.95),rgba(13,14,20,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.05),inset 0 0 28px rgba(var(--signal-rgb),.025),0 18px 38px rgba(0,0,0,.34);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.control-bar::before {
  content:"";
  position:absolute;
  top:0;
  left:18%;
  width:22%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  box-shadow:0 0 12px rgba(var(--signal-rgb),.5);
}
.game-shell .primary {
  border-color:var(--signal);
  background:linear-gradient(180deg,var(--signal-bright) 0%,var(--signal) 46%,color-mix(in srgb,var(--signal) 62%,#4e2e22) 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.54),inset 0 -2px rgba(24,12,7,.32),0 8px 28px rgba(var(--signal-rgb),.2);
}
.effect-control input { accent-color:var(--signal); }
.selection-summary b { color:var(--signal); text-shadow:0 0 12px rgba(var(--signal-rgb),.35); }
.log-panel {
  border-color:rgba(var(--signal-rgb),.19);
  background:linear-gradient(145deg,rgba(33,29,38,.94),rgba(10,11,16,.97));
}

@keyframes ritual-orbit { to { transform:rotate(1turn); } }
@keyframes ritual-orbit-flat {
  from { transform:translate(-50%,-50%) scaleY(.45) rotate(0); }
  to { transform:translate(-50%,-50%) scaleY(.45) rotate(1turn); }
}
@keyframes seal-breathe {
  50% { opacity:.72; filter:drop-shadow(0 0 10px rgba(var(--signal-rgb),.08)); }
}
@keyframes core-pulse {
  50% { opacity:.35; transform:scale(.55); }
}

@media (max-width:700px) {
  .game-shell::before { opacity:.12; }
  .topbar::before,.player-panel::after,.opponent-zone::after,.hand-heading::after { display:none; }
  .table {
    --table-rx:0deg !important;
    --table-ry:0deg !important;
    border-radius:18px 18px 12px 12px;
    transform:none !important;
    box-shadow:inset 0 1px rgba(255,240,218,.1),inset 0 -24px 62px rgba(0,0,0,.5),0 10px 0 -5px #09090d,0 28px 58px rgba(0,0,0,.48);
  }
  .table::before { border-radius:13px 13px 8px 8px; }
  .table::after { bottom:-13px; height:15px; }
  .player-panel,.player-panel.human { border:0; background:none; box-shadow:none; }
  .opponent-zone { margin:0; padding:4px; }
  .table-core { grid-template-columns:48px 1fr 48px; }
  .deck-zone,.discard-zone { min-height:102px; border:0; background:none; clip-path:none; }
  .deck-zone::before,.discard-zone::before { display:none; }
  .deck,.discard { width:43px; height:61px; }
  .battlefield { min-height:190px; }
  .battlefield-seal { width:104%; }
  .ritual-core { width:68px; }
  .ritual-telemetry { right:4%; left:4%; gap:5px; font-size:5.5px; letter-spacing:.07em; }
  .played-line { min-height:94px; padding:3px; border:0; background:none; clip-path:none; }
  .hand-scroll { mask-image:linear-gradient(90deg,transparent,black 1%,black 99%,transparent); }
  .hand-scroll .game-card { will-change:auto; }
  .control-bar { clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
}

@media (prefers-reduced-motion:reduce) {
  .hand-scroll .game-card,
  .hand-scroll .game-card:hover:not(:disabled),
  .hand-scroll .game-card.is-selected,
  .hand-scroll .game-card:active:not(:disabled) {
    --tilt-x:0deg !important;
    --tilt-y:0deg !important;
  }
  .ritual-fx { opacity:.42; }
}

/* Astralis — entrée et Codex tactique */
.landing .hero-actions .primary {
  flex-basis:min(100%,420px);
  min-height:60px;
  padding:15px 24px;
  overflow:hidden;
  color:#1c1108;
  border:1px solid #ffe4ae;
  background:
    linear-gradient(105deg,transparent 0 34%,rgba(255,255,255,.42) 47%,transparent 58%) -140% 0 / 220% 100% no-repeat,
    linear-gradient(180deg,#fff0c9 0%,#efbd6b 38%,#be7638 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.82),
    inset 0 -2px rgba(84,38,12,.28),
    0 0 0 1px rgba(255,200,112,.18),
    0 12px 34px rgba(212,119,49,.32),
    0 0 46px rgba(255,191,105,.16);
  font-weight:800;
  letter-spacing:.065em;
  text-shadow:0 1px rgba(255,255,255,.34);
}
.landing .hero-actions .primary:hover:not(:disabled) {
  background-position:160% 0,0 0;
  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    inset 0 -2px rgba(84,38,12,.24),
    0 0 0 1px rgba(255,224,166,.28),
    0 16px 40px rgba(212,119,49,.42),
    0 0 58px rgba(255,191,105,.24);
}
.landing .hero-actions .primary .button-rune {
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  margin-right:10px;
  border:1px solid rgba(63,29,11,.34);
  transform:rotate(45deg);
}

.library-wrap {
  padding:clamp(10px,2vw,22px);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 10%,rgba(230,174,97,.1),transparent 38%),
    rgba(3,3,6,.86);
}
.library-modal {
  --archive-line:rgba(222,178,108,.2);
  width:min(1180px,100%);
  height:min(850px,calc(100svh - 32px));
  max-height:calc(100svh - 32px);
  padding:0;
  overflow:auto;
  overscroll-behavior:contain;
  color:#ede1ce;
  border:1px solid rgba(227,184,111,.34);
  border-radius:4px 26px 4px 26px;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px) 0 0 / 100% 6px,
    radial-gradient(circle at 18% -10%,rgba(120,185,224,.1),transparent 34%),
    linear-gradient(145deg,rgba(28,26,32,.99),rgba(9,10,15,.995));
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    inset 0 0 70px rgba(197,139,76,.025),
    0 36px 100px rgba(0,0,0,.72);
  text-align:left;
}
.library-modal::after {
  content:"";
  position:absolute;
  inset:6px;
  pointer-events:none;
  border:1px solid rgba(232,191,119,.08);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
}
.library-header {
  position:sticky;
  z-index:30;
  top:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  min-height:92px;
  padding:16px 18px 16px 22px;
  gap:24px;
  border-bottom:1px solid var(--archive-line);
  background:rgba(11,11,16,.9);
  backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.library-header::after {
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#dfaa63 20%,rgba(104,187,222,.58) 50%,#dfaa63 80%,transparent);
}
.library-brand {
  display:flex;
  align-items:center;
  min-width:0;
  gap:15px;
}
.library-mark {
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  color:#f0c77e;
  border:1px solid rgba(232,190,118,.44);
  transform:rotate(45deg);
  background:radial-gradient(circle,rgba(235,188,111,.18),rgba(17,17,23,.9));
  box-shadow:inset 0 0 16px rgba(223,164,85,.1),0 0 20px rgba(220,158,78,.08);
}
.library-brand .eyebrow {
  margin-bottom:5px;
  color:#9bb5c6;
  font-size:9px;
}
.library-brand h2 {
  margin:0;
  color:#f7ead4;
  font-size:clamp(23px,3vw,34px);
  line-height:1;
  letter-spacing:.015em;
}
.library-status {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  column-gap:12px;
  min-width:180px;
  padding:9px 14px;
  border:1px solid rgba(142,190,205,.18);
  background:linear-gradient(135deg,rgba(98,169,193,.06),rgba(224,167,90,.04));
}
.library-status span,
.library-footer span {
  grid-column:1;
  color:#8eaaa9;
  font:600 8px/1.2 'DM Mono',monospace;
  letter-spacing:.13em;
}
.library-status i,
.library-footer i {
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:6px;
  border-radius:50%;
  background:#85d6bd;
  box-shadow:0 0 10px rgba(105,222,184,.7);
}
.library-status b {
  grid-column:2;
  grid-row:1 / 3;
  color:#f1d49e;
  font:600 28px/1 'Playfair Display',serif;
}
.library-status small {
  grid-column:1;
  color:#736f70;
  font:500 7px 'DM Mono',monospace;
  letter-spacing:.12em;
}
.library-close {
  position:relative;
  inset:auto;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  width:auto;
  min-width:96px;
  height:46px;
  padding:0 13px;
  gap:9px;
  color:#e5c89b;
  border:1px solid rgba(226,184,113,.24);
  background:linear-gradient(180deg,rgba(64,55,51,.7),rgba(25,24,29,.9));
  font-size:23px;
}
.library-close small {
  color:#b9a482;
  font:600 8px 'DM Mono',monospace;
  letter-spacing:.12em;
}
.library-close:hover {
  color:#fff0d5;
  border-color:rgba(239,199,130,.52);
  background:linear-gradient(180deg,rgba(89,70,56,.74),rgba(35,30,31,.94));
}
.library-body {
  position:relative;
  z-index:1;
  min-width:0;
  padding:22px;
}
.library-intro {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  padding:0 2px 20px;
}
.library-intro small {
  color:#c29258;
  font:600 8px 'DM Mono',monospace;
  letter-spacing:.18em;
}
.library-intro p {
  max-width:620px;
  margin:8px 0 0;
  color:#aaa1a0;
  font-size:13px;
  line-height:1.55;
}
.library-elements {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.library-elements span {
  padding:6px 8px;
  color:#998f89;
  border:1px solid rgba(214,175,109,.12);
  background:rgba(255,255,255,.018);
  font:600 7px 'DM Mono',monospace;
  letter-spacing:.12em;
}
.library-catalog {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.library-family {
  position:relative;
  min-width:0;
  padding:14px;
  overflow:hidden;
  border:1px solid rgba(214,177,114,.15);
  border-radius:2px 16px 2px 16px;
  background:
    linear-gradient(125deg,rgba(224,174,101,.04),transparent 28%),
    rgba(255,255,255,.018);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.14);
}
.library-family::before {
  content:"";
  position:absolute;
  top:0;
  left:14px;
  width:58px;
  height:1px;
  background:linear-gradient(90deg,#d9a45f,transparent);
}
.library-family > header {
  display:flex;
  align-items:end;
  justify-content:space-between;
  min-height:42px;
  gap:14px;
  padding:0 2px 11px;
  border-bottom:1px solid rgba(221,181,113,.1);
}
.library-family > header small {
  color:#6f8998;
  font:600 7px 'DM Mono',monospace;
  letter-spacing:.16em;
}
.library-family h3 {
  margin:3px 0 0;
  color:#ead9bd;
  font:600 19px/1 'Playfair Display',serif;
}
.library-family > header > span {
  color:#8d7d6d;
  font:500 7px 'DM Mono',monospace;
  letter-spacing:.1em;
  text-align:right;
}
.library-modal .library-grid--validation {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:12px 0 0;
  padding:0;
  overflow:visible;
}
.library-modal .library-grid--validation .game-card {
  width:100%;
  min-width:0;
  max-width:150px;
}
.library-family--arcane {
  grid-column:1 / -1;
  background:
    radial-gradient(circle at 50% 115%,rgba(107,61,146,.17),transparent 45%),
    linear-gradient(125deg,rgba(224,174,101,.04),transparent 28%),
    rgba(255,255,255,.018);
}
.library-family--arcane .library-grid--validation {
  grid-template-columns:repeat(3,minmax(0,150px));
  justify-content:center;
}
.library-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  padding:13px 4px 1px;
  gap:18px;
  border-top:1px solid rgba(215,176,108,.12);
}
.library-footer small {
  color:#746f70;
  font:500 8px 'DM Mono',monospace;
  letter-spacing:.06em;
  text-align:right;
}

@media (max-width:700px) {
  .landing .hero-actions .primary {
    flex-basis:100%;
    min-height:58px;
  }
  .library-wrap {
    place-items:stretch;
    padding:0;
    overflow:hidden;
  }
  .library-modal {
    width:100%;
    height:100svh;
    max-height:none;
    overflow-x:hidden;
    border:0;
    border-radius:0;
  }
  .library-modal::after { display:none; }
  .library-header {
    grid-template-columns:minmax(0,1fr) auto;
    min-height:76px;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
    gap:10px;
  }
  .library-mark {
    flex-basis:34px;
    width:34px;
    height:34px;
  }
  .library-brand { gap:11px; }
  .library-brand .eyebrow {
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px;
  }
  .library-brand h2 { font-size:23px; }
  .library-status { display:none; }
  .library-close {
    grid-template-columns:1fr;
    min-width:48px;
    width:48px;
    height:48px;
    padding:0;
  }
  .library-close small { display:none; }
  .library-body {
    padding:16px 12px calc(28px + env(safe-area-inset-bottom));
  }
  .library-intro {
    grid-template-columns:1fr;
    align-items:start;
    gap:14px;
    padding-bottom:16px;
  }
  .library-elements { justify-content:flex-start; }
  .library-catalog { grid-template-columns:1fr; gap:12px; }
  .library-family,
  .library-family--arcane {
    grid-column:auto;
    padding:12px 10px;
  }
  .library-family > header { align-items:center; }
  .library-family > header > span { max-width:120px; }
  .library-modal .library-grid--validation,
  .library-family--arcane .library-grid--validation {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
    gap:10px;
    overflow:visible;
  }
  .library-modal .library-grid--validation .game-card {
    flex:none;
    width:100%;
    max-width:154px;
    justify-self:center;
  }
  .library-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .library-footer small { text-align:left; }
}

/* Le retour de partie reste lisible au-dessus du dock mobile, sans recouvrir la main. */
@media (max-width:700px) {
  .game-shell {
    overflow-x:hidden;
    overflow-y:auto;
    padding-bottom:calc(112px + env(safe-area-inset-bottom));
  }
  .hand-area {
    margin-bottom:calc(112px + env(safe-area-inset-bottom));
  }
  .character-toast {
    position:relative;
    inset:auto;
    z-index:auto;
    width:100%;
    margin:3px 0 8px;
    padding:8px 9px;
    border-radius:3px 11px 3px 11px;
    backdrop-filter:none;
  }
  .character-toast .character-portrait--toast {
    width:38px;
  }
  .character-toast p {
    gap:1px;
  }
  .character-toast b,
  .character-toast span {
    font-size:11px;
  }
  .character-toast span {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .character-toast .icon-button {
    flex:0 0 38px;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
  }
  .validation {
    position:relative;
    inset:auto;
    z-index:auto;
    width:100%;
    margin:0 0 8px;
    padding:7px 9px;
  }
  .control-bar {
    gap:6px;
    min-height:92px;
  }
}