/* ── The phone ─────────────────────────────────────────────── */
.phone {
  --shell-1: #3a4a63;
  --shell-2: #222c3d;
  --shell-3: #151b26;
  position: relative;
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 14px 22px 20px;
  border-radius: 56px 56px 80px 80px / 48px 48px 110px 110px;
  background:
    radial-gradient(ellipse 70% 30% at 30% 6%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(0,0,0,.45), transparent 70%),
    linear-gradient(160deg, var(--shell-1), var(--shell-2) 45%, var(--shell-3));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -6px 18px rgba(0,0,0,.5),
    inset 6px 0 14px rgba(255,255,255,.04),
    0 40px 70px -20px rgba(0,0,0,.8),
    0 0 0 2px #0b0f16,
    0 0 90px -10px rgba(160, 210, 90, .18);
  transition: box-shadow .6s var(--ease-out);
  z-index: 2;
}
.phone::before { /* side rim highlight */
  content: ''; position: absolute; inset: 3px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255,255,255,.07);
}
.phone__speaker { display: flex; justify-content: center; gap: 5px; margin: 2px 0 8px; }
.phone__speaker i { width: 18px; height: 5px; border-radius: 3px; background: #0b0f16; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.12); }
.phone__brand {
  text-align: center; font-family: var(--font-pixel); font-weight: 700; font-size: 13px; letter-spacing: .3em;
  color: #c9d3e3; text-shadow: 0 1px 0 #000; margin-bottom: 8px; opacity: .85;
}
.phone__brand b { color: var(--lime); margin-left: .25em; }

.phone__bezel {
  position: relative;
  padding: 14px 14px 10px;
  border-radius: 22px 22px 34px 34px;
  background: linear-gradient(180deg, #0e1218, #1b222c 60%, #0d1117);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.12);
}

/* ── LCD ───────────────────────────────────────────────────── */
.lcd {
  --lcd-bg: #c3d29b;
  --lcd-bg-2: #a9ba82;
  --lcd-ink: #1c2812;
  --lcd-decor: rgba(28, 40, 18, .17);
  --lcd-grid: rgba(195, 210, 155, .55);
  --lcd-glow: rgba(196, 240, 120, .55);
  container-type: inline-size;
  position: relative;
  border-radius: 10px 10px 16px 16px;
  overflow: hidden;
  color: var(--lcd-ink);
  background:
    radial-gradient(ellipse 120% 90% at 50% 35%, var(--lcd-bg), var(--lcd-bg-2));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.25), 0 0 26px -4px var(--lcd-glow);
  transition: box-shadow .5s, filter .4s;
  user-select: none; -webkit-user-select: none;
}
.lcd::after { /* glass glare */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 28%, transparent 40%, transparent 70%, rgba(255,255,255,.05) 100%);
  mix-blend-mode: soft-light;
}
.lcd[data-theme-lcd='blue'] {
  --lcd-bg: #9fd2e0; --lcd-bg-2: #77b2c6; --lcd-ink: #0c2533;
  --lcd-decor: rgba(12, 37, 51, .17); --lcd-grid: rgba(159, 210, 224, .55); --lcd-glow: rgba(120, 210, 255, .55);
}
.lcd.is-dim { /* backlight off */
  --lcd-bg: #9aa47e; --lcd-bg-2: #858f69; --lcd-grid: rgba(154, 164, 126, .55); --lcd-glow: transparent;
}
.lcd[data-theme-lcd='blue'].is-dim { --lcd-bg: #7e9aa3; --lcd-bg-2: #6a858e; --lcd-grid: rgba(126,154,163,.55); }
.lcd.is-invert .lcd__viewport { filter: invert(1) hue-rotate(180deg) saturate(1.3); }
.lcd.is-offline .lcd__canvas { filter: contrast(.6) brightness(1.1); }

.lcd__status {
  display: flex; align-items: center; gap: 2.4cqw;
  height: 9.5cqw; padding: 0 3cqw;
  font-family: var(--font-pixel); font-size: 3.6cqw; letter-spacing: .04em;
  border-bottom: max(1px, .5cqw) solid color-mix(in srgb, var(--lcd-ink) 70%, transparent);
}
.sig { display: flex; align-items: flex-end; gap: .6cqw; height: 4.4cqw; }
.sig i { width: 1.1cqw; background: var(--lcd-ink); opacity: .15; transition: opacity .2s; }
.sig i:nth-child(1) { height: 25%; } .sig i:nth-child(2) { height: 50%; } .sig i:nth-child(3) { height: 75%; } .sig i:nth-child(4) { height: 100%; }
.sig[data-level='1'] i:nth-child(-n+1), .sig[data-level='2'] i:nth-child(-n+2), .sig[data-level='3'] i:nth-child(-n+3), .sig[data-level='4'] i { opacity: 1; }
.sig[data-level='0'] { animation: blink .6s steps(2, start) infinite; }
.lcd__tag { background: var(--lcd-ink); color: var(--lcd-bg); padding: 0 1.4cqw; border-radius: .8cqw; font-weight: 700; }
.lcd__stage { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lcd__len { font-variant-numeric: tabular-nums; }

.lcd__viewport { position: relative; aspect-ratio: 5 / 4; outline: none; cursor: pointer; touch-action: pan-y; }
.lcd__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--lcd-ink); }
.lcd__canvas { width: 100%; height: 100%; image-rendering: pixelated; }

