@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* 3 colors max (+ black/white): AMBER #FFB000 · TEAL #00C2A8 · CORAL #FF4D2E · INK #111 · PAPER #FFFDF5 */
:root{
  --amber:#FFB000; --teal:#00C2A8; --coral:#FF4D2E;
  --ink:#111111; --paper:#FFFDF5; --white:#ffffff;
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --bd:3px solid var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Mono',ui-monospace,monospace;font-size:15px;line-height:1.5;
  background-image:radial-gradient(var(--ink) 1px, transparent 1.4px);background-size:22px 22px;}
::selection{background:var(--ink);color:var(--paper)}

.tape{background:var(--ink);color:var(--paper);font-weight:700;font-size:12px;letter-spacing:.12em;
  padding:7px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.mast{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;max-width:1060px;margin:22px auto 0;padding:0 16px}
.lantern{font-size:44px;line-height:1;background:var(--amber);border:var(--bd);box-shadow:var(--sh);
  width:84px;height:84px;cursor:pointer;transition:transform .12s}
.lantern:hover{transform:rotate(-8deg) scale(1.05)}
.lantern:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.kicker{display:inline-block;background:var(--ink);color:var(--paper);font-size:11px;letter-spacing:.14em;padding:3px 10px;margin:0 0 8px;transform:rotate(-1deg)}
h1{font-family:'Archivo Black',sans-serif;font-size:clamp(38px,8vw,72px);line-height:.92;margin:0;letter-spacing:-.01em}
h1 .outline{color:var(--paper);-webkit-text-stroke:2.5px var(--ink);text-stroke:2.5px var(--ink);paint-order:stroke fill}
.sub{max-width:46ch;background:var(--white);border:var(--bd);box-shadow:var(--sh-sm);padding:8px 12px;margin:12px 0 0;font-weight:700}
.clock-chip{background:var(--teal);border:var(--bd);box-shadow:var(--sh);padding:10px 14px;grid-column:1/-1;transform:rotate(.6deg)}
.big-clock{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,5vw,40px);letter-spacing:.04em}
.loop-label{font-size:12px;font-weight:700;letter-spacing:.1em}
.loopbar{position:relative;height:16px;background:var(--paper);border:var(--bd);margin-top:6px;overflow:hidden}
.loopfill{position:absolute;inset:0;width:0%;background:repeating-linear-gradient(90deg,var(--amber) 0 14px,var(--coral) 14px 28px)}
.looptick{position:absolute;top:-2px;bottom:-2px;width:4px;background:var(--ink)}

#app{max-width:1060px;margin:0 auto;padding:18px 16px 60px}
.card{background:var(--white);border:var(--bd);box-shadow:8px 8px 0 var(--ink);padding:16px;margin:22px 0;transform:rotate(-.3deg)}
.card:nth-of-type(even){transform:rotate(.35deg)}
.card.dark{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--coral)}
.card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.card-head h2{font-family:'Archivo Black',sans-serif;font-size:clamp(18px,3.6vw,26px);margin:0;flex:1;min-width:180px}
.tag{background:var(--coral);border:var(--bd);box-shadow:var(--sh-sm);font-weight:700;padding:2px 10px;transform:rotate(-3deg)}
.tag.inv{background:var(--amber)}
.sticker{background:var(--amber);border:3px solid var(--ink);border-radius:999px;padding:2px 12px;font-weight:700;font-size:12px;transform:rotate(2deg);box-shadow:3px 3px 0 var(--ink)}
.sticker.alt{background:var(--teal)}
.hint{margin:4px 0 12px}.hint.small{font-size:12.5px}
.dark .hint.light,.msg.light{color:var(--paper)}

