/* ==========================================================================
   KTK v3 IN-BATTLE HUD SKIN (presentation only). Loaded last on index.html.
   Battle menu, toolbar, chips, Crown Stats panels, banner, piles, lane labels,
   empty slots, action bar, log, tooltips + touch hold sheet.
   Paint-only overrides (colors, borders, fonts, shadows) so v3-fit.js sizing
   and v3-focus.js keep working. Motion: transform/opacity only.
   ========================================================================== */
:root{
  --v3h-gold:#e9c574;--v3h-gold-b:#fbe3a0;--v3h-gold-d:#7a5a22;
  --v3h-ink:#f1e6cf;--v3h-mute:rgba(236,220,186,.7);
  --v3h-rim:rgba(233,197,116,.42);--v3h-rim-s:rgba(233,197,116,.22);
  --v3h-glass:linear-gradient(180deg,rgba(30,18,13,.94),rgba(11,7,7,.96));
  --v3h-forge:linear-gradient(180deg,#fbe3a0 0%,#e9c574 38%,#b8862f 72%,#7a5a22 100%);
  --v3h-ember:linear-gradient(180deg,#c8452a 0%,#8e2414 60%,#5a140b 100%);
  --v3h-glow:0 0 18px rgba(255,120,40,.18);
}

/* ---------- BUTTON SYSTEM (battle scope) ---------- */
#app button{font-family:'Cinzel',Georgia,serif;letter-spacing:.06em;
  transition:transform .12s ease,opacity .12s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
#app button:active:not(:disabled){transform:translateY(1px) scale(.98)}
#app button:focus-visible{outline:2px solid var(--v3h-gold-b);outline-offset:2px}
/* primary: forged gold */
#hand-bar .controls #btn-confirm,#hand-bar .controls #btn-spy-done{
  background:var(--v3h-forge)!important;color:#2a1708!important;border:1px solid #fbe3a0!important;
  text-shadow:0 1px 0 rgba(255,240,200,.55)!important;font-weight:800!important;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(90,55,15,.55),0 4px 14px rgba(0,0,0,.5),0 0 16px rgba(255,170,60,.25)!important;
  border-radius:10px!important}
#hand-bar .controls #btn-confirm:disabled,#hand-bar .controls #btn-spy-done:disabled{opacity:.45;filter:saturate(.4)}
/* advance round = the call to action between rounds -> ember */
#hand-bar .controls #btn-next{
  background:var(--v3h-ember)!important;color:#ffe9cf!important;border:1px solid rgba(255,170,110,.7)!important;
  font-weight:800!important;text-transform:uppercase;border-radius:10px!important;text-shadow:0 1px 2px rgba(0,0,0,.6)!important;
  box-shadow:inset 0 1px 0 rgba(255,200,160,.35),0 4px 14px rgba(0,0,0,.5),0 0 18px rgba(255,90,40,.3)!important}
/* secondaries: dark glass with gold rim */
#hand-bar .controls #btn-auto,#hand-bar .controls #btn-spy-keep,
.topbar .top-actions button,#btn-phone-options,.log-panel .help-link,.log-collapse-btn{
  background:linear-gradient(180deg,rgba(40,26,18,.92),rgba(14,9,8,.94))!important;
  color:var(--v3h-gold-b)!important;border:1px solid var(--v3h-rim)!important;border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.10),0 2px 8px rgba(0,0,0,.45)!important;text-shadow:0 1px 2px #000!important;
  font-weight:700!important}
#hand-bar .controls #btn-auto:hover,.topbar .top-actions button:hover,#btn-phone-options:hover{border-color:var(--v3h-gold)!important;box-shadow:inset 0 1px 0 rgba(255,236,190,.16),0 0 14px rgba(255,160,60,.22)!important}

/* SVG icons injected by v3-hud.js */
.v3h-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em}
.v3h-ico{width:1.15em;height:1.15em;flex:0 0 auto;color:var(--v3h-gold);filter:drop-shadow(0 0 3px rgba(255,150,60,.35))}
.v3h-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- TOP TOOLBAR + CHIPS ---------- */
.topbar{background:linear-gradient(180deg,rgba(22,14,10,.92),rgba(10,7,6,.88))!important;
  border-bottom:1px solid var(--v3h-rim-s)!important;box-shadow:0 1px 0 rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.35)!important}
