@font-face{font-family:Grenze;src:url('../assets/fonts/Grenze-Variable.ttf');font-weight:100 900;font-display:swap}
:root{--ink:#f6e8cc;--muted:#b8ad99;--gold:#d9b779;--panel:#1c1b20f2;font-size:15px}
body{background:#17171d;font-weight:400}
button{border-color:#a58b563d;background:#282329;border-radius:2px}
button:hover{background:#3c3030;border-color:#ddbb79}
a{color:#e0c18c}small{color:var(--muted)}
h1,h2,h3{font-family:Grenze,serif;font-weight:500;letter-spacing:0}
.sanctuary-backdrop{position:fixed;inset:-2%;background:linear-gradient(0deg,#10131d8c,#211b2828 55%,#120c1544),url('assets/sanctuary.webp') center 42%/cover;animation:sky-breathe 38s ease-in-out infinite alternate;pointer-events:none}
.atmosphere{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 72% 18%,#ffca7130,transparent 48%),linear-gradient(0deg,#15172166,transparent 45%);mix-blend-mode:screen;animation:light-breathe 12s ease-in-out infinite alternate}
#arena{background:transparent}
.vignette{background:radial-gradient(ellipse at 50% 48%,transparent 35%,#0f101c80 100%)}
body[data-mode=lobby] .vignette{background:linear-gradient(90deg,#15151ef5 0%,#1b171edb 26%,#17131e55 47%,transparent 70%),linear-gradient(0deg,#12131ddd,transparent 30%)}
.game-header{height:86px;padding:12px 32px;background:linear-gradient(#11121be0,transparent);border-top:2px solid #cda16b66}
.wordmark img{width:164px;height:65px;object-fit:contain;filter:drop-shadow(0 4px 14px #0009)}
.wordmark span{font-size:11px;letter-spacing:.02em;color:#d7c9af;border-left:1px solid #b99a5866;padding-left:17px}
.game-header nav{gap:19px;font-size:12px}.game-header nav button,.game-header nav a{color:#e5d6bd;font-size:12px}
.game-header nav button:hover{color:#ffdda1;text-shadow:0 0 14px #ffd29399}
.lobby{width:430px;margin:102px 0 0 5vw;max-height:calc(100dvh - 120px);padding:0 12px 20px 0;scrollbar-color:#9f784b transparent;scrollbar-width:thin}
.chapter{font:400 14px Grenze;letter-spacing:.04em;color:#d6b475}
.chapter>span{width:34px;background:linear-gradient(90deg,transparent,#e6bb77)}
.lobby h1{font-size:clamp(46px,5vw,72px);line-height:.95;font-weight:500;margin:12px 0 17px;text-shadow:0 3px 22px #0006;color:#f2d8a4}
.intro{font-size:14px;line-height:1.55;color:#c9bcaa;margin-bottom:21px;max-width:33ch}
.section-title{margin:19px 0 9px}.section-title h2{font-size:23px;line-height:1.1}.section-title>span{font-size:11px;color:#b7a994}
.element-choices{gap:5px;grid-template-columns:repeat(4,1fr)}
.element-choices button{position:relative;flex-direction:column;gap:5px;padding:9px 2px 8px;border-color:transparent;background:linear-gradient(145deg,#30282a9c,#191b2388);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);font-size:11px;box-shadow:inset 0 0 0 1px #b99b5544;color:#d7cbb7}
.element-choices svg{width:24px;height:24px;stroke-width:1.35;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--choice) 35%,transparent))}
.element-choices button:hover{background:linear-gradient(140deg,#56402e,#24202a)}
.element-choices button[aria-pressed=true]{background:linear-gradient(145deg,color-mix(in srgb,var(--choice) 17%,#30262a),#1b1a23);box-shadow:inset 0 -2px var(--choice),inset 0 0 0 1px color-mix(in srgb,var(--choice) 55%,transparent)}
.allegiance{padding:11px 0 0;min-height:58px}.allegiance>span{width:44px;display:grid;place-items:center;background:url('assets/solar-crest.png') center/contain no-repeat;aspect-ratio:1;filter:drop-shadow(0 2px 5px #0008)}
.allegiance svg{width:21px;height:21px;stroke-width:2;color:#fff4d6;filter:drop-shadow(0 1px 2px #000)}
.allegiance h3{font-size:22px;line-height:1.1}.allegiance p{font-size:12px;color:#bdb29e;margin-top:3px}
.text-button{color:#ddbb7f;font-size:12px}.deck-presets{border-color:#b5995f33;gap:7px}.deck-presets button{color:#b8aa95;font-size:12px;padding:9px 7px}.deck-presets button[aria-pressed=true]{color:#f1d193;background:#b8964d12}
.deck-preview{height:60px;gap:7px;margin-top:12px}.deck-preview img{height:60px;width:40px;border:1px solid #b9975d70;box-shadow:0 4px 9px #0006;border-radius:2px}
.deck-summary{color:#b9ad98;font-size:11px;margin-top:9px}.preferences{margin:15px 0 10px;gap:14px}.preferences label,.collection-toolbar label{color:#c4b69d;font-size:11px}
select,input{background:#222029;border-color:#bca16e45;color:#f0e2c8;border-radius:2px;padding:9px 11px}select:focus,input:focus{border-color:#e2be78}
.primary{background:linear-gradient(110deg,#ebd19a,#b98a4b);border-color:#f5d7a0;color:#251c19;box-shadow:inset 0 1px #fff7d3,0 4px 18px #b0783126;font-family:Grenze;font-size:22px;font-weight:600;line-height:1;padding:15px 20px;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)}
.primary:hover{background:linear-gradient(120deg,#ffe9bb,#ce9d57);color:#24190e;box-shadow:0 0 24px #d5a35d44}
.lobby-note{color:#b3a691;font-size:10px}.record{color:#c2b093}
.scene-caption{bottom:7vh;right:6vw;text-align:center;max-width:470px}
.scene-caption:before{content:'';display:block;width:65px;height:65px;margin:0 auto 4px;background:url('assets/solar-crest.png') center/contain no-repeat;filter:drop-shadow(0 0 14px #ffd29144)}
.scene-caption span{font:38px Grenze;color:#f1d69e;text-shadow:0 2px 18px #000}.scene-caption p{color:#cbb99b;font-size:12px;margin:5px 0 7px}.scene-caption small{color:#ad9e86;font-size:10px}
#duel-hud{top:86px}
.hud-panel{background:linear-gradient(145deg,#262027ee,#151820f5);border:1px solid #c29b5e55;border-radius:2px;box-shadow:0 6px 24px #0004}
.opponent,.player{top:4px;width:246px;padding:21px 38px 17px;border:0;background:url('assets/gilded-plaque.png') center/100% 100% no-repeat;box-shadow:none;min-height:114px}
.opponent{left:18px}.player{right:18px}
.core-button{gap:10px}.core-icon{background:radial-gradient(circle,#f2c77720,#17131c66);border:1px solid #d5aa6366;width:37px;height:37px;border-radius:50%}.core-icon svg{width:23px;height:23px}
.core-button b{font-size:34px;line-height:1;color:#f7e7c7}.core-button small{font-size:10px;color:#d5c7b0;white-space:nowrap}.core-button em{color:#a99c87;font-size:10px}
.health-track{height:3px;background:#06081099;margin:6px 0}.health-track i{background:linear-gradient(90deg,#8b915e,#e0cb89);box-shadow:0 0 5px #b5e9ba55}.opponent .health-track i{background:linear-gradient(90deg,#8776a5,#d6c6e8)}
.opponent p,.player p{font-size:9px;color:#b9ab94;white-space:nowrap}
.turn-display{top:3px;padding:9px 32px;background:none;min-width:190px}.turn-display:before{content:'';position:absolute;inset:0 0 -5px;z-index:-1;background:linear-gradient(90deg,transparent,#211b28cc,transparent);border-bottom:1px solid #be94575c}
.turn-display span{font:26px Grenze;color:#f5dfb2}.turn-display small{margin-top:1px;font-size:10px;color:#c8b89a}
.action-prompt{top:99px;background:#181720cc;color:#e7d8b9;border:1px solid #aa8b4a30;border-radius:2px;font-size:12px;padding:8px 16px;max-width:44vw}
.inspector{top:143px;right:24px;width:188px;padding:10px;background:linear-gradient(180deg,#211c24e0,#161720ee);border-color:#b9965d66}
.inspect-art{position:relative;perspective:800px;overflow:hidden;border-radius:3px;isolation:isolate}
.inspect-art canvas{width:100%;transition:transform .15s}
.inspect-art:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(ellipse at var(--foil-x,50%) var(--foil-y,50%),#fff3d666,transparent 52%),repeating-linear-gradient(var(--foil-angle,125deg),#ffda7455 0%,#8cddf344 18%,#ab8eff44 32%,#ffffaa77 50%,transparent 68%);mix-blend-mode:color-dodge}
.inspect-art:hover:after{opacity:.75}.inspector h2{font:22px Grenze;color:#f4ddad;margin:8px 0 0}.inspector p{color:#c8baa4;font-size:11px}.inspector #inspect-info{color:#e0bd7b;font-size:10px}.inspector small{font-size:9px;color:#b3bba5}
.battle-journal{left:24px;bottom:182px;width:206px;padding:9px 12px;background:#191922db}.battle-journal>button{color:#c4b699;font-size:11px}.battle-journal ol{color:#c0b099;font-size:11px}
.command-left{left:24px;width:210px;bottom:28px}.energy{gap:8px;margin-bottom:7px}.energy>span{color:#f0dcab;font-size:27px}.energy small{color:#bcaa8b}#energy-gems i{background:#302b24}#energy-gems i.filled{background:linear-gradient(130deg,#ffedb2,#bf8e46);box-shadow:0 0 8px #e0b87099}
.power-button{position:relative;padding:13px 17px 13px 57px;background:linear-gradient(135deg,#51402e,#201d27);border-color:#cfa05c80;box-shadow:inset 0 0 25px #d1a05c0c;border-radius:2px}
.power-button:before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:url('assets/solar-crest.png') center/contain}
.power-button span{font:22px Grenze;line-height:1.1;color:#f0d59e}.power-button small{font-size:9px;color:#c4b394}.command-left>.text-button{font-size:11px}
.command-right{right:24px;width:188px;bottom:35px}.command-right .primary{font-size:24px}.command-right small{color:#bdb093;font-size:10px}
.hand-label{color:#dec9a3;font-size:10px;bottom:12px}.hand-label span{color:#af9d7e}
.tactical{top:132px;left:24px;width:242px;max-height:calc(100dvh - 390px);background:#1c1923f7;z-index:9}.tactical h2{font-size:21px}.tactical>p,.tactical-description{color:#bdb099}.tactical #tactical-actions button{background:#332a2b;border-color:#a1844d55;font-size:12px}.tactical #tactical-actions button:hover{background:#51402d}.tactical-group{color:#e0c28c}
dialog{background:linear-gradient(145deg,#30232b,#151820);border-color:#cba15d88;box-shadow:0 30px 130px #000b;border-radius:4px;padding:30px}
dialog::backdrop{background:#110f18cc;backdrop-filter:blur(9px)}dialog header h2{font-size:40px;line-height:1.1;color:#f2d7a3}dialog p{color:#c6b79e}
.deck-list{border-color:#ab8b5744}.deck-list h3{font-size:27px}.collection-card{background:#24212a;border-color:#a98a5555}.collection-card .copies{background:#201824ee;color:#e2d0b0}.collection-card .cost{background:#241d24;color:#f1d191}.collection-card b{font-size:12px}.collection-card small{color:#bdb09d}.collection-card:disabled{opacity:.78}.draft-row{border-color:#a0885730}.draft-row em{color:#f2cf8d}.draft-row small{color:#bfb09c}.mana-curve div{background:linear-gradient(#d4ac6a,#70553b)}.deck-tools button{color:#d6c29c}.deck-list .primary{font-size:23px}
.rules-grid h3{font-size:26px}.rules-grid section>b{font:27px Grenze;color:#c69f60}.keyword-grid{border-color:#b6955c44}.keyword-grid strong{color:#e2bb78}.rule-note{color:#b9aa91}
.result-dialog{background:radial-gradient(ellipse at top,#76532966,transparent 58%),linear-gradient(145deg,#27222b,#141922);border-color:#cda56199;padding:35px 42px}
.result-dialog>span:first-child{height:105px;width:105px;margin:0 auto 15px;background:url('assets/solar-crest.png') center/contain;font-size:0}.result-dialog h2{font:64px Grenze;color:#f8dfad;line-height:1.1}.result-dialog .chapter{color:#cba875}.result-dialog button{font-size:18px}.result-dialog .primary{font-size:24px}#result-stats{color:#e1c287}
#toast{background:#29212cee;border-color:#c6a16c88;color:#f3e0be}.render-error{background:#211d2a}
.turn-banner{position:fixed;left:50%;top:42%;z-index:12;pointer-events:none;transform:translate(-50%,-40%) scale(.93);width:420px;height:165px;max-width:88vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:url('assets/gilded-plaque.png') center/100% 100% no-repeat;opacity:0;transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.turn-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.turn-banner strong{font:37px Grenze;color:#f8e0ad;line-height:1.1}.turn-banner small{font:12px Barlow;color:#c1ad89;margin-top:4px}
.loading-screen{position:fixed;inset:0;z-index:80;background:#17141e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.loading-screen img{width:90px;animation:loading-glow 1.2s ease-in-out infinite alternate}.loading-screen p{font:26px Grenze;color:#e7c98f}.loading-screen small{font-size:12px;color:#b8aa94}
@keyframes sky-breathe{to{transform:scale(1.035) translateX(-.5%)}}@keyframes light-breathe{to{opacity:.5}}@keyframes loading-glow{to{filter:drop-shadow(0 0 25px #efbd61aa)}}
@media(min-height:950px){.lobby{margin-top:130px}.lobby h1{font-size:76px}.intro{margin-bottom:26px}.deck-preview,.deck-preview img{height:76px}.deck-preview img{width:51px}.element-choices button{padding:13px 4px}.section-title{margin-top:23px}}
@media(max-height:800px) and (min-width:901px){.lobby{margin-top:88px;max-height:calc(100dvh - 98px);width:394px}.lobby h1{font-size:53px;margin:8px 0 12px}.intro{font-size:12px;line-height:1.4;margin-bottom:13px}.chapter{font-size:12px}.section-title{margin:12px 0 7px}.section-title h2{font-size:20px}.element-choices button{padding:6px 3px;font-size:10px;gap:3px}.element-choices svg{width:20px;height:20px}.allegiance{padding:7px 0 0;min-height:48px}.allegiance h3{font-size:19px}.allegiance p{font-size:11px}.allegiance>span{width:37px}.deck-preview,.deck-preview img{height:49px}.deck-preview img{width:33px}.deck-preview{margin-top:9px;gap:8px}.deck-summary{font-size:10px}.preferences{margin:11px 0 9px}.preferences select{padding:7px 9px}.launch .primary{font-size:22px;padding:12px 19px}.scene-caption{bottom:5vh}.scene-caption span{font-size:33px}.scene-caption:before{width:50px;height:50px}.inspector{width:151px;top:141px}.inspector h2{font-size:18px}.inspector p{font-size:10px}.inspector small{font-size:9px}.command-right{width:175px}.command-left{width:190px}.opponent,.player{width:228px;padding:20px 33px 16px}}
@media(max-width:1050px){.lobby{margin-left:4vw;width:370px}.game-header nav{gap:12px}.scene-caption{right:3vw;max-width:360px}.scene-caption span{font-size:29px}.opponent,.player{width:210px;padding:20px 28px 15px}.inspector{right:16px;width:150px}.command-left,.battle-journal{left:16px;width:175px}.command-right{right:16px;width:160px}.power-button{padding-left:49px}.power-button:before{width:34px;height:34px}.power-button span{font-size:20px}.turn-display{padding:8px 25px;min-width:150px}.turn-display span{font-size:24px}}
@media(max-width:760px){.game-header{height:66px;padding:5px 12px}.wordmark img{width:105px;height:50px}.game-header nav{gap:9px}.game-header nav button{font-size:10px}#ambience-toggle{display:none}.game-header nav a{display:none}body[data-mode=lobby] .vignette{background:linear-gradient(90deg,#17131fe8,#17131fc9)}.lobby{width:92vw;margin:80px auto 0;max-height:calc(100dvh - 90px);background:none;padding:0 5px 24px}.lobby h1{font-size:58px;margin-top:10px}.intro{font-size:13px;margin-bottom:20px}.section-title h2{font-size:24px}.element-choices button{padding:9px 2px;font-size:11px}.element-choices svg{width:23px;height:23px}.allegiance h3{font-size:23px}.preferences{margin:15px 0}.deck-preview{gap:7px}.deck-preview,.deck-preview img{height:58px}.deck-preview img{width:39px}.scene-caption{display:none}#duel-hud{top:65px}.opponent,.player{width:162px;min-height:96px;padding:19px 19px 14px;top:0;left:4px}.player{left:auto;right:4px}.core-button{gap:6px}.core-icon{width:27px;height:27px}.core-icon svg{width:18px;height:18px}.core-button b{font-size:25px}.core-button small{font-size:8px}.core-button em{font-size:8px}.opponent p,.player p{font-size:7px}.health-track{margin:5px 0}.turn-display{top:106px;padding:4px 20px}.turn-display span{font-size:23px}.turn-display small{font-size:9px}.action-prompt{top:157px;width:max-content;max-width:94vw;font-size:10px;padding:6px 11px}.inspector,.battle-journal{display:none!important}.command-left{left:10px;width:140px;bottom:26px}.command-right{right:10px;width:129px;bottom:31px}.command-right .primary{font-size:20px;padding:13px 14px}.power-button{padding:10px 6px 10px 37px}.power-button:before{width:29px;height:29px;left:4px}.power-button span{font-size:18px}.power-button small{font-size:7px}.command-left>.text-button{font-size:10px;margin-top:8px}.energy>span{font-size:24px}.tactical{left:10px;top:207px;max-height:calc(100dvh - 450px);width:235px}.tactical h2{font-size:22px}.tactical>p{font-size:11px}.turn-banner{height:132px;width:330px}.turn-banner strong{font-size:31px}.turn-banner small{font-size:10px}.deck-dialog header h2{font-size:31px}.collection-grid{grid-auto-rows:190px;height:360px}.deck-list{border-color:#ab8b5744}.rules-dialog header h2{font-size:31px}.rules-grid h3{font-size:25px}.result-dialog{padding:26px}.result-dialog h2{font-size:54px}}
@media(max-height:550px) and (min-width:640px){.game-header{height:52px}#duel-hud{top:52px}.lobby{margin-top:60px;max-height:calc(100dvh - 70px)}.opponent,.player{width:180px;min-height:90px;top:0;padding:16px 25px}.turn-display{top:3px}.action-prompt{top:76px}.command-left{bottom:12px;width:165px}.command-right{bottom:13px;width:160px}.inspector,.battle-journal,.scene-caption{display:none!important}.tactical{top:108px;max-height:190px}.hand-label{bottom:4px}.turn-banner{height:140px}.energy{margin-bottom:3px}.command-left>.text-button{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.sanctuary-backdrop,.atmosphere,.loading-screen img{animation:none}.turn-banner{transition:none}.inspect-art canvas{transform:none!important}}

/* Final fit: all Core information remains within the dark face of the plate. */
body[data-mode=duel] .sanctuary-backdrop{filter:brightness(.72) saturate(.84)}
.opponent,.player{height:135px;min-height:135px;padding:35px 37px 0;background-size:100% 118px;background-position:center top}
.opponent p,.player p{position:absolute;top:113px;left:15px;right:15px;text-align:center;background:#181820a8;padding:3px 1px;border-radius:2px}
.core-button small{color:#e1d2b7}.health-track{margin:4px 0}
@media(max-height:800px) and (min-width:901px){.opponent,.player{padding:33px 33px 0;background-size:100% 114px}.opponent p,.player p{top:108px}}
@media(max-width:1050px){.opponent,.player{padding:34px 28px 0}}
@media(max-width:760px){.opponent,.player{height:100px;min-height:100px;padding:29px 22px 0;background-size:100% 96px}.opponent p,.player p{top:86px;left:9px;right:9px;padding:2px 0}.health-track{margin:3px 0}.core-button b{font-size:23px}.core-button small{font-size:8px}}
@media(max-height:550px) and (min-width:640px){.opponent,.player{padding:28px 25px 0;background-size:100% 96px;height:105px;min-height:105px}.opponent p,.player p{top:89px}}

.wordmark img{width:158px;height:74px;object-fit:cover}
@media(max-width:760px){.wordmark img{width:105px;height:50px}.lobby h1{font-size:48px;line-height:1}}

.deck-dialog{padding:24px}.deck-dialog header{margin-bottom:17px}.deck-dialog header h2{font-size:34px;margin:4px 0 0}.deck-dialog .collection-grid{height:min(42dvh,400px)}.deck-dialog .deck-list #draft-list{height:min(27dvh,280px)}.deck-dialog .mana-curve{height:52px;margin:9px 0 12px}
@media(max-width:760px){.deck-dialog{padding:18px}.deck-dialog header h2{font-size:30px}.deck-dialog .collection-grid{height:330px}.deck-dialog .deck-list #draft-list{height:180px}}

@media(max-height:800px) and (min-width:901px){
 .lobby h1{font-size:48px;line-height:.94;margin:7px 0 10px}.intro{font-size:12px;line-height:1.4;margin-bottom:8px}
 .section-title{margin:9px 0 6px}.element-choices button{padding:4px 3px}.element-choices svg{width:18px;height:18px}
 .allegiance{min-height:43px;padding-top:5px}.deck-presets button{padding:7px}.deck-preview,.deck-preview img{height:43px}.deck-preview img{width:29px}.deck-preview{margin-top:8px;gap:10px}.deck-summary{margin-top:7px}
 .preferences{margin:9px 0}.preferences select{padding:6px 9px}.lobby-note{margin-top:8px}.record{margin-top:4px}
}

body[data-animating="true"] .action-prompt{color:#f3d99f;border-color:#ac8a4a}body[data-animating="true"] #turn-label{color:#f0cc85} .health-track i{transition:width .32s cubic-bezier(.22,1,.36,1)}
