/* Nino Arcade host skin for Paper UI v4.
 * It decorates existing game controls without taking ownership of game state,
 * input routing, canvases, camera loops or semantic success events.
 */
.nino-game-ui {
  --py-bg:#f4f8ff;--py-paper:#fff7e5;--py-raised:#fffaf0;--py-inset:#f1e7d2;
  --py-ink:#2d4038;--py-muted:#647164;--py-line:#d7c59e;--py-edge:#bfa678;
  --py-primary:#1eb2a1;--py-primary-edge:#108478;--py-coral:#f06b52;
  --py-coral-soft:#ffebe4;--py-danger:#b43c36;--py-focus:#238c77;
  --py-paper-grain:repeating-linear-gradient(20deg,transparent 0 6px,#be975d12 6.4px,transparent 7px),repeating-linear-gradient(113deg,transparent 0 11px,#b28f5912 11.5px,transparent 12px);
}
.nino-game-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:#526787;--py-edge:#142038;
  --py-primary:#57d9c5;--py-primary-edge:#1f8f86;--py-coral-soft:#5a423b;
  --py-danger:#ffb0a5;--py-focus:#a0dfc4;
}
.nino-game-ui :where(button,input,select,textarea,a,summary,[tabindex]):focus-visible {
  outline:3px solid var(--py-focus)!important;outline-offset:4px!important;
}
.nino-game-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%);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:10px 18px;border:1px solid var(--py-btn-line)!important;
  border-radius:6px 9px 7px 5px!important;background:var(--py-btn-bg)!important;
  color:var(--py-btn-ink)!important;box-shadow:0 5px 0 var(--py-btn-edge),inset 0 2px 0 #fff8!important;
  line-height:1.35;text-decoration:none;font-weight:750;isolation:isolate;overflow:visible;
  transform:none!important;scale:none!important;rotate:none!important;filter:none!important;
  transition:color .15s!important;-webkit-font-smoothing:auto;
}
.nino-game-ui .py-btn--primary {--py-btn-bg:#b0e5cc;--py-btn-ink:#174b3b;--py-btn-edge:#6da489}
.nino-game-ui .py-btn--danger {--py-btn-bg:var(--py-coral-soft);--py-btn-ink:var(--py-danger)}
.nino-game-ui .py-btn--ghost {--py-btn-bg:transparent;--py-btn-edge:transparent;--py-btn-line:transparent;box-shadow:none!important}
.nino-game-ui .py-btn--icon {width:44px!important;height:44px!important;min-width:44px!important;padding:9px!important;flex-shrink:0}
.nino-game-ui .py-btn--lg {min-height:54px;padding:13px 24px;font-size:16px}
.nino-game-ui .py-btn[data-py-surface] {background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.nino-game-ui .py-btn-face {
  position:absolute;inset:0;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;
}
.nino-game-ui .py-btn--ghost>.py-btn-face {box-shadow:none;background-image:none}
.nino-game-ui .py-btn:disabled>.py-btn-face {box-shadow:0 2px 0 var(--py-btn-edge);transform:none}
.nino-game-ui .py-btn:disabled {opacity:.56!important;cursor:not-allowed}
.nino-game-ui .nino-paper-surface {
  color:var(--py-ink);border-color:var(--py-line)!important;
  background-color:var(--py-paper)!important;background-image:var(--py-paper-grain)!important;
  box-shadow:2px 4px 0 var(--py-edge),0 12px 30px #26354d20!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.nino-game-ui .nino-paper-readout {font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:.01em}
.nino-game-ui :where(kbd,.nino-paper-key) {
  border:1px solid var(--py-line);border-bottom:3px solid var(--py-edge);border-radius:8px;
  background:var(--py-raised);color:var(--py-ink);box-shadow:none;font-variant-numeric:tabular-nums;
}
.nino-game-ui[data-py-motion="off"] :where(.py-btn-face,.nino-paper-surface),
.nino-game-ui.quiet-motion :where(.py-btn-face,.nino-paper-surface) {
  animation:none!important;transition:none!important;transform:none!important;
}
@media (prefers-reduced-motion:reduce) {
  .nino-game-ui :where(.py-btn-face,.nino-paper-surface) {
    animation:none!important;transition:none!important;transform:none!important;
  }
}
@media (forced-colors:active) {
  .nino-game-ui .py-btn-face,.nino-game-ui .nino-paper-surface {background:Canvas!important;border:2px solid CanvasText!important;box-shadow:none!important}
}

/* Keyboard focus is separate from the selected paper material. */
.nino-game-ui :is(.py-btn,.py-choice):focus:not(:focus-visible) {outline:none!important}
.nino-game-ui .py-btn :is(kbd,small) {color:var(--py-btn-ink)!important;opacity:1;font-size:12px;line-height:1.4}
.nino-game-ui .py-btn kbd {background:#fff7e578;border-color:currentColor}
.nino-game-ui .py-btn--primary img:not([src*="avatar"]) {filter:brightness(0) saturate(100%) invert(24%) sepia(18%) saturate(1385%) hue-rotate(108deg) brightness(89%)!important}
.nino-game-ui :is(.py-btn,.py-choice)>svg {color:inherit;stroke:currentColor}

.nino-game-ui #nino-party-trigger {position:relative!important;inset:auto!important}
.nino-game-ui select:disabled {appearance:none;background-image:none;color:var(--py-muted);opacity:1;cursor:default}
