* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #0c0f14; color: #e8e8e8;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* dvh tracks iOS Safari's dynamic toolbar so nothing hides under it */
#game { position: relative; width: 100vw; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center; }
/* the playfield scales to the viewport (16:11) — fill the window height,
   leaving a sliver for the HUD row. The bitmap resolution is chosen in
   renderer._resize from this CSS size. */
#screen { display: block; image-rendering: pixelated; background: #000;
  width: min(100vw, calc((100dvh - 110px) * (256 / 176)));
  aspect-ratio: 256 / 176; height: auto; }
/* touch devices (the app, phones/tablets): no reserved chrome, no size cap —
   the playfield takes the full screen height and the controls float over it */
body.touch #screen {
  width: min(100vw, calc(100dvh * (256 / 176)));
}
.hidden { display: none !important; }

/* Join screen — Brynhildr herself stands behind the panel */
#join { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(8, 10, 14, .42), rgba(8, 10, 14, .72)),
    url("/client/assets/brynhildr.png") center / cover no-repeat,
    #0c0f14;
  image-rendering: pixelated; }
/* wide screens: panel to the left, the valkyrie fully visible on the right */
@media (min-width: 920px) {
  #join { justify-content: flex-start; padding-left: 6vw;
    background-position: center, right -2vw center, center; }
}
.panel { background: rgba(16, 21, 30, .90); border: 2px solid #2a3542; border-radius: 12px; padding: 26px 30px;
  width: min(94vw, 420px); text-align: center; box-shadow: 0 14px 46px rgba(0,0,0,.65);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.panel .kicker { color: #9fb3c8; font-size: 13px; letter-spacing: 6px;
  text-transform: uppercase; font-family: monospace; margin-bottom: 2px; }
.panel h1 { margin: 0 0 6px; font-size: 40px; letter-spacing: 4px; color: #ffd54f; text-shadow: 0 2px 0 #a9760a; font-family: monospace; }
.tag { color: #9fb3c8; margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; }
#name { width: 100%; padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #2a3542; background: #0a0d12; color: #fff; margin-bottom: 12px; }
.customize { display: flex; gap: 14px; align-items: center; margin-bottom: 12px;
  background: #0a0d12; border: 1px solid #2a3542; border-radius: 8px; padding: 10px 12px; }
#preview { width: 64px; height: 64px; image-rendering: pixelated; flex: none;
  background: #1a2410; border-radius: 6px; }
.pickers { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pickrow { display: flex; align-items: center; gap: 8px; }
.picklabel { font-size: 11px; color: #9fb3c8; width: 30px; text-align: left; flex: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; flex: none; }
.sw.sel { border-color: #ffd54f; box-shadow: 0 0 0 1px #0a0d12 inset; }
#joinBtn { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; background: #ffd54f; color: #1a1a1a; cursor: pointer; }
#joinBtn:hover { filter: brightness(1.08); }
#joinBtn:disabled { opacity: .5; cursor: default; }
.controls { margin-top: 20px; text-align: left; font-size: 12.5px; color: #9fb3c8; line-height: 2; }
.controls strong { color: #cbd5e0; display: inline-block; width: 58px; }
kbd { background: #2a3542; border-radius: 4px; padding: 1px 6px; margin: 0 1px; font-family: monospace; color: #fff; font-size: 11px; }
.status { min-height: 18px; font-size: 13px; color: #ff8a80; margin: 12px 0 0; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px;
  padding: 8px 14px;
  /* the native app is edge-to-edge: keep the stats out of the status bar /
     Dynamic Island (env() is 0 in ordinary browsers) */
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  background: linear-gradient(#0c0f14ee, #0c0f1400); font-size: 13px; }
#hearts { display: flex; gap: 3px; }
.heart { width: 18px; height: 18px; display: inline-block;
  background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
#rupees { color: #66bb6a; font-weight: 600; font-family: monospace; }
#right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: #7f8ea0; font-family: monospace; }
#pvpTag { color: #66bb6a; font-weight: 700; letter-spacing: 1px; }
#muteBtn { pointer-events: auto; background: none; border: 1px solid #2a3542;
  border-radius: 6px; padding: 2px 8px; font-size: 14px; cursor: pointer;
  color: #e8e8e8; line-height: 1.4; }
#muteBtn:hover { border-color: #ffd54f; }
#coords { color: #9fb3c8; }
#toast { position: absolute; top: calc(44px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  background: rgba(10,13,18,.9); border: 1px solid #2a3542; border-radius: 8px; padding: 8px 16px;
  font-size: 14px; color: #ffd54f; white-space: nowrap; }
#party { position: absolute; top: calc(44px + env(safe-area-inset-top)); left: 14px; background: rgba(10,13,18,.85);
  border: 1px solid #2a3542; border-radius: 8px; padding: 6px 10px; font-size: 12px;
  font-family: monospace; min-width: 110px; }
#party h4 { margin: 0 0 4px; font-size: 10px; color: #9fb3c8; text-transform: uppercase;
  letter-spacing: 1px; }
#party .pmember { color: #e8e8e8; line-height: 1.6; }
#equip { display: flex; gap: 10px; align-items: center; font-size: 13px;
  font-family: monospace; color: #cbd5e0; }
#equip .slot { display: flex; align-items: center; gap: 3px; }
#equip .tier { color: #ffd54f; }
#equip .xpp { color: #7f8ea0; font-size: 10px; margin-left: 2px; }
/* Shop interior — a solo room off the map, centered and scrollable */
#shopRoom { position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 20%, #241a10, #0c0805 75%);
  padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.shopCard { display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(560px, 100%); max-height: 100%;
  background: #14100a; border: 2px solid #4a3820; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.shopKeeper { font-size: 40px; line-height: 1; }
.shopCard h3 { margin: 0; font-size: 15px; color: #ffd54f; text-align: center; }
#shopItems { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
@media (max-width: 560px) { #shopItems { grid-template-columns: 1fr; } }
.shopFooter { display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 12px; }
#shopRupees { color: #66bb6a; font-weight: 700; font-family: monospace; font-size: 16px; }
#leaveShop { padding: 10px 18px; font-size: 14px; font-weight: 600; border: none;
  border-radius: 8px; background: #ffd54f; color: #1a1a1a; cursor: pointer; }
#leaveShop:hover { filter: brightness(1.08); }
.shopItem { display: flex; align-items: center; gap: 8px; background: #12171f;
  border: 1px solid #2a3542; border-radius: 8px; padding: 6px 10px; cursor: pointer;
  color: #e8e8e8; font-size: 12px; text-align: left; }
.shopItem:hover:not(:disabled) { border-color: #ffd54f; }
.shopItem:disabled { opacity: .45; cursor: default; }
.shopItem .price { margin-left: auto; color: #66bb6a; font-family: monospace; flex: none; }
.shopItem .iname { font-weight: 600; }
.shopItem .idesc { color: #9fb3c8; font-size: 10.5px; }

/* Touch controls */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stick { position: absolute; left: calc(22px + env(safe-area-inset-left));
  bottom: calc(22px + env(safe-area-inset-bottom)); width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.14); pointer-events: auto; touch-action: none; }
#nub { position: absolute; left: 33px; top: 33px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.25); }
/* two rows: small utility buttons above, big action buttons under the thumb */
#btns { position: absolute; right: calc(18px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.btnrow { display: flex; gap: 12px; align-items: flex-end; }
.btnrow button { width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff; font-size: 28px; pointer-events: auto; touch-action: none; padding: 0; }
.btnrow.utility button { width: 46px; height: 46px; font-size: 19px; opacity: .85; }
#attackBtn { background: rgba(255,213,79,.25); }
#flameBtn { width: 58px; height: 58px; font-size: 23px; background: rgba(255,112,67,.25); }

/* narrow phones (portrait): shrink everything so nothing leaves the screen */
@media (max-width: 480px) {
  #btns { gap: 8px; right: calc(10px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom)); }
  .btnrow { gap: 8px; }
  .btnrow button { width: 56px; height: 56px; font-size: 22px; }
  .btnrow.utility button { width: 38px; height: 38px; font-size: 15px; }
  #flameBtn { width: 48px; height: 48px; font-size: 19px; }
  #stick { width: 96px; height: 96px; left: calc(12px + env(safe-area-inset-left));
    bottom: calc(14px + env(safe-area-inset-bottom)); }
  #nub { left: 26px; top: 26px; width: 44px; height: 44px; }
  #topbar { gap: 8px; padding: 6px 8px; font-size: 11px; flex-wrap: wrap; }
  #equip { gap: 6px; font-size: 11px; }
}

/* with touch controls up, the chat log sits above the joystick, not under it */
body.touch #chat { bottom: calc(140px + env(safe-area-inset-bottom));
  max-width: min(56%, 320px); }
@media (max-width: 480px) {
  body.touch #chat { bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* --- the explorer's map ---------------------------------------------------- */
#mapPane { position: absolute; inset: 0; z-index: 18;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 10, 0.82); padding: 12px; }
.mapCard { display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #10141c; border: 2px solid #2a3542; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.mapCard h3 { margin: 0; font-size: 15px; color: #ffd54f; }
#mapCanvas { image-rendering: pixelated; width: min(72vmin, 548px); height: auto;
  border: 1px solid #2a3542; border-radius: 4px; background: #000; }
.mapHint { margin: 0; font-size: 11px; color: #8a94a4; }
.mapHint .mk.you { color: #ffd54f; }
.mapHint .mk.rune { color: #64e8f8; }

/* --- global chat ------------------------------------------------------------ */
#chat { position: absolute; left: 10px; bottom: 10px; z-index: 14;
  display: flex; flex-direction: column; gap: 6px; max-width: min(64%, 420px);
  pointer-events: none; }
#chatLog { display: flex; flex-direction: column; gap: 2px; }
.cmsg { font-size: 12px; line-height: 1.35; color: #e8e8e8;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
  overflow-wrap: anywhere; }
.cmsg b { color: #8ec9ff; font-weight: 700; }
.cmsg.self b { color: #ffd54f; }
#chatInput { pointer-events: auto; width: 100%;
  background: rgba(10,14,20,.9); color: #e8e8e8; font: inherit; font-size: 13px;
  border: 1px solid #2a3542; border-radius: 8px; padding: 8px 10px; outline: none; }
#chatInput:focus { border-color: #8ec9ff; }