:root{color-scheme:dark;--gold:#dfc789;--muted:#b7bbbf;--ink:#0b1017;--panel:#111922ef;--line:#8f8056;--blue:#163e60;--green:#6bdf81;--font:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink);color:#eee9dd;font-family:'Hiragino Sans',system-ui,sans-serif}body{background:linear-gradient(#08111caa,#050910ed),url('/assets/backgrounds/wizardtower.png') center/cover fixed}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:disabled{opacity:.48;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #b9e9ff;outline-offset:3px}input,select{border:1px solid #7b755e;border-radius:2px;background:#070e18d9;color:#fff;padding:10px;min-width:0}input::placeholder{color:#a8adb2}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font);font-weight:500}a{color:var(--gold)}small,.muted{color:var(--muted)}.hidden{display:none!important}.loading-screen{min-height:100dvh;display:grid;place-content:center;font:46px var(--font);letter-spacing:3px;text-align:center;color:var(--gold)}.loading-screen span{font:14px sans-serif;letter-spacing:0;margin-top:20px}.toolbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;background:linear-gradient(#24303ddd,#090d15ef);border-bottom:1px solid #a09570;box-shadow:0 2px 18px #000;position:relative;z-index:5}.brand{font:24px var(--font);letter-spacing:1px;color:var(--gold);background:none;border:0;padding:0}.profile{display:flex;align-items:center;gap:12px}.profile-name{font-size:14px}.currencies{display:flex;gap:22px;font-size:13px}.currencies b{color:#f8e1aa;font-size:17px;font-family:var(--font);margin-right:4px}.page{min-height:calc(100dvh - 128px);padding:28px clamp(12px,4vw,64px) 34px;max-width:1580px;margin:auto}.page-title{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #a08b59;margin-bottom:22px;padding-bottom:12px}.page-title h1{margin:0;font-size:27px;letter-spacing:2px}.page-title small{font-size:12px;display:block;margin-top:5px;letter-spacing:0}.bottom-nav{min-height:66px;position:sticky;bottom:0;z-index:6;display:flex;justify-content:center;background:linear-gradient(#354453,#101722 54%,#070b12);border-top:1px solid var(--gold);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{flex:1;max-width:210px;min-height:64px;border:0;border-left:1px solid #a3987038;background:linear-gradient(130deg,#ffffff08,#0003);font-family:var(--font);font-size:16px;letter-spacing:3px;text-shadow:0 2px #000}.bottom-nav button.active{background:linear-gradient(#726239aa,#251d17);box-shadow:inset 0 3px var(--gold);color:#fff2c4}.bottom-nav button:hover{color:#fbe8ab;background-color:#ffffff12}.btn{border:1px solid #a79d77;border-radius:3px;padding:10px 20px;background:linear-gradient(#35485b,#192638 45%,#0c1724);box-shadow:inset 0 0 0 2px #080d16,0 3px 8px #0007;font-family:var(--font);white-space:nowrap}.btn:hover:not(:disabled){filter:brightness(1.25)}.btn.gold{border-color:#eadba1;background:linear-gradient(#87793d,#4b481d 45%,#272a14);color:#fff3c5}.btn.danger{background:linear-gradient(#783943,#31141d);border-color:#ae6470}.btn.small{padding:6px 12px;font-size:12px}.btn.ghost{background:#0c152077}.btn.chosen{border-color:#b9f5cf;box-shadow:inset 0 0 16px #39814d99,0 0 9px #47c47b99}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.frame{background:linear-gradient(135deg,#2e3844e8,#111820ef);border:1px solid #a89765;box-shadow:inset 0 0 0 3px #080e18,0 8px 28px #0008;padding:24px;position:relative}.frame:before,.frame:after{content:'◆';position:absolute;color:#baa16a;font-size:12px;top:-9px}.frame:before{left:12px}.frame:after{right:12px}.frame h2{color:#ebd6a3;font-size:21px}.notice{background:#112437d9;border-left:3px solid #ae985f;padding:14px;line-height:1.7}.error{color:#f7abb1}.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.form{display:grid;gap:14px}.form label{display:grid;gap:6px;font-size:13px;color:#ddcfae}.form-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.empty{text-align:center;color:#b9b9b3;padding:36px;line-height:1.8}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #b4a47a33;padding:13px 4px}.row:last-child{border-bottom:0}.row p{margin:5px 0;font-size:13px}.rows{display:grid}.small-text{font-size:12px;line-height:1.7}.divider{height:1px;background:linear-gradient(90deg,transparent,#b6a374,transparent);margin:20px 0}
/* Title and home follow the original menu hierarchy, with currency at the top and navigation below. */
.title-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 25%,#32293b33,transparent 60%)}.title-screen .frame{width:min(620px,100%);text-align:center;padding:35px}.wordmark{font:clamp(40px,8vw,75px) var(--font);color:#e7d8a8;text-shadow:0 3px 1px #38270c,0 0 25px #aea167;letter-spacing:3px}.subtitle{letter-spacing:5px;color:#c6c4c0;font:12px var(--font);margin:12px 0 32px}.user-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.home-scene{position:relative;min-height:calc(100dvh - 200px);display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:32px}.home-emblem{aspect-ratio:1;width:min(470px,90%);border:1px solid #d2bd7b77;border-radius:50%;margin:auto;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#15202ea8 35%,#18253644 70%,transparent);box-shadow:0 0 0 12px #ad955315,0 0 0 14px #ccb56c45,inset 0 0 70px #050912,0 0 100px #090d23}.home-emblem:before{content:'F';font:145px var(--font);line-height:1.1;color:#d8c799;text-shadow:0 0 40px #a78a68}.home-emblem h1{margin:0;font-size:39px;letter-spacing:2px;color:#e6d4a4}.home-menu{display:grid;gap:16px;max-width:470px}.home-menu .btn{text-align:left;padding:21px 25px;font-size:22px;letter-spacing:3px;background:linear-gradient(110deg,#35465ce0,#0a1528d9);position:relative}.home-menu .btn:after{content:'›';position:absolute;right:22px;color:#dcc990}.home-menu .btn small{display:block;font:11px sans-serif;letter-spacing:1px;margin-top:7px}.home-menu .gold{background:linear-gradient(110deg,#746539db,#221d10e8)}.home-status{margin:15px 0;display:flex;gap:25px;font-size:12px;flex-wrap:wrap}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.class-tile{min-height:200px;position:relative;overflow:hidden;border:1px solid #b9a36b;background:var(--tone,#394553);padding:0;text-align:left;box-shadow:0 6px 15px #0008}.class-tile img{width:100%;height:170px;object-fit:cover;object-position:center 40%;opacity:.75;transition:.3s}.class-tile:hover img,.class-tile.chosen img{opacity:1;transform:scale(1.035)}.class-tile .class-name{display:block;padding:12px;background:linear-gradient(#29333cd9,#0d131b);font:17px var(--font);text-align:center}.class-tile.chosen{border:2px solid #dcefb4;box-shadow:0 0 18px #b8d16f66}.difficulty{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.deck-selection{width:min(600px,100%);display:flex;align-items:center;gap:16px}.deck-selection select{flex:1}
/* Metal card frame: green cost, blue attack, red health; frame is independent of art. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:22px 16px}.card-wrap{position:relative}.card{display:block;width:100%;position:relative;aspect-ratio:0.715;background:#1c2330;border:3px solid #a29c84;border-radius:16px 16px 11px 11px;padding:0;overflow:visible;box-shadow:inset 0 0 0 3px #23252d,0 5px 12px #000c;isolation:isolate;text-align:center;color:#faf7e9;transition:filter .15s,transform .15s;--rarity:#a89d86}.card:before{content:'';position:absolute;inset:1px;border:1px solid #f4e9b480;border-radius:11px;pointer-events:none;z-index:2}.card:after{content:'◆';position:absolute;bottom:-7px;left:calc(50% - 8px);font-size:17px;color:var(--rarity);text-shadow:0 1px #000;z-index:3}.card.bronze{border-color:#ac8968;--rarity:#b18767}.card.silver{border-color:#bdc6cb;--rarity:#d9e1e4}.card.gold{border-color:#d5b865;--rarity:#eed084}.card.legend{border-color:#d7c788;--rarity:#eedcaa;box-shadow:0 0 13px #d7c16c55,0 6px 16px #000}.card-art{position:absolute;inset:4px 4px 8px;overflow:hidden;border-radius:11px 11px 8px 8px;background:radial-gradient(circle,var(--tone,#3a4960),#10141d)}.card-art img{width:100%;height:100%;object-fit:cover;display:block}.card-name{position:absolute;z-index:3;top:9px;left:28px;right:3px;min-height:24px;display:grid;place-content:center;padding:3px 2px;background:linear-gradient(#26304cd9,#11192bdd);border:1px solid #e0cf9080;font:clamp(9px,1vw,12px) var(--font);line-height:1.3;box-shadow:0 2px 3px #000}.orb{position:absolute;z-index:4;display:grid;place-items:center;font:700 27px var(--font);text-shadow:0 2px 2px #000;line-height:1;width:39px;height:40px;border:2px solid #dac99b;box-shadow:inset 0 1px 5px #ffffff77,0 2px 4px #000;border-radius:50%}.cost{top:-7px;left:-9px;background:radial-gradient(at 35% 25%,#a8c958,#3e7719 48%,#102e13)}.attack{bottom:-8px;left:-6px;background:linear-gradient(135deg,#367bbd,#132a57);border-radius:8px 11px 10px 2px;clip-path:polygon(50% 0,100% 25%,100% 85%,50% 100%,0 85%,0 25%)}.health{bottom:-8px;right:-6px;background:linear-gradient(135deg,#bd5355,#69162a);border-radius:7px 7px 16px 16px}.owned{display:block;margin-top:13px;text-align:center;font-size:12px;color:#d5c7a5}.card.unowned{filter:grayscale(.65) brightness(.68)}.card:hover{filter:brightness(1.12)}.inspect-card{position:absolute;right:0;bottom:22px;border:1px solid #b1a685;border-radius:50%;background:#0c182ae8;color:#e0d8bc;width:27px;height:27px;z-index:5}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;align-items:center}.filters input{flex:1;min-width:130px}.filters select{font-size:12px;max-width:170px}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin:26px 0 0}.card-detail{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:35px;align-items:start}.card-detail .card-name{font-size:16px;padding:7px}.card-detail .orb{width:51px;height:53px;font-size:34px}.card-detail .ability{background:#050b13ab;padding:16px;border:1px solid #897954;min-height:100px;font:15px/1.8 var(--font);white-space:pre-line}.card-detail .flavor{font:13px/1.7 var(--font);color:#c3c0b2;margin-top:18px}.detail-tabs{display:flex;gap:10px;margin-bottom:18px}.detail-meta{font-size:12px;color:#cbbb99;margin-bottom:14px}.detail-resource{margin:14px 0}
/* Deck editing keeps the collection and forty-card list visible together. */
.deck-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.deck-tile{padding:20px;background:linear-gradient(100deg,#283b49e8,#101823ee);border:1px solid #a2956e}.deck-tile h3{font-size:19px;margin-bottom:10px}.deck-tile .class-badge{font-size:12px;color:#d8c691;margin-bottom:14px}.deck-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:25px}.deck-editor .collection{min-width:0}.deck-sidebar{position:sticky;top:15px;align-self:start;max-height:calc(100dvh - 180px);overflow:auto;padding:18px;background:#081321e8;border:1px solid #ad9b68}.deck-sidebar header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.deck-counter{font:28px var(--font);color:#e8d397}.deck-entry{display:flex;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #ad9e6b33;font-size:11px}.deck-entry .entry-cost{border-radius:50%;background:#446626;color:#eaf3d1;width:24px;height:24px;display:grid;place-content:center}.deck-entry .entry-name{flex:1}.deck-entry .entry-missing{color:#f69d9d}.deck-entry button{width:24px;height:24px;background:#18263b;border:1px solid #96784f}.mana-curve{height:60px;display:flex;align-items:flex-end;gap:5px;padding:5px 0 16px;margin:8px 0 18px;border-bottom:1px solid #827454}.mana-curve .bar{flex:1;position:relative;min-height:2px;background:linear-gradient(#5fa29d,#27424f);border:1px solid #91a69c}.mana-curve .bar span{position:absolute;bottom:-17px;text-align:center;width:100%;font-size:10px}.recipes{display:grid;gap:14px}.recipe{padding:16px;background:#08121ec7;border:1px solid #786e54}.recipe .recommended{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin:12px 0}.room-code{font:64px var(--font);letter-spacing:10px;color:#eee0b5;text-align:center;padding:20px}.room-input{font:30px var(--font);letter-spacing:5px;width:100%;text-align:center}.room-waiting{width:min(650px,100%);margin:30px auto}.gift-list{max-width:850px;margin:auto}
/* Battle proportions and information positions are taken from the original playguide. */
.battle-screen{min-height:100dvh;background:#07121d;display:grid;place-items:center}.arena{--unit-w:clamp(53px,8.1vw,116px);--unit-h:calc(var(--unit-w)*1.25);width:100%;height:100dvh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#41615322,#071416d9 76%),url('/assets/backgrounds/sunsetintheswamp.png') center/cover;isolation:isolate}.arena:before{content:'';position:absolute;left:16%;right:16%;top:23%;height:54%;border-radius:50%;background:repeating-radial-gradient(ellipse,#aaaa6530 0 1px,transparent 2px 20px),radial-gradient(ellipse,#8b7b5133,#25353545 62%,transparent);transform:rotate(-12deg);border:1px solid #bbb48526;z-index:-1}.battle-menu{position:absolute;top:14px;left:14px;display:flex;gap:8px;z-index:9}.battle-menu .btn{background:#0e1d2cde}.opponent-hand{position:absolute;top:-27px;left:17%;display:flex;gap:4px;transform:rotate(180deg);height:70px}.card-back{width:36px;height:60px;border:1px solid #b4a279;border-radius:4px;background:repeating-linear-gradient(45deg,transparent 0 8px,#baa36c1c 8px 9px),radial-gradient(ellipse,#103753,#091022 65%);box-shadow:0 0 0 2px #202b39,0 3px 8px #000}.card-back:after{content:'✧';display:grid;place-content:center;height:100%;color:#cbb573;font-size:27px}.leader-zone{position:absolute;left:calc(50% - 100px);width:200px;display:flex;align-items:center;justify-content:center}.leader-zone.enemy{top:-15px}.leader-zone.self{bottom:140px}.leader{position:relative;width:clamp(106px,14vw,172px);height:clamp(104px,12vw,149px);border:4px solid #b7ad8e;border-radius:50%;padding:0;background:linear-gradient(130deg,#635842,#1c3343);box-shadow:0 0 0 2px #282326,0 5px 20px #0009;isolation:isolate}.leader img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:cover;border-radius:50%;filter:brightness(.8)}.leader-name{position:absolute;bottom:7px;left:-10%;right:-10%;font:13px var(--font);text-align:center;background:#050c17b8;padding:3px;color:#e9dcba;border:1px solid #ad9d73;border-radius:2px;z-index:2}.leader-hp{position:absolute;top:10px;right:-14px;color:#ffb4ae;font:36px var(--font);text-shadow:2px 2px #5f1221,-1px -1px #6f1924,0 0 5px #000;z-index:4}.evolve-points{position:absolute;left:-25px;bottom:8px;border:1px solid #cbb974;background:radial-gradient(circle,#867121,#343416);border-radius:50%;width:52px;height:52px;display:grid;place-content:center;box-shadow:0 0 0 4px #302d29,0 0 0 5px #b8a267;z-index:3;font:17px var(--font);text-align:center;color:#f3df84}.evolve-points small{font-size:9px;display:block;color:#e6d993}.super-points{position:absolute;left:28px;bottom:-12px;border-radius:50%;width:32px;height:32px;background:#583960;border:2px solid #c6aadd;font:16px var(--font);display:grid;place-content:center}.battle-pp{position:absolute;top:30%;right:3%;display:grid;justify-items:center;gap:12px;z-index:5}.end-turn{width:clamp(82px,13vw,166px);height:clamp(82px,13vw,166px);border-radius:50%;border:7px double #cbbb88;background:radial-gradient(circle at 40% 30%,#347ea1,#144064 50%,#071c3b);box-shadow:0 0 0 5px #243335,0 0 0 6px #aa986d,inset 0 0 20px #050c1b,0 8px 30px #000;font:clamp(14px,2vw,22px) var(--font);line-height:1.6;color:#e9edf0;text-shadow:0 1px #000}.end-turn:disabled{opacity:.8;background:radial-gradient(circle,#3a4551,#172230 70%);color:#8f9ca7}.pp-track{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;max-width:140px}.pp-dot{height:14px;width:14px;border:1px solid #cecea1;border-radius:50%;background:#142626;box-shadow:0 0 0 2px #152420}.pp-dot.filled{background:radial-gradient(at 35% 25%,#d6fbb0,#79b343 50%,#31552b);box-shadow:0 0 7px #bdf3698c}.pp-number{color:#e6e3ba;background:linear-gradient(#36492b,#15201c);border:2px solid #a6aa7b;padding:8px 17px;min-width:69px;text-align:center;font:29px var(--font)}.pp-number small{font-size:13px;display:block}.opponent-pp{position:absolute;top:9px;left:calc(50% - 140px);background:#253f27;border:1px solid #aaa37a;padding:9px 10px;font:21px var(--font);z-index:4}.opponent-pp small{display:block;font-size:11px}.battle-timer{font:14px var(--font);color:#e5e1d1;text-shadow:0 2px #000}.battle-timer.urgent{color:#ffb2a0}.resource-box{position:absolute;left:16px;bottom:27px;display:grid;gap:6px;z-index:4}.resource-box.enemy{left:auto;right:18px;top:18px;bottom:auto}.resource-line{background:#070d13bb;border:1px solid #b2a48255;min-width:112px;padding:7px 10px;color:#ddded3;font:13px var(--font);display:flex;justify-content:space-between;gap:18px}.board{position:absolute;left:19%;right:23%;height:var(--unit-h);display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vw,22px);z-index:3}.board.enemy{top:25%}.board.self{top:49%}.unit{width:var(--unit-w);height:var(--unit-h);position:relative;border:3px solid #b7a77c;border-radius:50% 50% 15px 15px;padding:0;background:#26323c;box-shadow:inset 0 0 0 2px #403a34,0 5px 13px #000a;isolation:isolate;flex:none}.unit img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;border-radius:inherit}.unit:before{content:'';position:absolute;inset:2px;border:1px solid #efdc9480;border-radius:inherit;z-index:1}.unit.ready{box-shadow:0 0 0 2px #b5ff77,0 0 18px #8acc74aa,0 4px 11px #000}.unit.selected{box-shadow:0 0 0 3px #ffeb95,0 0 22px #ffc96b}.unit.evolved{border-color:#cfbeec;box-shadow:0 0 10px #9068aeaa}.unit.super{border-color:#f4d392;box-shadow:0 0 22px #f0c18daa}.unit.ward:after{content:'';position:absolute;inset:-8px -6px;border:2px solid #8ccec6aa;border-radius:52% 52% 22px 22px;box-shadow:inset 0 0 10px #80dcca55;pointer-events:none}.unit.amulet{border-radius:8px 8px 30px 30px;border-color:#a2b2bb}.unit .orb{width:32px;height:32px;font-size:22px}.unit .countdown{position:absolute;bottom:-10px;left:calc(50% - 16px);border-radius:50%;background:#1f3650;border:2px solid #bca678;display:grid;place-content:center;width:32px;height:32px;font:22px var(--font)}.unit .unit-keywords{position:absolute;top:-10px;right:-9px;font-size:10px;background:#111a29b8;border:1px solid #cbbb95;border-radius:50%;padding:4px;z-index:4}.unit.placeholder{opacity:.15;border:1px dashed #aaa17c;background:transparent;box-shadow:none;pointer-events:none}.unit.placeholder:before{display:none}.battle-hand{position:absolute;bottom:-24px;left:31%;right:5%;display:flex;align-items:flex-end;justify-content:center;height:180px;z-index:7;padding-top:35px}.hand-card{width:clamp(77px,10vw,142px);flex:none;margin-left:clamp(-40px,-3.2vw,-16px);transform-origin:center bottom;transform:translateY(var(--hand-y,0px)) rotate(var(--hand-rotation,0deg));transition:transform .18s;position:relative}.hand-card:first-child{margin-left:0}.hand-card:hover,.hand-card.selected{transform:translateY(-28px) rotate(0);z-index:20}.hand-card.playable .card{box-shadow:0 0 0 2px #a9f49f,0 0 15px #52b669a6,0 4px 8px #000}.hand-card .card-name{font-size:10px;left:20px;top:5px}.hand-card .orb{font-size:22px;width:31px;height:32px}.battle-instruction{position:absolute;left:22%;right:24%;top:44%;text-align:center;font:14px var(--font);text-shadow:0 2px #000;pointer-events:none;z-index:2;color:#e7d9ae}.targetable{outline:3px solid #ffa773!important;outline-offset:5px;cursor:crosshair;filter:brightness(1.2)}.target-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}.battle-effect{position:absolute;z-index:30;pointer-events:none;color:#fff0d7;text-shadow:0 2px #81252b,0 0 8px #75101b;font:44px var(--font);transform:translate(-50%,-50%)}.battle-effect.heal{color:#baffbc;text-shadow:0 2px #134e2b}.turn-banner{position:absolute;inset:37% 0 auto;z-index:40;text-align:center;font:clamp(26px,5vw,60px) var(--font);color:#d9efff;text-shadow:0 0 16px #719ac8;padding:20px;background:linear-gradient(90deg,transparent,#0b234ee3,transparent);letter-spacing:5px;pointer-events:none}.log-panel{position:absolute;left:10px;top:76px;bottom:100px;width:min(320px,60vw);z-index:22;overflow:auto;background:#06101dec;border:1px solid #b8a473;padding:18px;box-shadow:0 8px 24px #000}.log-panel p{font-size:12px;line-height:1.7;border-bottom:1px solid #796d4233;padding-bottom:8px}.battle-detail{position:absolute;top:75px;left:12px;z-index:23;width:min(300px,65vw);background:#08111dec;border:1px solid #bea97d;box-shadow:0 8px 20px #000;padding:18px}.battle-detail h3{color:#e4d3a0;font-size:17px}.battle-detail .ability{font:13px/1.8 var(--font);margin:14px 0}.battle-detail .actions{gap:8px}.battle-detail .btn{padding:8px 13px;font-size:12px}.battle-menu-panel{position:absolute;top:58px;left:13px;z-index:24;display:grid;gap:8px;padding:18px;background:#101a2df2;border:1px solid #ab9970}.connection-status{position:absolute;top:15px;right:17px;background:#431929e8;border:1px solid #b16c6c;padding:10px;font-size:12px;z-index:45;max-width:70vw}
/* Dialogs are real controls; card targets are never entered into prompts. */
.modal-shade{position:fixed;inset:0;background:#030712c7;display:grid;place-items:center;padding:24px;z-index:100;backdrop-filter:blur(5px)}.modal-panel{width:min(920px,100%);max-height:90dvh;overflow:auto;background:linear-gradient(125deg,#2a3441,#101722 60%);border:2px solid #baa774;box-shadow:0 0 0 3px #0c111c,inset 0 0 0 4px #101722,0 15px 65px #000;padding:28px;position:relative}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;border-bottom:1px solid #998154;padding-bottom:12px}.modal-head h2{font-size:24px;color:#e2c992;margin:0}.modal-head button{background:none;border:1px solid #9e8b6a;color:#ded6c2;width:32px;height:32px;font-size:20px}.modal-panel.narrow{max-width:500px}.modal-panel p{line-height:1.8}.mulligan-grid{display:flex;justify-content:center;gap:20px;max-width:660px;margin:20px auto 32px}.mulligan-grid .card-wrap{flex:1;max-width:175px}.mulligan-grid .replace-label{display:block;background:#4d1b28;color:#ffd0c1;border:1px solid #d4867a;margin-top:15px;padding:6px;text-align:center}.mulligan-grid .picked .card{outline:3px solid #dc8373;filter:brightness(.6)}.result{text-align:center;min-height:360px;display:grid;place-content:center}.result-word{font:clamp(60px,10vw,110px) var(--font);letter-spacing:5px;color:#f0dfac;text-shadow:0 0 30px #c6b36b}.result-word.lose{color:#9bbed8;text-shadow:0 0 20px #647dad}.result-reward{font:22px var(--font);margin:30px 0;color:#dccb91}.pack-stage{height:300px;display:grid;place-content:center;background:radial-gradient(circle,#796b2933,transparent 65%);perspective:800px}.booster{height:240px;width:160px;border:4px double #d6c487;border-radius:8px;background:linear-gradient(130deg,#465e6f,#101c36 48%,#334552);box-shadow:0 8px 20px #000;display:grid;place-content:center;text-align:center;font:24px var(--font);color:#e7d9a3;transform:rotate(-7deg)}.booster small{display:block;font:12px var(--font);margin-top:13px;color:#ddd2bb}.pack-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 16px;margin:25px auto;max-width:780px}.pack-reveal{animation:card-reveal .5s both;animation-delay:calc(var(--reveal-i,0)*.065s)}.pack-legend .card{animation:legend-glow 1.4s ease-in-out infinite alternate}.legend-heading{font:36px var(--font);letter-spacing:5px;text-align:center;color:#f1dda3;text-shadow:0 0 20px #e3be6a}.pack-summary{display:flex;align-items:center;justify-content:space-between;gap:15px}.toast{position:fixed;left:50%;bottom:85px;transform:translateX(-50%);padding:14px 24px;background:#112334f5;border:1px solid #c4b57d;box-shadow:0 4px 25px #000;color:#f8efd8;z-index:200;width:max-content;max-width:90vw;font-size:13px;line-height:1.7;pointer-events:none;animation:toast-in .2s ease-out}
@keyframes card-reveal{from{opacity:0;transform:translateY(24px) rotateY(90deg)}to{opacity:1;transform:none}}@keyframes legend-glow{from{filter:drop-shadow(0 0 5px #ffd765)}to{filter:drop-shadow(0 0 20px #ffe69b)}}@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(min-width:1500px){.arena{max-width:1600px;height:min(100dvh,980px)}}
@media(max-width:900px){.page{padding-top:20px}.class-grid{grid-template-columns:repeat(4,1fr);gap:10px}.class-tile{min-height:155px}.class-tile img{height:125px}.class-tile .class-name{font-size:13px;padding:10px 3px}.deck-editor{grid-template-columns:minmax(0,1fr) 240px;gap:15px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}.currencies{gap:12px}.board{left:18%;right:23%}.leader-zone.self{bottom:126px}.battle-hand{height:150px}.resource-box{left:10px;bottom:18px}.resource-line{min-width:93px;font-size:11px}.battle-menu{top:10px;left:10px}.battle-menu .btn{padding:8px 10px;font-size:11px}.battle-pp{right:3%}.unit .orb{width:27px;height:28px;font-size:19px}.unit .countdown{width:27px;height:28px;font-size:18px}.pp-dot{height:11px;width:11px}.pp-track{max-width:100px}.pp-number{font-size:24px;padding:7px 13px}.card .orb{width:32px;height:33px;font-size:23px}.card-name{font-size:10px;left:23px;top:7px}.home-emblem:before{font-size:110px}.home-emblem h1{font-size:29px}.home-menu .btn{font-size:19px;padding:20px}.home-status{gap:12px}.battle-detail{width:250px}.card-detail{gap:25px}}
@media(max-width:600px){.toolbar{height:auto;min-height:70px;padding:10px 12px;gap:6px}.profile{gap:7px;align-items:flex-start;flex-direction:column}.brand{font-size:20px}.profile-name{font-size:10px}.currencies{gap:7px;font-size:9px;flex-wrap:wrap;justify-content:flex-end;max-width:205px}.currencies b{font-size:14px}.page{padding:20px 12px 26px;min-height:calc(100dvh - 132px)}.page-title h1{font-size:24px}.page-title .btn{padding:8px 10px;font-size:12px}.bottom-nav{min-height:62px}.bottom-nav button{min-height:60px;font-size:12px;letter-spacing:1px}.home-scene{grid-template-columns:1fr;gap:30px;padding:15px 0;min-height:auto}.home-emblem{width:210px}.home-emblem:before{font-size:75px}.home-emblem h1{font-size:24px}.home-menu{max-width:none;grid-template-columns:1fr 1fr;gap:12px}.home-menu .btn{font-size:16px;padding:18px 14px;letter-spacing:1px}.home-menu .btn:after{display:none}.home-menu .btn small{font-size:9px}.home-status{justify-content:center;font-size:10px}.frame{padding:18px}.split{grid-template-columns:1fr;gap:18px}.class-grid{grid-template-columns:repeat(2,1fr);gap:14px}.class-tile img{height:150px}.class-tile .class-name{font-size:15px}.difficulty{grid-template-columns:repeat(3,1fr);gap:8px}.difficulty .btn{font-size:13px;padding:10px}.deck-selection{flex-wrap:wrap}.deck-selection select{width:100%;flex-basis:100%}.filters{gap:7px;margin-bottom:16px}.filters input{flex-basis:100%;font-size:13px}.filters select{flex:1;padding:8px 5px;font-size:11px;min-width:82px}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}.card .orb{width:29px;height:30px;font-size:21px}.card-name{font-size:9px;left:19px;top:5px;min-height:21px}.owned{font-size:10px}.card-detail{grid-template-columns:1fr;gap:25px}.card-detail>.detail-art{width:190px;margin:auto}.card-detail .card-name{font-size:12px}.card-detail .orb{width:39px;height:40px;font-size:27px}.modal-shade{padding:14px}.modal-panel{padding:19px;max-height:93dvh}.modal-head h2{font-size:20px}.deck-editor{display:flex;flex-direction:column-reverse}.deck-sidebar{position:relative;top:0;max-height:330px;width:100%;padding:14px}.deck-tiles{grid-template-columns:1fr}.room-code{font-size:51px;letter-spacing:7px}.pack-cards{gap:24px 12px;grid-template-columns:repeat(2,1fr)}.pack-stage{height:240px}.booster{height:195px;width:135px;font-size:20px}.mulligan-grid{gap:12px}.mulligan-grid .replace-label{font-size:11px}.user-choices{grid-template-columns:1fr}.title-screen .frame{padding:25px 18px}.battle-screen{align-items:stretch}.arena{--unit-w:clamp(52px,13vw,75px);--unit-h:calc(var(--unit-w)*1.35)}.board{left:3%;right:3%;gap:clamp(5px,2vw,10px)}.board.enemy{top:25%}.board.self{top:45%}.leader-zone{left:calc(50% - 90px);width:180px}.leader-zone.enemy{top:12px}.leader-zone.self{bottom:183px;left:calc(45% - 90px)}.leader{width:116px;height:109px}.leader-hp{font-size:31px;right:-11px;top:5px}.leader-name{font-size:10px;bottom:6px}.evolve-points{width:39px;height:39px;font-size:14px;left:-17px}.evolve-points small{font-size:8px}.super-points{width:27px;height:27px;left:23px;font-size:13px;bottom:-9px}.battle-hand{left:12%;right:4%;bottom:14px;height:139px;justify-content:flex-start;padding-left:12px;overflow-x:auto;overflow-y:visible;padding-top:32px}.hand-card{width:92px;margin-left:-28px;--hand-rotation:0deg!important;--hand-y:0px!important}.hand-card:first-child{margin-left:0}.hand-card .orb{width:27px;height:28px;font-size:19px}.hand-card .card-name{font-size:9px;left:17px;min-height:20px}.battle-pp{top:auto;bottom:183px;right:6%;gap:8px}.end-turn{width:74px;height:74px;border-width:5px;font-size:12px;line-height:1.5}.pp-track{max-width:70px;gap:3px}.pp-dot{width:9px;height:9px}.pp-number{min-width:54px;padding:3px 10px;font-size:20px}.pp-number small{font-size:10px}.battle-timer{font-size:11px}.opponent-pp{top:43px;left:calc(50% - 115px);font-size:18px;padding:6px 8px}.resource-box{bottom:161px;left:10px;gap:4px}.resource-box.enemy{top:13px;right:10px}.resource-line{min-width:69px;padding:5px 7px;gap:10px;font-size:9px}.opponent-hand{left:17%;top:-30px;gap:3px}.card-back{width:24px;height:45px}.card-back:after{font-size:17px}.battle-instruction{top:39%;left:4%;right:4%;font-size:12px}.battle-menu{top:14px;left:10px;display:grid;gap:5px}.battle-menu .btn{font-size:10px;padding:6px 9px}.battle-detail{top:65px;left:10px;width:230px;padding:15px}.log-panel{top:75px;bottom:170px;width:270px}.battle-effect{font-size:35px}.unit .orb{width:25px;height:26px;font-size:19px}.unit .unit-keywords{font-size:8px;padding:3px}.arena:before{left:4%;right:4%;top:24%;height:41%}.battle-detail .btn{font-size:11px;padding:8px}.toast{bottom:78px}}
@media(max-height:520px) and (orientation:landscape){.arena{--unit-w:clamp(48px,8vw,76px);--unit-h:calc(var(--unit-w)*1.2)}.leader{width:99px;height:86px}.leader-zone.self{bottom:36px;left:calc(39% - 100px)}.leader-zone.enemy{top:-11px}.leader-name{font-size:9px}.leader-hp{font-size:29px}.evolve-points{width:35px;height:35px;font-size:13px;left:-19px}.evolve-points small{font-size:7px}.super-points{width:23px;height:23px;font-size:12px}.board.enemy{top:24%}.board.self{top:51%}.battle-hand{left:51%;right:5%;bottom:-24px;height:108px;padding-top:0}.hand-card{width:72px;margin-left:-30px}.hand-card .orb{width:24px;height:25px;font-size:18px}.hand-card .card-name{font-size:8px;left:16px;top:4px}.battle-pp{top:26%;right:3%;gap:8px}.end-turn{width:86px;height:86px;font-size:14px;border-width:5px}.pp-dot{width:8px;height:8px}.pp-track{max-width:90px;gap:3px}.pp-number{padding:3px 12px;font-size:22px;min-width:50px}.pp-number small{font-size:10px}.resource-line{padding:4px 8px;font-size:10px;min-width:85px}.resource-box{bottom:12px;left:10px;gap:3px}.resource-box.enemy{right:10px;top:10px}.battle-menu .btn{padding:5px 8px;font-size:10px}.battle-instruction{top:44%;font-size:12px}.opponent-pp{font-size:18px;top:9px;left:calc(50% - 116px);padding:6px 8px}.battle-detail{top:47px;max-height:calc(100% - 60px);overflow:auto;padding:12px;width:235px}.log-panel{top:49px;bottom:10px}.opponent-hand{top:-30px;height:45px}.card-back{width:28px;height:47px}.battle-timer{font-size:11px}.modal-panel{max-height:93dvh}.mulligan-grid .card-wrap{max-width:110px}.mulligan-grid{margin:12px auto 20px}.modal-panel h2{font-size:20px}}
.arena .unit{touch-action:none}.arena .hand-card{touch-action:pan-x}
@media(min-width:601px) and (min-height:521px){.battle-hand{bottom:14px}.leader-zone.self{bottom:176px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.spell-cast{position:absolute;left:50%;top:42%;z-index:50;pointer-events:none;padding:18px 35px;max-width:80%;text-align:center;font:600 clamp(18px,3vw,30px) var(--font);color:#f4e3ad;border-block:1px solid #dbce9b;background:radial-gradient(ellipse,#172036f2,#17203680,transparent);text-shadow:0 0 14px #cbdafa;box-shadow:0 0 30px #bdc5df3b}

.card-abilities{position:absolute;left:7%;right:7%;bottom:22%;font-size:10px;line-height:1.5;color:#fff2bd;text-align:center;background:#17121de8;border:1px solid #c3a65f;border-radius:3px;padding:2px;pointer-events:none}

/* Desktop battle uses the original 16:9 information layout; portrait phone
   retains its own touch layout above. Artwork is still provisional. */
@media(min-width:601px) and (min-height:521px){
 .arena{height:min(100dvh,56.25vw);--unit-w:clamp(58px,8.1vw,116px);--unit-h:calc(var(--unit-w)*1.2)}
 .arena:before{left:19%;right:24%;top:21%;height:51%;border:0;transform:none;background:radial-gradient(ellipse,#4a523133,transparent 70%)}
 .leader-zone.enemy{top:-25px}.leader-zone.self{bottom:24px;left:calc(47% - 100px)}
 .leader{width:clamp(104px,14vw,172px);height:clamp(91px,12vw,149px)}
 .board.enemy{top:25%}.board.self{top:51%}.battle-instruction{top:45%}
 .battle-hand{left:57%;right:6%;bottom:0;height:clamp(112px,14vw,180px);padding-top:15px}
 .hand-card{width:clamp(73px,9vw,125px);margin-left:clamp(-46px,-4.5vw,-27px)}
 .battle-pp{top:28%;right:3%;gap:clamp(5px,.9vw,12px)}.end-turn{width:clamp(88px,12vw,158px);height:clamp(88px,12vw,158px)}
 .pp-dot{width:clamp(9px,1.2vw,14px);height:clamp(9px,1.2vw,14px)}.pp-track{max-width:clamp(86px,12vw,140px)}
 .pp-number{font-size:clamp(20px,2.5vw,29px);padding:5px 13px}.resource-box{bottom:12px;gap:4px}.resource-line{padding:6px 10px}
 .battle-detail{max-height:calc(100% - 60px);overflow:auto}
}

/* Authored archetype guidance shares the existing card/deck panels. */
.recipe-strategy { line-height: 1.7; color: #eee6d7; margin: 12px 0; }
.recipe-guidance { margin-bottom: 22px; line-height: 1.7; }
.recommendation-group { margin: 14px 0; padding: 12px; border: 1px solid #b99b5944; background: #060c1499; }
.recommendation-group h3 { color: #dfc486; font-size: 15px; margin: 0 0 8px; }
.recommendation-card { display: grid; grid-template-columns: minmax(120px,1fr) 2fr; gap: 12px; padding: 6px 0; }
.recommendation-card .entry-name { text-align: left; white-space: normal; }
@media (max-width: 600px) { .recommendation-card { grid-template-columns: 1fr; gap: 2px; } }

/* Keep the decorative rim outside the illustration; reserve title and stat space. */
.card::before { inset: 0; border: 1px solid #f4e9b480; border-radius: inherit; background: none; pointer-events: none; }
.card-art { top: clamp(34px,24%,90px); right: 6px; bottom: clamp(16px,8%,32px); left: 6px; border-radius: 8px; }
.card-art img { object-fit: contain; object-position: center; }
.hand-card .card-art { top: clamp(40px,24%,48px); }
.hand-card .card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.card.bronze::before { filter: grayscale(1) sepia(.65) brightness(1.35); }
.card.gold::before { filter: grayscale(1) sepia(.85) saturate(1.7) brightness(1.65); }
.card.legend::before { filter: saturate(.45) brightness(1.7); }
.card-name { background: linear-gradient(#1c2943ef,#080e1cee); box-shadow: 0 2px 4px #000c; }
.home-leader{width:min(420px,100%);height:clamp(370px,58vh,620px);margin:auto;position:relative;overflow:hidden;border:1px solid #beaa74;background:radial-gradient(ellipse,var(--tone),#08111f 75%);box-shadow:0 0 0 4px #090f1a,0 0 0 5px #8f7b4a88,0 18px 55px #0009}
.home-leader img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.home-leader:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#07101acc 80%,#07101a);pointer-events:none;box-shadow:inset 0 0 65px #060c19}
.home-leader-caption{position:absolute;bottom:25px;left:20px;right:20px;text-align:center;z-index:1;color:#f0dfb1;text-shadow:0 2px 6px #000}
.home-leader-caption small{font:15px var(--font);letter-spacing:5px}
.home-leader-caption h1{margin:12px 0 0;font:clamp(28px,4vw,48px) var(--font);letter-spacing:2px}
@media(max-width:600px){.home-leader{height:280px;width:100%;max-width:370px}.home-leader img{object-position:center 28%}.home-leader-caption{bottom:15px}.home-leader-caption h1{font-size:28px;margin-top:7px}.home-leader-caption small{font-size:12px}.home-scene{gap:15px}}
.card-back { background: var(--card-back) center / 100% 100% no-repeat, #0b1221; }
.card-back::after { content: none; }
.art-credits { line-height: 1.8; }
.art-credits section { padding: 12px 0; border-bottom: 1px solid #bca36b44; }
.art-credits a { color: #e6cf95; text-decoration: underline; }
/* Class portraits remain fully visible at every tile width. */
.class-tile img { height: clamp(160px, 16vw, 220px); object-fit: contain; object-position: center; display: block; background: linear-gradient(135deg, #09121dcc, #16253599); }
.class-tile:hover img, .class-tile.chosen img { transform: none; }
.leader img { object-position: center 32%; filter: brightness(.95); }

/* Keep targets unobstructed after the player enters target selection. */
.battle-instruction .btn { display:block; margin:8px auto 0; pointer-events:auto; padding:6px 12px; font-size:11px; }

/* User-created cards: original art stays private; crop controls work on touch. */
.custom-editor{margin-top:20px;align-items:start}.custom-editor label{display:grid;gap:6px}.custom-editor fieldset{border:1px solid #89735a;padding:14px;border-radius:8px}.custom-image-preview{width:min(100%,256px);aspect-ratio:512/700;margin:12px auto;overflow:hidden;display:grid;place-items:center;background:#17222c;border:1px solid #a48759}.custom-image-preview canvas,.custom-image-preview img{width:100%;height:100%;object-fit:cover}.custom-editor input[type=range]{width:100%;min-height:40px}.custom-library{margin-top:24px}.custom-check-status{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;line-height:1.7}.custom-mode{display:flex;align-items:center;gap:10px;margin:15px 0}.custom-mode input{width:22px;height:22px}.custom-library .card-wrap{min-width:0}.custom-library .actions{justify-content:center}.custom-library .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* Card information follows the inspected card instead of the upper left. */
.battle-detail{position:fixed;z-index:35;width:300px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto}
.battle-detail.hover-detail{pointer-events:none}
.summon-description{border-top:1px solid #a88c6655;padding-top:8px;color:#edddad;font-size:12px;line-height:1.6}

.unit-protection{position:absolute;left:6px;right:6px;bottom:24px;background:#244a68e8;border:1px solid #b7dceb;border-radius:4px;color:#eaf6ff;font-size:10px;text-align:center;z-index:5;padding:2px;pointer-events:none}
.protection-description{color:#bbe5ff;border-bottom:1px solid #72899755;padding-bottom:8px}

.audio-settings{position:fixed;right:12px;top:82px;width:min(300px,calc(100vw - 24px));padding:18px;background:#0b1727f5;border:1px solid #b9a679;box-shadow:0 8px 25px #0009;z-index:80;border-radius:8px}
.audio-settings.in-battle{right:auto;left:12px;top:55px}
.audio-settings label{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0;font-size:14px}
.audio-settings input[type=range]{grid-column:1/-1;width:100%;min-height:32px;accent-color:#d1b46f;touch-action:pan-y}
@media(max-width:600px){.toolbar{flex-wrap:wrap}.audio-settings{top:90px}.audio-settings.in-battle{top:55px;left:8px}}

/* Click-to-inspect: detail text must not intercept combat target clicks. */
.battle-detail{pointer-events:none}
.battle-detail .actions{pointer-events:auto}