/* ===================== LOVE QUEST - styles ===================== */

:root{
  --ink:        #1a1030;
  --ink-2:      #2a1a4a;
  --ink-3:      #3b2566;
  --line:       #0d0720;
  --pink:       #ff5f9e;
  --pink-dark:  #c2246a;
  --cream:      #fff3e0;
  --gold:       #ffce4f;
  --green:      #63d471;
  --red:        #ff4d5e;
  --font:       'Press Start 2P', 'Segoe UI Emoji', 'Apple Color Emoji', 'Courier New', monospace;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:
    radial-gradient(circle at 20% 0%,  #3a1d5c 0%, transparent 55%),
    radial-gradient(circle at 85% 100%,#5c1d47 0%, transparent 55%),
    #140b26;
  color:var(--cream);
  font-family:var(--font);
  font-size:12px;
  line-height:1.8;
  -webkit-font-smoothing:none;
}

button{
  font-family:var(--font);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.hidden{ display:none !important; }

/* ===================== LAYOUT ===================== */

#game{
  max-width:1500px;
  margin:0 auto;
  padding:14px;
  display:grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(330px, 1fr);
  grid-template-areas:
    "hud   hud"
    "map   panel";
  gap:14px;
  align-items:start;
}

#hud{ grid-area:hud; }
#mapWrap{ grid-area:map; }
#panel{ grid-area:panel; }

@media (max-width: 1000px){
  #game{
    grid-template-columns:1fr;
    grid-template-areas: "hud" "map" "panel";
  }
}

/* ===================== PIXEL FRAME ===================== */

.frame{
  background:var(--ink-2);
  border:4px solid var(--line);
  box-shadow: inset 0 0 0 4px var(--ink-3), 0 6px 0 0 rgba(0,0,0,.45);
}

/* ===================== HUD ===================== */

#hud{
  background:var(--ink-2);
  border:4px solid var(--line);
  box-shadow: inset 0 0 0 4px var(--ink-3), 0 6px 0 0 rgba(0,0,0,.45);
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

.hud-title span{ color:var(--pink); font-size:16px; letter-spacing:1px; text-shadow:2px 2px 0 var(--line); }
.hud-title small{ display:block; color:#b9a6d8; font-size:8px; margin-top:6px; letter-spacing:1px; }

.hud-stats{ display:flex; gap:18px; flex-wrap:wrap; }
.stat{ text-align:center; min-width:62px; }
.stat-label{ display:block; font-size:7px; color:#9a86bd; letter-spacing:1px; }
.stat-value{ display:block; font-size:13px; margin-top:6px; color:var(--cream); }
#statHearts{ color:var(--red); letter-spacing:2px; }
#statStars{ color:var(--gold); letter-spacing:2px; }
.stat-value.bump{ animation:bump .35s ease; }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }

.hud-buttons{ display:flex; gap:8px; }
.icon-btn{
  width:38px; height:38px;
  background:var(--ink-3); color:var(--cream);
  border:3px solid var(--line);
  font-size:14px; line-height:1;
}
.icon-btn:hover{ background:var(--pink-dark); }
.icon-btn.off{ opacity:.4; }

/* ===================== MAP ===================== */

#mapWrap{
  position:relative;
  border:4px solid var(--line);
  box-shadow: inset 0 0 0 4px #6b4a2a, 0 6px 0 0 rgba(0,0,0,.45);
  background:#3fa93f;
  line-height:0;
}
#mapWrap canvas{
  display:block;
  width:100%;
  height:auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#mapWrap #fx{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }

.map-toast{
  position:absolute;
  left:50%; top:16px;
  transform:translateX(-50%) translateY(-18px);
  background:rgba(13,7,32,.92);
  border:3px solid var(--gold);
  color:var(--gold);
  padding:8px 14px;
  font-size:10px;
  line-height:1.6;
  letter-spacing:1px;
  opacity:0;
  transition:opacity .25s, transform .25s;
  pointer-events:none;
  white-space:nowrap;
}
.map-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===================== SIDE PANEL ===================== */

#panel{
  background:var(--ink-2);
  border:4px solid var(--line);
  box-shadow: inset 0 0 0 4px var(--ink-3), 0 6px 0 0 rgba(0,0,0,.45);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.boy-row{ display:flex; align-items:center; gap:12px; }
#portrait{
  width:72px; height:72px;
  image-rendering:pixelated;
  background:#4a2f7a;
  border:3px solid var(--line);
}
.boy-name{ font-size:11px; color:var(--gold); }

