/* Board skins keep their corners and front walls at fixed sizes.
   Source pixels, display widths and repeat modes: public/assets/ui/skins-v1.json. */
.tactile-play {
  --skin-frame:url('/public/assets/ui/board-chalk-v2.png');
  --tactile-orange:var(--ui-action);
  --brand-ink:var(--ui-icon);
}




.tactile-play .board-space {margin:14px 0 18px;min-height:60px}
.tactile-play .board-surface[data-night=true]::before {filter:brightness(.19) saturate(.8)}
.tactile-play .board-surface[data-skin=pbt] {
  background:none;isolation:isolate;
  filter:drop-shadow(0 5px 4px var(--ui-board-shadow));
}
/* Nine-slice: fixed corners and front wall, stretchable face. The canvas and
   interactive sockets remain above this theme-specific, non-interactive skin. */
.tactile-play .board-surface[data-skin=pbt]::before {
  content:"";position:absolute;inset:calc(-1 * var(--plate-inset,6px)) calc(-1 * var(--plate-inset,6px)) calc(-1 * var(--plate-bottom,32px));pointer-events:none;
  border:var(--plate-front,48px) solid transparent;
  border-width:var(--plate-side,18px) var(--plate-side,18px) var(--plate-front,48px);
  border-image:var(--skin-frame) var(--skin-slice,90 90 110 90) fill / var(--plate-side,18px) var(--plate-side,18px) var(--plate-front,48px) / 0 stretch;
  clip-path:inset(1px round min(19px,calc(var(--plate-side,18px) * 1.06)) min(19px,calc(var(--plate-side,18px) * 1.06)) min(14px,calc(var(--plate-side,18px) * .78)) min(14px,calc(var(--plate-side,18px) * .78)));
  z-index:-1;
}
.tactile-play .control-dock {
  margin:0 0 14px;padding:15px 0 0;border-radius:20px;background:none;box-shadow:none;
}
.tactile-play .progress-area {
  padding:11px 13px 12px;margin:0 0 12px;
  border:1px solid var(--ui-border);border-radius:13px;
  background:var(--ui-progress-surface);
  box-shadow:inset 0 1px 1px var(--ui-highlight);
}
.tactile-play .progress-area>div {font-size:11px;color:var(--ui-text)}
.tactile-play .progress-area b {font-weight:600}
.tactile-play #progress {height:8px;margin-top:8px;border-radius:9px;background:var(--ui-progress-track)}
.tactile-play #progress::-webkit-progress-bar {background:var(--ui-progress-track);box-shadow:inset 0 1px 2px var(--ui-shadow-inset);border-radius:9px}
.tactile-play #progress::-webkit-progress-value {background:linear-gradient(90deg,var(--ui-progress-end),var(--ui-progress-start));border-radius:9px}
.tactile-play #progress::-moz-progress-bar {background:linear-gradient(90deg,var(--ui-progress-end),var(--ui-progress-start));border-radius:9px}
/* The draw row holds everything about tickets: the balance, the taps toward the next
   one, and the one primary action that spends them. */
