@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#10191b;--panel:#162123;--line:#2d3836;--text:#e9e6d9;--muted:#8e9b94;--gold:#d5b775;--teal:#6cd4c0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 48% 40%,#20363255,transparent 57%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.header{height:91px;border-bottom:1px solid #ffffff0c;display:flex;align-items:center;justify-content:space-between;padding:0 4.4%}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;letter-spacing:3px;font-weight:600}.brand small{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:3.7px;color:var(--gold);margin-top:2px}.brand-mark{font-size:39px;color:var(--gold);line-height:1}.mode{display:flex;align-items:center;gap:10px;letter-spacing:1.7px;font-size:11px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#85b8a0}.muted{color:var(--muted);letter-spacing:.1px;font-size:12px}.mode-divider{height:14px;width:1px;background:var(--line);margin:0 8px}.header-actions{display:flex;gap:10px}.icon-btn{width:35px;height:35px;position:relative;border:1px solid var(--line);border-radius:50%;background:transparent;color:#c9cfc5;font-size:17px}.icon-btn:hover{background:#ffffff0b;border-color:var(--gold)}.sound-off{position:absolute;height:22px;width:1px;background:#a6b3aa;transform:rotate(-40deg);left:17px;top:5px}.layout{display:grid;grid-template-columns:220px minmax(330px,530px) 220px;justify-content:center;align-items:start;gap:42px;padding:25px 32px 10px}.left-sidebar,.right-sidebar{padding-top:24px}.eyebrow,.section-label{font-size:10px;font-weight:600;letter-spacing:2.2px;color:var(--gold)}h1,h2,p{margin:0}h1{font:500 43px/.98 'Cormorant Garamond',Georgia,serif;margin:15px 0}.gold{color:var(--gold)}.arena-description{font-size:12px;color:var(--muted)}.ornament{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--gold);font-size:18px}.ornament:before,.ornament:after{content:'';height:1px;background:var(--line);flex:1}.objective{position:relative;padding:0 10px 22px 0}.objective h2{font:600 26px 'Cormorant Garamond',Georgia,serif;margin:12px 0 8px}.objective p,.bot-panel p,.selected-panel p{color:var(--muted);font-size:12px;line-height:1.8}.objective-icon{position:absolute;right:4px;top:8px;font-size:45px;color:#d5b77515}.steps{border-top:1px solid var(--line);padding-top:24px}.steps>div{display:flex;gap:13px;margin-bottom:23px}.steps b{width:23px;height:23px;border:1px solid #d5b77540;color:var(--gold);border-radius:50%;display:grid;place-items:center;font-size:10px;flex-shrink:0}.steps strong{display:block;font-size:12px;font-weight:500;margin:3px 0 6px}.steps span{display:block;font-size:11px;color:var(--muted);line-height:1.5}.keyboard-hint{display:flex;align-items:center;gap:4px;margin:12px 0;font-size:10px;color:#829188}kbd{border:1px solid #53605755;border-bottom-width:2px;padding:3px 5px;border-radius:3px;font:9px 'DM Sans',sans-serif;color:#a9b4aa}.keyboard-hint span{margin-left:7px}.local-note{font-family:'Cormorant Garamond',Georgia,serif;color:#81968a;font-size:15px;font-style:italic;margin-top:32px}.match-bar{height:57px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.combatant{display:flex;gap:9px;align-items:center}.combatant strong{font-size:12px;font-weight:600;display:block}.combatant span{display:block;font-size:8px;letter-spacing:1.3px;color:#8ca69b;margin-top:5px}.crest{height:34px;width:29px;display:grid;place-items:center;font-size:25px;border-radius:5px 5px 13px 13px}.player-crest{background:#274c48;color:#90e1cc;border:1px solid #599b85}.enemy-crest{background:#573538;color:#df9c91;border:1px solid #9c6060}.enemy-name{text-align:right}.enemy-name span{color:#bc9691}.score-time{text-align:center}.score{font-size:15px;display:flex;align-items:center;gap:12px;color:#c7c7b7}.tiny-crown{font-size:14px;color:var(--gold)}#timer{display:block;font-size:15px;letter-spacing:1.5px;margin-top:2px;font-variant-numeric:tabular-nums}.game-column{width:min(530px,calc((100dvh - 291px) * .76923));min-width:330px;justify-self:center}.arena-frame{position:relative;aspect-ratio:600/780;border:1px solid #796b4388;box-shadow:0 22px 70px #0005;overflow:hidden;background:#2c5145}.arena-frame canvas{display:block;width:100%;height:100%;touch-action:none}.arena-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 32px #050f1360}.arena-corner{position:absolute;width:15px;height:15px;pointer-events:none;border-color:var(--gold)}.tl{top:3px;left:3px;border-left:2px solid;border-top:2px solid}.tr{top:3px;right:3px;border-right:2px solid;border-top:2px solid}.bl{bottom:3px;left:3px;border-left:2px solid;border-bottom:2px solid}.br{bottom:3px;right:3px;border-right:2px solid;border-bottom:2px solid}.overlay{position:absolute;inset:0;background:linear-gradient(#08151739,#081517b8);display:grid;place-items:center;text-align:center;backdrop-filter:blur(2px)}.overlay.hidden{display:none}.overlay-content{padding:25px 15px}.overline{font-size:10px;letter-spacing:2.7px;color:#e2cf9b}.overlay-crown{font-size:62px;color:#e2c080;margin:20px 0 5px;text-shadow:0 3px 20px #000}.overlay h2{font:600 39px/1.08 'Cormorant Garamond',Georgia,serif;text-shadow:0 2px 10px #0008}.overlay p{font-size:13px;line-height:1.7;color:#d5ded0;margin:14px 0 23px}.primary-btn{border:1px solid #e7c880;background:linear-gradient(115deg,#debf7d,#bd9852);border-radius:3px;color:#253328;padding:14px 23px;font-size:13px;font-weight:700;box-shadow:0 4px 20px #0003}.primary-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.primary-btn span{margin-left:24px;font-size:18px}.overlay-foot{font-size:8px;color:#b6c1ad;letter-spacing:2px;margin-top:22px}.deck-area{padding-top:14px}.deck-heading{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.3px;color:#b7c4b9;margin-bottom:10px}#deckSub{letter-spacing:0;color:var(--muted);font-size:10px}.hand-row{display:flex;gap:14px}.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;flex:1}.card{position:relative;padding:0;border:1px solid #5b6551;background:#263730;color:var(--text);height:99px;border-radius:6px;transition:transform .15s,border-color .15s,filter .15s;overflow:visible;min-width:0;box-shadow:0 4px 9px #0003}.card:hover{transform:translateY(-5px);border-color:var(--gold)}.card.selected{transform:translateY(-8px);border:2px solid #e4c17b;box-shadow:0 0 16px #d5b77535}.card.unaffordable{filter:saturate(.35);opacity:.58}.card-art,.next-art,.spotlight-art{background-image:url('cards.webp');background-size:300% 200%;background-repeat:no-repeat;background-color:#33473e}.card-art{height:100%;width:100%;border-radius:5px;overflow:hidden;display:grid;place-items:center;font-size:42px}.card-art:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#08120eee);border-radius:0 0 5px 5px}.card-name{position:absolute;bottom:9px;left:0;width:100%;font-size:10px;font-weight:600;text-shadow:0 1px 4px #000}.card-cost{position:absolute;top:-7px;left:-5px;border:1px solid #be9ae1;background:linear-gradient(130deg,#ab77c7,#613f88);width:24px;height:26px;display:grid;place-items:center;border-radius:8px 8px 10px 10px;font-size:13px;font-weight:700;box-shadow:0 2px 5px #0008}.card-key{position:absolute;right:5px;top:5px;font-size:8px;color:#fff9;text-shadow:0 1px 4px #000}.next-card{width:46px;display:flex;align-items:center;flex-direction:column;justify-content:center;border-left:1px solid var(--line);padding-left:12px}.next-card>span{font-size:8px;letter-spacing:1px;color:var(--muted);margin-bottom:9px}.next-art{height:48px;width:35px;border:1px solid #536152;border-radius:3px;display:grid;place-items:center;font-size:22px}.next-card small{font-size:8px;text-align:center;color:#a4b1a6;margin-top:5px;line-height:1.3}.mana-row{display:flex;align-items:center;gap:7px;margin-top:12px}.mana-gem{font-size:22px;color:#bc8ae4;text-shadow:0 0 13px #bb7afa66}.mana-row strong{font-size:15px;font-weight:500;width:50px;color:#d9b9ee}.mana-max{font-size:11px;color:#82788c}.mana-track{flex:1;height:11px;background:#29232f;border-radius:3px;position:relative;overflow:hidden;border:1px solid #60506b55}#manaFill{height:100%;width:50%;background:linear-gradient(90deg,#8b60b8,#ce9be9);transition:width .1s;box-shadow:0 0 12px #c08ade}.mana-segments{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#172023aa calc(10% - 1px),#172023aa 10%)}#manaRate{font-size:8px;letter-spacing:1.2px;color:#a594b2;margin-left:4px}.bot-panel{padding-bottom:23px;border-bottom:1px solid var(--line)}.bot-identity{display:flex;gap:12px;align-items:center;margin:19px 0 13px}.bot-avatar{width:43px;height:46px;background:#3c3437;border:1px solid #705854;border-radius:5px;color:#d3b4a4;font-size:35px;text-align:center}.bot-identity h2{font:600 22px 'Cormorant Garamond',Georgia,serif}.difficulty{display:inline-block;font-size:8px;letter-spacing:1.2px;background:#33443b;border-radius:3px;padding:4px 7px;margin-top:5px;color:#bbd3b7}.bot-status{font-size:10px;color:#a8baac;margin-top:15px}.bot-status .live-dot{margin-right:6px;width:4px;height:4px}.selected-panel{padding:24px 0 23px}.spotlight-art{height:112px;width:100%;background-size:300% 200%;background-position:0% 0%;margin:16px 0 13px;border:1px solid #4b5c46;border-radius:5px;display:grid;place-items:center;font-size:63px;background-image:none;position:relative;overflow:hidden}.spotlight-art.has-art{background-image:url('cards.webp');background-size:300% 200%;height:160px}.spotlight-title{display:flex;justify-content:space-between;align-items:center}.spotlight-title h2{font:600 25px 'Cormorant Garamond',Georgia,serif}.spotlight-title>span{font-size:12px;color:#ca9ae6}.card-type{display:block;margin:7px 0 10px;font-size:8px;color:#d2bb85;letter-spacing:1.2px}.stats{display:flex;justify-content:space-between;margin-top:15px}.stat>span{display:block;color:var(--muted);font-size:9px;margin-bottom:5px}.stat strong{font-weight:500;font-size:13px}.battle-log{border-top:1px solid var(--line);padding-top:20px}.battle-log p{font-size:10px;line-height:1.6;color:#99aa9e;padding:12px 0 0;display:flex;gap:10px}.battle-log p span{color:var(--gold)}footer{max-width:1300px;margin:7px auto 0;padding:16px 35px;display:flex;justify-content:space-between;color:#6f8277;font-size:8px;letter-spacing:1.1px}.footer-dot{margin:0 8px}.battle-notice{position:absolute;top:44%;left:0;width:100%;text-align:center;color:#fff2c8;font-size:16px;font-weight:600;text-shadow:0 2px 9px #000;pointer-events:none;opacity:0;transition:opacity .2s}.battle-notice.show{opacity:1}dialog{background:#182a28;color:var(--text);border:1px solid #84714d;border-radius:8px;padding:37px;width:min(500px,90vw);box-shadow:0 25px 100px #000b}dialog::backdrop{background:#040b0cbb;backdrop-filter:blur(6px)}dialog h2{font:500 35px/1.05 'Cormorant Garamond',Georgia,serif;margin:17px 0 22px}dialog p{line-height:1.7;font-size:14px;color:#b6c4b9;margin:17px 0}.dialog-close{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--muted);font-size:26px}dialog .primary-btn{margin-top:6px}
@media(min-height:1000px){.layout{padding-top:35px}.left-sidebar,.right-sidebar{padding-top:45px}.game-column{width:530px}.card{height:117px}.spotlight-art.has-art{height:190px}}@media(max-width:1150px){.layout{gap:25px;grid-template-columns:190px minmax(330px,510px) 190px}.left-sidebar h1{font-size:37px}.header{padding:0 30px}.spotlight-title h2{font-size:22px}}@media(max-width:960px){.layout{grid-template-columns:minmax(330px,510px) 200px;gap:35px;padding-top:12px}.left-sidebar{display:none}.header{height:74px}.game-column{width:min(510px,calc((100dvh - 264px) * .76923))}.mode{display:none}.right-sidebar{padding-top:22px}footer{display:none}}@media(max-width:680px){.layout{display:block;padding:0 10px 15px}.right-sidebar{display:none}.header{height:60px;padding:0 17px}.brand{font-size:21px;gap:8px}.brand small{font-size:7px;letter-spacing:2.8px}.brand-mark{font-size:32px}.icon-btn{width:31px;height:31px}.header-actions{gap:7px}.game-column{width:min(100%,440px);min-width:0;margin:auto}.match-bar{height:49px;margin-bottom:4px}.arena-frame{aspect-ratio:600/710;max-height:calc(100dvh - 290px);min-height:280px}.arena-frame canvas{height:100%}.card{height:91px}.deck-area{padding-top:11px}.hand-row{gap:10px}.hand{gap:8px}.deck-heading{font-size:8px}#deckSub{font-size:9px}.overlay h2{font-size:33px}.overlay-crown{font-size:43px;margin-top:15px}.overlay-content{padding:10px}.overlay p{margin:10px 0 18px}.overlay-foot{margin-top:17px}.combatant strong{font-size:11px}.combatant span{font-size:7px}.crest{width:26px;height:31px}.next-card{width:44px;padding-left:8px}.card-name{font-size:9px}.mana-row{margin-top:9px}}

/* Keep the supporting guidance comfortably readable. */
.objective p,.bot-panel p,.selected-panel p{font-size:14px;line-height:1.65}.steps strong{font-size:14px}.steps span{font-size:12px}.arena-description{font-size:14px}.section-label,.eyebrow{font-size:11px}.battle-log p{font-size:12px}.bot-status{font-size:12px}.combatant strong{font-size:14px}.card-name{font-size:11px}.card-type{font-size:10px}.stat>span{font-size:11px}.stat strong{font-size:14px}.deck-heading{font-size:10px}#deckSub{font-size:11px}.selected-panel{padding-top:20px}.spotlight-art.has-art{height:145px}
@media(max-width:680px){.combatant strong{font-size:12px}.card-name{font-size:10px}.deck-heading{font-size:9px}#deckSub{font-size:10px}}

.map-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--line);padding-bottom:9px}.map-bar>div{min-width:0}.map-bar #arenaName{font:600 21px 'Cormorant Garamond',Georgia,serif}.map-bar small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.map-bar button{flex-shrink:0;border:1px solid #766944;background:#242e25;color:var(--gold);padding:8px 10px;border-radius:4px;font-size:12px}.map-bar button:hover{background:#3a4533}.map-bar button span{margin-left:7px}.map-tactic{font-size:11px;line-height:1.4;color:#aebdaf;text-align:center;padding:8px 0 0;min-height:23px}.game-column{width:min(530px,calc((100dvh - 365px) * .76923))}.deck-area{padding-top:9px}#mapDialog{width:min(830px,94vw);max-height:90dvh;padding:30px;overflow:auto}#mapDialog h2{margin-bottom:10px}.map-dialog-intro{margin:0 0 22px!important;max-width:650px}#mapChoices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.map-choice{display:flex;align-items:stretch;gap:0;text-align:left;background:#142421;border:1px solid #3d5144;border-radius:6px;color:var(--text);padding:0;overflow:hidden}.map-choice:hover{background:#263b30;border-color:var(--gold)}.map-choice.current{border-color:var(--gold);box-shadow:inset 0 0 0 1px #d5b77555}.map-choice canvas{width:82px;height:100%;min-height:165px;object-fit:fill;border-right:1px solid #73816d44}.map-choice-copy{padding:13px 12px}.map-choice h3{font:600 23px/1.1 'Cormorant Garamond',Georgia,serif;margin:8px 0}.map-choice strong{font-size:11px;color:var(--gold);font-weight:500}.map-choice p{font-size:12px;line-height:1.5;margin:8px 0 0}.map-choice .eyebrow{font-size:9px;letter-spacing:1.4px}.map-cancel{display:block;background:transparent;border:1px solid var(--line);border-radius:4px;padding:10px 20px;margin:22px auto 0;color:var(--text)}.map-cancel:hover{border-color:var(--gold)}
@media(min-height:1000px){.game-column{width:min(530px,calc((100dvh - 365px) * .76923))}}@media(max-width:960px){.game-column{width:min(510px,calc((100dvh - 338px) * .76923))}}@media(max-width:680px){.game-column{width:min(100%,440px)}.map-bar{min-height:47px}.map-bar #arenaName{font-size:20px}.map-bar small{font-size:10px}.arena-frame{max-height:calc(100dvh - 360px)}.map-tactic{font-size:10px;min-height:26px}#mapDialog{padding:25px 16px}#mapChoices{grid-template-columns:1fr}.map-choice canvas{min-height:134px;width:94px}.map-choice h3{font-size:24px}.map-choice p{font-size:13px}.map-choice strong{font-size:12px}}

@media(min-width:681px) and (max-width:960px){.arena-frame{max-height:max(280px,calc(100dvh - 405px))}}

.arena-frame{width:100%}

/* The battlefield always follows its logical canvas ratio, at every viewport size. */
.arena-frame{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto}.arena-frame canvas{position:static;display:block;width:100%;height:auto;aspect-ratio:600/780}.map-choice canvas{height:auto;min-height:0;aspect-ratio:600/780;object-fit:contain;align-self:center;flex-shrink:0}

.loadout-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.loadout-bar button{background:#273c34;border:1px solid #56705b;color:#d9e5c6;border-radius:4px;padding:9px 12px;font-size:12px;white-space:nowrap}.loadout-bar button:hover{border-color:var(--gold)}.loadout-bar button span{margin-left:6px;color:var(--gold)}.loadout-bar>div{text-align:right}.loadout-bar strong{display:block;font-size:11px;font-weight:500;color:#c5d0bb}.loadout-bar small{display:block;margin-top:4px;font-size:10px;color:var(--muted)}#loadoutDialog{width:min(960px,95vw);max-height:92dvh;overflow:auto;padding:28px 28px 0}#loadoutDialog h2{margin:12px 0}.loadout-intro{font-size:14px!important;line-height:1.6;margin:0 0 20px!important;max-width:740px}.difficulty-control{display:flex;align-items:center;gap:24px;padding:17px;background:#0d1e19;border:1px solid #425443;border-radius:5px;margin-bottom:20px}.difficulty-control label{display:block;flex:0 0 240px;font-size:13px;color:#dcc18c}.difficulty-control select{display:block;width:100%;margin-top:8px;border:1px solid #5d7155;padding:9px 10px;border-radius:4px;font:13px 'DM Sans',sans-serif;background:#23332a;color:var(--text)}.difficulty-control p{font-size:13px;line-height:1.6;margin:0}.deck-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.deck-slot{position:relative;min-width:0;overflow:hidden;background:#172d23;border:1px solid #556444;border-radius:5px;padding:0;color:var(--text)}.deck-slot.editing{border:2px solid #e5c47e;box-shadow:0 0 10px #d5b77530}.slot-art{display:block;width:100%;aspect-ratio:1;background-size:300% 200%;background-repeat:no-repeat}.slot-order{position:absolute;top:4px;left:5px;color:#fff4c7;background:#122419dd;border:1px solid #ccaf7366;width:22px;height:22px;border-radius:50%;font-size:12px;display:grid;place-items:center}.slot-name{display:block;padding:6px 3px 2px;font-size:11px;min-height:30px}.slot-cost{display:block;font-size:11px;color:#c9a5e6;padding-bottom:6px}.collection-heading{display:flex;justify-content:space-between;gap:12px;padding:20px 0 13px;font-size:12px;color:var(--gold)}#draftAverage{color:#98af9b;white-space:nowrap}.card-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.collection-card{border:1px solid #3d5545;border-radius:5px;overflow:hidden;padding:0;text-align:left;color:var(--text);background:#11221c}.collection-card:hover{border-color:var(--gold);background:#243c2d}.collection-card.in-deck{border-color:#a1b477}.collection-art{height:124px;position:relative;display:block;background-size:300% 200%;background-repeat:no-repeat}.collection-cost{position:absolute;top:7px;left:7px;padding:4px 7px;background:#694286;border:1px solid #c1a2d8;border-radius:6px;font-size:12px}.collection-tag{position:absolute;bottom:7px;right:7px;color:#eed698;background:#112019df;padding:4px 6px;font-size:10px;letter-spacing:1px}.collection-tag:empty{display:none}.collection-copy{display:block;padding:11px;min-height:154px}.collection-copy>strong{font:600 24px 'Cormorant Garamond',Georgia,serif;display:block}.collection-copy>small{font-size:9px;letter-spacing:.6px;color:#c7b987;display:block;margin:5px 0 8px}.collection-copy>span{display:block;font-size:12px;line-height:1.55;color:#b0c0ae}.loadout-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:0;background:#182a28;padding:16px 0;border-top:1px solid #4d614c;margin-top:20px}.loadout-actions .map-cancel{margin:0}.loadout-actions .primary-btn{margin:0}
@media(max-width:680px){#loadoutDialog{padding:24px 15px 0}.difficulty-control{display:block;padding:12px}.difficulty-control p{margin-top:12px}.deck-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.slot-art{aspect-ratio:1.5}.slot-name{font-size:11px}.card-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-art{height:120px}.collection-copy{padding:10px;min-height:174px}.collection-copy>strong{font-size:22px}.collection-heading{font-size:11px;align-items:center}.loadout-bar button{font-size:11px;padding:8px}.loadout-bar strong{font-size:10px}.loadout-bar small{font-size:10px}.overlay{overflow:auto}.overlay-content{max-width:100%}}