/* ===========================================================
   KARENGOTCHI — retro Tamagotchi shell + Sims-ish LCD screen
   =========================================================== */

:root{
  --orange:#FF7F4F;
  --blue:#4A9FCC;
  --good:#6fd66f;
  --bad:#ff5d6c;
  --warn:#ffcc4d;
  --lcd:#cfe8d4;       /* soft LCD green-ish */
  --lcd-dark:#0e1f17;
  --shell-1:#7b3fb0;
  --shell-2:#5a2a87;
  --shell-3:#3c1c5e;
  --ink:#241036;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #4b2d6e 0%, #2a1a3a 55%, #190f26 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:14px;
  min-height:100%;
  overflow-x:hidden;
}

#app{width:100%; max-width:430px; display:flex; flex-direction:column; align-items:center;}

/* ---------- The device shell ---------- */
.device{
  width:100%;
  background:
    radial-gradient(120% 80% at 30% 0%, var(--shell-1), var(--shell-2) 55%, var(--shell-3) 100%);
  border-radius:34px;
  padding:16px 16px 18px;
  box-shadow:
    0 22px 50px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -10px 24px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.10);
  position:relative;
}
.device::before{ /* speaker dots flourish */
  content:"";
  position:absolute; top:18px; right:60px;
  width:34px; height:8px;
  background:
    radial-gradient(circle, rgba(0,0,0,.4) 1.4px, transparent 1.6px) 0 0/8px 8px;
  opacity:.5; border-radius:6px;
}

.device-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 6px 12px;
}
.brand{
  font-weight:900; letter-spacing:1px; font-size:20px;
  color:#ffe9c7; text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.brand-accent{color:var(--orange);}

.icon-btn{
  width:38px; height:38px; border-radius:50%;
  border:none; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, #ffd27f, var(--orange));
  color:#5a2a00; font-size:18px; font-weight:900;
  box-shadow:0 4px 0 #b84d22, inset 0 2px 2px rgba(255,255,255,.5);
}
.icon-btn:active{transform:translateY(2px); box-shadow:0 2px 0 #b84d22;}
.icon-btn.off{opacity:.5; filter:grayscale(.6);}

/* ---------- Screen ---------- */
.screen-wrap{
  background:linear-gradient(#21102f,#150a20);
  border-radius:20px;
  padding:12px;
  box-shadow:inset 0 6px 18px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);
}
.screen{
  position:relative;
  width:100%;
  aspect-ratio:360/280;
  border-radius:10px;
  overflow:hidden;
  background:#0c1b14;
  box-shadow:inset 0 0 0 3px #06120c, inset 0 0 30px rgba(0,0,0,.6);
}
#game{
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  touch-action:manipulation;
}

/* ---------- HUD overlay ---------- */
.hud{
  position:absolute; inset:0; padding:6px;
  pointer-events:none;
  display:flex; flex-direction:column; gap:5px;
  font-size:9px; text-transform:uppercase; letter-spacing:.5px;
}
.hud-top{display:flex; gap:6px;}
.hud-grid{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px 6px;
}
.meter{
  background:rgba(6,16,11,.55);
  border:1px solid rgba(255,255,255,.12);
  border-radius:5px;
  padding:2px 5px;
  backdrop-filter:blur(1px);
}
.meter-big{flex:1;}
.meter-label{display:block; color:#d7ffe6; font-weight:700; line-height:1.1; text-shadow:0 1px 1px #000;}
.meter-big .meter-label{font-size:10px; color:#fff;}
.bar{
  margin-top:2px; height:7px; border-radius:4px;
  background:rgba(0,0,0,.45); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.meter-big .bar{height:10px;}
.fill{
  height:100%; width:60%;
  background:linear-gradient(90deg,var(--good),#bff5a0);
  border-radius:4px;
  transition:width .25s ease, background .3s ease;
}
.meter-bad .fill{background:linear-gradient(90deg,#ffb347,var(--bad));}

/* ---------- Overlay (title / game over) ---------- */
.overlay{
  position:absolute; inset:0;
  background:rgba(10,5,18,.82);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:18px;
  backdrop-filter:blur(2px);
  z-index:5;
  transition:opacity .3s ease;
}
.overlay.hidden{opacity:0; pointer-events:none;}
.overlay-inner{max-width:300px;}
.overlay h1{
  margin:0 0 8px; font-size:30px; font-weight:900; letter-spacing:1px;
  color:var(--orange); text-shadow:0 3px 0 #5a2a87, 0 0 18px rgba(255,127,79,.5);
}
.overlay p{margin:0 0 12px; font-size:12.5px; line-height:1.5; color:#e9ddff;}
.overlay-score{font-size:14px; color:var(--warn); font-weight:700;}
.big-btn{
  border:none; cursor:pointer;
  padding:12px 22px; border-radius:30px;
  font-size:15px; font-weight:900; letter-spacing:.5px;
  color:#3a1500;
  background:linear-gradient(#ffd27f,var(--orange));
  box-shadow:0 6px 0 #b84d22, inset 0 2px 2px rgba(255,255,255,.5);
}
.big-btn:active{transform:translateY(3px); box-shadow:0 3px 0 #b84d22;}

/* ---------- Controls ---------- */
.controls{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.ctrl{
  border:none; cursor:pointer;
  border-radius:16px;
  padding:9px 4px 7px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:linear-gradient(#fff4e2,#ffd9b3);
  color:#5a2a00;
  box-shadow:0 5px 0 #c98b53, inset 0 2px 2px rgba(255,255,255,.7);
  transition:transform .05s, box-shadow .05s, filter .15s;
}
.ctrl .ico{font-size:21px; line-height:1;}
.ctrl .lbl{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;}
.ctrl:active{transform:translateY(4px); box-shadow:0 1px 0 #c98b53;}
.ctrl.flash{filter:brightness(1.25) saturate(1.3);}
.ctrl:disabled{opacity:.45; filter:grayscale(.5); box-shadow:0 2px 0 #c98b53;}

/* nicer button hues */
.ctrl[data-action="clap"]{background:linear-gradient(#eaf3ff,#bfe0ff);box-shadow:0 5px 0 #5f97c6,inset 0 2px 2px rgba(255,255,255,.7);}
.ctrl[data-action="clap"]:active{box-shadow:0 1px 0 #5f97c6;}
.ctrl[data-action="cactus"]{background:linear-gradient(#e7ffe7,#bff0bf);box-shadow:0 5px 0 #5fa05f,inset 0 2px 2px rgba(255,255,255,.7);}
.ctrl[data-action="cactus"]:active{box-shadow:0 1px 0 #5fa05f;}
.ctrl[data-action="laugh"]{background:linear-gradient(#fff3d6,#ffe199);box-shadow:0 5px 0 #c9a23f,inset 0 2px 2px rgba(255,255,255,.7);}
.ctrl[data-action="laugh"]:active{box-shadow:0 1px 0 #c9a23f;}

/* ---------- Ticker ---------- */
.ticker{
  margin-top:12px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:7px 12px;
  font-size:11.5px; font-style:italic; color:#ffe9c7;
  min-height:30px; display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.35;
}

.disclaim{
  margin:14px 6px 4px; max-width:420px;
  font-size:10px; color:#9b8fb5; text-align:center; line-height:1.5;
}

/* ---------- Small screens ---------- */
@media (max-width:380px){
  .ctrl .lbl{font-size:8.5px;}
  .ctrl .ico{font-size:19px;}
  .brand{font-size:18px;}
}
@media (min-width:500px){
  #app{max-width:460px;}
}