:root {
  --slot: calc(44px * var(--gui, 1));
  --ui-bg: #c6c6c6;
  --ui-dark: #373737;
  --ui-mid: #8b8b8b;
  --accent: #3b82f6;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; user-select: none; }
#game, #game canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); mix-blend-mode: difference; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: #fff; }
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.35)); }
#hurtflash { position: absolute; inset: 0; background: rgba(255,0,0,0.35); opacity: 0; transition: opacity .3s; }
#waterOverlay { position: absolute; inset: 0; background: rgba(20,50,140,0.35); display: none; }
#hotbar { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; padding: 3px; background: rgba(0,0,0,0.45); border: 2px solid #111; border-radius: 3px; }
#hotbar .slot { background: rgba(140,140,140,0.35); border: 2px solid rgba(255,255,255,0.12); margin: 0 1px; }
#hotbar .slot.sel { border: 3px solid #fff; box-shadow: 0 0 0 2px #000 inset; }
#bars { position: absolute; bottom: 64px; left: 50%; width: 414px; transform: translateX(-50%); height: 44px; }
.bar { position: absolute; display: flex; gap: 1px; }
#hearts { left: 0; bottom: 0; }
#food { right: 0; bottom: 0; flex-direction: row-reverse; }
#bubbles { right: 0; bottom: 22px; flex-direction: row-reverse; }
.bar img { width: 18px; height: 18px; image-rendering: pixelated; }
.bar.shake img { animation: shake .25s; }
@keyframes shake { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
#itemName { position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%); text-shadow: 2px 2px #000; font-size: 15px; transition: opacity .5s; opacity: 0; }
#debug { position: absolute; left: 6px; top: 6px; font-size: 13px; line-height: 1.45; white-space: pre; }
#debug span { background: rgba(0,0,0,0.5); padding: 0 4px; }
#chatLog { position: absolute; left: 6px; bottom: 120px; width: min(560px, 60vw); display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
#chatLog div { background: rgba(0,0,0,0.45); padding: 2px 6px; text-shadow: 1px 1px #000; transition: opacity .8s; word-wrap: break-word; }
#chatLog div.fade { opacity: 0; }
#hud.chatting #chatLog div { opacity: 1 !important; }
#chatLog .sys { color: #ffdd55; }
#chatInput { position: absolute; left: 6px; bottom: 90px; width: min(560px, 60vw); background: rgba(0,0,0,0.6); color: #fff; border: 1px solid #555; padding: 6px; font: inherit; font-size: 14px; outline: none; pointer-events: auto; }

/* ---------- slots ---------- */
.slot { width: var(--slot); height: var(--slot); position: relative; display: inline-flex; align-items: center; justify-content: center; }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.slot .count { position: absolute; right: 2px; bottom: 0; font-size: 14px; font-weight: bold; text-shadow: 2px 2px #3f3f3f; pointer-events: none; }
.slot .dur { position: absolute; left: 5px; right: 5px; bottom: 4px; height: 3px; background: #000; pointer-events: none; }
.slot .dur i { display: block; height: 100%; }
.panel .slot { background: var(--ui-mid); border: 2px solid; border-color: var(--ui-dark) #fff #fff var(--ui-dark); cursor: pointer; }
.panel .slot:hover { background: #a8a8a8; }
.slot.floating { position: fixed; pointer-events: none; z-index: 30; transform: translate(-50%, -50%); }

/* ---------- containers ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay.dim { background: rgba(0,0,0,0.55); }
.overlay.red { background: rgba(120,0,0,0.6); }
.menu-bg { background: linear-gradient(rgba(10,14,24,0.6), rgba(10,14,24,0.85)), repeating-linear-gradient(45deg, #3a2a1c 0 16px, #4a3826 16px 32px); }
.panel { position: relative; max-height: 96vh; overflow-y: auto; background: var(--ui-bg); color: #3f3f3f; border: 3px solid; border-color: #fff #555 #555 #fff; border-radius: 4px; padding: 12px; box-shadow: 0 0 0 2px #000; }
.screen-close { position: absolute; top: 4px; right: 6px; border: 0; padding: 0 4px; background: none; color: #333; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.screen-close:hover, .screen-close:focus-visible { color: #1d4ed8; }
.panel h3 { margin: 0 0 6px; font-size: 14px; font-weight: normal; }
.grid { display: grid; gap: 0; }
.row { display: flex; align-items: center; gap: 14px; }
.arrow { font-size: 30px; color: #8b8b8b; position: relative; width: 44px; text-align: center; }
.arrow .fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #fff; white-space: nowrap; }
.flame { width: 28px; height: 28px; position: relative; font-size: 22px; text-align: center; color: #8b8b8b; }
.flame .fill { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; color: #ff8a00; }
.sep { height: 10px; }
.creative-search { width: 100%; margin-bottom: 8px; padding: 5px; font: inherit; border: 2px solid #555; background: #000; color: #fff; }
.creative-grid { max-height: 50vh; overflow-y: auto; }
.trash { background: #a05050 !important; }
#tooltip { position: fixed; z-index: 31; background: rgba(16,0,16,0.94); border: 2px solid #2a0f5a; color: #fff; padding: 3px 7px; font-size: 13px; pointer-events: none; }

/* ---------- menus ---------- */
.menu { display: flex; flex-direction: column; gap: 10px; width: min(420px, 90vw); align-items: stretch; text-align: center; }
.menu.wide { width: min(620px, 94vw); }
.menu h2 { margin: 0 0 6px; font-weight: normal; text-shadow: 2px 2px #000; }
.logo { font-size: 52px; letter-spacing: 3px; margin: 0; color: #e8e8e8; text-shadow: 4px 4px #000, 0 0 24px rgba(59,130,246,0.45); }
.sub { margin: 0 0 12px; color: #9fb8e8; }
.died { font-size: 46px; margin: 0; text-shadow: 3px 3px #000; }
.menu label { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; text-shadow: 1px 1px #000; }
.menu label.check { flex-direction: row; align-items: center; gap: 8px; }
.menu input:not([type]), .menu input[type=password] { padding: 9px; font: inherit; border: 2px solid #a0a0a0; background: #000; color: #fff; outline: none; }
.menu input:focus { border-color: var(--accent); }
.menu input[type=range] { accent-color: var(--accent); }
.btn { padding: 11px; font: inherit; font-size: 15px; color: #fff; text-shadow: 2px 2px #383838; background: linear-gradient(#7a7a7a, #5a5a5a); border: 2px solid #000; box-shadow: inset 2px 2px #aaa, inset -2px -2px #444; cursor: pointer; }
.btn:hover { background: linear-gradient(#7d8fc8, #5a6cb0); }
.error { color: #ff6b6b; min-height: 1em; margin: 0; }
.hint { font-size: 12px; color: #aaa; }
table.keys { border-collapse: collapse; text-align: left; font-size: 14px; }
table.keys td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
table.keys td:first-child { color: #9fb8e8; white-space: nowrap; }
.progress { height: 8px; background: #222; border: 1px solid #555; }
#loadBar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

.google-sign-in { display: flex; justify-content: center; min-height: 44px; margin: 8px 0; }

/* ---------- Options screen (Settings) ---------- */
.settings-menu { width: min(640px, 94vw); max-height: 88vh; text-align: left; }
.settings-menu h2 { text-align: center; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tab { padding: 8px 12px; font: inherit; color: #ddd; background: #3a3a3a; border: 2px solid #000; cursor: pointer; }
.tab.on { background: #5a6cb0; color: #fff; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; overflow-y: auto; max-height: 58vh; padding: 4px; }
.opt-head { grid-column: 1 / -1; margin: 10px 0 0; font-weight: normal; color: #9fb8e8; text-shadow: 1px 1px #000; }
.opt-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.opt-row .slider { display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-shadow: 1px 1px #000; }
.opt-row .slider input { accent-color: var(--accent); width: 100%; }
.opt { padding: 8px; font: inherit; font-size: 14px; color: #fff; text-shadow: 1px 1px #383838; background: linear-gradient(#7a7a7a, #5a5a5a); border: 2px solid #000; cursor: pointer; text-align: center; }
.opt:hover { background: linear-gradient(#7d8fc8, #5a6cb0); }
.keyrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; grid-column: auto; }
.keyrow .key-label { font-size: 13px; }
.keyrow .key { min-width: 140px; }
.keyrow .key.listening { background: #3b82f6; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.6; } }
.warn { grid-column: 1 / -1; color: #ffd166; font-size: 13px; margin: 0; }
.opt-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.opt-foot .btn { min-width: 120px; }
#coords { position: absolute; right: 6px; top: 6px; background: rgba(0,0,0,0.5); padding: 2px 6px; font-size: 13px; }

/* ---------- Accessibility and GUI scale ---------- */
#crosshair { transform: translate(-50%, -50%) scale(var(--cross, 1)); }
.high-contrast #hotbar { background: #000; border-color: #fff; }
.high-contrast #chatLog div { background: #000; text-shadow: none; }
.high-contrast #debug span { background: #000; }
.high-contrast #crosshair { mix-blend-mode: normal; }
.high-contrast #crosshair::before, .high-contrast #crosshair::after { background: #ffe000; }
.high-contrast .panel { border-color: #fff #000 #000 #fff; }
.reduced-motion .bar.shake img { animation: none; }

/* ---------- Game modes, armor, sleep, weather, creative tabs ---------- */
#armorBar { left: 0; bottom: 22px; }
#modeSwitcher { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: rgba(0,0,0,0.7); border: 2px solid #555; padding: 14px 18px 8px; pointer-events: auto; text-align: center; }
#modeSwitcher .modes { display: flex; gap: 10px; }
.mode-opt { width: 96px; padding: 10px 6px; font: inherit; font-size: 13px; color: #ddd; background: #2a2a2a; border: 2px solid #555; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mode-opt .mode-icon { font-size: 26px; }
.mode-opt.sel { border-color: #fff; background: #3b4f8a; color: #fff; }
.mode-opt.current { box-shadow: inset 0 -3px 0 var(--accent); }
#sleepOverlay { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 2.5s; display: flex; align-items: flex-end; justify-content: center; }
#sleepOverlay p { margin-bottom: 18vh; color: #ccc; text-shadow: 2px 2px #000; opacity: 0; transition: opacity 1s 1s; }
#sleepOverlay.on { opacity: 0.85; }
#sleepOverlay.on p { opacity: 1; }
#lightning { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .25s; }
#hud.spectator #hotbar, #hud.spectator #bars, #hud.spectator #crosshair { display: none; }
.ctabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; max-width: calc(var(--slot) * 10 + 20px); }
.ctab { padding: 5px 8px; font: inherit; font-size: 12px; color: #3f3f3f; background: #a8a8a8; border: 2px solid; border-color: #fff #555 #555 #fff; cursor: pointer; }
.ctab.on { background: #c6c6c6; border-bottom-color: #c6c6c6; font-weight: bold; }
.armor-col { display: flex; flex-direction: column; margin-right: 12px; }
.slot.armor:empty::after { content: attr(title); font-size: 9px; color: #5a5a5a; }

/* ---------- Mobile / touch (body.is-mobile is set by src/device.js) ---------- */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#game canvas { touch-action: none; }
button, .slot, .tab, .ctab, .opt { touch-action: manipulation; }
.overlay { height: 100dvh; }
.is-desktop .mobile-only, .is-mobile .desktop-only { display: none !important; }
#touchControls { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#rotateHint { display: none; }
.is-mobile #hotbar { pointer-events: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
.is-mobile #bars { bottom: calc(64px + env(safe-area-inset-bottom)); }
.is-mobile #debug, .is-mobile #coords { top: calc(6px + env(safe-area-inset-top)); }
.is-mobile #chatInput { font-size: 16px; } /* 16px stops iOS from zooming into the field */
.is-mobile .menu { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 4px; }
.is-mobile .menu input:not([type]), .is-mobile .btn { min-height: 44px; }
.is-mobile .panel { max-height: calc(100dvh - 16px); overflow-y: auto; }
.is-mobile .creative-grid { max-height: 34dvh; }
.is-mobile .settings-menu .opts { max-height: 60dvh; }
@media (max-width: 720px), (max-height: 520px) {
  .is-mobile { --slot: calc(36px * var(--gui, 1)); }
  .is-mobile #bars { width: 340px; }
  .is-mobile .slot img { width: 26px; height: 26px; }
  .is-mobile .logo { font-size: 34px; }
  .is-mobile .opts { grid-template-columns: 1fr; }
}
@media (orientation: portrait) {
  .is-mobile #rotateHint { display: block; position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 6; background: rgba(10,14,24,0.85); border: 1px solid var(--accent); padding: 6px 12px; font-size: 13px; pointer-events: none; white-space: nowrap; }
}