.tactile-play .draw-row {display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px}
.tactile-play .draw-row #ticket-balance {padding-right:11px;border-right:1px solid var(--ui-border)}
.tactile-play .draw-row .progress-main {display:block;flex:1;min-width:0;padding:0}
.tactile-play .draw-row .progress-main>div {display:flex;justify-content:space-between;gap:6px;font-size:11px;color:var(--ui-text);white-space:nowrap}
.tactile-play .draw-row .progress-main>div>span {min-width:0;overflow:hidden;text-overflow:ellipsis}
.tactile-play .draw-row #progress {margin-top:5px}
.tactile-play .draw-button {flex:none;min-height:44px;padding:0 14px;gap:6px;font-size:13px;border-radius:11px}
.tactile-play .draw-button .button-label {font:inherit;opacity:1;margin:0;white-space:nowrap}
.tactile-play .draw-button svg {width:19px;height:19px}
/* Five actions of one rank: each changes something (layout, board, sound, mood, settings). */
.tactile-play .play-actions {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0}
.tactile-play .play-actions>.ui-button {position:relative;min-width:0;min-height:64px;flex-direction:column;gap:5px;padding:9px 2px 8px;font-size:10px}
.tactile-play .play-actions svg {width:21px;height:21px;stroke-width:1.65}
/* Hidden controls: only the board and the toggle that brings them back. */
.tactile-play .stage {position:relative}
.tactile-play .stage[data-ui-hidden=true] :is(#collection-button,#stage-brand,.control-dock,.playtest-flag) {display:none}
.tactile-play .stage[data-ui-hidden=true] .topbar {justify-content:flex-end}
.tactile-play #ui-toggle .ui-toggle-show,.tactile-play #ui-toggle[aria-pressed=true] .ui-toggle-hide {display:none}
.tactile-play #ui-toggle[aria-pressed=true] .ui-toggle-show {display:block}
/* Playtest flag: a corner mark outside the bar's flow, never in the way of a tap. */
.tactile-play .playtest-flag {position:absolute;top:0;left:3px;z-index:2;padding:1px 4px;border-radius:0 0 4px 4px;font-size:7.5px;letter-spacing:.06em;line-height:1.5;pointer-events:none;opacity:.85}
.tactile-play .placement {padding:0}
.tactile-play .arrange-bar {display:flex;align-items:center;justify-content:flex-end;height:50px;flex-shrink:0}
.tactile-play .ad {margin:0 -16px;background:var(--ui-ad-surface);border-color:var(--ui-ad-border);color:var(--ui-ad-ink)}
/* Keep announcements available to assistive technology without a visible caption. */
.tactile-play #notice {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tactile-play .settings-boards {display:block;width:100%;margin:0 0 18px!important}
@media(max-width:350px) {
  .tactile-play .play-actions {gap:4px}
  .tactile-play .progress-area.draw-row {gap:8px;padding:8px 7px 8px 6px}
  .tactile-play .draw-row #ticket-balance {width:80px;padding-right:8px}
  .tactile-play .draw-row #ticket-balance img {width:24px;height:19px}
  .tactile-play .draw-row #ticket-balance {--ui-ticket-scale:.85}
  .tactile-play .draw-row .progress-main>div {font-size:10px;gap:4px}
  .tactile-play .draw-button {padding:0 9px;font-size:12px;gap:4px}
  .tactile-play .draw-button svg {width:17px;height:17px}
}
@media(max-height:650px) {
  .tactile-play .board-space {margin:8px 0 10px}
  .tactile-play .control-dock {padding-top:8px;margin-bottom:10px}
  .tactile-play .progress-area {padding:8px 12px;margin-bottom:10px}
  .tactile-play .play-actions>.ui-button {min-height:64px}
}




/* Approved navigation and edge-to-edge drawers. Gacha keeps its own presentation. */
.tactile-play .topbar{gap:7px;height:50px}
.tactile-play .app-brand{min-width:0;gap:6px;flex:1;color:var(--brand-ink)}
.tactile-play .app-brand .brand-symbol{display:block;width:32px;height:32px;flex-shrink:0;fill:currentColor;stroke:none}
.tactile-play .app-brand strong{font-weight:900;font-size:18px;line-height:1;letter-spacing:-.8px;white-space:nowrap;color:inherit}
.tactile-play .topbar .icon-button{
 display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;
 width:44px;min-width:44px;height:44px;padding:5px;border:1px solid var(--ui-border);
 border-radius:11px;background:linear-gradient(var(--ui-surface),var(--ui-soft-fill));box-shadow:0 2px 3px var(--ui-shadow);color:var(--ui-text);
}
.tactile-play .topbar .icon-button:not(:disabled):active{transform:translateY(2px)}
.tactile-play .topbar .icon-button svg{width:20px;height:20px}
.tactile-play .app-drawer{
 width:100%;max-width:520px;inset:auto 0 0;margin:0 auto;border:0;border-top:1px solid var(--ui-border);
 border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));
 max-height:calc(100dvh - env(safe-area-inset-top) - 16px);overscroll-behavior:contain;
 box-shadow:0 -8px 32px var(--ui-shadow);
}
.tactile-play .app-drawer::backdrop{backdrop-filter:none;background:var(--ui-drawer-backdrop);animation:layer-dim-in 180ms ease-out both}
.tactile-play .app-drawer[data-closing]::backdrop{animation:layer-dim-out 140ms ease-in both}
.tactile-play .app-drawer .volume-control{background:var(--ui-soft-fill)}
.tactile-play .app-drawer input[type=range]{accent-color:var(--ui-action)}

