/* Shared factory chrome. Gameplay artwork keeps its own palette. */
:root {
  --pp-ink: #263744;
  --pp-panel: #c3cbd3;
  --pp-shadow: #929eaa;
  --pp-paper: #eef2f5;
  --pp-blue: #2563eb;
}
body { color: var(--pp-ink); font-family: Arial, Helvetica, sans-serif; }
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog, .patch-notes-panel) {
  border: 3px solid var(--pp-ink);
  border-radius: 10px;
  background: var(--pp-paper);
  color: var(--pp-ink);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) :is(header, footer),
body .account-header, body .patch-notes-header {
  background: var(--pp-panel);
  color: var(--pp-ink);
  border-bottom: 2px solid var(--pp-shadow);
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) :is(button, input, select, textarea),
body .patch-notes-toggle, body .canvas-action {
  font-family: inherit;
  border: 2px solid var(--pp-ink);
  border-radius: 7px;
  min-height: 44px;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) button,
body .patch-notes-toggle {
  background: var(--pp-panel);
  color: var(--pp-ink);
  box-shadow: 0 3px 0 var(--pp-shadow), inset 0 1px 0 #edf2f5;
  font-weight: 800;
  padding: 9px 14px;
  cursor: pointer;
  touch-action: manipulation;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) button:is(.primary, [type=submit], [aria-selected=true]) {
  background: var(--pp-blue);
  color: #fff;
  box-shadow: 0 3px 0 #193f98, inset 0 1px 0 #90b5ff;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) button:disabled {
  background: #d5dbe1; color: #526170; box-shadow: none; cursor: default;
}
body :is(button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #e7a51f; outline-offset: 3px;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) button:active:not(:disabled) {
  transform: translateY(2px); box-shadow: none;
}
body :is(#pp-progress, #pp-workshop) .card,
body :is(.account-profile-card, .stats-card, .friend-card) {
  border: 2px solid var(--pp-shadow);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
body #pp-progress .card.earned { border-color: #178461; background: #eaf5ee; }
body #pp-progress .card.locked { background: #e0e5ea; }
body #pp-progress .mission-card.no-hit { background: #fff1b8; border-color: #b98518; box-shadow: none; }
body :is(#pp-progress, #pp-workshop) :is(.meta, .pp-note) { font-size: 14px; line-height: 1.45; }
body #pp-progress header { position: sticky; top: 0; z-index: 3; flex-wrap: wrap; gap: 8px; }
body #pp-progress main { min-width: 0; }
body #pp-progress :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
body #pp-progress .actions { gap: 10px; }
body #pp-announcement { border-radius: 8px; box-shadow: 0 4px 0 #26374444; padding-right: 56px; }
body #pp-announcement button { width: 44px; height: 44px; }
body .leaderboard-header { background: #334b63; box-shadow: none; }
body .leaderboard-list li { background-image: none; box-shadow: none; }
body .leaderboard-list :is(.player-name, .leaderboard-name),
body .friend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .account-profile-card { background-image: none; }
body .patch-notes-toggle { box-shadow: 0 3px 0 var(--pp-shadow); }
body #pp-progress[data-panel=result] { background: #eef2f5; color: var(--pp-ink); }
body #pp-progress[data-panel=result] .reward-line { color: #087650; }
@media (max-width: 760px) {
  body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) {
    font-size: 15px; line-height: 1.4;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) :is(input,select,textarea) { font-size: 16px; }
  body #pp-progress h1 { font-size: 21px; }
  body #pp-progress .tabs { flex-wrap: wrap; }
  body #pp-progress .tabs button { white-space: normal; min-width: 100px; font-size: 14px; }
  body #pp-progress .cargo-card { min-width: 120px; }
  body #pp-progress .actions > button { flex: 1 1 130px; }
  body .account-dialog .icon-button { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body .confetti { display: none; }
  body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) * { scroll-behavior: auto; transition: none; }
}

/* Secondary screens use the same factory panels as the canvas. */
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog, .patch-notes-panel) {
  box-sizing: border-box;
  scrollbar-gutter: stable;
}
body :is(#pp-progress, #pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) :is(h1,h2,h3,p,span,strong) {
  overflow-wrap: anywhere;
}
body :is(#pp-workshop, .account-dialog, .run-history-dialog, .pp-settings-dialog, .pp-catalog-dialog, .seed-entry-dialog) :is(header, .account-header) {
  position: sticky; top: 0; z-index: 3;
}
body :is(#pp-progress, #pp-workshop) footer {
  position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap;
  background: var(--pp-panel); border-top: 2px solid var(--pp-shadow);
}
body #pp-workshop .pp-selected {
  border: 3px solid var(--pp-blue); background: #e6efff;
}
body #pp-workshop .pp-preview { border: 2px solid var(--pp-shadow); border-radius: 8px; }
body #pp-workshop .pp-buy { background: #14734e; color: white; }
body #pp-workshop .pp-card { box-shadow: none; }
body #pp-progress[data-panel=result] button { background: var(--pp-panel); color: var(--pp-ink); border-color: var(--pp-ink); }
body #pp-progress[data-panel=result] button.primary { background: var(--pp-blue); color: white; }
body #pp-progress[data-panel=result] .outcome-header { background: transparent; }
body #pp-workshop[data-report=true] { background: var(--pp-paper); color: var(--pp-ink); }
body .account-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
body .account-tabs button { flex: 1 1 90px; }
body .account-dialog :is(form, .form-row, .friend-actions, .leaderboard-actions) { min-width: 0; }
body .account-dialog :is(input, select, textarea) { max-width: 100%; box-sizing: border-box; }
body .account-dialog :is(.account-header, .leaderboard-header) p { line-height: 1.4; }
body .run-history-row { width: 100%; text-align: left; }
body .run-history-dialog nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body .run-history-dialog [data-close], body .account-header .icon-button { min-width: 44px; flex-shrink: 0; }
body .run-history-dialog::backdrop { background: #172433aa; }
body .patch-notes-panel { padding: 20px; line-height: 1.55; }
@media (max-width: 600px) {
  body #pp-progress .grid { grid-template-columns: minmax(0, 1fr); }
  body #pp-progress .row { flex-wrap: wrap; gap: 8px; }
  body #pp-progress :is(.actions, .tabs) { flex-wrap: wrap; }
  body #pp-progress .actions { position: sticky; bottom: 0; background: var(--pp-paper); padding: 10px 0; z-index: 2; }
  body #pp-workshop .pp-preview { align-items: center; gap: 8px; }
  body #pp-workshop .pp-preview img { width: 90px; height: 90px; flex-shrink: 0; }
  body #pp-workshop footer button { flex: 1 1 90px; }
  body :is(.account-overlay, .patch-notes-overlay) { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
}

body .pp-settings-dialog { width: min(520px, calc(100vw - 16px)); padding: 0; margin: auto; box-shadow: 0 5px 0 #26374466; }
body .pp-settings-dialog::backdrop { background: #172433aa; }
body .pp-settings-dialog header { display:flex; justify-content:space-between; align-items:start; gap:16px; padding:16px; }
body .pp-settings-dialog h2 { margin:0; font-size:22px; }
body .pp-settings-dialog h3 { font-size:16px; margin:22px 0 12px; }
body .pp-settings-dialog p { margin:8px 0; line-height:1.4; font-size:14px; }
body .pp-settings-dialog section { padding:0 18px 18px; }
body .pp-settings-dialog label { display:flex; justify-content:space-between; font-weight:700; }
body .pp-settings-dialog input[type=range] { width:100%; margin:4px 0 12px; accent-color:var(--pp-blue); padding:0; }
body .pp-settings-dialog footer { display:flex; flex-wrap:wrap; gap:10px; padding:14px; position:sticky; bottom:0; }
body .pp-settings-dialog .settings-actions { display:flex; flex-wrap:wrap; gap:10px; }
body .pp-settings-dialog button { font-size:14px; }

body:has(#accountOverlay:not([hidden]), #pp-progress:not([hidden]), #pp-workshop:not([hidden]), dialog[open]) .patch-notes-toggle { visibility: hidden; pointer-events: none; }
body .pp-catalog-dialog { width:min(680px,calc(100vw - 16px)); padding:0; margin:auto; }
body .pp-catalog-dialog::backdrop { background:#172433aa; }
body .pp-catalog-dialog header { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px; }
body .pp-catalog-dialog h2 { font-size:20px; margin:0; }
body .pp-catalog-dialog section { padding:16px; }
body .pp-catalog-dialog h3 { font-size:17px; margin:12px 0 6px; }
body .pp-catalog-dialog h4 { margin:4px 0; font-size:15px; }
body .pp-catalog-dialog p { font-size:14px; line-height:1.45; margin:6px 0; }
body .pp-catalog-dialog input { width:100%; box-sizing:border-box; margin:8px 0; }
body .pp-catalog-dialog article { padding:12px; border:2px solid var(--pp-shadow); border-radius:8px; background:white; margin:10px 0; }
body .pp-catalog-dialog .guide-form { display:flex; align-items:center; gap:12px; }
body .pp-catalog-dialog .guide-form img { width:76px; height:76px; object-fit:contain; flex-shrink:0; }
body .pp-catalog-dialog .guide-upgrades .guide-form { padding:12px 0; border-bottom:1px solid var(--pp-shadow); }
body .pp-catalog-dialog summary { cursor:pointer; min-height:44px; padding:12px 0; box-sizing:border-box; font-weight:700; font-size:14px; }
body .pp-catalog-dialog [hidden] { display:none; }
@media(max-width:600px) { body #pp-progress[data-panel=achievements] .grid { grid-template-columns:minmax(0,1fr); } }

body .pp-loading-error { position:absolute; z-index:100; left:50%; top:50%; transform:translate(-50%,-50%); width:min(420px,calc(100% - 24px)); box-sizing:border-box; padding:24px; background:var(--pp-paper); color:var(--pp-ink); border:3px solid var(--pp-ink); border-radius:10px; text-align:center; box-shadow:0 5px 0 var(--pp-shadow); }
body .pp-loading-error h2 { margin:0 0 12px; font-size:23px; }
body .pp-loading-error p { font-size:16px; line-height:1.5; }
body .pp-loading-error button { min-height:44px; border:2px solid var(--pp-ink); border-radius:7px; background:var(--pp-blue); color:white; font:700 16px sans-serif; padding:10px 24px; cursor:pointer; }

/* Clear objectives first; secondary story and maps stay available on demand. */
body #pp-progress .mission-goal { padding:14px 18px; background:#fff1c9; border:2px solid #ad8532; border-radius:8px; }
body #pp-progress .mission-goal h3 { margin:0; }
body #pp-progress .mission-map summary { min-height:44px; padding:12px 0; box-sizing:border-box; font-weight:800; cursor:pointer; }
body #pp-progress .crew-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
body #pp-progress .crew-list article { display:flex; align-items:center; gap:12px; background:white; padding:10px; border:2px solid var(--pp-shadow); border-radius:8px; }
body #pp-progress .crew-list img { width:64px; height:64px; object-fit:contain; flex-shrink:0; }
body #pp-progress .crew-list p { font-size:14px; margin:6px 0 0; }
body #pp-progress .result-totals { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; padding:16px; background:#dfe7ed; border-radius:8px; }
body #pp-progress .briefing-start { position:sticky; top:0; z-index:2; padding:12px 0; background:var(--pp-paper); }
body #pp-progress .notice[role=status] { padding:16px; }
@media(prefers-reduced-motion:reduce) { body button:active:not(:disabled) { transform:none; } }

body .friend-actions { display:flex; flex-wrap:wrap; gap:8px; }
body :is(.leaderboard-name, .friend-name):focus { white-space:normal; overflow-wrap:anywhere; outline:2px solid #e7a51f; outline-offset:3px; }
body .friend-name[tabindex] { cursor:pointer; }
body .friend-action { min-width:70px; }

body #pp-progress[data-panel=briefing] { display:flex; flex-direction:column; }
body #pp-progress[data-panel=briefing] header { flex-shrink:0; }
body #pp-progress[data-panel=briefing] main { overflow-y:auto; min-height:0; flex:1 1 auto; }
body #pp-progress[data-panel=briefing] .briefing-start { position:static; flex-shrink:0; margin:0; padding:12px 20px; border-top:2px solid var(--pp-shadow); background:var(--pp-panel); }

/* The machine workshop uses the same flat plates as the factory. */
body #pp-workshop[data-report="false"] {display:flex;flex-direction:column;overflow:hidden;height:calc(100dvh - 24px);box-shadow:5px 6px 0 #26374455;}
body #pp-workshop[data-report="false"] header {flex:none;position:static;padding:14px 16px;border-bottom:3px solid var(--pp-ink);}
body #pp-workshop[data-report="false"] main {flex:1;min-height:0;overflow:auto;padding:16px;}
body #pp-workshop[data-report="false"] footer {flex:none;position:static;border-top:3px solid var(--pp-ink);flex-wrap:wrap;background:var(--pp-panel);}
body #pp-workshop .pp-preview {background:#dae1e7;border:2px solid var(--pp-ink);border-radius:7px;padding:12px;box-shadow:inset 0 -5px 0 #bac5cf;}
body #pp-workshop .pp-preview b {font-size:19px;line-height:1.2;}
body #pp-workshop .pp-card {background:var(--pp-paper);border:2px solid var(--pp-shadow);padding:12px;box-shadow:0 3px 0 var(--pp-shadow);}
body #pp-workshop .pp-card.pp-selected {background:#dce9ff;border:3px solid var(--pp-blue);box-shadow:0 3px 0 #1e40af;}
body #pp-workshop .pp-stats {border-left:5px solid #178461;border-radius:3px;background:#e5efe9;font-weight:700;}
body #pp-workshop .pp-buy:not(:disabled) {background:var(--pp-blue);color:white;box-shadow:0 3px 0 #193f98;}
body #pp-workshop details {border-top:2px solid var(--pp-shadow);border-bottom:2px solid var(--pp-shadow);}
@media(min-width:601px){body #pp-workshop[data-report="false"]{height:80dvh;}}

@media(min-width:601px){body #pp-workshop[data-report="false"]{width:min(760px,calc(100vw - 40px));}body #pp-workshop .pp-preview img{width:150px;height:130px;}body #pp-workshop .pp-card img{width:88px;height:76px;}body #pp-workshop main{font-size:16px;line-height:1.5;}}

/* Keep tower cards and their disclosure controls aligned across each row. */
body #pp-progress[data-panel="achievements"] .grid:has(> [data-kind]) { align-items:stretch; }
body #pp-progress[data-panel="achievements"] .card[data-kind] { grid-template-rows:auto auto 1fr; align-content:start; }
body #pp-progress[data-panel="achievements"] .card[data-kind] > details { align-self:end; }
@media(max-width:600px) { body #pp-progress[data-panel="achievements"] .card[data-kind] { grid-template-rows:54px auto auto 1fr; } }

/* Native campaign/mode screens keep the DOM panel hidden; still reserve
   their navigation by removing the floating release-notes control. */
body:has(#pp-progress[data-panel="campaign"], #pp-progress[data-panel="modes"]) .patch-notes { display: none; }
@media (max-width: 760px) {
  body .patch-notes { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; }
  body .patch-notes-toggle { min-width: 170px; gap: 18px; font-size: 12px; padding: 8px 12px; }
}