/* ============================================================
   TAMAGOTCHI '96 — shell, desk, and zine-manual styling
   Two visual worlds:
   1) the toy — molded tangerine plastic, reflective green LCD
   2) the printed manual overlay — riso two-ink collage (territory)
   ============================================================ */

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

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "Courier New", ui-monospace, monospace;
  background:
    radial-gradient(1200px 700px at 50% -10%, #2b2d33 0%, #17181c 60%, #101114 100%);
  color: #e8e4da;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#desk {
  position: relative;
  width: min(96vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom));
}

/* ===================== device shell ===================== */

#device {
  width: min(88vw, calc(128px * var(--u, 3) + 7rem));
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    radial-gradient(140% 120% at 70% 100%, #c2401f 0%, #e85d28 38%, #ff8a3c 78%, #ffa04f 100%);
  border-radius: 46% 46% 44% 44% / 34% 34% 26% 26%;
  box-shadow:
    inset 0 -14px 22px rgba(120, 30, 5, .45),
    inset 0 10px 14px rgba(255, 235, 200, .35),
    0 24px 50px rgba(0, 0, 0, .55),
    0 4px 10px rgba(0, 0, 0, .4);
  padding: 1.1rem .9rem 1.15rem;
  user-select: none;
}

.shell-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-bottom: .45rem;
}

.keychain-loop {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 5px solid rgba(160, 52, 18, .9);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.4);
  align-self: flex-start;
}

.brandplate {
  font-family: "Courier New", monospace;
  letter-spacing: .22em;
  color: #7e260c;
  text-shadow: 0 1px 0 rgba(255, 214, 170, .8);
  font-weight: 700;
  font-size: clamp(.62rem, 2.6vw, .8rem);
}

/* ---------- bezel + icons + screen ---------- */

.bezel {
  margin: 0 auto;
  width: 100%;
  background: linear-gradient(#40231533, #00000000 40%);
  border-radius: 2rem;
  padding: .55rem .25rem .4rem;
  display: grid;
  grid-template-columns: auto minmax(auto, 1fr) auto;
  grid-template-areas:
    "top top top"
    "left screen right"
    "bot bot bot";
  gap: .2rem .1rem;
}

.icon-row { display: contents; }
.icon-row-top    { grid-area: top;    display: flex; justify-content: space-between; padding: 0 .4rem .2rem; }
.icon-row-bottom { grid-area: bot;    display: flex; justify-content: space-between; padding: .15rem .4rem 0; }

.icon-row-top .icon-pad:first-child { transform: rotate(-5deg); }
.icon-row-top .icon-pad:nth-child(2){ transform: rotate(-2deg); }
.icon-row-top .icon-pad:nth-child(3){ transform: rotate(2deg); }
.icon-row-top .icon-pad:last-child  { transform: rotate(5deg); }
.icon-row-bottom .icon-pad:first-child{ transform: rotate(5deg) scaleX(-1); }
.icon-row-bottom .icon-pad:first-child > *{ transform: scaleX(-1); } /* keep glyph upright */
.icon-row-bottom .icon-pad:nth-child(2){ transform: rotate(2deg); }
.icon-row-bottom .icon-pad:nth-child(3){ transform: rotate(-2deg); }
.icon-row-bottom .icon-pad:last-child { transform: rotate(-5deg); }

.icon-pad {
  appearance: none; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: .25rem .3rem;
  cursor: pointer;
  min-width: 56px;
}
.icon-pad svg {
  width: clamp(22px, 6vw, 30px);
  height: clamp(22px, 6vw, 30px);
  fill: #fff2e0;
  filter: drop-shadow(0 1px 0 rgba(120, 30, 5, .7));
  background: rgba(122, 37, 10, .35);
  border-radius: 8px;
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.icon-pad span {
  font-family: inherit;
  font-size: clamp(.5rem, 2.1vw, .62rem);
  letter-spacing: .08em;
  color: #ffe7cf;
  text-shadow: 0 1px 0 rgba(110, 28, 6, .8);
}
.icon-pad.dim { opacity: .32; filter: saturate(.4); }
.icon-pad.sel svg {
  fill: #2c1503;
  background: #ffe9b8;
  box-shadow: 0 0 0 2px #ffe9b8, 0 0 12px rgba(255, 220, 130, .65);
}
.icon-pad.muted { position: relative; }
.icon-pad.muted::after {
  content: "";
  position: absolute; top: 4px; left: 50%;
  width: 26px; height: 2px;
  background: #ffd2a8;
  transform: translateX(-50%) rotate(-28deg);
}

.lcd-frame {
  grid-area: screen;
  background: radial-gradient(#5d3013 40%, #47220c 90%);
  border-radius: 22px;
  padding: clamp(7px, 2vw, 11px);
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.75),
    0 1px 0 rgba(255,205,150,.35);
  display: flex;
  justify-content: center;
}

.lcd-frame canvas, .lcd-window-canvas {
  width: calc(128px * var(--u, 3));
  height: calc(112px * var(--u, 3));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(60, 72, 8, .5);
  background: #b6bd66;
}

/* attention lamp sits on the plastic beside the glass */
#attention-lamp {
  position: fixed;
  left: calc(50% + min(44vw, calc(64px * var(--u,3) + 2.6rem)));
  top: max(84px, 13vh);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #57180441;
  border: 2px solid #762b0e;
  transition: background .18s steps(1);
  pointer-events: none;
}
#attention-lamp.on {
  background: #ffdc59;
  box-shadow: 0 0 10px 2px rgba(255, 200, 60, .65);
  animation: lampblink .52s steps(1) infinite;
}
@keyframes lampblink { 50% { opacity: .25; } }

