#status { background: linear-gradient(#12140f67, #0d110df2), url("assets/school-wide.webp") 44% center / cover; }
#status-splash { position: relative; width: min(74vw, 33rem); max-width: none; height: auto; filter: drop-shadow(0 10px 22px #000a); margin: 0; }
#loading-label { margin: 1.25rem 0 .6rem; color: #f1dec1; font: 1rem system-ui, sans-serif; }
#status-progress { position: relative; width: min(70vw, 19rem); height: .5rem; accent-color: #dfbd7e; margin: 0; }
#play-navigation { position: fixed; z-index: 2; right: .6rem; bottom: .6rem; display: flex; flex-wrap: wrap; justify-content: end; gap: .6rem; padding: .3rem .5rem; background: #151612eb; border: 1px solid #6b624c; }
#play-navigation a, #cloud-status { color: #f2e4c8; font: .75rem system-ui, sans-serif; }
#play-navigation[hidden], #cloud-status:empty { display: none; }
#cloud-status { position: fixed; z-index: 2; bottom: 2.5rem; right: .7rem; max-width: min(90vw, 27rem); margin: 0; padding: .45rem .6rem; pointer-events: none; background: #151612e8; border: 1px solid #82734f; }
#cloud-status[data-kind="offline"], #cloud-status[data-kind="conflict"] { border-color: #b87858; }

#touch-controls {
  --touch-bottom: max(8px, env(safe-area-inset-bottom));
  --touch-left: max(10px, env(safe-area-inset-left));
  --touch-right: max(10px, env(safe-area-inset-right));
  --touch-top: max(8px, env(safe-area-inset-top));
  --touch-key-size: clamp(52px, 15vh, 72px);
  --touch-stick-size: clamp(104px, 31vh, 152px);
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font: 600 14px/1.12 system-ui, sans-serif;
  color: #fff3d8;
}

#touch-controls[hidden], .touch-play, .touch-keypad, .touch-dock, .touch-rotate {
  display: none;
}

#touch-controls[data-mode="play"]:not([data-typing="true"]) .touch-play { display: block; }
#touch-controls[data-mode="play"][data-typing="true"] .touch-keypad { display: grid; }
#touch-controls[data-mode="title"] .touch-title,
#touch-controls[data-mode="card"] .touch-continue,
#touch-controls[data-mode="help"] .touch-continue,
#touch-controls[data-mode="lost"] .touch-lost,
#touch-controls[data-mode="end"] .touch-end,
#touch-controls[data-mode="paused"] .touch-settings,
#touch-controls[data-mode="options"] .touch-settings { display: flex; }

#touch-controls button {
  min-width: 44px;
  min-height: 46px;
  padding: 5px 7px;
  border: 1px solid #c2a879;
  border-radius: 9px;
  background: #161a18ed;
  color: #fff3d8;
  box-shadow: 0 2px 8px #0007;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#touch-controls button:active,
#touch-controls button[data-held],
#touch-controls button[aria-pressed="true"],
#touch-controls .touch-primary {
  background: #e9c483;
  color: #17120c;
  border-color: #f8d59b;
}

#touch-controls button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

#touch-look {
  position: absolute;
  inset: 0 0 0 44%;
  pointer-events: auto;
  touch-action: none;
}

#touch-move {
  position: absolute;
  inset: 13% 56% var(--touch-bottom) var(--touch-left);
  pointer-events: auto;
  touch-action: none;
}

#touch-stick {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--touch-stick-size);
  height: var(--touch-stick-size);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ccb48bbc;
  background: #131717aa;
  box-shadow: inset 0 0 0 8px #05060655, 0 3px 14px #0009;
  pointer-events: none;
}

#touch-stick[data-engaged] {
  left: var(--stick-left);
  top: var(--stick-top);
  bottom: auto;
  border-color: #e9c483;
}

.touch-stick-axis, #touch-stick-thumb {
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.touch-stick-axis {
  width: 68%;
  height: 68%;
  border: 1px dashed #d7b78383;
}

#touch-stick-thumb {
  --stick-x: 0px;
  --stick-y: 0px;
  width: 41%;
  height: 41%;
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));
  border: 2px solid #efd4a2;
  background: #b39764cf;
  box-shadow: 0 4px 12px #0009;
}

.touch-actions, .touch-keypad {
  position: absolute;
  right: var(--touch-right);
  bottom: var(--touch-bottom);
  grid-template-columns: repeat(3, var(--touch-key-size));
  gap: 6px;
}

