:root{
  --sky-top:#8f8fe0;
  --grass-1:#3fae52;
  --grass-2:#2f9642;
  --path-safe:#f4e9c9;
  --path-poop:#f6d3a3;
  --ink:#2b2b28;
  --card:#fffdf7;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Trebuchet MS', 'Segoe UI', Helvetica, Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:var(--sky-top);
  overflow-x:hidden;
  position:relative;
}
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.sky .landscape{width:100%;height:100%;display:block;}

.landscape .birds-group{animation:birds-glide 7s ease-in-out infinite alternate;}
.landscape .bird{animation:bird-flap 0.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%;}
.landscape .bird-1{animation-delay:0s;}
.landscape .bird-2{animation-delay:.15s;}
.landscape .bird-3{animation-delay:.3s;}
@keyframes birds-glide{
  0%{transform:translate(0,0);}
  100%{transform:translate(160px,-55px);}
}
@keyframes bird-flap{
  0%,100%{transform:translateY(0) scaleY(1);}
  50%{transform:translateY(-8px) scaleY(0.6);}
}

.landscape .cloud-drift{animation:cloud-drift 13s ease-in-out infinite alternate;}
.landscape .cloud-a{animation-duration:14s;}
.landscape .cloud-b{animation-duration:17s;animation-direction:alternate-reverse;}
.landscape .cloud-c{animation-duration:10s;}
@keyframes cloud-drift{
  0%{transform:translateX(0);}
  100%{transform:translateX(220px);}
}

