/* style2_hud.css — Style 2 (Tree of Savior × Cookie Run: Kingdom) cream parchment + roasted wood + royal gold. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-scale: 1; /* set from JS: clamp(0.82, min(vw/402, vh/874), 1.25) — CSS can't divide lengths into a unitless number */
  --ink: #3a2415;
  --wood: #6b3f1f;
  --wood-dark: #4b2a12;
  --cream: #fff6e3;
  --parch: #fbecc8;
  --gold: #e0a72a;
  --gold-hi: #ffe08a;
  --font: "Trebuchet MS", "Avenir Next Rounded", "Nunito", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1d140c;
  overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  font-family: var(--font); color: var(--ink);
}
.phone-shell { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(#bfe6ff, #fdf2d8); }
/* Desktop: centered vertical 430px phone frame (Section 13.A.1) */
@media (min-width: 700px) and (pointer: fine) {
  .phone-shell { left: 50%; width: 430px; transform: translateX(-50%); box-shadow: 0 0 0 6px #2a1a0d, 0 20px 80px #000a; }
}
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud[data-scene="BOOT"] { display: none; }
#hud > * { pointer-events: auto; }
#top-hud-bar {
  position: absolute; top: calc(var(--safe-top) + 8px); left: 10px; right: 10px; z-index: 26;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  font-size: calc(13.5px * var(--ui-scale)); pointer-events: none;
}
.player-hud-stack {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  pointer-events: auto; max-width: calc(100% - 122px);
}
.player-card {
  display: flex; gap: 9px; align-items: center; padding: 5px 10px 5px 6px; border-radius: 18px;
  background: linear-gradient(180deg, #7c4f2b 0%, #523017 100%);
  border: 2.5px solid #e5ad3b; color: var(--cream);
  box-shadow: inset 0 1.5px 0 rgba(255, 240, 200, 0.45), 0 3px 0 #2a1508, 0 6px 14px rgba(0, 0, 0, 0.38);
  min-width: calc(184px * var(--ui-scale));
  cursor: pointer; user-select: none; transition: transform .12s, filter .12s;
}
.player-card:active { transform: translateY(1.5px) scale(0.98); filter: brightness(1.06); }
.avatar {
  position: relative; overflow: hidden;
  width: calc(50px * var(--ui-scale)); height: calc(50px * var(--ui-scale)); border-radius: 13px; flex: none;
  background: linear-gradient(180deg, #fff8e7, #f2d8a7) center 10% / 168% no-repeat;
  border: 2.5px solid #ffe08a; box-shadow: inset 0 0 0 1.5px #8a5422, 0 2px 5px rgba(0, 0, 0, 0.35);
}
.avatar .hud-ava-body {
  position: absolute; left: 50%; top: 2px; width: 158%; height: 158%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none;
}
.avatar .hud-ava-hair {
  position: absolute; left: 50%; top: -2px; width: 92%; height: 92%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none; z-index: 2;
}
.player-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.player-name-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.player-name {
  font-weight: 900; font-size: 1.08em; line-height: 1.1; color: #fff8e8;
  text-shadow: 0 2px 0 #2a1508; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-card-gear {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: calc(20px * var(--ui-scale)); height: calc(20px * var(--ui-scale)); border-radius: 999px;
  background: rgba(36, 19, 8, 0.55); border: 1.5px solid rgba(255, 224, 138, 0.65);
  font-size: calc(11px * var(--ui-scale)); line-height: 1;
}
.player-card-gear.has-dot::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
  border-radius: 50%; background: #4be3ff; border: 1.5px solid #2a1508;
  box-shadow: 0 0 5px #4be3ff;
}
.player-sub { font-size: .82em; font-weight: 800; color: #ffe7b3; text-shadow: 0 1px 1px #2a1508; }
.player-sub .cp { color: #ffe074; }
.exp-bar {
  height: 7px; margin-top: 3px; border-radius: 999px; background: #241308;
  border: 1px solid rgba(255, 224, 138, 0.38); overflow: hidden;
}
.exp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #5be36b, #a8ff78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: width .4s;
}
.hud-couple-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2.5px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(35, 92, 46, 0.92), rgba(20, 62, 30, 0.95));
  border: 1.8px solid #7be382; color: #eaffea;
  font-size: calc(10.5px * var(--ui-scale)); font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 1px #0d2e14;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.hud-couple-pill b { color: #9effa6; }
.hud-guide-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 3px 6px 3px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(82, 48, 22, 0.94), rgba(50, 28, 12, 0.96));
  border: 1.8px solid #ffe08a; color: #fff8e8;
  font: 800 calc(10.5px * var(--ui-scale)) var(--font);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.4);
  text-shadow: 0 1px 1px #241105; cursor: pointer; white-space: nowrap;
  max-width: 100%; overflow: hidden;
}
.hud-guide-pill.quest-ready {
  background: linear-gradient(180deg, rgba(46, 114, 42, 0.96), rgba(24, 72, 22, 0.98));
  border-color: #b8f596;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 12px rgba(130, 240, 100, 0.55), 0 2px 6px rgba(0,0,0,0.4);
}
#hud-guide-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: left;
}
.hud-guide-pill:active { transform: translateY(1px); }
.hud-guide-cta {
  flex-shrink: 0;
  padding: 1.5px 7px; border-radius: 999px;
  background: linear-gradient(180deg, #ffec99 0%, #f0a929 100%);
  color: #3a2415; font-weight: 900; font-size: 0.92em;
  border: 1.5px solid #3a2415; text-shadow: none;
}
.currencies { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; pointer-events: auto; }
.pill {
  display: flex; align-items: center; gap: 6px; min-width: calc(108px * var(--ui-scale)); justify-content: space-between;
  padding: 2.5px 11px 2.5px 4px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 48, 66, 0.86), rgba(22, 28, 42, 0.92));
  color: #fff; font-weight: 900; font-size: calc(13px * var(--ui-scale));
  border: 2px solid #3a2415; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1.5px 0 #1a1008;
}
.pill img { width: calc(24px * var(--ui-scale)); height: calc(24px * var(--ui-scale)); object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.net-pill {
  position: absolute; top: calc(var(--safe-top) + 108px * var(--ui-scale)); left: 10px; font-size: 10.5px; font-weight: 800;
  padding: 2px 9px; border-radius: 999px; background: #2b1c10dd; color: #b6f5a6; pointer-events: none; z-index: 25;
}
.net-pill:not(.offline) { display: none; }
.net-pill.offline { color: #ffb3a1; }
.debug-readout {
  position: absolute; top: calc(var(--safe-top) + 120px * var(--ui-scale)); left: 10px; font: 11px/1.35 ui-monospace, Menlo, monospace;
  padding: 6px 8px; border-radius: 8px; background: #000a; color: #fff; white-space: pre; pointer-events: none;
}

/* Floating 360° joystick (bottom-left zone: x < 42% vw, y > 62% vh) */
.joystick-pad { position: absolute; left: 0; bottom: 0; width: 42%; height: 38%; touch-action: none; }
.joystick-base {
  position: absolute; left: 24px; bottom: calc(var(--safe-bottom) + 96px * var(--ui-scale));
  width: calc(124px * var(--ui-scale)); height: calc(124px * var(--ui-scale)); border-radius: 50%;
  background: radial-gradient(#ffffff40, #ffffff18 62%, #ffffff30); border: 2px solid #ffffff70;
  box-shadow: inset 0 0 18px #0002; transition: opacity .2s; opacity: .75;
}
.joystick-pad.active .joystick-base { opacity: 1; }
.joystick-stick {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e7dccb); border: 2px solid #fff; box-shadow: 0 4px 10px #0004;
}

/* Persistent 5-Tab Painted Wood Dock (stays visible at z-index: 38 above rpg-ui & tableHub) */
#bottom-dock {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 38; display: flex;
  padding: 5px 6px calc(var(--safe-bottom) + 5px); gap: 4px;
  background: linear-gradient(180deg, #865229 0%, #5c3416 55%, #43240d 100%);
  border-top: 3.5px solid #e0a72a;
  box-shadow: inset 0 2px 0 rgba(255, 232, 168, 0.35), 0 -5px 16px rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}
.dock-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 2px solid transparent; border-radius: 14px;
  padding: 3px 2px 4px; background: transparent; color: #fff4dc;
  font: 900 calc(11.5px * var(--ui-scale)) var(--font);
  text-shadow: 0 2px 0 #2a1406; cursor: pointer; transition: transform .12s, background .15s;
}
.dock-btn:active { transform: translateY(1.5px) scale(0.97); }
.dock-btn .ico {
  display: flex; align-items: center; justify-content: center;
  width: calc(36px * var(--ui-scale)); height: calc(34px * var(--ui-scale));
  font-size: calc(24px * var(--ui-scale)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.dock-btn .ico img {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
.dock-btn.active {
  background: linear-gradient(180deg, #ffe999 0%, #f7b738 62%, #df8d18 100%);
  border-color: #3a2415; color: #3a2415; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 #b36b10, 0 2px 8px rgba(0, 0, 0, 0.35);
}
.dock-btn[data-step] { opacity: .86; }

/* ---------------- Gate (Screen 24) ---------------- */
.gate {
  position: absolute; inset: 0; z-index: 20; overflow-y: auto; touch-action: pan-y;
  background: linear-gradient(#8fd0ff 0%, #cfeaff 45%, #fff1d6 100%);
}
.gate.hidden { display: none; }
.gate-scroll { min-height: 100%; padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bottom) + 24px); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.logo { text-align: center; margin-top: 4px; }
.logo-gem { font-size: 30px; color: #5bc8ff; text-shadow: 0 0 12px #fff, 0 2px 0 #c9932c; }
.logo h1 {
  margin: 0; font-size: calc(40px * var(--ui-scale)); letter-spacing: 1px; color: #ffd76a;
  -webkit-text-stroke: 2px #7a3f12; text-shadow: 0 4px 0 #7a3f12, 0 8px 16px #0004; font-weight: 900;
}
.ribbon {
  display: inline-block; margin-top: 6px; padding: 4px 18px; border-radius: 6px; font-weight: 800; font-size: 14px;
  background: linear-gradient(#ffe7a6, #e9b552); border: 2px solid #9a5a1c; color: #5a3010;
}
.parchment {
  position: relative; width: 100%; max-width: 380px; padding: 30px 14px 14px; border-radius: 18px;
  background: var(--parch); border: 3px solid #a46a32; box-shadow: inset 0 0 0 3px #f7dca2, 0 6px 0 #6b3f1f, 0 10px 24px #0003;
}
.parchment.wood { background: #f6e3bb; }
.parchment-title {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 4px 14px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--cream);
  background: linear-gradient(#8a5428, #5c3416); border: 2px solid #e0a72a;
}
.lineage-row { display: flex; gap: 10px; }
.lineage {
  flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px;
  background: #fff8e8; border: 2px solid #e2c48b; font: inherit; color: inherit; cursor: pointer; transition: transform .15s;
}
.lineage > img { height: 132px; object-fit: contain; filter: drop-shadow(0 4px 2px #0003); }
.gate-chibi-preview {
  position: relative; width: 112px; height: 134px; display: flex; align-items: flex-end; justify-content: center;
}
.gate-chibi-body {
  height: 126px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 2px #0003); position: relative; z-index: 1;
}
.gate-chibi-hair-back, .gate-chibi-hair {
  position: absolute; pointer-events: none; object-fit: contain;
  filter: sepia(0.55) saturate(1.5) hue-rotate(-14deg) brightness(0.76);
  transition: filter 0.2s ease;
}
.gate-chibi-hair-back { z-index: 0; }
.gate-chibi-hair { z-index: 2; }
.lineage[data-body="boy"] .gate-chibi-hair-back,
.lineage[data-body="boy"] .gate-chibi-hair {
  top: -5px; left: 50%; width: 69px; transform: translateX(-50%);
}
.lineage[data-body="boy"] .gate-chibi-hair {
  clip-path: inset(0 0 22% 0);
}
.lineage[data-body="girl"] .gate-chibi-hair-back,
.lineage[data-body="girl"] .gate-chibi-hair {
  top: -5px; left: 50%; width: 73px; transform: translateX(-49%);
}
.lineage[data-body="girl"] .gate-chibi-hair {
  clip-path: inset(0 0 61% 0);
}
#gate[data-hair-dye="midnight"] .gate-chibi-hair-back,
#gate[data-hair-dye="midnight"] .gate-chibi-hair {
  filter: brightness(0.36) contrast(1.25) saturate(0.4);
}
#gate[data-hair-dye="honey"] .gate-chibi-hair-back,
#gate[data-hair-dye="honey"] .gate-chibi-hair {
  filter: sepia(0.75) saturate(1.9) hue-rotate(4deg) brightness(1.04);
}
#gate[data-hair-dye="silver"] .gate-chibi-hair-back,
#gate[data-hair-dye="silver"] .gate-chibi-hair {
  filter: saturate(0.25) brightness(1.06) contrast(1.05);
}
.gate-hair-colors {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 6px 10px; border-radius: 12px;
  background: #fff8e8; border: 1.5px solid #dfc088;
}
.gate-hair-label { font-size: 12px; font-weight: 800; color: #5c3416; }
.gate-color-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: var(--swatch, #6b4228); box-shadow: 0 2px 4px #0004, 0 0 0 1.5px #a46a32;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.gate-color-swatch.selected {
  transform: scale(1.18); box-shadow: 0 0 0 2.5px #f0a91c, 0 0 10px #ffd76a;
}
.lineage.selected { border-color: #f0a91c; box-shadow: 0 0 0 3px #ffd76a, 0 0 18px #ffcf5a; transform: translateY(-2px); }
.pedestal { width: 82%; height: 30px; margin-top: 2px; border-radius: 50%; background: radial-gradient(#e8c27a, #a46a32); display: flex; justify-content: center; }
.pedestal .egg { height: 38px; margin-top: -16px; }
.tag { margin-top: 6px; padding: 3px 8px; border-radius: 8px; background: #6b3f1f; color: var(--cream); font-weight: 800; font-size: 12px; }
.egg-name { font-size: 11px; margin-top: 3px; font-weight: 700; }
.hint-small { font-size: 11px; text-align: center; opacity: .75; margin-top: 6px; }
#login-form label { display: flex; align-items: center; gap: 8px; font-weight: 800; margin: 8px 0; }
#login-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 2px solid #d3b27a; background: #fffdf6;
  font: 700 16px var(--font); color: var(--ink); user-select: text; -webkit-user-select: text;
}
.quickfills { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; flex-wrap: wrap; }
.quickfills button { padding: 4px 10px; border-radius: 8px; border: 2px solid #c9a46a; background: #f3dfb6; font: 700 13px var(--font); color: var(--ink); }
.form-error { min-height: 18px; color: #b3261e; font-weight: 700; font-size: 13px; text-align: center; margin: 6px 0; }
.btn-gold {
  display: block; width: 100%; padding: 12px 10px 10px; border-radius: 16px; border: 3px solid #fff2c2;
  background: linear-gradient(#ffd86b, #e09f24); color: #3a2208; font: 900 18px var(--font); letter-spacing: .5px;
  box-shadow: 0 5px 0 #9a5a10, 0 8px 18px #0003; cursor: pointer;
}
.btn-gold small { display: block; font-size: 12px; font-weight: 700; }
.btn-gold:disabled { filter: grayscale(.5) brightness(.9); }
.btn-gold.small { font-size: 15px; padding: 9px; margin-top: 10px; }
.link-btn { display: block; margin: 10px auto 0; border: 0; background: none; color: #7a4a1a; text-decoration: underline; font: 700 12px var(--font); }
.steps { display: flex; gap: 6px; align-items: stretch; }
.step { flex: 1; padding: 8px 6px; border-radius: 10px; background: #f3dfb6; font-size: 12px; font-weight: 700; text-align: center; }
.step b { display: block; width: 22px; height: 22px; margin: 0 auto 4px; border-radius: 50%; background: #6b3f1f; color: #fff; line-height: 22px; }

/* ---------------- misc ---------------- */
#rotate-overlay { display: none; position: absolute; inset: 0; z-index: 50; background: #2b1c10f2; color: #fff; font: 800 20px var(--font); align-items: center; justify-content: center; text-align: center; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) { #rotate-overlay { display: flex; } }
.toast {
  position: absolute; left: 50%; top: calc(var(--safe-top, 0px) + 114px); z-index: 400; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 8px 15px; border-radius: 999px; background: linear-gradient(180deg, rgba(58, 36, 21, 0.96), rgba(34, 19, 9, 0.98)); color: #fff8e8; font-weight: 900; font-size: 12.5px;
  border: 2px solid #e5ad3b; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); transition: opacity .2s, transform .2s, top .2s; max-width: 88%; text-align: center;
}
#app:has(.bc-overlay:not([hidden]), .modal-wrap:not([hidden]), .rpg-wrap:not([hidden])) .toast,
body:has(.bc-overlay:not([hidden])) .toast {
  top: calc(var(--safe-top, 0px) + 12px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.name-tag { font: 800 26px var(--font); }

/* ================= Step 2: village actions, quick-move, grid editor, fishing, modal ================= */
#village-actions {
  position: absolute; right: 10px; bottom: calc(var(--safe-bottom) + 74px * var(--ui-scale));
  display: grid; grid-template-columns: repeat(2, auto); gap: 6px; justify-items: end; align-items: center; z-index: 14;
}
#village-actions > #bc-hud-row,
#village-actions > #act-harvest,
#village-actions > #act-heart-isle {
  grid-column: 1 / -1;
}
#village-actions .act {
  min-width: calc(102px * var(--ui-scale)); min-height: calc(38px * var(--ui-scale)); padding: 4px 10px 5px 7px;
  border-radius: 15px; font-size: calc(11px * var(--ui-scale)); gap: 6px;
}
#village-actions .act .ico {
  width: calc(22px * var(--ui-scale)); height: calc(22px * var(--ui-scale));
  font-size: calc(16px * var(--ui-scale));
}
.act {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
  min-width: calc(144px * var(--ui-scale)); min-height: calc(44px * var(--ui-scale)); padding: 5px 13px 6px 9px;
  border-radius: 18px; border: 2.5px solid #3a2415;
  background: linear-gradient(180deg, #ffe999 0%, #f6b73c 58%, #df8d18 100%);
  color: #3a2415; font: 900 calc(12.5px * var(--ui-scale)) var(--font);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 0 #b86c11, 0 4px 0 #3a2415, 0 6px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.act .ico {
  width: calc(28px * var(--ui-scale)); height: calc(28px * var(--ui-scale));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(20px * var(--ui-scale)); line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 1.5px 1px rgba(0,0,0,0.28));
}
.act .ico img { width: 100%; height: 100%; object-fit: contain; }
.act .act-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.08; text-align: left; }
.act small { font-size: .78em; font-weight: 800; color: #5c3309; opacity: .92; white-space: nowrap; }
.act:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 #3a2415; }
.act:disabled { filter: saturate(.65) brightness(.94); opacity: .86; }
.act-harvest {
  min-width: calc(154px * var(--ui-scale)); min-height: calc(48px * var(--ui-scale));
  background: linear-gradient(180deg, #ffec9e 0%, #f7b733 55%, #e08714 100%);
}
.act-harvest.ready { animation: pulse 1.2s ease-in-out infinite; }
.act-edit {
  min-width: calc(154px * var(--ui-scale));
  background: linear-gradient(180deg, #fff0b3 0%, #f4b63d 55%, #d47b14 100%);
}
.act-wonder-mood {
  min-width: calc(154px * var(--ui-scale));
  background: linear-gradient(180deg, #fff8e4 0%, #f2d59b 60%, #d6aa60 100%);
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 #9e7230, 0 4px 0 #3a2415, 0 5px 12px rgba(0,0,0,0.3);
}
.act-fish { background: linear-gradient(180deg, #9be6ff 0%, #3ca2f0 60%, #1d74c6 100%); color: #fff; text-shadow: 0 1.5px 0 #123e73; box-shadow: inset 0 2px 0 rgba(255,255,255,0.65), inset 0 -3px 0 #155699, 0 4px 0 #3a2415; }
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), 0 4px 0 #3a2415, 0 0 18px #ffd76a; } }

.speech {
  position: absolute; z-index: 15; transform: translate(-50%, -100%); padding: 6px 12px; border-radius: 14px;
  background: var(--cream); border: 2px solid #a46a32; font: 800 13px var(--font); color: var(--ink); white-space: nowrap;
  box-shadow: 0 4px 10px #0003; pointer-events: none;
}
.speech::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: #a46a32; border-bottom: 0; }

/* ---------------- Mockup 01 Inline Quick-Move Floating Bar ---------------- */
.qm-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 32; }
.qm-wrap[hidden] { display: none !important; }
.qm-bar {
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 18px;
  background: linear-gradient(180deg, #b87b3e 0%, #74431d 100%);
  border: 2.5px solid #3a2415;
  box-shadow: inset 0 1.5px 0 rgba(255, 236, 190, 0.6), 0 4px 0 #2a1508, 0 8px 18px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.qm-bar::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: #3a2415; border-bottom: 0;
}
.qm-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 5px; border-radius: 12px; border: 2px solid #3a2415;
  background: linear-gradient(180deg, #fff9ea 0%, #edd5a8 100%);
  color: #3a2415; font: 900 calc(11px * var(--ui-scale)) var(--font);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #3a2415; cursor: pointer;
}
.qm-btn img { width: calc(20px * var(--ui-scale)); height: calc(20px * var(--ui-scale)); object-fit: contain; }
.qm-btn.place { background: linear-gradient(180deg, #a6f787 0%, #44b83d 100%); color: #fff; text-shadow: 0 1px 0 #175214; }
.qm-btn.place:disabled { filter: grayscale(0.75); opacity: 0.65; }
.qm-btn.rotate { background: linear-gradient(180deg, #9ce3ff 0%, #318ae0 100%); color: #fff; text-shadow: 0 1px 0 #124073; }
.qm-btn.bag { background: linear-gradient(180deg, #ff9e8e 0%, #d94336 100%); color: #fff; text-shadow: 0 1px 0 #6b160f; }
.qm-btn.full, .qm-btn.cancel { padding: 4px 7px; font-size: calc(12px * var(--ui-scale)); }
.qm-btn:active { transform: translateY(1.5px); }

/* 3D Ground Footprint Tag ("3x3 Tiles" / "✕ Blocked") */
.ed-footprint-tag {
  position: absolute; left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 72, 34, 0.92), rgba(16, 44, 20, 0.96));
  border: 2px solid #7ef062;
  color: #eaffd8; font: 900 calc(11px * var(--ui-scale)) var(--font);
  text-shadow: 0 1.5px 0 #0e2611;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap; z-index: 26;
}
.ed-footprint-tag.bad {
  background: linear-gradient(180deg, rgba(180, 32, 24, 0.95), rgba(112, 16, 12, 0.98));
  border-color: #ff9a8b; color: #fff;
}

/* ================= Screen 02: Kingdom Grid Editor (Mockup 02) ================= */
#editor-ui { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 25; }
#editor-ui > * { pointer-events: auto; }
#hud[data-scene="VILLAGE_EDIT"] #editor-ui { display: block; }
#hud[data-scene="VILLAGE_EDIT"] #top-hud-bar,
#hud[data-scene="VILLAGE_EDIT"] #joystick,
#hud[data-scene="VILLAGE_EDIT"] #village-actions,
#hud[data-scene="VILLAGE_EDIT"] #bottom-dock,
#hud[data-scene="VILLAGE_EDIT"] #net-pill { display: none !important; }

/* Top 2-Row Editor Header Bar (Mockup 02) */
.ed-header {
  position: absolute; top: calc(var(--safe-top) + 8px); left: 8px; right: 8px;
  display: flex; align-items: stretch; justify-content: space-between; gap: 5px;
  z-index: 29;
}
.ed-title-box {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 5px 9px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(44, 28, 16, 0.92) 0%, rgba(24, 15, 9, 0.95) 100%);
  border: 2.5px solid #c9933b;
  box-shadow: inset 0 1px 0 rgba(255, 230, 168, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.ed-title-main {
  font: 900 calc(10.6px * var(--ui-scale)) var(--font); color: #fff6dc;
  text-shadow: 0 1.5px 0 #1e1005; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-title-sub {
  font: 900 calc(9.8px * var(--ui-scale)) var(--font); color: #9ef786;
  text-shadow: 0 1px 0 #12290c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-top-btns {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch; flex-shrink: 0;
}
.ed-top-row1 { display: flex; gap: 4px; }
.ed-wood-btn {
  padding: 4px 7px; border-radius: 11px; border: 2px solid #3a2415;
  background: linear-gradient(180deg, #c68746 0%, #7d4a21 100%);
  color: #fff6e3; font: 900 calc(10px * var(--ui-scale)) var(--font);
  text-shadow: 0 1.5px 0 #2a1406;
  box-shadow: inset 0 1.5px 0 rgba(255, 236, 190, 0.5), 0 2.5px 0 #2a1508;
  cursor: pointer; white-space: nowrap;
}
.ed-wood-btn.ed-x-btn { padding: 4px 7px; background: linear-gradient(180deg, #d96b52 0%, #962d1c 100%); }
.ed-wood-btn:active { transform: translateY(1.5px); }
.ed-save {
  padding: 5px 10px; border-radius: 12px; border: 2.5px solid #3a2415;
  background: linear-gradient(180deg, #88f269 0%, #37b031 58%, #22821e 100%);
  color: #fff; font: 900 calc(11.5px * var(--ui-scale)) var(--font);
  text-shadow: 0 1.5px 0 #134b10;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #174c14, 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer; white-space: nowrap;
}
.ed-save:disabled { filter: grayscale(.75); opacity: .65; }
.ed-save:active { transform: translateY(1.5px); }

.ed-status {
  position: absolute; top: calc(var(--safe-top) + 74px); left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #e03c2d, #9e1f14); border: 2px solid #3a2415;
  color: #fff; font: 900 calc(11.5px * var(--ui-scale)) var(--font);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); white-space: nowrap; z-index: 29; pointer-events: none;
}
.ed-status:empty { display: none; }

/* 3D-Anchored Speech Bubble above Selected Building (Mockup 02) */
.ed-select {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 14px 8px; border-radius: 24px;
  background: linear-gradient(180deg, #fffdf9 0%, #f5e5c4 100%);
  border: 3px solid #3a2415;
  box-shadow: inset 0 2px 0 #ffffff, 0 5px 0 #3a2415, 0 10px 22px rgba(0, 0, 0, 0.45);
  z-index: 32;
}
.ed-select[hidden] { display: none !important; }
.ed-select::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  border: 10px solid transparent; border-top-color: #3a2415; border-bottom: 0;
}
.ed-select button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: transparent; padding: 1px 3px; cursor: pointer;
  font: 900 calc(10.5px * var(--ui-scale)) var(--font); color: #3a2415;
}
.ed-select button:active { transform: translateY(2px) scale(0.95); }
.ed-select .ed-circle-img {
  width: calc(44px * var(--ui-scale)); height: calc(44px * var(--ui-scale));
  object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.32));
}
.ed-select .ed-lbl {
  color: #fff; -webkit-text-stroke: 2.2px #3a2415; paint-order: stroke fill;
  text-shadow: 0 1.5px 0 #3a2415; font-weight: 900; white-space: nowrap;
}

/* Bottom Wood & Parchment Drawer (Mockup 02) */
.ed-drawer {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 8px calc(var(--safe-bottom) + 8px);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #c68642 0%, #9b5e28 18%, #ebd2a2 19%, #e2c286 100%);
  border-top: 3.5px solid #3a2415;
  box-shadow: inset 0 2px 0 rgba(255, 236, 185, 0.65), 0 -6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.ed-drawer.collapsed .ed-items { display: none; }

/* 5 Painted Icon Folder Tabs */
.ed-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
.ed-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px 5px; border-radius: 13px; border: 2px solid #4e2b11;
  background: linear-gradient(180deg, #ebd6b0 0%, #cfb07c 100%);
  color: #3a2415; font: 900 calc(9.5px * var(--ui-scale)) var(--font);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 0 #3a2415; cursor: pointer;
  line-height: 1.05; text-align: center;
}
.ed-tabs button .ed-tab-img {
  width: calc(26px * var(--ui-scale)); height: calc(26px * var(--ui-scale));
  object-fit: contain; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,0.25));
}
.ed-tabs button b {
  display: inline-block; padding: 0 4px; border-radius: 6px;
  background: rgba(58, 36, 21, 0.14); color: #3a2415; font-size: 0.92em;
}
.ed-tabs button.active {
  background: linear-gradient(180deg, #fff09e 0%, #f5b532 100%);
  border-color: #3a2415; color: #3a2415;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.85), 0 3px 0 #3a2415;
  transform: translateY(-2px);
}
.ed-tabs button.active b { background: rgba(58, 36, 21, 0.22); color: #241205; }

/* Filter & Mode Strip (Mockup 02) */
.ed-filter-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 7px; margin-bottom: 6px; border-radius: 12px;
  background: linear-gradient(180deg, #633919 0%, #492810 100%);
  border: 2px solid #3a2415;
  color: #fff3d6; font: 800 calc(10px * var(--ui-scale)) var(--font);
}
.ed-f-pill {
  padding: 3px 8px; border-radius: 999px; border: 1.5px solid #c9933b;
  background: rgba(255, 240, 200, 0.14); color: #ffe7b3;
  font: 900 calc(10px * var(--ui-scale)) var(--font); cursor: pointer; white-space: nowrap;
}
.ed-f-pill.active {
  background: linear-gradient(180deg, #ffe588, #eba527); color: #3a2415; border-color: #3a2415;
}
.ed-f-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 4px; border-radius: 999px; border: 1.5px solid #8c5a2b;
  background: rgba(0, 0, 0, 0.28); color: #fff3d6;
  font: 800 calc(10px * var(--ui-scale)) var(--font); cursor: pointer; white-space: nowrap;
}
.ed-f-switch {
  width: 24px; height: 14px; border-radius: 999px; background: #3a2415;
  border: 1.5px solid #a47039; position: relative; display: inline-block; transition: background 0.15s;
}
.ed-f-knob {
  position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%;
  background: #d8c39e; transition: transform 0.15s;
}
.ed-f-toggle.active { border-color: #7ef062; background: rgba(62, 176, 52, 0.25); }
.ed-f-toggle.active .ed-f-switch { background: #38ab32; border-color: #b4ff9e; }
.ed-f-toggle.active .ed-f-knob { transform: translateX(10px); background: #fff; }
.ed-f-mode {
  padding: 3px 8px; border-radius: 999px; border: 1.5px solid #3a2415;
  background: linear-gradient(180deg, #ffe484, #e59c24); color: #3a2415;
  font: 900 calc(10px * var(--ui-scale)) var(--font); cursor: pointer; white-space: nowrap;
}
.ed-f-mode.paint {
  background: linear-gradient(180deg, #7ad3ff, #267de0); color: #fff;
}
.ed-f-snap {
  margin-left: auto; font-size: calc(9.5px * var(--ui-scale)); color: #d9c29c; white-space: nowrap;
}
.ed-f-snap b { color: #9ef786; }
@media (max-width: 390px) { .ed-f-snap { display: none; } }
.ed-f-collapse {
  margin-left: auto; width: 24px; height: 22px; border-radius: 8px; border: 1.5px solid #c9933b;
  background: linear-gradient(180deg, #b87b3e, #74431d); color: #fff; font: 900 12px var(--font);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Rich Item Cards Shelf (Mockup 02) */
.ed-items {
  display: flex; gap: 7px; overflow-x: auto; padding: 7px 6px;
  touch-action: pan-x; min-height: calc(158px * var(--ui-scale));
  background: linear-gradient(180deg, #f6e6c4 0%, #ead19f 100%);
  border: 2.5px solid #7d491e; border-radius: 16px;
  box-shadow: inset 0 2px 6px rgba(70, 38, 12, 0.22);
}
.ed-item {
  flex: 0 0 auto; width: calc(110px * var(--ui-scale));
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
  padding: 6px 4px 5px; border-radius: 14px; border: 2.5px solid #b58448;
  background: linear-gradient(180deg, #fffdf8 0%, #f7e6c2 100%);
  font: 800 calc(10px * var(--ui-scale)) var(--font); color: #3a2415; text-align: center;
  box-shadow: inset 0 1.5px 0 #ffffff, 0 3px 0 #7d5122, 0 4px 8px rgba(0,0,0,0.16);
  cursor: pointer; position: relative;
}
.ed-item.active {
  border-color: #d97e0e;
  background: linear-gradient(180deg, #fffdf0 0%, #ffe388 100%);
  box-shadow: 0 0 0 2.5px #ffd76a, 0 3px 0 #7a4508;
}
.ed-item.locked { opacity: 0.65; }
.ed-card-title {
  font: 900 calc(9.8px * var(--ui-scale)) var(--font); color: #3a2415;
  line-height: 1.1; height: calc(21px * var(--ui-scale));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ed-card-thumb {
  position: relative; width: 100%; height: calc(54px * var(--ui-scale));
  display: flex; align-items: center; justify-content: center;
}
.ed-item.active .ed-card-thumb::before {
  content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 218, 92, 0.75) 0%, rgba(255, 218, 92, 0) 72%);
}
.ed-card-thumb img {
  position: relative; z-index: 1; height: calc(50px * var(--ui-scale)); max-width: calc(86px * var(--ui-scale));
  object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.24));
}
.ed-card-thumb .em { font-size: calc(30px * var(--ui-scale)); line-height: 1; }
.ed-card-grid {
  padding: 1px 7px; border-radius: 999px;
  background: #4a2c14; color: #ffebb8;
  font: 900 calc(8.8px * var(--ui-scale)) var(--font); white-space: nowrap;
}
.ed-card-status {
  font: 900 calc(9px * var(--ui-scale)) var(--font); color: #5c3416; white-space: nowrap;
}
.ed-card-status.placing { color: #b85d00; }
.ed-card-status.placed { color: #1f7a24; }
.ed-card-buff {
  font: 800 calc(8.3px * var(--ui-scale)) var(--font); color: #6e4119;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ed-card-cta {
  width: 100%; padding: 3px 6px; border-radius: 9px; border: 1.5px solid #3a2415;
  background: linear-gradient(180deg, #ffe78d 0%, #f0a828 100%);
  color: #3a2415; font: 900 calc(9.5px * var(--ui-scale)) var(--font);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 1.5px 0 #3a2415;
}
.ed-card-cta.locate {
  background: linear-gradient(180deg, #9fe3ff 0%, #3b96eb 100%); color: #fff; text-shadow: 0 1px 0 #144578;
}
.ed-card-cta.paint {
  background: linear-gradient(180deg, #88f06a 0%, #32a82d 100%); color: #fff; text-shadow: 0 1px 0 #144d11;
}

/* ---------------- Fishing (Screen 04 — Mockup 04 Royal UI & Angler Exchange) ---------------- */
.fishing {
  position: absolute; left: 8px; right: 8px; bottom: calc(var(--safe-bottom, 0px) + 72px);
  width: auto; max-width: 420px; margin: 0 auto; z-index: 28;
}
.fishing.fish-m04-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fishing.fish-m04-wrap[hidden] {
  display: none !important;
}
#hud.fishing-open #village-actions,
#hud.fishing-open #joystick,
#hud:has(#fishing-panel:not([hidden])) #village-actions,
#hud:has(#fishing-panel:not([hidden])) #joystick {
  display: none !important;
}
.x-btn {
  position: absolute; top: -11px; right: -4px; width: 32px; height: 32px; border-radius: 50%;
  border: 2.5px solid #3a2415; background: linear-gradient(180deg, #ff9682, #d13b2c);
  font: 900 14px var(--font); color: #fff; cursor: pointer;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 3px 0 #3a2415; z-index: 8;
}
.x-btn.fish-m04-close {
  top: -10px; right: 4px;
}

/* Mockup 04 Top Co-Op Banner & Floating Catch Toast Stack */
.fish-m04-coop-banner {
  margin: 0; padding: 6px 10px; border-radius: 12px;
  background: linear-gradient(180deg, #fff3b8 0%, #f5be4f 100%);
  border: 2.5px solid #3a2415;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.85), 0 3px 8px rgba(0,0,0,0.32);
  font: 800 11.2px/1.25 var(--font); color: #3a2415; text-align: center;
}
.fish-m04-toast-stack {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.fish-m04-toast-pill {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 94%; padding: 4px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(240, 250, 255, 0.96), rgba(213, 236, 252, 0.95));
  border: 2px solid #3a2415;
  box-shadow: inset 0 1.5px 0 #fff, 0 3px 8px rgba(16, 40, 72, 0.32);
  font: 800 10.5px/1.2 var(--font); color: #243852;
}
.fish-m04-toast-pill[hidden] { display: none !important; }
.fish-m04-toast-pill img {
  width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.22));
}
.fish-m04-toast-pill .pill-title {
  font: 900 10.5px/1.15 var(--font); color: #7a2818; letter-spacing: 0.01em;
}
.fish-m04-toast-pill .pill-sub {
  font: 700 10px/1.15 var(--font); color: #2a3e59;
}

/* Main Ornate Gold-Filigree Parchment Card */
.fish-m04-card {
  position: relative;
  border-radius: 20px;
  border: 3px solid #3a2415;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.85), transparent 65%),
    linear-gradient(180deg, #fffbf0 0%, #f7e6c4 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 0 0 2px #d9a441,
    0 8px 20px rgba(24, 14, 6, 0.45);
  padding: 20px 10px 10px;
}
.fish-m04-title {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 16px; border-radius: 13px;
  background: linear-gradient(180deg, #8b562a 0%, #5c3518 100%);
  border: 2.5px solid #3a2415;
  box-shadow: inset 0 1.5px 0 rgba(255,225,166,0.6), 0 0 0 1.5px #e6b24c, 0 3px 6px rgba(0,0,0,0.35);
  font: 900 13px/1.1 var(--font); color: #fff8e6; text-shadow: 0 1.5px 0 #2b1608;
}

/* 3 Sub-Tabs inside the Parchment Card */
.fish-m04-tabs {
  display: grid; grid-template-columns: 1fr 1.25fr 0.9fr; gap: 5px;
  margin: 2px 0 8px;
}
.fish-m04-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 6px; border-radius: 10px;
  border: 2px solid #59381e;
  background: linear-gradient(180deg, #ebd2a9 0%, #d4b07b 100%);
  font: 800 10.8px/1.1 var(--font); color: #4a2d15; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 2px 0 #3a2415;
}
.fish-m04-tab.active {
  background: linear-gradient(180deg, #ffe999 0%, #f5b942 100%);
  color: #3a200a; border-color: #3a2415;
  box-shadow: inset 0 1.5px 0 #fff, 0 2px 0 #3a2415;
}
.fish-tab-badge {
  display: inline-block; padding: 1px 5px; border-radius: 8px;
  background: rgba(58, 36, 21, 0.16); font: 900 9.5px/1.1 var(--font); color: #3a2415;
}
.fish-tab-badge.ready {
  background: linear-gradient(180deg, #5cd65c, #248f24);
  color: #fff; text-shadow: 0 1px 0 #104910;
}

/* Mockup 04 Arched Royal Gold Tension Gauge */
.fish-m04-gauge {
  margin: 4px 2px 4px;
}
.fish-arc-shell {
  position: relative;
  padding: 8px 6px 4px;
}
.arc-cap {
  position: absolute; bottom: 8px; width: 14px; height: 14px;
  background: linear-gradient(135deg, #ffe885, #c9881e);
  border: 2px solid #3a2415; border-radius: 4px;
  transform: rotate(45deg); z-index: 3;
  box-shadow: inset 0 1px 0 #fff;
}
.arc-cap.left { left: 1px; }
.arc-cap.right { right: 1px; }

.fish-arc-track {
  position: relative;
  height: 36px;
  border-radius: 999px 999px 22px 22px / 28px 28px 14px 14px;
  background: linear-gradient(90deg, #f39537 0%, #f7c954 36%, #6e4726 75%, #472b15 100%);
  border: 3px solid #3a2415;
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.35),
    0 0 0 2px #e5ae3e,
    0 4px 10px rgba(58, 36, 21, 0.25);
  overflow: visible;
  cursor: pointer;
  user-select: none;
}
.fish-water-ripples {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.fish-gauge.is-waiting .fish-arc-track {
  background: linear-gradient(90deg, #38b6e8 0%, #72e0ff 50%, #2a95d6 100%);
}
.fish-arc-zone {
  position: absolute; top: 2px; bottom: 2px;
  background: linear-gradient(180deg, #8cf576 0%, #3dc43d 55%, #238c26 100%);
  border: 2px solid #174f18;
  border-radius: 16px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.65), 0 0 10px rgba(102, 240, 96, 0.65);
  opacity: 0.95;
  pointer-events: none;
}
.zone-arrow {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 11px; line-height: 1; color: #28b835;
  text-shadow: 0 0 2px #fff, 0 1.5px 0 #184214;
  pointer-events: none;
}
.zone-arrow.top { top: -11px; }
.zone-arrow.bot { bottom: -11px; }

.fish-arc-sprite {
  position: absolute; top: 1px; left: 48%;
  width: 34px; height: 34px;
  transform: translate(-50%, -6px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 4;
  transition: filter 0.12s ease;
}
.fish-arc-sprite img {
  width: 32px; height: 32px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}
.fish-arc-sprite.inside img {
  filter: drop-shadow(0 0 6px #fff89c) drop-shadow(0 0 10px #ffd042);
  transform: scale(1.12);
}
.fish-arc-bobber {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 20px; z-index: 5;
  animation: fishBobberFloat 0.9s ease-in-out infinite alternate;
}
@keyframes fishBobberFloat {
  from { transform: translate(-50%, -60%) rotate(-6deg); }
  to   { transform: translate(-50%, -35%) rotate(6deg); }
}

.fish-m04-reel-bar {
  height: 8px; margin: 4px 8px 0; border-radius: 6px;
  background: rgba(58, 36, 21, 0.22); border: 1.5px solid #8a5c2e; overflow: hidden;
}
.reel-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #59d959 0%, #a8f25a 55%, #ffd24c 100%);
  transition: width 0.05s linear;
}

.fish-m04-status {
  font: 800 12px/1.3 var(--font); color: #3a2415; text-align: center;
  min-height: 20px; margin: 3px 0 5px;
}

/* Catch Result Celebration Banner */
.fish-m04-result {
  margin: 4px 0 6px; padding: 0;
}
.fr-card {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 14px;
  background: linear-gradient(180deg, #fffdf5 0%, #f5e2ba 100%);
  border: 2px solid #c9912c;
  box-shadow: inset 0 1.5px 0 #fff, 0 3px 8px rgba(58,36,21,0.18);
  text-align: left;
}
.fr-card.rarity-mythic {
  background: linear-gradient(180deg, #fff7d6 0%, #f7d070 100%);
  border-color: #b5651d;
}
.fr-sprite {
  width: 46px !important; height: 46px !important; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.28));
}
.fr-copy { flex: 1; min-width: 0; }
.fr-title { font: 900 13px/1.2 var(--font); color: #3a2415; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fr-weight {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  background: rgba(58,36,21,0.1); font: 800 10px/1.2 var(--font); color: #59381e;
}
.fr-weight.crown {
  background: linear-gradient(180deg, #ffe787, #eaa024); color: #3a2008; border: 1px solid #8a520f;
}
.fr-sub { font: 800 11px/1.25 var(--font); color: #5b3b22; margin-top: 2px; }
.fr-perfect { font: 900 10.5px/1.2 var(--font); color: #c45100; margin-top: 2px; }
.fr-mile { font: 900 11px/1.2 var(--font); color: #1b63b8; margin-top: 2px; }

/* Mockup 04 Visual Haul Strip */
.fish-m04-summary {
  padding: 6px 8px; border-radius: 13px;
  background: rgba(242, 224, 190, 0.72);
  border: 1.5px solid #c9a368;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  margin-top: 2px;
}
.summary-icon-row {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.haul-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(255, 253, 246, 0.92);
  border: 1.5px solid #c9a368;
  font: 900 11.5px/1.1 var(--font); color: #3a2415;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(58, 36, 21, 0.12);
}
.haul-pill img {
  width: 17px; height: 17px; object-fit: contain;
}
.haul-pill.pity {
  background: linear-gradient(180deg, #fff5cc, #f5da82);
  border-color: #b88322;
  color: #593208;
}

/* Mockup 04 Bottom 3-Button Action Bar */
.fish-m04-bottom-bar {
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  gap: 8px;
  align-items: stretch;
}
.fish-m04-wood-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 4px; border-radius: 16px;
  border: 2.5px solid #3a2415;
  background: linear-gradient(180deg, #b87c49 0%, #875227 60%, #693c18 100%);
  box-shadow: inset 0 2px 0 rgba(255, 224, 182, 0.55), inset 0 -3px 0 #4a280e, 0 4px 0 #2b1608;
  color: #fff8ea; cursor: pointer; text-align: center;
}
.fish-m04-wood-btn:active { transform: translateY(2px); }
.fish-m04-wood-btn .wood-ico {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.fish-m04-wood-btn .wood-lbl {
  font: 900 10.5px/1.1 var(--font); color: #fff6e0;
  text-shadow: 0 1.5px 0 #2b1608;
}
.wood-mode-chip {
  padding: 1.5px 7px; border-radius: 8px;
  background: linear-gradient(180deg, #ff8da8, #d93860);
  border: 1px solid #3a2415;
  font: 900 9px/1.1 var(--font); color: #fff;
}
.wood-mode-chip.off {
  background: rgba(40, 22, 10, 0.55); color: #e8d2b5;
}
.wood-mode-chip.gold {
  background: linear-gradient(180deg, #ffe27a, #d99326); color: #3a2008;
}

.fish-m04-main-cta {
  margin: 0 !important;
  border-radius: 20px !important;
  border: 3px solid #3a2415 !important;
  background: linear-gradient(180deg, #fff099 0%, #f7be3e 55%, #d98818 100%) !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.85),
    inset 0 -4px 0 #a35c0a,
    0 5px 0 #3a2415,
    0 8px 16px rgba(0,0,0,0.35) !important;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px !important;
  color: #3a2008 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  cursor: pointer; user-select: none;
}
.fish-m04-main-cta.is-reeling-cta {
  background: linear-gradient(180deg, #a6f77e 0%, #44c949 55%, #238f29 100%) !important;
  color: #fff !important;
  text-shadow: 0 1.5px 0 #144d17 !important;
  box-shadow:
    inset 0 2.5px 0 rgba(255,255,255,0.75),
    inset 0 -4px 0 #18631c,
    0 5px 0 #3a2415,
    0 0 16px rgba(102, 245, 110, 0.65) !important;
}
.fish-m04-main-cta.held {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 2px 0 #3a2415 !important;
}
.cta-rod-ico { font-size: 20px; line-height: 1; }
.cta-main-txt { font: 900 14px/1.15 var(--font); letter-spacing: 0.02em; }

/* ---------------- Tab 2: Sunken Chest & Angler's Exchange ---------------- */
.fish-exchange-wrap {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 330px; overflow-y: auto; padding-right: 2px;
}
.fish-target-box {
  padding: 6px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #fff6df 0%, #f2dec0 100%);
  border: 2px solid #c9912c;
}
.target-box-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px;
}
.target-compass-tag {
  display: inline-block; font: 900 10.5px/1.15 var(--font); color: #59260b;
}
.fish-forge-jump-btn {
  padding: 4px 10px; border-radius: 9px;
  border: 2px solid #3a2415;
  background: linear-gradient(180deg, #7ad7ff 0%, #2d8ae6 100%);
  font: 900 10px/1.1 var(--font); color: #fff; text-shadow: 0 1px 0 #144578;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.7), 0 2px 0 #3a2415;
  cursor: pointer; white-space: nowrap;
}
.fish-gear-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
}
.fish-gear-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px; border-radius: 10px;
  background: #fffdf7; border: 2px solid #c7a675;
  cursor: pointer;
}
.fish-gear-chip.selected {
  background: linear-gradient(180deg, #fff6c9, #f7d57c);
  border-color: #3a2415;
  box-shadow: 0 0 0 1.5px #e6a825;
}
.chip-dupe-count {
  font: 900 10px/1.1 var(--font); color: #3a2415;
}

.fish-basket-bar {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  padding: 5px 8px; border-radius: 10px;
  background: linear-gradient(180deg, #52331b, #3a2311);
  border: 1.5px solid #d49d3b; color: #fff6e3;
  font: 900 10.5px/1.15 var(--font);
}
.basket-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 7px; background: rgba(255,255,255,0.12);
}
.basket-item img { width: 15px; height: 15px; object-fit: contain; }

.fish-ex-list {
  display: flex; flex-direction: column; gap: 5px;
}
.fish-ex-card {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 11px;
  background: linear-gradient(180deg, #fffdf7 0%, #f4e3c3 100%);
  border: 2px solid #b88c4f;
  box-shadow: inset 0 1px 0 #fff;
}
.fish-ex-card.rarity-mythic {
  border-color: #c9881e;
  background: linear-gradient(180deg, #fffbe8 0%, #f7e0a3 100%);
}
.ex-ico-frame {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,0.75); border: 1.5px solid #cba059;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.ex-ico-frame img { width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.ex-card-mid { flex: 1; min-width: 0; }
.ex-badge-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ex-rarity-tag {
  display: inline-block; padding: 1.5px 6px; border-radius: 6px;
  background: rgba(58,36,21,0.12); font: 900 9px/1.1 var(--font); color: #5e2c0d;
  white-space: nowrap;
}
.ex-title-inline { font: 900 11px/1.15 var(--font); color: #3a2415; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ex-cost-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1.5px 6px; border-radius: 7px;
  font: 800 9.5px/1.1 var(--font);
  background: rgba(46, 150, 59, 0.16); color: #1d6326; border: 1px solid rgba(46, 150, 59, 0.45);
}
.ex-cost-pill.short {
  background: rgba(180, 54, 42, 0.12); color: #8c2a20; border-color: rgba(180, 54, 42, 0.35);
}
.ex-cost-pill img { width: 13px; height: 13px; object-fit: contain; }
.ex-trade-btn {
  padding: 6px 10px; border-radius: 10px;
  border: 2px solid #3a2415;
  background: linear-gradient(180deg, #d6c5ad, #b09878);
  font: 900 10.5px/1.1 var(--font); color: #4a3520; cursor: not-allowed; white-space: nowrap;
}
.ex-trade-btn.can-trade {
  background: linear-gradient(180deg, #88f06a 0%, #32a82d 100%);
  color: #fff; text-shadow: 0 1px 0 #144d11;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.75), 0 2.5px 0 #3a2415;
  cursor: pointer;
}

/* ---------------- Tab 3: Illustrated Fish & Chest Log ---------------- */
.fish-codex-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.codex-species-card {
  padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7 0%, #f3e1bf 100%);
  border: 2px solid #c49a5c;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.codex-species-card.rarity-mythic {
  border-color: #c9881e; background: linear-gradient(180deg, #fff9e0 0%, #f7dc94 100%);
}
.codex-top { display: flex; align-items: center; gap: 7px; }
.codex-sprite { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28)); }
.codex-stars { font: 900 9px/1.1 var(--font); color: #a65c14; }
.codex-name { font: 900 11px/1.15 var(--font); color: #3a2415; }
.codex-caught { font: 800 9.5px/1.15 var(--font); color: #5c3b1e; margin-top: 2px; }
.codex-mile-bar {
  position: relative; height: 16px; border-radius: 8px;
  background: rgba(58, 36, 21, 0.18); border: 1px solid #8a5c2e; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.codex-mile-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #68d8ff, #3b96eb);
}
.codex-mile-txt {
  position: relative; z-index: 1; font: 900 9px/1 var(--font); color: #2b180a;
  text-shadow: 0 0 3px #fff;
}
.fish-codex { display: flex; justify-content: space-around; font: 800 13px var(--font); }

/* ---------------- Modal & Mockup 03 VIP Wonder / Building Card ---------------- */
.modal-wrap { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(20, 12, 6, 0.62); backdrop-filter: blur(3px); padding: 14px; }
.modal-wrap[hidden] { display: none !important; }
.modal {
  max-width: 374px; width: 100%;
  border: 3.5px solid #3a2415; border-radius: 22px;
  background: linear-gradient(180deg, #fff9ea 0%, #f2dec0 100%);
  box-shadow: inset 0 2px 0 #fff, 0 0 0 2px #d9a441, 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 16px 14px 14px;
}
.modal-body { font: 700 12.5px/1.42 var(--font); color: #3a2415; }
.modal-body .big { display: block; height: 108px; margin: 2px auto 6px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,0.28)); }
.modal-body .rows { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 6px; padding: 8px 10px; border-radius: 13px; background: rgba(255, 255, 255, 0.65); border: 1.5px solid #d8b77c; }
.modal-body .rows b { text-align: right; color: #5c300e; }
.modal-body .rewards { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.modal-body .rewards span { padding: 6px 10px; border-radius: 12px; background: #fff8e8; border: 2px solid #e2c48b; font-weight: 900; }
.modal-actions { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.modal-actions .btn-gold {
  flex: 1; min-width: 110px; margin-top: 0; padding: 9px 10px; border-radius: 14px;
  border: 2.5px solid #3a2415; font-size: 13.5px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.75), 0 3.5px 0 #3a2415;
}
.btn-gold.secondary, .modal-actions .btn-gold.secondary {
  background: linear-gradient(180deg, #9be3ff 0%, #3792e8 100%); color: #fff; text-shadow: 0 1.5px 0 #123e73;
}
.btn-gold.emerald, .modal-actions .btn-gold.emerald {
  background: linear-gradient(180deg, #88f269 0%, #33ab2d 100%); color: #fff; text-shadow: 0 1.5px 0 #144d11;
}

/* Mockup 03 Building Hero & Blueprint Progress Bar */
.bld-card-hero {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 15px;
  background: radial-gradient(circle at 30% 50%, #fffdf6 0%, #edd4a4 100%);
  border: 2px solid #c7964b; margin-bottom: 8px;
}
.bld-card-hero img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,0.28)); flex-shrink: 0; }
.bld-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bld-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.bld-pill {
  padding: 2px 8px; border-radius: 999px; font: 900 10.5px var(--font);
  background: #4a2c14; color: #ffebb8;
}
.bld-pill.gold { background: linear-gradient(180deg, #ffe684, #e59b22); color: #3a2415; border: 1.5px solid #3a2415; }
.bld-bp-bar {
  position: relative; height: 18px; border-radius: 999px; background: #3a2415;
  border: 2px solid #7a4b21; overflow: hidden; margin-top: 2px;
}
.bld-bp-fill {
  height: 100%; background: linear-gradient(90deg, #64d8ff, #3898f2);
}
.bld-bp-fill.ready { background: linear-gradient(90deg, #84f266, #2eb029); }
.bld-bp-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 900 10.5px var(--font); color: #fff; text-shadow: 0 1px 2px #000;
}

/* Mockup 03 VIP Wonder & Village Mood Card */
.wnd-hub-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 8px; margin-bottom: 10px;
}
.wnd-fountain-box, .wnd-buffs-box {
  padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #fffdf7, #f3dfc0);
  border: 2px solid #c6964e; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; gap: 4px;
}
.wnd-fountain-box img { height: 64px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); }
.wnd-buffs-box { align-items: stretch; text-align: left; justify-content: flex-start; gap: 5px; max-height: 224px; overflow-y: auto; }
.wnd-buff-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.72); border: 1.5px solid #dfc18d; font-size: 11px; line-height: 1.15;
}
.wnd-buff-row img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mood-strip-box {
  padding: 7px 8px; border-radius: 14px;
  background: linear-gradient(180deg, #5e3618, #3d210c);
  border: 2px solid #c9933b; color: #fff5dc;
}
.mood-strip-lbl { font: 900 11px var(--font); color: #ffdf88; margin-bottom: 5px; text-align: center; }
.mood-pills-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mood-pill-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 5px 2px; border-radius: 10px; border: 1.5px solid #8c5a2b;
  background: rgba(255, 245, 220, 0.12); color: #f5e2be;
  font: 800 9.5px var(--font); cursor: pointer; line-height: 1.05;
}
.mood-pill-btn .m-ico { font-size: 15px; }
.mood-pill-btn.active {
  background: linear-gradient(180deg, #ffe88a, #eb9f21);
  color: #3a2415; border-color: #fff; font-weight: 900;
  box-shadow: 0 2px 6px rgba(255, 205, 70, 0.5);
}

.modal-actions .btn-gold.crimson {
  background: linear-gradient(180deg, #ff8b7b 0%, #c83224 100%);
  color: #fff; text-shadow: 0 1.5px 0 #59110a;
}

/* ---------------- Top-Left Royal Passport & Account Modal ---------------- */
.acct-hero-card {
  position: relative;
  background: radial-gradient(circle at 25% 45%, #fffef8 0%, #f1dab0 100%);
  border: 2px solid #c7964b; border-radius: 16px;
  box-shadow: inset 0 1.5px 0 #fff, 0 3px 8px rgba(58, 36, 21, 0.14);
  padding: 9px 10px; margin-bottom: 8px;
}
.acct-ava-wrap {
  position: relative; width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(180deg, #fff8e7, #ecd098);
  border: 2.5px solid #e5a935;
  box-shadow: inset 0 0 0 1.5px #7c4a1d, 0 3px 6px rgba(58, 36, 21, 0.28);
  overflow: hidden;
}
.acct-ava-wrap .hud-ava-body {
  position: absolute; left: 50%; top: 3px; width: 156%; height: 156%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none;
}
.acct-ava-wrap .hud-ava-hair {
  position: absolute; left: 50%; top: -2px; width: 92%; height: 92%;
  transform: translateX(-50%); object-fit: contain; pointer-events: none; z-index: 2;
}
.acct-lv-chip {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(64, 35, 14, 0.88), rgba(38, 20, 7, 0.95));
  color: #ffe285; font: 900 10px var(--font); text-align: center; padding: 1.5px 0;
  border-top: 1px solid rgba(255, 224, 138, 0.5);
}
.acct-head-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.acct-uname {
  font: 900 15px/1.1 var(--font); color: #3a2415;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-uid-pill {
  padding: 2px 7px; border-radius: 999px;
  background: #fff8e8; border: 1.5px solid #c49245; color: #5c3416;
  font: 800 10px var(--font); cursor: pointer; flex-shrink: 0;
}
.acct-uid-pill:active { transform: translateY(1px); }

/* Gmail / Google Link Card */
.acct-gmail-card {
  padding: 9px 10px; border-radius: 15px; margin-bottom: 8px;
  background: linear-gradient(180deg, #fffdf7 0%, #f4e2c6 100%);
  border: 2px solid #c7964b;
  box-shadow: inset 0 1px 0 #fff;
}
.acct-gmail-card.is-bound {
  background: linear-gradient(180deg, #f4fff6 0%, #e1f6e6 100%);
  border-color: #49b662;
}
.acct-gmail-top {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px;
}
.acct-gmail-brand {
  display: flex; align-items: center; gap: 6px; font: 900 12px var(--font); color: #3a2415;
}
.acct-g-ico {
  width: 22px; height: 22px; border-radius: 7px; background: #fff;
  border: 1.5px solid #d5b47c; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); flex-shrink: 0;
}
.acct-status-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px; font: 900 10px var(--font);
}
.acct-status-pill.unbound {
  background: linear-gradient(180deg, #fff1d0, #f7cf78);
  border: 1.5px solid #b87314; color: #4a2806;
}
.acct-status-pill.bound {
  background: linear-gradient(180deg, #88f269, #2fa829);
  border: 1.5px solid #185c15; color: #fff; text-shadow: 0 1px 0 #144d11;
}
.acct-email-row {
  display: flex; align-items: center; gap: 6px;
}
.acct-input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 11px;
  border: 2px solid #b5833d; background: #fffdf9; color: #3a2415;
  font: 800 12px var(--font); outline: none;
}
.acct-input:focus { border-color: #3792e8; box-shadow: 0 0 0 2px rgba(55, 146, 232, 0.22); }
.acct-bind-btn {
  width: auto !important; flex: 0 0 auto; margin-top: 0 !important;
  padding: 7px 11px !important; font-size: 11.5px !important; border-radius: 11px !important;
  white-space: nowrap;
}
.acct-bound-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.78);
  border: 1.5px solid #8bd49b;
}
.acct-bound-email {
  font: 900 12px/1.2 var(--font); color: #194d24; word-break: break-all;
}
.acct-bound-sub {
  font: 700 10px/1.2 var(--font); color: #387344;
}
.acct-mini-btn {
  padding: 4px 8px; border-radius: 8px; border: 1.5px solid #8a5a2b;
  background: #fff8e8; color: #4a2c14; font: 800 10.5px var(--font); cursor: pointer; flex-shrink: 0;
}

/* 2x2 Quick Kingdom Settings Grid */
.acct-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px;
}
.acct-set-tile {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 12px;
  background: linear-gradient(180deg, #5e3618, #3d210c);
  border: 2px solid #c9933b; color: #fff5dc; text-align: left; cursor: pointer;
  font: 800 11px/1.15 var(--font); transition: transform .1s, filter .12s;
}
.acct-set-tile:active { transform: translateY(1px); }
.acct-set-tile.on {
  border-color: #ffe082;
  box-shadow: inset 0 1px 0 rgba(255, 240, 190, 0.35);
}
.acct-set-ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 240, 200, 0.14); border: 1px solid rgba(255, 224, 138, 0.35);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.acct-set-meta { display: flex; flex-direction: column; min-width: 0; }
.acct-set-lbl { font-size: 10px; color: #f3d299; font-weight: 800; }
.acct-set-val { font-size: 11px; color: #fff; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inline Password Drawer */
.acct-pw-drawer {
  padding: 8px 9px; border-radius: 12px; margin-bottom: 6px;
  background: rgba(255, 250, 238, 0.9); border: 1.5px solid #c7964b;
}
.acct-pw-drawer[hidden] { display: none !important; }
.acct-pw-grid {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; align-items: center; margin-top: 4px;
}