:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #000;
  --osrs-yellow: #ffff00;
  --panel: #4c4a4a;
  --panel-dark: #252424;
  --stone: #777471;
}

* { box-sizing: border-box; }

html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #000; color: #fff; touch-action: none; }
button { font: inherit; }

[hidden] { display: none !important; }

.login-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #050505;
  image-rendering: auto;
}

.login-art {
  position: relative;
  width: 100vw;
  height: 100dvh;
  background: url('/assets/runescape-login-existing-v2.webp') center / cover no-repeat;
}

.login-hotspot {
  position: absolute;
  top: 53.8%;
  height: clamp(54px, 8.2vh, 88px);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.login-hotspot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
}
.login-hotspot:hover::after,
.login-hotspot:focus-visible::after { border-color: #ffff66; }
.existing-user { left: 50%; width: clamp(180px, 19vw, 300px); transform: translateX(-50%); }

.game-screen { position: fixed; inset: 0; overflow: hidden; background: #1e2b0b; }
.game-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100vw, calc(100dvh * 1.5));
  height: max(100dvh, calc(100vw / 1.5));
  transform: translate(calc(-50% + var(--pan-x, 0px)), -50%);
  transition: transform 100ms linear;
  overflow: hidden;
  user-select: none;
}
.world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.player {
  position: absolute;
  left: 50%; top: 75%;
  width: clamp(52px, 7.2vw, 92px);
  aspect-ratio: 1 / 2;
  background: url('/assets/madeline-walk-final.webp') 0 0 / 400% 100% no-repeat;
  transform: translate(-50%, -88%);
  transform-origin: 50% 88%;
  filter: drop-shadow(0 7px 4px rgb(0 0 0 / .45));
  pointer-events: none;
  z-index: 4;
}
.player.walking { animation: walk-cycle .56s linear infinite; }
@keyframes walk-cycle {
  0%, 24.99% { background-position: 0 0; }
  25%, 49.99% { background-position: 33.333% 0; }
  50%, 74.99% { background-position: 66.666% 0; }
  75%, 100% { background-position: 100% 0; }
}

