/* Tema SKZOO-OCHI: preto + vermelho Stray Kids, com acentos neon Gen Alpha */
:root {
  --shell: #141417;
  --shell-edge: #050507;
  --accent: #f44336; /* vermelho SKZ */
  --accent2: #ffd400; /* o K do logo */
  --text: #f5f3f7;
  --btn: #1f1f26;
  --btn-edge: #3a3a46;
}
body.mono {
  --shell: #4a5d3a;
  --shell-edge: #34452a;
  --accent: #c7d96b;
  --accent2: #c7d96b;
  --btn: #5a7045;
  --btn-edge: #76935c;
}
/* Tamagotchi Classic: casca de ovo clarinha, botões redondos, LCD cinza-pálido */
body.tama {
  --shell: #f2edf5;
  --shell-edge: #d8cce2;
  --accent: #e85d8a;
  --accent2: #8a63c9;
  --text: #3a3344;
  --btn: #ffffff;
  --btn-edge: #cdbcdc;
}
body.tama #device { box-shadow: inset 0 0 0 4px var(--btn-edge), 0 12px 36px rgba(90, 70, 120, .35); }
body.tama #bezel { background: #b9aec6; }
body.tama #msg { background: rgba(58, 51, 68, .92); color: #fff; }
body.tama #title { text-shadow: none; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--shell-edge);
  color: var(--text);
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: bold;
  display: flex;
  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);
}

#device {
  width: min(440px, 100vw);
  background: var(--shell);
  border-radius: 36px;
  padding: 14px 16px 22px;
  box-shadow: inset 0 0 0 4px var(--btn-edge), 0 0 60px rgba(255,46,77,.18), 0 12px 40px rgba(0,0,0,.6);
}
body.showing #device { box-shadow: inset 0 0 0 4px var(--accent), 0 0 80px rgba(255,46,77,.45), 0 12px 40px rgba(0,0,0,.6); }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
#title { letter-spacing: 2px; color: var(--accent); font-size: 14px; text-shadow: 0 0 12px rgba(255,46,77,.6); }
.chip {
  background: var(--btn); color: var(--text); border: 2px solid var(--btn-edge);
  border-radius: 8px; font: inherit; font-size: 11px; padding: 2px 7px; cursor: pointer;
}

#hud, #hud2 { display: flex; justify-content: space-between; font-size: 12px; padding: 1px 4px; min-height: 16px; }
#hud2 { color: var(--accent); }

#bezel {
  position: relative;
  background: var(--shell-edge);
  border-radius: 14px;
  padding: 10px;
  margin: 4px 0 10px;
}
canvas#lcd {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 6px;
}
#msg {
  position: absolute; left: 14px; right: 14px; bottom: 16px;
  background: rgba(10,10,25,.85); color: #fff;
  font-size: 13px; padding: 6px 10px; border-radius: 10px;
  opacity: 0; transition: opacity .25s; text-align: center; pointer-events: none;
}
body.mono #msg { background: rgba(15,56,15,.9); color: #c7d96b; }
#msg.show { opacity: 1; }

#banner {
  position: absolute; top: 16px; left: 14px; right: 14px;
  text-align: center; font-size: 12px; letter-spacing: 1.5px;
  color: #fff; text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
#banner.show { opacity: 1; }

#flag { margin-right: 5px; }

#lyrics {
  min-height: 0;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.35;
}
#lyrics .ko { font-size: 19px; color: var(--accent2); text-shadow: 0 0 10px rgba(255,212,0,.4); }
#lyrics .rr { font-size: 11px; opacity: .75; }
#lyrics .tr { font-size: 12px; opacity: .9; }
#lyrics:empty { display: none; }

#msg .ko { font-size: 16px; color: var(--accent2); }
#msg .tr { font-size: 12px; opacity: .9; }
#msg .en { opacity: .6; font-size: 11px; }

#actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#actions button.live { border-color: var(--accent); box-shadow: 0 0 14px rgba(255,46,77,.55); }
#actions button {
  background: var(--btn); border: 2px solid var(--btn-edge); border-radius: 12px;
  color: var(--text); font-size: 19px; padding: 7px 0 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
#actions button:active { transform: translateY(2px); filter: brightness(1.2); }
#actions small { font-size: 8px; font-family: inherit; letter-spacing: .5px; }

.overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 10, 25, .75); z-index: 10;
  padding: 20px;
}
.overlay.open { display: flex; }
.card {
  background: var(--shell); border: 3px solid var(--btn-edge); border-radius: 20px;
  padding: 22px; text-align: center; width: min(340px, 90vw);
  display: flex; flex-direction: column; gap: 10px;
}
.card h1 { margin: 0; color: var(--accent); font-size: 22px; letter-spacing: 1px; }
.card h2 { margin: 0; font-size: 16px; }
.card p { margin: 2px 0; font-size: 13px; }
.card .row { display: flex; gap: 10px; justify-content: center; }
button.big {
  background: var(--btn); border: 2px solid var(--btn-edge); border-radius: 14px;
  color: var(--text); font: inherit; font-size: 16px; padding: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
button.big small { font-size: 10px; opacity: .7; }
button.big:active { transform: translateY(2px); }
.dim { opacity: .65; font-size: 11px; background: none; border: none; color: var(--text); font: inherit; cursor: pointer; }
#stats-body p { margin: 3px 0; }