/* ==========================================================================
   KTK v3 PROTOTYPE SKIN (presentation only, sandbox).
   Dark royal-war: black, gold, glass, element medallions, forged crest.
   Loaded after style.css; engine/rules untouched.
   ========================================================================== */
:root{
  --v3-gold:#d9b25a;--v3-gold-b:#f6dd98;--v3-gold-d:#7a5a22;
  --v3-fire:#ff5b3a;--v3-earth:#6fcf72;--v3-wind:#f2c94c;--v3-water:#4fb3ff;
}
/* Slightly bigger cards only where the 3-row-per-side formation still fits */
@media (min-width:1300px) and (min-height:1040px){
  :root{--card-w:72px;--card-h:100px}
}

/* ---------- CARD FACE ---------- */
.card-face.v3{
  --el:var(--v3-gold);
  container-type:size;
  padding:0;display:block;
  color:#fff;border-radius:8%/5.7%;
  border:1.5px solid var(--v3-gold-d);
  background:
    linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--el) 30%,#000) 0,#0d0b0b 62%,#060506 100%);
  box-shadow:0 0 0 1px #000,inset 0 0 0 2px rgba(0,0,0,.6),inset 0 0 0 3px color-mix(in srgb,var(--v3-gold) 55%,transparent),
    0 4px 12px rgba(0,0,0,.6),0 0 12px color-mix(in srgb,var(--el) 25%,transparent);
  text-shadow:none;
}
.card-face.v3.fire{--el:var(--v3-fire)}.card-face.v3.earth{--el:var(--v3-earth)}
.card-face.v3.wind{--el:var(--v3-wind)}.card-face.v3.water{--el:var(--v3-water)}
.card-face.v3::before{inset:4%;border-color:rgba(217,178,90,.18);border-radius:6%}
.card-face.v3 > .rank,.card-face.v3 > .suit,.card-face.v3 > .title,.card-face.v3 .court-portrait{display:none!important}
.card-face.v3.court::after{display:none}

.card-face.v3 .v3-idx{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;line-height:.9;
  top:4cqw;left:6cqw;padding:1cqw 2cqw;border-radius:6cqw;background:rgba(0,0,0,.45)}
.card-face.v3 .v3-idx.br{top:auto;left:auto;bottom:4cqw;right:6cqw} /* upright, not rotated */
.card-face.v3 .v3-idx b{font-size:30cqw;font-weight:800;color:#fff;text-shadow:0 0 6px var(--el),0 2px 0 #000;letter-spacing:-.04em}
.card-face.v3 .v3-idx i{font-style:normal;font-size:21cqw;color:var(--el);text-shadow:0 0 5px var(--el),0 1px 0 #000}

.card-face.v3 .v3-art{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:62cqw;height:62cqw;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),rgba(255,255,255,.03) 45%,rgba(0,0,0,.35) 75%);
  border:1px solid color-mix(in srgb,var(--v3-gold) 70%,transparent);
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--el) 55%,transparent),0 0 12px color-mix(in srgb,var(--el) 35%,transparent)}
.card-face.v3 .v3-art img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 0 5px var(--el));pointer-events:none}
.card-face.v3 .v3-art .v3-crest{display:none}
.card-face.v3.court .v3-art{top:5cqh;left:6cqw;right:6cqw;transform:none;width:auto;height:66cqh;border-radius:5cqw;overflow:hidden;background:#000}
.card-face.v3.court .v3-art img.v3-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:none}
.card-face.v3.court .v3-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85));
  box-shadow:inset 0 0 12px color-mix(in srgb,var(--el) 60%,transparent)}

.card-face.v3 .v3-ribbon{position:absolute;left:8cqw;right:8cqw;bottom:13cqh;height:11cqh;display:flex;align-items:center;justify-content:center;gap:2cqw;
  font-size:9.5cqw;letter-spacing:.06em;font-weight:700;text-transform:uppercase;color:var(--v3-gold-b);white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.78) 15%,rgba(0,0,0,.78) 85%,transparent);
  border-top:1px solid color-mix(in srgb,var(--v3-gold) 45%,transparent);border-bottom:1px solid color-mix(in srgb,var(--v3-gold) 45%,transparent)}
