/* =========================================================
   GUIDED PAINT SCREEN  (#screen-guided-paint)
   ========================================================= */

/* ─── Screen backdrop ─────────────────────────────────── */
#screen-guided-paint {
  background: var(--bg, #FFF5FB);
  color: var(--text, #3D2B56);
  font-family: 'Nunito', sans-serif;
  padding: 0;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}

/* ─── Instruction bar for kids ─────────────────────────── */
#screen-guided-paint .game-instruction-bar {
  background: var(--soft, #F8E8F8);
  border-bottom: 1.5px solid var(--border, #E8D5F5);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #3D2B56);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gp-hint-inline {
  font-style: italic;
  opacity: .7;
  font-weight: 600;
}
.gp-timer-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--soft, #F8E8F8);
  border: 1.5px solid var(--border, #E8D5F5);
  border-radius: 12px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.gp-timer-icon { font-size: 14px; }
.gp-timer {
  font-family: 'Fredoka One', sans-serif;
  font-size: 16px; letter-spacing: .5px;
  color: var(--primary, #FF6B9D);
  min-width: 40px;
}

/* ─── Progress bar (now inside app-chrome center) ─────── */
.gp-prog-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary,#4ECDC4), var(--primary,#FF6B9D));
  border-radius: 8px;
  transition: width .4s ease;
}
.gp-prog-pct {
  font-size: 11px; font-weight: 800;
  color: var(--primary, #FF6B9D);
  min-width: 30px; text-align: right;
  flex-shrink: 0;
}

/* ─── Canvas area ─────────────────────────────────────── */
.gp-canvas-area {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px 0;
  position: relative;
}
.gp-canvas-wrap {
  width: 100%;
  max-width: 860px;
  aspect-ratio: 680 / 420;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(100,50,150,.18);
  border: 2.5px solid var(--border, #E8D5F5);
}
#gp-display {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

/* ─── Bottom toolbar ──────────────────────────────────── */
.gp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 6px;
  background: var(--card, #fff);
  border-top: 1.5px solid var(--border, #E8D5F5);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.gp-brush-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}
.gp-brush-row label {
  font-size: 12px; font-weight: 800;
  color: var(--text, #3D2B56); white-space: nowrap;
}
#gp-brush-slider {
  flex: 1; height: 4px; cursor: pointer;
  accent-color: var(--primary, #FF6B9D);
}
.gp-brush-val {
  font-size: 12px; font-weight: 700;
  color: var(--primary, #FF6B9D);
  min-width: 24px; text-align: center;
}
.gp-finish-btn {
  background: linear-gradient(135deg, var(--secondary,#4ECDC4), #26A69A);
  color: #fff;
  font-family: 'Fredoka One', sans-serif;
  font-size: 15px;
  padding: 9px 20px;
  border-radius: 22px;
  border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(78,205,196,.4);
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.gp-finish-btn:hover  { transform: scale(1.05); }
.gp-finish-btn:active { transform: scale(.94); }

/* ─── Scene tabs ──────────────────────────────────────── */
.gp-scene-tabs {
  display: flex;
  gap: 6px;
  padding: 5px 14px 8px;
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--card, #fff);
  scrollbar-width: none;
}
.gp-scene-tabs::-webkit-scrollbar { display: none; }
.gp-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 18px;
  border: 2px solid var(--border, #E8D5F5);
  background: var(--soft, #F8E8F8);
  color: var(--text, #3D2B56);
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  transition: all .18s;
  font-family: 'Nunito', sans-serif;
}
.gp-tab:hover  { border-color: var(--primary,#FF6B9D); background: #fff; }
.gp-tab.active {
  background: linear-gradient(135deg, var(--primary,#FF6B9D), var(--secondary,#4ECDC4));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 12px rgba(255,107,157,.3);
}

/* ─── Intro tip (first-visit how-to) ─────────────────── */
.gp-intro-tip {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(61,43,86,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 180;
  border-radius: 14px;
  pointer-events: none;
  animation: gp-tip-fade 0.4s ease;
}
.gp-intro-tip.show { display: flex; }
.gp-intro-tip-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  padding: 20px 28px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.gp-intro-tip-icon {
  font-size: 42px;
  flex-shrink: 0;
  animation: gp-tip-wiggle 0.8s ease infinite alternate;
}
.gp-intro-tip-text {
  font-size: 15px;
  font-weight: 700;
  color: #3D2B56;
  line-height: 1.4;
}
@keyframes gp-tip-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp-tip-wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ─── Milestone encouragement bubble ─────────────────── */
.gp-milestone-msg {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #FF6B9D, #A855F7);
  color: #fff;
  font-family: 'Fredoka One', sans-serif;
  font-size: 17px;
  padding: 10px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(168,85,247,.45);
  opacity: 0;
  pointer-events: none;
  z-index: 160;
  white-space: nowrap;
  transition: opacity .35s ease, transform .35s ease;
}
.gp-milestone-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Result overlay ──────────────────────────────────── */
.gp-result {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,245,251,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  border-radius: 14px;
}
.gp-result.show { display: flex; }
.gp-result-inner {
  background: var(--card,#fff);
  border-radius: 24px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(100,50,150,.2);
  border: 2px solid var(--border,#E8D5F5);
  max-width: 340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: gp-result-pop .55s cubic-bezier(.2,1.6,.4,1);
}
@keyframes gp-result-pop {
  from { transform: scale(.5) rotate(-4deg); opacity:0; }
  to   { transform: scale(1) rotate(0deg);   opacity:1; }
}
.gp-result-emoji { font-size: 56px; line-height: 1; }
.gp-result-title {
  font-family: 'Fredoka One', sans-serif;
  font-size: 24px;
  color: var(--text, #3D2B56);
}
.gp-result-time  { font-size: 16px; font-weight: 800; color: var(--primary,#FF6B9D); }
.gp-result-stars { font-size: 28px; letter-spacing: 3px; }
.gp-result-msg   { font-size: 14px; font-weight: 700; color: rgba(61,43,86,.7); }
.gp-result-btns  { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.gp-btn {
  font-family: 'Fredoka One', sans-serif;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 22px;
  border: none; cursor: pointer;
  transition: transform .15s;
}
.gp-btn:hover  { transform: scale(1.06); }
.gp-btn:active { transform: scale(.94); }
.gp-btn-again { background:linear-gradient(135deg,#A855F7,#6366F1); color:#fff; }
.gp-btn-next  { background:linear-gradient(135deg,var(--primary,#FF6B9D),#FF8C00); color:#fff; }
.gp-btn-back  { background:var(--soft,#F8E8F8); color:var(--text,#3D2B56); border:2px solid var(--border,#E8D5F5); }

/* ─── Responsive ──────────────────────────────────────────
   360px  very small phones
   480px  phones
   768px  tablet landscape
   1024px laptop
   ─────────────────────────────────────────────────────── */

/* Very small phones (≤360px) */
@media (max-width:360px) {
  .gp-toolbar { flex-direction:column; gap:6px; padding:6px 10px; }
  .gp-brush-row { width:100%; }
  .gp-finish-btn { width:100%; text-align:center; font-size:14px; padding:8px 16px; }
  .gp-tab { font-size:10px; padding:4px 8px; }
  .gp-scene-tabs { padding:4px 8px 6px; gap:5px; }
  .gp-timer { font-size:12px; min-width:32px; }
  .gp-timer-wrap { padding:3px 7px; }
  .gp-prog-pct { min-width:24px; font-size:10px; }
  #screen-guided-paint .game-instruction-bar { font-size:11px; padding:5px 12px; }
}

/* Phones (≤480px) */
@media (max-width:480px) {
  .gp-timer { font-size:13px; }
  .gp-timer-wrap { padding:3px 8px; }
  .gp-tab { font-size:11px; padding:5px 10px; }
  .gp-toolbar { padding:6px 10px 4px; gap:7px; }
  .gp-brush-row label { font-size:11px; }
}

/* Tablet landscape / small laptop (≥768px) */
@media (min-width:768px) {
  .gp-canvas-area { padding:10px 16px 0; }
  .gp-toolbar { padding:10px 18px 8px; gap:14px; }
  .gp-brush-row label { font-size:13px; }
  .gp-finish-btn { font-size:16px; padding:10px 24px; }
  .gp-scene-tabs { padding:6px 18px 10px; gap:8px; }
  .gp-tab { font-size:13px; padding:7px 16px; }
  #screen-guided-paint .game-instruction-bar { font-size:13px; padding:8px 20px; }
}

/* Laptop (≥1024px) */
@media (min-width:1024px) {
  .gp-canvas-area { padding:12px 24px 0; }
  .gp-toolbar { padding:10px 28px 8px; }
  .gp-finish-btn { font-size:17px; padding:11px 28px; }
  .gp-tab { font-size:14px; }
  .gp-timer { font-size:18px; }
  #screen-guided-paint .game-instruction-bar { font-size:14px; padding:9px 24px; }
}

/* Short screens — landscape phone */
@media (max-height:500px) {
  .gp-canvas-area { padding:3px 8px 0; }
  .gp-toolbar { padding:4px 10px; gap:6px; }
  .gp-scene-tabs { padding:3px 10px 4px; }
  .gp-brush-row label { display:none; }
  .gp-finish-btn { padding:6px 14px; font-size:13px; }
  #screen-guided-paint .game-instruction-bar { display:none; }
}
@media (max-height:600px) {
  .gp-canvas-area  { padding:4px 8px 0; }
  .gp-toolbar      { padding:5px 10px 4px; }
  .gp-scene-tabs   { padding:4px 10px 5px; }
}