/* Arcade match screens. TOC layout and its measured sticky offsets live in style.css. */
.ready-page { color: var(--text-light); padding-bottom: 65px; }
.ready-page .back-link { color: var(--text-dim); }
.ready-page .back-link:hover { color: var(--yellow); }
.ready-page .centered-heading { margin-top: 24px; }
.ready-page .centered-heading .eyebrow { color: var(--yellow); }
.ready-page .centered-heading h1 { color: white; font-size: clamp(32px,4vw,49px); text-shadow: 0 4px 0 #020c20; }
.ready-page .centered-heading p { color: #bfd2e4; }
.ready-page .ready-cards { gap: 51px; margin-block: 42px 38px; }
.ready-page .playing-card { border: 3px solid #eaf4ff; border-radius: 20px; color: white; box-shadow: 0 8px 0 #020d20, 0 18px 30px #0005, inset 0 2px 0 #ffffff59; }
.ready-page .card-origin { background: linear-gradient(145deg,#1dadff 0%,#067bf4 45%,#0647cc 100%); }
.ready-page .card-target { background: linear-gradient(145deg,#ff776c 0%,#ff3349 45%,#d50b35 100%); }
.ready-page .playing-card::after { border-color: #fff4; background: #ffffff0b; }
.ready-page .playing-card-head { color: white; }
.ready-page .playing-card-art > .icon { color: white; stroke-width: 1.7; filter: drop-shadow(0 5px 0 #0002); }
.ready-page .playing-card-title { text-shadow: 0 3px 0 #0002; }
.ready-page .playing-card-bottom { border-top-color: #ffffff54; color: #fff; }
.ready-page .ready-between { color: #ccdfec; }
.ready-page .ready-between > .icon { color: var(--yellow); filter: drop-shadow(0 3px 0 #0005); }
.ready-page .ready-rules { color: #c5d7e9; }
.ready-page .source-chip { border-color: #3989c5; background: #06395f; color: #dcefff; }
.ready-page .source-chip.is-demo { border-color: #876b3e; background: #382e27; color: #ffe08c; }
.ready-page .ready-actions { margin-top: 29px; }
.ready-page .ready-actions .button-outline { background: #0b2d48; border-color: #41657e; color: white; box-shadow: 0 4px 0 #020d20; }
.ready-page .ready-footnote { color: #94abc2; }
.ready-page .demo-caption { color: #e1c688; }

.game-page { color: var(--text-light); padding-bottom: 45px; }
.game-hud { background: #061a30f7; border-bottom: 1px solid #214763; box-shadow: 0 6px 20px #0003; backdrop-filter: blur(12px); }
.hud-inner { padding-block: 13px; gap: 24px; }
.hud-journey { gap: 12px; }
.hud-point { min-height: 67px; padding: 10px 15px; border: 1px solid #55b8ff; border-radius: 13px; color: white; box-shadow: inset 0 2px 0 #ffffff26, 0 4px 0 #0003; }
.hud-point.origin { background: linear-gradient(135deg,#008cfb,#0756db); }
.hud-point.target { background: linear-gradient(135deg,#ff544f,#f42144); border-color: #ff9b90; }
.hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { width: 40px; height: 40px; background: #fffdf2; color: #0a61c7; border: 1px solid #ffffffb8; border-radius: 9px; box-shadow: 0 2px 3px #0002; }
.hud-point.target .hud-point-icon { color: #e0223d; }
.hud-point small { color: #ffffffeb; letter-spacing: .07em; font-size: 8px; font-weight: 700; }
.hud-point b { font-size: 18px; text-shadow: 0 1px 1px #0003; }
.hud-arrow { color: #c3d5e7; margin-inline: 0; }
.hud-stats { gap: 10px; }
.hud-stat { min-height: 65px; min-width: 112px; border: 1px solid #49dda4; border-radius: 12px; padding: 10px 16px; box-shadow: inset 0 2px 0 #ffffff40, 0 4px 0 #0003; }
.hud-stat.clicks-stat { color: #fff; background: linear-gradient(145deg,#0ac587,#009453); }
.hud-stat > span { flex-direction: column; gap: 4px; }
.hud-stat strong { font-size: 27px; }
.hud-stat small { font-size: 8px; letter-spacing: .06em; }
.hud-stat > .icon { width: 25px; height: 25px; stroke-width: 2; }
.hud-stat.time-stat, .hud-stat.time-stat.yellow { color: #132338; background: linear-gradient(135deg,#fff170,#ffd622); border-color: #ffe989; min-width: 145px; }
.time-stat.urgent { color: #6b1624; border-color: #ff6777; }
.game-meta { padding-top: 18px; padding-bottom: 17px; }
.game-meta > span:nth-child(2) { color: #9ab4cd; }
.game-meta .game-mode { border: 1px solid #426f93; background: #0c3558; color: #d1eaff; border-radius: 7px; }
.game-meta > .text-button { color: #c8e0f5; }
.game-meta > .text-button:hover { color: var(--yellow); }
.game-layout { gap: 22px; }

.article-sheet { background: #fffdf7; color: #182739; border: 1px solid #ffffffd9; border-radius: 15px; box-shadow: 0 6px 0 #010d1e, 0 10px 30px #0002; padding: 29px 34px 25px; }
.article-kicker { color: #60748a; font-size: 9px; }
.article-kicker > span:last-child { color: #2b5f85; }
.article-sheet h1 { color: #101f31; font-size: 42px; font-weight: 600; margin-top: 17px; }
.article-divider { border-color: #d7dde3; margin: 17px 0 21px; }
.wiki-content { color: #223044; font-size: 17px; line-height: 1.8; }
.wiki-content p { line-height: 1.85; }
.wiki-content a { color: #0868d2; text-decoration-color: #86b6e9; text-decoration-thickness: 1px; }
.wiki-content a:hover { background: #e5f0ff; color: #004fc1; text-decoration-color: currentColor; }
.wiki-content a:focus-visible { outline: 3px solid #0777e5; outline-offset: 3px; background: #e5f0ff; }
.wiki-content a:active { background: #ffea78; }
.wiki-content h2 { color: #16273b; border-color: #d6dde4; font-weight: 600; }
.wiki-content h3, .wiki-content h4, .wiki-content h5 { color: #1b2c41; }
.wiki-content blockquote { border-color: #7aadde; }
.wiki-content hr { border-color: #d4dce4; }
.wiki-content .wiki-table, .wiki-content .wiki-table td, .wiki-content .wiki-table th { border-color: #d2dce7; }
.wiki-content .wiki-table th { background: #eaf0f7; color: #192c43; }
.article-demo-note { color: #70532c; background: #fff3cd; border-color: #efdc9e; }
.article-attribution { color: #67778a; border-color: #d8e0e9; }
.article-attribution a { color: #386f9d; }
.article-busy { color: white; background: #075fd0; border: 1px solid #58a8ff; box-shadow: 0 4px 16px #0050bb33; }

.game-sidebar { color: #1b2a3e; }
.destination-card { background: linear-gradient(135deg,#ff4e4c,#e92148); color: white; border: 1px solid #ff938e; border-radius: 15px; padding: 19px; box-shadow: inset 0 2px 0 #ffffff33, 0 5px 0 #010d20; }
.destination-card > .eyebrow { color: #ffe7e6; font-size: 8px; }
.destination-icon { background: #fff7d2; color: #d93138; border: 3px solid #fff8e5; width: 65px; height: 65px; margin: 14px auto 11px; box-shadow: 0 4px 0 #a8192d55; }
.destination-icon .icon { width: 37px; height: 37px; stroke-width: 1.6; }
.destination-card h2 { color: white; font-size: 26px; text-shadow: 0 2px 0 #bd133077; }
.destination-card > span:last-child { color: #ffe4e6; font-size: 10px; line-height: 1.5; }
.game-sidebar .route-panel { background: #fffdf7; border: 1px solid white; border-radius: 14px; box-shadow: 0 5px 0 #010d20; margin-top: 19px; padding: 19px 16px; }
.game-sidebar .route-heading h2 { color: #17273c; font-size: 18px; }
.game-sidebar .route-heading > span { color: #61758b; font-size: 10px; }
.game-sidebar .route-list { margin-top: 20px; scrollbar-width: thin; scrollbar-color: #a7bacd transparent; }
.game-sidebar .route-list li { gap: 10px; padding-bottom: 19px; }
.game-sidebar .route-list li:last-child { padding-bottom: 0; }
.game-sidebar .route-list li::before { left: 14px; top: 28px; border-left: 2px dotted #a6b8c8; }
.game-sidebar .route-index { width: 30px; height: 30px; border: 2px solid white; background: #e5f0fd; color: #0b67bf; box-shadow: 0 0 0 1px #a2c7e8; }
.game-sidebar .route-list li:first-child .route-index { background: #087af1; color: white; box-shadow: 0 0 0 1px #087af1; }
.game-sidebar .route-list li:nth-child(even) .route-index { background: #fff0a5; color: #72590b; box-shadow: 0 0 0 1px #efd573; }
.game-sidebar .route-list li.current .route-index { background: #04b079; color: white; box-shadow: 0 0 0 1px #00a16f; }
.game-sidebar .route-list small { color: #74889b; font-size: 7px; }
.game-sidebar .route-list b { color: #22354b; font-size: 12px; }
.game-sidebar .current-dot { background: #00b878; width: 6px; height: 6px; box-shadow: 0 0 0 3px #d6f5e9; }
.game-tip { padding: 19px 12px; }
.game-tip > .icon { color: var(--yellow); }
.game-tip p { color: #9ebbd1; }
.game-tip b { color: #dfecf5; }

.article-toc { background: #fffdf7; color: #1f344c; border: 1px solid #fff; border-radius: 14px; box-shadow: 0 5px 0 #010d20; }
.toc-summary { color: #1a3049; font-size: 14px; }
.toc-summary:hover { background: #edf4fc; }
.toc-summary > .icon { color: #0879e8; }
.toc-summary:focus-visible { outline-color: #49a5ff; }
.toc-count { color: #73869a; font-size: 9px; }
.toc-details[open] > .toc-summary { border-bottom-color: #dce4ec; }
.article-toc nav { scrollbar-color: #a7bacd transparent; }
.toc-list ol { border-left-color: #d5e1ed; }
.toc-list a { color: #4c647e; font-size: 12px; border-radius: 6px; }
.toc-list ol a { font-size: 11px; }
.toc-list a:hover { background: #eaf3ff; color: #005ec7; }
.toc-list a[aria-current="location"] { background: #e2f0ff; color: #005cc0; box-shadow: inset 3px 0 0 #047dff; }
.toc-list a:focus-visible { outline: 2px solid #067af0; outline-offset: -2px; }
.game-error { background: #fff0d5; color: #69492b; border-color: #eac88a; }
.countdown-overlay { background: #05152bf5; color: white; }
.countdown-overlay small { color: #bed8ee; }
.countdown-overlay strong { color: var(--yellow); text-shadow: 0 8px 0 #ae6300; }
.countdown-overlay span { color: #9bbbd6; }

@media (min-width: 1200px) {
  .game-layout.has-toc { gap: 20px; }
  .game-layout.has-toc .article-sheet { padding-inline: 32px; }
  .game-layout.has-toc .destination-card { padding: 18px 15px; }
}

@media (max-width: 1000px) and (min-width: 661px) {
  .hud-inner { gap: 14px; }
  .hud-point { padding: 9px 11px; min-height: 64px; }
  .hud-point b { font-size: 15px; }
  .hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { width: 31px; height: 35px; }
  .hud-stat { min-width: 85px; padding: 10px; }
  .hud-stat.time-stat { min-width: 109px; }
  .hud-stat > .icon { width: 20px; height: 20px; }
}

@media (max-width: 850px) {
  .game-page { padding-bottom: 90px; }
  .mobile-game-bar { background: #061c31f7; color: #e6f2ff; border-top: 1px solid #295273; box-shadow: 0 -4px 22px #0003; backdrop-filter: blur(12px); }
  .mobile-game-bar button { color: #e6f2ff; border-radius: 8px; padding: 6px 8px; }
  .mobile-game-bar button:hover { background: #123d60; }
  .mobile-game-bar button > .icon { color: #79c6ff; }
  .mobile-game-bar b { color: #162a3c; background: var(--yellow); border-color: #fff074; }
}

@media (max-width: 660px) {
  .ready-page { padding-bottom: 35px; }
  .ready-page .centered-heading { margin-top: 21px; }
  .ready-page .centered-heading h1 { font-size: 33px; }
  .ready-page .ready-cards { gap: 12px; margin-block: 34px 28px; }
  .ready-page .playing-card { border-width: 2px; border-radius: 14px; }
  .ready-page .ready-between > .icon { width: 22px; height: 22px; }
  .ready-page .ready-rules { font-size: 10px; gap: 11px 15px; }
  .ready-page .ready-footnote { color: #a2bad0; }
  .hud-inner { padding-block: 10px; gap: 9px; }
  .hud-journey { gap: 6px; }
  .hud-point { min-height: 57px; gap: 7px; padding: 7px 9px; border-radius: 10px; }
  .hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { width: 29px; height: 32px; border-radius: 6px; }
  .hud-point-icon > .icon { width: 18px; height: 18px; }
  .hud-point b { font-size: 13px; }
  .hud-point small { font-size: 6px; letter-spacing: .05em; margin-bottom: 3px; }
  .hud-arrow { margin-inline: 2px; color: #b6d5ed; }
  .hud-arrow > .icon { width: 15px; height: 15px; }
  .hud-stats { gap: 9px; }
  .hud-stat, .hud-stat.time-stat { min-width: 0; min-height: 40px; padding: 7px 12px; border-radius: 9px; }
  .hud-stat > span, .hud-stat.time-stat > span { flex-direction: row; gap: 9px; }
  .hud-stat strong { font-size: 24px; }
  .hud-stat small { font-size: 7px; letter-spacing: .04em; }
  .hud-stat > .icon { width: 20px; height: 20px; }
  .game-meta { padding-top: 14px; padding-bottom: 13px; }
  .article-sheet, .game-layout.has-toc .article-sheet { padding: 22px 21px; border-radius: 12px; }
  .article-sheet h1 { font-size: 34px; margin-top: 15px; }
  .article-kicker { font-size: 7px; }
  .article-divider { margin: 15px 0 17px; }
  .wiki-content { font-size: 16px; }
  .wiki-content h2 { font-size: 25px; }
  .wiki-content h3 { font-size: 21px; }
  .article-toc { border-radius: 12px; }
  .toc-summary { font-size: 13px; min-height: 49px; }
  .toc-count { font-size: 9px; }
  .toc-list a { font-size: 12px; }
  .toc-list ol a { font-size: 11px; }
  .mobile-game-bar { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
}

@media (max-width: 359px) {
  .ready-page .centered-heading h1 { font-size: 29px; }
  .ready-page .ready-cards { gap: 8px; }
  .ready-page .ready-between > .icon { width: 16px; height: 16px; }
  .hud-point { padding-inline: 7px; gap: 5px; }
  .hud-point b { font-size: 11px; }
  .hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { width: 24px; height: 28px; }
  .article-sheet, .game-layout.has-toc .article-sheet { padding-inline: 17px; }
  .article-sheet h1 { font-size: 31px; }
  .wiki-content { font-size: 15px; }
}

/* Keep the article readable and the controls within a thumb's reach. */
.game-hud { top: 77px; }
.hud-point > span:last-child { min-width: 0; }
.article-sheet { min-width: 0; }
.mobile-article-index .toc-list a { color: #edf6ff; font-size: 15px; min-height: 46px; padding: 12px; }
.mobile-article-index .toc-list ol a { font-size: 14px; }
.mobile-article-index .toc-list a:hover,
.mobile-article-index .toc-list a[aria-current="location"] { color: #172c41; background: #ffe36b; }
.mobile-article-index .toc-list ol { border-color: #45647e; }
.toc-dialog .dialog-intro { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .in-game .site-header { display: none; }
  .game-hud { top: 0; padding-top: env(safe-area-inset-top); }
  .game-page { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .game-page > .shell, .game-hud > .shell { width: calc(100% - 20px); }
  .hud-inner { flex-wrap: wrap; gap: 7px; padding-block: 8px; }
  .hud-journey { flex-basis: 100%; gap: 7px; }
  .hud-point { min-height: 50px; padding: 7px 10px; gap: 8px; }
  .hud-point b { font-size: 14px; line-height: 1.3; }
  .hud-point small { font-size: 10px; line-height: 1.2; letter-spacing: .04em; margin-bottom: 3px; }
  .hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { width: 25px; height: 29px; flex-shrink: 0; }
  .hud-point-icon > .icon { width: 17px; height: 17px; }
  .hud-arrow { margin: 0; flex-shrink: 0; }
  .hud-arrow > .icon { width: 16px; height: 16px; }
  .hud-stats { flex-basis: 100%; gap: 7px; }
  .hud-stat, .hud-stat.time-stat { flex: 1; min-width: 0; min-height: 32px; padding: 4px 10px; gap: 7px; }
  .hud-stat > span, .hud-stat.time-stat > span { flex-direction: row; gap: 7px; align-items: baseline; }
  .hud-stat strong { font-size: 21px; line-height: 1; }
  .hud-stat small { font-size: 10px; line-height: 1.2; }
  .hud-stat > .icon { width: 18px; height: 18px; }
  .game-meta { padding-block: 4px; min-height: 46px; gap: 8px; }
  .game-meta .game-mode { font-size: 11px; padding: 6px 8px; }
  .game-meta > .text-button { min-height: 44px; font-size: 12px; padding-inline: 8px; }
  .game-layout.has-toc { grid-template-areas: "article"; }
  .game-layout.has-toc > .article-toc { display: none; }
  .article-sheet, .game-layout.has-toc .article-sheet { padding: 20px 16px; border-radius: 12px; }
  .article-sheet h1 { font-size: clamp(28px,7vw,36px); line-height: 1.15; margin-top: 12px; overflow-wrap: anywhere; }
  .article-kicker { font-size: 10px; letter-spacing: .04em; }
  .article-divider { margin-block: 14px 18px; }
  .wiki-content { font-size: 17px; line-height: 1.75; }
  .wiki-content p { line-height: 1.75; }
  .wiki-content h2 { font-size: 26px; }
  .wiki-content h3 { font-size: 22px; }
  .wiki-content .wiki-table { font-size: 15px; max-width: 100%; overscroll-behavior-x: contain; }
  .wiki-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .article-attribution { font-size: 12px; line-height: 1.65; }
  .article-demo-note { font-size: 12px; line-height: 1.6; }
  .mobile-game-bar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 5px max(10px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .mobile-game-bar button { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 48px; min-width: 0; gap: 4px; padding: 4px; font-size: 12px; line-height: 1.2; }
  .mobile-game-bar button > .icon { width: 20px; height: 20px; }
  .mobile-game-bar b { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 19px; padding: 2px 4px; font-size: 10px; }
  .mobile-game-bar button:disabled { opacity: .45; }
  .in-game .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .game-error { flex-wrap: wrap; font-size: 14px; }
  .game-error button { min-height: 44px; }
  .ready-page .ready-rules { font-size: 12px; line-height: 1.6; }
  .ready-page .ready-footnote, .ready-page .demo-caption { font-size: 12px; line-height: 1.65; }
  .ready-page .ready-actions .button { min-height: 48px; font-size: 16px; }
}

@media (max-width: 360px) {
  .hud-point { padding-inline: 8px; gap: 5px; }
  .hud-point-icon, .hud-point.origin .hud-point-icon, .hud-point.target .hud-point-icon { display: none; }
  .hud-point b { font-size: 14px; }
  .article-sheet, .game-layout.has-toc .article-sheet { padding-inline: 14px; }
}

@media (max-width: 850px) and (max-height: 500px) and (orientation: landscape) {
  .hud-inner { flex-wrap: nowrap; gap: 10px; }
  .hud-journey { flex-basis: auto; }
  .hud-stats { flex-basis: auto; flex-shrink: 0; }
  .hud-stat, .hud-stat.time-stat { min-height: 44px; padding-inline: 8px; }
  .hud-stat > .icon, .hud-stat small { display: none; }
  .hud-stat strong { font-size: 20px; }
  .mobile-game-bar button { min-height: 40px; flex-direction: row; gap: 8px; }
  .mobile-game-bar b { position: static; }
}