/* WebCraft UI スタイル */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,monospace; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; }
.hidden { display:none !important; }

/* ===== 画面共通 ===== */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:20; color:#fff; }
#title-screen { background:linear-gradient(#6ea3d8,#8ec7e8 55%, #7aa860 55.2%, #5d8a45); }
#create-screen,#settings-screen,#about-screen { background:rgba(20,20,26,.92); }
#pause-screen,#death-screen { background:rgba(0,0,0,.55); }
#death-screen { background:rgba(120,0,0,.5); }
.game-logo { font-size:84px; letter-spacing:4px; color:#e8e8e8; text-shadow:4px 4px 0 #3f3f3f, 8px 8px 0 rgba(0,0,0,.25); margin-bottom:4px; font-family:monospace; }
.splash { color:#ffff55; text-shadow:2px 2px 0 #3f3f00; transform:rotate(-4deg); margin-bottom:28px; animation:splash 1s infinite alternate; }
@keyframes splash { from{transform:rotate(-4deg) scale(1)} to{transform:rotate(-4deg) scale(1.06)} }
.menu-col { display:flex; flex-direction:column; gap:10px; width:320px; align-items:stretch; }
.menu-col h2 { text-align:center; margin-bottom:8px; text-shadow:2px 2px 0 #000; }
.mc-btn { padding:10px 18px; font-size:16px; font-family:inherit; color:#fff; background:linear-gradient(#8b8b8b,#6f6f6f); border:2px solid #000; box-shadow:inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.4); cursor:pointer; text-shadow:1px 1px 0 #3f3f3f; }
.mc-btn:hover { background:linear-gradient(#9d9dc8,#7a7aa8); }
.mc-btn:active { box-shadow:inset -2px -2px 0 rgba(255,255,255,.3), inset 2px 2px 0 rgba(0,0,0,.4); }
.title-foot { position:absolute; bottom:10px; font-size:12px; color:rgba(255,255,255,.85); text-shadow:1px 1px 0 #000; }

.panel { background:#c6c6c6; color:#3f3f3f; border:3px solid #000; box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555; padding:16px; }
.form-panel { width:min(480px, 92vw); max-height:88vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.form-panel h2 { color:#2b2b2b; }
.form-panel label { display:flex; flex-direction:column; gap:3px; font-size:14px; }
.form-panel input[type=text], .form-panel select { padding:7px; font-size:15px; font-family:inherit; background:#000; color:#fff; border:2px solid #a0a0a0; }
.form-panel input[type=range] { width:100%; }
.form-panel .row { display:flex; gap:10px; margin-top:6px; }
.form-panel .row .mc-btn { flex:1; }
#about-body { font-size:13.5px; line-height:1.8; }
#about-body b { color:#1a3a6b; }

/* ===== HUD ===== */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; color:#fff; }
#crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:22px; color:rgba(255,255,255,.85); text-shadow:0 0 2px #000; }
#hud-bottom { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; }
#bars { width:364px; display:flex; flex-direction:column; gap:2px; }
.bar-line { display:flex; justify-content:space-between; }
.icon-row { display:flex; gap:0; height:18px; }
.icon-row canvas { width:18px; height:18px; }
#xp-bar { position:relative; width:100%; height:10px; background:#1b1b1b; border:1px solid #000; }
#xp-fill { height:100%; width:0%; background:linear-gradient(#9dff5e,#57c400); }
#xp-level { position:absolute; left:50%; top:-9px; transform:translateX(-50%); color:#aFff40; font-size:13px; font-weight:bold; text-shadow:1px 1px 0 #000; }
#hotbar { display:flex; background:rgba(0,0,0,.35); border:2px solid rgba(0,0,0,.6); }
.hb-slot { width:44px; height:44px; border:2px solid #8b8b8b; box-shadow:inset 1px 1px 0 rgba(0,0,0,.5); position:relative; }
.hb-slot.sel { border:3px solid #fff; margin:-1px; z-index:1; }
#held-name { min-height:20px; font-size:14px; text-shadow:1px 1px 0 #000; color:#fff; margin-top:2px; }

.item-icon { position:absolute; inset:2px; background-repeat:no-repeat; image-rendering:pixelated; }
.item-count { position:absolute; right:1px; bottom:-1px; font-size:13px; font-weight:bold; color:#fff; text-shadow:1px 1px 0 #3f3f3f; z-index:2; }
.dur-bar { position:absolute; left:3px; right:3px; bottom:2px; height:3px; background:#222; }
.dur-fill { height:100%; background:#4f4; }

#debug { position:absolute; left:6px; top:6px; font:12px/1.5 monospace; color:#fff; text-shadow:1px 1px 0 #000; background:rgba(0,0,0,.3); padding:4px 8px; white-space:pre; }
#chat-log { position:absolute; left:6px; bottom:90px; max-width:46vw; display:flex; flex-direction:column; gap:1px; font-size:14px; }
.chat-line { background:rgba(0,0,0,.45); padding:2px 6px; text-shadow:1px 1px 0 #000; animation:chatfade 10s forwards; word-break:break-all; }
@keyframes chatfade { 0%,80%{opacity:1} 100%{opacity:0} }
#chat-input-wrap { position:fixed; left:6px; right:6px; bottom:6px; z-index:15; }
#chat-input { width:100%; padding:8px; font-size:15px; font-family:inherit; background:rgba(0,0,0,.7); color:#fff; border:1px solid #888; outline:none; }
#subtitles { position:absolute; right:10px; bottom:120px; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.subtitle { background:rgba(0,0,0,.6); font-size:12px; padding:2px 8px; animation:chatfade 3s forwards; }
#toasts { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px; }
.toast { background:#212121; border:2px solid #5a5a5a; padding:8px 14px; min-width:220px; animation:toastin .3s, chatfade 6s forwards; }
.toast .t-title { color:#ff5; font-size:13px; } .toast .t-body { font-size:14px; }
@keyframes toastin { from{transform:translateX(120%)} to{transform:none} }
#status-effects { position:absolute; right:8px; top:56px; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.fx-chip { background:rgba(30,30,60,.75); border:1px solid #557; font-size:12px; padding:2px 8px; }
#bossbar { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(560px,80vw); text-align:center; }
#bossbar-name { font-size:14px; text-shadow:1px 1px 0 #000; color:#f9f; margin-bottom:3px; }
#bossbar-track { height:12px; background:#31102f; border:1px solid #000; }
#bossbar-fill { height:100%; width:100%; background:linear-gradient(#ff64f0,#c126b5); transition:width .2s; }

/* ===== インベントリ ===== */
#inv-screen { background:rgba(0,0,0,.5); z-index:18; }
#inv-panel { display:flex; flex-direction:column; gap:8px; }
.inv-section-label { font-size:13px; color:#404040; }
.slot-grid { display:grid; grid-template-columns:repeat(9, 40px); gap:2px; }
.slot { width:40px; height:40px; background:#8b8b8b; border:2px solid; border-color:#373737 #fff #fff #373737; position:relative; cursor:pointer; }
.slot:hover { background:#a8a8c0; }
.slot.slot-armor::after, .slot.slot-off::after { content:attr(data-ph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#666; font-size:11px; pointer-events:none; }
.slot .item-icon { inset:2px; }
#inv-top { display:flex; flex-direction:column; gap:8px; }
.craft-wrap { display:flex; align-items:center; gap:12px; }
.craft-grid2 { display:grid; grid-template-columns:repeat(2,40px); gap:2px; }
.craft-grid3 { display:grid; grid-template-columns:repeat(3,40px); gap:2px; }
.craft-arrow { font-size:26px; color:#404040; }
.armor-col { display:flex; gap:2px; }
.furnace-wrap { display:flex; align-items:center; gap:14px; }
.furnace-col { display:flex; flex-direction:column; gap:4px; align-items:center; }
.flame { font-size:20px; filter:grayscale(1); } .flame.lit { filter:none; }
.prog-arrow { width:50px; height:10px; background:#555; position:relative; }
.prog-fill { height:100%; background:#fff; width:0%; }
.trade-list { display:flex; flex-direction:column; gap:4px; max-height:300px; overflow-y:auto; }
.trade-row { display:flex; align-items:center; gap:8px; background:#9d9d9d; padding:4px 8px; cursor:pointer; border:1px solid #555; }
.trade-row:hover { background:#b8b8d0; }
.trade-row.off { opacity:.4; cursor:not-allowed; }
.trade-ico { width:32px; height:32px; position:relative; }
.ench-list { display:flex; flex-direction:column; gap:4px; }
.ench-row { background:#3b3b52; color:#cbf; padding:6px 10px; cursor:pointer; border:1px solid #779; font-size:14px; }
.ench-row:hover { background:#5a5a80; }
.ench-row.off { opacity:.4; cursor:not-allowed; }
#drag-item { position:fixed; z-index:40; width:36px; height:36px; pointer-events:none; }
#drag-item .item-icon { inset:0; }
#slot-tip { position:fixed; z-index:41; background:rgba(16,0,16,.92); border:1px solid #5000a0; color:#fff; font-size:13px; padding:4px 8px; pointer-events:none; max-width:280px; }
#slot-tip .tip-sub { color:#aaa; font-size:12px; }
#slot-tip .tip-ench { color:#a8f; font-size:12px; }

#death-screen h2 { font-size:44px; text-shadow:3px 3px 0 #300; margin-bottom:10px; }
#death-msg,#death-score { margin-bottom:8px; text-shadow:1px 1px 0 #000; }

@media (max-width:640px){
  .game-logo{font-size:52px}
  .slot-grid{grid-template-columns:repeat(9,32px)} .slot{width:32px;height:32px}
  .hb-slot{width:36px;height:36px}
}