:root {
  --void: #0d0907;
  --wood: #2a1b12;
  --wood-hi: #3d281b;
  --bone: #e8dcc4;
  --bone-dim: #a89a82;
  --wax: #d4a94f;
  --blood: #7a2e26;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --inv: 96px;
  --bar: 44px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--bone); font-family: var(--serif); overflow: hidden; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--wax); outline-offset: 2px; }

#app { height: 100%; display: flex; flex-direction: column; }
#bar { height: var(--bar); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
#title { margin: 0; font-size: 1.35rem; font-weight: 600; font-style: italic; letter-spacing: .02em; color: var(--bone-dim); }
#bar nav { display: flex; gap: 2px; }
#bar nav button { background: none; border: 0; padding: 6px 10px; font-size: 1.05rem; color: var(--bone-dim); border-radius: 3px; }
#bar nav button:hover { color: var(--bone); background: rgba(232, 220, 196, .06); }
#bar nav button.on { color: var(--wax); }

#play { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 14px 14px; }
#stageWrap { position: relative; flex: none; }
#stage {
  position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; transform-origin: 0 0;
  overflow: hidden; background: #000; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, .7);
}
#view3d { position: absolute; inset: 0; perspective: 540px; perspective-origin: 50% 50%; }
#cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(500px); pointer-events: none; }
#cube.anim { transition: transform .62s cubic-bezier(.55, .05, .3, 1); }
.face { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; 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; }
.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.zone { background: transparent; }
.obj.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px 40px rgba(0, 0, 0, .55); }

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

.nav { position: absolute; z-index: 8; width: 84px; height: 84px; border: 0; background: none; opacity: .38; transition: opacity .2s; }
.nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border: solid var(--bone); border-width: 0 5px 5px 0; }
.nav:hover { opacity: .9; }
.nav[hidden] { display: none; }
#navL { left: 8px; top: 458px; } #navL::before { transform: translate(-30%, -50%) rotate(135deg); }
#navR { right: 8px; top: 458px; } #navR::before { transform: translate(-70%, -50%) rotate(-45deg); }
#navU { top: 8px; left: 458px; } #navU::before { transform: translate(-50%, -30%) rotate(-135deg); }
#navD { bottom: 8px; left: 458px; } #navD::before { transform: translate(-50%, -70%) rotate(45deg); }

#dialog { position: absolute; z-index: 10; left: 60px; right: 60px; bottom: 56px; padding: 26px 34px 30px; background: rgba(13, 9, 7, .9); border: 1px solid rgba(212, 169, 79, .35); cursor: pointer; }
#who { font-size: 30px; font-style: italic; color: var(--wax); margin-bottom: 6px; min-height: 0; }
#who:empty { display: none; }
#line { margin: 0; font-size: 38px; line-height: 1.32; }
#more { position: absolute; right: 22px; bottom: 10px; font-size: 26px; 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: 18px; background: rgba(0, 0, 0, .55); }
#choices button { min-width: 520px; padding: 20px 34px; font-size: 36px; background: rgba(13, 9, 7, .94); border: 1px solid rgba(212, 169, 79, .45); }
#choices button:hover, #choices button:focus-visible { background: var(--wood-hi); }
#ending { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; background: rgba(0, 0, 0, .86); text-align: center; padding: 80px; animation: fade 1.2s; }
#ending p { font-size: 54px; font-style: italic; line-height: 1.25; margin: 0; max-width: 820px; }
#ending button { font-size: 32px; padding: 14px 34px; 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: 44px; font-style: italic; color: var(--bone-dim); background: #000; }
#loading[hidden] { display: none; }

#inv { flex: none; width: var(--inv); display: flex; flex-direction: column; gap: 8px; align-self: center; }
.slot { width: var(--inv); height: var(--inv); border: 1px solid rgba(232, 220, 196, .14); background: rgba(42, 27, 18, .5); display: grid; place-items: center; padding: 10px; position: relative; }
.slot img { max-width: 100%; max-height: 100%; pointer-events: none; }
.slot.sel { border-color: var(--wax); background: rgba(212, 169, 79, .14); }
.slot.new { animation: pop .5s; }
@keyframes pop { 40% { transform: scale(1.12); } }
.slot.empty { cursor: default; opacity: .5; }

dialog { background: #1a120d; color: var(--bone); border: 1px solid rgba(212, 169, 79, .3); padding: 26px 28px; width: min(460px, 92vw); max-height: 86vh; }
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 16px; 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 textarea { resize: vertical; }
dialog .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
dialog .col { display: flex; flex-direction: column; gap: 8px; }
dialog button { font-family: var(--ui); font-size: .92rem; padding: 9px 14px; background: #2a1b12; border: 1px solid #4a3627; border-radius: 2px; }
dialog button.primary { background: var(--wax); color: #1a120d; border-color: var(--wax); font-weight: 600; }
dialog button.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: .88rem; }
table.players th { text-align: left; font-weight: 500; color: var(--bone-dim); padding: 6px 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: 24px; 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: 50; }
#toast.on { opacity: 1; }

@media (max-aspect-ratio: 1/1) {
  #play { flex-direction: column; gap: 10px; padding: 0 8px 10px; }
  #inv { flex-direction: row; width: auto; max-width: 100%; overflow-x: auto; --inv: 64px; }
  #bar nav button { padding: 6px 7px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  #cube.anim { transition-duration: .01s; }
  #closeup.in, .slot.new, #more { animation: none; }
}