@media (max-width: 700px) {
  #attention-lamp { position: static; margin: 6px auto 0; display: block; }
}

/* ---------- chin: buttons + speaker ---------- */

.chin { margin-top: .55rem; text-align: center; }

.btn-row {
  display: flex;
  justify-content: center;
  gap: clamp(.9rem, 5vw, 2rem);
  margin-bottom: .5rem;
}

.pbtn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: clamp(58px, 17vw, 72px);
  height: clamp(58px, 17vw, 72px);
  border-radius: 50%;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: inherit;
  background:
    radial-gradient(circle at 34% 28%, #ffe1bd 0%, #ffb066 36%, #d95f22 82%, #b34715 100%);
  color: #6d1f06;
  box-shadow:
    0 6px 0 #8a3208,
    0 9px 14px rgba(0, 0, 0, .45),
    inset 0 2px 3px rgba(255, 245, 225, .8);
  transition: transform .05s ease-out, box-shadow .05s ease-out;
}
.pbtn span {
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
}
.pbtn em {
  font-style: normal;
  font-size: clamp(.42rem, 1.9vw, .52rem);
  letter-spacing: .12em;
  opacity: .8;
}
.pbtn:active, .pbtn.pressed {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #8a3208,
    0 4px 8px rgba(0, 0, 0, .5),
    inset 0 2px 3px rgba(255, 245, 225, .8);
}

.grille {
  width: 84px; height: 12px;
  margin: 0 auto;
  background: repeating-linear-gradient(180deg,
    rgba(120, 30, 5, .85) 0 2px,
    transparent 2px 4px);
  border-radius: 6px;
  opacity: .7;
}

/* ===================== feeding submenu ===================== */

#feed-prompt {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10, 10, 14, .55);
  z-index: 40;
}
#feed-prompt[hidden] { display: none; }
#feed-prompt .opt {
  appearance: none;
  cursor: pointer;
  border: 3px dashed #ffe9b8;
  background: #a53a12;
  color: #ffe9b8;
  font-family: inherit;
  font-size: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  text-align: center;
  line-height: 1.3;
}
#feed-prompt .opt i {
  display: block;
  margin: 0 auto .5rem;
  width: 34px; height: 24px;
  border-radius: 6px;
  background: repeating-linear-gradient(0deg, #ffe9b8 0 3px, transparent 3px 6px);
}
#feed-prompt .opt.opt-snack i { background: repeating-linear-gradient(90deg, #ffb0c8 0 5px, #ffe9b8 5px 7px); }
#feed-prompt .opt.on { outline: 3px solid #ffdc59; background: #c74a16; }
#feed-prompt small { font-size: .68rem; opacity: .85; }
#feed-prompt .feed-close {
  position: absolute; top: 12px; right: 16px;
  appearance: none; border: 0;
  background: transparent; color: #ffe9b8;
  font-size: 2rem; cursor: pointer;
}

/* ===================== desk furniture ===================== */

.sticker-q {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #274bff;
  color: #f4ecd6;
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-style: italic;
  transform: rotate(-6deg);
  box-shadow: 3px 4px 0 #ff2f8e, 0 8px 16px rgba(0,0,0,.4);
  z-index: 30;
}
.sticker-q:hover { transform: rotate(3deg) scale(1.05); }

#save-badge {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: #ffd2a8;
  background: #00000066;
  padding: .3rem .5rem;
  border-left: 3px solid #ff2f8e;
  z-index: 25;
}

/* keyboard hint footer */
.kbd-hint { opacity: 0; }
@media (hover:hover) and (pointer:fine) {
  .kbd-hint { opacity: .5; }
}