.topbar .chip{background:rgba(14,9,8,.82)!important;border:1px solid var(--v3h-rim-s)!important;border-radius:999px!important;
  color:var(--v3h-mute)!important;font-family:'Cinzel',Georgia,serif;letter-spacing:.08em;box-shadow:inset 0 1px 0 rgba(255,236,190,.06)!important}
.topbar .chip b{color:var(--v3h-gold-b)!important;font-variant-numeric:tabular-nums}
.topbar .chip.hp-you b{color:#9fe0a6!important}.topbar .chip.hp-enemy b{color:#ff9a7a!important}

/* ---------- BATTLE MENU POPOVER (phone/compact options) ---------- */
.app.phone-options-open > .topbar{
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,110,40,.12),transparent 60%),var(--v3h-glass)!important;
  border:1px solid var(--v3h-rim)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.10),inset 0 0 0 1px rgba(0,0,0,.6),0 18px 48px rgba(0,0,0,.65),var(--v3h-glow)!important;
  animation:v3h-pop .18s ease-out both}
.app.phone-options-open > .topbar .top-actions button{
  min-height:44px;font-size:.78rem!important;text-transform:uppercase;justify-content:flex-start!important;padding-inline:14px!important;
  border-left:1px solid var(--v3h-rim)!important;background:linear-gradient(180deg,rgba(40,26,18,.92),rgba(14,9,8,.94))!important}
.app.phone-options-open > .topbar .top-actions button .v3h-ico{width:1.35em;height:1.35em}
/* forfeit = ember danger */
.app.phone-options-open > .topbar .top-actions #btn-new{
  background:var(--v3h-ember)!important;border-color:rgba(255,160,110,.6)!important;color:#ffe9cf!important;justify-content:center!important}
.app.phone-options-open > .topbar .top-actions #btn-new .v3h-ico{color:#ffd9b8}
#btn-phone-options{color:var(--v3h-gold-b)!important}
.app.phone-options-open #btn-phone-options{background:var(--v3h-forge)!important;color:#2a1708!important;border-color:#fbe3a0!important;text-shadow:none!important}
@keyframes v3h-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- CROWN STATS / WAR COUNCIL PANELS ---------- */
.board-2d .field-hud{
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,110,40,.10),transparent 62%),var(--v3h-glass)!important;
  border:1px solid var(--v3h-rim)!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.10),inset 0 0 0 1px rgba(0,0,0,.55),0 10px 26px rgba(0,0,0,.5)!important}
.board-2d .field-hud .field-hud-title{font-family:'Cinzel',Georgia,serif!important;font-weight:800!important;color:var(--v3h-gold-b)!important;
  letter-spacing:.18em!important;text-shadow:0 1px 2px #000,0 0 10px rgba(255,150,60,.3)!important;
  border-bottom:1px solid var(--v3h-rim-s);padding-bottom:3px}
