/* ============================================================================
   UYEN'S PHONE QUEST — retro colour Game-Boy shell + responsive scaling
   ==========================================================================*/
:root{
  --gb-body:#c9c2b4;
  --gb-body-d:#b3ab9c;
  --gb-face:#a9a08f;
  --gb-screen:#8b9b7a;
  --gb-bezel:#5a5648;
  --ink:#3a352b;
  --accent:#2f7d4f;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #3a4a5a 0%, #1c2430 60%, #12171f 100%);
  font-family:"Press Start 2P", "Courier New", monospace;
  color:#e8eef4;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
.scene{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:720px; }

/* ------------------------------- CONSOLE ------------------------------- */
.console{
  width:100%;
  background:linear-gradient(180deg,#d7d0c2 0%, var(--gb-body) 40%, var(--gb-body-d) 100%);
  border-radius:18px 18px 42px 18px;
  padding:18px 18px 22px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(0,0,0,.18),
    0 18px 40px rgba(0,0,0,.5);
  border:2px solid #8f8877;
}
.console-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 6px 12px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-name{
  font-family:"Press Start 2P", monospace;
  font-size:13px; letter-spacing:1px;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.badge{
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  background:linear-gradient(90deg,#e05a4a,#e0a04a,#e0d04a);
  color:#3a2410;
  padding:4px 6px; border-radius:4px;
  box-shadow:0 1px 0 rgba(0,0,0,.3);
}
.status{ display:flex; align-items:center; gap:8px; }
.led{
  width:12px; height:12px; border-radius:50%;
  background:#ff4d4d;
  box-shadow:0 0 8px #ff4d4d, inset 0 -2px 3px rgba(0,0,0,.4);
}
.mute-state{
  font-family:"Press Start 2P", monospace;
  font-size:7px; color:#6a6355;
}

/* ------------------------------- SCREEN -------------------------------- */
.screen-bezel{
  background:linear-gradient(180deg,#6b6758,#4a463b);
  border-radius:12px;
  padding:14px 14px 18px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.15);
}
.screen-wrap{
  position:relative;
  background:var(--gb-screen);
  overflow:hidden;
  border-radius:4px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35), inset 0 4px 18px rgba(0,0,0,.45);
  width:100%;
  aspect-ratio:16/9;
  max-width:640px;
  margin:0 auto;
}
#game{
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:var(--gb-screen);
}
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode:multiply; opacity:.5;
}
.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
.screen-label{
  text-align:center; margin-top:10px;
  font-family:"Press Start 2P", monospace;
  font-size:6px; letter-spacing:1px; color:#cfc8b8; opacity:.8;
}

/* ------------------------------ CONTROLS -------------------------------- */
.controls{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 6px 8px;
}
.dpad{ position:relative; width:118px; height:118px; }
.dpad-btn{
  position:absolute;
  width:40px; height:40px;
  border:none; cursor:pointer;
  background:linear-gradient(180deg,#2b2b2b,#161616);
  color:#8a8a8a;
  font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 0 #0c0c0c, inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-tap-highlight-color:transparent;
}
.dpad-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #0c0c0c; color:#cfcfcf; }
.dpad-btn.up    { left:39px; top:0;    border-radius:6px 6px 0 0; }
.dpad-btn.down  { left:39px; bottom:0; border-radius:0 0 6px 6px; }
.dpad-btn.left  { left:0;   top:39px;  border-radius:6px 0 0 6px; }
.dpad-btn.right { right:0;  top:39px;  border-radius:0 6px 6px 0; }

.abc{ display:flex; gap:18px; align-items:center; transform:translateY(6px); }
.abc-btn{
  width:48px; height:48px; border-radius:50%;
  border:none; cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #d0555f 0%, #b03a44 60%, #8a2830 100%);
  color:#fff;
  font-family:"Press Start 2P", monospace; font-size:12px;
  box-shadow:0 5px 0 #6a1f26, inset 0 2px 2px rgba(255,255,255,.35);
  -webkit-tap-highlight-color:transparent;
}
.abc-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #6a1f26; }

/* ------------------------------- PILLS --------------------------------- */
.pills{
  display:flex; justify-content:center; gap:26px;
  padding:18px 0 6px;
}
.pill{
  width:96px; height:24px; border-radius:12px;
  border:2px solid #6a6355;
  background:linear-gradient(180deg,#c4bcab,#a9a08f);
  color:#4a4438;
  font-family:"Press Start 2P", monospace; font-size:7px;
  cursor:pointer;
  box-shadow:0 3px 0 #8f8877, inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-tap-highlight-color:transparent;
}
.pill:active{ transform:translateY(2px); box-shadow:0 1px 0 #8f8877; }

/* ------------------------------- LEGEND -------------------------------- */
.legend{
  width:100%; max-width:640px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:12px 14px;
  font-family:"Press Start 2P", monospace;
  font-size:7px; line-height:2;
  display:flex; flex-direction:column; gap:8px;
}
.legend-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.legend-row.dim{ opacity:.65; }
.legend-row.tag{ justify-content:center; color:#a6d8e8; }
.key{
  display:inline-block; padding:3px 6px; margin:0 2px;
  background:#20242b; border:1px solid #3a4250; border-radius:4px;
  color:#cfe0ff;
}
b{ color:#ffd34d; }

/* ---------------------------- RESPONSIVE ------------------------------- */
@media (max-width:520px){
  .brand-name{ font-size:11px; }
  .dpad{ width:96px; height:96px; }
  .dpad-btn{ width:32px; height:32px; }
  .dpad-btn.up{ left:32px; } .dpad-btn.down{ left:32px; }
  .dpad-btn.left{ top:32px; } .dpad-btn.right{ top:32px; }
  .abc-btn{ width:42px; height:42px; }
  .legend{ font-size:6px; }
}