:root {
  --ink: #f4f1e8;
  --dim: #c9c4b4;
  --panel: rgba(20, 18, 16, 0.78);
  --line: rgba(255, 255, 255, 0.14);
  --green: #7cf0a4;
  --red: #ff7b6b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #8fc7ef; }
body { color: var(--ink); font-family: 'VT323', ui-monospace, Consolas, monospace; font-size: 20px; line-height: 1.1; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; image-rendering: pixelated; cursor: crosshair; }

.hud.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: 8px 12px; pointer-events: none; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.hud.top .world { font-size: 26px; }
.hud.top .spacer { flex: 1; }
.dim { color: var(--dim); }
.small { font-size: 17px; }
.pill { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); padding: 3px 12px; text-shadow: none; }

.chat { position: fixed; left: 12px; bottom: 12px; width: min(420px, 40vw); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.chat .log { display: flex; flex-direction: column; gap: 1px; font-size: 18px; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.chat .log b { color: #ffe58a; font-weight: normal; }
.chat .log .sys { color: #9fe8ff; }
.chat input { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); padding: 4px 8px; font-size: 18px; opacity: .55; }
.chat input:focus { opacity: 1; }

.hotbar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); }
.slot { position: relative; width: 48px; height: 48px; border: 2px solid transparent; background: rgba(255,255,255,0.06); display: grid; place-items: center; cursor: pointer; }
.slot.on { border-color: #ffe58a; background: rgba(255,229,138,0.14); }
.slot canvas { width: 36px; height: 36px; image-rendering: pixelated; pointer-events: none; }
.slot .n { position: absolute; right: 2px; bottom: 0; font-size: 16px; text-shadow: 0 1px 0 #000, 1px 0 0 #000; pointer-events: none; }
.slot .k { position: absolute; left: 3px; top: 0; font-size: 14px; color: var(--dim); pointer-events: none; }

.toast { position: fixed; left: 50%; top: 48px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); padding: 4px 12px; display: none; }
.toast.on { display: block; }

.bag { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); background: rgba(20,18,16,0.94); border: 1px solid var(--line); padding: 12px; display: none; flex-direction: column; gap: 10px; }
.bag.on { display: flex; }
.bag-head { display: flex; justify-content: space-between; align-items: center; font-size: 24px; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.bag-grid .cell { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); padding: 4px; cursor: pointer; }
.bag-grid .cell canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bag-grid .cell.on { outline: 2px solid #ffe58a; }

.touch { position: fixed; inset: auto 0 70px 0; display: none; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.tbtn { pointer-events: auto; width: 64px; height: 64px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; }
.tbtn.jump { width: 84px; }
.touch .tbtn[data-key="right"] { margin-right: auto; margin-left: 10px; }
.arrow { width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.arrow.l { border-right: 16px solid var(--ink); }
.arrow.r { border-left: 16px solid var(--ink); }
@media (pointer: coarse) {
  .touch { display: flex; }
  .chat { bottom: auto; top: 44px; width: min(360px, 45vw); }
  .chat .log { font-size: 16px; }
}

.overlay { position: fixed; inset: 0; background: rgba(14, 24, 36, 0.72); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.overlay.on { display: flex; }
.card { background: rgba(20,18,16,0.95); border: 1px solid var(--line); padding: 22px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; }
.card h1 { font-size: 46px; font-weight: normal; color: var(--green); line-height: 1; }
.card label { color: var(--dim); }
.card input { background: rgba(255,255,255,0.08); border: 1px solid var(--line); padding: 8px 10px; font-size: 22px; }
.btn { background: var(--green); color: #12201a; padding: 8px 14px; font-size: 22px; text-align: center; }
.err { color: var(--red); min-height: 1em; }

.rotate { display: none; position: fixed; inset: 0; z-index: 30; background: #10141a; color: var(--green); font-size: 26px; align-items: center; justify-content: center; text-align: center; padding: 24px; }
@media (orientation: portrait) and (max-width: 700px) { .rotate { display: flex; } }
@media (max-height: 520px) {
  .slot { width: 40px; height: 40px; }
  .slot canvas { width: 30px; height: 30px; }
}

.btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.worlds { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; }
.world-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; background: rgba(255,255,255,0.06); text-align: left; }
.world-row:hover { background: rgba(255,255,255,0.12); }