/* One finish for every screen in Walk into PNN. Geometry and responsive placement stay
   with each component. This named layer deliberately uses important presentation rules:
   legacy games install their styles lazily, sometimes inline or important. A layer keeps
   the shared finish independent of load order without competing ID specificity. */
@layer pnn-ui-motion, pnn-ui;
:root {
  --ui-red: #d8262f; --ui-blue: #1747a6; --ui-gold: #f2c14e;
  --ui-ink: #f4f1e8; --ui-muted: #b9c2d2; --ui-line: #526078;
  --ui-glass: linear-gradient(145deg, #202939f5, #0d1420f5);
  --ui-raised: #243146; --ui-field: #0c1422; --ui-good: #a5dfbd; --ui-bad: #ffb2ac;
  --ui-title: 'Jersey 10', sans-serif; --ui-label: 'Pixelify Sans', sans-serif;
  --ui-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --ui-radius: 12px; --ui-control: 8px; --ui-space: 16px;
  --ui-shadow: 0 16px 48px #0008, inset 0 1px #ffffff0d;
  --ui-time: 180ms; --ui-ease: cubic-bezier(.2,.8,.2,1);
}
@layer pnn-ui {
  .pnn-ui { color: var(--ui-ink) !important; font-family: var(--ui-body) !important; line-height: 1.4 !important; }
  .pnn-ui, .pnn-ui * { box-sizing: border-box; font-variant-ligatures: none !important; }
  .ui-surface, .pnn-ui :is(.casino-card, .ph-card, .fl-pill, .fl-inv, .sk-bar, .sk-race, .fy-pill, .motorDash, .pk-hand, .pk-raise, .ac-pause > div), #shiftHelp article, #motorShop article, #roomKnocks > div {
    color: var(--ui-ink) !important; background: var(--ui-glass) !important;
    border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important; backdrop-filter: none !important;
  }
  .pnn-ui :is(button, select, input:not([type='range']), textarea), button.pnn-ui, #brand a.leave {
    font: 600 14px/1.35 var(--ui-label) !important; color: var(--ui-ink) !important;
    background: var(--ui-raised) !important; border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-control) !important; min-height: 44px !important; min-width: 44px !important;
    padding: 9px 12px !important; text-shadow: none !important;
    transition: background var(--ui-time), border-color var(--ui-time), color var(--ui-time) !important;
  }
  .pnn-ui :is(input:not([type='range']), textarea, select) {
    font: 16px/1.4 var(--ui-body) !important; background: var(--ui-field) !important;
    touch-action: auto; user-select: text;
  }
  .pnn-ui :is(button, a, select, summary) { touch-action: manipulation; }
  .pnn-ui :is(button, a, input, select, textarea, summary):focus-visible, button.pnn-ui:focus-visible {
    outline: 3px solid var(--ui-gold) !important; outline-offset: 3px !important;
  }
  .pnn-ui button:hover:enabled, button.pnn-ui:hover:enabled { background: #31435e !important; border-color: var(--ui-gold) !important; }
  .pnn-ui button:active:enabled, button.pnn-ui:active:enabled { background: var(--ui-blue) !important; }
  .pnn-ui button:disabled { opacity: .48 !important; cursor: default !important; }
  .pnn-ui button:is(.go, .primary, .ph-primary, .gold, [type='submit'], [data-got]),
  .pnn-ui button[aria-pressed='true'], .pnn-ui button[aria-selected='true'], .pnn-ui button.on {
    background: var(--ui-blue) !important; border-color: #7193d6 !important; color: #fff !important;
  }
  .pnn-ui button:is(.red, .danger) { background: var(--ui-red) !important; color: #fff !important; }
  .pnn-ui button.black { background: #080d16 !important; }
  .pnn-ui :is(h1, h2, h3, .ph-hero), #askTitle, #jobsCard header span,
  #careerCard header span, .pnn-ui .ph-card > b, .pnn-ui .shiftDetails > strong, #onnow .v, #walletNote b, #shiftPass > strong, #airportPass > strong {
    font-family: var(--ui-title) !important; font-weight: 400 !important;
    line-height: 1.05 !important; letter-spacing: .35px !important; color: var(--ui-ink) !important; text-shadow: none !important;
  }
  .pnn-ui :is(h2, h3), #askTitle { font-size: 30px !important; }
  .pnn-ui :is(.eyebrow, .kicker, .ph-eyebrow, .save-eyebrow, .af-title, .needs-kicker), #onnow .k {
    font: 600 12px/1.35 var(--ui-label) !important; letter-spacing: 1.3px !important; color: var(--ui-gold) !important;
  }
  .pnn-ui :is(p, .ds, .jobmeta, .note, .save-private, .h-note, .small, .ph-card small) {
    font-family: var(--ui-body) !important; color: var(--ui-muted) !important; line-height: 1.45 !important;
  }
  .pnn-ui :is(.status, .jobnote, .result), #saveStatus { color: var(--ui-gold) !important; }
  .pnn-ui :is(.error, .err, .no) { color: var(--ui-bad) !important; }
  .pnn-ui :is(header, .ask-head) { background: transparent !important; border-bottom: 1px solid var(--ui-line) !important; gap: 12px; }
  .pnn-ui :is(header button, .close, #askClose) { min-width: 44px !important; flex-shrink: 0; font-size: 22px !important; }
  .pnn-ui :is(header button, .close, #askClose):has(> svg) { padding: 10px !important; }
  .pnn-ui :is(.jobticket, .shiftDetails, .meter, output) { border-radius: var(--ui-control) !important; }
  .pnn-ui .jobticket { color: var(--ui-ink) !important; background: var(--ui-field) !important; border-left: 3px solid var(--ui-gold) !important; }
  .pnn-ui :is(.jobticket, .ph-card) { padding: var(--ui-space) !important; }
  .pnn-ui .ph-card { box-shadow: none !important; background: #ffffff05 !important; }
  .pnn-ui :is(.jobactions, .actions, .ph-list, .h-options) { gap: 8px !important; }
  .ui-icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; flex: none; }

  /* (the menus keep their own looks: chalkboard, leather, humidor, cellar; the owner, 2026-10-19: "the old menus were so much better") */
  #ask { overflow-y: auto; max-height: calc(100dvh - 100px); }
  #ask .ask-head { padding: 12px 16px !important; }
  body.pnn-phone #ask { padding: 8px 4px 20px !important; }

  /* Signal keeps its handset silhouette; its apps use the station's pixel icon kit. */
  #pnnPhone { border-radius: 28px !important; border-color: #69778b !important; transition: transform var(--ui-time) var(--ui-ease), opacity var(--ui-time), visibility var(--ui-time) !important; }
  #pnnPhone h2 { font-size: 32px !important; }
  #pnnPhone .ph-hero { font-size: 42px !important; }
  #pnnPhone .ph-status { font: 12px var(--ui-label) !important; color: var(--ui-muted) !important; }
  #pnnPhone .ph-status b { color: var(--ui-gold) !important; }
  #pnnPhone .ph-apps { gap: 18px 10px !important; }
  #pnnPhone .ph-apps button { padding: 0 !important; border: 0 !important; background: none !important; font-size: 12px !important; }
  #pnnPhone .ph-icon { background: var(--ui-raised) !important; border: 1px solid var(--ui-line); border-radius: var(--ui-radius) !important; color: var(--ui-gold) !important; box-shadow: inset 0 1px #ffffff16 !important; }
  #pnnPhone .ph-icon .ui-icon { width: 32px; height: 32px; }
  #pnnPhone .ph-apps button:first-child .ph-icon { background: var(--ui-blue) !important; color: #fff !important; }
  #phoneContent { touch-action: pan-y; }
  #phoneNotice { background: var(--ui-field) !important; color: var(--ui-gold) !important; border: 1px solid var(--ui-line); border-radius: var(--ui-control) !important; }

  /* Broadcast chrome: a thin red station rule, gold labels, quiet dark glass. */
  #onnow, #walletNote, #airportPass, #shiftPass { border-top: 3px solid var(--ui-red) !important; }
  #airportPass, #shiftPass { border-left: 1px solid var(--ui-line) !important; }
  #airportPass > strong, #shiftPass .shiftDetails > strong, .pnn-ui .ph-card > b { font-size: 24px !important; }
  #airportPass p, #shiftPass p { font-size: 13px !important; }
  .af-steps li { font: 12px/1.3 var(--ui-label) !important; color: var(--ui-muted) !important; }
  .af-steps li.active, .af-steps li.done { color: var(--ui-gold) !important; }
  .af-steps li.active span { background: var(--ui-gold) !important; color: #0d1420 !important; box-shadow: none !important; }
  #brand a:first-child { border-radius: var(--ui-control) !important; }
  #brand a.leave { display: inline-flex; align-items: center; }
  #room { padding: 9px 12px !important; }
  #prompt { font: 600 16px/1.4 var(--ui-label) !important; border-color: #9b864f !important; padding: 12px 16px !important; white-space: normal !important; }
  #prompt small { display: block !important; font: 14px/1.4 var(--ui-body) !important; color: var(--ui-muted) !important; }
  #prompt small button { margin: 8px 3px 0 !important; }
  #emotes { gap: 6px; }
  #emotes button { width: 44px !important; padding: 6px !important; font-size: 23px !important; }
  #wallet, #here, #help, #room, #onnow { box-shadow: 0 4px 14px #0004 !important; }
  #wallet b, #walletNote b { color: var(--ui-gold) !important; }
  #onnow .v { font-size: 25px !important; }
  #shiftHelp article { padding: 24px !important; font-family: var(--ui-body) !important; }
  #shiftHelp { background: #050a14b8 !important; }

  /* A color chip is content, not a button finish. Keep those colors and game outcomes. */
  #wdPick .wd-sw, #wdPick .wd-sw:hover:enabled, #wdPick .wd-sw[aria-pressed='true'] {
    background: var(--c) !important; padding: 0 !important; border-radius: 50% !important;
  }
  #wdPick .wd-sw[aria-pressed='true'] { outline: 3px solid var(--ui-gold) !important; outline-offset: 2px !important; }
  #wdPick :is(.wd-row > b, .wd-keys, .wd-note) { color: var(--ui-muted) !important; }
  #wdPick .wd-head { background: var(--ui-blue) !important; box-shadow: none !important; }
  #bjBar button.chip { border-radius: 50% !important; padding: 0 !important; }
  #bjBar button.chip[data-bj='c5'] { background: var(--ui-red) !important; }
  #bjBar button.chip[data-bj='c25'] { background: #236b48 !important; }
  #bjBar button.chip[data-bj='c100'] { background: #111722 !important; border-color: var(--ui-gold) !important; }
  body:is(.pool-aim, .darts-on) :is(#emotes, #phoneButton) { visibility: hidden; }
  body.ski-pad #phoneButton { visibility: hidden; }
  body:has(#wdPick:not([hidden])) #phoneButton { visibility: hidden; }
  #motorShop .models button { border-top: 4px solid var(--paint) !important; }
  .ui-sheet { overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #63748e #101927; }

  /* Keep collectible artwork and game-state colors intact; unify their surrounding controls. */
  #stOv .st-acts button, #stOv .st-x, #stOv .st-bk button { font-family: var(--ui-label) !important; }
  #stOv .st-box, #stOv .st-box:hover:enabled {
    background: #1747a60a !important; border: 1px solid #9aa6ba !important;
    color: #1747a6 !important; padding: 5px !important;
  }
  #stOv .st-x { min-width: 44px !important; }
  #pnn-daily { --ui-ink: #1d1e26; --ui-muted: #505968; }
  #stOv .st-face { --ui-ink: #1d1e26; --ui-muted: #505968; }
  #stOv .st-face :is(h2, h3) { color: #1747a6 !important; }
  body.st-open #phoneButton { visibility: hidden; }
  #saveAccount header { background: #101927 !important; color: var(--ui-gold) !important; }
  #saveAccount output { background: var(--ui-field) !important; color: var(--ui-gold) !important; border-color: var(--ui-line) !important; }
  #saveAccount::backdrop { background: #050a14b8 !important; }
  #casino-panel .casino-card { padding: 20px !important; }
  #casino-panel .numbers button { min-height: 44px !important; padding: 4px !important; }
  #casino-panel .eyebrow, #karaoke .eyebrow { margin-bottom: 8px; }
  #karaoke .cue { font: 400 28px/1.1 var(--ui-title) !important; color: var(--ui-gold) !important; }
  .pnn-ui button:is(.right, .correct, .win) { border-color: var(--ui-good) !important; }
  .pnn-ui button:is(.wrong, .lose) { border-color: var(--ui-bad) !important; }
  #shiftHelp article, .ui-sheet:not(dialog) { animation: ui-enter var(--ui-time) var(--ui-ease) !important; }
  .ui-sheet { transition: opacity var(--ui-time), translate var(--ui-time), display var(--ui-time) allow-discrete; }
  .ui-sheet[hidden], dialog.ui-sheet:not([open]) { opacity: 0; translate: 0 12px; }
  @starting-style { .ui-sheet { opacity: 0; translate: 0 12px; } }
  @keyframes ui-enter { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  @media (min-width:641px) {
    body.bj-seated #prompt { bottom: max(22%, 150px) !important; }
  }
  @media (max-width:640px) {
    :root { --ui-space: 12px; }
    #brand { left: 12px; }
    #brand a:first-child { font-size: 26px !important; padding: 0 6px !important; }
    body.pnn-phone #phoneButton { bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px)) !important; right: 16px; }
    body.phone-open #phoneButton { visibility: hidden; }
    #buttons button { padding: 8px !important; font-size: 13px !important; }
    #brand a.leave { padding: 8px !important; }
    #emotes { gap: 2px !important; }
    #emotes button { width: 44px !important; min-width: 44px !important; padding: 4px !important; }
    #onnow .v { font-size: 20px !important; }
    #askTitle { font-size: 28px !important; }
    #prompt { padding: 10px 12px !important; font-size: 15px !important; }
    #shiftPass .shiftDetails > strong { font-size: 20px !important; }
    #shiftPass p { font-size: 12px !important; }
  }
}
/* Earlier important layer wins over every component's motion, regardless of specificity. */
@layer pnn-ui-motion {
  @media (prefers-reduced-motion: reduce) {
    .pnn-ui, .pnn-ui *, .pnn-ui::before, .pnn-ui::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}