@keyframes layer-dim-in{from{background:transparent}to{background:var(--ui-drawer-backdrop)}}
@keyframes layer-dim-out{from{background:var(--ui-drawer-backdrop)}to{background:transparent}}
@media(max-width:350px){
 .tactile-play .topbar{gap:3px}
 .tactile-play .app-brand strong{font-size:14px;letter-spacing:-.7px}
 .tactile-play .app-brand{gap:4px}
 .tactile-play .app-brand .brand-symbol{width:26px;height:26px}
 .tactile-play .topbar .icon-button{width:38px;min-width:38px}
}
@media(prefers-reduced-motion:reduce){.tactile-play .app-drawer::backdrop{animation-duration:70ms}}
@media(forced-colors:active){
 .tactile-play .board-card.is-current{outline:2px solid Highlight}
}

.tactile-play .settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px}
.tactile-play .app-drawer .settings-action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:48px;margin:0;font-size:13px;padding:10px}
.tactile-play .settings-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.tactile-play #sound[aria-pressed=true]{color:var(--ui-muted)}
@media(max-width:350px){.tactile-play .settings-action{font-size:12px;gap:6px}}

/* Outlined brand artwork is independent of UI fonts and recolors with the theme. */
.tactile-play .app-brand strong{display:flex;align-items:center;min-width:0}
.tactile-play .brand-wordmark{display:block;width:124px;height:auto;fill:currentColor;stroke:none;flex-shrink:0}
.tactile-play .cover h1{color:var(--brand-ink)}
.tactile-play .cover .brand-wordmark{width:238px;margin:8px 0 4px}
.tactile-play input,.tactile-play select,.tactile-play textarea{font-family:inherit}

@media(max-width:350px){.tactile-play .app-brand .brand-wordmark{width:101px}}

.tactile-play .cover-symbol{width:76px;height:60px;color:var(--brand-ink);fill:currentColor;stroke:none}

