/* Pompon Arcade cafe UI. Canvas drawing and game artwork use their own palette. */
:root{
  --pa-bg:#f7f4eb;
  --pa-surface:#fffdf7;
  --pa-surface-soft:#eeebe1;
  --pa-text:#423d34;
  --pa-muted:#766b59;
  --pa-orange:#c88c4d;
  --pa-primary-text:#29261f;
  --pa-green:#5e754f;
  --pa-green-strong:#68795e;
  --pa-selected:#718462;
  --pa-border-color:#d8d1c1;
  --pa-border-width:1px;
  --pa-selected-width:2px;
  --pa-accent-width:4px;
  --pa-radius-card:18px;
  --pa-radius-control:13px;
  --pa-radius-pill:20px;
  --pa-shadow:none;
  --pa-shadow-dialog:0 12px 32px #423d3426;
  --pa-font:system-ui,-apple-system,"Segoe UI",sans-serif;
  --pa-size-xs:12px;
  --pa-size-sm:12px;
  --pa-size-body:14px;
  --pa-size-control:13px;
  --pa-size-brand:18px;
  --pa-size-card:25px;
  --pa-size-heading:clamp(28px,4.5vw,44px);
  --pa-weight-body:400;
  --pa-weight-strong:750;
  --pa-weight-brand:800;
  --pa-leading:1.6;
  --pa-heading-leading:1.2;
  --pa-tracking-heading:-1.8px;
  --pa-control-height:44px;
  --pa-control-padding:10px 14px;
  --pa-focus:3px solid #718462;
  --pa-motion:160ms;
  --pa-space-card:23px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--pa-bg);color:var(--pa-text);font-family:var(--pa-font);font-size:var(--pa-size-body);font-weight:var(--pa-weight-body)}
a{color:inherit}button,input,select{font:inherit}button,input,a{-webkit-tap-highlight-color:transparent}
h1{font-size:var(--pa-size-heading);font-weight:var(--pa-weight-brand);letter-spacing:var(--pa-tracking-heading);line-height:var(--pa-heading-leading)}
p{line-height:var(--pa-leading)}
.pa-button,.btn,.toggle,.opponent,.segmented button,.ending-restart,.ending-review,.ending-skip{font-family:var(--pa-font);font-size:var(--pa-size-control);font-weight:var(--pa-weight-strong);line-height:1.4;min-height:var(--pa-control-height);padding:var(--pa-control-padding);color:var(--pa-text);background:var(--pa-surface);border:var(--pa-border-width) solid var(--pa-border-color);border-radius:var(--pa-radius-control);box-shadow:var(--pa-shadow);cursor:pointer;transition:background var(--pa-motion),border-color var(--pa-motion),transform var(--pa-motion)}
.pa-button:hover:not(:disabled),.btn:hover:not(:disabled),.toggle:hover:not(:disabled),.opponent:hover:not(:disabled),.segmented button:hover:not(:disabled){background:var(--pa-surface-soft);border-color:var(--pa-selected)}
.pa-button:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(1px)}
.pa-button:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pa-primary,.btn.primary,.ending-restart{background:var(--pa-orange);border-color:var(--pa-orange);color:var(--pa-primary-text)}
.pa-primary:hover:not(:disabled),.btn.primary:hover:not(:disabled),.ending-restart:hover{background:var(--pa-orange);filter:brightness(1.06)}
.pa-button[aria-pressed=true],.toggle[aria-pressed=true],.opponent.selected,.segmented button.selected{background:var(--pa-surface-soft);border-color:var(--pa-selected);box-shadow:inset 0 0 0 1px var(--pa-selected);color:var(--pa-text)}
.pa-button[aria-pressed=false],.toggle[aria-pressed=false]{background:var(--pa-surface);border-color:var(--pa-border-color);box-shadow:var(--pa-shadow)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:var(--pa-focus);outline-offset:4px}
.pa-tag{display:inline-block;font-size:var(--pa-size-xs);font-weight:var(--pa-weight-body);line-height:1.4;padding:5px 9px;border:var(--pa-border-width) solid var(--pa-border-color);border-radius:var(--pa-radius-pill);color:var(--pa-muted);background:transparent;letter-spacing:normal;vertical-align:middle}
.pa-card{background:var(--pa-surface);border:var(--pa-border-width) solid var(--pa-border-color);border-radius:var(--pa-radius-card);box-shadow:var(--pa-shadow)}
.pompon-game-nav{box-sizing:border-box;max-width:1120px;margin:0 auto 10px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:var(--pa-size-control)/1.4 var(--pa-font);color:var(--pa-muted);border-bottom:var(--pa-border-width) solid var(--pa-border-color)}
.pompon-game-nav a{color:inherit;text-decoration:none}.pompon-game-nav a:hover{text-decoration:underline}.pompon-game-brand{font-weight:var(--pa-weight-brand);font-size:var(--pa-size-brand);color:var(--pa-text)!important}.pompon-nav-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.pompon-nav-cat{display:flex;align-items:center;gap:6px;font-weight:650}.pompon-nav-cat img{width:25px;height:30px;object-fit:contain;image-rendering:pixelated}
@media(max-width:480px){.pompon-game-nav{padding:10px 12px;font-size:var(--pa-size-sm);gap:8px}.pompon-nav-links{gap:11px}.pompon-game-brand{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pa-button,.btn,.toggle,.opponent,.segmented button{transition:none}}

/* Binary settings: filled On, plain Off; pace/selection controls are unchanged. */
.pa-toggle[aria-pressed="true"],.pa-toggle[aria-pressed="true"]:hover:not(:disabled),.toggle[aria-pressed="true"],.toggle[aria-pressed="true"]:hover:not(:disabled){background:var(--pa-green);border-color:var(--pa-green);color:var(--pa-surface);box-shadow:none}
.pa-toggle[aria-pressed="false"],.pa-toggle[aria-pressed="false"]:hover:not(:disabled),.toggle[aria-pressed="false"],.toggle[aria-pressed="false"]:hover:not(:disabled){background:var(--pa-surface);border-color:var(--pa-border-color);color:var(--pa-text);box-shadow:none}