/* Battles — a game by Sullivan Murphy. Bright cartoon look, built for iPad touch. */
:root {
  --ink: #1b1b2f;
  --sky1: #5ec8ff;
  --sky2: #1f6fd6;
  --grass: #9be36b;
  --grass2: #7fd14f;
  --stone: #5b6275;
  --stone2: #8e97ad;
  --p1: #2f6fd6;
  --gold: #ffd166;
  --gold2: #e0a800;
  --heart: #ff4d6d;
  --good: #2fbf71;
  --purple: #7c3aed;
  --cell: 52px;
  --head: "Luckiest Guy", "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --body: "Fredoka", "Nunito", "Arial Rounded MT Bold", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: radial-gradient(circle at 50% -10%, #fff7c2 0, transparent 28%), linear-gradient(180deg, var(--sky1), var(--sky2));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-size: 20px;
}
body::before { /* drifting clouds */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(60px 28px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(90px 36px at 20% 20%, #fff 60%, transparent 62%),
    radial-gradient(70px 30px at 78% 12%, #fff 60%, transparent 62%),
    radial-gradient(110px 40px at 86% 15%, #fff 60%, transparent 62%);
  animation: clouds 60s linear infinite;
}
@keyframes clouds { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 400px 0, 400px 0, 400px 0, 400px 0; } }

h1, h2, h3, .n, #turn, button.big { font-family: var(--head); letter-spacing: .5px; font-weight: 400; }

button {
  font: inherit;
  font-family: var(--head);
  color: var(--ink);
  background: linear-gradient(#fff, #e9eef7);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 20px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
button.big { font-size: 30px; padding: 14px 32px; border-radius: 20px; }
button.primary { background: linear-gradient(#ffe066, #ffb703); }
button.ghostbtn { background: rgba(255,255,255,.85); font-family: var(--body); font-size: 18px; padding: 6px 12px; box-shadow: 0 3px 0 var(--ink); }
button[disabled] { opacity: .5; pointer-events: none; }
.primary.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ---------- Title / setup ---------- */
#setup { align-items: center; justify-content: flex-start; gap: 12px; padding: 14px 24px 100px; text-align: center; overflow: auto; }
#setup h1 {
  font-size: clamp(56px, 9vw, 96px);
  margin: 0; line-height: 1; letter-spacing: 3px; color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 0 6px 0 var(--ink), 0 10px 24px rgba(0,0,0,.35);
  animation: wobble-title 3s ease-in-out infinite;
  background: linear-gradient(#fff9c4, #ffb703); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes wobble-title { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.03); } }
#setup .by { font-size: 26px; margin: -4px 0 4px; color: #fff; text-shadow: 0 2px 0 var(--ink); font-family: var(--head); }
.pick-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: stretch; width: 100%; }
.player-card {
  border: 4px solid var(--ink); border-radius: 24px; background: rgba(255,255,255,.95); padding: 14px 18px;
  width: 330px; box-shadow: 0 8px 0 var(--ink), 0 14px 30px rgba(0,0,0,.25);
}
.player-card h2 { margin: 0 0 8px; font-size: 26px; color: var(--p1); }
.hero-choice { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.hero-opt { border: 3px solid #c9d1e0; border-radius: 18px; padding: 8px; width: 148px; background: #fff; cursor: pointer; transition: transform .15s; }
.hero-opt .art { height: 120px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.hero-opt .art svg { height: 116px; width: auto; }
.hero-opt .n { font-size: 22px; }
.hero-opt .d { font-size: 15px; color: #4a4a62; line-height: 1.15; font-family: var(--body); }
.hero-opt.sel { border-color: var(--ink); background: linear-gradient(#fff6c4, #ffd166); box-shadow: 0 5px 0 var(--ink); transform: translateY(-4px) scale(1.04); }
.hero-opt.sel .art { animation: bounce 1s ease-in-out infinite; }
.hero-opt.secret { background: linear-gradient(#efe6ff, #d9c6ff); border-color: var(--purple); box-shadow: 0 0 18px #b388ff; }
.hero-opt.secret.sel { background: linear-gradient(#f3ecff, #c9b0ff); }
@keyframes bounce { 50% { transform: translateY(-6px); } }
#names button { font-size: 24px; padding: 8px 18px; }
.lb { width: 100%; border-collapse: collapse; font-size: 20px; }
.lb th, .lb td { padding: 4px 8px; border-bottom: 2px solid #e4e9f4; text-align: left; }
.lb tr:first-child th { color: var(--p1); }
#parade { position: absolute; bottom: 0; left: 0; right: 0; height: 90px; pointer-events: none; overflow: hidden; }
#parade .bot { position: absolute; bottom: 4px; width: 80px; height: 80px; animation: march 14s linear infinite; }
#parade .bot:nth-child(2) { animation-delay: -3.5s; } #parade .bot:nth-child(3) { animation-delay: -7s; } #parade .bot:nth-child(4) { animation-delay: -10.5s; }
@keyframes march { from { left: -100px; } to { left: 110%; } }

/* ---------- Game ---------- */
#game { padding: 8px 10px 8px; gap: 6px; }
#topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; }
#turn {
  white-space: nowrap; display: flex; align-items: center; gap: 12px; font-size: 26px;
  padding: 4px 16px 4px 6px; border: 3px solid var(--ink); border-radius: 40px; background: #fff; box-shadow: 0 4px 0 var(--ink);
}
#turn .mini { width: 48px; height: 48px; display: flex; align-items: flex-end; justify-content: center; } #turn .mini svg { height: 46px; width: auto; }
.stats { display: flex; gap: 6px; align-items: center; font-size: 20px; flex-wrap: wrap; justify-content: center; }
.stat { white-space: nowrap; display: flex; align-items: center; gap: 5px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 2px 9px; box-shadow: 0 3px 0 var(--ink); }
.hearts span { color: var(--heart); font-size: 26px; letter-spacing: -2px; }
.hearts span.off { color: #d8dbe6; }
.coin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b3, var(--gold) 45%, var(--gold2)); border: 2px solid #8a6500; }
.stat.bump { animation: statbump .4s; }
@keyframes statbump { 50% { transform: scale(1.25); } }

#boards { flex: 1; display: flex; justify-content: center; align-items: flex-start; min-height: 0; }
.kingdom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kingdom h3 { margin: 0; font-size: 26px; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 4px 10px rgba(0,0,0,.3); }
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, var(--cell));
  grid-template-rows: repeat(7, var(--cell));
  background: var(--grass);
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 2px);
  background-size: 14px 14px;
  border: 6px solid var(--stone);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--stone2), 0 10px 0 #2f3444, 0 20px 40px rgba(0,0,0,.35);
}
.board.shake { animation: boardshake .5s; }
@keyframes boardshake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 0); } 80% { transform: translate(4px, 0); } }
.cell { position: relative; border: 0 solid var(--stone); }
.cell.wn { border-top-width: 6px; } .cell.ws { border-bottom-width: 6px; }
.cell.we { border-right-width: 6px; } .cell.ww { border-left-width: 6px; }
.cell .tile { position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cell .tile svg { width: 100%; height: 100%; }
.cell.can { cursor: pointer; background: rgba(255,255,255,.35); }
.cell.can::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: #ffe066; border: 3px solid var(--ink); animation: pulse 1s ease-in-out infinite; }
.cell.can.fly::after { background: #8fd3ff; }
.cell.can.fightspot::after { content: "⚔️"; display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .42); inset: 14%; background: #ff8c42; }
.piece { position: absolute; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.piece.hero { z-index: 5; }
.piece.hero svg { height: 104%; width: auto; overflow: visible; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 4px 3px rgba(0,0,0,.35)); animation: heroglow 1.6s ease-in-out infinite; }
@keyframes heroglow { 50% { filter: drop-shadow(0 0 12px #ffe066) drop-shadow(0 4px 3px rgba(0,0,0,.35)); } }
.piece.hero.bump { animation: hop .4s; }
@keyframes hop { 50% { transform: var(--tf) translateY(-18px) scale(1.15); } }
.piece.monster svg { width: 90%; height: 90%; overflow: visible; filter: drop-shadow(0 4px 2px rgba(0,0,0,.25)); }
.piece.monster .hp { position: absolute; right: -6px; top: -8px; background: var(--heart); color: #fff; font-family: var(--head); font-size: 17px; line-height: 1; padding: 4px 6px; border-radius: 12px; border: 2px solid #fff; box-shadow: 0 2px 0 var(--ink); }
.piece.monster.danger svg { animation: dangerglow .7s ease-in-out infinite alternate; }
@keyframes dangerglow { from { filter: drop-shadow(0 0 2px #ff4d6d) drop-shadow(0 4px 2px rgba(0,0,0,.25)); } to { filter: drop-shadow(0 0 14px #ff1744) drop-shadow(0 4px 2px rgba(0,0,0,.25)); transform: scale(1.08); } }
.piece.monster.danger .hp { background: #d50000; }
.piece.monster .cmini { position: absolute; left: -2px; bottom: -4px; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 10px; border: 2px solid #fff; }
.piece.monster.hit svg { animation: monsterhit .45s; }
@keyframes monsterhit { 30% { transform: scale(1.3) rotate(-10deg); filter: brightness(2) drop-shadow(0 0 6px #fff); } }

/* robot idle animations (SVG parts) */
svg .bob, svg .hover, svg .swirl, svg .pupil, svg .spark, svg .flame, svg .wing, svg .l1, svg .l2, svg .l3, svg .blink, svg .smoke { transform-box: fill-box; transform-origin: center; }
svg .bob { animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
svg .hover { animation: hoverbot 1s ease-in-out infinite; }
@keyframes hoverbot { 50% { transform: translateY(-5px); } }
svg .flame { animation: flame .18s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scaleY(1.6); opacity: .7; } }
svg .wing { animation: flap .5s ease-in-out infinite alternate; }
@keyframes flap { to { transform: rotate(-12deg); } }
svg .spark { animation: spark .35s ease-in-out infinite alternate; }
@keyframes spark { to { transform: scale(1.6); opacity: .5; } }
svg .l1 { animation: light 1.2s steps(1) infinite; } svg .l2 { animation: light 1.2s steps(1) infinite .4s; } svg .l3 { animation: light 1.2s steps(1) infinite .8s; }
@keyframes light { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .25; } }
svg .pupil { animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 0%,100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
svg .blink { animation: blink 3s steps(1) infinite; }
@keyframes blink { 0%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
svg .swirl { animation: swirl 3s linear infinite; }
@keyframes swirl { to { transform: rotate(360deg); } }
svg .smoke { animation: smoke 2s ease-out infinite; }
@keyframes smoke { to { transform: translateY(-14px) scale(1.4); opacity: 0; } }
.cell .tile svg.portal-glow { filter: drop-shadow(0 0 8px #b388ff); }

#bottombar { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 100px; flex-wrap: wrap; }
#coach { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 260px; max-width: 560px; }
#coach .steps { display: flex; align-items: center; gap: 6px; }
#coach .step { font-family: var(--head); font-size: 17px; letter-spacing: .5px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,.35); color: #fff; border: 2px solid rgba(255,255,255,.5); transition: all .2s; }
#coach .step.on { background: #ffe066; color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: scale(1.12); }
#coach .step.done { background: var(--good); color: #fff; border-color: #fff; }
#coach .arrow { color: #fff; font-size: 12px; opacity: .8; }
#coach.robots .step { opacity: .5; }
#msg { font-size: 25px; text-align: center; min-width: 200px; max-width: 560px; line-height: 1.15; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 3px 8px rgba(0,0,0,.4); font-weight: 600; }
button.gold { background: linear-gradient(#fff3a3, #ffb703); border-color: #7a4b00; box-shadow: 0 5px 0 #7a4b00, 0 0 24px #ffd166; font-size: 34px; }
button.shopbtn { font-family: var(--body); font-size: 19px; padding: 8px 14px; }
button.shopbtn.can { background: linear-gradient(#d6ffe3, #7ee8a2); animation: pulse 1.4s ease-in-out infinite; }
.stat.tower .meter { display: inline-block; width: 90px; height: 14px; border: 2px solid var(--ink); border-radius: 8px; background: #e4e9f4; overflow: hidden; vertical-align: middle; }
.stat.tower .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd166, #ff9f1c); transition: width .4s; }
.stat.tower.ready { background: linear-gradient(#fff3a3, #ffd166); animation: pulse 1s ease-in-out infinite; }
.stat.small { font-size: 15px; opacity: .85; }
.bresult { font-family: var(--head); font-size: 40px; min-height: 48px; line-height: 1.1; text-shadow: 0 3px 0 #fff; }
.bresult.win { color: var(--good); animation: popin .4s cubic-bezier(.3,1.5,.5,1); }
.bresult.lose { color: #e63946; animation: popin .4s cubic-bezier(.3,1.5,.5,1); }
.panel.howto { max-width: 640px; }
.howto-art { display: flex; justify-content: center; align-items: center; gap: 18px; height: 150px; }
.howto-art svg { width: 130px; height: 130px; overflow: visible; }
.howto-art .die { width: 90px; height: 90px; }
#howto-text { font-size: 25px; line-height: 1.3; margin: 6px 0 0; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: #d8dbe6; border: 2px solid var(--ink); }
.dots i.on { background: #ffb703; }

/* dice with pips */
.die {
  width: 68px; height: 68px; border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(#fff, #e9eef7);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 8px; gap: 2px;
  box-shadow: 0 5px 0 var(--ink); position: relative;
}
.die i { border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.9); }
.die[data-v="1"] i:nth-child(5), .die[data-v="2"] i:nth-child(3), .die[data-v="2"] i:nth-child(7),
.die[data-v="3"] i:nth-child(3), .die[data-v="3"] i:nth-child(5), .die[data-v="3"] i:nth-child(7),
.die[data-v="4"] i:nth-child(1), .die[data-v="4"] i:nth-child(3), .die[data-v="4"] i:nth-child(7), .die[data-v="4"] i:nth-child(9),
.die[data-v="5"] i:nth-child(1), .die[data-v="5"] i:nth-child(3), .die[data-v="5"] i:nth-child(5), .die[data-v="5"] i:nth-child(7), .die[data-v="5"] i:nth-child(9),
.die[data-v="6"] i:nth-child(1), .die[data-v="6"] i:nth-child(3), .die[data-v="6"] i:nth-child(4), .die[data-v="6"] i:nth-child(6), .die[data-v="6"] i:nth-child(7), .die[data-v="6"] i:nth-child(9) { opacity: 1; }
.die[data-v="0"]::after { content: "?"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 40px; }
.die.rolling { animation: tumble .45s linear infinite; }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.die.hit { animation: dieyes .5s; } .die.miss { animation: dieno .5s; }
@keyframes dieyes { 40% { transform: scale(1.3); box-shadow: 0 0 0 6px var(--good); } }
@keyframes dieno { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; background: rgba(20, 20, 50, .55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
.panel {
  background: #fff; border: 4px solid var(--ink); border-radius: 28px; padding: 20px 26px; max-width: 760px; width: 100%;
  box-shadow: 0 10px 0 var(--ink), 0 24px 50px rgba(0,0,0,.4); text-align: center; max-height: 92vh; overflow: auto;
  animation: popin .35s cubic-bezier(.3,1.5,.5,1);
}
@keyframes popin { from { transform: scale(.6); opacity: 0; } }
.panel h2 { margin: 0 0 8px; font-size: 40px; color: var(--p1); text-shadow: 0 3px 0 #dbe4ff; }
.panel .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

#battle .panel { background: linear-gradient(#fff, #ffe9e9); }
#battle h2 { color: #e63946; text-shadow: 0 3px 0 #ffd0d0; animation: pulse 1s ease-in-out infinite; }
.battle-stage { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 8px 0 4px; }
.fighter { width: 190px; position: relative; }
.fighter .fart { height: 170px; display: flex; align-items: flex-end; justify-content: center; }
.fighter .fart svg { height: 170px; width: auto; overflow: visible; }
.fighter.lunge .fart { animation: lunge .5s ease-in-out; }
#b-hero.lunge .fart { animation-name: lungeR; } #b-monster.lunge .fart { animation-name: lungeL; }
@keyframes lungeR { 45% { transform: translateX(90px) scale(1.1) rotate(8deg); } }
@keyframes lungeL { 45% { transform: translateX(-90px) scale(1.1) rotate(-8deg); } }
.fighter.ko .fart { animation: ko 1s ease forwards; }
@keyframes ko { to { transform: rotate(90deg) translateY(30px); opacity: .35; filter: grayscale(1); } }
.fighter .n { font-size: 24px; }
.fighter .hearts span { font-size: 30px; }
.vs { font-family: var(--head); font-size: 54px; color: #e63946; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink); }
.fighter.hit { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-12px) rotate(-5deg); } 60% { transform: translateX(12px) rotate(5deg); } }
.pow { position: absolute; top: 20px; left: 50%; transform: translate(-50%, 0) rotate(-10deg); font-family: var(--head); font-size: 44px; color: #ffe066; -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink); animation: powpop .7s ease-out forwards; pointer-events: none; }
@keyframes powpop { 0% { transform: translate(-50%, 10px) scale(.3) rotate(-10deg); opacity: 0; } 30% { transform: translate(-50%, -10px) scale(1.3) rotate(6deg); opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1) rotate(-6deg); opacity: 0; } }
#battle-msg { font-size: 26px; min-height: 36px; font-weight: 600; }
#battle-die { margin: 0 auto 8px; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.shop-item { border: 3px solid var(--ink); border-radius: 18px; background: #fff; padding: 10px 8px 12px; box-shadow: 0 4px 0 var(--ink); }
.shop-item svg { width: 84px; height: 84px; }
.shop-item .n { font-size: 22px; }
.shop-item .pw { color: #4a4a62; font-size: 17px; }
.shop-item .price { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.shop-item button { font-size: 20px; padding: 6px 14px; }
.shop-item.owned { background: #e9f8ee; border-color: var(--good); }
.shop-item.tower { grid-column: 1 / -1; background: linear-gradient(#fff6d6, #ffe6a3); }
.shop-item.tower svg { animation: bounce 1.2s ease-in-out infinite; }

.rules { text-align: left; font-size: 21px; line-height: 1.3; }
.rules ol { padding-left: 28px; margin: 6px 0; }
.rules li { margin: 4px 0; }
.rules table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 20px; }
.rules td, .rules th { border-bottom: 2px solid #e4e9f4; padding: 3px 6px; text-align: left; }
.rules .bots { display: flex; justify-content: space-around; gap: 6px; margin: 8px 0; }
.rules .bots div { text-align: center; font-size: 15px; width: 100px; }
.rules .bots svg { width: 64px; height: 64px; overflow: visible; }
.rules .bots.heroes svg { width: auto; height: 90px; }
.rules .bots.heroes div { width: 180px; }

#win .panel { background: linear-gradient(#fff, #fff3c4); }
#win h2 { font-size: 52px; color: var(--good); text-shadow: 0 4px 0 #bfe8d0; }
#win.lost h2 { color: #e63946; text-shadow: 0 4px 0 #ffd0d0; }
#win .fart { height: 170px; display: flex; align-items: flex-end; justify-content: center; animation: bounce 1s ease-in-out infinite; } #win .fart svg { height: 170px; width: auto; overflow: visible; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 25; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* floating popups over the board */
.pop { position: absolute; z-index: 15; font-family: var(--head); font-size: 30px; pointer-events: none; animation: rise 1.3s ease-out forwards; text-shadow: 0 2px 0 var(--ink), 0 0 10px #fff; white-space: nowrap; }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1.2); } 100% { transform: translateY(-80px) scale(1); opacity: 0; } }
.coinfly { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b3, var(--gold) 45%, var(--gold2)); border: 2px solid #8a6500; z-index: 16; pointer-events: none; animation: coinfly 1s ease-out forwards; }
@keyframes coinfly { 50% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

/* the secret visitor — not part of the rules */
#visitor { position: absolute; top: 30%; left: -160px; width: 140px; z-index: 30; pointer-events: none; opacity: 0; }
#visitor.go { animation: drift 4.2s ease-in-out forwards; }
#visitor img { width: 140px; height: 140px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 0 30px #fff; }
#visitor .say { position: absolute; top: -34px; left: 90px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 2px 12px; font-size: 24px; white-space: nowrap; font-family: var(--head); }
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0) rotate(-6deg); }
  10% { opacity: 1; }
  50% { transform: translate(55vw, -30px) rotate(6deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(110vw, 10px) rotate(-6deg); }
}

footer { position: absolute; right: 12px; bottom: 4px; font-size: 14px; color: #fff; opacity: .85; text-shadow: 0 1px 0 var(--ink); }

@media (max-width: 700px) {
  #turn { font-size: 20px; }
  .stats { font-size: 18px; gap: 6px; }
  #msg { font-size: 20px; }
  .battle-stage { gap: 10px; }
  .fighter { width: 140px; } .fighter img, .fighter svg { width: 110px; height: 110px; }
}

/* ---------- hero characters from Lewis's Ghostbusters game ---------- */
.char { display: block; overflow: visible; }
.char .bob { animation: gbbob 2.2s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.char.ghost .bob { animation: gbfloat 2.6s ease-in-out infinite; }
@keyframes gbbob { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-6px) scaleX(1.02); } }
@keyframes gbfloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.char .spring-l { animation: springL 1.4s ease-in-out infinite; transform-origin: 70px 140px; transform-box: view-box; }
.char .spring-r { animation: springR 1.4s ease-in-out infinite; transform-origin: 150px 140px; transform-box: view-box; }
@keyframes springL { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes springR { 0%,100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.char .wing-l { animation: wingL 1s ease-in-out infinite; transform-origin: 118px 122px; transform-box: view-box; }
.char .wing-r { animation: wingR 1s ease-in-out infinite; transform-origin: 142px 122px; transform-box: view-box; }
@keyframes wingL { 0%,100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
@keyframes wingR { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
.char .blink { animation: gbblink 4s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes gbblink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- The Mansion (3D dollhouse at night) ---------- */
:root { --mcell: 48px; --mwall: 22px; --mspr: 72px; }
#mansion { background: radial-gradient(ellipse at 50% 120%, #3a2470, #1b1340 65%); padding: 8px 10px 8px; gap: 6px; }
#msky { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
#msky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
#mmoon { position: absolute; top: 78px; right: 7%; width: 80px; height: 80px; border-radius: 50%; background: #fff7c2; box-shadow: 0 0 50px 10px rgba(255,247,194,.3); pointer-events: none; z-index: 0; }
#mmoon::after { content: ""; position: absolute; left: -16px; top: -6px; width: 74px; height: 74px; border-radius: 50%; background: #1f1748; }
#mansion #topbar, #mbottom { position: relative; z-index: 2; }
#mstage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; perspective: 1500px; perspective-origin: 50% 30%; position: relative; z-index: 1; }
#mworld { position: relative; transform-style: preserve-3d; transform: rotateX(45deg); background: #2a2440; border-radius: 6px; box-shadow: 0 0 0 10px #1b1730, 0 40px 60px rgba(0,0,0,.6); }
/* floor tiles */
.mcell { position: absolute; width: var(--mcell); height: var(--mcell); cursor: pointer; transform: translateZ(1px); }
.mcell.floor { background: #e9e0d0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mcell.room-hall { background: #f0e3c4; background-image: linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%); background-size: 16px 16px; }
.mcell.room-library { background: #b8405a; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px); }
.mcell.room-kitchen { background: #cfe9e4; background-image: linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%), linear-gradient(45deg, #ffffff 25%, transparent 25%, transparent 75%, #ffffff 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.mcell.room-armory { background: #8f9bb3; background-image: radial-gradient(circle, rgba(255,255,255,.18) 2px, transparent 3px); background-size: 14px 14px; }
.mcell.room-basement { background: #6b6675; background-image: linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px); background-size: 18px 24px; }
.mcell.room-garden { background: #7fcf5a; background-image: radial-gradient(circle, rgba(0,80,0,.15) 1px, transparent 2px); background-size: 10px 10px; }
.mcell.room-secret { background: #7c5cff; background-image: radial-gradient(circle, rgba(255,255,255,.3) 1px, transparent 2px); background-size: 12px 12px; }
.mcell.door { background: #c68a4b !important; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 10px) !important; box-shadow: inset 0 0 0 3px #8d5524; }
.mcell.ghostfloor { background: #c9b8ff !important; }
.mcell.nope { animation: nope .3s; }
@keyframes nope { 50% { box-shadow: inset 0 0 0 4px #ff4d6d; } }
/* walls: little 3D blocks (south walls are low stubs, like a dollhouse with the front cut away) */
.mwall { position: absolute; width: var(--mcell); height: var(--mcell); transform-style: preserve-3d; cursor: pointer; --h: var(--mwall); }
.mwall.low { --h: var(--mlow); }
.mwall.ghost { --h: calc(var(--mwall) * 1.3); }
.mwall .wtop { position: absolute; inset: 0; background: #7b7294; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 5px, transparent 5px 11px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); transform: translateZ(var(--h)); }
.mwall.low .wtop { background: #8d85a8; }
.mwall .wf { position: absolute; background: #4b4466; }
.mwall .wf.s { left: 0; width: var(--mcell); height: var(--h); top: calc(var(--mcell) - var(--h)); transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(#5e5680, #3d3656); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.mwall .wf.e { top: 0; height: var(--mcell); width: var(--h); left: calc(var(--mcell) - var(--h)); transform-origin: 100% 50%; transform: rotateY(90deg); background: #3b3450; }
.mwall .wf.w { top: 0; height: var(--mcell); width: var(--h); left: 0; transform-origin: 0 50%; transform: rotateY(-90deg); background: #3b3450; }
.mwall.ghost .wtop { background: #d9c7ff; opacity: .55; }
.mwall.ghost .wf { opacity: .5; background: #c9b8ff; }
.mroom-label { position: absolute; font-family: var(--head); font-size: calc(var(--mcell) * .3); color: rgba(255,255,255,.85); text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.4); pointer-events: none; letter-spacing: .5px; transform: translateZ(2px); }
.mshadow { position: absolute; left: 0; top: 0; width: calc(var(--mcell) * .7); height: calc(var(--mcell) * .35); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.4), transparent 70%); pointer-events: none; }
/* sprites: upright cut-outs standing on the floor */
.mspr { position: absolute; left: 0; top: 0; width: var(--mcell); height: var(--mspr); transform-origin: 50% 100%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.mspr .spr { font-size: calc(var(--mcell) * .78); line-height: 1; position: relative; padding-bottom: 2px; }
.mspr.obj .spr, .mspr.furn .spr { pointer-events: auto; cursor: pointer; }
.mspr.furn .spr { font-size: calc(var(--mcell) * .9); }
.mspr.mhero { transition: transform .17s linear; }
.mspr.mhero .spr svg { height: calc(var(--mspr) * 1.05); width: auto; overflow: visible; display: block; }
.mspr.mhero.left .spr { transform: scaleX(-1); }
.mspr.mhero.walking .spr { animation: mwalk .34s ease-in-out infinite; }
.mspr.mhero.left.walking .spr { animation-name: mwalkL; }
@keyframes mwalk { 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes mwalkL { 50% { transform: scaleX(-1) translateY(-6px) rotate(-4deg); } }
.mspr.item .spr { animation: itemfloat 1.4s ease-in-out infinite; text-shadow: 0 0 10px #fff7b0, 0 0 20px #ffe066; }
.mspr.item.done .spr { animation: none; text-shadow: none; opacity: .9; }
@keyframes itemfloat { 50% { transform: translateY(-5px) scale(1.08); } }
.mspr.npc .spr { animation: npcbob 2s ease-in-out infinite; font-size: calc(var(--mcell) * .95); }
@keyframes npcbob { 50% { transform: translateY(-3px); } }
.mspr .bang { position: absolute; top: -8px; right: -10px; font-size: calc(var(--mcell) * .4); animation: bounce 1s ease-in-out infinite; }
.mspr.gate .spr { font-size: calc(var(--mcell) * .95); }
.msparkle { position: absolute; z-index: 20; font-size: 22px; pointer-events: none; animation: sparkfly .9s ease-out forwards; }
@keyframes sparkfly { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
#mbottom { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 56px; flex-wrap: wrap; }
#m-hint { font-size: 22px; color: #fff; text-shadow: 0 2px 0 var(--ink); font-weight: 600; }
.panel.say { max-width: 620px; }
.say-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.say-icon { font-size: 56px; line-height: 1; }
#m-say-text { font-size: 24px; line-height: 1.3; margin: 8px 0 0; }
.missions { text-align: left; }
.mission { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 2px solid #e4e9f4; font-size: 22px; }
.mission .mi { font-size: 30px; } .mission .mt { flex: 1; } .mission .ms { color: #4a4a62; font-size: 18px; }
.mission.done { background: #e9f8ee; }
/* timing game: tap when the line is in the GREEN */
.overlay.timing { background: rgba(10,5,30,.82); flex-direction: column; text-align: center; cursor: pointer; }
.tbox { width: min(92vw, 900px); display: flex; flex-direction: column; align-items: center; }
.ticon { font-size: 70px; line-height: 1; animation: bounce 1s ease-in-out infinite; }
.tlabel { font-family: var(--head); font-size: clamp(30px, 5vw, 58px); color: #fff; text-shadow: 0 4px 0 #000; margin: 6px 0 4px; }
.tsub { font-size: clamp(18px, 2.6vw, 28px); font-weight: 700; color: #ffd93d; margin-bottom: 22px; }
.tsub .g { color: #38e07a; }
.tbar { position: relative; width: 100%; height: 76px; border-radius: 38px; overflow: hidden; border: 5px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,.6); background: #e04343; }
.tbar .zone { position: absolute; top: 0; bottom: 0; }
.tbar .zone.y { background: #ffd23d; } .tbar .zone.g { background: #38e07a; box-shadow: inset 0 0 20px rgba(255,255,255,.5); }
.tbar .ptr { position: absolute; top: -6px; bottom: -6px; width: 14px; margin-left: -7px; background: #fff; border-radius: 7px; box-shadow: 0 0 16px #fff, 0 0 4px #000; left: 0; }
.timing .tap { margin-top: 26px; font-family: var(--head); font-size: clamp(40px, 8vw, 90px); color: #ffd93d; text-shadow: 0 5px 0 #b56d00; animation: tapbounce .5s ease-in-out infinite alternate; }
@keyframes tapbounce { from { transform: scale(1); } to { transform: scale(1.12); } }
.tresult { font-family: var(--head); font-size: clamp(44px, 9vw, 100px); text-shadow: 0 6px 0 #000; display: none; margin-top: 16px; color: #fff; animation: popin .35s cubic-bezier(.3,1.5,.5,1); }
.tresult.great { color: #38e07a; } .tresult.ok { color: #ffd93d; } .tresult.miss { color: #ff6b6b; }
.timing.done .tap, .timing.done .tsub { display: none; } .timing.done .tresult { display: block; }