.escape-play-area {
  padding: 0;
  overflow: hidden;
  background: #111319;
}

.escape-game {
  --escape-bg: #16181d;
  --escape-panel: #23262d;
  --escape-line: #4b505b;
  --escape-text: #f3f3f3;
  --escape-muted: #aeb4bf;
  width: 100%;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: #111319;
  color: var(--escape-text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.escape-game button,
.escape-modal-wrap button,
.escape-modal-wrap input {
  font: inherit;
}

.escape-game button,
.escape-modal-wrap button {
  color: inherit;
}

.escape-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #1c1f25;
  border-bottom: 1px solid #30343d;
}

.escape-title { font-weight: 700; letter-spacing: .08em; }
.escape-status { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--escape-muted); }
.escape-text-btn { border: 1px solid #454a55; background: #262a32; border-radius: 8px; padding: 6px 9px; cursor: pointer; }

.escape-viewport { position: relative; overflow: hidden; min-height: 440px; touch-action: pan-y; background: #17191f; }
.escape-scene { position: absolute; inset: 0; display: none; }
.escape-scene.active { display: block; animation: escape-fade .16s ease-out; }
@keyframes escape-fade { from { opacity: .2; transform: scale(.99); } to { opacity: 1; transform: none; } }

.escape-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10, 11, 14, .72);
  backdrop-filter: blur(2px);
}
.escape-intro.hidden { display: none; }
.escape-intro-card {
  width: min(88%, 410px);
  padding: 24px;
  border: 1px solid #555b66;
  border-radius: 16px;
  background: #23262d;
  box-shadow: 0 18px 50px #0008;
  text-align: center;
}
.escape-intro-card h2 { margin: 0 0 14px; font-size: 26px; }
.escape-intro-card p { margin: 0; color: #e2e4e8; line-height: 1.8; }
.escape-intro-card .escape-intro-help { margin-top: 12px; color: #aeb4bf; font-size: 13px; }
.escape-intro-card .escape-primary { margin-top: 20px; min-width: 130px; }

.escape-wall { position: absolute; inset: 0; background: linear-gradient(#d9d3c8 0 71%, #6f6459 71% 74%, #9a8b79 74% 100%); }
.escape-ceiling-line { position: absolute; left: 0; right: 0; top: 8%; height: 2px; background: #c7c0b4; }
.escape-floor-lines::before,
.escape-floor-lines::after { content: ""; position: absolute; bottom: 0; width: 1px; height: 26%; background: #7e7163; transform-origin: bottom; }
.escape-floor-lines::before { left: 28%; transform: skewX(24deg); }
.escape-floor-lines::after { right: 28%; transform: skewX(-24deg); }
.escape-room-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #54504a; letter-spacing: .15em; }
.escape-hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  min-height: 0;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.escape-hotspot:focus,
.escape-hotspot:focus-visible,
.escape-hotspot:active {
  outline: none;
  background: transparent;
  box-shadow: none;
}

.escape-door { position: absolute; left: 31%; top: 16%; width: 38%; height: 58%; background: #6d5746; border: 6px solid #5b493c; box-shadow: inset 0 0 0 2px #7b6552; }
.escape-door::before { content: "EXIT"; position: absolute; top: 8%; left: 50%; transform: translateX(-50%); color: #e7dcc8; font-weight: 700; letter-spacing: .2em; font-size: 14px; }
.escape-door-knob { position: absolute; right: 9%; top: 52%; width: 18px; height: 18px; border-radius: 50%; background: #b7a26b; box-shadow: 0 0 0 3px #4c4035; }
.escape-keypad { position: absolute; left: 72%; top: 34%; width: 52px; height: 78px; background: #34383f; border: 3px solid #555b66; border-radius: 5px; }
.escape-keypad::before { content: "_ _ _"; position: absolute; top: 7px; left: 6px; right: 6px; padding: 3px 0; text-align: center; background: #9eb09e; color: #243126; font-size: 10px; }
.escape-keypad::after { content: "● ● ●\A● ● ●\A● ● ●"; white-space: pre; position: absolute; top: 30px; left: 0; right: 0; text-align: center; color: #aeb3bd; font-size: 9px; line-height: 13px; }
.escape-door.open { transform-origin: left center; transform: perspective(600px) rotateY(-68deg); transition: .9s ease; }
.escape-light { position: absolute; left: 30%; top: 14%; width: 41%; height: 61%; background: linear-gradient(90deg,#fffde4,#ffffff,#fffde4); opacity: 0; pointer-events: none; }
.escape-light.show { opacity: 1; transition: opacity .8s .25s; }

.escape-clock { position: absolute; left: 39%; top: 19%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #f1eee5; border: 8px solid #4d443b; box-shadow: 0 5px 10px #0002; }
.escape-hand { position: absolute; left: 50%; top: 50%; border-radius: 3px; background: #2e3035; transform-origin: 50% 100%; }
.escape-hand.hour { width: 4px; height: 28%; transform: translate(-50%,-100%) rotate(250deg); }
.escape-hand.minute { width: 3px; height: 38%; transform: translate(-50%,-100%) rotate(120deg); }
.escape-clock-center { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%); background: #2e3035; border-radius: 50%; }
.escape-clock-num { position: absolute; color: #4c4b49; font-weight: 700; font-size: 13px; }
.escape-clock-num.n12 { top: 5%; left: 45%; }
.escape-clock-num.n3 { right: 6%; top: 43%; }
.escape-clock-num.n6 { bottom: 4%; left: 47%; }
.escape-clock-num.n9 { left: 6%; top: 43%; }
.escape-small-table { position: absolute; left: 24%; bottom: 20%; width: 52%; height: 8%; background: #665446; border-radius: 2px; }
.escape-small-table::before,
.escape-small-table::after { content: ""; position: absolute; top: 100%; width: 7%; height: 170%; background: #55463b; }
.escape-small-table::before { left: 9%; }
.escape-small-table::after { right: 9%; }

.escape-desk { position: absolute; left: 17%; bottom: 18%; width: 66%; height: 25%; background: #765a43; border: 4px solid #5d4635; }
.escape-desk::before { content: ""; position: absolute; left: -3%; right: -3%; top: -12%; height: 13%; background: #85684f; border: 4px solid #5d4635; }
.escape-drawer { position: absolute; left: 7%; top: 16%; width: 40%; height: 43%; background: #6b4f3b; border: 3px solid #513b2d; }
.escape-drawer::after { content: ""; position: absolute; right: 9%; top: 41%; width: 10px; height: 10px; border-radius: 50%; background: #b8a273; }
.escape-drawer.opened { background: #2a211b; box-shadow: inset 0 9px 0 #5a4333; }
.escape-book { position: absolute; right: 14%; top: -22%; width: 23%; height: 19%; background: #32435f; transform: rotate(-5deg); border: 3px solid #263348; box-shadow: 0 5px 0 #1f2a3c; }
.escape-book::before { content: "BOOK"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #d9e0ea; letter-spacing: .12em; }

.escape-painting { position: absolute; left: 25%; top: 18%; width: 50%; height: 45%; background: #ece7da; border: 10px solid #4f3f33; box-shadow: 0 5px 10px #0002; }
.escape-shape { position: absolute; display: grid; place-items: center; color: #2f3540; font-weight: 700; }
.escape-circle { width: 54px; height: 54px; border-radius: 50%; background: #6d7f91; left: 50%; top: 14%; transform: translateX(-50%); }
.escape-triangle { left: 24%; top: 54%; width: 0; height: 0; border-left: 31px solid transparent; border-right: 31px solid transparent; border-bottom: 54px solid #956c5d; }
.escape-square { width: 55px; height: 55px; right: 22%; top: 54%; background: #6d8069; }
.escape-painting-note { position: absolute; left: 50%; top: 67%; transform: translateX(-50%); color: #514b44; font-size: 13px; letter-spacing: .1em; }

.escape-hintbar { min-height: 46px; padding: 10px 14px; background: #1e2127; color: #d9dde5; border-top: 1px solid #333740; font-size: 14px; display: flex; align-items: center; }
.escape-controls { display: grid; grid-template-columns: 70px 1fr 70px; gap: 10px; padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: #17191e; border-top: 1px solid #2d3038; }
.escape-arrow { border: 1px solid #4a4f5a; background: #252931; border-radius: 12px; min-height: 58px; font-size: 26px; cursor: pointer; touch-action: manipulation; }
.escape-inventory { display: flex; gap: 8px; align-items: center; justify-content: center; min-width: 0; }
.escape-slot { width: 56px; height: 56px; border: 1px solid #4a4f5a; background: #21242b; border-radius: 10px; display: grid; place-items: center; position: relative; font-size: 11px; color: #d6d9df; }
.escape-slot.empty { color: #5f6570; }
.escape-item-key { width: 30px; height: 9px; background: #c8ad65; position: relative; border-radius: 5px; }
.escape-item-key::before { content: ""; position: absolute; left: -10px; top: -5px; width: 14px; height: 14px; border: 4px solid #c8ad65; border-radius: 50%; background: transparent; }
.escape-item-key::after { content: ""; position: absolute; right: -7px; top: 3px; width: 10px; height: 4px; background: #c8ad65; box-shadow: 0 -5px 0 #c8ad65; }
.escape-item-paper { width: 28px; height: 36px; background: #e7dfbf; transform: rotate(-3deg); }

.escape-modal-wrap { position: fixed; inset: 0; background: #0009; display: none; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.escape-modal-wrap.show { display: flex; }
.escape-modal { width: min(92vw,420px); background: #23262d; border: 1px solid #4d535f; border-radius: 16px; padding: 18px; box-shadow: 0 24px 60px #0008; color: #f3f3f3; }
.escape-modal h2 { margin: 0 0 12px; font-size: 20px; }
.escape-modal p { margin: 0; line-height: 1.7; color: #e3e5e9; white-space: pre-line; }
.escape-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.escape-primary,
.escape-secondary { border-radius: 10px; padding: 10px 14px; border: 1px solid #535965; cursor: pointer; min-height: 44px; }
.escape-primary { background: #e6ddc0; color: #2a2d33 !important; border-color: #e6ddc0; font-weight: 700; }
.escape-secondary { background: #2d3139; color: #f1f1f1; }
.escape-code-input { width: 100%; min-height: 58px; font-size: 28px; letter-spacing: .45em; text-align: center; background: #15171c; color: white; border: 1px solid #555c68; border-radius: 10px; padding: 12px 8px 12px 18px; }
.escape-numpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.escape-numpad button { border: 1px solid #4a4f59; background: #2d3138; border-radius: 10px; min-height: 48px; font-size: 18px; cursor: pointer; }
.escape-page-input { width: 100%; min-height: 52px; background: #15171c; color: white; border: 1px solid #555c68; border-radius: 10px; padding: 12px; font-size: 22px; text-align: center; }
.escape-clear-screen { text-align: center; }
.escape-clear-screen .big { font-size: 42px; font-weight: 800; letter-spacing: .08em; margin: 8px 0; }

@media (max-width: 620px) {
  .escape-page-shell { width: 100%; padding-top: 32px; }
  .escape-page-shell > .back-link,
  .escape-page-shell > .eyebrow,
  .escape-page-shell > .game-title,
  .escape-page-shell > .game-description { margin-left: 14px; margin-right: 14px; }
  .escape-play-area { border-left: 0; border-right: 0; border-radius: 0; }
  .escape-game { min-height: calc(100dvh - 66px); }
  .escape-viewport { min-height: 55dvh; }
  .escape-door { left: 27%; width: 46%; }
  .escape-keypad { left: 76%; }
  .escape-clock { left: 35%; width: 30%; }
  .escape-painting { left: 18%; width: 64%; }
  .escape-desk { left: 9%; width: 82%; }
  .escape-intro-card { width: min(94%, 410px); padding: 20px 18px; }
}