/* Online flows extend the game's existing visual world; the HS skin inherits below. */
/* These portals share the same visible, safe rectangle as the board. */
body > #online, body > #collection-library, body > #share-screen { inset: auto; left: var(--viewport-left, 0px); top: var(--viewport-top, 0px); width: var(--viewport-width, 100vw); height: var(--viewport-height, 100dvh); }
#online .online-wrap, #share-screen .share-wrap { padding: 20px 24px; }
body > #overlay { position: fixed; inset: auto; left: var(--stage-center-x, 50%); top: var(--stage-center-y, 50%); width: 1600px; height: var(--stage-source-height, 900px); transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); z-index: 1500; }
#mobile-controls { display: none; }
.inspect-panel { width: min(820px, 100%); padding: 24px; background: #281a0e; color: #f6e5c5; border: 1px solid #a8834a; border-radius: 12px; }
.inspect-panel header, .inspect-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inspect-content { display: flex; align-items: center; gap: 30px; padding: 24px 0; }
.inspect-art { flex: none; width: 230px; padding: 24px 15px; }
.inspect-copy { flex: 1; min-width: 0; font: 16px/1.55 var(--body); }
.inspect-copy .ceo-tooltip { width: 100%; border: 0; box-shadow: none; padding: 0; }
#overlay .inspect-copy h2 { font: 400 30px/1.2 'HS Belwe', Georgia, serif; color: #ffe3a1; text-align: left; text-shadow: none; margin-bottom: 16px; }
.inspect-copy p { margin: 12px 0; }
.inspect-stats { color: #cfe6ff; }
.inspect-flavor, .inspect-instruction { color: #ddc9a5; font-size: 14px; line-height: 1.5; }
.inspect-instruction { margin: 12px 0 0; }
.overlay-clock { color: #ffe3a1; font: 22px 'HS BelweNumbers', Georgia, serif; font-variant-numeric: tabular-nums; }
@media (max-width: 900px), (max-height: 520px) {
  body > #overlay { left: var(--viewport-left, 0px); top: var(--viewport-top, 0px); width: var(--viewport-width, 100vw); height: var(--viewport-height, 100dvh); transform: none; padding: 16px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; align-items: flex-start; background: rgba(25,15,7,.97); scrollbar-color: #a8834a #1b120b; }
  body > #overlay.show { display: block; }
  #overlay > .mull, #overlay > .choice, #overlay > .pause, #overlay > .gameover, #overlay > .inspect-panel { margin: auto; max-width: 100%; flex: none; }
  #overlay h2 { font-size: 26px; }
  #overlay .sub { font-size: 15px; line-height: 1.4; }
  #overlay button { min-height: 44px; font-size: 16px; }
  #overlay .versus { gap: 18px; margin-bottom: 14px; }
  #overlay .vs-side { gap: 5px; }
  #overlay .vs-portrait { position: relative; width: 65px; height: 82px; }
  #overlay .vs-portrait > .h-art { position: absolute; left: 0; top: 0; transform: scale(.5); transform-origin: top left; }
  #overlay .vs-side b { font-size: 16px; }
  #overlay .vs-side span { font-size: 13px; }
  #overlay .vs-mid { font-size: 26px; }
  #overlay .picks { flex-wrap: wrap; gap: 20px; margin: 14px 0 20px; }
  #overlay .mull .confirm { flex: none; margin-bottom: 8px; }
  #overlay .pick { animation: none; }
  #overlay .pick .card, #overlay .pick .card.big { transform: none; margin: 12px; }
  #overlay .pause { padding: 20px; width: min(460px, 100%); }
  #overlay .settings { min-width: 0; width: 100%; }
  #overlay .settings label { gap: 16px; font-size: 15px; }
  #overlay .buttons { flex-wrap: wrap; justify-content: center; }
  #overlay .gameover h1 { font-size: 44px; }
  #overlay .go-portrait .h-art { width: 100px; height: 100px; }
  #overlay .gameover p { font-size: 16px; line-height: 1.5; text-align: center; margin-bottom: 16px; }
  #overlay .inspect-panel { padding: 16px; }
  #overlay .inspect-panel header { position: sticky; top: 0; z-index: 3; background: #281a0e; padding-block: 8px; }
  #overlay .inspect-content { align-items: flex-start; padding: 20px 0; gap: 20px; }
  #overlay .inspect-panel footer { flex-wrap: wrap; justify-content: center; }
  #overlay .inspect-art { width: 210px; padding-inline: 5px; }
  .match-active .orientation-hint { display: none; }
  .match-active #mobile-controls { position: fixed; left: var(--control-left); top: var(--control-top); width: var(--control-width); height: var(--control-height); z-index: 1100; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; color: #f6e5c5; scrollbar-color: #a8834a #1b120b; }
  #mobile-controls[hidden], #mobile-controls [hidden] { display: none !important; }
  .overlay-open #mobile-controls { visibility: hidden; }
  #mobile-controls button { min-height: 44px; flex: none; width: 100%; padding: 5px 4px; border: 1px solid #a8834a; border-radius: 7px; background: #332213; color: #ffe3a1; font: 400 14px/1.2 'HS Belwe', Georgia, serif; touch-action: manipulation; }
  #mobile-controls button:disabled { opacity: .48; cursor: default; }
  #mobile-controls button:focus-visible { outline: 3px solid #ffe3a1; outline-offset: -3px; }
  #mobile-controls .mobile-vitals { font: 12px/1.4 var(--body); white-space: pre-line; border-color: #75572e; }
  .hs-skin #mobile-controls .mobile-end-turn { background: url(hs/endturn_yellow.webp) center / contain no-repeat; border: 0; color: #33210b; text-shadow: 0 1px #ffe3a1; font-size: 12px; white-space: nowrap; }
  .hs-skin #mobile-controls .mobile-end-turn.done { background-image: url(hs/endturn_green.webp); }
  .hs-skin #mobile-controls .mobile-end-turn:disabled { background-image: url(hs/endturn_gray.webp); color: #f6e5c5; text-shadow: 0 1px #130b05; opacity: 1; }
  #mobile-controls .mobile-actions { display: flex; flex-direction: column; gap: 4px; }
  #mobile-controls:not(.mobile-portrait) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  #mobile-controls:not(.mobile-portrait) .mobile-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mobile-controls:not(.mobile-portrait) .mobile-actions [data-mobile=end] { grid-column: 1 / -1; }
  #mobile-controls:not(.mobile-portrait) .mobile-clock, #mobile-controls:not(.mobile-portrait) .mobile-match-status { grid-column: 1 / -1; }
  #mobile-controls .mobile-clock { text-align: center; font: 20px/1.2 'HS BelweNumbers', Georgia, serif; font-variant-numeric: tabular-nums; }
  #mobile-controls .clock-urgent { color: #ffb4a6; }
  #mobile-controls .mobile-match-status { font: 12px/1.35 var(--body); overflow-wrap: anywhere; }
  #mobile-controls .mobile-rotate { display: none; }
  #mobile-controls.mobile-portrait { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-content: start; align-items: center; gap: 4px 8px; overflow: auto; }
  #mobile-controls.mobile-portrait [data-mobile=opponent] { grid-column: 1; grid-row: 1; }
  #mobile-controls.mobile-portrait [data-mobile=self] { grid-column: 3; grid-row: 1; }
  #mobile-controls.mobile-portrait .mobile-clock { grid-column: 2; grid-row: 1; font-size: 16px; pointer-events: none; }
  #mobile-controls.mobile-portrait .mobile-actions { grid-column: 1 / -1; flex-direction: row; }
  #mobile-controls.mobile-portrait .mobile-actions button { flex: 1; width: 0; min-width: 0; }
  #mobile-controls.mobile-portrait .mobile-match-status { grid-column: 1 / -1; }
  #mobile-controls.mobile-portrait .mobile-rotate { position: fixed; display: block; left: var(--board-viewport-left); top: var(--board-viewport-top); width: var(--board-viewport-width); margin: 14px 0; padding-inline: 16px; text-align: center; pointer-events: none; color: #ddc9a5; font: 14px/1.5 var(--body); }
  #stage.in-game .menu-btn, #stage.in-game .hint-btn, #stage.in-game .sprint-clock, #stage.in-game .online-match-info { visibility: hidden; }
}
@media (max-width: 520px) and (orientation: portrait) {
  #overlay .inspect-content { flex-direction: column; align-items: center; }
  #overlay .inspect-copy { width: 100%; }
  #overlay .ceo-tooltip-head { flex-wrap: wrap; }
}
#public-info { position: fixed; inset: 0; z-index: 0; overflow: auto; padding: max(60px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom)); background: #1b120b url(hs/table.webp) center / cover fixed; color: #f6ecd6; text-align: center; user-select: text; scrollbar-color: #a8834a #1b120b; }
#public-info > * { max-width: 760px; margin-inline: auto; }
#public-info h1 { margin-top: 0; margin-bottom: 18px; color: #ffe3a1; font: 400 clamp(30px,5vw,44px)/1.2 'HS Belwe',Georgia,serif; text-wrap: balance; }
#public-info p { max-width: 68ch; margin-block: 0 16px; color: #e3d2b1; font: 16px/1.65 var(--body); }
.online-wrap > #public-info { position: static; inset: auto; padding: 24px 0 8px; width: min(760px,100%); margin: 0 auto 28px; overflow: visible; background: none; text-align: center; }
.online-wrap > #public-info h1 { font-size: 28px; margin-bottom: 16px; }
.public-guide-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; }
.public-guide-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 2px; color: #ddc9a5; font: 14px/1.5 var(--body); text-decoration: underline; text-underline-offset: 4px; }
.public-guide-links a:hover { color: #ffe3a1; }
.public-guide-links a:focus-visible { outline: 3px solid #ffe3a1; outline-offset: 3px; border-radius: 3px; }
.menu-guide-links { position: absolute; left: 24px; bottom: 18px; justify-content: start; }
@media (max-width: 900px), (max-height: 520px) {
  .title .menu-guide-links { position: static; flex: none; margin: 12px auto 0; justify-content: center; }
}
#share-screen { position: fixed; inset: 0; z-index: 3500; overflow: auto; overscroll-behavior: contain; background: #1b120b url(hs/table.webp) center / cover fixed; color: #f6ecd6; user-select: text; scrollbar-color: #a8834a #1b120b; }
.share-wrap { min-height: 100%; display: flex; flex-direction: column; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 25%, rgba(15,8,3,.35), rgba(15,8,3,.9)); }
.share-header { width: min(1140px,100%); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.share-back { justify-self: start; }
.share-wordmark { color: #ffe3a1; text-decoration: none; font: 22px/1.2 'HS Belwe', Georgia, serif; }
.share-main { width: min(880px,100%); margin: 28px auto 36px; flex: 1; min-width: 0; }
.share-main h1 { margin: 0 0 24px; text-align: center; color: #ffe3a1; font: 400 clamp(30px,4vw,44px)/1.2 'HS Belwe', Georgia, serif; text-shadow: 0 4px 10px #000; text-wrap: balance; }
.share-card-preview { position: relative; overflow: hidden; border-radius: 12px; background: #21160d; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.share-card-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: contain; }
.share-image-error { padding: 18px; color: #ffe3a1; font: 16px/1.5 var(--body); }
.share-post-text { max-width: 68ch; margin: 22px auto; text-align: center; color: #e3d2b1; font: 16px/1.6 var(--body); overflow-wrap: anywhere; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px; }
.share-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border-radius: 9px; border: 1px solid #a8834a; background: linear-gradient(180deg,#4e351d,#2b1c0f); color: #f5e6c5; font: 18px/1.2 'HS Belwe', Georgia, serif; text-decoration: none; box-shadow: inset 0 0 0 2px rgba(12,7,2,.35),0 4px 9px rgba(0,0,0,.35); text-shadow: 0 1px 2px #160c03; }
.share-actions a.primary { color: #2a1908; border-color: #f4cf76; background: linear-gradient(180deg,#dfbe64,#ad7b2f); font-size: 20px; text-shadow: 0 1px 0 rgba(255,243,187,.45); }
.share-actions a:hover { filter: brightness(1.12); }
.share-actions button:disabled { opacity: .6; cursor: wait; }
.share-status { min-height: 24px; margin: 16px 0 8px; text-align: center; color: #ffe3a1; font: 15px/1.6 var(--body); }
.share-link-label { display: block; width: min(620px,100%); margin-inline: auto; color: #e3d2b1; font: 14px/1.5 var(--body); }
.share-link-input { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 12px; border: 1px solid #a8834a; border-radius: 8px; background: #1b1007; color: #f6ecd6; font: 14px/1.5 var(--body); caret-color: #ffe3a1; }
.share-help, .share-footer { color: #ddc9a5; text-align: center; font: 14px/1.6 var(--body); }
.share-help { margin: 12px 0 0; }
#share-screen :focus-visible { outline: 3px solid #ffe3a1; outline-offset: 4px; }
#share-screen ::selection { color: #241707; background: #ffd166; }
.gameover .share-result { min-width: 260px; margin-bottom: 18px; }
@media (max-width: 540px) {
  .share-wrap { padding-inline: 16px; }
  .share-header { grid-template-columns: auto 1fr auto; gap: 12px; }
  .share-wordmark { justify-self: center; font-size: 17px; }
  .share-main { margin-top: 28px; }
  .share-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .share-actions .share-x { grid-column: 1 / -1; }
  .share-actions .share-native { grid-column: 1 / -1; }
  .share-actions a, .hs-skin .share-actions button.ghost { padding: 12px 10px; font-size: 17px; }
  .profile-buttons { flex-wrap: wrap; }
}
#online { position: fixed; inset: 0; z-index: 2000; display: none; overflow: auto; overscroll-behavior: contain; background: #0a1124; color: #e9eef7; user-select: text; scrollbar-color: #8b6a39 #0a1124; }
#online.show { display: block; }
.online-wrap { min-height: 100%; display: flex; flex-direction: column; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.online-header { width: min(1140px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.online-back { justify-self: start; }
.online-language { justify-self: end; }
.online-wordmark { font: 700 22px/1 var(--head); letter-spacing: .05em; color: var(--gold); text-decoration: none; }
.online-main { width: min(1140px, 100%); margin: 30px auto 36px; flex: 1; min-width: 0; }
.online-main h1 { margin: 0 0 28px; font: 700 clamp(32px, 4vw, 48px)/1.12 var(--head); text-align: center; color: #ffe3a1; text-wrap: balance; }
.online-main h2 { margin: 0 0 16px; font: 700 23px/1.2 var(--head); color: #ffe3a1; }
.online-intro { font-size: 16px; line-height: 1.65; color: #c5d2e8; margin: 0 0 24px; max-width: 68ch; }
.online-panel { padding: 28px; border-radius: 16px; background: #121e38; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.online-auth { width: min(440px, 100%); margin: 0 auto; }
.auth-form { display: flex; flex-direction: column; gap: 0; }
#online label { display: block; color: #f6ecd6; font-size: 16px; line-height: 1.5; font-weight: 600; }
#online input { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid #7486ad; border-radius: 8px; background: #080e1d; color: #fff; font: 400 16px/1.4 var(--body); caret-color: var(--gold); margin-top: 7px; user-select: text; }
#online input::placeholder { color: #aab9d2; opacity: 1; }
#online .field-help { margin: 7px 0 22px; color: #b8c7df; font-size: 14px; line-height: 1.5; }
#online .primary, #online .ghost { min-height: 46px; font-size: 17px; }
#online .primary:disabled, #online .ghost:disabled, #online .text-button:disabled { cursor: wait; opacity: .55; }
#online :focus-visible { outline: 3px solid #ffe3a1; outline-offset: 4px; }
#online ::selection { color: #241707; background: #ffd166; }
.password-field { display: flex; position: relative; }
.password-field input { padding-inline-end: 84px !important; }
.password-toggle { position: absolute; inset-inline-end: 5px; top: 12px; height: 35px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; font: 600 14px var(--body); color: #ffe3a1; }
.password-toggle:hover { background: rgba(255,255,255,.08); }
.online-message { margin: 0; font-size: 15px; line-height: 1.6; color: #ffbab6; overflow-wrap: anywhere; }
.online-message:not(:empty) { margin: 0 0 18px; }
.auth-submit { width: 100%; }
.auth-switch { margin: 24px 0 12px; font-size: 15px; line-height: 1.6; text-align: center; color: #c5d2e8; }
.text-button { border: 0; background: transparent; padding: 6px 2px; color: #ffe3a1; font: 600 15px/1.4 var(--body); text-decoration: underline; text-underline-offset: 4px; }
.auth-solo { display: block; width: 100%; }
.online-footer { font-size: 14px; line-height: 1.5; color: #b8c7df; text-align: center; }
.online-profile { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 0 0 24px; margin-bottom: 28px; border-bottom: 1px solid #465477; }
.online-profile > div { min-width: 0; }
.online-profile strong { display: block; font: 700 24px/1.3 var(--head); color: #ffe3a1; overflow-wrap: anywhere; }
.online-profile span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.online-profile small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #b8c7df; }
.profile-buttons { display: flex; gap: 20px; align-items: center; flex-shrink: 0; }
.online-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 36px; align-items: start; }
.online-ceo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.online-ceo { min-width: 0; padding: 15px 8px 13px; border: 1px solid #53658d; border-radius: 12px; color: #fff; background: #121e38; display: flex; flex-direction: column; align-items: center; transition: border-color .15s, background-color .15s; }
.online-ceo:hover { border-color: #ffe3a1; background-color: #1e2b49; }
.online-ceo.selected { border: 2px solid var(--gold); padding: 14px 7px 12px; background-color: #243352; }
.online-ceo:disabled { cursor: default; }
.online-ceo .h-art { width: 80px; height: 80px; margin-bottom: 9px; overflow: hidden; border-radius: 50%; flex: none; }
.online-ceo .h-art svg { width: 100%; height: 100%; }
.online-ceo span { display: block; font: 700 15px/1.4 var(--head); text-align: center; overflow-wrap: anywhere; }
.online-ceo small { display: block; font-size: 12px; line-height: 1.5; color: #c5d2e8; }
.online-hero-style { margin-top: 22px; min-height: 92px; }
.online-hero-style strong { font: 700 20px/1.4 var(--head); color: #ffe3a1; }
.online-hero-style p { font-size: 15px; line-height: 1.6; color: #c5d2e8; margin: 8px 0 0; }
.online-match-actions .primary, .online-match-actions > .ghost { display: block; width: 100%; }
.online-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px; font-size: 14px; color: #c5d2e8; }
.online-divider::before, .online-divider::after { content: ''; height: 1px; background: #53658d; flex: 1; }
.join-form { margin-top: 18px; }
.join-form > div { display: flex; align-items: end; gap: 8px; }
.join-form input { width: 50% !important; flex: 1; text-transform: uppercase; letter-spacing: .1em; }
.join-form button { padding-inline: 18px; }
.online-connection { color: #b8c7df; font-size: 13px; line-height: 1.6; margin: 22px 0 0; }
.online-play-panel .online-message { margin-top: 18px; margin-bottom: 0; }
.online-wait { text-align: center; }
.online-wait p { color: #c5d2e8; line-height: 1.65; font-size: 16px; }
.online-wait strong { display: block; color: #ffe3a1; font: 700 44px/1.4 var(--head); font-variant-numeric: tabular-nums; margin: 22px 0; }
.online-wait .room-code { letter-spacing: .1em; font-size: 38px; }
.online-wait button { display: block; width: 100%; margin-top: 12px; }
.leaderboard-screen { max-width: 1100px; margin: 0 auto; width: 100%; }
.leaderboard-screen .online-intro { margin-inline: auto; text-align: center; }
.leaderboard-content { min-height: 180px; margin: 30px 0; }
.leaderboard-scroll { overflow-x: auto; border-block: 1px solid #53658d; }
#online table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; font-variant-numeric: tabular-nums; }
#online th, #online td { padding: 18px 16px; text-align: start; border-bottom: 1px solid #3c4969; }
#online thead th { color: #ffe3a1; font-size: 14px; }
#online tbody th { font-weight: 600; max-width: 250px; overflow-wrap: anywhere; }
#online tr.is-me { background: rgba(255,209,102,.12); }
#online tbody tr:last-child > * { border-bottom: 0; }
#online tbody small { color: #b8c7df; }
.leaderboard-return { display: block; margin-inline: auto; }
.online-empty { text-align: center; padding: 40px 16px; }
.online-empty p { color: #c5d2e8; line-height: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.title-buttons { top: 510px; gap: 10px; }
.title-buttons .ghost { padding-block: 10px; }
.corner [data-go="online"] { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-match-info { position: absolute; left: 24px; top: 24px; max-width: 550px; padding: 12px 18px; border-radius: 12px; color: #f6ecd6; background: rgba(10,16,34,.94); font: 600 19px/1.4 var(--head); overflow-wrap: anywhere; }
.online-match-info.connection-warning { color: #ffe3a1; }
.sprint-clock { position: absolute; left: 1387px; top: 340px; width: 150px; text-align: center; font: 700 32px/1.4 var(--head); color: #ffe3a1; font-variant-numeric: tabular-nums; pointer-events: none !important; }
.sprint-clock.clock-urgent { color: #ff9d91; }
.online-match-info[hidden], .sprint-clock[hidden] { display: none; }
.orientation-hint { display: none; }
.hs-skin #online { background: #1b120b url(hs/table.webp) center / cover fixed; color: #f6ecd6; scrollbar-color: #a8834a #1b120b; }
.hs-skin .online-wrap { background: radial-gradient(ellipse at 50% 25%, rgba(15,8,3,.18), rgba(15,8,3,.85)); }
.hs-skin .online-wordmark, .hs-skin .online-main h1, .hs-skin .online-main h2, .hs-skin .online-profile strong, .hs-skin .online-ceo span, .hs-skin .online-hero-style strong, .hs-skin .online-wait strong { font-family: 'HS Belwe', Georgia, serif; font-weight: 400; }
.hs-skin .online-main h1 { text-shadow: 0 4px 10px #000; }
.hs-skin .online-panel { background: linear-gradient(180deg, rgba(58,36,16,.96), rgba(30,18,8,.97)); border: 2px solid #a8834a; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.6); }
.hs-skin #online input { background: #1b1007; border-color: #a8834a; }
.hs-skin #online input::placeholder { color: #c8b393; }
.hs-skin .online-intro, .hs-skin .online-footer, .hs-skin #online .field-help, .hs-skin .auth-switch, .hs-skin .online-profile small, .hs-skin .online-ceo small, .hs-skin .online-hero-style p, .hs-skin .online-divider, .hs-skin .online-connection, .hs-skin .online-wait p, .hs-skin .online-empty p { color: #e3d2b1; }
.hs-skin .online-profile, .hs-skin .leaderboard-scroll { border-color: #a8834a; }
.hs-skin #online th, .hs-skin #online td { border-color: #715431; }
.hs-skin .online-ceo { background: linear-gradient(180deg, rgba(58,36,16,.9), rgba(26,16,7,.95)); border-color: #8b6a39; }
.hs-skin .online-ceo.selected { border-color: #ffd36b; background: #4a3115; }
.hs-skin .online-ceo:hover { border-color: #ffd36b; }
.hs-skin .online-divider::before, .hs-skin .online-divider::after { background: #8b6a39; }
.hs-skin .online-match-info { background: rgba(30,18,8,.94); font-family: 'HS Belwe', Georgia, serif; border: 1px solid #a8834a; }
.hs-skin .sprint-clock { font-family: 'HS BelweNumbers', 'HS Belwe', serif; text-shadow: 0 2px 4px #000; }
.hs-skin #online .primary { padding: 18px 28px; font-size: 19px; }
.hs-skin #online .ghost { padding: 14px 24px; font-size: 17px; }
.hs-skin .title-buttons { top: 490px; gap: 5px; }
.hs-skin .title-buttons button.ghost { padding-block: 13px; }
@media (max-width: 900px) {
  .online-lobby { gap: 24px; grid-template-columns: 1fr; }
  .online-play-panel { max-width: 600px; width: 100%; margin: 0 auto; }
  .online-ceo-grid { max-width: 680px; margin: 0 auto; }
  .online-heroes h2 { text-align: center; }
  .online-hero-style { max-width: 680px; margin-inline: auto; }
  .online-profile { gap: 16px; }
  .profile-buttons { flex-direction: column; gap: 2px; }
}
@media (max-width: 540px) {
  .online-wrap { padding-inline: 16px; }
  .online-header { grid-template-columns: auto 1fr auto; gap: 8px; }
  .online-wordmark { font-size: 16px; text-align: center; letter-spacing: 0; }
  #online .online-back { padding-inline: 16px; }
  .online-main { margin-top: 28px; }
  .online-main h1 { margin-bottom: 22px; }
  .online-panel { padding: 22px 18px; }
  .online-profile { flex-direction: column; align-items: start; }
  .profile-buttons { flex-direction: row; gap: 18px; width: 100%; justify-content: space-between; }
  .online-ceo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .online-ceo { min-height: 158px; }
  .online-ceo span { font-size: 17px; }
  .online-ceo small { font-size: 14px; }
  .online-wait .room-code { font-size: 34px; }
  #online th, #online td { padding: 15px 12px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .match-active .orientation-hint { position: fixed; left: 20px; right: 20px; bottom: max(24px, env(safe-area-inset-bottom)); display: block; text-align: center; color: #f6ecd6; font: 500 15px/1.6 var(--body); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .online-ceo { transition: none; }
}
/* Menus use the viewport on compact screens; the playing board keeps its canvas. */
@media (max-width: 900px), (max-height: 520px) {
  #stage:not(.in-game) { left: var(--viewport-left, 0px); top: var(--viewport-top, 0px); width: var(--viewport-width, 100vw); height: var(--viewport-height, 100dvh); transform: none !important; }
  #stage:not(.in-game) .menu-screen { overflow-y: auto; padding-bottom: 28px; }
  .menu-screen.title { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 105px 20px 80px; }
  .title .logo { position: relative; left: auto; top: auto; transform: none; width: 100%; }
  .title .logo-mark { font-size: 40px; }
  .title .logo h1 { font-size: clamp(35px, 9vw, 78px); letter-spacing: 1px; }
  .hs-skin .title .logo h1 { font-size: clamp(42px, 10vw, 86px); letter-spacing: 1px; -webkit-text-stroke-width: 1px; }
  .title .logo h2, .hs-skin .title .logo h2 { font-size: clamp(16px, 3.7vw, 26px); letter-spacing: 2px; line-height: 1.4; }
  .title .tagline { max-width: 540px; font-size: 16px; line-height: 1.6; margin-top: 16px; }
  .title .title-buttons, .hs-skin .title .title-buttons { position: relative; left: auto; top: auto; transform: none; margin: 28px 0 0; gap: 8px; width: min(360px, 100%); }
  .title-buttons button { min-height: 46px; width: 100%; }
  .title-buttons button.primary.big, .hs-skin .title-buttons button.primary.big { font-size: 24px; padding: 22px 28px; }
  .title .corner { inset: 14px 14px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .title .chip { font-size: 14px; min-height: 38px; padding: 8px 12px; }
  .title .credits { position: relative; bottom: auto; margin-top: 24px; font-size: 12px; line-height: 1.5; max-width: 560px; color: #b9c6e2; }
  .back { top: 16px; left: 16px; min-height: 44px; }
  .screen-title { font-size: 32px; margin: 85px 16px 24px; line-height: 1.2; }
  .select-wrap { display: block; height: auto; padding-inline: 20px; }
  .ceo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .ceo { min-width: 0; }
  .ceo-art .h-art { width: 100px; height: 100px; }
  .side { margin-top: 28px; }
  .ceo-detail { padding: 18px; }
  .cd-head { flex-wrap: wrap; gap: 14px; }
  .cd-head h3 { font-size: 26px; }
  .cd-head > div { min-width: 0; }
  .setup { padding: 20px 16px; }
  .setup label { flex-wrap: wrap; }
  .setup select { min-width: 0; width: 100%; font-size: 16px; min-height: 44px; }
  .segs { flex-wrap: wrap; }
  .seg { min-height: 44px; }
  .setup .start { width: 100%; }
  .tabs { padding-inline: 16px; gap: 8px; }
  .tab { min-height: 40px; }
  .gallery { position: relative; top: auto; inset-inline: auto; margin-top: 18px; padding-inline: 12px; overflow: visible; grid-template-columns: repeat(auto-fill, 150px); }
  .zoom { position: fixed; overflow: auto; padding: 24px; }
  .zoom-inner { flex-direction: column; gap: 25px; }
  .zoom-inner > .card { transform: none; margin: 0; flex: none; }
  .zoom-side { max-width: 100%; }
  .howto { display: block; height: auto; padding-inline: 20px; }
  .rules { overflow: visible; padding: 16px 20px; }
  .glossary { overflow: visible; margin-top: 24px; }
  .credits-screen .cr-intro { margin-inline: 20px; font-size: 16px; line-height: 1.6; }
  .cr-list { height: auto; overflow: visible; padding-inline: 20px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hs-skin .title .credits { color: #e3d2b1; }
}
@media (max-width: 540px) {
  .ceo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ceo-grid > :last-child:nth-child(odd), .online-ceo-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 14px) / 2); justify-self: center; }
  .ceo-art .h-art { width: 120px; height: 120px; }
  .menu-screen.select .cd-sig {
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #a8834a #21160d;
  }
  .menu-screen.select .cd-sig .mini { flex: none; }
  .glossary, .cr-list { grid-template-columns: 1fr; }
}

/* Keep wide controls within the game's wood-and-gold panel system. */
.hs-skin .title-buttons { width: 340px; gap: 12px; top: 490px; }
.hs-skin .title-buttons .primary,
.hs-skin .title-buttons .ghost { width: 100%; min-width: 0; min-height: 48px; padding: 10px 24px; }
.hs-skin .title-buttons .primary.big { min-height: 64px; padding: 14px 28px; }
.hs-skin #online .primary { padding: 12px 22px; font-size: 20px; min-height: 50px; }
.hs-skin #online .ghost { padding: 10px 18px; font-size: 18px; min-height: 46px; }
.oauth-providers { display: flex; flex-direction: column; gap: 10px; }
.oauth-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid #a8834a; border-radius: 8px; background: #342313; color: #f6ecd6; font: 600 16px/1.4 var(--body); text-decoration: none; }
.oauth-button:hover { border-color: #f0cf82; background: #49321b; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: #ddc9a5; font-size: 14px; }
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #806039; }
@media (max-width: 900px), (max-height: 520px) {
  .hs-skin .title .title-buttons { width: min(340px,100%); gap: 12px; }
  .hs-skin .title .title-buttons .primary.big { font-size: 24px; padding: 14px 26px; }
  .hs-skin .title .title-buttons .ghost { padding: 10px 22px; }
}