/* ============================================================================
   Baseline Games Hub — final surface, mobile gameplay, and contrast pass V5
   Purpose:
   - One final override layer after older inline rules.
   - Clearer warm-brown figure/ground separation without returning to pale off-white.
   - Remove white blotch/glow pseudo-elements from gameplay cards.
   - Formal mobile game-mode sizing for play roots/surfaces/keypads.
   ============================================================================ */

body[data-app="games"]{
  --games-page-deep:#5d3b28;
  --games-page-mid:#715036;
  --games-card-hi:#c2946b;
  --games-card-lo:#a5714d;
  --games-panel-hi:#d1a67e;
  --games-panel-lo:#b9825c;
  --games-play-hi:#bc895f;
  --games-play-lo:#96643f;
  --games-control-hi:#d8af86;
  --games-control-lo:#bd875f;
  --games-input-hi:#7f5538;
  --games-input-lo:#623f28;
  --games-ink:#24140b;
  --games-muted:#442c1c;
  --games-border:rgba(38,20,10,.38);
  --games-border-strong:rgba(38,20,10,.52);
  --games-shadow:0 22px 46px -30px rgba(22,12,7,.58);

  --ink:var(--games-ink);
  --muted:var(--games-muted);
  --accent:#8b5f3f;
  --accent-2:#2f1a0e;
  --border:var(--games-border);
  --border-2:var(--games-border-strong);
  --ring:rgba(80,46,24,.30);
  --shadow:0 22px 52px -34px rgba(24,13,7,.62);
  --shadow-soft:var(--games-shadow);
  --page-bg:linear-gradient(90deg,
    #5d3b28 0%,
    #715036 18%,
    #856044 36%,
    #967150 50%,
    #856044 64%,
    #715036 82%,
    #5d3b28 100%
  );
  --card-bg:linear-gradient(180deg,var(--games-card-hi) 0%,var(--games-card-lo) 100%);
  --filter-bg:linear-gradient(180deg,var(--games-input-hi) 0%,var(--games-input-lo) 100%);
  --showall-bg:linear-gradient(180deg,var(--games-control-hi) 0%,var(--games-control-lo) 100%);
  --showall-border:rgba(38,20,10,.34);
  --homebar-bg:var(--page-bg);
  --banner-pill-bg:var(--page-bg);
  --banner-pill-solid:#6b4a31;
  --banner-pill-ink:var(--games-ink);
  --banner-pill-border:#805d42;
}

html[data-app="games"],
body[data-app="games"],
body[data-app="games"] .bl-scroll{
  background:var(--page-bg)!important;
  background-size:100% 100%!important;
}

body[data-app="games"] .card,
body[data-app="games"] .game-board-card,
body[data-app="games"] .game-side-card,
body[data-app="games"] .game-panel .card{
  background:var(--card-bg)!important;
  background-color:var(--games-card-lo)!important;
  border:1px solid var(--games-border-strong)!important;
  color:var(--games-ink)!important;
  box-shadow:var(--games-shadow)!important;
}

body[data-app="games"] .summary-box,
body[data-app="games"] .progress-shell,
body[data-app="games"] .empty-box,
body[data-app="games"] .skill-item,
body[data-app="games"] .game-summary-details,
body[data-app="games"] .game-summary-body,
body[data-app="games"] .ninja-box,
body[data-app="games"] .trackcoin-stat-card,
body[data-app="games"] .realm-window,
body[data-app="games"] .realm-hud-card,
body[data-app="games"] .realm-stat-chip,
body[data-app="games"] .realm-spirit-card,
body[data-app="games"] .realm-manage-card,
body[data-app="games"] .realm-drawer,
body[data-app="games"] .realm-overlay-screen,
body[data-app="games"] .realm-top-strip,
body[data-app="games"] .realm-enemy-status,
body[data-app="games"] .ninja-scene__overlay{
  background:linear-gradient(180deg,var(--games-panel-hi) 0%,var(--games-panel-lo) 100%)!important;
  background-color:var(--games-panel-lo)!important;
  border-color:var(--games-border)!important;
  color:var(--games-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,229,199,.12),0 16px 34px -28px rgba(24,13,7,.46)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-app="games"] .formula-box,
body[data-app="games"] .word-box{
  position:relative!important;
  overflow:visible!important;
  background:linear-gradient(180deg,var(--games-play-hi) 0%,var(--games-play-lo) 100%)!important;
  background-color:var(--games-play-lo)!important;
  border-color:rgba(38,20,10,.44)!important;
  color:var(--games-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,222,188,.10),0 18px 34px -28px rgba(24,13,7,.54)!important;
}