.lcd__soft {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 8.5cqw; padding: 0 3cqw;
  font-family: var(--font-pixel); font-size: 3.6cqw; letter-spacing: .05em;
  border-top: max(1px, .5cqw) solid color-mix(in srgb, var(--lcd-ink) 70%, transparent);
}
#soft-right { text-align: right; }
#soft-center { padding: 0 2cqw; font-weight: 700; }

/* floating labels over the canvas */
.lcd__hud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pop {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--font-pixel); font-weight: 700; font-size: 4cqw; white-space: nowrap;
  color: var(--lcd-ink); background: var(--lcd-bg); padding: .2cqw 1.2cqw; border: .5cqw solid var(--lcd-ink); border-radius: 1cqw;
  animation: pop-up 1.7s var(--ease-out) forwards;
}
.pop small { font-size: 2.6cqw; display: block; text-align: center; font-weight: 400; }
@keyframes pop-up { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 12% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%); } }

/* evolution banner */
.lcd__banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4; }
.banner { text-align: center; background: var(--lcd-bg); border: .8cqw solid var(--lcd-ink); padding: 2.4cqw 4cqw; box-shadow: 1.2cqw 1.2cqw 0 color-mix(in srgb, var(--lcd-ink) 35%, transparent); animation: banner-in .45s steps(5) both; }
.banner.is-out { animation: banner-out .35s steps(4) both; }
.banner__kicker { font-family: var(--font-pixel); font-size: 3.4cqw; letter-spacing: .2em; }
.banner__title { font-family: var(--font-pixel); font-weight: 700; font-size: 8.4cqw; line-height: 1; margin: 1cqw 0; letter-spacing: .02em; }
.banner__sub { font-family: var(--font-term); font-size: 5cqw; }
@keyframes banner-in { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes banner-out { to { clip-path: inset(50% 0 50% 0); } }

/* menu / sub screens */
.lcd__screen {
  position: absolute; inset: 0; z-index: 5;
  background: var(--lcd-bg);
  background-image: linear-gradient(color-mix(in srgb, var(--lcd-ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--lcd-ink) 6%, transparent) 1px, transparent 1px);
  background-size: 1.2cqw 1.2cqw;
  display: flex; flex-direction: column;
  font-family: var(--font-term); font-size: 6cqw; line-height: 1.02;
  animation: screen-in .18s steps(3) both;
}
@keyframes screen-in { from { clip-path: inset(0 0 100% 0); } }
.scr__title { font-family: var(--font-pixel); font-weight: 700; font-size: 4.2cqw; letter-spacing: .08em; padding: 1.6cqw 3cqw; display: flex; justify-content: space-between; border-bottom: .5cqw solid var(--lcd-ink); }
.scr__body { flex: 1; overflow: hidden; position: relative; padding: 1cqw 0; }
.scr__list { list-style: none; margin: 0; padding: 0; }
.scr__item { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; padding: .6cqw 3cqw; white-space: nowrap; cursor: pointer; }
.scr__item .n { font-family: var(--font-pixel); font-size: 3.4cqw; width: 4cqw; }
.scr__item .l { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.scr__item .v { font-family: var(--font-pixel); font-size: 3.2cqw; }
.scr__item.is-sel { background: var(--lcd-ink); color: var(--lcd-bg); }
.scr__item.is-off { opacity: .45; }
.scr__text { padding: 1cqw 3cqw; margin: 0; }
.scr__text b { font-family: var(--font-pixel); font-size: 3.6cqw; }
.scr__kv { display: flex; justify-content: space-between; padding: .3cqw 3cqw; }
.scr__kv span:last-child { font-family: var(--font-pixel); font-size: 3.6cqw; }
.scr__bar { margin: 1cqw 3cqw; height: 3cqw; border: .5cqw solid var(--lcd-ink); position: relative; }
.scr__bar i { position: absolute; inset: .5cqw; right: auto; background: var(--lcd-ink); }
.scr__scroll { position: absolute; right: .8cqw; top: 1cqw; bottom: 1cqw; width: 1.2cqw; border-left: .4cqw dotted var(--lcd-ink); }
.scr__scroll i { position: absolute; left: -.8cqw; width: 1.6cqw; background: var(--lcd-ink); }
.scr__empty { padding: 4cqw 3cqw; text-align: center; }

/* notice (offline / connecting) floats over the live snake */
.lcd__notice {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%); z-index: 6;
  background: var(--lcd-bg); border: .8cqw solid var(--lcd-ink); padding: 2.4cqw 3cqw; text-align: center;
  font-family: var(--font-term); font-size: 5.4cqw; line-height: 1.05;
  box-shadow: 1.2cqw 1.2cqw 0 color-mix(in srgb, var(--lcd-ink) 35%, transparent);
}
.lcd__notice b { display: block; font-family: var(--font-pixel); font-size: 5.2cqw; margin-bottom: 1cqw; }
.lcd__notice .antenna { display: inline-block; animation: blink .7s steps(2, start) infinite; }

/* ── keys ──────────────────────────────────────────────────── */
.key {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  border: 0; cursor: pointer; padding: 0;
  color: #1a2130;
  background: linear-gradient(180deg, #eef1f6, #b9c2d0);
  box-shadow: 0 3px 0 #59647a, 0 5px 8px rgba(0,0,0,.45), inset 0 1px 0 #fff;
  transition: transform .06s, box-shadow .06s, filter .1s;
  user-select: none; -webkit-user-select: none;
}
.key:active, .key.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 #59647a, 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 #fff; filter: brightness(.94); }
.phone__nav { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 12px; margin: 14px 6px 12px; }
.key--c { height: 44px; border-radius: 16px 22px 22px 16px; font-family: var(--font-pixel); font-weight: 700; font-size: 16px; }
.key--navi {
  height: 54px; border-radius: 50% 50% 46% 46% / 70% 70% 40% 40%;
  background: linear-gradient(180deg, #c6f06c, #86b532);
  box-shadow: 0 4px 0 #3e5b12, 0 7px 14px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.6);
  color: #1b2b08; font-family: var(--font-pixel); font-weight: 700; font-size: 14px; letter-spacing: .12em;
}
.key--navi:active, .key--navi.is-pressed { box-shadow: 0 0 0 #3e5b12, 0 2px 4px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5); }
.rocker { display: grid; gap: 4px; }
.rocker .key { height: 24px; border-radius: 10px; display: grid; place-items: center; }
.rocker .key svg { width: 12px; height: 8px; fill: currentColor; }
.key--up { border-radius: 16px 16px 6px 6px !important; }
.key--down { border-radius: 6px 6px 16px 16px !important; }

.phone__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; padding: 0 8px; }
.key--num { height: 34px; border-radius: 40% 40% 46% 46% / 60% 60% 50% 50%; display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.key--num b { font-family: var(--font-pixel); font-weight: 700; font-size: 16px; }
.key--num small { font-family: var(--font-pixel); font-size: 8px; letter-spacing: .06em; color: #4b566c; }
.phone__pad .key--num:nth-child(3n+1) { transform: rotate(-3deg); }
.phone__pad .key--num:nth-child(3n) { transform: rotate(3deg); }
.phone__pad .key--num:nth-child(3n+1):active, .phone__pad .key--num:nth-child(3n+1).is-pressed { transform: rotate(-3deg) translateY(3px); }
.phone__pad .key--num:nth-child(3n):active, .phone__pad .key--num:nth-child(3n).is-pressed { transform: rotate(3deg) translateY(3px); }
.phone__chin { height: 8px; margin: 12px auto 0; width: 34%; border-radius: 6px; background: rgba(0,0,0,.35); box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.08); }

/* ── phone moods ───────────────────────────────────────────── */
.phone.is-shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97) both; }
.phone.is-shake-big { animation: shake-big .9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate(-1px, 0) rotate(-.3deg); } 20%, 80% { transform: translate(2px, 0) rotate(.4deg); } 30%, 50%, 70% { transform: translate(-3px, 0) rotate(-.6deg); } 40%, 60% { transform: translate(3px, 0) rotate(.6deg); } }
@keyframes shake-big { 0%,100% { transform: none; } 10%,30%,50%,70% { transform: translate(-5px, 1px) rotate(-1deg); } 20%,40%,60% { transform: translate(5px, -1px) rotate(1deg); } 80% { transform: translate(-2px, 0); } 90% { transform: translate(2px, 0); } }
.phone.is-evolving { box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -6px 18px rgba(0,0,0,.5), 0 40px 70px -20px rgba(0,0,0,.8), 0 0 0 2px #0b0f16, 0 0 0 10px rgba(182,224,90,.25), 0 0 160px 20px rgba(182,224,90,.55); }
.phone.is-burning .lcd { box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 24px rgba(0,0,0,.25), 0 0 40px 2px rgba(255,140,40,.7); }
.shockwave { position: absolute; left: 50%; top: 32%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 4px solid var(--lime); pointer-events: none; z-index: -1; animation: shock 1.1s var(--ease-out) forwards; }
@keyframes shock { from { transform: scale(.5); opacity: 1; } to { transform: scale(26); opacity: 0; border-width: 1px; } }

/* ── mobile: the LCD is the hero ───────────────────────────── */
@media (max-width: 600px) {
  .phone { width: 100%; padding: 10px 10px 14px; border-radius: 30px 30px 40px 40px; }
  .phone__speaker { margin: 2px 0 6px; }
  .phone__speaker i { width: 14px; height: 4px; }
  .phone__brand { display: none; }
  .phone__bezel { padding: 8px 8px 6px; border-radius: 18px 18px 24px 24px; }
  .phone__nav { margin: 12px 4px 0; grid-template-columns: 60px 1fr 60px; gap: 10px; }
  .key--navi { height: 50px; }
  .rocker { grid-template-columns: 1fr; }
  .rocker .key { height: 23px; }
  .phone__pad, .phone__chin { display: none; }
}