:root {
  --bg:#FFF9E6; --red:#E63946; --red-dark:#C1121F; --blue:#457B9D; --blue-dark:#1D3557;
  --green:#2A9D8F; --green-dark:#1B7268; --yellow:#F4D35E; --orange:#F4A261;
  --purple:#9B5DE5; --black:#1A1A1A; --white:#FFFFFF;
  --border:3px solid #1A1A1A; --shadow-sm:3px 3px 0 #1A1A1A;
  --shadow-md:4px 4px 0 #1A1A1A; --shadow-lg:6px 6px 0 #1A1A1A;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --font-title:'Fredoka One',cursive; --font-body:'Nunito',sans-serif;
  /* Genre card colors live in the genre registry (js/genres.js), injected at runtime. */
  --wear-mask:none; /* Retro Wear flake mask, generated in js/util.js buildWearMask() */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);font-family:var(--font-body);color:var(--black);font-size:16px;}

/* SCREENS */
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:10;overflow:hidden;}
.screen.active{display:flex;}
.scroll-content{flex:1;overflow-y:auto;padding:16px 16px 40px;-webkit-overflow-scrolling:touch;}
.screen-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:var(--border);background:var(--bg);flex-shrink:0;}
.screen-header h2{font-family:var(--font-title);font-size:22px;}

/* BUTTONS */
.btn{font-family:var(--font-title);border:var(--border);border-radius:var(--r-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .08s,box-shadow .08s;user-select:none;letter-spacing:.5px;}
.btn:active{transform:translate(3px,3px)!important;box-shadow:none!important;}
.btn:disabled{opacity:.4;pointer-events:none;}
.btn-xl{font-size:20px;padding:16px 24px;box-shadow:var(--shadow-lg);}
.btn-lg{font-size:17px;padding:13px 20px;box-shadow:var(--shadow-md);}
.btn-md{font-size:15px;padding:10px 16px;box-shadow:var(--shadow-sm);}
.btn-sm{font-size:13px;padding:7px 12px;box-shadow:var(--shadow-sm);}
.btn-full{width:100%;padding:13px 12px;margin-top:12px;}
.btn-red{background:var(--red);color:var(--white);box-shadow:var(--shadow-lg);}
.btn-blue{background:var(--blue);color:var(--white);box-shadow:var(--shadow-lg);}
.btn-green{background:var(--green);color:var(--white);box-shadow:var(--shadow-lg);}
.btn-yellow{background:var(--yellow);color:var(--black);box-shadow:var(--shadow-md);}
.btn-orange{background:var(--orange);color:var(--black);box-shadow:var(--shadow-md);}
.btn-white{background:var(--white);color:var(--black);box-shadow:var(--shadow-md);}
.btn-back{background:var(--white);color:var(--black);font-family:var(--font-body);font-weight:700;font-size:14px;padding:8px 14px;box-shadow:var(--shadow-sm);}
.btn-gear{background:var(--yellow);color:var(--black);font-size:20px;padding:7px 10px;box-shadow:var(--shadow-sm);border-radius:var(--r-sm);}
.btn-nav{background:var(--white);color:var(--black);font-size:18px;padding:10px 18px;box-shadow:var(--shadow-sm);border-radius:var(--r-sm);}
.btn-icon-sm{background:var(--white);border:2px solid var(--black);border-radius:var(--r-sm);font-size:16px;padding:6px 9px;cursor:pointer;line-height:1;}
.btn-icon-sm:active{transform:scale(.9);}
/* Mini card-back icon (js/card-icon.js): a small dark-blue card stamped "HUZZAH!" in the
   title font — a scaled reuse of the in-game face-down card back, used in place of an emoji
   (e.g. the Manage Decks button). Vector/DOM, so it stays crisp and follows theme colors. */
.card-back-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:51px;height:30px;padding:2px 4px;background:var(--blue-dark);border:2px solid var(--black);border-radius:4px;box-shadow:2px 2px 0 var(--black);overflow:hidden;}
.card-back-icon-title{font-family:var(--font-title);font-size:8px;line-height:1;color:var(--yellow);white-space:nowrap;}
.generic-close-btn{width:100%;padding:13px;background:var(--white);border:var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-weight:900;font-size:15px;cursor:pointer;box-shadow:var(--shadow-sm);margin-top:8px;}
.generic-close-btn:active{transform:translate(2px,2px);box-shadow:none;}
#btn-manage-decks .card-back-icon{ margin-right:8px; }

/* FORMS */
.form-section{margin-bottom:20px;}
.form-label{display:block;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;opacity:.7;}
.form-input{width:100%;padding:14px 16px;border:var(--border);border-radius:var(--r-md);background:var(--white);color:var(--black);font-family:var(--font-body);font-size:16px;font-weight:700;box-shadow:var(--shadow-sm);outline:none;}
.form-input:focus{box-shadow:var(--shadow-sm),0 0 0 3px rgba(69,123,157,.25);}
.code-input{font-family:var(--font-title);font-size:34px;letter-spacing:8px;text-transform:uppercase;text-align:center;}
.option-row{display:flex;gap:8px;flex-wrap:wrap;}
.opt-btn{flex:1;min-width:56px;padding:10px 8px;text-align:center;line-height:1.4;background:var(--white);border:var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,background .1s;}
.opt-btn span{display:block;font-size:11px;opacity:.6;}
.opt-btn.active{background:var(--blue);color:var(--white);}
.opt-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black);}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.check-item{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--white);border:var(--border);border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:13px;box-shadow:var(--shadow-sm);}
.check-item input{width:18px;height:18px;accent-color:var(--blue);}
.custom-input{margin-top:8px;}
.custom-input input{width:100%;padding:11px 16px;border:var(--border);border-radius:var(--r-sm);font-size:18px;font-family:var(--font-body);font-weight:700;text-align:center;background:var(--white);box-shadow:var(--shadow-sm);}
select.form-select{width:100%;padding:12px 16px;border:var(--border);border-radius:var(--r-md);background:var(--white);font-family:var(--font-body);font-size:15px;font-weight:700;box-shadow:var(--shadow-sm);outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A1A1A' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}

/* HOME */
#screen-home{align-items:center;justify-content:center;background:radial-gradient(ellipse at 25% 25%,#F4D35E44 0%,transparent 55%),radial-gradient(ellipse at 75% 75%,#E6394622 0%,transparent 55%),var(--bg);}
.home-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 24px;width:100%;max-width:400px;}
.logo-wrap{text-align:center;position:relative;}
.logo-star{font-size:90px;position:absolute;top:-44px;left:50%;transform:translateX(-50%);opacity:.2;animation:spin-slow 25s linear infinite;pointer-events:none;}
@keyframes spin-slow{to{transform:translateX(-50%) rotate(360deg);}}
.game-title{font-family:var(--font-title);font-size:clamp(56px,14vw,80px);color:var(--red);-webkit-text-stroke:3px var(--black);text-shadow:6px 6px 0 var(--black);letter-spacing:-2px;line-height:1;animation:title-bob 2.5s ease-in-out infinite;}
@keyframes title-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.game-tagline{font-weight:900;font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.6;margin-top:6px;}
.home-buttons{display:flex;flex-direction:column;gap:12px;width:100%;}
.home-footer{font-size:13px;opacity:.4;}

