/* An original CSS-drawn handheld scanner for the Pokédex demo. */

.device {
  --shell: #d7263d;
  --shell-dark: #a51c30;
  --shell-light: #ef4b5f;
  --bezel: #e9e6df;
  --lcd: #9bbc0f;
  --lcd-dark: #8bac0f;
  --lcd-ink: #0f380f;
  --lcd-mid: #306230;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  background: linear-gradient(160deg, var(--shell-light), var(--shell) 30%, var(--shell-dark));
  border-radius: 18px 18px 18px 42px;
  padding: 18px clamp(14px, 3vw, 26px) 26px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .25), 0 14px 32px rgba(0, 0, 0, .25);
  color: #fff;
  max-width: 980px;
  margin: 0 auto;
}

/* top: lens and status lights */
.device-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lens {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 32%, #bfe6ff 0 10%, #3aa0ff 22%, #0b5fb3 70%);
  border: 5px solid #f4f2ec; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25), 0 0 18px rgba(58, 160, 255, .6);
}
.led { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .3); }
.led.r { background: #ff3b3b; } .led.y { background: #ffd23b; } .led.g { background: #3bd16f; }
.device-title { margin-left: auto; font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

/* screen */
.bezel { background: var(--bezel); border-radius: 10px 10px 10px 28px; padding: 14px 14px 22px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); position: relative; }
/* power button: the little red light on the screen's frame */
.power {
  position: absolute; left: 12px; bottom: 4px; width: 15px; height: 15px; padding: 0;
  border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); cursor: pointer;
  background: #ff3b3b; box-shadow: 0 0 8px rgba(255, 59, 59, .8);
}
.power:hover { transform: scale(1.15); }
.power:focus-visible { outline: 3px solid #ffd23b; outline-offset: 2px; }
.device.off .power { background: #6b1d1d; box-shadow: none; }

/* screen off */
.lcd { position: relative; overflow: hidden; }
.lcd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #10170c; opacity: 0; transition: opacity .25s;
}
.device.off .lcd::after { opacity: 1; }
.device.off .lcd { pointer-events: none; }
.device.off .lens { background: radial-gradient(circle at 34% 32%, #6f8796 0 10%, #2c4a66 22%, #13263a 70%); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }
.device.off .led { opacity: .25; }
.device.off .controls, .device.off .type-keys, .device.off .nav-pad { opacity: .45; pointer-events: none; }
.lcd.powering-off::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; z-index: 2; pointer-events: none;
  background: #e8ffd0; box-shadow: 0 0 12px #e8ffd0; animation: crt-off .45s ease-in forwards;
}
@keyframes crt-off { 0% { transform: scaleX(1); opacity: 1; } 70% { transform: scaleX(.05); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
.lcd.powering-on { animation: crt-on .5s steps(5); }
@keyframes crt-on { 0%, 40% { filter: brightness(2.2); } 20%, 60% { filter: brightness(.6); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .lcd.powering-off::before, .lcd.powering-on { animation: none; } }
.lcd {
  background: var(--lcd); color: var(--lcd-ink); font-family: var(--pixel); font-size: 11px; line-height: 1.7;
  border-radius: 4px; padding: 14px; box-shadow: inset 0 0 0 3px var(--lcd-dark), inset 0 4px 12px rgba(15, 56, 15, .35);
  background-image: linear-gradient(rgba(15, 56, 15, .05) 1px, transparent 1px);
  background-size: 100% 3px;
}
.lcd a { color: var(--lcd-ink); text-decoration: none; }
.lcd img { image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(15, 56, 15, .35)); }

/* controls */
.device input[type="text"] {
  font-family: var(--pixel); font-size: 11px; color: var(--lcd-ink); background: var(--lcd);
  border: 3px solid var(--lcd-mid); border-radius: 4px; padding: 10px 12px; min-width: 0;
}
.device input::placeholder { color: var(--lcd-mid); }
.device input:focus { outline: 3px solid #ffd23b; outline-offset: 1px; }
.dbtn {
  font-family: var(--pixel); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: #2b2b2b; border: 0; border-radius: 6px; padding: 12px 14px; cursor: pointer;
  box-shadow: 0 4px 0 #111; transition: transform .05s, box-shadow .05s; display: inline-block;
}
.dbtn:hover { color: #ffd23b; }
.dbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #111; }
.dbtn.blue { background: #1e6fd9; box-shadow: 0 4px 0 #0e3f80; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.controls .grow { flex: 1 1 200px; }

/* list screen */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.dex-grid::-webkit-scrollbar { width: 10px; }
.dex-grid::-webkit-scrollbar-thumb { background: var(--lcd-mid); border-radius: 5px; }
.dex-entry { display: block; text-align: center; padding: 6px 4px 8px; border: 2px solid transparent; border-radius: 4px; }
.dex-entry:hover, .dex-entry:focus { border-color: var(--lcd-ink); background: var(--lcd-dark); outline: none; }
.dex-entry img { width: 80px; height: 80px; margin: 0 auto; }
.dex-entry .n { font-size: 9px; color: var(--lcd-mid); }
.dex-entry .nm { font-size: 10px; text-transform: uppercase; word-break: break-word; }
.dex-status { display: flex; justify-content: space-between; border-bottom: 2px dashed var(--lcd-mid); padding-bottom: 8px; margin-bottom: 10px; }

/* detail: two halves on wide screens */
.device.split { display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 0; padding: 0; border-radius: 18px 18px 18px 42px; overflow: hidden; }
.device.split .half { padding: 18px clamp(14px, 3vw, 24px) 24px; }
.hinge { width: 22px; background: linear-gradient(90deg, var(--shell-dark), var(--shell-light) 45%, var(--shell-dark)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sprite-stage { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 200px; }
.sprite-stage img { width: 170px; height: 170px; }
.readout { font-size: 11px; }
.readout .big { font-size: 15px; text-transform: uppercase; margin-bottom: 8px; }
.readout dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }
.readout dt { color: var(--lcd-mid); }
.readout dd { margin: 0; }
.type-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0; }
.type-key { background: #3aa0ff; color: #0b2a4d; font-family: var(--pixel); font-size: 9px; text-transform: uppercase; text-align: center; padding: 10px 4px; border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.type-key.empty { background: #1d6fbf; opacity: .55; }
.nav-pad { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 760px) {
  .device.split { grid-template-columns: 1fr; }
  .hinge { width: auto; height: 18px; background: linear-gradient(180deg, var(--shell-dark), var(--shell-light) 45%, var(--shell-dark)); }
  .sprite-stage img { width: 130px; height: 130px; }
}

/* ---------- entry text, shiny, game ---------- */
.dbtn[aria-pressed="true"] { background: #ffd23b; color: #2b2b2b; box-shadow: 0 4px 0 #b8941f; }
.dbtn:disabled { opacity: .5; cursor: not-allowed; }
.entry { font-size: 10px; line-height: 1.9; margin-top: 10px; border-top: 2px dashed var(--lcd-mid); padding-top: 10px; min-height: 5.7em; }
.entry .genus { display: block; color: var(--lcd-mid); margin-bottom: 4px; }
.shiny-badge { display: none; color: #d4a017; }
.device.shiny .shiny-badge { display: inline; }
.dex-msg { font-size: 9px; color: var(--lcd-mid); min-height: 1.6em; margin-top: 6px; }

.guess-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; text-align: center; }
.guess-stage img { width: 220px; height: 220px; transition: filter .5s; }
.guess-stage img.hidden-mon { filter: brightness(0) drop-shadow(0 0 0 transparent); }
.guess-stage .who { font-size: 14px; margin-bottom: 6px; }
.guess-stage .result { font-size: 13px; text-transform: uppercase; min-height: 1.6em; margin-top: 8px; }
.guess-stage.flash { animation: dex-flash .6s; }
@keyframes dex-flash { 0% { background-color: #f6ffe0; } 100% { background-color: var(--lcd); } }
.guess-stage.shake img { animation: dex-shake .35s; }
@keyframes dex-shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.scoreboard { display: flex; justify-content: space-between; font-size: 10px; border-bottom: 2px dashed var(--lcd-mid); padding-bottom: 8px; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .guess-stage.flash, .guess-stage.shake img { animation: none; } }