.landscape .grass-blades path{animation:grass-sway 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
.landscape .grass-blades path:nth-child(3n){animation-delay:0s;}
.landscape .grass-blades path:nth-child(3n+1){animation-delay:.3s;}
.landscape .grass-blades path:nth-child(3n+2){animation-delay:.6s;}
@keyframes grass-sway{
  0%,100%{transform:skewX(0deg);}
  50%{transform:skewX(15deg);}
}

.landscape .flag{transform-box:fill-box;transform-origin:0% 50%;animation:flag-wave 1s ease-in-out infinite;}
.landscape .flag-a{animation-delay:.2s;}
.landscape .flag-b{animation-delay:.4s;}
@keyframes flag-wave{
  0%,100%{transform:skewY(0deg) scaleX(1);}
  50%{transform:skewY(-24deg) scaleX(0.82);}
}

.landscape .sun-glow{animation:sun-pulse 3.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%;}
@keyframes sun-pulse{
  0%,100%{opacity:0.6;transform:scale(0.92);}
  50%{opacity:1;transform:scale(1.3);}
}

.landscape .birds-group-2{animation-duration:12s;animation-direction:alternate-reverse;}

.landscape .tree-sway{animation:tree-sway 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
.landscape .tree-sway-b{animation-delay:.5s;animation-duration:2s;}
@keyframes tree-sway{
  0%,100%{transform:skewX(0deg) rotate(0deg);}
  50%{transform:skewX(-9deg) rotate(-3deg);}
}

.landscape .waterfall rect{animation:waterfall-flow 0.7s linear infinite;}
.landscape .waterfall rect:nth-child(2){animation-delay:.2s;}
.landscape .waterfall rect:nth-child(3){animation-delay:.4s;}
@keyframes waterfall-flow{
  0%{transform:translateY(-14px);opacity:.3;}
  50%{opacity:.9;}
  100%{transform:translateY(14px);opacity:.3;}
}

/* Background elements react on hover — re-enable pointer-events just for these shapes
   so hovering them doesn't block clicks through the rest of the (pointer-events:none) scenery. */
.landscape .cloud-drift,
.landscape .bird,
.landscape .tree-sway,
.landscape .flag,
.landscape .sun-glow,
.landscape .castle-windows,
.landscape .waterfall{
  pointer-events:auto;
  cursor:pointer;
}
.landscape .cloud-drift:hover{animation-duration:2.5s !important;}
.landscape .bird:hover{animation-duration:0.2s !important;}
.landscape .tree-sway:hover{animation-duration:0.5s !important;}
.landscape .flag:hover{animation-duration:0.35s !important;}
.landscape .sun-glow:hover{animation-duration:1.2s !important;}
.landscape .waterfall:hover rect{animation-duration:0.35s !important;}
.landscape .castle-windows{transition:filter .25s ease;}
.landscape .castle-windows:hover{filter:drop-shadow(0 0 10px #ffd76b) brightness(1.6);}

.wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:20px 16px 60px;}

.game-header{text-align:center;margin-bottom:10px;}
.game-header h1{
  font-size:clamp(28px,6vw,44px);
  margin:0 0 4px;
  color:#2b6b2b;
  text-shadow:2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.game-header .tag{margin:0;color:#3a3a55;font-weight:600;text-shadow:1px 1px 0 rgba(255,255,255,.6);}

.hud{
  display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;
  margin:16px 0;
}
.hud-item{
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:14px;
  padding:8px 16px;
  min-width:74px;
  text-align:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.15);
}
.hud-item span:last-child{display:block;font-size:20px;font-weight:800;}
.hud-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b6b60;}
.hud-item--warn span:last-child{color:#1f8a1f;}
.hud-item--warn.danger span:last-child{color:#c62828;}
.hud-item{transition:transform .15s ease, box-shadow .15s ease;}
.hud-item:hover{transform:translateY(-3px) scale(1.04);box-shadow:4px 5px 0 rgba(0,0,0,.2);}
.hud-item.streak-hot span:last-child{color:#e07800;}
.hud-item.streak-hot{animation:streak-pulse .5s ease;}
@keyframes streak-pulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.15);}
  100%{transform:scale(1);}
}

.mute-btn{
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:50%;
  width:46px;height:46px;
  font-size:20px;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease;
}
.mute-btn:active{transform:translateY(2px);}
.mute-btn:hover{transform:scale(1.15) rotate(-8deg);box-shadow:4px 5px 0 rgba(0,0,0,.2);}

.board-shell{
  background:#2f9642;
  border:5px solid #1f5c1f;
  border-radius:20px;
  padding:14px;
  box-shadow:0 10px 0 rgba(0,0,0,.15);
  overflow:hidden;
}
.board-shell.shake{animation:board-shake .4s ease;}
.board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}
.tile{
  position:relative;
  aspect-ratio:1/1;
  background:var(--path-safe);
  border:2px solid #cbb783;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(10px,2vw,13px);
  font-weight:700;
  color:#8a7a4f;
}
.tile.poop{background:var(--path-poop);border-color:#c98b3c;}
.tile.poop.wiped{background:var(--path-safe);border-color:#cbb783;}
.tile.poop:not(.wiped)::after{content:"💩";position:absolute;font-size:clamp(14px,3vw,22px);}
.tile.turbo{background:#fff3b0;border-color:#e0a400;}
.tile.turbo.used{background:var(--path-safe);border-color:#cbb783;}
.tile.turbo:not(.used)::after{content:"⚡";position:absolute;font-size:clamp(14px,3vw,22px);animation:turbo-pulse 1s ease-in-out infinite;}
@keyframes turbo-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.25);}
}
.tile.start{background:#bfe6ff;border-color:#3a8fc9;}
.tile.start::before{content:"START";font-size:9px;letter-spacing:.05em;}
.tile.finish{
  background:linear-gradient(180deg,#cfe8ff,#7fd67f);
  border-color:#1f5c1f;
  grid-column:span 1;
}
.tile.finish .finish-castle{width:70%;height:70%;}

.tile{transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;cursor:default;}
.tile:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 6px 10px rgba(0,0,0,.25);z-index:2;}
.tile.poop:not(.wiped):hover::after{animation:poop-jiggle .35s ease-in-out infinite;}
@keyframes poop-jiggle{
  0%,100%{transform:rotate(-10deg) scale(1);}
  50%{transform:rotate(10deg) scale(1.15);}
}
.tile.turbo:not(.used):hover::after{animation:turbo-pulse .35s ease-in-out infinite;filter:drop-shadow(0 0 6px #ffcf3d);}
.tile.start:hover{filter:brightness(1.08);}
.tile.finish:hover .finish-castle{animation:castle-glimmer .6s ease-in-out infinite;}
@keyframes castle-glimmer{
  0%,100%{filter:brightness(1);transform:scale(1);}
  50%{filter:brightness(1.25);transform:scale(1.05);}
}

.token{
  position:absolute;
  width:11%;
  aspect-ratio:1/1;
  z-index:5;
  transition:left .18s ease, top .18s ease;
  filter:drop-shadow(2px 3px 1px rgba(0,0,0,.35));
}
.token svg{width:100%;height:100%;display:block;transform-origin:50% 60%;}
.token.player{z-index:6;pointer-events:auto;cursor:pointer;}
.token.player svg{animation:idle-bob 2.2s ease-in-out infinite;}
.token.player:hover svg{animation:excited-wave .35s ease-in-out infinite;}
.token.player.bounce{animation:bounce .3s ease;}
.token.player.shielded{box-shadow:0 0 0 4px rgba(255,255,255,.85), 0 0 16px 6px rgba(120,200,255,.9);border-radius:50%;}
.token.bush{opacity:0;pointer-events:none;transition:left .3s cubic-bezier(.34,1.4,.64,1), top .3s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;}
.token.bush.active{opacity:1;pointer-events:auto;cursor:pointer;}
.token.bush.active svg{animation:prowl 1s ease-in-out infinite;}
.token.bush.active:hover svg{animation:bush-snarl .3s ease-in-out infinite;}
.token.bush.lunge{animation:lunge .4s ease;}
.token.bush.lunge svg{animation:none;}
.token.bush.snarl svg{animation:bush-snarl .4s ease;}

.token.bush-waiter{z-index:4;opacity:0;pointer-events:none;transition:opacity .4s ease;}
.token.bush-waiter.active{opacity:1;pointer-events:auto;cursor:pointer;}
.token.bush-waiter.active svg{animation:friendly-wave 1.3s ease-in-out infinite;}
.token.bush-waiter.active:hover svg{animation:friendly-wave .3s ease-in-out infinite;}
@keyframes excited-wave{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1);}
  50%{transform:translateY(-10%) rotate(8deg) scale(1.08);}
}

@keyframes bounce{
  0%{transform:translateY(0) scale(1);}
  40%{transform:translateY(-18%) scale(1.05);}
  100%{transform:translateY(0) scale(1);}
}
@keyframes lunge{
  0%{transform:scale(1);}
  45%{transform:scale(1.4) rotate(-10deg);}
  100%{transform:scale(1);}
}
@keyframes idle-bob{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-5%) rotate(-3deg);}
}
@keyframes prowl{
  0%,100%{transform:translateX(0) rotate(-7deg);}
  50%{transform:translateX(6%) rotate(7deg);}
}
@keyframes bush-snarl{
  0%{filter:none;transform:scale(1) rotate(-7deg);}
  40%{filter:drop-shadow(0 0 8px rgba(255,30,30,.9));transform:scale(1.35) rotate(8deg);}
  100%{filter:none;transform:scale(1) rotate(-7deg);}
}
@keyframes friendly-wave{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(6deg);}
}
@keyframes board-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}

