/* Orbit visual system. User workshop rules load after this stylesheet. */
:root {
  --bg: #141e2a;
  --surface: #1d2a39;
  --ink: #e8f0f8;
  --muted: #b3c5d7;
  --line: #52667b;
  --soft: #29435c;
  --blue: #0066cc;
  --shadow: 0 8px 28px #22223307;
  --win: #176443;
  --win-bg: #e6f5ed;
  --loss: #a2384e;
  --loss-bg: #fcebf0;
  --draw: #805411;
  --draw-bg: #fff3d9;
  --radius-control: 14px;
  --radius-card: 28px;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; background: var(--bg); color: var(--ink); }
::selection { background: #cde3ff; color: #172e4d; }
* { scrollbar-color: #a8a8b1 transparent; scrollbar-width: thin; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { font-weight: 600; transition: background .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 4px;
}
button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
button:active:not(:disabled) { transform: scale(.98); }
a { text-underline-offset: 4px; }
input, select, textarea { color: var(--ink); background: var(--surface); border: 1px solid var(--line); caret-color: var(--blue); max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
h1,h2,h3 { letter-spacing: -.035em; font-weight: 650; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }
h2 { font-size: clamp(23px, 2.8vw, 30px); line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.25; }
.app { max-width: 1200px; padding: 0 32px 130px; }
.app>header { height: 96px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.brand { font-size: 30px; letter-spacing: -1.5px; font-weight: 750; }
.brand-icon { width: 42px; height: 42px; border-radius: 13px; }
.brand-tag { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
#balance { background: var(--surface); border: 1px solid var(--line); box-shadow: none; min-height: 44px; font-variant-numeric: tabular-nums; color: var(--ink); }
.hero { background: #eaf1fa; border-radius: 32px; min-height: 368px; padding: 46px; overflow: hidden; box-shadow: none; }
.hero-copy { max-width: 650px; }
.hero .eyebrow { display: none; }
.hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.04em; margin: 0 0 22px; max-width: 650px; }
.hero p { font-size: 17px; line-height: 1.6; color: #485d76; max-width: 380px; margin-bottom: 25px; }
.hero .primary { border-radius: 24px; padding: 13px 23px; }
.hero-art { width: 350px; height: 300px; top: 40px; right: 15px; opacity: 1 !important; transform: none; }
.hero-art .orbit { border-color: #bdcfe6; }
.hero-art .floating { animation: none; box-shadow: 8px 20px 32px #233f6817; }
.hero-art .tile-chess { background: #fff; transform: rotate(-13deg); }
.hero-art .tile-dice { background: #b8d9ff; transform: rotate(14deg); }
.hero-art .spark { color: #739ac6; }
.hero-art .dot { border-color: #e2b36b; }
.primary { background: var(--blue); color: #fff; box-shadow: none; min-height: 46px; padding: 12px 20px; }
.secondary { color: var(--blue); background: var(--soft); border: 1px solid transparent; min-height: 44px; padding: 11px 18px; }
.text-button { color: var(--blue); background: transparent; min-height: 44px; font-weight: 600; }
.app #main .back { background: transparent; color: var(--blue); box-shadow: none; padding: 10px 0; border-radius: 8px; font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.notice { padding: 16px 2px; margin: 0; font-size: 12px; color: var(--muted); gap: 12px; align-items: center; }
.section-title { margin: 28px 0 22px; align-items: center; }
.section-title h2 { margin: 0; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid .card { border: 1px solid #e8e8ed; background: var(--surface); box-shadow: none; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; }
.grid .card-art { height: 164px; flex: none; border-radius: 0; }
.grid .card-art:after { opacity: .2; }
.grid .card-art.chess { background: #dfeee7; }
.grid .card-art.checkers { background: #f4e3d4; }
.grid .card-art.ttt { background: #dfeafb; color: #335c91; }
.grid .card-art.slots { background: #ede7f7; }
.grid .card-art.connect4 { background: #f7e8cb; color: #a56528; }
.grid .card-art.battleship { background: #dcebf1; }
.grid .card-body { display: flex; flex-direction: column; align-items: stretch; flex: 1; padding: 24px; gap: 0; }
.grid .card-body > * { flex-shrink: 0; }
.grid .card-body .badge { font-size: 10px; letter-spacing: .035em; font-weight: 600; color: var(--muted); background: transparent; padding: 0; margin: 0 0 9px; align-self: flex-start; min-height: 15px; }
.grid .card-body h3 { font-size: 23px; line-height: 1.15; margin: 0 0 10px; }
.grid .card-body p { font-size: 14px; line-height: 1.55; min-height: 0; margin: 0 0 20px; color: var(--muted); flex: 1 0 auto; }
.grid .card-body > button { height: auto; min-height: 44px; flex: 0 0 auto; margin: 0; padding: 11px 14px; font-size: 14px; border-radius: 14px; }
.grid .card-body > button + button { margin-top: 7px; }
.grid .card-body > .secondary:first-of-type { background: var(--blue); color: #fff; }
.grid .card-body > .text-button { background: var(--bg); color: var(--ink); }
.panel, .welcome-card, .demo-banner, .join-panel { border: 1px solid var(--line); box-shadow: none; padding: 28px; border-radius: 24px; }
.panel { margin: 0 0 20px; }
.panel p { color: var(--muted); }
.panel h2:first-child, .panel h1:first-child { margin-top: 0; }
.join-panel { margin: 28px 0; background: var(--surface); gap: 24px; }
.join-panel h3 { margin-top: 0; }
.join-form { gap: 8px; }
.join-form input { min-width: 0; min-height: 46px; }
.welcome-card { background: var(--surface); }
.demo-banner { background: #eaf1fa; border: 0; }
.demo-banner p { color: #485d76; }
.community-row { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; margin: 24px 0; }
nav { width: auto; max-width: calc(100% - 24px); gap: 6px; padding: 7px; border: 1px solid #ffffffaa; border-radius: 24px; background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 32px #242b421c; bottom: max(14px, env(safe-area-inset-bottom)); }
nav button { padding: 7px 21px; min-width: 66px; min-height: 56px; border-radius: 18px; font-size: 11px; color: #626269; }
nav button.active { background: var(--soft); color: var(--blue); }
nav .orbit-nav-icon { width: 24px; height: 24px; }
dialog { border: 1px solid var(--line); border-radius: 28px; padding: 30px; box-shadow: 0 24px 80px #151a3030; }
dialog::backdrop { background: #19233566; backdrop-filter: none; }
dialog p { font-size: 14px; color: var(--muted); }
dialog h2 { margin-top: 0; }
.mode-options, .invite-games { gap: 10px; }
.room-status { padding: 13px 18px; background: var(--soft); color: var(--ink) !important; border-radius: 16px; font-weight: 600; line-height: 1.5; }
.match-outcome { text-align: center; padding: 32px; border: 1px solid var(--line); }
.match-outcome h1 { color: inherit; font-size: clamp(32px, 5vw, 48px); margin-bottom: 20px; }
[data-outcome="win"] { --outcome-ink: var(--win); --outcome-bg: var(--win-bg); }
[data-outcome="loss"] { --outcome-ink: var(--loss); --outcome-bg: var(--loss-bg); }
[data-outcome="draw"] { --outcome-ink: var(--draw); --outcome-bg: var(--draw-bg); }
.match-outcome[data-outcome], .room-status[data-outcome], .result-label[data-outcome] { color: var(--outcome-ink, var(--ink)) !important; background: var(--outcome-bg, var(--soft)); border-color: transparent; }
.result-label { display: inline-block; padding: 5px 11px; border-radius: 10px; font-weight: 600; font-size: 14px; letter-spacing: 0; }
.history-row { gap: 12px; padding: 18px 0; font-variant-numeric: tabular-nums; }
.history-row small { color: var(--muted); font-size: 12px; margin-top: 8px; }
.positive { color: var(--win); } .negative { color: var(--loss); }
.stat { border-radius: 18px; background: var(--bg); font-variant-numeric: tabular-nums; }
.stat strong { color: var(--ink); letter-spacing: -.04em; }
.stat[data-outcome] { background: var(--outcome-bg); }
.stat[data-outcome] strong, .stat[data-outcome] span { color: var(--outcome-ink); }
.profile-tabs { border-radius: 18px; background: var(--bg); }
.profile-tabs button { font-size: 14px; border-radius: 13px; }
.quest-card { box-shadow: none; border-radius: 24px; padding: 24px; }
.quest-card h3 { font-size: 21px; }
.quest-reward { color: var(--draw); }
.quest-card.claimed .quest-symbol { color: var(--win); background: var(--win-bg); }
.shop-item { border-radius: 20px; border: 1px solid var(--line); padding: 20px 14px; }
.shop-item button { min-height: 44px; width: 100%; }
.leaderboard-tabs button { min-height: 44px; }
.leaderboard-row { font-variant-numeric: tabular-nums; }
.mode-option { border: 1px solid var(--line); border-radius: 18px; }
.game-rules { border-radius: 16px; background: var(--bg); }
.slot-machine { background: #dfd7ee; box-shadow: inset 0 2px 3px #fff8; border-radius: 28px; }
.bets { flex-wrap: wrap; gap: 8px; }
.bets button { min-height: 44px; border-radius: 12px; }
#spin { min-width: min(100%, 260px); border-radius: 24px; }
#resign, [data-surrender] { color: var(--loss); background: var(--loss-bg); }
#draw-offer { color: var(--draw); background: var(--draw-bg); }
#toast { background: #242428; border-radius: 18px; box-shadow: 0 8px 30px #0002; }
@media (hover: hover) {
  .primary:hover:not(:disabled), .grid .card-body > .secondary:first-of-type:hover:not(:disabled) { filter: brightness(.94); box-shadow: 0 4px 12px #0066cc20; }
  .secondary:hover:not(:disabled), .text-button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--line); }
  .grid .card:hover { border-color: #c8ccd3; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-art { right: -85px; transform: scale(.8); transform-origin: right center; }
  .hero-copy { max-width: 72%; }
  .hero h1 { font-size: 44px; }
}
@media (max-width: 700px) {
  .app { padding: 0 16px calc(100px + env(safe-area-inset-bottom)); }
  .app>header { height: 76px; margin-bottom: 16px; }
  .brand { font-size: 27px; }
  .brand-icon { width: 36px; height: 36px; }
  .hero { padding: 28px 24px; min-height: 0; border-radius: 26px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(32px, 7.8vw, 42px); max-width: 100%; margin-bottom: 16px; }
  .hero p { font-size: 15px; max-width: 100%; margin-bottom: 20px; }
  .hero-art { display: none; }
  .notice { font-size: 11px; flex-wrap: wrap; gap: 0; padding: 8px 0; }
  .notice .text-button { font-size: 12px; padding-left: 0; }
  .section-title { margin: 20px 0 16px; gap: 8px; }
  .section-title h2 { font-size: 24px; }
  .section-title .text-button { font-size: 13px; padding: 8px 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid .card { display: flex; flex-direction: column; border-radius: 22px; }
  .grid .card-art { width: 100%; height: 120px; min-height: 120px; }
  .grid .card-art > .orbit-art { width: 78px; height: 78px; }
  .grid .card-art.ttt, .grid .card-art.connect4 { font-size: 35px; word-spacing: -10px; }
  .grid .card-art .reels-art { transform: rotate(-10deg) scale(.65); flex-shrink: 0; }
  .grid .card-art .checker-art { transform: scale(.65); }
  .grid .card-body { padding: 16px 12px; min-width: 0; }
  .grid .card-body h3 { font-size: 18px; overflow-wrap: anywhere; }
  .grid .card-body .badge { font-size: 9px; line-height: 1.45; min-height: 0; margin-bottom: 7px; }
  .grid .card-body p { font-size: 13px; margin-bottom: 15px; }
  .grid .card-body > button { font-size: 13px; padding: 10px; }
  .panel, .welcome-card, .demo-banner, .join-panel { padding: 20px; border-radius: 22px; }
  .join-panel { display: block; }
  .join-form { display: flex; }
  .join-form button { flex-shrink: 0; }
  nav { width: calc(100% - 20px); gap: 2px; padding: 6px; border-radius: 22px; }
  nav button { padding: 6px 2px; min-width: 0; flex: 1; font-size: 10px; border-radius: 16px; }
  nav .orbit-nav-icon { width: 23px; height: 23px; }
  dialog { padding: 24px; }
  .room-top { flex-wrap: wrap; gap: 12px; }
  .room-status { padding: 12px; font-size: 15px; }
  .match-outcome { padding: 24px; }
}
body.dark {
  color-scheme: dark;
  --bg: #171719; --surface: #232326; --ink: #f5f5f7; --muted: #b1b1ba;
  --line: #404047; --soft: #293a50; --shadow: none;
  --win: #9cdec0; --win-bg: #203d31; --loss: #ffb3c0; --loss-bg: #492d35;
  --draw: #edcb8c; --draw-bg: #443a27;
}
body.dark .hero, body.dark .demo-banner { background: #243143; }
body.dark .hero p, body.dark .demo-banner p { color: #b9cade; }
body.dark .hero h1 { color: #f5f5f7; }
body.dark .grid .card { border-color: var(--line); }
body.dark nav { background: var(--surface); border-color: #55555a; }
body.dark nav button { color: #b1b1ba; }
body.dark .secondary, body.dark .text-button, body.dark .app #main .back, body.dark nav button.active, body.dark .game-rules summary { color: #a9ceff; }
body.dark .grid .card-body > .secondary:first-of-type { color: white; }
body.dark .grid .card-art { filter: brightness(.82); }
body.dark #draw-offer { color: var(--draw); }
body.dark #resign { color: var(--loss); }
@media (prefers-reduced-motion: reduce) {
  button, .hero *, nav * { animation: none !important; transition: none !important; }
  button:active:not(:disabled) { transform: none; }
}

/* Fixed Orbit palette; body.dark also selects the existing component variants. */
body { color-scheme: dark; --bg: #141e2a; --surface: #1d2a39; --ink: #e8f0f8; --muted: #b3c5d7; --line: #52667b; --soft: #29435c; }
.hero, .demo-banner { background: #e8f2fc; }
.hero h1, .demo-banner h2 { color: var(--ink); }
.hero p, .demo-banner p { color: var(--muted); }
.eyebrow { color: var(--muted); font-size: 13px; line-height: 1.5; font-weight: 600; letter-spacing: 0; text-transform: none; }
.demo-banner .badge { color: #244d75; background: #d8e8f7; font-size: 12px; }
.primary, .grid .card-body > .secondary:first-of-type { background: var(--blue); color: #fff; border: 1px solid transparent; }
.secondary, .grid .card-body > .text-button { background: var(--soft); color: #174d80; border: 1px solid #c6d9ed; }
.grid .card-body > button { font-size: 14px; font-weight: 700; }
.app #main .back { background: var(--blue); color: white; padding: 12px 20px; border-radius: 14px; min-height: 48px; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.slot-tabs { background: #e8eef5; border: 1px solid var(--line); }
.slot-tabs button { color: #425971; min-height: 48px; font-size: 14px; }
.slot-tabs button.selected, .bets button.selected { background: var(--blue); color: #fff; box-shadow: none; }
.bets button { border: 1px solid var(--line); color: #425971; }
.quest-symbol { color: #175c9d; background: var(--soft); }
.quest-reward { color: #805411; background: transparent; }
.join-panel.join-panel-compact { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 18px; border-radius: 18px; }
.join-panel-compact h3 { flex-shrink: 0; margin: 0; font-size: 17px; letter-spacing: -.02em; }
.join-panel-compact .join-form { flex: 1; margin: 0; }
.join-panel-compact input { width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 10px 12px; font-size: 15px; }
.join-panel-compact button { min-height: 44px; padding: 10px 18px; font-size: 15px; }
@media(max-width:700px) {
 .join-panel.join-panel-compact { display: block; padding: 12px; }
 .join-panel-compact h3 { font-size: 15px; margin-bottom: 8px; }
 .join-panel-compact .join-form { margin: 0; gap: 8px; }
}
.stat[data-outcome="coins"] { background: var(--bg); }
.stat[data-outcome="coins"] strong, .stat[data-outcome="coins"] span { color: var(--ink); }
.presence { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; margin-top: 5px; }
.presence::before { content: ''; width: 7px; height: 7px; background: currentColor; border-radius: 50%; flex: none; }
.presence[data-presence="online"] { color: #14623f; }
.presence[data-presence="offline"], .presence[data-presence="computer"] { color: #5c6470; }
#balance { color: var(--ink); background: var(--surface); border-color: var(--line); }
#balance .balance-coin { color: #bb7b08; font-style: normal; }

/* Reference navy components, shared by every Telegram and system theme. */
body.dark {
 color-scheme: dark; --bg: #141e2a; --surface: #1d2a39;
 --ink: #e8f0f8; --muted: #b3c5d7; --soft: #29435c; --line: #52667b;
}
body.dark .hero { background: linear-gradient(115deg,#233b53,#2d2b46); }
body.dark .hero h1, body.dark .demo-banner h2 { color: var(--ink); }
body.dark .hero p, body.dark .demo-banner p { color: var(--muted); }
body.dark .demo-banner { background: var(--surface); }
body.dark .demo-banner .badge { background: var(--soft); color: #bddfff; }
body.dark .eyebrow { color: #b9dfff; }
body.dark .secondary, body.dark .grid .card-body > .text-button { color: #d7eaff; background: var(--soft); border-color: var(--line); }
body.dark .grid .card-body > .secondary:first-of-type, body.dark .app #main .back { background: var(--blue); color: #fff; }
body.dark .slot-tabs { background: var(--surface); border-color: var(--line); }
body.dark .slot-tabs button, body.dark .bets button { color: var(--ink); }
body.dark .slot-tabs button.selected, body.dark .bets button.selected { background: var(--blue); color: #fff; }
body.dark nav { background: var(--surface); border-color: var(--line); }
body.dark nav button { color: var(--muted); }
body.dark nav button.active { background: var(--soft); color: #b9dfff; }
body.dark .presence[data-presence="online"] { color: #91e4b3; }
body.dark .presence[data-presence="offline"], body.dark .presence[data-presence="computer"] { color: #bec6cf; }
body.dark #balance .balance-coin { color: #ffd064; }
body.dark .quest-reward { color: #ffd991; }
body.dark .quest-symbol { background: var(--soft); color: #b9dfff; }
body.dark .board.ttt .square { color: var(--ink); }
body.dark .result, body.dark .leaderboard-row .rating, body.dark .sudoku-lives { color: #b9dfff; }
nav { background: #fff; border: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
nav button { color: #52657b; }
nav button.active { color: #075aab; background: #e5f1fc; }
.grid .card-art.sudoku { background: #dcecff; color: #315477; font-size: 42px; }
.grid .card-art.mines { background: #f6ead4; }

/* Unified action buttons; ranked matchmaking has a distinct insignia. */
.app :is(.primary,.secondary,.text-button),
body.dark .app :is(.primary,.secondary,.text-button),
.app .grid .card-body > button,
body.dark .app .grid .card-body > button {
 background-color: var(--blue); color: #fff; border: 1px solid transparent;
 border-radius: 14px; min-height: 44px; padding: 10px 14px;
}
.app .grid .card-body > [data-battle], body.dark .app .grid .card-body > [data-battle] {
 position: relative; display: flex; align-items: center; justify-content: center; gap: 7px;
 overflow: hidden; border-color: #90c8ff;
 background-image: repeating-linear-gradient(125deg, transparent 0 10px, #ffffff0c 10px 12px), linear-gradient(115deg,#003c82,var(--blue));
 box-shadow: inset 0 1px 0 #ffffff30, 0 3px 8px #00377324;
 font-weight: 750;
}
.app .grid .card-body > [data-battle]::before {
 content: ''; display: block; flex: 0 0 17px; width: 17px; height: 19px;
 background: #ffe2a1;
 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1 18 4v6c0 5-4 8-8 11C6 18 2 15 2 10V4z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m10 5 1.3 3 3.2.3-2.4 2.1.7 3.2-2.8-1.7-2.8 1.7.7-3.2-2.4-2.1 3.2-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 1 18 4v6c0 5-4 8-8 11C6 18 2 15 2 10V4z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m10 5 1.3 3 3.2.3-2.4 2.1.7 3.2-2.8-1.7-2.8 1.7.7-3.2-2.4-2.1 3.2-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media(hover:hover) {
 .app .grid .card-body > [data-battle]:hover:not(:disabled) { border-color: #ffe2a1; box-shadow: inset 0 1px 0 #ffffff50, 0 4px 12px #00377338; }
}
@media(max-width:700px) {
 .app .grid .card-body > button { padding: 10px 6px; }
 .app .grid .card-body > [data-battle] { font-size: 13px; }
}
@media(max-width:700px) {
 .app { padding-left: 12px; padding-right: 12px; }
 .grid .card-body > button { font-size: 14px; padding: 10px 6px; }
 .grid .card-body .badge { min-height: 27px; }
 .grid .card-body h3 { min-height: 42px; }
}

/* Navigation: separate hit targets and Telegram-safe content clearance. */
.app { padding-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)); padding-bottom: calc(112px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px))); }
.app > nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: calc(100% - 24px); max-width: 560px; gap: 2px; padding: 5px; bottom: max(12px, env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)); }
.app > nav button { min-width: 0; min-height: 56px; padding: 6px 1px; font-size: 11px; transform: none; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; background: transparent; padding: 0; border-radius: 0; }
.profile-tabs button { flex: 1 1 90px; min-height: 46px; min-width: 0; padding: 10px 8px; border-radius: 12px; font-size: 13px; transform: none; }
@media(max-width:400px) { .profile-tabs button { flex-basis: calc(33.333% - 8px); } .app > nav button { font-size: 10px; } }
.app .profile-environment { font-size: 12px; margin: 8px 0; }

/* Release baseline: compact welcome, clear action hierarchy, quiet surfaces. */
.app { --radius-card: 22px; --radius-control: 12px; }
.app>header { margin-bottom: 18px; }
.hero { position: relative; min-height: 0; padding: 30px 32px; border-radius: 24px; }
.hero h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; margin-bottom: 12px; max-width: 620px; }
.hero p { font-size: 15px; line-height: 1.5; margin: 0 0 18px; max-width: 390px; }
.hero .primary { min-height: 46px; padding: 11px 18px; border-radius: 14px; }
.hero-art { top: 0; right: 8px; opacity: .7 !important; transform: scale(.8); transform-origin: right center; }
.app .secondary, body.dark .app .secondary,
.app .grid .card-body > :is([data-friend-mode],[data-computer]),
body.dark .app .grid .card-body > :is([data-friend-mode],[data-computer]) {
 background: var(--soft); color: var(--ink); border: 1px solid var(--line); box-shadow: none;
}
.app .text-button, body.dark .app .text-button { background: transparent; color: var(--link-ink, #1262ac); border-color: transparent; }
body.dark .app .text-button { color: #b9dfff; }
.app .grid .card-body > [data-page="slots"], body.dark .app .grid .card-body > [data-page="slots"],
.app .grid .card-body > [data-battle], body.dark .app .grid .card-body > [data-battle] { background: var(--blue); color: white; border-color: transparent; }
.app .grid .card-body > [data-battle], body.dark .app .grid .card-body > [data-battle] { border-color: #78b7f1; box-shadow: inset 0 1px 0 #ffffff20; }
.app .grid .card { border-color: var(--line); border-radius: 22px; }
.app .grid .card-art { height: 144px; filter: none; display: flex; align-items: center; justify-content: center; }
.app .grid .card-art .orbit-art { width: 76px; height: 76px; }
.app .grid .card-art::after { opacity: .12; }
.app .grid .card-body { padding: 18px; }
.app .grid .card-body p { line-height: 1.5; }
.app .grid .card-art.blackjack { background: #e2eaf6; }
.app .grid .card-art.solitaire { background: #dfede7; }
.app .grid .card-art.city { background: #f2e5d5; }
.game-cover { width: 88px; height: 88px; }
.panel { border-radius: 22px; }
.game-rules { background: var(--surface); border-color: var(--line); border-radius: 14px; padding: 12px 16px; }
.game-rules summary { color: var(--ink); min-height: 28px; }
.game-rules p { color: var(--muted); font-size: 14px; }
.mode-options button, .room-actions button { min-height: 48px; }
.notice .text-button, .section-title .text-button { white-space: nowrap; padding: 10px 4px; }
input, select { min-height: 46px; font-size: 16px; }
@media(max-width:700px) {
 .app>header { height: 70px; margin-bottom: 14px; }
 .hero { padding: 22px; border-radius: 22px; }
 .hero h1 { font-size: clamp(27px, 7.3vw, 32px); margin-bottom: 10px; }
 .hero p { font-size: 14px; margin-bottom: 16px; }
 .hero-art { display: none; }
 .app .grid .card-art { height: 112px; }
 .app .grid .card-body { padding: 14px 12px; }
 .app .grid .card-body h3 { font-size: 18px; line-height: 1.25; }
 .app .grid .card-body p { font-size: 13px; }
 .app .grid .card-body > button { min-height: 46px; }
 .section-title h2 { font-size: 23px; }
}
@media(hover:hover) {
 .app .secondary:hover:not(:disabled) { border-color: var(--blue); }
 .app .grid .card-body > [data-battle]:hover:not(:disabled) { border-color: #d5eaff; box-shadow: none; }
}

.hero::after { content: ''; position: absolute; pointer-events: none; width: 190px; height: 190px; right: -110px; top: -95px; border: 1px solid #a5c9ee24; border-radius: 50%; box-shadow: 0 0 0 24px #a5c9ee08; }
#game-mode { max-height: calc(100dvh - 40px); overflow-y: auto; overflow-x: hidden; }
#game-mode .difficulty-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; }
#game-mode .difficulty-buttons button { width: 100%; min-width: 0; white-space: normal; }
#game-mode .mode-option { min-width: 0; }
#game-mode .mode-option > span { min-width: 0; }
#game-mode .mode-note { font-size: 13px; }