/* ---------- TOKENS ---------- */
:root{
    --magenta:#d81b60;
    --red:#e53935;
    --amber:#ffb300;
    --orange:#fb8c00;
    --green:#7cb342;
    --teal:#26a69a;
    --turquoise:#26c6da;
    --black:#000;
    --gray:#212121;
    --text-light:#fff;
    --text-dark:#212121;
    --bg-light:#f5f5f5;
    --radius:1rem;
    --shadow:0 4px 15px rgba(0,0,0,.15);
    --ground-pct:0%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Fredoka',sans-serif;background:var(--bg-light);display:flex;align-items:center;justify-content:center;min-height:100dvh;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;user-select:none;-webkit-user-select:none;}

#game-container, .med-img-div, button, div, span, p, img, canvas {
  user-select: none;
  -webkit-user-select: none;
}

a{color:var(--teal);}

/* ---------- CONTAINER ---------- */
#game-container{position:relative;width:100%;max-width:480px;height:100%;max-height:844px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}

/* ---------- HEADER ---------- */
#game-header{flex:0 0 120px;background:linear-gradient(135deg,var(--teal),var(--turquoise));position:relative;display:flex;align-items:center;justify-content:center;}
#logo{height:100px;width:auto;}
#score-board{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-25px);
  font-weight:700;
  color:var(--text-light);
  text-shadow:0 0 4px rgba(0,0,0,.25);
  font-size:1.1rem;
  z-index:2;
}

#stage-board{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-25px);
  font-weight:700;
  color:var(--text-light);
  text-shadow:2px 2px 15px rgba(255, 255, 255, 0.75),0 0 20px rgba(255, 255, 255, 1);
  font-size:1.1rem;
  align-self: right;
}

#current-stage-name {
  display: block;
  text-align: center;
  width: 100%;
}

/* ---------- PLAYFIELD ---------- */
#game-canvas{flex:1 1 auto;position:relative;background:#cbeefe;overflow:hidden;isolation:isolate;}
#ground{position:absolute;bottom:0;left:0;width:100%;height:var(--ground-pct);background:linear-gradient(180deg,#5cb85c,#3e8e41);z-index:1;}
.parallax-bg{position:absolute;inset:0;background-repeat:repeat-x;background-size:auto 100%;background-position-x:0;animation:scrollBg 720s linear infinite;pointer-events:none;z-index:0;}
#bg-layer{background-image:url('bg-layer.png');opacity:0.8;animation-duration:720s;}
@keyframes scrollBg { from { background-position-x: 0; } to { background-position-x: -7200vw; } }

/* Hide controls when meditation modal is active */
#meditation-modal.fullscreen.active ~ #game-controls, #meditation-modal.fullscreen.active + #game-controls, .modal.fullscreen.active ~ #game-controls { display: none !important; }

/* Dreamy meditation background overlays */
.med-bg-fade { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.5s cubic-bezier(.7,.2,.2,1), filter 1.5s cubic-bezier(.7,.2,.2,1); z-index:1; background-size:cover; background-position:center; filter: blur(0px) brightness(1.1) saturate(1.2); }
.med-bg-fade.active { opacity:1; filter: blur(1.5px) brightness(1.1) saturate(1.3); transition:opacity 5s cubic-bezier(.7,.2,.2,1), filter 5s cubic-bezier(.7,.2,.2,1); }

/* ---------- QUIZ FEEDBACK MODAL ---------- */
#quiz-feedback-modal.correct .modal-content {
  border: 2px solid var(--green);
  background: #eaffea;
}
#quiz-feedback-modal.incorrect .modal-content {
  border: 2px solid var(--red);
  background: #fff0f0;
}
#quiz-feedback-modal .quiz-feedback-icon {
  font-size: 1.5em;
  vertical-align: middle;
  margin-right: 0.5em;
}
#quiz-feedback-modal .quiz-feedback-choice-text {
  font-weight: bold;
  color: var(--teal);
  font-size: 1.1em;
}
#quiz-feedback-modal .modal-content p {
  margin: 0.5em 0;
}