/* eggs */
.eggs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.egg{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:10px;text-align:center;cursor:pointer;position:relative;transition:transform .12s}
.egg:hover{transform:translateY(-2px)}
.egg.sel{outline:4px solid var(--coral);transform:rotate(-1deg)}
.egg .face{font-size:52px;line-height:1.1;filter:drop-shadow(3px 3px 0 var(--ink))}
.egg.winding .face{animation:shake .18s infinite}
@keyframes shake{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
.egg .ename{font-weight:700;font-size:13px;margin-top:4px}
.egg .ticks{font-size:12px;font-weight:700}
.egg .bar{height:12px;border:2.5px solid var(--ink);background:var(--white);margin-top:6px}
.egg .bar i{display:block;height:100%;background:var(--teal);width:0%}
.egg.ready .bar i{background:var(--coral)}
.egg .temp{font-size:11px;opacity:.75}
.windrow{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.btn{font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.02em;background:var(--amber);color:var(--ink);
  border:var(--bd);box-shadow:var(--sh-sm);padding:12px 18px;cursor:pointer;transition:transform .08s, box-shadow .08s;user-select:none;touch-action:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper);font-family:'Space Mono',monospace;font-weight:700;font-size:13px}
.btn.small{font-size:12px;padding:8px 12px;font-family:'Space Mono',monospace;font-weight:700}
.btn.mint{background:var(--coral);color:var(--white);-webkit-text-stroke:.4px var(--ink)}
.btn.wind{background:var(--teal)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.meter{flex:1;min-width:120px;height:22px;border:var(--bd);background:var(--paper);position:relative}
.windfill{position:absolute;inset:0;width:0%;background:repeating-linear-gradient(-45deg,var(--coral) 0 12px,var(--paper) 12px 24px)}
.msg{min-height:1.6em;font-weight:700;margin:10px 0 0}
.msg.hot{background:var(--ink);color:var(--amber);display:inline-block;padding:2px 10px;transform:rotate(-1deg)}

/* habitat */
.habwrap{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
#habitat{width:100%;height:auto;display:block;background:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);image-rendering:auto}
.habside{display:flex;flex-direction:column;gap:8px}
.nowname{font-family:'Archivo Black',sans-serif;font-size:21px;background:var(--amber);border:var(--bd);box-shadow:var(--sh-sm);padding:6px 10px;display:inline-block;transform:rotate(-1deg)}
.nowmeta{font-size:13px;background:var(--paper);border:2.5px solid var(--ink);padding:6px 10px}
.habbtns{display:flex;gap:8px;flex-wrap:wrap}

/* menagerie */
.breedrow{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.menagerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.beast{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:8px;text-align:center;cursor:pointer;position:relative;transition:transform .1s}
.beast:hover{transform:rotate(-1deg) scale(1.02)}
.beast canvas{width:100%;height:auto;display:block;background:var(--ink);border:2.5px solid var(--ink)}
.beast .bname{font-weight:700;font-size:12.5px;margin:6px 0 0;word-break:break-word}
.beast .bmeta{font-size:11px;opacity:.8}
.beast.picked{outline:4px solid var(--teal)}
.beast.picked::after{content:'★ PARENT';position:absolute;top:-12px;right:-8px;background:var(--teal);border:2.5px solid var(--ink);font-size:10px;font-weight:700;padding:1px 8px;transform:rotate(4deg)}
.beast.evo{outline:4px solid var(--amber)}
.minih{font-family:'Archivo Black',sans-serif;margin:18px 0 8px;font-size:16px}
.echoes{display:flex;gap:8px;overflow-x:auto;padding:10px 4px;border:var(--bd);background:var(--paper)}
.echo{flex:0 0 auto;width:86px;text-align:center;border:2.5px solid var(--ink);background:var(--white);padding:4px;box-shadow:3px 3px 0 var(--ink)}
.echo canvas{width:100%;height:auto;background:var(--ink);display:block}
.echo div{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* midnight */
.midrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.countbox{background:var(--paper);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);padding:8px 16px;transform:rotate(-1deg)}
.countlabel{font-size:11px;font-weight:700;letter-spacing:.14em}
.midcount{font-family:'Archivo Black',sans-serif;font-size:30px}
.timeswitch{font-size:13px;font-weight:700;display:flex;gap:8px;align-items:center;cursor:pointer}
.timeswitch input{width:22px;height:22px;accent-color:var(--coral)}
.mints{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:14px}
.mintcard{background:var(--amber);color:var(--ink);border:3px solid var(--paper);box-shadow:5px 5px 0 var(--coral);padding:10px;text-align:center;transform:rotate(-1deg)}
.mintcard canvas{width:100%;background:var(--ink);border:2.5px solid var(--ink);display:block}
.mintcard .mname{font-family:'Archivo Black',sans-serif;font-size:14px;margin:6px 0 0}
.mintcard .mdate{font-size:11px;font-weight:700}

.foot{margin-top:26px;font-size:12.5px}
.foot .dim{opacity:.7}
.linkbtn{background:none;border:none;text-decoration:underline;cursor:pointer;font:inherit;color:inherit}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) rotate(-1deg);background:var(--ink);color:var(--paper);
  border:3px solid var(--paper);box-shadow:5px 5px 0 var(--coral);padding:10px 18px;font-weight:700;max-width:min(92vw,560px);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;text-align:center}
.toast.show{opacity:1}
.keeper-veil{position:fixed;inset:0;background:rgba(17,17,17,.82);display:grid;place-items:center;z-index:60;padding:16px}
.keeper-veil[hidden]{display:none}
.keeper-card{background:var(--amber);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--coral);padding:26px;text-align:center;max-width:420px;transform:rotate(-1.5deg)}
.keeper-big{font-size:64px;animation:shake .4s infinite}

@media (max-width:760px){
  .habwrap{grid-template-columns:1fr}
  .eggs{grid-template-columns:1fr 1fr}
  .mast{grid-template-columns:auto 1fr}
}
@media (max-width:420px){
  .eggs{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .windrow .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}