:root{
  --forest:#173C34;
  --forest-dark:#0E2621;
  --forest-light:#245B4F;
  --gold:#E3A73A;
  --gold-dark:#B87F1F;
  --cream:#F7F2E4;
  --ink:#182420;
  --coral:#E8664F;
  --good:#1F7A4C;
  --muted:#4A5850;
  --shadow: 0 10px 0 rgba(0,0,0,0.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(circle at 20% 0%, var(--forest-light) 0%, var(--forest) 45%, var(--forest-dark) 100%);
  min-height:100vh;
  font-family:'Nunito', sans-serif;
  color:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 0 60px;
}
.wrap{width:100%;max-width:560px;padding:0 16px;margin-top:24px;}
.wrap.wrap-wide{max-width:1180px;}

/* --- site header / nav --- */
.site-header{
  width:100%;
  background:rgba(0,0,0,0.18);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:14px 20px;
}
.site-header-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
}
.brand{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(22px,4vw,28px);
  color:var(--cream);
  margin:0;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.brand span{color:var(--gold);}
.tagline{margin:2px 0 0;font-size:12.5px;color:#D8E8DF;opacity:0.8;}
.player-bar{
  max-width:1180px;
  margin:10px auto 0;
  padding:0 20px;
  font-size:13px;
  color:var(--gold);
  font-weight:700;
  text-align:center;
}
.player-bar a{color:#D8E8DF;text-decoration:underline;}

.brand-link{text-decoration:none;display:inline-block;}
.brand-link:active .brand{opacity:0.85;}

.top-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.nav-link{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--cream);
  text-decoration:none;
  background:rgba(0,0,0,0.22);
  padding:7px 13px;
  border-radius:999px;
  white-space:nowrap;
}
.nav-link:active{background:rgba(0,0,0,0.35);}
.nav-link-cta{background:transparent;border:1.5px solid rgba(247,242,228,0.5);}
.nav-link-cta-solid{background:var(--gold);color:var(--forest-dark);}
.nav-link-cta-solid:active{background:var(--gold-dark);}

/* --- landing page --- */
.hero{max-width:760px;margin:36px auto 26px;text-align:center;}
.hero-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(28px,5vw,44px);
  color:var(--cream);
  margin:0 0 14px;
  text-shadow:0 3px 0 rgba(0,0,0,0.25);
}
.hero-subtitle{font-size:15.5px;line-height:1.6;color:#D8E8DF;margin:0 auto;max-width:620px;}
.hero-cta-row{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap;}
.hero-cta-row .btn-primary, .hero-cta-row .btn-outline{flex:none;min-width:180px;}
.btn-outline.hero-cta-outline{background:transparent;border-color:rgba(247,242,228,0.6);color:var(--cream);}

.announcement-bar{
  max-width:1180px;
  margin:0 auto 26px;
  overflow:hidden;
  white-space:nowrap;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:9px 0;
}
.announcement-bar .announcement-item{color:var(--cream);}

.landing-columns{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.login-panel{flex:0 0 320px;position:sticky;top:20px;}
.login-panel .card{padding:22px 20px 20px;}
.landing-main{flex:1;min-width:0;}
.landing-section{margin-bottom:34px;}
.section-heading{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--cream);
  margin:0 0 6px;
}
.section-sub{color:#D8E8DF;font-size:14px;margin:0 0 16px;opacity:0.9;}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:14px;}
.feature-card{
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:18px;
}
.feature-icon{font-size:26px;line-height:1;}
.feature-card h3{
  font-family:'Baloo 2', sans-serif;
  font-size:15px;
  color:var(--gold);
  margin:8px 0 6px;
}
.feature-card p{font-size:13.5px;line-height:1.55;color:#D8E8DF;margin:0;opacity:0.9;}
.feature-card-highlight{
  background:linear-gradient(160deg, rgba(227,167,58,0.22), rgba(0,0,0,0.18));
  border:1px solid rgba(227,167,58,0.55);
  box-shadow:0 0 18px rgba(227,167,58,0.28);
}
.feature-card-highlight h3{color:var(--cream);}
.feature-card-highlight .feature-icon{filter:drop-shadow(0 0 6px rgba(227,167,58,0.6));}

.game-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:14px;}
.game-card{
  background:var(--cream);
  color:var(--ink);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 0 rgba(0,0,0,0.15);
}
.game-card-icon{font-size:26px;line-height:1;}
.game-card h3{
  font-family:'Baloo 2', sans-serif;
  font-size:15px;
  color:var(--forest);
  margin:8px 0 6px;
}
.game-card p{font-size:13px;line-height:1.5;color:var(--muted);margin:0;}

@media (max-width:860px){
  .landing-columns{flex-direction:column;}
  .login-panel{flex:none;width:100%;position:static;order:-1;}
}

/* --- my pets: wide layout, mascot on the side --- */
.pets-layout{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.pet-mascot-col{flex:0 0 260px;position:sticky;top:20px;}
.pets-main-col{flex:1;min-width:0;}
@media (max-width:860px){
  .pets-layout{flex-direction:column;}
  .pet-mascot-col{flex:none;width:100%;position:static;order:-1;}
}

/* --- legal / footer content pages --- */
.legal-card{text-align:left;}
.legal-card p{line-height:1.6;margin:0 0 14px;}
.section-heading-dark{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--forest);
  margin:20px 0 8px;
}
.section-heading-dark:first-of-type{margin-top:4px;}
.data-source-list{margin:0 0 14px;padding-left:20px;line-height:1.7;}

/* --- site footer --- */
.site-footer{
  width:100%;
  margin-top:48px;
  background:rgba(0,0,0,0.25);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:32px 20px 20px;
}
.site-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px;
}
.footer-brand{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:18px;color:var(--cream);margin:0 0 6px;}
.footer-brand span{color:var(--gold);}
.footer-tagline{font-size:12.5px;color:#D8E8DF;opacity:0.75;margin:0;max-width:320px;}
.footer-col h4{font-family:'Baloo 2', sans-serif;font-size:13px;color:var(--gold);margin:0 0 10px;}
.footer-col a{display:block;font-size:13px;color:#D8E8DF;text-decoration:none;opacity:0.85;margin-bottom:8px;}
.footer-col a:hover{opacity:1;text-decoration:underline;}
.footer-copy{max-width:1180px;margin:24px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);font-size:12px;color:#D8E8DF;opacity:0.6;text-align:center;}
@media (max-width:640px){
  .site-footer-inner{grid-template-columns:1fr;}
}

.card{
  position:relative;
  background:var(--cream);
  color:var(--ink);
  border-radius:22px;
  padding:26px 22px 24px;
  box-shadow:var(--shadow);
  min-height:200px;
}
.game-start-gate{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border-radius:22px;
}
.game-start-gate-inner{text-align:center;padding:20px;}
.game-start-gate-emoji{font-size:40px;margin:0 0 10px;}
.game-start-gate-text{
  font-family:'Nunito', sans-serif;
  color:var(--muted);
  font-size:14px;
  margin:0 0 18px;
  max-width:260px;
}
.card-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--forest);
  margin:0 0 14px;
  text-align:center;
}
.muted{color:var(--muted);font-size:14px;}
.center{text-align:center;}

/* --- login page --- */
.player-list{margin-bottom:18px;}
.player-row-form{margin-bottom:8px;}
.player-row{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  background:var(--forest);
  color:var(--cream);
  border:none;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
}
.player-row:hover{background:var(--forest-light);}
.player-row.disabled{opacity:0.4;cursor:not-allowed;}
.player-row.disabled:hover{background:var(--forest);}
.flower-count{color:var(--gold);}
.section-label{
  font-family:'Baloo 2', sans-serif;
  font-size:13px;
  color:var(--muted);
  margin:14px 0 8px;
}

/* --- level toggle --- */
.level-toggle{
  display:flex;
  gap:8px;
  background:rgba(0,0,0,0.06);
  padding:5px;
  border-radius:14px;
}
.level-toggle.small{max-width:280px;}
.level-btn{
  flex:1;
  text-align:center;
  text-decoration:none;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:14px;
  color:var(--forest);
  background:transparent;
  border:none;
  border-radius:10px;
  padding:10px 8px;
  cursor:pointer;
}
.level-btn.active{
  background:var(--forest);
  color:var(--cream);
}
.level-toggle.locked{background:rgba(0,0,0,0.03);}
.level-toggle.locked .level-btn.active{
  background:var(--gold);
  color:var(--forest-dark);
  cursor:default;
}

/* --- ranking page extras --- */
.leader-status{
  background:#FCEFD6;
  border-radius:12px;
  padding:10px 14px;
  font-size:13.5px;
  color:var(--forest-dark);
  margin:0 0 16px;
  text-align:center;
}
.table-scroll{overflow-x:auto;}
.tips-box{
  margin-top:22px;
  background:var(--forest);
  color:var(--cream);
  border-radius:16px;
  padding:16px 18px;
}
.tips-title{
  font-family:'Baloo 2', sans-serif;
  font-size:15px;
  margin:0 0 10px;
  color:var(--gold);
}
.tips-list{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.6;
  color:#E7F0EA;
}
.tips-list li{margin-bottom:4px;}
.add-player-form{display:flex;gap:8px;}
.add-player-form input{
  flex:1;
  font-family:'Nunito',sans-serif;
  font-size:15px;
  padding:11px 12px;
  border-radius:12px;
  border:2px solid var(--forest-light);
  outline:none;
}
.text-input{
  width:100%;
  font-family:'Nunito',sans-serif;
  font-size:15px;
  padding:11px 12px;
  border-radius:12px;
  border:2px solid var(--forest-light);
  outline:none;
}
.stacked-form{display:flex;flex-direction:column;gap:10px;}
.error-text{color:var(--coral);font-size:13px;margin:0;text-align:center;}
.success-text{color:var(--good);font-size:13px;margin:0;text-align:center;}
.field-hint{color:var(--muted);font-size:12px;margin:-4px 0 0;}
.password-panel{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  background:rgba(0,0,0,0.03);
  border:2px solid var(--forest-light);
}
.admin-player-card{
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid #E4DCC8;
}
.admin-player-card:last-child{border-bottom:none;margin-bottom:0;}
.year-check-row{display:flex;flex-wrap:wrap;gap:8px;}
.year-check{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,0.05);
  padding:9px 14px;
  border-radius:10px;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--forest);
  cursor:pointer;
}
.year-check input{accent-color:var(--forest);width:16px;height:16px;}