.speech{
  position:relative;
  background:var(--cream);
  color:#2b1b12;
  border:3px solid var(--line);
  padding:12px;
  font-size:10px;
  line-height:1.9;
  min-height:62px;
}
.speech::before{
  content:"";
  position:absolute; top:-13px; left:18px;
  border:6px solid transparent;
  border-bottom-color:var(--line);
}
.speech::after{
  content:"";
  position:absolute; top:-7px; left:20px;
  border:5px solid transparent;
  border-bottom-color:var(--cream);
}

/* ---- riddle ---- */
.riddle-box{ display:flex; flex-direction:column; gap:12px; }
.riddle-place{ font-size:9px; color:var(--gold); letter-spacing:1px; }
.riddle-text{
  margin:0;
  background:var(--ink);
  border:3px solid var(--ink-3);
  padding:14px;
  font-size:10px;
  line-height:2.1;
  white-space:pre-line;
  color:#ffe9f3;
}

.timer{ display:flex; align-items:center; gap:10px; }
.timer-bar{
  flex:1; height:16px;
  background:var(--ink);
  border:3px solid var(--line);
  padding:2px;
}
.timer-fill{
  height:100%; width:100%;
  background:var(--green);
  transition:width .95s linear, background .4s;
}
.timer-fill.warn{ background:var(--gold); }
.timer-fill.danger{ background:var(--red); }
.timer-num{ font-size:10px; min-width:26px; text-align:right; color:#b9a6d8; }

#answerForm{ display:flex; flex-direction:column; gap:10px; }

.pixel-input{
  font-family:var(--font);
  font-size:11px;
  padding:12px;
  background:var(--ink);
  color:var(--cream);
  border:3px solid var(--ink-3);
  outline:none;
  width:100%;
}
.pixel-input::placeholder{ color:#6f5b95; }
.pixel-input:focus{ border-color:var(--pink); }
.pixel-input.big{ font-size:12px; padding:14px; text-align:center; }
.pixel-input.shake{ animation:shake .4s; border-color:var(--red); }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)} 40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

.btn{
  font-size:10px;
  letter-spacing:1px;
  padding:12px 14px;
  border:3px solid var(--line);
  color:var(--cream);
  background:var(--ink-3);
  box-shadow:0 4px 0 0 rgba(0,0,0,.5);
  transition:transform .08s, background .15s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 0 rgba(0,0,0,.5); }
