/* Artist-arena relics: art is cropped live from the original arena painting. */
.totem-art { display:block; width:100%; height:100%; overflow:hidden; image-rendering:pixelated; filter:drop-shadow(0 2px 3px #000b); }
.totem-picker { border:1px solid #8c6a43; background:linear-gradient(155deg,#231f21,#101d1d); padding:9px; margin:10px 0; box-shadow:inset 0 1px #f2c77b54; }
.totem-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.totem-heading b { color:#f4d49b; font:14px VT323; white-space:nowrap; }
.totem-picker p { margin:5px 0 8px; color:#d3c8b2; font:15px/1.05 VT323; }
.totem-choices { display:grid; grid-template-columns:1fr; gap:5px; }
.totem-choice { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 12px; align-items:center; gap:4px; min-height:52px; padding:3px; border:1px solid #63533e; background:#11191a; text-align:left; }
.totem-choice.chosen { border-color:#d5a95f; background:linear-gradient(90deg,#382a23,#172923); box-shadow:inset 0 0 0 1px #e9bc6c45,0 0 11px #eebc5340; }
.totem-choice:hover,.totem-choice:focus-visible { border-color:#ffdf91; filter:brightness(1.15); }
.totem-choice .totem-art { width:38px; height:46px; background:#0a1818; border:1px solid #526657; }
.totem-choice span { display:flex; flex-direction:column; min-width:0; gap:1px; }
.totem-choice b { font:15px/.95 VT323; color:#fff2d5; }
.totem-choice small { font:12px/1 VT323; color:#c3dfd5; }
.totem-choice i { font:19px VT323; font-style:normal; color:#f3c95e; align-self:start; }
.music-button { height:35px; min-width:65px; padding:0 8px; border:1px solid #725b44; background:#191b1e; color:#d9c4a7; font:16px VT323; white-space:nowrap; }
.music-button:hover,.music-button.active { color:#ffdc88; border-color:#e7b85a; box-shadow:0 0 12px #f89b3d47; }
#battle-screen:not([hidden]) { --hand-height:clamp(188px,28dvh,232px); --hand-row-height:clamp(145px,22dvh,170px); }
#battle-screen .hand { height:var(--hand-row-height); }
#battle-screen .hand-card { width:calc(var(--hand-height) * 212 / 306); aspect-ratio:212/306; }
#battle-screen .hand-card .card-title { top:2%; left:6%; width:74%; height:10.5%; font:17px/.84 VT323; overflow:hidden; overflow-wrap:normal; text-wrap:balance; }
#battle-screen .hand-card.long-name .card-title { height:10.5%; font-size:14px; line-height:.82; }
#battle-screen .hand-card .card-cost { top:3%; width:21px; height:21px; font:20px/17px VT323; }
#battle-screen .hand-card .card-art,#battle-screen .hand-card.long-name .card-art { top:13.4%; height:52.3%; }
#battle-screen .hand-card .card-ability { top:66.2%; left:6%; width:88%; height:5.2%; font:13px/.95 VT323; }
#battle-screen .hand-card .hand-text { top:73%; left:8%; right:8%; height:17%; font:14px/.88 VT323; -webkit-line-clamp:unset; line-clamp:unset; color:#fff9e9; text-shadow:1px 1px #000; }
#battle-screen .hand-card.long-copy .hand-text { font-size:11.5px; line-height:.86; }
#battle-screen .card-side { position:fixed; top:65px; right:14px; transform:none; width:min(310px,25vw); height:auto; max-height:calc(100dvh - 115px); padding:8px 10px 9px; gap:5px; z-index:30; background:linear-gradient(180deg,#132428f0,#071114f5); box-shadow:0 18px 42px #000c,inset 0 0 0 1px #a6c4aa52; }
#battle-screen .side-card-flip { width:min(100%,288px); height:auto; max-height:min(54dvh,420px); aspect-ratio:212/306; }
#battle-screen .side-card-description { width:100%; max-height:78px; overflow:auto; margin:0; padding:5px 7px; background:#070d11da; border-left:2px solid #d5b06c; color:#fff5dd; font:17px/1.02 VT323; text-align:left; }
#battle-screen .card-side.long-copy .side-card-flip { height:auto; max-height:min(54dvh,420px); }
#battle-screen .card-side.long-copy .side-card-description { max-height:98px; font-size:16px; }
#battle-screen #side-card-tip { color:#b7f5dd; font-size:14px; min-height:16px; }
#battle-screen .hand-card { transform:translateY(var(--fan-y,0px)) rotate(var(--fan-angle,0deg))!important; }
#battle-screen .hand-card:hover,#battle-screen .hand-card:focus-visible { transform:translateY(-52px) perspective(700px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)) scale(1.22)!important; }
#battle-screen .hand-card.selected:not(:hover),#battle-screen .hand-card.selected:hover,#battle-screen .hand-card.selected:focus-visible { transform:translateY(var(--fan-y,0px)) rotate(var(--fan-angle,0deg))!important; filter:brightness(1.08) drop-shadow(0 0 8px #69f7edb3); }
.battle-totems { display:flex; align-items:center; gap:4px; min-width:0; }
.battle-totem { display:flex; align-items:center; gap:3px; height:27px; padding:1px 5px 1px 1px; border:1px solid #c59453; background:linear-gradient(90deg,#483324,#182925); box-shadow:0 0 8px #f6b55a40; color:#ffe8ab; cursor:pointer; transition:transform .16s,filter .16s,box-shadow .16s; }
.battle-totem:hover,.battle-totem:focus-visible,.battle-totem.active { transform:translateY(-2px); border-color:#fff1ac; outline:2px solid #ffe795; outline-offset:2px; filter:brightness(1.2); box-shadow:0 0 15px #ffd16d9e; }
.battle-totem .totem-art { width:24px; height:24px; }
.battle-totem b { font:12px VT323; color:#ffe8ab; white-space:nowrap; }
.arena-totem-target { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer; border:2px solid transparent; border-radius:38%; background:transparent; transition:border-color .15s,box-shadow .15s,background .15s,filter .15s; }
.arena-totem-target:hover,.arena-totem-target:focus-visible,.arena-totem-target.active { border-color:#ffe48a; outline:1px solid #fff8cf; box-shadow:0 0 0 4px #ffe48a40,0 0 25px #ffe48abd,inset 0 0 16px #ffed8b77; background:#fff4ad18; }
#battle-screen .unit-target:hover,#battle-screen .unit-target:focus-visible { outline:2px solid #f9ed9d; background:#f8e78a20; box-shadow:0 0 0 4px #ffdc5a44,0 0 22px #ffdc5aa0,inset 0 0 13px #fff4ae5e; cursor:pointer; }
#battle-screen .unit-target.enemy:hover,#battle-screen .unit-target.enemy:focus-visible { outline-color:#ffab7c; box-shadow:0 0 0 4px #ff91604d,0 0 22px #ff9e6ca8,inset 0 0 13px #ffd69c5e; }
#battle-screen .unit-target.targetable:hover,#battle-screen .unit-target.targetable:focus-visible { outline-width:3px; }
#battle-screen .card-side-head button:hover,#battle-screen .card-side-head button:focus-visible,#battle-screen .side-card-flip:not(:disabled):hover,#battle-screen .side-card-flip:not(:disabled):focus-visible,#battle-screen .hero-power:not(:disabled):hover,#battle-screen .hero-power:not(:disabled):focus-visible,#battle-screen .end-turn:not(:disabled):hover,#battle-screen .end-turn:not(:disabled):focus-visible { outline:2px solid #ffe795; outline-offset:2px; filter:brightness(1.17) drop-shadow(0 0 7px #ffe68a7a); }
#battle-screen .side-card-flip:disabled { cursor:default; }
#battle-screen .totem-side-display { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow:hidden; border:3px solid #d5ab62; background:radial-gradient(ellipse at 50% 34%,#ba874143,#131e20 70%); box-shadow:inset 0 0 0 3px #412915,inset 0 0 22px #ffc47159; color:#ffe8ae; }
#battle-screen .totem-side-display .totem-art { width:86%; height:68%; flex:none; filter:drop-shadow(0 6px 8px #000) drop-shadow(0 0 12px #ffc46f96); }
#battle-screen .totem-side-display strong { font:21px/.95 VT323; text-align:center; text-shadow:2px 2px #000; }
#battle-screen .totem-side-display small { font:12px VT323; color:#b7e9d5; letter-spacing:1px; }
#battle-screen .card-side.showing-totem .side-card-description { max-height:none; }
#battle-screen .side-card-flip.has-card-3d .side-card-rotor { opacity:0; }
.game-card-3d-canvas { position:absolute!important; inset:0; display:block; width:100%!important; height:100%!important; max-height:none!important; aspect-ratio:auto!important; object-fit:fill!important; touch-action:none; cursor:grab; background:transparent; filter:drop-shadow(0 8px 9px #000b); }
.game-card-3d-canvas:active { cursor:grabbing; }
.game-card-3d-canvas[hidden] { display:none!important; }
#battle-screen .side-card-flip.has-card-3d { overflow:visible; }
dialog:has(.card-detail-view) { width:min(830px,94vw); }
.card-detail-view { grid-template-columns:minmax(215px,280px) minmax(0,1fr); }
.detail-card-3d { position:relative; width:100%; aspect-ratio:212/306; min-height:0; border:1px solid #8b6b3f; background:radial-gradient(ellipse at 50% 38%,#4b4f406e,#0b171b 75%); box-shadow:inset 0 0 25px #e6ae645c,0 9px 22px #0008; overflow:visible; }
.detail-card-3d .detail-card { width:100%; height:100%; margin:0; }
.detail-card-3d.has-card-3d .detail-card { visibility:hidden; }
.card-3d-hint { display:block; margin-top:18px; color:#f0cf88; font:16px VT323; letter-spacing:.6px; }
#deck-screen .collection-inspect { transform:perspective(700px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); transform-style:preserve-3d; transition:transform .16s ease-out,filter .16s; }
#deck-screen .collection-inspect:hover,#deck-screen .collection-inspect:focus-visible { transform:perspective(700px) translateY(-5px) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)); filter:brightness(1.1) drop-shadow(0 7px 12px #f6d27c6d); }
/* Restrained halation and CRT grain only on the painted world; lettering stays crisp. */
#battle-screen .stage-wrap::after { background:radial-gradient(ellipse 22% 27% at 59% 18%,#fff1aa26,transparent 75%),radial-gradient(ellipse 24% 28% at 28% 63%,#7df7ea25,transparent 73%),repeating-linear-gradient(0deg,#0000 0 3px,#d8fff008 3px 4px),linear-gradient(180deg,#07101a40,transparent 25%,transparent 77%,#14100947); box-shadow:inset 0 0 70px 17px #07070a72,inset 0 0 9px #f5ce685c; }
#battle-screen #arena { filter:saturate(1.12) contrast(1.085) brightness(1.025) drop-shadow(0 0 12px #e6b65229); }
@media(max-width:1150px) { .battle-totem b { display:none; } .battle-totem { padding:1px; } #battle-screen:not([hidden]) { --hand-height:clamp(182px,25dvh,220px); } }
@media(max-width:800px) { #battle-screen:not([hidden]) { --hand-height:clamp(165px,24dvh,194px); --hand-row-height:clamp(135px,21dvh,155px); } #battle-screen .card-side { width:min(220px,30vw); right:7px; } #battle-screen .side-card-description { font-size:14px; max-height:64px; } #battle-screen .card-side.long-copy .side-card-description { font-size:13px; max-height:78px; } #battle-screen .hand-card:hover:not(.selected),#battle-screen .hand-card:focus-visible:not(.selected) { transform:translateY(-48px) rotate(0deg) scale(1.22)!important; } }
@media(max-width:560px) { #battle-screen:not([hidden]) { --hand-height:clamp(158px,22dvh,184px); --hand-row-height:calc(var(--hand-height) + 8px); } #battle-screen .card-side { top:98px; bottom:auto; right:5px; transform:none; width:min(46vw,175px); height:auto; max-height:calc(100dvh - 190px); padding:4px; } #battle-screen .side-card-flip { width:100%; height:auto; max-height:32dvh; } #battle-screen .side-card-description { font-size:11px; max-height:48px; } #battle-screen .card-side.long-copy .side-card-flip { height:auto; max-height:32dvh; } #battle-screen .card-side.long-copy .side-card-description { font-size:11px; max-height:58px; } #battle-screen .hand-card .card-title { font-size:16px; } #battle-screen .hand-card.long-name .card-title { font-size:13px; } #battle-screen .hand-card .hand-text { font-size:13px; line-height:.88; -webkit-line-clamp:unset; line-clamp:unset; } #battle-screen .hand-card.long-copy .hand-text { font-size:11px; line-height:.86; } #battle-screen .hand-card:hover:not(.selected),#battle-screen .hand-card:focus-visible:not(.selected) { transform:translateY(-39px) rotate(0deg) scale(1.2)!important; } .music-button { min-width:40px; padding:0 4px; font-size:13px; } }
@media(max-width:560px) { .card-detail-view { grid-template-columns:1fr; } .detail-card-3d { width:min(58vw,200px); justify-self:center; } .card-3d-hint { margin-top:8px; } }
/* Opening hand uses the same printed face and Blender card shell as battle. */
dialog.mulligan-modal { width:min(870px,96vw); max-height:calc(100dvh - 20px); padding:20px 24px; overflow:auto; }
dialog.mulligan-modal .mulligan-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2vw,18px); width:min(100%,690px); margin:18px auto 20px; }
dialog.mulligan-modal .mulligan-card { position:relative; display:grid; grid-template-rows:auto 28px; width:100%; min-width:0; padding:0; border:0; background:transparent; box-shadow:none; color:#fff; isolation:isolate; cursor:pointer; transform:rotate(var(--mulligan-angle,0deg)); transition:transform .18s ease,filter .18s ease; }
dialog.mulligan-modal .mulligan-card:hover,dialog.mulligan-modal .mulligan-card:focus-visible { z-index:5; transform:translateY(-7px) rotate(var(--mulligan-angle,0deg)); filter:brightness(1.12) drop-shadow(0 9px 12px #000b); outline:2px solid #ffe795; outline-offset:3px; }
dialog.mulligan-modal .mulligan-card.replace { z-index:4; transform:translateY(-5px) rotate(var(--mulligan-angle,0deg)); background:transparent; box-shadow:none; }
dialog.mulligan-modal .mulligan-card.replace:hover,dialog.mulligan-modal .mulligan-card.replace:focus-visible { z-index:5; transform:translateY(-10px) rotate(var(--mulligan-angle,0deg)); }
dialog.mulligan-modal .mulligan-face.hand-card { position:relative; display:block; width:100%; height:auto; min-height:0; aspect-ratio:212/306; margin:0; padding:0; background:var(--card-frame) center/100% 100% no-repeat; transform:none!important; overflow:hidden; pointer-events:none; }
dialog.mulligan-modal .mulligan-card.model-ready .mulligan-face { visibility:hidden; }
dialog.mulligan-modal .mulligan-face.hand-card .card-title { top:2%; left:6%; width:74%; height:10.5%; font:clamp(13px,2vw,19px)/.84 VT323; text-wrap:balance; }
dialog.mulligan-modal .mulligan-face.hand-card.long-name .card-title { font-size:clamp(11px,1.6vw,15px); line-height:.82; }
dialog.mulligan-modal .mulligan-face.hand-card .card-cost { top:3%; right:6%; width:22px; height:22px; font:21px/18px VT323; }
dialog.mulligan-modal .mulligan-face.hand-card .card-art,dialog.mulligan-modal .mulligan-face.hand-card.long-name .card-art { top:13.4%; left:3.8%; width:92.4%; height:52.3%; }
dialog.mulligan-modal .mulligan-face.hand-card .card-art canvas { width:100%; height:100%; max-height:none; border:0; padding:0; background:transparent; object-fit:contain; }
dialog.mulligan-modal .mulligan-face.hand-card .card-ability { top:66.2%; left:6%; width:88%; height:5.2%; font:clamp(11px,1.4vw,15px)/.95 VT323; }
dialog.mulligan-modal .mulligan-face.hand-card .hand-text { top:73%; left:8%; right:8%; height:17%; font:clamp(11px,1.5vw,16px)/.88 VT323; -webkit-line-clamp:unset; line-clamp:unset; }
dialog.mulligan-modal .mulligan-face.hand-card.long-copy .hand-text { font-size:clamp(10px,1.25vw,13px); }
dialog.mulligan-modal .mulligan-model { position:absolute; inset:0 0 28px; display:block; pointer-events:auto; touch-action:none; }
dialog.mulligan-modal .mulligan-model .game-card-3d-canvas { border:0; padding:0; background:transparent; filter:drop-shadow(0 5px 6px #000a); }
dialog.mulligan-modal .mulligan-card .keep-label { display:flex; align-items:center; justify-content:center; height:28px; padding:0 4px; border:1px solid #6ca99d; background:#123331; color:#c4f9de; font:17px VT323; }
dialog.mulligan-modal .mulligan-card.replace .mulligan-model { outline:3px solid #ff7db2; outline-offset:1px; }
dialog.mulligan-modal .mulligan-card.replace .keep-label { border-color:#ff9cc3; background:#642941; color:#ffe0ea; }
@media(max-width:560px) { dialog.mulligan-modal { padding:14px 10px; } dialog.mulligan-modal .mulligan-cards { --mulligan-card-width:clamp(108px,34vw,140px); display:flex; align-items:flex-end; justify-content:center; gap:0; margin:14px auto 16px; } dialog.mulligan-modal .mulligan-card { flex:0 0 var(--mulligan-card-width); width:var(--mulligan-card-width); grid-template-rows:auto 24px; } dialog.mulligan-modal .mulligan-card + .mulligan-card { margin-left:calc(var(--mulligan-card-width) * -.32); } dialog.mulligan-modal .mulligan-card:first-child { --mulligan-angle:-4deg; } dialog.mulligan-modal .mulligan-card:last-child { --mulligan-angle:4deg; } dialog.mulligan-modal .mulligan-model { bottom:24px; } dialog.mulligan-modal .mulligan-card .keep-label { height:24px; font-size:13px; } dialog.mulligan-modal .mulligan-face.hand-card .card-cost { width:17px; height:17px; font:17px/14px VT323; } }
@media(prefers-reduced-motion:reduce) { #battle-screen .stage-wrap::after { animation:none; } }