/* Biggie Quest — 16-bit era styling. --u is one game pixel in CSS px (set by main.js). */
:root {
  --u: 2px;
  --win-top: #2a3c9c;
  --win-bot: #0e1450;
  --win-border: #f6f2e8;
  --ink: #ffffff;
  --dim: #a8b2e0;
  --gold: #ffd35c;
  --good: #8cf0a0;
  --bad: #ff9a8a;
  --pix: 'Press Start 2P', 'Courier New', monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #120c20 radial-gradient(ellipse at 50% 0%, #2a1a3c 0%, #120c20 70%);
  color: var(--ink);
  font-family: var(--pix);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }

#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#frame {
  position: relative; flex-shrink: 0; overflow: hidden; background: #000;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #3a2a50, 0 20px 60px rgba(0, 0, 0, .7);
}
#screen { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
#frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 1px, transparent 1px, transparent calc(var(--u) * 2));
}
#overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-size: calc(var(--u) * 7); }
#overlay > * { pointer-events: auto; }

/* ── Windows ─────────────────────────────────────────── */
.win {
  position: absolute;
  background: linear-gradient(to bottom, var(--win-top), var(--win-bot));
  border: calc(var(--u) * 1.5) solid var(--win-border);
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 0 0 var(--u) #0a0a18, inset 0 0 0 var(--u) #0a1030, calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0, 0, 0, .45);
  padding: calc(var(--u) * 6) calc(var(--u) * 7);
  line-height: 1.55;
  text-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 #000;
  animation: pop .1s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(calc(var(--u) * 3)); } }

.dialog { left: 3%; right: 3%; bottom: 3%; min-height: 32%; cursor: pointer; }
.dialog .text { white-space: pre-wrap; word-wrap: break-word; }
.nameplate {
  position: absolute; top: calc(var(--u) * -9); left: calc(var(--u) * 6);
  font-size: .85em; color: var(--gold);
  background: linear-gradient(var(--win-top), var(--win-bot));
  border: var(--u) solid var(--win-border); border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
}
.more { position: absolute; right: calc(var(--u) * 5); bottom: calc(var(--u) * 3); color: var(--gold); opacity: 0; font-size: .8em; }
.dialog.done .more { opacity: 1; animation: bob .6s steps(2) infinite; }

/* Speech bubbles in close-up scenes: at the top, with a tail pointing down at whoever's talking. */
.dialog.bubble { top: 3%; bottom: auto; min-height: 0; max-height: 38%; }
.dialog.bubble .nameplate { position: static; display: inline-block; margin: calc(var(--u) * -2) 0 calc(var(--u) * 2); font-size: .75em; }
.dialog.bubble.left, .dialog.bubble.right {
  background: #fffaf0; color: #1a1020; text-shadow: none;
  border-color: #1a1020; border-radius: calc(var(--u) * 8);
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0, 0, 0, .35);
}
.dialog.bubble.left .more, .dialog.bubble.right .more { color: #c83048; }
.dialog.bubble.left::after, .dialog.bubble.right::after,
.dialog.bubble.left::before, .dialog.bubble.right::before {
  content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent;
}
.dialog.bubble.left::before, .dialog.bubble.right::before {
  bottom: calc(var(--u) * -11); border-width: calc(var(--u) * 11) calc(var(--u) * 6) 0; border-top-color: #1a1020;
}
.dialog.bubble.left::after, .dialog.bubble.right::after {
  bottom: calc(var(--u) * -7); border-width: calc(var(--u) * 8) calc(var(--u) * 4) 0; border-top-color: #fffaf0;
}
.dialog.bubble.left::before { left: 22%; }
.dialog.bubble.left::after { left: calc(22% + var(--u) * 2); }
.dialog.bubble.right::before { right: 22%; }
.dialog.bubble.right::after { right: calc(22% + var(--u) * 2); }
.dialog.bubble.right { text-align: left; }
@keyframes bob { 50% { transform: translateY(var(--u)); } }

.menu { right: 3%; bottom: 3%; min-width: 46%; max-width: 94%; max-height: 90%; display: flex; flex-direction: column; }
.menu.wide { left: 3%; }
.menu .title { color: var(--gold); margin-bottom: calc(var(--u) * 5); font-size: .9em; }
.menu .list { overflow-y: auto; min-height: 0; scrollbar-width: none; }
.menu .list::-webkit-scrollbar { display: none; }
.item { display: flex; gap: calc(var(--u) * 3); align-items: baseline; padding: calc(var(--u) * 1.5) 0; cursor: pointer; }
.item .cur { visibility: hidden; width: 1em; flex-shrink: 0; }
.item.sel .cur { visibility: visible; animation: nudge .5s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(calc(var(--u) * 1.5)); } }
.item .lbl { flex: 1; min-width: 0; }
.item .rt { margin-left: auto; white-space: nowrap; color: var(--gold); padding-left: calc(var(--u) * 6); }
.item.off { color: #7c86b8; }
.item.off .rt { color: #7c86b8; }
.menu .help {
  font-size: .8em; color: #d2dcff; border-top: var(--u) dashed rgba(255, 255, 255, .3);
  margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 4); min-height: 3.2em; line-height: 1.5;
}

.panel { inset: 3%; display: flex; flex-direction: column; }
.panel .title { color: var(--gold); margin-bottom: calc(var(--u) * 5); }
.panel .body { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: none; font-size: .85em; line-height: 1.7; }
.panel .body::-webkit-scrollbar { display: none; }
.panel .row { display: flex; justify-content: space-between; gap: 1em; }
.panel .h { color: var(--gold); margin-top: calc(var(--u) * 6); }
.panel .dim { color: var(--dim); }
.panel .good { color: var(--good); }
.panel .foot { color: var(--dim); font-size: .75em; margin-top: calc(var(--u) * 4); text-align: right; }

.form { left: 4%; right: 4%; top: 18%; }
.form .title { color: var(--gold); margin-bottom: calc(var(--u) * 5); }
.form p { margin: 0 0 calc(var(--u) * 5); font-size: .85em; line-height: 1.6; }
.form input {
  width: 100%; font: inherit; font-size: max(16px, 1em); color: #fff; background: #050a30;
  border: var(--u) solid var(--win-border); border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 4); outline: none; letter-spacing: .05em; user-select: text; -webkit-user-select: text;
}
.form input:focus { border-color: var(--gold); }
.form .err { color: var(--bad); font-size: .8em; min-height: 1.6em; margin-top: calc(var(--u) * 3); line-height: 1.5; }
.form .btns { display: flex; gap: calc(var(--u) * 6); justify-content: flex-end; margin-top: calc(var(--u) * 3); }
.form .btns button {
  background: #0a1040; border: var(--u) solid var(--win-border); border-radius: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 6); font-size: .85em;
}
.form .btns button.ok { color: var(--gold); border-color: var(--gold); }
.form .btns button:disabled { opacity: .5; }