.controls{text-align:center;margin-top:20px;}
.btn{
  font-family:inherit;
  font-weight:800;
  font-size:18px;
  padding:14px 28px;
  border-radius:14px;
  border:3px solid var(--ink);
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.25);
  transition:transform .08s ease;
}
.btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03);box-shadow:5px 7px 0 rgba(0,0,0,.25);}
.btn:active{transform:translateY(2px);box-shadow:1px 1px 0 rgba(0,0,0,.25);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-roll:hover:not(:disabled) .die-icon{animation:dice-spin .6s ease-in-out infinite;}
.btn-roll{background:#ffd23f;color:#3a2b00;}
.btn-wipe{background:#8fd9ff;color:#0a3550;font-size:22px;padding:18px 40px;}
.hint{margin-top:10px;font-size:13px;color:#3a3a55;text-shadow:1px 1px 0 rgba(255,255,255,.5);}
kbd{background:#fff;border:1px solid #999;border-radius:4px;padding:1px 6px;font-family:monospace;}

.die-icon{display:inline-block;}
.rolling .die-icon{animation:dice-spin .35s linear infinite;}
@keyframes dice-spin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.25);}
  100%{transform:rotate(360deg) scale(1);}
}
#dieFace{display:inline-block;min-width:1.2em;}

.toast{
  position:fixed;
  top:16px;left:50%;
  transform:translateX(-50%) translateY(-20px);
  background:var(--ink);
  color:#fff;
  padding:10px 20px;
  border-radius:10px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.good{background:#1f8a1f;}
.toast.bad{background:#c62828;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.floating-score{
  position:absolute;
  transform:translate(-50%,0);
  font-weight:800;
  font-size:clamp(14px,3vw,20px);
  pointer-events:none;
  z-index:8;
  animation:float-score 1s ease-out forwards;
  text-shadow:1px 1px 0 rgba(255,255,255,.7);
}
.floating-score.good{color:#1f8a1f;}
.floating-score.bad{color:#c62828;}
@keyframes float-score{
  0%{transform:translate(-50%,0) scale(0.8);opacity:1;}
  30%{transform:translate(-50%,-10px) scale(1.15);opacity:1;}
  100%{transform:translate(-50%,-50px) scale(1);opacity:0;}
}

.sparkle{
  position:absolute;
  font-size:18px;
  pointer-events:none;
  z-index:7;
  animation:sparkle-fly .7s ease-out forwards;
}
@keyframes sparkle-fly{
  0%{transform:translate(-50%,-50%) scale(0.4);opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1);opacity:0;}
}

.overlay{
  position:fixed;inset:0;
  background:rgba(20,20,30,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:100;
  padding:16px;
}
.overlay.hidden{display:none;}
.wipe-card{
  background:var(--card);
  border:4px solid var(--ink);
  border-radius:20px;
  padding:28px 30px;
  max-width:360px;
  width:100%;
  text-align:center;
  box-shadow:6px 6px 0 rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
}
.wipe-card.urgent{animation:urgent-shake .18s infinite;}
@keyframes urgent-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.wipe-emoji{font-size:56px;line-height:1;}
.wipe-emoji.poop-king{position:relative;display:inline-block;animation:poop-king-bob .5s ease-in-out infinite;}
.wipe-emoji.poop-king .crown{
  position:absolute;
  top:-24px;left:50%;
  transform:translateX(-50%) rotate(-10deg);
  font-size:32px;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.3));
}
@keyframes poop-king-bob{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}
.wipe-card h2{margin:6px 0 14px;}
.wipe-timerbar{height:10px;background:#eee;border:2px solid var(--ink);border-radius:6px;overflow:hidden;margin-bottom:10px;}
.wipe-timerbar-fill{height:100%;background:#ff8a3d;width:100%;transition:width .05s linear;}
.wipe-progress{height:20px;background:#eee;border:2px solid var(--ink);border-radius:10px;overflow:hidden;margin-bottom:18px;}
.wipe-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#8fd9ff,#3ab0ff);transition:width .12s ease;}

.caught-card{background:#ffe9e9;}
.win-card{max-width:420px;}
.win-castle{width:160px;margin-bottom:6px;}
.win-dancer{width:56px;position:absolute;bottom:18px;right:18px;animation:victory-dance .5s ease-in-out infinite;}
@keyframes victory-dance{
  0%,100%{transform:translateY(0) rotate(-12deg);}
  50%{transform:translateY(-14px) rotate(12deg);}
}
.new-best{color:#c98b00;font-weight:800;}
.hidden{display:none !important;}

.intro-card{max-width:420px;text-align:left;}
.intro-card h2{text-align:center;}
.how-to-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;}
.how-to-list li{background:#f6f2e2;border-radius:10px;padding:8px 12px;}

.leaderboard{
  list-style:none;
  margin:6px 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
}
.leaderboard li{
  display:flex;
  justify-content:space-between;
  background:#f6f2e2;
  border-radius:8px;
  padding:4px 12px;
  font-weight:700;
}
.leaderboard li.current{background:#ffe6a1;}
.leaderboard li .rank{color:#8a7a4f;font-weight:600;}

.confetti{
  position:absolute;
  top:-14px;
  width:8px;height:14px;
  opacity:0.95;
  animation-name:confetti-fall;
  animation-timing-function:ease-in;
  animation-fill-mode:forwards;
  z-index:1;
}
@keyframes confetti-fall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(380px) rotate(var(--rot));opacity:0;}
}

.site-footer{
  text-align:center;
  margin-top:28px;
  font-size:13px;
  color:#3a3a55;
  text-shadow:1px 1px 0 rgba(255,255,255,.5);
}
.footer-link{
  background:none;
  border:none;
  color:#2b6b2b;
  font-weight:700;
  font-size:13px;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}
.footer-dot{margin:0 4px;opacity:.6;}
.footer-link{transition:transform .15s ease, color .15s ease;display:inline-block;}
.footer-link:hover{color:#e07800;transform:translateY(-2px) scale(1.05);}
.modal-close{transition:transform .15s ease;}
.modal-close:hover{transform:rotate(90deg) scale(1.15);}

.info-card{max-width:440px;text-align:left;position:relative;padding-top:36px;}
.info-card h2{text-align:center;}
.info-card p{margin:0 0 10px;line-height:1.4;}
.info-card a{color:#2b6b2b;}
.modal-close{
  position:absolute;
  top:10px;right:10px;
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  line-height:1;
  padding:6px;
}

.btn, .mute-btn, .footer-link, .tile{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;}

@media(max-width:520px){
  .hud{gap:8px;}
  .hud-item{padding:6px 10px;min-width:60px;}
  .btn-roll{font-size:16px;padding:12px 20px;}
}

/* Note: gentle continuous scenery/character motion (clouds, birds, trees, flags, sun,
   waterfall, idle bob/prowl/wave) is intentionally NOT disabled under reduced-motion —
   WCAG's concern is fast/large/vestibular-triggering motion, not slow ambient sway.
   Only the fast, jarring, or rapidly-pulsing effects are suppressed here. */
@media (prefers-reduced-motion: reduce){
  .die-icon,
  .win-dancer,
  .hud-item.streak-hot,
  .tile.turbo:not(.used)::after,
  .wipe-emoji.poop-king{
    animation:none !important;
  }
  .board-shell.shake{animation:none !important;}
  .token.bush.lunge,.token.bush.snarl svg,.wipe-card.urgent{animation-duration:.01s !important;}
  .tile.poop:not(.wiped):hover::after,
  .tile.turbo:not(.used):hover::after,
  .tile.finish:hover .finish-castle,
  .btn-roll:hover:not(:disabled) .die-icon{
    animation:none !important;
  }
}