.card-face.v3 .v3-ribbon i{font-style:normal;color:var(--el)}
.card-face.v3 .v3-val{position:absolute;z-index:5;top:5cqw;right:6cqw;width:20cqw;height:20cqw;border-radius:50%;display:grid;place-items:center;
  font-size:11cqw;font-weight:800;color:#160f05;background:radial-gradient(circle at 35% 30%,var(--v3-gold-b),var(--v3-gold) 55%,var(--v3-gold-d));box-shadow:0 0 0 1px #000,0 2px 4px #000}
.card-face.v3 .v3-castle,.card-face.v3 .v3-trump{display:none}

/* Small cards (board/hand on phones, graveyard): drop the ribbon, keep big index + art */
@container (max-width:72px){
  .card-face.v3 .v3-ribbon,.card-face.v3 .v3-idx.br,.card-face.v3 .v3-val{display:none}
  .card-face.v3 .v3-idx{flex-direction:row;gap:2cqw;align-items:baseline;background:none;padding:0;top:5cqw;left:7cqw}
  .card-face.v3 .v3-idx b{font-size:38cqw}.card-face.v3 .v3-idx i{font-size:28cqw}
  .card-face.v3:not(.court) .v3-art{top:62%;width:66cqw;height:66cqw}
  .card-face.v3.court .v3-art{top:4cqh;height:92cqh}
  .card-face.v3.court .v3-idx{background:rgba(0,0,0,.6);padding:1cqw 3cqw;border-radius:4cqw}
}

/* ---------- CASTLE CARD (special printed + DEF) ---------- */
.slot.castle .card-face.v3{
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 35%),radial-gradient(ellipse at 50% 30%,#3a2a12 0,#120d08 60%,#070605 100%);
  border-color:var(--v3-gold)}
.slot.castle .card-face.v3 .v3-ribbon{display:none}
.slot.castle .card-face.v3 .v3-art{top:5cqh;left:auto;right:6cqw;transform:none;width:44cqw;height:44cqw;border-radius:8cqw;background:transparent;border:0;box-shadow:none}
.slot.castle .card-face.v3:not(.court) .v3-art .v3-element{display:none}
.slot.castle .card-face.v3:not(.court) .v3-art .v3-crest{display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,120,30,.55))}
.slot.castle .card-face.v3.court .v3-art{left:auto;right:6cqw;width:44cqw;height:44cqw;border:1px solid var(--v3-gold-d)}
.slot.castle .card-face.v3 .v3-val{display:none}
.slot.castle .card-face.v3 .v3-idx.br{display:none}
.slot.castle .card-face.v3 .v3-castle{display:flex;flex-direction:column;align-items:center;gap:2cqh;position:absolute;left:5cqw;right:5cqw;top:37cqh;bottom:4cqh;text-align:center;z-index:3}
.slot.castle .card-face.v3 .v3-castle b{font-size:12.5cqw;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;color:var(--v3-gold-b)}
.slot.castle .card-face.v3 .v3-castle span{flex:1;font-family:Georgia,serif;font-weight:400;font-size:9.6cqw;line-height:1.2;color:#eadfc6;
  background:rgba(0,0,0,.45);border:1px solid rgba(217,178,90,.25);border-radius:4cqw;padding:2cqw 3cqw;overflow:hidden;width:100%}
.slot.castle .card-face.v3 .v3-castle em{font-style:normal;font-weight:800;font-size:10.5cqw;letter-spacing:.08em;color:#160f05;
  background:linear-gradient(180deg,var(--v3-gold-b),var(--v3-gold));padding:.6cqh 4cqw;border-radius:99px;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}
@container (max-width:80px){
  .slot.castle .card-face.v3 .v3-castle span{display:none}
  .slot.castle .card-face.v3 .v3-castle{top:40cqh;justify-content:space-between}
  .slot.castle .card-face.v3 .v3-castle b{font-size:15cqw}
  .slot.castle .card-face.v3 .v3-castle em{font-size:14cqw}
  .slot.castle .card-face.v3 .v3-idx{flex-direction:column}
  .slot.castle .card-face.v3 .v3-idx b{font-size:30cqw}.slot.castle .card-face.v3 .v3-idx i{font-size:22cqw}
}

