/* Compact additions to the existing FastDraw layout. */
.growth-button, .lobby-links button, .level-pill, .progress-summary {
  font: inherit; cursor: pointer; color: #eaf6ff; border: 1px solid #89d5ff57;
  background: linear-gradient(180deg,#13558b,#0b3964); border-radius: 12px;
  box-shadow: inset 0 1px #ffffff15, 0 2px 3px #00182b26;
}
.growth-button { min-height: 44px; padding: 9px 17px; font-size: 13px; font-weight: 750; }
.growth-button:hover, .lobby-links button:hover, .progress-summary:hover, .level-pill:hover { filter: brightness(1.12); }
.growth-button:focus-visible, .lobby-links button:focus-visible, .progress-summary:focus-visible, .level-pill:focus-visible, .growth-close:focus-visible { outline: 3px solid #ffe38e; outline-offset: 3px; }
.growth-button.primary { color: #43320c; background: linear-gradient(#fff1a4,#f6c84a); border-color: #fff0af; }
.growth-button:disabled { cursor: default; opacity: .5; }
.level-pill { display: flex; align-items: center; gap: 6px; padding: 7px 10px; min-height: 44px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.level-pill svg { width: 19px; height: 21px; color: #f9d575; }
.level-pill span { display: block; }
.lobby-links { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.lobby-links button { flex: 1 1 120px; min-height: 44px; padding: 8px; font-size: 12px; font-weight: 750; }
.progress-summary { display: grid; gap: 6px; width: 100%; text-align: left; padding: 11px 13px; }
.progress-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.progress-line strong { color: #ffe393; font-size: 16px; }
.progress-line span { font-size: 12px; color: #d3e5f4; }
.progress-summary small { font-size: 11px; color: #c0dbef; }
.xp-bar { display: block; appearance: none; -webkit-appearance: none; border: 0; width: 100%; height: 7px; border-radius: 20px; overflow: hidden; background: #001f3c; }
.xp-bar::-webkit-progress-bar { background: #001f3c; border-radius: 20px; }
.xp-bar::-webkit-progress-value { background: linear-gradient(90deg,#5fcaed,#caedff); border-radius: 20px; }
.xp-bar::-moz-progress-bar { background: linear-gradient(90deg,#5fcaed,#caedff); border-radius: 20px; }
.settings-pop .growth-button { width: 100%; margin-top: 7px; }
.growth-dialog [hidden], .lobby-links [hidden], .settings-pop [hidden], .growth-notice[hidden] { display: none !important; }
.pscore { display: grid; gap: 1px; line-height: 1.2; }
.player-points { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-level { display: block; color: #315a70; font-size: 10px; white-space: nowrap; }
.growth-dialog { width: min(440px, calc(100vw - 28px)); padding: 24px; border: 1px solid #8ccfff85; border-radius: 24px; color: #eff7ff; background: radial-gradient(ellipse at top,#1d5a88,transparent 70%),#072846; box-shadow: 0 22px 80px #00162877,inset 0 1px #ffffff26; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.growth-dialog::backdrop { background: #001b3cb5; backdrop-filter: blur(8px); }
.growth-dialog h2 { font-size: 26px; line-height: 1.12; margin: 6px 28px 22px 0; letter-spacing: -.5px; }
.growth-eyebrow { font-size: 10px; color: #ffe092; text-transform: uppercase; letter-spacing: 1.8px; font-weight: 800; margin: 0; }
.growth-close { position: absolute; top: 13px; right: 13px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #a5ddff40; border-radius: 12px; background: #041e3888; color: #eef8ff; cursor: pointer; }
.growth-close svg { width: 18px; height: 18px; }
.guide-steps { padding: 0; margin: 0 0 20px; list-style: none; counter-reset: steps; display: grid; gap: 16px; }
.guide-steps li { counter-increment: steps; position: relative; padding-left: 46px; }
.guide-steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; color: #ffdf87; border: 1px solid #9acbef44; border-radius: 11px; background: #0a345b; font-weight: 850; }
.guide-steps strong { display: block; font-size: 15px; margin-bottom: 3px; }
.guide-steps p, .growth-dialog .growth-copy { color: #cadeee; font-size: 13px; line-height: 1.5; margin: 0; }
.guide-callout { padding: 12px 14px; border: 1px solid #91cfff30; border-radius: 12px; background: #0b3b61; font-size: 12px; line-height: 1.5; color: #e0eff8; margin: 14px 0 20px; }
.growth-dialog .progress-summary { margin-bottom: 16px; cursor: default; }
.xp-rules { display: grid; gap: 10px; margin: 18px 0; }
.xp-rules div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #b8dfff22; padding-bottom: 10px; font-size: 13px; }
.xp-rules strong { color: #ffe092; white-space: nowrap; }
.growth-dialog > .growth-button { width: 100%; }
.growth-notice { position: fixed; z-index: 160; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 28px); border: 1px solid #94d5ff91; border-radius: 14px; padding: 12px 18px; color: #f2f8ff; background: #062c50f5; box-shadow: 0 8px 28px #00172f55; text-align: center; font-size: 13px; font-weight: 750; pointer-events: none; }
.match-growth { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 10px; }
.match-xp { color: #bde9ff; font-size: 11px; text-align: left; }
.match-growth .growth-button { min-height: 40px; padding: 7px 12px; font-size: 11px; }
.result-card-preview { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 17px; margin: 15px 0; border: 1px solid #d8edff40; }
.result-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.result-card-actions button { flex: 1; }
.invite-link-label { display: block; color: #bddbf0; font-size: 11px; margin: 22px 0 7px; }
.invite-link { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #bce5ff60; border-radius: 11px; background: #041f39; color: #eaf7ff; font: 13px var(--ui, sans-serif); }
.growth-inline-status { min-height: 18px; margin: 9px 0 0; font-size: 12px; color: #d7ecfa; }
#result-card-status { margin: 10px 0; font-size: 11px; color: #c3dced; }
@media(max-width: 480px) {
  .growth-dialog { padding: 21px; border-radius: 21px; }
  .growth-dialog h2 { font-size: 24px; }
  .match-growth { grid-template-columns: 1fr; gap: 5px; }
  .match-xp { text-align: center; }
  .player-level { font-size: 9px; }
}
@media(max-width: 700px) {
  html.game-active .player { flex-basis: 164px; min-width: 164px; grid-template-columns: 24px minmax(0,1fr) 46px; gap: 5px; }
}
@media(max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  html.game-active.keyboard-open .player { flex-basis: 146px; min-width: 146px; grid-template-columns: 20px minmax(0,1fr) 34px; }
  html.game-active.keyboard-open .pscore { display: flex; flex-wrap: wrap; column-gap: 4px; row-gap: 0; font-size: 8px; }
  html.game-active.keyboard-open .player-level { font-size: 8px; }
}