.banner {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  white-space: nowrap; color: #fff; font-size: 1em; padding: calc(var(--u) * 4) calc(var(--u) * 8);
  background: rgba(0, 0, 0, .65); border-top: var(--u) solid var(--gold); border-bottom: var(--u) solid var(--gold);
  text-shadow: var(--u) var(--u) 0 #000; animation: banner 2.6s forwards; pointer-events: none !important;
}
@keyframes banner { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── Title ───────────────────────────────────────────── */
.titlecard { position: absolute; inset: 0; text-align: center; pointer-events: none !important; }
.titlecard .press {
  position: absolute; left: 0; right: 0; top: 66%; color: #fff; font-size: 1em;
  text-shadow: var(--u) var(--u) 0 #000; animation: blink 1.1s steps(2) infinite;
}
.titlecard .copy { position: absolute; left: 0; right: 0; bottom: 4%; color: #fff; font-size: .7em; opacity: .8; text-shadow: var(--u) var(--u) 0 #000; }
@keyframes blink { 50% { opacity: 0; } }

/* ── Touch gamepad ───────────────────────────────────── */
#pad { display: none; }
body.touch #pad {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 560px; flex: 1; padding: 0 12px 10px; min-height: 0;
}
.dpad { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.dpad .d { position: absolute; width: 52px; height: 52px; background: #2b2438; border: 0; box-shadow: inset 0 -4px 0 #17121f, 0 3px 0 #000; }
.dpad .up { left: 49px; top: 0; border-radius: 8px 8px 0 0; }
.dpad .down { left: 49px; bottom: 0; border-radius: 0 0 8px 8px; }
.dpad .left { left: 0; top: 49px; border-radius: 8px 0 0 8px; }
.dpad .right { right: 0; top: 49px; border-radius: 0 8px 8px 0; }
.dpad .mid { left: 49px; top: 49px; background: #2b2438; }
.dpad .d::after { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border: 8px solid transparent; opacity: .55; }
.dpad .up::after { border-bottom-color: #fff; top: -8px; }
.dpad .down::after { border-top-color: #fff; top: 8px; }
.dpad .left::after { border-right-color: #fff; left: -8px; }
.dpad .right::after { border-left-color: #fff; left: 8px; }
.dpad .mid::after { display: none; }
.dpad .pressed { background: #43385a; }
.mid-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; align-self: flex-end; margin-bottom: 18px; }
#sound { min-width: 76px; }
#sound.off { color: #7c6e94; background: #1f1a2a; }
.pill { background: #2b2438; border: 0; border-radius: 20px; padding: 9px 14px; font-size: 9px; color: #c9bce0; box-shadow: 0 3px 0 #000; }
.pill.pressed { background: #43385a; }
.ab { position: relative; width: 144px; height: 130px; flex-shrink: 0; }
/* narrow phones: shrink the pad a little so nothing hangs off the edge */
@media (max-width: 384px) { body.touch:not(.landscape) .dpad, body.touch:not(.landscape) .ab { zoom: .88; } }
.round {
  position: absolute; width: 66px; height: 66px; border-radius: 50%; border: 0; font-size: 16px;
  color: #fff; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3), 0 4px 0 #000;
}
.round.a { right: 0; top: 0; background: #d8443a; }
.round.b { left: 0; bottom: 0; background: #e8a020; }
.round.pressed { filter: brightness(1.3); transform: translateY(2px); }
/* hold to block; only shows up once Biggie owns a shield */
.round.s { display: none; right: 2px; bottom: -14px; width: 54px; height: 54px; background: #3a6ad0; padding: 0; }
.round.s svg { display: block; margin: auto; }
body.has-shield .round.s { display: block; }
/* hit a golf ball: only with the 7-iron and some balls */
.round.g { display: none; left: 2px; top: -8px; width: 48px; height: 48px; background: #3a8a4a; padding: 0; }
.round.g svg { display: block; margin: auto; }
body.has-golf .round.g { display: block; }

/* Landscape phones: pad floats on both sides of the screen. */
body.touch.landscape #app { flex-direction: row; }
body.touch.landscape #pad { position: absolute; inset: 0; max-width: none; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
body.touch.landscape #pad > * { pointer-events: auto; }
body.touch.landscape .mid-btns { position: absolute; left: max(40px, env(safe-area-inset-left)); bottom: 10px; margin: 0; }
body.touch.landscape .dpad, body.touch.landscape .ab { transform: scale(.85); }
.fp .banner { display: none; }

/* ── Disclaimer (boot) ───────────────────────────────── */
.disclaimer {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 10%; text-align: center; color: #e8e4f0; background: #000; line-height: 1.7; cursor: pointer;
}
.disclaimer .title { color: var(--gold); margin-bottom: calc(var(--u) * 8); font-size: 1.15em; }
.disclaimer p { margin: 0 0 calc(var(--u) * 6); font-size: .9em; }
.disclaimer .press { margin-top: calc(var(--u) * 8); color: #fff; animation: blink 1.1s steps(2) infinite; font-size: .85em; }

/* ── Biggie's phone ───────────────────────────────────── */
.phone {
  position: absolute; right: 5%; top: 3%; bottom: 3%; width: 60%;
  background: #f4f2ee; color: #1a1020; text-shadow: none;
  border: calc(var(--u) * 3) solid #1a1a22; border-radius: calc(var(--u) * 9);
  box-shadow: 0 0 0 var(--u) #5a5a6a, calc(var(--u) * 3) calc(var(--u) * 3) 0 rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; overflow: hidden; font-size: .62em; line-height: 1.5;
  animation: pop .15s ease-out;
}
.ph-bar { display: flex; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 1); font-size: .85em; color: #555; }
.ph-head { background: #2a2a3a; color: #ffd35c; padding: calc(var(--u) * 2) calc(var(--u) * 5); }
.ph-body { flex: 1; overflow-y: auto; padding: calc(var(--u) * 3) calc(var(--u) * 5); scrollbar-width: none; }
.ph-body::-webkit-scrollbar { display: none; }
.ph-hello { font-size: 1.2em; margin: calc(var(--u) * 2) 0 calc(var(--u) * 4); }
.ph-app { display: flex; gap: calc(var(--u) * 4); align-items: center; padding: calc(var(--u) * 2.5); border-radius: calc(var(--u) * 3); cursor: pointer; }
.ph-app.sel { background: #dfe6f4; outline: calc(var(--u) * .7) solid #3a6ad0; }
.ph-ico { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 3); flex-shrink: 0; box-shadow: inset 0 calc(var(--u) * -1.5) 0 rgba(0, 0, 0, .25); }
.ph-dim { color: #777; }
.ph-card { border-bottom: var(--u) dashed #ccc; padding: calc(var(--u) * 3) 0; }
.ph-truck { width: calc(var(--u) * 48 * 1.6); image-rendering: pixelated; display: block; margin-bottom: calc(var(--u) * 2); }
.ph-title { color: #1a1020; font-size: 1.05em; }
.ph-price { color: #2a8a3a; }
.ph-quote { margin-top: calc(var(--u) * 1.5); color: #b02838; }
.ph-news { background: #fff4c8; padding: calc(var(--u) * 2) calc(var(--u) * 3); margin: calc(var(--u) * 2) 0; border-radius: calc(var(--u) * 2); }
.ph-game { display: flex; flex-direction: column; padding: calc(var(--u) * 1.5) 0; border-bottom: var(--u) solid #e4e0d8; }
.ph-win { color: #1a6a2a; }
.ph-row { display: flex; justify-content: space-between; }
.ph-now { display: flex; gap: calc(var(--u) * 4); align-items: center; margin: calc(var(--u) * 2) 0; }
.ph-big { font-size: 2em; }
.ph-week { display: flex; justify-content: space-between; text-align: center; margin-top: calc(var(--u) * 3); }
.ph-icon { font-size: 1.4em; }
.ph-nav { display: flex; justify-content: space-between; background: #2a2a3a; color: #fff; padding: calc(var(--u) * 3) calc(var(--u) * 5); }
.ph-nav span { cursor: pointer; }