/* ---------- TRUMP TAG ---------- */
.slot[class*="trump-"] .card-face.v3 .v3-trump{display:block;position:absolute;z-index:6;left:50%;bottom:4cqh;transform:translateX(-50%);
  font-size:11cqw;font-weight:800;letter-spacing:.12em;padding:1cqh 4cqw;border-radius:99px;color:var(--el);background:#140d04;border:1px solid var(--el);box-shadow:0 0 10px var(--el)}

/* ---------- BOARD ---------- */
.board-2d{
  background:linear-gradient(180deg,rgba(5,8,10,.72),rgba(5,5,6,.5) 50%,rgba(10,5,4,.75)),url("../../assets/art/generated/war-table-realms-v2.png") center/cover!important;
  border-color:rgba(217,178,90,.3)!important}
.board-2d .side{backdrop-filter:blur(2px);background:linear-gradient(110deg,rgba(255,255,255,.03),rgba(0,0,0,.25) 40% 60%,rgba(255,255,255,.02))!important}
.board-2d .side.enemy{border-color:rgba(79,179,255,.22)!important}
.board-2d .side.you{border-color:rgba(255,91,58,.25)!important}
.board-2d .slot{border:1.5px dashed rgba(217,178,90,.32)!important;background:rgba(0,0,0,.42)!important;border-radius:8%/5.7%}
.board-2d .slot:has(.card-face),.board-2d .slot:has(.card-back){border-color:transparent!important;background:transparent!important}
.board-2d .slot.castle{border-style:solid!important;border-color:rgba(217,178,90,.55)!important;box-shadow:0 0 18px rgba(217,178,90,.18)!important}
.board-2d .row-label{color:var(--v3-gold);letter-spacing:.25em;text-shadow:0 1px 2px #000}
.slot-hint{color:rgba(217,178,90,.45);letter-spacing:.15em}

/* Lanes: subtle column tint; active lane lights up across both sides */
.board-2d [data-slot$="-0"],.board-2d [data-slot$="-1"],.board-2d [data-slot$="-2"]{position:relative}
.board-2d .slot[data-slot$="-0"]::after,.board-2d .slot[data-slot$="-1"]::after,.board-2d .slot[data-slot$="-2"]::after{
  content:"";position:absolute;inset:-5px;border-radius:10px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(217,178,90,.06),rgba(217,178,90,.02));border-left:1px solid rgba(217,178,90,.12);border-right:1px solid rgba(217,178,90,.12)}
#board-2d:has([data-owner="1"][data-slot$="-0"].attackable:hover,[data-owner="1"][data-slot$="-0"].selected) .slot[data-slot$="-0"]::after,
#board-2d:has([data-owner="1"][data-slot$="-1"].attackable:hover,[data-owner="1"][data-slot$="-1"].selected) .slot[data-slot$="-1"]::after,
#board-2d:has([data-owner="1"][data-slot$="-2"].attackable:hover,[data-owner="1"][data-slot$="-2"].selected) .slot[data-slot$="-2"]::after{
  background:linear-gradient(180deg,rgba(255,91,58,.28),rgba(255,91,58,.08));border-color:rgba(255,91,58,.6);box-shadow:0 0 16px rgba(255,91,58,.35)}
.board-2d .slot.attackable .card-face.v3{box-shadow:0 0 0 1px #000,inset 0 0 0 3px color-mix(in srgb,var(--v3-gold) 70%,transparent),0 0 14px rgba(246,221,152,.45)}
.board-2d .slot.attackable:hover .card-face.v3{transform:translateY(-3px);box-shadow:0 0 0 2px var(--v3-gold-b),0 0 22px var(--v3-gold-b)}

/* Turn banner with forged crest */
.board-2d .divider span{display:inline-flex!important;align-items:center;gap:8px;border-color:var(--v3-gold)!important;color:var(--v3-gold-b)!important;
  background:linear-gradient(180deg,#1c140b,#07070a)!important;box-shadow:0 0 18px rgba(217,178,90,.35)!important;white-space:nowrap}
.board-2d .divider span b{font-weight:700;letter-spacing:inherit}
.v3-divider-crest{height:1.9em;margin:-.5em 0 -.5em -.4em;filter:drop-shadow(0 0 6px rgba(255,120,30,.5))}
#board-2d[data-v3-turn="Yours"] .divider span{box-shadow:0 0 26px rgba(246,221,152,.6)!important}

/* ---------- HUD (glass, HP bar) ---------- */
.field-hud{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.45))!important;border:1px solid rgba(217,178,90,.35)!important;
  backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.5)!important;padding-bottom:14px!important}