/* ---------- PLAYER ---------- */
#cappuccino{
  --size:128px;
  width:var(--size);
  height:var(--size);
  background:url('cappuccino-leap.png') center/contain no-repeat;
  position:absolute;
  left:48px;
  bottom:calc(var(--ground-pct) - 0%);
  z-index:2;transition:transform .12s ease-out;
}

/* ---------- OBJECTS ---------- */
.game-object{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;z-index:2;}

.pulse {
  display: inline-block;
  animation: pulse-text .5s infinite;
}

@keyframes pulse-text {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.treat{
  width:48px;
  height:48px;
  background:url('treat-bone.png') center/contain no-repeat;
}
.treat.magenta{
  background:url('treat-magenta.png') center/contain no-repeat;
}
.treat.red{
  background:url('treat-red.png') center/contain no-repeat;
}
.treat.amber{
  background:url('treat-amber.png') center/contain no-repeat;
}
.treat.orange{
  background:url('treat-orange.png') center/contain no-repeat;
}
.treat.green{
  background:url('treat-green.png') center/contain no-repeat;
}
.treat.teal{
  background:url('treat-teal.png') center/contain no-repeat;
}
.treat.turquoise{
  background:url('treat-turquoise.png') center/contain no-repeat;
}
/* Good treat pulse */
.treat.good{
  --pulse-scale:1;
  animation:pulse 0.3s ease-in-out infinite;
  transform:var(--cascade-transform,translate3d(0,0,0)) scale(var(--pulse-scale,1));
}
@keyframes pulse{
  0%{transform:var(--cascade-transform,translate3d(0,0,0)) scale(1);}
  50%{transform:var(--cascade-transform,translate3d(0,0,0)) scale(1.15);}
  100%{transform:var(--cascade-transform,translate3d(0,0,0)) scale(1);}
}

.squirrel{width:48px;height:48px;background:url('distraction-squirrel.png') center/contain no-repeat;filter:drop-shadow(0 0 12px black);}

.star{
  width:48px;
  height:48px;
  background:url('star.png') center/contain no-repeat;
  animation:spin 5s ease-in-out infinite,starGlow .2s ease-in-out infinite;  
}
@keyframes spin{to{transform:rotate(180deg)}}
@keyframes starGlow{
  0%{filter:drop-shadow(0 0 6px #ffd700);}
  50%{filter:drop-shadow(0 0 22px #ffd700);}
  100%{filter:drop-shadow(0 0 6px #ffd700);}
}

.cappuccino-bubble, #quiz-feedback-question {
  text-align: left;
  word-break: normal;
  white-space: normal;
  position: relative;
  background: #f8f8f8;
  border: 3px solid #000000;
  border-radius: 1.25em;
  padding: 1em 1em 1em 1em; /* default, no avatar spacing */
  margin: 1em 0 0 1em;
  min-height: 56px;
  box-shadow: 0 2px 8px rgba(60,40,20,0.04);
}
.cappuccino-bubble .cappuccino-profile ~ .cappuccino-text {
  padding-left: 1em;
}
.cappuccino-bubble .cappuccino-profile {
  position: absolute;
  left: -1.5em;
  top: -1.5em;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff url('cappuccino-profile.png') center/cover no-repeat;
  border: 2px solid #000;
  box-shadow: 0 2px 8px rgba(60,40,20,0.08);
}
.cappuccino-profile {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #000000;
  background: #fff url('cappuccino-profile.png') center/cover no-repeat;
  box-shadow: 0 2px 8px rgba(60,40,20,0.08);
  z-index: 2;
  transition: border-color 0.3s, background-color 0.3s;
}
.cappuccino-text {
  font-size: 1.08em;
  color: #333;
  min-height: 32px;
  line-height: 1.5;
  padding-left: 0.2em;
  display: block;
}

#meditation-modal.fullscreen {z-index: 9999; background: rgba(255, 255, 255, 1);}
#meditation-modal .modal-content { background: none; box-shadow: none; border: none; }
#med-img { width: 248px; height: 248px; margin-bottom: 2.5rem; cursor: pointer; }
#good-boy-message { z-index: 9999; opacity:0.5; font-size:2rem; font-weight:700; color:var(--green); transition:opacity 1s; text-align:center; margin-top:1rem; }
#good-boy-message.active { opacity:1; }

/* ---------- CONTROLS ---------- */
#game-controls{flex:0 0 88px;background:linear-gradient(135deg,var(--teal),var(--turquoise));display:flex;align-items:center;justify-content:center;padding:.5rem;border-top:0px solid #eee;}

@media (max-width: 600px) {
  #game-controls { display: none !important; }
  #game-container { border-radius: 0 !important; }
}
.btn{width:80%;max-width:80%;padding:.75rem 1rem;margin:5px;border:none;border-radius:9999px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s,background .2s;color:var(--text-light);background:var(--black);}  .btn:hover{transform:translateY(-2px);background:var(--gray);}

/* ---------- MODALS ---------- */
.modal{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease;padding:1.5rem;z-index:100;}
.modal.active{visibility:visible;opacity:1;}
.modal-content{width:clamp(280px,95%,420px);max-height:95%;overflow:auto;background:#fff;border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:1rem;animation:pop .25s ease-out;}
@keyframes pop{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.modal-content.full{width:90%;height:90%;}
.modal-content img{width:140px;height:140px;border-radius:50%;object-fit:contain;}
#treat-info{
  font-size:0.9rem;
}

#stage-info-description, #stage-reflection, #treat-info, #footer-text, #dilemma-scenario, #remain-message, #quiz-question, #med-complete-modal, .modal-content.full {
  color: var(--text-light);
}

#stage-info-title, #remain-title, #quiz-title, #quiz-feedback-title, #med-complete-title, #game-over-title, .pulse {
  text-shadow:0 0 10px rgba(0,0,0,.25);
}

/* Share grid */
#share-grid{display:grid;gap:4px;margin-block:1rem;margin-inline:auto;}
.grid-square{width:24px;height:24px;font-size:1.1rem;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#ddd;}

/* Stage tint */
.stage-magenta{background:var(--magenta);} .stage-red{background:var(--red);} .stage-amber{background:var(--amber);} .stage-orange{background:var(--orange);} .stage-green{background:var(--green);} .stage-teal{background:var(--teal);} .stage-turquoise{background:var(--turquoise);} 

/* High score board */
#high-score-board{
    position:absolute;
    left:16px;
    top:calc(50% + 26px);
    transform:translateY(-50%);
    font-weight:700;
    color:var(--text-light);
    text-shadow:0 0 4px rgba(0,0,0,.25);
    font-size:.9rem;
    padding: 10px;
    margin: -10px;
}

/* ---------- EXTRA PARALLAX LAYERS ---------- */
#far-bg{background-image:url('far-bg.png');animation-duration:240s;opacity:0;} /* off for now */
#mid-bg{background-image:url('mid-bg.png');animation-duration:480s;opacity:0;} /* off for now */

/* ---------- PROGRESS LADDER ---------- */
#progress-ladder{
  position:absolute;
  right:10px;
  bottom:10px;
  width:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:3;
  pointer-events:none;
}
.ladder-step{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ccc;
  opacity:.5;
  transition:transform .25s, opacity .25s;
}
.ladder-step.active{
  opacity:1;
  transform:scale(1.25);
  box-shadow:0 0 6px rgba(0,0,0,.35);
  border:1px solid #eee;
}

/* ---------- ICON BUTTONS ---------- */
#ui-buttons{
  display:flex;
  margin:-.75rem 0;
  padding: 0 1rem;
}
.icon-btn{
  background:transparent;
  border:none;
  font-size:1.25rem;
  color:var(--text-light);
  cursor:pointer;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.5));
  transition:transform .15s, opacity .2s;
}
.icon-btn:active{transform:scale(.9);}
.icon-btn.muted{opacity:.4;}
.icon-btn.full{opacity:.4;}

/* ---------- RUNNING SPRITE ---------- */
@keyframes run-cycle{from{background-position:0 0;}to{background-position:-1024px 0;}}
#cappuccino.running{
  background-image:url('cappuccino-sprite.png');
  background-size:1024px 128px;
  animation:run-cycle 1s steps(8) infinite;
}

