@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&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-family:Manrope,ui-sans-serif,system-ui,sans-serif; 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(920px,100%); max-height:calc(100vh - 28px); overflow:auto; padding:28px; 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) auto minmax(0,1fr); align-items:center; gap:14px; }
.reserve-effect-zones > section { min-width:0; padding:14px; border:1px solid rgba(152,210,255,.16); border-radius:14px; background:rgba(255,255,255,.028); }
.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:10px; min-height:182px; padding:3px 2px 8px; overflow-x:auto; scrollbar-color:#3b597d transparent; }
.reserve-effect-card { position:relative; flex:0 0 128px; width:128px; min-height:176px; padding:0; border:1px solid transparent; border-radius:13px; 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:5; top:7px; right:7px; display:grid; place-items:center; width:27px; height:27px; 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-arrow { color:#7acde9; font-size:24px; }
.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)); }

/* 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:9px; }.reserve-effect-zones > section { padding:11px; }.reserve-effect-arrow { transform:rotate(90deg); justify-self:center; font-size:20px; }.reserve-effect-cards { min-height:181px; }.reserve-effect-card { flex-basis:132px; width:132px; min-height:178px; }.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) { .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; } }

/* 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; }
}

@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; }
}