.hidden { display: none !important; }

.multiplayer-link {
  display: grid;
  place-items: center;
  width: 52px;
  color: var(--gold-soft);
  font: 700 10px/1 "DM Sans", sans-serif;
  text-decoration: none;
}

.online-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 0 26px;
}

.online-topbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.online-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9fb2a6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58c994;
  box-shadow: 0 0 0 5px rgba(88, 201, 148, .1);
}

.solo-link {
  justify-self: end;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.entry-view {
  min-height: calc(100vh - 145px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(36px, 8vw, 110px);
  padding: 52px clamp(10px, 5vw, 70px) 75px;
}

.entry-copy h1 {
  margin: 12px 0 22px;
  font: 600 clamp(54px, 7vw, 86px)/.92 "Oswald", sans-serif;
  letter-spacing: -.03em;
}

.entry-copy h1 em { color: var(--gold); font-style: normal; }
.entry-copy > p { max-width: 520px; color: #a8b9ae; font-size: 15px; line-height: 1.7; }
.trust-row { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 28px; color: #89a095; font-size: 10px; }
.trust-row span::first-letter { color: var(--gold); }

.entry-card,
.lobby-card {
  border: 1px solid rgba(245, 209, 137, .18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(222, 164, 60, .14), transparent 15rem),
    linear-gradient(150deg, rgba(23, 56, 43, .96), rgba(12, 31, 23, .96));
  box-shadow: var(--shadow);
}

.entry-card { padding: clamp(24px, 4vw, 38px); }
.field-label { display: block; margin: 0 0 9px; color: #91a69a; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.field-label:not(:first-child) { margin-top: 22px; }
.text-input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  outline: 0;
  color: var(--ink);
  background: rgba(3, 16, 11, .38);
  font: 600 15px/1 "DM Sans", sans-serif;
}
.text-input:focus { border-color: rgba(228, 170, 60, .72); box-shadow: 0 0 0 3px rgba(228, 170, 60, .1); }
.text-input::placeholder { color: #667c70; }
.mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mode-option {
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.mode-option strong, .mode-option small { display: block; }
.mode-option strong { font: 600 19px/1.2 "Oswald", sans-serif; }
.mode-option small { margin-top: 4px; color: #83998d; font-size: 9px; }
.mode-option.selected { border-color: var(--gold); background: rgba(228, 170, 60, .12); box-shadow: inset 0 0 0 1px rgba(228,170,60,.15); }
.mode-option.selected small { color: var(--gold-soft); }
.create-button { width: 100%; margin-top: 16px; }
.entry-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 14px; color: #74897e; font-size: 9px; }
.entry-divider::before, .entry-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.join-row .game-button { height: 50px; }
.code-input { text-align: center; text-transform: uppercase; letter-spacing: .22em; }
.form-error { min-height: 17px; margin: 10px 0 -14px; color: #f09d8d; font-size: 10px; text-align: center; }

.lobby-view { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 35px 0 65px; }
.lobby-card { width: min(760px, 100%); padding: clamp(28px, 5vw, 52px); text-align: center; }
.lobby-card h1 { margin: 8px 0; font: 600 clamp(34px, 5vw, 51px)/1.1 "Oswald", sans-serif; }
.lobby-card > p { margin: 0 auto; max-width: 470px; color: #9fb1a7; font-size: 12px; line-height: 1.6; }
.room-code-box {
  min-width: min(390px, 100%);
  margin: 30px 0;
  padding: 15px 26px;
  border: 1px dashed rgba(228,170,60,.62);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(228,170,60,.07);
  cursor: pointer;
}
.room-code-box span, .room-code-box strong, .room-code-box small { display: block; }
.room-code-box span { color: #91a69a; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.room-code-box strong { margin: 6px 0 4px; color: var(--gold-soft); font: 600 33px/1 "Oswald", sans-serif; letter-spacing: .19em; }
.room-code-box small { color: #82968a; font-size: 8px; }
.teams-lobby { display: grid; grid-template-columns: 1fr 45px 1fr; align-items: center; gap: 12px; text-align: left; }
.teams-lobby article { align-self: stretch; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); }
.teams-lobby h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 15px/1 "Oswald", sans-serif; }
.team-swatch { width: 8px; height: 8px; border-radius: 50%; }
.team-swatch.gold { background: var(--gold); }
.team-swatch.pale { background: #c5d2ca; }
.versus-mark { color: #70867a; font: 600 12px/1 "Oswald", sans-serif; text-align: center; }
.lobby-slots { display: grid; gap: 7px; }
.lobby-slot { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 11px; background: rgba(0,0,0,.14); }
.lobby-slot.empty { border: 1px dashed rgba(255,255,255,.1); color: #6e8277; font-size: 9px; }
.mini-avatar { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #251904; background: var(--gold); font-size: 9px; font-weight: 800; }
.team-one-slot .mini-avatar { color: #193027; background: #c5d2ca; }
.lobby-slot strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lobby-slot small { margin-left: auto; color: var(--gold-soft); font-size: 7px; letter-spacing: .08em; }
.lobby-actions { margin-top: 24px; }
.lobby-actions .primary-button { min-width: 250px; }
.lobby-actions .primary-button:disabled { opacity: .35; cursor: not-allowed; }
.lobby-actions p { margin: 9px 0 0; color: #879b90; font-size: 9px; }

.match-view { padding-top: 5px; }
.match-scoreboard {
  width: min(610px, 100%);
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  align-items: center;
  margin: 0 auto 12px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(5,17,12,.5);
}
.team-score { display: flex; align-items: center; gap: 9px; }
.team-score span { max-width: 110px; overflow: hidden; color: #aebdb4; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.team-score strong { font: 600 29px/1 "Oswald", sans-serif; }
.team-zero strong { color: var(--gold-soft); }
.team-one { justify-content: flex-end; }
.match-meta { text-align: center; }
.match-meta small { color: #899e92; font-size: 8px; letter-spacing: .1em; }
.match-meta > div { position: relative; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.09); }
.match-meta > div span { position: absolute; top: 0; bottom: 0; width: 0; transition: width .35s ease; }
#teamZeroProgress { right: 50%; background: var(--gold); }
#teamOneProgress { left: 50%; background: #c5d2ca; }

.online-table-wrap { position: relative; padding: 7px; border-radius: 38px; background: linear-gradient(135deg,#9c622d,#e2ad58 22%,#75431f 62%,#c0833e); box-shadow: var(--shadow); }
.online-table { position: relative; height: min(625px, calc(100vh - 250px)); min-height: 510px; overflow: hidden; border: 2px solid #143e2f; border-radius: 32px; background: radial-gradient(ellipse at center,rgba(54,135,94,.46),transparent 64%),linear-gradient(135deg,var(--felt-light),var(--felt)); box-shadow: inset 0 0 75px rgba(0,0,0,.28); }
.players-strip { position: absolute; z-index: 5; top: 12px; left: 18px; right: 18px; display: flex; align-items: start; justify-content: center; gap: 8px; }
.player-station { min-width: 0; max-width: 190px; flex: 1 1 0; display: grid; justify-items: center; }
.players-strip.duel .player-station { max-width: 220px; flex: 0 1 220px; }
.player-chip { width: 100%; min-width: 0; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; padding: 6px 9px 6px 6px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(4,21,14,.62); box-shadow: 0 6px 15px rgba(0,0,0,.13); }
.player-chip.current { border-color: rgba(228,170,60,.7); box-shadow: 0 0 0 3px rgba(228,170,60,.08); }
.player-chip.offline { opacity: .55; }
.player-chip .mini-avatar { width: 29px; height: 29px; }
.player-chip.team-one-chip .mini-avatar { color: #193027; background: #c5d2ca; }
.player-chip strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.player-chip small { color: #8ea296; font-size: 7px; }
.card-count { display: flex; gap: 2px; }
.card-count i { width: 7px; height: 11px; display: block; border: 1px solid #d9cba9; border-radius: 2px; background: #214e3b; }
.opponent-cards { position: relative; width: 83px; height: 49px; margin-top: 3px; }
.opponent-cards .opponent-card-back {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 31px;
  height: 45px;
  margin: 0;
  border-width: 3px;
  border-radius: 5px;
  background-size: 9px 9px, auto;
  box-shadow: 0 5px 10px rgba(0,0,0,.25), inset 0 0 0 1px #d8a44e;
  transform-origin: 50% 125%;
}
.opponent-cards.cards-3 .opponent-card-back:nth-child(1) { z-index: 1; transform: translateX(-120%) rotate(-10deg); }
.opponent-cards.cards-3 .opponent-card-back:nth-child(2) { z-index: 2; transform: translateX(-50%) translateY(-4px); }
.opponent-cards.cards-3 .opponent-card-back:nth-child(3) { z-index: 3; transform: translateX(20%) rotate(10deg); }
.opponent-cards.cards-2 .opponent-card-back:nth-child(1) { z-index: 1; transform: translateX(-85%) rotate(-7deg); }
.opponent-cards.cards-2 .opponent-card-back:nth-child(2) { z-index: 2; transform: translateX(-15%) rotate(7deg); }
.opponent-cards.cards-1 .opponent-card-back { transform: translateX(-50%); }
.players-strip.duel .opponent-cards { width: 115px; height: 60px; }
.players-strip.duel .opponent-card-back { width: 39px; height: 56px; background-size: 11px 11px, auto; }

.online-vira, .online-hand-info { position: absolute; z-index: 4; top: 50%; width: 122px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(4,24,16,.3); transform: translateY(-50%); }
.online-vira { left: 22px; text-align: center; }
.online-vira > small { display: block; min-height: 22px; margin-top: 7px; color: var(--gold-soft); font-size: 8px; line-height: 1.35; }
.online-hand-info { right: 22px; }
.online-hand-info > div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 9px; }
.online-hand-info > div span { color: #a8bcaf; }
.online-hand-info > div strong { color: var(--gold-soft); }
.online-center { position: absolute; z-index: 2; inset: 112px 155px 160px; }
.online-center .status-pill { top: 0; }
.table-announcement {
  position: absolute;
  z-index: 20;
  top: -8px;
  left: 50%;
  width: max-content;
  max-width: min(390px, 92%);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 9px;
  border: 1px solid rgba(244,193,91,.78);
  border-radius: 999px;
  color: #fff8e8;
  background: linear-gradient(150deg, rgba(42,77,59,.98), rgba(9,34,24,.98));
  box-shadow: 0 13px 35px rgba(0,0,0,.42), 0 0 0 4px rgba(228,170,60,.09);
  transform: translateX(-50%);
  animation: tableAnnouncementIn .24s ease both;
}
.table-announcement.event-score { border-color: rgba(95,207,151,.75); box-shadow: 0 13px 35px rgba(0,0,0,.42), 0 0 0 4px rgba(95,207,151,.09); }
.table-announcement.event-trick { border-color: rgba(205,220,211,.55); }
.announcement-mark { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 50%; color: #2b1c05; background: var(--gold); font: 800 16px/1 "Oswald",sans-serif; }
.table-announcement > span:last-child { min-width: 0; }
.table-announcement small, .table-announcement strong { display: block; }
.table-announcement small { margin-bottom: 2px; color: var(--gold-soft); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.table-announcement strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.table-announcement.leaving { animation: tableAnnouncementOut .18s ease both; }
.table-call { position: absolute; z-index: 9; top: 39px; left: 50%; color: var(--gold-soft); font: 600 17px/1 "Oswald", sans-serif; transform: translateX(-50%); white-space: nowrap; }
.played-grid { position: absolute; z-index: 3; inset: 67px 0 15px; display: grid; grid-template-columns: repeat(2, minmax(95px, 1fr)); grid-template-rows: repeat(2, 1fr); place-items: center; }
.played-card { display: grid; justify-items: center; gap: 4px; }
.played-card .playing-card { width: 72px; height: 104px; margin: 0; }
.played-card .playing-card .corner { font-size: 13px; }
.played-card .playing-card .main-suit { font-size: 33px; }
.played-card .playing-card .face-name { display: none; }
.played-card .card-back { width: 72px; height: 104px; margin: 0; transform: rotate(2deg); }
.played-card.hidden-kill .card-back { box-shadow: 0 0 0 3px rgba(244,193,91,.2), 0 12px 22px rgba(0,0,0,.3); }
.played-card > small { max-width: 105px; overflow: hidden; color: #d6e0da; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.played-seat-0 { grid-column: 1; grid-row: 2; }
.played-seat-1 { grid-column: 1; grid-row: 1; }
.played-seat-2 { grid-column: 2; grid-row: 1; }
.played-seat-3 { grid-column: 2; grid-row: 2; }
.played-grid.duel .played-seat-0 { grid-column: 1; grid-row: 2; }
.played-grid.duel .played-seat-1 { grid-column: 2; grid-row: 1; }
.online-center .table-seal { z-index: 1; }
.online-tricks { position: absolute; z-index: 5; left: 50%; bottom: -3px; display: flex; gap: 7px; transform: translateX(-50%); }
.online-tricks i { width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(0,0,0,.14); }
.online-tricks i.team-0 { border-color: var(--gold); background: var(--gold); }
.online-tricks i.team-1 { border-color: #d9e1dc; background: #d9e1dc; }
.online-tricks i.tie { background: linear-gradient(90deg,var(--gold) 50%,#d9e1dc 50%); }
.own-zone { position: absolute; z-index: 6; left: 0; right: 0; bottom: 8px; display: flex; align-items: center; justify-content: center; }
.self-label { position: absolute; left: 19px; display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(4,21,14,.46); }
.self-label strong, .self-label small { display: block; max-width: 110px; overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.self-label strong { font-size: 10px; }
.self-label small { margin-top: 2px; color: #9fb2a6; font-size: 7px; text-transform: uppercase; }
.own-zone .playing-card.played { opacity: .16; pointer-events: none; transform: translateY(19px); }
.online-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; min-height: 84px; padding: 12px 10px 0; }
.online-controls .game-button.armed { border-color: var(--gold); color: #2b1c05; background: var(--gold); box-shadow: 0 0 0 3px rgba(228,170,60,.16); }
.player-station:has(.player-chip.folded) .opponent-cards { opacity: .24; }
.player-chip.folded { opacity: .58; }
.online-log { margin-top: 6px; }
.online-log summary span { color: #59c893; }
.online-log summary span.reconnecting { color: #efba65; }
.online-log summary span.offline { color: #ee907d; }
.online-log .log-summary-copy { min-width: 0; display: grid; gap: 3px; color: inherit; }
.online-log .log-summary-copy small { color: #72897c; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.online-log .log-summary-copy strong { max-width: min(680px, 68vw); overflow: hidden; color: #c4d0c8; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.team-answer-note { display: block; margin-top: 14px; color: #81968a; font-size: 8px; }
.result-card > small { display: block; margin-top: 11px; color: #8fa398; font-size: 9px; }
.call-menu-card { max-height: calc(100vh - 28px); overflow-y: auto; }
.call-menu-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
.call-menu-actions .primary-button { grid-column: auto; }
.call-menu-actions .wide { grid-column: 1 / -1; }
.call-amount-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.call-amount-row input { min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.07); font: 700 16px "DM Sans",sans-serif; }

@keyframes tableAnnouncementIn {
  from { opacity: 0; transform: translate(-50%, -9px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes tableAnnouncementOut {
  to { opacity: 0; transform: translate(-50%, -7px) scale(.97); }
}

@media (max-width: 780px) {
  .online-shell { width: min(100% - 16px, 620px); padding-top: 8px; }
  .online-topbar { grid-template-columns: 1fr auto; min-height: 62px; }
  .online-heading { display: none; }
  .solo-link { grid-column: 2; font-size: 8px; }
  .entry-view { min-height: auto; grid-template-columns: 1fr; gap: 30px; padding: 42px 8px 55px; }
  .entry-copy { text-align: center; }
  .entry-copy > p { margin-left: auto; margin-right: auto; }
  .trust-row { justify-content: center; }
  .entry-card { width: min(500px, 100%); margin: auto; }
  .lobby-view { min-height: auto; padding: 30px 0 55px; }
  .match-scoreboard { grid-template-columns: 1fr 130px 1fr; }
  .online-table { height: 535px; min-height: 535px; border-radius: 26px; }
  .online-table-wrap { border-radius: 31px; }
  .players-strip { top: 10px; left: 8px; right: 8px; gap: 5px; }
  .player-station { max-width: 120px; }
  .players-strip.duel .player-station { max-width: 190px; flex-basis: 190px; }
  .player-chip { grid-template-columns: 25px 1fr; padding: 4px 7px 4px 4px; }
  .player-chip .mini-avatar { width: 25px; height: 25px; }
  .player-chip .card-count { display: none; }
  .online-vira, .online-hand-info { width: 75px; padding: 7px; }
  .online-vira { left: 7px; }
  .online-hand-info { right: 7px; }
  .online-vira .playing-card { width: 48px; height: 70px; }
  .online-vira > small { font-size: 0; min-height: 0; }
  .online-hand-info > div { display: grid; justify-items: center; gap: 2px; }
  .opponent-cards { width: 78px; height: 43px; margin-top: 2px; }
  .opponent-cards .opponent-card-back { width: 28px; height: 40px; }
  .players-strip.duel .opponent-cards { width: 105px; height: 52px; }
  .players-strip.duel .opponent-card-back { width: 36px; height: 51px; }
  .online-center { inset: 108px 84px 145px; }
  .table-announcement { min-height: 43px; max-width: calc(100% + 105px); padding: 6px 12px 6px 7px; }
  .announcement-mark { width: 28px; height: 28px; flex-basis: 28px; }
  .table-announcement strong { max-width: 250px; font-size: 10px; }
  .played-grid { top: 62px; }
  .played-card .playing-card { width: 62px; height: 90px; }
  .played-card .card-back { width: 62px; height: 90px; }
  .played-card .playing-card .main-suit { font-size: 27px; }
  .self-label { left: 8px; }
  .self-label > span:last-child { display: none; }
  .online-controls { grid-template-columns: 1fr; gap: 9px; }
  .online-controls .action-copy { text-align: center; }
  .online-controls .action-buttons { justify-content: center; }
}

@media (max-width: 460px) {
  .online-topbar .brand small { display: none; }
  .solo-link { padding: 8px 9px; }
  .entry-copy h1 { font-size: 52px; }
  .trust-row { display: grid; gap: 8px; }
  .teams-lobby { grid-template-columns: 1fr; }
  .versus-mark { padding: 1px; }
  .room-code-box strong { font-size: 28px; }
  .match-scoreboard { grid-template-columns: 1fr 92px 1fr; padding: 6px 8px; }
  .team-score { gap: 5px; }
  .team-score span { max-width: 72px; font-size: 7px; }
  .team-score strong { font-size: 25px; }
  .match-meta small { font-size: 6px; }
  .online-table { height: 505px; min-height: 505px; }
  .players-strip { flex-wrap: nowrap; }
  .player-station { max-width: calc((100% - 10px) / 3); }
  .players-strip.duel .player-station { max-width: 180px; }
  .player-chip { padding-right: 4px; }
  .player-chip strong { font-size: 8px; }
  .player-chip small { font-size: 6px; }
  .opponent-cards { width: 70px; height: 39px; }
  .opponent-cards .opponent-card-back { width: 25px; height: 36px; border-width: 2px; }
  .players-strip.duel .opponent-cards { width: 98px; height: 50px; }
  .players-strip.duel .opponent-card-back { width: 34px; height: 48px; border-width: 3px; }
  .online-center { inset: 106px 69px 135px; }
  .table-announcement { max-width: calc(100% + 82px); }
  .table-announcement strong { max-width: 225px; }
  .online-vira, .online-hand-info { top: 52%; width: 59px; padding: 5px; border-radius: 11px; }
  .online-vira .playing-card { width: 43px; height: 63px; }
  .online-hand-info .micro-label { text-align: center; }
  .online-hand-info > div { font-size: 7px; }
  .played-grid { inset: 65px -5px 15px; }
  .played-card .playing-card { width: 55px; height: 80px; }
  .played-card .card-back { width: 55px; height: 80px; }
  .played-card > small { max-width: 68px; }
  .own-zone .playing-card { width: 78px; height: 113px; }
  .online-controls .action-buttons { display: grid; grid-template-columns: repeat(2, 1fr); }
  .online-controls .game-button { width: 100%; }
  .online-shell footer { display: none; }
}