@import url("./tokens.css");

* { box-sizing: border-box; }
html { background: #c8c2ae; }
body {
  min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink);
  background: radial-gradient(circle at 16% 12%, rgba(255,255,255,.25) 0 1px, transparent 2px) 0 0 / 17px 17px, linear-gradient(145deg, #ece4cc, #bdb5a0);
  font-family: var(--font-body);
}
button, a { -webkit-tap-highlight-color: transparent; }
.handheld {
  width: min(100% - 24px, 920px); margin: 12px auto; padding: clamp(18px, 4vw, 40px);
  border: 2px solid var(--shell-shadow); border-radius: 28px 28px 48px 28px;
  background: linear-gradient(135deg, var(--shell-highlight), var(--shell) 55%, #c9c1a9); box-shadow: var(--shadow);
}
.device-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 0 2px; }
.brand { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.65rem); letter-spacing: .06em; }
.brand small { display: block; margin-top: 2px; color: var(--muted-ink); font-family: var(--font-body); font-size: .7rem; font-weight: 700; letter-spacing: .16em; }
.sound-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 44px; height: 48px; min-height: 44px;
  border: 2px solid var(--cartridge-edge); border-radius: 50%; color: var(--ink); background: var(--cartridge); box-shadow: 0 3px 0 var(--shell-shadow); cursor: pointer;
}
.sound-toggle:hover { background: var(--shell-highlight); }
.sound-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shell-shadow); }
.sound-toggle img { width: 22px; height: 22px; }
.sound-toggle[aria-pressed="false"] img { opacity: .45; }
.lcd {
  padding: clamp(18px, 4vw, 32px); border: 5px solid #777563; border-radius: 20px;
  background: linear-gradient(rgba(224,238,198,.22) 1px, transparent 1px) 0 0 / 100% 5px, linear-gradient(110deg, var(--lcd-light), var(--lcd));
  box-shadow: inset 0 0 0 2px rgba(49,74,42,.24), inset 0 12px 24px rgba(255,255,255,.18);
}
.collection-heading { margin-bottom: 18px; }
.collection-heading h1 { margin: 0; color: var(--lcd-deep); font-family: var(--font-display); font-size: clamp(1.65rem, 5vw, 2.5rem); letter-spacing: .04em; }
.collection-heading p { margin: 5px 0 0; color: var(--lcd-deep); font-size: .92rem; }
.cartridge-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cartridge {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; min-height: 124px; padding: 15px;
  border: 2px solid var(--cartridge-edge); border-radius: 10px 10px 20px 10px; color: inherit; background: var(--cartridge);
  box-shadow: 0 5px 0 rgba(49,48,38,.3); text-decoration: none; transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
}
.cartridge:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(49,48,38,.3); background: #fff6df; }
.cartridge:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(49,48,38,.3); }
.cartridge:focus-visible, .sound-toggle:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.cartridge-mark { display: grid; place-items: center; width: 42px; height: 52px; border: 2px solid var(--cartridge-edge); border-radius: 5px 5px 10px 5px; color: var(--lcd-deep); background: var(--lcd-light); font-family: var(--font-display); font-size: .75rem; }
.cartridge-main { min-width: 0; }
.cartridge-title { display: block; font-family: var(--font-display); font-size: 1.18rem; }
.cartridge-meta { display: block; margin-top: 5px; color: var(--muted-ink); font-size: .8rem; }
.cartridge-status { display: block; margin-top: 5px; color: var(--lcd-deep); font-size: .76rem; font-weight: 700; }
.cartridge-arrow { align-self: end; color: var(--accent); font-size: 1.5rem; line-height: 1; }
@media (min-width: 600px) { .handheld { margin: 36px auto; } .cartridge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }