/* #165: intro, play, results and dialogs. The #164 shell owns the palette. */
body:not(.is-home){
  --bg:var(--ranksen-bg);
  --panel:var(--ranksen-surface);
  --panel2:var(--ranksen-surface-secondary);
  --text:var(--ranksen-text);
  --muted:var(--ranksen-muted);
  --line:var(--ranksen-line);
  background:var(--ranksen-bg);
}
body.is-ugc-publication #creatorEntry,body.is-ugc-publication #remixTopic{display:none!important}
html:has(body:not(.is-home)){background:var(--ranksen-bg)}
body:not(.is-home) .app-shell{padding-inline:var(--ranksen-shell-padding-mobile)}
body:not(.is-home) .eyebrow{color:var(--ranksen-quiet);font-size:11px;letter-spacing:.12em}
body:not(.is-home) .text-button{color:var(--ranksen-muted);min-height:44px}
body:not(.is-home) .text-button:hover{color:var(--ranksen-text)}

/* One button foundation for play and result actions. */
.screen:not(#homeScreen) .primary,.screen:not(#homeScreen) .secondary,
.direct-share .primary,.direct-share .secondary{
  min-height:48px;border-radius:var(--ranksen-radius-medium);
  padding:12px 16px;font-weight:800;letter-spacing:.025em;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.screen:not(#homeScreen) .primary,.direct-share .primary{
  border:1px solid var(--ranksen-accent);background:var(--ranksen-accent);
  color:var(--ranksen-bg);
}
.screen:not(#homeScreen) .secondary,.direct-share .secondary{
  border:1px solid var(--ranksen-line-strong);
  background:var(--ranksen-surface-secondary);color:var(--ranksen-text);
}
.screen:not(#homeScreen) .primary:hover,.direct-share .primary:hover{background:var(--ranksen-accent-hover);border-color:var(--ranksen-accent-hover)}
.screen:not(#homeScreen) .secondary:hover,.direct-share .secondary:hover{border-color:var(--ranksen-focus);background:var(--ranksen-surface)}
.screen:not(#homeScreen) .primary:disabled,.direct-share .primary:disabled,
.screen:not(#homeScreen) .secondary:disabled,.direct-share .secondary:disabled{opacity:.42;cursor:default}
.screen:not(#homeScreen) button:focus-visible,.direct-share button:focus-visible,
.bracket-dialog button:focus-visible,
.bracket-viewport:focus-visible{outline:2px solid var(--ranksen-focus);outline-offset:3px}

/* Topic introduction */
#introScreen .hero.compact{padding:12px 0 0}
#introScreen .hero h1{max-width:850px;font-size:clamp(34px,7vw,58px);line-height:1.02;
  letter-spacing:-.045em;font-weight:850;text-transform:none;overflow-wrap:anywhere}
#introScreen .hero p{margin:12px 0 0;color:var(--ranksen-muted);font-size:15px;line-height:1.5}
#introScreen .start-panel{margin-top:20px;padding:18px;border:1px solid var(--ranksen-line);
  border-radius:var(--ranksen-radius-card);background:var(--ranksen-surface);box-shadow:0 14px 34px rgba(0,0,0,.12)}
#introScreen .chips{margin:0 0 16px;gap:7px}
#introScreen .chip{border:1px solid var(--ranksen-line);border-radius:var(--ranksen-radius-pill);
  background:var(--ranksen-surface-secondary);color:var(--ranksen-muted)}
.topic-tags{display:flex;flex-wrap:wrap;gap:6px 8px;max-width:100%;margin:12px 0 0}
.topic-tags[hidden]{display:none}
.topic-tags .topic-tag{display:inline-flex;align-items:center;justify-content:center;min-width:0;
  min-height:44px;max-width:100%;padding:9px 12px;border:1px solid var(--ranksen-line);
  border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface-secondary);color:var(--ranksen-muted);
  font-size:13px;font-weight:750;line-height:1.3;text-align:center;text-decoration:none;white-space:normal;
  overflow-wrap:anywhere;transition:border-color .16s ease,background-color .16s ease,color .16s ease}
#introScreen .topic-tag:hover,.topic-tag:hover{border-color:var(--ranksen-focus);
  background:var(--ranksen-surface);color:var(--ranksen-text);text-decoration:underline;text-underline-offset:3px}
#introScreen .topic-tag:active,.topic-tag:active{background:var(--ranksen-accent-subtle)}
#introScreen .topic-tag:focus-visible,.topic-tag:focus-visible{outline:2px solid var(--ranksen-focus);
  outline-offset:3px;border-color:var(--ranksen-focus);color:var(--ranksen-text)}
#introScreen .format-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;margin-bottom:16px;gap:6px}
#introScreen .run-length-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:-4px 0 16px;gap:6px}
#introScreen .format-switch[hidden],#introScreen .run-length-switch[hidden]{display:none}
#introScreen .format-option,#introScreen .run-length-option{border:1px solid var(--ranksen-line-strong);
  background:var(--ranksen-surface-secondary);color:var(--ranksen-text);
  border-radius:var(--ranksen-radius-medium);font-weight:800;letter-spacing:.045em;
  min-width:0;cursor:pointer;text-transform:uppercase}
#introScreen .format-option{min-height:50px;padding:10px 12px;font-size:13px;
  line-height:1.15;text-align:center}
#introScreen .run-length-option{min-height:42px;padding:8px 7px;font-size:10px;
  line-height:1.25}
#introScreen .format-option[aria-pressed="true"],#introScreen .run-length-option[aria-checked="true"]{
  border-color:var(--ranksen-accent);background:var(--ranksen-accent-subtle);color:var(--ranksen-text);
  box-shadow:inset 0 0 0 1px var(--ranksen-accent)}
#introScreen .format-option:hover,#introScreen .run-length-option:hover{border-color:var(--ranksen-focus)}
#introScreen .format-option:focus-visible,#introScreen .run-length-option:focus-visible{
  outline:2px solid var(--ranksen-focus);outline-offset:2px}

/* Shared Bracket / This or That play presentation */
#gameScreen .game-tournament-title{color:var(--ranksen-quiet);margin:6px 0 8px}
#gameScreen .game-head{margin:4px 0 12px}
#gameScreen .game-head .eyebrow{margin-bottom:5px}
#gameScreen .game-objective-question{color:var(--ranksen-text);font-weight:850}
#gameScreen .round-title,#gameScreen .round-count{color:var(--ranksen-muted)}
#gameScreen .bracket-trigger{min-height:38px;border:1px solid var(--ranksen-line-strong);
  border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface-secondary);
  color:var(--ranksen-muted);padding:8px 12px}
#gameScreen .bracket-trigger:hover{border-color:var(--ranksen-focus);color:var(--ranksen-text)}
#gameScreen .bracket-trigger:disabled{opacity:.38}
#gameScreen .progress-wrap{margin-bottom:12px}
#gameScreen .progress-wrap.is-linear{gap:0}
#gameScreen .progress-wrap.is-linear .progress-segment{flex:1}
#gameScreen .progress-segment{border-color:var(--ranksen-line);background:var(--ranksen-surface-subtle);box-shadow:none}
#gameScreen .progress-fill{background:var(--ranksen-accent)}
#gameScreen .player-card{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-card);
  background:var(--ranksen-surface);box-shadow:0 10px 24px rgba(0,0,0,.15)}
#gameScreen .player-card:hover{border-color:var(--ranksen-focus)}
#gameScreen .player-card.selected{border-color:var(--ranksen-accent)!important;
  box-shadow:0 0 0 2px var(--ranksen-accent),0 10px 24px rgba(0,0,0,.2)}
#gameScreen .player-card.dimmed{opacity:.4!important;box-shadow:none}
#gameScreen .player-name{font-weight:850}
#gameScreen .player-meta{color:var(--ranksen-muted)}
#gameScreen .pick-label{border-color:var(--ranksen-line-strong);border-radius:var(--ranksen-radius-pill);
  background:rgba(6,14,23,.84);color:var(--ranksen-text)}
#gameScreen .vs{border-color:var(--ranksen-bg);background:var(--ranksen-surface);
  color:var(--ranksen-muted);box-shadow:0 0 0 1px var(--ranksen-line)}
#gameScreen .fallback,.winner-card .fallback,.blind-current .fallback{
  color:var(--ranksen-muted);background:linear-gradient(150deg,var(--ranksen-surface),var(--ranksen-surface-secondary))}
.round-splash{background:rgba(6,14,23,.96)}

/* The bracket retains its draw and viewport behavior. */
.bracket-dialog{background:var(--ranksen-surface-secondary);color:var(--ranksen-text)}
.bracket-modal{background:var(--ranksen-surface-secondary)}
.bracket-dialog-head,.mobile-round-tabs{border-color:var(--ranksen-line);background:var(--ranksen-surface)}
.bracket-dialog-stage,.bracket-match-label{color:var(--ranksen-muted)}
.bracket-close,.mobile-round-tab{min-height:44px;border-color:var(--ranksen-line-strong);
  border-radius:var(--ranksen-radius-pill);background:var(--ranksen-surface-secondary);color:var(--ranksen-muted)}
.bracket-close:hover,.mobile-round-tab:hover{border-color:var(--ranksen-focus);color:var(--ranksen-text)}
.bracket-round,.bracket-mobile-panel{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-card);
  background:var(--ranksen-surface)}
