/*
 * Tegazumi Games - semantic theme + component contract (v1).
 *
 * Application pages must use --canvas, --surface, --surface-soft, --text,
 * --muted, --line and --accent. Do not paint application cards with game colours.
 * Use data-game with --game-tint/--game-tint-2/--game-ink; the design system
 * automatically tones the art for dark mode while preserving game identity.
 *
 * Theme switching is the existing <html data-theme="light|dark"> API.
 * Change this file, not a separate hard-coded dark override for every page.
 */
:root{
  --game-art-blend:100%;
  --game-art-ink-blend:100%;
  --game-art-tile:rgba(255,255,255,.76);
  --avatar-surface:#DBEEE9;
  --avatar-ink:#247766;
  --error-surface:#FDF0EC;
  --error-ink:#A6463D;
  --concept-link-surface:var(--surface);
  --concept-link-ink:var(--text);
  --game-soft-border:var(--line);
}
:root[data-theme="dark"]{
  --game-art-blend:54%;
  --game-art-ink-blend:100%;
  --game-art-tile:rgba(255,255,255,.76);
  --avatar-surface:#29443F;
  --avatar-ink:#BAE9D9;
  --error-surface:#473131;
  --error-ink:#FFC0BA;
}
/* Shared game cards are used by Home and All games. */
.game-catalog-card{
  background:var(--surface);
  color:var(--text);
  border-color:var(--line);
}
.game-catalog-card .card-text{background:var(--surface);color:var(--text)}
.game-catalog-card .card-text h3{color:var(--text)}
.game-catalog-card .card-text p{color:var(--muted)}
.game-catalog-card .card-art,
.catalog-placeholder,
.pitchline-placeholder{
  --game-art-start:color-mix(in srgb,var(--game-tint,#D7EEDC) var(--game-art-blend),var(--surface));
  --game-art-end:color-mix(in srgb,var(--game-tint-2,#FFF1D2) var(--game-art-blend),var(--surface));
  --game-art-ink:color-mix(in srgb,var(--game-ink,#347C67) var(--game-art-ink-blend),var(--text));
  background:linear-gradient(132deg,var(--game-art-start),var(--game-art-end));
  color:var(--game-art-ink);
}
.game-catalog-card .card-art{background:linear-gradient(132deg,var(--game-art-start),var(--game-art-end));color:var(--game-art-ink)}
/*
 * Dark mode follows the Sequence Memory hero's balance: deep colour-tinted
 * art surfaces, vibrant tiles. Never fade/desaturate the actual illustration
 * or turn its lighter tiles into dark-grey UI panels.
 */
:root[data-theme="dark"] :is(.game-catalog-card .card-art,.catalog-placeholder,.pitchline-placeholder){
  --game-art-start:color-mix(in srgb,var(--game-ink,#347C67) 57%,var(--surface));
  --game-art-end:color-mix(in srgb,var(--game-tint,#D7EEDC) 29%,var(--surface));
  --game-art-ink:color-mix(in srgb,var(--game-tint,#D7EEDC) 88%,white);
}
:root[data-theme="dark"] .game-catalog-card .card-arrow{
  color:color-mix(in srgb,var(--game-tint,#D7EEDC) 85%,white);
}
/* The illustrated cats retain their full colour in both themes. */
.game-catalog-card .cat-icons span,
.catalog-placeholder .cat-icons span{color:#534640}
.catalog-placeholder h2,.catalog-placeholder p{color:var(--text)}
.catalog-placeholder p{color:var(--muted)}
.concept-back-link{
  color:var(--concept-link-ink);background:var(--concept-link-surface);
  border:1px solid var(--line);
}
.concept-back-link:hover{background:var(--surface-soft)}
.pitchline-placeholder{--game-tint:#E6DFF8;--game-tint-2:#E7F3FB;--game-ink:#7660A3}
.pitchline-placeholder p{color:var(--muted)}
/* Form, profile, error and status surfaces inherit the same theme semantics. */
.profile-portrait{background:var(--avatar-surface);color:var(--avatar-ink);border-color:var(--line)}
/* Catalogue: no second title, no status labels, consistent row rhythm. */
.library-header{padding-bottom:12px}
.library-count{display:block;margin:0 0 19px;font-size:12px;color:var(--muted)}
.library-grid .game-catalog-card .card-text{padding:16px 17px 18px}
.library-grid .game-catalog-card .card-heading h3{font-size:18px}
.library-grid .game-catalog-card .card-text p{font-size:12px;line-height:1.5;margin:4px 0 0}
.library-grid .game-card-art{height:137px}
/* Narrow sidebar progress card: preserve full labels instead of wrapping.
   Container queries respond to actual card width, not viewport guesses. */
.home-progress{container-name:player-progress;container-type:inline-size}
@media(min-width:851px){
  @container player-progress (max-width:355px){
    .home-progress-metrics{grid-template-columns:1fr}
    .home-progress .home-metric{
      display:flex;flex-direction:row;align-items:center;justify-content:space-between;
      gap:10px;min-height:51px;padding:10px 13px
    }
    .home-progress .home-metric h3{white-space:nowrap;font-size:13px}
    .home-progress .home-metric strong{font-size:27px;flex:none}
    .home-latest-game{
      display:grid;grid-template-columns:36px minmax(0,1fr) 13px;
      grid-template-rows:auto auto;column-gap:10px;row-gap:3px;
      align-items:center
    }
    .home-latest-game #home-latest-icon{grid-column:1;grid-row:1/3}
    .home-latest-game .home-latest-copy{grid-column:2;grid-row:1;min-width:0}
    .home-latest-game .home-latest-score{grid-column:2;grid-row:2;font-size:11px}
    .home-latest-game .home-latest-arrow{grid-column:3;grid-row:1/3}
  }
}
/* Smaller and tablet screens retain the existing two-up progress layout. */
@media(max-width:700px){.library-grid .game-card-art{height:112px}}

/* Full-width Rankings; the game page remains the compact three-place preview. */
.page[data-page="rankings"] .rankings-main{max-width:none;width:100%}

/* Shared podium number colours. Ranks are not decorated as cards or stars. */
:root{
  --rank-gold:#AC7C28;
  --rank-silver:#708096;
  --rank-bronze:#A86D4E;
}
:root[data-theme="dark"]{
  --rank-gold:#FFD27B;
  --rank-silver:#D4DEEC;
  --rank-bronze:#E6B098;
}

/* Site is an interactive game UI, not a selectable document. Native editing,
   focused fields and code/IDs remain selectable and copyable. Not a DRM layer. */
.app-shell{user-select:none;-webkit-user-select:none}
.app-shell :is(input,textarea,select,[contenteditable="true"],pre,code,[data-selectable]){
  user-select:text;-webkit-user-select:text
}
/* Shared branded hints for icon-only controls; never rely on browser title
   attributes. Labels are still available to screen readers via aria-label. */
[data-tooltip]{position:relative}
[data-tooltip]:not([data-tooltip=""]):is(:hover,:focus-visible)::after{
  content:attr(data-tooltip);
  position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  padding:6px 9px;border-radius:7px;min-width:max-content;max-width:min(250px,80vw);
  background:var(--text);color:var(--surface);border:1px solid var(--line);
  box-shadow:0 7px 18px rgba(0,0,0,.16);
  font-size:11px;line-height:1.35;letter-spacing:0;font-weight:500;
  text-transform:none;white-space:normal;z-index:100;pointer-events:none
}
/* Version/build identity: make its hover/focus tooltip 50% larger
   without enlarging unrelated control hints or the version badge itself. */
:is(#environment-indicator,#mobile-environment-indicator)[data-tooltip]:not([data-tooltip=""]):is(:hover,:focus-visible)::after{
  font-size:16.5px;
  padding:9px 13.5px;
  border-radius:10.5px;
  min-width:0;
  width:max-content;
  max-width:min(375px,calc(100vw - 28px));
  left:0;
  transform:none;
  overflow-wrap:anywhere;
}
/* Portal-style collapsed-sidebar flyout: cannot be clipped by sidebar scroll. */
.nav-flyout[hidden]{display:none!important}
.nav-flyout{
  position:fixed;display:flex;align-items:center;gap:13px;
  box-sizing:border-box;width:max-content;min-width:175px;
  padding:0 16px 0 14px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 9px 24px rgba(0,0,0,.13);
  font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer;
  z-index:65;opacity:0;transform:translateX(-6px) scale(.98);
  transition:opacity .16s ease,transform .18s ease
}
.nav-flyout.is-visible{opacity:1;transform:translateX(0) scale(1)}
.nav-flyout:hover,.nav-flyout.is-current{
  background:color-mix(in srgb,var(--game-tint,var(--selected)) 15%,var(--surface))
}
.nav-flyout.is-current{border-color:color-mix(in srgb,var(--game-ink,var(--accent)) 24%,var(--line))}
.nav-flyout>svg{width:20px;height:20px;flex:none;stroke:var(--game-ink,var(--accent))}
.nav-flyout-label{overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.nav-flyout{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .nav-flyout{transition:none}
}
/* Rankings is the competition hub; details belong to game-scoped pages. */
.rankings-switch{display:inline-flex;gap:4px;margin:0 0 20px;padding:4px;
 background:var(--surface-soft);border:1px solid var(--line);border-radius:12px}
.rankings-switch button{appearance:none;border:0;background:transparent;color:var(--muted);
 padding:9px 19px;border-radius:9px;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.rankings-switch button[aria-selected="true"]{background:var(--surface);color:var(--text);
 box-shadow:0 2px 8px rgba(0,0,0,.07)}
.rankings-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rankings-hub [role="tabpanel"][hidden]{display:none!important}
.rankings-game-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.rankings-game-link{display:flex;align-items:center;gap:14px;background:var(--surface);
 border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;
 min-width:0;padding:18px;color:var(--text);transition:border-color .15s,transform .15s}
.rankings-game-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.rankings-game-link>span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.rankings-game-link strong{font-size:16px}
.rankings-game-link small{font-size:12px;color:var(--muted)}
.rankings-game-mark{display:grid;place-items:center;width:44px;height:44px;background:var(--surface-soft);
 border-radius:12px;flex:none}
.rankings-game-go{font-size:12px;color:var(--accent);font-weight:750;white-space:nowrap}
.rankings-global-intro{border:1px solid var(--line);background:var(--surface);
 border-radius:17px;padding:25px}
.rankings-global-intro h2{font-size:19px;margin:0 0 10px}
.rankings-global-intro p{margin:0;color:var(--muted);font-size:13px;max-width:560px;line-height:1.6}
.game-rankings-detail .rankings-main{width:100%;max-width:none}
.game-rankings-detail .page-header .text-link{display:inline-flex;margin-top:4px;font-size:12px}
.game-rankings-detail .rankings-reaction-curve{max-width:none;margin:0 0 18px;padding:22px}
@media(max-width:700px){
 .rankings-game-links{grid-template-columns:1fr}
 .rankings-game-link{padding:15px;gap:10px}
 .game-rankings-detail .rankings-reaction-curve{padding:15px}
}

/* Combined competition, with game-specific rankings demoted to a secondary view. */
.rankings-combined-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:2px 0 16px}
.rankings-combined-heading h2{margin:0 0 7px;font-size:21px;letter-spacing:-.5px}
.rankings-combined-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.5;max-width:530px}
.rankings-date-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rankings-date-tools label{font-size:11px;color:var(--muted);font-weight:700}
.rankings-date-tools input,.rankings-date-tools button{font:inherit;font-size:12px;border:1px solid var(--line);
 background:var(--surface);color:var(--text);border-radius:9px;padding:9px 11px;min-height:37px}
.rankings-date-tools button{cursor:pointer;font-weight:750}
.rankings-date-tools :is(button,input):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Rankings boards retain their current height and content during async
   Daily/Global switching. Only the visible board's opacity transitions. */
.rankings-board-viewport{position:relative;min-height:330px}
.rankings-board-viewport>section{transition:opacity .16s ease}
.rankings-board-viewport>section.rankings-board-fading{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
 .rankings-board-viewport>section{transition:none}
}
.rankings-combined-board{background:transparent;border:0;
 border-radius:0;padding:0;box-shadow:none}
.rankings-board-columns{display:flex;justify-content:space-between;padding:9px 8px 10px;
 font-size:10px;letter-spacing:.9px;font-weight:750;color:var(--muted)}
.rankings-combined-list{margin:0!important;gap:3px}
.rankings-combined-list .rankings-combined-row{
 grid-template-columns:28px 30px minmax(0,1fr) max-content;
 padding:8px 8px!important;gap:12px}
.rankings-combined-player{display:flex;flex-direction:column;gap:4px;min-width:0}
.rankings-combined-player small{color:var(--muted);font-size:11px;line-height:1.4;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankings-combined-points{
 font-size:14px!important;letter-spacing:-.25px;text-align:right;
 justify-self:end;font-variant-numeric:tabular-nums
}
.rankings-board-summary{margin:14px 4px 0;color:var(--muted);font-size:11px}
.rankings-scoring-note{margin:16px 2px 23px;color:var(--muted);line-height:1.55;font-size:11px}
.rankings-single-games{border-top:1px solid var(--line);padding-top:19px;margin-top:15px}
.rankings-single-games h2{font-size:14px;margin:0 0 14px}
.rankings-single-games .rankings-game-link{box-shadow:none;padding:12px 14px;border-radius:12px}
.rankings-single-games .rankings-game-mark{width:38px;height:38px}
.rankings-single-games .rankings-game-link strong{font-size:13px}
.rankings-single-games .rankings-game-link small{font-size:11px}
@media(max-width:700px){
 .rankings-combined-heading{flex-direction:column;align-items:flex-start;gap:13px}
 .rankings-combined-board{padding:0}
 .rankings-combined-list .rankings-combined-row{
  grid-template-columns:22px 26px minmax(0,1fr) max-content;
  gap:8px;padding:8px 6px!important
 }
 .rankings-combined-player small{font-size:10px}
 .rankings-combined-points{font-size:12px!important}
 .rankings-date-tools{width:100%}
}

.tg-rank-self-label{font-size:9px;font-weight:800;letter-spacing:.55px;margin-left:7px;
 color:var(--accent);vertical-align:middle}
.tg-reaction-own-summary{width:100%;display:flex;justify-content:center;align-items:baseline;
 gap:5px;flex-wrap:wrap;color:var(--text);font-size:13px;margin:2px 0 4px}
.tg-reaction-own-summary strong{font-size:19px;font-weight:850;letter-spacing:-.5px}
.tg-reaction-percentile{color:var(--muted);font-size:12px;font-weight:650;margin-left:14px}
.tg-reaction-chart-modes{display:inline-flex;flex:none;padding:3px;border:1px solid var(--line);
 background:var(--surface-soft);border-radius:10px;gap:2px}
.tg-reaction-chart-modes button{background:transparent;border:0;cursor:pointer;color:var(--muted);
 font:inherit;font-size:11px;font-weight:750;padding:7px 10px;border-radius:7px;min-width:44px}
.tg-reaction-chart-modes button[aria-pressed="true"]{background:var(--surface);color:var(--text);
 box-shadow:0 1px 5px rgba(0,0,0,.1)}
.tg-reaction-chart-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:480px){
 .tg-reaction-chart-modes{margin-left:auto}
}

/* Personal standings follow the existing My Stats card design. */
.player-ranking-stat{gap:8px}
.player-ranking-stat .player-ranking-details{font-size:13px;font-weight:700;color:var(--text)}
.player-ranking-stat .player-ranking-percentile{font-size:12px;color:var(--muted)}
.player-ranking-stat .player-ranking-link{font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;margin-top:auto;padding-top:6px}


/* Shared slider across Rankings, Stats, pricing and game chart controls. */
.tg-segment{position:relative;isolation:isolate}
.tg-segment::before{content:"";position:absolute;left:0;top:3px;bottom:3px;
 width:var(--tg-segment-width,0px);transform:translateX(var(--tg-segment-x,0px));
 border-radius:8px;background:var(--surface);
 box-shadow:0 2px 8px rgba(0,0,0,.08);
 opacity:0;pointer-events:none;z-index:0;
 transition:transform 230ms cubic-bezier(.22,1,.36,1),
 width 230ms cubic-bezier(.22,1,.36,1),opacity 160ms ease}
.tg-segment.tg-segment-ready::before{opacity:1}
.tg-segment>button{position:relative;z-index:1;transition:color 170ms ease}
.tg-segment>button[aria-selected="true"],.tg-segment>button[aria-pressed="true"]{
 background:transparent!important;box-shadow:none!important;color:var(--text)}
.tg-segment>button[aria-selected="false"],.tg-segment>button[aria-pressed="false"]{background:transparent!important;box-shadow:none!important}
.player-ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.player-ranking-heading h2{margin:0}
.rankings-stats-switch{display:inline-flex;gap:3px;padding:3px;
 border:1px solid var(--line);background:var(--surface-soft);border-radius:10px}
.rankings-stats-switch button{border:0;background:transparent;border-radius:7px;
 padding:7px 11px;font-size:11px;font-weight:700;color:var(--muted)}
.rankings-stats-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.player-ranking-stat [role="tabpanel"]{display:flex;flex-direction:column;gap:8px;padding-top:7px}
.player-ranking-stat [role="tabpanel"][hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
 .tg-segment::before,.tg-segment>button{transition:none!important}
}

/* Three equal summary tiles, followed by a full-width best-game section. */
.page-stats .player-stat-cards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;align-items:stretch}
.page-stats .player-stat-card{min-width:0}
.page-stats .player-ranking-heading{align-items:flex-start}
.page-stats .rankings-stats-switch button{padding:7px 8px}
.page-stats .stats-top-games{margin-top:16px;padding:22px 23px;border:1px solid var(--line);
 border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.page-stats .stats-top-games[hidden],.page-stats .stats-top-games-list[hidden]{display:none!important}
.stats-top-games-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}
.stats-top-games-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.4px}
.stats-top-games-head button{border:0;background:none;color:var(--accent);font-weight:700;
 padding:5px;font-size:12px}
.stats-top-games-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.stats-performance-row{display:flex;align-items:center;min-width:0;transition:border-color .15s ease}
.stats-performance-name{display:flex;min-width:0;flex:1;flex-direction:column;gap:5px}
.stats-performance-name strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-performance-name small{color:var(--muted);font-size:10px}
.stats-performance-points{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stats-performance-empty{margin:0;color:var(--muted);font-size:13px;grid-column:1/-1}
@media(max-width:900px){
 .page-stats .player-stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-stats .player-ranking-stat{grid-column:1/-1}
 .stats-top-games-list{grid-template-columns:1fr}
}
@media(max-width:560px){
 .page-stats .player-stat-cards{grid-template-columns:1fr}
 .page-stats .player-ranking-stat{grid-column:auto}
}

/* Personal Statistics design API: same surface, geometry and icon identity
   for every game; the original game glyph is the only variable. */
.page-stats{
 --tg-stats-panel-radius:16px;
 --tg-stats-panel-padding:23px;
 --tg-stats-row-radius:11px;
 --tg-stats-icon-size:36px;
}
.page-stats :is(.player-stat-card,.stats-top-games){
 background:var(--surface);border:1px solid var(--line);
 border-radius:var(--tg-stats-panel-radius);
 padding:22px var(--tg-stats-panel-padding);
 box-shadow:var(--shadow);
}
.page-stats :is(.tg-stats-game-row){
 box-sizing:border-box;min-width:0;align-items:center;
 padding:11px 12px;gap:11px;
 background:color-mix(in srgb,var(--surface) 92%,var(--surface-soft));
 border:1px solid var(--line);border-radius:var(--tg-stats-row-radius);
 box-shadow:none;color:var(--text);
}
.page-stats .tg-stats-game-row:hover{
 background:var(--surface-soft);
 border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
}
.page-stats .stats-history-row{
 grid-template-columns:var(--tg-stats-icon-size) minmax(0,1fr) auto auto;
}
.page-stats .stats-performance-name strong,
.page-stats .stats-game-info strong{font-size:13px;font-weight:700;line-height:1.3}
.page-stats .stats-performance-name small,
.page-stats .stats-game-info time{font-size:11px;color:var(--muted)}
.page-stats .stats-performance-points,
.page-stats .stats-game-score{font-size:12px;font-weight:750;white-space:nowrap}
.page-stats .stats-history>h2,
.page-stats .stats-top-games-head h2{font-size:18px;letter-spacing:-.4px}
.page-stats .plus-feature-item-icon{
 display:grid;place-items:center;flex:0 0 32px;
 width:32px;height:32px;min-width:32px;
 padding:0;border-radius:9px;
 border:1px solid var(--line);background:var(--surface-soft);
 color:var(--muted);font-size:initial;
}
.page-stats .tg-stat-feature-mark{display:grid;place-items:center;width:22px;height:22px}
.page-stats .tg-stat-feature-mark svg{
 width:20px;height:20px;fill:none;stroke:currentColor;
 stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:700px){
 .page-stats{--tg-stats-panel-padding:17px}
 .page-stats .stats-history-row{
  grid-template-columns:var(--tg-stats-icon-size) minmax(0,1fr) auto;
 }
}