/* ---------- MODAL SLIDE-IN ---------- */
.modal-content{transform:translateY(20px);opacity:0;}
.modal.active .modal-content{transform:translateY(0);opacity:1;transition:transform .3s,opacity .3s;}

/* ---------- BUTTON RIPPLE ---------- */
.btn{position:relative;overflow:hidden;}
.btn::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:120px;height:120px;
  background:rgba(255,255,255,.6);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  transition:transform .5s,opacity .7s;
  pointer-events:none;
}
.btn:active::after{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* ---------- ACCESSIBLE TREAT LETTER ---------- */
.treat::after{
  content:attr(data-letter);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-2px);
  font-size:.5rem;font-weight:700;color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.5);
  pointer-events:none;
}

/* ---------- MOBILE OPTIMIZATION ---------- */
@media (max-width: 480px) {
  .cappuccino-bubble {
    padding: 0.8em 0.7em 0.8em 2.7em;
    margin: 0.7em 0.1em 0 1em;
    min-height: 44px;
    font-size: 0.98em;
    max-width: 96vw;
  }
  .cappuccino-profile {
    width: 44px;
    height: 44px;
    top: -14px;
    left: -14px;
  }
  .cappuccino-text {
    font-size: 0.98em;
    padding-left: 0.1em;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 90vw;
  }
  .modal-content {
    padding: 1.2rem 0.6rem;
    font-size: 0.97rem;
    width: 98vw;
    max-width: 99vw;
  }
}
@media (max-width: 375px) {
  .cappuccino-bubble {
    padding: 0.7em 0.3em 0.7em 2.5em;
    font-size: 0.92em;
  }
  .modal-content {
    padding: 0.7rem 0.2rem;
    font-size: 0.93rem;
  }
}