/* Top bar: small line controls; the brand lockup sits between them. */
.tactile-play .topbar .ui-header-action svg{width:21px;height:21px;stroke-width:1.65}
.tactile-play .topbar .icon-button{
 width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
 border:0;border-radius:12px;background:transparent;box-shadow:none;
}
.tactile-play .topbar .icon-button:not(:disabled):active{transform:translateY(1px)}
.tactile-play .topbar .icon-button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.tactile-play .topbar .icon-button:disabled{opacity:.45}
@media(forced-colors:active){
 .tactile-play .topbar .icon-button{border:1px solid ButtonText;background:Canvas}
}
/* Settings and board sizing: fixed actions, independently scrolling content. */
.tactile-play .settings-sheet {padding:0;text-align:left;overflow:hidden}
.tactile-play .settings-sheet[open] {display:flex;flex-direction:column}
.settings-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 22px 18px;flex-shrink:0}
.sheet .settings-heading h2 {margin:0;font-size:24px;letter-spacing:-.7px}
.settings-body {overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 22px 20px;display:grid;grid-auto-rows:max-content;gap:16px}
.settings-body .ui-panel {margin:0}
.settings-body .ui-row>.ui-description {margin:0}
.settings-volume {margin-top:18px}
.settings-volume>label {font-size:12px;font-weight:650}
.settings-volume output {font-variant-numeric:tabular-nums;color:var(--color-muted)}
.settings-volume>.ui-row:last-child {min-height:40px;align-items:center}
.settings-volume #volume-hint {max-width:190px;font-size:11px}
.settings-volume #volume-hint:empty {display:block}
.settings-volume #test-sound {margin-left:auto}
.settings-volume .settings-level-hint {margin-top:8px;font-size:11px}
.settings-volume .settings-level-hint:empty {display:none}
.settings-volume+.settings-volume {margin-top:14px}
.settings-playtest-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.playtest-flag {flex:none}
.settings-body .settings-share {width:100%;text-align:left;justify-content:flex-start;padding:16px;gap:14px}
.settings-share>span {flex:1;min-width:0}
.settings-share strong,.settings-share small {display:block}
.settings-share strong {font-size:14px}
.settings-share small {margin-top:4px;color:var(--color-muted);font-size:11px;font-weight:400;line-height:1.5}
.settings-share>svg:last-child {width:16px}
.settings-help.ui-panel {padding:0 16px}
.sheet .settings-help details {margin:0;padding:0;border:0}
.sheet .settings-help details+details {border-top:1px solid var(--ui-border)}
.sheet .settings-help summary {min-height:52px}
.settings-release-details {display:grid;gap:7px;margin:14px 0}
.settings-release-details>div {display:flex;justify-content:space-between;gap:16px;font-size:12px}
.settings-release-details dt {color:var(--color-muted)}
.settings-release-details dd {margin:0;text-align:right;font-variant-numeric:tabular-nums}
.settings-release #refresh-app-status:empty {display:none}
.settings-footer {padding:16px 22px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--ui-border);flex-shrink:0}
.editor-footer {display:grid;grid-template-columns:1fr 1.8fr;gap:10px}
.board-size-stage {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:168px;padding:16px;border-radius:var(--ui-panel-radius);background:var(--ui-soft-fill)}
.board-editor .size-preview {height:auto;max-width:none;margin:0;gap:3px}
.board-editor .size-preview i {aspect-ratio:1;border-radius:2px;background:var(--ui-preview-empty);box-shadow:inset 0 1px 2px var(--ui-shadow-inset)}
.board-editor .size-preview i.is-occupied {background:var(--ui-surface);border:1px solid var(--ui-border-strong);box-shadow:0 1px 1px var(--ui-shadow)}
#size-summary {margin:12px 0 0;font-size:14px;font-weight:750;font-variant-numeric:tabular-nums}
.board-size-stage>.ui-description {font-size:10px;margin:2px 0 0}
.board-editor .size-presets,.settings-switch {padding:0;border:0;margin:0;min-width:0}
.settings-switch legend {padding:0;margin-bottom:10px}
.settings-switch-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.settings-one-sound {margin-top:16px}
/* The Sound drawer's groups are open sections, separated by a hairline, not boxed panels. */
.sound-group {text-align:left}
.sound-group+.sound-group {padding-top:20px;border-top:1px solid var(--ui-border)}
.sound-group h3 {margin:0;font-size:14px;font-weight:750;line-height:1.4}
.sound-sheet .settings-body {gap:20px}
/* Sound drawer: the mode choice opens its panel; nine switches sit in a 3 × 3 grid. */
.ui-panel>.settings-switch:first-child {margin-top:0}
.sound-off {gap:12px}
.sound-off>.ui-description {margin:0}
.sound-off>.ui-button {flex:none}
.switch-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.settings-one-sound .ui-description {margin:6px 0 0;font-size:11px}
.size-presets legend {padding:0;margin-bottom:8px}
.preset-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.board-editor .size-controls {gap:14px}
.board-editor .size-controls label {color:var(--ui-text)}
.board-editor .size-controls>span {padding-bottom:12px}
.board-editor .size-note {margin:0;min-height:38px;font-size:12px}
.board-editor .size-note[data-warning=true] {color:var(--ui-warning)}
.boards-heading-actions {display:flex;align-items:center;gap:8px;flex-shrink:0}
.tactile-play .boards-sheet .level-summary {padding:16px;margin:0;border:1px solid var(--ui-border);border-radius:var(--ui-panel-radius);background:var(--ui-panel-fill);text-align:left}
.tactile-play .boards-sheet .level-summary strong {font-size:13px}
.tactile-play .boards-sheet .level-summary .ui-badge {font-size:9px;margin:0;color:var(--color-muted)}
.tactile-play .boards-sheet .level-summary progress {height:6px;margin-top:12px}
.tactile-play .boards-sheet .level-summary progress::-webkit-progress-value {background:var(--ui-action)}
.tactile-play .boards-sheet .level-summary progress::-moz-progress-bar {background:var(--ui-action)}
.tactile-play .boards-sheet .board-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:0}
.tactile-play .boards-sheet #board-page-notice:empty {display:none}
.board-card {position:relative;display:flex;flex-direction:column;min-width:0;gap:8px}
.board-card.ui-panel {padding:14px}
.board-card.is-current {border-color:var(--ui-selected-border)}
.board-card .board-option {display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-width:0;min-height:94px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;text-align:left}
.board-card .board-option[aria-pressed=true] {box-shadow:none}
.board-thumbnail {display:block;width:100%;height:140px;object-fit:contain;flex-shrink:0}
.board-card-copy {min-width:0}
.board-card .board-option .board-detail {font-size:14px;font-weight:650;color:var(--ui-text);margin:0}
.board-card .current-board {position:absolute;top:10px;right:10px}
.board-card .board-options {width:100%;margin-top:auto;flex-shrink:0}
#board-page-notice {margin-top:16px}
@media(max-width:350px) {
 .settings-heading {padding:20px 16px 16px}.settings-body {padding:0 16px 16px}.settings-footer {padding-inline:16px}
 .settings-body .ui-panel {padding:14px}.settings-body .settings-help {padding:0 14px}
 .settings-body .ui-row {gap:8px}.settings-body .ui-panel h3 {font-size:13px}.settings-body .ui-panel>.ui-row .ui-description {font-size:11px}
 .board-card.ui-panel {padding:12px}.board-card .board-option {gap:10px}.board-thumbnail {height:120px}.board-card {gap:8px}
}
@media(max-height:600px) {.settings-heading {padding-top:16px;padding-bottom:12px}.settings-footer {padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.board-size-stage {min-height:140px}.settings-footer>p {margin-bottom:8px}}

/* Collection layout; card surfaces and rarity colors live in the shared library. */
.collection-grid {gap:10px 8px;align-items:stretch}


/* Only collection contents scroll; close and category controls stay available. */
.tactile-play .collection-sheet {height:calc(100dvh - env(safe-area-inset-top) - 16px)}
.collection-sheet .settings-heading {padding-bottom:8px}
.collection-panel {flex:1;min-height:0}
.collection-keycaps-panel {display:flex;flex-direction:column}
/* Mood: the theme list in its own drawer beside Sound. */
.mood-summary strong {display:block;font-size:14px;color:var(--ui-text)}
.mood-body #mood-notice {margin:0}
.mood-body #mood-notice:empty {display:none}
.collection-sheet {--collection-inset:22px}
/* Each section's summary and filters stick to the top of the scroll region while that
   section is in view; the next section's toolbar takes over as it arrives. */
.collection-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 calc(22px + env(safe-area-inset-bottom));scroll-padding-block:96px 14px}
.collection-scroll:focus-visible {outline:2px solid var(--ui-focus);outline-offset:-3px}
.collection-section {display:block}
.collection-toolbar {position:sticky;top:0;z-index:1;padding:6px var(--collection-inset) 8px;background:var(--ui-sheet);border-bottom:1px solid var(--ui-border)}
.collection-toolbar .collection-summary {margin:0 0 6px}
/* The filter row scrolls edge to edge of the sheet, faded at both ends, while its first
   pill rests on the same inset as the summary above and the grid below. */