/* --- coin shop --- */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin-top:16px;
}
.shop-item{
  position:relative;
  background:rgba(0,0,0,0.04);
  border:2px solid var(--forest-light);
  border-radius:14px;
  padding:16px 10px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
/* Tier escalates the card's own look — plain for common, progressively
   more colour/glow/motion for rare -> epic -> legendary — so spending
   more visibly buys more than just a different picture. */
.shop-item-rare{
  background:linear-gradient(160deg, rgba(74,158,227,0.14), rgba(74,158,227,0.05));
  border-color:#4A9EE3;
  box-shadow:0 2px 8px rgba(74,158,227,0.18);
}
.shop-item-epic{
  background:linear-gradient(160deg, rgba(155,89,214,0.18), rgba(155,89,214,0.06));
  border-color:#9B59D6;
  box-shadow:0 0 14px rgba(155,89,214,0.35);
}
.shop-item-legendary{
  background:linear-gradient(160deg, rgba(227,167,58,0.22), rgba(232,102,79,0.08));
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(227,167,58,0.5);
  animation:shop-legendary-glow 2.2s ease-in-out infinite;
}
@keyframes shop-legendary-glow{
  0%, 100%{box-shadow:0 0 12px rgba(227,167,58,0.45);}
  50%{box-shadow:0 0 22px rgba(227,167,58,0.75);}
}
.shop-item-equipped{outline:3px solid var(--good);outline-offset:2px;}
.shop-tier-badge{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:9.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  color:#fff;
}
.shop-tier-common{background:#8B9B93;}
.shop-tier-rare{background:#4A9EE3;}
.shop-tier-epic{background:#9B59D6;}
.shop-tier-legendary{background:linear-gradient(90deg, var(--gold), var(--coral));}
.shop-item-emoji{font-size:34px;line-height:1;}
.shop-item-legendary .shop-item-emoji{font-size:38px;filter:drop-shadow(0 0 6px rgba(227,167,58,0.7));}
.shop-item-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--forest);
  margin:0;
}
.shop-item-cost{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  margin:0;
}
.shop-item-tag{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:12px;
  color:var(--gold-dark);
  background:rgba(227,167,58,0.25);
  padding:5px 10px;
  border-radius:999px;
}
.shop-item .btn-primary:disabled, .shop-item .btn-primary[disabled]{
  opacity:0.45;
  cursor:not-allowed;
  box-shadow:none;
}

/* --- my pets --- */
.pet-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin-top:16px;
}
.pet-card{
  border:2px solid var(--forest-light);
  border-radius:16px;
  padding:16px;
  text-align:left;
  position:relative;
  overflow:visible;
}
.pet-card.pet-card-level-up{animation:pet-card-level-up-flash 1.5s ease;}
.pet-card-equipped{outline:3px solid var(--good);outline-offset:2px;}
.pet-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pet-card-emoji{font-size:40px;line-height:1;transition:font-size 0.2s ease;}
.pet-card-emoji.pet-card-emoji-grown-1{font-size:48px;filter:drop-shadow(0 0 5px rgba(227,167,58,0.5));}
.pet-card-emoji.pet-card-emoji-grown-2{font-size:56px;filter:drop-shadow(0 0 9px rgba(227,167,58,0.85));}
.pet-card-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--forest);
  margin:0;
}
.pet-card-species{font-size:12px;color:var(--muted);margin:2px 0 0;}
.pet-progress-track{
  height:10px;
  background:rgba(0,0,0,0.08);
  border-radius:999px;
  overflow:hidden;
}
.pet-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--gold), var(--coral));
  border-radius:999px;
  transition:width 0.7s cubic-bezier(.34,1.56,.64,1);
}
.pet-progress-label{font-size:11.5px;color:var(--muted);margin:6px 0 0;text-align:center;}
.pet-growth-popup{
  position:absolute;
  top:10px;
  right:14px;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:15px;
  color:#2e7d32;
  background:rgba(255,255,255,0.95);
  padding:3px 10px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  animation:pet-growth-popup-float 1.4s ease-out forwards;
  pointer-events:none;
  z-index:3;
}
@keyframes pet-growth-popup-float{
  0%{transform:translateY(6px) scale(0.85);opacity:0;}
  15%{transform:translateY(0) scale(1.15);opacity:1;}
  30%{transform:translateY(0) scale(1);opacity:1;}
  100%{transform:translateY(-32px) scale(1);opacity:0;}
}
@keyframes pet-card-level-up-flash{
  0%{box-shadow:0 0 0 0 rgba(227,167,58,0);}
  15%{box-shadow:0 0 0 8px rgba(227,167,58,0.45);}
  50%{box-shadow:0 0 0 14px rgba(227,167,58,0.15);}
  100%{box-shadow:0 0 0 0 rgba(227,167,58,0);}
}
.pet-mascot-levelup-banner{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  color:#8a5a00;
  background:linear-gradient(90deg, var(--gold), var(--coral));
  padding:4px 12px;
  border-radius:999px;
  box-shadow:0 3px 8px rgba(0,0,0,0.22);
  animation:pet-mascot-levelup-float 1.8s ease-out forwards;
  pointer-events:none;
  z-index:4;
}
@keyframes pet-mascot-levelup-float{
  0%{transform:translate(-50%, 8px) scale(0.8);opacity:0;}
  15%{transform:translate(-50%, 0) scale(1.15);opacity:1;}
  35%{transform:translate(-50%, 0) scale(1);opacity:1;}
  100%{transform:translate(-50%, -26px) scale(1);opacity:0;}
}

