/* Rumbaroo marketing site */
*{box-sizing:border-box}
/* Free-plan hosting shows a small badge pinned bottom-right (~192x64px): keep a clear strip under the page
   (plus the phone safe area) so nothing tappable ever sits beneath it. */
:root{--badge-safe:calc(80px + env(safe-area-inset-bottom, 0px))}
html{scroll-behavior:smooth;scroll-padding-top:80px;scroll-padding-bottom:var(--badge-safe)}
body{margin:0;font-family:var(--body);color:#f3ead0;line-height:1.55;background:var(--felt-3);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2)}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:#2a1d05;padding:8px 14px;border-radius:8px;z-index:100;font-weight:900}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px;border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:900;text-decoration:none;letter-spacing:.2px;
  padding:12px 24px;transition:transform .12s,box-shadow .12s,filter .12s;white-space:nowrap}
.btn-gold{color:#2a1d05;background:linear-gradient(180deg,#fff0b8 0%,var(--gold-2) 28%,var(--gold) 68%,#b38b22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 #7a5d12,0 10px 22px rgba(0,0,0,.4)}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-gold:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5d12}
.btn-ghost{color:var(--gold-2);border:2px solid var(--gold);background:rgba(6,45,26,.35)}
.btn-ghost:hover{background:rgba(212,175,55,.14)}
.btn-lg{font-size:19px;padding:15px 30px}
.btn-sm{padding:8px 18px;font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(6,40,24,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:2px solid var(--gold);box-shadow:0 1px 0 var(--gold-3),0 8px 20px rgba(0,0,0,.25)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold)}
.brand span{font-family:var(--display);font-size:26px;letter-spacing:.5px;background:linear-gradient(180deg,#fff2c0,var(--gold-2) 45%,var(--gold) 75%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a:not(.btn){color:#e9dfc0;text-decoration:none;font-weight:800}
.nav-links a:not(.btn):hover{color:var(--gold-2)}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 70px;
  background:var(--felt-noise),radial-gradient(ellipse 80% 90% at 70% 40%,#17864d 0%,var(--felt) 40%,var(--felt-2) 75%,var(--felt-3) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold),var(--gold-2),var(--gold-3));opacity:.9}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:2.2px;font-weight:900;font-size:13px;color:var(--gold-2)}
.eyebrow.center,.section-title.center{text-align:center}
h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.4vw,82px);line-height:1;margin:0 0 20px;color:#fffaf0;text-shadow:0 4px 0 rgba(0,0,0,.25)}
.gold-text{text-shadow:none;background:linear-gradient(180deg,#fff6d0 0%,#ffe38a 35%,var(--gold-2) 60%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch{font-size:19px;max-width:34em;color:#e7efe6;margin:0 0 28px}
.pitch b{color:var(--gold-2)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;margin:24px 0 0;font-weight:800;color:#cfe3d4;font-size:15px}
.ticks li::before{content:"✓";color:var(--gold-2);margin-right:7px}
.hero-art{position:relative;justify-self:center;width:min(460px,100%)}
.spotlight{position:absolute;inset:-12%;background:radial-gradient(circle,rgba(255,236,170,.28),transparent 62%);pointer-events:none}
.mascot{position:relative;width:100%;border-radius:50%;box-shadow:0 0 0 6px var(--gold),0 0 0 12px rgba(6,40,24,.9),0 0 0 14px var(--gold-3),0 30px 60px rgba(0,0,0,.55);
  animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.float{position:absolute;--tw:58px;--th:78px;animation:drift 6s ease-in-out infinite}
.f1{left:-4%;top:6%;transform:rotate(-14deg)}
.f2{right:-3%;top:2%;transform:rotate(12deg);animation-delay:-1.5s}
.f3{left:-2%;bottom:6%;transform:rotate(9deg);animation-delay:-3s}
.f4{right:-1%;bottom:12%;transform:rotate(-10deg);animation-delay:-4.5s}
@keyframes drift{50%{translate:0 -12px}}

/* tile rail */
.rail{background:linear-gradient(180deg,#3d2614,#24150a);border-bottom:3px solid var(--gold-3);padding:30px 0 24px;
  box-shadow:inset 0 10px 20px rgba(0,0,0,.35)}
.rail-inner{text-align:center}
.tile-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;--tw:52px;--th:70px}
.tile-row .gap{width:18px}
.rail-caption{margin:16px auto 0;color:#e2cfa3;font-weight:700;max-width:46em}

/* sections */
section{scroll-margin-top:70px}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.08;margin:0 0 18px;color:#fffaf0}
.pitch-band{padding:80px 0;background:var(--felt-noise),linear-gradient(180deg,var(--felt-2),var(--felt-3))}
.pitch-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.pitch-body p{font-size:18px;color:#dbe8dd;margin:0 0 16px}
.pitch-body b{color:var(--gold-2)}

.how{padding:84px 0;background:var(--felt-noise),radial-gradient(ellipse at 50% 0%,var(--felt) 0%,var(--felt-2) 60%,var(--felt-3) 100%)}
.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding:28px 22px 22px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12));
  border:1px solid rgba(212,175,55,.5);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.step-n{position:absolute;top:-20px;left:20px;--tw:34px;--th:44px;width:34px;height:44px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:22px;color:var(--t-red);background:linear-gradient(170deg,#fffdf5,var(--ivory) 45%,var(--ivory-2));
  box-shadow:inset 0 1px 0 #fff,0 1px 0 #e2d4ac,0 2px 0 #d3c08f,0 3px 0 #ad945c,0 5px 8px rgba(0,0,0,.35)}
.step:nth-child(2) .step-n{color:var(--t-blue)}.step:nth-child(3) .step-n{color:var(--t-green)}.step:nth-child(4) .step-n{color:var(--t-yellow)}
.step h3{margin:6px 0 8px;font-size:20px;color:var(--gold-2);font-weight:900}
.step p{margin:0 0 8px;color:#dbe8dd}
.mini-list{margin:0;padding-left:18px;color:#dbe8dd}
.mini-list li{margin-bottom:6px}
.mini-list b{color:#fff6dc}

.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.rule-card{background:linear-gradient(180deg,#fffcf3,var(--ivory));color:var(--ink);border-radius:20px;padding:24px;border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(6,40,26,.6),0 18px 34px rgba(0,0,0,.35)}
.rule-card h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 12px;color:var(--felt-2)}
.rule-card h3:not(:first-child){margin-top:20px}
.rule-card p{margin:0 0 12px}
.demo-meld{display:flex;gap:4px;margin:4px 0 8px;--tw:40px;--th:54px;padding:8px 8px 4px;border-radius:12px;width:max-content;
  background:var(--felt-noise),var(--felt);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.legend{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:10px}
.legend li{display:flex;align-items:center;gap:14px;--tw:44px;--th:58px}
.legend li .tile{margin:0}
.note{font-size:14px;color:#6b5d3c;font-style:italic}
.score{width:100%;border-collapse:collapse;margin:4px 0 12px}
.score td{padding:6px 4px;border-bottom:1px solid #eadcb6}
.score td:last-child{text-align:right;font-weight:900;color:#0f6038}

.full-rules{margin-top:28px;border:1px solid rgba(212,175,55,.55);border-radius:16px;background:rgba(0,0,0,.18)}
.full-rules summary{cursor:pointer;padding:16px 22px;font-weight:900;color:var(--gold-2);font-size:18px;list-style:none;display:flex;justify-content:space-between}
.full-rules summary::-webkit-details-marker{display:none}
.full-rules summary::after{content:"+";font-size:24px;line-height:1}
.full-rules[open] summary::after{content:"–"}
.full-rules-body{padding:0 22px 18px;columns:2 320px;column-gap:36px;color:#dbe8dd}
.full-rules-body h4{margin:10px 0 4px;color:#fff6dc;break-after:avoid}
.full-rules-body p{margin:0 0 10px;break-inside:avoid}

.features{padding:84px 0;background:linear-gradient(180deg,var(--felt-3),#04200f)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.feature{padding:26px;border-radius:18px;background:linear-gradient(180deg,rgba(20,112,63,.35),rgba(6,45,26,.5));border:1px solid rgba(212,175,55,.38);
  transition:transform .15s,border-color .15s}
.feature:hover{transform:translateY(-3px);border-color:var(--gold)}
.f-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#2a1d05;
  background:linear-gradient(180deg,#fff0b8,var(--gold-2) 35%,var(--gold));box-shadow:0 3px 0 #7a5d12}
.f-ico svg{width:28px;height:28px}
.feature h3{margin:16px 0 6px;font-size:20px;color:#fff6dc}
.feature p{margin:0;color:#cfe0d2}

.final-cta{padding:70px 0;background:var(--felt-noise),radial-gradient(ellipse at 30% 50%,#17864d,var(--felt) 45%,var(--felt-2));
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}
.final-inner{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.final-inner img{width:180px;height:180px;border-radius:50%;box-shadow:0 0 0 5px var(--gold),0 20px 40px rgba(0,0,0,.45)}
.final-inner h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,44px);margin:0 0 6px;color:#fffaf0}
.final-inner p{margin:0 0 20px;font-size:18px;color:#dbe8dd}

.footer{background:#03170b;padding:34px 0 calc(34px + var(--badge-safe));color:#a9bfae}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.footer .brand img{width:32px;height:32px}
.footer .brand span{font-size:20px}
.footer nav{display:flex;gap:20px}
.footer nav a{color:#d9ceb0;text-decoration:none;font-weight:800}
.footer nav a:hover{color:var(--gold-2)}
.fine{width:100%;margin:0;font-size:14px;text-align:center;border-top:1px solid rgba(212,175,55,.25);padding-top:16px}

@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .rules-grid{grid-template-columns:1fr 1fr}
  .rules-grid .rule-card:last-child{grid-column:1/-1}
  .feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero{padding:30px 0 56px}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:30px}
  .hero-art{order:-1;width:min(330px,78vw)}
  .pitch{margin-inline:auto}
  .cta-row,.ticks{justify-content:center}
  .float{--tw:44px;--th:59px}
  .pitch-grid{grid-template-columns:1fr;gap:10px}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:600px){
  .wrap{width:calc(100% - 32px)}
  .nav-inner{height:58px}
  .brand span{font-size:22px}
  .btn-lg{font-size:17px;padding:14px 24px}
  .cta-row .btn{flex:1 1 100%}
  .tile-row{--tw:38px;--th:51px;gap:6px}
  .tile-row .gap{width:100%;height:0}
  .steps,.rules-grid,.feature-grid{grid-template-columns:1fr}
  .rules-grid .rule-card:last-child{grid-column:auto}
  .pitch-band,.how,.features{padding:60px 0}
  .final-inner{text-align:center;gap:20px}
  .footer-inner{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* action-tile legend: 11 entries, so a compact tile */
.legend li{--tw:34px;--th:46px;gap:12px;font-size:15px}
.legend li .tile .sub{font-size:7px}
/* difficulty modes */
.modes-band{margin-top:34px;text-align:center}
.modes-title{font-family:var(--display);font-weight:400;font-size:28px;color:var(--gold-2);margin:0 0 16px}
.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.mode-tile{background:linear-gradient(180deg,#fffcf3,var(--ivory));color:var(--ink);border-radius:20px;padding:18px 20px;border:2px solid var(--mc);box-shadow:0 10px 30px rgba(0,0,0,.25);position:relative}
.mode-tile.m-joey{--mc:#1f7d4f}.mode-tile.m-wallaby{--mc:#b07e1c}.mode-tile.m-bigred{--mc:#a3301b}
.mode-tile img{display:block;height:auto;border-radius:50%;box-shadow:0 0 0 4px #fffaf0,0 0 0 7px var(--mc);margin:6px 0 12px}
.mode-tile h4{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 6px;color:var(--mc)}
.mode-tile h4 small{font-family:var(--body);font-weight:900;font-size:13px;color:#fff;background:var(--mc);border-radius:999px;padding:2px 9px;vertical-align:middle;margin-left:6px}
.mode-tile p{margin:0 0 6px}
.mode-count{font-weight:900;color:#5b4a26;font-size:14px}
@media (max-width:860px){.modes-grid{grid-template-columns:1fr}}
.stats-link{white-space:nowrap}