/* Hollowmere's screens: Mystera Legacy's layout in Wayfarers' look (theme.css tokens). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #15394a; font-family: var(--wm-font); color: var(--wm-ink); }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#overlay, #hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
button { font: inherit; color: inherit; cursor: pointer; }

/* names and numbers over the world */
.nametag, .float { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 4px #0008; }
.nametag { font-size: 13px; color: #fff; }
.nametag.target { color: #ffd447; font-size: 12px; }
.float { font-size: 15px; color: #fff; }
.float.gain { color: var(--wm-good); font-size: 13px; }
.float.dmg { color: #ffe0a0; }
.float.dmg.crit { color: #ff9a3a; font-size: 20px; }
.float.miss, .float.dmg.miss { color: #cfe0e6; font-size: 12px; }
.float.hurt { color: var(--wm-bad); }
.float.myst { color: #7fd6ff; font-size: 13px; }

/* the bars, top left (Mystera: Health, Food, Experience) */
.bars { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none !important; }
.bar { position: relative; width: 150px; height: 22px; border-radius: var(--wm-pill); background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); overflow: hidden; box-shadow: var(--wm-shadow-sm); }
.bar i { position: absolute; inset: 0 auto 0 0; transition: width 0.2s; }
.bar.hp i { background: linear-gradient(90deg, #3f8f3a, #7fcf5a); }
.bar.food i { background: linear-gradient(90deg, #b8402e, #f07a4a); }
.bar.xp i { background: linear-gradient(90deg, #2b5fa3, #4fb0d6); }
.bar .lbl, .bar b { position: absolute; top: 0; line-height: 22px; font-size: 11.5px; font-weight: 800; text-shadow: 0 1px 2px #000a; }
.bar .lbl { left: 10px; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar b { right: 10px; }

/* top right: myst, Character, Menu */
.topright { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 6px; align-items: center; }
.btn { background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); padding: 8px 14px; font-weight: 800; font-size: 13.5px; box-shadow: var(--wm-btn-lift), var(--wm-shadow-sm); }
.btn:hover { background: var(--wm-panel); border-color: var(--wm-edge-hi); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn.go { background: var(--wm-leaf-dark); border-color: #7fcf5a88; }
.btn.danger { color: var(--wm-bad-ink); }
.btn.on { background: var(--wm-gold-soft); border-color: var(--wm-gold-edge); color: var(--wm-gold); }
.myst { display: flex; align-items: center; gap: 5px; background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); border-radius: var(--wm-pill); padding: 6px 12px; font-weight: 800; font-size: 14px; }

/* the target, top centre */
.target { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--wm-glass); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-md); padding: 5px 8px 5px 12px; }
.target[hidden] { display: none; }
.tname { font-weight: 800; color: var(--wm-gold); font-size: 13px; }
.tbar { width: 90px; height: 8px; border-radius: 4px; background: var(--wm-track); overflow: hidden; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #b8402e, #f07a4a); }

/* right side: quick-use slots, Build and Backpack */
.quick { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; }
.sidebtns { position: absolute; right: 14px; bottom: 110px; display: flex; gap: 8px; }
.round { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); box-shadow: var(--wm-btn-lift), var(--wm-shadow-sm); }
.round:hover { border-color: var(--wm-gold-edge); }

/* the log, bottom left (Mystera's chat lines) */
.log { position: absolute; left: 12px; bottom: 160px; width: min(440px, 60vw); pointer-events: none !important; display: flex; flex-direction: column; gap: 2px; }
.log .line { font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 3px #000a; transition: opacity 2s; color: #e8f4f8; }
.log .line.old { opacity: 0; }
.log .skill { color: #7fd6ff; }
.log .level, .log .quest { color: var(--wm-gold); }
.log .warn { color: var(--wm-warm); }
.log .death { color: var(--wm-bad); }
.log .auto { color: var(--wm-good); }

/* auto action: a chip over your head's row, and the Action button glows while it runs */
.autochip { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--wm-leaf-dark); border: 1px solid #7fcf5a99; border-radius: var(--wm-pill); padding: 5px 14px; font-weight: 800; font-size: 13px; box-shadow: var(--wm-shadow-sm); pointer-events: none !important; animation: autopulse 1.2s ease-in-out infinite; }
.autochip[hidden] { display: none; }
@keyframes autopulse { 50% { opacity: 0.7; } }
.actbtns .act.auto { background: #7fcf5a55; border-color: var(--wm-leaf); box-shadow: 0 0 16px #7fcf5a88; }

/* the tutorial box, bottom centre */
.tutorial { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(520px, calc(100vw - 360px)); background: rgba(40, 32, 12, 0.82); border: 1px solid #d8b06088; border-radius: var(--wm-r); padding: 10px 14px; font-size: 14px; line-height: 1.35; color: #fbf1d6; box-shadow: var(--wm-shadow); pointer-events: none !important; }
.tutorial[hidden] { display: none; }
.tutorial b { color: var(--wm-gold); }

/* panels */
.panel { position: absolute; right: 80px; top: 64px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 200px); overflow: auto; background: var(--wm-panel); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-lg); box-shadow: var(--wm-shadow-lg); padding: 12px 14px 14px; }
.panel[hidden] { display: none; }
.phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.phead h2 { margin: 0; font-size: 17px; }
.x { background: var(--wm-btn); border: 1px solid var(--wm-edge); border-radius: 50%; width: 32px; height: 32px; font-size: 20px; line-height: 1; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; min-width: 44px; display: grid; place-items: center; background: var(--wm-well); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-sm); padding: 0; }
button.slot:hover { background: var(--wm-well-hi); border-color: var(--wm-gold-edge); }
.slot.empty { opacity: 0.5; }
.slot .n { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.slot .worn { position: absolute; inset: 1px; border: 2px solid var(--wm-bad); border-radius: var(--wm-r-sm); }
.slot .sl { font-size: 10px; color: var(--wm-faint); text-transform: capitalize; }
.slot .bi { font-weight: 900; font-size: 15px; color: var(--wm-gold); }
.qs { width: 50px; background: var(--wm-glass-strong); }
.equip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--wm-line); }
.eq { background: var(--wm-sunk); }
.foot { margin-top: 8px; font-size: 12.5px; color: var(--wm-dim); display: flex; flex-direction: column; gap: 2px; }
.hint { font-size: 12px; color: var(--wm-faint); }
.empty { color: var(--wm-dim); font-size: 13.5px; }
.itemmenu { position: absolute; left: 14px; right: 14px; background: var(--wm-card); border: 1px solid var(--wm-edge-hi); border-radius: var(--wm-r); padding: 10px; box-shadow: var(--wm-shadow); display: flex; flex-direction: column; gap: 4px; }
.itemmenu[hidden] { display: none; }
.itemmenu small, .info small { color: var(--wm-dim); font-size: 12px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.info { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.info:empty { display: none; }
.stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 8px; font-size: 13px; }
.stats span { color: var(--wm-dim); }
.traits { font-size: 13px; }
.traits span { color: var(--wm-gold); }
.skills { display: flex; flex-direction: column; gap: 4px; }
.sk { display: grid; grid-template-columns: 1fr auto 34px 40px; align-items: center; gap: 8px; background: var(--wm-well); border-radius: var(--wm-r-sm); padding: 5px 9px; font-size: 13.5px; }
.sk b { text-align: right; color: var(--wm-gold); }
.sk small { color: var(--wm-faint); }
.stars { display: flex; gap: 2px; }
.stars i { width: 9px; height: 9px; background: var(--wm-gold); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.stars i.b { background: #6ab4ff; }
.ups { display: flex; flex-direction: column; gap: 5px; }
.up { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--wm-well); border-radius: var(--wm-r-sm); padding: 6px 9px; }
.up > div { display: flex; flex-direction: column; }
.up small { color: var(--wm-dim); font-size: 12px; }
.trade { flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; }
.trade span { color: var(--wm-faint); }
.have { display: flex; align-items: center; gap: 6px; font-weight: 800; margin: 0 0 8px; }
.quests { display: flex; flex-direction: column; gap: 5px; }
.q { background: var(--wm-well); border-radius: var(--wm-r-sm); padding: 6px 9px; display: flex; flex-direction: column; opacity: 0.55; }
.q small { color: var(--wm-dim); font-size: 12px; }
.q.now { opacity: 1; border: 1px solid var(--wm-gold-edge); }
.q.done { opacity: 0.8; }
.q.done b::after { content: '  done'; color: var(--wm-leaf); font-size: 12px; }
.sign { font-size: 15px; line-height: 1.45; background: #c49a6222; border: 1px solid #c49a6255; border-radius: var(--wm-r); padding: 12px; }
.lk { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 13px; }
.lk > div { display: flex; flex-wrap: wrap; gap: 5px; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--wm-edge-hi); }
.sw.on { border-color: var(--wm-gold); box-shadow: 0 0 0 2px var(--wm-gold-soft); }
.toast { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); background: var(--wm-card); border: 1px solid var(--wm-edge-hi); border-radius: var(--wm-r); padding: 10px 16px; font-weight: 800; box-shadow: var(--wm-shadow); }
.toast[hidden] { display: none; }

/* the d-pad bottom left, Action and Pick up bottom right: on every screen, as Mystera shows them on PC and phone alike */
.dpad { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, #ffffff18 0 30%, #ffffff10 31% 100%); border: 1px solid var(--wm-edge); touch-action: none; opacity: 0.85; }
.dpad button { position: absolute; width: 44px; height: 44px; border: 0; background: transparent; pointer-events: none; }
.dpad button::after { content: ''; position: absolute; inset: 13px; border: solid #fff9; border-width: 0 4px 4px 0; }
.dpad [data-d="0"] { left: 44px; top: 3px; } .dpad [data-d="0"]::after { transform: rotate(-135deg); }
.dpad [data-d="1"] { right: 3px; top: 44px; } .dpad [data-d="1"]::after { transform: rotate(-45deg); }
.dpad [data-d="2"] { left: 44px; bottom: 3px; } .dpad [data-d="2"]::after { transform: rotate(45deg); }
.dpad [data-d="3"] { left: 3px; top: 44px; } .dpad [data-d="3"]::after { transform: rotate(135deg); }
.actbtns { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
.actbtns .act { width: 80px; height: 80px; border-radius: 50%; background: #ffd44733; border: 2px solid var(--wm-gold-edge); font-weight: 900; touch-action: none; }
.actbtns .pick { width: 70px; height: 40px; border-radius: var(--wm-pill); background: var(--wm-glass-strong); border: 1px solid var(--wm-edge); font-size: 12px; font-weight: 800; order: -1; }
.actbtns .act:hover, .actbtns .pick:hover { border-color: var(--wm-gold); }

/* a phone: the tutorial moves up out of the thumbs' way, everything a little smaller */
@media (max-width: 760px) {
  .dpad { width: 150px; height: 150px; }
  .dpad button { width: 48px; height: 48px; }
  .dpad [data-d="0"], .dpad [data-d="2"] { left: 51px; } .dpad [data-d="1"], .dpad [data-d="3"] { top: 51px; }
  .actbtns { flex-direction: column; }
  .actbtns .act { width: 86px; height: 86px; }
  .actbtns .pick { order: 0; width: 64px; }
  .autochip { bottom: 186px; }
  .tutorial { top: 102px; bottom: auto; font-size: 12.5px; padding: 7px 11px; width: min(440px, calc(100vw - 140px)); left: 12px; transform: none; }
  .log { bottom: 186px; }
  .panel { right: 8px; left: 8px; width: auto; top: 56px; max-height: calc(100vh - 240px); }
  .bars { flex-direction: column; gap: 4px; }
  .bar { width: 104px; height: 18px; }
  .bar .lbl, .bar b { line-height: 18px; font-size: 10px; }
  .btn { padding: 7px 10px; font-size: 12.5px; }
  .sidebtns { bottom: 186px; flex-direction: column; }
  .quick { top: 58px; flex-direction: row; }
  .target { top: 58px; left: auto; right: 190px; transform: none; }
}

/* an error shows here instead of the game freezing silently */
.oops { position: fixed; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 50; background: #7a1f1fee; color: #fff; border-radius: 8px; padding: 6px 10px; font: 600 12px/1.35 system-ui, sans-serif; pointer-events: none; }

/* ---- online: the connection line, chat, other players' names and what they say, the sign-in card ---- */
.netchip { position: fixed; top: max(58px, calc(env(safe-area-inset-top) + 48px)); left: 50%; transform: translateX(-50%); z-index: 40; max-width: calc(100vw - 24px); background: var(--wm-panel); border: 1px solid var(--wm-edge-hi); border-radius: var(--wm-pill); padding: 6px 8px 6px 14px; font-weight: 800; font-size: 13px; box-shadow: var(--wm-shadow-sm); display: flex; align-items: center; gap: 6px; }
.chatline { position: absolute; left: 12px; bottom: 160px; width: min(440px, 60vw); margin: 0; }
.chatline input { width: 100%; box-sizing: border-box; background: var(--wm-sunk); border: 1px solid var(--wm-edge); border-radius: var(--wm-pill); color: var(--wm-ink); padding: 6px 12px; font: 600 13px var(--wm-font); opacity: 0.7; outline: none; }
.chatline input:focus { opacity: 1; border-color: var(--wm-gold-edge); background: var(--wm-glass-strong); }
.log { bottom: 200px; }
.log .chat, .log > .chat { color: #cfe8ff; }
.nametag.other { color: #cfe8ff; }
.bubble { position: absolute; left: 0; top: 0; max-width: 220px; background: #fdfaf2f0; color: #1d2a30; border-radius: 10px; padding: 4px 9px; font-weight: 700; font-size: 12.5px; line-height: 1.3; box-shadow: 0 2px 6px #0006; white-space: normal; text-align: center; }
.signin { position: fixed; inset: 0; z-index: 60; background: var(--wm-scrim); display: grid; place-items: center; padding: 16px; }
.scard { width: min(380px, 100%); box-sizing: border-box; background: var(--wm-panel); border: 1px solid var(--wm-edge-hi); border-radius: var(--wm-r-lg); padding: 22px 20px 14px; box-shadow: var(--wm-shadow-sm); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.scard h1 { margin: 0; font-size: 26px; color: var(--wm-gold); }
.ssub { margin: 0 0 4px; color: var(--wm-dim); font-weight: 700; }
.smsg { margin: 0; color: var(--wm-warm); font-weight: 700; font-size: 13.5px; }
.sbig { width: 100%; padding: 12px; font-size: 15px; }
.sbig.google { background: #fdfaf2; color: #1d2a30; }
.sbig.ghost { background: var(--wm-leaf-dark); border-color: #7fcf5a88; }
.shint { margin: 2px 0 0; color: var(--wm-faint); font-size: 12px; line-height: 1.35; }
.sform { display: flex; flex-direction: column; gap: 10px; }
.sform input { box-sizing: border-box; width: 100%; padding: 11px 12px; border-radius: var(--wm-r-md); border: 1px solid var(--wm-edge); background: var(--wm-sunk); color: var(--wm-ink); font: 600 15px var(--wm-font); }
.slink { background: none; border: 0; color: var(--wm-dim); text-decoration: underline; font-weight: 700; font-size: 13px; padding: 6px; cursor: pointer; }
@media (max-width: 760px) {
  .chatline { bottom: 176px; width: calc(100vw - 130px); }
  .log { bottom: 214px; }
  .autochip { bottom: 214px; }
}

/* the owner's Test button and panel */
.round[hidden] { display: none; }
.round.testbtn { font-weight: 900; font-size: 13px; color: var(--wm-gold-ink); background: var(--wm-gold); border-color: var(--wm-gold-edge); }
.tin { background: var(--wm-sunk); border: 1px solid var(--wm-edge); border-radius: var(--wm-r-sm); color: var(--wm-ink); padding: 5px 8px; font: 700 13px var(--wm-font); max-width: 100%; }
input.tin { width: 64px; }

/* the pad is a thumbstick now that walking is free: the knob follows the thumb */
.dpad .hub { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffffff55, #ffffff22); border: 2px solid #ffffffaa; box-shadow: 0 2px 8px #0005; pointer-events: none; }
.dpad button::after { border-color: #fff5; }