/* v0.1.0 preserves the established card/table layout and adds functional menus. */
@import url('/static/v3/styles.css');

/* Quiet, compact controls around the same five-tower arcade table. */
.creator-credit { position:fixed; right:22px; bottom:12px; z-index:40; color:#b9c7cc; font-family:var(--pixel); font-size:9px; letter-spacing:1px; pointer-events:none; text-shadow:2px 2px #08131f; }
.local-preview-note { color:#a5b5bb; font-size:8px; border-left:2px solid var(--gold); padding-left:8px; margin:0 0 16px; }
.menu-screen { padding-top:35px; gap:64px; }
.menu-art h1 { margin-top:12px; }
.menu-art .sky-frame { height:auto; aspect-ratio:16/9; background:radial-gradient(ellipse at 70% 65%,#28625b,transparent 55%),linear-gradient(135deg,#172a48,#142636 60%,#423546); mask-image:linear-gradient(transparent,#000 5%,#000 90%,transparent); }
.sky-frame>.menu-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.sky-frame>.hero-cards { position:absolute; inset:auto 18% 9% auto; display:flex; align-items:center; z-index:2; }
.sky-frame .hero-cards img { position:relative; width:94px; height:132px; object-fit:contain; box-shadow:5px 7px #081624aa; transform:rotate(-15deg); border:2px solid #e0cd9c; }
.sky-frame .hero-cards img+img { margin-left:-26px; transform:translateY(-12px) rotate(11deg); }
.menu-footer { font-size:8px; bottom:25px; padding-right:110px; }
.hub-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 12px; border:2px solid #475c70; background:#102332; box-shadow:4px 4px #061421; }
.hub-tabs button { background:transparent; border:0; border-bottom:3px solid transparent; padding:15px 8px; color:var(--muted); font-family:var(--pixel); font-size:11px; }
.hub-tabs button + button { border-left:1px solid #384d60; }
.hub-tabs button:hover { background:#203b47; color:var(--ivory); }
.hub-tabs button.is-active { color:var(--cyan); background:#173c3f; border-bottom-color:var(--cyan); }
.hub-tools { margin:0 0 12px; }
.hub-tools>.text-button { margin-left:0; }
.hub-tools #upgrade-button { margin-left:auto; }
.ratings-strip { padding:9px 13px; margin-bottom:14px; }
.player-greeting { margin-bottom:16px; }
.create-panel { padding:20px 24px; }
.create-panel .section-heading h2 { color:var(--ivory); font-size:22px; letter-spacing:-1px; text-transform:none; margin:0; }
.create-settings { gap:12px; margin:13px 0; }
.create-settings>label { gap:6px; }
.create-settings select { font-size:11px; padding:8px; }
.create-settings .rated-setting { padding-top:14px; }
.create-settings .watchable-setting { flex-direction:row; align-items:center; gap:9px; grid-column:1/-1; color:var(--muted); margin:1px 0; }
.watchable-setting input { width:16px; height:16px; accent-color:var(--cyan); margin:0; }
.create-panel .mode-summary { margin:0 0 15px; min-height:16px; color:var(--gold); font-size:9px; line-height:1.6; }
.create-panel .primary-button { min-height:43px; }
.join-panel { margin-top:20px; }
.challenges-panel { margin-top:18px; padding-top:15px; }
.watch-panel { padding-top:8px; }
.watch-panel .section-heading h2 { color:var(--ivory); font-size:24px; margin:5px 0 12px; }
.watch-panel>p { font-size:11px; }
.watch-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:19px; margin:14px 0; border:2px solid #4e6873; background:#142d3bdc; box-shadow:4px 4px #081824; }
.watch-row h3 { margin:0; color:var(--ivory); font-size:13px; overflow-wrap:anywhere; }
.watch-row p { grid-column:1/-1; grid-row:2; color:var(--muted); font-size:9px; margin:0; }
.watch-row .watch-score { color:var(--gold); font-size:17px; align-self:center; }
.watch-row button { justify-self:end; padding:7px 12px; font-size:10px; min-height:32px; }
.watch-empty { border:1px dashed #506a76; padding:60px 15px; margin:20px 0; text-align:center; color:var(--muted); font-size:13px; }
.collection-screen { max-width:1250px; }
.collection-screen .page-heading { margin-bottom:26px; }
.collection-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:24px; border:2px solid #496675; box-shadow:4px 4px #061421; }
.collection-filters button { display:flex; align-items:center; justify-content:center; gap:16px; border:0; border-bottom:3px solid transparent; padding:17px 12px; color:var(--muted); background:#132a3a; font-family:var(--pixel); font-size:12px; min-width:0; }
.collection-filters button+button { border-left:1px solid #496675; }
.collection-filters button.is-active { background:#204843; color:var(--cyan); border-bottom-color:var(--cyan); }
.collection-tab-count { font-family:var(--mono,monospace); color:#c1d4cf; font-size:11px; }
.collection-section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
#collection-summary { border:0; background:none; color:var(--gold); padding:0; margin:0; font-size:14px; font-weight:bold; }
#collection-context { margin:0; font-size:10px; }
.collection-families { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.collection-families button { border:1px solid #486372; color:#b8c9c9; background:#102632; padding:8px 12px; font-size:10px; min-height:34px; }
.collection-families button.is-active { border-color:var(--gold); color:var(--gold); background:#342f2c; }
.collection-equip-note { border-left:3px solid var(--gold); background:#332f2bd9; color:#ead6a4; padding:12px; font-size:11px; margin-bottom:20px; }
.collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.collection-item { padding:14px; }
.collection-item .preview-button { height:165px; margin-bottom:15px; padding:10px 5px; overflow:hidden; }
.collection-item h2 { font-size:18px; margin:8px 0 15px; min-height:42px; }
.collection-item>.eyebrow { color:#a2b8bd; }
.collection-item>.equip-button { margin-top:13px; min-height:40px; }
.collection-item .face-preview { gap:4px; }
.collection-item .face-preview .playing-card { --card-w:55px; --card-h:78px; flex:none; }
.collection-item .face-preview .card-corner { font-size:15px; line-height:17px; padding:2px 3px; }
.collection-item .face-preview .card-bottom { font-size:12px; }
.collection-item.background-item .preview-button { padding:0; background:#0c1b29; }
.collection-item.background-item .preview-button img { width:100%; height:100%; object-fit:cover; }
.collection-filters button:focus-visible,.collection-families button:focus-visible { outline:3px solid var(--gold); outline-offset:3px; position:relative; z-index:1; }
#collection-panel:focus-visible { outline:2px solid var(--cyan); outline-offset:8px; }
.face-preview { display:flex; align-items:center; justify-content:center; gap:8px; height:100%; }
.face-preview .playing-card { --card-w:63px; --card-h:90px; transform:rotate(-6deg); }
.face-preview .playing-card:nth-child(2) { transform:translateY(-7px); }
.face-preview .playing-card:nth-child(3) { transform:rotate(6deg); }
.cosmetic-preview .face-preview { min-height:210px; }
.cosmetic-preview .face-preview .playing-card { --card-w:96px; --card-h:135px; }
.cosmetic-preview .face-preview .card-corner { font-size:23px; line-height:25px; }
.table-meta { display:flex; align-items:center; gap:12px; min-height:24px; padding-bottom:5px; font-size:9px; color:var(--muted); }
.table-meta .eyebrow { font-size:8px; letter-spacing:1px; }
.table-meta #audience-badge { color:var(--cyan); }
.table-meta #joker-status { margin-left:auto; font-size:8px; }
.table-meta .text-button { padding:3px 0; font-size:9px; }
/* Scene art never serves as the contrast surface for game controls. */
body.has-personal-theme.at-table .table-meta,
body.has-personal-theme.at-table .arena-top { background:#0c1c2de8; }
body.has-personal-theme.at-table .your-identity { background:#0c1c2de8; }
.table-notice { top:83px; }
.table-screen { padding-top:10px; padding-bottom:40px; }
.hand-zone { gap:12px; padding-top:19px; }
.hand-zone .your-identity { width:245px; }
.hand { gap:8px; }
.hand .playing-card { --card-w:62px; --card-h:88px; }
.hand-note { width:54px; font-size:7px; }
.joker-reserve { display:flex; flex-direction:column; align-items:center; position:relative; border-left:1px dashed #68807c; padding-left:14px; margin-left:3px; }
.joker-reserve>.eyebrow { font-size:7px; letter-spacing:1px; position:absolute; top:-17px; left:14px; right:0; text-align:center; }
.joker-reserve .playing-card { --card-w:62px; --card-h:88px; }
.joker-reserve .playing-card.can-play { cursor:grab; }
.joker-reserve .playing-card.can-play:hover { transform:translateY(-9px); box-shadow:0 0 0 2px var(--gold),3px 5px #07161d; }
.joker-reserve .playing-card.selected { transform:translateY(-13px); box-shadow:0 0 0 3px var(--cyan),3px 6px #082d30; }
.joker-reserve .playing-card.is-dragging { opacity:.25; }
.spent-joker { color:#91a4a8; font-size:10px; width:55px; text-align:center; }
.spectating .hand-zone { justify-content:space-between; }
.spectating .hand-zone #hand { display:none; }
.spectating .player-side { cursor:default; }
.spectating #spectator-hand-note { margin-right:15px; }
.spectating .draw-zone-label>span:last-child,.spectating .draw-phase-indicator { visibility:hidden; }
.spectating .tower.is-won .tower-owner,.spectating .tower.is-lost .tower-owner { opacity:1; }

/* Face palettes are local, never change suit/rank or anyone else's cards. */
/* Validated catalog hex colors are applied through these four CSS variables. */
.playing-card { background:var(--card-paper,var(--ivory)); color:var(--card-ink,#20354b); border-color:var(--card-edge,#d7c9a5); }
.playing-card.red { color:var(--card-red,#bd394c); }
.card-corner { background:var(--card-paper,var(--ivory)); z-index:3; }
.tower-cards .card-corner { padding-top:2px; padding-bottom:2px; }
.card-center { text-shadow:none; }
.card-bottom { z-index:3; }
.card-center.court-art { top:25%; bottom:8%; left:13%; right:13%; border:0; }
.court-art img { height:100%; width:100%; object-fit:contain; image-rendering:pixelated; }
.card-center.joker-art { inset:0; z-index:0; }
.joker-art img { width:100%; height:100%; object-fit:fill; image-rendering:pixelated; }
.playing-card img { pointer-events:none; user-select:none; -webkit-user-drag:none; }
.joker-reserve .playing-card { touch-action:none; }
.chat-closed-note { margin:0; padding:8px 12px; color:var(--gold); font-size:9px; border-top:1px solid #4b6570; }
.joker-card .card-corner { background:#fff1d6; color:#213449; font-size:15px; gap:4px; }
.joker-card .card-corner .suit { font-size:11px; letter-spacing:0; }
.joker-card[data-joker-color="red"] .card-corner { color:#b8324c; }
.joker-card .card-bottom { color:#263d4e; font-size:7px; background:#fff1d6; padding:1px 2px; }
.modes-dialog { width:570px; }
.mode-explainer h3 { color:var(--gold); font-family:var(--pixel); font-size:12px; margin:20px 0 8px; }
.mode-explainer p { color:var(--muted); font-size:12px; }
#watch-settings-dialog { width:480px; }
#watch-settings-dialog .input-row { display:flex; gap:8px; }
#watch-share-link { flex:1; width:0; font-size:10px; }
#watch-settings-dialog .primary-button { width:100%; margin-top:15px; justify-content:center; }
#watch-rotate-button { display:block; margin:14px 0; }
#account-security { border-top:1px solid #465e6b; padding-top:17px; }
#account-security summary { cursor:pointer; color:var(--gold); font-size:12px; }
#password-form { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
#password-form label { font-size:10px; color:var(--muted); }
#password-form .secondary-button { margin-top:5px; }
#report-dialog { width:430px; }
#report-form { display:flex; flex-direction:column; gap:14px; }
#report-form label { font-size:11px; color:var(--muted); }
#reports-dialog { width:540px; }
.report-entry { border:1px solid #486271; padding:15px; margin:12px 0; }
.report-entry h3 { color:var(--gold); font-size:11px; }
.report-entry>p { overflow-wrap:anywhere; font-size:12px; }
.report-entry button { margin:5px 8px 0 0; font-size:10px; min-height:32px; padding:7px 10px; }

/* Shared chat is separate from gameplay: a collapsible, bounded room stream. */
.chat-dock { position:fixed; bottom:34px; right:20px; z-index:42; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.chat-toggle { background:#173c43; border:2px solid #6baea1; color:var(--ivory); padding:9px 15px; box-shadow:3px 3px #07131f; font-family:var(--pixel); font-size:10px; }
#chat-unread { display:inline-block; min-width:20px; padding:3px; margin-left:7px; color:#152632; background:var(--gold); }
.chat-panel { display:flex; flex-direction:column; width:340px; max-width:calc(100vw - 24px); height:400px; max-height:calc(100dvh - 155px); border:2px solid #628582; background:#101f30; box-shadow:6px 6px #070f1a; }
.chat-heading { display:flex; align-items:center; gap:10px; padding:13px 12px; border-bottom:1px solid #4c6873; background:#193543; }
.chat-heading h2 { font-size:16px; margin:0 0 4px; }
.chat-heading>div>span { color:var(--muted); font-size:8px; }
.chat-heading>#chat-mutes-button { margin-left:auto; font-size:9px; }
.chat-heading>.icon-button { width:28px; height:28px; padding:3px; }
.chat-messages { overflow-y:auto; flex:1; min-height:40px; padding:10px 12px; overscroll-behavior:contain; }
.chat-message { padding:8px 0 10px; border-bottom:1px solid #294151; }
.chat-message>div { display:flex; align-items:center; gap:7px; min-height:19px; }
.chat-message b { color:var(--gold); font-size:10px; overflow:hidden; max-width:160px; text-overflow:ellipsis; white-space:nowrap; }
.chat-message>div>span { color:var(--muted); font-size:9px; }
.chat-message>div>.text-button:first-of-type { margin-left:auto; }
.chat-message .text-button { padding:2px 0; font-size:8px; }
.chat-message p { color:#e0e7df; font-size:11px; line-height:1.5; margin:5px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-empty { color:var(--muted); text-align:center; font-size:10px; padding:38px 12px; }
#chat-form { display:flex; gap:7px; padding:10px; border-top:1px solid #4b6570; background:#172d3d; }
#chat-input { width:0; flex:1; padding:9px; font-size:11px; }
#chat-send { min-height:33px; padding:6px 13px; color:var(--cyan); }
.chat-status { color:var(--coral); font-size:9px; margin:0; padding:0 12px; }
.chat-status:not(:empty) { padding:8px 12px; border-top:1px solid #765454; }
#chat-mutes { padding:12px; border-bottom:1px solid #4b6570; background:#263744; font-size:11px; }
#chat-mutes label { display:flex; align-items:center; gap:10px; }
#chat-mutes input { accent-color:var(--cyan); }
#chat-muted-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
#chat-muted-list button { color:var(--gold); font-size:9px; }

@media (min-width:1051px) { body.signed-in .menu-screen { gap:50px; padding-top:32px; } body.signed-in .menu-art { top:30px; } }
@media (max-width:1100px) { .hand-zone .your-identity { width:205px; } .hand .playing-card,.joker-reserve .playing-card { --card-w:55px; --card-h:78px; } .hand { gap:6px; } .hand-note { display:none; } .table-meta #joker-status { font-size:7px; } }
@media (max-width:760px) { .menu-screen { padding-top:28px; gap:16px; } .creator-credit { font-size:7px; right:12px; bottom:9px; } .create-panel { padding:18px; } .hub-tabs button { font-size:10px; padding:13px 6px; } .table-screen { min-width:0; } .topbar { min-width:0; } .table-meta { flex-wrap:wrap; gap:8px; } .table-meta #joker-status { margin-left:0; } .chat-dock { right:12px; bottom:28px; } .chat-panel { width:330px; } .face-preview .playing-card { --card-w:49px; --card-h:70px; } }
@media (max-width:430px) { .menu-footer { font-size:7px; padding-right:85px; } .create-settings { gap:13px 9px; } .create-settings select { font-size:10px; } .watch-row { padding:14px; } }

@media (max-width:1050px) { .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  .collection-screen { padding:25px 14px 45px; }
  .collection-screen .page-heading { flex-wrap:nowrap; margin-bottom:20px; }
  .collection-screen .page-heading h1 { font-size:23px; }
  .collection-screen .page-heading p { font-size:10px; }
  .collection-filters { margin-bottom:20px; }
  .collection-filters button { flex-direction:column; gap:7px; font-size:10px; padding:13px 4px; }
  .collection-tab-count { font-size:10px; }
  .collection-section-heading { align-items:flex-start; flex-direction:column; gap:7px; }
  .collection-families { gap:6px; margin-bottom:16px; }
  .collection-families button { padding:7px 9px; font-size:9px; }
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .collection-item { padding:10px; }
  .collection-item .preview-button { height:132px; margin-bottom:12px; }
  .collection-item .preview-button>img { height:110px; }
  .collection-item h2 { font-size:15px; min-height:36px; }
  .collection-item .face-preview { gap:0; }
  .collection-item .face-preview .playing-card { --card-w:37px; --card-h:54px; }
  .collection-item .face-preview .card-corner { font-size:11px; line-height:12px; padding:1px 2px; gap:1px; }
  .collection-item .face-preview .card-bottom { font-size:9px; }
  .collection-item>.equip-button { font-size:9px; }
  .collection-item .cosmetic-progress>span { font-size:8px; }
  .cosmetic-preview .face-preview { gap:5px; min-height:150px; }
  .cosmetic-preview .face-preview .playing-card { --card-w:68px; --card-h:96px; }
  .cosmetic-preview .face-preview .card-corner { font-size:17px; line-height:19px; }
}

/* All five towers fit a phone. Only a long private hand scrolls internally. */
@media (max-width:760px) {
  .table-screen { padding:9px 10px 16px; }
  .chat-dock { position:relative; right:auto; bottom:auto; margin:0 12px 34px; }
  .chat-panel { position:fixed; right:12px; bottom:78px; }
  .table-meta { line-height:1.5; }
  .table-meta #joker-status { order:4; flex-basis:100%; }
  .table-meta #copy-watch { display:none; }
  .table-meta #watch-settings-button { margin-left:auto; font-size:8px; }
  .arena-top { height:auto; min-height:52px; flex-wrap:wrap; gap:9px; padding:5px 0 8px; }
  .opponent-identity { flex:1 0 100%; width:100%; min-width:0; gap:7px; }
  .opponent-identity .side-clock { margin-left:auto; }
  .identity .avatar { width:29px; height:29px; font-size:24px; }
  .identity .player-name { max-width:100px; font-size:11px; }
  .identity .presence { font-size:6px; }
  .identity .score { font-size:22px; }
  .side-clock { min-width:52px; padding:5px 4px; font-size:15px; }
  .turn-badge { margin-left:0; margin-right:auto; font-size:9px; padding:8px; min-width:0; }
  #resign-button,#resign-series-button,#view-results-button { font-size:8px; padding:1px 0; }
  #resign-button { margin-left:0; }
  .arena-layout { display:flex; flex-direction:column; gap:3px; }
  .draw-zone { flex-direction:row; align-items:center; justify-content:center; gap:12px; padding:7px 4px; min-height:75px; }
  .draw-zone-label { width:auto; margin:0; gap:5px; }
  .draw-zone-label span:last-child { display:none; }
  .draw-or { margin:0; font-size:7px; }
  .draw-source,.draw-source .playing-card { width:43px; height:60px; --card-w:43px; --card-h:60px; }
  .draw-source .playing-card .card-corner { font-size:12px; line-height:13px; padding:1px 2px; }
  .stock-count { font-size:10px; width:20px; height:19px; bottom:-2px; right:-7px; }
  .draw-phase-indicator { position:static; margin:0; width:62px; font-size:7px; line-height:1.5; }
  .side-label { height:18px; letter-spacing:1px; font-size:7px; }
  .side-label span:last-child { font-size:6px; letter-spacing:0; }
  .towers { gap:4px; padding:4px; box-shadow:3px 3px #07161c; }
  .tower { padding:2px; }
  .tower-side,.tower-side.player-side { height:153px; padding:3px 0; }
  .tower-cards { height:135px; min-width:0; --card-w:43px; --card-h:62px; --stagger:17px; }
  .tower-cards .playing-card { --card-w:43px; --card-h:62px; --stagger:17px; }
  .tower-cards .card-corner { font-size:12px; line-height:13px; padding:0 2px; gap:2px; }
  .tower-cards .card-corner .suit { font-size:12px; }
  .tower-cards .joker-card .card-corner { font-size:11px; gap:2px; }
  .tower-cards .joker-card .suit { font-size:8px; }
  .tower-cards .card-bottom { font-size:8px; }
  .tower-cards .card-center { font-size:28px; }
  .tower-cards .card-center.face { font-size:21px; }
  .tower-cards .card-center.court-art { inset:25% 10% 8%; }
  .tower-cards .card-center.joker-art { inset:0; }
  .tower-rank { left:-1px; right:-1px; bottom:0; font-size:5px; line-height:8px; }
  .tower-divider { height:22px; margin:2px -2px; }
  .tower-number { font-size:9px; }
  .tower-owner { right:1px; font-size:7px; }
  .slot-pips { display:none; }
  .full-marker { bottom:11px; right:1px; font-size:7px; }
  .hand-zone { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 9px; padding:15px 1px 0; min-height:0; }
  .hand-zone .your-identity { width:auto; grid-column:1/-1; gap:9px; }
  .your-identity .side-clock { margin-left:auto; }
  .hand { height:101px; padding:17px 3px 5px; justify-content:flex-start; gap:5px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .hand .playing-card,.joker-reserve .playing-card { --card-w:46px; --card-h:66px; flex:none; }
  .hand .card-corner { font-size:13px; line-height:15px; padding:1px 2px; }
  .hand:has(+.joker-reserve[hidden]) { grid-column:1/-1; }
  .joker-reserve { padding-left:9px; margin:7px 0 0; }
  .joker-reserve>.eyebrow { left:9px; top:-12px; font-size:5px; }
  .joker-reserve .card-corner { font-size:11px; }
  .joker-reserve .card-corner .suit { font-size:8px; }
  .hand-note { display:none; }
  .table-notice { position:relative; inset:auto; margin:4px 0 7px; font-size:10px; }
  .result-panel { min-width:0; width:calc(100% - 30px); max-width:500px; padding:22px; flex-direction:column; gap:13px; }
  .result-panel h2 { font-size:25px; }
  .result-actions { width:100%; }
  .spectating .hand-zone { display:flex; flex-wrap:wrap; }
  .spectating .hand-zone .your-identity { width:100%; }
  .spectating #spectator-hand-note { font-size:9px; }
}

/* Functional hub: one decision at a time, with no economy panel over cards. */
body:not(.at-table) { position:relative; min-height:100vh; }
body:not(.at-table) .creator-credit { position:absolute; }
.menu-art h1 { font-size:clamp(46px,14vw,82px); }
.hub-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
.hub-tabs button { font-size:10px; padding:15px 5px; }
.player-greeting { flex-wrap:wrap; gap:10px; }
.coin-button { border:1px solid #8a7953; background:#302f29; color:#f4d27b; padding:8px 11px; min-height:34px; font:inherit; font-size:11px; white-space:nowrap; }
.coin-button:hover { background:#44402e; border-color:var(--gold); }
.play-choice { display:grid; grid-template-columns:1fr 1fr; margin:18px 0 12px; gap:8px; }
.play-choice button { padding:15px 8px; font:inherit; color:#bbcdd0; background:#122a38; border:2px solid #395566; min-height:50px; font-size:12px; }
.play-choice button[aria-pressed=true] { color:#50e6cf; background:#193f3f; border-color:#50e6cf; box-shadow:3px 3px #071b23; }
.menu-art>#tutorial-button { margin-right:12px; }
.menu-art>#rules-button { margin-top:20px; }
.stake-setting input,.create-settings input[type=number] { width:100%; min-width:0; padding:9px; background:#0b1c2b; color:var(--ivory); border:1px solid #54717b; font:inherit; }
.stake-setting .small { font-size:8px; line-height:1.6; }
#solo-reward-note { border-left:2px solid var(--gold); padding-left:10px; line-height:1.8; font-size:10px; margin:10px 0 20px; }
#solo-availability:empty { display:none; }
.direct-panel { border-top:1px solid #355365; padding-top:18px; margin-top:22px; }
.direct-panel>.section-heading { flex-wrap:wrap; gap:10px; }
.direct-panel h3 { font-size:12px; }
.challenge-preference { display:flex; align-items:center; gap:9px; font-size:10px; color:var(--muted); margin:16px 0; }
.challenge-preference input { accent-color:var(--cyan); width:17px; height:17px; }
.blocked-challenge { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; font-size:11px; color:var(--muted); }
.direct-panel .secondary-button { font-size:10px; padding:8px; }
.direct-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid #2c475a; }
.direct-row b { font-size:13px; overflow-wrap:anywhere; }
.direct-row p { margin:8px 0; line-height:1.7; }
.direct-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.wallet-totals { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:22px 0; }
.wallet-totals>div { display:flex; flex-direction:column; gap:10px; background:#132b3a; padding:15px; border:1px solid #4b6370; }
.wallet-totals span { color:var(--muted); font-size:11px; }
.wallet-totals b { color:var(--gold); font-size:27px; }
.wallet-transactions { max-height:340px; overflow:auto; }
.wallet-entry { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:14px 0; gap:7px; border-top:1px solid #334a5d; font-size:12px; }
.wallet-entry>small { grid-column:1/-1; font-size:10px; }
.coin-gain,.result-coins { color:var(--gold); }
.result-coins { font-size:13px; margin:10px 0; }
.shop-filters { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-bottom:16px; }
.shop-filters label { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); }
.shop-filters select { background:#132a3a; border:1px solid #496675; padding:8px; color:var(--ivory); font:inherit; }
.shop-filters input { accent-color:var(--cyan); width:16px; height:16px; }
.collection-screen .page-heading .coin-button { margin-top:13px; }
.wager-panel { padding:14px; margin:18px 0; border:1px solid #ac8853; background:#302d29; text-align:left; }
.wager-panel h3 { color:var(--gold); font-size:14px; margin:0 0 12px; }
.wager-panel p { line-height:1.7; }
.wager-confirmations { font-size:10px; color:#e8d6a8; }
.wager-chip { color:var(--gold); border:1px solid #8c7548; background:#242d2d; padding:4px 7px; font-size:9px; white-space:nowrap; }
.table-meta { flex-wrap:wrap; }
#confirm-copy { line-height:1.8; }
.rankings-screen { max-width:1100px; margin:auto; padding:50px 30px 70px; }
.pool-tabs { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #52727f; margin-bottom:20px; }
.pool-tabs button { font:inherit; padding:15px; color:var(--muted); background:#142d3e; border:0; border-bottom:3px solid transparent; }
.pool-tabs button[aria-selected=true] { background:#1b403f; color:var(--cyan); border-bottom-color:var(--cyan); }
.ranking-table { width:100%; border-collapse:collapse; background:#0d2131e8; }
.ranking-table th { text-align:left; font-size:11px; color:var(--muted); padding:14px 12px; border-bottom:2px solid #4b6875; }
.ranking-table td { padding:16px 12px; border-bottom:1px solid #344c5d; font-size:13px; }
.ranking-table .text-button { margin:0; font-size:13px; text-align:left; overflow-wrap:anywhere; }
.ranking-table td:last-child { white-space:nowrap; }
.provisional { color:var(--gold); }
.tutorial-dialog { width:min(700px,calc(100% - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
.tutorial-dialog>p { font-size:13px; line-height:1.8; }
.tutorial-demo { background:#102835; border:1px solid #426472; padding:22px; margin:20px 0 14px; min-height:220px; }
.tutorial-sources { display:flex; justify-content:center; gap:35px; }
.demo-source { display:flex; flex-direction:column; align-items:center; gap:13px; padding:10px; border:1px solid #4c8e88; color:var(--ivory); background:#1b373c; min-width:110px; }
.demo-source>.card-back { display:block; width:65px; height:92px; }
.tutorial-dialog .playing-card { --card-w:58px; --card-h:82px; flex-shrink:0; }
.tutorial-dialog .card-corner { font-size:16px; line-height:17px; }
.tutorial-hand { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:15px 0; }
.tutorial-hand .playing-card[aria-pressed=true] { outline:3px solid var(--gold); transform:translateY(-7px); }
.tutorial-towers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.demo-tower { min-height:85px; border:2px dashed #53ad9e; background:#1d3c40; color:var(--cyan); font:inherit; font-size:10px; padding:8px 2px; }
.demo-tower:hover,.demo-tower:focus-visible { border-style:solid; background:#28504a; }
.tutorial-example+.tutorial-example { border-top:1px solid #416271; padding-top:12px; }
.tutorial-summary { line-height:1.8; font-size:13px; }
.tutorial-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.tutorial-controls .small { font-size:10px; }
#tutorial-feedback { min-height:18px; color:var(--gold); }
@media(max-width:600px) {
  .hub-tabs button { font-size:8px; padding:13px 3px; }
  .player-greeting { font-size:12px; }
  .player-greeting #logout-button { margin-left:0; }
  .coin-button { font-size:10px; padding:7px; }
  .play-choice button { font-size:11px; }
  .rankings-screen { padding:28px 14px 55px; }
  .ranking-table th,.ranking-table td { padding:12px 6px; font-size:10px; }
  .ranking-table .text-button { font-size:11px; max-width:140px; }
  .ranking-table th:first-child,.ranking-table td:first-child { width:27px; }
  .pool-tabs button { font-size:11px; padding:13px 5px; }
  .wager-chip { font-size:8px; }
  .tutorial-dialog { padding:18px; }
  .tutorial-demo { padding:13px 8px; }
  .tutorial-dialog .playing-card { --card-w:43px; --card-h:62px; }
  .tutorial-dialog .card-corner { font-size:13px; line-height:14px; }
  .tutorial-hand { gap:6px; }
  .tutorial-towers { gap:4px; }
  .demo-tower { min-height:65px; font-size:8px; }
  .tutorial-sources { gap:18px; }
  .tutorial-controls .primary-button { width:100%; }
}