:root{
  --stucco:#e8b06a;
  --boulevard:#9aa0a6;
  --ink:#2a2118;
  --panel:#1c2630;
  --accent:#ff8c42;
  --sunset-top:#4a2a6a;
  --sunset-mid:#e07a3a;
  --sunset-bot:#f5c06a;
  --gb-shell:#4a4e52;
  --gb-shell-dark:#2e3236;
  --gb-shell-light:#5c6064;
  --gb-a:#B5503E;
  --gb-b:#6a2a22;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:#1a1c1e;overflow:hidden;
  font-family:"Courier New",Courier,monospace;color:#e8f4fc;
  display:flex;align-items:center;justify-content:center;}

/* Game Boy shell bezel */
#wrap{
  position:relative;
  width:422px;
  height:auto;
  margin:0 auto;
  padding:16px 16px 12px;
  border-radius:28px 28px 42px 42px;
  background:
    linear-gradient(165deg, var(--gb-shell-light) 0%, var(--gb-shell) 42%, var(--gb-shell-dark) 100%);
  box-shadow:
    0 0 0 3px #1e2022,
    0 12px 40px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -4px 12px rgba(0,0,0,.25);
  overflow:visible;
}

/* Screen bezel — lighter “glass” area */
#screen{
  position:relative;
  width:390px;
  height:700px;
  margin:0 auto;
  border-radius:6px;
  background:#1a1e14;
  box-shadow:
    inset 0 0 0 5px #2a2e28,
    inset 0 0 0 7px #0c0e0a,
    0 2px 8px rgba(0,0,0,.4);
  overflow:hidden;
}
#game{
  display:block;
  width:390px;
  height:700px;
  image-rendering:pixelated;
  background:#bfe3f2;
}

/* Subtle DMG tint — remove class .gb-tint from #screen to disable */
#screen.gb-tint::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:3;
  background:
    rgba(160,170,50,0.04),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.028) 2px,
      rgba(0,0,0,0.028) 3px
    );
}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;padding:6px 8px;
  display:flex;flex-direction:column;gap:3px;
  background:linear-gradient(#0c1116cc,#0c111600);pointer-events:none;z-index:4;}
.stat{display:flex;align-items:center;gap:6px;font-size:12px;}
.stat .lbl{width:18px;text-align:center;}
.bar{flex:1;height:9px;background:#00000055;border:1px solid #00000088;border-radius:5px;overflow:hidden;}
.bar i{display:block;height:100%;width:100%;transition:width .2s;}
#cashBar{background:#ffd24a;}
#energyBar{background:#5ad1ff;}
#hungerBar{background:#ff8c42;}
#moodBar{background:#b07cff;}
.stat span:last-child{width:36px;text-align:right;font-weight:700;}
#invBar{position:absolute;top:92px;left:8px;display:flex;gap:4px;pointer-events:none;z-index:4;min-height:0;}
#invBar .inv-item{background:#1c2630cc;border:1px solid #ffd24a66;border-radius:6px;padding:2px 5px;
  font-size:12px;line-height:1.2;position:relative;}
#invBar .inv-n{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#1c2630;
  font-size:9px;font-weight:800;border-radius:6px;padding:0 3px;min-width:10px;text-align:center;}
#clock{position:absolute;top:68px;left:8px;font-size:12px;font-weight:700;
  color:#1c2630;background:#ffd24aaa;padding:2px 6px;border-radius:6px;pointer-events:none;z-index:4;}
#objective{position:absolute;top:68px;right:8px;left:auto;font-size:11px;font-weight:700;
  color:#fff;background:#1c2630cc;padding:3px 8px;border-radius:6px;max-width:210px;text-align:right;
  pointer-events:none;line-height:1.3;z-index:4;}

