:root {
  --void: #0d0907;
  --wood: #2a1b12;
  --bone: #e8dcc4;
  --bone-dim: #a89a82;
  --wax: #d4a94f;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --side: 0px;
  --gap: 0px;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #000; color: var(--bone); font-family: var(--serif); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }

/* ---------- sân khấu 1600×900, co giãn vừa màn hình ---------- */
#stage { position: fixed; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 50% 50%; overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#view3d { position: absolute; inset: 0; perspective: 840px; perspective-origin: 50% 50%; }
#cube { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
#cube.anim { transition: transform .64s cubic-bezier(.55, .05, .3, 1); }
.face { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: var(--wood); pointer-events: auto; visibility: hidden; }
.face.on { visibility: visible; }
.face.flat { transform: none !important; }
.face.void { background: #070504; }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 220px 50px rgba(0, 0, 0, .5); }
.ext { position: absolute; left: 0; top: -350px; width: 1600px; height: 1600px; background: #120c08 center / cover no-repeat; filter: brightness(.45); backface-visibility: hidden; visibility: hidden; pointer-events: none; }
#cube.moving .ext { visibility: visible; }
.scene { position: absolute; inset: 0; }
.scene > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.obj { position: absolute; }
.obj > img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.obj.hit { cursor: pointer; }
.obj.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { translate: -10px 0; } 40%, 80% { translate: 10px 0; } }

#closeup { position: absolute; inset: 0; z-index: 5; background: #000; }
#closeup.in, #map.in { animation: zoomIn .32s ease-out; }
@keyframes zoomIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
#shade { position: absolute; inset: 0; pointer-events: none; z-index: 7; background: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, .55) 100%); }
#fade { position: absolute; inset: 0; z-index: 15; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }
#fade.on { opacity: 1; pointer-events: auto; }

/* ---------- bản đồ hẻm ---------- */
#map { position: absolute; inset: 0; z-index: 6; background: #1a130d; }
#map > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#map .paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#map .paths line { stroke: #2b1e14; stroke-width: 34; stroke-linecap: round; opacity: .55; }
.tile { position: absolute; border: 3px solid #3b2a1c; background: #2b1f16; padding: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transition: transform .15s; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) brightness(.8); }
.tile .name { position: relative; width: 100%; padding: 10px 12px; font-size: 32px; line-height: 1.1; background: linear-gradient(transparent, rgba(10, 6, 3, .85) 35%); color: var(--bone); text-align: left; }
.tile .tag { position: absolute; top: 10px; right: 10px; font: 600 20px var(--ui); background: #8a3b2a; color: #f3e6cf; padding: 3px 10px; border-radius: 3px; }
.tile.ok:hover, .tile.ok:focus-visible { transform: scale(1.04); border-color: var(--wax); }
.tile.cur { border-color: var(--wax); box-shadow: 0 0 0 4px rgba(212, 169, 79, .35), 0 10px 24px rgba(0, 0, 0, .45); }
.tile.cur::before { content: "Bạn ở đây"; position: absolute; left: 10px; top: 10px; z-index: 2; font: 600 20px var(--ui); color: #1a120d; background: var(--wax); padding: 3px 10px; border-radius: 3px; }
.tile.soon img { filter: grayscale(1) brightness(.45); }
.tile.soon { border-style: dashed; }
.tile.lock { background: repeating-linear-gradient(45deg, #241a12 0 18px, #2b2016 18px 36px); border-style: dashed; align-items: center; }
.tile.lock .name { background: none; text-align: center; font-size: 72px; color: #6d5a45; }

/* ---------- điều hướng ---------- */
.nav { position: absolute; z-index: 8; width: 96px; height: 96px; border: 0; background: none; opacity: .4; transition: opacity .2s; }
.nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border: solid var(--bone); border-width: 0 6px 6px 0; }
.nav:hover { opacity: .95; }
#navL { left: 10px; top: 402px; } #navL::before { transform: translate(-30%, -50%) rotate(135deg); }
#navR { right: 10px; top: 402px; } #navR::before { transform: translate(-70%, -50%) rotate(-45deg); }
#navU { top: 6px; left: 752px; } #navU::before { transform: translate(-50%, -30%) rotate(-135deg); }
#navD { bottom: 6px; left: 752px; } #navD::before { transform: translate(-50%, -70%) rotate(45deg); }

#dialog { position: absolute; z-index: 10; left: 220px; right: 220px; bottom: 70px; padding: 26px 38px 30px; background: rgba(13, 9, 7, .9); border: 1px solid rgba(212, 169, 79, .35); cursor: pointer; }
#who { font-size: 34px; font-style: italic; color: var(--wax); margin-bottom: 6px; }
#who:empty { display: none; }
#line { margin: 0; font-size: 42px; line-height: 1.3; }
#more { position: absolute; right: 22px; bottom: 10px; font-size: 28px; color: var(--wax); animation: bob 1.2s infinite; }
@keyframes bob { 50% { translate: 0 5px; } }
#choices { position: absolute; z-index: 11; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgba(0, 0, 0, .55); }
#choices button { min-width: 600px; padding: 22px 40px; font-size: 40px; background: rgba(13, 9, 7, .94); border: 1px solid rgba(212, 169, 79, .45); }
#choices button:hover, #choices button:focus-visible { background: #3d281b; }
#ending { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; background: rgba(0, 0, 0, .86); text-align: center; padding: 80px 200px; animation: fade 1.2s; }
#ending p { font-size: 60px; font-style: italic; line-height: 1.25; margin: 0; }
#ending button { font-size: 34px; padding: 14px 36px; background: none; border: 1px solid var(--wax); color: var(--wax); }
@keyframes fade { from { opacity: 0; } }
#loading { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; font-size: 52px; font-style: italic; color: var(--bone-dim); background: #000; }

/* ---------- HUD nổi ở mép màn hình (nằm trong viền đen nếu đủ rộng) ---------- */
#hud { position: fixed; z-index: 30; top: calc(var(--st) + 8px); right: calc(var(--sr) + 8px); display: flex; gap: 2px; }
#hud button { width: 40px; height: 40px; border: 0; border-radius: 6px; background: rgba(13, 9, 7, .55); display: grid; place-items: center; padding: 0; }
#hud button:hover { background: rgba(61, 40, 27, .85); }
#hud svg { width: 22px; height: 22px; fill: none; stroke: var(--bone-dim); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#hud button.on svg { stroke: var(--wax); }
#inv { position: fixed; z-index: 30; right: calc(var(--sr) + 8px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none; }
.slot { width: 64px; height: 64px; flex: none; border: 1px solid rgba(232, 220, 196, .16); background: rgba(13, 9, 7, .6); display: grid; place-items: center; padding: 7px; border-radius: 4px; }
.slot img { max-width: 100%; max-height: 100%; pointer-events: none; }
.slot.sel { border-color: var(--wax); background: rgba(212, 169, 79, .2); }
.slot.new { animation: pop .5s; }
@keyframes pop { 40% { transform: scale(1.15); } }
.slot.empty { opacity: .45; cursor: default; }
/* màn hình rộng hơn 16:9 (điện thoại ngang): nút bên trái, túi đồ bên phải, nằm trong viền đen */
body.wide #hud { flex-direction: column; top: calc(var(--st) + 10px); right: auto; left: max(calc(var(--sl) + 4px), calc(var(--side) / 2 - 20px)); }
body.wide #inv { right: max(calc(var(--sr) + 4px), calc(var(--side) / 2 - min(42px, var(--side) / 2 - 11px))); max-height: calc(100% - 24px); }
body.wide .slot { width: min(84px, calc(var(--side) - 22px)); height: min(84px, calc(var(--side) - 22px)); }
/* màn 16:9 hoặc hẹp hơn: túi đồ chỉ hiện đồ thật, nằm dưới hàng nút, không che mũi tên quay */
body:not(.wide) #inv { top: calc(var(--st) + 58px); transform: none; max-height: 40%; }
body:not(.wide) .slot.empty { display: none; }
@media (max-height: 420px) { .slot { width: 52px; height: 52px; padding: 5px; } #hud button { width: 36px; height: 36px; } }

#rotate { position: fixed; inset: 0; z-index: 60; background: #0d0907; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 30px; }
#rotate svg { width: 96px; height: 96px; fill: none; stroke: var(--wax); stroke-width: 2.5; stroke-linecap: round; animation: tilt 2.4s ease-in-out infinite; }
@keyframes tilt { 40%, 60% { transform: rotate(-90deg); } }
#rotate p { font-size: 1.6rem; font-style: italic; margin: 0; }
#rotate button { font: .9rem var(--ui); background: none; border: 0; color: var(--bone-dim); text-decoration: underline; }

dialog { background: #1a120d; color: var(--bone); border: 1px solid rgba(212, 169, 79, .3); padding: 22px 26px; width: min(460px, 92vw); max-height: 90vh; overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog h2 { margin: 0 0 6px; font-size: 1.7rem; font-weight: 600; font-style: italic; }
dialog .hint { margin: 0 0 14px; color: var(--bone-dim); font-family: var(--ui); font-size: .88rem; line-height: 1.5; }
dialog label { display: block; font-family: var(--ui); font-size: .85rem; color: var(--bone-dim); margin-bottom: 12px; }
dialog input, dialog textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: 1rem var(--ui); color: var(--bone); background: #0d0907; border: 1px solid #4a3627; border-radius: 2px; }
dialog .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
dialog .col { display: flex; flex-direction: column; gap: 8px; }
dialog button, .btnlink { font-family: var(--ui); font-size: .92rem; padding: 9px 14px; background: #2a1b12; border: 1px solid #4a3627; border-radius: 2px; color: var(--bone); text-decoration: none; text-align: center; }
dialog .primary { background: var(--wax); color: #1a120d; border-color: var(--wax); font-weight: 600; }
dialog .ghost { background: none; border-color: transparent; color: var(--bone-dim); }
dialog button:disabled { opacity: .5; cursor: default; }
.err { color: #e08a7a; font-family: var(--ui); font-size: .85rem; min-height: 1.1em; margin: 4px 0 0; }
.scroll { max-height: 56vh; overflow: auto; }
table.players { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: .86rem; }
table.players th { text-align: left; font-weight: 500; color: var(--bone-dim); padding: 6px; border-bottom: 1px solid #3a2a1e; }
table.players td { padding: 7px 6px; border-bottom: 1px solid #241911; vertical-align: top; }
table.players tr.me td { color: var(--wax); }
.bar { height: 4px; background: #2a1b12; margin-top: 4px; } .bar > i { display: block; height: 100%; background: var(--wax); }
#toast { position: fixed; left: 50%; bottom: calc(var(--sb) + 18px); transform: translateX(-50%); background: #1a120d; border: 1px solid #4a3627; padding: 9px 16px; font-family: var(--ui); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 70; }
#toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #cube.anim { transition-duration: .01s; }
  #closeup.in, #map.in, .slot.new, #more, #rotate svg { animation: none; }
}