:root{
  --paper:#fbf7ef;
  --paper-2:#fffdfa;
  --ink:#171313;
  --comic-yellow:#ffc727;
  --green:#9ccf57;
  --red:#ef3c31;
  --blue:#79d4ef;
}
*{box-sizing:border-box}
html,body{
  margin:0;min-height:100%;
  background:#1b1717;
  color:var(--ink);
  font-family:"Trebuchet MS",Arial,sans-serif;
  overscroll-behavior:none;
}
body{display:grid;place-items:center}
#app{
  position:relative;
  width:min(100vw,1100px);
  height:min(100vh,720px);
  min-height:540px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 0 55px #0009;
}
#app::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.10;
  background:
    radial-gradient(circle at 15% 20%, #000 0 1px, transparent 1px 100%),
    radial-gradient(circle at 72% 64%, #000 0 1px, transparent 1px 100%),
    radial-gradient(circle at 39% 78%, #000 0 1px, transparent 1px 100%),
    linear-gradient(transparent,rgba(0,0,0,.02));
  background-size: 21px 21px, 27px 27px, 17px 17px, 100% 100%;
  mix-blend-mode:multiply;
}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}
#titleScreen{background:#fff}
.cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
}
.title-shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,#fff0 56%,#fff8 83%,#fff 100%);
  pointer-events:none;
}
.start-panel{
  position:absolute;left:50%;bottom:3.7%;transform:translateX(-50%);
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;
}
button{
  border:3px solid var(--ink);border-radius:14px;background:#fff;
  color:var(--ink);font:700 18px/1 "Trebuchet MS",Arial,sans-serif;
  padding:14px 22px;cursor:pointer;box-shadow:0 5px 0 var(--ink);
  touch-action:manipulation;
}
button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
button.primary{background:var(--comic-yellow)}
button.round{width:48px;height:48px;padding:0;border-radius:50%}
.small-note{
  position:absolute;right:14px;bottom:12px;font-size:12px;background:#fffce6e8;padding:6px 9px;border-radius:8px;border:2px solid #171313;
}

#comicScreen{
  background:#f7f4ed;
  display:none;
  place-items:center;
}
#comicScreen.active{display:grid}
.comic-stage{width:100%;height:100%;position:relative;overflow:hidden;background:white}
.comic-panel{
  position:absolute;inset:3.2%;
  background:white;border:5px solid var(--ink);
  box-shadow:0 8px 0 #0002;overflow:hidden;border-radius:4px;
  opacity:0;transform:scale(.92) rotate(-.4deg);
  transition:opacity .5s ease, transform .75s cubic-bezier(.2,.8,.2,1);
}
.comic-panel.visible{opacity:1;transform:scale(1) rotate(0)}
.comic-panel img{width:100%;height:100%;object-fit:contain;background:white}
.comic-caption{
  position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);
  background:var(--comic-yellow);border:3px solid var(--ink);padding:8px 15px;
  font-weight:900;text-transform:uppercase;letter-spacing:.03em;text-align:center;max-width:90%;
  box-shadow:0 4px 0 #171313;
}
.comic-progress{
  position:absolute;top:12px;right:12px;padding:5px 9px;border:2px solid #171313;background:#fff;font-weight:bold;font-size:13px;
}
.skip{
  position:absolute;top:12px;left:12px;z-index:20;font-size:13px;padding:8px 11px;box-shadow:0 3px 0 #171313
}

