/* overlay.css - RUNIVERSE-SV-PLAYER-OVERLAY-1 (Q207). SV look: dark panels #09071b, teal #0eaf9b lines, gold #f1d67a accents; team pixel fonts via the tokens in fonts.css (no literal font sizes/families).
   ADDITIVE: every rule is scoped to .ov-* / body.ov-on / [data-panel]. Phone-first: >= 44 px targets, a word under every icon, panels slide up inside the Book sheet; desktop >= 900 px docks them as a side panel. */
.ov-panel, .ov-panel * { box-sizing: border-box; }
.ov-panel { padding: 8px 12px 12px; color: #c7dcd0; font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 100%; }
.ov-head { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 6px; }
.ov-title { font-family: var(--rf-title); font-size: var(--rf-fs-title2); line-height: var(--rf-lh-title2); color: #f1d67a; }
.ov-sub { font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #7f9a90; margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.ov-gold { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.ov-num { font-family: var(--rf-num); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #f1d67a; }
.ov-dim { color: #7f9a90; }
.ov-gold-t { color: #f1d67a; }
.ov-sec { font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh); color: #0eaf9b; margin: 12px 0 4px; letter-spacing: 1px; }
.ov-body { margin: 6px 0; font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); }
.ov-note { min-height: 21px; margin: 6px 0 0; font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); }
.ov-ico { display: inline-block; flex: 0 0 auto; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; }
.ov-ico--none { width: 20px; height: 20px; border: 1px dashed #3b4a52; }
/* chips / buttons */
.ov-filters, .ov-careerpick, .ov-hbpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ov-chip, .ov-segbtn { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #0eaf9b; background: rgba(9,7,27,0.9); color: #c7dcd0; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ov-chip.is-on, .ov-segbtn.is-on { background: rgba(14,175,155,0.28); color: #f1d67a; border-color: #f1d67a; }
.ov-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid #f1d67a; background: rgba(241,214,122,0.12); color: #f1d67a; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); cursor: pointer; touch-action: manipulation; }
.ov-btn:disabled { border-color: #3b4a52; color: #5c6f68; background: transparent; cursor: default; }
.ov-btn--wide { width: 100%; margin-top: 8px; }
.ov-btn--sm { padding: 0 10px; }
.ov-chip:focus-visible, .ov-btn:focus-visible, .ov-segbtn:focus-visible, .ov-slotbox:focus-visible, .ov-eqslot:focus-visible, .ov-pickrow:focus-visible, .ov-input:focus-visible, .ov-slot:focus-visible { outline: 2px solid #ffe68c; outline-offset: 2px; }
.ov-seg { display: flex; gap: 6px; margin: 4px 0 8px; overflow-x: auto; }
.ov-seg .ov-segbtn { flex: 1 1 0; }
/* bag grid */
.ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.ov-slotbox { position: relative; min-height: 56px; aspect-ratio: 1 / 1; max-height: 72px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1.5px solid #26343b; background: rgba(18,15,43,0.9); color: inherit; cursor: pointer; touch-action: manipulation; }
.ov-slotbox.ov-empty { cursor: default; opacity: 0.55; border-style: dashed; }
.ov-slotbox.is-sel { border-color: #f1d67a; background: rgba(241,214,122,0.12); }
.ov-q { position: absolute; right: 4px; bottom: 2px; font-family: var(--rf-num); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #f1d67a; text-shadow: 0 1px 0 #09071b, 1px 0 0 #09071b, -1px 0 0 #09071b, 0 -1px 0 #09071b; pointer-events: none; }
.ov-card { margin-top: 8px; padding: 10px; border: 1.5px solid #26343b; border-radius: 10px; background: rgba(18,15,43,0.9); }
.ov-card-top { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.ov-card-name { font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); color: #f1d67a; }
.ov-card-sub { font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #7f9a90; }
.ov-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ov-hblabel { margin-right: 4px; }
/* gear doll */
.ov-doll { position: relative; display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-template-areas: "head fig tool" "body fig neck" "ring fig ."; gap: 8px; align-items: center; justify-items: center; margin: 8px 0; }
.ov-fig { grid-area: fig; width: 100%; min-height: 168px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at 50% 85%, rgba(14,175,155,0.18), rgba(9,7,27,0) 70%); }
.ov-portrait { max-width: 100%; max-height: 160px; width: auto; height: auto; image-rendering: pixelated; transform: scale(3); transform-origin: 50% 70%; }
.ov-fig-none { width: 48px; height: 96px; border: 1.5px dashed #3b4a52; border-radius: 24px 24px 6px 6px; }
.ov-eqslot { position: relative; width: 100%; max-width: 92px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: 10px; border: 1.5px solid #26343b; background: rgba(18,15,43,0.9); color: #7f9a90; cursor: pointer; touch-action: manipulation; }
.ov-eqslot.is-sel { border-color: #f1d67a; background: rgba(241,214,122,0.12); }
.ov-eq-head { grid-area: head; } .ov-eq-body { grid-area: body; } .ov-eq-tool { grid-area: tool; } .ov-eq-neck { grid-area: neck; } .ov-eq-ring { grid-area: ring; }
.ov-eqlabel { font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); }
.ov-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ov-pickrow { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: 8px; border: 1.5px solid #26343b; background: rgba(9,7,27,0.9); color: #c7dcd0; cursor: pointer; text-align: left; }
.ov-pickrow.is-on { border-color: #f1d67a; }
.ov-pickname { font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); }
/* me */
.ov-field { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.ov-fl { min-width: 56px; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); }
.ov-input { flex: 1 1 auto; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #0eaf9b; background: rgba(9,7,27,0.95); color: #e8f1ea; font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); min-width: 0; }
.ov-career { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n r" "b x"; gap: 2px 10px; align-items: center; padding: 8px 10px; margin: 6px 0; border: 1.5px solid #26343b; border-radius: 10px; background: rgba(18,15,43,0.9); }
.ov-cname { grid-area: n; font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); }
.ov-crank { grid-area: r; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); }
.ov-cbar { grid-area: b; display: block; height: 8px; border-radius: 4px; background: #26343b; overflow: hidden; }
.ov-cfill { display: block; height: 100%; background: #0eaf9b; }
.ov-cxp { grid-area: x; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); text-align: right; }
.ov-need { display: grid; grid-template-columns: 74px auto 1fr; gap: 10px; align-items: center; min-height: 36px; }
.ov-nlabel { font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); }
.ov-pips { display: inline-flex; gap: 4px; } .ov-pips i { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid #3b4a52; } .ov-pips i.on { background: #f1d67a; border-color: #f1d67a; }
.ov-nword { font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); }
/* board */
.ov-bneed { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; margin: 6px 0; border: 1.5px solid #26343b; border-radius: 10px; background: rgba(18,15,43,0.9); }
.ov-bneed .ov-ico { justify-self: center; }
.ov-bneed-name { font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); }
.ov-bneed-sub { font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); }
.ov-shell { padding: 10px; border: 1.5px dashed #3b4a52; border-radius: 10px; margin-top: 6px; }
.ov-logrow { padding: 4px 0; border-top: 1px solid #26343b; }
/* party / chat */
.ov-prow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px; margin: 4px 0; border: 1.5px solid #26343b; border-radius: 10px; background: rgba(18,15,43,0.9); }
.ov-pname { flex: 1 1 auto; font-family: var(--rf-title); font-size: var(--rf-fs-title); line-height: var(--rf-lh-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-chatlog { height: 40vh; height: 40dvh; min-height: 96px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1.5px solid #26343b; border-radius: 10px; background: rgba(18,15,43,0.9); }
.ov-msg { margin: 4px 0; } .ov-mname { margin-right: 8px; font-family: var(--rf-ui); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #0eaf9b; } .ov-msg.mine .ov-mname { color: #f1d67a; }
.ov-mtext { font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); overflow-wrap: anywhere; }
.ov-chatform { display: flex; gap: 8px; margin-top: 8px; }
/* hotbar: bottom-centre, outside the protected central 60% x 60%; steps aside while a prompt / toast / sheet owns the bottom band */
.ov-hotbar { position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 190;   /* below the core toast (z 200): a tap on a toast must reach the toast */ display: flex; gap: 6px; padding: 4px; pointer-events: none; }
.ov-slot { position: relative; width: 48px; height: 48px; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 2px solid rgba(14,175,155,0.75); background: rgba(9,7,27,0.82); color: #7f9a90; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ov-slot.is-filled { border-color: #f1d67a; }
.ov-slot:hover { background: rgba(14,175,155,0.28); }
.ov-hk { position: absolute; left: 3px; top: 0; font-family: var(--rf-num); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #7f9a90; pointer-events: none; }
.ov-hq { position: absolute; right: 3px; bottom: 0; font-family: var(--rf-num); font-size: var(--rf-fs-ui); line-height: var(--rf-lh-tight); color: #f1d67a; text-shadow: 0 1px 0 #09071b, 1px 0 0 #09071b, -1px 0 0 #09071b; pointer-events: none; }
.ov-plus { font-family: var(--rf-ui); font-size: var(--rf-fs-ui2); line-height: var(--rf-lh); color: #3b4a52; pointer-events: none; }
.ov-flash { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); max-width: calc(100vw - 16px); width: max-content; padding: 4px 10px; border-radius: 8px; background: rgba(9,7,27,0.92); border: 1px solid #f1d67a; color: #e8f1ea; font-family: var(--rf-body); font-size: var(--rf-fs-body); line-height: var(--rf-lh-body); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ov-flash.on { opacity: 1; }
body.ov-yield .ov-hotbar, body.bk-open .ov-hotbar, body.ts-open .ov-hotbar { visibility: hidden; }
/* phone landscape: the Book is full height already; tighten the bag grid */
@media (max-height: 500px) { .ov-panel { padding-top: 4px; } .ov-grid { grid-template-columns: repeat(6, 1fr); } .ov-fig { min-height: 120px; } .ov-portrait { max-height: 110px; } .ov-chatlog { height: 120px; } }
/* desktop: the panels dock as a side panel beside the world (the Book sheet, re-anchored for the overlay tabs only) */
@media (min-width: 900px) and (min-height: 501px) {
  body.ov-on .bk-sheet[data-tab="bag"], body.ov-on .bk-sheet[data-tab="gear"], body.ov-on .bk-sheet[data-tab="sheet"], body.ov-on .bk-sheet[data-tab="board"], body.ov-on .bk-sheet[data-tab="party"], body.ov-on .bk-sheet[data-tab="chat"] { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: 480px; max-height: none; height: 100vh; height: 100dvh; border-top: 0; border-left: 2px solid #0eaf9b; border-radius: 0; }
  .ov-grid { grid-template-columns: repeat(5, 1fr); }
  .ov-chatlog { height: 46vh; max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { .ov-flash { transition: none; } }

/* the Submit-original-art chip (bottom-left, auto width, 44 px tall) spans the portrait phone: lift the hotbar above it so no two controls intersect (hud-overlays control-vs-control gate) */
@media (max-width: 520px) { body:has(#art-submit-btn) .ov-hotbar { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px); } }

/* narrow portrait phone: the bottom-right 120x120 corner is the hop / tap-to-walk zone and must stay free (controls-apply gate): the hotbar sits bottom-left, 5 x 44 px, ending left of x=270 */
@media (max-width: 520px) { .ov-hotbar { left: 8px; transform: none; gap: 4px; } .ov-slot { width: 44px; height: 44px; } .ov-flash { left: 0; transform: none; } }

/* the Book gains six tabs: on a narrow phone the strip wraps to two rows so every tab (Party, Chat included) is on screen and tappable (>= 44 px); wide screens are unchanged */
@media (max-width: 520px) { body.ov-on .bk-tabs { flex-wrap: wrap; overflow-x: visible; } body.ov-on .bk-tab { flex: 1 1 56px; min-width: 56px; padding: 0 6px; } }

/* side panel tab strip (desktop, 480 px): nine tabs wrap to two rows so none is clipped */
@media (min-width: 900px) and (min-height: 501px) { body.ov-on .bk-sheet:is([data-tab="bag"],[data-tab="gear"],[data-tab="sheet"],[data-tab="board"],[data-tab="party"],[data-tab="chat"]) .bk-tabs { flex-wrap: wrap; overflow-x: visible; } body.ov-on .bk-sheet:is([data-tab="bag"],[data-tab="gear"],[data-tab="sheet"],[data-tab="board"],[data-tab="party"],[data-tab="chat"]) .bk-tab { flex: 1 1 56px; min-width: 56px; padding: 0 6px; } }