/* ---------- GLASSMORPHIC PANELS ---------- */
.modal-content{
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.4);
}

/* ---------- SCORE PULSE ---------- */
@keyframes pulse-num{
  0%{transform:scale(1);color:#fff;}
  50%{transform:scale(1.25);color:var(--teal);}
  100%{transform:scale(1);color:#fff;}
}
.score-pulse{
  animation:pulse-num .4s ease-out;
}

/* ---------- TRANSITIONING STAGE ---------- */
#game-canvas{
  transition: background 1s ease, filter .8s ease;
}
body.transitioning #game-canvas{
  filter: blur(4px) brightness(0.9);
}

/* ---------- CAMERA SHAKE ---------- */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-6px);}
  40%,80%{transform:translateX(6px);}
}
.shake{
  animation:shake .5s ease;
}

/* ---------- CONFETTI ---------- */
.confetti{
  position:fixed;
  top:-10px;
  width:8px;
  height:14px;
  opacity:0.9;
  transform:rotate(45deg);
  animation:fall 3s linear forwards, confetti-fade 3s linear 3s forwards;
  pointer-events:none;
  z-index:9999;
}
@keyframes confetti-fade {
  to { opacity: 0; }
}
@keyframes fall{
  0%{transform:translateY(-10px) rotate(0deg);}
}

/* Meditation image as background-image, not <img> */
.med-img-div {
  background: none !important;
  width: 160px;
  height: 160px;
  border-radius: 1.5rem;
  box-shadow: none !important;
  margin-bottom: 1rem;
  position: relative;
  outline: none;
}

.med-img-div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  pointer-events: none;
  border-radius: 1.5rem;
  background: none !important;
}

.med-img-touch-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  z-index: 2;
  pointer-events: all;
  outline: none;
  border-radius: 1.5rem;
  user-select: none;
  -webkit-user-select: none;
}