/* Independent transparent assets: no sprite offsets at any breakpoint. */
#home-screen .hm-item em,
#home-screen .hm-link::before,
.hq-card-view .hq-crest,
.modal-close-btn::after {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#home-screen #home-btn-pve em { background-image: url('../assets/ui/kit_v2/icons/solo.webp'); }
#home-screen #home-btn-pvp em { background-image: url('../assets/ui/kit_v2/icons/battle.webp'); }
#home-screen #home-btn-eve em { background-image: url('../assets/ui/kit_v2/icons/sandbox.webp'); }
#home-screen #home-btn-decks::before { background-image: url('../assets/ui/kit_v2/icons/decks.webp'); }
#home-screen #home-btn-rules::before { background-image: url('../assets/ui/kit_v2/icons/rules.webp'); }
#home-screen #home-btn-editor::before { background-image: url('../assets/ui/kit_v2/icons/workshop.webp'); }
#home-screen #home-btn-install::before { background-image: url('../assets/ui/kit_v2/icons/fullscreen.webp'); }
#home-screen #home-btn-audio::before { background-image: url('../assets/ui/kit_v2/icons/audio.webp'); }
.hq-card-view .hq-crest { background-image: url('../assets/ui/kit_v2/icons/castle.webp'); }
.modal-close-btn::after { inset: 2px; background-image: url('../assets/ui/kit_v2/icons/close.webp'); }

/* All painting remains in the border allocation or just beyond the edge. */
.modal-box {
  border-image-width: 12px !important;
  border-image-outset: 0 !important;
  background-clip: border-box !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.65) !important;
}
.hq-card {
  box-sizing: border-box;
  border: 6px solid transparent !important;
  border-image: var(--sgk-modal-frame) 104 / 6px / 0 stretch !important;
  border-radius: 3px !important;
  background-clip: border-box !important;
}
.hq-card::before,.hq-card::after { content: none !important; display: none !important; }
.battlefield-line.line-support,.battlefield-line.line-frontline,
.hq-slot,.hq-fortress { border-image-outset: 0 !important; }
#side-drawer.tactical-drawer { border-image-width: 10px !important; border-image-outset: 0 !important; }
.deck-builder .db-shell { border-image-width: 16px; border-image-outset: 0; }

/* Extend the scrollport above the dock, keeping the extra space transparent.
   This permits lift while retaining horizontal scrolling on narrow screens. */
body #player-dock #hand-tray.hand-fan-tray {
  position: relative;
  top: -36px;
  height: calc(100% + 36px) !important;
  padding-top: 36px !important;
  box-sizing: border-box;
  z-index: 200;
  border: none !important;
  background-clip: content-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
