.tower-icon { background: currentColor; -webkit-mask: url('/assets/images/tower.svg') center / contain no-repeat; mask: url('/assets/images/tower.svg') center / contain no-repeat; }
.home-page.is-tower-view .home-desk { display: none; }
.home-page.is-tower-view::before { display: none; }
.tower-view {
  --tower-sky: #e1eef6; --tower-horizon: #dce9d5; --tower-outline: #383838; --tower-mortar: #686868;
  --tower-grass: #91ad80; --tower-grass-light: #bbcf9e; --tower-soil: #a38163; --tower-soil-dark: #80644e;
  --tower-shaft: #777777; --tower-door: #aaaaaa; --tower-highlight: #dddddd; --tower-metal: #888888;
  --tower-panel: #303030; --tower-panel-text: #f2f2f2;
  position: relative; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden;
  padding: 7rem 4rem 8rem; background: linear-gradient(var(--tower-sky) 0%, var(--tower-sky) 20%, var(--tower-horizon) 100%); background-attachment: local; isolation: isolate;
  overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #88888855 transparent;
}
.tower-view[hidden] { display: none; }
[data-theme="dark"] .tower-view { --tower-sky: #192630; --tower-horizon: #253328; --tower-grass: #49674c; --tower-grass-light: #719064; --tower-soil: #65503f; --tower-soil-dark: #483a30; --tower-outline: #2b2b2b; --tower-mortar: #5c5c5c; --tower-shaft: #505050; --tower-door: #858585; }
.tower-world { position: relative; width: min(47.5rem, 100%); margin: 0 auto; container-type: inline-size; }
.tower-scenery { position: absolute; inset: -7rem calc((100% - 100vw) / 2) -8rem; z-index: -1; pointer-events: none; }
.tower-building { position: relative; border: .25rem solid var(--tower-outline); border-top: 0; background: var(--tower-outline); box-shadow: .75rem .75rem 0 #00000012; }
.tower-floor { position: relative; border-bottom: .375rem solid var(--tower-outline); background: color-mix(in srgb, var(--floor-color) 23%, #f7f0dc); }
[data-theme="dark"] .tower-floor { background: color-mix(in srgb, var(--floor-color) 45%, #8faaa2); }
.tower-floor-header { position: relative; z-index: 1; display: flex; align-items: center; gap: .625rem; min-height: 2.25rem; padding: .375rem .75rem .375rem 23%; background: color-mix(in srgb, var(--floor-color) 64%, #fff); border-block: .125rem solid color-mix(in srgb, var(--floor-color) 50%, var(--tower-outline)); color: #242424; }
.tower-floor-header h2 { font-size: .8125rem; font-weight: 600; line-height: 1.4; margin: 0; color: inherit; }
.tower-floor-number { position: absolute; left: 4%; font: 700 .8125rem/1 monospace; }
.tower-floor-date { margin-left: auto; white-space: nowrap; font: .625rem/1.4 monospace; opacity: .75; }
.tower-room { position: relative; height: clamp(7rem, 25cqw, 12rem); }
.tower-room::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 21%; background: var(--tower-shaft); border-right: .25rem solid var(--tower-outline); box-shadow: inset .5rem 0 #ffffff0a; }
.tower-room::after { content: ""; position: absolute; top: 10%; right: 6%; width: 3%; height: 3%; background: var(--tower-highlight); box-shadow: 0 .1875rem #00000020; }
.tower-room-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tower-depth { display: none; }
.tower-portal { position: absolute; z-index: 2; left: var(--portal-x); bottom: 9%; width: 13%; min-height: 3.75rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; transform: translateX(-50%); text-decoration: none; color: #303030; }
.tower-portal > svg { width: clamp(1.75rem, 6cqw, 2.75rem); height: auto; flex-shrink: 0; filter: drop-shadow(0 .1875rem 0 #00000022); }
.tower-portal > span { display: block; width: max-content; max-width: 24cqw; text-align: center; font: 600 .5625rem/1.3 monospace; background: #eeeeee; color: #303030; padding: .125rem .25rem; border: .0625rem solid #00000025; }
.tower-portal:hover > svg, .tower-portal:focus-visible > svg, .is-entering .tower-portal > svg { filter: drop-shadow(0 0 .4375rem var(--tower-highlight)); transform: translateY(-.125rem); }
.tower-portal:focus-visible { outline: .125rem solid var(--focus-ring); outline-offset: .25rem; }
.tower-elevator-door { position: absolute; left: 5%; width: 13%; top: 15%; bottom: 9.375%; display: flex; overflow: hidden; background: var(--tower-panel); border: .1875rem solid var(--tower-outline); border-top-width: .375rem; }
.tower-elevator-door i { width: 50%; height: 100%; background: var(--tower-door); border-inline: .0625rem solid var(--tower-mortar); transition: transform 180ms linear; }
.is-opening-door .tower-elevator-door i:first-child { transform: translateX(-100%); }
.is-opening-door .tower-elevator-door i:last-child { transform: translateX(100%); }
.tower-lift { position: absolute; left: 5%; top: 0; width: 13%; border: .1875rem solid var(--tower-highlight); background: #3030307a; pointer-events: none; z-index: 3; box-shadow: 0 .25rem 0 var(--tower-panel); }
.tower-lift::before { content: ""; position: absolute; top: .1875rem; left: 25%; width: 50%; height: .1875rem; background: var(--tower-highlight); }
.tower-actor { position: absolute; top: 0; left: 0; width: clamp(1.5rem, 5.6cqw, 2.75rem); aspect-ratio: 216 / 332; pointer-events: none; z-index: 4; }
.tower-actor > span, .tower-actor img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.tower-actor[data-facing="right"] img { transform: scaleX(-1); }
.tower-actor.is-walking > span { animation: tower-step 180ms steps(2, end) infinite; }
@keyframes tower-step { 50% { translate: 0 -.125rem; rotate: -3deg; } }
.tower-roof { height: 6rem; position: relative; border-bottom: .5rem solid var(--tower-outline); }
.tower-roof::after { content: ""; position: absolute; bottom: -.1875rem; inset-inline: -.5rem; height: .375rem; background: #aaaaaa; border-top: .125rem solid #dddddd; }
.tower-sign { position: absolute; bottom: .75rem; left: 25%; background: var(--tower-panel); color: var(--tower-panel-text); border: .25rem solid var(--tower-highlight); box-shadow: .25rem .25rem 0 var(--tower-outline); padding: .375rem .75rem; font: 700 .75rem/1.4 monospace; text-align: center; }
.tower-sign > span { display: block; font-size: .875rem; line-height: 1.4; }
.tower-sign::before, .tower-sign::after { content: ""; position: absolute; top: calc(100% + .25rem); width: .25rem; height: .75rem; background: var(--tower-outline); box-shadow: .125rem 0 #ffffff30; }
.tower-sign::before { left: 20%; }
.tower-sign::after { right: 20%; }
.tower-antenna { position: absolute; bottom: 0; left: 11%; height: 4.75rem; width: .25rem; background: var(--tower-metal); }
.tower-antenna::before { content: ""; position: absolute; top: .75rem; left: -.75rem; width: 1.75rem; height: .25rem; background: var(--tower-metal); box-shadow: 0 .75rem var(--tower-metal); }
.tower-roof-plant { position: absolute; bottom: 0; right: 9%; width: 1.5rem; height: 1.5rem; background: #a48167; box-shadow: 0 -.75rem #7a9f75, -.5rem -1.25rem #7a9f75, .25rem -1.75rem #668e66; }
.tower-foundation { display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-top: .25rem solid var(--tower-metal); color: var(--tower-highlight); font: .5625rem/1.4 monospace; }
.tower-ground { position: relative; height: 3rem; width: calc(100% + 3rem); margin-left: -1.5rem; background: linear-gradient(var(--tower-grass) 0 .75rem, var(--tower-soil) .75rem); border-top: .25rem solid var(--tower-grass-light); border-bottom: .375rem solid var(--tower-soil-dark); box-shadow: 0 .5rem color-mix(in srgb, var(--tower-soil-dark) 60%, transparent); }
.tower-ground::before { content: ""; position: absolute; top: -.625rem; inset-inline: 0; height: .375rem; background: repeating-linear-gradient(90deg, transparent 0 .75rem, var(--tower-grass) .75rem 1rem, transparent 1rem 1.5rem, var(--tower-grass-light) 1.5rem 1.625rem, transparent 1.625rem 2.5rem); }
.tower-ground::after { content: ""; position: absolute; inset: .75rem 0 .25rem; background: repeating-linear-gradient(90deg, transparent 0 1rem, #ffffff12 1rem 1.25rem, transparent 1.25rem 3rem) 0 .25rem / 100% .1875rem no-repeat, repeating-linear-gradient(90deg, transparent 0 2rem, #00000018 2rem 2.1875rem, transparent 2.1875rem 4rem) 0 .75rem / 100% .1875rem no-repeat; }
.tower-cloud { position: absolute; pointer-events: none; top: 11rem; width: 7rem; height: 1.5rem; background: #ffffff66; box-shadow: 1rem -1rem #ffffff66, 3rem -.5rem #ffffff66; z-index: -1; }
.tower-cloud-one { left: 3%; }
.tower-cloud-two { right: 5%; top: 27rem; width: 5rem; }
.tower-cloud-three { left: 4%; top: 47%; width: 6rem; }
.tower-cloud-four { right: 3%; top: 74%; width: 8rem; }
[data-theme="dark"] .tower-cloud { opacity: .12; }
.tower-controls { position: fixed; z-index: 16; bottom: calc(1.25rem + var(--safe-bottom)); right: max(1.25rem, calc((100vw - 47.5rem) / 2)); display: flex; align-items: center; gap: .25rem; padding: .375rem; border: .125rem solid var(--tower-metal); background: var(--tower-panel); color: var(--tower-panel-text); box-shadow: .25rem .25rem 0 #00000033; }
.tower-control { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: .625rem; border: 0; border-radius: 0; color: inherit; background: #ffffff0d; cursor: pointer; }
.tower-control svg { width: 100%; height: 100%; fill: currentColor; }
.tower-control:hover { background: #ffffff25; }
.tower-control:disabled { opacity: .3; cursor: default; }
.tower-control:focus-visible { outline: .125rem solid var(--tower-highlight); outline-offset: .0625rem; }
@media (max-width: 40rem) {
  .tower-view { padding: 5.25rem .75rem 8rem; }
  .tower-scenery { top: -5.25rem; }
  .tower-floor-header { gap: .375rem; padding-inline-end: .375rem; min-height: 2rem; }
  .tower-floor-header h2 { font-size: .625rem; }
  .tower-floor-date { font-size: .4375rem; }
  .tower-floor-number { font-size: .625rem; }
  .tower-portal > span { font-size: .4375rem; }
  .tower-sign { font-size: .625rem; padding-inline: .375rem; }
  .tower-sign > span { font-size: .75rem; }
  .tower-controls { right: .75rem; bottom: calc(.75rem + var(--safe-bottom)); gap: .125rem; padding: .25rem; }
  .tower-control { width: 2.375rem; height: 2.75rem; }
  .is-tower-view .desk-view-switch { top: auto; bottom: calc(.75rem + var(--safe-bottom)); left: .75rem; transform: none; }
  .is-tower-view .desk-view-switch .icon-button { width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; }
}
[data-reduced-motion="true"] .tower-actor > span { animation: none; }
[data-reduced-motion="true"] .tower-elevator-door i { transition: none; }