/* "Toy box" skin: thick ink outlines, solid offset shadows, chunky rounded display type. Loaded after style.css; delete this file to get the plain look back. */
:root{--ink2:#1b2a29;--pop:#ffc933;--toy-shadow:0 4px 0 var(--ink2);--display:"Fredoka","Nunito",system-ui,sans-serif}

/* Buttons */
button{font-family:var(--display);font-weight:600;letter-spacing:.2px}
.game button,.picker button,.modal button,.victory button{border:3px solid var(--ink2);border-radius:14px;box-shadow:var(--toy-shadow);transition:transform .08s,box-shadow .08s,background .15s}
.game button:hover:not(:disabled),.picker button:hover:not(:disabled),.victory button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 0 var(--ink2)}
.game button:active:not(:disabled),.picker button:active:not(:disabled),.victory button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink2)}
.game button:disabled{box-shadow:0 2px 0 var(--ink2);opacity:.55}
.game .primary,.btn-primary,.victory .primary{background:var(--pop);color:var(--ink2)}
.game .secondary,.btn-secondary{background:#fff;color:var(--ink2)}
.game .danger{background:#ffe3dc;color:#8a2a18}
.opt.btn-secondary{background:#fff;color:var(--ink2)}

/* Player plates */
.player-card{background:#fffaf0;border:3px solid var(--ink2);border-radius:20px;box-shadow:0 5px 0 var(--ink2);overflow:visible}
.player-card::before{content:"";position:absolute;left:14px;right:14px;top:-9px;height:9px;border:3px solid var(--ink2);border-bottom:0;border-radius:9px 9px 0 0;background:var(--player-color)}
.player-card.active{border-color:var(--ink2);background:#fff;box-shadow:0 5px 0 var(--ink2),0 0 0 5px var(--player-color);transform:scale(1.05);animation:plate-bob 1.4s ease-in-out infinite}
@keyframes plate-bob{50%{transform:scale(1.05) translateY(-3px)}}
.avatar-chip{border:3px solid var(--ink2);box-shadow:0 2px 0 var(--ink2);font-family:var(--display)}
.card-name{font-family:var(--display);font-weight:600}.card-money{font-family:var(--display);font-weight:700;color:var(--ink2);letter-spacing:.3px}
.card-detail{font-weight:700}

/* Menu / journal pills */
.topbar,.journal-box{background:#fffaf0;border:3px solid var(--ink2);border-radius:16px;box-shadow:0 4px 0 var(--ink2)}
.journal-box summary,.topbar .room-code{font-family:var(--display)}

/* Action card on the lawn */
.action-panel.floating{background:#fffaf0;color:var(--ink2);border:4px solid var(--ink2);border-radius:20px;box-shadow:0 6px 0 var(--ink2)}
.action-panel.floating #action-description{color:#44544c}
.action-panel.floating h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.3px}
.action-panel.floating .actions button{font-size:15px}
.action-panel .timer{font-family:var(--display);color:#7a5a00}

/* Dice total sticker */
.dice-total{font-family:var(--display);font-weight:700;border:5px solid var(--ink2);border-radius:18px;box-shadow:0 6px 0 var(--ink2);transform:translate(-50%,-100%) rotate(-4deg)}

/* Dialogs, picker, victory, banners */
.dlg,.picker-card{border:4px solid var(--ink2);border-radius:24px;box-shadow:0 8px 0 var(--ink2),0 18px 40px #0006}
.dlg-title,.picker-title,.opt-label,.opt-price{font-family:var(--display);font-weight:700}
.opt{border-width:3px}
.picker-item{border:3px solid var(--ink2);box-shadow:0 3px 0 var(--ink2)}
.picker-name{font-family:var(--display);font-weight:600}
.victory-card{border:5px solid var(--ink2);box-shadow:0 8px 0 var(--ink2),0 0 0 6px var(--who)}
.victory-name,.victory-eyebrow,.roulette-title,.banner-text,.prize{font-family:var(--display)}
.banner{border:4px solid var(--ink2);box-shadow:0 8px 0 var(--ink2)}
.banner.low{padding:12px 30px}.banner.low .banner-text{text-shadow:0 2px 0 var(--ink2)}.banner.low.gold{background:var(--pop);color:var(--ink2)}.banner.low.gold .banner-text{text-shadow:none}
.prize{border-color:var(--ink2);box-shadow:0 5px 0 var(--ink2)}
.action-panel.floating .actions .danger{flex:0 0 auto;margin:2px auto 0;padding:4px 12px;font-size:12px;border-width:2px;box-shadow:0 2px 0 var(--ink2)}

/* How-to-play guide: same toy dialog as the account, with step rows and tile/win stickers */
.rules-dialog .dlg-head{border-top-color:var(--pop)}
.rules-dialog .dlg-title{font-family:var(--display);color:var(--ink2)}
.rules-dialog .dlg-body{display:flex;flex-direction:column;gap:10px}
.rules-dialog h3{font-family:var(--display);font-size:13px;margin:8px 0 0}
.rules-steps,.rules-tiles,.rules-wins{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rules-steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:#fffaf0;border:3px solid var(--ink2);border-radius:16px;box-shadow:0 3px 0 var(--ink2)}
.rules-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pop);border:3px solid var(--ink2);font-size:20px}
.rules-steps strong,.rules-tiles strong,.rules-wins strong{font-family:var(--display);font-weight:700;color:var(--ink2)}
.rules-steps p{margin:2px 0 0;font-size:14px;line-height:1.45}
.rules-tiles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.rules-wins{grid-template-columns:repeat(3,1fr)}
.rules-tiles li,.rules-wins li{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:8px 10px;background:#f0efe2;border:2px solid var(--ink2);border-radius:14px}
.rules-tiles li>span,.rules-wins li>span{grid-row:span 2;font-size:24px}
.rules-tiles small,.rules-wins small{font-size:12px;line-height:1.35;color:#44544c}
.rules-wins li{background:#e5f4eb}
.rules-dialog button{border:3px solid var(--ink2);border-radius:14px;box-shadow:var(--toy-shadow)}
@media(max-width:560px){.rules-wins{grid-template-columns:1fr}}
.prize .prize-quip{font-style:italic;opacity:.85}

/* Debt (hipoteca) dialog: money summary on the green decision card, properties as tickable toy rows */
.dlg-debt .dlg-head{--tile-color:var(--red)}
.debt-sum{display:grid;gap:4px;padding:10px 12px;background:#f0efe2;border:2px solid var(--ink2);border-radius:14px}
.money-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:700}
.money-row strong{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.money-row.needed strong{color:#b33a22}
.dlg-debt h3{color:#52605a;margin:4px 0 0}
.debt-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding:2px 2px 6px}
.debt-item{margin:0;font-size:15px;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:8px 12px;background:#fffaf0;color:var(--ink2);border:3px solid var(--ink2);border-radius:14px;box-shadow:0 3px 0 var(--ink2);cursor:pointer}
.debt-item:has(input:checked){background:var(--pop)}
.debt-item input{width:20px;height:20px;margin:0;accent-color:var(--ink2)}
.debt-art{width:64px;height:64px;object-fit:contain;padding:3px;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--group) 45%,#fff) 0 55%,transparent 56%);border-radius:12px}
.debt-name{font-family:var(--display);font-weight:700;min-width:0}
.debt-name small{display:block;font-family:"Nunito",sans-serif;font-weight:600;font-size:12px;color:#52605a}
.debt-value{font-family:var(--display);font-weight:700;white-space:nowrap}
.dlg-debt .dlg-foot{border-top-color:#1b2a2922}
.debt-item{background:#fff}
.dlg-debt .dlg-foot button{flex:1;font-size:17px}

/* Money banner: a toy receipt with a kind sticker, the amount, and payer -> payee chips; the top stripe runs payer colour -> payee colour */
.banner.money{background:#fffaf0;color:var(--ink2);padding:24px 30px 14px;gap:8px;min-width:min(300px,86vw)}
.banner.money::before{content:"";position:absolute;inset:0 0 auto;height:10px;border-radius:18px 18px 0 0;border-bottom:3px solid var(--ink2);background:linear-gradient(90deg,var(--from),var(--to))}
.banner-tag{position:absolute;top:-19px;left:50%;transform:translateX(-50%) rotate(-3deg);padding:3px 14px;background:var(--pop);border:3px solid var(--ink2);border-radius:999px;box-shadow:0 3px 0 var(--ink2);font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
.banner-amount{font-family:var(--display);font-weight:700;font-size:clamp(30px,5.4vh,48px);line-height:1;font-variant-numeric:tabular-nums}
.banner-who{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:clamp(14px,2vh,17px)}
.who-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 5px;background:#fff;border:3px solid var(--ink2);border-radius:999px}
.who-chip::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c);border:2px solid var(--ink2)}
.who-chip.bank{padding-left:12px;background:#e9ece4}.who-chip.bank::before{display:none}
.who-arrow{font-weight:700}

/* Turn bar: whose-turn sticker (player colour dot) on the action card, chunkier time track */
.action-panel.floating[data-tag]::before{content:attr(data-tag);position:absolute;top:-17px;right:18px;transform:rotate(2deg);padding:2px 12px 2px 28px;color:var(--ink2);border:3px solid var(--ink2);border-radius:999px;box-shadow:0 3px 0 var(--ink2);font-family:var(--display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;
  background:radial-gradient(circle at 14px 50%,var(--who) 0 6px,var(--ink2) 6.5px 8px,transparent 8.5px),var(--pop)}
.action-panel.floating[data-tag]{padding-top:16px}
/* The track keeps its outline; only the yellow fill shrinks (scaleX squashed the border too) */
.action-panel .timer::after{height:10px;border:2px solid var(--ink2);border-radius:999px;opacity:1;transform:none;background:#fff linear-gradient(var(--pop),var(--pop)) left/calc(var(--left,1)*100%) 100% no-repeat;transition:background-size .5s linear}

/* Decision card: the tile's building art next to its name */
/* Rows 1 and 4 soak up the art's height so the eyebrow and the name stay together, centred beside it */
.dlg-head.has-art{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:14px}
.dlg-head.has-art .dlg-eyebrow{grid-area:2/2}.dlg-head.has-art .dlg-title{grid-area:3/2;padding-right:44px}
.dlg-art{grid-row:1/-1;width:84px;height:84px;object-fit:contain;padding:4px;background:radial-gradient(closest-side,color-mix(in srgb,var(--group) 45%,#fff) 0 92%,transparent 94%);border-radius:14px}

/* Decision card: the cream toy card of the money banner instead of the dark green box; eyebrow and timer become stickers */
.dlg-decision,.dlg-decision .dlg-head{background:#fffaf0;color:var(--ink2)}
.dlg-decision .dlg-title{color:var(--ink2)}.dlg-decision .dlg-text{color:#44544c}.dlg-decision .dlg-note{color:#52605a}
.dlg-decision :focus-visible{outline-color:var(--ink2)}
.dlg-decision .dlg-eyebrow{justify-self:start;width:fit-content;margin-bottom:4px;padding:2px 10px;background:var(--pop);color:var(--ink2);border:2.5px solid var(--ink2);border-radius:999px;box-shadow:0 2px 0 var(--ink2);font-family:var(--display);font-weight:700;letter-spacing:.8px;transform:rotate(-2deg)}
.dlg-decision .dlg-timer{padding:2px 10px;background:var(--ink2);color:var(--pop);border-radius:999px;font-family:var(--display)}

/* Tigrinho roulette: cream toy card with the boarding card's kicker sticker; prize keeps its tone colour with an ink outline */
.roulette{background:#fffaf0;border:4px solid var(--ink2);box-shadow:0 8px 0 var(--ink2),0 18px 40px #0006}
.roulette-kicker{padding:3px 12px;background:var(--pop);border:2.5px solid var(--ink2);border-radius:999px;box-shadow:0 2px 0 var(--ink2);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2);transform:rotate(-2deg)}
.roulette-title{color:var(--ink2);border-bottom-width:5px}

/* Icons (public/icons/ui) in place of emoji */
.ico{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.28em;flex:none}
.banner-tag,.roulette-kicker{display:inline-flex;align-items:center;gap:6px}.banner-tag .ico{width:22px;height:22px}
.who-chip.bank .ico{width:18px;height:18px}
.victory-trophy .ico{width:1em;height:1em}
.timer:not(:empty)::before,.dlg-timer:not(:empty)::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:5px;vertical-align:-.22em;background:url(/icons/ui/stopwatch.svg) center/contain no-repeat}

/* Roulette prize: a white toy card - slice-coloured icon badge, who/what/how much, quip under a dashed rule; the Tigrinho card is a sticker on top */
.prize{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;width:min(430px,100%);padding:14px 18px 12px;background:#fff;color:var(--ink2);border:3px solid var(--ink2);border-radius:18px;box-shadow:0 5px 0 var(--ink2);font-size:16px;text-align:left}
.prize.gain,.prize.loss{background:#fff}
.prize:has(.tigrinho-card){padding-top:22px}
.prize-badge{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--slice);border:3px solid var(--ink2);box-shadow:0 3px 0 var(--ink2)}
.prize-badge .ico{width:40px;height:40px}
.prize-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.prize-who{font-family:"Nunito",sans-serif;font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#52605a}
.prize-title{font-size:clamp(20px,3vh,26px);line-height:1.1}
.prize-money{padding:1px 10px;border:2.5px solid var(--ink2);border-radius:999px;font-size:16px;font-weight:700}
.prize.gain .prize-money{background:#c9efd5;color:#1d6b3e}.prize.loss .prize-money{background:#ffd9cf;color:#a3311c}
.prize .prize-detail{flex-basis:auto;text-align:left;font-family:"Nunito",sans-serif;font-weight:700;font-size:13px;color:#44544c;opacity:1}
.prize .prize-quip{grid-column:1/-1;font-family:"Nunito",sans-serif;font-size:13px;color:#52605a;text-align:center;margin-top:6px;padding-top:8px;border-top:2px dashed #1b2a2933;opacity:1}
.prize .tigrinho-card{position:absolute;top:-17px;left:0;right:0;width:fit-content;margin:0 auto;padding:2px 12px 2px 6px;gap:6px;background:var(--pop);color:var(--ink2);border:2.5px solid var(--ink2);border-radius:999px;box-shadow:0 2px 0 var(--ink2);font-size:13px}
.prize .tigrinho-card .ico{width:24px;height:24px}