/* One game at a time; the bottom navigation stays within thumb reach. */
body { background: #151617; }
html { scroll-padding-bottom: 96px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.header, main { max-width: 960px; }
.header { grid-template-columns: minmax(0,1fr) 112px; gap: 8px; min-height: 68px; padding: 12px; }
.header { padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
.brand { font-size: 28px; max-width: none; padding: 0; }
.account { grid-column: 2; grid-row: 1; min-height: 44px; padding: 3px 7px; gap: 6px; font-size: 13px; }
.account canvas { width: 26px; height: 31px; }
.account span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account > svg { width: 12px; }
.tabs { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%; margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom,0px)); background: #151617; border-top: 1px solid #45494a; }
.tabs button { flex-direction: column; min-height: 54px; min-width: 0; padding: 6px 4px; gap: 3px; font-size: 12px; background: transparent; --pencil: #5c6263; }
.tabs button svg { width: 21px; height: 21px; }
.tabs button[aria-current] { background: #ff7518; color: #151617; --pencil: #ff7518; }
main { padding: 0 12px calc(96px + env(safe-area-inset-bottom,0px)); min-height: 0; }
.tabs, main { padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
.community { display: block; padding: 8px 0 16px; margin-bottom: 12px; border: 0; border-bottom: 1px solid #45494a; }
.community::after { display: none; }
.community-heading { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.community-heading h2 { display: block; font-size: 20px; line-height: 1.15; max-width: 25ch; }
.community-count { display: block; flex-shrink: 0; font-size: 19px; line-height: 1.2; text-align: right; }
.community-count > span:last-child { display: block; font-size: 11px; }
.community progress { height: 10px; margin: 10px 0 0; border-width: 2px; border-image-width: 2px; }
.community-bottom { display: block; margin-top: 5px; }
#community-status { font-size: 12px; font-weight: 600; margin: 0; text-align: left; color: #c8cece; }
.community[data-state="active"] .community-bottom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.community.points-added progress { animation: none; }
.section-title { margin: 18px 0 16px; align-items: center; }
.section-title h1 { font-size: 30px; padding: 0; }
.game-layout { grid-template-columns: minmax(0,1fr); gap: 10px; }
.game-stage { padding: 0; background: transparent; }
.game-stage::after { display: none; }
.stage-top { min-height: 60px; padding: 0 0 12px; gap: 10px; background: transparent; }
#game-select { min-width: 0; width: 100%; min-height: 48px; font-size: 18px; font-weight: 700; padding: 8px 10px; }
.tools { flex-shrink: 0; gap: 6px; }
.tools button, .icon-button { width: 44px; height: 44px; min-width: 44px; background: #242728; }
.tools button svg { width: 20px; height: 20px; }
.screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #869590; mask: var(--outline) center / 100% 100% no-repeat; -webkit-mask: var(--outline) center / 100% 100% no-repeat; }
.screen { aspect-ratio: 800/450; }
.game-overlay { padding: 12px; }
.game-overlay .primary { min-height: 48px; min-width: 110px; padding: 10px 18px; font-size: 18px; }
.scorebar { display: grid; grid-template-columns: repeat(auto-fit,minmax(44px,1fr)); gap: 6px; padding: 10px 8px; background: #202223; }
.scorebar > span { display: flex; flex-direction: column; align-items: center; font-size: 10px; gap: 1px; }
.scorebar strong { font: 700 24px/1.1 var(--display-font); margin: 0; font-variant-numeric: tabular-nums; }
.meter { height: 3px; }
.feedback { padding: 8px 0 0; font-size: 13px; }
.paused { inset: 60px 0 0; gap: 12px; padding: 12px; }
.paused h2 { font-size: 24px; }
.game-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 12px; padding: 2px 0; }
.record-summary { font-size: 13px; color: #c8cece; }
.record-summary strong { font: 700 23px/1 var(--display-font); color: #ffcf00; margin-left: 7px; }
.game-summary .mode { max-width: none; padding: 0; margin: 0; font-size: 12px; color: #c8cece; }
.save-feedback { grid-column: 1/-1; margin: 0; font-size: 13px; }
.save-feedback p:empty { display: none; }
.text-button, .subtle { min-height: 44px; }
.quiz { padding: 16px 8px; min-height: 300px; background: #202223; }
.quiz-cover { width: 120px; height: 120px; margin: 24px auto; }
.quiz-podium { grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 16px; }
.quiz-portret { width: min(240px,100%); margin: auto; }
.quiz .answers button { min-height: 48px; font-size: 19px; }
.quiz h3 { font-size: 24px; }
.rank-filter { padding-bottom: 12px; }
.rank-filter select { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; }
.rank-empty { min-height: 190px; }
.rank-podium { min-height: 0; gap: 8px; padding: 0 2px 6px; margin: 18px auto 22px; }
.podium-entry canvas { width: 66px; height: 77px; }
.podium-entry strong { font-size: 14px; }
.podium-points { font-size: 12px; margin-bottom: 8px; }
.podium-step { height: 34px; }
.podium-step span { font-size: 28px; }
.podium-entry[data-place="1"] .podium-step { height: 66px; }
.podium-entry[data-place="2"] .podium-step { height: 50px; }
.rank-list-head { gap: 12px; margin-bottom: 8px; }
.rank-list-head h2 { font-size: 22px; }
.rank-list-head p { font-size: 12px; }
th, td { padding: 10px 4px; }
th:first-child { width: 42px; }
th:last-child { width: 66px; }
th { font-size: 10px; }
td:first-child { font-size: 22px; }
td:last-child { font-size: 28px; }
.rank-person { gap: 8px; }
.rank-person > span { font-size: 15px; }
.rank-avatar { width: 42px; height: 49px; }
.avatar-editor { grid-template-columns: minmax(0,1fr); gap: 20px; }
.avatar-preview { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 18px; position: relative; top: 0; padding: 0 0 16px; background: transparent; border-bottom: 1px solid #45494a; }
.avatar-preview::after { display: none; }
.avatar-preview canvas { width: 84px; max-width: 100%; }
.avatar-preview strong { display: block; font-size: 24px; margin: 0; text-align: left; }
#avatar-level { max-width: 28ch; margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.avatar-effects { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.avatar-effects label { padding: 8px 4px 12px; }
.avatar-effects label.is-locked { cursor: not-allowed; }
.avatar-effects label.is-locked canvas { opacity: .45; }
.avatar-effects .unlock-level { color: inherit; font-size: 12px; font-weight: 700; }
.avatar-effects input { top: 8px; left: 8px; }
.avatar-effects canvas { max-width: 70px; }
.avatar-effects span { font-size: 13px; min-height: 34px; display: grid; place-items: center; }
.avatar-editor fieldset { margin-bottom: 20px; }
.avatar-details { border-top: 1px solid #45494a; border-bottom: 1px solid #45494a; }
.avatar-details summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; font-weight: 700; cursor: pointer; }
.avatar-details summary::-webkit-details-marker { display: none; }
.avatar-details summary:focus-visible { outline: 3px solid #00b8ff; outline-offset: 3px; }
.avatar-details[open] summary svg { transform: rotate(180deg); }
.avatar-details-content { padding: 12px 0 20px; }
.avatar-swatches input { width: 44px; height: 44px; }
.avatar-editor select { max-width: none; min-height: 48px; }
.avatar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.avatar-actions .primary { margin: 0; }
#avatar-status { margin-top: 10px; min-height: 20px; }
dialog { max-height: calc(100dvh - 32px); overflow: auto; padding: 24px 20px; }
input, select { font-size: 16px; background-color: #242728; }
@media (min-width:700px) {
  .header, main { padding-left: max(24px,env(safe-area-inset-left,0px)); padding-right: max(24px,env(safe-area-inset-right,0px)); }
  .community { padding-top: 4px; padding-bottom: 20px; margin-bottom: 20px; }
  .community-heading h2 { max-width: none; font-size: 24px; }
  .community-count { display: flex; align-items: baseline; font-size: 22px; gap: 5px; }
  .community-count > span:last-child { font-size: 13px; }
  #game-select { max-width: 340px; }
  .scorebar strong { font-size: 28px; }
  .scorebar > span { font-size: 12px; }
  .quiz-podium { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .quiz-portret { width: min(320px,100%); }
  .quiz { padding: 24px; }
  .rank-filter select { max-width: 340px; }
  .rank-podium { max-width: 560px; }
  .podium-entry canvas { width: 90px; height: 105px; }
  .podium-entry strong { font-size: 17px; }
  th, td { padding: 12px; }
  th:first-child { width: 72px; }
  th:last-child { width: 100px; }
  .rank-avatar { width: 54px; height: 63px; }
  .rank-person > span { font-size: 17px; }
  .avatar-editor { grid-template-columns: minmax(200px,.7fr) minmax(0,1.3fr); gap: 32px; }
  .avatar-preview { display: flex; flex-direction: column; border: 0; position: sticky; top: 24px; }
  .avatar-preview canvas { width: 180px; }
  .avatar-preview strong { text-align: center; }
  #avatar-level { text-align: center; margin-inline: auto; }
  .avatar-effects canvas { max-width: 90px; }
}
@media (min-width:900px) {
  html { scroll-padding-bottom: 24px; }
  .header { grid-template-columns: minmax(0,1fr) auto 140px; gap: 16px; padding: 20px 24px; }
  .brand { font-size: 32px; }
  .account { grid-column: 3; min-height: 48px; font-size: 14px; }
  .tabs { position: static; grid-column: 2; grid-row: 1; width: auto; gap: 6px; padding: 0; border: 0; }
  .tabs button { min-height: 48px; padding: 8px 12px; font-size: 13px; flex-direction: row; gap: 6px; }
  .tabs button svg { width: 18px; height: 18px; }
  main { padding-bottom: 40px; }
}