:root{
  --ink:#2b2438; --paper:#fbf4e4; --gold:#f0c962; --gold-d:#8a6a22;
  --pink:#ef5f8d; --pink-l:#ff8fb1; --plate:#1d2b3a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;
  background:#0e0c15;
  background-image:
    radial-gradient(circle at 50% 22%, rgba(63,169,201,.10), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 8px);overflow:hidden;
  font-family:"VT323",ui-monospace,monospace;color:var(--paper);
  -webkit-font-smoothing:none; -webkit-tap-highlight-color:transparent}

#stage{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
#game{
  image-rendering:pixelated; image-rendering:crisp-edges;
  display:block; background:#0e0c15;
  width:var(--w,100%); height:var(--h,auto);
}

/* ---------------------------------------------------------- overlays */
.overlay{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(14,12,21,.82);backdrop-filter:blur(2px);z-index:40;padding:16px}
.hidden{display:none !important}

.title-inner{text-align:center;max-width:min(92vw,640px)}
.kicker{font-family:"Press Start 2P",monospace;font-size:clamp(7px,1.5vw,11px);
  letter-spacing:.14em;color:var(--gold);opacity:.9;margin-bottom:22px}
h1{font-family:"Press Start 2P",monospace;font-size:clamp(20px,5.6vw,44px);
  line-height:1.65;color:var(--paper);
  text-shadow:3px 3px 0 var(--gold-d), 6px 6px 0 rgba(0,0,0,.45)}
.sub{font-size:clamp(19px,3.6vw,28px);color:var(--pink-l);margin-top:20px;letter-spacing:.04em}
.hint{font-size:clamp(15px,2.6vw,20px);opacity:.62;margin-top:22px}
.hint b{color:var(--gold)}

.btn{font-family:"Press Start 2P",monospace;font-size:clamp(10px,2vw,14px);
  margin-top:30px;padding:15px 26px;color:var(--ink);background:var(--gold);
  border:0;box-shadow:0 5px 0 var(--gold-d),0 5px 0 4px var(--ink);
  cursor:pointer;letter-spacing:.06em;transition:transform .08s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-d),0 1px 0 4px var(--ink)}
.btn.small{font-size:clamp(9px,1.7vw,11px);padding:12px 20px;margin-top:20px}

/* ---------------------------------------------------------- dialogue */
#dlg{position:absolute;left:0;right:0;bottom:0;z-index:35;
  padding:0 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.dlg-box{position:relative;width:min(94vw,720px);pointer-events:auto;
  background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);box-shadow:0 0 0 4px var(--paper),0 0 0 8px var(--ink),0 10px 26px rgba(0,0,0,.5);
  padding:20px 22px 24px;cursor:pointer}
.dlg-name{position:absolute;top:-17px;left:16px;background:var(--pink);color:#fff;
  font-family:"Press Start 2P",monospace;font-size:10px;padding:7px 11px;
  border:3px solid var(--ink)}
.dlg-text{font-size:clamp(21px,3.4vw,28px);line-height:1.28;min-height:2.6em;letter-spacing:.01em}
.dlg-next{position:absolute;right:14px;bottom:6px;color:var(--pink);
  font-size:20px;animation:bob .7s infinite alternate ease-in-out;opacity:0}
.dlg-next.on{opacity:1}
@keyframes bob{to{transform:translateY(5px)}}

.choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.choice{font-family:"Press Start 2P",monospace;font-size:clamp(10px,1.9vw,13px);
  padding:14px 20px;background:var(--pink);color:#fff;border:0;
  box-shadow:0 5px 0 #a8365f,0 5px 0 4px var(--ink);cursor:pointer}
.choice:active{transform:translateY(4px);box-shadow:0 1px 0 #a8365f,0 1px 0 4px var(--ink)}

/* ---------------------------------------------------------- modal */
.modal-inner{text-align:center;max-width:min(94vw,560px);width:100%}
.pframe{padding:14px;background:linear-gradient(160deg,#f0c962,#d9a83c 40%,#8a6a22);
  box-shadow:0 0 0 4px #3a2c16,0 14px 34px rgba(0,0,0,.6);display:inline-block;max-width:100%}
.pframe img{display:block;width:100%;max-width:520px;height:auto;
  border:4px solid #3a2c16;image-rendering:auto}
.plaque{margin:20px auto 0;max-width:440px;background:var(--plate);
  border:3px solid #0d1620;box-shadow:inset 0 0 0 2px #3d5670;padding:14px 18px}
.plaque-place{font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.8vw,12px);
  color:var(--gold);line-height:1.6}
.plaque-date{font-size:clamp(17px,2.6vw,21px);color:#9fc0d8;margin-top:8px;letter-spacing:.08em}
.plaque-note{font-size:clamp(18px,2.8vw,23px);color:var(--paper);margin-top:10px;line-height:1.25}

/* ---------------------------------------------------------- letter */
.letter-scroll{width:min(94vw,640px);max-height:88vh;overflow-y:auto;text-align:center;
  padding:4px;scrollbar-width:thin}
.letter-paper{background:#fdf8ea;color:#3a3348;padding:clamp(22px,4.4vw,40px);
  border:3px solid #d8c9a8;box-shadow:0 14px 34px rgba(0,0,0,.6);text-align:left;
  background-image:repeating-linear-gradient(180deg,transparent 0 30px,rgba(120,110,150,.11) 30px 31px)}
.lyric{font-family:"Press Start 2P",monospace;font-size:clamp(8px,1.7vw,11px);
  color:var(--pink);text-align:center;line-height:2;margin-bottom:26px}
#letterBody p{font-size:clamp(19px,2.9vw,24px);line-height:1.38;margin-bottom:16px}
#letterBody p.sign{text-align:right;color:var(--pink);margin-top:26px}
.counter{margin-top:26px;padding-top:18px;border-top:2px dashed #d8c9a8;
  font-family:"Press Start 2P",monospace;font-size:clamp(8px,1.6vw,10px);
  color:#8a7fa8;text-align:center;line-height:2.1}
.counter b{color:var(--pink)}

/* ---------------------------------------------------------- hud + touch */
#hud{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;
  align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) 14px 0;pointer-events:none}
#place{font-family:"Press Start 2P",monospace;font-size:clamp(7px,1.5vw,10px);
  color:var(--paper);text-shadow:2px 2px 0 rgba(0,0,0,.7);opacity:0;transition:opacity .5s;line-height:1.8}
#place.on{opacity:.92}
.icon{pointer-events:auto;width:38px;height:38px;font-size:19px;cursor:pointer;
  background:rgba(20,16,30,.6);color:var(--paper);border:2px solid rgba(251,244,228,.35);
  line-height:1}
.icon.off{opacity:.4}

#touch{position:absolute;inset:auto 0 0 0;z-index:36;display:flex;justify-content:space-between;
  padding:0 18px calc(20px + env(safe-area-inset-bottom));pointer-events:none}
#touch>*{pointer-events:auto}
.dpad,.act{font-family:"Press Start 2P",monospace;border:3px solid var(--ink);
  background:rgba(251,244,228,.9);color:var(--ink);width:66px;height:66px;font-size:17px;
  border-radius:50%;box-shadow:0 5px 0 rgba(0,0,0,.45);cursor:pointer;touch-action:none}
.dpad:active,.act:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
#tLeft{margin-right:12px}
.act{background:var(--gold);width:74px;height:74px;font-size:22px}

#fade{position:absolute;inset:0;background:#0e0c15;opacity:0;pointer-events:none;
  transition:opacity .34s linear;z-index:38}
#fade.on{opacity:1}
.choice.sel{background:var(--gold);color:var(--ink);
  box-shadow:0 5px 0 var(--gold-d),0 5px 0 4px var(--ink);transform:translateY(-2px)}


/* ---------------------------------------------------------- portrait phones */
@media (orientation:portrait){
  #stage{align-content:start}
  #game{margin-top:calc(env(safe-area-inset-top) + 46px)}
  #dlg{top:calc(var(--canvasTop,50%) + var(--canvasH,0px) + 14px);bottom:auto;justify-content:flex-start}
  .dlg-text{font-size:clamp(20px,4.6vw,26px);min-height:3.2em}
  #touch{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .dpad,.act{width:74px;height:74px}
  .act{width:82px;height:82px}
}
#rotate{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(env(safe-area-inset-top) + 10px);z-index:31;
  display:none;align-items:center;gap:8px;padding:8px 13px;
  background:rgba(20,16,30,.72);border:2px solid rgba(240,201,98,.5);
  font-size:17px;color:var(--gold);letter-spacing:.03em;white-space:nowrap}
@media (orientation:portrait){ #rotate.show{display:flex} }
#rotate span{display:inline-block;animation:tilt 1.8s infinite ease-in-out;font-size:19px}
@keyframes tilt{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(90deg)}}

/* ---------------------------------------------------------- a11y */
.btn:focus-visible,.choice:focus-visible,.icon:focus-visible,.dpad:focus-visible,.act:focus-visible{
  outline:3px solid var(--pink-l);outline-offset:3px}
.dlg-box:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .dlg-next{animation:none;transform:none}
  #rotate span{animation:none}
}