/* --- pet mascot widget (my pets sidebar) --- */
.pet-mascot-card{
  border:2px solid var(--forest-light);
  border-radius:16px;
  padding:20px 14px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
}
.pet-mascot-stage{
  position:relative;
  height:110px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}
.pet-mascot-emoji{
  font-size:64px;
  line-height:1;
  display:inline-block;
  transition:font-size 0.2s ease;
}
.pet-mascot-emoji.pet-mascot-emoji-grown-1{font-size:76px;filter:drop-shadow(0 0 6px rgba(227,167,58,0.55));}
.pet-mascot-emoji.pet-mascot-emoji-grown-2{font-size:88px;filter:drop-shadow(0 0 10px rgba(227,167,58,0.85));}
.pet-mascot-emoji.pet-mascot-stand{animation:pet-mascot-bob 1.8s ease-in-out infinite;}
.pet-mascot-emoji.pet-mascot-sleep{animation:pet-mascot-sleep-sway 3.2s ease-in-out infinite;opacity:0.85;}
.pet-mascot-emoji.pet-mascot-jump{animation:pet-mascot-jump 0.6s ease-out 2;}
.pet-mascot-zzz{
  position:absolute;
  top:2px;
  right:calc(50% - 46px);
  font-size:20px;
  animation:pet-mascot-heart-float 2.4s ease-in-out infinite;
}
.pet-mascot-heart{
  position:absolute;
  bottom:40%;
  font-size:18px;
  animation:pet-mascot-heart-float 1s ease-out forwards;
  pointer-events:none;
}
.pet-mascot-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--forest);
  margin:10px 0 0;
}
.pet-mascot-level{font-size:12px;color:var(--muted);margin:2px 0 0;}

@keyframes pet-mascot-bob{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
@keyframes pet-mascot-sleep-sway{
  0%, 100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}
@keyframes pet-mascot-jump{
  0%{transform:translateY(0) scale(1);}
  30%{transform:translateY(-26px) scale(1.08);}
  55%{transform:translateY(0) scale(0.96);}
  75%{transform:translateY(-10px) scale(1.03);}
  100%{transform:translateY(0) scale(1);}
}
@keyframes pet-mascot-heart-float{
  0%{transform:translateY(0);opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(-46px);opacity:0;}
}

/* --- buttons --- */
.btn-primary, .btn-secondary, .btn-outline{
  display:inline-block;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  text-align:center;
  border:none;
  border-radius:14px;
  padding:13px 16px;
  cursor:pointer;
}
.btn-primary{background:var(--gold);color:var(--forest-dark);box-shadow:0 5px 0 var(--gold-dark);}
.btn-primary:active{transform:translateY(3px);box-shadow:none;}
.btn-secondary{background:var(--forest);color:var(--cream);flex:1;}
.btn-outline{background:transparent;color:var(--forest);border:2px solid var(--forest-light);flex:1;}
.btn-block{display:block;width:100%;}
.btn-row{display:flex;gap:10px;margin-top:10px;}
/* six-plus game buttons wrap onto a second line instead of spilling out of the card */
.hub-section .btn-row{flex-wrap:wrap;}
.hub-section .btn-row > a,.hub-section .btn-row > span{flex:1 1 30%;}

/* --- hub page --- */
.hub-section{margin-bottom:22px;}
.hub-section h2{
  font-family:'Baloo 2', sans-serif;
  font-size:16px;
  color:var(--forest);
  margin:0 0 4px;
}
.hub-section p{margin:0 0 10px;}

/* --- ranking page --- */
.ranking-table{width:100%;border-collapse:collapse;font-size:14px;}
.ranking-table th{
  text-align:left;
  font-family:'Baloo 2', sans-serif;
  font-size:12px;
  color:var(--muted);
  padding:8px 6px;
  border-bottom:2px solid var(--forest-light);
}
.ranking-table td{padding:9px 6px;border-bottom:1px solid #E4DCC8;}
.ranking-table tr.me{background:#FCEFD6;}

/* --- game page --- */
.game-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--cream);
  margin-bottom:8px;
}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:'Baloo 2', sans-serif;font-size:14px;color:#CFE3D9;}
.hud .pill{background:rgba(0,0,0,0.2);padding:5px 12px;border-radius:999px;}
.progress-track{height:8px;background:rgba(0,0,0,0.25);border-radius:999px;overflow:hidden;margin-bottom:18px;}
.progress-fill{height:100%;background:#8FCB9B;width:0%;transition:width 0.3s ease;}

.category-tag{display:inline-block;font-size:12px;font-weight:700;background:var(--forest);color:var(--cream);padding:4px 11px;border-radius:999px;margin-bottom:14px;}
.speak-row{display:flex;justify-content:center;gap:12px;margin:6px 0 20px;}
.speak-btn{width:84px;height:84px;border-radius:50%;border:none;background:var(--forest);color:var(--cream);font-size:32px;cursor:pointer;box-shadow:0 6px 0 var(--forest-dark);display:flex;align-items:center;justify-content:center;transition: transform 0.08s ease;}
.speak-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--forest-dark);}
.sentence-btn{align-self:center;background:none;border:2px solid var(--forest);color:var(--forest);font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:12px;cursor:pointer;display:block;margin:0 auto 20px;}

.answer-input{width:100%;font-family:'Baloo 2', sans-serif;font-size:22px;text-align:center;padding:14px 10px;border-radius:14px;border:3px solid var(--forest-light);background:#fff;color:var(--ink);letter-spacing:1px;outline:none;}
.answer-input.wrong{border-color:var(--coral);}
.answer-input.right{border-color:var(--good);}

.clue{text-align:center;font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 18px;min-height:22px;}

.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px;min-height:44px;}
.tile{font-family:'Baloo 2', sans-serif;font-weight:700;font-size:20px;width:42px;height:46px;border-radius:10px;border:none;background:var(--gold);color:var(--forest-dark);cursor:pointer;box-shadow:0 4px 0 var(--gold-dark);}
.tile:active{transform:translateY(3px);box-shadow:none;}

.answer-slot{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;min-height:52px;margin-bottom:16px;padding:8px;border-radius:12px;border:2px dashed var(--forest-light);}
.answer-slot .tile{background:var(--forest);color:var(--cream);box-shadow:0 4px 0 var(--forest-dark);}

.actions{display:flex;gap:10px;margin-top:6px;}
.btn{flex:1;font-family:'Baloo 2', sans-serif;font-weight:700;font-size:16px;padding:13px 10px;border-radius:14px;border:none;cursor:pointer;}
.btn-gold{background:var(--gold);color:var(--forest-dark);box-shadow:0 5px 0 var(--gold-dark);}
.btn-gold:active{transform:translateY(3px);box-shadow:none;}
.btn-ghost{background:transparent;color:var(--forest);border:2px solid var(--forest-light);}