body[data-app="games"] .game-row{
  background:linear-gradient(180deg,#c89a72 0%,#a8734f 100%)!important;
  border:1px solid rgba(38,20,10,.42)!important;
  color:var(--games-ink)!important;
  box-shadow:0 18px 36px -28px rgba(22,12,7,.58)!important;
}
body[data-app="games"] .game-row:hover{filter:brightness(1.035) saturate(1.02)!important}
body[data-app="games"] .game-row.is-selected{outline:2px solid rgba(43,24,13,.46)!important;box-shadow:0 20px 42px -28px rgba(22,12,7,.70)!important}
body[data-app="games"] .game-row h3,
body[data-app="games"] .card h2,
body[data-app="games"] .card h3,
body[data-app="games"] .skill-item h4,
body[data-app="games"] .game-summary-details summary{
  color:#271509!important;
}

body[data-app="games"] .tab,
body[data-app="games"] .action,
body[data-app="games"] .action.secondary,
body[data-app="games"] .action.ghost,
body[data-app="games"] .stat-pill,
body[data-app="games"] .tier-btn,
body[data-app="games"] .game-toggle-btn,
body[data-app="games"] .realm-tab-btn,
body[data-app="games"] .realm-close-btn,
body[data-app="games"] .trait-chip,
body[data-app="games"] .solution-box,
body[data-app="games"] .clue-bar,
body[data-app="games"] .number-chip,
body[data-app="games"] .letter-cell{
  background:var(--showall-bg)!important;
  background-color:var(--games-control-lo)!important;
  border-color:var(--showall-border)!important;
  color:var(--games-ink)!important;
  text-shadow:none!important;
}
body[data-app="games"] .tab[aria-selected="true"],
body[data-app="games"] .game-toggle-btn.is-active,
body[data-app="games"] .tier-btn.active,
body[data-app="games"] .auto-next-toggle[aria-pressed="true"]{
  background:linear-gradient(180deg,#dfb58b 0%,#c58d62 100%)!important;
  border-color:rgba(38,20,10,.50)!important;
  color:#1f1007!important;
}

body[data-app="games"] input,
body[data-app="games"] select,
body[data-app="games"] textarea,
body[data-app="games"] .text-input{
  background:var(--filter-bg)!important;
  background-color:var(--games-input-lo)!important;
  border-color:rgba(38,20,10,.52)!important;
  color:#f2dec9!important;
  -webkit-text-fill-color:#f2dec9!important;
  box-shadow:inset 0 1px 0 rgba(255,226,190,.08)!important;
}
body[data-app="games"] input::placeholder,
body[data-app="games"] textarea::placeholder,
body[data-app="games"] .text-input::placeholder{
  color:#d0ad8e!important;
  -webkit-text-fill-color:#d0ad8e!important;
  opacity:1!important;
}

body[data-app="games"] .note,
body[data-app="games"] .inline-note,
body[data-app="games"] .game-row p,
body[data-app="games"] .skill-item p,
body[data-app="games"] .game-summary-row,
body[data-app="games"] .realm-note,
body[data-app="games"] .realm-spirit-card p,
body[data-app="games"] .ninja-scene__overlay span{
  color:#3f2819!important;
}

/* Remove the white / pale blotch layer and unnecessary pseudo glows. */
body[data-app="games"] .card::before,
body[data-app="games"] .card::after,
body[data-app="games"] .word-box::before,
body[data-app="games"] .formula-box::before,
body[data-app="games"] .word-box::after,
body[data-app="games"] .formula-box::after,
body[data-app="games"] .realm-window::before,
body[data-app="games"] .ninja-scene::before,
body[data-app="games"] .ninja-scene::after{
  content:none!important;
  display:none!important;
}

body[data-app="games"] .memory-card,
body[data-app="games"] .memory-card.is-matched{
  background:#7b5135!important;
  border-color:rgba(38,20,10,.42)!important;
  box-shadow:0 14px 28px -24px rgba(22,12,7,.58)!important;
}
body[data-app="games"] .memory-card-back{
  background:linear-gradient(180deg,#8a5a3a 0%,#5b3622 100%)!important;
  color:#f4ddc7!important;
}
body[data-app="games"] .memory-card-front{
  background:linear-gradient(180deg,#c39670 0%,#9f6a45 100%)!important;
  color:#1f1007!important;
  text-shadow:none!important;
}

/* Track the Coin: distinct play scene, not a generic card surface. */
body[data-app="games"] .trackcoin-scene{
  min-height:390px;
  overflow:hidden!important;
  background:repeating-linear-gradient(90deg,#8a5d3b 0 54px,#966541 54px 108px,#7a5032 108px 162px,#905f3d 162px 216px)!important;
  border:1px solid rgba(38,20,10,.42)!important;
  box-shadow:inset 0 12px 26px rgba(255,210,165,.06),inset 0 -24px 36px rgba(35,18,9,.20),0 18px 34px -26px rgba(22,12,7,.58)!important;
}
body[data-app="games"] .trackcoin-lane{
  height:312px;
  position:relative;
  overflow:hidden!important;
  background:repeating-linear-gradient(90deg,#70472b 0 56px,#7d5132 56px 112px,#654026 112px 168px,#7a4d2e 168px 224px)!important;
  border:1px solid rgba(38,20,10,.38)!important;
  box-shadow:inset 0 18px 30px rgba(255,221,186,.04),inset 0 -22px 30px rgba(30,14,6,.24)!important;
}
body[data-app="games"] .trackcoin-scene::before,
body[data-app="games"] .trackcoin-lane::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:repeating-linear-gradient(0deg,rgba(255,225,190,.035) 0 1px,rgba(0,0,0,.025) 1px 3px)!important;
  opacity:.42!important;
  pointer-events:none!important;
}
body[data-app="games"] .trackcoin-cup{
  width:clamp(62px,9vw,100px)!important;
  height:clamp(78px,10vw,116px)!important;
  border-radius:16px 16px 32px 32px!important;
  background:linear-gradient(180deg,#b8794f 0%,#8f5b37 48%,#5d371e 100%)!important;
  border-color:rgba(38,20,10,.42)!important;
}
body[data-app="games"] .trackcoin-item-token{z-index:1!important}

/* Gameplay contract: panels are containers; play roots/surfaces are the focus/fullscreen targets. */
.game-play-root{position:relative;min-width:0;max-width:100%}
.game-play-surface{min-width:0;max-width:100%;outline:none}
.games-list-group{display:flex;align-items:center;gap:10px;margin:8px 0 2px;color:var(--accent-2);font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.games-list-group::after{content:"";height:1px;flex:1;background:rgba(45,25,14,.24)}
.mobile-game-keypad{display:none}
.mobile-game-exit{display:none}
.trackcoin-start-box{position:relative;z-index:3;margin:56px auto 0;max-width:420px;text-align:left}
.game-play-root:fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;overflow:auto!important;background:var(--page-bg,#111)!important;padding:16px!important;border-radius:0!important}
.game-play-root:fullscreen .mobile-game-keypad{display:grid}

@media (max-width:820px), (hover:none) and (pointer:coarse){
  body.bl-mobile-game-mode{overflow:hidden!important;touch-action:manipulation;background:var(--page-bg)!important}
  body.bl-mobile-game-mode .bl-homebar,
  body.bl-mobile-game-mode .hero{display:none!important}
  body.bl-mobile-game-mode .bl-scroll{top:0!important;overflow:hidden!important;background:var(--page-bg)!important}
  body.bl-mobile-game-mode .wrap{width:100%!important;margin:0!important;padding:0!important}
  body.bl-mobile-game-mode .section:not(#games),
  body.bl-mobile-game-mode #gamesOverviewCard,
  body.bl-mobile-game-mode .game-panel:not(.is-active){display:none!important}
  .is-mobile-game-root{
    position:fixed!important;
    inset:0!important;
    z-index:24000!important;
    width:100vw!important;
    height:100svh!important;
    max-width:none!important;
    min-height:100svh!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(14px + env(safe-area-inset-bottom,0px))!important;
    background:var(--page-bg,#4b2c1c)!important;
    background-size:100% 100%!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    display:grid!important;
    gap:10px!important;
    align-content:start!important;
  }
  .is-mobile-game-root .mobile-game-exit{display:inline-flex!important;position:sticky;top:0;z-index:20;align-items:center;justify-content:center;width:100%;min-height:44px;border-radius:999px;border:1px solid var(--border);background:var(--showall-bg);color:var(--accent-2);font-weight:950;box-shadow:var(--shadow-soft)}
  .is-mobile-game-root .summary-box{font-size:15px;line-height:1.35;padding:12px 14px;border-radius:16px}
  .mobile-game-keypad{display:grid;gap:7px;margin-top:10px;padding:10px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,#b7855f,#9b6b49);box-shadow:var(--shadow-soft)}
  .mobile-word-keypad{grid-template-columns:repeat(7,minmax(0,1fr))}
  .mobile-make24-keypad{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobile-game-key{min-height:44px;border-radius:14px;border:1px solid rgba(38,20,10,.34);background:var(--showall-bg);color:#1f1007;font-weight:950;font-size:18px;box-shadow:0 10px 22px -18px rgba(22,12,7,.38);touch-action:manipulation}
  .mobile-game-key--submit{grid-column:span 2;background:linear-gradient(180deg,#d7aa84,#bd865d)!important}
  .mobile-game-key--utility{font-size:15px}
  #wordGuessInput[readonly],#make24ExpressionInput[readonly]{caret-color:transparent;user-select:none;-webkit-user-select:none}
  .word-row{justify-content:center!important;grid-template-columns:repeat(var(--letters,5),minmax(0,44px))!important;gap:6px!important}
  .letter-cell{width:44px!important;height:44px!important;font-size:18px!important}
  .numbers-strip{justify-content:center!important;gap:8px!important}
  .number-chip{min-width:54px!important;min-height:54px!important;font-size:24px!important}
  .board-grid[data-game-play-surface="pairs"]{gap:7px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important}
  .board-grid[data-game-play-surface="pairs"] .memory-card{min-height:clamp(58px,17vw,86px)!important;border-radius:14px!important}
  .board-grid[data-game-play-surface="pairs"] .memory-card-face{font-size:clamp(32px,10vw,58px)!important;padding:2px!important}
  #trackCoinBoard.is-mobile-game-root{padding-left:10px!important;padding-right:10px!important;overflow:hidden!important}
  #trackCoinBoard.is-mobile-game-root .mobile-game-exit{flex:0 0 auto}
  .trackcoin-scene{min-height:calc(100svh - 76px)!important;padding:10px!important;border-radius:18px!important;display:grid!important;grid-template-rows:auto minmax(300px,1fr)!important;gap:8px!important;overflow:hidden!important}
  .trackcoin-status{font-size:14px!important;line-height:1.25!important;padding:4px!important}
  .trackcoin-lane{height:clamp(300px,62svh,520px)!important;min-height:300px!important;border-radius:18px!important;overflow:hidden!important}
  .trackcoin-cup{width:clamp(54px,18vw,92px)!important;height:clamp(68px,22vw,112px)!important;border-radius:14px 14px 28px 28px!important}
  .trackcoin-cup::before{height:15px!important;top:-8px!important}
  .trackcoin-item-token{width:clamp(30px,9vw,44px)!important;height:clamp(30px,9vw,44px)!important;font-size:clamp(20px,6vw,28px)!important}
  .trackcoin-start-box{margin:24px auto 0!important;max-width:min(420px,92vw)!important}
}

@media (max-width:420px){
  .mobile-word-keypad{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mobile-game-key{min-height:42px;font-size:16px}
  .word-row{grid-template-columns:repeat(var(--letters,5),minmax(0,39px))!important}
  .letter-cell{width:39px!important;height:39px!important}
  .board-grid[data-game-play-surface="pairs"]{gap:6px!important}
  .board-grid[data-game-play-surface="pairs"] .memory-card{min-height:clamp(50px,16vw,72px)!important}
  .trackcoin-lane{height:clamp(286px,60svh,440px)!important;min-height:286px!important}
}


/* BASELINE-GAMES-HUB-FINAL-PASS-20260526massagefix */
body[data-app="games"]{
  --games-page-deep:#63452f;
  --games-page-mid:#78573d;
  --games-card-hi:#c09570;
  --games-card-lo:#aa7854;
  --games-panel-hi:#c99a72;
  --games-panel-lo:#b7855f;
  --games-play-hi:#bb875f;
  --games-play-lo:#9d6a46;
  --games-control-hi:#d2a078;
  --games-control-lo:#b98159;
  --games-input-hi:#875d40;
  --games-input-lo:#775036;
  --games-ink:#24140b;
  --games-muted:#472d1d;
  --page-bg:linear-gradient(90deg,#63452f 0%,#76563d 18%,#8a6648 36%,#9d7858 50%,#8a6648 64%,#76563d 82%,#63452f 100%);
  --card-bg:linear-gradient(180deg,var(--games-card-hi) 0%,var(--games-card-lo) 100%);
  --filter-bg:linear-gradient(180deg,var(--games-input-hi) 0%,var(--games-input-lo) 100%);
  --showall-bg:linear-gradient(180deg,var(--games-control-hi) 0%,var(--games-control-lo) 100%);
  --homebar-bg:var(--page-bg);
  --banner-pill-bg:var(--page-bg);
  --banner-pill-solid:#7a5235;
  --banner-pill-border:#8b6548;
}
body[data-app="games"] .hero .title,
body[data-app="games"] .hero .subtitle{
  color:#f1d7bd!important;
  text-shadow:0 1px 1px rgba(30,14,6,.24)!important;
}
body[data-app="games"] .hero .subtitle{color:#e8c5a8!important;}
body[data-app="games"] .card,
body[data-app="games"] .game-board-card,
body[data-app="games"] .game-side-card,
body[data-app="games"] .game-panel .card{
  background:var(--card-bg)!important;
  background-color:var(--games-card-lo)!important;
  border-color:rgba(55,31,18,.48)!important;
}
body[data-app="games"] .summary-box,
body[data-app="games"] .progress-shell,
body[data-app="games"] .empty-box,
body[data-app="games"] .skill-item,
body[data-app="games"] .game-summary-details,
body[data-app="games"] .game-summary-body,
body[data-app="games"] .ninja-box,
body[data-app="games"] .trackcoin-stat-card,
body[data-app="games"] .realm-window,
body[data-app="games"] .realm-hud-card,
body[data-app="games"] .realm-stat-chip,
body[data-app="games"] .realm-spirit-card,
body[data-app="games"] .realm-manage-card,
body[data-app="games"] .realm-drawer,
body[data-app="games"] .realm-overlay-screen,
body[data-app="games"] .realm-top-strip,
body[data-app="games"] .realm-enemy-status,
body[data-app="games"] .ninja-scene__overlay{
  background:linear-gradient(180deg,var(--games-panel-hi) 0%,var(--games-panel-lo) 100%)!important;
  background-color:var(--games-panel-lo)!important;
}
body[data-app="games"] .formula-box,
body[data-app="games"] .word-box{
  background:linear-gradient(180deg,var(--games-play-hi) 0%,var(--games-play-lo) 100%)!important;
  background-color:var(--games-play-lo)!important;
}
body[data-app="games"] .letter-cell.correct{
  background:#5f8d4c!important;
  border-color:#456c37!important;
  color:#fff8ee!important;
  -webkit-text-fill-color:#fff8ee!important;
}
body[data-app="games"] .letter-cell.present{
  background:#c79235!important;
  border-color:#906920!important;
  color:#fff8e8!important;
  -webkit-text-fill-color:#fff8e8!important;
}
body[data-app="games"] .letter-cell.absent{
  background:linear-gradient(180deg,#c99a72 0%,#ad7a54 100%)!important;
  border-color:rgba(55,31,18,.36)!important;
  color:#2f1a0e!important;
  -webkit-text-fill-color:#2f1a0e!important;
}
body[data-app="games"] .card::before,
body[data-app="games"] .card::after,
body[data-app="games"] .word-box::before,
body[data-app="games"] .formula-box::before,
body[data-app="games"] .word-box::after,
body[data-app="games"] .formula-box::after{
  content:none!important;
  display:none!important;
}


/* BASELINE-DETECTWORD-FEEDBACK-FIX
   Keep Wordle-style feedback visible after the final warm-brown override layer. */
body[data-app="games"] .letter-cell.correct{
  background:linear-gradient(180deg,#74a864 0%,#4f7f45 100%)!important;
  background-color:#5f8f55!important;
  border-color:#416f3b!important;
  color:#fffdf7!important;
  -webkit-text-fill-color:#fffdf7!important;
}
body[data-app="games"] .letter-cell.present{
  background:linear-gradient(180deg,#d5a24b 0%,#b77f2f 100%)!important;
  background-color:#c98f39!important;
  border-color:#916a28!important;
  color:#fff8eb!important;
  -webkit-text-fill-color:#fff8eb!important;
}
body[data-app="games"] .letter-cell.absent{
  background:linear-gradient(180deg,#c6a07a 0%,#a06f4a 100%)!important;
  background-color:#a87550!important;
  border-color:rgba(38,20,10,.34)!important;
  color:#4a2f1f!important;
  -webkit-text-fill-color:#4a2f1f!important;
}


/* CLEAN-DEPLOY-GAMES-CONTRAST-AND-WORD-FEEDBACK-20260526cleanroot
   Softer page background than the first dark pass, while keeping warm brown contrast.
   Also preserves Detect The Word green/amber feedback above all brown overrides. */
body[data-app="games"]{
  --page-bg:linear-gradient(90deg,#6f4e36 0%,#805d42 18%,#916d4f 36%,#a58363 50%,#916d4f 64%,#805d42 82%,#6f4e36 100%)!important;
  --homebar-bg:var(--page-bg)!important;
  --banner-pill-bg:var(--page-bg)!important;
}
body[data-app="games"] .letter-cell.correct{
  background:linear-gradient(180deg,#74a864 0%,#4f7f45 100%)!important;
  background-color:#5f8f55!important;
  border-color:#416f3b!important;
  color:#fffdf7!important;
  -webkit-text-fill-color:#fffdf7!important;
}
body[data-app="games"] .letter-cell.present{
  background:linear-gradient(180deg,#d5a24b 0%,#b77f2f 100%)!important;
  background-color:#c98f39!important;
  border-color:#916a28!important;
  color:#fff8eb!important;
  -webkit-text-fill-color:#fff8eb!important;
}
body[data-app="games"] .letter-cell.absent{
  background:linear-gradient(180deg,#c6a07a 0%,#a06f4a 100%)!important;
  background-color:#a87550!important;
  border-color:rgba(38,20,10,.34)!important;
  color:#4a2f1f!important;
  -webkit-text-fill-color:#4a2f1f!important;
}
body[data-app="games"] .word-box::before,
body[data-app="games"] .formula-box::before,
body[data-app="games"] .word-box::after,
body[data-app="games"] .formula-box::after{
  content:none!important;
  display:none!important;
}


/* BASELINE-SOLID-SURFACE-CONTRACT-20260527
   Page gradients stay on the page/banner. Cards, recipe controls, account fields,
   panel controls, and sliders use solid opaque colours sampled from each page palette. */
body[data-app="home"]{
  --bl-surface-card-solid:#3d3d43;
  --bl-surface-panel-solid:#47474d;
  --bl-surface-control-solid:#56565f;
  --bl-surface-input-solid:#4f4f58;
  --bl-surface-active-solid:#6a6a74;
  --bl-surface-ink:#f4efe7;
  --bl-slider-track-solid:#47474d;
  --bl-slider-thumb-solid:#9b9baa;
  --bl-slider-border-solid:#2b2b30;
  --bl-home-account-gradient:linear-gradient(90deg,#2f3035 0%,#50515a 30%,#757680 50%,#50515a 70%,#2f3035 100%);
}
body[data-app="food"]{
  --bl-surface-card-solid:#f5b84a;
  --bl-surface-recipe-card-solid:#ffc04d;
  --bl-surface-panel-solid:#e98225;
  --bl-surface-control-solid:#ee942d;
  --bl-surface-input-solid:#ffb13b;
  --bl-surface-active-solid:#c92727;
  --bl-surface-ink:#1b0b09;
  --bl-slider-track-solid:#b11226;
  --bl-slider-thumb-solid:#ffb000;
  --bl-slider-border-solid:#7a1a21;
}
body[data-app="skin"]{
  --bl-surface-card-solid:#d99a82;
  --bl-surface-recipe-card-solid:#d89178;
  --bl-surface-panel-solid:#c87962;
  --bl-surface-control-solid:#cf8167;
  --bl-surface-input-solid:#e0aa94;
  --bl-surface-active-solid:#b8644d;
  --bl-surface-ink:#2b2b28;
  --bl-slider-track-solid:#b8644d;
  --bl-slider-thumb-solid:#edd2c4;
  --bl-slider-border-solid:#7a4a3a;
}
body[data-app="massage"]{
  --bl-surface-card-solid:#aa7854;
  --bl-surface-recipe-card-solid:#b98159;
  --bl-surface-panel-solid:#b7855f;
  --bl-surface-control-solid:#b98159;
  --bl-surface-input-solid:#875d40;
  --bl-surface-active-solid:#c58d62;
  --bl-surface-ink:#24140b;
  --bl-slider-track-solid:#775036;
  --bl-slider-thumb-solid:#d2a078;
  --bl-slider-border-solid:#2f1a0e;
}
body[data-app="fitness"]{
  --bl-surface-card-solid:#130b10;
  --bl-surface-recipe-card-solid:#1d1016;
  --bl-surface-panel-solid:#1d1016;
  --bl-surface-control-solid:#701725;
  --bl-surface-input-solid:#2a1118;
  --bl-surface-active-solid:#9b1a2d;
  --bl-surface-ink:#f6eaf0;
  --bl-slider-track-solid:#2a1118;
  --bl-slider-thumb-solid:#9b1a2d;
  --bl-slider-border-solid:#f6eaf0;
}
body[data-app="badminton"]{
  --bl-surface-card-solid:#efdcfb;
  --bl-surface-recipe-card-solid:#e7cff6;
  --bl-surface-panel-solid:#e1c4f4;
  --bl-surface-control-solid:#d7b7ee;
  --bl-surface-input-solid:#efdcfb;
  --bl-surface-active-solid:#c29cff;
  --bl-surface-ink:#2c123f;
  --bl-slider-track-solid:#6a1fb3;
  --bl-slider-thumb-solid:#f08b2f;
  --bl-slider-border-solid:#2c123f;
}
body[data-app="games"]{
  --bl-surface-card-solid:#a5714d;
  --bl-surface-recipe-card-solid:#b9825c;
  --bl-surface-panel-solid:#b9825c;
  --bl-surface-control-solid:#bd875f;
  --bl-surface-input-solid:#7f5538;
  --bl-surface-active-solid:#d1a67e;
  --bl-surface-ink:#24140b;
  --bl-slider-track-solid:#623f28;
  --bl-slider-thumb-solid:#d8af86;
  --bl-slider-border-solid:#24140b;
}

/* Index header Account button: deliberately grey-gradient, tied to the grey header, with clear white text. */
body[data-app="home"] #bl-auth-toggle{
  background:var(--bl-home-account-gradient)!important;
  background-image:var(--bl-home-account-gradient)!important;
  background-color:#50515a!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  border-color:#9a9aa6!important;
  box-shadow:0 14px 28px -22px rgba(0,0,0,.55)!important;
}
body[data-app="home"] #bl-auth-toggle .bl-btn-label,
body[data-app="home"] #bl-auth-toggle .bl-btn-icon{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;}

/* Cards and panels: solid opaque surfaces on system pages, never translucent or gradient-filled. */
body:not([data-app="home"]) .card,
body:not([data-app="home"]) .method-card,
body:not([data-app="home"]) .logic-card,
body:not([data-app="home"]) .session-card,
body:not([data-app="home"]) .summary-box,
body:not([data-app="home"]) .progress-shell,
body:not([data-app="home"]) .empty-box,
body:not([data-app="home"]) .skill-item,
body:not([data-app="home"]) .game-summary-details,
body:not([data-app="home"]) .game-summary-body,
body:not([data-app="home"]) .formula-box,
body:not([data-app="home"]) .word-box,
body:not([data-app="home"]) .ninja-box,
body:not([data-app="home"]) .trackcoin-stat-card,
body:not([data-app="home"]) .realm-window,
body:not([data-app="home"]) .realm-drawer,
body:not([data-app="home"]) .realm-spirit-card,
body:not([data-app="home"]) .realm-stat-chip,
body:not([data-app="home"]) .realm-manage-card,
body:not([data-app="home"]) .system-section-card,
body:not([data-app="home"]) .system-panel,
body:not([data-app="home"]) .court-card,
body:not([data-app="home"]) .status-box,
body:not([data-app="home"]) .diet-log-panel,
body:not([data-app="home"]) .diet-food-row,
body:not([data-app="home"]) .diet-entry-card,
body:not([data-app="home"]) .diet-selected-card,
body:not([data-app="home"]) .diet-kpi-card,
body:not([data-app="home"]) .diet-mini-stat{
  background-image:none!important;
  background-color:var(--bl-surface-card-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Recipe area: warmer/deeper solid cards and solid controls, no internal gradients. */
body[data-app] #recipes .card,
body[data-app] #recipes .recipe.card,
body[data-app] #recipes-landing.card,
body[data-app] #recipes .recipe-page,
body[data-app] #recipes .side-recipe-nav,
body[data-app] #recipes .scale-tools,
body[data-app] .recipe.card{
  background-image:none!important;
  background-color:var(--bl-surface-recipe-card-solid,var(--bl-surface-card-solid))!important;
  opacity:1!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-app] #recipes .multiplier,
body[data-app] #recipes .filter-bar,
body[data-app] #recipes .glide-controller,
body[data-app] #recipes .scale-block,
body[data-app] #recipes .variant-switcher,
body[data-app] #recipes .recipe-controls{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  border-color:var(--border,var(--showall-border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes .back-btn,
body[data-app] #recipes .print-btn,
body[data-app] #recipes .scale-toggle,
body[data-app] #recipes .scale-apply,
body[data-app] #recipes .multiplier button,
body[data-app] #recipes .ingredient-recipe-link a,
body[data-app] #recipes .action,
body[data-app] #recipes button,
body[data-app] #recipes .bl-number-stepper .bl-step,
body[data-app] #recipes .bl-select-btn,
body[data-app] #recipes .bl-select-menu [role="option"]{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes input:not([type="range"]),
body[data-app] #recipes select,
body[data-app] #recipes textarea,
body[data-app] #recipes .scale-tools input,
body[data-app] #recipes .scale-tools select,
body[data-app] #recipes .multiplier input,
body[data-app] #recipes .multiplier select{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes .bl-select-menu,
body[data-app] #recipes .scale-tools{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
}

/* Account + Binaural flyouts: solid panels and solid fields/buttons from current page palette. */
body[data-app] #bl-auth-flyout .card,
body[data-app] #bl-beats-flyout .card,
body[data-app] .bl-flyout .card{
  background-image:none!important;
  background-color:var(--bl-surface-card-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-app] #bl-auth-flyout .bl-auth-input-shell,
body[data-app] #bl-auth-flyout input:not([type="range"]),
body[data-app] #bl-auth-flyout select,
body[data-app] #bl-auth-flyout textarea,
body[data-app] #bl-beats-flyout input:not([type="range"]),
body[data-app] #bl-beats-flyout select,
body[data-app] #bl-beats-flyout textarea,
body[data-app] .bl-flyout input:not([type="range"]),
body[data-app] .bl-flyout select,
body[data-app] .bl-flyout textarea{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  caret-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #bl-auth-flyout .bl-auth-input-shell > input,
body[data-app] #bl-auth-flyout .bl-auth-input-shell > input:not([type="range"]){
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
}
body[data-app] #bl-auth-flyout .bl-mini-btn,
body[data-app] #bl-auth-flyout button,
body[data-app] #bl-beats-flyout .bl-mini-btn,
body[data-app] #bl-beats-flyout button,
body[data-app] .bl-flyout .bl-select-btn,
body[data-app] .bl-flyout .bl-select-menu [role="option"]{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] .bl-flyout .bl-select-menu{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
}

/* General page controls: solid tones from the page palette, not gradients. */
body:not([data-app="home"]) input:not([type="range"]),
body:not([data-app="home"]) select,
body:not([data-app="home"]) textarea,
body:not([data-app="home"]) .text-input,
body:not([data-app="home"]) .diet-static-value{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
}
body:not([data-app="home"]) .action,
body:not([data-app="home"]) button.action,
body:not([data-app="home"]) .tab,
body:not([data-app="home"]) .game-toggle-btn,
body:not([data-app="home"]) .tier-btn,
body:not([data-app="home"]) .stat-pill,
body:not([data-app="home"]) .trait-chip,
body:not([data-app="home"]) .solution-box,
body:not([data-app="home"]) .clue-bar,
body:not([data-app="home"]) .number-chip,
body:not([data-app="home"]) .letter-cell,
body:not([data-app="home"]) .metric-chip,
body:not([data-app="home"]) .gameplan-subtab,
body:not([data-app="home"]) .diet-inline-note,
body:not([data-app="home"]) .diet-entry-macros span{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
}
body:not([data-app="home"]) .tab[aria-selected="true"],
body:not([data-app="home"]) .game-toggle-btn.is-active,
body:not([data-app="home"]) .tier-btn.active,
body:not([data-app="home"]) .gameplan-subtab[aria-selected="true"]{
  background-image:none!important;
  background-color:var(--bl-surface-active-solid)!important;
}

/* Sliders: remove browser blue/white defaults and use page-local solid colours. */
body[data-app] input[type="range"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  height:24px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  color:var(--bl-slider-thumb-solid)!important;
  accent-color:var(--bl-slider-thumb-solid)!important;
  cursor:pointer!important;
}
body[data-app] input[type="range"]::-webkit-slider-runnable-track{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-slider-track-solid)!important;
  border:1px solid var(--bl-slider-border-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:24px!important;
  height:24px!important;
  margin-top:-7px!important;
  border-radius:50%!important;
  border:2px solid var(--bl-slider-border-solid)!important;
  background:var(--bl-slider-thumb-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-track{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-slider-track-solid)!important;
  border:1px solid var(--bl-slider-border-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-thumb{
  width:24px!important;
  height:24px!important;
  border-radius:50%!important;
  border:2px solid var(--bl-slider-border-solid)!important;
  background:var(--bl-slider-thumb-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-progress{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-surface-active-solid)!important;
}
body[data-app] input::placeholder,
body[data-app] textarea::placeholder{
  color:color-mix(in srgb, var(--ink,var(--bl-surface-ink,#111)) 70%, transparent)!important;
  -webkit-text-fill-color:color-mix(in srgb, var(--ink,var(--bl-surface-ink,#111)) 70%, transparent)!important;
  opacity:1!important;
}
body[data-app] input:-webkit-autofill,
body[data-app] input:-webkit-autofill:hover,
body[data-app] input:-webkit-autofill:focus,
body[data-app] textarea:-webkit-autofill,
body[data-app] select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink,var(--bl-surface-ink,#111))!important;
  box-shadow:0 0 0 1000px var(--bl-surface-input-solid) inset!important;
  transition:background-color 99999s ease-out 0s!important;
}
/* END BASELINE-SOLID-SURFACE-CONTRACT-20260527 */