:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  height:100%;
  margin:0;
  font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: #e8eef7;
  background: linear-gradient(135deg, #0d2818 0%, #1a3d28 25%, #2d5a3d 50%, #1a3d28 75%, #0d2818 100%);
  background-attachment: fixed;
  overflow:hidden !important;
  overscroll-behavior:none;
  position:fixed;
  inset:0;
}

.contact-info {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  color: #cfd8e3;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  user-select: none;
  pointer-events: none;
}
/* Loading Screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d1420 0%, #1a2332 50%, #0d1420 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  max-width: 400px;
  padding: 20px;
}

.loading-logo {
  margin-bottom: 40px;
}

.loading-title {
  font-family: 'Chewy', cursive;
  font-size: clamp(28px, 6vw, 48px);
  color: #e8eef7;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.title-accent {
  color: #32c458;
}

.loading-progress {
  margin-bottom: 30px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #32c458 0%, #4ade80 50%, #32c458 100%);
  border-radius: 6px;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #cfd8e3;
}

.loading-tips {
  font-size: 16px;
  color: #94a3b8;
  font-style: italic;
}

#loading-tip {
  margin: 0;
  opacity: 0.8;
}

.wrap { 
  max-width: 1200px; 
  margin: 24px auto; 
  padding: 0 12px; 
  width: 100%;
  box-sizing: border-box;
}

/* Hide main content during loading */
body:not(.loaded) .wrap > *:not(.loading-screen) {
  opacity: 0;
  pointer-events: none;
}
/* Safe-area support for iOS notch when using viewport-fit=cover */
html, body { padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
body.fullscreen-fallback .stage { /* ensure stage uses full safe area */
  padding: 0;
  margin: 0;
}
/* Orientation overlay */
.rotate-overlay { position:fixed; inset:0; background:#0b1c2f; display:none; align-items:center; justify-content:center; z-index:3000; }
.rotate-overlay .rotate-msg { font-family:'Chewy', cursive; font-size: clamp(20px,5vw,42px); color:#ffffff; text-align:center; padding:20px; }
.rotate-overlay.show { display:flex; }

@media (orientation:portrait) and (max-width: 900px) {
  .rotate-overlay { display:flex; }
  .stage > *:not(.rotate-overlay) { opacity:0; pointer-events:none; }
}

/* Fallback fullscreen class (for iOS or denied Fullscreen API) */
body.fullscreen-fallback, body.fullscreen-fallback html {
  width:100%; height:100%; margin:0; padding:0; overflow:hidden;
}
body.fullscreen-fallback .wrap { margin:0 !important; padding:0 !important; max-width:100% !important; }
body.fullscreen-fallback .stage { width:100vw !important; height:100vh !important; border-radius:0 !important; box-shadow:none !important; }
body.fullscreen-fallback canvas#game { width:100% !important; height:100% !important; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin: 4px 8px 10px; gap:12px; }
.banner { 
  color:#cfd8e3; min-height: 24px;
  font-family:'ubuntu', cursive;
  font-weight: 400;
  font-style: normal;
 }
.scorebar { 
  font-family:'ubuntu', cursive;
  font-weight: 400;
  font-style: normal;
  opacity:.9; }

.stage {
  position:relative; border-radius:16px; overflow:hidden;
  background:#0c1a2a;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Fullscreen button */
/* Removed fullscreen button styles */
canvas#game { 
  width: 100%; 
  height: auto; 
  display: block; 
  max-width: 100%;
  background: #0c1a2a;
  aspect-ratio: 960/540; /* Exact game aspect ratio for proper scaling */
}
/* Mobile landscape centering & letterbox handling */
body.mobile-landscape, body.mobile-landscape html { overflow:hidden; }
body.mobile-landscape, body.mobile-landscape html { height:100svh; padding:0 !important; overscroll-behavior:none; }
body.mobile-landscape, body.mobile-landscape html { overflow:hidden !important; }
body.mobile-landscape .wrap { background:linear-gradient(135deg,#0d2818,#1a3d28 40%,#0d2818); width:100%; margin:0 !important; padding:0 !important; display:flex; align-items:center; justify-content:center; overflow:hidden; position:fixed; inset:0; height:100svh; max-height:100svh; }
body.mobile-landscape .stage { margin:0 auto; display:flex; justify-content:center; align-items:center; background:#0c1a2a; flex:0 0 auto; }
/* Prevent stage from exceeding mobile physical target box (JS sets actual size inline) */
body.mobile-landscape .stage {
  max-width:529px; /* ~14cm width cap */
  min-height:0 !important; /* remove base min-height to avoid extra vertical space */
  height:auto; /* allow JS-assigned explicit height to take effect */
}
body.mobile-landscape canvas#game { display:block; margin:0 auto; }

/* In-play scores */
.inplay-score, .inplay-set {
  position:absolute; pointer-events:none; user-select:none;
  font-family:'Chewy', 'Londrina Shadow', cursive;
  /* text-shadow intentionally minimal; add back if glow desired */
  line-height:1; font-weight:400;
}
.inplay-score { font-size: clamp(35px, 5.5vw, 70px); top:14px; color:#ffffff; display:flex; align-items:flex-start; gap:8px; }
.score-wrapper-left { flex-direction:row; }
.score-wrapper-right { flex-direction:row; justify-content:flex-end; }
.inplay-score .score-num { line-height:0.9; display:inline-block; }

/* Set badges (circle dots) */
.set-badges { display:flex; gap:4px; padding-top:6px; }
.set-badges span { width:14px; height:14px; border-radius:50%; background:#ffffff18; box-shadow:0 0 0 1px rgba(255,255,255,0.15) inset; transition:background .25s ease, box-shadow .25s ease; }
.set-badges span.won { background:#32c458; box-shadow:0 0 4px #32c458aa, 0 0 0 1px rgba(255,255,255,0.18) inset; }
@media (max-width:900px){ .set-badges span { width:12px; height:12px; } }
@media (max-width:600px){ .set-badges span { width:10px; height:10px; } .set-badges { gap:3px; } }
.inplay-score-left { left:28px; }
.inplay-score-right { right:28px; }
.inplay-set { top:20px; left:50%; transform:translateX(-50%); font-size: clamp(20px, 2.8vw, 36px); letter-spacing:0.5px; color:#269b4d; }

/* Touch meter */
.touch-meter {
  position:absolute;
  top:72px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Chewy', cursive;
  font-size: clamp(14px, 2vw, 22px);
  color:#ffffff;
  background:rgba(0,0,0,0.32);
  padding:3px 10px 5px;
  border-radius:22px;
  letter-spacing:0.5px;
  display:flex;
  gap:6px;
  align-items:center;
  backdrop-filter: blur(3px);
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.12);
  min-width:120px;
  justify-content:center;
  pointer-events:none;
}

/* Lower HUD elements on mobile landscape (stage smaller) */
body.mobile-landscape .inplay-score { top:60px; font-size:clamp(24px,4.2vw,48px); }
/* Refine mobile landscape score sizing & edge proximity */
body.mobile-landscape .inplay-score { font-size:clamp(20px,3.8vw,42px); }
body.mobile-landscape .inplay-score-left { left:12px; }
body.mobile-landscape .inplay-score-right { right:12px; }
body.mobile-landscape .inplay-set { top:53px; }
/* Touch meter closer to set indicator */
body.mobile-landscape .touch-meter { 
  top:75px; 
  /* Additional ~20% reduction (0.6 -> 0.48) */
  transform:translateX(-50%) scale(.48); 
  transform-origin: top center; 
  padding:3px 10px 5px; 
  width:auto; 
  min-width:120px; 
  max-width:none; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  gap:6px; 
  font-size: clamp(14px, 2vw, 18px); 
  letter-spacing:0.5px; 
}
body.mobile-landscape .touch-meter span.dot { width:12px; height:12px; flex:0 0 12px; margin:0; }
/* Smaller set badges on mobile landscape */
body.mobile-landscape .set-badges { gap:3px; padding-top:4px; }
body.mobile-landscape .set-badges span { width:9px; height:9px; }

/* Further reduce Rules / How to Play overlay on mobile landscape */
body.mobile-landscape .rules-content { width:62%; height:380px; padding:6px 10px 8px; transform:translateY(-5px); }
body.mobile-landscape .rules-title { font-size:18px; }
body.mobile-landscape .rules-text { font-size:9px; max-height:300px; line-height:1.1; }
body.mobile-landscape .rules-section p b { font-size:10px; }
body.mobile-landscape .rules-content .btn-wooden { font-size:28px; padding:8px 14px; }
body.mobile-landscape .control-img { height:28px; }
.touch-meter span.dot {
  width:12px; height:12px; border-radius:50%; background:#ffffff22; position:relative; box-shadow:0 0 0 2px rgba(255,255,255,0.12) inset;
}
.touch-meter span.dot.filled { background:var(--dot-color,#32c458); box-shadow:0 0 6px var(--dot-color), 0 0 0 2px rgba(255,255,255,0.15) inset; }
.touch-meter span.dot.over { background:#ff4f4f; box-shadow:0 0 6px #ff4f4faa, 0 0 0 2px rgba(255,255,255,0.15) inset; }
/* Utility: temporary hide (used while How to Play overlay is open) */
.temporarily-hidden { display:none !important; }

/* Touch meter diagram in rules */
.touch-meter-diagram { margin:6px auto 2px; width:100%; display:flex; justify-content:center; align-items:center; }
.touch-meter-diagram svg { max-width:120px; height:auto; display:flex; }

/* Set Announcement */
.set-announcement {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.set-announcement.show {
  opacity: 1;
  visibility: visible;
}

.set-announcement-content {
  text-align: center;
  color: #ffffff;
  font-family: 'Chewy', cursive;
}

.set-title {
  font-size: clamp(36px, 6vw, 80px);
  margin: 0 0 20px 0;
  color: #269b4d;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(38, 155, 77, 0.3);
  transform: translateY(50px);
  opacity: 0;
  animation: none;
}

.set-title.animate {
  animation: set-title-enter 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.serve-prompt {
  font-size: clamp(14px, 2.5vw, 22px);
  margin: 0;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

.serve-prompt.animate {
  animation: serve-prompt-enter 0.8s ease forwards;
}

@keyframes set-title-enter {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes serve-prompt-enter {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width:700px){
  .inplay-score { font-size: clamp(40px, 10vw, 78px); }
  .inplay-set { font-size: clamp(28px, 7vw, 48px); top:16px; }
  .inplay-score-left { left:14px; color:#ffffff;}
  .inplay-score-right { right:14px; color:#ffffff;}
}

.hint { opacity:.65; font-size:12px; margin:10px 6px; }

/* Score Animation */
@keyframes scoreAnimation {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px);
  }
}

/* Overlays */
.overlay {
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  backdrop-filter: blur(3px);
}
.overlay.show { display:flex; }

/* Default panel (no longer used for Settings; we use wooden sign) */
/* .panel remains if you need it somewhere else */

/* ---------- Wooden sign menu & animations ---------- */

.sign {
  font-family:'chewy', cursive;
  position: relative;
  width: min(86vw, 720px);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
  transform: translateY(120%) scale(.98);
  opacity: 0;
  margin-top: 16px; /* nudge sign position if needed */
}
/* Ensure wooden sign never overflows the game canvas on phone landscape */
body.mobile-landscape .sign {
  width: min(90vw, 420px); /* shrink max width on phones */
  margin-top: 4px;
}
body.mobile-landscape #menu .sign-inner .title { font-size: clamp(22px, 5.2vw, 34px); }
body.mobile-landscape #menu .sign-inner .btn { font-size: clamp(14px, 3.6vw, 20px); padding:6px 4px; }
/* Difficulty / settings signs also shrink */
body.mobile-landscape .sign--settings { width: min(92vw, 440px); }
body.mobile-landscape .sign--settings .title { font-size: clamp(18px, 4.8vw, 30px); }
body.mobile-landscape .sign--settings .btn { font-size: clamp(13px, 3.4vw, 18px); }
body.mobile-landscape .sign--difficulty { width: min(92vw, 440px); }
body.mobile-landscape .sign--difficulty .title { font-size: clamp(18px, 4.8vw, 30px); }
body.mobile-landscape .sign--difficulty .diff-buttons .btn { font-size: clamp(18px, 4.2vw, 26px); }

/* Difficulty selection overlay */
.sign--difficulty .diff-buttons{
  display:flex; flex-direction:column; gap:0px; width:100%; margin-top:4px;
  align-items:center; /* Center all difficulty buttons */
}
.sign--difficulty .diff-buttons .btn{ 
  font-family:'Chewy', cursive; 
  padding:4px 6px; 
  line-height:1.05; 
  font-size:clamp(22px,3.2vw,34px);
  letter-spacing:-0.5px;
  margin:0;
  width:100%; /* Ensure consistent width */
  text-align:center; /* Center text within buttons */
}
.sign--difficulty .title{ margin:0 0 2px; line-height:0.95; text-align:center; }
.sign--difficulty #btn-diff-back{ margin-top:6px; font-size:clamp(20px, 3vw, 30px); padding:6px 8px; text-align:center; }

/* Difficulty Info Box */
.difficulty-info {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.difficulty-info.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.info-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.info-text {
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.info-text p {
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .difficulty-info {
    right: 20px;
    width: 250px;
    padding: 12px;
  }
  
  .info-image {
    height: 100px;
  }
  
  .info-text {
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .difficulty-info {
    position: fixed;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    width: 90%;
    max-width: 280px;
  }
  
  .difficulty-info.show {
    transform: translateX(50%) translateY(0);
  }
}
.overlay.show .sign { animation: sign-pop-up 650ms cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes sign-pop-up {
  0%   { transform: translateY(120%) scale(.98); opacity: 0; }
  60%  { transform: translateY(-8px)  scale(1.00); opacity: 1; }
  100% { transform: translateY(0)     scale(1.00); opacity: 1; }
}

.sign-img { display:block; width:100%; height:auto; pointer-events:none; user-select:none; }

.sign-inner{
  font-family:'chewy', cursive;
  position:absolute;
  inset:-8% 9% 20% 9%;     /* keep text inside the wooden board */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; /* center vertically */
  gap:0px; text-align:center;
}

/* Staggered visibility without animations - title first, then buttons */
.sign-inner > * { opacity: 1; transform: translateY(0); }

/* Title-specific animation */
#menu .sign-inner .title { 
    opacity: 0; 
    transform: scale(0.8) translateY(-10px);
    animation: title-appear 0.6s ease forwards;
    animation-delay: 0.1s;
}

@keyframes title-appear {
    0% { 
        opacity: 0; 
        transform: scale(0.8) translateY(-10px); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.05) translateY(-5px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* Menu-specific timing: buttons hidden initially, shown with delay */
#menu .sign-inner .btn { opacity: 0; transition: opacity 0.1s ease; }
#menu.text-in .sign-inner .btn:nth-child(2) { transition-delay: 0.3s; }
#menu.text-in .sign-inner .btn:nth-child(3) { transition-delay: 0.4s; }
#menu.text-in .sign-inner .btn:nth-child(4) { transition-delay: 0.5s; }
#menu.text-in .sign-inner .btn:nth-child(5) { transition-delay: 0.6s; }
#menu.text-in .sign-inner .btn { opacity: 1; }

/* Title on the sign (menu) */
.sign-inner .title{
  margin:0 0 6px;
  font-size:clamp(32px, 4.5vw, 52px);
  color:#3b2a12;
  text-shadow:0 2px 0 #000000, 0 3px 0 rgba(0,0,0,.08);
  font-family: 'Chewy', 'Londrina Shadow', cursive;
}
.sign-inner .title .title-accent{
  color:#269b4d;
  /* text-shadow: 0 2px 0 #b4f3c9, 0 3px 6px rgba(0,0,0,0.25); */
}

/* Text-only menu items (no boxes) */
.sign-inner .btn{
  all:unset;
  display:block; width:100%; text-align:center; cursor:pointer;
  padding:8px 6px;
  font-family: 'Chewy', 'Londrina Shadow', cursive;
  font-weight: 400;
  font-style: normal;
  font-size:clamp(20px, 3.2vw, 30px);
  line-height:1.2; color:#3b2a12;
  text-shadow: 0 1px 0 #000000, 0 2px 0 rgba(0,0,0,.08);
  transition: color .15s ease, transform .06s ease;
}


.sign-inner .btn + .btn { margin-top:2px; }
.sign-inner .btn:hover { color:#269b4d; transform: translateY(-1px); }
.sign-inner .btn:active{ transform: translateY(0); }

/* ---------- Settings wooden sign overrides ---------- */
.sign--settings .sign-inner{
  inset:-8% 9% 18% 9%; /* a bit more bottom room */
  gap:0px;
}
.sign--settings .title{
  font-size: clamp(24px, 3.8vw, 38px);
  margin: 0 0 2px;
}
/* Pond volume row */
.sign--settings .row--settings{
  width:100%; display:flex; align-items:center; gap:10px;
  margin: 4px 0 10px;
}
.sign--settings .row--settings.row--stack{ /* stacked label on top */
  flex-direction:column; align-items:center; gap:6px;
}
.sign--settings .row--settings.row--inline{ /* inline label on left */
  flex-direction:row; align-items:center; gap:8px;
  justify-content:center;
}
.sign--settings .row--settings.row--stack input[type=range]{ width:100%; }
.sign--settings .row--inline input[type=range]{ 
  flex:1; min-width:120px; max-width:200px; 
}
.sign--settings .settings-block-label{
  font-family:'Quicksand', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color:#3b2a12; line-height:1.1; text-align:center; width:100%;
}
.sign--settings .row--inline .settings-block-label{
  width:auto; text-align:left; flex-shrink:0; min-width:80px;
}
.sign--settings .row--settings label{ /* fallback for non-stacked rows */
  font-family:'Quicksand', sans-serif;
  font-size: clamp(14px, 2vw, 18px);
  color:#3b2a12; white-space: nowrap;
}
.sign--settings #ambience-volume{
  flex:none; width:68%; max-width:260px; align-self:center;
  accent-color:#269b4d; /* fallback */
  appearance:none; -webkit-appearance:none; height:28px; background:transparent; cursor:pointer;
}
/* WebKit track */
.sign--settings #ambience-volume::-webkit-slider-runnable-track{
  height:16px; background:linear-gradient(#f8e2b3,#e4c27d);
  border:2px solid #7d541c; border-radius:10px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 #fff4d7;
}
/* WebKit thumb */
.sign--settings #ambience-volume::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-6px;
  background:radial-gradient(circle at 35% 35%, #3fbf62, #269b4d 60%, #1f7d3d 100%);
  border:2px solid #14542a; border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.4);
  transition: transform .12s ease;
}
.sign--settings #ambience-volume::-webkit-slider-thumb:hover{ transform:scale(1.08); }
.sign--settings #ambience-volume::-webkit-slider-thumb:active{ transform:scale(0.96); }
/* Firefox */
.sign--settings #ambience-volume::-moz-range-track{
  height:16px; background:linear-gradient(#f8e2b3,#e4c27d);
  border:2px solid #7d541c; border-radius:10px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 #fff4d7;
}
.sign--settings #ambience-volume::-moz-range-progress{
  height:16px; background:linear-gradient(#e9cf96,#d8b26a);
  border:2px solid #7d541c; border-radius:10px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 #fff4d7;
}
.sign--settings #ambience-volume::-moz-range-thumb{
  width:26px; height:26px;
  background:radial-gradient(circle at 35% 35%, #3fbf62, #269b4d 60%, #1f7d3d 100%);
  border:2px solid #14542a; border-radius:50%;
  box-shadow:0 2px 3px rgba(0,0,0,.35), inset 0 1px 2px rgba(255,255,255,.4);
  cursor:pointer; transition: transform .12s ease;
}
.sign--settings #ambience-volume::-moz-range-thumb:hover{ transform:scale(1.08); }
.sign--settings #ambience-volume::-moz-range-thumb:active{ transform:scale(0.96); }
/* Edge/IE (fallback) */
.sign--settings #ambience-volume::-ms-track{ height:16px; background:transparent; border-color:transparent; color:transparent; }
.sign--settings #ambience-volume::-ms-fill-lower{ background:#d8b26a; border:2px solid #7d541c; border-radius:10px; }
.sign--settings #ambience-volume::-ms-fill-upper{ background:#f8e2b3; border:2px solid #7d541c; border-radius:10px; }
.sign--settings #ambience-volume::-ms-thumb{ width:26px; height:26px; background:#269b4d; border:2px solid #14542a; border-radius:50%; box-shadow:0 2px 3px rgba(0,0,0,.35); }
/* How-to list on the sign */
.settings-list{
  font-family:'Quicksand', sans-serif;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height:1.25; color:#21415b; text-align:center;
  display:grid; gap:4px; margin:4px 0 6px;
}
/* Back as text-only link */
.sign--settings .btn{
  all:unset;
  display:block; width:100%; text-align:center; cursor:pointer;
  padding:8px 6px;
  font-family:'Chewy', 'Londrina Shadow', cursive;
  font-size: clamp(22px, 3.2vw, 30px);
  color:#3b2a12;
  text-shadow: 0 1px 0 #000000, 0 2px 0 rgba(0,0,0,.08);
  transition: color .15s ease, transform .06s ease;
}
.sign--settings .btn:hover{ color:#269b4d; transform: translateY(-1px); }

/* Ball SFX row */
.row--sfx { gap:12px; flex-wrap:wrap; }
.row--sfx .settings-label-inline { display:none; }
.row--sfx .radio-row { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.row--sfx .radio { font-family:'Quicksand', sans-serif; font-size: clamp(12px,1.8vw,16px); display:flex; align-items:center; gap:4px; }
.row--sfx input[type=radio] { accent-color:#269b4d; }

/* Ball Selection row */
.row--ball { gap:12px; flex-wrap:wrap; }
.ball-selection { display:flex; gap:20px; justify-content:center; align-items:center; }
.ball-option { 
  cursor:pointer; 
  padding:8px; 
  border-radius:8px; 
  border:2px solid transparent;
  transition: all 0.2s ease;
  background: rgba(255,255,255,0.1);
}
.ball-option:hover { 
  border-color:#269b4d; 
  background: rgba(38,155,77,0.2);
  transform: scale(1.05);
}
.ball-option.selected { 
  border-color:#269b4d; 
  background: rgba(38,155,77,0.3);
  box-shadow: 0 0 8px rgba(38,155,77,0.5);
}
.ball-preview { 
  width:40px; 
  height:40px; 
  object-fit:contain;
  display:block;
}

/* ---------- Game Rules Overlay ---------- */
.rules-content {
  width:50%;
  height:540px;
  margin:0;
  padding:12px 20px 12px; /* balanced padding */
  color:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* distribute content evenly */
  align-items:center;
  position:relative;
  gap:0; /* remove gap to use space-between */
  transform:translateY(-20px); /* center more properly */
  background-color: #46464695;
  backdrop-filter: blur(8px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow:hidden; /* prevent overflow */
}

.rules-title { font-family:'Chewy', 'Londrina Shadow', cursive; font-size:24px; color:#fff; margin:0; text-shadow:#16532a 1px 0 10px; flex-shrink:0; }

.rules-text { font-family:'Quicksand', sans-serif; font-size:11px; line-height:1.2; display:flex; flex-direction:column; justify-content:space-evenly; gap:4px; max-height:420px; margin:8px 0; flex:1; min-height:0; }

.control-images { display:flex; justify-content:center; align-items:center; gap:20px; margin:4px 0; padding:2px; }

.control-img { height:38px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); transform:translateY(2px); }

.rules-section { margin:3px 0; padding:2px 0; }

.rules-section p { margin:2px 0; }

.rules-section p b { font-size:13px; display:block; margin:0 0 3px; color:#16523a; font-weight:600; }

.rules-section .l-frog {
  color: #16523a;
  font-family: 'quicksand', cursive;
  font-weight: bold;
}

.rules-section .r-frog {
  color: #16523a;
  font-family: 'quicksand', cursive;
  font-weight: bold;
}

.btn-wooden { 
  font-family:'Chewy', cursive; font-size:38px; background:none; border:none; color:#fff; cursor:pointer; padding:12px 20px; margin-top:80px; 
  text-shadow:0 1px 0 #000, 0 2px 0 rgba(0,0,0,.08); transition:transform .2s ease, color .2s ease; display:inline-block; }

/* Rules content button positioning */
.rules-content .btn-wooden {
  margin-top: 0;
  flex-shrink: 0;
}

.btn-wooden:hover {
  text-shadow: 0 1px 0 #000000, 0 2px 0 rgba(0,0,0,.08);
  transform: translateY(-2px);
  color: #269d4b;
}

/* ---------- Match Result Overlay ---------- */
.result-panel {
  padding: 40px 60px 48px;
  text-align: center;
  max-width: 620px;
  width: min(90vw, 620px);
  display:flex;
  flex-direction:column;
  gap:22px;
  animation: result-pop 480ms cubic-bezier(.25,1.1,.3,1) both;
}
@keyframes result-pop {0%{transform:translateY(40px) scale(.92);opacity:0;}70%{transform:translateY(-6px) scale(1.01);}100%{transform:translateY(0) scale(1);opacity:1;}}
.result-title {
  font-family:'Chewy', cursive !important; /* force Chewy over any earlier h1 or inherited styles */
  font-size: clamp(36px,5vw,56px);
  margin:0;
  line-height:1;
  color:#f5f8fb;
  text-shadow:0 3px 10px rgba(0,0,0,0.55);
}
.result-title.win { color:#3fe06d; }
.result-title.lose { color:#ff4f4f; }
.result-sub {
  font-family:'Chewy', cursive;
  font-size: clamp(14px,2vw,20px);
  margin:0 0 4px;
  color:#d5e2ef;
  opacity:.85;
}
.result-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.result-buttons .btn-wooden {
  font-size: 28px;
  margin-top:0;
  padding:12px 34px;
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .25s ease, background .3s;
}
.result-buttons .btn-wooden:active { transform:translateY(1px); }

/* ---------- 14-inch Laptop Responsive Adjustments ---------- */
@media (max-width: 1400px) {
  .wrap { 
    max-width: 1000px; 
    margin: 16px auto; 
    padding: 0 8px; 
    width: 100%;
  }
  
  /* Canvas and stage scaling */
  .stage { 
    max-width: 100%; 
    width: 100%;
  }
  canvas#game { 
    width: 100%; 
    max-width: 100%; 
  }
  
  /* Menu title adjustments */
  .sign-inner .title { font-size: clamp(28px, 4vw, 44px); }
  .sign-inner .btn { font-size: clamp(18px, 2.8vw, 26px); padding: 6px 4px; }
  
  /* Sign scaling for smaller screens */
  .sign { 
    width: min(90vw, 650px); 
    margin-top: 12px;
  }
  
  /* Settings adjustments */
  .sign--settings .title { font-size: clamp(20px, 3.2vw, 32px); }
  .sign--settings .settings-block-label { font-size: clamp(12px, 1.8vw, 16px); }
  .row--sfx .radio { font-size: clamp(10px, 1.5vw, 14px); }
  
  /* Rules/How to play adjustments */
  .rules-content { 
    width: 52%; 
    padding: 10px 16px 10px; 
    gap: 0;
    height: 480px;
    transform: translateY(-15px);
    justify-content: space-between;
    overflow: hidden;
  }
  .rules-title { font-size: 20px; margin: 0; }
  .rules-text { font-size: 10px; line-height: 1.15; max-height: 360px; margin: 6px 0; gap: 3px; justify-content: space-evenly; }
  .rules-section { margin: 2px 0; padding: 1px 0; }
  .rules-section p { margin: 1px 0; }
  .rules-section p b { font-size: 11px; margin: 0 0 2px; }
  .control-img { height: 32px; }
  .control-images { gap: 16px; margin: 3px 0; }
  .rules-content .btn-wooden { font-size: 32px; padding: 10px 16px; margin-top: 0; }
  
  /* Touch meter diagram adjustments */
  .touch-meter-diagram svg { max-width: 100px; }
  
  /* Game UI adjustments */
  .inplay-score { font-size: clamp(30px, 5vw, 60px); }
  .inplay-set { font-size: clamp(18px, 2.5vw, 32px); }
  .set-title { font-size: clamp(32px, 5.5vw, 70px); }
  .serve-prompt { font-size: clamp(12px, 2.2vw, 20px); }
  
  /* Touch meter adjustments */
  .touch-meter { 
    top: 65px;
    padding: 2px 8px 4px;
    gap: 5px;
    min-width: 110px;
  }
  .touch-meter span.dot { 
    width: 10px; 
    height: 10px; 
  }
}

@media (max-width: 1200px) {
  /* Even smaller laptops */
  .sign-inner .title { font-size: clamp(24px, 3.5vw, 38px); }
  .sign-inner .btn { font-size: clamp(16px, 2.5vw, 22px); padding: 5px 3px; }
  
  /* Sign scaling for even smaller screens */
  .sign { 
    width: min(94vw, 580px); 
    margin-top: 8px;
  }
  
  .rules-content { 
    width: 58%; 
    padding: 8px 10px 8px; 
    height: 460px;
    gap: 0;
    transform: translateY(-10px);
    justify-content: space-between;
    overflow: hidden;
  }
  .rules-title { font-size: 17px; margin: 0; }
  .rules-text { font-size: 8.5px; max-height: 340px; line-height: 1.1; margin: 5px 0; gap: 2px; justify-content: space-evenly; }
  .rules-section { margin: 2px 0; padding: 1px 0; }
  .rules-section p { margin: 1px 0; }
  .rules-section p b { font-size: 9.5px; margin: 0 0 1px; }
  .control-img { height: 26px; }
  .control-images { gap: 12px; margin: 2px 0; }
  .rules-content .btn-wooden { font-size: 26px; margin-top: 0; padding: 8px 14px; }
  
  /* Loading screen adjustments */
  .loading-title { font-size: clamp(24px, 5vw, 40px); }
  
  /* Touch meter diagram for smaller screens */
  .touch-meter-diagram svg { max-width: 85px; }
  
  /* Touch meter for smaller screens */
  .touch-meter { 
    top: 60px;
    padding: 2px 6px 3px;
    gap: 4px;
    min-width: 100px;
    font-size: clamp(12px, 1.8vw, 18px);
  }
  .touch-meter span.dot { 
    width: 9px; 
    height: 9px; 
  }
}

@media (max-width: 800px) {
  /* Very small screens - mobile and small tablets */
  .sign { 
    width: min(96vw, 480px); 
    margin-top: 4px;
  }
  .sign-inner .title { font-size: clamp(20px, 4vw, 32px); }
  .sign-inner .btn { font-size: clamp(14px, 3vw, 20px); padding: 4px 2px; }
}