/* Toast */
#toast{position:absolute;bottom:160px;left:50%;transform:translateX(-50%);
  background:#1c2630ee;color:#fff;padding:8px 14px;border-radius:10px;font-size:13px;
  border:1px solid var(--accent);opacity:0;transition:opacity .3s;pointer-events:none;
  max-width:300px;text-align:center;white-space:pre-line;z-index:5;}
#toast.show{opacity:1;}

/* ---- Game Boy controls (overlaid on lower shell / screen) ---- */
#pad{
  position:absolute;
  bottom:18px;left:16px;right:16px;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  z-index:6;
  pointer-events:none;
}
#pad > *{pointer-events:auto;}

/* D-pad cross */
#dpad{
  position:relative;
  width:110px;height:110px;
  display:grid;
  grid-template-columns:34px 34px 34px;
  grid-template-rows:34px 34px 34px;
  gap:0;
  justify-content:center;
  align-content:center;
  filter:drop-shadow(0 3px 0 #1a1c1e);
}
#dpad::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:100px;height:100px;
  transform:translate(-50%,-50%);
  background:#3a3e42;
  clip-path:polygon(
    33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%,
    67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%
  );
  box-shadow:inset 0 0 0 2px #1a1c1e, inset 0 2px 4px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:0;
}
.dbtn{
  position:relative;z-index:1;
  background:transparent;border:none;padding:0;margin:0;
  color:transparent;font-size:0;
  user-select:none;touch-action:none;cursor:pointer;
}
.dpad-up{grid-column:2;grid-row:1;}
.dpad-left{grid-column:1;grid-row:2;}
.dpad-center{grid-column:2;grid-row:2;pointer-events:none;}
.dpad-right{grid-column:3;grid-row:2;}
.dpad-down{grid-column:2;grid-row:3;}
.dbtn:active{background:rgba(0,0,0,.4);}
.dpad-up:active{border-radius:4px 4px 0 0;}
.dpad-down:active{border-radius:0 0 4px 4px;}
.dpad-left:active{border-radius:4px 0 0 4px;}
.dpad-right:active{border-radius:0 4px 4px 0;}