.board-2d .field-hud small{color:var(--v3h-mute)!important;font-family:'Cinzel',Georgia,serif;letter-spacing:.14em}
.board-2d .field-hud b{color:var(--v3h-ink)!important;font-family:'Cinzel',Georgia,serif;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
.board-2d .field-hud-you b#field-hp-you{color:#a6e8ad!important;text-shadow:0 0 8px rgba(120,220,130,.35),0 1px 2px #000}
.board-2d .field-hud-enemy b#field-hp-enemy{color:#ffa486!important;text-shadow:0 0 8px rgba(255,110,70,.35),0 1px 2px #000}
.board-2d .field-hud b#field-castle-you,.board-2d .field-hud b#field-castle-enemy{color:var(--v3h-gold-b)!important}

/* ---------- ROUND BANNER / DIVIDER ---------- */
.board-2d .divider > span{
  background:linear-gradient(180deg,rgba(34,20,12,.96),rgba(12,8,6,.96))!important;
  border:1px solid var(--v3h-gold)!important;box-shadow:inset 0 1px 0 rgba(255,236,190,.18),0 0 0 1px rgba(0,0,0,.6),0 0 22px rgba(255,120,40,.22)!important}
#v3-turn-banner{font-family:'Cinzel',Georgia,serif!important;color:var(--v3h-gold-b)!important;font-weight:800!important;
  text-shadow:0 1px 2px #000,0 0 10px rgba(255,150,60,.35)!important}
.board-2d .divider::before,.board-2d .divider::after{background:linear-gradient(90deg,transparent,rgba(233,197,116,.55),transparent)!important}

/* ---------- LANE LABELS + EMPTY SLOTS ---------- */
.board-2d .row-label{font-family:'Cinzel',Georgia,serif!important;font-weight:700!important;color:var(--v3h-gold)!important;
  text-shadow:0 1px 2px #000,0 0 8px rgba(255,140,50,.25)!important}
.board-2d .side.enemy .row-label{color:#e8b08a!important}
.board-2d .slot:empty{
  background:radial-gradient(70% 55% at 50% 45%,rgba(255,120,40,.06),transparent 70%),rgba(10,7,6,.55)!important;
  border:1px dashed rgba(233,197,116,.32)!important;border-radius:8px!important;box-shadow:inset 0 0 14px rgba(0,0,0,.6)!important}
.board-2d .slot.castle:empty{border-style:solid!important;border-color:rgba(233,197,116,.4)!important}
.board-2d .slot.drop-target:empty.drag-over,.board-2d .slot.drop-target.drop-hover:empty{border-color:var(--v3h-gold-b)!important;box-shadow:inset 0 0 18px rgba(255,150,60,.25)!important}

/* ---------- DECK / GY ---------- */
.board-2d .pile-label{font-family:'Cinzel',Georgia,serif!important;font-weight:700!important;letter-spacing:.14em!important;color:var(--v3h-gold)!important;text-shadow:0 1px 2px #000!important}
.board-2d .pile-label span{color:var(--v3h-gold-b);font-variant-numeric:tabular-nums}
.board-2d .pile-stack:empty:not(.card-back-mini){background:rgba(10,7,6,.6)!important;border:1px dashed rgba(233,197,116,.3)!important;border-radius:6px!important;color:rgba(233,197,116,.45)!important}

/* ---------- HAND BAR ---------- */
#hand-bar{background:linear-gradient(180deg,rgba(20,13,10,.9),rgba(9,6,6,.94))!important;border-top:1px solid var(--v3h-rim-s)!important}
#hand-title{font-family:'Cinzel',Georgia,serif!important;color:var(--v3h-gold-b)!important;letter-spacing:.12em;text-shadow:0 1px 2px #000}
#hand-bar .hint{color:var(--v3h-mute)!important}

/* ---------- BATTLE LOG ---------- */
.log-panel{background:radial-gradient(120% 40% at 50% 0%,rgba(255,110,40,.08),transparent 60%),var(--v3h-glass)!important;
  border:1px solid var(--v3h-rim)!important;box-shadow:inset 0 1px 0 rgba(255,236,190,.08),0 12px 30px rgba(0,0,0,.55)!important}
.log-panel .log-header{border-bottom:1px solid var(--v3h-rim-s)!important}
.log-panel .log-header h2,.log-panel .log-header h3,.log-panel .log-header strong{font-family:'Cinzel',Georgia,serif!important;color:var(--v3h-gold-b)!important;letter-spacing:.14em}
#log li{border-bottom:1px solid rgba(233,197,116,.08)!important;color:var(--v3h-ink)}
#log li:first-child{color:var(--v3h-gold-b)}

/* ---------- CARD TOOLTIP ---------- */
.card-tip{background:radial-gradient(120% 70% at 50% 0%,rgba(255,110,40,.12),transparent 62%),var(--v3h-glass)!important;
  border:1px solid var(--v3h-rim)!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.10),0 12px 30px rgba(0,0,0,.65),0 0 16px rgba(255,120,40,.14)!important}
.card-tip-title{font-family:'Cinzel',Georgia,serif!important;font-weight:800!important;color:var(--v3h-gold-b)!important;letter-spacing:.06em;
  border-bottom:1px solid var(--v3h-rim-s);padding-bottom:4px;margin-bottom:4px;text-shadow:0 1px 2px #000}
.card-tip .tip-line{color:var(--v3h-ink)!important}
.card-tip .tip-line.tip-castle{color:#f6d79a!important}
/* touch hold: bottom sheet with thumbnail */
.card-tip.v3-tip-sheet{left:50%!important;bottom:auto!important;top:max(8px,env(safe-area-inset-top))!important;
  transform:translateX(-50%)!important;width:min(440px,calc(100vw - 20px))!important;max-width:none!important;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:12px;align-items:start;
  padding:12px 14px!important;z-index:140!important;animation:v3h-sheet .18s ease-out both;-webkit-touch-callout:none}
.card-tip.v3-tip-sheet[hidden]{display:none!important}
.card-tip.v3-tip-sheet .v3-tip-thumb{grid-row:1 / span 2;width:64px;height:96px;position:relative;overflow:hidden;border-radius:6px;
  border:1px solid var(--v3h-rim);box-shadow:0 4px 12px rgba(0,0,0,.6)}
.card-tip.v3-tip-sheet .v3-tip-thumb-card{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;pointer-events:none}
.card-tip.v3-tip-sheet .card-tip-body{max-height:40vh;overflow:auto}
@media (orientation:landscape) and (max-height:500px){.card-tip.v3-tip-sheet .card-tip-body{max-height:55vh}}
@keyframes v3h-sheet{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* long-press progress ring */
.has-card-tip{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.has-card-tip.v3-lp{position:relative}
.has-card-tip.v3-lp::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  pointer-events:none;z-index:5;border:2px solid rgba(251,227,160,.25);border-top-color:var(--v3h-gold-b);
  opacity:0;animation:v3h-ring .35s linear forwards;box-shadow:0 0 10px rgba(255,150,60,.35)}
@keyframes v3h-ring{0%{opacity:0;transform:rotate(0) scale(.7)}25%{opacity:1}100%{opacity:1;transform:rotate(300deg) scale(1)}}

/* one-time hint */
.v3-hold-hint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:150;pointer-events:none;
  padding:9px 16px;border-radius:999px;font:700 .8rem/1.2 'Cinzel',Georgia,serif;letter-spacing:.06em;color:var(--v3h-gold-b);
  background:var(--v3h-glass);border:1px solid var(--v3h-rim);box-shadow:0 8px 22px rgba(0,0,0,.6);animation:v3h-sheet .25s ease-out both;transition:opacity .5s ease}
.v3-hold-hint.out{opacity:0}

/* ---------- MOBILE: no heavy blur ---------- */
@media (max-width:940px),(pointer:coarse){
  .topbar,.board-2d .field-hud,.log-panel,.card-tip,.app.phone-options-open > .topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){
  .app.phone-options-open > .topbar,.card-tip.v3-tip-sheet,.v3-hold-hint{animation:none!important}
  .has-card-tip.v3-lp::after{animation:none;opacity:1}
  #app button{transition:none!important}
}

/* tip placement v2: parked in clear space, compact touch sheet, hint transition */
.card-tip:not(.v3-tip-sheet){transform:none}
.card-tip.v3-tip-sheet.v3-sheet-bottom{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
@media (max-height:500px),(max-width:600px){
  .card-tip.v3-tip-sheet{width:min(400px,calc(100vw - 16px))!important;padding:8px 10px!important;column-gap:10px}
  .card-tip.v3-tip-sheet .v3-tip-thumb{width:44px;height:66px}
  .card-tip.v3-tip-sheet .card-tip-body{max-height:32vh}
}
@media (orientation:landscape) and (max-height:500px){.card-tip.v3-tip-sheet .card-tip-body{max-height:38vh}}
.v3-hold-hint{transition:opacity .45s ease}
.v3-hold-hint{animation:v3h-hint-in .3s ease-out both}
@keyframes v3h-hint-in{from{opacity:0}to{opacity:1}}

/* Short landscape: docked side panel (JS sets left/top/width/max-height). */
:root{--v3-sat:env(safe-area-inset-top,0px);--v3-sab:env(safe-area-inset-bottom,0px);--v3-sal:env(safe-area-inset-left,0px);--v3-sar:env(safe-area-inset-right,0px)}
.card-tip.v3-tip-side,.card-tip.v3-tip-sheet.v3-tip-side{bottom:auto!important;right:auto!important;transform:none!important;max-width:none!important;
  display:flex!important;flex-direction:column;min-width:0!important;align-items:stretch;gap:6px;padding:10px!important;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box}
.card-tip.v3-tip-side[hidden]{display:none!important}
.card-tip.v3-tip-side .v3-tip-thumb{align-self:center;width:60px;height:90px;flex:none}
.card-tip.v3-tip-side .card-tip-body{max-height:none!important;overflow:visible}