.tower-body { min-height: 100vh; overflow-x: hidden; background: #070a13; }
.tower-header { min-height: 72px; padding: 11px 22px; display: flex; align-items: center; gap: 18px; position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(6,9,17,.92); backdrop-filter: blur(18px); }
.tower-back { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }.tower-title { display: grid; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.2; }.tower-title strong { font: 600 12px var(--display); letter-spacing: .1em; }.tower-title small, .tower-location span { color: var(--muted); font-size: 8px; letter-spacing: .12em; }.tower-location { margin-left: auto; display: grid; text-align: right; }.tower-location strong { font: 600 12px var(--display); }.tower-wallet { display: grid; min-width: 150px; padding: 0 17px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); line-height: 1.25; }.tower-wallet span { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .09em; }.tower-wallet strong { color: var(--muted); font-size: 8px; }.tower-wallet i { color: var(--ink); font-style: normal; }.tower-tool { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; font-size: 8px; font-weight: 700; letter-spacing: .08em; }.tower-tool.hint { color: var(--gold); border-color: rgba(246,201,106,.23); }
.tower-shell { width: min(1440px, calc(100% - 36px)); margin: auto; padding: 26px 0 35px; }.location-head { display: grid; grid-template-columns: 1fr minmax(280px, .75fr) 240px; align-items: end; gap: 28px; padding: 0 4px 18px; }.escape-kicker { margin: 0 0 6px; color: var(--cyan); font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.location-head h1 { margin: 0; font-size: clamp(28px,3.5vw,46px); text-transform: uppercase; }.location-head > p { margin: 0; color: var(--muted); font-size: 12px; }.tower-progress { display: grid; gap: 7px; }.tower-progress span { color: var(--muted); font-size: 8px; letter-spacing: .1em; }.tower-progress div { height: 5px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.09); }.tower-progress i { display: block; width: 5%; height: 100%; background: linear-gradient(90deg,var(--gold),var(--cyan)); transition: width .5s ease; }
.scene-shell { aspect-ratio: 16 / 8.35; min-height: 430px; position: relative; overflow: hidden; border: 1px solid rgba(246,201,106,.2); border-radius: 24px; background: #111; box-shadow: 0 30px 80px rgba(0,0,0,.42); }.location-image { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .35s ease, transform 1s ease; }.scene-shell:hover .location-image { transform: scale(1.008); }.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 46%, rgba(2,4,10,.55) 100%), linear-gradient(180deg, rgba(2,5,12,.08), rgba(2,5,12,.3)); }.hotspot-layer { position: absolute; inset: 0; }.scene-hotspot { position: absolute; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; }.scene-hotspot::before { content: ""; width: 11px; height: 11px; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(246,201,106,.8); border-radius: 50%; background: rgba(246,201,106,.18); box-shadow: 0 0 0 8px rgba(246,201,106,.04), 0 0 18px rgba(246,201,106,.35); opacity: .78; transition: .2s ease; }.scene-hotspot::after { content: attr(aria-label); padding: 5px 8px; position: absolute; left: 50%; top: calc(50% + 18px); border-radius: 6px; color: #fff7df; background: rgba(5,8,16,.82); font-size: 8px; white-space: nowrap; transform: translateX(-50%) translateY(4px); opacity: 0; transition: .2s ease; }.scene-hotspot:hover, .scene-hotspot:focus-visible { border-color: rgba(246,201,106,.2); background: rgba(246,201,106,.035); }.scene-hotspot:hover::before, .scene-hotspot:focus-visible::before { opacity: 1; transform: scale(1.25); }.scene-hotspot:hover::after, .scene-hotspot:focus-visible::after { opacity: 1; transform: translateX(-50%); }.scene-status { max-width: 65%; padding: 11px 15px; position: absolute; left: 18px; bottom: 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #d9dce7; background: rgba(6,9,17,.82); backdrop-filter: blur(9px); font-size: 10px; }.selected-item { padding: 9px 12px; display: grid; position: absolute; right: 18px; bottom: 17px; border: 1px solid rgba(67,226,211,.4); border-radius: 9px; background: rgba(6,15,22,.88); text-align: right; }.selected-item span { color: var(--cyan); font-size: 7px; letter-spacing: .13em; }.selected-item strong { color: white; font: 600 10px var(--display); }
.escape-nav { min-height: 82px; margin-top: 14px; display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)) 180px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(13,18,32,.8); }.escape-nav > button { padding: 13px 17px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 1fr; gap: 0 9px; border: 0; border-right: 1px solid var(--line); color: var(--ink); background: transparent; cursor: pointer; text-align: left; }.escape-nav > button:hover { background: rgba(246,201,106,.05); }.escape-nav button > span { grid-row: 1 / 3; align-self: center; font-size: 20px; }.escape-nav strong { align-self: end; font: 600 10px var(--display); text-transform: uppercase; }.escape-nav small { color: var(--muted); font-size: 8px; }.secret-counter { padding: 14px 20px; display: grid; align-content: center; background: rgba(246,201,106,.04); }.secret-counter span { color: var(--muted); font-size: 7px; letter-spacing: .13em; }.secret-counter strong { color: var(--gold); font: 600 20px var(--display); }
.escape-intro { min-height: 100vh; display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; overflow: hidden; }.escape-intro > img, .escape-intro > div { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }.escape-intro > div { background: radial-gradient(circle at 50% 42%, rgba(4,7,14,.2), rgba(4,7,14,.9) 80%); }.escape-intro article { width: min(700px,calc(100% - 36px)); padding: 42px; position: relative; border: 1px solid rgba(246,201,106,.22); border-radius: 24px; color: white; background: rgba(7,10,18,.72); backdrop-filter: blur(16px); text-align: center; box-shadow: 0 30px 100px #000; }.escape-intro h1 { margin: 5px 0 15px; font-size: clamp(42px,7vw,78px); line-height: 1; }.escape-intro article > p:not(.escape-kicker) { color: #bdc4d3; }.intro-actions { margin-top: 27px; display: flex; justify-content: center; gap: 12px; }
.escape-primary, .escape-secondary, .escape-link { min-height: 45px; padding: 0 18px; display: inline-grid; place-items: center; border-radius: 9px; cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: .1em; }.escape-primary { border: 1px solid #dbc07e; color: #151108; background: linear-gradient(135deg,#f6d47c,#b9903c); box-shadow: 0 10px 26px rgba(246,201,106,.14); }.escape-secondary { border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.025); }.escape-link { border: 0; color: #b7bdcb; background: transparent; }
.escape-drawer { width: min(480px,100%); height: 100vh; padding: 26px; position: fixed; right: 0; top: 0; z-index: 42; border-left: 1px solid var(--line); color: var(--ink); background: rgba(11,15,27,.98); box-shadow: -30px 0 80px rgba(0,0,0,.4); transform: translateX(105%); transition: .3s ease; }.escape-drawer.open { transform: none; }.drawer-scrim { position: fixed; inset: 0; z-index: 41; background: rgba(2,4,10,.62); backdrop-filter: blur(3px); }.drawer-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.drawer-head h2 { margin: 0; font-size: 31px; text-transform: uppercase; }.drawer-head button, .escape-modal-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; font-size: 23px; }.drawer-content { height: calc(100vh - 110px); overflow: auto; padding: 20px 0; }.inventory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.inventory-item { min-height: 110px; padding: 14px; display: grid; align-content: start; gap: 5px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; }.inventory-item.selected { border-color: var(--cyan); background: rgba(67,226,211,.07); }.inventory-item b { color: var(--gold); font: 600 18px var(--display); }.inventory-item strong { font: 600 11px var(--display); }.inventory-item small { color: var(--muted); font-size: 9px; }.combine-action { width: 100%; margin-top: 13px; }.empty-drawer { padding: 35px 10px; color: var(--muted); text-align: center; }.clue-list, .evidence-list, .progress-list { display: grid; gap: 10px; }.clue-card, .evidence-card, .progress-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }.clue-card small, .evidence-card small { color: var(--cyan); font-size: 8px; letter-spacing: .1em; }.clue-card p, .evidence-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }.locked-clue { opacity: .35; }.progress-card { display: flex; justify-content: space-between; }.progress-card.complete strong { color: var(--cyan); }
.escape-dialog { width: min(620px,calc(100% - 30px)); padding: 32px; color: var(--ink); border: 1px solid rgba(246,201,106,.25); border-radius: 22px; background: #111827; box-shadow: 0 35px 100px rgba(0,0,0,.58); }.escape-dialog::backdrop { background: rgba(2,4,10,.75); backdrop-filter: blur(7px); }.escape-dialog > .escape-modal-close { position: absolute; top: 18px; right: 18px; }.escape-dialog h2, .escape-puzzle-card h2 { margin: 5px 50px 12px 0; font-size: clamp(30px,5vw,48px); text-transform: uppercase; }.escape-dialog > p:not(.escape-kicker), .escape-puzzle-card > p { color: var(--muted); }.escape-dialog [data-message-extra] { margin: 17px 0; }.escape-dialog > .escape-primary { width: 100%; margin-top: 16px; }.escape-puzzle-card { display: grid; }.escape-puzzle-card .escape-modal-close { position: absolute; top: 18px; right: 18px; }.grammar-sentences { display: grid; gap: 9px; margin: 20px 0; }.grammar-sentence { min-height: 56px; padding: 9px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; border: 1px solid var(--line); border-radius: 10px; color: #d8dceb; background: rgba(255,255,255,.025); font-size: 13px; }.grammar-slot { min-width: 135px; min-height: 37px; border: 1px dashed rgba(246,201,106,.45); border-radius: 7px; color: var(--gold); background: rgba(246,201,106,.035); }.grammar-fragments { display: flex; flex-wrap: wrap; gap: 8px; }.grammar-fragments button, .sequence-option { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.035); cursor: grab; }.grammar-fragments button.selected { border-color: var(--cyan); }.puzzle-feedback { min-height: 22px; color: #f09aae !important; font-size: 11px; }.sequence-options, .sequence-result { display: flex; flex-wrap: wrap; gap: 8px; margin: 17px 0; }.sequence-result { min-height: 58px; padding: 9px; border: 1px dashed var(--line); border-radius: 10px; }.sequence-result span { padding: 9px; border-radius: 7px; color: var(--gold); background: rgba(246,201,106,.08); font-size: 10px; }.transcript-box { padding: 12px; border-left: 2px solid var(--gold); color: var(--muted); background: rgba(246,201,106,.035); font-size: 11px; }.discovery-card { padding: 15px; border: 1px solid rgba(67,226,211,.25); border-radius: 11px; background: rgba(67,226,211,.055); }.discovery-card strong { display: block; color: var(--cyan); }.result-dialog { text-align: center; }.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0; }.result-stats div { padding: 13px; display: grid; border: 1px solid var(--line); border-radius: 10px; }.result-stats span { color: var(--muted); font-size: 8px; }.result-stats strong { color: var(--gold); font: 600 13px var(--display); }.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.replay-copy { font-size: 11px; }
.escape-toast { min-width: 290px; padding: 15px 18px; display: grid; position: fixed; right: 22px; bottom: 22px; z-index: 60; border: 1px solid rgba(246,201,106,.35); border-radius: 13px; color: white; background: rgba(10,14,25,.97); box-shadow: 0 20px 55px rgba(0,0,0,.45); transform: translateY(150%); opacity: 0; transition: .3s ease; }.escape-toast.show { transform: none; opacity: 1; }.escape-toast span { color: var(--cyan); font-size: 7px; letter-spacing: .13em; }.escape-toast strong { font: 600 15px var(--display); }.escape-toast small { color: var(--gold); }
:root[data-theme="light"] .tower-body { background: #eef2f7; }.theme-light-placeholder { color: inherit; }
:root[data-theme="light"] .tower-header { background: rgba(248,250,253,.94); box-shadow: 0 8px 30px rgba(28,42,70,.07); }
:root[data-theme="light"] .escape-nav, :root[data-theme="light"] .escape-drawer { background: rgba(250,252,255,.97); }
:root[data-theme="light"] .escape-dialog { background: #fbfcff; }
:root[data-theme="light"] .scene-shell { box-shadow: 0 28px 65px rgba(27,40,65,.18); }
:root[data-theme="light"] .inventory-item, :root[data-theme="light"] .clue-card, :root[data-theme="light"] .evidence-card, :root[data-theme="light"] .progress-card, :root[data-theme="light"] .grammar-sentence, :root[data-theme="light"] .grammar-fragments button { background: rgba(35,55,92,.035); }
:root[data-theme="light"] .grammar-sentence { color: var(--ink); }
@media (max-width: 980px) { .tower-header { flex-wrap: wrap; }.tower-location { margin-left: auto; }.tower-wallet { order: 3; width: 100%; border: 0; padding: 0; }.location-head { grid-template-columns: 1fr 220px; }.location-head > p { grid-column: 1 / -1; grid-row: 2; }.scene-shell { min-height: 400px; aspect-ratio: 4 / 3; }.escape-nav { grid-template-columns: repeat(4,1fr); }.secret-counter { grid-column: 1 / -1; text-align: center; } }
@media (max-width: 620px) { .tower-header { padding: 9px 12px; gap: 8px; }.tower-title, .tower-wallet, .tower-location, .tower-tool[data-sound-toggle] { display: none; }.tower-tool { margin-left: auto; }.tower-tool + .tower-tool { margin-left: 0; }.tower-shell { width: calc(100% - 20px); padding-top: 18px; }.location-head { grid-template-columns: 1fr; gap: 10px; }.location-head > p { grid-row: auto; grid-column: auto; }.scene-shell { aspect-ratio: 3 / 4; min-height: 560px; }.location-image { object-position: center; }.scene-status { max-width: calc(100% - 36px); }.escape-nav { grid-template-columns: 1fr 1fr; }.escape-nav > button { border-bottom: 1px solid var(--line); }.secret-counter { grid-column: 1 / -1; }.escape-intro article { padding: 28px 18px; }.intro-actions, .result-actions { display: grid; }.escape-dialog { padding: 27px 18px 20px; }.result-stats { grid-template-columns: 1fr; }.escape-toast { right: 10px; bottom: 10px; left: 10px; min-width: 0; } }