.btn-main{ background:var(--pink-dark); }
.btn-main:hover{ background:var(--pink); }
.btn-ghost{ background:transparent; border-color:var(--ink-3); color:#b9a6d8; font-size:9px; }
.btn-ghost:hover{ color:var(--cream); border-color:var(--pink); }
.btn-ghost:disabled{ opacity:.35; cursor:not-allowed; }
.btn.big{ font-size:12px; padding:16px; }

.hint-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hint-list li{
  background:#2d3f6b;
  border-left:5px solid var(--gold);
  padding:10px;
  font-size:9px;
  line-height:1.9;
  animation:pop .25s ease;
}
@keyframes pop{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ===================== OVERLAYS ===================== */

.overlay{
  position:fixed; inset:0;
  background:rgba(10,5,20,.94);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:50;
  overflow:auto;
}

/* ---- password ---- */
.lock-card{
  width:min(520px, 100%);
  background:var(--ink-2);
  border:4px solid var(--line);
  box-shadow: inset 0 0 0 4px var(--ink-3), 0 8px 0 0 rgba(0,0,0,.5);
  padding:34px 28px;
  text-align:center;
}
.lock-heart{
  font-size:46px; color:var(--pink);
  text-shadow:0 0 22px rgba(255,95,158,.8);
  animation:beat 1.4s infinite;
  line-height:1;
}
@keyframes beat{ 0%,100%{transform:scale(1)} 25%{transform:scale(1.18)} 45%{transform:scale(1)} 65%{transform:scale(1.1)} }
.lock-card h1{ font-size:22px; color:var(--pink); margin:18px 0 8px; text-shadow:3px 3px 0 var(--line); }
.lock-sub{ font-size:8px; color:#9a86bd; margin:0 0 26px; letter-spacing:1px; }
.lock-line{ font-size:10px; color:#d9c9f0; margin:0 0 20px; line-height:2; }
#lockForm{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.lock-hint{
  font-size:9px; color:var(--gold);
  background:var(--ink); border:3px solid var(--ink-3);
  padding:12px; line-height:2; margin:14px 0 0;
}
.lock-error{ font-size:9px; color:var(--red); margin:12px 0 0; min-height:14px; }

/* ---- letter ---- */
#finale{ background:rgba(10,5,20,.97); }
#hearts{ position:fixed; inset:0; pointer-events:none; }
.letter-wrap{ position:relative; z-index:2; width:min(720px,100%); }
.letter{
  background:linear-gradient(#fff8ea, #f6e6c9);
  color:#3a2a18;
  border:4px solid #7a5a2e;
  box-shadow:0 0 0 4px #c9a468, 0 14px 0 rgba(0,0,0,.45);
  padding:38px 32px;
  animation:rise .8s ease;
}
@keyframes rise{ from{opacity:0; transform:translateY(40px) scale(.96)} to{opacity:1; transform:none} }
.letter h2{
  margin:0 0 26px; font-size:18px; color:#b0245c; text-align:center;
  text-shadow:2px 2px 0 rgba(0,0,0,.12);
}
.letter-body{
  font-size:11px; line-height:2.5; white-space:pre-wrap; min-height:120px;
}
.letter-body .cursor{ color:#b0245c; }
.letter-sign{ margin-top:26px; text-align:right; font-size:12px; color:#b0245c; }
.letter-prize{
  margin-top:26px; padding:14px;
  background:#ffe6ef; border:3px dashed #b0245c;
  font-size:10px; line-height:2;
}
.final-score{
  margin-top:22px; text-align:center; font-size:10px; line-height:2.2; color:#6b5433;
}
#btnReplay{ margin-top:20px; width:100%; color:#6b5433; border-color:#c9a468; }
#btnReplay:hover{ color:#b0245c; border-color:#b0245c; }

/* ===================== PHONES ===================== */
@media (max-width: 700px){
  body{ font-size:11px; line-height:1.7; }

  #game{ padding:8px; gap:8px; }

  /* --- top bar --- */
  #hud{
    padding:10px;
    gap:10px;
    border-width:3px;
    box-shadow: inset 0 0 0 3px var(--ink-3), 0 4px 0 0 rgba(0,0,0,.45);
  }
  .hud-title{ flex:1 1 100%; text-align:center; }
  .hud-title span{ font-size:13px; }
  .hud-title small{ font-size:7px; margin-top:4px; }
  .hud-stats{ flex:1 1 auto; gap:10px; justify-content:space-between; width:100%; }
  .stat{ min-width:0; flex:1; }
  .stat-label{ font-size:6px; }
  .stat-value{ font-size:11px; margin-top:4px; }
  .hud-buttons{ width:100%; justify-content:center; }
  .icon-btn{ width:46px; height:46px; font-size:16px; }

  /* --- map --- */
  #mapWrap{
    border-width:3px;
    box-shadow: inset 0 0 0 3px #6b4a2a, 0 4px 0 0 rgba(0,0,0,.45);
  }
  .map-toast{ font-size:8px; padding:6px 10px; white-space:normal; max-width:90%; text-align:center; }

  /* --- panel --- */
  #panel{
    padding:12px;
    gap:10px;
    border-width:3px;
    box-shadow: inset 0 0 0 3px var(--ink-3), 0 4px 0 0 rgba(0,0,0,.45);
  }
  #portrait{ width:56px; height:56px; }
  .boy-name{ font-size:10px; }
  .speech{ font-size:10px; padding:10px; line-height:1.8; min-height:0; }
  .riddle-place{ font-size:8px; }
  .riddle-text{ font-size:10px; line-height:2; padding:12px; }
  .hint-list li{ font-size:9px; padding:9px; }
  .timer-num{ font-size:9px; }

  /* 16px stops iOS from zooming the whole page when she taps the field */
  .pixel-input, .pixel-input.big{ font-size:16px; padding:13px; }

  .btn{ font-size:10px; padding:14px 12px; min-height:48px; }
  .btn.big{ font-size:11px; padding:16px 12px; }
  .btn-ghost{ font-size:9px; }

  /* --- overlays --- */
  .overlay{ padding:12px; align-items:flex-start; }
  .lock-card{ padding:26px 18px; margin:auto 0; }
  .lock-heart{ font-size:38px; }
  .lock-card h1{ font-size:16px; margin:14px 0 6px; }
  .lock-sub{ font-size:7px; margin-bottom:18px; }
  .lock-line{ font-size:10px; }
  .lock-hint{ font-size:9px; }

  .letter{ padding:22px 16px; border-width:3px; }
  .letter h2{ font-size:14px; margin-bottom:18px; }
  .letter-body{ font-size:10px; line-height:2.2; }
  .letter-sign{ font-size:10px; }
  .letter-prize{ font-size:9px; }
  .final-score{ font-size:9px; }
}

/* very narrow phones */
@media (max-width: 380px){
  .hud-title span{ font-size:11px; }
  .stat-label{ display:none; }
  .riddle-text{ font-size:9px; }
  .letter-body{ font-size:9px; }
}