#player-dock { z-index: 200; overflow: visible; }
body #player-dock #hand-tray .hand-card-fan .card-hand:hover,
body #player-dock #hand-tray .hand-card-fan .card-hand.selected,
body.m-land #player-dock #hand-tray .hand-card-fan .card-hand.selected,
body.m-port #player-dock #hand-tray .hand-card-fan .card-hand.selected {
  transform: translateY(-18px) scale(1.06) !important;
  outline: 2px solid #f0cf6a !important;
  outline-offset: -2px !important;
  z-index: 100 !important;
  box-shadow: inset 0 0 0 2px #f0cf6a80,0 3px 10px #0007 !important;
}
#player-dock #hand-tray .hand-card-fan { padding: 0 4px !important; box-sizing: border-box; }
#player-dock #hand-tray .hand-card-fan.hand-scroll {
  justify-content: flex-start !important;
  width: max-content !important;
  min-width: 100% !important;
}
.boot-emblem { background-image: url('../assets/ui/kit_v2/icons/loading-00.webp'); background-size: contain !important; background-position: center !important; }
.boot-emblem { filter: brightness(var(--boot-brightness,.8)) drop-shadow(0 0 var(--boot-glow,0px) #eea637); transition: filter .25s ease,transform .09s; }
.boot-emblem { animation: bootEmblemFloat 2.4s ease-in-out infinite; will-change: transform; }
@keyframes bootEmblemFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@media (prefers-reduced-motion:reduce) { .boot-emblem { animation: none; will-change: auto; } }
.boot-pips { height: 24px; gap: 4px; }
.boot-pips i,.boot-pips i.on {
  width: 23px; height: 23px; transform: none; border: none;
  background-color: transparent; background-size: contain; background-repeat: no-repeat; background-position: center;
  box-shadow: none;
}
.modal-title::before,.hq-pick-title::before { display: none; }
.modal-title::after,.hq-pick-title::after {
  left: 0; width: 100%; height: 14px; bottom: 0;
  background: url('../assets/ui/kit_v2/icons/title-divider.webp') center/contain no-repeat;
  transform: none;
}
.modal-title::after {
  left: 0;
  transform: none;
  max-width: 100%;
}

/* Avoid full-board and continuously changing SVG blur surfaces during aiming. */
.board-aspect-wrapper { filter: none !important; }
.targeting-curve { filter: none !important; animation: none !important; stroke-dasharray: none !important; }
body.is-dragging :is(.frontline-zone,.board-unit,.insert-marker) { animation: none !important; }
body.is-dragging .card-drag-ghost { will-change: transform; filter: none !important; transition: none !important; }

/* Mobile status is a separate grid row/column. Reserve lift space inside the
   hand row instead of shifting the scrollport over the status controls. */
body.m-land #game-app.game-container {
  grid-template-rows: 32px auto auto auto minmax(0,1fr) auto 116px;
}
body.m-port #game-app.game-container {
  grid-template-rows: 34px minmax(0,1fr) 48px 128px;
}
body.m-land #player-dock #hand-tray.hand-fan-tray {
  top: 0;
  height: 100% !important;
  min-height: 0;
  padding-top: 24px !important;
  background-clip: border-box !important;
}
body.m-land #player-dock :is(.player-hq-meta,.player-resources,.player-deck-actions,#turn-timer) {
  position: relative;
  z-index: 260;
}
body.m-land #player-dock #hand-tray .hand-card-fan .card-hand:hover:not(.selected) {
  transform: none !important;
  outline: none !important;
}
body.m-port .card-inspector-tooltip {
  zoom: 1;
  top: auto !important;
  bottom: calc(184px + env(safe-area-inset-bottom,0px)) !important;
  max-height: calc(var(--app-h,100dvh) - 230px);
}
@media (max-height:360px) {
  body.m-land:not(.m-port) #game-app.game-container {
    grid-template-rows: 28px auto auto auto minmax(0,1fr) auto 98px;
  }
  body.m-land:not(.m-port) #player-dock #hand-tray.hand-fan-tray { height: 100% !important; }
}

/* Use Safari's measured visible viewport, including address-bar changes. */
body.m-land #game-app.game-container {
  top: var(--app-top,0px) !important;
  bottom: auto !important;
  height: var(--app-h,100dvh) !important;
  padding-top: max(8px,env(safe-area-inset-top,0px)) !important;
  padding-bottom: max(8px,env(safe-area-inset-bottom,0px)) !important;
}
body.m-port #game-app.game-container {
  padding-top: max(52px,env(safe-area-inset-top,0px)) !important;
  padding-bottom: max(28px,env(safe-area-inset-bottom,0px)) !important;
}
body.m-port .card-inspector-tooltip {
  bottom: calc(184px + max(28px,env(safe-area-inset-bottom,0px))) !important;
  max-height: calc(var(--app-h,100dvh) - max(52px,env(safe-area-inset-top,0px)) - max(28px,env(safe-area-inset-bottom,0px)) - 230px);
}
body.m-port #battlefield-main { padding: 4px 8px !important; align-items: center !important; justify-content: center !important; }
body.m-port #player-dock #hand-tray.hand-fan-tray { padding-top: 12px !important; padding-bottom: 2px !important; }
body.m-port #player-dock .hand-card-fan { align-items: flex-start !important; }
body.m-port #player-dock .hand-card-fan .card-hand { zoom: .72; }
body.m-port #player-dock #hand-tray .hand-card-fan .card-hand.selected { transform: translateY(-10px) scale(1.025) !important; }
body.m-port #player-dock :is(.granary-title,.prestige-title) { font-size: 0 !important; }
body.m-port #player-dock .granary-title::before { content: '粮'; font-size: 11px; }
body.m-port #player-dock .prestige-title::before { content: '望'; font-size: 11px; }
body.m-port .battlefield-line { border-image-width: 14px !important; border-image-outset: 0 !important; }
body.m-port .hq-slot { border-image-width: 12px !important; border-image-outset: 0 !important; }
body.m-port .zone-terrain-banner :is(.terrain-name,.zone-occupant-badge,.zone-capacity-tag) { white-space: nowrap; }
body.m-port.is-dragging #hand-tray::after { inset: 12px 0 0; border-width: 1px; background: rgba(80,28,18,.18); color: transparent; }
body.m-port #player-dock :is(.player-hq-meta,.player-resources,.player-deck-actions,#turn-timer) {
  box-sizing: border-box;
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
body.m-port #player-dock :is(.player-hq-meta,.player-resources) { padding-top: 4px !important; padding-bottom: 4px !important; }
body.m-port #player-dock .player-deck-actions {
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
}
body.m-port #player-dock #btn-end-turn {
  grid-column: 1 !important;
  grid-row: 1 !important;
  box-sizing: border-box;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}
