:root {
  --ink: #172b36;
  --ink-2: #24434f;
  --paper: #efe6d0;
  --paper-2: #d9cfb7;
  --red: #e8483f;
  --gold: #f2bf45;
  --blue: #3f75c5;
  --green: #3d9968;
  --white: #fffdf5;
  --shadow: 0 18px 50px rgb(18 37 46 / 20%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #cfc5ae;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #cfc5ae; }
body { overscroll-behavior: none; }
button, select, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.topbar {
  height: 82px;
  padding: max(14px, env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ink);
  color: var(--white);
  position: relative;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 42px; aspect-ratio: 1;
  border: 2px solid var(--gold); border-radius: 50%; color: var(--gold);
  font-weight: 950; font-size: 13px; letter-spacing: -.5px; transform: rotate(-5deg);
}
.brand strong { display: block; font-size: 14px; letter-spacing: .04em; line-height: 1.1; }
.brand small { display: block; color: var(--gold); font-size: 9px; letter-spacing: .12em; margin-top: 3px; }

.wallet {
  border: 1px solid rgb(255 255 255 / 16%); background: rgb(255 255 255 / 7%); color: white;
  border-radius: 13px; padding: 8px 10px; display: grid; gap: 2px; text-align: right; font-size: 11px;
}
.wallet b { font-size: 14px; }.wallet .premium { color: var(--gold); }

main { min-height: calc(100dvh - 160px); }
.screen { display: none; min-height: calc(100dvh - 160px); padding-bottom: 16px; }
.screen.active { display: block; animation: appear .2s ease-out; }
@keyframes appear { from { opacity: .5; transform: translateY(4px); } }

.map-toolbar { display: flex; gap: 8px; padding: 12px; align-items: stretch; }
.status-pill, .visibility-control {
  border: 1px solid #c9bea6; background: var(--white); color: var(--ink);
  border-radius: 13px; min-height: 44px; padding: 8px 11px; box-shadow: 0 5px 15px rgb(31 49 57 / 7%);
}
.status-pill { flex: 1; text-align: left; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pulse { width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgb(232 72 63 / 14%); }
.status-pill.live .pulse { background: var(--green); box-shadow: 0 0 0 5px rgb(61 153 104 / 14%); }
.visibility-control { display: grid; grid-template-columns: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #66747a; }
.visibility-control select { border: 0; background: transparent; color: var(--ink); font-weight: 800; outline: 0; }

.map-stage {
  position: relative; margin: 0 12px; height: calc(100dvh - 255px); min-height: 490px; overflow: hidden;
  border-radius: 25px; background: #aebfb5; border: 3px solid var(--ink); box-shadow: var(--shadow);
}
.map-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, rgb(255 255 255 / 30%), transparent 35%), linear-gradient(135deg, transparent 35%, rgb(31 75 77 / 12%) 36% 47%, transparent 48%); }
.street { position: absolute; height: 23px; width: 130%; left: -15%; background: #e8dfca; border-block: 2px solid rgb(23 43 54 / 28%); transform: rotate(-24deg); }
.street::after { content:""; position:absolute; left:0; right:0; top:10px; border-top:2px dashed rgb(23 43 54 / 24%); }
.street-a { top: 24%; }.street-b { top: 61%; transform: rotate(18deg); }.street-c { top: 42%; transform: rotate(79deg); }
.hex-grid { position: absolute; inset: -20px; opacity: .8; background-image: linear-gradient(30deg, transparent 24%, rgb(255 253 245 / 45%) 25%, rgb(255 253 245 / 45%) 26%, transparent 27%, transparent 74%, rgb(255 253 245 / 45%) 75%, rgb(255 253 245 / 45%) 76%, transparent 77%), linear-gradient(90deg, transparent 24%, rgb(255 253 245 / 35%) 25%, rgb(255 253 245 / 35%) 26%, transparent 27%, transparent 74%, rgb(255 253 245 / 35%) 75%, rgb(255 253 245 / 35%) 76%, transparent 77%); background-size: 68px 118px; }

.poi { position: absolute; z-index: 3; border: 0; background: var(--white); border-radius: 15px; padding: 9px 11px; box-shadow: 0 9px 24px rgb(20 41 48 / 24%); color: var(--ink); display: grid; grid-template-columns: 26px auto; text-align: left; column-gap: 6px; }
.poi span { grid-row: span 2; font-size: 21px; }.poi b { font-size: 11px; }.poi small { font-size: 8px; color: #718087; }
.poi:active { transform: scale(.96); }
.tavern-poi { border-left: 4px solid var(--red); }.atelier-poi { border-left: 4px solid var(--blue); }.hardware-poi { border-left: 4px solid var(--gold); }

.player-marker { position: absolute; z-index: 4; left: 50%; top: 51%; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / 35%); display: grid; place-items: center; animation: breathe 2s infinite; }
.player-marker span { width: 23px; height: 23px; background: var(--gold); border: 5px solid white; border-radius: 50%; box-shadow: 0 3px 10px rgb(0 0 0 / 30%); }
.player-marker i { position: absolute; width: 70px; height: 70px; border: 2px solid rgb(242 191 69 / 50%); border-radius: 50%; }
@keyframes breathe { 50% { scale: 1.08; } }

.cell-card { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; background: rgb(23 43 54 / 92%); color: white; border-radius: 17px; padding: 12px 14px; backdrop-filter: blur(8px); }
.eyebrow, .cell-card small { display: block; font-size: 9px; letter-spacing: .09em; color: #d7e1df; }.cell-card strong { display: block; margin: 4px 0 7px; }.influence { height: 5px; border-radius: 10px; overflow: hidden; background: rgb(255 255 255 / 15%); margin-bottom: 7px; }.influence span { display: block; height: 100%; background: var(--red); }

.camera-stage { position: relative; height: calc(100dvh - 350px); min-height: 390px; overflow: hidden; background: var(--ink); touch-action: none; }
#camera, .camera-fallback, #tagCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#camera { object-fit: cover; }.camera-fallback { display: grid; place-content: center; gap: 8px; text-align: center; padding: 40px; color: white; background: radial-gradient(circle at 50% 25%, #45646f, #172b36 70%); }.camera-fallback span { font-weight: 950; font-size: 28px; letter-spacing: .08em; }.camera-fallback small { color: #c9d8d8; line-height: 1.5; }.camera-fallback.hidden { display: none; }
#tagCanvas { z-index: 4; cursor: crosshair; }
.ar-reticle { position: absolute; z-index: 2; left: 50%; top: 44%; translate: -50% -50%; width: 115px; aspect-ratio: 1; border: 3px solid var(--gold); border-radius: 50%; opacity: .7; pointer-events: none; }.ar-reticle span::before, .ar-reticle span::after { content:""; position:absolute; background:white; }.ar-reticle span::before { width: 150px; height: 2px; top: 55px; left: -20px; }.ar-reticle span::after { height: 150px; width: 2px; left: 55px; top: -20px; }
.surface-label { position: absolute; z-index: 5; left: 14px; top: 14px; background: rgb(23 43 54 / 80%); color: white; border-radius: 13px; padding: 9px 12px; pointer-events: none; }.surface-label small { display:block; color: var(--gold); font-size:8px; letter-spacing:.1em; }.surface-label strong { font-size: 11px; }
.companion { position: absolute; z-index: 5; left: 22px; bottom: 20px; width: 78px; height: 122px; pointer-events: none; animation: floaty 2.4s ease-in-out infinite; }.head { position:absolute; z-index:2; left:18px; top:0; width:45px; height:45px; border-radius:50%; display:grid; place-items:center; background:#efc5a5; color:var(--ink); font-weight:900; }.body { position:absolute; left:9px; top:37px; width:61px; height:79px; border-radius:22px 22px 15px 15px; background:var(--blue); border:3px solid white; }.flag { position:absolute; width:40px; height:29px; background:var(--red); right:-20px; top:39px; box-shadow:-3px 0 0 var(--ink); }.flag::after { content:""; position:absolute; width:4px; height:74px; background:var(--ink); left:-4px; top:0; }
@keyframes floaty { 50% { translate: 0 -8px; } }

.paint-panel { padding: 12px; background: var(--paper); }.mode-switch { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.tool { min-height:42px; border:0; border-radius:12px; background:#d7cdb5; color:var(--ink); font-weight:850; }.tool.active { background:var(--ink); color:white; }.tool.report.active { background:var(--red); }.paint-options { display:flex; align-items:end; gap:10px; margin-top:11px; }.paint-options label { flex:1; font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:#69797f; }.paint-options select { display:block; width:100%; margin-top:4px; border:1px solid #c7bca3; border-radius:10px; padding:9px; background:var(--white); color:var(--ink); }.color-list { display:flex; gap:5px; }.color { width:30px; aspect-ratio:1; border-radius:50%; background:var(--color); border:3px solid var(--paper); box-shadow:0 0 0 1px #a99f89; }.color.active { box-shadow:0 0 0 3px var(--ink); }.clear-button { border:0; background:var(--red); color:white; border-radius:10px; padding:10px; font-size:10px; font-weight:800; }.paint-hint { margin:9px 2px 0; min-height:30px; font-size:10px; line-height:1.4; color:#68777c; }

.section-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 16px 12px; }.section-heading small { color:var(--red); font-size:9px; letter-spacing:.1em; font-weight:900; }.section-heading h1 { margin:3px 0 0; font-size:25px; }.section-heading button { border:0; border-radius:12px; padding:11px; background:var(--ink); color:var(--gold); font-size:10px; font-weight:900; }
.shop-tabs { display:flex; gap:7px; padding:0 16px 12px; overflow-x:auto; scrollbar-width:none; }.shop-tab { border:1px solid #c9bea5; background:var(--white); border-radius:999px; padding:9px 13px; font-size:11px; white-space:nowrap; }.shop-tab.active { background:var(--red); border-color:var(--red); color:white; }
.catalog { display:grid; gap:10px; padding:0 16px; }.product { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:11px; padding:12px; border:1px solid #c9bea5; border-radius:16px; background:var(--white); box-shadow:0 5px 18px rgb(32 50 57 / 6%); }.product-icon { width:54px; aspect-ratio:1; display:grid; place-items:center; border-radius:13px; background:#e3dac4; font-size:25px; }.product h3 { margin:0; font-size:14px; }.product p { margin:3px 0; font-size:10px; color:#6b797e; }.product small { font-size:9px; color:var(--red); font-weight:800; }.product button { border:0; border-radius:11px; padding:10px; background:var(--ink); color:white; font-size:10px; font-weight:900; min-width:76px; }.product button:disabled { opacity:.42; cursor:not-allowed; }
.quota-note { margin:13px 16px; border-left:4px solid var(--gold); background:#e3dac4; padding:11px 13px; display:grid; gap:2px; font-size:10px; }.quota-note strong { font-size:12px; }

.profile-card { display:flex; align-items:center; gap:14px; margin:18px 16px 12px; padding:18px; background:var(--ink); color:white; border-radius:20px; }.profile-avatar { width:68px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--ink); font-size:25px; font-weight:950; border:4px solid white; }.profile-card small { color:var(--gold); font-size:9px; }.profile-card h1 { margin:3px 0; font-size:20px; }.profile-card p { margin:0; color:#cad8d8; font-size:10px; }.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px; }.stats-grid article { display:grid; text-align:center; gap:3px; padding:13px 6px; border:1px solid #c9bea5; background:var(--white); border-radius:14px; }.stats-grid b { font-size:20px; }.stats-grid span { font-size:9px; color:#6a787e; }
.inventory-card { width:calc(100% - 32px); margin:12px 16px; padding:16px; border:0; color:var(--ink); background:#e2d8c1; border-radius:17px; text-align:left; }.inventory-shortcut { display:flex; align-items:center; justify-content:space-between; gap:15px; }.inventory-shortcut small { display:block; color:var(--red); font-size:8px; font-weight:900; letter-spacing:.1em; }.inventory-shortcut h2 { margin:3px 0 0; font-size:16px; }.inventory-shortcut b { white-space:nowrap; font-size:11px; }

.inventory-heading { padding-bottom:7px; }.capacity-label { text-align:right; }.capacity-label b { display:block; font-size:15px; }.capacity-label small { display:block; margin-top:2px; color:#69797f; font-size:8px; letter-spacing:.08em; }.capacity-track { height:7px; margin:0 16px 13px; border-radius:99px; overflow:hidden; background:#d2c6ac; }.capacity-track span { display:block; height:100%; width:17%; border-radius:inherit; background:var(--red); transition:width .25s ease; }
.loadout-card { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0 16px 13px; overflow:hidden; border-radius:15px; background:#50636b; color:white; }.loadout-card div { min-width:0; padding:12px; background:var(--ink); }.loadout-card small { display:block; margin-bottom:4px; color:var(--gold); font-size:8px; letter-spacing:.08em; }.loadout-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.inventory-filters { display:flex; gap:7px; padding:0 16px 12px; overflow-x:auto; scrollbar-width:none; }.inventory-filter { border:1px solid #c9bea5; background:var(--white); border-radius:999px; padding:8px 12px; color:var(--ink); font-size:10px; white-space:nowrap; }.inventory-filter.active { border-color:var(--ink); background:var(--ink); color:var(--gold); }
.inventory-grid { display:grid; gap:10px; padding:0 16px; }.inventory-item { display:grid; grid-template-columns:56px 1fr auto; gap:11px; align-items:center; padding:12px; border:1px solid #c9bea5; border-radius:16px; background:var(--white); box-shadow:0 5px 18px rgb(32 50 57 / 6%); }.inventory-item.equipped { border-color:var(--gold); box-shadow:inset 4px 0 0 var(--gold); }.inventory-icon { position:relative; width:56px; aspect-ratio:1; display:grid; place-items:center; border-radius:14px; background:#e3dac4; font-size:26px; }.inventory-icon b { position:absolute; right:-5px; bottom:-5px; min-width:24px; height:24px; display:grid; place-items:center; border:2px solid var(--white); border-radius:50%; background:var(--red); color:white; font-size:9px; }.inventory-info { min-width:0; }.inventory-info h3 { margin:0; font-size:13px; }.inventory-info p { margin:3px 0 7px; color:#69797f; font-size:9px; }.item-level { display:flex; align-items:center; gap:7px; }.item-level small { flex:0 0 auto; color:var(--red); font-size:8px; font-weight:900; }.xp-track { flex:1; height:5px; overflow:hidden; border-radius:99px; background:#ddd4c0; }.xp-track span { display:block; height:100%; border-radius:inherit; background:var(--blue); }.durability { display:block; margin-top:5px; color:#69797f; font-size:8px; }.inventory-action { min-width:66px; border:0; border-radius:10px; padding:9px 8px; background:var(--ink); color:white; font-size:9px; font-weight:900; }.inventory-action:disabled { opacity:.35; cursor:not-allowed; }.inventory-empty { padding:28px 20px; border:1px dashed #b7ab93; border-radius:16px; text-align:center; color:#69797f; font-size:11px; }

.bottom-nav { position:sticky; z-index:20; bottom:0; height:78px; padding:7px 5px max(8px, env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); background:var(--ink); color:white; }.nav-item { min-width:0; border:0; background:transparent; color:#aebfc3; display:grid; place-content:center; gap:2px; font-size:8px; font-weight:800; }.nav-item span { font-size:20px; line-height:1; }.nav-item.active { color:var(--gold); }

dialog { width:min(90%, 390px); border:0; border-radius:21px; padding:0; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }dialog::backdrop { background:rgb(13 28 35 / 72%); backdrop-filter:blur(3px); }dialog form { position:relative; padding:25px; }dialog small { color:var(--red); font-weight:900; letter-spacing:.1em; }dialog h2 { margin:5px 0; }dialog p { color:#5d6e74; font-size:13px; line-height:1.5; }dialog label { display:grid; gap:5px; font-size:11px; font-weight:800; }dialog input { width:100%; padding:12px; border:1px solid #b9ad94; border-radius:10px; background:white; }.dialog-close { position:absolute; right:13px; top:12px; border:0; background:transparent; font-size:24px; }.primary-action { width:100%; margin-top:13px; padding:13px; border:0; border-radius:11px; background:var(--red); color:white; font-weight:900; }
.toast { position:fixed; z-index:100; left:50%; bottom:96px; translate:-50% 20px; width:min(calc(100% - 34px), 500px); background:var(--ink); color:white; border-radius:13px; padding:12px 14px; text-align:center; font-size:11px; opacity:0; pointer-events:none; transition:.2s; box-shadow:var(--shadow); }.toast.show { opacity:1; translate:-50% 0; }

@media (min-width: 700px) { body { padding-block: 18px; }.app-shell { min-height: calc(100dvh - 36px); border-radius: 26px; }.map-stage { height: calc(100dvh - 290px); }.camera-stage { height: calc(100dvh - 380px); } }
@media (max-width: 380px) { .brand strong { font-size:12px; }.brand-mark { width:36px; }.wallet { padding:7px; }.paint-options { gap:6px; }.color { width:26px; }.clear-button { padding:8px 6px; }.inventory-item { grid-template-columns:48px 1fr auto; gap:8px; }.inventory-icon { width:48px; }.inventory-action { min-width:58px; padding-inline:6px; }.nav-item { font-size:7px; } }