/* Churroman Kids corner: high scores, the after-game card, party packs and the weekly prize (shared by every game page) */
/* ---- initials entry (arcade style) ---- */
.entry{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(36,19,13,.6);border-radius:18px;z-index:3}
.entry.show{display:flex}
.entry-box{background:var(--crema);border:5px solid var(--dorado);border-radius:20px;padding:14px 18px 16px;text-align:center;width:min(92%,380px);box-sizing:border-box}
.entry-box h3{margin:0;color:var(--rojo);font-size:clamp(20px,5vw,28px)}
.entry-box p{margin:4px 0 10px;font-size:15px}
.slots{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.slot{display:flex;flex-direction:column;align-items:center;gap:4px}
.slot button{font:inherit;font-size:16px;width:48px;height:34px;border:none;border-radius:10px;background:var(--marron);color:var(--crema);cursor:pointer;touch-action:manipulation}
.slot .letter{width:48px;height:52px;border-radius:10px;background:#fff;border:3px solid var(--marron);font-size:32px;font-weight:bold;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.slot .letter.active{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(166,44,36,.25)}
.entry-actions{display:flex;gap:10px;justify-content:center}
.entry-actions button{font:inherit;font-weight:bold;font-size:17px;border:none;border-radius:14px;padding:10px 18px;cursor:pointer;touch-action:manipulation}
.entry-actions .save{background:var(--rojo);color:#fff}
.entry-actions .skip{background:transparent;color:var(--espresso);text-decoration:underline}

/* ---- leaderboard ---- */
.board{margin-top:22px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 16px rgba(36,19,13,.15)}
.board ol{list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;font-size:17px}
.board li:nth-child(odd){background:var(--crema)}
.board li.new{background:#ffe7a3;animation:glow 1.2s ease-in-out 3}
@keyframes glow{50%{background:#ffd54f}}
.board .rank{font-weight:bold;color:var(--rojo);text-align:center}
.board .who{font-weight:bold;letter-spacing:3px;font-family:"Courier New",monospace;font-size:20px}
.board .pts{font-weight:bold;font-variant-numeric:tabular-nums}
.board .note{font-size:12px;opacity:.6;margin-top:8px;text-align:center}

/* ---- This week / All time ---- */
.board-tabs{display:flex;gap:6px;background:var(--crema,#F4E6C8);border-radius:99px;padding:4px;margin:0 0 12px;width:max-content;max-width:100%}
.board-tabs button{font:inherit;font-weight:bold;font-size:15px;border:none;background:transparent;color:var(--marron,#4A2415);padding:8px 16px;border-radius:99px;cursor:pointer}
.board-tabs button.on{background:var(--rojo,#A62C24);color:#fff}
.board-tabs button:focus-visible{outline:3px solid var(--dorado,#D99A32);outline-offset:2px}

/* ---- after a game: visit us + share ---- */
.after-game{position:relative;margin:14px 0 0;background:#FFFCF4;border:3px solid var(--dorado,#D99A32);border-radius:18px;padding:16px 18px 18px;
  display:grid;gap:16px;box-shadow:0 8px 24px rgba(36,19,13,.18);color:var(--espresso,#24130D);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
.after-game.in{opacity:1;transform:none}
.after-game[hidden],.ag-share[hidden]{display:none}
.ag-share[hidden] ~ *{display:none}
.after-game h3{margin:0 0 6px;color:var(--rojo,#A62C24);font-size:21px;line-height:1.15}
.ag-close{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:none;background:rgba(74,36,21,.08);color:var(--marron,#4A2415);
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ag-close:hover{background:rgba(74,36,21,.16)}
.ag-rank{margin:0 36px 10px 0;font-weight:bold;font-size:15px;background:#fff3cd;border-radius:10px;padding:8px 10px;color:#7a4b00}
.ag-lead{margin:0 0 8px;font-size:15px;line-height:1.35}
.ag-hours{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:bold;font-size:15px;color:#8a4d17}
.ag-hours .dot{width:10px;height:10px;border-radius:50%;background:#9e9e9e;flex:none}
.ag-hours.open{color:#2e7d32}
.ag-hours.open .dot{background:#43a047;box-shadow:0 0 0 4px rgba(67,160,71,.2)}
.ag-btns,.ag-share-btns{display:flex;flex-wrap:wrap;gap:8px}
.ag-btn,.ag-share-btns button{font:inherit;font-weight:bold;font-size:15px;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 16px;
  border-radius:99px;border:none;cursor:pointer;text-decoration:none;background:var(--rojo,#A62C24);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.ag-btn svg,.ag-share-btns svg{width:18px;height:18px;flex:none}
.ag-btn.ghost{background:transparent;color:var(--marron,#4A2415);box-shadow:inset 0 0 0 2px var(--marron,#4A2415)}
.ag-btn:active,.ag-share-btns button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.ag-btn:focus-visible,.ag-share-btns button:focus-visible{outline:3px solid var(--dorado,#D99A32);outline-offset:2px}
.ag-share-btns button{background:var(--marron,#4A2415)}
.ag-share-btns button[data-net="instagram"]{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888)}
.ag-share-btns button[data-net="tiktok"]{background:#111}
.ag-share-btns button[data-net="facebook"]{background:#1877f2}
.ag-score{margin:0 0 10px;font-weight:bold;font-size:15px}
.ag-grownups{margin:10px 0 0;font-size:12.5px;opacity:.7}
.ag-tip{margin:10px 0 0;font-size:14px;background:#e8f5e9;color:#1b5e20;border-radius:10px;padding:8px 10px}
.ag-tip a{color:inherit;font-weight:bold}
@media (min-width:720px){ .after-game:has(.ag-share:not([hidden])){grid-template-columns:1.15fr 1fr;gap:22px} .ag-share{border-left:2px dashed rgba(74,36,21,.18);padding-left:22px} }
/* in full screen it slides up from the bottom of the screen */
body.fs .after-game{position:fixed;left:50%;bottom:max(10px, env(safe-area-inset-bottom));width:min(94vw,780px);max-height:62vh;overflow:auto;z-index:1200;margin:0;
  transform:translate(-50%,20px)}
body.fs .after-game.in{transform:translate(-50%,0)}
body.fs .after-game{padding:12px 14px 14px;gap:12px}
body.fs .after-game h3{font-size:17px;margin-bottom:4px}
body.fs .ag-lead,body.fs .ag-hours,body.fs .ag-score{font-size:13px;margin-bottom:6px}
body.fs .ag-rank{font-size:13px;padding:5px 8px;margin-bottom:6px}
body.fs .ag-btn,body.fs .ag-share-btns button{min-height:36px;font-size:13px;padding:5px 12px}
body.fs .ag-btn svg,body.fs .ag-share-btns svg{width:15px;height:15px}
body.fs .ag-grownups{font-size:11px;margin-top:6px}

/* ---- party and event packs, under the leaderboard ---- */
.party-card{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:18px;background:var(--rojo,#A62C24);color:#F4E6C8;
  text-decoration:none;box-shadow:0 5px 0 #6E1712;transition:transform .12s ease}
.party-card:hover{transform:translateY(-2px)}
.party-card:focus-visible{outline:3px solid var(--dorado,#D99A32);outline-offset:3px}
.pc-icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--dorado,#D99A32);color:#24130D;display:grid;place-items:center}
.pc-icon svg{width:24px;height:24px}
.pc-text{flex:1;font-size:14.5px;line-height:1.35}
.pc-text b{display:block;font-size:17px;color:#fff}
.pc-go{flex:none;font-weight:bold;font-size:14px;background:#F4E6C8;color:#A62C24;border-radius:99px;padding:8px 14px}
@media (max-width:520px){ .party-card{flex-wrap:wrap} .pc-go{margin-left:60px} }

/* ---- weekly prize ---- */
.contest{margin-top:22px;margin-bottom:-8px;background:#fff3cd;border:2px solid #ffcf5c;border-radius:16px;padding:12px 16px;display:grid;gap:3px;color:#5d3b00}
.contest b{font-size:17px}
.contest span{font-size:15px}
.contest small{font-size:12.5px;opacity:.85}
@media (prefers-reduced-motion:reduce){ .after-game,.party-card{transition:none} }