/* Rumbaroo game: casino-felt skin. Tile look lives in ../assets/tiles.css */
:root{
  --red:var(--t-red); --blue:var(--t-blue); --green:var(--t-green); --yellow:var(--t-yellow);
  --tw:46px; --th:62px; --panel:#0b3b23; --panel-2:#082c1a; --line:rgba(212,175,55,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Hosting (free plan) shows a small "Powered by Netlify" badge pinned to the bottom-right corner (~192x64px).
   Reserve a clear strip at the bottom of every page and dialog so no button, link or tile ever ends up beneath it,
   plus the phone's home-indicator safe area. --badge-safe is the strip height. */
:root{--badge-safe:calc(80px + env(safe-area-inset-bottom, 0px))}
html{scroll-padding-bottom:var(--badge-safe)}
body{padding-bottom:var(--badge-safe)}
body{font-family:var(--body);color:#f4ecd4;min-height:100vh;-webkit-tap-highlight-color:transparent;
  background:var(--felt-noise),radial-gradient(ellipse at 50% 0%,#14703f 0%,var(--felt) 35%,var(--felt-2) 75%,var(--felt-3) 100%) fixed;background-color:var(--felt-2)}
.hidden{display:none!important}
button{font:inherit;cursor:pointer}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;flex-wrap:wrap;
  background:linear-gradient(180deg,#0a3d24,#06281a);border-bottom:3px solid var(--gold);
  box-shadow:0 1px 0 var(--gold-3),0 6px 18px rgba(0,0,0,.35);position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:10px;margin:0;text-decoration:none;color:var(--gold-2)}
.logo-roo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.4);background:var(--felt-2)}
.logo .word{font-family:var(--display);font-size:28px;letter-spacing:.5px;
  background:linear-gradient(180deg,#fff2c0 0%,var(--gold-2) 45%,var(--gold) 70%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))}
.top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.round-info{font-weight:800;font-size:14px;color:var(--gold-2)}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:999px;padding:9px 18px;font-weight:900;letter-spacing:.2px;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,var(--ivory-2));box-shadow:0 3px 0 #a99260,0 5px 10px rgba(0,0,0,.3);transition:transform .08s,filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #a99260}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
.btn:focus-visible,.choice:focus-visible,.tile:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--gold-2);border:2px solid var(--gold);box-shadow:none}
.btn.ghost:hover:not(:disabled){background:rgba(212,175,55,.14)}
.btn.small{padding:5px 12px;font-size:13px}
.btn.go,.btn.primary{background:linear-gradient(180deg,#ffe9a3 0%,var(--gold-2) 30%,var(--gold) 70%,#b8912a 100%);color:#2a1d05;box-shadow:0 3px 0 #7a5d12,0 6px 14px rgba(0,0,0,.35)}
.btn.warn{background:linear-gradient(180deg,#f7ead0,#e4cfa4)}
.btn.roo-btn{background:linear-gradient(180deg,#1c8a52,#0f6038);color:#fff4cf;box-shadow:inset 0 0 0 2px var(--gold),0 3px 0 #06311c,0 5px 10px rgba(0,0,0,.3);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.roo-btn::before{content:"";width:22px;height:22px;border-radius:50%;background:url(../assets/icon-48.png) center/cover;flex:0 0 auto}
.btn.roo-btn.urgent:not(:disabled){animation:pulse 1s infinite;background:linear-gradient(180deg,#ffe9a3,var(--gold));color:#2a1d05}
.btn.roo-btn.called{background:linear-gradient(180deg,#2fb36e,#16804a);color:#fff}
@keyframes pulse{50%{transform:scale(1.07)}}

/* ---------- layout ---------- */
main{max-width:1140px;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.opponents{display:flex;gap:10px;flex-wrap:wrap}
.opp{flex:1 1 170px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:14px;padding:9px 12px;
  border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:5px;transition:box-shadow .2s,border-color .2s}
.opp.active{border-color:var(--gold-2);box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(244,215,124,.45)}
.opp .name{font-weight:900;display:flex;justify-content:space-between;gap:6px;color:#fff6dc}
.opp .name span:last-child{color:var(--gold-2)}
.opp .meta{font-size:12px;color:#cfe3d4;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{font-size:11px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:900}
.badge.roo{background:var(--gold);color:#2a1d05}.badge.skip{background:#f0d9a8;color:#3b2a08}
.minis{display:flex;flex-wrap:wrap;gap:3px}
.mini{width:10px;height:14px;border-radius:2px;background:linear-gradient(160deg,#16784a,#0a4428);box-shadow:inset 0 0 0 1px var(--gold),0 1px 0 #041c10}

.middle{display:flex;gap:12px;align-items:stretch}
.piles{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:16px;justify-content:center;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.pile-box{display:flex;flex-direction:column;align-items:center;gap:6px}
.pile-label{font-size:11px;font-weight:900;color:var(--gold-2);text-transform:uppercase;letter-spacing:1.2px;display:flex;align-items:center;gap:6px}
.color-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--ivory);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.discard{min-width:calc(var(--tw) + 18px);min-height:calc(var(--th) + 22px);border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:2px dashed rgba(244,215,124,.4);padding:6px}
.discard.can{border-color:var(--gold-2);background:rgba(244,215,124,.12);cursor:pointer}
.tile.back.pool{cursor:pointer;font-family:var(--body);font-weight:900;font-size:15px}
.tile.back.pool::after{content:"";position:absolute;top:calc(var(--th)*.14);width:calc(var(--tw)*.52);height:calc(var(--tw)*.52);border-radius:50%;
  background:url(../assets/icon-48.png) center/cover;box-shadow:0 0 0 1px var(--gold)}
.tile.back.pool span{margin-top:calc(var(--th)*.5)}
.tile.pool:disabled{opacity:.7;cursor:default}
.tile.pool.can{animation:pulse 1.4s infinite}

/* the felt table with a gold-trimmed rail */
.table-wrap{flex:1;border-radius:22px;padding:12px 14px;min-height:210px;position:relative;
  background:var(--felt-noise),radial-gradient(ellipse at 50% 35%,#17834b 0%,var(--felt) 55%,var(--felt-2) 100%);
  border:7px solid #3a2414;box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 40px rgba(0,0,0,.45),0 0 0 1px var(--gold-3),0 8px 20px rgba(0,0,0,.35)}
.table-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;flex-wrap:wrap}
.turn-meter{font-size:12px;color:var(--gold-2);font-weight:900}
.table{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.meld{display:flex;gap:3px;padding:6px 6px 2px;border-radius:12px;background:rgba(0,0,0,.2);border:2px solid transparent;align-items:center;cursor:pointer;
  min-height:calc(var(--th) + 16px);box-shadow:inset 0 1px 4px rgba(0,0,0,.25)}
.meld.invalid{border-color:#ff7a7a;background:rgba(200,40,40,.28)}
.meld.target{border-color:var(--gold-2)}
.meld .add{width:24px;height:var(--th);margin-bottom:4px;border-radius:7px;border:2px dashed rgba(244,215,124,.6);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px}
.new-meld{border:2px dashed rgba(244,215,124,.55);color:var(--gold-2);border-radius:12px;padding:5px 14px;display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--th) + 16px);font-weight:900;cursor:pointer;background:rgba(244,215,124,.06)}
.new-meld.target{border-color:var(--gold-2);background:rgba(244,215,124,.18)}
.empty-note{color:#cfe8d9;font-size:13px;padding:6px;font-style:italic}

/* game-state tile modifiers */
.tile{transition:transform .12s,box-shadow .12s;touch-action:manipulation;cursor:default}
.hand .tile,.table .tile{cursor:pointer}
.tile.sel{transform:translateY(-9px);box-shadow:inset 0 1px 0 #fff,0 0 0 3px var(--gold-2),0 0 16px rgba(244,215,124,.75),var(--tile-depth)}
.tile.staged{outline:2px dashed var(--gold);outline-offset:2px}
.tile.playable::after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold-3),0 0 6px rgba(212,175,55,.9)}
.tile.dragging{opacity:.4}
.tile.swap-target{box-shadow:0 0 0 3px var(--gold-2),var(--tile-depth)}

.status{background:linear-gradient(180deg,#fffaf0,var(--ivory));color:var(--ink);border-radius:12px;padding:9px 14px;font-weight:800;
  box-shadow:0 0 0 1px var(--gold-3),0 4px 10px rgba(0,0,0,.25);min-height:40px}
.status.err{background:#ffe1dc;color:#9b1c1c}
.status.mine{background:linear-gradient(180deg,#fff3c4,#f4dc8a);color:#2a1d05}

/* the player's rack */
.hand-wrap{border-radius:18px;padding:12px;background:linear-gradient(180deg,#4a2e18,#2e1b0d);border:1px solid #6b4826;
  box-shadow:inset 0 0 0 2px var(--gold-3),inset 0 2px 0 rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.4)}
.hand-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.hand-title{font-weight:900;color:var(--gold-2)}
.sorters{display:flex;gap:6px}
.hand{display:flex;flex-wrap:wrap;gap:7px;min-height:calc(var(--th) + 22px);padding:12px 8px 6px;border-radius:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.12));box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.hand.target{background:rgba(244,215,124,.16)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.controls .btn{flex:1 1 auto}
.log-wrap{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:14px;padding:8px 14px;color:#dfeee4}
.log-wrap summary{font-weight:900;cursor:pointer;color:var(--gold-2)}
.log{margin:6px 0 0;padding-left:22px;max-height:180px;overflow:auto;font-size:13px;display:flex;flex-direction:column-reverse}
.log li{padding:2px 0}
.log li.me{color:var(--gold-2);font-weight:800}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:rgba(3,20,11,.7);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px 12px var(--badge-safe)}
.modal-card{background:linear-gradient(180deg,#fffcf3,var(--ivory));color:var(--ink);border-radius:20px;max-width:580px;width:100%;max-height:100%;overflow:auto;scroll-padding-bottom:16px;padding:20px 22px;
  border:3px solid var(--gold);box-shadow:0 0 0 6px rgba(6,40,26,.9),0 0 0 7px var(--gold-3),0 20px 50px rgba(0,0,0,.55)}
.modal-card h2{margin:0 0 6px;font-family:var(--display);font-weight:400;color:var(--felt-2);font-size:26px}
.modal-card h3{margin:16px 0 4px;color:#0f6038;font-weight:900;text-transform:uppercase;letter-spacing:.8px;font-size:14px;border-bottom:1px solid rgba(156,122,30,.35);padding-bottom:3px}
.modal-card p,.modal-card li{line-height:1.45}
.modal-card .lead{color:#5d5134;margin:0}
.help-hero{display:flex;gap:14px;align-items:center}
.help-hero img{width:96px;height:96px;border-radius:50%;border:3px solid var(--gold);flex:0 0 auto;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.choice{flex:1 1 100px;padding:12px;border-radius:14px;border:2px solid #e2d3ab;background:#fffdf6;font-weight:900;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:4px}
.choice small{font-weight:700;color:#6b5d3c}
.choice.on{border-color:var(--gold);background:#fff3c9;box-shadow:0 0 0 2px rgba(212,175,55,.35)}
.choice .ico{width:24px;height:24px;background:#0f6038;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.swatch{flex:1 1 60px;height:64px;border-radius:14px;border:3px solid #fffaf0;color:#fff;font-weight:900;text-transform:capitalize;box-shadow:0 0 0 1px var(--gold-3),0 4px 8px rgba(0,0,0,.2)}
.score-table{width:100%;border-collapse:collapse;margin-top:10px}
.score-table th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#6b5d3c}
.score-table th,.score-table td{padding:7px 6px;border-bottom:1px solid #eadcb6;text-align:left}
.score-table tr.win td{font-weight:900;color:#0f6038;background:rgba(212,175,55,.15)}
.roo-portrait{position:relative;width:150px;height:150px;margin:0 auto 6px}
.roo-portrait img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--gold);box-shadow:0 0 0 4px #0a4428,0 10px 24px rgba(0,0,0,.35);animation:hop 2.4s infinite}
.roo-portrait.over img{box-shadow:0 0 0 4px #0a4428,0 0 30px rgba(244,215,124,.9)}
.roo-portrait .trophy{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-size:14px;letter-spacing:1px;
  padding:3px 12px;border-radius:999px;color:#2a1d05;background:linear-gradient(180deg,#ffe9a3,var(--gold));box-shadow:0 2px 0 #7a5d12}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px) rotate(-3deg)}90%{transform:translateY(0)}}
.result-title{text-align:center}
.result-sub{text-align:center;color:#5d5134;font-weight:700}
.setup-hero{text-align:center}
.setup-hero h2{font-size:36px;margin-top:6px}
label.field{display:block;margin-top:12px;font-weight:900}
label.field input{width:100%;padding:10px;border-radius:12px;border:2px solid #e2d3ab;font:inherit;margin-top:4px;background:#fffdf6}
label.field input:focus{outline:none;border-color:var(--gold)}
.toast{position:fixed;left:50%;bottom:var(--badge-safe);transform:translateX(-50%);background:linear-gradient(180deg,#0f6038,#083620);color:var(--gold-2);padding:10px 18px;border-radius:999px;
  font-weight:900;z-index:60;border:2px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.45);max-width:92vw;text-align:center;display:flex;align-items:center;gap:8px}
.toast.roo{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:1px}
.toast.roo::before{content:"";width:30px;height:30px;border-radius:50%;background:url(../assets/icon-48.png) center/cover}


/* ---------- online: choose / lobby / badges ---------- */
.btn.ghost-dark{background:transparent;color:#0f6038;border:2px solid #0f6038;box-shadow:none}
.btn.ghost-dark:hover:not(:disabled){background:rgba(15,96,56,.08)}
.btn.friends{background:linear-gradient(180deg,#1c8a52,#0f6038);color:#fff4cf;box-shadow:inset 0 0 0 2px var(--gold),0 3px 0 #06311c,0 5px 10px rgba(0,0,0,.3)}
.online-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.oc-box{border:2px solid #e2d3ab;border-radius:16px;padding:12px 14px;background:#fffdf6;display:flex;flex-direction:column;gap:8px}
.oc-box h3{margin:0;border:0;padding:0}
.oc-box p{margin:0;font-size:14px;color:#5d5134}
.join-row{display:flex;gap:8px}
.code-input{flex:1;min-width:0;font-family:var(--display);font-size:22px;letter-spacing:3px;text-transform:uppercase;text-align:center;padding:6px 8px;border-radius:12px;border:2px solid #e2d3ab;background:#fff}
.code-input:focus{outline:none;border-color:var(--gold)}
.form-err{color:#9b1c1c;font-weight:800;min-height:1.2em;margin:8px 0 0}
.lobby-head{display:flex;gap:14px;align-items:center}
.lobby-head img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);flex:0 0 auto;animation:hop 2.4s infinite}
.lobby-head h2{margin:0}
.code-box{margin:14px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:16px;
  background:var(--felt-noise),radial-gradient(ellipse at 50% 35%,#17834b,var(--felt) 60%,var(--felt-2));border:3px solid #3a2414;box-shadow:inset 0 0 0 2px var(--gold)}
.code-label{font-size:11px;font-weight:900;color:var(--gold-2);text-transform:uppercase;letter-spacing:1.4px}
.room-code{font-family:var(--display);font-size:40px;letter-spacing:8px;color:var(--gold-2);text-shadow:0 2px 0 rgba(0,0,0,.45);user-select:all}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.share-row input{flex:1 1 200px;min-width:0;padding:9px 12px;border-radius:999px;border:2px solid #e2d3ab;background:#fff;font:inherit;font-size:14px;color:#5d5134}
.seats{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.seat{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fffdf6;border:2px solid #eadcb6}
.seat .av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:#0f6038;box-shadow:inset 0 0 0 2px var(--gold);flex:0 0 auto}
.seat .nm{font-weight:900;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat.empty{border-style:dashed;background:transparent;color:#7a6c48}
.seat.empty .av{background:transparent;color:#b9a774;box-shadow:inset 0 0 0 2px #d9c896}
.seat.off .nm{opacity:.6}
.tag{font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;background:#efe3c2;color:#5d5134;text-transform:uppercase;letter-spacing:.5px}
.tag.host{background:linear-gradient(180deg,#ffe9a3,var(--gold));color:#2a1d05}
.tag.you{background:#0f6038;color:#fff4cf}
.tag.bot{background:#e6eef0;color:#2c4a52}
.tag.off{background:#ffe1dc;color:#9b1c1c}
.seat-x{border:0;background:transparent;font-size:22px;line-height:1;color:#9b1c1c;padding:0 4px}
label.field.inline{display:flex;align-items:center;gap:10px}
label.field.inline input{width:110px;margin:0}
.lobby-wait{color:#5d5134;font-weight:700;margin:10px 0 0}
.badge.off{background:#7a2a20;color:#ffe1dc}
.opp.away{opacity:.78}
.status.hurry{animation:pulse 1s infinite}
.icon-btn{padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;min-width:42px}
.icon-btn.muted{opacity:.7}

/* ---------- sound settings ---------- */
.sound-panel{position:absolute;z-index:70;width:240px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#fffcf3,var(--ivory));color:var(--ink);
  border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(6,40,26,.9),0 14px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;font-weight:800}
.sound-panel label{display:flex;align-items:center;gap:10px;cursor:pointer}
.sound-panel input[type=checkbox]{width:18px;height:18px;accent-color:#0f6038}
.sound-panel .vol{flex-direction:column;align-items:stretch;gap:4px}
.sound-panel input[type=range]{accent-color:var(--gold-3);width:100%}
.snd-note{margin:0;font-size:12px;font-weight:700;color:#6b5d3c}

/* ---------- dealer mascot widget ---------- */
.roo-box{position:relative}
.roo-widget{position:relative;width:70px;height:70px;padding:0;border:0;background:none;border-radius:50%;overflow:visible}
.roo-face{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 0 3px #0a4428,0 4px 10px rgba(0,0,0,.4);display:block;margin:3px;position:relative;z-index:2;background:var(--felt-2)}
.roo-widget .paw{position:absolute;z-index:3;top:21px;width:24px;height:17px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#c98448,#8a5226);border:2px solid #5b3518;opacity:0;transform:translateY(34px);transition:transform .22s,opacity .22s}
.roo-widget .paw.l{left:9px}.roo-widget .paw.r{right:9px}
.roo-widget.peek .paw{opacity:1;transform:translateY(0)}
.roo-widget.peek .roo-face{transform:translateY(1px)}
.roo-widget .joey{position:absolute;z-index:1;left:50%;bottom:6px;width:38px;height:38px;margin-left:-19px;transform:translateY(0) scale(.4);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.roo-widget .joey svg{width:100%;height:100%;display:block}
.roo-widget.joey-out .joey{opacity:1;transform:translate(26px,-44px) rotate(14deg) scale(1)}
.roo-widget.hop .roo-face{animation:roo-hop .7s ease-out}
.roo-widget.cheer .roo-face{animation:roo-hop .6s ease-out 3}
.roo-widget.shake .roo-face{animation:roo-shake .5s}
.roo-widget .bubble{position:absolute;z-index:4;bottom:100%;left:50%;transform:translate(-50%,6px) scale(.8);white-space:nowrap;padding:3px 10px;border-radius:999px;
  background:#fffaf0;color:#2a1d05;font-weight:900;font-size:12px;box-shadow:0 0 0 2px var(--gold),0 4px 8px rgba(0,0,0,.35);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.roo-widget .bubble.show{opacity:1;transform:translate(-50%,-2px) scale(1)}
@keyframes roo-hop{0%{transform:translateY(0)}25%{transform:translateY(-16px) scaleY(1.05)}50%{transform:translateY(0) scaleY(.9)}65%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes roo-shake{20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.dir-ind{width:30px;height:30px;opacity:0;transition:opacity .3s}
.dir-ind.show{opacity:.85}
.dir-ind svg{width:100%;height:100%;display:block}
.dir-ind.ccw{transform:scaleX(-1)}
.dir-ind.spin svg{animation:spin360 .8s cubic-bezier(.3,.7,.3,1)}
@keyframes spin360{to{transform:rotate(360deg)}}

/* ---------- tile motion ---------- */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.fly{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
.fly .tile{margin:0}
.tile.land{animation:tile-land .42s cubic-bezier(.2,1.4,.4,1)}
@keyframes tile-land{0%{transform:translateY(-16px) scale(1.12)}55%{transform:translateY(2px) scale(.97)}100%{transform:none}}
.hand .tile.arrive{animation:tile-arrive .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes tile-arrive{0%{transform:translateY(-30px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.hand .tile.deal-in{animation:tile-deal .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes tile-deal{0%{transform:translate(-40px,-60px) rotate(-20deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.meld{position:relative}
.meld.shimmer{animation:meld-glow 1.3s ease-out;overflow:hidden}
.meld.shimmer::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,180,.0) 38%,rgba(255,236,160,.85) 50%,rgba(255,240,180,0) 62%,transparent 70%);
  background-size:250% 100%;animation:shimmer-sweep 1.1s ease-out forwards;mix-blend-mode:screen}
@keyframes shimmer-sweep{from{background-position:120% 0}to{background-position:-40% 0}}
@keyframes meld-glow{0%{box-shadow:0 0 0 2px var(--gold-2),0 0 26px rgba(244,215,124,.95)}100%{box-shadow:inset 0 1px 4px rgba(0,0,0,.25)}}
.fx-skipped{animation:fx-swat .9s}
@keyframes fx-swat{0%,100%{transform:none}30%{transform:translateX(10px) rotate(1.5deg)}50%{transform:translateX(-6px)}70%{transform:translateX(3px)}}
.fx-hit{animation:fx-hit .8s}
@keyframes fx-hit{0%,100%{transform:none}40%{transform:translateY(5px) scale(.98)}}
.fx-oops{animation:roo-shake .5s}
.tail-swipe{position:absolute;width:220px;height:80px;margin:-40px 0 0 -110px;animation:tail .85s cubic-bezier(.4,0,.2,1) forwards;transform-origin:10% 80%}
.tail-swipe svg{width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
@keyframes tail{0%{transform:translateX(-160px) rotate(35deg);opacity:0}25%{opacity:1}55%{transform:translateX(10px) rotate(-18deg)}100%{transform:translateX(170px) rotate(-30deg);opacity:0}}
.reverse-spin{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;animation:rev-spin .95s cubic-bezier(.3,.7,.3,1) forwards;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.reverse-spin svg{width:100%;height:100%}
@keyframes rev-spin{0%{transform:scale(.3) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.15) rotate(540deg);opacity:0}}
.star-burst{position:absolute;width:0;height:0}
.star-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;background:var(--c);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:burst .8s ease-out forwards;--tx:calc(cos(var(--a)) * var(--d));--ty:calc(sin(var(--a)) * var(--d))}
.star-burst b{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,240,180,.8) 30%,transparent 70%);animation:flash .5s ease-out forwards}
@keyframes burst{0%{transform:rotate(var(--a)) translateX(0) scale(.4);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(1.5);opacity:0}}
@keyframes flash{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* ---------- Rumbaroo! banner ---------- */
.roo-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;align-items:center;animation:banner-life 2.2s ease forwards}
.roo-banner .leap{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid var(--gold);box-shadow:0 0 0 4px #0a4428,0 0 30px rgba(244,215,124,.8);position:relative;z-index:2;
  animation:leap-in .75s cubic-bezier(.25,.9,.35,1.1) both}
.roo-banner .ribbon{margin-left:-34px;padding:12px 28px 12px 50px;border-radius:0 999px 999px 0;background:linear-gradient(180deg,#1c8a52,#0b4a2b);border:3px solid var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;flex-direction:column;animation:ribbon-in .5s .3s cubic-bezier(.2,1.2,.4,1) both;transform-origin:left center}
.roo-banner .word{font-family:var(--display);font-size:46px;line-height:1;letter-spacing:1px;background:linear-gradient(180deg,#fff2c0,var(--gold-2) 45%,var(--gold) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.roo-banner .who{font-weight:900;color:#fff4cf;font-size:15px;margin-top:2px}
@keyframes leap-in{0%{transform:translate(-55vw,40px) rotate(-30deg) scale(.6)}55%{transform:translate(-10px,-70px) rotate(10deg) scale(1.05)}80%{transform:translate(0,6px) scale(1,.92)}100%{transform:none}}
@keyframes ribbon-in{0%{transform:scaleX(0);opacity:0}100%{transform:none;opacity:1}}
@keyframes banner-life{0%,82%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%)}}
.roo-banner.calm .leap,.roo-banner.calm .ribbon{animation:none}

/* ---------- confetti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden}
.confetti i{position:absolute;top:-20px;height:14px;border-radius:2px;opacity:.95;animation:fall var(--du) cubic-bezier(.25,.4,.5,1) var(--dl) forwards;will-change:transform}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.roo-portrait.over::after{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 10%,rgba(244,215,124,.55) 12%,transparent 14% 35%,rgba(244,215,124,.55) 37%,transparent 39% 60%,rgba(244,215,124,.55) 62%,transparent 64% 85%,rgba(244,215,124,.55) 87%,transparent 89%);
  animation:spin360 6s linear infinite;z-index:-1}
.roo-portrait .trophy{animation:badge-pop .6s .2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes badge-pop{0%{transform:translateX(-50%) scale(0)}100%{transform:translateX(-50%) scale(1)}}

/* ---------- tile explainer: action tiles + Wilds flip over to say what they do ---------- */
.tile.explains{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tile.flipping{opacity:0}
.tile-flip{position:fixed;z-index:90;width:150px;height:196px;--tw:150px;--th:196px;pointer-events:none;perspective:900px}
.tile-flip .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:var(--from) rotateY(0deg);
  transition:transform .38s cubic-bezier(.25,1.25,.4,1)}
.tile-flip.on .flip-inner{transform:translate(0,0) scale(1) rotateY(180deg)}
.tile-flip.off .flip-inner{transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.6,1)}
.tile-flip .face{position:absolute;inset:0;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tile-flip .face.front{width:100%;height:100%;transform:none;font-size:calc(var(--tw)*.5)}
.tile-flip .face.front .sub{font-size:16px}
.tile-flip .back-face{transform:rotateY(180deg);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:14px 12px;text-align:center;color:var(--ink);
  background:radial-gradient(120% 80% at 50% 0%,#fffdf6 0%,#fbf1d6 55%,#efdcab 100%);
  box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 5px #fff6dc,inset 0 0 0 6px rgba(156,122,30,.55),0 10px 26px rgba(0,0,0,.45),0 0 22px rgba(244,215,124,.45)}
.tile-flip .back-face .ico{width:54px;height:54px;flex:none;background:var(--gold-3,#9c7a1e);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.tile-flip .back-face.red .ico{background:var(--t-red)}.tile-flip .back-face.blue .ico{background:var(--t-blue)}
.tile-flip .back-face.green .ico{background:var(--t-green)}.tile-flip .back-face.yellow .ico{background:var(--t-yellow)}
.tile-flip .back-face .ico.ico-wild{-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12V1l3 8z' fill='%23d0343a'/%3E%3Cpath d='M12 12h11l-8 3z' fill='%231d5fd0'/%3E%3Cpath d='M12 12v11l-3-8z' fill='%2312844b'/%3E%3Cpath d='M12 12H1l8-3z' fill='%23d98a00'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23d4af37' stroke='%239c7a1e' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat}
.tile-flip .fl-name{font-family:var(--display,inherit);font-size:21px;font-weight:400;line-height:1.1;color:#3b2a08;letter-spacing:.3px}
.tile-flip .fl-name::after{content:"";display:block;width:42px;height:2px;margin:6px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tile-flip .fl-line{font-size:13.5px;font-weight:700;line-height:1.3;color:#3f3522}
/* reduced motion: no turning or growing, the explanation simply fades in over the tile */
.tile-flip.fade .flip-inner{transform:none!important;transition:none!important}
.tile-flip.fade .face.front{display:none}
.tile-flip.fade .back-face{transform:none;opacity:0;transition:opacity .18s ease!important}
.tile-flip.fade.on .back-face{opacity:1}
.tile-flip.fade.off .back-face{opacity:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.roo-widget.joey-out .joey{opacity:1}}
@media (max-width:700px){
  :root{--tw:37px;--th:51px}
  .logo .word{font-size:22px}
  .logo-roo{width:36px;height:36px}
  .topbar{padding:6px 10px}
  .top-actions{gap:5px}
  .top-actions .btn{padding:5px 10px;font-size:13px}
  .round-info{font-size:12px;width:100%;order:3;text-align:right}
  .opp .name{flex-direction:column;gap:0;font-size:14px}
  .opp .name span:last-child{font-size:12px}
  .middle{flex-direction:column}
  .piles{flex-direction:row;justify-content:space-around}
  .opp{flex:1 1 30%;padding:6px 8px}
  .opp .minis{display:none}
  .table-wrap{min-height:150px;border-width:5px;padding:10px}
  .controls .btn{padding:10px 8px;font-size:14px}
  .tile .sub{font-size:7px}
  .online-choice{grid-template-columns:1fr}
  .room-code{font-size:32px;letter-spacing:6px}
  .roo-banner .leap{width:96px;height:96px}
  .roo-banner .word{font-size:30px}
  .roo-banner .ribbon{padding:8px 18px 8px 40px}
  .roo-widget{width:54px;height:54px}
  .roo-face{width:48px;height:48px}
  .roo-widget .paw{top:15px;width:18px;height:13px}
  .roo-widget .paw.l{left:7px}.roo-widget .paw.r{right:7px}
  .roo-box .pile-label{display:none}
  .roo-box{flex-direction:row}
}

/* ---------- difficulty modes ---------- */
.round-info{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.mode-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border-radius:999px;font:900 12px/1.2 var(--body);letter-spacing:.02em;
  color:#fffaf0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),0 2px 5px rgba(0,0,0,.25);white-space:nowrap;vertical-align:middle}
.mode-badge img{width:20px;height:20px;border-radius:50%;background:#fffaf0;box-shadow:0 0 0 1.5px currentColor}
.mode-badge small{font-weight:700;opacity:.85;margin-left:3px}
.mode-badge.m-joey{background:linear-gradient(180deg,#43b07a,#1f7d4f)}
.mode-badge.m-wallaby{background:linear-gradient(180deg,#d7a43b,#9c6d14)}
.mode-badge.m-bigred{background:linear-gradient(180deg,#d4573a,#8f2414)}
.mode-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 4px}
.mode-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;border-radius:16px;border:2px solid #e2d3ab;background:#fffdf6;color:var(--ink);font-family:var(--body);cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s}
.mode-card:hover:not(:disabled){transform:translateY(-2px)}
.mode-card b{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.01em}
.mode-card small{font-weight:700;color:#6b5d3c;font-size:11.5px;text-align:center}
.mode-card .mc-roo{height:66px;display:flex;align-items:flex-end;justify-content:center}
.mode-card .mc-roo img{border-radius:50%;box-shadow:0 0 0 3px #fffaf0,0 0 0 5px var(--mc,#1f7d4f),0 4px 10px rgba(0,0,0,.25);object-fit:cover}
.mode-card.m-joey{--mc:#1f7d4f}.mode-card.m-wallaby{--mc:#b07e1c}.mode-card.m-bigred{--mc:#a3301b}
.mode-card.m-joey .mc-roo img{width:40px;height:40px}
.mode-card.m-wallaby .mc-roo img{width:52px;height:52px}
.mode-card.m-bigred .mc-roo img{width:64px;height:64px}
.mode-card .mc-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin-top:3px;min-height:18px}
.mode-card .mc-icons .ico{width:16px;height:16px;background:var(--mc);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.mode-card.on{border-color:var(--mc);background:#fff6d6;box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 30%,transparent),0 6px 14px rgba(0,0,0,.15)}
.mode-card.on::after{content:"✓";position:absolute;top:6px;right:9px;font-weight:900;color:var(--mc)}
.mode-pick.ro .mode-card{cursor:default}
.mode-pick.ro .mode-card:not(.on){opacity:.45}
.mode-card:disabled{color:var(--ink)}
.help-modes{list-style:none;padding:0}.help-modes li{margin:6px 0}
.tile-guide{list-style:none;padding:0}
.tile-guide li{display:grid;grid-template-columns:28px 1fr;column-gap:8px;align-items:start;margin:7px 0}
.tile-guide li b{grid-column:2}.tile-guide li{grid-auto-flow:row}
.tile-guide .ico{grid-row:1/span 2;width:26px;height:26px;background:#0f6038;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;margin-top:2px}

/* ---------- pouch slot ---------- */
.pouch-slot{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(244,215,124,.35);color:var(--gold-2);font-weight:800;font-size:13px}
.pouch-slot .pouch-label{display:inline-flex;align-items:center;gap:5px}
.pouch-slot .pouch-label .ico{width:18px;height:18px;background:var(--gold-2);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pouch-slot small{font-weight:700;opacity:.75}
.pouch-slot .pouch-tile{--tw:28px;--th:38px;margin:0}
.pouch-slot.full{background:rgba(212,175,55,.18)}
.badge.pouch{background:#7b5a1e;color:#ffe9a3}
.mini.pouched{background:linear-gradient(160deg,#c89a3c,#7b5a1e)!important;box-shadow:0 0 0 1px var(--gold-2)}

/* ---------- croc pending ---------- */
.pool{position:relative}
.snap-count{position:absolute;top:-10px;right:-14px;min-width:30px;padding:2px 6px;border-radius:999px;background:#1d6b3a;color:#e9ffd8;font:900 13px/1.2 var(--body);box-shadow:0 0 0 2px #b9f08a,0 3px 8px rgba(0,0,0,.4);opacity:0;transform:scale(.5);transition:transform .2s,opacity .2s;pointer-events:none}
.snap-count.on{opacity:1;transform:scale(1)}
#btnDraw.croc{background:linear-gradient(180deg,#5cc27a,#1d6b3a);color:#fff}
.status.croc{background:linear-gradient(180deg,#d9f7c8,#9fdc86);color:#0f3d1c}
.color-name{font-size:11px;font-weight:900;text-transform:capitalize;margin-left:4px;color:var(--gold-2)}

/* ---------- action choice modals ---------- */
.choice-head{display:flex;justify-content:center;margin-bottom:4px}
.pick-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.pick{background:none;border:2px solid transparent;border-radius:12px;padding:4px;cursor:pointer}
.pick:hover,.pick:focus-visible{border-color:var(--gold);background:#fff3c9}
.num-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:10px 0}
.numb{font-family:var(--display);font-size:22px;padding:8px 0 6px;border-radius:12px;border:2px solid #e2d3ab;background:#fffdf6;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center}
.numb small{font:800 9.5px var(--body);color:#0f6038}
.numb:hover{border-color:var(--gold);background:#fff3c9}
@media (max-width:640px){
  .mode-pick{gap:6px}.mode-card{padding:8px 3px}.mode-card b{font-size:15px}.mode-card small{font-size:10.5px}
  .num-grid{grid-template-columns:repeat(5,1fr)}
  .pouch-slot{font-size:12px;padding:3px 8px}
  .hand-bar{flex-wrap:wrap;gap:6px}
}

/* ---------- action tile FX ---------- */
.fx-spot{position:absolute;width:0;height:0}
.hop-roo,.boom-fly,.dingo-run{position:absolute;left:0;top:0;will-change:transform}
.hop-roo img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 3px var(--gold-2),0 10px 14px rgba(0,0,0,.4)}
.boom-fly{width:56px;height:56px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.boom-fly svg,.dingo-run svg{width:100%;height:100%}
.dingo-run{width:90px;height:60px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.ripple i{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:4px solid var(--c);opacity:0;animation:ripple 1s ease-out forwards}
@keyframes ripple{0%{transform:scale(.3);opacity:.95}100%{transform:scale(4);opacity:0}}
.croc-jaws{animation:croc-in 1s ease forwards}
.croc-jaws .jaw{position:absolute;left:-70px;width:140px;height:46px}
.croc-jaws .jaw svg{width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.croc-jaws .jaw.top{top:-50px;transform-origin:15% 100%;animation:jaw-top .7s cubic-bezier(.6,0,.4,1) forwards}
.croc-jaws .jaw.bot{top:2px;transform:scaleY(-1);transform-origin:15% 0;animation:jaw-bot .7s cubic-bezier(.6,0,.4,1) forwards}
@keyframes jaw-top{0%{transform:rotate(-28deg)}55%{transform:rotate(-34deg)}75%,100%{transform:rotate(0) translateY(10px)}}
@keyframes jaw-bot{0%{transform:scaleY(-1) rotate(22deg)}55%{transform:scaleY(-1) rotate(28deg)}75%,100%{transform:scaleY(-1) rotate(0) translateY(10px)}}
@keyframes croc-in{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.dust-cloud{position:absolute;inset:0}
.dust-cloud i{position:absolute;left:-15%;top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,rgba(214,160,96,.75),rgba(184,114,60,.35) 55%,transparent 72%);animation:dust 1.5s var(--dl) ease-in forwards;opacity:0}
@keyframes dust{0%{transform:translateX(0) scale(.6);opacity:0}20%{opacity:.95}100%{transform:translateX(130vw) scale(1.8) rotate(200deg);opacity:0}}
.fx-dust{animation:fx-dust 1.4s}
@keyframes fx-dust{0%,100%{filter:none}30%,70%{filter:sepia(.7) blur(1.5px) brightness(.9)}}
.didge-waves i{position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;border:3px solid #f4d77c;box-shadow:0 0 12px rgba(244,215,124,.6);opacity:0;animation:didge 1.1s ease-out forwards}
@keyframes didge{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.6);opacity:0}}
.fx-pass{animation:fx-pass .8s}
@keyframes fx-pass{0%,100%{transform:none}30%{transform:translateX(8px) rotate(1deg)}60%{transform:translateX(-6px) rotate(-1deg)}}
.fx-tuck{animation:fx-tuck .6s}
@keyframes fx-tuck{0%,100%{transform:none}40%{transform:scale(1.15)}}

/* ---------- navigation: back bars, leave button, confirms ---------- */
.nav-bar{display:flex;align-items:center;gap:8px;margin:-6px -6px 6px;padding:4px 0}
.nav-sp{flex:1}
.btn.back-btn{background:linear-gradient(180deg,#16784a,#0a4428);color:var(--gold-2);border:2px solid var(--gold);box-shadow:0 2px 0 #06311c,0 4px 10px rgba(0,0,0,.2);
  padding:6px 14px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:4px;min-height:36px}
.btn.back-btn:hover{filter:brightness(1.12)}
.btn.stats-btn{background:transparent;color:#0f6038;border:2px solid var(--gold);box-shadow:none;padding:6px 14px;font-size:14px;min-height:36px}
.btn.stats-btn:hover{background:rgba(212,175,55,.14)}
.btn.leave-btn{border-color:#e9b0a0;color:#ffe2d6}
.btn.leave-btn::before{content:"⟵ ";font-weight:900}
.btn.warn-ghost{background:transparent;color:#8f2414;border:2px solid #c9806c;box-shadow:none}
.btn.warn-ghost:hover{background:rgba(163,48,27,.08)}
.btn.warn{color:#7a1d0c;box-shadow:inset 0 0 0 2px #c9806c,0 3px 0 #9c6d14}
.confirm-head{display:flex;gap:14px;align-items:center}
.confirm-head img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 0 3px #0a4428;flex:0 0 auto}
.confirm-head h2{margin:0 0 4px}
.confirm-head p{margin:0;color:#4e4230}
.modal-card:has(.confirm-head){max-width:440px}
.hidden.leave-btn{display:none}

/* ---------- personal stats ---------- */
.stats-hero{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.stats-hero h2{margin:0}.stats-hero .lead{margin:2px 0 0}
.roo-portrait.small{width:110px;height:110px;margin:0;flex:0 0 auto}
.roo-portrait.small img{width:110px;height:110px}
.tabs{display:flex;gap:6px;background:#0a4428;border-radius:999px;padding:4px;box-shadow:inset 0 0 0 2px var(--gold);margin:6px 0 10px}
.tab{flex:1;border:0;border-radius:999px;background:transparent;color:var(--gold-2);font-weight:900;padding:8px 10px;cursor:pointer;font-size:15px}
.tab.on{background:linear-gradient(180deg,#ffe9a3,var(--gold));color:#2a1d05}
.stats-total{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;background:rgba(212,175,55,.14);border:1px solid #e3cf95;border-radius:12px;padding:8px 10px;font-size:14px;color:#4e4230}
.stats-total b{color:#0f6038;font-size:17px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.stat-card{--mc:#1f7d4f;border:2px solid var(--mc);border-radius:16px;padding:10px;background:#fffaf0;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.stat-card.m-wallaby{--mc:#b07e1c}.stat-card.m-bigred{--mc:#a3301b}
.stat-card.none{opacity:.75}
.sc-head{display:flex;align-items:center;gap:8px}
.sc-head b{display:block;font-family:var(--display);font-weight:400;font-size:17px;color:var(--mc)}
.sc-head small{color:#6b5d3c;font-size:12px}
.sc-head .mc-roo img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fffaf0,0 0 0 4px var(--mc)}
.sc-rate{margin-left:auto;font-weight:900;font-size:18px;color:#fff;background:var(--mc);border-radius:999px;padding:3px 9px}
.sc-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 0;text-align:center}
.sc-nums div{background:rgba(0,0,0,.035);border-radius:8px;padding:5px 2px}
.sc-nums dt{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:#6b5d3c}
.sc-nums dd{margin:0;font-weight:900;font-size:18px;color:#2a1d05}
.sc-empty{margin:6px 0 0;font-size:12px;color:#8a7a55;text-align:center}
@media (min-width:560px){.stats-grid{grid-template-columns:1fr}}
@media (max-width:559px){.stats-grid{grid-template-columns:1fr}.stats-hero .roo-portrait.small,.stats-hero .roo-portrait.small img{width:84px;height:84px}}

/* ---------- room leaderboard ---------- */
.room-board{margin:12px 0 4px;border:2px solid var(--gold);border-radius:14px;overflow:hidden;background:#fffaf0}
.room-board h3{margin:0;padding:7px 12px;background:linear-gradient(180deg,#16784a,#0a4428);color:var(--gold-2);font-size:15px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.room-board h3 small{font-weight:700;color:#cfe8d5;font-size:12px}
.board-table{width:100%;border-collapse:collapse;font-size:14px}
.board-table th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6b5d3c;text-align:left;padding:6px 8px}
.board-table td{padding:6px 8px;border-top:1px solid #eadcb6}
.board-table td:first-child{width:28px;text-align:center;font-weight:900}
.board-table td small{color:#8a7a55}
.board-table tr.me td{background:rgba(212,175,55,.16);font-weight:800}
.board-table tr.lead td:nth-child(2){color:#0f6038;font-weight:900}