* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1026; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; user-select: none; }
#game, #game canvas { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* Overlays / panels */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 10, 25, 0.55); backdrop-filter: blur(2px); z-index: 20; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
/* The panel gets its own layer under the ✕: Safari can otherwise paint a scrolling panel over it. */
.overlay > .panel { position: relative; z-index: 1; }
.panel { width: min(440px, 100%); max-height: 100%; overflow: auto; background: rgba(20, 24, 34, 0.92); border: 2px solid #3a4255; border-radius: 10px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.panel.wide { width: min(720px, 100%); }
h1 { margin: 0; font-size: 2.6rem; letter-spacing: 2px; text-shadow: 3px 3px 0 #2b5a1e; color: #9be06a; text-align: center; }
h2 { margin: 0 0 6px; }
.tag { text-align: center; margin: 4px 0 18px; color: #aab3c5; }
.note { color: #9aa3b5; font-size: .85rem; margin: 8px 0; }
#loading { text-align: center; color: #e6c35c; font-size: .9rem; }
button { font: inherit; cursor: pointer; border: 2px solid #4b556b; background: #2b3245; color: #fff; padding: 8px 14px; border-radius: 6px; }
button:hover { background: #364058; }
button.primary { display: block; width: 100%; padding: 12px; font-size: 1.2rem; font-weight: 700; background: #3f7d2a; border-color: #66b043; }
button.primary:hover { background: #4a9132; }
button:disabled { opacity: .5; cursor: wait; }
.section { margin-top: 18px; display: grid; gap: 10px; }
.section.row { display: flex; gap: 8px; }
.section label { display: grid; gap: 4px; font-size: .9rem; color: #cfd6e4; }
.section label span { color: #9be06a; font-weight: 600; }
input[type=range] { width: 100%; accent-color: #66b043; }
input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; }
details { margin-top: 14px; }
summary { cursor: pointer; color: #cfd6e4; }
table.controls { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
table.controls td { padding: 4px 6px; border-bottom: 1px solid #2c3345; }
table.controls td:first-child { color: #e6c35c; white-space: nowrap; font-weight: 600; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#crosshair { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: #fff; }
#crosshair::before { top: 10px; left: 0; width: 22px; height: 2px; }
#crosshair::after { top: 0; left: 10px; width: 2px; height: 22px; }
#hotbar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,.45); border: 2px solid rgba(0,0,0,.6); border-radius: 6px; }
.slot { position: relative; width: 52px; height: 52px; border: 3px solid #6b6b6b; background: rgba(139,139,139,.35); display: flex; align-items: center; justify-content: center; }
.slot img { width: 38px; height: 38px; image-rendering: pixelated; }
.slot .num { position: absolute; top: 1px; left: 3px; font-size: 10px; color: #ddd; text-shadow: 1px 1px 0 #000; }
.slot.active { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 10px rgba(255,255,255,.6); }
#toast { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); font-weight: 700; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s; }
#toast.show { opacity: 1; transition: none; }
#mode-badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 10px; background: rgba(0,0,0,.5); border-radius: 4px; font-size: .8rem; font-weight: 700; letter-spacing: 1px; color: #9be06a; }
#debug { position: absolute; top: 8px; left: 8px; font: 13px/1.45 ui-monospace, Menlo, monospace; background: rgba(0,0,0,.45); padding: 6px 10px; border-radius: 4px; white-space: pre; }
#water-overlay { position: fixed; inset: 0; background: rgba(25, 70, 180, .38); pointer-events: none; z-index: 5; }

/* Inventory */
#inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 12px; }
.inv-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; font-size: .72rem; text-align: center; background: #232a3b; }
.inv-item img { width: 44px; height: 44px; image-rendering: pixelated; }
.nojs { position: fixed; inset: 0; display: grid; place-items: center; }

/* Game mode picker */
.mode-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; color: #cfd6e4; }
.seg { display: flex; border: 2px solid #4b556b; border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: #1b2030; padding: 6px 12px; }
.seg button.on { background: #3f7d2a; }

/* Survival HUD */
#status { position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%); width: 488px; max-width: calc(100% - 32px); display: flex; justify-content: space-between; align-items: flex-end; }
#hearts, #bubbles { display: flex; gap: 1px; font-size: 19px; line-height: 1; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.heart { color: #e0302a; }
.heart.half { background: linear-gradient(90deg, #e0302a 50%, #3a1010 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heart.empty { color: #ffd0cd; }
.bubble { color: #8fd3ff; }
#damage-flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(circle, transparent 40%, rgba(220, 0, 0, .55)); opacity: 0; transition: opacity .4s; }
#damage-flash.on { opacity: 1; transition: none; }
#hint { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); max-width: 90%; text-align: center; font-weight: 700; color: #ffe27a; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .4s; }
#hint.show { opacity: 1; transition: none; }
.slot .count { position: absolute; right: 3px; bottom: 1px; font-size: 13px; font-weight: 700; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

/* Inventory + crafting screen */
.craft-panel { width: min(980px, 100%); display: grid; grid-template-columns: auto 1fr; gap: 24px; }
@media (max-width: 860px) { .craft-panel { grid-template-columns: 1fr; } }
.slot-grid { display: grid; grid-template-columns: repeat(9, 50px); gap: 4px; }
.slot-grid.hotrow { margin-top: 10px; padding-top: 10px; border-top: 2px dashed #3a4255; }
.slot-grid .slot { width: 50px; height: 50px; border-width: 2px; cursor: pointer; background: rgba(139,139,139,.25); }
.slot-grid .slot:hover { border-color: #fff; }
.slot-grid .slot img { width: 34px; height: 34px; }
#cursor-stack { position: fixed; width: 44px; height: 44px; pointer-events: none; z-index: 30; transform: translate(-50%, -50%); }
#cursor-stack img { width: 44px; height: 44px; image-rendering: pixelated; }
#cursor-stack .count { position: absolute; right: 0; bottom: 0; font-weight: 700; text-shadow: 1px 1px 0 #000; }
#recipes { display: grid; gap: 6px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.recipe { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 6px 10px; background: #232a3b; }
.recipe img.out { width: 40px; height: 40px; image-rendering: pixelated; }
.recipe .name { font-weight: 700; }
.recipe .ins { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: .8rem; color: #cfd6e4; }
.recipe .ins span { display: inline-flex; align-items: center; gap: 2px; }
.recipe .ins img { width: 20px; height: 20px; image-rendering: pixelated; }
.recipe .ins .missing { color: #ff8a80; }
.recipe .badge { font-size: .7rem; padding: 2px 6px; border-radius: 4px; background: #3a4255; color: #cfd6e4; white-space: nowrap; }
.recipe.ok { border-color: #66b043; }
.recipe.ok .badge { background: #3f7d2a; color: #fff; }
.recipe.no { opacity: .55; }
.panel.center { text-align: center; }
h1.sad { color: #ffb36b; text-shadow: 3px 3px 0 #7a3a10; }

/* Touch controls (tablets / phones) */
.touch-only { display: none; }
body.touch .touch-only { display: block; }
body.touch, body.touch * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #game canvas { touch-action: none; }
#touch { position: fixed; inset: 0; z-index: 8; display: none; touch-action: none; }
#touch.active { display: block; }
#touch-look { position: absolute; inset: 0; }
#stick { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: 28px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35); }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tbtn { position: absolute; width: 64px; height: 64px; border-radius: 50%; font-size: 26px; line-height: 1; padding: 0; background: rgba(20,24,34,.45); border: 3px solid rgba(255,255,255,.4); color: #fff; touch-action: none; }
.tbtn.down { background: rgba(102,176,67,.7); }
.tbtn.big { width: 86px; height: 86px; font-size: 34px; }
#t-pause { top: 14px; left: max(14px, env(safe-area-inset-left)); width: 52px; height: 52px; font-size: 20px; }
#t-inv { right: max(24px, env(safe-area-inset-right)); bottom: 140px; }
#t-jump { right: max(24px, env(safe-area-inset-right)); bottom: 40px; }
#t-fly { right: calc(max(24px, env(safe-area-inset-right)) + 100px); bottom: 50px; }
#t-down { right: calc(max(24px, env(safe-area-inset-right)) + 100px); bottom: 130px; display: none; }
#touch.flying #t-down { display: block; }
#touch.survival #t-fly { display: none; }
body.touch #hud #hotbar { pointer-events: auto; bottom: 10px; }
body.touch #crosshair { width: 26px; height: 26px; }
@media (max-width: 700px) {
  body.touch .slot { width: 40px; height: 40px; }
  body.touch .slot img { width: 28px; height: 28px; }
  body.touch #status { bottom: 62px; }
  #stick { width: 120px; height: 120px; bottom: 70px; }
  #t-jump { bottom: 80px; }
  #t-inv { bottom: 175px; }
  #t-fly { bottom: 90px; }
  #t-down { bottom: 165px; }
}

button.done { margin-top: 14px; }

/* Quests */
.wide-btn { display: block; width: 100%; margin-top: 8px; }
#quest-tracker { position: absolute; top: 10px; right: max(10px, env(safe-area-inset-right)); width: 250px; max-width: 46vw; }
#qt-head { pointer-events: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: rgba(0,0,0,.5); border: 2px solid rgba(255,215,90,.6); font-weight: 700; color: #ffe27a; }
.qt-key { font-size: .72rem; color: #cfd6e4; font-weight: 400; }
body.touch .qt-key { display: none; }
.q-card { margin-top: 5px; padding: 6px 9px; background: rgba(0,0,0,.45); border-radius: 6px; font-size: .8rem; }
.q-card .q-title { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.q-card .q-text { color: #d7deea; margin-top: 2px; line-height: 1.3; }
.q-bar { height: 7px; margin-top: 5px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.q-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #66b043, #9be06a); transition: width .3s; }
.q-count { float: right; color: #ffe27a; font-weight: 700; }
@media (max-width: 700px) { #quest-tracker .q-text { display: none; } #quest-tracker { width: 190px; } }
#celebrate { position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; padding: 16px 28px; background: rgba(20,24,34,.88); border: 3px solid #ffd45a; border-radius: 12px; transition: opacity .35s, transform .35s; }
#celebrate.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#celebrate .c-title { color: #ffd45a; font-weight: 800; font-size: 1.4rem; letter-spacing: 1px; }
#celebrate .c-name { font-size: 1.1rem; margin-top: 4px; }
#celebrate .c-stars { font-size: 2rem; margin-top: 4px; letter-spacing: 4px; }
#celebrate .c-reveal { color: #9be06a; font-weight: 800; font-size: 1.5rem; }
#qb-list { display: grid; gap: 6px; max-height: 62vh; overflow: auto; margin-top: 8px; }
.qb-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: #232a3b; border-radius: 6px; border: 2px solid transparent; }
.qb-item .qb-icon { font-size: 1.5rem; text-align: center; }
.qb-item .qb-title { font-weight: 700; }
.qb-item .qb-text { font-size: .82rem; color: #cfd6e4; }
.qb-item .qb-stars { white-space: nowrap; font-size: 1.05rem; }
.qb-item.done { border-color: #66b043; }
.qb-item.active { border-color: #ffd45a; }
.qb-item.off { opacity: .72; }
.qb-item .tag { font-size: .7rem; padding: 1px 6px; border-radius: 4px; background: #3a4255; margin-left: 6px; font-weight: 400; }

/* Robot panel (docked so you can watch Bit work) */
#robot-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100%); z-index: 21; overflow: auto; padding: 18px; background: rgba(20, 24, 34, .94); border-left: 2px solid #3a4255; box-shadow: -10px 0 40px rgba(0,0,0,.4); }
#robot-panel h2 { margin: 0; }
#robot-panel h3 { margin: 14px 0 6px; font-size: .95rem; color: #cfd6e4; }
.rb-head { display: flex; gap: 12px; align-items: center; }
.rb-face { font-size: 2.4rem; }
.rb-status { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #232a3b; font-weight: 700; }
.rb-status.running { color: #9be06a; }
.rb-status.done { color: #ffe27a; }
.rb-status.error { color: #ffb36b; }
#rb-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rb-ex { text-align: left; font-size: .85rem; }
.rb-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 12px; }
.rb-row > button { flex: 1; }
#rb-blockly { height: 46vh; min-height: 300px; margin-top: 8px; border-radius: 8px; overflow: hidden; border: 2px solid #3a4255; }
#rb-blockly.hidden { display: none; }
button.go { background: #3f7d2a; border-color: #66b043; font-weight: 700; }
button.go:hover { background: #4a9132; }
#rb-code { margin: 10px 0 0; padding: 10px; background: #0e121b; border-radius: 6px; font: 13px/1.5 ui-monospace, Menlo, monospace; color: #b8f28f; white-space: pre-wrap; max-height: 24vh; overflow: auto; user-select: text; }
.blocklyToolboxDiv { font-family: system-ui, sans-serif; }
.blocklyWidgetDiv, .blocklyDropDownDiv, .blocklyTooltipDiv { z-index: 40 !important; }

/* Worlds */
.world-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
#world-name { font-weight: 700; font-size: 1.05rem; }
#world-list { display: grid; gap: 6px; max-height: 42vh; overflow: auto; margin-top: 8px; }
.w-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: #232a3b; border-radius: 6px; border: 2px solid transparent; }
.w-item.current { border-color: #66b043; }
.w-item .w-name { font-weight: 700; }
.w-item .w-meta { font-size: .78rem; color: #aab3c5; }
.w-item .w-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.w-item .w-actions button { padding: 5px 9px; font-size: .82rem; }
.w-h3 { margin: 16px 0 6px; font-size: 1rem; }
.new-world { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; align-items: center; }
@media (max-width: 700px) { .new-world { grid-template-columns: 1fr; } }

/* Villager trading */
#tr-list { display: grid; gap: 8px; margin-top: 10px; }
.trade { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: #232a3b; border-radius: 8px; border: 2px solid transparent; }
.trade.ok { border-color: #66b043; }
.trade .side { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.trade .side img { width: 36px; height: 36px; image-rendering: pixelated; }
.trade .have { font-size: .75rem; color: #aab3c5; font-weight: 400; }
.trade .have.short { color: #ff8a80; }
.trade .arrow { font-size: 1.4rem; color: #ffe27a; }
#t-undo { top: 74px; left: max(14px, env(safe-area-inset-left)); width: 52px; height: 52px; font-size: 24px; }
#touch.survival #t-undo { display: none; }

/* Daily building idea */
.idea-card { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #2a2f1e; border: 2px solid #6b7b3a; }
.idea-label { font-size: .78rem; color: #cbe08a; font-weight: 700; }
#idea-text { margin: 4px 0 8px; font-weight: 700; color: #fff7d6; }
#btn-idea { padding: 5px 10px; font-size: .82rem; }

/* Adventure mode */
.status-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#hunger { display: flex; gap: 1px; font-size: 17px; line-height: 1; }
.food { filter: drop-shadow(1px 1px 0 #000); }
.food.half { opacity: .6; }
.food.empty { opacity: .2; filter: grayscale(1); }
#xpbar { position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%); width: 400px; max-width: calc(100% - 40px); height: 7px; background: rgba(0,0,0,.6); border: 1px solid #000; border-radius: 3px; }
#xp-fill { height: 100%; width: 0; background: linear-gradient(90deg, #6fdc3a, #b8ff5a); border-radius: 2px; transition: width .2s; }
#xp-level { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-weight: 800; color: #b8ff5a; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; font-size: 14px; }
body #status { bottom: 92px; }
.hc { display: flex; gap: 6px; align-items: center; font-size: .85rem; color: #ffb3b3; margin-top: 6px; }
.gate-q { font-size: 2rem; font-weight: 800; text-align: center; margin: 10px 0; }
#gate-a { width: 100%; font: inherit; font-size: 1.3rem; padding: 8px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; text-align: center; }
.seg button#mode-adventure.on, .seg button#nw-adventure.on { background: #8a2c2c; }
#charge { position: absolute; top: calc(50% + 22px); left: 50%; transform: translateX(-50%); width: 60px; height: 5px; background: rgba(0,0,0,.6); border-radius: 3px; }
#charge-fill { height: 100%; width: 0; background: #ffe27a; border-radius: 3px; }
#armor-ind { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); font-size: .75rem; font-weight: 700; color: #cfe3ff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; }

/* "Add to Home Screen" guide (iPhone/iPad have no install popup) */
.install-help { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(90, 160, 230, .14); border: 1px solid rgba(90, 160, 230, .45); text-align: left; font-size: .92rem; }
.install-help ol { margin: 6px 0 4px 20px; padding: 0; }
.install-help li { margin: 4px 0; }
.install-help .share-icon { display: inline-block; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: .8em; }

/* ---------- Main menu ---------- */
.menu-panel { width: min(460px, 100%); }
.brand { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.brand .logo { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); image-rendering: auto; flex: none; }
.brand h1 { text-align: left; font-size: 2.3rem; line-height: 1.05; }
.brand .tag { text-align: left; margin: 2px 0 0; }
.menu-panel #loading { margin: 10px 0 6px; }
.menu-panel .world-row { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid #2c3446; }
.menu-panel #world-name { font-weight: 700; font-size: 1.05rem; }
.menu-side { margin-top: 16px; }
.mode-pick { flex-wrap: wrap; }
details.fold { margin-top: 10px; border: 1px solid #2c3446; border-radius: 8px; background: rgba(255, 255, 255, .03); }
details.fold > summary { padding: 9px 12px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: '▾'; color: #9aa3b5; transition: transform .15s; }
details.fold[open] > summary::after { transform: rotate(180deg); }
details.fold > .section, details.fold > table { margin: 0; padding: 0 12px 12px; }
select { width: 100%; }

/* Wider screens (tablets, laptops, landscape phones): two columns, no long scroll. */
@media (min-width: 720px) {
  .menu-panel { width: min(880px, 100%); display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 24px; align-items: start; }
  .menu-side { margin-top: 0; padding-left: 24px; border-left: 1px solid #2c3446; }
}
/* Short screens (phones held sideways): tighter spacing and a smaller title. */
@media (max-height: 520px) {
  .overlay { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .menu-panel { padding: 14px 16px; }
  .brand { justify-content: flex-start; margin-bottom: 2px; }
  .brand .logo { width: 44px; height: 44px; border-radius: 11px; }
  .brand h1 { font-size: 1.7rem; letter-spacing: 1px; }
  .brand .tag { font-size: .85rem; }
  .menu-panel button.primary { padding: 9px; }
  .menu-panel .idea-card { margin-top: 8px; padding: 8px 10px; }
  .menu-panel .note { margin: 6px 0; }
}
#btn-worlds { white-space: nowrap; flex: none; }

/* ---------- Phones held sideways (short screens) ---------- */
@media (max-height: 520px) {
  /* Quest tracker: just the current quest, small, so it never covers the touch buttons. */
  #quest-tracker { width: 200px; top: 6px; }
  #quest-tracker .q-text { display: none; }
  #quest-tracker .q-card ~ .q-card { display: none; }
  #qt-head { padding: 3px 8px; font-size: .85rem; }
  .q-card { padding: 4px 8px; font-size: .75rem; margin-top: 4px; }

  /* Hotbar, hearts and XP: compact and centred between the joystick and the buttons. */
  body.touch .slot { width: 38px; height: 38px; border-width: 2px; }
  body.touch .slot img { width: 26px; height: 26px; }
  body.touch .slot .count { font-size: 11px; }
  body.touch #hud #hotbar { bottom: 6px; gap: 3px; padding: 3px; }
  body.touch #xpbar { bottom: 54px; width: 300px; }
  body.touch #status { bottom: 62px; width: 380px; }
  body.touch #hearts, body.touch #bubbles, body.touch #hunger { font-size: 14px; }

  /* Joystick bottom left; jump, fly and backpack stacked bottom right. */
  #stick { width: 110px; height: 110px; left: max(14px, env(safe-area-inset-left)); bottom: 14px; }
  #stick-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .tbtn { width: 54px; height: 54px; font-size: 22px; }
  .tbtn.big { width: 70px; height: 70px; font-size: 28px; }
  #t-jump { right: max(14px, env(safe-area-inset-right)); bottom: 14px; }
  #t-fly { right: calc(max(14px, env(safe-area-inset-right)) + 8px); bottom: 92px; }
  #t-inv { right: calc(max(14px, env(safe-area-inset-right)) + 8px); bottom: 154px; }
  #touch.survival #t-inv { bottom: 92px; }
  #t-down { right: calc(max(14px, env(safe-area-inset-right)) + 84px); bottom: 92px; }
  #t-pause { top: 8px; width: 44px; height: 44px; font-size: 18px; }
  #t-undo { top: 58px; width: 44px; height: 44px; font-size: 20px; }
}

/* Creative picker tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tabs button { padding: 6px 10px; border-radius: 999px; font-size: .85rem; background: #1b2030; }
.tabs button.on { background: #3f7d2a; border-color: #66b043; }
#inventory .panel { display: flex; flex-direction: column; }
#inv-grid { overflow: auto; min-height: 0; flex: 1 1 auto; }

/* ---------- Play Together ---------- */
.together-btn { background: #24324f; border-color: #3b82f6; font-weight: 600; }
.together-btn:hover { background: #2c3d60; }
#tg-menu-state { color: #9cc3ff; font-weight: 400; }
.tg-panel { width: min(640px, 100%); }
.tg-panel h3 { margin: 0 0 4px; font-size: 1.05rem; }
.tg-me { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid #2c3446; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { padding: 4px 10px; border-radius: 999px; font-size: .85rem; background: #1b2030; border-color: var(--chip, #4b556b); }
.chip.on { background: var(--chip, #3f7d2a); border-color: #fff; color: var(--chip-ink, #fff); text-shadow: none; }
.chip:disabled { opacity: .55; cursor: default; }
.tg-start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width: 560px) { .tg-start { grid-template-columns: 1fr; } }
.tg-card { padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid #2c3446; display: flex; flex-direction: column; }
.tg-card .primary { margin-top: auto; }
.tg-row { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.tg-row input { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; font-size: 1.2rem; text-align: center; min-width: 0; }
.tg-row .primary { width: auto; flex: none; }
.tg-code-label { margin: 12px 0 2px; text-align: center; color: #9aa3b5; }
#tg-code-big { text-align: center; font-size: 3rem; font-weight: 800; letter-spacing: .25em; color: #9be06a; text-shadow: 3px 3px 0 #2b5a1e; }
#tg-players { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
#tg-players li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 6px; background: #1b2030; }
button.small { padding: 3px 8px; font-size: .8rem; }
button.go { background: #3f7d2a; border-color: #66b043; }
.tg-knock { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: #3a3218; border: 2px solid #e6c35c; margin-top: 8px; }
#tg-chip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: rgba(20, 40, 80, .7); border: 2px solid rgba(90, 150, 255, .7); font-size: .85rem; font-weight: 600; }
#knock { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(58, 50, 24, .95); border: 2px solid #e6c35c; pointer-events: auto; z-index: 9; max-width: calc(100% - 20px); }
#knock button { padding: 5px 10px; }
#knock-yes { background: #3f7d2a; border-color: #66b043; }
kbd { font: inherit; font-size: .75em; padding: 0 4px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
body.touch kbd { display: none; }
#emoji-bar { position: absolute; bottom: 132px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, .55); pointer-events: auto; z-index: 9; }
#emoji-bar button { font-size: 26px; line-height: 1; padding: 6px 8px; background: rgba(255, 255, 255, .08); border-color: transparent; position: relative; }
#emoji-bar small { position: absolute; right: 3px; bottom: 1px; font-size: 10px; color: #cfd6e4; }
body.touch #emoji-bar small { display: none; }
#t-emoji { right: calc(max(24px, env(safe-area-inset-right)) + 100px); bottom: 140px; }
@media (max-height: 520px) {
  #t-emoji { right: calc(max(14px, env(safe-area-inset-right)) + 70px); bottom: 154px; }
  #emoji-bar { bottom: 104px; }
  #emoji-bar button { font-size: 22px; padding: 4px 6px; }
}

/* Always-visible close button on pop-up panels */
.x-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 30; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 20px; font-weight: 700; line-height: 1; background: rgba(20, 24, 34, .92); border: 2px solid #8a93a8; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transform: translateZ(0); }
.x-close:hover { background: #364058; }
@media (max-height: 520px) { .x-close { width: 40px; height: 40px; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); } }

/* ---------- Accounts (online edition) ---------- */
.acc-panel { width: min(440px, 100%); }
.acc-tabs { margin: 10px 0 4px; }
.acc-tabs button { flex: 1; }
#acc-form { display: grid; gap: 10px; margin-top: 10px; }
#acc-form label, #acc-in label { display: grid; gap: 4px; font-size: .9rem; color: #cfd6e4; }
#acc-form input, #acc-in input { font: inherit; padding: 9px 10px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; user-select: text; -webkit-user-select: text; }
.acc-privacy { line-height: 1.4; }
#acc-msg:not(:empty) { color: #ffd479; }
button.danger { background: #7a2323; border-color: #c54848; }
.tg-login { margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .5); }
.tg-login p { margin: 0 0 10px; }

/* ---------- Phones (design audit fixes) ---------- */
/* "Turn your phone sideways" card, shown when a phone is held upright at Play. */
#rotate { z-index: 40; }
.rotate-panel { width: min(320px, 100%); }
.rotate-phone { font-size: 64px; line-height: 1.2; margin-bottom: 8px; animation: rotate-hint 2.4s ease-in-out infinite; }
@keyframes rotate-hint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; transform: rotate(-90deg); } }
#rotate-back { margin-top: 8px; }

/* Bit's panel: the ✕ stays at the screen's top right while the panel scrolls. */
#robot-panel > .x-close { position: fixed; }
#robot-panel .rb-head { padding-right: 48px; }

/* Touch tablets: at most two quests in the tracker, so it covers less of the world. */
body.touch #quest-tracker .q-card ~ .q-card ~ .q-card { display: none; }

/* Phones held sideways: keep the main button in reach and use one scroll per panel. */
@media (max-height: 520px) {
  /* Done stays pinned to the bottom of the panel instead of starting below the fold. */
  .panel > button.done { position: sticky; bottom: -1px; z-index: 2; margin-top: 10px; box-shadow: 0 -10px 14px 6px rgba(20, 24, 34, .95); }
  .panel { padding: 16px 18px 12px; }
  .panel > h2 { padding-right: 44px; }
  /* Quest book: the whole panel scrolls (no list scrolling inside a scrolling panel). */
  #qb-list { max-height: none; overflow: visible; }
  /* Block picker: tabs in one sideways-scrolling row, no subtitle, more room for blocks. */
  #inventory .panel > .note { display: none; }
  #inv-tabs { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #inv-tabs button { flex: none; }
  #inv-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-top: 8px; }
  /* Bit: compact header, editor sized to the screen, Run / Stop pinned to the bottom. */
  #robot-panel { padding: 10px 14px; }
  #robot-panel .rb-head .note, #rb-editor-note { display: none; }
  #robot-panel .rb-face { font-size: 1.6rem; }
  #rb-status { margin-top: 6px; padding: 6px 10px; }
  #rb-blockly { height: calc(100vh - 150px); min-height: 180px; }
  #rb-controls { position: sticky; bottom: -10px; z-index: 2; margin-top: 0; padding: 8px 0 10px; background: rgba(20, 24, 34, .98); }
}

/* Crafting on narrow screens: the 9-slot rows shrink to fit instead of pushing the panel
   sideways (they were 482px wide, more than an upright phone), and one scroll for the panel. */
.craft-panel > * { min-width: 0; }
.slot-grid { grid-template-columns: repeat(9, minmax(0, 50px)); }
#craft .slot-grid .slot { width: auto; height: auto; aspect-ratio: 1; }
#craft .slot-grid .slot img { width: 68%; height: auto; }
@media (max-width: 860px) { #recipes { max-height: none; overflow: visible; padding-right: 0; } }
/* Done pinned to the bottom on upright phones (sideways ones are too short: the ✕ is enough). */
@media (max-width: 860px) and (min-height: 521px) {
  #craft-done { position: sticky; bottom: -1px; z-index: 2; box-shadow: 0 -10px 14px 6px rgba(20, 24, 34, .95); }
}
/* Recipe cards: the station badge goes under the ingredients, so long names never push the card wider. */
.recipe { min-width: 0; grid-template-columns: 44px minmax(0, 1fr) auto; }
@media (max-width: 480px) {
  .recipe { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
  .recipe img.out { width: 36px; height: 36px; }
  .recipe .badge { grid-column: 2; justify-self: start; }
  .slot-grid { gap: 3px; }
  #craft .slot-grid .slot .count { font-size: 11px; right: 2px; bottom: 0; }
}
#game-version { white-space: nowrap; }

/* Sign-up: birth year, agreement and the grown-up step */
#acc-new-extra { display: grid; gap: 10px; }
#acc-new-extra select { font: inherit; padding: 8px 10px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; }
label.check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 8px; line-height: 1.35; }
label.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: #66b043; }
.acc-grownup { display: grid; gap: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(230, 195, 92, .12); border: 2px solid #e6c35c; }
.acc-grownup p { margin: 0; font-size: .9rem; line-height: 1.4; }
.legal-links a, .acc-privacy a { color: #9cc3ff; }
#account a { color: #9cc3ff; }
#account .hint { color: #9aa3b5; font-size: .85em; }

/* Free edition: link to the online edition */
a.online-link { display: block; text-align: center; text-decoration: none; color: #fff; padding: 8px 14px; border-radius: 6px; border: 2px solid #3b82f6; background: #24324f; font-weight: 600; margin-top: 8px; }
a.online-link:hover { background: #2c3d60; }
a.online-link small { display: block; font-weight: 400; color: #9cc3ff; }

/* ---------- Course Maker ---------- */
#course-hud { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(20, 40, 20, .78); border: 2px solid #66b043; font-size: 1.05rem; white-space: nowrap; }
#course-hud b { font-variant-numeric: tabular-nums; color: #ffe27a; }
#course-hud .course-key { font-size: .75rem; color: #cfd6e4; }
body.touch #course-hud .course-key { display: none; }
#t-photo { top: 14px; right: max(14px, env(safe-area-inset-right)); left: auto; width: 52px; height: 52px; font-size: 22px; }
#t-respawn { left: max(24px, env(safe-area-inset-left)); bottom: 200px; }
body.touch #quest-tracker { right: calc(max(10px, env(safe-area-inset-right)) + 60px); }
@media (max-height: 520px) {
  #course-hud { top: 34px; font-size: .9rem; padding: 4px 10px; }
  #t-photo { top: 8px; width: 44px; height: 44px; font-size: 18px; }
  #t-respawn { bottom: 134px; left: max(14px, env(safe-area-inset-left)); }
}

/* ---------- Photo Mode ---------- */
.photo-panel { width: min(900px, 100%); }
.ph-canvas { margin-top: 8px; border-radius: 8px; overflow: hidden; background: #000; cursor: crosshair; }
.ph-canvas { display: flex; justify-content: center; }
.ph-canvas canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 52vh; }
.ph-controls { display: grid; gap: 8px; margin-top: 10px; }
.ph-label { font-size: .8rem; color: #9aa3b5; }
.ph-controls .chips { margin-top: 4px; }
.ph-stickers .chip { font-size: 1.2rem; padding: 2px 8px; }
#ph-caption-row { display: grid; gap: 4px; }
#ph-caption { font: inherit; padding: 8px 10px; border-radius: 6px; border: 2px solid #4b556b; background: #121622; color: #fff; user-select: text; -webkit-user-select: text; }

/* Report a problem */
.report-btn { background: #3a2b2b; border-color: #9a5a5a; }
.report-panel { width: min(420px, 100%); }
.report-choices { display: grid; gap: 6px; margin: 10px 0; }
.report-choices .wide-btn { margin-top: 0; text-align: left; }

/* What's new card (once after an update) */
.news-panel { width: min(440px, 100%); }
.news-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.news-list li { display: grid; grid-template-columns: 2em 1fr; gap: 6px; align-items: start; line-height: 1.35; }
.news-list li span { font-size: 1.3rem; text-align: center; }
.news-panel a { color: #9be06a; }

/* Pet panel (armor + backpack) */
.pet-panel { width: min(520px, 100%); }
.pet-panel h3 { margin: 14px 0 6px; font-size: 1rem; }
.pet-hearts { margin: 4px 0 10px; font-size: 1.1rem; }
.pet-armor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pet-armor .slot { width: 44px; height: 44px; flex: none; }
.pet-armor .slot img { width: 34px; height: 34px; }
.pet-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pet-panel { max-height: 100%; overflow-y: auto; }
.pet-panel .slot-grid { grid-template-columns: repeat(9, minmax(0, 50px)); }
.pet-panel .slot-grid .slot { width: auto; height: auto; aspect-ratio: 1; }
.pet-panel .slot-grid .slot img { width: 68%; height: auto; }

/* ---------- Accessibility baseline (docs/accessibility.md) ---------- */
/* A clear keyboard focus ring everywhere (the browser's own is a thin 1px line on our dark panels). */
:focus-visible { outline: 3px solid #ffd45a; outline-offset: 2px; }
.panel:focus-visible, .overlay > .panel[tabindex="-1"]:focus { outline: none; }
input[type=range] { min-height: 24px; }

/* HUD text sits over any sky, even a bright one: give it a dark backing so it stays above 4.5:1. */
#hint, #toast, #armor-ind { background: rgba(8, 12, 22, .74); padding: 3px 12px; border-radius: 8px; }
#armor-ind:empty { display: none; }
#mode-badge { background: rgba(8, 12, 22, .78); }
#xp-level { background: rgba(8, 12, 22, .74); padding: 0 7px; border-radius: 8px; }
#hotbar { background: rgba(0, 0, 0, .62); }
.slot .num { font-size: 11px; color: #fff; }
.qb-item .tag { color: #e6ebf5; }

/* Phones and tablets: every button, field and tab is at least 44px to tap. */
body.touch button:not(.tbtn) { min-width: 44px; }
body.touch button:not(.tbtn), body.touch select, body.touch summary,
body.touch input[type=text], body.touch input[type=password], body.touch input[type=number], body.touch input[type=range] { min-height: 44px; }
body.touch .x-close { width: 44px; height: 44px; }
body.touch .legal-links a, body.touch .acc-privacy a, body.touch #news a, body.touch .install-help a { display: inline-block; padding: 14px 4px; }
body.touch details.fold > summary { padding-top: 12px; padding-bottom: 12px; }
body.touch #hud #hotbar .slot { width: 44px; height: 44px; }
body.touch #hud #hotbar .slot img { width: 30px; height: 30px; }
@media (max-height: 520px) { body.touch #xpbar { bottom: 66px; } body.touch #status { bottom: 74px; } }

/* Reduced motion: no pop-in zoom for celebrations, no fades or slides, a gentler damage flash. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  #celebrate { transform: translate(-50%, -50%); }
  #damage-flash { background: radial-gradient(circle, transparent 55%, rgba(220, 0, 0, .3)); }
}