.collection-toolbar .collection-filters {margin:0 calc(-1 * var(--collection-inset));padding:4px var(--collection-inset);gap:6px;scrollbar-width:none;scroll-padding-inline:var(--collection-inset);mask-image:linear-gradient(to right,transparent,black var(--collection-inset),black calc(100% - var(--collection-inset)),transparent)}
.collection-toolbar .collection-filters::-webkit-scrollbar {display:none}
.collection-section .collection-grid {margin:14px var(--collection-inset) 18px}
@media(max-width:350px) {.collection-sheet {--collection-inset:16px}}
@media(max-height:600px) {.collection-sheet .settings-heading {padding-top:10px;padding-bottom:4px}.collection-toolbar {padding-bottom:6px}.collection-toolbar .collection-summary {margin-bottom:4px}}

.arrangement-tools {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;gap:6px;margin-bottom:8px}
/* Arrange tray: one box per keycap group, side by side in a horizontal row. Each box holds two
   rows filled top to bottom; the count sits on the keycap as a badge so more keycaps fit. */
.tactile-play .placement {padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.tray {display:flex;align-items:flex-start;gap:10px;margin:0 -16px;padding:0 16px;scroll-padding-inline:16px;scrollbar-width:none}
.tray::-webkit-scrollbar {display:none}
.tray-group {flex:none;padding:7px 8px 8px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-tray);box-shadow:inset 0 2px 4px var(--ui-shadow-inset)}
.tray-group-title {margin:0 2px 4px;font-size:11px;font-weight:700;line-height:16px;color:var(--ui-muted);white-space:nowrap}
.tray-group-grid {display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,46px);grid-auto-columns:46px;gap:5px}
.tray-cap {position:relative;width:46px;height:46px;padding:1px;border:0;border-radius:9px;background:transparent;color:inherit}
.tray-cap .art {display:block;width:44px;height:44px}
.tray-cap[aria-pressed=true] {outline:2px solid var(--ui-focus);outline-offset:-2px;background:var(--ui-tray-selection)}
.tray-cap:disabled .art {opacity:.32}
.tray-cap-count {position:absolute;right:0;bottom:1px;min-width:17px;height:15px;padding:0 4px;border-radius:8px;background:var(--ui-text);color:var(--ui-surface);box-shadow:0 0 0 1.5px var(--ui-tray);font-size:9.5px;font-weight:750;line-height:15px;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
.tray-cap:disabled .tray-cap-count {background:var(--ui-muted)}
/* Settings › Cloud save: sign-in buttons or sign-out/delete under the description. */
.settings-account-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.settings-account-providers {display:contents}
.settings-account[data-state=unavailable] .settings-account-actions,.settings-account-actions:not(:has(:not([hidden]))) {display:none}
/* Which copy to keep: two whole-copy choices side by side, one quiet way out below. */
.cloud-conflict-options {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.cloud-conflict-options .ui-choice {min-height:88px;padding:12px 10px;text-align:center}
.cloud-conflict-options .ui-choice span {line-height:1.5;white-space:pre-line}
.cloud-conflict .ui-confirm-actions {grid-template-columns:1fr;margin-top:12px}
/* What only this copy holds: what choosing the other one would lose. */
.cloud-conflict-options .ui-choice .cloud-conflict-only {margin-top:4px;color:var(--ui-text);font-weight:650}
/* Stage toasts sit under the top bar, over the board, in the gacha's toast band. */
.stage-toasts {position:absolute;z-index:4;left:16px;right:16px;top:calc(66px + env(safe-area-inset-top))}
.stage-toasts:empty {display:none}
/* Account ID line under the Cloud save actions: quiet, with a copy action. */
.settings-account-id {margin-top:10px}
.settings-account-id .ui-description {margin:0}
.settings-account-id #account-id {font-variant-numeric:tabular-nums;font-weight:650;color:var(--ui-text)}
/* Settings › Cloud save: the help request line, and the answer when there is one. */
.settings-support {display:grid;justify-items:start;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--ui-border)}
.settings-support .ui-description {margin:0}
.settings-support-reply {margin:0;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--ui-control-radius);background:var(--ui-soft-fill);color:var(--ui-text);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
/* Ask for help drawer: four reasons in two columns, a date, a message. */
.help-categories {margin:0;padding:0;border:0}
.help-category-options {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.help-category-options .ui-choice {min-height:60px}
.help-category-options .ui-choice strong {font-size:14px;line-height:1.3}
.help-sheet .settings-footer .ui-button {width:100%}