.field-hud::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:5px;border-radius:4px;background:#1b1210;border:1px solid rgba(217,178,90,.3)}
.field-hud::before{content:"";position:absolute;z-index:1;left:11px;bottom:7px;height:5px;border-radius:4px;width:calc((100% - 22px) * var(--v3-hpn,1));transition:width .4s}
.field-hud-you::before{background:linear-gradient(90deg,#8b1a1a,#ff5b3a)}
.field-hud-enemy::before{background:linear-gradient(90deg,#1f5f8a,#4fb3ff)}
.field-hud-title{color:var(--v3-gold-b)!important}
.field-hud b{color:#fff}
.pile-label{color:var(--v3-gold)}

/* hand */
.hand-card .card-face.v3{box-shadow:0 0 0 1px #000,inset 0 0 0 3px color-mix(in srgb,var(--v3-gold) 55%,transparent),0 6px 14px rgba(0,0,0,.6)}
.hand-card.selected .card-face.v3{box-shadow:0 0 0 2px var(--v3-gold-b),0 0 22px var(--v3-gold-b)}
@media (max-width:900px){.v3-hud-round{display:none!important}}

/* ==========================================================================
   v3 PORTRAIT PHONE LAYOUT: everything stacks in normal flow, no overlaps.
   Enemy HUD > enemy castle/ranged/melee > round banner > your melee/ranged/
   castle > your HUD > hand/buttons. Scrolls if the screen is too short.
   ========================================================================== */
@media (orientation: portrait) and (max-width: 600px) {
  html .play-area{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
  html .board-2d{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;
    max-height:none!important;overflow:visible!important;gap:6px!important;padding:6px!important;flex:0 0 auto!important}
  html .board-2d .side{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;
    height:auto!important;min-height:0!important;padding:6px 4px 8px!important;position:relative!important;overflow:visible!important}
  html .board-2d .side::before{position:static!important;transform:none!important;order:1;margin:0 0 2px!important;left:auto!important;right:auto!important}
  html .board-2d .side .field-hud{position:static!important;transform:none!important;inset:auto!important;width:100%!important;max-width:420px;
    margin:0!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(52px,1fr))!important;gap:3px!important}
  html .board-2d .side.enemy .field-hud{order:0}
  html .board-2d .side.you .field-hud{order:9}
  html .board-2d .side > .army{order:2;position:static!important;transform:none!important;display:flex!important;flex-direction:column!important;
    padding:0!important;gap:3px!important;margin:0!important}
  html .board-2d .side > .army > .row-block{display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;position:static!important}
  html .board-2d .side > .army > .row-block > .row{display:flex!important;flex-direction:row!important;gap:8px!important}
  html .board-2d .row-label{position:static!important;transform:none!important;display:block!important;margin:0!important;font-size:.5rem!important}
  html .board-2d .side > .piles{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:2}
  html .board-2d .side.enemy > .piles{right:4px!important;left:auto!important}
  html .board-2d .side.you > .piles{left:4px!important;right:auto!important}
  html .board-2d .divider{position:static!important;flex:0 0 auto!important;margin:2px 0!important;height:auto!important;display:flex!important;justify-content:center;align-items:center}
  html .board-2d .divider span{position:static!important;transform:none!important;font-size:.62rem!important;padding:5px 12px!important;max-width:94%;overflow:hidden;text-overflow:ellipsis}
  html .board-2d .field-hud small{display:block!important;font-size:.45rem!important}
  html .board-2d .field-hud b{font-size:.62rem!important}
  html .board-2d .field-hud .field-hud-title{display:none!important}
}
@media (orientation: portrait) and (max-width: 600px) {
  html .board-2d .side.enemy .field-hud{width:calc(100% - 50px)!important;align-self:flex-start}
}
@media (orientation: portrait) and (max-width: 600px) {
  html .board-2d .side.you .field-hud{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html .board-2d .field-hud b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ==========================================================================
   v3 COMPACT PHONE PASS (proto4): action bar always visible, cards sized to
   fit the viewport (portrait) and to fill each half (landscape).
   ========================================================================== */
@media (orientation: portrait) and (max-width: 600px) {
  :root{
    --v3-ch: clamp(46px, calc((100dvh - 300px) / 6.2), 108px);
    --card-h: var(--v3-ch); --card-w: calc(var(--v3-ch) * .72);
  }
  html .play-area{overflow:hidden!important;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))!important;gap:2px!important}
  html .board-2d{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;gap:3px!important;padding:3px!important}
  html .board-2d .slot{width:var(--card-w)!important;height:var(--card-h)!important;min-width:0!important;min-height:0!important}
  html .board-2d .slot.castle{width:calc(var(--card-w) * 1.08)!important;height:calc(var(--card-h) * 1.08)!important}
  html .board-2d .side{padding:3px 3px 4px!important;gap:2px!important}
  html .board-2d .side::before{display:none!important}
  html .board-2d .side > .army{gap:1px!important}
  html .board-2d .side > .army > .row-block{gap:1px!important}
  html .board-2d .side > .army > .row-block > .row{gap:6px!important}
  html .board-2d .row-label{font-size:.42rem!important;line-height:1!important;letter-spacing:.18em!important}
  html .board-2d .divider{margin:0!important}
  html .board-2d .divider span{font-size:.55rem!important;padding:3px 10px!important}
  /* compact HUD */
  html .board-2d .side .field-hud{padding:2px 4px 8px!important;gap:1px!important;border-radius:8px!important}
  html .board-2d .field-hud > span:not(.field-hud-title){padding:1px 0!important;min-width:0}
  html .board-2d .field-hud small{font-size:.38rem!important;letter-spacing:.02em!important}
  html .board-2d .field-hud b{font-size:.55rem!important;white-space:normal!important;line-height:1.05;overflow:visible!important;text-overflow:clip!important;word-break:break-word}
  html .field-hud::after{bottom:3px!important;height:3px!important}
  html .field-hud::before{bottom:4px!important;height:3px!important}
  html .board-2d .side.enemy .field-hud{width:calc(100% - 46px)!important}
  /* slim action bar pinned to the bottom of the play area (always in view) */
  html .hand-bar{flex:0 0 auto!important;position:relative!important;padding:3px 2px 0!important;gap:3px!important;max-height:none!important}
  html .hand-bar .hand-meta{padding:2px 6px!important;min-height:0!important;gap:6px!important;display:flex!important;align-items:baseline;flex-wrap:wrap}
  html .hand-bar .hand-meta strong{font-size:.7rem!important}
  html .hand-bar .hand-meta .hint{font-size:.62rem!important;line-height:1.2!important}
  html .hand-bar .controls{gap:6px!important;padding:0!important;margin:0!important}
  html .hand-bar .controls button{min-height:40px!important;padding:6px 10px!important;font-size:.7rem!important}
  html .controls .progress-cta{position:static!important;transform:none!important;min-width:0!important;flex:1 1 auto!important;min-height:42px!important;top:auto!important;left:auto!important}
}

@media (orientation: landscape) and (max-height: 520px) {
  :root{
    --v3-ch: clamp(48px, calc((100dvh - 118px) / 3.15), 120px);
    --card-h: var(--v3-ch); --card-w: calc(var(--v3-ch) * .72);
  }
  html .play-area{padding:3px 6px calc(3px + env(safe-area-inset-bottom,0px))!important;gap:2px!important}
  html .board-2d{padding:3px!important;gap:4px!important}
  html .board-2d .slot{width:var(--card-w)!important;height:var(--card-h)!important;min-width:0!important;min-height:0!important}
  html .board-2d .slot.castle{width:calc(var(--card-w) * 1.05)!important;height:calc(var(--card-h) * 1.05)!important}
  html .board-2d .side{padding-top:16px!important;padding-bottom:3px!important}
  html .board-2d .side.enemy{padding-right:48px!important}
  html .board-2d .side::before{top:3px!important;font-size:.45rem!important}
  html.mobile-input .board-2d .side > .army{gap:10px!important;padding:0 34px!important}
  html .board-2d .side > .army > .row-block > .row{gap:4px!important}
  html .board-2d .row-label{font-size:.42rem!important;letter-spacing:.15em!important}
  html .board-2d .field-hud{padding:1px 6px 7px!important}
  html .board-2d .field-hud::after{bottom:2px!important;height:3px!important}
  html .board-2d .field-hud::before{bottom:3px!important;height:3px!important}
  /* slim action bar */
  html .hand-bar{padding:2px 4px 0!important;gap:2px!important;flex:0 0 auto!important;flex-direction:row!important;align-items:center!important;flex-wrap:wrap}
  html .hand-bar .hand-meta{padding:0 6px!important;min-height:0!important;flex:1 1 220px;display:flex!important;gap:10px;align-items:baseline}
  html .hand-bar .hand-meta strong{font-size:.66rem!important}
  html .hand-bar .hand-meta .hint{font-size:.6rem!important}
  html .hand-bar .hand{flex:1 1 100%}
  html .hand-bar .controls{gap:6px!important;margin:0!important;padding:0!important}
  html .hand-bar .controls button{min-height:34px!important;padding:4px 12px!important;font-size:.66rem!important}
  html .controls .progress-cta{position:static!important;transform:none!important;min-width:0!important;min-height:36px!important;top:auto!important;left:auto!important}
}
@media (orientation: landscape) and (max-height: 520px) {
  :root{ --v3-ch: clamp(48px, calc((100dvh - 120px) / 3), 120px); }
  html .hand-bar{min-height:0!important;height:auto!important;flex-wrap:wrap!important;border-top-width:1px}
  html .hand-bar .hand-meta{flex:1 1 0!important;order:1}
  html .hand-bar .controls{flex:0 0 auto!important;order:2}
  html .hand-bar .hand{order:3}
  html .board-2d .side{padding-top:26px!important}
  html .board-2d .side::before{display:none!important}
  html.mobile-input .board-2d .side .field-hud,html .board-2d .side .field-hud{top:3px!important}
  html .board-2d .row-label{line-height:1!important;margin:0 0 2px!important}
}
@media (orientation: landscape) and (max-height: 520px){
  html .board-2d .row-block:not(:has(.slot.castle)) > .row-label{visibility:hidden!important}
}

/* ==========================================================================
   v3 FIT PASS (proto7): v3-fit.js measures the real viewport and sets
   --v3-ch (board card height) and --v3-hh (hand card height).
   ========================================================================== */
html.v3-fit{ --card-h: var(--v3-ch); --card-w: calc(var(--v3-ch) * .72); }
html.v3-fit .hand-bar .hand-card{width:calc(var(--v3-hh) * .72)!important;height:var(--v3-hh)!important}
html.v3-fit .hand-bar .hand{min-height:0!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 2px!important;gap:5px!important}
/* the hand strip keeps its height in every phase so card sizes never jump */
html.v3-fit .hand-bar .hand{min-height:calc(var(--v3-hh) + 4px)!important}
html.v3-measuring .slot,html.v3-measuring .slot *,html.v3-measuring .hand-card,html.v3-measuring .field-hud{transform:none!important;animation:none!important;transition:none!important}
html.v3-fit .hand-bar .hand-card:hover{transform:none!important}
html.v3-fit .hand-bar .hand-meta .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (orientation: landscape){
  /* one compact strip: [scrolling hand][buttons]; hint only when the hand is empty */
  html.v3-fit .hand-bar{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;padding:2px 4px!important;gap:6px!important}
  html.v3-fit .hand-bar .hand{flex:1 1 auto!important;min-width:0!important;order:1!important}
  html.v3-fit .hand-bar .hand-meta{display:none!important}
  html.v3-fit .hand-bar .hand:not(:has(.hand-card))::before{content:attr(data-v3-hint);margin:auto 8px;color:var(--v3-gold);font-size:.7rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.v3-fit .hand-bar .controls{flex:0 0 auto!important;order:2!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:4px!important}
  html.v3-fit .hand-bar:not(:has(.hand-card)) .controls{flex-direction:row!important}
  html.v3-fit .hand-bar .controls button{min-height:32px!important;padding:3px 12px!important;white-space:nowrap}
}
@media (orientation: portrait){
  html.v3-fit .hand-bar .hand-meta{flex-wrap:nowrap!important}
  html.v3-fit .hand-bar .hand-meta .hint{flex:1 1 0}
  html.v3-fit .board-2d{overflow:hidden!important}
}
html.v3-fit .hand-bar .hand-card{box-sizing:border-box!important}
html.v3-fit .hand-bar .hand{height:calc(var(--v3-hh) + 6px)!important;max-height:calc(var(--v3-hh) + 6px)!important;align-items:center!important}
html.v3-fit .hand-bar{max-height:none!important;min-height:0!important}
/* stable heights across phases: portrait reserves the button row; landscape HUDs are one slim line */
@media (orientation: portrait){ html.v3-fit .hand-bar .controls{min-height:42px!important;align-items:center} }
@media (orientation: landscape){
  html.v3-fit .board-2d .field-hud .field-hud-title{display:none!important}
  html.v3-fit .board-2d .field-hud{flex-wrap:nowrap!important;white-space:nowrap!important;grid-auto-flow:column!important}
  html.v3-fit .board-2d .field-hud b,html.v3-fit .board-2d .field-hud span{white-space:nowrap!important}
}
@media (orientation: landscape){ html.v3-fit .hand-bar .controls{margin-left:auto!important} }

/* ==========================================================================
   v3 FULL ART (art1): Ned's approved KTK card fronts fill the whole face.
   Overlays: upright corner index chips (top-left + bottom-right), court value,
   castle special + DEF on a slim glass band. Edges darkened for legibility.
   ========================================================================== */
.card-face.v3.full{background:#050404!important;overflow:hidden}
.card-face.v3.full .v3-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:0;pointer-events:none;user-select:none}
.card-face.v3.full::before{display:none!important}
.card-face.v3.full::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1;pointer-events:none;border-radius:inherit;
  border:0!important;background:
    radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%),
    radial-gradient(circle at 0 0,rgba(0,0,0,.55),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.55),transparent 34%)!important;
  box-shadow:inset 0 0 0 1px rgba(217,178,90,.35)!important;animation:none!important;opacity:1!important;transform:none!important}
.card-face.v3.full .v3-art,.card-face.v3.full .v3-ribbon{display:none!important}
.card-face.v3.full .v3-idx{z-index:4;background:rgba(8,6,4,.78);border:1px solid rgba(217,178,90,.55);border-radius:5cqw;padding:1.2cqw 2.4cqw;
  top:3cqw;left:3cqw;box-shadow:0 1px 4px rgba(0,0,0,.7);min-width:22cqw}
.card-face.v3.full .v3-idx.br{top:auto;left:auto;bottom:3cqw;right:3cqw;display:flex!important}
.card-face.v3.full .v3-idx b{font-size:26cqw}
.card-face.v3.full .v3-idx i{font-size:18cqw}
.card-face.v3.full .v3-val{top:3cqw;right:3cqw;width:19cqw;height:19cqw;font-size:10.5cqw}
@container (max-width:72px){
  .card-face.v3.full .v3-idx{flex-direction:column;align-items:center;gap:0;background:rgba(8,6,4,.8);padding:1cqw 2cqw;top:3cqw;left:3cqw}
  .card-face.v3.full .v3-idx.br{top:auto;left:auto;bottom:3cqw;right:3cqw}
  .card-face.v3.full .v3-idx b{font-size:30cqw}.card-face.v3.full .v3-idx i{font-size:21cqw}
}
/* castle: full art + glass band with special name and DEF */
.slot.castle .card-face.v3.full{background:#050404!important}
.slot.castle .card-face.v3.full .v3-idx.br{display:none!important}
.slot.castle .card-face.v3.full .v3-castle{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1.5cqh;
  position:absolute;left:0;right:0;top:auto;bottom:0;z-index:3;padding:2.5cqh 4cqw 3cqh;
  background:linear-gradient(180deg,rgba(10,8,5,.35),rgba(10,8,5,.82) 30%,rgba(6,5,3,.9));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-top:1px solid rgba(217,178,90,.6);border-radius:0 0 8% 8%/0 0 5.7% 5.7%}
.slot.castle .card-face.v3.full .v3-castle span{flex:0 1 auto;background:none;border:0;padding:0;max-height:24cqh;font-size:8.6cqw}
@container (max-width:80px){
  .slot.castle .card-face.v3.full .v3-castle{top:auto;padding:1.5cqh 3cqw 2cqh;justify-content:flex-end}
  .slot.castle .card-face.v3.full .v3-castle b{font-size:13cqw}
  .slot.castle .card-face.v3.full .v3-castle em{font-size:13cqw}
}
html:not(.v3-fit) .board-2d .side.you{padding-bottom:64px!important}

/* ==========================================================================
   proto10 — refined corner index (slim serif, ivory/gold, no chips)
   ========================================================================== */
.card-face.v3.full .v3-idx{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;
  top:4.5cqw;left:5.5cqw;gap:.5cqw;font-family:"Cinzel","Cormorant Garamond",Georgia,serif}
.card-face.v3.full .v3-idx.br{bottom:4.5cqw;right:5.5cqw}
.card-face.v3.full .v3-idx b{font-family:inherit;font-weight:600;font-size:19cqw;letter-spacing:0;color:#f4e8c8;
  text-shadow:0 1px 1px #000,0 0 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)}
.card-face.v3.full .v3-idx i{font-size:11cqw;color:#d9b25a;text-shadow:0 1px 1px #000,0 0 4px rgba(0,0,0,.9)}
.card-face.v3.full::after{background:
    radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%),
    radial-gradient(circle at 0 0,rgba(0,0,0,.72),transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.72),transparent 40%)!important}
@container (max-width:72px){
  .card-face.v3.full .v3-idx{background:none!important;padding:0!important;top:4cqw;left:5cqw}
  .card-face.v3.full .v3-idx.br{bottom:4cqw;right:5cqw}
  .card-face.v3.full .v3-idx b{font-size:25cqw;font-weight:700}.card-face.v3.full .v3-idx i{font-size:15cqw}
}

/* ==========================================================================
   proto10 — SETUP FOCUS MODE (v3-focus.js)
   ========================================================================== */
html.v3-focus .board-2d .side.enemy,html.v3-focus .board-2d .divider{display:none!important}
html.v3-measuring .board-2d .side{transform:none!important;transition:none!important}
html.v3-focus:not(.v3-fit) .board-2d .side.you{transform:translate(var(--v3-fx,0px),var(--v3-fy,0px)) scale(var(--v3-fs,1));transform-origin:0 0;z-index:3}
html.v3-focus.v3-fit .board-2d .side.you{flex:1 1 100%!important;width:100%!important;max-width:none!important;grid-column:1/-1!important;grid-row:1/-1!important;padding-right:4px!important}
@media (orientation: landscape){
  html.v3-focus.v3-fit .board-2d .side.you > .army{display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;
    align-content:center!important;justify-content:center!important;column-gap:18px!important;row-gap:4px!important;padding:0 40px!important;height:100%}
  html.v3-focus.v3-fit .board-2d .side.you > .army > .row-block:has(.slot.castle){grid-column:1!important;grid-row:1/3!important;align-self:center}
  html.v3-focus.v3-fit .board-2d .side.you > .army > .row-block:has(.slot.melee){grid-column:2!important;grid-row:1!important}
  html.v3-focus.v3-fit .board-2d .side.you > .army > .row-block:has(.slot.ranged){grid-column:2!important;grid-row:2!important}
  html.v3-focus.v3-fit .board-2d .side.you > .army > .row-block > .row{flex-direction:row!important}
}
#v3-foe-status{display:none}
html.v3-focus #v3-foe-status{display:flex;align-items:center;gap:7px;position:absolute;z-index:30;top:6px;right:54px;pointer-events:none;
  padding:4px 12px 4px 9px;border-radius:99px;font:600 11px/1.2 "Cinzel",Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#cfe3ea;
  background:rgba(12,16,20,.72);border:1px solid rgba(155,199,210,.45);box-shadow:0 2px 10px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#v3-foe-status i{width:7px;height:7px;border-radius:50%;background:#9bc7d2;box-shadow:0 0 6px #9bc7d2;animation:v3-pulse 1.1s ease-in-out infinite}
#v3-foe-status.ready{color:#f2e2bd;border-color:rgba(217,178,90,.6)}
#v3-foe-status.ready i{background:#7ed07a;box-shadow:0 0 6px #7ed07a;animation:none}
@keyframes v3-pulse{50%{opacity:.35}}
html.v3-zooming .board-2d .side.enemy,html.v3-zooming .board-2d .divider{animation:v3-foe-in 780ms cubic-bezier(.22,.8,.24,1) both}
@keyframes v3-foe-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){html.v3-zooming .board-2d .side.enemy,html.v3-zooming .board-2d .divider{animation:none}#v3-foe-status i{animation:none}}
html.v3-focus:not(.v3-fit) .board-2d .side.you{background:none!important;border-color:transparent!important;box-shadow:none!important}
html.v3-focus:not(.v3-fit) .board-2d .side.you::before{opacity:0}
html.v3-focus:not(.v3-fit) .board-2d{overflow:hidden!important}
html.v3-focus:not(.v3-fit) .board-2d .side.you .field-hud{visibility:hidden!important}
html:not(.v3-fit) .board-2d .side.you > .army{margin-bottom:18px!important}
html:not(.v3-fit) .controls .progress-cta{top:-48px!important}
/* Deal-in plays once per card. v3-fit's measuring pass sets animation:none, and
   removing it restarted hand-deal (opacity 0->1) on every refit = blinking hand. */
html .hand-card.dealt{animation:none!important;opacity:1}

/* ==========================================================================
   ktk-mobile-fix-1019: narrow portrait phones only (desktop untouched).
   1) v3-fit can bottom out at its 28px floor (and caches it for the match),
      which shrinks every slot and lets the HUD/piles pile onto the board.
      Give board cards a safe portrait floor that still fits the full board.
   2) Deck/graveyard piles sit in normal flow under the army, not on top of it.
   3) HUD stays in flow below the castle with breathing room.
   4) Touch: no sticky :hover expanding the Options pill over the status pill.
   ========================================================================== */
@media (orientation: portrait) and (max-width: 600px) {
  html.v3-fit{
    --card-h: max(var(--v3-ch), min(calc((100dvh - 440px) / 8), 15vw));
    --card-w: calc(var(--card-h) * .72);
  }
  /* Setup focus shows only your half, so the floor can be bigger */
  html.v3-fit.v3-focus{ --card-h: max(var(--v3-ch), min(calc((100dvh - 440px) / 4), 22vw)); }
  html .board-2d .side > .piles,
  html .board-2d .side.you > .piles,
  html .board-2d .side.enemy > .piles{position:static!important;transform:none!important;top:auto!important;left:auto!important;right:auto!important;
    order:8;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:12px!important;margin:4px 0 0!important}
  html .board-2d .side > .piles .pile,html .board-2d .side > .piles > *{margin:0!important}
  html .board-2d .side .field-hud{position:relative!important;z-index:1;margin-top:6px!important}
  html.v3-focus.v3-fit .board-2d .side.you{justify-content:center!important}
  html .board-2d .slot.castle{flex:0 0 auto!important}
}
@media (orientation: portrait) and (max-width: 600px) and (hover: none){
  .app:not(.phone-options-open) .phone-options-toggle:hover:not(:focus-visible){width:34px;padding-right:8px!important}
  .app:not(.phone-options-open) .phone-options-toggle:hover:not(:focus-visible) .phone-options-label{max-width:0;margin-left:0;opacity:0}
}
@media (orientation: portrait) and (max-width: 600px){
  html.v3-focus #v3-foe-status{max-width:calc(100% - 120px);overflow:hidden;white-space:nowrap}
  html.v3-focus #v3-foe-status span{overflow:hidden;text-overflow:ellipsis}
}