#gameScreen{background:#7cd4ef}
#game{width:100%;height:100%;display:block;touch-action:none}
.hud{
  position:absolute;top:12px;left:12px;right:12px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none;
}
.hud-card{
  background:#fffdfaee;border:3px solid var(--ink);border-radius:24px;padding:8px 14px;
  font-weight:900;box-shadow:0 4px 0 var(--ink);
}
.player-card{display:flex;gap:12px;align-items:center}
.mini-avatar{
  width:46px;height:46px;border-radius:14px;border:3px solid var(--ink);
  background:
    radial-gradient(circle at 27px 12px,#171313 0 6px,#fff 6px 10px,transparent 11px),
    radial-gradient(circle at 15px 12px,#171313 0 6px,#fff 6px 10px,transparent 11px),
    radial-gradient(circle at 11px 27px,#ff9db1 0 5px,transparent 6px),
    radial-gradient(circle at 35px 27px,#ff9db1 0 5px,transparent 6px),
    radial-gradient(ellipse at center,#ffe96c 0 9px,transparent 10px),
    #15958a;
  position:relative;
}
.mini-avatar::before,.mini-avatar::after{
  content:"";position:absolute;top:-6px;width:12px;height:10px;border-top:3px solid var(--ink);border-radius:50%;
}
.mini-avatar::before{left:6px;transform:rotate(-12deg)}
.mini-avatar::after{right:6px;transform:rotate(12deg)}
.hud-label{font-size:18px;line-height:1}
#hearts{font-size:28px;letter-spacing:3px;color:#ef3c31;margin-top:2px}
.star-card{font-size:28px;line-height:1.1}

.audio-btn{position:absolute;top:12px;right:12px;z-index:15}
.mobile-controls{
  position:absolute;left:0;right:0;bottom:12px;display:none;justify-content:space-between;padding:0 18px;pointer-events:none;
}
.mobile-controls .cluster{display:flex;gap:12px}
.touch{
  pointer-events:auto;width:72px;height:72px;border-radius:50%;
  background:#c4e036e0;border:4px solid #4c6712;color:#394608;font-size:27px;font-weight:900;
  box-shadow:0 5px 0 #4c6712;user-select:none;-webkit-user-select:none;
}
.touch.jump{width:88px;height:88px;background:#bfd63be8;font-size:16px}
.level-bubble{
  position:absolute;top:68px;left:50%;transform:translateX(-50%) rotate(-1deg);
  background:#fffdf8;padding:18px 28px;border:4px solid var(--ink);border-radius:40px;
  box-shadow:0 6px 0 var(--ink);font-size:clamp(18px,2.8vw,34px);font-weight:900;text-align:center;
  line-height:1.2;pointer-events:none;
}
.level-bubble::after{
  content:"";position:absolute;left:42px;bottom:-18px;width:24px;height:24px;
  background:#fffdf8;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);
  transform:rotate(35deg) skew(-5deg);
}
.game-message{
  position:absolute;left:50%;top:21%;transform:translate(-50%,-50%);
  background:#fff;border:4px solid var(--ink);border-radius:18px;padding:13px 18px;
  font-size:clamp(16px,3vw,27px);font-weight:900;text-align:center;
  box-shadow:0 6px 0 var(--ink);opacity:0;pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.game-message.show{opacity:1;transform:translate(-50%,-57%)}

#loveScreen{
  background:radial-gradient(circle at center,#fff 0,#fff8f8 58%,#ffdfe3 100%);
}
.love-wrap{height:100%;display:grid;place-items:center;align-content:center;gap:8px;padding:24px}
.love-art{
  max-width:min(670px,88vw);max-height:67vh;border:5px solid var(--ink);background:white;
  box-shadow:0 9px 0 #17131322;object-fit:contain;
}
.big-heart{
  position:absolute;left:50%;top:17%;font-size:76px;transform:translate(-50%,-50%) scale(.2);
  opacity:0;animation:heartPop 1.4s ease .4s forwards;
}
@keyframes heartPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-15deg)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(7deg)}
  70%{transform:translate(-50%,-50%) scale(.95)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.love-title{font-size:clamp(24px,5vw,48px);font-weight:900;margin:0;text-align:center}
.next-btn{margin-top:8px}

#yearsScreen{background:#121015;color:white}
.years-inner{height:100%;display:grid;place-items:center;text-align:center;padding:30px}
.years-kicker{font-size:clamp(17px,2.5vw,25px);opacity:.7}
.years-title{font-size:clamp(34px,7vw,82px);font-weight:900;margin:.15em 0}
.years-sub{font-size:clamp(16px,2.3vw,24px);color:#ffc727}
.years-actions{margin-top:24px}

@media (pointer:coarse),(max-width:800px){
  #app{width:100vw;height:100dvh;min-height:0}
  .mobile-controls{display:flex}
  .small-note{display:none}
  button{font-size:16px}
  .level-bubble{top:80px;padding:14px 22px}
}