.feedback{text-align:center;font-family:'Baloo 2', sans-serif;font-weight:700;font-size:16px;margin-top:14px;min-height:24px;}
.feedback.correct{color:var(--good);}
.feedback.incorrect{color:var(--coral);}

.end-card{text-align:center;}
.end-card .score-big{font-family:'Baloo 2', sans-serif;font-size:52px;font-weight:800;color:var(--forest);margin:6px 0 2px;}
.end-card p{color:var(--muted);margin:0 0 20px;}

@media (max-width:380px){
  .speak-btn{width:72px;height:72px;font-size:26px;}
  .tile{width:36px;height:42px;font-size:17px;}
}

/* --- bubble pop game --- */
.tile-placeholder{
  background:transparent;
  box-shadow:none;
  border:2px dashed var(--forest-light);
  color:transparent;
}
.bubble-pond{
  position:relative;
  height:260px;
  margin:2px 0 18px;
  border-radius:18px;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%),
    linear-gradient(180deg, rgba(36,91,79,0.14) 0%, rgba(23,60,52,0.07) 100%);
  border:2px dashed var(--forest-light);
  overflow:hidden;
}
.bubble-pond::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.14), transparent);
  pointer-events:none;
}
.bubble{
  position:absolute;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:21px;
  color:#fff;
  padding:0;
  cursor:pointer;
  border:none;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
  box-shadow:
    inset -7px -7px 12px rgba(0,0,0,0.18),
    inset 6px 6px 10px rgba(255,255,255,0.35),
    0 5px 10px rgba(0,0,0,0.22);
  transition: transform 0.18s ease, opacity 0.18s ease;
  will-change: transform, bottom, left;
  user-select:none;
}
.bubble:active{transform:scale(0.9);}
.bubble.pop{
  transform:scale(1.7);
  opacity:0;
  pointer-events:none;
}
@media (max-width:380px){
  .bubble{width:44px;height:44px;font-size:17px;}
  .bubble-pond{height:220px;}
}

