/* Screen-facing four-wolf arena. Gameplay remains shared with the original engine. */
body #arena{max-width:760px;margin-inline:auto}
body #arena .board{max-width:760px;width:100%;padding:12px 10px;margin:8px auto;border-width:2px;overflow:visible}
body #arena .board .rivalhalf,body #arena #enemyfield,body #arena .opponentbase{transform:none}
body #arena .board .playhalf{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
body #arena .board .rivalhalf .playerscore{grid-row:1}
body #arena .board .rivalhalf .handdeckrow{grid-row:2}
body #arena .board .rivalhalf .field{grid-row:3}
body #arena .board .yourhalf .field{grid-row:1}
body #arena .board .yourhalf .handdeckrow{grid-row:2}
body #arena .board .yourhalf .playerscore{grid-row:3}
body #arena .board .field{gap:8px;justify-items:stretch;margin:0}
body #arena .board .field .slot{width:100%;max-width:none;position:relative;gap:3px}
body #arena .board .wolf{overflow:visible;aspect-ratio:63/88;transition:transform .18s,outline .18s;box-shadow:none}
body #arena .board .wolf>img{display:block;border-radius:inherit}
body #arena .board .wolf.selected{transform:translateY(-6px);outline:2px solid #8bffe2;outline-offset:1px}
body #arena .board .wolf.target{outline:2px solid #ffe09b;outline-offset:1px}
body #arena .board .wolf .taphint{display:none}
body #arena .board .wolf .hp{position:absolute;top:2px;right:2px;bottom:auto;left:auto;width:55px;border-radius:6px;padding:2px 4px 5px;background:#061c29ed;color:#fff9df;text-align:right;line-height:1;z-index:3}
body #arena .board .hp b{font:bold 19px Arial;font-variant-numeric:tabular-nums}
body #arena .board .hp small{display:block;font:8px Arial;margin:2px 0}
body #arena .board .hp i{height:4px;margin:0;border-radius:3px}
body #arena .board .gemrow{height:21px;min-height:21px;margin:0;border:0;background:#061c2980;border-radius:20px;padding:2px 4px;gap:3px;box-shadow:none}
.attachedgem{color:var(--gem);font-size:16px;line-height:1;text-shadow:0 1px #fff5}
.socketcount{font-size:9px;margin-left:auto;color:#fff1cc}
body #arena .board .emptygemlabel{font-size:8px;opacity:.65;letter-spacing:0}
body #arena .board .playerscore{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;grid-column:1/-1;padding:4px 6px!important;background:#061c29b8;border-radius:8px}
body #arena .board .playerscore>span{font:10px Arial;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #arena .board .playerscore>strong{position:static;font:bold 23px Georgia!important;margin:0;min-width:110px;text-align:right}
body #arena .board .playerscore strong small{font:10px Arial}
body #arena .board .playerscore .playerlife{margin-top:3px;height:4px}
body #arena .board .playerscore>small{display:none}
body #arena .board .handdeckrow{grid-template-columns:50px 1fr 50px;padding:0;border:0;gap:5px;min-height:38px}
body #arena .board .discarddock{display:flex;align-items:center;gap:3px;font-size:7px;flex-direction:column;position:relative;height:38px}
body #arena .board .discardpile{width:22px;height:30px;position:absolute;top:8px;left:2px}
body #arena .board .discarddock>span{align-self:flex-end;font-size:7px}
body #arena .board .discardpile>span{right:-15px;bottom:2px;font:12px Arial}
body #arena .board .deckdisplay{grid-template-columns:18px 22px;grid-template-rows:8px 30px;gap:0 2px;padding:0}
body #arena .board .deckdisplay .deckstack{height:30px;width:22px}
body #arena .board .deckdisplay .decktitle{font-size:7px;line-height:1}
body #arena .board .deckdisplay .decknumber{font:12px Arial}
body #arena .board .rivalhand,body #arena .board .handtoggle{border:0;background:transparent;padding:0;min-height:36px}
body #arena .board #handfan,body #arena .board .rivalhandfan{height:27px}
body #arena .board #handfan img,body #arena .board .rivalhandfan img{height:25px;width:18px;margin-right:-5px}
body #arena .board #rivalhandlabel,body #arena .board .handtoggle>span:first-child{font-size:8px;margin:0}
body #arena .board .boardlabel{margin:3px 0;min-height:0}
body #arena .board .fieldbanner{font-size:8px;padding:2px 10px}
body #arena .board .boardlabel small{font-size:8px}
body #arena .board .matcenter{grid-template-columns:1fr auto;gap:8px;min-height:38px;margin:5px 0;padding:2px 0}
body #arena .board .matcrest{display:none}
body #arena .board .turn{display:flex;align-items:center;gap:10px;text-align:left}
body #arena .board .turn #round{font-size:9px;padding:4px;margin:0;letter-spacing:0}
body #arena .board .turn #whose{font-size:12px;margin:0}
body #arena .board .matend #endturn{min-width:100px;min-height:40px;width:auto;padding:8px 15px;font-size:13px}
body #arena .board #turnhint{display:none}
body #arena .board #vaultzone small{display:none}
body #arena .board #direct.targetvault{min-height:30px;padding:6px;font-size:12px}
body #arena .board .countdown-hit,body #arena #enemyfield .countdown-hit{top:10px;right:6px;left:auto;transform:none;min-width:0;background:none;border:0;box-shadow:none;padding:0}
body #arena .countdown-hit .hitremaining,body #arena .countdown-hit small{display:none}
body #arena .countdown-hit .hitloss{font:bold 24px Arial;color:#fff4bd;text-shadow:0 2px 3px #290000,0 0 6px #f44}
body #arena>.handtray{position:relative;inset:auto;margin:0 auto;background:transparent}
body #arena>.handtray .hand{height:230px;min-height:0;padding-top:36px;padding-bottom:8px}
body #arena>.handtray .handitem{flex-basis:120px;margin-right:-45px}
body #arena>.handtray .handview{min-height:28px;font-size:10px}
body #arena>.handtray.pulling{opacity:1!important}
body #arena>.handtray.pulling .hand{transform:translateY(60px);opacity:0;pointer-events:none}
body #arena>.handtray .hand{transition:transform .18s,opacity .18s}
body #arena .handselection{font-size:9px}
body #arena #handinstructions{padding:2px 6px 0;margin:0}
body #arena #handinstructions p{font-size:9px;margin:0}
body #arena #handinstructions .handtools strong{font-size:12px}
body #arena #handinstructions .handtools button{min-height:32px}
@media(max-width:999px){body #arena>.handtray .hand{padding-inline:calc(50% - 60px)}body #arena .board .hp b{font-size:16px}body #arena .board .wolf .hp{width:46px}body #arena .board .field{gap:5px}}
@media(prefers-reduced-motion:reduce){body #arena .board .wolf,body #arena>.handtray .hand{transition:none}}
body #arena .board .matcenter .turn{justify-self:start;width:auto;min-width:0;white-space:nowrap}
body #arena .board .playerscore>span span{display:inline}
body #arena .board .playerscore>strong{min-width:110px}
body #arena .board .matcross{display:none}
body #arena .board .handselection{grid-row:4}
/* WP sits above the artwork, with a full-width thin life line. */
body #arena .board .field .slot{padding-top:29px}
body #arena .board .wolf .hp{top:-29px;right:0;left:0;bottom:auto;width:100%;height:25px;padding:0 0 7px;display:flex;align-items:baseline;justify-content:flex-end;gap:3px;background:transparent;border:0;border-radius:0;box-shadow:none;box-sizing:border-box}
body #arena .board .wolf .hp b{font:bold 18px Arial;line-height:18px;text-shadow:0 1px 2px #00141c}
body #arena .board .wolf .hp small{display:inline;font:8px Arial;white-space:nowrap;margin:0;color:#eee5ca}
body #arena .board .wolf .hp i{position:absolute;bottom:0;left:0;height:3px;margin:0;border-radius:3px}
body #arena .board .countdown-hit,body #arena #enemyfield .countdown-hit{top:-3px;right:0}
/* The playable hand follows the board immediately; help sits below it. */
body #arena>.handtray{margin:-6px auto 0}
body #arena>.handtray .hand{padding-top:29px;height:223px}
body #arena #handinstructions{margin-top:0;padding-top:0}
/* One inspection surface: artwork left, compact attacks right. */
body #inspect.combatview{width:min(96vw,850px);max-width:96vw}
body #inspect.combatview .viewerbody{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start;padding:12px}
body #inspect.combatview .cardviewer{min-width:0;padding:0}
body #inspect.combatview .cardstage{width:100%;max-width:360px;margin:0 auto 10px;touch-action:none}
body #inspect.combatview #inspectdetail{min-width:0}
body #inspect.combatview .attacktools,body #inspect.combatview .fighterinfo>img,body #inspect.combatview .fighterinfo .eyebrow,body #inspect.combatview .fighterbar{display:none}
body #inspect.combatview .fighterinfo{display:block;margin:0 0 10px}
body #inspect.combatview .fighterinfo h3{font:bold 17px Georgia;margin:0 0 5px}
body #inspect.combatview .fighterwp{font-size:10px}
body #inspect.combatview .moves{display:flex;flex-direction:column;gap:7px;flex-wrap:nowrap}
body #inspect.combatview .move{flex:none;width:100%;min-height:60px;border-radius:16px;padding:8px 6px;text-align:left;display:block}
body #inspect.combatview .move b{font-size:12px;display:block}
body #inspect.combatview .move .damagecost{font-size:12px;margin:3px 0}
body #inspect.combatview .move small{font-size:9px;display:block;line-height:1.3}
body #inspect.combatview .rotatecontrols{gap:3px}
body #inspect.combatview .rotatecontrols button{font-size:10px;min-height:36px;padding:3px}
body #inspect.combatview #rotatehint{font-size:9px;margin:6px 0 0}
body #arena>.handtray .hand{height:190px;padding-bottom:0}
@media(min-width:701px){body #inspect.combatview .move{min-height:80px;padding:12px}body #inspect.combatview .move b{font-size:15px}body #inspect.combatview .move small{font-size:11px}}
/* Temporary attack feedback stays centered inside the struck artwork. */
body #arena .board .wolf>.countdown-hit,body #arena #enemyfield .wolf>.countdown-hit{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:max-content;max-width:96%;padding:5px 7px;border:0;border-radius:9px;background:#06131dcc;text-align:center;z-index:15}
body #arena .wolf>.countdown-hit .hitloss{display:block;font:bold clamp(18px,4vw,27px) Arial;color:#ffcea2}
body #arena .wolf>.countdown-hit .hitremaining{display:block;font:bold clamp(22px,5vw,34px) Georgia;color:#fff5d2;margin:2px 0;font-variant-numeric:tabular-nums}
body #arena .wolf>.countdown-hit small{display:block;font:6px Arial;color:#eee4d2;letter-spacing:.2px}
body #arena .wolf>.hitfx{inset:8% 2%;z-index:12}
/* Gem energy follows the perimeter; card art and stats remain uncovered. */
body #arena .board .wolf>.poweraura{position:absolute;inset:-2px;border:1px solid var(--aura);border-radius:inherit;pointer-events:none;z-index:1;box-shadow:0 0 var(--aura-size) var(--aura),0 0 calc(var(--aura-size)*1.6) color-mix(in srgb,var(--aura-secondary) 45%,transparent);animation:gem-breathe 2.8s ease-in-out infinite}
body #arena .board .wolf>.poweraura:after{content:'';position:absolute;inset:-4px;border-radius:inherit;border-left:2px solid var(--aura);border-right:2px solid var(--aura-secondary);border-top:2px solid transparent;border-bottom:2px solid transparent;filter:blur(1px);animation:gem-flame 1.9s ease-in-out infinite}
body #arena .board .wolf>.poweraura.surge{animation:gem-attach .75s ease-out,gem-breathe 2.8s .75s ease-in-out infinite}
@keyframes gem-breathe{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes gem-flame{0%,100%{transform:translateY(2px) scaleX(.98);opacity:.35}50%{transform:translateY(-3px) scaleX(1.035);opacity:.8}}
@keyframes gem-attach{0%{opacity:0;transform:scale(.98)}40%{opacity:1;transform:scale(1.06)}100%{opacity:.65;transform:scale(1)}}
#arenafaith{margin:10px 6px 14px;padding:10px 12px;border-top:1px solid var(--skin-line,#8b9f87);color:var(--skin-text,#f9edcf);text-align:center}
#arenafaith p{font:12px/1.5 Georgia;margin:0 0 6px}
#arenafaith summary{font:bold 12px Georgia;cursor:pointer;min-height:30px;padding:7px}
#arenafaith blockquote{font:13px/1.6 Georgia;margin:8px auto;max-width:520px}
#arenafaith cite{display:block;font:10px Arial;margin-top:8px;color:var(--skin-muted,#bad1c6)}
@media(prefers-reduced-motion:reduce){body #arena .board .wolf>.poweraura,body #arena .board .wolf>.poweraura:after,body #arena .board .wolf>.poweraura.surge{animation:none;transform:none;opacity:.7}}
/* Exposed-vault cue: a slow pulse, never rapid flashing. */
body #arena .board #direct.vault-ready:not(:disabled){animation:vault-ready-pulse 1.6s ease-in-out infinite}
@keyframes vault-ready-pulse{0%,100%{filter:brightness(1);box-shadow:inset 0 0 10px #ffd4a455,0 0 4px #f55}50%{filter:brightness(1.35);box-shadow:inset 0 0 14px #ffe8b6,0 0 18px #ff6844}}
.attack-orb,.attack-burst{position:fixed;pointer-events:none;z-index:80;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,var(--shot) 28%,transparent 72%);box-shadow:0 0 12px var(--shot),0 0 25px var(--shot)}
.attack-orb:after{content:'';position:absolute;inset:-5px;border:2px solid var(--shot);border-radius:50%;transform:rotate(-30deg) scaleY(.55)}
.attack-orb.dark-orb{background:radial-gradient(circle,#180b2e 15%,#7435bb 45%,#d2a5ff 60%,transparent 74%)}
.attack-burst{width:44px;height:44px;border:2px solid var(--shot);background:radial-gradient(circle,#fff9 0 5%,transparent 50%)}
body #arena .wolf>.countdown-hit .overflow-label{margin-top:3px;color:#ffce8c;font-size:7px}
@media(prefers-reduced-motion:reduce){body #arena .board #direct.vault-ready:not(:disabled){animation:none;outline:2px solid #ffe7a8;outline-offset:2px}.attack-orb,.attack-burst{display:none}}
/* Legal moves announce available gem power without covering their labels. */
body #inspect.combatview .moves .move.attack-ready:not(:disabled){border-color:var(--move-glow);animation:move-power-halo 1.6s ease-in-out infinite;opacity:1}
@keyframes move-power-halo{0%,100%{box-shadow:0 0 0 1px var(--move-glow),0 0 5px var(--move-glow)}50%{box-shadow:0 0 0 2px var(--move-glow),0 0 16px var(--move-glow),inset 0 0 7px var(--move-glow)}}
@media(prefers-reduced-motion:reduce){body #inspect.combatview .moves .move.attack-ready:not(:disabled){animation:none;box-shadow:0 0 0 2px var(--move-glow)}}