.bracket-round.is-current,.bracket-mobile-panel.is-emphasized{border-color:var(--ranksen-accent);
  box-shadow:inset 0 3px 0 var(--ranksen-accent)}
.bracket-match{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-medium);
  background:var(--ranksen-surface-secondary)}
.bracket-match.is-champion,.mirror-final-match{border-color:var(--ranksen-accent);box-shadow:none}
.bracket-slot{color:var(--ranksen-text)}
.bracket-slot+.bracket-slot,.bracket-match-label{border-color:var(--ranksen-line)}
.bracket-slot.is-winner{background:var(--ranksen-accent-subtle);color:var(--ranksen-text)}
.bracket-winner-mark,.mirror-column.is-current .mirror-column-head h3,
.mirror-center.is-current .mirror-column-head h3{color:var(--ranksen-accent)}
.mobile-round-tab[aria-selected="true"]{border-color:var(--ranksen-accent);
  background:var(--ranksen-accent-subtle);color:var(--ranksen-text)}
.mobile-round-tab.is-current{box-shadow:0 0 0 1px var(--ranksen-accent)}
.mirror-center{border-color:var(--ranksen-line-strong);background:var(--ranksen-surface-subtle)}
.mirror-center.is-current,.mirror-column.is-current{box-shadow:inset 0 3px 0 var(--ranksen-accent)}
.mirror-column.is-current{border-color:var(--ranksen-accent)}
.mirror-champion{border-color:var(--ranksen-accent);background:var(--ranksen-accent-subtle);box-shadow:none}
.mirror-champion .bracket-match-label{color:var(--ranksen-accent)}
.mirror-champion .bracket-slot{color:var(--ranksen-text)}
.mirror-champion::before{border-color:var(--ranksen-accent)}
.mirror-final-match .bracket-match-label{color:var(--ranksen-accent)}
.mirror-column .bracket-slot.is-winner,.mirror-center .bracket-slot.is-winner{
  box-shadow:inset 3px 0 0 var(--ranksen-accent)}
.bracket-stage-progress .is-complete,.bracket-stage-progress .is-current{color:var(--ranksen-text)}
.bracket-stage-progress .is-complete .bracket-stage-dot,
.bracket-stage-progress .is-current .bracket-stage-dot{border-color:var(--ranksen-accent);
  background:var(--ranksen-accent);box-shadow:none}
.bracket-stage-progress .is-complete::after{background:var(--ranksen-accent)}

/* Live and frozen results deliberately share the same card and path styles. */
#winnerScreen .winner-card,#savedResultScreen .winner-card{
  border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-card);background:var(--ranksen-surface)}
.winner-utilities{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  min-height:48px;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--ranksen-line);background:var(--ranksen-surface-secondary)}
.winner-utility{display:inline-flex;align-items:center;min-height:44px;padding:8px 9px;
  border:1px solid var(--ranksen-line);background:var(--ranksen-surface);cursor:pointer;
  border-radius:var(--ranksen-radius-pill);color:var(--ranksen-muted);font-size:10px}
.winner-utility[hidden],.winner-utility-separator:has(+.winner-utility[hidden]){display:none}
.winner-utility:hover{border-color:var(--ranksen-line-strong);color:var(--ranksen-text);text-decoration:none}
.winner-utility:disabled{opacity:.4;cursor:default}
.winner-utility-separator{display:none}
.winner-visual{background:var(--ranksen-surface-secondary)}
.winner-copy{left:20px;right:20px;bottom:20px}
.winner-kicker{color:var(--ranksen-text);font-weight:850}
.winner-name{font-weight:850;overflow-wrap:anywhere}
.winner-meta{color:var(--ranksen-muted)}
.winner-actions{gap:10px;padding:16px}
.winner-next{display:grid;gap:8px;border-color:var(--ranksen-accent);background:var(--ranksen-accent);
  color:var(--ranksen-bg);padding:16px;box-shadow:none;text-align:left}
.winner-next:hover{border-color:var(--ranksen-accent-hover);background:var(--ranksen-accent-hover);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.winner-next-label{font-size:11px;letter-spacing:.08em}
.winner-next-title{font-size:clamp(19px,4vw,24px);line-height:1.15;font-weight:850;text-transform:none}
.winner-share-actions{display:grid;gap:9px}
#winnerScreen .secondary.rage-bait{border-color:#a34b61;background:#45202e;color:#ffe9ed;box-shadow:none}
#winnerScreen .secondary.rage-bait:hover{border-color:#cf6c81;background:#572738}
.winner-other{justify-self:center;min-height:44px;border:0;background:none;
  padding:9px 10px;cursor:pointer;color:var(--ranksen-muted);font-size:11px;
  font-weight:800;letter-spacing:.08em}
.winner-other:hover{color:var(--ranksen-text)}
#winnerScreen .journey,#savedResultScreen .journey{border-color:var(--ranksen-line);
  border-radius:var(--ranksen-radius-card);background:var(--ranksen-surface-secondary)}