/* --- snake spell game --- */
.snake-status-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.snake-status-row .pill{
  background:rgba(0,0,0,0.06);
  color:var(--forest-dark);
}
.timer-track{
  height:8px;
  background:rgba(0,0,0,0.15);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:10px;
}
.timer-fill{
  height:100%;
  background:var(--coral);
  width:100%;
  transition:width 0.1s linear, background-color 0.3s ease;
}
.timer-fill.low{background:#B8302A;}
.snake-board-wrap{
  position:relative;
  margin:0 0 14px;
}
.snake-board{
  display:grid;
  grid-template-columns:repeat(15,1fr);
  grid-template-rows:repeat(11,1fr);
  gap:2px;
  width:100%;
  aspect-ratio:15/11;
  background:rgba(0,0,0,0.05);
  border:2px solid var(--forest-light);
  border-radius:14px;
  padding:4px;
  overflow:hidden;
  touch-action:none;
}
.snake-reaction{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(14,38,33,0.92);
  border-radius:14px;
  text-align:center;
  padding:16px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:5;
}
.snake-reaction.show{opacity:1;}
.snake-reaction-emoji{
  font-size:clamp(34px, 10vw, 48px);
  line-height:1;
  animation:snake-reaction-pop 0.35s ease;
}
.snake-reaction-msg{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:15px;
  color:var(--cream);
  max-width:90%;
}
.snake-reaction.good .snake-reaction-msg{color:#9FE0B0;}
.snake-reaction.bad .snake-reaction-msg{color:#F0B0A8;}
@keyframes snake-reaction-pop{
  0%{transform:scale(0.6);opacity:0;}
  65%{transform:scale(1.18);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}
.snake-cell{
  position:relative;
  border-radius:4px;
  background:rgba(255,255,255,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:10px;
  color:var(--forest-dark);
  transition:background-color 0.1s ease;
}
.snake-cell.snake-body{background:var(--forest-light);}
.snake-cell.snake-head{background:var(--forest);}
.snake-cell.letter-tile{background:var(--gold);color:var(--forest-dark);}
/* Crowned = this player has a shop hat equipped. Rendered as the head
   cell's own content (contained within the cell's box, so it can never
   get clipped by the board's overflow:hidden). */
.snake-cell.snake-head.crowned{
  background:var(--gold);
  font-size:15px;
  box-shadow:0 0 0 2px var(--gold-dark) inset;
}
.dpad{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:4px 0 8px;
}
.dpad-mid{display:flex;gap:6px;align-items:center;}
.dpad-btn{
  width:52px;
  height:52px;
  border-radius:14px;
  border:none;
  background:var(--forest);
  color:var(--cream);
  font-size:20px;
  cursor:pointer;
  box-shadow:0 4px 0 var(--forest-dark);
}
.dpad-btn:active{transform:translateY(3px);box-shadow:none;}
@media (max-width:380px){
  .dpad-btn{width:44px;height:44px;font-size:17px;}
  .snake-cell{font-size:8px;}
}

/* --- rolling announcement ticker (login page) --- */
.announcement-ticker{
  overflow:hidden;
  white-space:nowrap;
  background:rgba(0,0,0,0.05);
  border:1px solid var(--forest-light);
  border-radius:12px;
  padding:9px 0;
}
.announcement-track{
  display:inline-flex;
  animation:announcement-scroll 16s linear infinite;
}
.announcement-item{
  display:inline-block;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  color:var(--forest);
  white-space:nowrap;
}
@keyframes announcement-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* --- coin badges (bronze/silver/gold) — drawn in CSS rather than emoji,
   since medal emoji (🥉🥈🥇) don't render reliably on every Windows/
   browser/font combination. This renders identically everywhere. --- */
.coin-badge{
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  vertical-align:middle;
  margin:0 3px 2px 0;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.25);
}
.coin-bronze{background:linear-gradient(145deg, #d18a4a, #9c5a24);}
.coin-silver{background:linear-gradient(145deg, #e7e7e7, #a9a9a9);}
.coin-gold{background:linear-gradient(145deg, #ffdd66, #d4a017);}


/* --- sheep rescue game --- */
.shoot-coin-rule{
  text-align:center;
  font-size:13px;
  color:var(--forest-dark);
  background:#FCEFD6;
  border-radius:12px;
  padding:10px 14px;
  margin:0 0 14px;
  line-height:1.45;
}
.shoot-coin-rule strong{color:var(--forest);}
.shoot-speak-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0 0 12px;
}
.speak-mini-btn{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  padding:8px 14px;
  border-radius:12px;
  border:2px solid var(--forest-light);
  background:#fff;
  color:var(--forest);
  cursor:pointer;
  box-shadow:0 3px 0 rgba(23,60,52,0.12);
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.speak-mini-btn:active{
  transform:translateY(2px);
  box-shadow:none;
}
.speak-mini-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.shoot-arena{margin:10px 0 14px;}
.shoot-sky{
  position:relative;
  height:250px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,220,120,0.55) 0%, transparent 28%),
    linear-gradient(180deg, #7ec8e8 0%, #b8e0f4 45%, #e8f6fb 100%);
  border:2px solid var(--forest-light);
  border-radius:14px 14px 0 0;
  overflow:hidden;
  touch-action:none;
}
.shoot-sun{
  position:absolute;
  top:12px;
  right:18px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6c8, #ffd54a 55%, #f0a020);
  box-shadow:0 0 18px 6px rgba(255,200,60,0.45);
  pointer-events:none;
  z-index:0;
}
.shoot-cloud{
  position:absolute;
  background:rgba(255,255,255,0.78);
  border-radius:40px;
  pointer-events:none;
  z-index:0;
  box-shadow:12px 6px 0 -2px rgba(255,255,255,0.55), -10px 4px 0 -4px rgba(255,255,255,0.4);
}
.shoot-cloud.c1{width:54px;height:18px;top:22%;left:8%;animation:cloud-drift 28s linear infinite;}
.shoot-cloud.c2{width:72px;height:22px;top:12%;left:42%;animation:cloud-drift 36s linear infinite reverse;}
.shoot-cloud.c3{width:48px;height:16px;top:38%;left:68%;animation:cloud-drift 32s linear infinite;}
@keyframes cloud-drift{
  0%{transform:translateX(0);}
  50%{transform:translateX(18px);}
  100%{transform:translateX(0);}
}

/* Ground = grassy hill (high left) dropping to a real cliff on the right */
.shoot-ground{
  position:relative;
  height:90px;
  background:linear-gradient(180deg, #5a8f3a 0%, #3d6b28 40%, #2f5220 100%);
  border:2px solid var(--forest-light);
  border-top:none;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}
.shoot-hill-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
.shoot-hill-fill{
  fill:#c4a86a;
}
.shoot-hill-edge{
  stroke:#8a7348;
  stroke-width:2.5;
  stroke-linecap:round;
}
.shoot-cliff-face{
  fill:#7a5a3a;
}
.shoot-cliff-crack{
  stroke:#4a3520;
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:0.7;
}

.shoot-track{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  z-index:2;
  pointer-events:none;
}
.shoot-sheep{
  position:absolute;
  left:6%;
  bottom:58%;
  font-size:30px;
  line-height:1;
  animation:sheep-bob 1.6s ease-in-out infinite;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.2));
  pointer-events:none;
  z-index:3;
}
@keyframes sheep-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}
.shoot-monster{
  position:absolute;
  left:35%;
  bottom:42%;
  font-size:30px;
  line-height:1;
  transition:left 0.4s ease, bottom 0.4s ease;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.25));
  z-index:4;
  pointer-events:none;
  transform-origin:center bottom;
}
/* --- a worn cosmetic/crown, perched above whatever character it's on
   (monster, swimmer, maze runner) — sized in em so it scales with each
   host element's own font-size instead of needing per-game tuning. A
   hat worn ON the head, not a second glyph sitting beside it. --- */
.worn-cosmetic{
  position:absolute;
  left:50%;
  top:-0.5em;
  transform:translateX(-50%);
  font-size:0.62em;
  line-height:1;
  pointer-events:none;
  z-index:1;
}
/* A pet companion — walks alongside its owner, to the right, at foot
   level, rather than perched on top like a hat. Also sized in em so it
   scales with whatever character it's following. */
.worn-pet{
  position:absolute;
  left:100%;
  bottom:-0.05em;
  margin-left:0.05em;
  font-size:0.68em;
  line-height:1;
  pointer-events:none;
  z-index:1;
  transition:font-size 0.2s ease;
}
/* Levelling up visibly grows the pet badge itself, in-game and
   everywhere else it's shown — not just a number on the My Pets page. */
.worn-pet.worn-pet-grown-1{
  font-size:0.8em;
  filter:drop-shadow(0 0 3px rgba(227,167,58,0.55));
}
.worn-pet.worn-pet-grown-2{
  font-size:0.95em;
  filter:drop-shadow(0 0 6px rgba(227,167,58,0.85));
}
.shoot-monster.hit{animation:shoot-monster-hit 0.3s ease;}
.shoot-monster.creep{animation:shoot-monster-creep 0.3s ease;}
.shoot-monster.falling{
  transition:none;
  animation:shoot-monster-fall 1s ease-in forwards;
}
@keyframes shoot-monster-hit{
  0%{transform:scale(1);}
  40%{transform:scale(1.22) translateX(8px);}
  100%{transform:scale(1);}
}
@keyframes shoot-monster-creep{
  0%{transform:scale(1);}
  50%{transform:scale(0.88) translateX(-5px);}
  100%{transform:scale(1);}
}
@keyframes shoot-monster-fall{
  0%{
    transform:translate(0,0) rotate(0deg) scale(1);
    opacity:1;
  }
  25%{
    transform:translate(12px, 8px) rotate(25deg) scale(1.05);
    opacity:1;
  }
  55%{
    transform:translate(28px, 55px) rotate(110deg) scale(0.95);
    opacity:0.9;
  }
  100%{
    transform:translate(40px, 120px) rotate(200deg) scale(0.7);
    opacity:0;
  }
}

/* Dust/splash when the monster hits the bottom of the cliff */
.shoot-splash{
  position:absolute;
  right:8%;
  bottom:4px;
  width:48px;
  height:24px;
  z-index:5;
  pointer-events:none;
  opacity:0;
}
.shoot-splash.show{
  animation:shoot-splash-burst 0.7s ease-out forwards;
}
.shoot-splash::before,
.shoot-splash::after{
  content:"";
  position:absolute;
  bottom:0;
  border-radius:50%;
  background:rgba(90,70,40,0.55);
}
.shoot-splash::before{
  left:4px; width:16px; height:16px;
}
.shoot-splash::after{
  right:4px; width:12px; height:12px;
  background:rgba(120,90,50,0.45);
}
@keyframes shoot-splash-burst{
  0%{opacity:0; transform:scale(0.4) translateY(6px);}
  30%{opacity:1; transform:scale(1.2) translateY(0);}
  100%{opacity:0; transform:scale(1.6) translateY(-8px);}
}

.falling-letter{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:12px;
  border:none;
  background:linear-gradient(160deg, #ffe08a 0%, var(--gold) 55%, var(--gold-dark) 100%);
  color:var(--forest-dark);
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:18px;
  cursor:pointer;
  box-shadow:
    0 4px 0 var(--gold-dark),
    inset 0 2px 0 rgba(255,255,255,0.45);
  padding:0;
  z-index:3;
  transition:transform 0.08s ease;
  text-shadow:0 1px 0 rgba(255,255,255,0.35);
  will-change: transform, left, top;
}
.falling-letter.flying{
  background:linear-gradient(160deg, #ffe08a 0%, var(--gold) 55%, var(--gold-dark) 100%);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.25),
    0 0 14px rgba(227,167,58,0.55);
  cursor:default;
}
.falling-letter.impact{
  background:var(--good);
  box-shadow:0 0 18px rgba(31,122,76,0.7);
  transform:scale(1.4) !important;
  opacity:0;
  transition:opacity 0.12s ease, transform 0.12s ease;
}
.falling-letter:active{transform:scale(0.92);}
.falling-letter.pop-good{
  animation:falling-letter-pop 0.28s ease forwards;
  pointer-events:none;
  background:linear-gradient(160deg, #6dca8e, var(--good));
  box-shadow:0 0 0 transparent;
}
.falling-letter.pop-bad{
  animation:falling-letter-pop 0.28s ease forwards;
  pointer-events:none;
  background:linear-gradient(160deg, #f0a090, var(--coral));
  box-shadow:0 0 0 transparent;
}
@keyframes falling-letter-pop{
  0%{transform:scale(1);opacity:1;}
  60%{transform:scale(1.45) rotate(8deg);opacity:0.7;}
  100%{transform:scale(1.9) rotate(-6deg);opacity:0;}
}
@media (max-width:380px){
  .shoot-sky{height:210px;}
  .shoot-ground{height:78px;}
  .shoot-sheep,.shoot-monster{font-size:24px;}
  .falling-letter{width:36px;height:36px;font-size:15px;}
  .speak-mini-btn{font-size:12px;padding:7px 11px;}
}

/* --- landing page games showcase --- */
.game-showcase{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin-top:8px;
}
.game-showcase-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:rgba(0,0,0,0.05);
  border:2px solid var(--forest-light);
  border-radius:14px;
  padding:14px 8px;
}
.game-showcase-icon{font-size:30px;line-height:1;}
.game-showcase-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--forest);
  text-align:center;
}
/* --- melody maker: 3-part arena (float / soundtrack / float) --- */
.melody-arena{
  display:flex;
  gap:8px;
  margin:14px 0 6px;
  align-items:stretch;
}
.melody-side{
  flex:0 0 24%;
  position:relative;
  min-height:300px;
  background:linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.06) 100%);
  border:2px solid var(--forest-light);
  border-radius:14px;
  overflow:hidden;
  touch-action:none;
}
.melody-float-letter{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:17px;
  color:#fff;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,0.25), inset 0 -3px 4px rgba(0,0,0,0.15);
  padding:0;
}
.melody-float-letter.pop-good{animation:melody-float-good 0.28s ease forwards;pointer-events:none;}
.melody-float-letter.pop-bad{animation:melody-float-bad 0.28s ease;}
@keyframes melody-float-good{
  0%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.8);opacity:0;}
}
@keyframes melody-float-bad{
  0%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  50%{transform:translateX(5px);}
  75%{transform:translateX(-3px);}
  100%{transform:translateX(0);}
}
.melody-track{
  flex:1;
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,0.03);
  border:2px solid var(--forest-light);
  border-radius:14px;
  padding:8px;
  min-height:300px;
}
.melody-track-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}
.melody-track-empty{
  font-family:'Nunito', sans-serif;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin:auto;
  line-height:1.5;
}
.melody-track-row{
  /* Coloured by that word's backing chord (I/IV/V/vi) so the track list
     visually reads as the song's chord progression, not one flat colour. */
  background:hsl(var(--row-hue, 42) 80% 55%);
  color:var(--forest-dark);
  border:none;
  border-radius:8px;
  padding:9px 10px;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 3px 0 hsl(var(--row-hue, 42) 70% 38%);
}
.melody-track-row:active{transform:translateY(2px);box-shadow:none;}
@media (max-width:380px){
  .melody-side{flex-basis:22%;min-height:260px;}
  .melody-track{min-height:260px;}
  .melody-float-letter{width:34px;height:34px;font-size:14px;}
  .melody-track-row{font-size:11.5px;padding:7px 8px;}
}