/* SELECT / START */
#sysBtns{
  display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;
  transform:translateY(6px);
}
.sysbtn{
  width:64px;height:18px;
  border:none;border-radius:10px;
  background:linear-gradient(180deg,#3a3e42,#2a2e32);
  color:#9aa0a6;font-size:8px;font-weight:800;letter-spacing:1px;
  box-shadow:0 2px 0 #1a1c1e, inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotate(-28deg);
  user-select:none;touch-action:none;cursor:pointer;
  font-family:inherit;
}
.sysbtn:active{transform:rotate(-28deg) translateY(1px);box-shadow:0 1px 0 #1a1c1e;}

/* A / B — tilted like real GB */
#abBtns{
  position:relative;
  width:120px;height:110px;
  transform:rotate(-28deg);
}
.abtn,.bbtn{
  position:absolute;
  width:48px;height:48px;
  border:none;border-radius:50%;
  color:#fff;font-size:16px;font-weight:900;
  font-family:inherit;
  user-select:none;touch-action:none;cursor:pointer;
  box-shadow:0 4px 0 #1a120e, inset 0 2px 0 rgba(255,255,255,.2);
}
.abtn{
  right:4px;top:8px;
  background:radial-gradient(circle at 35% 30%, #d07060, var(--gb-a) 55%, #8a3028);
}
.bbtn{
  left:4px;bottom:12px;
  background:radial-gradient(circle at 35% 30%, #8a4840, var(--gb-b) 55%, #3a1814);
}
.abtn:active,.bbtn:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #1a120e, inset 0 2px 0 rgba(255,255,255,.15);
}

/* Modal */
#modal{position:absolute;inset:0;background:#0c1116cc;display:flex;align-items:center;justify-content:center;z-index:8;}
#modal.hidden{display:none;}
.mpanel{width:300px;background:var(--panel);border:2px solid var(--accent);border-radius:14px;
  padding:18px;text-align:center;}
.mpanel h2{margin:0 0 8px;color:var(--accent);}
.mpanel p{font-size:13px;color:#aac;margin:0 0 14px;line-height:1.45;white-space:pre-line;}
.mpanel button{display:block;width:100%;margin:6px 0;padding:11px;border-radius:10px;
  border:none;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer;}
#mOpts{display:flex;flex-direction:column;gap:0;}
#mOpts button{background:#2a3640;color:#e8f0f4;border:1px solid #4a5a68;}
#mOpts button:active{filter:brightness(1.15);}
#mYes{background:var(--accent);color:#1c2630;}
#mNo{background:#2a3640;color:#cde;}
#mYes.hidden,#mNo.hidden,#mOpts.hidden{display:none;}

/* Overlay — Van Nuys sunset hero */
#overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 78%, rgba(255,180,80,.35), transparent 70%),
    linear-gradient(180deg,
      var(--sunset-top) 0%,
      #8a3a6a 28%,
      var(--sunset-mid) 58%,
      var(--sunset-bot) 100%);
  overflow:hidden;
}
#overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,200,120,.08) 40%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px);
  animation:haze 8s ease-in-out infinite alternate;
}
#overlay::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:38%;
  background:
    linear-gradient(180deg, transparent, rgba(28,38,48,.55)),
    repeating-linear-gradient(90deg,
      #2a2118 0 18px, #3a3028 18px 28px, #1a1510 28px 36px, #4a3a28 36px 52px);
  clip-path:polygon(0 40%, 8% 28%, 14% 45%, 22% 20%, 30% 38%, 38% 12%, 48% 42%,
    56% 18%, 64% 35%, 72% 8%, 80% 40%, 88% 22%, 100% 48%, 100% 100%, 0 100%);
  opacity:.9;
  pointer-events:none;
}
@keyframes haze{
  from{opacity:.7;transform:translateY(0);}
  to{opacity:1;transform:translateY(-4px);}
}
#overlay.hidden{display:none;}
.panel{
  position:relative;z-index:1;width:320px;
  background:rgba(28,38,48,.82);
  border:2px solid var(--accent);border-radius:16px;
  padding:22px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.panel h1{
  margin:0 0 6px;color:#fff;
  font-size:34px;letter-spacing:6px;font-weight:900;
  text-shadow:
    0 0 24px rgba(255,140,66,.55),
    0 2px 0 #c45a20,
    0 4px 12px rgba(0,0,0,.5);
}
.panel .tag{color:#ffd9a8;margin:0 0 12px;font-size:13px;}
.panel .hint{color:#b8c8d0;font-size:12px;margin:0 0 16px;line-height:1.5;}
.panel button{background:var(--accent);color:#1c2630;border:none;border-radius:12px;
  padding:13px 30px;font-weight:800;font-size:16px;cursor:pointer;font-family:inherit;}
.panel button:active{filter:brightness(1.1);}
.panel .foot{color:#fc6;font-size:13px;margin:12px 0 0;min-height:18px;}
#scoreBoard{text-align:left;margin:0 0 14px;padding:10px 12px;background:#0c111688;
  border:1px solid #ff8c4266;border-radius:10px;font-size:12px;line-height:1.55;color:#d8e4ec;}
#scoreBoard.hidden{display:none;}
#scoreBoard .rank{margin-top:8px;color:var(--accent);font-weight:900;font-size:14px;text-align:center;}

#muteBtn,#musicBtn{position:absolute;background:#1c2630cc;border:none;
  border-radius:50%;width:34px;height:34px;font-size:16px;z-index:12;cursor:pointer;}
#muteBtn{top:24px;right:24px;}
#musicBtn{top:24px;right:64px;}

@media (max-height:820px){
  #wrap{transform:scale(0.88);transform-origin:center center;}
}
@media (max-width:440px){
  #wrap{transform:scale(0.92);transform-origin:center center;}
}