html[data-ui] .app, html[data-ui] body.phone .app { grid-template-rows: auto minmax(0, 1fr) auto; }
html[data-ui] .app > .th-top { grid-row: 1; }
html[data-ui] .app > .screens { grid-row: 2; }
html[data-ui] .app > .th-bot { grid-row: 3; }
.th-top, .th-bot { position: relative; z-index: 6; line-height: 0; overflow: hidden; background: var(--bg); }
.th-bot { padding-bottom: env(safe-area-inset-bottom); }
.th-bot[hidden], .app.on-home .th-top, .app.on-home .th-bot { display: none; }
html[data-ui] .arc-sub { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.px-wrap[hidden] { display: none; }
.px-wrap { position: relative; display: block; line-height: 0; }
.px-scene { display: block; image-rendering: pixelated; }
.px-hits { position: absolute; left: 0; top: 0; }
.px-hit { position: absolute; display: block; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
html[data-ui] .screen-home { padding: 0; overflow-x: hidden; overflow-y: auto; background: var(--bg); }
body.pc .screen-home { overflow: hidden; }
body.phone .screen-home { scrollbar-width: none; }
body.phone .screen-home::-webkit-scrollbar { display: none; }

html[data-ui] .panel, html[data-ui] .modal, html[data-ui] .btn, html[data-ui] .chip, html[data-ui] .subtab, html[data-ui] .toast,
html[data-ui] input[type=text], html[data-ui] input[type=search], html[data-ui] input[type=number], html[data-ui] textarea, html[data-ui] select {
  border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none; image-rendering: pixelated;
}
html[data-ui] .panel { border-image: var(--k-panel) var(--k-panel-n) fill / var(--k-panel-s) stretch; }
html[data-ui] .panel .panel { border-image: var(--k-card) var(--k-card-n) fill / var(--k-card-s) stretch; }
html[data-ui] .modal { border-image: var(--k-sheet) var(--k-sheet-n) fill / var(--k-sheet-s) stretch; padding: calc(var(--k-sheet-s) + 8px); overflow-x: hidden; }
html[data-ui] .btn { border-image: var(--k-btn) var(--k-btn-n) fill / var(--k-btn-s) stretch; margin: 0; padding: 10px 16px 14px; transition: none; }
html[data-ui] .btn:hover:not(:disabled) { border-image-source: var(--k-btn-hover); transform: none; filter: none; }
html[data-ui] .btn:active:not(:disabled), html[data-ui] .btn.pressed:not(:disabled) { border-image-source: var(--k-btn-down); transform: translateY(var(--k-px, 3px)); }
html[data-ui] .btn:disabled { border-image-source: var(--k-btn-off); opacity: .7; }
html[data-ui] .btn.accent { border-image-source: var(--k-btn-accent); color: var(--ink); }
html[data-ui] .btn.accent:hover:not(:disabled) { border-image-source: var(--k-btn-accent-hover); }
html[data-ui] .btn.danger, html[data-ui] .btn.bad { border-image-source: var(--k-btn-danger); color: #fff; }
html[data-ui] .btn.small { padding: 7px 11px 11px; }
html[data-ui] .btn.big { padding: 14px 22px 18px; }
html[data-ui] .btn.square { padding: 8px 9px 11px; }
html[data-ui] .chip { border-image: var(--k-chip) var(--k-chip-n) fill / var(--k-chip-s) stretch; color: var(--fg); transition: none; }
html[data-ui] .chip:hover { transform: none; border-image-source: var(--k-tab); }
html[data-ui] .chip.on { border-image-source: var(--k-chip-on); color: var(--ink); }
html[data-ui] .subtab { border-image: var(--k-tab) var(--k-tab-n) fill / var(--k-tab-s) stretch; color: var(--fg); }
html[data-ui] .subtab.on { border-image-source: var(--k-tab-on); color: var(--ink); }
html[data-ui] input[type=text], html[data-ui] input[type=search], html[data-ui] input[type=number], html[data-ui] textarea, html[data-ui] select {
  border-image: var(--k-input) var(--k-input-n) fill / var(--k-input-s) stretch; color: var(--fg); padding: 8px 10px;
}
html[data-ui] .toast { border-image: var(--k-toast) var(--k-toast-n) fill / var(--k-toast-s) stretch; color: var(--ink); }
html[data-ui] .toast.good { color: var(--ink); }
html[data-ui] .toast.bad { color: var(--ink); }
html[data-ui] ::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg); }
html[data-ui] ::-webkit-scrollbar-thumb { border: 0 solid transparent; border-image: var(--k-thumb) var(--k-thumb-n) fill / var(--k-thumb-s) stretch; }
html[data-ui] .backdrop { background: rgba(29, 20, 48, .82); }

html[data-ui] .stage.arc-crt .stage-box {
  position: relative; border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: var(--k-bezel) var(--k-bezel-n) fill / var(--k-bezel-s) stretch;
  padding: calc(var(--k-bezel-s) + 10px) calc(var(--k-bezel-s) + 8px);
}
html[data-ui] .stage.arc-crt .stage-box::after {
  content: ''; position: absolute; inset: var(--k-bezel-s); pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, transparent 0 var(--k-px, 3px), rgba(0, 0, 0, .16) var(--k-px, 3px) calc(var(--k-px, 3px) * 2));
}
html[data-ui] .stage.arc-crt:not(:has(.stage-box)) { padding: var(--k-bezel-s); border: 0 solid transparent; border-image: var(--k-bezel) var(--k-bezel-n) / var(--k-bezel-s) stretch; }
html[data-ui] .stage.arc-crt:not(.rvs) { background: rgba(29, 20, 48, .94); }
html[data-ui] .stage.arc-crt:not(:has(.stage-box))::after {
  content: ''; position: absolute; inset: var(--k-bezel-s); pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(to bottom, transparent 0 var(--k-px, 3px), rgba(0, 0, 0, .14) var(--k-px, 3px) calc(var(--k-px, 3px) * 2));
}

.th-panel h3 { margin: 18px 0 10px; }
.th-panel h3:first-child { margin-top: 0; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
body.phone .th-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
body.phone .th-card { padding: 8px 6px; }
body.phone .th-prev { min-height: 92px; }
.th-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; font: inherit; color: var(--fg); cursor: pointer; border: 0 solid transparent; background: none;
  border-image: var(--k-card) var(--k-card-n) fill / var(--k-card-s) stretch; }
.th-card.on { border-image-source: var(--k-chip-on); color: var(--ink); }
.th-card.off { opacity: .55; cursor: default; }
.th-prev { min-height: 120px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.th-prev.empty { width: 100%; line-height: 1.3; font-size: 13px; color: var(--muted); text-align: center; }
.th-prev canvas { image-rendering: pixelated; display: block; }
.th-name { font-weight: 700; }
.th-blurb { font-size: 13px; text-align: center; }
.th-card.on .th-blurb { color: var(--ink); }
.th-pals { display: flex; flex-wrap: wrap; gap: 10px; }
.th-pal { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font: inherit; color: var(--fg); cursor: pointer; min-height: 44px; border: 0 solid transparent; background: none;
  border-image: var(--k-chip) var(--k-chip-n) fill / var(--k-chip-s) stretch; }
.th-pal.on { border-image-source: var(--k-chip-on); color: var(--ink); }
.th-sw-cv { image-rendering: pixelated; display: block; }