.touch-actions {
  display: grid;
  grid-template-rows: repeat(3, var(--touch-key-size));
}
#touch-controls .touch-actions button { min-height: var(--touch-key-size); }
.touch-actions [data-touch-toggle="crouch"] { grid-area: 2 / 1; }
.touch-actions [data-touch-toggle="run"] { grid-area: 2 / 2; }
.touch-actions [data-touch-key="KeyF"] { grid-area: 2 / 3; }
.touch-actions [data-touch-key="KeyE"] { grid-area: 3 / 1 / 4 / 4; font-size: 1.08rem; }
.touch-actions [data-touch-toggle="map"] { grid-area: 1 / 3; }
.touch-story-action { grid-area: 1 / 1; }
.touch-friend-action { grid-area: 1 / 2; }
.touch-breath-action { grid-area: 2 / 1 / 3 / 4; }

#touch-controls #touch-interact[data-ready="false"]:not(:active) {
  background: #2c2922ef;
  color: #ffe2ab;
  border-color: #bca475;
}

#touch-interact span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#touch-controls[data-level="0"] .touch-story-action,
#touch-controls[data-level="4"] .touch-story-action,
#touch-controls:not([data-has-replay="true"]) .touch-replay,
#touch-controls:not([data-hiding="true"]) .touch-breath-action,
#touch-controls[data-hiding="true"] :is(#touch-move, [data-touch-toggle], [data-touch-key="KeyF"], .touch-story-action, .touch-friend-action),
#touch-controls[data-map="true"] :is(#touch-move, #touch-look, .touch-actions button:not([data-touch-toggle="map"])) { display: none; }

.touch-utility {
  position: absolute;
  top: calc(var(--touch-top) + clamp(28px, 9vh, 46px));
  right: var(--touch-right);
  display: flex;
  gap: 6px;
}

.touch-keypad {
  bottom: max(var(--touch-bottom), calc(50% - 110px));
  grid-template-columns: repeat(3, clamp(46px, 14vh, 64px));
}
#touch-controls .touch-keypad button { min-height: clamp(46px, 14vh, 64px); font-size: 1.05rem; }
#touch-controls .touch-keypad .touch-keypad-exit { grid-column: span 2; font-size: .9rem; }

.touch-dock {
  position: absolute;
  bottom: var(--touch-bottom);
  left: var(--touch-left);
  right: var(--touch-right);
  align-items: stretch;
  justify-content: center;
  gap: 5px;
}
#touch-controls .touch-dock button { padding-inline: 9px; }
#touch-controls .touch-dock .touch-primary { min-width: 100px; }

body.touch-device #play-navigation {
  top: max(5px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: auto;
  padding-block: 0;
  gap: 0;
}
body.touch-device #play-navigation a { display: grid; place-items: center; padding: 0 8px; min-height: 38px; }
body.touch-device[data-touch-mode="play"] #play-navigation,
body.touch-device[data-touch-mode="caught"] #play-navigation { display: none; }
body.touch-device #cloud-status {
  bottom: auto;
  top: max(48px, calc(env(safe-area-inset-top) + 45px));
  right: max(8px, env(safe-area-inset-right));
  z-index: 4;
  max-width: min(62vw, 25rem);
}
body.touch-device[data-touch-mode="play"] #cloud-status {
  top: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  right: 50%;
  transform: translateX(50%);
  max-width: min(36vw, 22rem);
}

#touch-controls[data-portrait="true"] > :not(.touch-rotate) { display: none !important; }
#touch-controls[data-portrait="true"] .touch-rotate {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  text-align: center;
  pointer-events: auto;
  touch-action: none;
  background: radial-gradient(ellipse at center, #303125fa, #111513fb 72%);
}
.touch-rotate-mark { color: #f0c889; font-size: 3rem; line-height: 1; }
.touch-rotate strong { font-size: 1.35rem; margin-top: .8rem; }
.touch-rotate p { font-weight: 400; max-width: 17rem; line-height: 1.5; }
body.touch-portrait #cloud-status { display: none; }

@media (max-width: 680px) {
  #touch-controls .touch-settings button { padding-inline: 5px; font-size: 12px; }
  #touch-controls .touch-settings .touch-primary { min-width: 72px; }
  #touch-controls .touch-title button { padding-inline: 6px; font-size: 13px; }
}

@media (max-height: 295px) and (orientation: landscape) {
  .touch-actions, .touch-keypad, .touch-utility { gap: 4px; }
  .touch-utility { top: calc(var(--touch-top) + 23px); }
}