/* ===================== ZINE MANUAL (design territory) ===================== */

#manual {
  position: fixed; inset: 0;
  background:
    radial-gradient(140% 100% at 50% 0%, #202127 0%, #0d0d10 90%);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
  overflow-y: auto;
}
#manual[hidden] { display: none; }

.manual-inner {
  position: relative;
  width: min(760px, 94vw);
  margin: 4vh auto;
  /* warm copy paper */
  --paper:#f4ecd6; --pink:#ff2f8e; --blue:#274bff;
  perspective: 1200px;
}

.zine-page {
  background:
    radial-gradient(circle at 1px 1px, rgba(39,75,255,.14) 1px, transparent 1.6px) 0 0/9px 9px,
    radial-gradient(circle at 8px 8px, rgba(255,47,142,.12) 1px, transparent 1.6px) 4px 4px/11px 11px,
    linear-gradient(174deg, #fbf6e8 0%, var(--paper) 55%, #ece1c2 100%);
  color: #211d17;
  border-radius: 4px 10px 6px 8px;
  padding: clamp(1rem, 3.4vw, 2rem);
  box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(148, 124, 60, .12);
  position: relative;
  overflow: hidden;
}
.zine-page[hidden] { display: none; }

/* torn edges via clip-path nicks */
.zine-page::before {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(var(--blue), var(--blue)) left top / 100% 3px no-repeat;
  mix-blend-mode: multiply;
  opacity:.15;
}

.cutout {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(2rem, 8.4vw, 3.4rem);
  line-height: .92;
  transform: rotate(-2.5deg);
  display: inline-block;
  margin: 0;
  color: var(--paper);
  background:
    conic-gradient(from 20deg at 30% 30%, var(--pink) 0 90deg, var(--blue) 90deg 180deg, var(--pink) 180deg 270deg, var(--blue) 270deg 360deg);
  padding: .3em .45em;
  box-shadow: 4px 5px 0 rgba(33,29,23,.85);
  mix-blend-mode: normal;
}

.stamp {
  position:absolute; top: 14px; right: 16px;
  border: 3px double var(--blue);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: .18em;
  padding: .2em .5em;
  transform: rotate(7deg);
  font-size: .7rem;
  background: rgba(244,236,214,.85);
}

.issue {
  display:inline-block;
  margin-top:.7rem;
  border-bottom: 3px solid var(--pink);
  font-weight:700;
  letter-spacing:.16em;
  font-size:.78rem;
}

.collage-photo {
  float:right;
  width:min(240px,44%);
  margin: .4rem 0 .6rem 1rem;
  padding:.5rem .5rem 1.6rem;
  background:#fff;
  border:1px solid #d8cba4;
  transform: rotate(3deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.taped-snapshot::before, .taped-snapshot::after{
  content:"";
  position:absolute;
  width:86px;height:24px;
  background:rgba(255,232,166,.75);
  border-left:1px dashed rgba(148,124,60,.5);
  border-right:1px dashed rgba(148,124,60,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.taped-snapshot::before { top:-10px; left:-18px; transform:rotate(-32deg);}
.taped-snapshot::after  { bottom:-8px; right:-16px; transform:rotate(-26deg);}
.collage-photo img {
  width: 100%;
  image-rendering: pixelated;
  display:block;
  filter: contrast(1.05) saturate(.92);
}
.collage-photo figcaption{
  font-size:.62rem;letter-spacing:.08em;color:#6b5d3d;margin-top:.35rem;text-align:center;
}

.basics { clear:right; margin:.4rem 0 0; padding-left:1.2rem; }
.basics li { margin:.42rem 0; font-size:clamp(.82rem,2.6vw,.95rem); }
.basics b { background:linear-gradient(transparent 55%, rgba(255,47,142,.4) 55%); }

.riso-red-head {
  font-family:"Arial Black",Arial,sans-serif;
  font-size:clamp(1.4rem,5.6vw,2rem);
  transform:rotate(-1.4deg);
  display:inline-block;
  color:var(--pink);
  border-bottom:4px solid var(--blue);
  padding-bottom:.12em;
}
.riso-blue-head {
  font-family:"Arial Black",Arial,sans-serif;
  font-size:clamp(1.25rem,5vw,1.8rem);
  transform:rotate(1deg);
  display:inline-block;
  color:var(--blue);
  background:repeating-linear-gradient(0deg,rgba(255,47,142,.22) 0 2px,transparent 2px 6px);
  padding:.1em .2em;
}

.icon-map { list-style:none; margin:.8rem 0 0; padding:0; }
.icon-map li {
  margin:.44rem 0;
  padding-left:5.6rem;
  position:relative;
  font-size:clamp(.78rem,2.5vw,.9rem);
}
.icon-map li b {
  position:absolute; left:0; top:.02em;
  font-family:"Arial Black",Arial,sans-serif;
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--paper);
  background:var(--blue);
  padding:.22em .5em;
  border-radius:3px;
  transform:rotate(-1.2deg);
}
.icon-map li:nth-child(even) b { background:var(--pink); transform:rotate(1deg); }

.scrawl {
  margin-top:1rem;
  font-style:italic;
  color:#4c4234;
  border-top:2px dashed #b7a97e;
  padding-top:.6rem;
}

.spec {
  width:100%;
  border-collapse:collapse;
  margin:.7rem 0 .9rem;
  font-size:clamp(.76rem,2.4vw,.88rem);
}
.spec th, .spec td { border:2px solid #211d1722; padding:.28em .5em; text-align:left;}
.spec th { background:rgba(39,75,255,.14); }
.spec tr:nth-child(even) td { background:rgba(255,47,142,.07); }

.fineprint { list-style:none;padding:0;margin:.2rem 0; }
.fineprint li { font-size:clamp(.76rem,2.4vw,.86rem);margin:.34rem 0;position:relative;padding-left:1.1em;}
.fineprint li::before { content:"×"; position:absolute;left:0;color:var(--pink);font-weight:700;}
.chain { font-weight:700; letter-spacing:.02em; }

.credits { margin-top:1rem;font-size:.68rem;letter-spacing:.14em;color:#6b5d3d;text-transform:uppercase;}

.folia {
  clear:both;
  margin-top:1.2rem;
  font-size:.66rem;
  letter-spacing:.2em;
  color:#8a7a55;
  display:flex;justify-content:space-between;
}

.flip-arrow {
  position:absolute;
  bottom:-6px;
  appearance:none;border:0;cursor:pointer;
  width:54px;height:44px;
  background:var(--blue);color:#fff;
  font-size:1.3rem;
  box-shadow:3px 3px 0 var(--pink);
  z-index:5;
}
.flip-arrow.left { left:calc(50% - 70px); transform:rotate(-3deg);}
.flip-arrow.right{ right:calc(50% - 70px); transform:rotate(2deg);}

#manual-close {
  position:absolute;top:-14px;right:-8px;z-index:7;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pink);color:#fff;font-size:1.5rem;line-height:1;
  box-shadow:3px 3px 0 var(--blue);
}

/* STOP-MOTION page flip: discrete frames, zero interpolation */
@keyframes smflip-next-0 { from {transform: rotateY(0)} to {transform: rotateY(0)} }
.zine-page.flipping { will-change: transform; }
.zine-page.f1 { transform: rotateY(-14deg) skewY(.6deg) scale(.985); }
.zine-page.f2 { transform: rotateY(-34deg) skewY(1.6deg) scale(.96); }
.zine-page.f3 { transform: rotateY(-70deg) skewY(2.4deg) scale(.93); }
.zine-page.f4 { transform: rotateY(-108deg) skewY(1.2deg) scale(.96); }
.zine-page.f5 { transform: rotateY(-145deg) skewY(-.8deg) scale(.99); }
/* mirrored direction for going back */
.zine-page.backflip.f1 { transform: rotateY(14deg) skewY(-.6deg); }
.zine-page.backflip.f2 { transform: rotateY(34deg) skewY(-1.6deg); }
.zine-page.backflip.f3 { transform: rotateY(70deg) skewY(-2.4deg); }
.zine-page.backflip.f4 { transform: rotateY(108deg) skewY(-1.2deg); }
.zine-page.backflip.f5 { transform: rotateY(145deg) skewY(.8deg); }
.zine-page { transform-origin: left center; }
.zine-page.backflip { transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  .zine-page.f1,.zine-page.f2,.zine-page.f3,.zine-page.f4,.zine-page.f5,
  .zine-page.backflip.f1,.zine-page.backflip.f2,.zine-page.backflip.f3,
  .zine-page.backflip.f4,.zine-page.backflip.f5 { transform:none; }
  #attention-lamp.on { animation: none; }
}

/* ===================== small screens ===================== */

@media (max-width: 420px) {
  #device { padding: .9rem .55rem .95rem; border-radius: 44% 44% 42% 42% / 30% 30% 24% 24%; }
  .icon-pad { min-width: 48px; }
  .collage-photo { float:none; width: 100%; margin: .6rem 0; }
  .manual-inner { margin: 3vh auto; }
}

:focus-visible {
  outline: 3px solid #ffdc59;
  outline-offset: 2px;
}