:root { --gold: #ffd25a; --ink: #241638; --panel: rgba(28, 18, 48, .72); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #87c5ff; font-family: system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; }

/* ── 화면 표시 ── */
#cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; }
#cross::before, #cross::after { content: ""; position: absolute; background: rgba(255,255,255,.9); box-shadow: 0 0 2px #000; }
#cross::before { left: 8px; top: 0; width: 2px; height: 18px; }
#cross::after { top: 8px; left: 0; height: 2px; width: 18px; }
#mine { display: none; position: absolute; left: 50%; top: calc(50% + 16px); width: 44px; height: 5px; margin-left: -22px; background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; }
#mine i { display: block; height: 100%; background: var(--gold); }
#top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 10px; align-items: center; }
#layer { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 0; padding: 4px 10px; background: var(--panel); color: #fff; border-radius: 12px; font-size: 13px; font-weight: 700; }
#dust { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--panel); color: #fff; border-radius: 12px; font-size: 12px; }
#dust .bar { width: 110px; height: 8px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
#dust .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #9fe3ff, #ffe27a); }
#dust.flying { box-shadow: 0 0 10px #9fe3ff; }
#toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 8px 16px; background: var(--panel); color: #fff; border-radius: 14px; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .25s; white-space: nowrap; }
#toast.on { opacity: 1; }

/* ── 단축 칸 ── */
#hotbar { position: absolute; bottom: max(6px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 3px; background: var(--panel); border-radius: 10px; pointer-events: auto; }
#hotbar .slot { position: relative; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.25); border-radius: 7px; display: grid; place-items: center; }
#hotbar .slot canvas { width: 26px; height: 26px; image-rendering: pixelated; }
#hotbar .slot span { position: absolute; left: 2px; top: 0; font-size: 9px; color: #fff; text-shadow: 0 0 2px #000; }
#hotbar .slot.sel { border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
#blockName { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000; transition: opacity .3s; }

/* ── 휴대폰 버튼 ── */
#pad { position: absolute; inset: 0; pointer-events: none; }
#joyBase { display: none; position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.35); }
#joyKnob { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.6); }
.btn { position: absolute; pointer-events: auto; border: 2px solid rgba(255,255,255,.45); background: rgba(28,18,48,.55); color: #fff; border-radius: 50%; font-size: 22px; display: grid; place-items: center; touch-action: none; padding: 0; line-height: 1; }
.btn small { display: block; font-size: 8px; margin-top: 2px; opacity: .85; }
.btn.on { background: rgba(255,210,90,.55); }
#bJump { right: max(18px, env(safe-area-inset-right)); bottom: 22px; width: 70px; height: 70px; flex-direction: column; }
#bDown { right: max(28px, env(safe-area-inset-right)); bottom: 104px; width: 50px; height: 50px; font-size: 18px; }
#bBreak { right: calc(max(18px, env(safe-area-inset-right)) + 84px); bottom: 30px; width: 60px; height: 60px; }
#bPlace { right: calc(max(18px, env(safe-area-inset-right)) + 84px); bottom: 102px; width: 54px; height: 54px; }
body:not(.touch) .btn { display: none; }

/* ── 시작 화면 (가로 844×390 에 맞게 두 칸) ── */
#start { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, #4b2f86, #1a1033 75%); z-index: 30; touch-action: auto; overflow: auto; }
#start .card { display: flex; gap: 28px; align-items: center; color: #fff; padding: 12px 18px; max-width: 96vw; }
#start .brand { text-align: center; }
#start .lamp { font-size: 40px; filter: drop-shadow(0 0 12px #ffd25a); animation: bob 2.4s ease-in-out infinite; }
#start h1 { margin: 2px 0; font-size: 34px; letter-spacing: 2px; color: var(--gold); text-shadow: 0 3px 0 #7a4b0c, 0 0 18px rgba(255,210,90,.5); white-space: nowrap; }
#start p { margin: 0; opacity: .9; font-size: 13px; }
#start .form { display: flex; flex-direction: column; gap: 7px; width: 300px; max-width: 70vw; }
#start .row { display: flex; gap: 6px; }
#start [hidden] { display: none; }
#start .row > * { flex: 1; }
#start input { width: 100%; padding: 8px 10px; border-radius: 10px; border: 2px solid #8a6ad0; background: #2a1b4a; color: #fff; font-size: 15px; text-align: center; user-select: text; -webkit-user-select: text; }
#codeIn { letter-spacing: 3px; text-transform: uppercase; }
#start button { padding: 8px 10px; border: 0; border-radius: 10px; background: #5b3fa0; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 #33205e; }
#start button small { display: block; font-size: 9px; font-weight: 400; opacity: .8; }
#start button.gold { background: linear-gradient(#ffe07a, #f2b632); color: #3a2405; box-shadow: 0 3px 0 #a8730f; font-size: 15px; }
#start button:disabled { opacity: .45; }
#start button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
#start .row.small button { font-size: 12px; padding: 6px; background: transparent; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
#startMsg { min-height: 16px; font-size: 12px; text-align: center; color: #bfe6ff; }
#startMsg.bad { color: #ffb3b3; }
#start.hide { display: none; }
#loginBox { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10,5,25,.7); }
#loginBox[hidden] { display: none; }
#loginBox .box { display: flex; flex-direction: column; gap: 8px; width: 280px; padding: 14px; background: #2a1b4a; border: 2px solid #8a6ad0; border-radius: 14px; color: #fff; text-align: center; }
#loginMsg { min-height: 14px; font-size: 12px; color: #ffb3b3; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ── 방 코드 ── */
#roomCode { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 36px; pointer-events: auto; padding: 3px 9px; background: var(--panel); color: var(--gold); border: 1px solid rgba(255,210,90,.5); border-radius: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px; }

/* ── 😊 소통 ── */
#socialBtn { position: absolute; pointer-events: auto; right: max(110px, calc(env(safe-area-inset-right) + 100px)); bottom: 168px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(28,18,48,.55); font-size: 22px; padding: 0; }
body:not(.touch) #socialBtn { right: 14px; bottom: 60px; }
#socialPanel { position: absolute; pointer-events: auto; right: 12px; bottom: 60px; width: 300px; max-width: 70vw; padding: 8px; background: rgba(28,18,48,.9); border: 2px solid rgba(255,210,90,.5); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
#socialPanel[hidden] { display: none; }
#socialPanel .emos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
#socialPanel .emos button { font-size: 22px; padding: 4px 0; background: transparent; border: 0; border-radius: 8px; }
#socialPanel .says { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#socialPanel button { color: #fff; background: #5b3fa0; border: 0; border-radius: 8px; padding: 6px 4px; font-size: 12px; font-weight: 700; }
#socialPanel .pingBtn { background: #a8730f; }

/* ── 아이템 칸 (단축 칸·가방·조합·화로·상자 공용) ── */
#hotbar .slot .in, .cell { position: relative; display: grid; place-items: center; }
#hotbar .slot .in { width: 100%; height: 100%; }
.ico { width: 70%; height: 70%; image-rendering: pixelated; }
span.ico.emo { display: grid; place-items: center; width: 80%; height: 80%; font-size: 18px; border-radius: 50%; }
.cnt { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#bagBtn { position: absolute; pointer-events: auto; left: 50%; bottom: max(6px, env(safe-area-inset-bottom)); margin-left: 196px; width: 42px; height: 42px; border-radius: 10px; border: 2px solid rgba(255,210,90,.6); background: var(--panel); font-size: 22px; padding: 0; }

/* ── 창 (팝업은 한 번에 하나) ── */
.overlay { position: absolute; inset: 0; pointer-events: auto; background: rgba(10,5,25,.55); display: grid; place-items: center; z-index: 20; }
.overlay[hidden] { display: none; }
.overlay .panel { width: min(820px, 96vw); max-height: 94vh; background: #24183f; border: 2px solid rgba(255,210,90,.55); border-radius: 14px; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.phead { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: rgba(0,0,0,.25); }
.phead .hint { font-size: 11px; opacity: .75; flex: 1; }
.phead .x { background: #5b3fa0; color: #fff; border: 0; border-radius: 8px; width: 30px; height: 28px; font-size: 14px; }
.pbody { display: flex; gap: 10px; padding: 8px; min-height: 0; }
.pbody .left { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.pbody .right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.invgrid { display: grid; grid-template-columns: repeat(9, 36px); gap: 3px; }
.cell { width: 36px; height: 36px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); border-radius: 7px; }
.cell.hot { background: rgba(255,210,90,.12); }
.cell.picked { border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.invgrid .cell:nth-child(9) { margin-bottom: 0; }
.invgrid .cell:nth-child(n+10) { }
.acts button, .grid button { background: #5b3fa0; color: #fff; border: 0; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; background: rgba(255,255,255,.08); color: #fff; border: 0; border-radius: 8px; padding: 5px; font-weight: 700; }
.tabs button.on { background: #a8730f; }
.list { overflow-y: auto; max-height: 64vh; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.rec { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: rgba(255,255,255,.06); border-radius: 8px; }
.rec.off { opacity: .45; }
.rec .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rec .info b { font-size: 13px; }
.rec .info small { font-size: 10px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec button { background: linear-gradient(#ffe07a, #f2b632); color: #3a2405; border: 0; border-radius: 8px; padding: 6px 10px; font-weight: 800; }
.grid { display: grid; grid-template-columns: auto auto auto; gap: 8px 12px; align-items: center; justify-content: start; }
.grid[hidden] { display: none; }
.g9 { display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; }
.g9 .cell, .grid .res { width: 40px; height: 40px; }
.furnace { display: grid; grid-template-columns: auto 44px; gap: 6px 10px; align-items: center; }
.furnace .cell { width: 44px; height: 44px; }
.furnace .fire { grid-column: 1 / 3; text-align: center; font-size: 20px; }
.furnace .prog { grid-column: 1 / 3; height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; }
.furnace .prog i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3a, #ffe27a); }
.chestgrid { display: grid; grid-template-columns: repeat(9, 36px); gap: 3px; }

/* ── 하트·배고픔·아야 ── */
#life { position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; display: flex; gap: 14px; font-size: 11px; letter-spacing: -1px; text-shadow: 0 0 2px #000; }
#life[hidden] { display: none; }
#ouch { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; }
#died { position: absolute; inset: 0; pointer-events: auto; background: rgba(60,10,30,.55); display: grid; place-items: center; z-index: 25; color: #fff; text-align: center; }
#died[hidden] { display: none; }
#died b { display: block; font-size: 26px; margin-bottom: 6px; }
#died button { margin-top: 12px; padding: 10px 22px; border: 0; border-radius: 12px; background: linear-gradient(#ffe07a, #f2b632); color: #3a2405; font-size: 17px; font-weight: 800; }

/* ── 🪙 코인 ── */
#coins { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); padding: 4px 10px; background: var(--panel); color: var(--gold); border: 1px solid rgba(255,210,90,.5); border-radius: 12px; font-size: 13px; font-weight: 800; }
#coins[hidden] { display: none; }
#coins i { position: absolute; right: 6px; top: 100%; font-style: normal; color: #ffe27a; opacity: 0; text-shadow: 0 1px 2px #000; }
#coins i.up { animation: coinUp 1.1s ease-out; }
@keyframes coinUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-26px); } }

/* ── 🧞 지니 ── */
#lampBtn { position: absolute; pointer-events: auto; left: max(6px, env(safe-area-inset-left)); top: 46%; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #ffd25a; background: radial-gradient(circle at 40% 35%, #fff3b0, #f2b632 60%, #a8730f); font-size: 26px; padding: 0; box-shadow: 0 0 14px rgba(255,210,90,.8); animation: lampGlow 2.2s ease-in-out infinite; }
@keyframes lampGlow { 50% { box-shadow: 0 0 24px rgba(255,230,140,1); } }
.genieBox .left { flex: 1; min-width: 0; }
.genieBox .wish { width: 100%; resize: none; padding: 8px; border-radius: 10px; border: 2px solid #8a6ad0; background: #1d1233; color: #fff; font-size: 15px; font-family: inherit; user-select: text; -webkit-user-select: text; }
.genieBox .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.genieBox .chips button { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; padding: 4px 9px; font-size: 12px; }
.genieBox .go { display: flex; gap: 6px; }
.genieBox .go button { flex: 1; padding: 9px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 800; background: linear-gradient(#ffe07a, #f2b632); color: #3a2405; box-shadow: 0 3px 0 #a8730f; }
.genieBox .go button.big { background: linear-gradient(#e7c6ff, #b06cff); color: #2a0a4a; box-shadow: 0 3px 0 #6a3aa0; }
.genieBox .go button small { display: block; font-size: 11px; }
.genieBox .go button:disabled { opacity: .4; }
.genieBox .msg { min-height: 14px; font-size: 12px; color: #ffd9a0; }
.genieBox .right { flex: 0 0 210px; }
.genieBox .works { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.genieBox .work { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; background: rgba(255,255,255,.06); border-radius: 8px; font-size: 12px; }
.genieBox .work button { background: #5b3fa0; color: #fff; border: 0; border-radius: 8px; padding: 4px 6px; font-size: 11px; }
.genieBox .none { opacity: .6; }
.genieBox .left > * + * { margin-top: 6px; }