/* PS1-era look: hard pixels, chunky bevels, no smooth edges. */
:root {
  --yellow: #f4d23c;
  --ink: #0a0a0a;
  --grey-hi: #e9e9ee;
  --grey: #9c9ca6;
  --grey-lo: #4a4a55;
  --blue: #1b2a8f;
  --red: #e0261c;
  --font: 'Press Start 2P', 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.5vh, 34px);
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.72) 100%);
}
.screen.dim { background: rgba(0, 0, 20, 0.72); }
.screen.dark { background: rgba(10, 0, 0, 0.9); }
/* scan lines over the menus */
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 2px, transparent 2px 4px); }

.title-wrap { text-align: center; }
.pre { font-size: clamp(8px, 1.6vmin, 14px); letter-spacing: 0.5em; color: #fff; opacity: 0.8; margin-bottom: 1.2em; }
.title {
  font-size: clamp(26px, 8.5vmin, 84px); line-height: 1.05; color: var(--yellow); font-weight: 400;
  text-shadow: 0.07em 0.07em 0 #7a5b00, 0.14em 0.14em 0 #000;
  animation: wob 3.2s steps(4) infinite;
}
.title span { display: block; font-size: 0.42em; color: #fff; text-shadow: 0.1em 0.1em 0 #000; margin-bottom: 0.5em; letter-spacing: 0.4em; }
.sub { margin-top: 1.4em; font-size: clamp(7px, 1.7vmin, 14px); color: #fff; text-shadow: 2px 2px 0 #000; }
@keyframes wob { 0%, 100% { transform: translate(0, 0) skewX(0); } 25% { transform: translate(1px, -1px) skewX(-0.6deg); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 0) skewX(0.6deg); } }

.buttons { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); width: min(92vw, 520px); position: relative; z-index: 1; }
.btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  font-family: var(--font); font-size: clamp(8px, 1.9vmin, 13px); color: var(--ink); text-decoration: none; text-align: left;
  padding: 1.15em 1.2em; cursor: pointer; border: 0; border-radius: 0;
  background: linear-gradient(to bottom, #c9c9d2 0%, #a9a9b5 48%, #8d8d9a 52%, #7c7c8a 100%);
  box-shadow: inset 3px 3px 0 var(--grey-hi), inset -3px -3px 0 var(--grey-lo), 0 0 0 3px #000, 6px 6px 0 3px rgba(0,0,0,0.6);
}
.btn b { font-weight: 400; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.big { font-size: clamp(9px, 2.3vmin, 16px); padding: 1.4em 1.2em; }
.btn .paw { width: 1em; height: 1em; flex: none; visibility: hidden; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.btn.sel, .btn:active {
  color: #fff;
  background: linear-gradient(to bottom, #3d55e0 0%, #2a3dc0 48%, #1d2c9c 52%, #15207a 100%);
  box-shadow: inset 3px 3px 0 #8ea0ff, inset -3px -3px 0 #0a1150, 0 0 0 3px #000, 0 0 0 6px var(--yellow), 6px 6px 0 6px rgba(0,0,0,0.6);
}
.btn.sel .paw { visibility: visible; background: var(--yellow); animation: blink 0.5s steps(2) infinite; }
.btn:active { transform: translate(3px, 3px); }
@keyframes blink { 50% { opacity: 0.15; } }

.hint { font-size: clamp(6px, 1.3vmin, 10px); opacity: 0.75; position: relative; z-index: 1; text-shadow: 2px 2px 0 #000; }
.ca-full { font-family: 'Courier New', monospace; font-size: clamp(8px, 1.4vmin, 11px); opacity: 0.55; position: relative; z-index: 1; word-break: break-all; text-align: center; user-select: text; -webkit-user-select: text; }
.mob { display: none; }
.touch .mob { display: inline; }
.touch .desk { display: none; }

.head { font-size: clamp(18px, 6vmin, 52px); font-weight: 400; color: var(--yellow); text-shadow: 0.08em 0.08em 0 #000; text-align: center; position: relative; z-index: 1; }
.head.red { color: var(--red); animation: wob 0.4s steps(3) infinite; }
.stats { position: relative; z-index: 1; width: min(88vw, 420px); padding: 16px 18px; background: #000; box-shadow: inset 3px 3px 0 #555, inset -3px -3px 0 #222, 0 0 0 3px #000; }
.stats p { display: flex; justify-content: space-between; font-size: clamp(9px, 2.2vmin, 15px); padding: 0.6em 0; }
.stats b { font-weight: 400; color: var(--yellow); }

/* in-game display */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; text-shadow: 2px 2px 0 #000; }
.box { position: absolute; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; background: rgba(0,0,0,0.55); box-shadow: inset 2px 2px 0 rgba(255,255,255,0.35), inset -2px -2px 0 rgba(0,0,0,0.8); }
.box.tl { left: max(12px, env(safe-area-inset-left)); }
.box.tr { right: max(12px, env(safe-area-inset-right)); }
.lbl { font-size: clamp(7px, 1.5vmin, 11px); color: #fff; opacity: 0.85; }
.lbl.gap { margin-left: 10px; }
.num { font-size: clamp(14px, 3.6vmin, 28px); color: var(--yellow); display: inline-block; }
.num.sm { font-size: clamp(9px, 2vmin, 15px); }
.num.pop { animation: pop 0.35s steps(4); }
@keyframes pop { 0% { transform: scale(1.9); color: #fff; } 100% { transform: scale(1); } }
.stam-wrap { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }
.stam-bar { width: min(40vw, 220px); height: 12px; background: #000; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
#stam { height: 100%; width: 100%; background: #37e06a; }
#stam.tired { background: var(--red); }
#toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 92vw; text-align: center; font-size: clamp(8px, 2vmin, 15px); line-height: 1.8; color: #fff; opacity: 0; transition: opacity 0.3s steps(3); }
#toast.on { opacity: 1; }
#bubble { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); padding: 8px 10px; font-size: clamp(8px, 1.8vmin, 13px); color: #000; background: #fff; text-shadow: none; box-shadow: 0 0 0 2px #000; opacity: 0; }
#bubble.on { opacity: 1; }

/* phone controls */
#touch { position: fixed; inset: 0; z-index: 6; }
#stick { display: none; position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 3px solid rgba(255,255,255,0.6); background: rgba(0,0,0,0.3); border-radius: 50%; pointer-events: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; background: rgba(255,255,255,0.8); border-radius: 50%; transform: translate(-50%, -50%); }
.tbtn { position: absolute; right: max(18px, env(safe-area-inset-right)); width: 78px; height: 78px; border-radius: 50%; border: 0; font-family: var(--font); font-size: 9px; color: #000; background: linear-gradient(to bottom, #d0d0d8, #80808c); box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #44444c, 0 0 0 3px #000; opacity: 0.85; }
.tbtn.on, .tbtn:active { background: var(--yellow); }
#btn-run { bottom: max(52px, calc(env(safe-area-inset-bottom) + 40px)); }
#btn-meow { bottom: max(146px, calc(env(safe-area-inset-bottom) + 134px)); right: max(70px, calc(env(safe-area-inset-right) + 52px)); width: 64px; height: 64px; font-size: 7px; }
.tbtn.small { top: max(64px, calc(env(safe-area-inset-top) + 52px)); width: 40px; height: 40px; border-radius: 0; }
.touch .stam-wrap { bottom: max(14px, env(safe-area-inset-bottom)); }

@media (max-height: 460px) {
  .screen { gap: 10px; }
  .sub, .pre, .ca-full { display: none; }
  .btn { padding: 0.8em 1em; }
  .btn.big { padding: 0.9em 1em; }
}

/* settings bars and the flashlight display */
.btn.set b { flex: 0 0 auto; min-width: 7.5em; }
.bar { flex: 1; display: flex; gap: 3px; height: 1.3em; padding: 3px; background: #000; }
.bar i { flex: 1; background: #2c2c34; }
.bar i.f { background: var(--yellow); }
.box.bl { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); align-items: center; }
.lamp { width: 12px; height: 12px; background: #333; box-shadow: 0 0 0 2px #000; }
#h-light.on .lamp { background: #fff6b0; box-shadow: 0 0 0 2px #000, 0 0 12px 4px rgba(255, 240, 150, 0.8); }
.touch .box.bl { display: none; }
#btn-light { bottom: max(146px, calc(env(safe-area-inset-bottom) + 134px)); right: max(8px, env(safe-area-inset-right)); width: 56px; height: 56px; font-size: 6px; }
#btn-meow { right: max(74px, calc(env(safe-area-inset-right) + 66px)); }

#btn-view { top: max(64px, calc(env(safe-area-inset-top) + 52px)); right: max(68px, calc(env(safe-area-inset-right) + 58px)); width: 56px; height: 40px; border-radius: 0; font-size: 6px; }
.hint { text-align: center; line-height: 1.5; }

@media (max-width: 640px) {
  .box.bl { bottom: max(40px, calc(env(safe-area-inset-bottom) + 34px)); }
  .box { padding: 8px 9px; gap: 7px; }
}

#keys { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); font-size: clamp(5px, 1vmin, 8px); opacity: 0.6; }
.touch #keys { display: none; }
@media (max-width: 900px) { #keys { display: none; } }

/* ================= new look: vintage arcade menu ================= */
:root { --font: 'Bungee', 'Arial Black', sans-serif; --mono: 'VT323', 'Courier New', monospace; --navy: #101a6b; --lime: #d8ff3a; --hx: 31vw; --hy: 50vh; --hr: 33vmin; }
@media (orientation: portrait) { :root { --hx: 50vw; --hy: 29vh; --hr: 38vmin; } }
.hint, .lbl, #keys, .stats span { font-family: var(--mono); letter-spacing: 0.06em; }
.hint { font-size: clamp(13px, 2.3vmin, 20px); opacity: 0.85; }
.lbl { font-size: clamp(13px, 2.4vmin, 20px); }
#keys { font-size: clamp(11px, 1.9vmin, 16px); }
#toast { font-size: clamp(13px, 3vmin, 26px); -webkit-text-stroke: 1px #000; }
#bubble { font-family: var(--mono); font-size: clamp(14px, 2.6vmin, 22px); border-radius: 999px; padding: 4px 14px; }

/* pause and game over buttons use the same pill shape as the menu */
.btn, .btn.big {
  border-radius: 999px; padding: 0.75em 1.3em; font-size: clamp(13px, 2.8vmin, 22px);
  color: #ffe23a; -webkit-text-stroke: 1px #06103f;
  background: linear-gradient(to bottom, #3f8dff 0%, #1d49d8 50%, #12309c 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.45), inset 0 -4px 0 rgba(0,0,40,0.5), 0 0 0 3px #06103f, 5px 6px 0 3px rgba(0,0,0,0.45);
}
.btn.sel, .btn:active {
  color: #1a1206; -webkit-text-stroke: 0;
  background: linear-gradient(to bottom, #fff97a 0%, #ffe01a 50%, #f0b400 100%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -4px 0 rgba(120,70,0,0.5), 0 0 0 3px #1a1206, 5px 6px 0 3px rgba(0,0,0,0.45);
}
.btn .paw, .btn.sel .paw { background: #1a1206; }
.bar { border-radius: 999px; padding: 4px 6px; }
.bar i { border-radius: 2px; }
.head { color: #ffe23a; -webkit-text-stroke: 2px #06103f; text-shadow: 0.06em 0.07em 0 #06103f; letter-spacing: 0.02em; }
.head.red { color: #ff3a2a; -webkit-text-stroke: 2px #2a0000; text-shadow: 0.06em 0.07em 0 #000; }
.stats { border-radius: 14px; }
.stats p { font-size: clamp(13px, 2.8vmin, 20px); }
.box { border-radius: 10px; }

/* ---- main menu ---- */
.screen.menu { display: block; padding: 0; background: none; overflow: hidden; }
.m-bg, .m-stripes { position: absolute; inset: 0; -webkit-mask: radial-gradient(circle at var(--hx) var(--hy), transparent 0 var(--hr), #000 calc(var(--hr) + 1px)); mask: radial-gradient(circle at var(--hx) var(--hy), transparent 0 var(--hr), #000 calc(var(--hr) + 1px)); }
.m-bg { background: radial-gradient(circle at var(--hx) var(--hy), #ff5a1f 0, #ff8a00 38vmin, #ffb400 70vmin, #ff7a00 130vmin); }
.m-stripes.a { background: repeating-linear-gradient(-32deg, #1a1206 0 3.2vmin, #ffcf00 3.2vmin 7.4vmin); clip-path: polygon(46% 100%, 100% 38%, 100% 100%); }
.m-stripes.b { background: repeating-linear-gradient(-32deg, #1a1206 0 2.4vmin, #ff9a00 2.4vmin 5.6vmin); clip-path: polygon(0 0, 30% 0, 0 30%); }
.m-ring { position: absolute; left: var(--hx); top: var(--hy); width: calc(var(--hr) * 2); height: calc(var(--hr) * 2); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 1.4vmin #e3261a, 0 0 0 2.4vmin #ffe23a, 0 0 0 3vmin #1a1206, inset 0 0 6vmin rgba(0,0,40,0.55); pointer-events: none; }

.m-banner { position: absolute; left: 3vmin; top: max(3vmin, env(safe-area-inset-top)); display: flex; align-items: center; gap: 2vmin; padding: 0.6vmin 5vmin 0.6vmin 3vmin; border-radius: 999px; background: linear-gradient(to bottom, #2a4be0, #101a6b); box-shadow: 0 0 0 0.8vmin #ffe23a, 0 0 0 1.5vmin #e3261a, 1.4vmin 1.6vmin 0 1.5vmin rgba(0,0,0,0.4); transform: rotate(-3deg); z-index: 3; }
.m-banner h1 { font: 400 17vmin/0.95 var(--font); color: var(--lime); -webkit-text-stroke: 0.5vmin #06103f; text-shadow: 0.8vmin 0.9vmin 0 #06103f; letter-spacing: 0.04em; }
.rec { width: 3.4vmin; height: 3.4vmin; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 0 0.5vmin #fff; animation: blink 1s steps(2) infinite; flex: none; }
.m-clock { position: absolute; right: 4vmin; top: max(3vmin, env(safe-area-inset-top)); text-align: right; font-family: var(--mono); color: #fff; text-shadow: 0.3vmin 0 0 #ff2a6a, -0.3vmin 0 0 #2ae0ff, 0.4vmin 0.4vmin 0 #000; z-index: 3; }
.m-clock b { display: block; font-weight: 400; font-size: 8vmin; line-height: 0.9; }
.m-clock span { font-size: 4vmin; }

#wheel { position: absolute; right: 0; top: 52vh; width: 52vw; height: 0; z-index: 4; }
.pill { position: absolute; left: 0; top: 0; width: 60vw; display: block; text-align: left; text-decoration: none; cursor: pointer; border: 0; font-family: var(--font); padding: 1.3vmin 4vmin 1.1vmin 5vmin; border-radius: 999px 0 0 999px; color: #ffe23a; background: linear-gradient(to bottom, #3f8dff 0%, #1d49d8 52%, #12309c 100%); box-shadow: inset 0 0.5vmin 0 rgba(255,255,255,0.45), inset 0 -0.6vmin 0 rgba(0,0,40,0.5), 0 0 0 0.5vmin #06103f, 0.8vmin 1vmin 0 0.5vmin rgba(0,0,0,0.4); transform-origin: left center; transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2), opacity 0.22s linear; }
.pill b { display: block; font-weight: 400; font-size: 4.9vmin; line-height: 1; -webkit-text-stroke: 0.25vmin #06103f; text-shadow: 0.35vmin 0.4vmin 0 #06103f; white-space: nowrap; }
.pill small { display: block; font-family: var(--mono); font-size: 3vmin; line-height: 1; color: #fff; margin-top: 0.2vmin; text-shadow: 0.2vmin 0.2vmin 0 #06103f; }
.pill.sel { color: #1a1206; background: linear-gradient(to bottom, #fbff8a 0%, #e6ff2a 50%, #b5d800 100%); box-shadow: inset 0 0.5vmin 0 rgba(255,255,255,0.8), inset 0 -0.6vmin 0 rgba(70,90,0,0.5), 0 0 0 0.5vmin #1a1206, 0 0 0 1.1vmin #ffe23a, 0.8vmin 1vmin 0 1.1vmin rgba(0,0,0,0.4); }
.pill.sel b { -webkit-text-stroke: 0; text-shadow: 0.3vmin 0.3vmin 0 rgba(255,255,255,0.7); }
.pill.sel small { color: #263000; text-shadow: none; }
.m-cursor { position: absolute; right: calc(52vw + 6.5vmin); top: 52vh; width: 0; height: 0; margin-top: -2.6vmin; border: 2.6vmin solid transparent; border-left: 4vmin solid #ffe23a; border-right: 0; filter: drop-shadow(0.4vmin 0.4vmin 0 #1a1206) drop-shadow(-0.3vmin 0 0 #1a1206); animation: nudge 0.5s steps(2) infinite; z-index: 5; pointer-events: none; }
@keyframes nudge { 50% { transform: translateX(-1.2vmin); } }

.m-win { position: absolute; left: 3vmin; bottom: max(7vmin, env(safe-area-inset-bottom)); width: min(44vw, 560px); background: #c8c8c8; padding: 0.6vmin; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555, 0 0 0 2px #000, 1.2vmin 1.4vmin 0 2px rgba(0,0,0,0.45); font-family: var(--mono); color: #000; text-shadow: none; z-index: 6; }
.m-win .bar { display: flex; justify-content: space-between; align-items: center; height: auto; gap: 0; border-radius: 0; padding: 0.4vmin 1vmin; background: linear-gradient(to right, #b3160c, #ff8a00); color: #fff; font-size: clamp(14px, 2.6vmin, 22px); }
.m-win .bar i { flex: none; width: 2.2vmin; height: 2.2vmin; background: #c8c8c8; border-radius: 0; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #555; }
.m-win .row { display: flex; align-items: center; gap: 1vmin; padding: 0.7vmin 1vmin 0; font-size: clamp(14px, 2.6vmin, 22px); }
.m-win .row:last-child { padding-bottom: 1vmin; }
.m-win label { flex: none; width: 3.2em; }
.m-win .field { flex: 1; min-width: 0; background: #fff; padding: 0.2vmin 1vmin; box-shadow: inset 2px 2px 0 #555, inset -1px -1px 0 #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-win .copy { display: flex; align-items: center; gap: 1vmin; border: 0; border-radius: 0; font: inherit; color: #000; cursor: pointer; text-align: left; }
.m-win .copy span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-win .copy em { flex: none; font-style: normal; background: #101a6b; color: #ffe23a; padding: 0 1vmin; }
.m-win .copy:active { background: #ffe23a; }

.m-corner { position: absolute; right: 3vmin; bottom: max(7vmin, env(safe-area-inset-bottom)); display: flex; gap: 2.4vmin; z-index: 6; }
.ico { display: grid; place-items: center; width: clamp(40px, 8vmin, 64px); height: clamp(40px, 8vmin, 64px); border-radius: 50%; background: #0a0a0a; color: #fff; text-decoration: none; font: 400 2.4vmin var(--font); box-shadow: 0 0 0 0.5vmin #ffe23a, 0 0 0 0.9vmin #1a1206, 0.7vmin 0.9vmin 0 0.9vmin rgba(0,0,0,0.4); }
.ico svg, .ico img { width: 52%; height: 52%; display: block; object-fit: contain; }
.ico:hover, .ico:active { background: #101a6b; transform: translateY(-2px); }
.m-hint { position: absolute; left: 0; right: 0; bottom: max(1.6vmin, env(safe-area-inset-bottom)); text-align: center; font-family: var(--mono); font-size: clamp(12px, 2.3vmin, 18px); color: #fff; text-shadow: 2px 2px 0 #000; z-index: 6; }
.m-frame { position: absolute; inset: 1.4vmin; pointer-events: none; z-index: 7; opacity: 0.8; background:
  linear-gradient(#fff, #fff) left top / 6vmin 0.5vmin no-repeat, linear-gradient(#fff, #fff) left top / 0.5vmin 6vmin no-repeat,
  linear-gradient(#fff, #fff) right top / 6vmin 0.5vmin no-repeat, linear-gradient(#fff, #fff) right top / 0.5vmin 6vmin no-repeat,
  linear-gradient(#fff, #fff) left bottom / 6vmin 0.5vmin no-repeat, linear-gradient(#fff, #fff) left bottom / 0.5vmin 6vmin no-repeat,
  linear-gradient(#fff, #fff) right bottom / 6vmin 0.5vmin no-repeat, linear-gradient(#fff, #fff) right bottom / 0.5vmin 6vmin no-repeat; }

@media (orientation: portrait) {
  .m-banner h1 { font-size: 15vmin; }
  .m-clock b { font-size: 7vmin; }
  #wheel { top: 64vh; left: 10vw; right: auto; width: 90vw; }
  .pill { width: 96vw; padding-left: 6vmin; }
  .pill b { font-size: 5.6vmin; }
  .pill small { font-size: 3.6vmin; }
  .m-cursor { right: auto; left: 2.4vw; top: 64vh; }
  .m-win { left: 3vmin; right: 3vmin; width: auto; bottom: max(24vmin, calc(env(safe-area-inset-bottom) + 20vmin)); }
  .m-win .row:nth-child(2), .m-win .row:nth-child(3) { display: none; }
  .m-corner { left: 0; right: 0; justify-content: center; bottom: max(7vmin, calc(env(safe-area-inset-bottom) + 5vmin)); }
  .m-stripes.a { clip-path: polygon(0 100%, 100% 80%, 100% 100%); }
}
@media (orientation: landscape) and (max-height: 430px) { .m-win .row:nth-child(2) { display: none; } }

/* ---- PFP page: an old social profile page ---- */
#pfps { display: block; padding: 0; background: #e5e5e5; }
#pfps::after { display: none; }
.ms { position: absolute; inset: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000; text-shadow: none; background: #e5e5e5; }
.ms-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: #003399; color: #fff; border-bottom: 4px solid #6699cc; }
.ms-top b { font-size: 24px; font-family: Arial, Helvetica, sans-serif; letter-spacing: -0.03em; }
.ms-top span { font-size: 11px; opacity: 0.85; flex: 1; }
.ms-back { font: bold 12px Verdana, Arial, sans-serif; color: #fff; background: #ff6600; border: 2px solid #fff; padding: 6px 10px; cursor: pointer; }
.ms-body { display: flex; gap: 14px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 14px; background: #fff; min-height: 100%; }
.ms-side { flex: 0 0 190px; }
.ms-side h3 { font-size: 20px; margin-bottom: 6px; }
.ms-side img { width: 150px; height: 150px; object-fit: cover; border: 1px solid #000; display: block; margin-bottom: 8px; }
.ms-side p { margin-bottom: 8px; line-height: 1.5; }
.ms-side .on { color: #009900; font-weight: bold; }
.ms-box { border: 2px solid #6699cc; }
.ms-box h4, .ms-h { background: #6699cc; color: #fff; font-size: 13px; padding: 4px 8px; }
.ms-box a { display: block; padding: 6px 8px; color: #003399; font-weight: bold; }
.ms-main { flex: 1; min-width: 0; }
.ms-h { background: #ffcc99; color: #ff6600; }
.ms-note { padding: 8px 2px; color: #333; }
#pfp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 4px 0 30px; }
.ms-pic { background: #fff; border: 1px solid #999; padding: 5px; cursor: pointer; font: 11px Verdana, Arial, sans-serif; color: #003399; text-decoration: underline; text-transform: capitalize; }
.ms-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 1px solid #000; margin-bottom: 4px; background: #ddd; }
.ms-pic:hover { background: #ffcc99; border-color: #ff6600; }
@media (max-width: 620px) { .ms-body { flex-direction: column; } .ms-side { flex: none; width: 100%; display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; } .ms-side h3 { grid-column: 1 / -1; } .ms-side img { width: 96px; height: 96px; grid-row: span 3; } .ms-box { grid-column: 1 / -1; } }

#lightbox { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; gap: 2vmin; padding: 12px 8px calc(74px + env(safe-area-inset-bottom)); }
#lightbox figure { min-width: 0; text-align: center; }
#lb-img { max-width: min(78vw, 900px); max-height: calc(100vh - 150px); display: block; margin: 0 auto; border: 4px solid #fff; background: #111; }
#lb-cap { font: 13px Verdana, Arial, sans-serif; color: #fff; padding-top: 8px; text-transform: capitalize; text-shadow: none; }
.lb-nav { flex: none; width: clamp(40px, 8vmin, 64px); height: clamp(40px, 8vmin, 64px); border-radius: 50%; border: 3px solid #fff; background: #003399; color: #fff; font-size: clamp(16px, 3.4vmin, 26px); cursor: pointer; }
.lb-nav:hover { background: #ff6600; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 10px; }
.lb-bar button, .lb-bar a { font: bold 14px Verdana, Arial, sans-serif; min-width: 104px; text-align: center; padding: 12px 14px; color: #fff; background: #ff6600; border: 3px solid #fff; cursor: pointer; text-decoration: none; text-shadow: none; }
.lb-bar #lb-close { background: #555; }
.lb-bar button:hover, .lb-bar a:hover { background: #003399; }

/* the controls text sits above the bottom row, so it never covers the run bar */
#keys { left: 0; right: 0; bottom: max(44px, calc(env(safe-area-inset-bottom) + 40px)); text-align: center; }

/* ---- small in-game display ---- */
.box { padding: 3px 8px; gap: 5px; background: rgba(0,0,0,0.32); box-shadow: none; border-radius: 6px; top: max(8px, env(safe-area-inset-top)); }
.box.tl { left: max(8px, env(safe-area-inset-left)); }
.box.tr { right: max(8px, env(safe-area-inset-right)); }
.lbl { font-size: clamp(10px, 1.7vmin, 14px); opacity: 0.75; }
.num { font-size: clamp(12px, 2.2vmin, 18px); }
.num.sm { font-size: clamp(10px, 1.7vmin, 14px); color: #fff; font-family: var(--mono); opacity: 0.8; }
.box.bl { bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); padding: 3px 7px; opacity: 0.7; }
.lamp { width: 7px; height: 7px; }
.stam-wrap { bottom: max(10px, env(safe-area-inset-bottom)); gap: 6px; transition: opacity 0.6s linear; opacity: 0.85; }
.stam-wrap.full { opacity: 0; }
.stam-wrap .lbl { display: none; }
.stam-bar { width: min(22vw, 120px); height: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,0.7); background: rgba(0,0,0,0.5); }
#keys { bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px)); font-size: clamp(10px, 1.6vmin, 13px); opacity: 0.55; transition: opacity 1.5s linear; }
#keys.gone { opacity: 0; }
#toast { top: 16%; font-size: clamp(11px, 2.1vmin, 18px); -webkit-text-stroke: 0; font-family: var(--mono); letter-spacing: 0.12em; }
#bubble { top: 34%; font-size: clamp(10px, 1.7vmin, 14px); padding: 1px 9px; opacity: 0; background: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px #000; }
#bubble.on { opacity: 0.9; }
@media (max-width: 640px) { .box.bl { bottom: max(8px, env(safe-area-inset-bottom)); } }
.m-credit { position: absolute; left: 0; right: 0; bottom: max(4.6vmin, calc(env(safe-area-inset-bottom) + 3vmin)); text-align: center; font-family: var(--mono); font-size: clamp(9px, 1.6vmin, 13px); color: #fff; opacity: 0.7; text-shadow: 1px 1px 0 #000; text-decoration: none; z-index: 6; pointer-events: none; }
.m-credit { pointer-events: auto; width: max-content; margin: 0 auto; }