#player-dock #btn-end-turn { inset: auto !important; transform: none !important; }

/* Portrait Safari: fit the whole play surface between the camera and home bar. */
:root {
  --port-top-space: max(66px, env(safe-area-inset-top, 0px));
  --port-bottom-space: max(12px, env(safe-area-inset-bottom, 0px));
}
body.m-port #game-app.game-container {
  grid-template-rows: 34px minmax(0, 1fr) 48px 120px;
  padding-top: var(--port-top-space) !important;
  padding-bottom: var(--port-bottom-space) !important;
}
body.m-port .modal-overlay {
  box-sizing: border-box;
  padding: var(--port-top-space) 8px var(--port-bottom-space);
}
body.m-port .touch-cancel-btn {
  bottom: calc(var(--port-bottom-space) + 94px) !important;
  z-index: 1100;
}
body.m-port.is-dragging .touch-cancel-btn { display: inline-flex !important; }
body.m-port #player-dock #hand-tray.hand-fan-tray {
  height: 100% !important;
  align-self: stretch !important;
  padding-top: 4px !important;
  padding-bottom: 2px !important;
}
body.m-port.is-dragging #hand-tray {
  outline: 2px dashed #e7aa78;
  outline-offset: -3px;
  background: rgba(95, 37, 25, .65) !important;
}
body.m-port.is-dragging #hand-tray::after { content: none !important; }
body.m-port .card-inspector-tooltip {
  bottom: calc(176px + var(--port-bottom-space)) !important;
  max-height: calc(var(--app-h, 100dvh) - var(--port-top-space) - var(--port-bottom-space) - 202px);
}

/* The fortress choices use a stable, complete rim at small sizes. */
.hq-card {
  border: 2px solid #cda861 !important;
  border-image: none !important;
  background-clip: padding-box !important;
  box-shadow: inset 0 0 0 2px #4b301c, 0 8px 20px #0008 !important;
}
.hq-card::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 4px;
  width: auto;
  height: auto;
  transform: none;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(#d8aa59,#d8aa59) left top / 11px 1px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) left top / 1px 11px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) right top / 11px 1px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) right top / 1px 11px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) left bottom / 11px 1px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) left bottom / 1px 11px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) right bottom / 11px 1px no-repeat,
    linear-gradient(#d8aa59,#d8aa59) right bottom / 1px 11px no-repeat;
}

/* A two-column form saves four label rows, leaving room for both cards and actions. */
@media (max-width: 600px) and (orientation: portrait) {
  body.m-port #modal-hq-pick .hq-pick-box {
    box-sizing: border-box;
    width: min(100%, 440px) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 11px 12px 9px !important;
    gap: 0;
  }
  body.m-port .hq-pick-title {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25;
    padding-bottom: 12px !important;
    margin: 0 auto 5px !important;
  }
  body.m-port .hqp-grid {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 5px 7px !important;
    margin: 3px 0 !important;
  }
  body.m-port .hqp-label { margin: 0 !important; text-align: left !important; letter-spacing: 0; }
  body.m-port .hqp-field { min-height: 32px; flex-wrap: nowrap; }
  body.m-port .hqp-field .enemy-chip { padding: 4px 8px !important; font-size: 12px !important; }
  body.m-port .hqp-decks { padding-bottom: 2px; gap: 5px; }
  body.m-port .hqp-deck { width: 108px; padding: 3px 6px; }
body.m-port .hqp-deck-name { font-size: 11px; }
  body.m-port .hqp-deck,
  body.m-port .hqp-deck-name,
  body.m-port .hqp-deck-meta { min-width: 0; max-width: 100%; }
  body.m-port .hqp-deck-meta {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  body.m-port .hqp-manage { padding: 3px 7px !important; }
  body.m-port .hq-pick-sub { display: none !important; }
  body.m-port .hq-pick-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 6px 0 !important;
    max-width: none;
  }
  body.m-port .hq-card {
    height: clamp(112px, 19dvh, 156px) !important;
    padding: 10px 5px 7px !important;
  }
  body.m-port .hq-card-name { font-size: clamp(18px, 5.5vw, 26px) !important; }
  body.m-port .hq-card-terrains { margin-top: 3px; }
  body.m-port .hq-card-shield {
    width: 43px !important;
    height: 46px !important;
    margin-top: 8px !important;
    font-size: 21px !important;
  }
  body.m-port .hq-card-grain { font-size: 10px; }
  body.m-port .hq-pick-box .modal-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0 !important;
    padding: 5px 0 0 !important;
  }
  body.m-port .hq-pick-box .modal-actions .modal-btn { min-height: 36px; margin: 0; }
}

