/* BARROW & BLADE — polished-fantasy shell: parchment, leather, gold.
   Same layout geometry as ever; the dress is new (THE REWRITE, Chunk 1). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: #171208; overflow: hidden;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; color: #f0e6cf;
  touch-action: none; overscroll-behavior: none; }
.hidden { display: none !important; }

/* iOS selection hardening (Dan's fix): control faces are images now, and
   NO text anywhere in the game view may be selected or callout-copied. */
#view-game, #view-game * { -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent; }
/* image faces for buttons */
button .ic { display: block; width: 62%; height: 62%; pointer-events: none; }
#btn-cluster button, #btn-pack, #btn-map { display: flex; align-items: center; justify-content: center; }
.dim { color: #b9ac8d; font-size: 0.92em; }
button { font-family: inherit; cursor: pointer; }

/* ---------- shared parchment card ---------- */
.parchment, .load-card, .key-card { background:
    radial-gradient(140% 110% at 50% 0%, #f2e3b3 0%, #e8d49c 55%, #d9bf83 100%);
  color: #3a2c14; border: 2px solid #8a6f3c; border-radius: 16px;
  box-shadow: 0 12px 38px rgba(0,0,0,0.65), inset 0 0 0 5px #e8d49c, inset 0 0 0 7px rgba(138,111,60,0.55); }

/* ---------- key gate ---------- */
#view-key { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #3a2c14 0%, #171208 72%); padding: 20px; }
.key-card { max-width: 340px; text-align: center; padding: 24px 22px 20px; }
.key-art { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.key-card h1 { margin: 6px 0 10px; font-size: 30px; letter-spacing: 1.5px; color: #4c3a17; }
.key-card input { width: 100%; padding: 13px; font-size: 17px; border-radius: 10px; border: 2px solid #8a6f3c;
  background: #fbf3d9; color: #3a2c14; text-align: center; margin: 14px 0 10px; }
.bigbtn { display: block; width: 100%; padding: 13px 16px; margin: 8px 0; font-size: 17px; font-weight: bold;
  border-radius: 12px; border: 2px solid #c9a227; background: linear-gradient(#6d4f22, #4c3512); color: #ffe9b0;
  box-shadow: 0 2px 8px rgba(40,26,4,0.45), inset 0 1px 0 rgba(255,233,176,0.35); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.bigbtn.ghost { background: linear-gradient(#54432a, #3d2f1a); border-color: #8a6f3c; color: #e6d3a3; }
.bigbtn.danger { background: linear-gradient(#8a3b26, #652718); border-color: #d89a5a; color: #ffdcc8; }
.bigbtn:disabled { opacity: 0.45; }

/* ---------- boot loading ---------- */
#view-loading { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #3a2c14 0%, #171208 72%); padding: 20px;
  transition: opacity 0.45s ease; }
#view-loading.fading { opacity: 0; pointer-events: none; }
.load-card { width: 100%; max-width: 330px; text-align: center; padding: 22px 20px 18px; }
.load-card h1 { margin: 6px 0 4px; font-size: 27px; letter-spacing: 1.5px; color: #4c3a17; }
#load-stage { font-size: 14px; font-style: italic; color: #6b5836; min-height: 19px; }
#load-bar { height: 14px; margin: 14px 0 5px; border-radius: 8px; background: #c9b586;
  border: 1.5px solid #8a6f3c; overflow: hidden; }
#load-fill { height: 100%; width: 0%; background: linear-gradient(#c9973a, #8a6f3c); transition: width 0.25s ease; }
#load-pct { font-size: 12.5px; font-weight: bold; color: #6b5836; }
#load-tip { margin: 12px 2px 4px; font-size: 14.5px; line-height: 1.45; color: #4c3f24; min-height: 42px; }
.load-card .bigbtn { margin-top: 10px; }
#load-start { margin-top: 12px; }
#load-start .bigbtn { font-size: 18px; padding: 14px 16px; }

/* ---------- game frame ---------- */
#view-game { position: fixed; inset: 0; }
#arena-wrap { position: absolute; inset: 0; overflow: hidden; background: #2b3a24; }
#arena-holder { position: absolute; inset: 0; }
#arena-holder canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* NPC name labels + float text (engine-created) */
.npc-label { position: absolute; left: 0; top: 0; padding: 1px 8px; border-radius: 8px; pointer-events: none;
  background: rgba(23, 18, 8, 0.72); border: 1px solid rgba(201,162,39,0.5); color: #ffe9b0; font-size: 12.5px; font-weight: bold; white-space: nowrap; z-index: 5; }
.npc-label.ally { color: #a8e6a1; }
.float-text { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 17px; pointer-events: none;
  text-shadow: 0 2px 3px rgba(0,0,0,0.8); z-index: 6; white-space: nowrap; }
.float-text.dmg { color: #ffe9c0; }
.float-text.crit { color: #ffd25a; font-size: 22px; }
.float-text.heal { color: #86ff9a; }
.float-text.hurt { color: #ff8a7a; }

/* ---------- top HUD ---------- */
#topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between;
  align-items: flex-start; padding: calc(6px + env(safe-area-inset-top)) 10px 4px; pointer-events: none;
  background: linear-gradient(rgba(23,18,8,0.62), transparent); }
.tb-left { display: flex; align-items: center; gap: 8px; }
#hud-level { font-weight: bold; color: #ffd98a; font-size: 16px; text-shadow: 0 1px 3px #000; }
.bars { width: 118px; display: flex; flex-direction: column; gap: 2px; }
.bar { position: relative; height: 13px; border-radius: 6px; background: rgba(10,8,4,0.62); border: 1px solid rgba(201,162,39,0.65); overflow: hidden; }
.bar > div { height: 100%; transition: width 0.18s; }
.bar.hp > div { background: linear-gradient(#e05252, #a52a2a); }
.bar.mana { height: 10px; }
.bar.mana > div { background: linear-gradient(#5aa8e8, #2a5aa5); }
.bar.xp { height: 4px; border: none; background: rgba(0,0,0,0.4); }
.bar.xp > div { background: #ffd25a; width: 0%; }
.bar span { position: absolute; inset: 0; font-size: 9.5px; line-height: 13px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; font-family: monospace; }
.bar.mana span { line-height: 10px; }
#hud-gold { font-weight: bold; color: #ffe9b0; text-shadow: 0 1px 3px #000; font-size: 15px; }
.tb-right { display: flex; gap: 6px; pointer-events: auto; align-items: center; }
#btn-pack { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(201,162,39,0.75);
  background: rgba(23,18,8,0.78); font-size: 19px; }
#btn-map { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(201,162,39,0.75);
  background: rgba(23,18,8,0.78); }
#btn-map.map-off { opacity: 0.35; }
#hud-quest-name { position: absolute; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 9;
  text-align: center; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,233,176,0.8); text-shadow: 0 1px 3px #000; pointer-events: none; }
#hud-objective { position: absolute; top: calc(72px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 9;
  text-align: center; font-size: 14.5px; font-weight: bold; color: #ffeec2; text-shadow: 0 1px 4px #000; pointer-events: none; }
#hud-objective.tappable { pointer-events: auto; cursor: pointer; }
#hud-obj-sub { position: absolute; top: calc(94px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 9;
  text-align: center; font-size: 11.5px; color: #ffd98a; text-shadow: 0 1px 3px #000; pointer-events: none; }

/* compass */
#obj-compass { position: absolute; top: calc(104px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 9; text-align: center; pointer-events: none; }
#obj-arrow { font-size: 21px; color: #ffc95e; text-shadow: 0 0 7px rgba(255,180,60,0.8), 0 1px 3px #000; display: inline-block; }
#obj-dist { font-size: 11.5px; color: #ffeec2; text-shadow: 0 1px 3px #000; font-weight: bold; }
#obj-edge { position: absolute; z-index: 9; pointer-events: none; width: 30px; height: 30px; }
#obj-edge-arrow { font-size: 24px; color: #ffc95e; text-shadow: 0 0 8px rgba(255,180,60,0.9), 0 1px 3px #000; }
#hit-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 8; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(200,30,20,0.55) 100%); }

#ctx-prompt { position: absolute; left: 50%; bottom: 238px; transform: translateX(-50%); z-index: 11;
  padding: 7px 16px; border-radius: 999px; background: rgba(23, 18, 8, 0.92); border: 2px solid #ffd25a;
  color: #ffeec2; font-weight: bold; font-size: 16px; pointer-events: none; box-shadow: 0 3px 14px rgba(0,0,0,0.5); }
#toast { position: absolute; left: 50%; bottom: 292px; transform: translateX(-50%); z-index: 30; max-width: 86%;
  padding: 9px 15px; border-radius: 12px; background: rgba(23, 18, 8, 0.94); border: 1.5px solid #c9a227;
  color: #ffeec2; font-size: 14.5px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.55); pointer-events: none; }

/* ---------- controls ---------- */
/* Walk stick (Dan's placement): the two sticks sit ADJACENT in the
   bottom band, FLUSH AGAINST THE RIGHT SIDE — the camera stick's
   right edge uses the same 14px margin as the action-button cluster
   stacked above it, and the walk stick sits immediately to its left,
   edges nearly touching (6px gap). The walk zone hugs its stick: wide
   enough for the floating origin to plant under the thumb around the
   resting spot (144px), no longer spanning the whole bottom band.
   Geometry (any width W): camera centre = W - 78, walk centre =
   W - 212 (64px radii + the 6px gap between the rings); the walk
   zone (144 wide) is centred on its stick, so its right edge sits
   140px from the screen's right edge. */
#joy { position: absolute; right: 140px; bottom: calc(0px + env(safe-area-inset-bottom));
  width: 144px; height: 176px; z-index: 12; touch-action: none; }
#joy-base { position: absolute; width: 128px; height: 128px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: rgba(23, 18, 8, 0.30); border: 2px solid rgba(255, 233, 176, 0.22); }
#joy-base.live { background: rgba(23, 18, 8, 0.45); border-color: rgba(255, 233, 176, 0.42); }
#joy-knob { position: absolute; width: 56px; height: 56px; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #7d6440, #4c3512);
  border: 2px solid rgba(255, 233, 176, 0.55); box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; pointer-events: none; }
#joy-knob .ic { width: 27px; height: 27px; }
/* Camera stick: fixed base, bottom band, flush against the right
   side (14px margin, aligned under the action-button cluster) —
   orbits the view (yaw+pitch), replacing drag-look. */
#camjoy { position: absolute; right: 14px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 128px; height: 128px;
  border-radius: 50%; background: rgba(23, 18, 8, 0.42); border: 2px solid rgba(255, 233, 176, 0.35); z-index: 12; touch-action: none; }
#camjoy-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #54606e, #2c3844);
  border: 2px solid rgba(255, 233, 176, 0.55); box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; pointer-events: none; }
#camjoy-knob .ic { width: 27px; height: 27px; }
/* The cluster's box is mostly empty air: touches land on its BUTTONS,
   never on the box, so the walk zone beneath keeps the gaps. */
#btn-cluster { position: absolute; right: 14px; bottom: calc(168px + env(safe-area-inset-bottom)); z-index: 12;
  width: 168px; height: 168px; pointer-events: none; }
#btn-cluster button { pointer-events: auto; }
#btn-cluster button { position: absolute; border-radius: 50%; border: 2px solid rgba(255,233,176,0.5);
  background: rgba(23, 18, 8, 0.78); color: #ffeec2; font-weight: bold; box-shadow: 0 3px 10px rgba(0,0,0,0.45); }
#btn-attack { right: 0; bottom: 0; width: 84px; height: 84px; background: rgba(94, 52, 20, 0.88); }
#btn-attack.ctx { background: rgba(38, 84, 34, 0.92); border-color: #ffd25a; }
#btn-attack.charging { background: rgba(146, 104, 30, 0.92); border-color: #ffd25a;
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.9), 0 3px 10px rgba(0,0,0,0.45); }
#btn-attack .ic-ctx { display: none; }
#btn-attack.ctx .ic-sword { display: none; }
#btn-attack.ctx .ic-ctx { display: block; }
#btn-guard { right: 92px; bottom: 6px; width: 62px; height: 62px; font-size: 25px; overflow: hidden; }
#btn-guard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--cd, 0%);
  background: rgba(0,0,0,0.55); pointer-events: none; }
#btn-guard.guarding { border-color: #9fd8ff; box-shadow: 0 0 18px rgba(120, 200, 255, 0.9); background: rgba(30, 70, 110, 0.85); }
#btn-spell { right: 78px; bottom: 78px; width: 56px; height: 56px; font-size: 23px; }
#btn-potion { right: 6px; bottom: 94px; width: 54px; height: 54px; }
#potion-count { position: absolute; right: 0; bottom: 138px; z-index: 2; min-width: 23px; height: 23px;
  padding: 0 5px; border-radius: 999px; background: #6d1f1f; border: 2px solid rgba(255,233,176,0.75);
  color: #ffe9b0; font-size: 12.5px; font-weight: bold; display: flex; align-items: center; justify-content: center;
  pointer-events: none; box-shadow: 0 2px 7px rgba(0,0,0,0.5); }
#spell-strip { position: absolute; right: 12px; bottom: calc(346px + env(safe-area-inset-bottom)); z-index: 13;
  display: flex; flex-direction: column; gap: 8px; }
.spell-btn { position: relative; overflow: hidden; width: 128px; height: 46px; padding: 0; border-radius: 12px;
  border: 2px solid rgba(150, 190, 255, 0.6); background: rgba(16, 26, 44, 0.88); color: #dceeff;
  display: flex; align-items: center; justify-content: center; }
.spell-btn .ic { width: 31px; height: 31px; }
.spell-btn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: rgba(0,0,0,0.55); pointer-events: none; }

/* ---------- dialogue: parchment with a leather name plate ---------- */
#dialogue { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
  background: radial-gradient(140% 120% at 50% 0%, #f2e3b3 0%, #e8d49c 60%, #dcc488 100%);
  color: #3a2c14; border: 2px solid #8a6f3c; border-radius: 14px; padding: 12px 15px 9px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6), inset 0 0 0 4px rgba(232,212,156,0.9), inset 0 0 0 5.5px rgba(138,111,60,0.5); cursor: pointer; }
#dlg-who { display: inline-block; color: #ffe9b0; background: linear-gradient(#6d4f22, #4c3512);
  border: 1.5px solid #c9a227; border-radius: 8px; padding: 2px 10px; font-weight: bold; font-size: 14.5px; margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
#dlg-text { font-size: 16.5px; line-height: 1.42; min-height: 46px; }
#dlg-next { text-align: right; color: #6d5a35; font-size: 12.5px; margin-top: 2px; }

/* ---------- panels: parchment, ink text ---------- */
#fade { position: absolute; inset: 0; z-index: 60; background: #000; opacity: 0; pointer-events: none;
  transition: opacity 0.9s ease; display: flex; align-items: center; justify-content: center; }
#fade.on { opacity: 1; pointer-events: auto; }
#fade-title { color: #e8d9ae; font-size: 30px; font-weight: bold; letter-spacing: 6px; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9); padding: 0 24px; }
#panel { position: absolute; inset: 0; z-index: 50; background: rgba(10, 7, 2, 0.66); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
#panel-body { position: relative; width: 100%; max-width: 430px; max-height: 86%; overflow-y: auto;
  background: radial-gradient(140% 110% at 50% 0%, #f2e3b3 0%, #e8d49c 55%, #d9bf83 100%);
  color: #3a2c14; border: 2px solid #8a6f3c; border-radius: 16px; padding: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.7), inset 0 0 0 5px rgba(232,212,156,0.9), inset 0 0 0 7px rgba(138,111,60,0.5); }
#panel-body .dim { color: #6d5a35; }
#panel-body .bigbtn { box-shadow: 0 2px 8px rgba(40,26,4,0.4), inset 0 1px 0 rgba(255,233,176,0.35); }
.panel-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #c9a227; background: linear-gradient(#6d4f22, #4c3512); color: #ffe9b0; font-size: 25px; font-weight: bold;
  line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer; }
#panel-body h2 { margin: 2px 0 8px; color: #4c3a17; font-size: 22px; letter-spacing: 0.5px; }
#panel-body h3 { margin: 14px 0 4px; color: #4c3a17; font-size: 16.5px; }
.offer { border: 1.5px solid #a5874e; border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: rgba(122, 90, 40, 0.08); }
.offer p { margin: 5px 0; }
.shoprow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(90, 66, 28, 0.25); }
.shoprow select { font-family: inherit; font-size: 14.5px; padding: 7px 8px; margin-top: 5px; border-radius: 9px;
  border: 1.5px solid #8a6f3c; background: #fbf3d9; color: #3a2c14; max-width: 250px; }
.shopinfo { flex: 1; }
.buybtn { padding: 9px 13px; border-radius: 10px; border: 2px solid #c9a227; background: linear-gradient(#6d4f22, #4c3512); color: #ffe9b0; font-weight: bold; font-size: 15px;
  box-shadow: 0 2px 6px rgba(40,26,4,0.35); text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.buybtn:disabled { opacity: 0.4; }
.boon { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 13px; margin: 8px 0;
  border-radius: 13px; border: 2px solid #8a6f3c; background: linear-gradient(#e8d49c, #d9bf83); color: #3a2c14; font-size: 16px;
  box-shadow: 0 2px 8px rgba(40,26,4,0.3); }
.boon .dim { color: #6d5a35; }
.boon-ic { font-size: 29px; }

/* ---------- the map of the vale ---------- */
#map-wrap { position: relative; border: 2px solid #8a6f3c; border-radius: 10px; overflow: hidden;
  background: #e3d0a0; margin: 4px 0 2px; }
#map-canvas { display: block; width: 100%; height: auto; touch-action: none; }
.map-hint { margin: 8px 2px 2px; }
.maprow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px;
  margin: 7px 0; border-radius: 12px; border: 2px solid #a5874e; background: rgba(122, 90, 40, 0.07);
  color: #3a2c14; font-size: 15px; font-family: inherit; }
.maprow .mr-ic { font-size: 20px; }
.maprow .mr-main { flex: 1; }
.maprow .mr-sub { display: block; color: #6d5a35; font-size: 12.5px; margin-top: 2px; }
.maprow.tracked { border-color: #b8862f; background: rgba(255,210,90,0.18); }
.maprow .mr-tag { font-size: 10.5px; font-weight: bold; color: #8a6f3c; letter-spacing: 1px; white-space: nowrap; }
.maprow .mr-x { padding: 7px 11px; border-radius: 8px; background: linear-gradient(#6d4f22, #4c3512); border: 1.5px solid #c9a227;
  color: #ffe9b0; font-weight: bold; font-size: 14px; }