/* LOBBY */
.room-code-card{background:var(--yellow);border:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:18px;text-align:center;margin-bottom:16px;}
.room-code-label{font-weight:900;font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.6;}
.room-code-row{display:flex;align-items:center;justify-content:center;gap:12px;}
.room-code-big{font-family:var(--font-title);font-size:48px;letter-spacing:6px;line-height:1.1;}
.btn-qr-invite{background:var(--white);border:var(--border);border-radius:var(--r-sm);padding:9px;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;}
.btn-qr-invite:active{transform:translate(2px,2px);box-shadow:none;}
.room-code-hint{font-size:12px;opacity:.5;margin-top:4px;}
.qr-invite-box{text-align:center;}
.qr-room-label{font-size:13px;font-weight:700;opacity:.6;margin-bottom:14px;}
.qr-code-wrap{display:inline-block;background:var(--white);border:var(--border);border-radius:var(--r-md);padding:12px;box-shadow:var(--shadow-sm);margin-bottom:4px;}
.qr-code-wrap canvas,.qr-code-wrap img{display:block;}
.section-title{font-family:var(--font-title);font-size:18px;margin-bottom:10px;}
.hint-text{font-family:var(--font-body);font-weight:600;font-size:12px;opacity:.5;}
.lobby-player-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.player-section{margin-bottom:16px;}
.lobby-player-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--white);border:var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);}
.player-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:16px;border:2px solid var(--black);flex-shrink:0;}
.player-name-text{font-weight:700;font-size:15px;flex:1;}
.player-badge{font-size:10px;padding:3px 8px;border-radius:20px;font-weight:900;text-transform:uppercase;border:1.5px solid var(--black);}
.badge-host{background:var(--yellow);}
.badge-kid{background:#C4B5FD;}
.badge-share{background:#D8C2FF;}
/* Borrow (#5): fanned card-back glyph + host's tappable borrow button on lobby bars. */
.cardback{position:relative;width:18px;height:24px;flex-shrink:0;}
.cardback i{position:absolute;inset:0;border:1.5px solid var(--black);border-radius:4px;}
.cardback i:nth-child(1){background:var(--blue);transform:rotate(-12deg) translateX(-3px);}
.cardback i:nth-child(2){background:var(--purple);transform:rotate(-2deg);}
.btn-borrow{background:var(--purple);border:2px solid var(--black);border-radius:var(--r-sm);padding:6px 9px 6px 8px;cursor:pointer;display:flex;align-items:center;gap:5px;box-shadow:2px 2px 0 var(--black);color:#fff;font-weight:900;font-size:12px;line-height:1;flex-shrink:0;}
.btn-borrow:active{transform:translate(2px,2px);box-shadow:none;}
/* Borrow overlay (#5): host's read-only view of a lender's shared decks. */
.borrow-sub{font-size:13px;opacity:.65;margin:-2px 0 12px;line-height:1.4;}
.borrow-deck-grid{max-height:60vh;overflow-y:auto;padding:4px 2px;margin-bottom:6px;}
/* The Borrow band reuses Manage Decks' bottom-band look, but as one full-width toggle. */
.deck-band-half.band-borrow{border-right:none;}
.deck-band-half.band-borrow.on{background:var(--green);color:#fff;}
.deck-band-half.band-borrow.off{background:#cfc9b8;color:rgba(0,0,0,.6);}
.borrow-cards-list{max-height:55vh;overflow-y:auto;}
/* Google Sheet import overlay (#7) */
.sheet-help{font-size:13px;opacity:.75;margin:-2px 0 10px;line-height:1.4;}
.sheet-steps{font-size:13px;line-height:1.5;margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.sheet-steps li{padding-left:2px;}
.sheet-dim{opacity:.6;}
#overlay-sheet-import .form-input{margin-bottom:10px;}
.sheet-label{display:block;font-weight:800;font-size:13px;margin:4px 0 6px;}
#sheet-tab-row{margin-top:4px;}
.borrow-card-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid rgba(0,0,0,.1);}
.borrow-card-name{flex:1;min-width:0;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.borrow-card-row .card-diff-cell{display:flex;gap:3px;flex-shrink:0;}
.borrow-card-row .card-genre-cell{display:inline-block;flex-shrink:0;max-width:110px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1.5px solid var(--black);text-transform:none;letter-spacing:0;}
/* Combined player+turn-order items */
.player-turn-item{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--white);border:var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-bottom:8px;}
.turn-num-badge{font-family:var(--font-title);font-size:20px;color:var(--blue);width:26px;flex-shrink:0;}
.player-item-info{flex:1;min-width:0;}
.player-item-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.player-item-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.btn-arrow{background:var(--white);border:2px solid var(--black);border-radius:6px;width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-arrow:active{transform:scale(.9);}
.btn-kid-toggle{font-size:11px;padding:4px 8px;border-radius:20px;border:1.5px solid var(--black);cursor:pointer;background:#FFB3C6;font-weight:900;}
.btn-kid-toggle.off{background:#eee;}
.waiting-pulse{text-align:center;padding:24px;font-weight:700;font-size:16px;animation:pulse-fade 2s ease-in-out infinite;}
@keyframes pulse-fade{0%,100%{opacity:1}50%{opacity:.35}}

/* LAST GAME SUMMARY */
.last-game-summary{background:var(--white);border:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:16px;margin-bottom:20px;}
.last-game-title{font-family:var(--font-title);font-size:16px;margin-bottom:10px;opacity:.7;}
.last-game-stats{display:flex;gap:10px;}
.last-stat{flex:1;text-align:center;padding:10px 6px;border:2px solid var(--black);border-radius:var(--r-sm);cursor:pointer;transition:transform .08s;}
.last-stat:active{transform:scale(.95);}
.last-stat-num{font-family:var(--font-title);font-size:26px;}
.last-stat-lbl{font-size:11px;font-weight:700;opacity:.6;text-transform:uppercase;}
.last-stat.success-stat .last-stat-num{color:var(--green);}
.last-stat.fail-stat .last-stat-num{color:var(--red);}
.last-stat.time-stat .last-stat-num{color:var(--blue);font-size:20px;}

/* LAST GAME LOG */
.last-game-log{margin-top:12px;border-top:1.5px solid rgba(0,0,0,.1);padding-top:10px;}
.last-game-log-title{font-family:var(--font-title);font-size:14px;margin-bottom:8px;opacity:.6;}
.last-game-log-scroll{max-height:160px;overflow-y:auto;}

/* LOBBY SETTINGS SUMMARY */
.settings-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sett-item{background:var(--white);border:2px solid var(--black);border-radius:var(--r-sm);padding:10px 12px;}
.sett-item-label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;opacity:.5;}
.sett-item-value{font-family:var(--font-title);font-size:16px;margin-top:2px;}

/* GAME SCREEN */
#screen-game{background:var(--bg);}
.game-topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--black);color:var(--white);flex-shrink:0;}
.turn-info{flex:1;text-align:center;}
.current-player-label{font-size:9px;letter-spacing:2px;opacity:.6;text-transform:uppercase;}
.current-player-name{font-family:var(--font-title);font-size:17px;line-height:1.2;}
.game-topbar-right{display:flex;gap:5px;}
.genre-bar{background:var(--yellow);border-bottom:var(--border);padding:6px 12px;text-align:center;flex-shrink:0;}
.genre-pill{font-family:var(--font-title);font-size:14px;}

/* ── PLAY STYLE BAR — large, below genre ── */
.playstyle-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-bottom:var(--border);flex-shrink:0;background:#457B9D;color:white;transition:background .3s;}
.ps-bar-icon{font-size:26px;line-height:1;}
.ps-bar-name{font-family:var(--font-title);font-size:20px;letter-spacing:.5px;}

/* ── HOLD-TO-REVEAL CARD ── */
.card-fan-wrapper{position:relative;width:100%;max-width:340px;}
/* Ghost cards fanned behind */
/* Ghosts pivot on the bottom-left corner so the fan spreads only right/down —
   center rotation made their top-left corners poke out past the main card. */
.fan-ghost{position:absolute;top:0;left:0;right:0;bottom:0;border:3px solid var(--black);border-radius:var(--r-lg);background:var(--blue-dark);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;transform-origin:0 100%;}
.fan-ghost-text{font-family:var(--font-title);font-size:18px;color:rgba(244,211,94,.35);letter-spacing:2px;}
.fan-ghost:nth-child(1){transform:rotate(4deg);}
.fan-ghost:nth-child(2){transform:rotate(7deg);z-index:-1;}
.fan-ghost:nth-child(3){transform:rotate(10deg);z-index:-2;}
.card-stack-wrap{position:relative;z-index:5;width:100%;}

/* Card itself — hold-to-reveal */
.card-stack{width:100%;flex:1;display:flex;align-items:center;justify-content:center;}
.game-card{width:100%;border:3px solid var(--black);border-radius:var(--r-lg);background:var(--white);box-shadow:0 6px 14px rgba(0,0,0,.40);min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;}
.card-back,.card-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:calc(var(--r-lg) - 3px);transition:opacity .18s;}
.card-back{background:var(--blue-dark);z-index:2;gap:6px;}
.card-back-title{font-family:var(--font-title);font-size:30px;color:var(--yellow);letter-spacing:2px;}
.card-back-hint{font-size:11px;color:rgba(255,255,255,.4);font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.card-front{z-index:1;padding:28px 20px 20px;flex-direction:column;}
/* Face states */
.game-card.face-down .card-front{opacity:0;pointer-events:none;}
.game-card.face-down .card-back{opacity:1;}
.game-card.face-up .card-back{opacity:0;pointer-events:none;}
.game-card.face-up .card-front{opacity:1;}
/* Genre card colors (background/text/border per genre) are generated from the genre
   registry by injectGenreStyles() in js/genres.js. The face-down fallback below stays
   so a face-down card shows the card-back color even before the injected styles load.
   Doubled `.face-down.face-down` gives it specificity (0,3,0) so it always beats the
   per-genre border rules (0,2,0) regardless of stylesheet order — see the V25 white-border
   regression. */
.game-card.face-down,.game-card.face-down.face-down{background:var(--blue-dark);border-color:var(--black);}
/* Burn button: always visible, floats above both faces */
.card-burn-float{position:absolute;top:8px;right:8px;z-index:20;background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.5);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;}
.card-burn-float:active{transform:scale(.85);}
.card-word-text{font-family:var(--font-title);font-size:clamp(26px,7vw,38px);text-align:center;line-height:1.15;}
.card-genre-text{font-size:12px;font-weight:700;opacity:.65;margin-top:8px;text-transform:uppercase;letter-spacing:1px;}
.card-difficulty-dots{display:flex;gap:5px;margin-top:10px;}
.dot{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;}
.dot.filled{background:currentColor;}
/* ── CARD FLIP ANIMATIONS ── */
@keyframes card-flip-out{from{transform:perspective(900px) rotateY(0deg);}to{transform:perspective(900px) rotateY(90deg);}}
@keyframes card-flip-in{from{transform:perspective(900px) rotateY(-90deg);}to{transform:perspective(900px) rotateY(0deg);}}
/* Wild → selected style horizontal flip */
@keyframes ps-wild-flip-out{from{transform:perspective(600px) rotateY(0deg);}to{transform:perspective(600px) rotateY(90deg);}}
@keyframes ps-wild-flip-in{from{transform:perspective(600px) rotateY(-90deg);}to{transform:perspective(600px) rotateY(0deg);}}
.game-card.is-flipping{z-index:50;}

/* CARD AREA */
.card-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 12px;overflow:hidden;}
.card-nav-row{display:flex;align-items:center;gap:16px;margin-top:10px;flex-shrink:0;}
.card-position{font-weight:700;font-size:13px;min-width:80px;text-align:center;}

/* ── PLAY TIMER (per-turn card-selection countdown, above the nav arrows) ── */
/* min-height reserves the slot whenever the timer is enabled so the arrows don't bounce as
   the number shows/hides; growth uses transform:scale (no reflow) for the same reason. */
.play-timer-countdown{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:38px;margin-top:8px;color:#111;font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;transition:color .2s ease,transform .2s ease,opacity .4s ease;}
.play-timer-countdown.critical{color:#E63946;transform:scale(1.6);}
/* "Time's up. I picked for you." reuses the same slot — smaller so it stays on one line (no
   bounce). .fade drops opacity for the exit. */
.play-timer-countdown.msg{font-size:30px;white-space:nowrap;transform:none;color:#111;}
.play-timer-countdown.fade{opacity:0;}

/* ── ACTION LOG STRIP ── */
/* Fixed height (3 lines) so the log filling in doesn't push the cards up */
.action-log-strip{background:rgba(26,26,26,.05);border-top:1.5px solid rgba(0,0,0,.1);padding:5px 12px;cursor:pointer;flex-shrink:0;height:61px;overflow:hidden;}
.log-entry-line{font-size:11px;font-weight:700;opacity:.55;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.log-tap-hint{font-size:10px;opacity:.3;text-align:right;letter-spacing:.5px;text-transform:uppercase;}

/* STATS */
.stats-row{display:flex;padding:8px 10px;border-top:var(--border);border-bottom:var(--border);background:var(--white);flex-shrink:0;}
.stat-item{flex:1;text-align:center;padding:5px 2px;}
.stat-item.clickable{cursor:pointer;}
.stat-item.clickable:active{opacity:.6;}
.stat-num{font-family:var(--font-title);font-size:26px;line-height:1;}
.stat-lbl{font-size:10px;font-weight:700;opacity:.55;text-transform:uppercase;letter-spacing:.5px;margin-top:1px;}
.num-success{color:var(--green);}
.num-fail{color:var(--red);}

/* TIMER */
.timer-zone{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;flex-shrink:0;}
.timer-face{font-family:var(--font-title);font-size:54px;letter-spacing:-2px;line-height:1;}
.timer-face.warn{color:var(--orange);animation:timer-pop .6s ease-in-out infinite;}
.timer-face.critical{color:var(--red);animation:timer-pop .3s ease-in-out infinite;}
@keyframes timer-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.btn-pause{background:var(--yellow);color:var(--black);font-family:var(--font-body);font-weight:900;font-size:15px;padding:10px 18px;border:var(--border);border-radius:var(--r-md);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s,opacity .2s;}
.btn-pause:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black);}
.btn-pause.locked{opacity:.4;pointer-events:none;}

/* ACTION ZONE — fixed height so the card above doesn't shift as buttons change */
.action-zone{padding:8px 12px 10px;display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0;min-height:76px;}
.action-row{display:flex;gap:8px;}
.action-row .action-btn{flex:1;}
.action-btn{padding:14px 10px;border:var(--border);border-radius:var(--r-md);font-family:var(--font-title);font-size:17px;cursor:pointer;text-align:center;transition:transform .08s,box-shadow .08s;}
.action-btn:active{transform:translate(3px,3px);box-shadow:none;}
.btn-got-it{background:var(--green);color:var(--white);box-shadow:var(--shadow-md);}
.btn-failed-it{background:var(--red);color:var(--white);box-shadow:var(--shadow-md);}
.btn-roll{background:var(--yellow);color:var(--black);font-size:22px;padding:18px;border:var(--border);border-radius:var(--r-lg);font-family:var(--font-title);cursor:pointer;width:100%;box-shadow:var(--shadow-lg);animation:roll-bob 1.5s ease-in-out infinite;transition:transform .08s,box-shadow .08s;}
.btn-roll:active{transform:translate(4px,4px);box-shadow:none;animation:none;}
@keyframes roll-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.btn-lets-go{background:var(--green);color:var(--white);font-size:22px;padding:18px;border:var(--border);border-radius:var(--r-lg);font-family:var(--font-title);cursor:pointer;width:100%;box-shadow:var(--shadow-lg);transition:transform .08s,box-shadow .08s;}
.btn-lets-go:active{transform:translate(4px,4px);box-shadow:none;}
/* Uniform height for all four action buttons (roll / let's go / got it / failed it) */
.btn-roll,.btn-lets-go,.action-btn{height:58px;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;}
.observer-msg{text-align:center;font-weight:700;font-size:14px;opacity:.5;padding:6px;}

/* CARD DRAW / DEAL / PENALTY ANIMATIONS — flying face-down clones (see js/animations.js).
   The clone is a full-size .game-card.face-down scaled down via transform, so the card back
   always renders in proportion (never a clipped blob) as it moves to/from the Play Deck. */
.fly-card{position:fixed;z-index:900;pointer-events:none;will-change:transform,opacity;}
.fly-card .game-card{box-shadow:8px 10px 0 rgba(0,0,0,.35);}

/* END SCREENS */
#screen-win,#screen-lose{align-items:center;justify-content:center;}
.end-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;text-align:center;width:100%;}
.end-anim-area{width:200px;height:200px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible;}
.win-title{font-family:var(--font-title);font-size:clamp(48px,13vw,72px);color:var(--green);-webkit-text-stroke:3px var(--black);text-shadow:5px 5px 0 var(--black);animation:title-bob 1s ease-in-out infinite;}
.lose-title{font-family:var(--font-title);font-size:clamp(38px,10vw,58px);color:var(--red);-webkit-text-stroke:3px var(--black);text-shadow:5px 5px 0 var(--black);}
.end-msg{font-size:17px;font-weight:700;opacity:.65;}
.end-btns{display:flex;flex-direction:column;gap:10px;width:100%;}

/* RETRO WEAR — optional distressed/flaked-ink layer (per-device pref, default off).
   One fixed layer painted with the page bg and masked so it only shows where ink
   "flaked", revealing the background. Sits above the game screens (z-index:10) but
   below modals (z-index:100) so QR codes and dialogs stay crisp. pointer-events:none
   keeps every button clickable. Shown only when body.theme-worn is set. The top inset
   (--wear-top, set in js/app.js) keeps it clear of the in-game top banner. */
#wear-overlay{position:fixed;top:var(--wear-top,0);left:0;right:0;bottom:0;z-index:40;pointer-events:none;display:none;
  background:var(--bg);
  -webkit-mask-image:var(--wear-mask);mask-image:var(--wear-mask);
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
body.theme-worn #wear-overlay{display:block;}

/* OVERLAYS */
.overlay{position:fixed;inset:0;background:rgba(26,26,26,.72);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}

/* Available Cards indicator (#6): a tall 50-card deck pinned to the right edge, shown beside the
   Host Options overlay, the Manage Decks grid, and the Borrow From… overlay. z-index is set in JS
   per context (50 over a screen, 105 over a modal). Card height (42px) must match CARD_H in indicator.js. */
.cards-rail{position:fixed;top:72px;right:8px;bottom:14px;width:48px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.cards-rail.hidden{display:none;}
.cards-stack{position:relative;flex:1;width:44px;}
.ind-card{position:absolute;left:50%;transform:translateX(-50%);width:30px;height:42px;border:1.5px solid var(--black);border-radius:4px;}
.ind-card.c-host{background:var(--blue);}
.ind-card.c-borrow{background:var(--purple);}
.ind-card.c-used{background:#b9b2a0;opacity:.4;}   /* ghosted = used, behind */
/* Translucent backing so the black numbers + shuffle stay legible over dark backgrounds. */
.cards-foot{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.72);border:1.5px solid rgba(0,0,0,.18);border-radius:10px;padding:5px 2px 6px;}
.cards-nums{font-family:var(--font-title);text-align:center;line-height:1.05;font-size:10px;width:36px;cursor:pointer;}
.cards-nums .paren{font-size:10px;}
.cards-nums .top,.cards-nums .bot{display:block;}
.cards-shuffle{background:none;border:none;box-shadow:none;padding:2px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cards-shuffle:active{transform:translateY(1px);}
/* Make room for the rail in each context (only the active one is visible). */
/* When the rail is present, every overlay reserves space on the right so its box stops against the
   rail's left edge instead of the screen edge. The Available Cards chart (.cards-mode) is full-bleed
   to 5px on the other three sides, so it only needs its right padding widened to clear the rail. */
body.cards-ind-on #overlay-options,
body.cards-ind-on #overlay-borrow,
body.cards-ind-on #overlay-borrow-cards,
body.cards-ind-on #overlay-admin,
body.cards-ind-on #overlay-admin-content,
body.cards-ind-on #overlay-confirm{padding-right:50px;}
body.cards-ind-on #screen-manage-decks .deck-grid,
body.cards-ind-on #screen-manage-decks .deck-top-actions{padding-right:58px;}
.overlay.hidden{display:none;}
.overlay-box{background:var(--bg);border:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;width:100%;max-width:380px;max-height:88vh;overflow-y:auto;}
.overlay-box h2{font-family:var(--font-title);font-size:22px;margin-bottom:16px;text-align:center;}

/* DIE */
.die-box{text-align:center;}
.die-container{padding:28px 0;}
.game-die{font-size:80px;display:inline-block;animation:die-spin .25s linear infinite;}
.game-die.landing{animation:die-land .55s ease-out forwards;}
@keyframes die-spin{to{transform:rotate(360deg) scale(1.05);}}
@keyframes die-land{0%{transform:rotate(380deg) scale(1.25);}55%{transform:rotate(4deg) scale(.92);}80%{transform:rotate(-2deg) scale(1.03);}100%{transform:rotate(0deg) scale(1);}}
.rolling-text{font-family:var(--font-title);font-size:22px;animation:pulse-fade .5s ease-in-out infinite;}
.ps-cartoon{font-size:80px;margin-bottom:10px;animation:pop-in .5s cubic-bezier(.175,.885,.32,1.275);}
/* Custom play-style icons (replace the old emojis). Sized per context. */
.ps-img{display:inline-block;object-fit:contain;vertical-align:middle;}
.ps-img-small{width:24px;height:24px;}
.ps-cartoon .ps-img-tile{display:block;margin:0 auto;width:150px;height:150px;}
.ps-bar-icon .ps-img{width:30px;height:30px;}
.wild-style-btn .ps-img{width:24px;height:24px;margin-right:4px;}
.sett-item-value .ps-img-small{width:18px;height:18px;margin:0 1px;}
@keyframes pop-in{0%{transform:scale(0) rotate(-12deg)}100%{transform:scale(1) rotate(0)}}
.ps-result-title{font-family:var(--font-title);font-size:34px;color:var(--red);-webkit-text-stroke:2px var(--black);margin-bottom:6px;}
.ps-result-desc{font-size:14px;font-weight:700;opacity:.65;margin-bottom:16px;}
.ps-detail-rules{background:var(--white);border:2px solid var(--black);border-radius:var(--r-md);padding:12px;font-size:13px;font-weight:600;line-height:1.65;margin-bottom:16px;display:none;text-align:left;}
.ps-detail-rules.visible{display:block;}

/* REVEAL */
.reveal-box{text-align:center;}
.reveal-result-badge{font-family:var(--font-title);font-size:26px;padding:8px 20px;border-radius:var(--r-md);border:var(--border);display:inline-block;margin-bottom:16px;}
.reveal-result-badge.got-it{background:var(--green);color:var(--white);}
.reveal-result-badge.failed-it{background:var(--red);color:var(--white);}
#reveal-card-el{margin-bottom:16px;cursor:default;}
.rating-row{margin-bottom:16px;}
.rating-row p{font-weight:700;margin-bottom:8px;}
.rating-btns{display:flex;gap:8px;justify-content:center;}
.btn-rate{padding:10px 14px;border:var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;background:var(--white);box-shadow:var(--shadow-sm);transition:transform .08s;}
.btn-rate:active{transform:translate(2px,2px);}
.btn-skip-rate{background:#eee;}

/* ── HELP OVERLAY ── */
.help-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.help-tab{padding:6px 12px;border:2px solid var(--black);border-radius:var(--r-sm);background:var(--white);font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;transition:background .1s;}
.help-tab.active{background:var(--blue);color:var(--white);}
.help-tab:active{transform:scale(.95);}
.help-panel{background:var(--white);border:2px solid var(--black);border-radius:var(--r-md);padding:14px;min-height:80px;}
.help-style-emoji{font-size:44px;text-align:center;margin-bottom:8px;}
.help-style-name{font-family:var(--font-title);font-size:20px;text-align:center;margin-bottom:10px;}
.help-style-rules{font-size:14px;font-weight:600;line-height:1.65;color:#333;}
.help-gameplay p{font-size:14px;font-weight:600;line-height:1.65;color:#333;}
.help-gameplay ul{margin:8px 0 8px 18px;}
.help-gameplay li{font-size:14px;font-weight:600;line-height:1.65;margin-bottom:4px;}

/* ── PLAYERS GAME OVERLAY ── */
.players-game-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;margin-bottom:14px;}
.player-game-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border:var(--border);border-radius:var(--r-md);}
.player-game-item.current-turn{border-color:var(--green);background:#f0fff8;}
.player-game-hand{font-size:12px;font-weight:700;opacity:.6;}

/* ── ACTION LOG OVERLAY ── */
.log-full-list{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.log-full-entry{font-size:13px;font-weight:600;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.08);line-height:1.5;}
.log-full-entry:last-child{border-bottom:none;}

/* HOST OPTIONS */
.host-options-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.host-opt-btn{width:100%;padding:14px;text-align:left;background:var(--white);border:var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s;}
.host-opt-btn:active{transform:translate(2px,2px);box-shadow:none;}
.host-opt-btn:disabled{opacity:.4;pointer-events:none;}

/* MANAGE PLAYERS */
.manage-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:340px;overflow-y:auto;}
/* Fixed 6-col grid: avatar | name-block | turn÷dice | gear | remove | arrows */
.manage-player-item{display:grid;grid-template-columns:38px 1fr 30px 30px 28px 28px;align-items:center;gap:6px;padding:10px 12px;background:var(--white);border:var(--border);border-radius:var(--r-md);transition:transform 180ms ease;}
.manage-player-name-block{min-width:0;display:flex;flex-direction:column;gap:3px;}
.manage-player-name{font-weight:800;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-badges-row{display:flex;gap:4px;flex-wrap:wrap;min-height:17px;}
.manage-col-empty{width:28px;height:28px;}
/* Turn/dice column — dot or 🎲 are mutually exclusive, centred in the cell */
.turn-col{display:flex;align-items:center;justify-content:center;width:30px;height:30px;}
.turn-indicator-dot{width:11px;height:11px;border-radius:50%;background:transparent;}
.turn-indicator-dot.is-current{background:#2BD24A;box-shadow:0 0 4px 1px rgba(43,210,74,.9),0 0 9px 2px rgba(43,210,74,.55);animation:turn-dot-pulse 1.4s ease-in-out infinite;}
@keyframes turn-dot-pulse{0%,100%{box-shadow:0 0 4px 1px rgba(43,210,74,.9),0 0 9px 2px rgba(43,210,74,.45);}50%{box-shadow:0 0 6px 2px rgba(43,210,74,1),0 0 14px 4px rgba(43,210,74,.7);}}
@media (prefers-reduced-motion:reduce){.turn-indicator-dot.is-current{animation:none;}}
/* Frozen seat — grayed out, no controls */
.manage-player-item.player-frozen{opacity:.85;}
.manage-player-item.player-disconnected{opacity:.55;}
.manage-player-item.player-frozen .manage-player-name{color:#8A8F98;}
.badge-frozen{background:#CFD8DC;color:#546E7A;}
/* Transparent outline ✕ — player rows */
.btn-remove-sm{width:28px;height:28px;border-radius:7px;background:transparent;color:var(--red);border:1.5px solid var(--red);font-size:13px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-remove-sm:active{transform:scale(.9);}
/* Solid round ✕ — lobby kicks + Waiting to Join decline */
.btn-remove-round{width:30px;height:30px;border-radius:50%;background:var(--red);color:white;border:2px solid var(--black);font-size:14px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-remove-round:active{transform:scale(.9);}
.btn-dice-sm{background:var(--white);border:2px solid var(--black);border-radius:6px;width:28px;height:28px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-dice-sm:active{transform:scale(.9);}
/* Red dot over ⚙️ / Players when players are waiting to join */
.join-req-dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--white);box-shadow:0 0 4px 1px rgba(230,57,70,.7);}
/* "Waiting to join" list */
.join-req-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--white);border:var(--border);border-radius:var(--r-md);margin-top:6px;}
.join-req-name{flex:1;font-weight:700;font-size:14px;}
.join-req-tag{font-size:10px;font-weight:900;text-transform:uppercase;opacity:.55;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:10px;}
.join-req-actions{display:flex;gap:6px;}
.btn-approve,.btn-decline{width:30px;height:30px;border-radius:50%;font-size:13px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s;}
.btn-approve{background:var(--green,#2BD24A);border:2px solid var(--black);color:#0A2A12;}
.btn-decline{background:var(--red);border:2px solid var(--black);color:white;}
.btn-approve:active,.btn-decline:active{transform:scale(.9);}

/* PILE VIEWER */
.pile-scroll{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.pile-card-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border:2px solid var(--black);border-radius:var(--r-sm);}
.pile-word{font-weight:700;flex:1;}
.pile-genre{font-size:11px;opacity:.45;text-transform:uppercase;}

/* MANAGE DECKS */
#screen-manage-decks{background:var(--bg);}
.deck-area-wrapper{display:flex;flex:1;overflow:hidden;}
.deck-grid-scroll{flex:1;overflow-y:auto;}
.deck-top-actions{display:flex;gap:10px;padding:12px 14px 4px;}
.deck-top-actions .btn{flex:1;}
/* Activate/Deactivate-All borrows the deck-tile band colors (see .band-active/.band-inactive). */
#decks-toggle-all-btn.toggle-all-active{background:var(--green);color:#fff;}
#decks-toggle-all-btn.toggle-all-inactive{background:#cfc9b8;color:rgba(0,0,0,.6);}
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;}

/* ── Deck Loadouts overlay ── */
/* Span the full column, over the Available Cards rail (no rail reservation here). */
#overlay-loadouts .overlay-box{max-width:none;}
#overlay-loadouts h2{margin-bottom:14px;line-height:32px;padding:0 36px;}   /* center the title, clear of the ✕ */
#loadout-save-btn{font-size:18px;}
.loadout-list{max-height:46vh;overflow-y:auto;margin:10px 0;display:flex;flex-direction:column;gap:8px;}
.loadout-empty{font-size:13px;opacity:.7;text-align:center;padding:14px 0;}
.loadout-row{display:flex;align-items:center;gap:8px;border:var(--border);border-radius:var(--r-md);padding:8px 10px;}
.loadout-name{flex:1;min-width:0;font-family:var(--font-title);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.loadout-row-btns{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.loadout-ico{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;}
.loadout-ico-plain{background:none;border:none;cursor:pointer;font-size:15px;line-height:1;padding:4px 2px;}
.loadout-del{color:var(--red);font-weight:900;font-size:16px;}
.loadout-advanced{margin-top:6px;border-top:1px solid rgba(0,0,0,.12);padding-top:8px;}
.loadout-adv-header{background:none;border:none;cursor:pointer;font-family:var(--font-title);font-size:14px;opacity:.8;padding:4px 0;width:100%;text-align:left;}
.loadout-adv-body{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.deck-tile{border:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform .08s;position:relative;}
.deck-tile:active{transform:translate(2px,2px);box-shadow:var(--shadow-sm);}
.deck-tile-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;}
.deck-tile-icon{font-size:36px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--black);}
.deck-tile-name{font-family:var(--font-title);font-size:15px;text-align:center;line-height:1.2;}
.deck-tile-count{font-size:12px;font-weight:700;opacity:.6;}
/* Colored bottom band: left = Active/Inactive, right = Private/Public */
.deck-band{display:flex;border-top:3px solid var(--black);}
.deck-band-half{flex:1;text-align:center;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;padding:9px 4px;cursor:pointer;transition:background .1s;}
.deck-band-half:first-child{border-right:3px solid var(--black);}
.deck-band-half.band-active{background:var(--green);color:#fff;}
.deck-band-half.band-inactive{background:#cfc9b8;color:rgba(0,0,0,.6);}
.deck-band-half.band-public{background:var(--blue);color:#fff;}
.deck-band-half.band-private{background:#cfc9b8;color:rgba(0,0,0,.6);}
/* Difficulty filter pips (tap to cycle easy → easy+medium → all). White tray keeps the pips
   readable on any deck color. lvl1 green, lvl2 amber, lvl3 red. */
.deck-diff{align-self:center;display:inline-flex;gap:5px;align-items:center;background:#fff;border:2px solid var(--black);border-radius:14px;padding:4px 9px;margin-bottom:8px;cursor:pointer;}
.deck-pip{width:10px;height:10px;border-radius:50%;border:2px solid var(--black);background:transparent;box-sizing:border-box;}
.deck-diff.lvl1 .deck-pip.fill{background:var(--green);}
.deck-diff.lvl2 .deck-pip.fill{background:#E08A1E;}
.deck-diff.lvl3 .deck-pip.fill{background:var(--red);}
.deck-tile-new{border:3px dashed var(--black);background:transparent;color:var(--black);font-family:var(--font-title);font-size:17px;cursor:pointer;min-height:140px;align-items:center;justify-content:center;padding:16px;transition:transform .08s;}
.deck-tile-new:active{transform:translate(2px,2px);}

/* ── AVAILABLE CARDS INDICATOR (sidebar on Manage Decks) ── */
.avail-indicator{width:54px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;border-left:2px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);padding:10px 6px;}
.avail-title{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;opacity:.4;text-align:center;line-height:1.3;margin-bottom:8px;}
.avail-stack{position:relative;flex:1;width:40px;}
.avail-rect{position:absolute;left:0;width:40px;height:20px;border-radius:4px;border:1.5px solid #1A1A1A;}
.avail-rect.host{background:#AED9E0;}
.avail-rect.borrowed{background:#C084FC;}
.avail-rect.used{opacity:.2;}
.avail-count{position:absolute;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);font-family:var(--font-title);font-size:10px;padding:1px 5px;border-radius:20px;white-space:nowrap;z-index:10;}
.avail-total-label{font-size:9px;font-weight:700;opacity:.45;margin-top:6px;text-align:center;}

/* DECK DETAIL */
#screen-deck-detail{background:var(--bg);}
.deck-detail-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:var(--border);flex-shrink:0;}
.deck-detail-icon{font-size:28px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--black);}
.deck-detail-name{font-family:var(--font-title);font-size:20px;flex:1;}
.reveal-all-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:2px solid var(--black);background:var(--white);flex-shrink:0;}
.reveal-all-label{font-weight:700;font-size:14px;}
.toggle-switch{position:relative;width:46px;height:26px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:26px;border:2px solid var(--black);cursor:pointer;transition:background .2s;}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:2px;bottom:2px;background:white;border-radius:50%;transition:transform .2s;}
.toggle-switch input:checked+.toggle-slider{background:var(--green);}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px);}
/* Card chart — ONE flat grid template shared by the header and every row, so the
   columns always line up: Card | pips | category chip | 👍 | 👎 | 🔥 | actions. */
.sort-header-row,.card-list-item{display:grid;grid-template-columns:minmax(0,1fr) 40px 64px 18px 18px 18px 56px;gap:6px;align-items:center;}
.sort-header-row{padding:8px 12px;background:#f0e8d0;border-bottom:2px solid var(--black);flex-shrink:0;}
.sort-col{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:2px;opacity:.7;user-select:none;}
.sort-col.col-name{justify-content:flex-start;}
.sort-col.sort-col-actions{cursor:default;}
.sort-col:active{opacity:1;}
.card-list-scroll{flex:1;overflow-y:auto;}
/* Fixed height so a row stays the same whether its text is one or two lines (content is
   vertically centered via align-items on the shared rule above). */
.card-list-item{height:46px;padding:0 12px;border-bottom:1.5px solid rgba(0,0,0,.1);overflow:hidden;}
.card-list-item.excluded{opacity:.4;}
.card-name-cell{display:flex;align-items:center;gap:6px;min-width:0;}
.card-reveal-toggle{background:none;border:1.5px solid var(--black);border-radius:5px;width:22px;height:22px;font-size:11px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
/* Name + category wrap to 2 lines, then ellipsis; full text via title tooltip. */
.card-name-hidden,.card-name-shown{min-width:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-name-hidden{font-style:italic;opacity:.5;font-size:13px;font-weight:600;}
.card-name-shown{font-weight:700;font-size:14px;}
.card-diff-cell{display:flex;gap:3px;justify-content:center;}
.card-pip{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;flex:0 0 auto;}
.card-pip.fill{background:currentColor;}
.pips-easy{color:var(--green);} .pips-medium{color:#E08A1E;} .pips-hard{color:var(--red);}
.card-genre-cell{justify-self:center;font-size:9px;font-weight:800;color:#fff;padding:3px 7px;border-radius:11px;border:1.5px solid var(--black);text-transform:uppercase;letter-spacing:.2px;max-width:100%;line-height:1.15;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;}
.card-rating-cell{text-align:center;font-weight:800;font-size:12px;}
.rate-up{color:var(--green);} .rate-down{color:var(--red);} .rate-burn{color:#E08A1E;}
.rate-zero{color:var(--black);opacity:.25;}
.card-actions-cell{display:flex;gap:4px;justify-content:flex-end;}
.btn-card-exclude,.btn-card-delete{border:none;border-radius:5px;width:24px;height:24px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s;}
.btn-card-exclude{background:rgba(0,0,0,.1);}
.btn-card-delete{background:rgba(230,57,70,.15);color:var(--red);}
.btn-card-exclude:active,.btn-card-delete:active{transform:scale(.88);}
/* Export / Delete row in the custom-deck footer */
.deck-io-row{display:flex;gap:8px;margin-top:8px;}
.deck-io-row .btn{flex:1;}
/* Edit affordances: tap a custom card row, or the deck-detail header (✏️), to edit */
.card-editable{cursor:pointer;}
.deck-edit-hint{font-size:18px;opacity:.5;flex-shrink:0;}
/* Spoiler hint under the Reveal-All row — plain text, no box */
.spoiler-note{padding:2px 16px 8px;font-size:12px;font-weight:600;opacity:.55;text-align:center;}
.deck-detail-footer{padding:12px 16px;border-top:var(--border);flex-shrink:0;}

/* NEW DECK OVERLAY */
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px;}
.icon-choice{font-size:22px;width:44px;height:44px;border:2px solid var(--black);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s,background .1s;}
.icon-choice.selected{background:var(--yellow);}
.icon-choice:active{transform:scale(.9);}
.color-slider-row{margin-bottom:12px;}
.color-slider-label{font-size:12px;font-weight:700;margin-bottom:4px;opacity:.7;}
.color-preview{width:100%;height:36px;border:2px solid var(--black);border-radius:var(--r-sm);margin-bottom:8px;}
input[type=range]{width:100%;height:8px;accent-color:var(--blue);cursor:pointer;}

/* FLAME ANIMATION */
.flame-overlay{position:fixed;inset:0;z-index:500;pointer-events:all;overflow:hidden;}
.flame-wave{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,#FF4500 20%,#FF8C00 40%,#FFD700 60%,#FF4500 80%,transparent 100%);animation:flame-sweep 1.2s ease-in-out forwards;}
@keyframes flame-sweep{0%{left:-100%;opacity:1}50%{left:0%;opacity:1}100%{left:100%;opacity:0}}
.flame-particle{position:absolute;border-radius:50%;animation:flame-rise linear forwards;}
@keyframes flame-rise{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-200px) scale(0);opacity:0}}

/* TOAST */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);padding:12px 20px;border-radius:var(--r-md);font-weight:700;font-size:14px;z-index:200;white-space:nowrap;animation:toast-in .25s ease;max-width:90vw;text-align:center;pointer-events:none;}
.toast.hidden{display:none;}
.toast.err{background:var(--red);}
.toast.ok{background:var(--green);}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* LOADING */
/* ── LAUNCH SPLASH ── */
/* Full-screen expanded version of the app icon. Starts static (OS handles the icon
   zoom), then drops away with a tilt like a dropped board to reveal Home. */
.splash{position:fixed;inset:0;z-index:2000;background:#FFF9E6;display:flex;align-items:center;justify-content:center;overflow:hidden;will-change:transform;box-shadow:inset 0 0 0 6px #457B9D;}
.splash-art{width:160vw;max-width:none;height:auto;display:block;} /* oversized so stripes bleed off both edges */
.splash.splash-drop{animation:splash-fall .85s cubic-bezier(.55,.06,.68,.19) forwards;}
.splash-copyright{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11px;line-height:1.6;color:rgba(0,0,0,0.45);margin:0;pointer-events:none;z-index:9999;}
.splash-copyright .game-version-tag{opacity:1;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;margin:0;}
@keyframes splash-fall{
  0%{transform:translateY(0) rotate(0);}
  12%{transform:translateY(-3vh) rotate(-1.5deg);}
  100%{transform:translateY(125vh) rotate(9deg);}
}

.loading-overlay{position:fixed;inset:0;background:rgba(255,249,230,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:300;gap:16px;}
.loading-overlay.hidden{display:none;}
.loading-spinner{font-size:56px;animation:spin-slow 1s linear infinite;}
.loading-overlay p{font-family:var(--font-title);font-size:20px;}

/* WIN/LOSE ANIMATIONS */
.confetti-bit{position:absolute;border-radius:2px;animation:conf-fall linear forwards;}
@keyframes conf-fall{0%{opacity:1;transform:translateY(-80px) rotate(0deg);}100%{opacity:0;transform:translateY(300px) rotate(720deg);}}
.rain-drop{position:absolute;width:3px;height:18px;background:var(--blue);border-radius:3px;animation:rain-fall linear infinite;}
@keyframes rain-fall{from{opacity:.7;transform:translateY(-40px);}to{opacity:0;transform:translateY(220px);}}

/* UTILITY */
.hidden{display:none!important;}

/* INSTALL OVERLAY */
.install-box{padding-bottom:16px;}
.install-title{font-family:var(--font-title);font-size:22px;text-align:center;margin-bottom:8px;}
.install-intro{font-size:14px;opacity:.6;text-align:center;margin:0 0 14px;}
.install-card{background:rgba(26,26,26,.04);border:1.5px solid rgba(26,26,26,.1);border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px;}
.install-card-title{font-family:var(--font-title);font-size:18px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.install-card-icon{width:22px;height:22px;flex-shrink:0;}
.install-steps{padding-left:20px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.install-steps li{font-size:14px;line-height:1.4;}
.install-note{font-size:12px;font-style:italic;opacity:.5;line-height:1.4;margin:0;}
.install-footer{background:rgba(26,26,26,.04);border:1.5px solid rgba(26,26,26,.1);border-radius:var(--r-md);padding:14px 16px;font-size:13px;text-align:center;line-height:1.5;opacity:.7;margin-bottom:14px;}
.install-got-it{font-family:var(--font-title);font-size:18px;border-width:3px;}

/* HELP OVERLAY */
.overlay-x-btn{position:absolute;top:12px;right:12px;background:var(--red);color:white;border:2px solid var(--black);border-radius:50%;width:32px;height:32px;font-size:14px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.overlay-box{position:relative;}
.help-menu-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.help-menu-btn{width:100%;padding:13px 16px;background:var(--white);border:var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-weight:900;font-size:15px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);}
.help-menu-btn:active{transform:translate(2px,2px);box-shadow:none;}
.help-menu-divider{font-family:var(--font-title);font-size:12px;letter-spacing:2px;opacity:.45;text-transform:uppercase;padding:8px 4px 2px;}
.help-content-icon{text-align:center;margin-bottom:4px;}
.help-content-icon .ps-img-tile{width:150px;height:150px;display:inline-block;}
.help-content-title{font-family:var(--font-title);font-size:22px;text-align:center;margin-bottom:12px;}
.help-content-body{font-size:15px;line-height:1.6;font-weight:600;}
.help-content-body p{margin-bottom:10px;}
.help-content-body ul{padding-left:18px;margin-bottom:10px;}
.help-content-body li{margin-bottom:6px;}
.help-example{background:rgba(0,0,0,.06);border-radius:var(--r-md);padding:10px 12px;margin:6px 0;font-style:italic;}
.help-example strong{font-style:normal;color:var(--red);}

/* HEADER RIGHT BTNS */
.header-right-btns{display:flex;gap:5px;}

/* ACTIVE ROOMS TABLE */
.active-rooms-section{margin-top:8px;padding-bottom:24px;}
.rooms-table{width:100%;border-collapse:collapse;margin-top:8px;}
.rooms-table th{font-family:var(--font-title);font-size:12px;letter-spacing:1px;text-align:left;padding:6px 8px;border-bottom:2px solid var(--black);opacity:.6;}
.rooms-table td{padding:10px 8px;border-bottom:1px solid rgba(0,0,0,.1);font-weight:700;font-size:13px;vertical-align:middle;}
.rooms-table tr.room-row{cursor:pointer;}
.rooms-table tr.room-row:active{background:rgba(0,0,0,.06);}
/* AVAILABLE CARDS overlay — full-bleed sticky header, pinned close button, preserved rounded corners.
   Scrolling is moved off .overlay-box onto an inner element so the rounded corners are never clipped
   by the scrollbar and the absolutely-positioned close button doesn't scroll away. */
#overlay-admin-content.cards-mode{padding:5px;}                      /* backdrop padding → box sits 5px from each screen edge */
/* max-height:none clears the base .overlay-box 88vh cap — otherwise it fights the inner scroll's
   own max-height and clips the bottom rows on taller windows. The scroll element is the single cap. */
#overlay-admin-content.cards-mode .overlay-box{max-width:none;width:100%;max-height:none;padding:14px 0;overflow:hidden;}  /* 14px top/bottom keeps the scrollbar clear of the rounded corners */
#overlay-admin-content.cards-mode .overlay-x-btn{z-index:30;}        /* stays above the sticky header */
/* Scroll lives here (not on .overlay-box) so the rounded corners are never clipped by the scrollbar.
   max-height = viewport − 10px backdrop padding − 6px box border − 28px box padding (border-box).
   Use dvh (dynamic viewport) so the mobile URL bar can't push the last rows below the screen;
   the 100vh line is a fallback for browsers without dvh support. */
.admin-cards-scroll{max-height:calc(100vh - 44px);max-height:calc(100dvh - 44px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.admin-cards-head{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--black);padding:8px 44px 8px;}
.admin-cards-head .help-content-title{margin-bottom:4px;}
.admin-cards-head .admin-cards-count{text-align:center;font-size:12px;opacity:.5;margin:0;}

/* Card chart — CSS grid so the right-hand columns are fixed-width and pinned right, while
   word + genre flex to fill the rest at a 2:1 ratio (genre = 50% of the name width). */
.ac-table{padding:0 8px;}
.ac-row{display:grid;grid-template-columns:2fr 1fr 32px 64px 18px 54px;align-items:center;gap:6px;padding:7px 4px;height:38px;border-bottom:1px solid rgba(0,0,0,.1);}
.ac-row.ac-head{font-size:10px;font-weight:900;text-transform:uppercase;opacity:.6;height:auto;border-bottom:2px solid var(--black);}
.ac-name{min-width:0;font-weight:500;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ac-genre{min-width:0;font-size:11px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:normal;}
.ac-diff{display:flex;justify-content:center;}
.ac-rate,.ac-burn{text-align:center;font-size:11px;white-space:normal;}
.ac-burn{color:var(--orange);}
.ac-status{display:flex;justify-content:flex-end;}
.ac-dash{opacity:.3;}
.ac-pips{display:flex;gap:3px;}
.ac-pips .ac-pip{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;}
.ac-pips .ac-pip.fill{background:currentColor;}
.ac-pips.d-easy{color:var(--green);} .ac-pips.d-med{color:var(--orange);} .ac-pips.d-hard{color:var(--red);}
.toggle-used-btn{font-size:11px;font-weight:900;padding:3px 8px;border-radius:6px;border:1.5px solid var(--black);cursor:pointer;color:#fff;white-space:nowrap;}
.toggle-used-btn.used{background:var(--red);} .toggle-used-btn.free{background:var(--green);}
.room-status-lobby{color:var(--green);font-weight:900;}
.room-status-playing{color:var(--red);font-weight:900;}
.rooms-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:8px;}
.rooms-empty{text-align:center;opacity:.4;padding:20px;font-weight:700;}

/* CUSTOM CONFIRM DIALOG */
.confirm-box{text-align:center;}
.confirm-icon{font-size:48px;margin-bottom:8px;}
.confirm-title{font-family:var(--font-title);font-size:20px;margin-bottom:8px;}
.confirm-message{font-size:14px;font-weight:600;opacity:.7;margin-bottom:20px;line-height:1.5;}
.confirm-btns{display:flex;gap:10px;}
.confirm-btns>.btn{flex:1;}
/* Multi-choice dialog: stack the action buttons vertically (variable count). */
.choice-btns{flex-direction:column;}

/* Transient "someone wants to join" banner, floated above the play area (host only).
   Below .overlay (z-index 100) so an open dialog still wins; tap it to open Manage Players. */
.join-popup{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);z-index:90;
  display:flex;align-items:center;gap:8px;max-width:90vw;
  background:#2A9D8F;color:#fff;font-weight:800;font-size:15px;text-align:left;
  padding:11px 18px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  cursor:pointer;visibility:hidden;opacity:0;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;}
.join-popup.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0);}
.join-popup-icon{font-size:18px;flex-shrink:0;}

/* WILD PICKER */
.wild-picker{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.wild-style-btn{width:100%;padding:12px 16px;background:var(--white);border:var(--border);border-radius:var(--r-md);font-family:var(--font-body);font-weight:900;font-size:15px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);}
.wild-style-btn:active{transform:translate(2px,2px);box-shadow:none;}

/* VERSION TAG */
.version-tag{position:absolute;bottom:12px;right:14px;font-size:11px;font-weight:900;opacity:.3;cursor:pointer;letter-spacing:1px;}
.version-tag:active{opacity:.6;}
.home-content{position:relative;}

/* KID MODE TOGGLE SWITCH */
/* Kid Mode sub-options in per-player settings — boxed to show they belong to the toggle above */
.kid-opts-group{border:2px solid #C4B5FD;border-radius:var(--r-md);padding:2px 12px;margin:0 0 8px;}
.kid-toggle{display:inline-flex;align-items:center;cursor:pointer;}
.kid-toggle-track{width:44px;height:24px;background:#ccc;border-radius:12px;border:2px solid var(--black);position:relative;transition:background .2s;flex-shrink:0;}
.kid-toggle.on .kid-toggle-track{background:var(--green);}
.kid-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;border-radius:50%;border:1.5px solid var(--black);transition:left .2s;}
.kid-toggle.on .kid-toggle-thumb{left:22px;}

/* TURN ARROWS INLINE */
.turn-arrows{display:flex;flex-direction:column;gap:2px;}
.btn-arrow-sm{background:var(--white);border:2px solid var(--black);border-radius:4px;width:26px;height:22px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;}
.btn-arrow-sm:disabled{opacity:.3;cursor:default;}
.btn-arrow-sm:active{transform:scale(.9);}

/* LOBBY PLAYER ITEM — updated layout */
.lobby-player-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--white);border:var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);margin-bottom:8px;}
.lobby-player-info{flex:1;min-width:0;}
.player-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.lobby-host-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* GEAR BUTTON SMALL */
.btn-gear-sm{background:var(--white);border:2px solid var(--black);border-radius:var(--r-sm);width:28px;height:28px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.btn-gear-sm:active{transform:scale(.88);}

/* HOST OPTIONS SLIDER */
.host-opt-slider-row{padding:10px 14px;background:rgba(0,0,0,.04);border-radius:var(--r-md);margin-bottom:2px;}
.host-opt-slider-label{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin-bottom:6px;}

/* HOST VERSION TAG */
.host-version-tag{text-align:center;font-size:11px;font-weight:900;opacity:.25;cursor:pointer;margin-top:8px;letter-spacing:1px;}
.host-version-tag:active{opacity:.5;}

/* ── INDICATOR WRAPPERS (invisible placeholder) ── */
/* Hidden state keeps its reserved height and only fades, so the card area below
   doesn't shift when the play-style / category bars appear or disappear. */
.indicator-wrap{width:100%;overflow:hidden;transition:opacity .3s ease;opacity:1;}
.indicator-wrap.indicator-hidden{opacity:0;pointer-events:none;}
@keyframes indicator-swing-in{
  0%  {transform:perspective(400px) rotateX(-80deg);opacity:0;}
  15% {transform:perspective(400px) rotateX(-80deg);opacity:0;}
  18% {transform:perspective(400px) rotateX(-80deg);opacity:1;}
  40% {transform:perspective(400px) rotateX(45deg);}
  70% {transform:perspective(400px) rotateX(-45deg);}
  100%{transform:perspective(400px) rotateX(0deg);}
}
.indicator-wrap .playstyle-bar,
.indicator-wrap .genre-bar{transform-origin:top center;}
.indicator-wrap.indicator-pop .playstyle-bar,
.indicator-wrap.indicator-pop .genre-bar{animation:indicator-swing-in 1.2s ease-in both;}

/* ── STATS ROW (new layout) ───────────────────── */
.stats-row{display:flex;align-items:center;justify-content:space-around;padding:4px 4px;border-top:var(--border);background:var(--white);flex-shrink:0;gap:2px;}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.timer-stat{flex:1.4;cursor:pointer;}
.timer-btn{font-family:var(--font-title);font-size:24px;font-weight:900;width:75px;height:75px;padding:0;background:var(--red);color:white;border-radius:999px;border:3px solid var(--black);letter-spacing:1px;transition:transform .1s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:3px 3px 0 var(--black);margin:0 0 -16px 0;position:relative;top:-10px;}
.timer-btn:active{transform:scale(.95);}
.timer-btn.critical{background:var(--red-dark);color:white;animation:timer-pop .35s ease-in-out infinite;}
.timer-btn.warn{background:#F4A261;color:var(--black);}
.timer-pause-icon{font-size:13px;opacity:.7;line-height:1;}
.timer-pause-lbl{font-size:9px;font-weight:700;opacity:.5;letter-spacing:.5px;}

/* ── DECK SVG WRAP ────────────────────────────── */
.deck-svg-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:48px;}
.deck-svg-wrap svg{position:absolute;top:0;left:0;}
.deck-num{position:relative;z-index:2;font-family:var(--font-title);font-size:18px;font-weight:900;color:var(--black);text-shadow:-1px -1px 0 white,1px -1px 0 white,-1px 1px 0 white,1px 1px 0 white;}

/* ── WILD TILE PICKER ─────────────────────────── */
.wild-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;}
/* framed-tile picker: the tile art (it carries its own border) with the name BELOW it */
.wild-tile-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;background:none;border:none;box-shadow:none;cursor:pointer;line-height:1.1;text-align:center;}
.wild-tile-btn:active{transform:scale(.93);}
.wild-tile-btn .ps-img-tile{width:100%;height:auto;aspect-ratio:1;}
.wild-tile-btn span{font-family:var(--font-title);font-size:12px;letter-spacing:.3px;}

/* ── WILD HAND REVEAL ─────────────────────────── */
.wild-hand-reveal{margin-top:12px;border-top:1.5px solid rgba(0,0,0,.1);padding-top:10px;}
.wild-hold-btn{background:var(--yellow);border:var(--border);border-radius:var(--r-md);padding:10px;text-align:center;font-weight:700;font-size:13px;cursor:pointer;user-select:none;}
.wild-hand-cards{margin-top:8px;}
.wild-hand-item{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.07);font-size:13px;}
.wild-hand-word{font-weight:900;flex:1;}
.wild-hand-genre{font-size:11px;opacity:.55;}
.wild-hand-dots{font-size:10px;letter-spacing:1px;}
.dot-inline.filled{color:var(--black);}
.dot-inline{color:#ccc;}

/* ── HOST OPTIONS RESTRUCTURE ─────────────────── */
.host-section-heading{font-family:var(--font-title);font-size:11px;letter-spacing:2px;opacity:.4;text-transform:uppercase;padding:6px 2px 2px;}
.timer-adj-row{display:flex;gap:8px;}
.timer-adj-btn{flex:1;}
.burn-adj-row{display:flex;gap:8px;align-items:stretch;}
.burn-add-btn{flex:1;}
.burn-count-display{display:flex;align-items:center;justify-content:center;min-width:48px;padding:0 12px;font-family:var(--font-body);font-weight:900;font-size:18px;background:var(--white);border:var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);}

/* ── PLAYER OPTIONS ───────────────────────────── */
.player-opt-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);}
.player-opt-label{font-weight:700;font-size:14px;flex:1;}
.player-opt-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);}

/* ── LOBBY ACTION LOG COLLAPSIBLE ─────────────── */
.last-game-log-title.collapsible{cursor:pointer;user-select:none;}
.last-game-log-title.collapsible:active{opacity:.6;}

/* ── OBSERVER MINI-ROLL ───────────────────────── */
/* Floating die that slides in from off-screen and spins over the play-style bar.
   Uses the same die-spin/die-land keyframes as the main die, just smaller. */
@keyframes obs-die-out{to{opacity:0;transform:scale(.15) rotate(90deg);}}

/* UNIFIED VERSION TAG */
.game-version-tag{text-align:center;font-size:11px;font-weight:900;opacity:.25;cursor:pointer;margin-top:8px;letter-spacing:1px;user-select:none;}
.game-version-tag:active{opacity:.5;}
/* DEV-database build stamp on the version number — loud so it's obvious which environment a
   session is on (set in app.js when firebase.js selects the dev project). */
.game-version-tag.dev-build{opacity:1;color:var(--red);}

/* HOME OPTS BUTTON — fixed upper right */
.home-opts-btn-wrap{position:fixed;top:12px;right:12px;z-index:50;}
.screen-opts-wrap{position:absolute;top:12px;right:12px;}
.end-screen{position:relative;}