body.m-port .game-menu-box { max-height: calc(100% - var(--port-top-space) - var(--port-bottom-space)); }
@media (max-height: 680px) and (orientation: portrait) {
  body.m-port .game-menu-box { padding: 10px 13px !important; }
  body.m-port .game-menu-seal { margin-bottom: 6px; padding: 2px 12px; font-size: 18px; }
  body.m-port .game-menu-list { gap: 4px; }
  body.m-port .menu-item { padding: 5px 0 !important; font-size: 14px; }
  body.m-port .game-menu-audio { margin-top: 7px; padding-top: 7px; }
  body.m-port .game-menu-hint { display: none !important; }
}

/* One opaque surface continues beneath every frame edge and footer. */
.modal-box {
  background: #241810 !important;
  background-clip: border-box !important;
}
.modal-box .modal-actions { background: transparent !important; }

/* Paint directly on the home surface instead of relying on Safari to show
   a fixed body background through a transparent app shell. */
body.at-home.m-land {
  background: #120e0a url('../assets/ui/home-bg.webp') center / cover no-repeat !important;
}
body.at-home.m-land #home-screen.home-screen.hm {
  background:
    linear-gradient(90deg,rgba(7,5,3,.83) 0%,rgba(7,5,3,.55) 42%,rgba(7,5,3,.26) 68%,rgba(7,5,3,.58) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.38)),
    url('../assets/ui/home-bg.webp') center center / cover no-repeat !important;
  background-attachment: scroll !important;
  top: 0;
  bottom: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
body.m-port #home-screen.home-screen.hm {
  padding-top: var(--port-top-space);
  padding-bottom: var(--port-bottom-space);
  grid-template-rows: minmax(0, 1fr) auto auto;
}
body.m-port #home-screen.home-screen.hm::after {
  background: linear-gradient(180deg,rgba(7,5,4,.15),rgba(7,5,4,.22) 31%,rgba(7,5,4,.42) 69%,rgba(7,5,4,.5));
}
body.m-port .hm-links { flex-wrap: nowrap; gap: 4px; }
body.m-port .hm-link { flex: 1 1 38px; letter-spacing: 0; }
@media (max-height: 680px) and (orientation: portrait) {
  body.m-port .hm-title { font-size: min(24vw, 14vh); }
}

/* Revealed-card names occupy only spare room in the mobile status bar. */
body.m-land #top-bar.hud-top-bar { min-width: 0; overflow: hidden !important; }
body.m-land #top-bar .opponent-resources {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: 0 !important;
  gap: 3px !important;
}
body.m-land #top-bar .hud-actions { flex: 0 0 auto; margin-left: 0; }
body.m-land #top-bar .opp-known-cards {
  flex: 1 1 0;
  min-width: 0;
  max-width: 128px;
  overflow-x: auto;
  overflow-y: hidden;
}
body.m-land #top-bar .okc-chip { max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
body.m-port #top-bar .opponent-meta { flex: 0 0 auto; min-width: 0; }
body.m-port #top-bar .opponent-resources { gap: 2px !important; }
body.m-port #top-bar .opp-known-cards { max-width: 82px; }
body.m-port #top-bar .okc-label { font-size: 0; letter-spacing: 0; }
body.m-port #top-bar .okc-label::before { content: '明'; font-size: 9px; }
body.m-port #top-bar .okc-chip { font-size: 9px; padding: 2px 3px; max-width: 60px; }
@media (max-width: 360px) {
  body.m-port #top-bar .hud-action-btn { padding: 0 2px; }
  body.m-port #top-bar .hud-actions { gap: 2px; }
  body.m-port #top-bar .phase-badge { padding: 2px 3px !important; }
  body.m-port #top-bar .faction-emblem { width: 18px !important; min-width: 18px; height: 18px !important; }
  body.m-port #top-bar .hq-status-group { width: 44px !important; }
  body.m-port #top-bar .provisions-badge .resource-icon { display: none; }
}
body.m-land .bfx-layer * { filter: none !important; }