:root {
  color-scheme: light; /* the game has its own colours: a phone in dark mode must not turn button text white on white */
  --bg: #f6ebe7; --card: #fffaf8; --ink: #3a2a2e; --muted: #8a7479; --rose: #e8a5b3; --rose-d: #c9788b;
  --gold: #c9a24a; --line: #ecdcd8; --ok: #3f9d6b; --err: #c2414b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; touch-action: none; user-select: none; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #fff 0, var(--bg) 60%, #ecd2cf 100%); z-index: 20; padding: 16px; }
.logo { font: 300 30px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .5px; margin-bottom: 6px; text-align: center; }
.logo b { font-weight: 600; color: var(--rose-d); }
.tag { color: var(--muted); margin: 0 0 20px; text-align: center; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px 22px; width: min(380px, 100%);
  box-shadow: 0 20px 60px rgba(120, 70, 80, .15); display: flex; flex-direction: column; gap: 12px; }
.card.wide { width: min(560px, 100%); max-height: 92vh; overflow: auto; }
.card h2 { margin: 0 0 4px; font: 400 22px Georgia, serif; }
.muted { color: var(--muted); margin: 6px 0 0; font-size: 13px; }
.error { color: var(--err); min-height: 1.2em; margin: 0; font-size: 13px; }
input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 16px; background: #fff; color: var(--ink); }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 999px; font-size: 15px;
  cursor: pointer; text-decoration: none; text-align: center; font-weight: 500; }