/* --- beat pulse, tap ripple, mini equalizer --- */
#melodyCard.melody-pulse{animation:melody-card-pulse 0.4s ease;}
@keyframes melody-card-pulse{
  0%{box-shadow:var(--shadow), 0 0 0 0 hsla(var(--pulse-hue, 42), 85%, 55%, 0.55);}
  60%{box-shadow:var(--shadow), 0 0 0 10px hsla(var(--pulse-hue, 42), 85%, 55%, 0);}
  100%{box-shadow:var(--shadow), 0 0 0 10px hsla(var(--pulse-hue, 42), 85%, 55%, 0);}
}
.melody-ripple{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid hsl(var(--ripple-hue, 42) 85% 60%);
  pointer-events:none;
  animation:melody-ripple-pop 0.5s ease-out forwards;
}
@keyframes melody-ripple-pop{
  0%{transform:scale(1);opacity:0.9;}
  100%{transform:scale(2.4);opacity:0;}
}
.melody-eq{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
  height:22px;
  margin-top:8px;
}
.melody-eq[hidden]{display:none;}
.melody-eq span{
  width:5px;
  border-radius:3px;
  background:var(--gold);
  animation:melody-eq-bounce 0.9s ease-in-out infinite;
}
.melody-eq span:nth-child(1){animation-delay:0s;}
.melody-eq span:nth-child(2){animation-delay:0.12s;}
.melody-eq span:nth-child(3){animation-delay:0.24s;}
.melody-eq span:nth-child(4){animation-delay:0.36s;}
.melody-eq span:nth-child(5){animation-delay:0.18s;}
@keyframes melody-eq-bounce{
  0%, 100%{height:6px;}
  50%{height:22px;}
}
.speak-mini-btn.tapped{animation:speak-mini-tapped 0.3s ease;}
@keyframes speak-mini-tapped{
  0%{transform:scale(1);}
  50%{transform:scale(1.12);}
  100%{transform:scale(1);}
}

/* --- swim carnival --- */
.swim-pool{
  display:flex;
  gap:6px;
  margin:12px 0;
}
.swim-lane{
  position:relative;
  flex:1;
  height:360px;
  background:linear-gradient(180deg, #8fd8f2 0%, #2f8ec7 100%);
  border:2px solid var(--forest-light);
  border-radius:12px;
  overflow:hidden;
}
.swim-lane.you{box-shadow:0 0 0 3px var(--gold) inset;}
.swim-lane-water-lines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 16px);
  pointer-events:none;
}
.swim-finish-line{
  position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg, #fff 0 8px, #222 8px 16px);
  z-index:3;
}
.swim-lane-name{
  position:absolute;
  top:10px;left:0;right:0;
  text-align:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:11px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.45);
  z-index:5;
  pointer-events:none;
}
.swimmer{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:26px;
  bottom:2%;
  transition:bottom 0.5s ease;
  z-index:4;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
.swimmer.splash::after{
  content:"💦";
  position:absolute;
  left:50%;
  top:60%;
  transform:translateX(-50%);
  font-size:14px;
  animation:swim-splash 0.5s ease infinite;
}
@keyframes swim-splash{
  0%{opacity:0.9;transform:translateX(-50%) translateY(0);}
  100%{opacity:0;transform:translateX(-50%) translateY(6px);}
}
.swim-bubble{
  position:absolute;
  border-radius:50%;
  border:none;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  color:#fff;
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.25));
  opacity:0.5;
  cursor:pointer;
  padding:0;
  touch-action:none;
}
.swim-bubble.decorative{pointer-events:none;}
.swim-bubble.pop{animation:swim-bubble-pop 0.2s ease forwards;pointer-events:none;}
@keyframes swim-bubble-pop{
  0%{transform:scale(1);opacity:0.5;}
  100%{transform:scale(1.8);opacity:0;}
}
@media (max-width:380px){
  .swim-lane{height:280px;}
  .swimmer{font-size:20px;}
}

