@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;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--cw:146px;--ch:202px;--uw:108px;--uh:130px}*{box-sizing:border-box}body{margin:0;background:#252a22;color:#eadcc0;font:16px var(--sans)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #52c7ed;outline-offset:5px}button:disabled{cursor:default}.game{height:100svh;min-height:650px;position:relative;isolation:isolate;overflow:hidden}.tabletop{position:absolute;inset:0;background:url('/assets/arena.png') center/100% 100% no-repeat;z-index:-3}.tabletop:after{content:'';position:absolute;inset:0;background:linear-gradient(#15231680,transparent 23%,transparent 68%,#122219a8),radial-gradient(ellipse at center,transparent 38%,#101a1722 70%,#0d1e1766)}
.game-brand{position:absolute;left:32px;top:25px;color:#efd099;font:700 22px var(--serif);letter-spacing:3px;text-shadow:0 2px 4px #000;z-index:3}.menu-button{position:absolute;right:27px;top:19px;border:1px solid #b29762;background:#302c23dd;width:44px;height:42px;border-radius:8px;box-shadow:0 3px 0 #151b15;color:#f5dca3;font-size:22px;z-index:10}.menu-button:hover{background:#5d4e32}.playmat{position:absolute;inset:25px 16% 0;display:grid;grid-template-rows:100px minmax(100px,1fr) 1px minmax(100px,1fr) 104px 224px;pointer-events:none}.playmat>*{pointer-events:auto}.hero-zone{display:flex;justify-content:center;align-items:center;z-index:3;pointer-events:none}.hero{width:116px;height:104px;position:relative;background:#544632;border:4px solid #9e8250;border-radius:49% 49% 28% 28%;box-shadow:0 3px 0 3px #342e25,0 6px 18px #251b1c99,inset 0 0 0 2px #e1c482;padding:0;pointer-events:auto;transition:filter .15s,box-shadow .15s}.hero-portrait{position:absolute;inset:2px;border:1px solid #e9c477;border-radius:49% 49% 26% 26%;overflow:hidden}.art{background-image:url('/assets/card-atlas.png');background-size:400% 300%;background-position:var(--x) var(--y);background-repeat:no-repeat}.hero-name{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(#544b33,#2c3026);border:1px solid #9c8852;box-shadow:0 2px 4px #0007;border-radius:5px;padding:3px 9px;font:600 15px var(--serif);text-shadow:0 1px 2px #000}.gem{display:grid;place-items:center;width:35px;height:37px;font:bold 24px var(--serif);border:2px solid #efd39a;box-shadow:0 3px 2px #231a1599;text-shadow:0 1px 2px #000;border-radius:45% 45% 47% 47%;color:#fff5d3}.health{background:linear-gradient(120deg,#a04e3a,#7a252c 65%,#4b191f)}.hero>.health{position:absolute;bottom:-2px;right:-17px;width:41px;height:43px;font-size:27px}.enemy-hand{position:absolute;display:flex;justify-content:center;left:50%;transform:translateX(-50%);top:-61px;height:100px;z-index:4;pointer-events:none}.card-back{width:65px;height:90px;margin-left:-18px;border:3px solid #b79660;border-radius:7px;background:repeating-linear-gradient(45deg,#3b665920 0px,#3b665920 3px,transparent 3px,transparent 7px),linear-gradient(135deg,#25473d,#15372f);box-shadow:0 3px 0 #3d3425,0 6px 6px #1e1a1655;display:grid;place-items:center;color:#d4b87a;font-size:34px;transform:rotate(var(--angle));transform-origin:50% 120%;position:relative}.card-back:after{content:'';position:absolute;inset:5px;border:1px solid #9f9a6a;border-radius:4px}
.battle-row{display:flex;gap:20px;align-items:center;justify-content:center;position:relative;min-width:0;border:2px solid transparent;border-radius:65px;transition:background .2s,border-color .2s}.battle-line{width:80%;justify-self:center;background:linear-gradient(90deg,transparent,#745e343b,transparent);position:relative;align-self:center}.battle-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:30px var(--serif);color:#83693c45}.unit{position:relative;width:var(--uw);height:var(--uh);flex:0 1 var(--uw);min-width:0;border:4px solid #8e7750;border-radius:48%;padding:0;background:#423d2b;box-shadow:0 3px 0 2px #493c27,0 9px 13px #3e311966,inset 0 0 0 2px #cfb97f;transition:transform .17s,filter .17s,box-shadow .17s;touch-action:none;isolation:isolate}.unit>.art{position:absolute;inset:2px;border-radius:48%;border:1px solid #cbb377;z-index:-1}.unit.ready{border-color:#a4da75;box-shadow:0 0 0 2px #4d7330,0 0 16px #79d06080,0 9px 13px #3e311966}.unit.resting{filter:saturate(.8)}.unit:hover{transform:translateY(-4px);z-index:6}.unit-name{position:absolute;bottom:31px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 16px var(--serif);color:#f8e4b7;background:#332f23ee;border:1px solid #aa8b4f;border-radius:4px;padding:3px 9px;opacity:0;pointer-events:none;transition:opacity .15s}.unit:hover .unit-name,.unit:focus-visible .unit-name,.unit.selected .unit-name{opacity:1}.unit .attack{position:absolute;left:-10px;bottom:-5px;background:linear-gradient(135deg,#d5a52f,#986218);border-color:#f4d78c}.unit .health{position:absolute;right:-10px;bottom:-5px}.guard-icon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#676f5b;border:1px solid #dfceaa;border-radius:4px 4px 50% 50%;color:#f5eccd;width:25px;height:27px;font-size:19px;display:grid;place-items:center;box-shadow:0 2px 3px #0005}.sleep{position:absolute;right:-7px;top:4px;color:#f4e4c1;font:700 19px var(--serif);text-shadow:0 1px 3px #14271e,0 0 4px #14271e}.selected{box-shadow:0 0 0 3px #ffd976,0 0 28px #ffc45799!important;z-index:8}.targetable{outline:3px solid #e25e34;outline-offset:4px;cursor:crosshair;filter:brightness(1.08)}.targetable:hover{filter:brightness(1.22);box-shadow:0 0 24px #e87734aa}.friendly-drop.drop-ready{border-color:#7db84f88;background:#92ad6133}
.hand-zone{position:relative;z-index:5;pointer-events:none;min-width:0}.player-hand{height:100%;display:flex;justify-content:center;align-items:flex-end;padding-bottom:15px;pointer-events:none;isolation:isolate}.card{display:block;width:var(--cw);height:var(--ch);flex:0 0 var(--cw);background:linear-gradient(125deg,#786542,#302f25);border:3px solid #b3935c;border-radius:11px 11px 9px 9px;box-shadow:0 3px 0 #3f3225,0 7px 10px #0007;position:relative;text-align:center;padding:0;isolation:isolate;transition:transform .16s,box-shadow .16s,filter .16s;pointer-events:auto;touch-action:none}.player-hand .card{margin:0 -14px;transform:translateY(var(--lift)) rotate(var(--angle));transform-origin:50% 120%;z-index:var(--order)}.player-hand .card:hover,.player-hand .card:focus-visible,.player-hand .card.selected{transform:translateY(-37px) rotate(0deg) scale(1.15);z-index:20;filter:none;box-shadow:0 12px 24px #142016bb}.card.playable{border-color:#bbdf80;box-shadow:0 0 0 2px #638543,0 0 15px #8ac85c8c,0 5px 7px #0008}.card:not(.playable){filter:saturate(.78)}.card-art{position:absolute;left:4px;right:4px;top:4px;height:98px;border-radius:50% 50% 8px 8px;border:2px solid #dbc38f;background-color:#151f18}.cost{position:absolute;left:-12px;top:-8px;display:grid;place-items:center;width:35px;height:39px;background:linear-gradient(130deg,#7be0ef,#2e84b6 55%,#17396c);border:2px solid #c9e1d8;box-shadow:0 3px 3px #282c2866;color:white;font:700 27px var(--serif);border-radius:42% 42% 47% 47%;text-shadow:0 2px 2px #103c5b;z-index:2}.card-title{position:absolute;top:89px;left:-5px;right:-5px;min-height:30px;display:grid;place-items:center;padding:3px 4px;color:#fcebd0;background:linear-gradient(#746647,#474333);border:1px solid #b3a275;border-radius:5px;font:700 17px/1 var(--serif);text-shadow:0 2px 1px #221f17;z-index:2}.card-paper{position:absolute;top:105px;bottom:5px;left:6px;right:6px;background:linear-gradient(130deg,#edddb9,#c7b388);border-radius:3px 3px 7px 7px;border:1px solid #bda575;z-index:-1}.card-text{position:absolute;left:10px;right:10px;top:123px;color:#403920;font:500 12px/1.3 var(--sans)}.card .attack,.card .health{position:absolute;bottom:-10px;width:32px;height:34px;font-size:23px}.card .attack{left:-10px;background:linear-gradient(130deg,#e4b94a,#a17121)}.card .health{right:-10px}.card-type{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);color:#615335;font:600 12px var(--serif)}.empty-hand{color:#efe1b6;text-shadow:0 2px 3px #18261c;font:italic 18px var(--serif);align-self:center;text-align:center}
.turn-control{position:absolute;right:3%;top:calc(50% - 115px);z-index:7}.end-turn{width:150px;min-height:59px;display:grid;place-items:center;padding:10px 15px;background:linear-gradient(#f6d582,#d1a448 65%,#b68835);border:3px solid #8b682d;border-radius:11px 17px 17px 11px;box-shadow:0 0 0 3px #443d2d,0 6px 0 2px #373124,0 10px 15px #3a2f2066;color:#493718;font:700 21px var(--serif);text-shadow:0 1px #ffe8a9;transition:filter .15s,transform .15s}.end-turn:hover{filter:brightness(1.15);transform:translateY(-2px)}.end-turn:disabled{background:linear-gradient(#91846a,#6c6656);border-color:#4d4738;color:#d1c9b3;text-shadow:0 1px 1px #333;filter:none;transform:none}.deck{position:absolute;width:57px;height:78px;right:6.5%;border:3px solid #ac8d54;border-radius:6px;background:repeating-linear-gradient(45deg,transparent 0px,transparent 5px,#7d956c22 5px,#7d956c22 6px),#204436;box-shadow:3px 3px 0 #66573d,5px 5px 0 #c2a877,8px 8px 0 #695337,12px 13px 10px #3a332c55;display:grid;place-items:center;transform:rotate(7deg);z-index:2}.deck>span{font-size:32px;color:#c3af6f}.deck>b{position:absolute;bottom:-12px;background:#302d24;border:1px solid #aa956d;border-radius:13px;font:600 14px var(--sans);padding:3px 9px;color:#eee4c8}.enemy-deck{top:22%}.player-deck{bottom:27%}.mana{position:absolute;bottom:39px;right:33px;display:flex;flex-direction:column;align-items:center;gap:9px;z-index:6;background:#163f4bcf;box-shadow:inset 0 2px 8px #001e2a55,0 2px 0 #cbb27488;border:1px solid #879d8d;border-radius:40px;padding:9px 16px;min-width:100px;max-width:177px}.mana-value{font:700 23px var(--serif);color:#eef8e1;text-shadow:0 2px 3px #123540;line-height:1}.mana-gems{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.mana-gems>i{display:block;width:13px;height:16px;background:#193744;border:1px solid #71929c;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.mana-gems>i.full{background:linear-gradient(120deg,#d8fcff,#4fcae9 50%,#2b6da6);border-color:#c6e4e4}.move-hint{position:absolute;left:32px;bottom:44px;max-width:220px;z-index:4;color:#e1d8b8;text-shadow:0 2px 3px #123023;font-size:14px;line-height:1.5;pointer-events:none}.move-hint:empty{display:none}.turn-announcement{position:absolute;left:50%;top:calc(50% - 85px);transform:translate(-50%,-50%) scale(.9);padding:12px 64px;background:linear-gradient(90deg,transparent,#304936f5 15%,#304936f5 85%,transparent);font:700 36px var(--serif);color:#ffdda0;text-shadow:0 2px 2px #15281c;white-space:nowrap;opacity:0;z-index:8;pointer-events:none;transition:opacity .2s,transform .3s}.turn-announcement.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.drag-ghost{position:fixed!important;margin:0!important;transform:translate(-50%,-65%) rotate(-5deg)!important;z-index:100!important;pointer-events:none!important;opacity:.93;filter:none!important}.drag-source{opacity:.35!important}
.toast{position:fixed;bottom:21%;left:50%;transform:translate(-50%,10px);padding:12px 22px;background:#293f2ef5;border:1px solid #cfb783;box-shadow:0 6px 18px #1f231977;border-radius:9px;font-size:14px;color:#fff0c9;max-width:90vw;width:max-content;text-align:center;opacity:0;pointer-events:none;z-index:30;transition:opacity .15s,transform .15s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{color:#f1e2c2;background:linear-gradient(135deg,#334435,#202f28);border:2px solid #ab9360;border-radius:15px;padding:28px;max-width:830px;width:calc(100% - 32px);max-height:90svh;box-shadow:0 25px 90px #000a}dialog::backdrop{background:#16251bbb;backdrop-filter:blur(5px)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.modal-header h2{font:600 32px var(--serif);margin:0}.close-modal{width:36px;height:36px;border:1px solid #aa9873;background:#182d22;border-radius:50%;font-size:24px;flex-shrink:0}.menu-dialog{max-width:340px}.menu-options{display:grid;gap:10px}.menu-option{width:100%;padding:13px 20px;border:1px solid #85906a;border-radius:7px;background:#3a4b38;color:#f3e9cc;font-size:16px;text-align:left}.menu-option:hover{background:#526248}.menu-option.primary{background:linear-gradient(#e4c17d,#bea15d);border-color:#f2d698;color:#372d1c;text-align:center;font-weight:700}.menu-option span{float:right;color:#c2ccaf}.modal-copy{font-size:16px;line-height:1.7;color:#d6d9c3}.quick-rules{display:grid;gap:12px;list-style:none;padding:0}.quick-rules li{padding:12px 15px;background:#1a2f2444;border-radius:7px;font-size:16px;line-height:1.5;color:#dae0ca}.quick-rules b{color:#f1d599}.modal-note{font-size:12px;line-height:1.7;color:#a7b89f;margin-top:20px}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:29px 23px;padding:10px 8px 16px}.collection-grid .card{width:100%;height:224px;filter:none;cursor:default}.collection-grid .card-art{height:112px}.collection-grid .card-title{top:100px;font-size:18px}.collection-grid .card-paper{top:117px}.collection-grid .card-text{top:140px;font-size:13px}.collection-grid .card-type{font-size:12px}.result{text-align:center;padding:25px 10px}.result-symbol{font-size:47px;color:#f3d690}.result h2{font:700 46px var(--serif);margin:16px 0}.result p{font-size:16px;color:#becbae}.result .menu-option{max-width:280px;margin:12px auto 0}.result .menu-option.primary{margin-top:28px}
@media(min-width:1450px){:root{--cw:161px;--ch:222px;--uw:122px;--uh:145px}.playmat{grid-template-rows:115px minmax(100px,1fr) 1px minmax(100px,1fr) 114px 248px}.hero{width:128px;height:115px}.card-art{height:112px}.card-title{top:101px;font-size:19px}.card-paper{top:120px}.card-text{top:139px;font-size:13px}.hero-name{font-size:17px}.turn-control{top:calc(50% - 118px);right:4%}.end-turn{width:164px}.deck{right:7%}.mana{right:4%;bottom:45px}.move-hint{left:4%;bottom:49px}}
@media(max-width:1000px){:root{--cw:132px;--ch:190px;--uw:91px;--uh:114px}.playmat{left:12%;right:12%;grid-template-rows:97px minmax(100px,1fr) 1px minmax(100px,1fr) 100px 214px}.turn-control{right:2%;top:calc(50% - 103px)}.end-turn{width:123px;font-size:19px;min-height:50px}.deck{right:3%;width:43px;height:60px}.deck>span{font-size:27px}.mana{right:17px;bottom:24px;min-width:80px;max-width:140px;padding:8px 12px}.mana-value{font-size:21px}.move-hint{left:21px;bottom:27px;max-width:142px;font-size:12px}.hero{width:104px;height:97px}.hero-name{font-size:14px}.battle-row{gap:14px}.card-art{height:90px}.card-title{top:81px;font-size:16px}.card-paper{top:100px}.card-text{top:115px;font-size:12px}.player-hand .card{margin-left:-17px;margin-right:-17px}.game-brand{font-size:18px;left:23px}.unit .gem{width:32px;height:34px;font-size:22px}}
@media(max-width:650px){:root{--cw:119px;--ch:183px;--uw:63px;--uh:83px}.game{min-height:680px}.tabletop{background-size:auto 100%}.tabletop:after{background:linear-gradient(#172a2088,transparent 18%,transparent 69%,#13271bcb)}.game-brand{font-size:15px;letter-spacing:1.5px;left:13px;top:18px}.menu-button{right:13px;top:11px;width:35px;height:35px;font-size:20px}.playmat{inset:32px 3% 0;grid-template-rows:90px minmax(94px,1fr) 1px minmax(94px,1fr) 87px 210px}.hero{width:91px;height:88px}.hero-name{font-size:14px;padding:2px 6px}.hero>.health{width:34px;height:36px;font-size:24px;right:-12px}.enemy-hand{top:-58px}.card-back{width:50px;height:80px;margin-left:-17px;font-size:27px}.battle-row{gap:8px}.unit{border-width:3px}.unit>.art{inset:1px}.unit .gem{width:28px;height:29px;font-size:21px;border-width:1.5px}.unit .attack{left:-4px;bottom:-5px}.unit .health{right:-4px;bottom:-5px}.guard-icon{width:19px;height:22px;font-size:16px;top:-7px}.sleep{font-size:16px;right:-3px;top:-5px}.unit-name{font-size:13px;padding:3px 5px;bottom:24px}.battle-line{width:86%}.turn-control{right:14px;top:calc(50% - 114px)}.end-turn{width:98px;min-height:41px;font-size:17px;border-width:2px;padding:8px 5px;box-shadow:0 0 0 2px #443d2d,0 4px 0 #373124,0 6px 10px #3a2f2066}.deck{width:30px;height:43px;right:15px;border-width:2px;opacity:.85}.deck>span{font-size:23px}.deck>b{font-size:12px;padding:2px 6px}.enemy-deck{top:17%}.player-deck{bottom:32%}.player-hand{padding-bottom:22px}.player-hand .card{margin-left:var(--overlap,-19px);margin-right:var(--overlap,-19px)}.player-hand .card:hover,.player-hand .card:focus-visible,.player-hand .card.selected{transform:translateY(-34px) rotate(0deg) scale(1.09)}.card-title{font-size:15px;top:77px;min-height:29px}.card-art{height:86px}.card-paper{top:92px;left:4px;right:4px}.card-text{font-size:12px;top:111px;left:5px;right:5px;line-height:1.2}.card .gem{width:28px;height:30px;font-size:21px;bottom:-7px}.card .attack{left:-5px}.card .health{right:-5px}.cost{width:30px;height:34px;font-size:24px;left:-7px}.card-type{font-size:12px;bottom:7px}.mana{bottom:220px;right:17px;max-width:92px;min-width:65px;border-radius:13px;padding:6px 9px;gap:5px}.mana-value{font-size:19px}.mana-gems{gap:3px}.mana-gems>i{width:9px;height:11px}.move-hint{left:14px;bottom:218px;max-width:92px;font-size:12px;line-height:1.4}.turn-announcement{font-size:28px;padding:9px 45px;top:calc(50% - 91px)}dialog{padding:21px}.modal-header h2{font-size:29px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 19px}.collection-grid .card{height:220px}.collection-grid .card-text{font-size:12px}.toast{bottom:26%;font-size:13px;padding:10px 14px}.result h2{font-size:37px}}
@media(max-height:730px) and (min-width:651px){:root{--ch:178px;--cw:132px;--uw:91px;--uh:109px}.playmat{top:20px;grid-template-rows:85px minmax(95px,1fr) 1px minmax(95px,1fr) 87px 202px}.hero{width:97px;height:88px}.card-art{height:80px}.card-title{top:70px;font-size:16px}.card-paper{top:89px}.card-text{top:105px;font-size:12px}.card-type{bottom:6px}.player-hand{padding-bottom:14px}.turn-control{top:calc(50% - 99px)}.turn-announcement{top:calc(50% - 70px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}