.btn.primary { background: linear-gradient(180deg, #eeb3bf, var(--rose)); border-color: var(--rose-d); color: #3a1d24; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.round { width: 46px; height: 46px; padding: 0; font-size: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 250, 248, .9); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(80, 40, 50, .15); }
.btn.round.big { width: 62px; height: 62px; font-weight: 700; font-size: 20px; }
.btn.round.on { background: var(--rose); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--rose-d); animation: spin 1s linear infinite; margin: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

.opt-row { display: flex; flex-direction: column; gap: 6px; }
.opt-row label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch.sel { box-shadow: 0 0 0 3px var(--rose-d); }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; }
.chip.sel { background: var(--rose); border-color: var(--rose-d); color: #fff; }
.swatches.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.figure-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: var(--ink); }
.figure-pick img { width: 54px; height: 122px; object-fit: cover; border-radius: 10px; background: #f8efec; }
.figure-pick .figure-own { width: 54px; height: 122px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #f8efec; font-weight: 600; }
.figure-pick small { font-size: 11px; line-height: 1.2; text-align: center; color: var(--muted); max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.figure-pick.sel { border-color: var(--rose-d); box-shadow: 0 0 0 2px var(--rose-d); background: #fdf1f3; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
.topbar { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 8px; pointer-events: none; }
.pill { pointer-events: auto; background: rgba(255, 250, 248, .9); backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 14px;
  font-weight: 600; font-size: 14px; box-shadow: 0 4px 14px rgba(80, 40, 50, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
.pill.coins { color: #8a6a1c; }
#online { color: var(--ok); margin-left: auto; }
.menu { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 46px); right: 10px; display: flex; flex-direction: column; gap: 8px; }
.minimap { position: absolute; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 46px); width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 4px 14px rgba(80,40,50,.25); cursor: pointer; }
.bigmap { display: block; margin: 8px auto; border-radius: 14px; box-shadow: 0 2px 10px rgba(80,40,50,.15); }
.maphint { text-align: center; color: var(--muted); font-size: 13px; }
.placerow { display: block; width: 100%; margin: 6px 0; text-align: left; }
.prompt { position: absolute; left: 50%; bottom: max(160px, calc(env(safe-area-inset-bottom) + 160px)); transform: translateX(-50%); background: rgba(58, 42, 46, .85); color: #fff;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.joystick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: 124px; height: 124px;
  border-radius: 50%; background: rgba(255, 250, 248, .45); border: 2px solid rgba(255, 255, 255, .8); touch-action: none; }
.joystick .knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(255, 250, 248, .95); box-shadow: 0 4px 12px rgba(80, 40, 50, .25); }
@media (hover: hover) and (pointer: fine) { .joystick { display: none; } }
.build-bar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 48px); }
.place-bar, .undo-bar { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  align-items: center; width: max-content; max-width: calc(100vw - 20px); }
.place-bar { bottom: 160px; background: rgba(255, 250, 248, .92); padding: 8px; border-radius: 18px; box-shadow: 0 6px 20px rgba(80, 40, 50, .2); }
.place-bar #place-msg { font-size: 13px; padding: 0 6px; color: var(--muted); }
.place-bar #place-msg.bad { color: var(--err); font-weight: 600; }
.undo-bar { top: calc(max(10px, env(safe-area-inset-top)) + 96px); }
.net { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(58, 42, 46, .85); color: #fff; padding: 10px 18px; border-radius: 12px; }
.toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: rgba(58, 42, 46, .9); color: #fff; padding: 10px 18px;
  border-radius: 999px; font-size: 14px; width: max-content; max-width: min(90vw, 560px); text-align: center; z-index: 40; }

.panel { position: fixed; z-index: 10; right: 0; top: 0; bottom: 0; width: min(420px, 100vw); background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(80, 40, 50, .15); }
@media (max-width: 600px) { .panel { top: auto; height: 62vh; border-radius: 22px 22px 0 0; border-left: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.panel-head h2 { margin: 0; font: 400 20px Georgia, serif; }
.tabs { display: flex; gap: 6px; padding: 4px 16px 10px; overflow-x: auto; }
.panel-body { flex: 1; overflow-y: auto; padding: 0 16px 20px; touch-action: pan-y; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 16px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.item canvas, .item .thumb { width: 100%; aspect-ratio: 1; border-radius: 12px; background: #f8efec; }
.item .name { font-weight: 600; font-size: 14px; }
.item .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.item .price { color: #8a6a1c; font-weight: 700; }
.rarity { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.preview { width: 100%; aspect-ratio: 1.3; border-radius: 16px; background: #f8efec; display: block; touch-action: none; }

.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.round.small { width: 34px; height: 34px; font-size: 14px; }
#btn-chat { position: relative; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--err); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.ask { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%); z-index: 12;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; width: min(340px, calc(100vw - 24px));
  box-shadow: 0 16px 40px rgba(80, 40, 50, .25); animation: pop .25s ease-out; }
.ask p { margin: 0 0 10px; font-weight: 600; text-align: center; }
.ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes pop { from { transform: translate(-50%, -10px); opacity: 0; } }
.card-sheet { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 12;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px; width: min(360px, calc(100vw - 24px));
  box-shadow: 0 16px 40px rgba(80, 40, 50, .25); }
#card-close { position: absolute; top: 10px; right: 10px; }
.card-name { font: 400 22px Georgia, serif; margin: 0 40px 10px 0; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-safety { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-safety .btn { flex: 1; font-size: 13px; }
.card-reasons { display: flex; flex-direction: column; gap: 6px; }
.conv { position: absolute; z-index: 11; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 48px);
  width: min(360px, calc(100vw - 80px)); height: min(440px, 52vh); background: rgba(255, 250, 248, .97); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 16px 40px rgba(80, 40, 50, .2); display: flex; flex-direction: column; overflow: hidden; }
.conv-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; gap: 8px; }
.conv-name { font-weight: 700; }
.conv-head .muted { margin: 0; font-size: 12px; }
.conv-tools { display: flex; gap: 6px; }
.conv .tabs { padding: 0 12px 4px; }
.conv-call-row { display: flex; gap: 6px; padding: 4px 12px 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.conv-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; user-select: text; }
.conv-messages .center { text-align: center; }
.msg { align-self: flex-start; max-width: 80%; background: #f3e4e1; border-radius: 16px 16px 16px 4px; padding: 7px 12px; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: var(--rose); border-radius: 16px 16px 4px 16px; }
.conv-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.conv-form input { padding: 9px 12px; }

.menu-sheet { position: absolute; z-index: 12; right: 64px; top: calc(max(10px, env(safe-area-inset-top)) + 46px + 54px); display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 8px; box-shadow: 0 12px 30px rgba(80, 40, 50, .2); }
.menu-sheet .btn, .emote-sheet .btn { text-align: left; white-space: nowrap; }
.emote-sheet { position: absolute; z-index: 12; left: 50%; bottom: 130px; transform: translateX(-50%); display: flex; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px; box-shadow: 0 12px 30px rgba(80, 40, 50, .2); }

.pill.level { position: relative; overflow: hidden; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #3a2a2e; padding: 7px 14px; }
.pill.level #lvl-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #f0b9c4, #e8a5b3); z-index: 0; transition: width .6s; }
.pill.level b { position: relative; z-index: 1; }
.lvl-head { padding: 4px 0 10px; }
.lvl-line { font-weight: 700; margin-bottom: 6px; }
.qbar { height: 8px; border-radius: 6px; background: #f1e1de; overflow: hidden; }
.qbar.big { height: 12px; }
.qbar i { display: block; height: 100%; background: linear-gradient(90deg, #eeb3bf, #c9788b); border-radius: 6px; transition: width .5s; }
.qprog { font-size: 12px; color: var(--muted); margin-top: 3px; }
.qcard { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
.qcard.done { background: #f4fbf6; border-color: #cfe9d6; }
.qhead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.qtitle { font-weight: 700; }
.qkind { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); white-space: nowrap; }
.qdesc { font-size: 13px; color: var(--muted); margin: 3px 0 6px; }
.qobj { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.qobj li.ok { color: var(--ok); text-decoration: line-through; }
.qreward { font-size: 12px; color: #8a6a1c; margin-top: 6px; font-weight: 600; }
.qtime { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qchapter { font: 400 17px Georgia, serif; margin: 14px 0 6px; }

/* ---------- HUD after the owner's mock-up: mauve glass panels, white type, pink glow, gold ---------- */
:root { --glass: rgba(78, 46, 58, .62); --glass-hi: rgba(110, 64, 80, .72); --glass-line: rgba(255, 214, 226, .28); --glow: #ff9fc0; --cream: #fff4f6; --goldc: #f2c75c; }
#hud { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--cream); }
#hud button { font: inherit; }
.glass, .profile, .sidemenu button, .wallet .pill, .topnav, .tools .ic, .tracker, .chatbox, .actionbar button, .pill.zone, .pill.online, .tracker-open {
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 6px 22px rgba(40, 14, 26, .28); color: var(--cream);
}
.hud-left { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 8px; width: 230px; }
.brand { display: flex; flex-direction: column; align-items: center; line-height: 1; text-shadow: 0 2px 10px rgba(80, 20, 40, .55); pointer-events: none; }
.brand b { font: 500 26px/1 Georgia, "Times New Roman", serif; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.brand span { font: 400 17px/1.2 Georgia, serif; letter-spacing: 7px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px var(--glow), 0 2px 8px rgba(80, 20, 40, .6); }
.profile { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer; text-align: left; position: relative; overflow: visible; }
.profile .portrait { width: 54px; height: 54px; flex: none; border-radius: 50%; border: 2px solid var(--glow); background: #f6d9df center 8% / 170% auto no-repeat; box-shadow: 0 0 14px rgba(255, 159, 192, .6); }
.profile .pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.profile b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile #lvl-text { font-size: 13px; opacity: .9; }
.xpbar { position: relative; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.xpbar #lvl-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ffc1d4, #ff7fa8); border-radius: 4px; transition: width .6s; }
.profile small { font-size: 10px; opacity: .75; letter-spacing: .3px; }
.sidemenu { display: flex; flex-direction: column; gap: 6px; }
.sidemenu button { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; cursor: pointer; font-size: 15px; text-align: left; }
.sidemenu button i, .topnav i, .actionbar i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.sidemenu button i { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 190, 210, .18); font-size: 17px; }
.sidemenu button:hover, .sidemenu button:focus-visible { background: var(--glass-hi); outline: none; box-shadow: 0 0 0 1px var(--glow), 0 6px 22px rgba(40, 14, 26, .3); }
.wallet { position: absolute; top: max(14px, env(safe-area-inset-top)); left: calc(max(12px, env(safe-area-inset-left)) + 244px); display: flex; gap: 8px; }
.wallet .pill { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 8px; border-radius: 999px; font-size: 18px; font-weight: 600; max-width: none; color: var(--cream); }
.wallet .coin-ic { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a6, #e2a92d 60%, #a8751a); box-shadow: inset 0 0 0 2px #f8d873; }
.wallet .gem i { font-style: normal; font-size: 20px; }
.wallet .credit i { font-style: normal; font-size: 18px; }
.wallet .plus { width: 28px; height: 28px; border-radius: 9px; border: 0; background: linear-gradient(180deg, #ff9fc0, #e86b96); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.topnav { position: absolute; left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); display: flex; gap: 2px; padding: 4px; border-radius: 18px; }
.topnav button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px; padding: 6px 8px; border: 0; border-radius: 14px; background: none; color: var(--cream); cursor: pointer; font-size: 13px; }
.topnav i { font-size: 22px; height: 26px; filter: saturate(.6) brightness(1.15); }
.topnav button.on { background: linear-gradient(180deg, rgba(255, 159, 192, .55), rgba(232, 107, 150, .45)); box-shadow: inset 0 0 0 1px rgba(255, 220, 232, .6), 0 0 16px rgba(255, 159, 192, .45); }
.topnav button:hover:not(.on) { background: rgba(255, 255, 255, .08); }
.hud-right { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tools { display: flex; gap: 8px; }
.ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; position: relative; padding: 0; }
.mapwrap { position: relative; }
#hud .minimap { position: static; width: 196px; height: 196px; border: 3px solid rgba(255, 214, 226, .8); box-shadow: 0 0 22px rgba(255, 159, 192, .55), 0 8px 24px rgba(40, 14, 26, .35); }
.pill.zone { position: absolute; right: 8px; bottom: 26px; font-size: 13px; padding: 5px 12px; max-width: 160px; }
.mapwrap .minimap.hidden + .pill.zone { position: static; }
.pill.online { font-size: 12px; padding: 4px 10px; color: #9ff0bf; }
.tracker { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 300px); width: 250px; border-radius: 18px; padding: 10px 12px; }
.tracker-head { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 6px; }
.tracker-head button { border: 0; background: none; color: var(--cream); font-size: 16px; cursor: pointer; }
.trow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px; border: 0; border-top: 1px solid var(--glass-line); background: none; color: var(--cream); cursor: pointer; font-size: 13px; text-align: left; }
.trow .tick { width: 18px; height: 18px; border-radius: 50%; flex: none; background: rgba(255, 159, 192, .35); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.trow.done .tick { background: #ff8fb4; }
.trow .tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tnum { font-variant-numeric: tabular-nums; opacity: .85; }
.tracker-open { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 300px); }
.chatbox { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 360px; border-radius: 18px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .14); }
.chat-tabs button { flex: 1; border: 0; padding: 6px 4px; border-radius: 10px; background: none; color: var(--cream); cursor: pointer; font-size: 14px; }
.chat-tabs button.on { background: #fff; color: #4a2a36; font-weight: 600; }
.chat-tabs .chat-fold { flex: 0 0 30px; }
.chat-list { max-height: 190px; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px; touch-action: pan-y; user-select: text; }
.chat-line { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.chat-line b { white-space: nowrap; }
.chat-line time { font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.chat-line span { overflow-wrap: anywhere; }
.chat-note { font-size: 13px; opacity: .85; padding: 4px 2px; line-height: 1.4; }
.chat-conv { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--cream); cursor: pointer; text-align: left; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .92); font-size: 14px; color: #3a2a2e; }
.chat-form input:disabled { opacity: .6; }
.chat-form button { width: 40px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass-hi); color: var(--cream); cursor: pointer; }
.chatbox.collapsed .chat-list, .chatbox.collapsed .chat-form { display: none; }
.chatbox.collapsed .chat-fold { transform: rotate(180deg); }
.actionbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.actionbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 8px 4px 6px; border-radius: 18px; cursor: pointer; font-size: 12px; }
.actionbar i { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 20px; }
.actionbar button:hover i { background: rgba(255, 159, 192, .35); }
#hud .joystick { left: auto; right: max(96px, calc(env(safe-area-inset-right) + 96px)); bottom: max(22px, env(safe-area-inset-bottom)); background: rgba(78, 46, 58, .35); border-color: rgba(255, 214, 226, .7); }
.runbtn { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(40px, calc(env(safe-area-inset-bottom) + 40px)); width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255, 214, 226, .8); background: var(--glass); color: #fff; font-size: 30px; cursor: pointer; }
.runbtn.on { background: linear-gradient(180deg, #ff9fc0, #e86b96); box-shadow: 0 0 20px rgba(255, 159, 192, .7); }
@media (hover: hover) and (pointer: fine) { .runbtn { display: none; } }
#hud .menu-sheet { right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 54px); z-index: 13; }
#hud .emote-sheet { bottom: 100px; }
#hud .prompt { bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); }
#hud .place-bar { bottom: 110px; }
#hud.posing > :not(.posehint) { display: none !important; }
.posehint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 13px; padding: 6px 14px; border-radius: 999px; background: rgba(58, 42, 46, .6); color: #fff; }
/* Tablets and phones: the left column and the tracker shrink, the nav scrolls */
@media (max-width: 1180px) {
  .hud-left { width: 200px; }
  .sidemenu button { font-size: 13px; padding: 6px 10px 6px 6px; }
  .sidemenu button i { width: 26px; height: 26px; font-size: 14px; }
  .wallet { left: auto; right: calc(max(12px, env(safe-area-inset-right)) + 210px); }
  .topnav { top: auto; bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)); max-width: calc(100vw - 24px); overflow-x: auto; }
  .topnav button { min-width: 58px; font-size: 11px; }
  .topnav i { font-size: 18px; height: 22px; }
  #hud .minimap { width: 150px; height: 150px; }
  .tracker, .tracker-open { top: calc(max(10px, env(safe-area-inset-top)) + 250px); width: 210px; }
}
@media (max-width: 760px) {
  .brand, .sidemenu, .profile small, .tracker, .topnav, .pill.online { display: none; }
  .hud-left { width: auto; }
  .profile { padding: 4px 10px 4px 4px; }
  .profile .portrait { width: 40px; height: 40px; }
  .wallet { top: calc(max(10px, env(safe-area-inset-top)) + 58px); left: max(12px, env(safe-area-inset-left)); right: auto; }
  .wallet .pill { font-size: 14px; padding: 4px 6px; }
  .tools .ic { width: 40px; height: 40px; font-size: 16px; }
  #hud .minimap { width: 120px; height: 120px; }
  .pill.zone { display: none; }
  .chatbox { width: min(300px, calc(100vw - 150px)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)); }
  .chatbox:not(.open) { display: none; }
  .actionbar { left: max(12px, env(safe-area-inset-left)); transform: none; gap: 4px; }
  #hud .actionbar button { width: 48px; font-size: 0; padding: 4px; border-radius: 14px; }
  .actionbar i { width: 34px; height: 34px; font-size: 17px; }
  #hud .joystick { right: max(14px, env(safe-area-inset-right)); bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); width: 110px; height: 110px; }
  .runbtn { width: 58px; height: 58px; font-size: 24px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .tracker-open { display: none; }
}
/* Phones held sideways (wide but short): the same compact layout as portrait phones, so
   the HUD never covers the avatar and the street. */
@media (max-height: 500px) {
  .brand, .sidemenu, .profile small, .tracker, .topnav, .pill.online { display: none; }
  .hud-left { width: auto; }
  .profile { padding: 4px 10px 4px 4px; }
  .profile .portrait { width: 40px; height: 40px; }
  .wallet { top: calc(max(10px, env(safe-area-inset-top)) + 58px); left: max(12px, env(safe-area-inset-left)); right: auto; }
  .wallet .pill { font-size: 14px; padding: 4px 6px; }
  .tools .ic { width: 40px; height: 40px; font-size: 16px; }
  #hud .minimap { width: 120px; height: 120px; }
  .pill.zone { display: none; }
  .chatbox { width: min(300px, calc(100vw - 150px)); bottom: max(86px, calc(env(safe-area-inset-bottom) + 86px)); }
  .chatbox:not(.open) { display: none; }
  .actionbar { left: max(12px, env(safe-area-inset-left)); transform: none; gap: 4px; }
  #hud .actionbar button { width: 48px; font-size: 0; padding: 4px; border-radius: 14px; }
  .actionbar i { width: 34px; height: 34px; font-size: 17px; }
  #hud .joystick { right: max(14px, env(safe-area-inset-right)); bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); width: 110px; height: 110px; }
  .runbtn { width: 58px; height: 58px; font-size: 24px; bottom: max(20px, env(safe-area-inset-bottom)); }
  .tracker-open { display: none; }
  .wallet { top: calc(max(8px, env(safe-area-inset-top)) + 54px); left: max(12px, env(safe-area-inset-left)); }
  #guide { top: max(6px, env(safe-area-inset-top)) !important; left: 52% !important; width: min(44vw, 400px) !important; padding: 4px 50px 4px 10px !important; position: absolute; font-size: 12px !important; }
  #guide button { min-height: 34px !important; }
  #gameclock { top: calc(max(8px, env(safe-area-inset-top)) + 128px) !important; }
}


/* Short fade when walking through a door (the areas stay built, so no loading screen) */
#fade { position: fixed; inset: 0; z-index: 15; background: #f6ebe7; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
#fade.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #fade { transition: none; } }

/* Treatment mini-games */
.mg { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(58, 30, 40, .45); padding: 16px; }
.mg-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px; width: min(400px, 100%); max-height: calc(100% - 8px); overflow: auto; box-shadow: 0 20px 60px rgba(80, 30, 40, .35); display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.mg-card.wide { display: grid; width: auto; max-width: 100%; grid-template-columns: auto minmax(200px, 280px); grid-template-rows: auto auto 1fr auto; column-gap: 14px; align-items: start; }
.mg-card.wide > .mg-canvas { grid-column: 1; grid-row: 1 / span 4; }
.mg-card.wide > .mg-head { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
.mg-card.wide > .mg-help { grid-column: 2; grid-row: 2; }
.mg-card.wide > .mg-extra { grid-column: 2; grid-row: 3; }
.mg-card.wide > .mg-foot { grid-column: 2; grid-row: 4; }
.mg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 18px; }
.mg-who { font-size: 13px; color: var(--muted); }
.mg-help { margin: 0; font-size: 13px; color: var(--muted); }
.mg-canvas { display: block; margin: 0 auto; border-radius: 16px; touch-action: none; cursor: pointer; }
.mg-foot { display: flex; align-items: center; gap: 10px; }
.mg-bar { flex: 1; height: 8px; border-radius: 4px; background: #f1e1de; overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #eeb3bf, #e86b96); transition: width .25s; }
.mg-palette { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mg-color { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 3px 8px rgba(80, 40, 50, .2); cursor: pointer; }
.mg-color:active { transform: scale(.92); }
.mg-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mg-tools .btn { padding: 8px 4px; font-size: 13px; }

/* Heart for someone else's salon */
.heartbtn { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 92px); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--cream); font: 600 15px -apple-system, sans-serif; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(40, 14, 26, .28); }
.heartbtn[aria-pressed="true"] { background: linear-gradient(180deg, #ff9fc0, #e86b96); }
@media (max-width: 1180px) { .heartbtn { top: calc(max(10px, env(safe-area-inset-top)) + 12px); } }
@media (max-width: 760px) { .heartbtn { top: auto; bottom: max(150px, calc(env(safe-area-inset-bottom) + 150px)); } }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank-row .pos { width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-row .who { flex: 1; min-width: 0; }
.rank-row .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; text-align: right; }
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.look-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; min-width: 0; }
.look-card.mine { border-color: var(--rose-d); background: #fdf1f3; }
.look-card b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-pic { position: relative; width: 70px; height: 150px; border-radius: 12px; background: #f8efec center / cover no-repeat; }
.look-pic.own { width: 34px; border-radius: 17px 17px 8px 8px; }
.look-pet { position: absolute; right: -14px; bottom: -4px; font-size: 22px; }
.chat-report { margin-left: auto; border: 0; background: none; color: var(--cream); opacity: .45; cursor: pointer; font-size: 12px; flex: none; }
.chat-report:hover { opacity: 1; }
.card-actions.together { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.card-actions.together .btn { padding: 8px 4px; font-size: 13px; }
.sell-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.sell-form input { width: 110px; padding: 8px 10px; }
/* The creator's "Klar" button stays in view at the bottom of the card, however long the list */
#creator-done { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 16px var(--card); margin-top: 18px; }
#creator-cancel { margin: -4px 0 10px; }
.year-select { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 16px; background: #fff; color: var(--ink); }

/* ---------- Phone-first HUD ----------
   The owner plays on a phone first. Rules below: (1) every control on a touch screen is at
   least 44 px (Apple/Google tap-target guideline), (2) on a portrait phone the HUD lives in
   the top band and the bottom band only, so the avatar and the street in the middle stay
   free, (3) sheets and panels scroll instead of running off the screen. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.small { min-height: 44px; }
  .btn.round.small { width: 44px; height: 44px; }
  .menu-sheet .btn, .emote-sheet .btn, .card-actions .btn, .ask-actions .btn, .chip { min-height: 44px; }
  .tools .ic { width: 44px; height: 44px; }
  /* The diamond "+" keeps its small look but gets a 44 px hit area */
  .wallet .plus { position: relative; }
  .wallet .plus::after { content: ''; position: absolute; inset: -10px; }
  .chat-tabs button { min-height: 44px; }
  .chat-tabs .chat-fold { flex: 0 0 44px; }
  .chat-form input { min-height: 44px; font-size: 16px; } /* 16 px: iOS does not zoom into the field */
  .chat-form button { width: 44px; min-height: 44px; }
  .chat-report { min-width: 44px; min-height: 44px; margin: -12px 0; }
  .chat-conv { min-height: 44px; }
  .tracker-head button { min-width: 44px; min-height: 44px; }
  .trow { min-height: 44px; }
  .sidemenu button, .topnav button { min-height: 44px; }
  #hud .actionbar button { min-height: 46px; }
  /* guide.js styles its buttons inline, hence !important */
  #guide button { min-width: 44px !important; min-height: 44px !important; }
}
/* The settings sheet can hold many buttons (feature modules add their own): it scrolls. */
#hud .menu-sheet { max-height: calc(100% - max(10px, env(safe-area-inset-top)) - 70px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.tabs { touch-action: pan-x; }
/* The guide box ends up on <body> above the whole #hud layer (guide.js), so sheets and
   dialogs opened from the HUD were drawn under it. While one is open the guide steps aside. */
body:has(#menu:not(.hidden), #emotes:not(.hidden), #ask:not(.hidden), #card:not(.hidden), #conv:not(.hidden), #panel:not(.hidden), #mission-card, #talk) :is(#guide, #guide-reopen) { visibility: hidden; }
/* in a conversation: no door prompt, joystick or run button around the card */
body:has(#talk) :is(#prompt, #joystick, #btn-run) { visibility: hidden; }
/* phone portrait: toasts below the mission box, so they are always readable */
@media (max-width: 700px) and (orientation: portrait) { .toast { top: calc(max(10px, env(safe-area-inset-top)) + 300px); border-radius: 18px; } }
/* desktop 1181–1600 px: the top menu is centred and would cover the wallet, so the wallet goes under it */
@media (min-width: 1181px) and (max-width: 1600px) and (min-height: 501px) { .wallet { top: calc(max(14px, env(safe-area-inset-top)) + 72px); } }
/* First-time hint "Tryck på marken för att gå dit" (hud.js); never catches a tap itself */
#hud > .taphint { pointer-events: none; }
/* The "Tryck på … / Gå in" prompt is only text: a tap on it reaches the ground below (tap-to-walk) */
#hud > .prompt { pointer-events: none; }
/* … except when it is an action (start the treatment, talk at a counter): then it is a big button */
#hud > .prompt.tap { pointer-events: auto; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 10px 20px; background: linear-gradient(180deg, #ff9fc0, #e86b96); font-weight: 600; box-shadow: 0 6px 18px rgba(30, 10, 20, .3); }
#hud > .prompt.tap.hidden { display: none; }
.taphint { position: absolute; left: 50%; bottom: 170px; transform: translateX(-50%); z-index: 6; width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px;
  border-radius: 999px; background: rgba(58, 30, 42, .82); color: #fff; font: 600 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center; box-shadow: 0 6px 22px rgba(40, 14, 26, .35); animation: taphint 1.6s ease-in-out infinite; }
@keyframes taphint { 50% { transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .taphint { animation: none; } }

/* Portrait phones (not short landscape, which has its own block above).
   Top band:    profile + tools | wallet + minimap (clock on its rim) | guide, full width.
   Bottom band: action bar across the width; joystick with the run button above it, right. */
@media (max-width: 760px) and (min-height: 501px) {
  .profile { max-width: calc(100vw - 24px - 208px); }
  .hud-right { gap: 6px; }
  #hud .minimap { width: 96px; height: 96px; }
  .wallet { top: calc(max(10px, env(safe-area-inset-top)) + 56px); max-width: calc(100vw - 24px - 96px - 12px); flex-wrap: wrap; gap: 6px; }
  .wallet .pill { font-size: 14px; padding: 3px 8px 3px 4px; gap: 5px; }
  .wallet .coin-ic { width: 20px; height: 20px; }
  .wallet .gem i, .wallet .credit i { font-size: 15px; }
  .wallet .plus { width: 24px; height: 24px; font-size: 17px; border-radius: 8px; }
  /* main.js and guide.js position these inline, hence !important */
  #gameclock { top: calc(max(10px, env(safe-area-inset-top)) + 144px) !important; right: max(24px, calc(env(safe-area-inset-right) + 24px)) !important; font-size: 12px !important; }
  #guide { top: calc(max(10px, env(safe-area-inset-top)) + 172px) !important; width: calc(100vw - 24px) !important; padding: 4px 50px 4px 10px !important; gap: 6px !important; font-size: 12px !important; }
  .heartbtn { top: calc(max(10px, env(safe-area-inset-top)) + 240px); bottom: auto; font-size: 14px; }

  .actionbar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); transform: none; gap: 4px; justify-content: space-between; }
  #hud .actionbar button { flex: 1 1 0; width: auto; min-width: 44px; max-width: 60px; height: 48px; }
  #hud .joystick { right: max(14px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); width: 116px; height: 116px; }
  .runbtn { width: 52px; height: 52px; font-size: 22px; right: calc(max(14px, env(safe-area-inset-right)) + 32px); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 186px); }
  #hud .prompt { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 250px); width: max-content; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
  #hud .emote-sheet { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); z-index: 12; }
  .taphint { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 300px); font-size: 14px; }

  /* Chat: one full-width card above the action bar. Folding it closes it (💬 opens it again),
     and while it is open the joystick steps aside; tap-to-walk still works. */
  .chatbox { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-width: 440px; z-index: 7;
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  .chatbox.collapsed { display: none; }
  .chat-list { max-height: 96px; min-height: 44px; }
  #hud.chat-open .joystick, #hud.chat-open .runbtn { display: none; }

  /* Settings: two columns, scrolls, above the guide */
  #hud .menu-sheet { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 56px);
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; z-index: 20; max-height: calc(100% - max(10px, env(safe-area-inset-top)) - 56px - 74px); }
  #hud .menu-sheet .btn { white-space: normal; font-size: 14px; padding: 8px 10px; line-height: 1.2; }
}
/* Phones held sideways: the joystick sat on top of the minimap and the clock. It moves down
   to the bottom-right corner, just left of the run button. */
@media (max-height: 500px) {
  #hud .joystick { right: calc(max(14px, env(safe-area-inset-right)) + 70px); bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* phone landscape: the conversation may use the whole height, so the question is never cut off */
@media (max-height: 500px) { #talk > div { max-height: calc(100vh - 16px) !important; } }
/* phone on its side: an open chat takes the mission box's place (they would overlap) */
@media (max-height: 500px) { body:has(.chatbox.open:not(.collapsed)) :is(#guide, #guide-reopen) { visibility: hidden; } }
/* building: the mission box steps aside so you see the room and the piece you place */
body.building :is(#guide, #guide-reopen) { visibility: hidden; }
/* phone portrait: the 🔨 Bygg button sits low, clear of the wallet at the top */
@media (max-width: 700px) and (orientation: portrait) { .build-bar { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 178px); } }

/* the city map on a lying phone: the panel takes the whole screen so the map is big */
@media (max-height: 500px) { .panel.maptall { width: 100%; left: 0; } .panel.maptall .panel-body { padding-top: 4px; } }

/* Two joysticks (the owner): the right one walks, the left one steers the view. Only on touch
   screens; the action buttons move to the bottom middle to make room on the left. */
.lookstick { display: none; }
@media (pointer: coarse) {
  #hud .lookstick { display: block; left: max(18px, env(safe-area-inset-left)); right: auto; bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) and (max-height: 500px) {
  #hud .lookstick { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: 110px; height: 110px; }
  #hud .actionbar { left: 50%; transform: translateX(-50%); }
  #gameclock { top: calc(max(8px, env(safe-area-inset-top)) + 178px) !important; }
}