/* --- maze run --- */
.maze-playground{
  display:flex;
  gap:6px;
  margin:12px 0;
}
.maze-route{
  position:relative;
  flex:1;
  height:360px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #b89468 0%, #7a5a38 100%);
  border:2px solid var(--forest-light);
  border-radius:12px;
  overflow:hidden;
}
.maze-route-name{
  position:absolute;
  top:10px;left:0;right:0;
  text-align:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:11px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.45);
  z-index:6;
  pointer-events:none;
}
.maze-exit-line{
  position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg, #fff 0 8px, #222 8px 16px);
  z-index:3;
}
.maze-runner{
  position:absolute;
  transform:translateX(-50%);
  font-size:24px;
  bottom:2%;
  transition:bottom 0.5s ease, left 0.3s ease;
  z-index:4;
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.maze-runner.knocked{animation:maze-knockback 0.8s cubic-bezier(.36,.07,.19,.97); z-index:6;}
@keyframes maze-knockback{
  0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1); filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));}
  15%{transform:translateX(-50%) translateY(-8px) scale(1.3); filter:drop-shadow(0 0 10px rgba(255,40,40,0.95)) brightness(1.4);}
  45%{transform:translateX(-50%) translateY(20px) rotate(-20deg) scale(0.85); filter:drop-shadow(0 0 10px rgba(255,40,40,0.9)) brightness(1.2);}
  70%{transform:translateX(-50%) translateY(-5px) rotate(8deg) scale(1.05); filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));}
  100%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(1); filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));}
}
.maze-hit-ring{
  position:absolute;
  width:10px;
  height:10px;
  margin-left:-5px;
  margin-bottom:-5px;
  border:3px solid rgba(255,50,50,0.9);
  border-radius:50%;
  pointer-events:none;
  z-index:7;
  animation:maze-hit-ring-pulse 0.6s ease-out forwards;
}
@keyframes maze-hit-ring-pulse{
  0%{width:10px;height:10px;margin-left:-5px;margin-bottom:-5px;opacity:1;}
  100%{width:64px;height:64px;margin-left:-32px;margin-bottom:-32px;opacity:0;}
}
.maze-skeleton{
  position:absolute;
  transform:translateX(-50%);
  font-size:20px;
  bottom:2%;
  transition:bottom 1.1s linear, left 0.4s ease;
  z-index:2;
  pointer-events:none;
  opacity:0.55;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.maze-skeleton.on-path{
  opacity:1;
  font-size:22px;
  filter:drop-shadow(0 0 5px rgba(255,60,60,0.85));
}
.maze-wall{
  position:absolute;
  transform:translateX(-50%);
  width:34px;
  height:27px;
  background:repeating-linear-gradient(45deg, #5c4326 0 4px, #4a3520 4px 8px);
  border:1px solid rgba(0,0,0,0.35);
  border-radius:2px;
  z-index:1;
  pointer-events:none;
}
.maze-star{
  position:absolute;
  transform:translateX(-50%);
  font-size:20px;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 4px rgba(255,215,0,0.9));
  transition:opacity 0.3s ease, transform 0.3s ease, bottom 0.5s ease;
}
.maze-star.collected{
  opacity:0;
  transform:translateX(-50%) scale(1.8);
}
.maze-bubble{
  position:absolute;
  border-radius:50%;
  border:none;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  color:#fff;
  background:radial-gradient(circle at 30% 28%, rgba(255,225,150,0.95), rgba(150,100,40,0.35));
  opacity:0.75;
  cursor:pointer;
  padding:0;
  z-index:5;
  touch-action:none;
}
.maze-bubble.decorative{pointer-events:none;}
.maze-bubble.pop{animation:maze-bubble-pop 0.2s ease forwards;pointer-events:none;}
@keyframes maze-bubble-pop{
  0%{transform:scale(1);opacity:0.75;}
  100%{transform:scale(1.8);opacity:0;}
}
@media (max-width:380px){
  .maze-route{height:280px;}
  .maze-runner{font-size:19px;}
  .maze-skeleton{font-size:16px;}
  .maze-star{font-size:16px;}
}

/* --- parent / family dashboard --- */
.notice-text{
  background:rgba(31,122,76,0.12);
  color:var(--good);
  border-radius:10px;
  padding:8px 12px;
  margin:10px 0;
  font-size:13.5px;
  font-weight:700;
  text-align:center;
}
textarea.text-input{resize:vertical;min-height:120px;font-family:inherit;line-height:1.45;}
.family-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:16px;
  margin:18px 0;
}
.family-card{text-align:left;}
.family-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;}
.family-name{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:20px;color:var(--forest);margin:0;}
.family-streak{font-size:12.5px;font-weight:800;color:var(--gold-dark);white-space:nowrap;}
.week-strip{display:flex;gap:6px;margin-bottom:12px;}
.week-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.week-day-dot{
  width:100%;
  max-width:38px;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(0,0,0,0.07);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:transparent;
}
.week-day-on .week-day-dot{background:var(--good);color:#fff;}
.week-day-label{font-size:10.5px;color:var(--muted);font-weight:700;}
.stat-tiles{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;}
.stat-tile{
  background:rgba(0,0,0,0.04);
  border-radius:12px;
  padding:8px 4px;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.stat-num{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:19px;color:var(--forest);line-height:1.2;}
.stat-label{font-size:10.5px;color:var(--muted);font-weight:700;}
.family-forms{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin-top:8px;
  text-align:left;
}
.limit-row{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;font-weight:700;color:var(--ink);}
.limit-row small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:2px;}
.limit-input{width:92px;flex:0 0 92px;text-align:center;}
.list-banner{
  background:rgba(227,167,58,0.16);
  border:2px solid var(--gold);
  border-radius:14px;
  padding:10px 14px;
  font-size:13.5px;
  color:var(--ink);
  text-align:center;
  margin:0 0 18px;
}

/* --- word chips (parent list view, My Words) --- */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.chip-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 18px;}
.word-chip{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  border:2px solid transparent;
  line-height:1.4;
}
.word-chip-mastered{background:var(--good);color:#fff;}
.word-chip-learning{background:rgba(227,167,58,0.28);color:var(--gold-dark);border-color:rgba(227,167,58,0.6);}
.word-chip-tricky{background:rgba(232,102,79,0.16);color:#B23A26;border-color:rgba(232,102,79,0.55);}
.word-chip-new{background:transparent;color:var(--muted);border-color:rgba(0,0,0,0.16);font-weight:600;}
.mastered-total{text-align:center;margin:6px 0 0;font-weight:700;color:var(--forest);}
.mastered-total-num{font-family:'Baloo 2', sans-serif;font-size:36px;font-weight:800;color:var(--good);margin-right:4px;}
.year-progress{
  border:2px solid var(--forest-light);
  border-radius:14px;
  padding:10px 14px;
  margin-bottom:10px;
  text-align:left;
}
.year-progress summary{
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 10px;
  align-items:center;
  list-style:none;
}
.year-progress summary::-webkit-details-marker{display:none;}
.year-progress-title{font-family:'Baloo 2', sans-serif;font-weight:800;font-size:17px;color:var(--forest);}
.year-progress-count{font-weight:800;color:var(--muted);font-size:14px;}
.year-progress-track{grid-column:1 / -1;display:block;}
.year-progress .chip-row{margin-top:12px;}

/* --- "why it's spelled that way" tip after a miss --- */
.miss-hint{
  display:block;
  margin-top:6px;
  font-size:0.92em;
  font-weight:600;
  color:var(--forest);
}
.miss-hint::before{content:"💡 ";}

/* --- sound & reading settings (floating widget) --- */
.spell-settings-btn{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:50;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:var(--forest);
  color:var(--cream);
  font-size:20px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.spell-settings-panel{
  position:fixed;
  left:12px;
  bottom:64px;
  z-index:51;
  width:min(300px, calc(100vw - 24px));
  background:var(--cream);
  color:var(--ink);
  border:2px solid var(--forest-light);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  text-align:left;
}
.spell-settings-panel[hidden]{display:none;}
.spell-settings-panel h3{font-family:'Baloo 2', sans-serif;margin:0 0 10px;font-size:17px;color:var(--forest);}
.spell-settings-panel label{display:block;font-size:13px;font-weight:700;margin:10px 0 4px;}
.spell-settings-panel select{width:100%;padding:8px;border-radius:10px;border:2px solid var(--forest-light);font:inherit;background:#fff;}
.spell-seg{display:flex;gap:6px;}
.spell-seg button{
  flex:1;
  padding:8px 6px;
  border-radius:10px;
  border:2px solid var(--forest-light);
  background:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.spell-seg button.on{background:var(--forest);color:var(--cream);}
.spell-settings-panel .spell-test{width:100%;margin-top:12px;}

/* --- easy-read (dyslexia-friendly) font --- */
html[data-font="easy"] body,
html[data-font="easy"] body *:not(.coin-badge){
  font-family:'Atkinson Hyperlegible', 'Nunito', sans-serif !important;
  letter-spacing:0.02em;
}

/* Snake Spell: Clear / Check row sits between the letter tiles and the timer */
.snake-actions{margin:12px 0 16px;}


/* --- Sheep Rescue: clear button, monster reactions and shout bubbles --- */
.shoot-actions{display:flex;justify-content:center;margin:-8px 0 12px;}
.monster-shout{
  position:absolute;
  left:50%;
  bottom:112%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:0.03em;
  padding:2px 10px;
  border-radius:12px;
  border:2px solid var(--forest);
  background:#fff;
  color:var(--forest-dark);
  pointer-events:none;
  z-index:6;
  animation:monster-shout-pop 1.5s ease-out forwards;
}
.monster-shout.laugh{background:#fff3c4;color:#8a5a00;}
.monster-shout.cry{background:#d9ecff;color:#1a4f8a;}
.monster-shout.fall{background:#ffd9d3;color:#a3301d;font-size:16px;}
@keyframes monster-shout-pop{
  0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(0.6);}
  12%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.15);}
  25%{transform:translateX(-50%) translateY(0) scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(1);}
}
.shoot-monster.laughing{animation:shoot-monster-laugh 0.95s ease;}
.shoot-monster.crying{animation:shoot-monster-cry 1.1s ease;}
.shoot-monster.arrive{animation:shoot-monster-arrive 0.9s ease;}
@keyframes shoot-monster-laugh{
  0%,100%{transform:rotate(0) scale(1);}
  10%{transform:rotate(-14deg) scale(1.25);}
  25%{transform:rotate(12deg) scale(1.15);}
  40%{transform:rotate(-12deg) scale(1.25);}
  55%{transform:rotate(10deg) scale(1.15);}
  70%{transform:rotate(-8deg) scale(1.2);}
  85%{transform:rotate(6deg) scale(1.1);}
}
@keyframes shoot-monster-cry{
  0%{transform:scale(1) translateY(0);}
  15%{transform:scale(1.3, 0.8) translateY(2px);}
  35%{transform:scale(0.85, 1.25) translateY(-6px);}
  55%{transform:scale(1.15, 0.9) translateY(0);}
  75%{transform:scale(0.95, 1.1) translateY(-3px);}
  100%{transform:scale(1) translateY(0);}
}
@keyframes shoot-monster-arrive{
  0%{opacity:0;transform:scale(0.3) translateY(-20px);}
  60%{opacity:1;transform:scale(1.15) translateY(0);}
  100%{opacity:1;transform:scale(1);}
}


/* --- Sheep Rescue ladder: bosses, stage pill and the clock --- */
#shoot-root .hud{flex-wrap:wrap;gap:6px;}
.hud .pill.boss{background:#7a3ea1;color:#fff;font-weight:800;}
.hud #hudClock.low{background:#a3301d;color:#fff;animation:clock-low-pulse 1s ease-in-out infinite;}
@keyframes clock-low-pulse{50%{opacity:0.55;}}
.shoot-monster.kind-boss{font-size:42px;}
.shoot-monster.kind-final{font-size:54px;}
.monster-shout.boss{background:#e8d9ff;color:#4a1a8a;font-size:16px;}
@media (max-width:380px){
  .shoot-monster.kind-boss{font-size:34px;}
  .shoot-monster.kind-final{font-size:42px;}
}

/* shout bubbles live in the sky, just above the ground line */
.shoot-sky > .monster-shout{bottom:6px;}

/* --- plans (free vs Family) --- */
.plans-card{max-width:760px;margin:0 auto;}
.plan-table{margin:18px 0;border-radius:14px;overflow:hidden;border:2px solid var(--forest-light);}
.plan-row{display:grid;grid-template-columns:1fr 110px 130px;align-items:stretch;gap:0;padding:0 0 0 14px;border-top:1px solid rgba(0,0,0,0.08);}
.plan-row > span{display:flex;align-items:center;justify-content:center;padding:10px 8px;}
.plan-row > .plan-feature{justify-content:flex-start;padding-left:0;}
.plan-row:first-child{border-top:none;}
.plan-head{background:var(--forest);color:var(--cream);font-family:'Baloo 2', sans-serif;font-weight:800;}
.plan-head .plan-col-family{color:var(--gold);background:transparent;}
.plan-val{text-align:center;font-weight:700;}
.plan-col-family{background:rgba(233,168,58,0.12);text-align:center;}
.plan-yes{color:var(--good);font-size:18px;}
.plan-no{color:#8a958f;}
.plan-feature{font-size:14.5px;}
.plan-cta{text-align:center;margin-top:8px;}
.plan-status{font-weight:700;margin:6px 0 12px;}
.plan-need{background:rgba(233,168,58,0.18);border:2px solid var(--gold);border-radius:12px;padding:10px 14px;margin:12px 0;}
.plan-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-family:'Baloo 2', sans-serif;font-weight:800;font-size:13px;background:#8a958f;color:#fff;}
.plan-badge.plan-family{background:var(--gold);color:var(--forest-dark);}
.plan-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,0.06);font-size:13.5px;}
.plan-banner-family{background:rgba(233,168,58,0.16);}
.game-locked{opacity:0.78;border-style:dashed;}
.chapter-premium{opacity:0.78;}
.chapter-premium .chapter-num{background:var(--gold);color:var(--forest-dark);}
@media (max-width:600px){
  .plan-row{grid-template-columns:1fr 70px 90px;padding-left:10px;}
  .plan-feature{font-size:13px;}
}

/* --- temporary personal birthday banner on the hub (see SPECIAL_BANNERS in app.py) --- */
.birthday-banner{
  margin:0 0 18px;
  padding:18px 18px 16px;
  border-radius:20px;
  text-align:center;
  background:linear-gradient(135deg,#F7DA8C 0%,var(--gold) 100%);
  color:var(--forest-dark);
  box-shadow:var(--shadow);
}
.birthday-icons{font-size:30px;letter-spacing:6px;margin-bottom:6px;animation:birthday-bob 2.4s ease-in-out infinite;}
.birthday-msg{margin:0;font-size:19px;font-weight:800;line-height:1.45;}
.birthday-gift{margin:12px 0 0;font-size:21px;font-weight:900;line-height:1.3;}
.birthday-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;}
.birthday-more{
  display:inline-block;
  padding:9px 18px;
  text-decoration:none;
  border:0;
  border-radius:999px;
  background:var(--forest);
  color:var(--cream);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.birthday-more:hover{background:var(--forest-light);}
button.birthday-more{background:transparent;color:var(--forest-dark);box-shadow:inset 0 0 0 2px var(--forest-dark);}
button.birthday-more:hover{background:rgba(14,38,33,0.12);}
.birthday-more[hidden]{display:none;}
@keyframes birthday-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@media (prefers-reduced-motion: reduce){.birthday-icons{animation:none;}}

/* --- where do you live: spelling style + voice accent --- */
.region-select{max-width:260px;margin-bottom:6px;}
.region-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(0,0,0,0.1);font-weight:700;}
.region-form .field-hint{flex-basis:100%;text-align:center;margin:0;}

/* --- landing page: sign-up prompt under the hero text --- */
.hero-note{font-size:13px;color:#B9D2C6;margin:14px auto 0;max-width:620px;line-height:1.5;}

/* --- contact form --- */
.contact-label{font-weight:700;font-size:14px;margin:6px 0 -4px;}
.contact-label .muted{font-weight:400;font-size:12px;}
select.text-input{background:#fff;}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}