.journey h3{color:var(--ranksen-text);font-weight:800}
.journey-row{border-color:var(--ranksen-line);color:var(--ranksen-muted)}
.journey-row span:last-child{color:var(--ranksen-text)}
.journey.is-streak .journey-row span:first-child{color:var(--ranksen-muted)}
.recommendations{border-color:var(--ranksen-line)}
.recommendations-head h2{color:var(--ranksen-text);font-weight:850;text-transform:none}
.recommendation-card{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-card);
  background:var(--ranksen-surface);box-shadow:none;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.recommendation-card:hover{border-color:var(--ranksen-focus)}
.recommendation-slot{color:var(--ranksen-accent)}
.recommendation-category,.recommendation-meta{color:var(--ranksen-muted)}
.recommendation-title{font-weight:850;text-transform:none}
.recommendation-list:has(>.recommendation-card:only-child){grid-template-columns:1fr}
#savedResultScreen .saved-topic-title{font-weight:850;text-transform:none}
#savedResultScreen .saved-result-state{margin:30px auto 0;padding:24px;
  border:1px solid var(--ranksen-line);border-radius:var(--ranksen-radius-card);
  background:var(--ranksen-surface);text-align:center}
#savedResultScreen .saved-state-heading{font-weight:850;text-transform:none}
#savedResultScreen .saved-result-state p{color:var(--ranksen-muted)}
#savedResultScreen .saved-credits{color:var(--ranksen-muted)}
#savedResultScreen:has(#savedResultContent[hidden]) #savedHomeBtn{
  display:block;width:min(100%,320px);margin:12px auto 0;
  border:1px solid var(--ranksen-line-strong);border-radius:var(--ranksen-radius-medium);
  background:var(--ranksen-surface-secondary);color:var(--ranksen-text);text-align:center}

/* Direct result actions inherit the shared quiet button surfaces. */

/* Local-only Blind fixture inherits the button foundation and card palette. */
.blind-current{border-color:var(--ranksen-line);border-radius:var(--ranksen-radius-card);
  background:var(--ranksen-surface)}
.blind-sticky-current,.blind-slot{border-color:var(--ranksen-line-strong);
  border-radius:var(--ranksen-radius-medium);background:var(--ranksen-surface);
  color:var(--ranksen-text)}
.blind-slot[aria-pressed="true"]{border-color:var(--ranksen-accent);
  background:var(--ranksen-accent-subtle);box-shadow:inset 0 0 0 1px var(--ranksen-accent)}
.blind-slot.is-free{background:var(--ranksen-surface);border-color:var(--ranksen-line-strong)}
.blind-slot.is-confirmed,.blind-slot.is-confirmed:disabled{background:#292343;border-color:#8d75dc;color:var(--ranksen-text);opacity:1}
.blind-slot.is-confirmed .blind-slot-rank,.blind-slot.is-confirmed .blind-slot-check{color:#c9b6ff}
.blind-slot.is-confirmed .blind-slot-status{font-weight:800}
.blind-slot.is-tentative,.blind-slot.is-tentative[aria-pressed="true"]{background:#392b63;border:2px solid #bd9cff;box-shadow:0 0 0 2px rgba(189,156,255,.25),inset 0 0 0 1px #bd9cff}
.blind-slot:focus-visible{outline:2px solid var(--ranksen-focus);outline-offset:2px}
.blind-complete{color:var(--ranksen-text)}

@media(min-width:760px){
  body:not(.is-home) .app-shell{padding-inline:24px}
  #introScreen .format-switch{width:min(100%,540px)}
  #introScreen .run-length-switch{width:min(100%,460px)}
  .journey.is-streak #journey{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .journey.is-streak .journey-row:nth-child(2){border-top:0}
}
@media(min-width:520px){.winner-share-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){
  #introScreen .hero h1{font-size:clamp(32px,10vw,43px)}
  #gameScreen .bracket-trigger{min-height:44px}
  #gameScreen .player-card{min-height:300px}
  #winnerScreen .winner-visual,#savedResultScreen .winner-visual{min-height:350px}
  #winnerScreen .winner-name,#savedResultScreen .winner-name{font-size:clamp(30px,9vw,39px)}
  .winner-utilities{justify-content:center}
  .winner-utility{padding-inline:8px;font-size:10px}
  .winner-actions{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .screen:not(#homeScreen) .primary,.screen:not(#homeScreen) .secondary,
  .direct-share .primary,.direct-share .secondary,.winner-next,
  .player-card,.bracket-transition,.round-splash,.bracket-trigger,
  .direct-share,.blind-current,.blind-slot{transition:none!important;animation:none!important}
}