/* ヤマクラフトの画面まわり。ドット絵は拡大してもぼかさない。大きさは --gui（整数倍）で決まる */
:root {
  --gui: 3;
  --px: calc(var(--gui) * 1px);
  --panel: #c9c4b8;
  --panel-dark: #6b675e;
  --panel-light: #f4f1e8;
  --slot: #8d897e;
  --ink: #2b2a27;
  --accent: #f2b632;
  font-family: "DotGothic16", "MS Gothic", "Osaka-Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#ui-root { position: fixed; inset: 0; pointer-events: none; }
#ui-root .overlay, #ui-root .screen, #ui-root button, #ui-root .click-to-play { pointer-events: auto; }
.game-ui { position: absolute; inset: 0; }

/* ---- HUD ---- */
.crosshair { position: absolute; left: 50%; top: 50%; width: calc(var(--px) * 9); height: calc(var(--px) * 9); transform: translate(-50%, -50%); mix-blend-mode: difference; }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: #fff; }
.crosshair::before { left: calc(var(--px) * 4); top: 0; width: var(--px); height: 100%; }
.crosshair::after { top: calc(var(--px) * 4); left: 0; height: var(--px); width: 100%; }

.hotbar { position: absolute; left: 50%; bottom: calc(var(--px) * 1); transform: translateX(-50%); display: flex; padding: var(--px); background: rgba(20, 20, 24, 0.55); border: var(--px) solid rgba(0, 0, 0, 0.75); }
.slot { position: relative; width: calc(var(--px) * 20); height: calc(var(--px) * 20); border: var(--px) solid rgba(140, 140, 150, 0.55); background: rgba(60, 60, 70, 0.35); }
.hotbar .slot.selected { border-color: #fff; outline: var(--px) solid #fff; outline-offset: 0; z-index: 1; background: rgba(120, 120, 130, 0.45); }
.item-icon { position: absolute; inset: var(--px); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
.item-count { position: absolute; right: var(--px); bottom: 0; font-size: calc(var(--px) * 7); line-height: 1; color: #fff; text-shadow: var(--px) var(--px) 0 #3a3a3a; font-weight: bold; }
.item-dur { position: absolute; left: calc(var(--px) * 2); right: calc(var(--px) * 2); bottom: calc(var(--px) * 2); height: calc(var(--px) * 2); background: #000; display: none; }
.item-dur i { display: block; height: var(--px); background: #3c3; }
.item-name { position: absolute; left: 50%; bottom: calc(var(--px) * 50); transform: translateX(-50%); font-size: calc(var(--px) * 8); text-shadow: var(--px) var(--px) 0 #222; white-space: nowrap; transition: opacity 0.1s; }

.hud-bars { position: absolute; left: 50%; bottom: calc(var(--px) * 31); width: calc(var(--px) * 182); transform: translateX(-50%); height: calc(var(--px) * 20); }
.hud-row { position: absolute; display: flex; gap: 0; }
.hud-row.hearts { left: 0; bottom: 0; }
.hud-row.armor { left: 0; bottom: calc(var(--px) * 10); }
.hud-row.hunger { right: 0; bottom: 0; flex-direction: row-reverse; }
.hud-row.air { right: 0; bottom: calc(var(--px) * 10); flex-direction: row-reverse; }
.ico { display: block; width: calc(var(--px) * 9); height: calc(var(--px) * 9); margin-right: calc(var(--px) * -1); background-size: 100% 100%; image-rendering: pixelated; }
.ico-hearts[data-v="full"] { background-image: var(--ico-heart-full); } .ico-hearts[data-v="half"] { background-image: var(--ico-heart-half); } .ico-hearts[data-v="empty"] { background-image: var(--ico-heart-empty); }
.ico-hearts.blink { filter: brightness(2.2); }
.ico-hunger[data-v="full"] { background-image: var(--ico-food-full); } .ico-hunger[data-v="half"] { background-image: var(--ico-food-half); } .ico-hunger[data-v="empty"] { background-image: var(--ico-food-empty); }
.ico-armor[data-v="full"] { background-image: var(--ico-armor-full); } .ico-armor[data-v="half"] { background-image: var(--ico-armor-half); } .ico-armor[data-v="empty"] { background-image: var(--ico-armor-empty); }
.ico-air[data-v="full"] { background-image: var(--ico-air-full); } .ico-air[data-v="empty"] { background-image: none; }
.xp-bar { position: absolute; left: 50%; bottom: calc(var(--px) * 25); width: calc(var(--px) * 182); height: calc(var(--px) * 5); transform: translateX(-50%); background: #1b2a12; border: var(--px) solid #000; }
.xp-bar i { display: block; height: 100%; background: #7ee33a; }
.xp-level { position: absolute; left: 50%; bottom: calc(var(--px) * 29); transform: translateX(-50%); color: #7ee33a; font-size: calc(var(--px) * 8); text-shadow: var(--px) 0 0 #000, calc(var(--px) * -1) 0 0 #000, 0 var(--px) 0 #000, 0 calc(var(--px) * -1) 0 #000; }

.debug-screen { position: absolute; left: 6px; top: 6px; margin: 0; padding: 4px 8px; font: 13px/1.45 Consolas, "MS Gothic", monospace; color: #fff; background: rgba(0, 0, 0, 0.45); white-space: pre; }
.toasts { position: absolute; left: 12px; bottom: 120px; display: flex; flex-direction: column; gap: 4px; }
.toast { padding: 6px 12px; background: rgba(0, 0, 0, 0.6); font-size: 16px; transition: opacity 0.4s; }
.toast.out { opacity: 0; }
.click-to-play { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); padding: 10px 22px; background: rgba(0, 0, 0, 0.6); border: 2px solid #fff; font-size: 18px; cursor: pointer; }

/* ---- 画面（ロード・ポーズ・メニュー）---- */
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(12, 14, 20, 0.62); }
.overlay.loading { background: #1d2530 radial-gradient(ellipse at center, #2f4458 0%, #141a22 80%); }
.logo { margin: 0 0 18px; font-size: 64px; letter-spacing: 6px; color: #fff; text-shadow: 4px 4px 0 #2a3f17, 8px 8px 0 rgba(0, 0, 0, 0.45); }
.loading-text { font-size: 18px; color: #d8e2ea; }
.bar { width: 380px; height: 14px; border: 2px solid #fff; background: #000; }
.bar i { display: block; height: 100%; width: 0; background: #7ee33a; transition: width 0.15s; }
.overlay h2 { margin: 0 0 8px; font-size: 32px; text-shadow: 3px 3px 0 #000; }
.btn { min-width: 320px; padding: 10px 18px; font: inherit; font-size: 20px; color: #fff; background: #6f6f76; border: 3px solid #000; box-shadow: inset 3px 3px 0 #a9a9b2, inset -3px -3px 0 #4a4a50; cursor: pointer; text-shadow: 2px 2px 0 #333; }
.btn:hover { background: #7f86b8; box-shadow: inset 3px 3px 0 #bcc3ee, inset -3px -3px 0 #535a8a; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---- タイトル・メニュー ---- */
.overlay.title, .overlay.menu { background: #1a2430 linear-gradient(180deg, #6fa8ff 0%, #a9ccff 38%, #5d9a3c 38.2%, #3f7427 60%, #6b4a2b 60.2%, #3d2a18 100%); gap: 12px; }
.overlay.menu { background: rgba(12, 14, 20, 0.86); }
.logo-wrap { position: relative; margin-bottom: 26px; }
.overlay.title .logo { font-size: 84px; margin: 0; color: #e9e6dc; text-shadow: 5px 5px 0 #3b3b3b, 9px 9px 0 rgba(0, 0, 0, 0.35); -webkit-text-stroke: 2px #222; }
.splash { position: absolute; right: -60px; bottom: -6px; transform: rotate(-16deg); color: #ffe83a; font-size: 22px; text-shadow: 2px 2px 0 #4a3f00; animation: splash 0.9s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes splash { from { transform: rotate(-16deg) scale(1); } to { transform: rotate(-16deg) scale(1.08); } }
.title-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #000; }
.touch-note { max-width: min(560px, 90vw); margin-top: 6px; padding: 10px 14px; background: rgba(0, 0, 0, 0.72); border: 3px solid #ffe83a; color: #ffe83a; font-size: 18px; line-height: 1.5; text-align: center; text-shadow: 1px 1px 0 #000; }
/* タイトルの「あそぶ」（みんなの1つのサーバーへ入る。ボタンはこれが主役） */
.overlay.title .btn.primary { min-width: 380px; font-size: 28px; padding: 14px 24px; background: #3f8a3a; box-shadow: inset 3px 3px 0 #7fcf6f, inset -3px -3px 0 #2a5e27; }
.overlay.title .btn.primary:hover { background: #4ea347; box-shadow: inset 3px 3px 0 #9be58b, inset -3px -3px 0 #32702e; }
.overlay.title .title-name { width: 380px; padding: 8px 12px; background: rgba(0, 0, 0, 0.5); border: 3px solid #000; text-shadow: 1px 1px 0 #000; }
.online-note { max-width: min(600px, 90vw); padding: 8px 14px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 16px; line-height: 1.5; text-align: center; text-shadow: 1px 1px 0 #000; }
.online-note + .online-note { margin-top: -12px; padding-top: 0; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn.small { min-width: 200px; font-size: 17px; padding: 8px 14px; }
.world-list { width: min(760px, 90vw); height: 46vh; overflow-y: auto; background: rgba(0, 0, 0, 0.55); border: 3px solid #000; padding: 8px; }
.world-row { padding: 10px 12px; border: 2px solid transparent; cursor: pointer; }
.world-row:hover { background: rgba(255, 255, 255, 0.08); }
.world-row.selected { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.world-name { font-size: 20px; } .world-info { font-size: 14px; color: #b9c2cc; margin-top: 3px; }
.world-empty { padding: 30px; text-align: center; color: #cfd6dd; }
.form { display: flex; flex-direction: column; gap: 12px; width: min(520px, 90vw); align-items: stretch; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.field input { font: inherit; font-size: 20px; padding: 8px 10px; background: #000; color: #fff; border: 3px solid #a0a0a0; outline: none; user-select: text; -webkit-user-select: text; }
.field input:focus { border-color: #fff; }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; width: min(760px, 92vw); }
.opt { display: flex; flex-direction: column; gap: 3px; font-size: 16px; padding: 6px 10px; background: #6f6f76; border: 3px solid #000; box-shadow: inset 3px 3px 0 #a9a9b2, inset -3px -3px 0 #4a4a50; text-shadow: 2px 2px 0 #333; }
.opt input[type=range] { width: 100%; accent-color: #7ee33a; }
.options-grid .btn.small { min-width: 0; width: 100%; }
.death-cause { font-size: 20px; margin-bottom: 14px; text-shadow: 2px 2px 0 #000; }

/* ---- チャット ---- */
.chat-log { position: absolute; left: 8px; bottom: 150px; display: flex; flex-direction: column; gap: 2px; max-width: 60vw; pointer-events: none; }
.chat-line { padding: 3px 8px; background: rgba(0, 0, 0, 0.5); font-size: 17px; transition: opacity 0.6s; text-shadow: 2px 2px 0 #222; }
.chat-line.sys { color: #ffe97a; } .chat-line.err { color: #ff8a80; } .chat-line.out { opacity: 0; }
.chat-input { position: absolute; left: 6px; right: 6px; bottom: 6px; pointer-events: auto; }
.chat-input input { width: 100%; font: inherit; font-size: 18px; padding: 6px 10px; color: #fff; background: rgba(0, 0, 0, 0.62); border: 2px solid rgba(255, 255, 255, 0.4); outline: none; user-select: text; -webkit-user-select: text; }

/* ---- ネザーポータル ---- */
.portal-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(120, 40, 200, 0.25) 0%, rgba(90, 20, 160, 0.75) 70%, rgba(40, 0, 80, 0.95) 100%); mix-blend-mode: screen; }
.overlay.portal-loading { background: rgba(40, 0, 80, 0.85); }