:root {
  font-family: Barlow, "Noto Sans Georgian", system-ui, sans-serif;
  color: #f1f0eb;
  background: #202522;
  color-scheme: dark;
  --accent: #efbd73;
  --muted: #b4b9b1;
  --surface: #252b28;
  --edge: #d7ddcf38;
  --hud-top: max(13px, env(safe-area-inset-top));
  --hud-left: max(14px, env(safe-area-inset-left));
  --hud-right: max(14px, env(safe-area-inset-right));
  --hud-bottom: max(12px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body { position: relative; margin: 0; }
h1, h2, p, figure { margin: 0; }
#view, #view canvas, .overlay, #hud { position: absolute; inset: 0; width: 100%; height: 100%; }
#view canvas { display: block; }
.overlay { z-index: 2; display: flex; align-items: center; overflow: auto; }
.panel { width: min(100%, 460px); }
button, input { font: inherit; width: 100%; min-width: 0; border-radius: 3px; }
button { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid #fff1; background: var(--accent); color: #20170d; font-weight: 750; cursor: pointer; }
button:hover { background: #ffce87; }
button:disabled { opacity: .48; cursor: default; }
input { padding: 12px 13px; border: 1px solid var(--edge); background: #111613db; color: #fff; }
input:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
label { display: block; color: #d9dfd5; font-size: 13px; }
kbd { font: 700 11px monospace; border: 1px solid #dfdfcd55; padding: 2px 4px; border-radius: 2px; }
.touchOnly { display: none; }
.touchMode .desktopOnly, .touchMode .hudHelp { display: none; }
.touchMode .touchOnly { display: block; }

.menu {
  padding: 24px clamp(24px, 9vw, 145px) 60px;
  background: linear-gradient(90deg, #151b17f7, #171e18c9 38%, #161e1733 72%), linear-gradient(0deg, #171d18e8, transparent 28%);
}
.menu .panel { margin-block: auto; }
.mark { color: var(--accent); width: 41px; height: 41px; border: 1px solid #efbd7373; padding: 5px; margin-bottom: 14px; }
.mark svg { width: 100%; height: 100%; }
h1 { font-size: clamp(43px, 8vw, 94px); font-weight: 900; line-height: .96; letter-spacing: -.072em; }
h1 span { color: var(--accent); }
h2 { font-size: 25px; }
#join { width: min(100%, 335px); display: grid; gap: 8px; margin-top: clamp(18px, 5vh, 40px); }
.accountActions { display: flex; flex-wrap: wrap; gap: 8px; }
.accountActions button { flex: 1 1 0; width: auto; min-height: 44px; margin: 0; }
#menuStatus { color: var(--accent); font-size: 12px; min-height: 17px; }
.menuFooter { position: absolute; bottom: max(15px, env(safe-area-inset-bottom)); left: clamp(24px, 9vw, 145px); display: flex; align-items: center; gap: 8px; }
small, .menuFooter, .keys { color: var(--muted); font-size: 12px; }
.onlineDot { width: 7px; height: 7px; background: #9dc788; border-radius: 50%; }
.centered { justify-content: center; padding: 12px; background: #121714b5; }
.pausePanel { margin-block: auto; padding: 22px; background: #222824f5; border: 1px solid var(--edge); border-top: 2px solid var(--accent); box-shadow: 0 14px 70px #0009; }
.pausePanel p { margin: 10px 0 14px; color: var(--muted); }
.pausePanel .keys { margin: 12px 0 0; line-height: 1.65; }
.secondary, .inventoryClose { background: #313833; color: #e7e9df; border-color: var(--edge); }
.secondary { margin-top: 7px; }
.secondary:hover, .inventoryClose:hover { background: #454f47; }

#hud { pointer-events: none; text-shadow: 0 1px 3px #000; font-size: 13px; }
.hudTop { position: absolute; inset: var(--hud-top) var(--hud-right) auto var(--hud-left); display: grid; grid-template-columns: 1fr minmax(95px, 178px) 1fr; align-items: center; }
#user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; max-width: 95%; }
#online { text-align: right; white-space: nowrap; font-size: 11px; }
.compass { position: relative; min-height: 30px; padding: 1px 4px 11px; text-align: center; background: linear-gradient(90deg, transparent, #131915b3 25%, #131915b3 75%, transparent); font: 750 13px ui-monospace, monospace; letter-spacing: .07em; }
.compass::after { content: ""; position: absolute; inset: auto 0 2px; height: 6px; background: repeating-linear-gradient(90deg, #f1efde80 0 1px, transparent 1px 12px); mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent); }
.compass::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 2px); bottom: 1px; width: 4px; height: 8px; background: var(--accent); }
#reticle { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); color: #fff; filter: drop-shadow(0 1px 2px #111); }
#reticle::before, #reticle::after { content: ""; position: absolute; inset: calc(50% - 1px) 1px; background: linear-gradient(90deg, currentColor 36%, transparent 36% 64%, currentColor 64%); }
#reticle::after { transform: rotate(90deg); }
#reticle.focus { color: var(--accent); }
#target, #notice { position: absolute; top: calc(50% + 20px); left: 50%; max-width: calc(100% - 50px); transform: translateX(-50%); padding: 4px 8px; text-align: center; font-weight: 650; }
#target:not(:empty) { background: #171c18cc; border-radius: 3px; }
#notice { top: calc(50% + 49px); color: #ffe0a2; }
.hotbar, .supplies { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.hotbar { bottom: var(--hud-bottom); }
.supplies { bottom: calc(var(--hud-bottom) + 46px); }
.supplies span, .slot { display: flex; gap: 5px; align-items: center; background: #1d231edb; border: 1px solid var(--edge); border-radius: 3px; }
.supplies span { padding: 2px 6px 2px 3px; min-width: 39px; }
.supplies img { display: block; width: 20px; height: 20px; }
.supplies b { color: #f9deae; font: 700 11px ui-monospace, monospace; }
.slot { min-height: 39px; padding: 6px 10px; }
.slot.active { border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); color: #ffe3ae; }
.meters { position: absolute; left: 50%; top: calc(var(--hud-top) + 34px); transform: translateX(-50%); width: min(330px, 84vw); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.meters > div { min-width: 0; padding: 4px; border-radius: 2px; background: #1a201cce; }
.meters label { font-size: 9px; margin-bottom: 3px; color: #f0f0e6; white-space: nowrap; }
progress { display: block; width: 100%; height: 4px; appearance: none; border: 0; background: #424942; color: #a4b980; }
progress::-webkit-progress-bar { background: #424942; }
progress::-webkit-progress-value { background: currentColor; }
progress::-moz-progress-bar { background: currentColor; }
#hp { color: #da8378; }
#food { color: #e0b470; }
#water { color: #83b4cf; }
.hudHelp { position: absolute; left: var(--hud-left); bottom: var(--hud-bottom); font-size: 10px; }
.inventoryShortcut { position: absolute; z-index: 1; top: calc(var(--hud-top) + 34px); left: var(--hud-left); width: auto; min-height: 42px; padding: 7px 10px; pointer-events: auto; touch-action: manipulation; }
.inventoryShortcut kbd { border-color: #3f281d73; }
#buildPanel { position: absolute; left: 50%; bottom: calc(var(--hud-bottom) + 80px); transform: translateX(-50%); max-width: 85vw; min-width: 205px; padding: 7px 10px; border-radius: 3px; border: 1px solid #efbd7366; background: #222924ef; text-align: center; font-size: 12px; }
#buildChoice { color: #ffdeb0; font-weight: 750; }
#buildHint { margin-top: 3px; color: #d9e1d5; }
#buildPanel .desktopOnly { margin-top: 4px; display: block; color: var(--muted); font-size: 10px; }
.touchMode #buildPanel .desktopOnly { display: none; }

#touchControls { position: absolute; inset: 0; touch-action: none; user-select: none; --pad: clamp(76px, 23vmin, 115px); }
#touchLook, #moveZone { position: absolute; pointer-events: auto; touch-action: none; }
#touchLook { inset: 0 0 0 43%; }
#moveZone { inset: 28% 57% var(--hud-bottom) 0; }
#joystick { position: absolute; left: var(--hud-left); bottom: calc(var(--hud-bottom) + 45px); width: var(--pad); height: var(--pad); border-radius: 50%; border: 1px solid #e3e8da83; background: #171e186d; box-shadow: inset 0 0 0 8px #1016104f, 0 3px 14px #0005; }
#joystick.floating { left: var(--stick-x); top: var(--stick-y); bottom: auto; translate: -50% -50%; }
#joystick.sprinting { border-color: var(--accent); }
#stick { position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; margin: -20%; border-radius: 50%; border: 1px solid #e7dfbeaa; background: #aaa78b9e; }
.touchButton { justify-content: center; width: auto; min-width: 40px; min-height: 40px; padding: 4px 7px; border: 1px solid #e4e8da64; border-radius: 9px; background: #222a24dc; color: #f4f0e4; font-size: 11px; line-height: 1.1; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
.touchButton:hover { background: #222a24dc; }
.touchButton:active, .touchButton[aria-pressed="true"] { background: #645134; border-color: var(--accent); }
.touchPause, .touchFullscreen, .touchSprint, .touchGear, .touchActions { position: absolute; }
.touchPause { top: var(--hud-top); right: var(--hud-right); font-size: 16px; }
.touchFullscreen { top: var(--hud-top); right: calc(var(--hud-right) + 45px); }
.touchFullscreen svg { width: 17px; height: 17px; }
.touchSprint { left: var(--hud-left); bottom: var(--hud-bottom); min-width: var(--pad); }
.touchGear { left: 50%; bottom: var(--hud-bottom); transform: translateX(-50%); display: flex; gap: 5px; }
.touchGear .touchButton { padding-inline: 9px; }
.touchActions { right: var(--hud-right); bottom: var(--hud-bottom); display: grid; grid-template-columns: repeat(2, minmax(54px,auto)); gap: 5px; }
.hitButton { grid-column: span 2; min-height: 45px; border-color: #efbd739c; background: #63492dee; }
.hitButton:hover { background: #63492dee; }
#touchBuildNext[hidden] + #touchBuild { grid-column: span 2; }
.touchMode #online { margin-right: 90px; }
.touchMode #buildPanel { bottom: calc(var(--hud-bottom) + 82px); }
.touchMode .menu { padding-left: max(22px, env(safe-area-inset-left)); }
.touchMode .menuFooter { left: max(22px, env(safe-area-inset-left)); }
@media (max-width: 860px) { .hudHelp { display: none; } }
@media (orientation: portrait) {
  .touchMode .hudTop { grid-template-columns: 1fr minmax(83px,110px) 1fr; }
  .touchMode #online { position: absolute; right: 0; top: 44px; margin: 0; }
  .touchMode .inventoryShortcut { top: calc(var(--hud-top) + 65px); }
  .touchMode .supplies { top: calc(var(--hud-top) + 70px); right: var(--hud-right); bottom: auto; left: auto; transform: none; }
  .touchMode #buildPanel { top: calc(var(--hud-top) + 113px); bottom: auto; }
}
@media (orientation: portrait) and (max-width: 420px) {
  .touchMode .touchGear .touchButton { padding-inline: 5px; min-width: 36px; font-size: 10px; }
  .touchMode .touchActions { grid-template-columns: repeat(2,minmax(44px,auto)); }
  .touchMode .touchSprint { min-width: 68px; }
}
@media (orientation: landscape) and (max-height: 370px) {
  .touchButton { min-height: 33px; }
  .hitButton { min-height: 39px; }
  .menu { padding-block: 12px 35px; }
  .mark { width: 32px; height: 32px; margin-bottom: 8px; }
  #join { margin-top: 13px; }
}
#inventory { width: min(850px, calc(100% - 28px)); max-height: calc(100dvh - 24px); padding: 16px; color: #f1f0eb; background: #242a26; border: 1px solid #a1ad9b72; border-top: 2px solid var(--accent); border-radius: 4px; box-shadow: 0 16px 65px #000b; overscroll-behavior: contain; }
#inventory::backdrop { background: #111612b8; }
.inventoryHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.inventoryClose { width: auto; padding: 7px 11px; }
.inventoryLayout { display: grid; grid-template-columns: minmax(105px,.75fr) minmax(0,1.45fr); gap: 12px; }
.characterCard { position: relative; min-height: 200px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr); justify-items: center; background: radial-gradient(ellipse at 52% 70%, #66705a, #303a33 64%, #272e29); border: 1px solid var(--edge); }
.characterCard figcaption { z-index: 1; width: 100%; display: grid; gap: 2px; padding: 8px 10px; background: #1b231dc7; color: var(--muted); font-size: 11px; }
.characterCard strong { color: #fff0cb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.characterCard img { position: absolute; inset: 41px 0 0; display: block; width: 100%; height: calc(100% - 41px); padding: 4px 4px 6px; object-fit: contain; }
.inventoryContents { min-width: 0; }
.inventoryItems { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.inventoryItem { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 3px 5px; border-color: #d5dec749; background: radial-gradient(ellipse at 50% 40%,#4b5546,#353d35); color: #f3f0e7; font-size: 12px; touch-action: manipulation; }
.inventoryItem:hover { background: #4d5849; }
.inventoryItem[aria-pressed="true"] { border-color: var(--accent); color: #ffe2b1; background: radial-gradient(ellipse at 50% 40%,#66583e,#483d2b); box-shadow: inset 0 -2px var(--accent); }
.inventoryItemPicture { display: block; width: 100%; max-width: 80px; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 3px #0007); }
.inventoryItemEmpty .inventoryItemPicture { opacity: .45; }
.inventoryItemName { text-align: center; overflow-wrap: anywhere; }
.inventoryItemCount { position: absolute; top: 4px; right: 4px; min-width: 19px; padding: 2px 4px; border-radius: 2px; background: #171d17eb; color: #ffe0ae; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.inventoryDetails { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; }
.inventoryDetails button { justify-content: center; padding: 7px; }
.inventoryDrop { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0,1fr) minmax(39px,57px) auto; gap: 5px; align-items: center; padding-top: 6px; border-top: 1px solid var(--edge); }
.inventoryDrop label { font-size: 11px; }
.inventoryDrop input { padding: 6px; }
#inventoryNotice { min-height: 16px; margin-top: 5px; color: #ffe0a2; font-size: 12px; }
@media (orientation: portrait) and (max-width: 440px) {
  #inventory { padding: 9px; }
  .inventoryLayout { grid-template-columns: minmax(0,.52fr) minmax(0,1.48fr); gap: 6px; }
  .characterCard figcaption { padding: 5px 4px; }
  .inventoryDrop { grid-template-columns: minmax(39px,1fr) auto; }
  .inventoryDrop label { grid-column: 1/-1; }
}
@media (orientation: landscape) and (max-height: 480px) {
  #inventory { padding: 10px; }
  .inventoryHeader { margin-bottom: 7px; }
  .inventoryItems { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .inventoryItemPicture { max-width: 65px; }
  .characterCard { min-height: 172px; }
}

.slot small, .touchGear small { color: #efd6a9; font: 700 10px ui-monospace, monospace; }
.touchGear .touchButton { flex-direction: column; gap: 2px; }
#inventoryTools { margin-top: 8px; color: #efd6a9; font-size: 11px; }