/* Paper UI 4.0.0 · Original implementation for Nino Arcade.
   Load inside .py-ui. Series typography comes from paper-fonts.css. */
/* Palette references NinoKit.palette and NinoKit.players from the supplied repository.
   Supporting surface/tone ramps are new. Existing character vertex colors are preserved. */
.py-ui {
  --py-bg:#f4f8ff; --py-paper:#ffffff; --py-raised:#ffffff; --py-inset:#eef4fc;
  --py-ink:#26354d; --py-muted:#586b85; --py-line:#dce6f3; --py-edge:#c2d0e5;
  --py-primary:#1eb2a1; --py-primary-hover:#35c9b8; --py-primary-edge:#108478;
  --py-primary-soft:#ddf7ef; --py-primary-text:#126b60;
  --py-gold:#ffc342; --py-gold-soft:#fff3cc; --py-gold-text:#785313;
  --py-coral:#f06b52; --py-coral-soft:#ffebe4; --py-coral-text:#943e2b;
  --py-blue:#4387ed; --py-blue-soft:#e7f0ff; --py-blue-text:#285aa4;
  --py-violet:#8254e8; --py-violet-soft:#eee8ff; --py-violet-text:#6840b5;
  --py-pink:#ed82b2; --py-grass:#72c85c; --py-leaf:#32a46a; --py-milk:#fff8e8;
  --py-player-1:#bedd97; --py-player-2:#ffb8a4; --py-player-3:#c2bcee; --py-player-4:#f5d66e;
  --py-player-5:#9dcbdd; --py-player-6:#d8baa5; --py-player-7:#b9d9cf; --py-player-8:#e7bbd4;
  --py-danger:#b43c36; --py-focus:#6b5cf5;
  --py-font:PaperTangYuan,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --py-radius-sm:12px; --py-radius:24px; --py-radius-lg:32px; --py-radius-pill:999px;
  --py-space-1:4px; --py-space-2:8px; --py-space-3:12px; --py-space-4:16px; --py-space-5:24px; --py-space-6:32px;
  --py-shadow:0 5px 0 var(--py-edge),0 12px 25px #4387ed08;
  --py-ease:cubic-bezier(.2,.8,.2,1); --py-fast:150ms; --py-normal:240ms;
  --py-jelly-strength:1; --py-jelly-hover:620ms; --py-jelly-release:760ms;
  --py-hud-z:20; --py-toast-z:200; --py-safe-top:env(safe-area-inset-top,0px);
  --py-safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:var(--py-font);font-size:16px;line-height:1.65;color:var(--py-ink);
  color-scheme:light;-webkit-tap-highlight-color:transparent;
}
.py-ui[data-py-theme="dusk"] {
  --py-bg:#1c2941; --py-paper:#293a55; --py-raised:#334662; --py-inset:#223149;
  --py-ink:#f4f8ff; --py-muted:#b2c5df; --py-line:#435777; --py-edge:#142038;
  --py-primary:#57d9c5; --py-primary-hover:#78ecdb; --py-primary-edge:#1f8f86;
  --py-primary-soft:#254f50; --py-primary-text:#b8f5e7;
  --py-gold-soft:#554a2f; --py-gold-text:#f5d890;
  --py-coral-soft:#5a423b; --py-coral-text:#f2b9a8;
  --py-blue-soft:#354d59; --py-blue-text:#b4d9eb;
  --py-violet-soft:#4d435a; --py-violet-text:#ddcdef;
  --py-danger:#ffb0a5; --py-focus:#c1b6ff; color-scheme:dark;
}
.py-ui :where(*, *::before, *::after) {box-sizing:border-box}
.py-ui :where(button,input,select,textarea) {font:inherit;color:inherit}
.py-ui :where(button,select,summary,input[type="checkbox"],input[type="radio"],input[type="range"]) {cursor:pointer}
.py-ui :where(button,input,select,textarea,a,summary,[tabindex]):focus-visible {outline:3px solid var(--py-focus);outline-offset:4px}
.py-ui :where([hidden]) {display:none!important}
.py-ui :where(h1,h2,h3,h4,p) {margin:0}
.py-ui :where(button) {touch-action:manipulation}
.py-ui :where(button:disabled,input:disabled,select:disabled) {cursor:not-allowed}
.py-sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.py-icon {display:inline-block;flex-shrink:0;width:22px;height:22px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.py-row {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.py-between {justify-content:space-between}
.py-stack {display:flex;flex-direction:column;gap:16px;min-width:0}
.py-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
.py-muted {color:var(--py-muted)}
.py-label {font-size:13px;letter-spacing:.09em;font-weight:700;line-height:1.5}
.py-title {font-size:20px;letter-spacing:0;font-weight:800;line-height:1.4}
.py-help {font-size:13px;line-height:1.7;color:var(--py-muted)}
.py-divider {height:1px;background:var(--py-line);border:0;margin:16px 0}
.py-btn {
  --py-btn-bg:var(--py-paper);--py-btn-ink:var(--py-ink);--py-btn-edge:var(--py-edge);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:10px 21px;border:1px solid var(--py-line);border-radius:var(--py-radius-pill);
  background:var(--py-btn-bg);color:var(--py-btn-ink);font-weight:750;line-height:1.35;text-decoration:none;
  box-shadow:0 4px 0 var(--py-btn-edge),inset 0 2px 0 #ffffff30;
  transition:transform var(--py-fast) var(--py-ease),box-shadow var(--py-fast),background var(--py-fast);
}
.py-btn:hover:not(:disabled) {transform:translateY(-2px);filter:brightness(1.025)}
.py-btn:active:not(:disabled) {transform:translateY(3px);box-shadow:0 1px 0 var(--py-btn-edge),inset 0 1px 1px #00000008}
.py-btn--primary {--py-btn-bg:var(--py-primary);--py-btn-ink:#083d38;--py-btn-edge:var(--py-primary-edge);border-color:transparent}
.py-ui[data-py-theme="dusk"] .py-btn--primary {--py-btn-ink:#113d3c}
.py-btn--gold {--py-btn-bg:var(--py-gold);--py-btn-ink:#5e4616;--py-btn-edge:#cf9224;border-color:transparent}
.py-btn--coral {--py-btn-bg:var(--py-coral);--py-btn-ink:#411b16;--py-btn-edge:#c34a38;border-color:transparent}
.py-btn--blue {--py-btn-bg:var(--py-blue);--py-btn-ink:#101f3b;--py-btn-edge:#285db5;border-color:transparent}
.py-btn--danger {--py-btn-bg:var(--py-coral-soft);--py-btn-ink:var(--py-danger)}
.py-btn--ghost {background:transparent;border-color:transparent;box-shadow:none;color:var(--py-muted)}
.py-btn--ghost:hover:not(:disabled) {background:var(--py-inset)}
.py-btn--sm {min-height:44px;padding:8px 15px;font-size:13px}
.py-btn--lg {min-height:54px;padding:14px 29px;font-size:16px}
.py-btn--icon {padding:10px;width:44px;height:44px;flex-shrink:0}
.py-btn--block {width:100%}
.py-btn:disabled {opacity:.45;box-shadow:0 2px 0 var(--py-btn-edge);transform:none;filter:none}
.py-btn[aria-busy="true"] .py-icon {animation:py-spin 1s linear infinite}
.py-badge {display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:750;white-space:nowrap;color:var(--py-primary-text);background:var(--py-primary-soft)}
.py-badge .py-icon {width:13px;height:13px}
.py-badge--gold {background:var(--py-gold-soft);color:var(--py-gold-text)}
.py-badge--coral,.py-badge--danger {background:var(--py-coral-soft);color:var(--py-coral-text)}
.py-badge--blue {background:var(--py-blue-soft);color:var(--py-blue-text)}
.py-badge--violet {background:var(--py-violet-soft);color:var(--py-violet-text)}
.py-badge--neutral {background:var(--py-inset);color:var(--py-muted)}
.py-key {display:inline-flex;align-items:center;justify-content:center;min-width:25px;height:25px;padding:0 6px;background:var(--py-raised);border:1px solid var(--py-line);border-bottom:3px solid var(--py-edge);border-radius:8px;font:750 11px/1 var(--py-font);color:var(--py-ink)}
.py-hints {display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--py-muted);font-size:13px}
.py-hints>span {display:inline-flex;gap:6px;align-items:center}
.py-card {background:var(--py-paper);border:1px solid var(--py-line);border-radius:var(--py-radius);box-shadow:var(--py-shadow);padding:22px;min-width:0}
.py-card--inset {box-shadow:inset 0 2px 3px #37433408;background:var(--py-inset);border-color:transparent}
.py-card--dashed {box-shadow:none;border:2px dashed var(--py-line);background:transparent}
.py-card-header {display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}
.py-card-body {min-width:0}
.py-field {display:flex;flex-direction:column;gap:7px;min-width:0}
.py-field>label,.py-field-label {font-size:13px;font-weight:750}
.py-input,.py-select {width:100%;min-height:46px;padding:10px 14px;background:var(--py-inset);border:1px solid var(--py-line);border-radius:13px;outline-offset:3px;box-shadow:inset 0 2px 1px #40503106}
.py-input::placeholder {color:var(--py-muted);opacity:.85}
.py-input[aria-invalid="true"] {border-color:var(--py-danger)}
.py-error {color:var(--py-danger);font-size:13px}
.py-check {display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px;cursor:pointer}
.py-check input {appearance:none;flex-shrink:0;width:22px;height:22px;margin:0;border:2px solid var(--py-edge);border-radius:7px;background:var(--py-paper);position:relative}
.py-check input:checked {border-color:var(--py-primary);background:var(--py-primary)}
.py-check input:checked::after {content:"";position:absolute;left:5px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.py-check input[type="radio"] {border-radius:50%}
.py-check input[type="radio"]:checked::after {width:8px;height:8px;border:none;border-radius:50%;background:#fff;left:5px;top:5px}
.py-switch {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;font-size:13px;cursor:pointer}
.py-switch input {appearance:none;margin:0;flex-shrink:0;width:48px;height:28px;position:relative;border-radius:999px;background:var(--py-edge);border:2px solid transparent;box-shadow:inset 0 2px 2px #0000000c;transition:background .2s}
.py-switch input::after {content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fffdf5;box-shadow:0 2px 1px #00000015;transition:transform var(--py-fast)}
.py-switch input:checked {background:var(--py-primary)}
.py-switch input:checked::after {transform:translateX(20px)}
.py-stepper {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 15px;background:var(--py-inset);border:1px solid var(--py-line);border-radius:15px}
.py-stepper-controls {display:flex;align-items:center;gap:8px}
.py-stepper output {min-width:36px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.py-stepper .py-btn {box-shadow:0 2px 0 var(--py-edge)}
.py-range {width:100%;height:28px;accent-color:var(--py-primary)}
.py-tabs-list {display:flex;align-items:center;gap:6px;overflow-x:auto;padding:5px 5px 8px;border-radius:18px;background:var(--py-inset);max-width:100%}
.py-tab {white-space:nowrap;flex:1;min-height:44px;border:0;background:transparent;border-radius:13px;padding:10px 16px;color:var(--py-muted);font-weight:700}
.py-tab[aria-selected="true"] {background:var(--py-paper);color:var(--py-primary-text);box-shadow:0 3px 0 var(--py-edge)}
.py-tabpanel {padding-top:18px}
.py-meter-label {display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;font-size:13px}
.py-meter-label strong {font-size:13px;font-variant-numeric:tabular-nums}
.py-meter-track {height:13px;padding:3px;background:var(--py-inset);border:1px solid var(--py-line);border-radius:999px;overflow:hidden}
.py-meter-fill {height:100%;width:0;background:var(--py-primary);border-radius:999px;transition:width var(--py-normal) var(--py-ease);min-width:0}
.py-meter--coral .py-meter-fill {background:var(--py-coral)}
.py-meter--blue .py-meter-fill {background:var(--py-blue)}
.py-meter--gold .py-meter-fill {background:var(--py-gold)}
.py-meter--violet .py-meter-fill {background:var(--py-violet)}
.py-meter--large .py-meter-track {height:20px;padding:4px}
.py-resource {display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border:1px solid var(--py-line);border-radius:999px;background:var(--py-paper);box-shadow:0 3px 0 var(--py-edge);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.py-resource-symbol {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--py-gold-soft);color:var(--py-gold-text)}
.py-resource-symbol .py-icon {width:18px;height:18px}
.py-resource small {font-size:13px;font-weight:500;color:var(--py-muted)}
.py-avatar {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:54px;height:54px;border-radius:17px;background:var(--py-gold-soft);overflow:hidden;border:2px solid var(--py-paper)}
.py-avatar svg {width:100%;height:100%}
.py-avatar img {width:100%;height:100%;object-fit:contain;background:#fff}
.py-player {display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--py-line);border-radius:17px;background:var(--py-paper);min-width:0;position:relative}
.py-player-info {display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.py-player-name {font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.py-player-status {font-size:13px;color:var(--py-muted)}
.py-player[data-player="2"] .py-avatar {background:var(--py-coral-soft)}
.py-player[data-player="3"] .py-avatar {background:var(--py-blue-soft)}
.py-player[data-player="4"] .py-avatar {background:var(--py-violet-soft)}
.py-player[data-state="empty"] {background:transparent;border-style:dashed}
.py-player[data-state="disconnected"] {opacity:.65}
.py-player-ready {width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--py-primary-soft);color:var(--py-primary-text)}
.py-player-ready .py-icon {width:16px;height:16px}
.py-lobby {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.py-scoreboard {display:flex;align-items:center;justify-content:center;gap:20px;padding:18px;background:var(--py-paper);border-radius:20px;border:1px solid var(--py-line);box-shadow:0 4px 0 var(--py-edge)}
.py-team {display:flex;flex:1;flex-direction:column;align-items:center;gap:4px;min-width:0}
.py-team-name {font-size:13px;font-weight:700;overflow-wrap:anywhere}
.py-team-score {font-size:42px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.py-scoreboard-center {text-align:center;font-size:13px;color:var(--py-muted)}
.py-scoreboard-center b {display:block;color:var(--py-ink);font-size:16px;letter-spacing:.07em}
.py-timer {display:inline-flex;align-items:center;gap:8px;background:var(--py-ink);color:var(--py-paper);padding:10px 18px;border-radius:14px;font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.07em;box-shadow:inset 0 3px 1px #00000014}
.py-timer[data-urgent="true"] {background:var(--py-coral-soft);color:var(--py-danger)}
.py-objective {display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:15px;background:var(--py-primary-soft);color:var(--py-primary-text)}
.py-objective .py-icon {width:26px;height:26px}
.py-objective p {font-size:13px;opacity:.85}
.py-inventory {display:grid;grid-template-columns:repeat(var(--py-columns,4),minmax(0,1fr));gap:8px}
.py-slot {display:flex;align-items:center;justify-content:center;min-height:58px;aspect-ratio:1;position:relative;border-radius:13px;border:1px solid var(--py-line);background:var(--py-inset);color:var(--py-muted);padding:6px;min-width:0;transition:transform var(--py-fast)}
.py-slot[data-filled="true"] {background:var(--py-paper);color:var(--py-primary-text);box-shadow:0 3px 0 var(--py-edge)}
.py-slot[aria-pressed="true"] {outline:2px solid var(--py-primary);outline-offset:2px;background:var(--py-primary-soft)}
.py-slot[data-rarity="rare"] {background:var(--py-blue-soft);color:var(--py-blue-text)}
.py-slot[data-rarity="epic"] {background:var(--py-violet-soft);color:var(--py-violet-text)}
.py-slot .py-icon {width:31px;height:31px}
.py-slot-count {position:absolute;right:7px;bottom:3px;font-size:13px;font-weight:800}
.py-slot-index {position:absolute;left:7px;top:3px;font-size:13px;opacity:.55}
.py-slot:disabled {cursor:default;opacity:.5;box-shadow:none}
.py-skill {position:relative;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--py-line);border-radius:15px;background:var(--py-paper);min-height:58px;overflow:hidden;text-align:left}
.py-skill:disabled {opacity:.65}
.py-skill-icon {display:grid;place-items:center;background:var(--py-violet-soft);color:var(--py-violet-text);width:40px;height:40px;border-radius:12px}
.py-skill-detail {flex:1;display:flex;flex-direction:column;font-size:13px}
.py-skill-cooldown {position:absolute;bottom:0;left:0;height:4px;background:var(--py-violet);transition:width .15s}
.py-quest {padding:16px;border-radius:17px;background:var(--py-paper);border:1px solid var(--py-line)}
.py-quest-heading {display:flex;align-items:center;gap:9px;font-weight:800;margin-bottom:12px}
.py-quest-step {display:flex;gap:9px;align-items:flex-start;font-size:13px;min-height:30px;padding:4px 0}
.py-quest-step .py-icon {width:17px;height:17px;margin-top:1px}
.py-quest-step[data-done="true"] {color:var(--py-muted)}
.py-quest-step[data-done="true"] span {text-decoration:line-through}
.py-dialogue {position:relative;padding:22px 24px 19px;background:var(--py-paper);border:1px solid var(--py-line);border-radius:24px;box-shadow:0 5px 0 var(--py-edge)}
.py-dialogue-name {position:absolute;top:-15px;left:20px;background:var(--py-primary);color:#fff;border-radius:999px;font-size:13px;font-weight:800;padding:4px 15px;transform:rotate(-2deg)}
.py-dialogue p {margin:5px 0 18px;line-height:1.9;font-size:14px;white-space:pre-line}
.py-dialogue-actions {display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.py-reward {position:relative;display:flex;align-items:center;gap:15px;padding:18px;background:var(--py-gold-soft);border:1px solid var(--py-line);border-radius:19px}
.py-reward-icon {color:var(--py-gold-text);display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--py-paper)}
.py-reward-icon .py-icon {width:29px;height:29px}
.py-reward-text {flex:1;min-width:0}
.py-reward-text strong {font-size:14px;display:block}
.py-reward-text p {font-size:13px;color:var(--py-muted)}
.py-shop-item {display:flex;flex-direction:column;gap:12px;background:var(--py-paper);border:1px solid var(--py-line);border-radius:18px;padding:16px}
.py-item-art {position:relative;display:flex;align-items:center;justify-content:center;min-height:90px;border-radius:13px;background:var(--py-primary-soft);color:var(--py-primary-text)}
.py-item-art .py-icon {width:48px;height:48px;stroke-width:1.35}
.py-item-art .py-badge {position:absolute;right:7px;top:7px}
.py-shop-name {font-weight:800;font-size:14px}
.py-upgrade {padding:17px;border:1px solid var(--py-line);border-radius:17px;background:var(--py-paper);display:flex;flex-direction:column;gap:13px}
.py-upgrade-level {display:flex;gap:5px}
.py-upgrade-level i {flex:1;height:7px;border-radius:4px;background:var(--py-inset)}
.py-upgrade-level i[data-active="true"] {background:var(--py-primary)}
.py-crop {padding:16px;border:1px solid var(--py-line);border-radius:18px;background:var(--py-paper);display:flex;flex-direction:column;gap:12px}
.py-crop-art {display:flex;align-items:center;justify-content:center;gap:10px;min-height:82px;border-radius:12px;background:var(--py-primary-soft);color:var(--py-primary-text);position:relative}
.py-crop-art>.py-icon {width:44px;height:44px;stroke-width:1.6}
.py-crop-art .py-badge {position:absolute;right:6px;top:6px}
.py-crop[data-state="empty"] .py-crop-art {background:var(--py-inset);color:var(--py-muted);border:1px dashed var(--py-edge)}
.py-crop[data-state="ready"] .py-crop-art {background:var(--py-gold-soft);color:var(--py-gold-text)}
.py-recipe {display:flex;flex-direction:column;gap:13px;padding:16px;background:var(--py-paper);border:1px solid var(--py-line);border-radius:17px}
.py-ingredient {display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px;padding:6px 0}
.py-ingredient>span {display:flex;align-items:center;gap:8px}
.py-day-clock {display:flex;align-items:center;gap:12px;padding:13px 17px;border-radius:15px;background:var(--py-gold-soft);color:var(--py-gold-text)}
.py-day-clock>.py-icon {width:30px;height:30px}
.py-day-clock strong {display:block;font-size:15px}
.py-day-clock span {font-size:13px}
.py-order {display:flex;flex-direction:column;gap:12px;padding:17px;border-radius:17px;border:1px solid var(--py-line);background:var(--py-paper)}
.py-order-items {display:flex;gap:7px;flex-wrap:wrap}
.py-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:28px 18px;color:var(--py-muted);border:2px dashed var(--py-line);border-radius:18px}
.py-empty>.py-icon {width:38px;height:38px;stroke-width:1.5}
.py-empty strong {color:var(--py-ink);font-size:14px}
.py-skeleton {border-radius:12px;background:var(--py-inset);min-height:18px;position:relative;overflow:hidden}
.py-skeleton::after {content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 10%,#ffffff30 50%,transparent 90%);transform:translateX(-100%);animation:py-shimmer 2.2s ease-in-out infinite}
.py-loading {display:flex;flex-direction:column;gap:12px}
.py-loading .py-skeleton:first-child {height:70px}
.py-loading .py-skeleton:last-child {width:60%}
.py-tooltip {position:relative;display:inline-flex}
.py-tooltip-text {position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(250px,70vw);padding:9px 13px;border-radius:12px;background:var(--py-ink);color:var(--py-paper);box-shadow:0 3px 0 var(--py-edge);font-size:13px;z-index:3;visibility:hidden;opacity:0;pointer-events:none;transition:opacity var(--py-fast);text-align:center}
.py-tooltip:hover .py-tooltip-text,.py-tooltip:focus-within .py-tooltip-text {visibility:visible;opacity:1}
.py-hud {position:absolute;inset:0;pointer-events:none;z-index:var(--py-hud-z);padding:calc(16px + var(--py-safe-top)) max(16px,env(safe-area-inset-right,0px)) calc(16px + var(--py-safe-bottom)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;justify-content:space-between}
.py-hud :where(button,input,select,a,[data-py-interactive]) {pointer-events:auto}
.py-hud-top,.py-hud-bottom {display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.py-hud-bottom {align-items:flex-end}
.py-minimap {width:136px;aspect-ratio:1;border:5px solid var(--py-paper);outline:1px solid var(--py-line);border-radius:22px;background:var(--py-primary-soft);box-shadow:0 3px 0 var(--py-edge);position:relative;overflow:hidden}
.py-minimap::before,.py-minimap::after {content:"";position:absolute;inset:39% 0 39% 0;background:var(--py-gold-soft);transform:rotate(-25deg)}
.py-minimap::after {transform:rotate(65deg)}
.py-map-marker {position:absolute;left:var(--py-x);top:var(--py-y);z-index:1;width:14px;height:14px;border:2px solid var(--py-paper);border-radius:50%;background:var(--py-primary);transform:translate(-50%,-50%);box-shadow:0 2px 4px #0002}
.py-map-north {position:absolute;top:5px;right:8px;font-size:13px;font-weight:900;z-index:1}
.py-touch {display:flex;align-items:flex-end;justify-content:space-between;gap:30px;user-select:none}
.py-dpad {display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px}
.py-dpad .py-btn {min-height:44px;padding:0;width:44px;border-radius:13px;touch-action:none;user-select:none}
.py-dpad [data-py-control="up"] {grid-column:2;grid-row:1}
.py-dpad [data-py-control="left"] {grid-column:1;grid-row:2}
.py-dpad [data-py-control="right"] {grid-column:3;grid-row:2}
.py-dpad [data-py-control="down"] {grid-column:2;grid-row:3}
.py-touch-actions {display:flex;gap:12px;padding-bottom:12px}
.py-touch-actions .py-btn {width:55px;height:55px;touch-action:none}
.py-ui.py-dialog {width:min(520px,calc(100vw - 32px));max-width:none;max-height:min(86dvh,850px);padding:0;border:1px solid var(--py-line);border-radius:28px;background:var(--py-paper);color:var(--py-ink);box-shadow:0 8px 0 var(--py-edge),0 30px 100px #17271835;overflow:hidden}
.py-ui.py-dialog[open] {display:flex;flex-direction:column;animation:py-arrive .2s var(--py-ease)}
.py-ui.py-dialog::backdrop {background:#263d32a8;backdrop-filter:blur(5px)}
.py-dialog-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 18px;flex-shrink:0;border-bottom:1px solid var(--py-line)}
.py-dialog-header h2 {font-size:21px;font-weight:850;margin:0}
.py-dialog-body {overflow:auto;overscroll-behavior:contain;padding:24px;min-height:0}
.py-dialog-footer {display:flex;justify-content:flex-end;gap:12px;padding:18px 24px 22px;border-top:1px solid var(--py-line);flex-wrap:wrap;flex-shrink:0}
.py-dialog-footer:empty {display:none}
.py-ui.py-dialog--drawer {margin:0 0 0 auto;border-radius:28px 0 0 28px;height:100dvh;max-height:100dvh;width:min(430px,calc(100vw - 24px))}
.py-toast-region {position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + var(--py-safe-bottom));display:flex;flex-direction:column;gap:12px;width:min(380px,calc(100vw - 40px));z-index:var(--py-toast-z);pointer-events:none}
.py-toast {display:flex;align-items:center;gap:12px;pointer-events:auto;padding:14px 16px;border-radius:18px;background:var(--py-paper);border:1px solid var(--py-line);box-shadow:0 4px 0 var(--py-edge),0 8px 32px #213d2320;animation:py-arrive .24s var(--py-ease)}
.py-toast-icon {color:var(--py-primary)}
.py-toast-copy {flex:1;min-width:0;font-size:13px}
.py-toast-copy strong {display:block}
.py-toast .py-btn {min-width:44px;width:44px;min-height:44px;height:44px;padding:7px;box-shadow:none}
.py-toast--error .py-toast-icon {color:var(--py-danger)}
/* NinoKit skin is explicit/opt-in. Never target unscoped .nk-* globally. */
.py-ui .nk-button.py-btn {font:750 14px/1.35 var(--py-font)}
.py-ui .nk-hints {color:var(--py-muted)}
.nino-controller-connected .py-ui .py-hints[data-py-optional="true"] {display:none}
.py-ui[data-py-density="compact"] {font-size:13px;--py-radius:16px;--py-radius-lg:22px}
.py-ui[data-py-density="compact"] .py-card {padding:16px}
@keyframes py-spin {to{transform:rotate(360deg)}}
@keyframes py-shimmer {to{transform:translateX(100%)}}
@keyframes py-arrive {from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:600px) {
 .py-card {padding:17px}.py-dialog-header,.py-dialog-footer {padding:16px 18px}.py-dialog-body {padding:18px}
 .py-hud {padding:calc(10px + var(--py-safe-top)) 10px calc(10px + var(--py-safe-bottom))}.py-hud-top,.py-hud-bottom {gap:8px}
 .py-hud .py-resource {padding:5px 10px 5px 5px;font-size:13px}.py-minimap {width:100px}
 .py-scoreboard {gap:12px;padding:14px}.py-team-score {font-size:34px}.py-inventory {gap:6px}.py-slot {min-height:44px}
 .py-dialogue {padding:22px 18px 17px}.py-dialogue p {font-size:13px}
}
@media (prefers-reduced-motion:reduce) {
 .py-ui *, .py-ui *::before, .py-ui *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.py-ui[data-py-motion="off"] *, .py-ui[data-py-motion="off"] *::before, .py-ui[data-py-motion="off"] *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (forced-colors:active) {
 .py-btn,.py-card,.py-slot,.py-player {border:1px solid ButtonText}.py-meter-fill {background:Highlight}.py-switch input:checked {background:Highlight}
}

/* V2 tactile surfaces. Strong transform jelly is opt-in via paper-feedback.js;
   pure-CSS hover/press remains usable without JavaScript. */
.py-btn {border-width:2px;border-color:color-mix(in srgb,var(--py-btn-bg),var(--py-btn-edge) 18%);box-shadow:0 6px 0 var(--py-btn-edge),inset 0 3px 0 #ffffff55,0 9px 14px #4387ed0a;transform-origin:50% 75%;transition:box-shadow .12s,background .14s,filter .14s,transform .18s}
.py-btn--primary,.py-btn--gold,.py-btn--coral,.py-btn--blue {border-color:transparent}
.py-btn--violet {--py-btn-bg:var(--py-violet);--py-btn-ink:#fff;--py-btn-edge:#6034b9;border-color:transparent}
.py-btn--pink {--py-btn-bg:var(--py-pink);--py-btn-ink:#531e3c;--py-btn-edge:#bb5283;border-color:transparent}
.py-btn--ghost {border-color:transparent;box-shadow:none}
.py-btn:hover:not(:disabled) {filter:brightness(1.075) saturate(1.07);transform:translateY(-3px);box-shadow:0 9px 0 var(--py-btn-edge),inset 0 3px 0 #ffffff70,0 14px 21px #4387ed14}
.py-btn:active:not(:disabled),.py-btn[data-py-pressed="true"] {transform:translateY(6px) scale(1.10,.82);box-shadow:0 1px 0 var(--py-btn-edge),inset 0 1px 0 #fff4;filter:brightness(.98)}
.py-btn--ghost:hover:not(:disabled) {box-shadow:none}
.py-btn[aria-pressed="true"] {outline:2px solid var(--py-primary);outline-offset:3px}
.py-btn:disabled {box-shadow:0 2px 0 var(--py-btn-edge);filter:grayscale(.25);transform:none}
.py-ui :where(.py-slot,.py-tab,.py-character-card,.py-crop,.py-shop-item) {transition:box-shadow .2s,border-color .2s,background .2s,transform .25s;transform-origin:50% 80%}
.py-ui :where(.py-crop,.py-shop-item,.py-character-card):hover {border-color:var(--py-primary);box-shadow:0 6px 0 var(--py-edge),0 14px 26px #4387ed12}
.py-ui :where(.py-slot,.py-tab):hover:not(:disabled) {transform:translateY(-2px)}
.py-dialogue-name {color:var(--py-btn-ink,#083d38)}
.py-ui.py-dialog[open] {animation:py-dialog-pop .48s cubic-bezier(.22,.8,.3,1)}
.py-ui.py-dialog::backdrop {background:#1a33587a;backdrop-filter:blur(7px)}
.py-ui [data-py-breathe]:not(:hover):not(:active):not(:disabled):not([data-py-jelly]) {animation:py-breathe 3.4s ease-in-out infinite}
@keyframes py-breathe {0%,65%,100%{scale:1}74%{scale:1.035 .95}83%{scale:.985 1.035}92%{scale:1.01 .99}}
@keyframes py-dialog-pop {0%{opacity:0;transform:translateY(20px) scale(.85,.72)}48%{opacity:1;transform:translateY(-5px) scale(.98,1.03)}72%{transform:translateY(1px) scale(1.018,.985)}100%{transform:none}}
/* A canvas is a live viewport, not a screenshot. No pointer listeners when decorative. */
.py-model-view {display:block;position:relative;width:100%;height:200px;min-width:0;isolation:isolate;flex-shrink:0;touch-action:pan-y}
.py-model-canvas {position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;touch-action:pan-y;border-radius:20px}
.py-model-canvas[role="button"] {cursor:grab}
.py-model-canvas[role="button"]:active {cursor:grabbing}
.py-model-view[data-render="ready"]>.py-model-poster {visibility:hidden}
.py-model-view:not([data-render="ready"])>.py-model-canvas {opacity:0}
.py-model-poster {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.py-model-poster>img {height:85%;max-width:90%;object-fit:contain}
.py-model-poster>.py-icon {width:50px;height:50px;color:var(--py-primary)}
.py-model-status {position:absolute;inset:auto 5px 12px;z-index:2;text-align:center;font-size:13px;font-weight:700;color:var(--py-muted);pointer-events:none}
.py-model-view[data-tone="blue"] {background:var(--py-blue-soft);border-radius:24px}
.py-model-view[data-tone="gold"] {background:var(--py-gold-soft);border-radius:24px}
.py-model-scene {height:400px}
.py-character-card {border:2px solid var(--py-line);background:var(--py-paper);border-radius:26px;padding:16px;box-shadow:var(--py-shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.py-character-card-top {display:flex;align-items:center;justify-content:space-between;gap:6px}
.py-character-card-top>.py-badge:first-child {background:var(--py-player-color);color:#26354d;border:2px solid #fff;box-shadow:0 3px 0 #26354d15}
.py-character-card>.py-model-view {background:radial-gradient(ellipse at 50% 85%,var(--py-player-color) 0%,transparent 64%);border-radius:20px}
.py-character-card>strong {font-size:16px}
.py-character-card>.py-help {min-height:20px;margin-bottom:8px}
.py-character-card[data-state="ready"] {border-color:color-mix(in srgb,var(--py-primary),var(--py-paper) 40%)}
.py-model-slot {background:var(--py-paper);border:1px solid var(--py-line);padding:16px;border-radius:24px;box-shadow:var(--py-shadow);min-width:0}
.py-model-slot-meta {display:flex;justify-content:space-between;align-items:center;gap:8px}
.py-model-slot-meta strong {font-size:13px}
.py-item-art:has(.py-model-view),.py-crop-art:has(.py-model-view) {height:auto;min-height:110px;overflow:hidden}
.py-item-art>.py-model-view,.py-crop-art>.py-model-view {flex:1}
.py-slot>.py-model-view {width:100%;height:100%!important;position:absolute;inset:0;pointer-events:none}
.py-slot .py-slot-count,.py-slot .py-slot-index {z-index:3}
.py-reward-icon:has(.py-model-view) {width:80px;height:80px}
.py-avatar--3d {overflow:visible;width:76px;height:76px}
.py-dialogue--3d {padding-left:140px;min-height:160px}
.py-dialogue-portrait {position:absolute;left:0;bottom:2px;width:140px}
.py-dialogue--3d .py-dialogue-name {left:130px}
@media (prefers-reduced-motion:reduce) {
 .py-ui [data-py-breathe],.py-ui.py-dialog[open] {animation:none!important}
 .py-ui :where(.py-btn,.py-crop,.py-shop-item,.py-character-card,.py-tab,.py-slot):hover {transform:none}
 .py-ui .py-btn:active {transform:none}
}
.py-ui[data-py-motion="off"] :where(.py-btn,.py-crop,.py-shop-item,.py-character-card,.py-tab,.py-slot):hover,.py-ui[data-py-motion="off"] .py-btn:active {transform:none}
@media(max-width:480px){.py-dialogue--3d{padding-left:105px}.py-dialogue-portrait{width:102px}.py-dialogue--3d .py-dialogue-name{left:90px;font-size:13px}.py-character-card{padding:14px}.py-model-slot{padding:12px}}

/* V3 · Paper / ink / light bevel. This layer deliberately supersedes V2 skin.
   Saturated NinoKit colors remain identity tokens, not small-label backgrounds. */
.py-ui {
 --py-bg:#f2efe4;--py-paper:#fffcf3;--py-raised:#fffef9;--py-inset:#eae8dc;
 --py-ink:#283d36;--py-muted:#5e695c;--py-line:#cecbbb;--py-edge:#bab49f;
 --py-primary:#1eb2a1;--py-primary-hover:#31bca8;--py-primary-edge:#599b83;
 --py-primary-soft:#e1f1de;--py-primary-text:#275c48;
 --py-gold:#ffc342;--py-gold-soft:#fff0bb;--py-gold-text:#68511b;
 --py-coral:#f06b52;--py-coral-soft:#ffe2d4;--py-coral-text:#843e2c;
 --py-blue:#4387ed;--py-blue-soft:#dfedfb;--py-blue-text:#31587e;
 --py-violet:#8254e8;--py-violet-soft:#eae1f9;--py-violet-text:#624c7e;
 --py-danger:#a43930;--py-focus:#624db5;
 --py-radius-sm:10px;--py-radius:18px;--py-radius-lg:24px;
 --py-shadow:0 3px 0 var(--py-edge),0 5px 7px #493e1d0d,inset 0 1px 0 #fff9;
 --py-paper-grain:repeating-linear-gradient(0deg,transparent 0 3px,#77653504 3px 4px);
 --py-font-caption:0.8125rem;--py-font-label:0.9375rem;--py-font-body:1rem;
 --py-font-title:1.5rem;--py-font-display:2.5rem;--py-leading-copy:1.7;
 font-size:16px;line-height:1.65;letter-spacing:0;
}
.py-ui[data-py-theme="dusk"] {
 --py-bg:#283632;--py-paper:#34473f;--py-raised:#3e5048;--py-inset:#243a31;
 --py-ink:#fff6e4;--py-muted:#d0d5bd;--py-line:#6a7a64;--py-edge:#1b2b25;
 --py-primary-soft:#355d4a;--py-primary-text:#c6f3d4;
 --py-gold-soft:#594f2d;--py-gold-text:#ffe9a4;
 --py-coral-soft:#614736;--py-coral-text:#ffdac3;
 --py-blue-soft:#314f64;--py-blue-text:#d5edff;
 --py-violet-soft:#514563;--py-violet-text:#f0dcff;
 --py-danger:#ffc6b7;--py-focus:#d7bdff;
 --py-paper-grain:repeating-linear-gradient(0deg,transparent 0 3px,#ead8a103 3px 4px);
}
.py-ui .py-title {font-size:24px;line-height:1.4;letter-spacing:0;font-weight:800}
.py-ui .py-label,.py-ui .py-help,.py-ui .py-hints,.py-ui .py-badge {font-size:13px;line-height:1.6;letter-spacing:0}
.py-ui .py-help {max-width:56ch}
.py-ui .py-field>label,.py-ui .py-field-label,.py-ui .py-check,.py-ui .py-switch,.py-ui .py-meter-label {font-size:15px}
.py-ui .py-input,.py-ui .py-select {font-size:16px;line-height:1.5;min-height:48px;background:var(--py-raised);border:1px solid var(--py-edge);box-shadow:inset 0 2px 2px #4c482314}
.py-ui .py-input::placeholder {opacity:1}
.py-ui .py-badge {border-radius:8px;padding:4px 9px;font-weight:750;white-space:normal;overflow-wrap:anywhere}
.py-ui .py-badge .py-icon {width:16px;height:16px}
.py-ui .py-key {font-size:13px;height:28px;min-width:28px;background:var(--py-paper)}
.py-ui .py-card,.py-ui .py-player,.py-ui .py-character-card,.py-ui .py-model-slot,.py-ui .py-shop-item,.py-ui .py-crop {background-color:var(--py-paper);background-image:var(--py-paper-grain);border-radius:18px;box-shadow:var(--py-shadow)}
.py-ui .py-card--inset {background:var(--py-inset);box-shadow:inset 0 2px 3px #493e1d14}
.py-ui .py-card--dashed {background:transparent;box-shadow:none}
.py-ui .py-btn {
 --py-btn-bg:var(--py-raised);--py-btn-ink:var(--py-ink);--py-btn-edge:var(--py-edge);
 --py-btn-line:color-mix(in srgb,var(--py-btn-edge),var(--py-btn-bg) 25%);
 border-radius:14px;min-height:48px;padding:12px 20px;gap:9px;font-size:15px;
 border:1px solid var(--py-btn-line);background:var(--py-btn-bg);color:var(--py-btn-ink);
 box-shadow:0 5px 0 var(--py-btn-edge),inset 0 2px 0 #fff8;line-height:1.5;
 transform:none!important;scale:none!important;rotate:none!important;filter:none!important;
 isolation:isolate;overflow:visible;text-align:center;font-weight:750;animation:none!important;
 transition:color .15s; -webkit-font-smoothing:auto;
}
.py-ui .py-btn--primary {--py-btn-bg:#b0e5cc;--py-btn-ink:#174b3b;--py-btn-edge:#6da489}
.py-ui .py-btn--gold {--py-btn-bg:#ffe08a;--py-btn-ink:#574318;--py-btn-edge:#ba9953}
.py-ui .py-btn--coral {--py-btn-bg:#ffc1a7;--py-btn-ink:#683523;--py-btn-edge:#be8970}
.py-ui .py-btn--blue {--py-btn-bg:#badbfb;--py-btn-ink:#274767;--py-btn-edge:#809eb8}
.py-ui .py-btn--violet {--py-btn-bg:#dccaf4;--py-btn-ink:#533b73;--py-btn-edge:#a08ab5}
.py-ui .py-btn--pink {--py-btn-bg:#f5c3d6;--py-btn-ink:#6a3652;--py-btn-edge:#bf91a5}
.py-ui .py-btn--danger {--py-btn-bg:var(--py-coral-soft);--py-btn-ink:var(--py-danger)}
.py-ui .py-btn--ghost {--py-btn-bg:transparent;--py-btn-edge:transparent;--py-btn-line:transparent;box-shadow:none}
.py-ui .py-btn--sm {font-size:14px;min-height:44px;padding:9px 15px;border-radius:12px}
.py-ui .py-btn--lg {font-size:17px;min-height:56px;padding:14px 26px;border-radius:16px}
.py-ui .py-btn--icon {width:48px;height:48px;padding:10px;flex-shrink:0}
.py-ui .py-btn:hover:not(:disabled) {box-shadow:0 5px 0 var(--py-btn-edge),inset 0 2px 0 #fff8}
.py-ui .py-btn[aria-pressed="true"] {outline:2px solid var(--py-focus);outline-offset:4px}
/* The hit target, text, badge and focus rectangle never stretch or rotate. */
.py-ui .py-btn[data-py-surface] {background:transparent;border-color:transparent;box-shadow:none!important}
.py-ui .py-btn-face {position:absolute;inset:-1px;z-index:-1;pointer-events:none;display:block!important;border-radius:inherit;background-color:var(--py-btn-bg);background-image:var(--py-paper-grain);border:1px solid var(--py-btn-line);box-shadow:0 5px 0 var(--py-btn-edge),inset 0 2px 0 #ffffff90;transform-origin:50% 75%;transition:background .15s,box-shadow .15s;}
.py-ui .py-btn--ghost>.py-btn-face {box-shadow:none;background-image:none}
.py-ui .py-btn--ghost:hover>.py-btn-face {background:var(--py-inset)}
.py-ui .py-btn:not([data-py-jelly]):hover:not(:disabled)>.py-btn-face {transform:translateY(-2px) scale(1.025,1.04)}
.py-ui .py-btn:not([data-py-jelly]):active:not(:disabled)>.py-btn-face {transform:translateY(4px) scale(1.08,.88);box-shadow:0 1px 0 var(--py-btn-edge),inset 0 1px 0 #fff8}
.py-ui .py-btn:disabled {opacity:.56;cursor:not-allowed}
.py-ui .py-btn:disabled>.py-btn-face {box-shadow:0 2px 0 var(--py-btn-edge);transform:none}
.py-ui [data-py-breathe]:not(:hover):not(:disabled):not([data-py-jelly])>.py-btn-face {animation:py-paper-breathe 4.6s ease-in-out infinite}
@keyframes py-paper-breathe {0%,68%,100%{transform:none}76%{transform:scale(1.04,.92)}84%{transform:scale(.985,1.065)}92%{transform:scale(1.01,.985)}}
/* Loose doodles alone may tilt; semantic labels and 3D metadata stay upright. */
.py-ui .py-doodle,.py-ui [data-py-doodle] {display:inline-block;transform-origin:50% 90%;animation:py-doodle-hop 3.6s ease-in-out infinite}
@keyframes py-doodle-hop {0%,55%,100%{transform:none}64%{transform:translateY(-5px) rotate(-12deg) scale(.91,1.1)}73%{transform:translateY(1px) rotate(8deg) scale(1.1,.9)}82%{transform:translateY(-2px) rotate(-5deg)}91%{transform:none}}
.py-ui .py-resource strong,.py-ui .py-scoreboard,.py-ui .py-timer,.py-ui .py-meter-label strong {font-variant-numeric:tabular-nums;letter-spacing:.01em}
.py-ui .py-dialogue p {font-size:16px;line-height:1.85;max-width:52ch}
.py-ui .py-dialogue-name {background:var(--py-primary-soft);color:var(--py-primary-text);font-size:15px;transform:none;rotate:none}
.py-ui .py-tab {font-size:15px;border-radius:12px;min-height:44px}
.py-ui .py-tab[aria-selected="true"] {background:var(--py-primary-soft);color:var(--py-primary-text)}
.py-ui .py-tab:hover:not(:disabled),.py-ui .py-slot:hover:not(:disabled) {transform:none}
.py-ui.py-dialog {border-radius:20px;box-shadow:0 6px 0 var(--py-edge),0 14px 35px #16231f40}
.py-ui.py-dialog[open] {animation:py-paper-arrive .22s ease-out}
.py-ui.py-dialog::backdrop {background:#172c2580;backdrop-filter:none}
@keyframes py-paper-arrive {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.py-ui .py-model-canvas {border-radius:16px}
.py-ui .py-model-status {font-size:13px;background:var(--py-paper);border-radius:8px}
.py-ui[data-py-density="compact"] {font-size:15px}
.py-ui .py-readout {font-variant-numeric:tabular-nums;font-size:28px;font-weight:800;line-height:1.25;letter-spacing:.01em}
.py-ui .py-paper-note {padding:18px 20px;background:var(--py-paper);border:1px solid var(--py-line);border-radius:8px 18px 10px 12px;box-shadow:2px 3px 0 var(--py-edge);font-size:15px;line-height:1.75}
@media(prefers-reduced-motion:reduce){.py-ui .py-btn-face,.py-ui .py-doodle,.py-ui [data-py-doodle] {animation:none!important;transform:none!important;transition:none!important}}
.py-ui[data-py-motion="off"] .py-btn-face,.py-ui[data-py-motion="off"] .py-doodle,.quiet-motion .py-btn-face {animation:none!important;transform:none!important;transition:none!important}
@media(forced-colors:active){.py-ui .py-btn-face {background:ButtonFace;border:2px solid ButtonText;box-shadow:none}.py-ui .py-btn {color:ButtonText}.py-ui .py-btn[aria-pressed="true"] {outline-color:Highlight}}
/* Contrast belongs to operable outlines; decorative paper edges stay quiet. */
.py-ui {--py-control-line:#737b66}
.py-ui[data-py-theme="dusk"] {--py-control-line:#bec8ac}
.py-ui .py-input,.py-ui .py-select {border-color:var(--py-control-line)}
.py-ui .py-check input {border-color:var(--py-control-line)}
.py-ui .py-check input:checked {border-color:var(--py-primary-text);background:var(--py-primary-soft)}
.py-ui .py-check input:checked::after {border-color:var(--py-primary-text)}
.py-ui .py-check input[type="radio"]:checked::after {background:var(--py-primary-text)}
.py-ui .py-switch input {background:var(--py-control-line)}
.py-ui .py-switch input:checked {background:var(--py-primary-text)}
.py-ui .py-switch input::after {background:var(--py-paper)}
.py-ui .py-range {appearance:none;-webkit-appearance:none;background:transparent;height:44px;margin:0;cursor:pointer}
.py-ui .py-range::-webkit-slider-runnable-track {height:9px;background:var(--py-inset);border:1px solid var(--py-control-line);border-radius:5px;box-shadow:inset 0 2px 1px #4e47251a}
.py-ui .py-range::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:23px;height:23px;margin-top:-8px;border:2px solid var(--py-primary-text);border-radius:9px;background:var(--py-primary-soft);box-shadow:0 3px 0 var(--py-edge)}
.py-ui .py-range::-moz-range-track {height:8px;background:var(--py-inset);border:1px solid var(--py-control-line);border-radius:5px}
.py-ui .py-range::-moz-range-thumb {width:20px;height:20px;border:2px solid var(--py-primary-text);border-radius:8px;background:var(--py-primary-soft)}

/* v4 · scene-matched paper surfaces. Decorative backing tilts; text never does. */
.py-ui{--py-paper:#fff7e5;--py-raised:#fff9ed;--py-inset:#e8dfc9;--py-ink:#2d4038;--py-muted:#586652;--py-edge:#b7a37c;--py-line:#d3c29e;--py-radius:8px;--py-radius-lg:12px;--py-shadow:0 3px 0 #c3ae86,1px 5px 4px #4b442720;--py-paper-grain:repeating-linear-gradient(20deg,transparent 0 6px,#ad956508 6.4px,transparent 7px)}
.py-ui :is(.py-card,.py-player,.py-character-card,.py-model-slot,.py-shop-item,.py-crop){position:relative;isolation:isolate;background:transparent;border:0;border-radius:4px;box-shadow:none;padding:22px}
.py-ui :is(.py-card,.py-player,.py-character-card,.py-model-slot,.py-shop-item,.py-crop)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:perspective(900px) rotate(var(--py-sheet-tilt,-.8deg));background:var(--py-paper-grain),var(--py-paper);clip-path:polygon(1% 1%,36% 0,63% 1%,98% 0,100% 29%,99% 63%,100% 97%,62% 100%,31% 99%,1% 100%,0 69%,1% 34%);box-shadow:inset 0 -3px #ccb98d55}
.py-ui :is(.py-card,.py-player,.py-character-card,.py-model-slot,.py-shop-item,.py-crop)::after{content:"";position:absolute;inset:5px -3px -4px 3px;z-index:-2;pointer-events:none;background:var(--py-edge);opacity:.5;transform:rotate(calc(var(--py-sheet-tilt,-.8deg) + 1.8deg));clip-path:polygon(0 0,99% 0,100% 97%,2% 100%)}
.py-ui :is(.py-card,.py-player,.py-character-card,.py-model-slot,.py-shop-item,.py-crop):nth-child(even){--py-sheet-tilt:1.1deg}
.py-ui .py-card--inset{background:var(--py-inset);box-shadow:inset 0 2px 2px #4b44271a}
.py-ui .py-card--inset::before,.py-ui .py-card--inset::after,.py-ui .py-card--dashed::before,.py-ui .py-card--dashed::after{display:none}
.py-ui :is(.py-crop,.py-shop-item,.py-character-card,.py-slot):hover{transform:none}
.py-ui .py-btn,.py-ui .py-btn-face{border-radius:12px 15px 11px 14px}
.py-ui .py-btn--primary{--py-btn-bg:#7cd8b6;--py-btn-ink:#183f32;--py-btn-edge:#489678}
.py-ui .py-btn--blue{--py-btn-bg:#9fcef1;--py-btn-ink:#234867;--py-btn-edge:#699ac0}
.py-ui .py-btn--gold{--py-btn-bg:#f6d06d;--py-btn-ink:#563e15;--py-btn-edge:#b39747}
.py-ui .py-btn--coral{--py-btn-bg:#f5b090;--py-btn-ink:#633423;--py-btn-edge:#b77a5d}
.py-ui .py-badge{border-radius:3px 6px 4px 2px;box-shadow:1px 2px 0 #62502814}
.py-ui .py-tabs{background:transparent;border-bottom:2px solid var(--py-edge);border-radius:0;gap:8px;padding:0 4px 5px}
.py-ui .py-tab{background:var(--py-paper);border-radius:5px 8px 0 0;box-shadow:1px 2px 0 var(--py-edge);transform:none}
.py-ui .py-tab[aria-selected="true"]{background:var(--py-primary-soft);border-bottom:3px solid var(--py-primary-text)}
.py-ui .py-input,.py-ui .py-select{border-radius:5px;background:var(--py-raised);box-shadow:inset 0 2px 1px #76644818}
.py-ui .py-title{font-size:22px;line-height:1.45}
.py-ui[data-py-theme="dusk"]{--py-bg:#263d40;--py-paper:#304a48;--py-raised:#3b5651;--py-inset:#203c3b;--py-ink:#fff5e1;--py-muted:#d0dccd;--py-edge:#1d3330;--py-line:#597266}