.walk-marker {
  position: absolute;
  width: 16px; height: 16px;
  border: 3px solid #f7e300;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
.walk-marker.show { animation: marker .7s ease-out; }
@keyframes marker { 0% { opacity: 1; scale: .6; } 100% { opacity: 0; scale: 1.7; } }

.top-action,
.chat-box,
.object-action,
.side-tabs,
.osrs-dialog .dialog-frame {
  border: 3px ridge #77736d;
  background: linear-gradient(#575554, #363535);
  box-shadow: inset 0 0 0 1px #161616, 0 2px 8px #000b;
}
.top-action {
  position: absolute;
  left: 8px; top: max(8px, env(safe-area-inset-top));
  z-index: 8;
  min-width: 125px;
  padding: 5px 8px;
  color: var(--osrs-yellow);
  font-size: 13px;
  text-shadow: 1px 1px #000;
}
.minimap {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  top: max(10px, env(safe-area-inset-top));
  z-index: 8;
  width: clamp(82px, 11vw, 128px);
  aspect-ratio: 1;
  border: 7px ridge #77736d;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, #9a9366 0 9%, #4b692b 10% 52%, #31566c 53% 68%, #4b692b 69%);
  box-shadow: 0 2px 10px #000b;
}
.minimap-dot { position: absolute; left: 47%; top: 58%; width: 5px; height: 5px; background: #fff200; border-radius: 50%; box-shadow: 0 0 4px #fff; }

.chat-box {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 8;
  width: min(390px, 52vw);
  min-height: 70px;
  padding: 8px 10px;
  background: rgb(88 82 74 / .87);
}
.chat-box p { margin: 0; color: #fff; font-size: clamp(11px, 1.2vw, 14px); text-shadow: 1px 1px #000; }

.object-action {
  position: absolute;
  left: 50%; bottom: 14%;
  translate: -50% 0;
  z-index: 10;
  min-width: 154px;
  padding: 7px 18px 6px;
  color: var(--osrs-yellow);
  cursor: pointer;
  font-weight: 700;
  text-shadow: 1px 1px #000;
}
.object-action small { display: block; color: #fff; margin-top: 2px; font-size: 10px; font-weight: 400; }
.object-action:active { filter: brightness(.78); }

.side-tabs {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, 32px);
  color: #d8c28a;
}
.side-tabs span { display: grid; place-items: center; height: 30px; border: 1px solid #25231f; background: #524b3f; }

.mobile-controls { display: none; position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px)); z-index: 12; width: 124px; height: 124px; }
.mobile-controls button { position: absolute; width: 42px; height: 42px; border: 2px ridge #98928a; background: rgb(52 51 50 / .8); color: #eee; border-radius: 4px; }
.mobile-controls [data-move="up"] { top: 0; left: 41px; }
.mobile-controls [data-move="left"] { top: 41px; left: 0; }
.mobile-controls [data-move="down"] { top: 82px; left: 41px; }
.mobile-controls [data-move="right"] { top: 41px; left: 82px; }

.osrs-dialog {
  width: min(760px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}
.osrs-dialog::backdrop { background: rgb(0 0 0 / .76); backdrop-filter: blur(2px); }
.osrs-dialog .dialog-frame { position: relative; padding: clamp(12px, 2.4vw, 24px); background: #3f3d3b; }
.osrs-dialog h1 { margin: 0 44px 14px; text-align: center; color: var(--osrs-yellow); font: 700 clamp(18px, 3vw, 28px) Georgia, serif; text-shadow: 2px 2px #000; }
.dialog-close { position: absolute; right: 8px; top: 7px; z-index: 4; width: 34px; height: 32px; border: 2px ridge #9a958d; background: #4b2929; color: #ffcc96; font-size: 24px; line-height: 1; cursor: pointer; }
.video-shell { position: relative; height: min(56dvh, 470px); overflow: hidden; background: #090909; border: 3px inset #817d76; }
.video-shell video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; background: #000; }
.video-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px 7px; }
.video-toolbar p { margin: 0; color: #fff; font-weight: 700; }
.video-toolbar button { min-height: 36px; padding: 6px 12px; border: 2px ridge #aaa49a; background: #514d48; color: #fff; cursor: pointer; }
.clip-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.clip { min-width: 0; padding: 4px; border: 3px ridge #77736d; background: #2e2d2c; color: #ddd; cursor: pointer; text-align: left; }
.clip.active { color: var(--osrs-yellow); border-color: #c8aa55; }
.clip img { width: 100%; height: 72px; object-fit: cover; display: block; background: #111; }
.clip span { display: block; padding: 5px 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }

.future-dialog { width: min(470px, calc(100vw - 24px)); text-align: center; }
.future-dialog p { color: #ded9ce; margin: 8px 0; }
.future-dialog strong { display: block; color: #ffff75; font: 700 20px Georgia, serif; }
.birthday-dialog { width: min(440px, calc(100vw - 24px)); }
.birthday-dialog form { display: grid; gap: 10px; }
.birthday-dialog label { color: #fff; font-size: 13px; text-shadow: 1px 1px #000; }
.birthday-dialog input {
  width: 100%;
  min-height: 48px;
  border: 3px inset #8c8982;
  border-radius: 0;
  padding: 8px 12px;
  background: #181818;
  color: #fff;
  font: 700 20px/1 monospace;
  letter-spacing: .08em;
  text-align: center;
}
.birthday-dialog input:focus { outline: 2px solid #ffff66; outline-offset: 2px; }
.birthday-error { min-height: 17px; margin: 0; color: #ffb1a6; font-size: 12px; text-align: center; }
.continue-button { min-height: 44px; border: 3px ridge #aaa49a; background: linear-gradient(#5c5955, #393735); color: var(--osrs-yellow); font-weight: 700; cursor: pointer; text-shadow: 1px 1px #000; }
.continue-button:active { filter: brightness(.75); }
.orb { width: clamp(150px, 42vw, 230px); aspect-ratio: 1; margin: 4px auto 18px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff 0 2%, #b8f5ff 5%, #69b9d7 26%, #265f8f 58%, #152952 78%); box-shadow: inset -18px -24px 30px #071226aa, 0 0 36px #84dfffa8; animation: orb-glow 2.4s ease-in-out infinite alternate; }
.orb span { display: block; width: 55%; height: 25%; margin: 30% auto 0; border-radius: 50%; background: rgb(255 255 255 / .16); filter: blur(8px); }
@keyframes orb-glow { to { box-shadow: inset -18px -24px 30px #071226aa, 0 0 58px #b5ecffcc; } }

@media (pointer: coarse), (max-width: 720px) {
  .mobile-controls { display: block; }
  .chat-box { width: calc(100vw - 100px); min-height: 52px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .side-tabs { grid-template-columns: repeat(2, 26px); }
  .side-tabs span { width: 26px; height: 25px; font-size: 12px; }
  .object-action { bottom: calc(env(safe-area-inset-bottom) + 82px); }
  .clip img { height: 58px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .mobile-controls { left: 10px; bottom: 10px; transform: scale(.78); transform-origin: bottom left; }
  .chat-box { left: 110px; bottom: 6px; width: 310px; min-height: 42px; padding: 6px; }
  .minimap { width: 76px; border-width: 5px; }
  .object-action { bottom: 8px; }
  .video-shell { height: 54dvh; }
  .clip img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}