/* Pirate Quest 111: readable controls over a stable, independent vector scene. */
.pq-app {
  --pq-font: max(16pt, 1rem);
  --pq-cream: #f7edd7;
  --pq-gold: #e2bd7c;
  --pq-muted: #c1d5c8;
  --pq-ink: #0a2932;
  width: calc(100% - 40px); max-width: 2440px; margin: 24px auto 40px;
  color: var(--pq-cream); font: var(--pq-font)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate; position: relative; outline: none !important;
}
.pq-app *, .pq-app *::before, .pq-app *::after { box-sizing: border-box; }
.pq-app [hidden] { display: none !important; }
.pq-app :where(p,span,small,strong,b,em,label,input,select,textarea,button,a,td,th,li,summary,div) { font-size: inherit; }
.pq-app :is(button,input,select,textarea) { font-family: inherit; line-height: 1.4; }
.pq-app button { cursor: pointer; }
.pq-app button:disabled { cursor: default; }
.pq-app :is(button,a,input,select,textarea,summary):focus-visible { outline: 4px solid #f6cf86; outline-offset: 4px; }
.pq-app svg { flex-shrink: 0; }
.pq-shell { border: 2px solid #4d777a; border-radius: 24px; overflow: clip; background: #0a2b35; box-shadow: 0 24px 70px #001a2433; }
.pq-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 122px; gap: 20px 28px; padding: 22px 28px; background: linear-gradient(100deg,#103640,#0a2731); border-bottom: 1px solid #9fc1b93d; }
.pq-brand { display: flex; align-items: center; gap: 16px; color: var(--pq-cream) !important; text-decoration: none !important; min-width: 0; }
.pq-brand__mark { width: 66px; height: 66px; border: 2px solid #d8bd7b9c; border-radius: 50%; display: grid; place-items: center; color: #edcb87; background: #dec28a0a; flex: 0 0 66px; }
.pq-brand__mark svg { width: 38px; height: 38px; }
.pq-brand__name { display: block; font: 500 max(30pt,2.6rem)/1.05 Georgia,"Times New Roman",serif; letter-spacing: -.035em; white-space: nowrap; }
.pq-brand__dot { color: var(--pq-gold); }
.pq-eyebrow { display: block; font-size: var(--pq-font); font-weight: 600; letter-spacing: .07em; color: #d7c89f; line-height: 1.4; }
.pq-brand .pq-eyebrow { color: #b6cec5; margin-bottom: 5px; letter-spacing: .05em; }
.pq-header__tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.pq-tool { width: 60px; height: 60px; min-width: 60px; padding: 12px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #8fb5b35c; background: #96c4bc08; color: #e0e9d8; transition: background .15s,border-color .15s; }
.pq-tool svg { width: 30px; height: 30px; }
.pq-tool:hover { background: #d7ca9c1c; border-color: #e2bd7cb3; color: #ffe6ae; }
.pq-online { display: flex; align-items: center; gap: 11px; color: #bfd4c8; margin-right: 14px; }
.pq-online b,.pq-sailing-state b,.pq-live-dot { display: inline-block; width: 10px; height: 10px; background: #b4d4b1; border-radius: 50%; box-shadow: 0 0 8px #b4d4b12b; flex: 0 0 auto; }
.pq-stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,440px); grid-template-areas: "status status" "hud hud" "scene panel" "dock dock" "log log" "attribution attribution"; align-items: stretch; gap: 22px; padding: 24px; position: relative; background: #0c313b; }
.pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-areas: "status" "hud" "scene" "dock" "log" "attribution"; }
.pq-topline { grid-area: status; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; min-width: 0; }
.pq-position { display: flex; align-items: center; gap: 15px; min-width: 0; }
.pq-position__icon { color: #d5e1c9; display: inline-flex; }
.pq-position__icon svg { width: 34px; height: 34px; }
.pq-position strong { display: block; font: 500 max(24pt,1.9rem)/1.2 Georgia,serif; color: #f2edd6; margin: 5px 0; overflow-wrap: anywhere; }
.pq-position .pq-eyebrow { color: #bcd3c2; }
.pq-coordinates { display: block; color: #bed1c2; overflow-wrap: anywhere; }
.pq-route { display: block; border: 0; background: none; padding: 6px 0; margin: 5px 0 0; text-align: left; color: #f0d39a; text-decoration: underline; text-underline-offset: 5px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; min-height: 44px; }
.pq-route:hover { color: #fff0c1; }
.pq-conditions { display: flex; align-items: center; gap: 12px; color: #c7d9c8; }
.pq-conditions svg { width: 30px; height: 30px; }
.pq-conditions__separator { padding: 0 14px; color: #b7c9b9; }
.pq-hud { grid-area: hud; display: grid; grid-template-columns: minmax(260px,1.25fr) repeat(4,minmax(175px,1fr)); align-items: center; gap: 20px; min-width: 0; padding: 20px 24px; background: #082a35; border: 1px solid #83b3ae70; border-radius: 15px; box-shadow: 0 8px 24px #001a2420; }
.pq-hull { min-width: 0; }
.pq-hull__label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; color: #d0e0ce; margin-bottom: 12px; }
.pq-hull__label>span { display: flex; align-items: center; gap: 8px; }
.pq-hull__label svg { width: 28px; height: 28px; }
.pq-hull__label strong { font-weight: 500; white-space: nowrap; }
.pq-meter { height: 8px; border-radius: 8px; overflow: hidden; background: #001c28; }
.pq-meter>span { height: 100%; display: block; border-radius: 8px; background: linear-gradient(90deg,#58a68d,#c1d8ae); transition: width .4s; }
.pq-meter>.pq-meter--low { background: linear-gradient(90deg,#c86650,#f6b48d); }
.pq-resource { min-width: 0; }
.pq-resource>span { display: flex; align-items: center; gap: 10px; color: #f3e7c7; }
.pq-resource>span svg { width: 30px; height: 30px; color: #e5c78c; }
.pq-resource b { font-size: max(21pt,1.65rem); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pq-resource small { display: block; color: #bcd2c1; margin-top: 5px; line-height: 1.3; }
.pq-resource--safe>span { color: #f4d99d; }
.pq-scene { grid-area: scene; position: relative; isolation: isolate; width: 100%; min-width: 0; min-height: 300px; aspect-ratio: 16/9; background: #041c26; border: 1px solid #6c969340; border-radius: 17px; overflow: hidden; }
.pq-ocean { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.pq-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 55% 55%,transparent 20%,#062c3b26 95%),linear-gradient(0deg,#05233342,transparent 25%); }
.pq-welcome { grid-area: scene; align-self: center; justify-self: start; position: relative; z-index: 2; padding: 34px; margin-left: 3%; width: min(720px,53%); min-width: 0; pointer-events: none; text-shadow: 0 1px 8px #04243399; }
.pq-welcome__rule { width: 74px; height: 2px; background: #e2c590; display: block; margin-bottom: 22px; }
.pq-welcome>.pq-eyebrow { color: #eed6a9; }
.pq-welcome h1 { color: #fff0d3; font: 400 clamp(42pt,4.3vw,76pt)/1.03 Georgia,"Times New Roman",serif; letter-spacing: -.04em; margin: 22px 0; }
.pq-welcome h1 em { color: #edc990; font-size: inherit; font-weight: 400; }
.pq-welcome p { color: #e2e6d1; line-height: 1.7; margin: 0 0 24px; }
.pq-welcome__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; pointer-events: auto; }
.pq-welcome__note { display: flex; align-items: center; gap: 12px; color: #d0ddc6; margin-top: 28px; line-height: 1.4; }
.pq-welcome__note span { width: 8px; height: 8px; background: #d3d8aa; border-radius: 50%; flex: 0 0 auto; }
.pq-link-button { border: 0; background: none; color: #f1e8d1; padding: 12px 0; min-height: 56px; border-bottom: 1px solid #d2dfbc8c; text-shadow: inherit; }
.pq-panel { grid-area: panel; width: auto; min-width: 0; max-height: 900px; padding: 24px; border: 1px solid #a3beac66; border-radius: 17px; background: #0c303b; overflow: visible; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #b8c398 #0d2b36; align-self: stretch; }
.pq-panel__eyebrow { display: flex; align-items: center; gap: 10px; color: #e1cb97; font-weight: 600; letter-spacing: .04em; line-height: 1.4; margin-bottom: 20px; }
.pq-panel__eyebrow svg { width: 28px; height: 28px; }
.pq-panel h2 { font: 400 max(25pt,2rem)/1.17 Georgia,"Times New Roman",serif; color: #fff0d5; margin: 0 0 18px; overflow-wrap: anywhere; letter-spacing: -.02em; }
.pq-panel h2 em { color: #e6c792; font-size: inherit; }
.pq-panel p { color: #c1d6c8; line-height: 1.65; margin: 0 0 20px; }
.pq-panel__actions { display: flex; flex-direction: column; gap: 12px; }
.pq-panel__actions .pq-button { width: 100%; }
.pq-panel__actions--pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.pq-panel__foot { color: #bfd1bc; border-top: 1px solid #a9c4ad40; margin-top: 20px; padding-top: 18px; line-height: 1.55; }
.pq-panel__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; color: #c0d1b8; margin: 0 0 18px; }
.pq-panel__stats b { color: #f2dfb4; font-weight: 600; margin-left: 8px; }
.pq-opponent-mark { height: 82px; width: 82px; border: 1px solid #d5bf837d; color: #e4c78a; background: #d2c28b09; border-radius: 50%; display: grid; place-items: center; margin: 0 0 22px; }
.pq-opponent-mark svg { width: 48px; height: 48px; }
.pq-opponent-hull>span { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; color: #d0deca; margin-bottom: 10px; }
.pq-opponent-hull b { color: #f6e5bd; font-weight: 500; }
.pq-meter--enemy>span { background: linear-gradient(90deg,#ce7a61,#efbb8f); }
.pq-battle-clock { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; color: #edd29a; font-weight: 500; }
.pq-battle-clock b { font: 500 max(22pt,1.6rem)/1.2 Georgia,serif; color: #fff0d4; }
.pq-battle-last { border-top: 1px solid #aec5ab40; padding: 16px 0; }
.pq-battle-last p { color: #d3ddc7; margin-bottom: 12px; line-height: 1.55; }
.pq-battle-actions { position: sticky; bottom: -24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; background: #0c303b; padding: 14px 0 2px; margin: 0 -1px -1px; box-shadow: 0 -12px 18px #0c303bf0; z-index: 2; }
.pq-battle-actions .pq-button { padding: 12px 8px; min-height: 78px; gap: 7px; }
.pq-battle-actions .pq-button svg { display: none; }
.pq-island-vault { padding: 18px; border: 1px solid #bdc6a960; border-radius: 12px; background: #c5d3ad08; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; color: #e3c88f; }
.pq-island-vault>svg { width: 38px; height: 38px; }
.pq-island-vault small { display: block; color: #c5d5bf; }
.pq-island-vault strong { font: 500 max(24pt,2rem)/1.4 Georgia,serif; color: #fff0ce; }
.pq-island-vault strong span { color: #c9d7be; font-family: inherit; font-size: var(--pq-font); font-weight: 400; line-height: 1.4; }
.pq-safe-label { color: #d0e5bf; background: #a9c58e14; border: 1px solid #b4cda16b; border-radius: 5px; padding: 4px 8px; margin-left: auto; }
.pq-amount { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #e0e5cd; margin-bottom: 18px; }
.pq-amount input { width: 160px; min-height: 56px; padding: 10px 14px; background: #052630; border: 2px solid #9cbaa57d; color: #fff1cf; border-radius: 9px; text-align: right; }
.pq-amount input::placeholder { color: #c1cdb4; opacity: 1; }
.pq-port-services { border-top: 1px solid #c3ceb34a; margin-top: 22px; padding: 16px 0; }
.pq-button--service { width: 100%; justify-content: flex-start; border: 0; background: transparent; padding: 14px 0; gap: 15px; text-align: left; }
.pq-button--service>svg { color: #dfce9b; }
.pq-button--service small { display: block; color: #bfd2bf; margin-top: 5px; font-weight: 400; }
.pq-button--service:hover { background: #ffffff09; }
.pq-max-tier { display: flex; align-items: center; gap: 10px; color: #ebd5a2 !important; padding-top: 12px; }
.pq-max-tier svg { width: 28px; height: 28px; }
.pq-island-service-note { color: #cfddc4; line-height: 1.6; border-top: 1px solid #c5ceb04a; padding-top: 18px; margin-top: 20px !important; }
.pq-island-depart { position: sticky; bottom: -24px; background: #0c303b; padding: 14px 0 2px; margin: 8px -1px -1px; box-shadow: 0 -12px 18px #0c303bf0; z-index: 2; }
.pq-sea-rule { height: 2px; width: 70px; background: #d1c4928c; margin: 28px 0; }
.pq-next-course { display: flex; align-items: flex-start; gap: 16px; color: #e4e4c7; }
.pq-next-course svg { width: 32px; height: 32px; color: #e5cd8c; }
.pq-next-course small { display: block; color: #bfd1bd; margin-top: 8px; }
.pq-nearby { border-top: 1px solid #bed0b24a; margin-top: 25px; padding-top: 22px; }
.pq-nearby>.pq-eyebrow { margin-bottom: 18px; }
.pq-nearby>div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pq-nearby>div>span { flex: 1 1 100%; color: #ebedd6; overflow-wrap: anywhere; }
.pq-nearby .pq-live-dot { margin-right: 10px; }
.pq-nearby small { display: block; color: #bfd0b8; margin-top: 7px; }
.pq-button--small { min-height: 56px; padding: 10px 14px; }
.pq-dialogue { border-top: 1px solid #bfd0b34a; margin-top: 20px; padding-top: 15px; display: flex; flex-direction: column; }
.pq-button--dialogue { border: 0; background: transparent; justify-content: flex-start; padding: 13px 0; line-height: 1.6; text-align: left; }
.pq-dialogue .pq-button::before { content: "↳"; color: #f1d69c; font-size: var(--pq-font); }
.pq-chart-compass { position: absolute; right: 24px; bottom: 30px; width: 130px; height: 130px; color: #b9d1b091; pointer-events: none; }
.pq-chart-compass svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.pq-chart-compass__fill { fill: #d8d5adad; }
.pq-chart-compass>span { position: absolute; font: var(--pq-font)/1 Georgia,serif; color: #d7dfc4; }
.pq-chart-compass__north { top: -12px; left: calc(50% - 9px); }
.pq-chart-compass__south { bottom: -14px; left: calc(50% - 7px); }
.pq-chart-compass__west { left: -15px; top: calc(50% - 10px); }
.pq-chart-compass__east { right: -12px; top: calc(50% - 10px); }
.pq-voyage-log { grid-area: log; padding: 22px 26px; border: 1px solid #8cb09b4d; border-radius: 14px; background: #092a35; min-width: 0; }
.pq-voyage-log>.pq-eyebrow { color: #dfd1a3; margin-bottom: 14px; }
.pq-voyage-log ol { margin: 0; padding-left: 25px; color: #d2dfc8; }
.pq-voyage-log li { line-height: 1.6; margin: 10px 0; opacity: 1 !important; overflow-wrap: anywhere; }
.pq-dock { grid-area: dock; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; padding: 20px 24px; border: 1px solid #aec5a569; border-radius: 15px; background: #092b36; box-shadow: 0 10px 25px #011e2633; min-width: 0; }
.pq-dock__ship { display: flex; align-items: center; gap: 17px; min-width: 0; }
.pq-dock__badge { width: 66px; height: 66px; border: 1px solid #e0c79480; background: #c5c08b0c; display: grid; place-items: center; border-radius: 50%; color: #efce8c; flex: 0 0 66px; }
.pq-dock__badge svg { width: 38px; height: 38px; }
.pq-dock__ship .pq-eyebrow { color: #c0d3c0; }
.pq-dock__ship strong { display: block; font: 500 max(23pt,1.8rem)/1.35 Georgia,serif; color: #fff0ca; }
.pq-power { width: min(290px,100%); background: #001d29; height: 7px; display: block; border-radius: 5px; overflow: hidden; margin: 9px 0; }
.pq-power>span { display: block; width: 10%; height: 100%; background: #e4c487; transition: width .4s; }
.pq-dock__ship small { display: block; color: #c9d9be; line-height: 1.5; overflow-wrap: anywhere; }
.pq-course { display: flex; align-items: center; gap: 8px; }
.pq-course button { width: 64px; height: 64px; min-width: 56px; border: 2px solid #abc5ad78; background: #bdd2b30d; color: #f3ecd0; font-size: max(25pt,2rem); line-height: 1; border-radius: 10px; display: grid; place-items: center; padding: 0; }
.pq-course button:hover:not(:disabled) { background: #cadfb32b; border-color: #e4d49f; }
.pq-course button:disabled { opacity: .55; }
.pq-course__vertical { display: flex; flex-direction: column; gap: 8px; }
.pq-course__vertical button { width: 60px; height: 56px; }
.pq-dock__actions { min-width: 150px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pq-sailing-state { display: flex; align-items: center; gap: 11px; color: #d4e3cd; white-space: normal; }
.pq-stop { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 58px; min-width: 142px; padding: 12px 18px; border: 1px solid #b7c9a880; border-radius: 9px; background: #b6c29e0d; color: #f1edd4; }
.pq-stop svg { width: 28px; height: 28px; }
.pq-stop:hover { background: #d5e0bd26; }
.pq-attribution { grid-area: attribution; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; color: #c0d0bb; text-align: center; padding: 8px; }
.pq-attribution>span { color: #e1d29e; }
.pq-toast { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: min(1000px,calc(100% - 40px)); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 22px; border: 2px solid #e4cc92; border-radius: 13px; background: #103640fa; color: #fff1ce; box-shadow: 0 10px 30px #00192466; z-index: 8; }
.pq-toast--error { border-color: #f2b295; }
.pq-toast>span { flex: 1 1 400px; min-width: 0; overflow-wrap: anywhere; }
.pq-toast button { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 14px; background: #d1d9bc0a; border: 1px solid #c2cdaa80; border-radius: 8px; color: #f4d49a; white-space: normal; }
.pq-toast button[data-action=dismiss] { width: 60px; height: 60px; padding: 10px; color: #f7ecd2; }
.pq-toast button[data-action=dismiss] svg { width: 36px; height: 36px; }
.pq-busy .pq-course { opacity: .65; pointer-events: none; }
.pq-busy .pq-button[data-command],.pq-busy [data-action=start] { pointer-events: none; }
.pq-modal-intro { font: italic max(19pt,1.4rem)/1.5 Georgia,serif; color: #e6cfa2 !important; margin-top: 0; }
.pq-score-caption { color: #d9c99d !important; margin: 26px 0 15px; line-height: 1.45; }
.pq-leaderboard td { padding: 18px 12px; }
.pq-leaderboard td:nth-child(2) { overflow-wrap: anywhere; }
.pq-leaderboard td:nth-child(3) { color: #f1d399; font-variant-numeric: tabular-nums; }
.pq-leaderboard td:nth-child(4) { color: #cedac3; white-space: normal; }
.pq-rank { display: inline-grid; place-items: center; width: 43px; height: 43px; border: 1px solid #dbcb9380; border-radius: 50%; font: var(--pq-font)/1 Georgia,serif; }
.pq-rank--1 { background: #e4bf7f; color: #15383a; border-color: #f4d89e; }
.pq-rank--2 { background: #b1c5b43b; color: #f0efcf; }
.pq-rank--3 { background: #b18a6340; color: #f0ce9f; }
.pq-highscore { text-align: center; padding: 22px 0; }
.pq-highscore>svg { display: block; width: 64px; height: 64px; margin: 0 auto 24px; color: #efca84; }
.pq-highscore>.pq-eyebrow { color: #dfcea0; }
.pq-highscore>strong { display: block; font: 400 clamp(44pt,7vw,68pt)/1.2 Georgia,serif; color: #ffdfa0; margin: 14px 0 26px; letter-spacing: -.03em; }
.pq-highscore strong small { display: block; color: #d1dfc4; font: var(--pq-font)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin-top: 10px; letter-spacing: 0; }
.pq-highscore p { line-height: 1.7; }
.pq-highscore button { margin: 16px auto 0; }
.pq-battle-result p { color: #e1e8d0; }
.pq-setting { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 0; border-bottom: 1px solid #b3c4b25e; cursor: pointer; min-height: 104px; }
.pq-setting>span:first-child { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.pq-setting>span>svg { width: 34px; height: 34px; color: #e7c88f; }
.pq-setting strong { display: block; color: #fff0d6; font-weight: 600; }
.pq-setting small { display: block; color: #bfd4c2; margin-top: 6px; line-height: 1.55; }
.pq-setting input { position: absolute; width: 68px; height: 56px; right: 0; opacity: 0; cursor: pointer; }
.pq-switch { position: relative; width: 66px; height: 38px; flex: 0 0 66px; border: 2px solid #9bb79d; border-radius: 40px; background: #06232f; pointer-events: none; }
.pq-switch::after { content: ""; position: absolute; width: 26px; height: 26px; left: 4px; top: 4px; border-radius: 50%; background: #aac1a6; transition: transform .15s; }
.pq-setting input:checked+.pq-switch { background: #d2b575; border-color: #f3d496; }
.pq-setting input:checked+.pq-switch::after { transform: translateX(28px); background: #153e3d; }
.pq-setting input:focus-visible+.pq-switch { outline: 4px solid #f6cf83; outline-offset: 4px; }
.pq-settings-note { color: #bfd3bc !important; margin: 24px 0; }
.pq-treasure-map { height: 350px; position: relative; border: 1px solid #8cb39b85; border-radius: 13px; background: radial-gradient(ellipse at 60% 30%,#3a7b7259,transparent 80%),repeating-linear-gradient(0deg,transparent 0,transparent 47px,#c5d7bb1a 47px,#c5d7bb1a 48px),repeating-linear-gradient(90deg,#0b303b 0,#0b303b 47px,#c5d7bb1a 47px,#c5d7bb1a 48px); margin: 24px 0; }
.pq-map-north { position: absolute; right: 16px; top: 12px; color: #ebd8a2; font: var(--pq-font)/1 Georgia,serif; }
.pq-map-you,.pq-map-treasure { position: absolute; transform: translate(-50%,-50%); }
.pq-map-you { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #f0d59c; color: #fff0cf; background: #15494c; z-index: 2; pointer-events: none; }
.pq-map-you svg { width: 32px; height: 32px; }
.pq-map-you small { position: absolute; top: 59px; color: #fff0ce; padding: 2px 6px; background: #092c36; border-radius: 4px; white-space: nowrap; }
.pq-map-treasure { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #ebcf8fb3; background: #c7a86c52; color: #ffe3a6; box-shadow: 0 0 16px #c9b77c26; }
.pq-map-treasure svg { width: 30px; height: 30px; }
.pq-map-treasure:hover { background: #c9b47d99; border-color: #fff0bb; z-index: 3; }
.pq-chart-note { line-height: 1.6; }
.pq-chart-list { display: flex; flex-direction: column; }
.pq-chart-list button { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 0; background: none; border: 0; border-bottom: 1px solid #c5cdb552; color: #f0e8cc; text-align: left; min-height: 74px; }
.pq-chart-list button:hover { background: #e3dbb30b; }
.pq-chart-list strong { display: block; font: 500 max(20pt,1.5rem)/1.35 Georgia,serif; color: #f3dfb7; }
.pq-chart-list small { display: block; color: #c0d5c1; margin-top: 7px; line-height: 1.55; }
.pq-chart-list b { display: flex; align-items: center; gap: 10px; color: #f4d399; font-weight: 600; white-space: nowrap; }
.pq-chart-list b svg { width: 28px; height: 28px; }
.pq-chart-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 25px; color: #c8dbc2; }
.pq-chart-pagination .pq-button:disabled { opacity: .6; }
/* Full screen reserves real space for UI; only the vector scene is letterboxed. */
.pq-app:fullscreen { width: 100%; max-width: none; height: 100dvh; margin: 0; overflow: visible; background: #092a34; }
.pq-app:fullscreen .pq-shell { border: 0; border-radius: 0; min-height: 100%; }
.pq-app:fullscreen .pq-header { min-height: 91px; padding: 12px 24px; }
.pq-app:fullscreen .pq-brand .pq-eyebrow,.pq-app:fullscreen .pq-online { display: none; }
.pq-app:fullscreen .pq-stage { min-height: calc(100dvh - 91px); height: calc(100dvh - 91px); grid-template-rows: auto auto minmax(260px,1fr) auto; grid-template-areas: "status status" "hud hud" "scene panel" "dock dock"; gap: 16px; padding: 16px 22px; }
.pq-app:fullscreen .pq-stage:has(.pq-panel[hidden]) { grid-template-areas: "status" "hud" "scene" "dock"; }
.pq-app:fullscreen .pq-position .pq-eyebrow,.pq-app:fullscreen .pq-conditions,.pq-app:fullscreen .pq-voyage-log,.pq-app:fullscreen .pq-attribution { display: none !important; }
.pq-app:fullscreen .pq-topline { min-height: 0; }
.pq-app:fullscreen .pq-position { gap: 12px; }
.pq-app:fullscreen .pq-position strong { font-size: max(21pt,1.8rem); margin: 0; }
.pq-app:fullscreen .pq-position>div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; }
.pq-app:fullscreen .pq-hud { padding: 13px 20px; gap: 15px; }
.pq-app:fullscreen .pq-resource b { font-size: max(19pt,1.45rem); }
.pq-app:fullscreen .pq-scene { height: 100%; min-height: 0; aspect-ratio: auto; }
.pq-app:fullscreen .pq-panel { min-height: 0; max-height: none; }
.pq-app:fullscreen .pq-panel .pq-opponent-mark { display: none; }
.pq-app:fullscreen .pq-dock { padding: 14px 20px; gap: 18px; }
.pq-app:fullscreen .pq-dock__ship .pq-eyebrow { display: none; }
.pq-app:fullscreen .pq-chart-compass { display: none; }
@media (min-width: 1920px) { .pq-stage { grid-template-columns: minmax(0,1fr) minmax(430px,480px); } }
@media (max-width: 1500px) {
  .pq-header .pq-online { display: none; }
  .pq-header { padding: 20px 24px; }
  .pq-brand__name { font-size: max(28pt,2.2rem); }
  .pq-hud { grid-template-columns: minmax(240px,1.25fr) repeat(4,minmax(150px,1fr)); gap: 16px; padding: 18px 20px; }
  .pq-resource small { overflow-wrap: anywhere; }
  .pq-stage { grid-template-columns: minmax(0,1fr) minmax(370px,420px); }
  .pq-chart-compass { display: none; }
  .pq-welcome { width: 58%; margin-left: 1%; padding: 28px; }
  .pq-welcome h1 { font-size: clamp(36pt,5vw,56pt); }
}
@media (max-width: 1199px) {
  .pq-app { width: calc(100% - 24px); }
  .pq-stage,.pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-areas: "status" "hud" "welcome" "scene" "dock" "panel" "log" "attribution"; padding: 20px; gap: 20px; }
  .pq-stage:has(.pq-welcome[hidden]) { grid-template-areas: "status" "hud" "scene" "dock" "panel" "log" "attribution"; }
  .pq-welcome { grid-area: welcome; width: auto; max-width: none; margin: 0; padding: 14px 4px 24px; pointer-events: auto; text-shadow: none; }
  .pq-welcome h1 { font-size: clamp(35pt,6vw,52pt); }
  .pq-welcome p br { display: none; }
  .pq-welcome__note { margin-top: 24px; }
  .pq-panel { max-height: 660px; }
  .pq-hud { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
  .pq-hull { grid-column: 1/-1; }
  .pq-hull__label { justify-content: flex-start; gap: 22px; }
  .pq-scene { min-height: 280px; }
  .pq-panel .pq-opponent-mark { display: none; }
  .pq-panel__actions:not(.pq-battle-actions) { flex-direction: row; flex-wrap: wrap; }
  .pq-panel__actions:not(.pq-battle-actions) .pq-button { flex: 1 1 180px; width: auto; }
  .pq-panel__actions--pair { display: grid; }
  .pq-port-services { display: flex; flex-wrap: wrap; gap: 10px 24px; }
  .pq-button--service { width: auto; flex: 1 1 240px; }
  .pq-app:fullscreen .pq-stage,.pq-app:fullscreen .pq-stage:has(.pq-panel[hidden]) { height: auto; min-height: 0; grid-template-rows: auto; grid-template-areas: "status" "hud" "welcome" "scene" "dock" "panel"; padding: 18px; }
  .pq-app:fullscreen .pq-stage:has(.pq-welcome[hidden]) { grid-template-areas: "status" "hud" "scene" "dock" "panel"; }
  .pq-app:fullscreen .pq-scene { min-height: 260px; height: auto; aspect-ratio: 16/9; }
  .pq-app:fullscreen .pq-panel { max-height: 650px; }
}
@media (max-width: 800px) {
  .pq-header { gap: 20px; justify-content: center; }
  .pq-header__tools { justify-content: center; }
  .pq-brand { justify-content: center; }
  .pq-stage { gap: 18px; padding: 18px; }
  .pq-hud { gap: 22px 16px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pq-hull { grid-column: 1/-1; }
  .pq-resource { padding: 5px; }
  .pq-resource small { text-transform: none; }
  .pq-dock { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 22px 16px; }
  .pq-dock__ship { grid-column: 1/-1; }
  .pq-dock__actions { min-width: 130px; }
  .pq-course { justify-self: center; }
  .pq-topline { align-items: flex-start; }
  .pq-conditions { display: none; }
}
@media (max-width: 600px) {
  .pq-app { width: calc(100% - 16px); margin: 12px auto 24px; }
  .pq-shell { border-radius: 17px; }
  .pq-header { padding: 20px 14px; gap: 18px; }
  .pq-brand { gap: 12px; max-width: 100%; }
  .pq-brand__mark { width: 56px; height: 56px; flex-basis: 56px; }
  .pq-brand__mark svg { width: 32px; height: 32px; }
  .pq-brand .pq-eyebrow { display: none; }
  .pq-brand__name { font-size: max(24pt,2rem); letter-spacing: -.04em; }
  .pq-header__tools { gap: 8px; flex-wrap: nowrap; width: 100%; }
  .pq-tool { width: 56px; height: 56px; min-width: 56px; padding: 10px; }
  .pq-tool svg { width: 30px; height: 30px; }
  .pq-stage,.pq-stage:has(.pq-panel[hidden]) { padding: 14px; gap: 18px; }
  .pq-position { gap: 12px; align-items: flex-start; }
  .pq-position__icon { margin-top: 5px; }
  .pq-position__icon svg { width: 30px; height: 30px; }
  .pq-position strong { font-size: max(23pt,1.8rem); }
  .pq-position .pq-eyebrow { letter-spacing: 0; }
  .pq-route { text-underline-offset: 4px; }
  .pq-hud { padding: 16px; gap: 22px 14px; }
  .pq-hull__label { gap: 8px; }
  .pq-resource { padding: 0; }
  .pq-resource>span { gap: 8px; }
  .pq-resource b { font-size: max(21pt,1.6rem); }
  .pq-resource small { margin-top: 6px; line-height: 1.4; }
  .pq-welcome { padding: 10px 2px 20px; }
  .pq-welcome h1 { font-size: max(34pt,2.8rem); }
  .pq-welcome__actions { align-items: stretch; flex-direction: column; }
  .pq-welcome__actions .pq-button { width: 100%; }
  .pq-welcome__note { display: none; }
  .pq-scene { min-height: 230px; aspect-ratio: 16/9; border-radius: 12px; }
  .pq-panel { padding: 20px 17px; max-height: 680px; border-radius: 13px; }
  .pq-panel h2 { font-size: max(24pt,1.85rem); }
  .pq-panel__eyebrow { letter-spacing: 0; gap: 10px; }
  .pq-panel__stats { gap: 12px 20px; }
  .pq-panel__actions--pair { grid-template-columns: minmax(0,1fr); }
  .pq-panel__actions:not(.pq-battle-actions) .pq-button { flex-basis: 100%; }
  .pq-battle-actions { bottom: -20px; grid-template-columns: minmax(0,1fr); gap: 10px; padding-top: 16px; }
  .pq-battle-actions .pq-button { min-height: 58px; }
  .pq-island-depart { bottom: -20px; padding-top: 16px; }
  .pq-island-vault { padding: 16px; }
  .pq-safe-label { margin-left: 0; }
  .pq-amount input { width: 100%; }
  .pq-island-service-note { padding-top: 17px; }
  .pq-dock { padding: 19px 15px; gap: 20px 10px; }
  .pq-dock__badge { width: 56px; height: 56px; flex-basis: 56px; }
  .pq-dock__badge svg { width: 32px; height: 32px; }
  .pq-dock__ship { gap: 13px; align-items: flex-start; }
  .pq-dock__ship strong { font-size: max(22pt,1.7rem); }
  .pq-dock__ship .pq-eyebrow { display: none; }
  .pq-dock__actions { min-width: 112px; max-width: 120px; gap: 14px; }
  .pq-sailing-state { gap: 8px; }
  .pq-stop { min-width: 112px; padding: 12px; gap: 7px; }
  .pq-course { gap: 5px; }
  .pq-course button { width: 56px; height: 60px; min-width: 56px; }
  .pq-course__vertical { gap: 8px; }
  .pq-course__vertical button { width: 56px; height: 56px; }
  .pq-voyage-log { padding: 20px 18px; }
  .pq-attribution { display: none; }
  .pq-toast { top: 14px; width: calc(100% - 28px); padding: 17px; gap: 14px; }
  .pq-toast>span { flex-basis: 100%; }
  .pq-setting { gap: 14px; }
  .pq-setting>span:first-child { gap: 12px; align-items: flex-start; }
  .pq-setting>span>svg { display: none; }
  .pq-treasure-map { height: 290px; }
  .pq-chart-list button { padding: 20px 0; }
  .pq-chart-pagination { justify-content: center; }
  .pq-chart-pagination>span { flex: 1 1 100%; text-align: center; order: -1; }
  .pq-leaderboard { display: block; }
  .pq-leaderboard thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .pq-leaderboard tbody { display: block; }
  .pq-leaderboard tr { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 8px 12px; padding: 18px 0; border-bottom: 1px solid #c0d2b74d; }
  .pq-leaderboard td { border: 0; padding: 3px 0; }
  .pq-leaderboard td:nth-child(1) { grid-row: 1/4; }
  .pq-leaderboard td:nth-child(3)::before { content: "Gold: "; color: #cddbc2; font-size: var(--pq-font); }
  .pq-leaderboard td:nth-child(4)::before { content: "Achieved: "; color: #cddbc2; font-size: var(--pq-font); }
  .pq-app:fullscreen .pq-header { min-height: 0; padding: 16px 12px; }
  .pq-app:fullscreen .pq-stage { padding: 14px; }
  .pq-app:fullscreen .pq-scene { min-height: 230px; }
}
@media (max-width: 370px) {
  .pq-header__tools { gap: 4px; }
  .pq-header { padding-left: 10px; padding-right: 10px; }
  .pq-tool { min-width: 56px; }
  .pq-brand__mark { display: none; }
  .pq-stage,.pq-stage:has(.pq-panel[hidden]) { padding: 10px; }
  .pq-dock { padding: 16px 10px; gap: 18px 6px; }
  .pq-course { gap: 2px; }
  .pq-dock__actions { min-width: 102px; max-width: 110px; }
  .pq-stop { min-width: 102px; }
}
@media (max-height: 650px) and (min-width: 1200px) {
  .pq-app:fullscreen .pq-stage { height: auto; min-height: 0; grid-template-rows: auto auto minmax(260px,1fr) auto; }
  .pq-app:fullscreen .pq-scene { min-height: 260px; }
  .pq-app:fullscreen .pq-panel { max-height: 480px; }
}
@media (prefers-reduced-motion: reduce) { .pq-app * { transition: none !important; scroll-behavior: auto !important; } }
/* Ship-to-ship conversation has its own readable, scrollable space. */
.pq-chat-dialog { width: min(1040px,calc(100vw - 32px)); }
.pq-chat-dialog .gr-dialog__body { display: flex; flex-direction: column; min-height: 0; }
.pq-chat-transcript { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 240px; max-height: min(45dvh,520px); overflow: visible; padding: 20px; border: 1px solid #89ad976b; border-radius: 12px; background: #072832; scrollbar-gutter: stable; }
.pq-chat-bubble { max-width: 87%; padding: 18px 20px; border: 1px solid #86ad9a66; border-radius: 14px 14px 14px 4px; background: #173e43; color: #e6efda; overflow-wrap: anywhere; }
.pq-chat-bubble--captain { align-self: flex-end; border-color: #d5bc827a; border-radius: 14px 14px 4px 14px; background: #454b39; color: #fff0ce; }
.pq-chat-bubble--npc,.pq-chat-bubble--peer { align-self: flex-start; }
.pq-chat-bubble :is(p,small,time,span,strong) { font-size: inherit; }
.pq-chat-bubble p { margin: 0; color: inherit; line-height: 1.65; }
.pq-chat-bubble__byline,.pq-chat-byline { display: block; color: #ead09a; font-weight: 600; margin-bottom: 8px; }
.pq-chat-bubble time { display: block; color: #c4d5bf; margin-top: 9px; }
.pq-chat-replies { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pq-chat-replies .pq-button { flex: 1 1 260px; min-height: 58px; text-align: left; justify-content: flex-start; }
@media (max-width:600px) {
  .pq-chat-dialog { width: calc(100vw - 16px); }
  .pq-chat-transcript { min-height: 240px; max-height: 45dvh; padding: 14px; gap: 16px; }
  .pq-chat-bubble { max-width: 100%; padding: 16px; }
  .pq-chat-replies { gap: 12px; }
  .pq-chat-replies .pq-button { flex-basis: 100%; }
}
/* JS positions this label in CSS pixels after the world letterbox transform. */
/* Compact play mode: no independently scrolling panels and no scaled text. */
.pq-app:has(.pq-welcome[hidden]) { height: 100dvh; margin-top: 0; margin-bottom: 0; }
.pq-app:has(.pq-welcome[hidden]) .pq-shell { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.pq-app:has(.pq-welcome[hidden]) .pq-header { flex: 0 0 auto; min-height: 91px; padding: 12px 24px; flex-wrap: nowrap; }
.pq-app:has(.pq-welcome[hidden]) .pq-brand .pq-eyebrow,.pq-app:has(.pq-welcome[hidden]) .pq-online { display: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-stage { flex: 1; min-height: 0 !important; height: auto !important; grid-template-columns: minmax(0,1fr) minmax(360px,420px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud hud" "scene panel" "dock dock"; padding: 12px; gap: 12px; }
.pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-areas: "hud" "scene" "dock"; }
.pq-app:has(.pq-welcome[hidden]) .pq-topline,.pq-app:has(.pq-welcome[hidden]) .pq-position,.pq-app:has(.pq-welcome[hidden]) .pq-position>div { display: contents; }
.pq-app:has(.pq-welcome[hidden]) .pq-position__icon,.pq-app:has(.pq-welcome[hidden]) .pq-conditions,.pq-app:has(.pq-welcome[hidden]) .pq-position>div>:not(.pq-route),.pq-app:has(.pq-welcome[hidden]) .pq-voyage-log,.pq-app:has(.pq-welcome[hidden]) .pq-attribution { display: none !important; }
.pq-app:has(.pq-welcome[hidden]) .pq-route:not([hidden]) { grid-area: scene; align-self: start; justify-self: start; z-index: 3; min-height: 56px; max-width: calc(100% - 24px); margin: 12px; padding: 8px 12px; border: 1px solid #c4ba837a; border-radius: 8px; background: #082c37ee; position: relative; }
.pq-app:has(.pq-welcome[hidden]) .pq-scene { height: auto !important; min-height: 0 !important; aspect-ratio: auto; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel { min-height: 0; max-height: none; overflow: hidden; padding: 16px; }
.pq-app:has(.pq-welcome[hidden]) .pq-opponent-mark { display: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { font-size: max(22pt,1.7rem); margin: 0 0 12px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel__actions:not(.pq-panel__actions--pair) { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel__actions .pq-button { min-width: 0; width: 100%; min-height: 56px; padding: 10px 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel__actions .pq-button svg { display: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-battle-actions,.pq-app:has(.pq-welcome[hidden]) .pq-island-depart { position: static; margin: 0; padding: 0; box-shadow: none; background: transparent; }
.pq-app:has(.pq-welcome[hidden]) .pq-battle-clock { padding: 10px 0; }
.pq-app:has(.pq-welcome[hidden]) .pq-battle-last { display: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) { display: grid; grid-template-columns: minmax(85px,.85fr) minmax(0,1.8fr); align-content: center; align-items: center; gap: 12px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>h2,.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>.pq-panel__eyebrow,.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>p,.pq-app:has(.pq-welcome[hidden]) .pq-island-vault,.pq-app:has(.pq-welcome[hidden]) .pq-island-depart { grid-column: 1/-1; }
.pq-app:has(.pq-welcome[hidden]) .pq-amount { display: block; margin: 0; min-width: 0; }
.pq-app:has(.pq-welcome[hidden]) .pq-amount>span { display: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-amount input { width: 100%; min-width: 0; height: 56px; padding: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel__actions--pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-island-depart { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-island-depart>.pq-button:only-child { grid-column: 1/-1; }
.pq-app:has(.pq-welcome[hidden]) .pq-island-depart .pq-button { min-width: 0; padding: 10px 8px; min-height: 56px; }
.pq-app:has(.pq-welcome[hidden]) .pq-island-depart .pq-button svg { display: none; }
.pq-dock__ship { border: 0; border-radius: 9px; padding: 0; text-align: left; font: inherit; color: inherit; background: transparent; }
.pq-dock__ship:hover { background: #c1d5a916; }
.pq-app:has(.pq-welcome[hidden]) .pq-dock { padding: 12px 18px; }
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-eyebrow { display: none; }
.pq-chat-open .pq-panel { visibility: hidden; }
.pq-interact { position: absolute; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; max-width: min(420px,calc(100% - 20px)); padding: 10px 15px; border: 2px solid #e5cd91; border-radius: 11px; background: #092d37ed; color: #fff1cf; text-align: center; box-shadow: 0 8px 22px #001d2766; }
.pq-interact strong { font-weight: 600; }
.pq-interact span { color: #d3e2c9; }
.pq-interact:hover { background: #214c50; border-color: #fff0b8; }
.pq-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.pq-pagination>span { flex: 0 0 auto; color: #dce6ce; white-space: nowrap; }
.pq-pagination .pq-button { min-height: 56px; padding: 10px 16px; }
.pq-leaderboard-cards { display: grid; gap: 12px; }
.pq-leaderboard-cards article { display: grid; grid-template-columns: 60px minmax(0,1fr) auto auto; align-items: center; gap: 14px; min-height: 58px; padding: 10px 0; border-bottom: 1px solid #abc0a94d; }
.pq-leaderboard-cards strong { font-weight: 600; overflow-wrap: anywhere; }
.pq-leaderboard-cards time { color: #ceddc4; }
.pq-leaderboard-cards article>span:nth-last-child(2) { color: #f1d39b; }
.pq-ship-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 30px; }
.pq-ship-details p { margin: 0; }
.pq-ship-details b { display: inline; color: #f2d39c; font-weight: 600; }
.pq-chat-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,1fr); gap: 22px; align-items: start; }
.pq-chat-reading { min-width: 0; }
.pq-chat-transcript { display: flex; min-height: 0; max-height: none; overflow: visible; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 12px; }
.pq-chat-bubble { max-width: 100%; padding: 14px 16px; }
.pq-chat-byline { margin-bottom: 5px; }
.pq-chat-bubble p { line-height: 1.45; }
.pq-chat-pagination .pq-pagination { margin-top: 14px; }
.pq-chat-replies { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin: 0; }
.pq-chat-replies .pq-button { min-height: 56px; padding: 12px; }
.pq-chat-dialog [data-chat-status]:empty { display: none; }
.pq-chat-dialog [data-chat-status] { margin: 10px 0 0; }
.pq-chart-dialog .pq-modal-intro { display: none; }
.pq-chart-dialog .pq-treasure-map { height: 160px; margin: 0 0 12px; }
.pq-chart-dialog .pq-chart-note { margin: 0 0 10px; }
.pq-chart-dialog .pq-chart-list button { padding: 8px 0; min-height: 56px; }
.pq-chart-dialog .pq-chart-list button>span { display: flex; align-items: center; gap: 14px; }
.pq-chart-dialog .pq-chart-list strong { font: inherit; color: #f3dfb7; }
.pq-chart-dialog .pq-chart-list small { margin-top: 0; }
.pq-chart-dialog .pq-chart-pagination { margin-top: 12px; }
/* Motion is translation/rotation only: readable type is never scaled down. */
@keyframes pq-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pq-choice { 0%,100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-1deg) translateY(-6px); } 65% { transform: rotate(1deg) translateY(-3px); } }
@keyframes pq-choice-glow { 0%,100% { box-shadow: 0 0 0 2px #e9c27e33; } 45% { box-shadow: 0 0 0 4px #f2cf8db3,0 0 22px #e6bf7666; } }
.pq-panel.pq-arriving { animation: pq-arrive .34s ease-out; }
.pq-panel.pq-needs-choice { animation: pq-choice .34s ease-out; border-color: #edcc8c; }
.pq-interact.pq-arriving { animation: pq-choice-glow .55s ease-out; }
.pq-interact.pq-needs-choice { animation: pq-choice-glow .5s ease-out; }
@media (max-height: 900px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__eyebrow,.pq-app:has(.pq-welcome[hidden]) .pq-panel>p,.pq-app:has(.pq-welcome[hidden]) .pq-island-vault,.pq-app:has(.pq-welcome[hidden]) .pq-panel__foot { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>h2 { margin: 0; }
}
@media (max-width:1199px) {
  .pq-app:has(.pq-welcome[hidden]) { width: calc(100% - 16px); }
  .pq-app:has(.pq-welcome[hidden]) .pq-header { min-height: 64px; height: 64px; padding: 4px 10px; justify-content: center; }
  .pq-app:has(.pq-welcome[hidden]) .pq-brand { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-header__tools { width: 100%; justify-content: center; gap: 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-tool { width: 56px; height: 56px; min-width: 56px; padding: 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stage,.pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(140px,1fr) auto auto; grid-template-areas: "hud" "scene" "panel" "dock"; gap: 8px; padding: 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-rows: auto minmax(140px,1fr) auto; grid-template-areas: "hud" "scene" "dock"; }
  .pq-app:has(.pq-welcome[hidden]) .pq-hud { grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 10px 12px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-hull { grid-column: auto; }
  .pq-app:has(.pq-welcome[hidden]) .pq-hull__label { justify-content: space-between; gap: 6px; margin-bottom: 6px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-resource--safe,.pq-app:has(.pq-welcome[hidden]) .pq-resource:has([data-crew]),.pq-app:has(.pq-welcome[hidden]) .pq-resource:has([data-supplies]) { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-resource { padding: 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-resource small { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-resource b { font-size: max(16pt,1rem); }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel { padding: 10px 12px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__eyebrow,.pq-app:has(.pq-welcome[hidden]) .pq-panel>p,.pq-app:has(.pq-welcome[hidden]) .pq-island-vault,.pq-app:has(.pq-welcome[hidden]) .pq-panel__foot { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { font-size: max(20pt,1.4rem); line-height: 1.2; margin-bottom: 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) { gap: 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>h2 { margin: 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__actions:not(.pq-panel__actions--pair) .pq-button { min-height: 56px; flex-basis: auto; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 8px 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship { grid-column: 1/-1; min-height: 48px; display: block; padding: 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship>div { width: 100%; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__badge,.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship strong { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-power { width: 100%; max-width: none; margin: 3px 0 5px; height: 6px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship small { line-height: 1.3; }
  .pq-app:has(.pq-welcome[hidden]) .pq-course { display: flex; gap: 4px; justify-content: center; }
  .pq-app:has(.pq-welcome[hidden]) .pq-course__vertical { display: contents; }
  .pq-app:has(.pq-welcome[hidden]) .pq-course button { width: 56px; height: 56px; min-width: 56px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__actions { min-width: 78px; max-width: none; display: block; }
  .pq-app:has(.pq-welcome[hidden]) .pq-sailing-state { display: none; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stop { min-width: 78px; min-height: 56px; height: 56px; padding: 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stop svg { display: none; }
  .pq-chat-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .pq-chat-replies { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .pq-chat-replies .pq-button { min-height: 56px; padding: 9px; }
}
@media (max-width:600px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-header__tools { gap: 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel { border-radius: 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { font-size: var(--pq-font); }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__stats { margin-bottom: 8px; gap: 8px 20px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__stats b { margin-left: 5px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__actions--pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__actions .pq-button { min-height: 56px; padding: 9px 5px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-interact { padding: 8px 10px; max-width: calc(100% - 16px); }
  .pq-interact span { display: none; }
  .pq-chat-layout { gap: 12px; }
  .pq-chat-bubble { padding: 10px 12px; }
  .pq-chat-dialog .gr-dialog__head { padding: 12px 16px; }
  .pq-chat-dialog .gr-dialog__body { padding: 14px 16px; }
  .pq-chat-bubble p { line-height: 1.4; }
  .pq-chat-transcript { gap: 10px; }
  .pq-chat-dialog .pq-pagination { margin-top: 10px; }
  .pq-pagination { gap: 10px; }
  .pq-pagination .pq-button { padding: 10px 12px; }
  .pq-leaderboard-cards article { grid-template-columns: 50px minmax(0,1fr); gap: 6px 10px; min-height: 0; padding: 10px 0; }
  .pq-leaderboard-cards .pq-rank { grid-row: 1/4; }
  .pq-leaderboard-cards time { grid-column: 2; }
  .pq-chart-dialog .pq-treasure-map { height: 132px; }
  .pq-chart-dialog .pq-chart-list button { gap: 8px; padding: 8px 0; }
  .pq-chart-dialog .pq-chart-list button>span { display: block; }
  .pq-chart-dialog .pq-chart-list small { margin-top: 3px; }
  .pq-chart-dialog .pq-chart-list b { gap: 5px; }
  .pq-chart-dialog .pq-chart-list b svg { display: none; }
  .pq-chart-dialog .pq-chart-pagination>span { flex: 0 0 auto; order: 0; }
  .pq-chart-dialog .pq-chart-pagination { justify-content: space-between; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-stage { grid-template-columns: minmax(0,1fr) minmax(300px,340px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud power" "scene panel" "course pause"; gap: 8px; padding: 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr) minmax(300px,340px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud power" "scene scene" "course pause"; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock { display: contents; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship { grid-area: power; min-height: 56px; align-self: stretch; margin: 0; border: 1px solid #8cae9978; border-radius: 10px; padding: 8px 12px; background: #092b36; }
  .pq-app:has(.pq-welcome[hidden]) .pq-course { grid-area: course; align-self: center; justify-self: stretch; }
  .pq-app:has(.pq-welcome[hidden]) .pq-dock__actions { grid-area: pause; align-self: center; justify-self: stretch; }
  .pq-app:has(.pq-welcome[hidden]) .pq-stop { width: 100%; }
  .pq-app:has(.pq-welcome[hidden]) .pq-hud { padding: 8px 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel { padding: 6px 8px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { font-size: var(--pq-font); line-height: 1.2; margin-bottom: 6px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) { gap: 6px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel__stats { margin: 0 0 6px; gap: 6px 16px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-opponent-hull>span { margin-bottom: 4px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-battle-clock { padding: 4px 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-battle-clock b { font-size: var(--pq-font); }
  .gr-dialog__head { padding: 8px 16px; }
  .gr-dialog__head h2 { font-size: max(20pt,1.5rem); }
  .gr-dialog__body { padding: 12px 18px; }
  .pq-chat-layout { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 16px; }
  .pq-chat-replies { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .pq-chat-bubble { padding: 10px 12px; }
  .pq-chat-byline { margin-bottom: 4px; }
  .pq-chat-transcript { min-height: 0; }
  .pq-chat-pagination .pq-pagination { margin-top: 10px; }
  .pq-chat-dialog [data-chat-status] { margin: 6px 0 0; }
  .pq-chat-replies .pq-button { padding: 8px; min-height: 56px; }
  .pq-chart-dialog .pq-treasure-map,.pq-chart-dialog .pq-chart-note { display: none; }
  .pq-settings-dialog .pq-modal-intro,.pq-settings-dialog .pq-settings-note:not([data-music-status]) { display: none; }
  .pq-settings-dialog form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
  .pq-settings-dialog .pq-setting { padding: 8px 0; min-height: 64px; }
  .pq-settings-dialog .pq-setting small { display: none; }
  .pq-settings-dialog [data-music-status] { grid-column: 1/-1; margin: 0; }
  .pq-settings-dialog .pq-button { margin: 0; }
  .pq-ship-details { gap: 8px 20px; }
  .pq-pagination { margin-top: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .pq-panel.pq-arriving,.pq-panel.pq-needs-choice,.pq-interact.pq-arriving,.pq-interact.pq-needs-choice { animation: pq-choice-glow .65s ease-out; transform: none; }
  .pq-interact.pq-arriving,.pq-interact.pq-needs-choice { transform: translateX(-50%); }
}
@media (max-height:560px) and (min-width:601px) {
  .gr-dialog h3 { margin: 0 0 8px; line-height: 1.25; }
  .gr-dialog p { margin: 0; line-height: 1.45; }
  .gr-dialog .pq-pagination { margin-top: 12px; }
}
.pq-interact strong,.pq-panel h2 { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-panel>.pq-discovery-risk { display: block !important; color: #f1d49d; margin: 0 0 8px; line-height: 1.4; }
@media (max-width:600px) {
  .pq-interact[data-object-kind=npc] span { display: block; white-space: nowrap; }
  .pq-settings-dialog .pq-setting { min-height: 76px; padding: 14px 0; }
  .pq-settings-dialog .pq-setting small { display: none; }
  .pq-settings-dialog .pq-settings-note { margin: 16px 0; line-height: 1.45; }
  .pq-settings-dialog .pq-modal-intro { display: none; }
}
.pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-discovery-risk { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; line-height: 1.4; }
.pq-discovery-risk .pq-link-button { min-height: 56px; padding: 8px; white-space: nowrap; }
.pq-app:has(.pq-welcome[hidden]) .pq-discovery-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
/* Settings explain themselves; optional descriptions live in the handbook. */
.pq-settings-dialog .pq-modal-intro,.pq-settings-dialog .pq-setting small,.pq-settings-dialog .pq-settings-note:not([data-music-status]) { display: none; }
.pq-settings-dialog .pq-setting { min-height: 76px; padding: 12px 0; }
.pq-settings-dialog [data-music-status] { margin: 12px 0 0; line-height: 1.45; }
.pq-hull__label>span { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.pq-hull__label strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (min-width:700px) {
  .pq-settings-dialog form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
  .pq-settings-dialog [data-music-status] { grid-column: 1/-1; }
}
/* Fullscreen overrides retain the same compact grid rather than legacy rows. */
.pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage { grid-template-columns: minmax(0,1fr) minmax(360px,420px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud hud" "scene panel" "dock dock"; }
.pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-areas: "hud" "scene" "dock"; }
@media (max-width:1199px) {
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(140px,1fr) auto auto; grid-template-areas: "hud" "scene" "panel" "dock"; }
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(140px,1fr) auto; grid-template-areas: "hud" "scene" "dock"; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage { grid-template-columns: minmax(0,1fr) minmax(300px,340px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud power" "scene panel" "course pause"; }
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr) minmax(300px,340px); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud power" "scene scene" "course pause"; }
}
/* The stopped screen also uses the available viewport, without empty grid rows. */
.pq-app:has(.pq-welcome:not([hidden])) { height: 100dvh; margin-top: 0; margin-bottom: 0; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-shell { height: 100%; display: flex; flex-direction: column; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-header { flex: 0 0 auto; min-height: 91px; padding: 12px 24px; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-brand .pq-eyebrow { display: none; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-stage { flex: 1; min-height: 0; height: auto; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: "scene"; padding: 12px; gap: 0; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-topline,.pq-app:has(.pq-welcome:not([hidden])) .pq-attribution { display: none; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-scene { height: 100%; min-height: 0; aspect-ratio: auto; }
.pq-app:has(.pq-welcome:not([hidden])) .pq-welcome { grid-area: scene; }
.pq-welcome__note { display: none; }
@media (max-height:900px) {
  .pq-welcome__rule,.pq-welcome>.pq-eyebrow { display: none; }
}
@media (max-width:600px) {
  .pq-app:has(.pq-welcome:not([hidden])) .pq-header { padding: 12px; min-height: 0; gap: 12px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-stage { grid-template-rows: auto minmax(120px,1fr); grid-template-areas: "welcome" "scene"; gap: 10px; padding: 10px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome { grid-area: welcome; padding: 0 4px; margin: 0; width: auto; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome h1 { font-size: max(30pt,2.5rem); margin: 6px 0 12px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome p { margin: 0 0 14px; line-height: 1.45; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions { gap: 8px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions .pq-button { min-height: 56px; padding: 10px 16px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-scene { min-height: 120px; height: auto; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:has(.pq-welcome:not([hidden])) .pq-header { min-height: 72px; height: 72px; padding: 6px 14px; flex-wrap: nowrap; gap: 16px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-brand__mark { width: 56px; height: 56px; flex-basis: 56px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-brand__name { font-size: max(24pt,2rem); }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-tool { width: 56px; height: 56px; min-width: 56px; padding: 10px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-header__tools { gap: 8px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-stage { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: "welcome scene"; gap: 14px; padding: 10px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome { grid-area: welcome; width: auto; padding: 0 10px; margin: 0; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome h1 { font-size: max(27pt,2.2rem); margin: 4px 0 10px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome p { display: none; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions { gap: 4px 14px; }
  .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions .pq-button { min-height: 56px; padding: 10px 14px; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { margin-bottom: 4px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-opponent-hull>span { line-height: 1.2; margin-bottom: 2px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-opponent-hull .pq-meter { height: 6px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-battle-clock { line-height: 1.2; padding: 2px 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-battle-actions .pq-button { padding: 8px 3px; white-space: nowrap; overflow-wrap: normal; }
}
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-route:not([hidden]) { position: absolute; top: 8px; left: 8px; margin: 0; z-index: 5; min-height: 56px; max-width: calc(100% - 16px); padding: 8px 12px; border: 1px solid #d4c58c; border-radius: 8px; background: #082c37f5; }
@media (max-width:360px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-header { padding-left: 4px; padding-right: 4px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-header__tools { gap: 2px; }
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) { height: auto; min-height: 100dvh; }
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-shell { height: auto; min-height: 100dvh; }
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage { grid-template-rows: auto minmax(140px,260px) auto auto; }
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage:has(.pq-panel[hidden]) { grid-template-rows: auto minmax(140px,260px) auto; }
}
.pq-app:has(.pq-welcome[hidden]) .pq-panel__actions.pq-discovery-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }

/* Build109: choices float above the sea; showing one never changes world size. */
.pq-app:has(.pq-welcome[hidden]) .pq-stage,
.pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]),
.pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage,
.pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) {
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  grid-template-areas: "hud" "scene" "dock";
}
.pq-app:has(.pq-welcome[hidden]) .pq-scene {
  width: 100%; min-width: 0; height: 100% !important; min-height: 0 !important;
}
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel {
  position: absolute; grid-area: auto; right: 16px; bottom: 16px; top: auto; left: auto;
  width: min(420px,calc(100% - 32px)); max-width: calc(100% - 32px); max-height: calc(100% - 32px);
  align-self: auto; padding: 16px; border: 2px solid #c5b984; border-radius: 15px;
  background: #092c36f5; box-shadow: 0 14px 40px #00151fa6,0 0 0 1px #062630;
  backdrop-filter: blur(12px); z-index: 6; overflow: visible;
}
/* Secondary actions are full buttons, including Pass, Flee and Depart. */
.pq-button,.pq-button--quiet {
  border: 2px solid #adc5b3; background: #183f47; color: #f1edda !important;
}
.pq-button:hover,.pq-button--quiet:hover { border-color: #f2d49a; background: #28505a; }
.pq-button--gold { border-color: #f0d49d; color: #153a3b !important; background: linear-gradient(110deg,#ebcc97,#d5ae73); }
.pq-button--gold:hover { border-color: #ffedbd; background: linear-gradient(110deg,#f7dda9,#e7c489); }
.pq-button--service,.pq-button--dialogue { border: 2px solid #adc5b3; border-radius: 10px; padding: 12px; }
.pq-link-button { border: 2px solid #adc5b3; border-radius: 9px; padding: 10px 14px; background: #183f47; }
.pq-link-button:hover { background: #28505a; border-color: #f2d49a; }
.pq-interact { max-width: min(340px,calc(100% - 20px)); }
@media (max-width:1199px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-stage,
  .pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]),
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage,
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) {
    grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(140px,1fr) auto;
    grid-template-areas: "hud" "scene" "dock";
  }
  .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel {
    right: 10px; bottom: 10px; width: min(420px,calc(100% - 20px)); max-width: calc(100% - 20px);
    max-height: calc(100% - 20px); padding: 10px 12px; border-radius: 12px;
  }
}
@media (max-width:600px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel {
    right: 8px; bottom: 8px; width: calc(100% - 16px); max-width: calc(100% - 16px);
    max-height: calc(100% - 16px); padding: 10px; border-radius: 10px;
  }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-stage,
  .pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]),
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage,
  .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) {
    grid-template-columns: minmax(0,1fr) minmax(280px,320px);
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas: "hud power" "scene scene" "course pause";
  }
  .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel {
    right: 8px; bottom: 4px; width: min(350px,calc(100% - 16px)); max-height: calc(100% - 8px); padding: 6px 8px;
  }
}
@media (max-width:360px) {
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage,
  .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage:has(.pq-panel[hidden]) {
    grid-template-rows: auto minmax(240px,1fr) auto; grid-template-areas: "hud" "scene" "dock";
  }
}
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship {
  border: 2px solid #8eafa0; padding: 8px 12px; background: #103540;
}
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship:hover { border-color: #f2d49a; background: #204951; }
.pq-shop-dialog { width: min(1000px,calc(100vw - 32px)); }
.pq-shop-card { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,1fr); align-items: start; gap: 20px 28px; }
.pq-shop-copy,.pq-shop-purchase { min-width: 0; }
.pq-shop-copy h3 { margin: 0 0 12px; font: 500 max(23pt,1.8rem)/1.2 Georgia,serif; color: #fff0ce; }
.pq-shop-copy p { margin: 0; line-height: 1.5; color: #d7e2cd; }
.pq-shop-price { font-weight: 600; color: #f2d398; margin: 0 0 8px; }
.pq-shop-balance { color: #cbdcc5; margin: 0 0 16px; line-height: 1.4; }
.pq-shop-purchase .pq-button { width: 100%; }
.pq-shop-dialog .pq-pagination { margin-top: 20px; }
@media (max-width:600px) {
  .pq-shop-dialog { width: calc(100vw - 16px); }
  .pq-shop-card { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .pq-shop-copy h3 { font-size: max(20pt,1.4rem); margin-bottom: 8px; }
  .pq-shop-balance { margin-bottom: 12px; }
  .pq-shop-dialog .pq-pagination { margin-top: 14px; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-shop-card { grid-template-columns: minmax(0,1.4fr) minmax(230px,1fr); gap: 12px 20px; }
  .pq-shop-copy h3 { font-size: var(--pq-font); margin-bottom: 6px; }
  .pq-shop-copy p { line-height: 1.35; }
  .pq-shop-balance { margin-bottom: 8px; }
  .pq-shop-dialog .pq-pagination { margin-top: 12px; }
}
/* The standard unavailable/noscript page uses the same reading-size floor. */
.pq-page-message { font-size: max(16pt,1rem); line-height: 1.5; }
.pq-page-message :where(p,a,li,span,strong) { font-size: inherit; }
.pq-page-message h1 { font-size: max(28pt,2rem); line-height: 1.2; }
.pq-shop-status:empty { display: none; }
.pq-shop-status { color: #f1d29b; line-height: 1.4; }
.pq-shop-fairplay,.pq-shop-limit { color: #d8e3cf; }
@media (max-height:560px) and (min-width:601px) {
  .pq-shop-dialog { max-height: calc(100dvh - 16px); }
  .pq-shop-dialog .gr-dialog__head { padding: 6px 16px; }
  .pq-shop-dialog .gr-dialog__body { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 8px 16px; }
  .pq-shop-card { grid-column: 1/-1; grid-template-columns: minmax(0,1.6fr) minmax(250px,1fr); gap: 12px 20px; }
  .pq-shop-purchase { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 10px; }
  .pq-shop-price,.pq-shop-balance,.pq-shop-limit { margin: 0; line-height: 1.3; }
  .pq-shop-balance { text-align: right; }
  .pq-shop-limit,.pq-shop-purchase .pq-button { grid-column: 1/-1; }
  .pq-shop-status { margin: 0; line-height: 1.3; }
  .pq-shop-dialog .gr-dialog__body>.pq-link-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; }
  .pq-shop-dialog .pq-pagination { grid-column: 1/-1; margin: 0; }
}

@media (max-height:560px) and (min-width:601px) {
  .pq-ship-details { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Island actions stay compact at every height; flavour belongs to the scene. */
.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>.pq-panel__eyebrow,
.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>p {
  display: none;
}
@media (max-height:560px) and (min-width:601px) {
  .pq-service-dialog .gr-dialog__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.8fr); align-items: center; gap: 8px 20px; }
  .pq-service-dialog .gr-dialog__body>h3 { grid-column: 1; grid-row: 1; margin: 0; }
  .pq-service-dialog .gr-dialog__body>p:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .pq-service-dialog .gr-dialog__body>p:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  .pq-service-dialog .gr-dialog__body>.pq-button[data-command] { grid-column: 2; grid-row: 1/3; min-height: 56px; }
  .pq-service-dialog .gr-dialog__body>.pq-link-button { grid-column: 2; grid-row: 3; }
  .pq-service-dialog .pq-pagination { grid-column: 1/-1; grid-row: 4; margin: 0; }
}

/* Island activities have their own paged view, keeping the sea card unchanged. */
.pq-activities-dialog { width: min(1000px,calc(100vw - 32px)); }
.pq-activity-card { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,1fr); align-items: start; gap: 20px 28px; }
.pq-activity-copy,.pq-activity-controls { min-width: 0; }
.pq-activity-copy h3 { margin: 0 0 12px; font: 500 max(23pt,1.8rem)/1.2 Georgia,serif; color: #fff0ce; }
.pq-activity-copy p { margin: 0 0 12px; line-height: 1.5; color: #d8e3cf; }
.pq-activity-controls { display: grid; gap: 12px; }
.pq-activity-status { border: 1px solid #8eafa0; border-radius: 10px; background: #0a2933; padding: 12px; color: #e9d3a0; line-height: 1.4; overflow-wrap: anywhere; }
.pq-activity-status p { margin: 0; line-height: inherit; }
.pq-activity-controls .pq-button { width: 100%; }
.pq-activities-dialog .pq-pagination { margin-top: 20px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-depleted-note { display: block !important; color: #e2e6d1; line-height: 1.45; margin: 0 0 12px; }
.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-depleted-note) .pq-panel__actions { grid-template-columns: minmax(0,1fr); }
.pq-interact:disabled { cursor: progress; opacity: 1; border-color: #a9c9be; background: #103d48; }
@media (max-width:600px) {
  .pq-activities-dialog { width: calc(100vw - 16px); }
  .pq-activity-card { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .pq-activity-copy h3 { font-size: max(20pt,1.4rem); margin-bottom: 8px; }
  .pq-activities-dialog .pq-pagination { margin-top: 14px; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-activity-card { grid-template-columns: minmax(0,1.35fr) minmax(250px,1fr); gap: 12px 20px; }
  .pq-activity-copy h3 { font-size: var(--pq-font); margin-bottom: 6px; }
  .pq-activity-copy p { margin-bottom: 8px; line-height: 1.35; }
  .pq-activity-status { padding: 8px; line-height: 1.35; }
  .pq-activities-dialog .pq-pagination { margin-top: 12px; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-depleted-note) { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 10px; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-depleted-note)>h2 { grid-column: 1/-1; margin: 0; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-depleted-note { grid-column: 1; margin: 0; line-height: 1.35; }
  .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-depleted-note)>.pq-panel__actions { grid-column: 2; min-width: 100px; }
}
/* Music level remains a full-size control, even in the compact settings view. */
.pq-volume { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid #a9bfab5e; }
.pq-volume output { font: inherit; font-variant-numeric: tabular-nums; color: #f2d39b; min-width: 4ch; text-align: right; }
.pq-volume input[type=range] { grid-column: 1/-1; width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: #e2bd7c; appearance: none; background: transparent; cursor: pointer; }
.pq-volume input[type=range]::-webkit-slider-runnable-track { height: 10px; border: 1px solid #9fb9a9; border-radius: 8px; background: #092731; }
.pq-volume input[type=range]::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #ebcb94; border: 2px solid #183a3d; margin-top: -10px; }
.pq-volume input[type=range]::-moz-range-track { height: 8px; border: 1px solid #9fb9a9; border-radius: 8px; background: #092731; }
.pq-volume input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #ebcb94; border: 2px solid #183a3d; }
.pq-ledger-tabs { display: flex; gap: 12px; margin: 0 0 16px; }
.pq-ledger-tabs button { flex: 1 1 0; min-height: 56px; padding: 10px 12px; border: 2px solid #a9c2b2; border-radius: 10px; background: #173f47; color: #f0ecda; font: inherit; cursor: pointer; }
.pq-ledger-tabs button[aria-selected=true] { border-color: #f0d49d; background: #e2bd81; color: #153a3b; font-weight: 600; }
.pq-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.pq-stats-grid article { min-width: 0; border: 1px solid #a6beaa; border-radius: 10px; padding: 12px; background: #0a2a34; }
.pq-stats-grid article>span { display: block; color: #c9dcc8; margin-bottom: 8px; line-height: 1.35; }
.pq-stats-grid article>strong { display: block; color: #f2d39c; font: 600 max(22pt,1.6rem)/1.2 Georgia,serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-height:560px) and (min-width:601px) {
  .pq-settings-dialog .pq-volume { grid-column: 1/-1; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; min-height: 44px; padding: 0; }
  .pq-settings-dialog .pq-volume input[type=range] { grid-column: auto; }
  .pq-settings-dialog .pq-volume output { grid-column: 3; grid-row: 1; }
  .pq-ledger-tabs { gap: 10px; margin-bottom: 12px; }
  .pq-stats-grid { gap: 10px; }
  .pq-stats-grid article { padding: 8px 12px; }
  .pq-stats-grid article>span { margin-bottom: 6px; }
}
.pq-volume output { grid-column: 2; grid-row: 1; }
.pq-ship-detail-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.pq-ship-detail-actions .pq-button { min-width: 0; }
.pq-live-count { position: absolute; right: -5px; top: -5px; min-width: 28px; min-height: 28px; padding: 1px 6px; border: 1px solid #153a3b; border-radius: 20px; color: #153a3b; background: #e8c489; font: 600 var(--pq-font)/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-align: center; }
.pq-tool:has(.pq-live-count) { position: relative; }
.pq-atlas-dialog { width: min(1240px,calc(100vw - 32px)); }
.pq-atlas-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); align-items: start; gap: 24px; }
.pq-atlas-canvas { display: block; width: 100%; height: min(46dvh,500px); min-height: 260px; border: 1px solid #a5bba2; border-radius: 12px; background: #0b2b36; touch-action: none; }
.pq-atlas-sidebar { display: grid; gap: 12px; min-width: 0; }
.pq-atlas-zoom,.pq-atlas-pan { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.pq-atlas-sidebar button { min-width: 0; min-height: 56px; padding: 8px; border: 2px solid #a7bfac; border-radius: 9px; color: #f2eddb; background: #173e47; font: inherit; cursor: pointer; }
.pq-atlas-sidebar button:hover { border-color: #f1d29b; background: #27505a; }
.pq-atlas-sidebar button svg { width: 28px; height: 28px; }
.pq-atlas-pan button { font-size: max(24pt,1.8rem); line-height: 1; }
.pq-atlas-summary { min-width: 0; border: 1px solid #8ea994; border-radius: 9px; padding: 10px; color: #eed4a4; background: #0a2933; line-height: 1.35; overflow-wrap: anywhere; }
.pq-atlas-summary strong,.pq-atlas-summary span { display: block; }
.pq-atlas-summary strong { color: #f4dfb8; }
.pq-atlas-sidebar>p { margin: 0; line-height: 1.35; }
@media (max-width:600px) {
  .pq-atlas-dialog { width: calc(100vw - 16px); }
  .pq-atlas-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .pq-atlas-canvas { height: min(29dvh,240px); min-height: 160px; }
  .pq-atlas-sidebar { gap: 10px; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-settings-dialog { max-height: calc(100dvh - 16px); }
  .pq-settings-dialog .gr-dialog__head { padding: 6px 16px; }
  .pq-settings-dialog .gr-dialog__body { padding: 8px 16px; }
  .pq-settings-dialog form { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 12px; }
  .pq-settings-dialog .pq-setting { grid-column: span 2; }
  .pq-settings-dialog .pq-volume { grid-column: 1/-1; }
  .pq-settings-dialog form>button[type=submit] { grid-column: 1; min-width: 0; padding: 8px; }
  .pq-settings-dialog form>[data-action=reload-music] { grid-column: 2; min-width: 0; padding: 8px; }
  .pq-settings-dialog form>[data-music-status] { grid-column: 3/5; margin: 0; align-self: center; }
  .pq-settings-dialog [data-music-status]:empty { display: none; }
  .pq-ship-detail-actions { margin-top: 12px; gap: 10px; }
  .pq-atlas-dialog { max-height: calc(100dvh - 16px); }
  .pq-atlas-dialog .gr-dialog__head { padding: 6px 16px; }
  .pq-atlas-dialog .gr-dialog__body { padding: 8px 16px; }
  .pq-atlas-layout { grid-template-columns: 180px minmax(0,1fr); gap: 16px; }
  .pq-atlas-canvas { height: 160px; min-height: 160px; }
  .pq-atlas-sidebar { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .pq-atlas-zoom { grid-column: 1/-1; grid-row: 1; }
  .pq-atlas-pan { grid-column: 1/-1; grid-row: 2; }
  .pq-atlas-summary { grid-column: 1/3; grid-row: 3; padding: 8px; }
  .pq-atlas-sidebar>p { grid-column: 3/5; grid-row: 3; line-height: 1.3; }
}
/* Only the dedicated play page opts into the site's edge-to-edge canvas shell. */
body.ksw-game-canvas .pq-app { width: 100%; max-width: none; height: 100dvh; margin: 0; }
body.ksw-game-canvas .pq-shell { height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.pq-live-count { top: 0; }
.pq-ledger-tabs button[aria-pressed=true] { border-color: #f0d49d; background: #e2bd81; color: #153a3b; font-weight: 600; }
.pq-atlas-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.pq-voyage-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.pq-voyage-controls .pq-button { min-width: 0; }
.pq-reset-dialog .pq-panel__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.pq-reset-dialog [data-action=confirm-reset] { border-color: #e9aa8a; background: #6b403c; }
.pq-stats-note { color: #c9d9c5; line-height: 1.35; }
@media (max-width:600px) {
  .pq-voyage-controls { grid-template-columns: minmax(0,1fr); }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-settings-dialog form>[data-action=refresh-music] { grid-column: 2; min-width: 0; padding: 8px; }
  .pq-shop-dialog .gr-dialog__body { grid-template-columns: minmax(0,1fr) auto auto; }
  .pq-stats-dialog { max-height: calc(100dvh - 16px); }
  .pq-stats-dialog .gr-dialog__head { padding: 6px 16px; }
  .pq-stats-dialog .gr-dialog__body { padding: 8px 16px; }
  .pq-stats-note { margin: 8px 0 0; }
  .pq-atlas-dialog { --pq-atlas-info-width: clamp(220px,38vw,310px); }
  .pq-atlas-dialog .gr-dialog__body { position: relative; }
  .pq-atlas-dialog .pq-map-tabs { width: calc(100% - var(--pq-atlas-info-width) - 20px); }
  .pq-atlas-dialog .pq-map-tabs button { padding: 8px; }
  .pq-atlas-tools { grid-column: 1/-1; grid-row: 1; }
  .pq-atlas-sidebar>.pq-atlas-info { position: absolute; right: 16px; top: 8px; width: var(--pq-atlas-info-width); margin: 0; line-height: 1.3; padding: 4px 0; }
  .pq-atlas-sidebar>.pq-atlas-summary { grid-column: 1/3; grid-row: 3; margin: 0; }
  .pq-atlas-sidebar>[data-action=atlas-heading] { grid-column: 3/5; grid-row: 3; }
}
.pq-contact h3 { overflow-wrap: anywhere; }
.pq-sailing-dialog form>p { line-height: 1.45; }
@media (max-height:560px) and (min-width:601px) {
  .pq-sailing-dialog { max-height: calc(100dvh - 16px); }
  .pq-sailing-dialog .gr-dialog__head { padding: 6px 16px; }
  .pq-sailing-dialog .gr-dialog__body { padding: 8px 16px; }
  .pq-sailing-dialog form { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.9fr); align-items: center; gap: 12px 20px; }
  .pq-sailing-dialog form>.pq-setting { grid-column: 2; grid-row: 1; min-height: 64px; padding: 8px 0; }
  .pq-sailing-dialog form>p { grid-column: 1; grid-row: 1/3; margin: 0; line-height: 1.35; }
  .pq-sailing-dialog form>button[type=submit] { grid-column: 2; grid-row: 2; min-width: 0; }
}
/* Information views are full game screens; encounter choices remain sea overlays. */
.pq-app .gr-dialog { position: fixed; inset: 0; width: 100dvw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; background: #0b2c36; box-shadow: none; }
.pq-app .gr-dialog::backdrop { background: #0b2c36; backdrop-filter: none; }
.pq-app .gr-dialog__head { padding: 16px 24px; background: #10343d; }
.pq-app .gr-dialog__body { flex: 1; width: min(100%,1200px); margin: 0 auto; padding: 24px; display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: visible; }
.pq-app .gr-dialog__body>.pq-button { align-self: flex-start; }
.pq-app .gr-dialog__body>.pq-pagination { width: 100%; }
.pq-app .pq-ship-table { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; }
.pq-ship-row { min-width: 0; padding: 12px; border: 1px solid #87a99a; border-radius: 10px; background: #0a2933; }
.pq-ship-row dt { display: flex; align-items: center; min-width: 0; gap: 10px; color: #d6e1ce; font-weight: 400; line-height: 1.35; }
.pq-ship-row dt>span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pq-ship-row dd { margin: 8px 0 0; color: #fff0cc; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.pq-stat-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; }
.pq-stat-icon svg { width: 32px; height: 32px; }
.pq-stat-icon--hull { color: #9ed7b4; }.pq-stat-icon--crew { color: #b6c8ef; }.pq-stat-icon--supplies { color: #d8bc8f; }
.pq-stat-icon--power { color: #efba87; }.pq-stat-icon--cannons { color: #d3c1e6; }.pq-stat-icon--speed { color: #9ed9da; }
.pq-stat-icon--gold,.pq-stat-icon--safe { color: #f0d18b; }.pq-stat-icon--paid { color: #afdbb8; }.pq-stat-icon--debt { color: #f1b299; }
/* One continuous atlas: controls above and below an undistorted square canvas. */
.pq-app .pq-atlas-dialog .gr-dialog__body { width: min(100%,1240px); }
.pq-atlas-layout { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; justify-items: center; align-items: center; gap: 12px; width: 100%; }
.pq-atlas-tools { display: grid; grid-template-columns: repeat(4,auto) minmax(0,1fr); grid-column: auto; grid-row: auto; align-items: center; gap: 8px 12px; width: 100%; }
.pq-atlas-tools .pq-button { min-width: 56px; min-height: 56px; padding: 8px 12px; }
.pq-atlas-info { min-width: 0; color: #c9ddca; line-height: 1.3; }
.pq-atlas-canvas { width: min(100%,50dvh,560px); height: auto; min-height: 0; aspect-ratio: 1; justify-self: center; }
.pq-atlas-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; width: 100%; }
.pq-atlas-detail { min-width: 0; color: #d8e4cf; line-height: 1.3; }
.pq-atlas-detail strong { display: block; font-weight: 600; color: #f2d5a2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-atlas-detail span { display: block; }
.pq-atlas-bottom .pq-atlas-pan { grid-column: auto; grid-row: auto; }
.pq-atlas-pan .pq-button { width: 56px; min-width: 56px; min-height: 56px; padding: 8px; }
@keyframes pq-map-arrive { from { opacity: .55; } to { opacity: 1; } }
.pq-map-zooming { animation: pq-map-arrive .2s ease-out; }
@media (max-width:600px) {
  .pq-app .gr-dialog__head { padding: 12px 16px; }
  .pq-app .gr-dialog__body { padding: 16px; }
  .pq-app .pq-ship-table { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .pq-ship-row { padding: 8px; }
  .pq-atlas-tools { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .pq-atlas-info { grid-column: 1/-1; }
  .pq-atlas-canvas { width: min(100%,300px); }
  .pq-atlas-bottom { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .pq-atlas-bottom>[data-action=atlas-heading] { justify-self: stretch; }
  .pq-atlas-bottom .pq-atlas-pan { justify-self: center; }
}
@media (max-height:560px) and (min-width:601px) {
  .pq-app .gr-dialog__head { padding: 4px 16px; }
  .pq-app .gr-dialog__head .gr-icon-button { width: 56px; height: 56px; flex-basis: 56px; padding: 8px; }
  .pq-app .gr-dialog__body { padding: 8px 16px; }
  .pq-app .pq-shop-dialog .gr-dialog__body { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-content: center; align-items: center; gap: 8px 12px; }
  .pq-app .pq-service-dialog .gr-dialog__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.8fr); align-content: center; align-items: center; gap: 8px 20px; }
  .pq-app .pq-ship-table { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .pq-ship-row { display: grid; grid-template-columns: minmax(0,1fr) fit-content(48%); align-items: center; gap: 6px; padding: 3px 6px; }
  .pq-ship-row:has(.pq-stat-icon--cannons) { grid-column: span 2; }
  .pq-ship-row dt { gap: 6px; line-height: 1.25; }
  .pq-ship-row dd { margin: 0; line-height: 1.3; }
  .pq-app .pq-atlas-dialog .gr-dialog__body { justify-content: stretch; }
  .pq-atlas-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; }
  .pq-atlas-tools { grid-template-columns: repeat(4,auto) minmax(0,1fr); grid-column: auto; grid-row: auto; }
  .pq-atlas-info { grid-column: auto; }
  .pq-atlas-canvas { width: auto; height: min(100%,160px); max-width: 100%; min-height: 0; aspect-ratio: 1; }
  .pq-atlas-bottom { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  .pq-atlas-bottom .pq-atlas-pan { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion:reduce) { .pq-map-zooming { animation: none; } }
/* Short phones retain all atlas controls; only the square map yields space. */
@media (max-width:600px) and (max-height:650px) {
  .pq-app .pq-atlas-dialog .gr-dialog__head { padding: 4px 8px; }
  .pq-app .pq-atlas-dialog .gr-dialog__head .gr-icon-button { width: 56px; height: 56px; flex-basis: 56px; padding: 8px; }
  .pq-app .pq-atlas-dialog .gr-dialog__body { padding: 8px; justify-content: stretch; }
  .pq-atlas-layout { flex: 1; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; gap: 6px; }
  .pq-atlas-tools { gap: 4px; }
  .pq-atlas-tools .pq-button { padding: 6px; }
  .pq-atlas-info { line-height: 1.25; }
  .pq-atlas-canvas { width: auto; max-width: 100%; height: min(100%,300px); min-height: 0; aspect-ratio: 1; }
  .pq-atlas-bottom { gap: 6px; }
  .pq-atlas-detail { line-height: 1.25; }
  .pq-atlas-bottom>[data-action=atlas-heading] { padding: 8px 12px; min-height: 56px; }
}
/* A legal maximum score must retain every digit on the celebration screen. */
.pq-score-dialog .pq-highscore>strong { font-size: clamp(16pt,10vw,60pt); overflow-wrap: anywhere; }
@media (max-height:560px) and (min-width:601px) {
  .pq-score-dialog .pq-highscore { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); grid-template-areas: "label label" "score account" "action action"; align-items: center; gap: 8px 24px; padding: 0; width: min(100%,1000px); margin: 0 auto; text-align: left; }
  .pq-score-dialog .pq-highscore>svg { display: none; }
  .pq-score-dialog .pq-highscore>.pq-eyebrow { grid-area: label; }
  .pq-score-dialog .pq-highscore>strong { grid-area: score; font-size: max(25pt,4vw); margin: 0; line-height: 1.2; }
  .pq-score-dialog .pq-highscore strong small { margin-top: 8px; }
  .pq-score-dialog .pq-highscore>p { grid-area: account; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
  .pq-score-dialog .pq-highscore>button { grid-area: action; justify-self: start; margin: 0; }
}
@media (max-width:600px) and (max-height:650px) {
  .pq-score-dialog .pq-highscore { padding: 0; }
  .pq-score-dialog .pq-highscore>svg { display: none; }
  .pq-score-dialog .pq-highscore>strong { font-size: clamp(16pt,10vw,40pt); margin: 8px 0; }
  .pq-score-dialog .pq-highscore strong small { margin-top: 6px; }
  .pq-score-dialog .pq-highscore>p { margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
  .pq-score-dialog .pq-highscore>button { margin: 12px auto 0; }
}
/* Build 111: complete information screens and accessible native scrolling. */
.pq-app .gr-dialog__body.gr-scroll-viewport { width: min(100%,1600px); display: block; overflow-x: hidden; overflow-y: auto; justify-content: initial; align-content: start; scrollbar-width: none; }
.pq-app .gr-dialog__body.gr-scroll-needed { padding-right: 48px; }
.pq-app .gr-dialog__body>:last-child { margin-bottom: 0; }
.pq-app .gr-dialog__body p { line-height: 1.45; }
.pq-app .gr-dialog__body h3 { margin: 0 0 12px; }
.pq-help-grid,.pq-settings-grid,.pq-contact-list,.pq-service-grid,.pq-shop-products { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 20px; align-items: start; }
.pq-help-grid>article,.pq-settings-grid>section,.pq-contact,.pq-service-card,.pq-shop-card { min-width: 0; padding: 20px; border: 1px solid #88afa2; border-radius: 14px; background: #092933; }
.pq-help-grid p { margin: 0; }
.pq-help-grid { margin-bottom: 20px; }
.pq-settings-grid { margin-bottom: 24px; }
.pq-settings-dialog [data-settings-form] { display: block; }
.pq-settings-dialog .pq-setting { min-height: 66px; gap: 14px; padding: 12px 0; }
.pq-setting>span:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; }
.pq-settings-dialog .pq-voyage-controls { margin-top: 28px; display: block; }
.pq-screen-actions,.pq-ship-detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pq-screen-actions .pq-button { flex: 0 1 auto; }
.pq-contact p,.pq-service-card p,.pq-shop-card p { margin: 10px 0; }
.pq-service-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-bottom: 16px; border-bottom: 1px solid #6b958a; }
.pq-service-summary p { flex: 1 0 100%; margin: 0; color: #c8dbcd; }
.pq-service-groups { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; margin: 24px 0; }
.pq-service-groups h2 { margin: 0 0 14px; font-size: max(22pt,1.5rem); color: #f2d397; font-family: Georgia,serif; }
.pq-service-card { display: flex; flex-direction: column; align-self: stretch; }
.pq-service-card h3 { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.pq-service-card form { margin-top: auto; display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.pq-service-card form label { display: grid; gap: 8px; flex: 1 1 110px; }
.pq-service-card form input { width: 100%; min-width: 0; min-height: 56px; padding: 8px 12px; background: #061e28; border: 1px solid #a8bca6; border-radius: 8px; color: #fff0cf; font: inherit; }
.pq-service-card form button { flex: 1 1 160px; }
.pq-service-price { color: #f3d18b !important; }
.pq-shop-products { margin-top: 24px; }
.pq-shop-card { display: flex; flex-direction: column; gap: 16px; }
.pq-shop-card .pq-shop-purchase { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.pq-shop-price { font-size: max(24pt,1.6rem); }
.pq-app .pq-ledger-dialog .gr-dialog__body { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1.6fr); gap: 28px; align-items: start; }
.pq-ledger-stats { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.pq-ledger-stats article { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pq-ledger-dialog .pq-leaderboard-cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
.pq-ledger-dialog .pq-leaderboard-cards article { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; gap: 8px 14px; padding: 14px; }
.pq-ledger-dialog .pq-leaderboard-cards article>strong { min-width: 0; overflow-wrap: anywhere; }
.pq-ledger-dialog .pq-leaderboard-cards article>time { grid-column: 2/-1; }
.pq-chat-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,.7fr); align-items: start; gap: 24px; }
.pq-chat-reading,.pq-chat-transcript { min-height: 0; max-height: none; overflow: visible; }
.pq-chat-transcript { display: flex; flex-direction: column; gap: 16px; }
.pq-chat-bubble { max-width: 92%; min-width: 0; padding: 16px 20px; }
.pq-chat-bubble p { margin-bottom: 0; overflow-wrap: anywhere; }
.pq-chat-bubble--captain { align-self: end; background: #16463f; border-color: #8dcdb2; }
.pq-chat-replies { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.pq-chat-byline { display: block; color: #f0d198; overflow-wrap: anywhere; }
.pq-app .pq-atlas-dialog .gr-dialog__body { display: flex; flex-direction: column; width: min(100%,1600px); }
.pq-atlas-layout { flex: 1; min-height: 0; grid-template-rows: auto minmax(220px,1fr) auto; }
.pq-atlas-tools { grid-template-columns: repeat(5,auto) minmax(0,1fr); }
.pq-atlas-canvas { width: min(100%,65dvh,900px); height: auto; min-height: 220px; aspect-ratio: 1; touch-action: none; }
.pq-atlas-bottom { grid-template-columns: minmax(0,1fr) auto; }
.pq-atlas-bottom>p { grid-column: 1/-1; margin: 0; color: #bed8c9; }
.pq-travel-costs { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 16px; }
.pq-travel-costs>div { padding: 20px; border: 1px solid #8eafa1; border-radius: 12px; background: #092933; }
.pq-travel-costs dt { display: flex; align-items: center; gap: 12px; color: #f4d39a; }
.pq-travel-costs dd { margin: 12px 0 0; font-weight: 600; }
.pq-action-feedback { padding: 12px 16px; border: 1px solid #d9b57b; border-left-width: 5px; border-radius: 8px; background: #153d42; color: #ffe2a9 !important; }
.pq-action-feedback .pq-button { margin-left: 12px; }
.pq-crew-critical { border-color: #f5a192 !important; background: #57332f !important; color: #ffe0d5 !important; }
.pq-crew-critical [data-power-label] { color: #ffe0d5 !important; }
.pq-stat-meter { margin-top: 8px; height: 8px; background: #031c24; border: 1px solid #78a68d; border-radius: 8px; overflow: hidden; }
.pq-stat-meter>span { display: block; height: 100%; background: #80d1b0; }
.pq-stat-meter--low>span { background: #ec9a7b; }
/* Result cards live in the ocean. Their OK control stays outside the scroll body. */
.pq-outcome { position: absolute; z-index: 12; display: flex; flex-direction: column; border: 2px solid #b1c8a4; border-radius: 16px; background: #092e38f7; box-shadow: 0 12px 35px #00151ed9; overflow: hidden; color: #f9efd4; }
.pq-outcome[hidden] { display: none; }
.pq-outcome-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 0 auto; background: #153e44; border-bottom: 1px solid #95b69f; }
.pq-outcome-head h2 { flex: 1; min-width: 0; margin: 0; font: 500 max(18pt,1.25rem)/1.2 Georgia,serif; overflow-wrap: anywhere; color: #f5d69d; }
.pq-outcome-head .pq-button { min-width: 60px; min-height: 56px; padding: 8px 14px; }
.pq-outcome-icon { display: flex; color: #f3ca81; }
.pq-outcome-body { min-height: 0; padding: 12px 16px 16px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pq-outcome-body.gr-scroll-needed { padding-right: 42px; }
.pq-outcome-body p { margin: 0 0 14px; line-height: 1.4; }
.pq-outcome-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 8px 16px; }
.pq-outcome-stat { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #729d8d; border-radius: 8px; background: #06252e; }
.pq-change-loss { color: #ffb49b; }.pq-change-gain { color: #a5edbf; }
.pq-outcome--danger { border-color: #ef9d86; }.pq-outcome--danger .pq-outcome-head { background: #543b35; }
@media (max-width:900px) { .pq-app .pq-ledger-dialog .gr-dialog__body { display: block; }.pq-ledger-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }.pq-ledger-stats article { display: block; }.pq-ledger-stats article strong { display: block; }.pq-chat-layout { grid-template-columns: minmax(0,1fr); }.pq-chat-replies { grid-template-columns: repeat(2,minmax(0,1fr)); position: static; } }
@media (max-width:600px) {
 .pq-app .gr-dialog__body.gr-scroll-viewport { padding: 16px; }.pq-app .gr-dialog__body.gr-scroll-needed { padding-right: 44px; }
 .pq-help-grid,.pq-settings-grid,.pq-contact-list,.pq-service-grid,.pq-shop-products { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .pq-help-grid>article,.pq-settings-grid>section,.pq-contact,.pq-service-card,.pq-shop-card { padding: 16px; }
 .pq-ledger-stats { grid-template-columns: minmax(0,1fr); }.pq-ledger-stats article { display: flex; }
 .pq-ledger-dialog .pq-leaderboard-cards article { grid-template-columns: 48px minmax(0,1fr); }.pq-ledger-dialog .pq-leaderboard-cards article>span:not(.pq-rank) { grid-column: 2; }
 .pq-chat-bubble { max-width: 100%; padding: 12px; }.pq-chat-replies { grid-template-columns: minmax(0,1fr); }
 .pq-atlas-tools { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }.pq-atlas-tools .pq-button { min-width: 0; padding: 6px; }.pq-atlas-info { grid-column: 1/-1; }
 .pq-atlas-bottom { grid-template-columns: minmax(0,1fr); }.pq-atlas-canvas { width: min(100%,55dvh); min-height: 220px; }
 .pq-outcome-head { padding: 8px; gap: 8px; }.pq-outcome-icon { display: none; }.pq-outcome-body { padding: 10px; }.pq-outcome-stat { gap: 8px; padding: 8px; }
}
@media (max-height:560px) and (min-width:601px) {
 .pq-app .gr-dialog__body.gr-scroll-viewport { display: block; padding: 12px 16px; }.pq-app .gr-dialog__body.gr-scroll-needed { padding-right: 44px; }
 .pq-help-grid,.pq-settings-grid,.pq-contact-list,.pq-service-grid,.pq-shop-products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
 .pq-help-grid>article,.pq-settings-grid>section,.pq-contact,.pq-service-card,.pq-shop-card { padding: 14px; }
 .pq-chat-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(240px,1fr); }.pq-chat-replies { grid-template-columns: minmax(0,1fr); position: sticky; }
 .pq-ledger-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .pq-app .pq-atlas-dialog .gr-dialog__body { display: block; }.pq-atlas-layout { grid-template-rows: auto 240px auto; }.pq-atlas-canvas { width: 240px; height: 240px; min-height: 240px; }
 .pq-outcome-head { padding: 6px 10px; }.pq-outcome-body { padding: 10px; }.pq-outcome-head h2 { line-height: 1.2; }.pq-outcome-icon { display: none; }
}

.pq-outcome-stat { grid-template-columns: 32px minmax(0,1fr); }
.pq-outcome-stat>span:not(.pq-stat-icon) { overflow-wrap: anywhere; }
.pq-outcome-stat>strong { grid-column: 2; justify-self: start; overflow-wrap: anywhere; }
.pq-upgrade-benefits { display: grid; gap: 10px; list-style: none; padding: 0; margin: 12px 0; }
.pq-upgrade-benefits li { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid #5d8f80; }
.pq-upgrade-benefits li>span:last-child { min-width: 0; }.pq-upgrade-benefits strong { display: block; color: #f6dfb1; overflow-wrap: anywhere; }
.pq-requirement-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 12px; }
.pq-requirement { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; padding: 16px; border: 1px solid #8fb29c; border-radius: 10px; background: #092933; }
.pq-requirement strong { display: block; font-weight: 400; color: #d2e1ca; }.pq-requirement b { grid-column: 2; color: #a6eac0; }
.pq-requirement--missing { border-color: #efb69d; }.pq-requirement--missing b { color: #ffbd9f; }
.pq-shot-result { display: flex; align-items: center; gap: 12px; color: #efd09a; }
/* Build 112: ship growth, signed reputation and accessible treasure accounts. */
.pq-resource.pq-resource--safe { border: 1px solid #a4b793; border-radius: 9px; background: #d8d6a60a; text-align: left; padding: 10px 12px; color: inherit; cursor: pointer; font: inherit; min-height: 56px; }
.pq-resource.pq-resource--safe:hover { background: #e2c48720; border-color: #f0cd85; }
.pq-stat-link { color: #f2d097; padding: 0; background: transparent; border: 0; border-bottom: 1px solid #b8b990; min-height: 56px; text-align: left; font: inherit; cursor: pointer; }
.pq-reputation-meter { position: relative; height: 12px; margin-top: 12px; border: 1px solid #8ba99b; border-radius: 8px; background: linear-gradient(90deg,#4d3033 0 50%,#133e36 50% 100%); overflow: hidden; }
.pq-reputation-meter>span { position: absolute; top: 0; bottom: 0; background: #89d6a9; }.pq-reputation-meter>span.pq-reputation-negative { background: #ee9e92; }
.pq-reputation-meter>b { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #f8e8bd; }
.pq-stat-icon--reputation { color: #e5b89c; }.pq-stat-icon--hours { color: #95ccdc; }
.pq-crew-benefits { padding: 16px; background: #092a32; border: 1px solid #82a793; border-radius: 10px; }
.pq-store-disabled { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.pq-store-disabled>span { color: #c7d6c4; }
.pq-rescue-advice { padding: 16px; border: 1px solid #d0b182; border-radius: 10px; background: #343b32; }
.pq-treasure-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 20px; }
.pq-treasure-card { padding: 20px; background: #092a32; border: 1px solid #9ab49b; border-radius: 14px; min-width: 0; }
.pq-treasure-card h3 { overflow-wrap: anywhere; }.pq-treasure-card p { overflow-wrap: anywhere; }
.pq-treasure-gold { display: flex; align-items: center; gap: 12px; color: #f0d094 !important; }
.pq-treasure-gold svg { flex: 0 0 32px; color: #eac681; }.pq-treasure-gold strong { min-width: 0; overflow-wrap: anywhere; }
.pq-presentation-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8; max-width: calc(100% - 24px); padding: 10px 16px; border: 1px solid #e8ca91; border-radius: 9px; background: #082d38f2; color: #ffe0a3; text-align: center; font-size: var(--pq-font); line-height: 1.3; pointer-events: none; }
.pq-presentation-note[hidden] { display: none; }.pq-presenting .pq-ocean { cursor: progress; }.pq-presenting .pq-panel { opacity: .72; }
/* Replies follow the complete conversation in the same native scroll region. */
.pq-app .pq-chat-layout { display: flex; flex-direction: column; align-items: stretch; }
.pq-app .pq-chat-reading { width: 100%; }.pq-app .pq-chat-transcript { width: 100%; }
.pq-app .pq-chat-replies { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; margin-top: 20px; }
.pq-app .pq-chat-replies:empty { display: none; }
@media (max-width:900px) { .pq-app .pq-chat-replies { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .pq-app .pq-chat-replies { grid-template-columns: minmax(0,1fr); } }
.pq-gain { margin: 12px 0; }.pq-gain-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #f2dfb4; }
.pq-gain-bar { position: relative; height: 18px; margin: 10px 0; background: #031b24; border: 1px solid #92ab91; border-radius: 6px; overflow: hidden; }
.pq-gain-current,.pq-gain-added { display: block; position: absolute; height: 100%; top: 0; }.pq-gain-current { left: 0; background: #66af96; }.pq-gain-added { background: #f2cf85; border-left: 2px solid #fff1c2; }
.pq-gain p { display: flex; flex-wrap: wrap; gap: 8px 14px; }.pq-tier-limit { color: #c4d6c3; margin-left: auto; }
.pq-secondary-stat { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }.pq-tier-preview { padding: 12px; background: #06232d; border: 1px solid #6d9787; border-radius: 8px; }
.pq-tier-preview p { display: flex; align-items: center; gap: 10px; margin: 8px 0; }.pq-service-card form { display: grid; grid-template-columns: minmax(0,1fr); }
.pq-service-card--shipwright { align-self: start; padding: 16px; }
.pq-service-card--shipwright form { margin-top: 12px; }
.pq-service-card--shipwright .pq-gain { margin: 8px 0; }
.pq-service-card--shipwright .pq-gain-bar { margin: 8px 0; }
.pq-service-card--shipwright .pq-gain-benefit { margin: 0; }
.pq-service-stock { align-self: flex-start; padding: 4px 8px; border: 1px solid #6c9488; border-radius: 7px; color: #c8dccb; line-height: 1.3; }
.pq-tier-benefits { display: grid; gap: 8px; padding: 0; margin: 4px 0 8px; list-style: none; }
.pq-tier-benefits li { display: flex; align-items: center; gap: 10px; color: #d7e7cc; line-height: 1.3; }
.pq-tier-benefits svg { flex: 0 0 28px; }
/* Build113: compact primary island actions, before the service collection. */
.pq-hud { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pq-ship-readouts { display: grid; grid-template-columns: minmax(150px,1fr) minmax(150px,1fr); align-items: end; gap: 16px; }
.pq-ship-power { min-width: 0; }
.pq-dock__ship .pq-hull { grid-column: auto; min-width: 0; }
.pq-dock__ship .pq-hull__label { margin: 0; gap: 4px 8px; line-height: 1.3; }
.pq-dock__ship .pq-hull__label>span { gap: 6px; }
.pq-dock__ship .pq-hull__label strong { display: inline; font: inherit; white-space: nowrap; }
.pq-dock__ship .pq-hull__label svg { display: none; }
.pq-dock__ship .pq-meter,.pq-dock__ship .pq-power { width: 100%; max-width: none; height: 6px; margin: 4px 0 0; }
.pq-dock__ship [data-power-label] { line-height: 1.3; }
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-hull__label { margin: 0; }
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-meter,
.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-power { height: 6px; margin: 4px 0 0; }
.pq-island-quick-actions { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 12px; margin: 0 0 20px; }
.pq-island-quick-action { min-width: 0; padding: 0; border: 0; background: transparent; }
.pq-island-search { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pq-island-search p { min-width: 0; margin: 0; line-height: 1.3; color: #c8dbcd; overflow-wrap: anywhere; }
.pq-island-search .pq-button { flex: 0 1 auto; min-height: 48px; padding: 10px 14px; }
.pq-island-search>.pq-button:only-child { width: 100%; }
.pq-app .pq-panel>.pq-island-primary-search { grid-column: 1/-1; min-width: 0; }
.pq-island-quick-actions--store { grid-template-columns: minmax(0,1fr); }
.pq-island-store { display: flex; align-items: center; justify-content: center; }
.pq-island-store>.pq-button { width: 100%; min-height: 48px; padding: 10px 14px; }
.pq-island-store .pq-store-disabled { width: 100%; justify-content: center; gap: 8px 12px; }
.pq-island-store .pq-store-disabled>span { line-height: 1.3; }
.pq-island-store .pq-store-disabled .pq-button { min-height: 48px; padding: 10px 14px; }
@media (min-width:901px) and (min-height:561px) {
 .pq-hud>.pq-resource { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media (max-width:600px) {
 .pq-island-quick-actions { grid-template-columns: minmax(0,1fr); gap: 10px; margin-bottom: 16px; }
 .pq-island-quick-action { padding: 0; }
 .pq-island-search { gap: 8px; }
 .pq-island-search .pq-button { padding: 10px; gap: 8px; }
 .pq-island-store .pq-store-disabled { justify-content: space-between; }
}
@media (max-width:1199px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-hud { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource>span { flex-direction: column; gap: 2px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource b { text-align: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock { padding: 0; gap: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship { padding: 4px 10px; }
 .pq-ship-readouts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-hull__label strong { display: inline; }
}
@media (max-height:560px) and (min-width:601px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-stage,
 .pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]),
 .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage,
 .pq-app:fullscreen:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr) auto 78px; grid-template-areas: "hud hud hud" "scene scene scene" "power course pause"; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship { height: 56px; min-height: 56px; padding: 4px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource>span { flex-direction: row; gap: 8px; }
 .pq-ship-readouts { grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: 12px; }
}
@media (max-width:360px) {
 .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage,
 .pq-app:has(.pq-welcome[hidden]):not(:fullscreen) .pq-stage:has(.pq-panel[hidden]) { grid-template-rows: auto minmax(0,1fr) auto; }
 .pq-app:has(.pq-welcome[hidden]) .pq-course button { width: 48px; min-width: 48px; }
 .pq-island-search { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
 .pq-island-search .pq-button { width: 100%; }
}
@media (max-width:600px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-hud { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 8px 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource>span { flex-direction: row; gap: 8px; }
}
.pq-presenting .pq-panel__actions { visibility: hidden; pointer-events: none; }
.pq-presentation-note { width: max-content; max-width: calc(100% - 24px); }
.pq-presenting .pq-battle-clock { visibility: hidden; }
/* A manual heading is a plan, with a separate explicit clear action. */
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-route:not([hidden]) { display: flex; align-items: stretch; gap: 0; padding: 0; text-decoration: none; }
.pq-route-heading,.pq-route-clear { min-height: 56px; padding: 8px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.pq-route-heading { flex: 1; min-width: 0; overflow-wrap: anywhere; }.pq-route-clear { min-width: 76px; border-left: 1px solid #b7b58a; text-align: center; }
.pq-route-clear:hover { background: #d8d4a41f; }
.pq-atlas-bottom { grid-template-columns: minmax(0,1fr) auto auto; }
@media (max-width:600px) { .pq-atlas-bottom { grid-template-columns: minmax(0,1fr); } }
/* Map controls, progress and selected places occupy their own rows at every size. */
.pq-app .pq-atlas-dialog .gr-dialog__body { display: block; width: min(100%,1100px); }
.pq-app .pq-atlas-dialog .pq-atlas-layout { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: none; align-content: start; align-items: start; justify-items: stretch; gap: 16px; width: 100%; min-height: 0; }
.pq-app .pq-atlas-dialog .pq-atlas-tools { position: static; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-column: auto; grid-row: auto; width: 100%; gap: 8px; }
.pq-app .pq-atlas-dialog .pq-atlas-tools .pq-button { min-width: 44px; min-height: 48px; padding: 8px; }
.pq-atlas-progress { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; min-width: 0; }
.pq-atlas-progress__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pq-atlas-progress__heading strong { color: #f0dcaf; font-weight: 600; }
.pq-atlas-progress__heading .pq-button { min-height: 48px; padding: 8px 12px; }
.pq-discovery-meter { height: 16px; border: 1px solid #83b2a0; border-radius: 6px; background: #021b28; overflow: hidden; }
.pq-discovery-meter>span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#40aa9a,#cfe6ab); }
.pq-atlas-count { color: #e4e4c9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pq-app .pq-atlas-dialog .pq-atlas-info { position: static; width: auto; grid-column: auto; grid-row: auto; margin: 0; color: #c9ddca; }
.pq-app .pq-atlas-dialog .pq-atlas-canvas { display: block; position: static; grid-column: auto; grid-row: auto; width: min(100%,55dvh,700px); height: auto; min-height: 0; max-width: 100%; aspect-ratio: 1; justify-self: center; }
.pq-app .pq-atlas-dialog .pq-atlas-bottom { position: static; display: grid; grid-template-columns: minmax(0,1fr); grid-column: auto; grid-row: auto; align-items: start; gap: 12px; width: 100%; }
.pq-app .pq-atlas-dialog .pq-atlas-detail { position: static; display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid #759e91; border-radius: 10px; background: #082932; }
.pq-app .pq-atlas-dialog .pq-atlas-detail[hidden],.pq-app .pq-atlas-dialog .pq-atlas-actions[hidden] { display: none; }
.pq-app .pq-atlas-dialog .pq-atlas-detail strong { overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.pq-app .pq-atlas-dialog .pq-atlas-detail span { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pq-atlas-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; min-width: 0; }
.pq-atlas-actions .pq-button,.pq-atlas-poi { min-height: 48px; min-width: 0; }
.pq-atlas-poi { justify-self: stretch; padding: 10px; gap: 8px; }
.pq-app .pq-poi-dialog .gr-dialog__body,.pq-app .pq-discovery-stats-dialog .gr-dialog__body { display: block; width: min(100%,1400px); }
.pq-poi-section+.pq-poi-section,.pq-discovery-section+.pq-discovery-section { margin-top: 28px; }
.pq-poi-section>h3,.pq-discovery-section>h3 { margin: 0 0 16px; }
.pq-poi-section>[role=status] { color: #c6d9c8; line-height: 1.35; margin: 0 0 16px; }
.pq-poi-dialog .pq-treasure-card { display: grid; align-content: start; gap: 14px; padding: 16px; }
.pq-poi-dialog .pq-treasure-card>h3,.pq-poi-dialog .pq-treasure-card>p { margin: 0; }
.pq-poi-dialog .pq-treasure-list { align-items: start; }
.pq-poi-bearing { display: flex; align-items: center; gap: 10px; color: #c9ddce; }
.pq-poi-bearing svg { flex: 0 0 28px; color: #9fdac8; }
.pq-poi-stock { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.pq-poi-stock>div { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid #547e75; border-radius: 8px; background: #05232c; }
.pq-poi-stock svg { color: #a3d6bd; }.pq-poi-stock>div:nth-child(2) svg { color: #a9c9e9; }.pq-poi-stock>div:nth-child(3) svg { color: #f1c691; }.pq-poi-stock>div:nth-child(4) svg { color: #90d5cf; }.pq-poi-stock>div:nth-child(5) svg { color: #d3c5a1; }.pq-poi-stock>div:nth-child(6) svg { color: #d5b1e6; }
.pq-poi-stock dt { min-width: 0; line-height: 1.3; }.pq-poi-stock dd { margin: 0; color: #f2dbab; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pq-discovery-stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: 12px; margin-top: 16px; }
.pq-discovery-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #83a38c; border-radius: 10px; background: #092a34; }
.pq-discovery-stat>span { display: flex; align-items: center; gap: 10px; min-width: 0; color: #caddcd; line-height: 1.3; }.pq-discovery-stat svg { flex: 0 0 32px; color: #a4d4bc; }
.pq-discovery-stat>strong { color: #f2d59c; font-size: 24pt; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pq-discovery-note { line-height: 1.4; color: #bdd2c3; }
/* Build 114: concise information screens sized by their actual content area. */
.pq-app .pq-help-grid { grid-template-columns: minmax(0,1fr); }
.pq-app .pq-help-grid h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; line-height: 1.25; text-transform: none; letter-spacing: normal; }
.pq-help-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; color: #f0c889; background: #dfbe7514; border: 1px solid #b7a97573; }
.pq-help-grid article:nth-child(3n+2) .pq-help-icon { color: #a4dfce; border-color: #74aa9e80; background: #8dcbb012; }
.pq-help-grid article:nth-child(3n) .pq-help-icon { color: #b7cfee; border-color: #96b5dd73; background: #99b9df12; }
.pq-service-shortfall { display: block; flex: 1 0 100%; color: #f2c4a4; font-weight: 500; line-height: 1.35; }
.pq-repair-gift { display: flex; align-items: center; gap: 10px; color: #a4dfce; }
.pq-app .pq-amount input { font: inherit; font-size: var(--pq-font) !important; }
.pq-poi-section { container: pq-points / inline-size; }
.pq-app .pq-poi-dialog .pq-treasure-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pq-poi-dialog .pq-treasure-card { container: pq-point-card / inline-size; }
.pq-app .pq-poi-stock dt { font: inherit; font-weight: 500; overflow-wrap: anywhere; }
.pq-app .pq-poi-stock dd { font-size: inherit; line-height: 1.3; min-width: 2.5ch; text-align: right; }
.pq-app .pq-poi-dialog .pq-treasure-card>h3 { overflow-wrap: anywhere; line-height: 1.25; }
/* Small landscape phones need a real welcome layout rather than portrait rows. */
@media (max-width:800px) and (max-height:420px) and (orientation:landscape) {
 .pq-app:has(.pq-welcome:not([hidden])) .pq-header { height: 64px; min-height: 64px; padding: 4px 8px; flex-wrap: nowrap; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-brand { display: none; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-header__tools { width: 100%; justify-content: center; gap: 8px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-tool { width: 56px; min-width: 56px; height: 56px; padding: 10px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-stage { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: "welcome scene"; gap: 10px; padding: 10px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 0 4px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome h1 { font-size: max(24pt,2rem); margin: 0 0 10px; line-height: 1.08; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome p,.pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions .pq-link-button { display: none; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions .pq-button { min-height: 48px; padding: 8px 12px; gap: 8px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome__actions .pq-button svg:last-child { margin-left: 0; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-scene { height: 100%; min-height: 0; }
}
@media (max-width:479px) and (max-height:420px) and (orientation:landscape) {
 .pq-app:has(.pq-welcome:not([hidden])) .pq-header__tools { gap: 6px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-tool { width: 44px; min-width: 44px; height: 44px; padding: 6px; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-stage { grid-template-columns: minmax(0,1fr); grid-template-areas: "welcome"; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-scene { display: none; }
 .pq-app:has(.pq-welcome:not([hidden])) .pq-welcome h1 { font-size: max(20pt,1.5rem); }
}
@media (min-width:480px) and (max-width:800px) and (max-height:420px) and (orientation:landscape) {
 .pq-app:has(.pq-welcome[hidden]) .pq-header { height: 48px; min-height: 48px; padding: 2px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-header__tools { gap: 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-tool { width: 44px; min-width: 44px; height: 44px; padding: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-stage,.pq-app:has(.pq-welcome[hidden]) .pq-stage:has(.pq-panel[hidden]) { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; grid-template-areas: "hud" "scene" "dock"; padding: 4px; gap: 4px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px 6px; gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource>span { gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-hud>.pq-resource b { line-height: 1.1; white-space: nowrap; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock { display: grid; grid-area: dock; grid-template-columns: minmax(0,1fr) auto; gap: 0; padding: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship { grid-area: auto; grid-column: 1/-1; height: 44px; min-height: 44px; padding: 2px 8px; border-width: 1px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-course { grid-area: auto; grid-column: 1; grid-row: 2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__actions { grid-area: auto; grid-column: 2; grid-row: 2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship [data-power-label],.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-hull__label { line-height: 1.1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-meter,.pq-app:has(.pq-welcome[hidden]) .pq-dock__ship .pq-power { margin-top: 2px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-course button { width: 44px; min-width: 44px; height: 44px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-stop { min-height: 44px; height: 44px; padding: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel { bottom: 4px; left: 4px; right: 4px; width: calc(100% - 8px); max-width: calc(100% - 8px); max-height: calc(100% - 8px); padding: 6px; border-width: 1px; align-content: start; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel h2 { min-width: 0; margin: 0; font: 600 var(--pq-font)/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel .pq-button,.pq-app:has(.pq-welcome[hidden]) .pq-panel .pq-link-button { height: 44px; min-height: 44px; padding: 6px; border-width: 1px; line-height: 1.1; white-space: nowrap; overflow-wrap: normal; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-panel__actions .pq-button { height: 44px; min-height: 44px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) { grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; align-items: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-island-primary-search { grid-column: 1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault)>h2 { grid-column: 1/-1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) .pq-panel__actions--pair,.pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) .pq-island-depart { display: contents; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-island-vault) .pq-amount { grid-column: 1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-amount input { height: 44px; min-height: 44px; padding: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__stats { margin: 0; gap: 12px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__actions { grid-column: 1/-1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,1fr); gap: 6px 10px; align-items: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock)>h2 { grid-column: 1; grid-row: 1; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-battle-clock { grid-column: 2; grid-row: 1; margin: 0; padding: 0; line-height: 1.15; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-opponent-hull { grid-column: 1; grid-row: 2; margin: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-opponent-hull>span { margin: 0 0 2px; font-size: var(--pq-font); line-height: 1.15; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-battle-actions { grid-column: 2; grid-row: 2; gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-discovery-actions) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-discovery-risk { grid-column: 2; grid-row: 1; margin: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel>.pq-discovery-risk>span { display: none; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel .pq-discovery-actions { grid-column: 1/-1; }
 .pq-outcome-head { gap: 8px; padding: 4px 8px; }
 .pq-outcome-head h2 { font-size: var(--pq-font); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pq-outcome-head .pq-button { height: 44px; min-height: 44px; padding: 6px 12px; line-height: 1.1; }
 .pq-outcome-icon { display: none; }
 .pq-outcome-body { padding: 6px 8px; }
 .pq-outcome-body.gr-scroll-needed { padding-right: 38px; }
 .pq-outcome-stats { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 6px; }
 .pq-outcome-stat { grid-template-columns: 28px minmax(0,1fr) auto; gap: 6px; padding: 6px; line-height: 1.1; }
 .pq-outcome-stat>strong { grid-column: auto; white-space: nowrap; }
}
@media (min-width:480px) and (max-width:800px) and (max-height:300px) and (orientation:landscape) {
 .pq-app:has(.pq-outcome:not([hidden])) .pq-hud,.pq-app:has(.pq-outcome:not([hidden])) .pq-course,.pq-app:has(.pq-outcome:not([hidden])) .pq-dock__actions { display: none !important; }
}
@media (max-width:1120px) {
 .pq-app .pq-poi-dialog .pq-treasure-list { grid-template-columns: minmax(0,1fr); }
}
@container pq-points (max-width:1040px) {
 .pq-app .pq-poi-dialog .pq-treasure-list { grid-template-columns: minmax(0,1fr); }
}
@container pq-point-card (max-width:440px) {
 .pq-poi-stock { grid-template-columns: minmax(0,1fr); }
 .pq-poi-dialog .pq-screen-actions { display: grid; grid-template-columns: minmax(0,1fr); }
}
@media (max-width:460px) {
 .pq-app .pq-atlas-dialog .pq-atlas-tools { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .pq-app .pq-atlas-dialog .pq-atlas-tools .pq-button { padding: 4px; white-space: nowrap; }
 .pq-app .pq-atlas-dialog .pq-atlas-layout { gap: 12px; }
 .pq-atlas-actions { grid-template-columns: minmax(0,1fr); }
 .pq-poi-stock { grid-template-columns: minmax(0,1fr); }
 .pq-poi-dialog .pq-screen-actions { display: grid; grid-template-columns: minmax(0,1fr); }
}
/* Build114: the chart stays within the game viewport; compact controls leave the sea room. */
.pq-app .pq-atlas-dialog>.gr-dialog__head { padding: 10px 16px; gap: 12px; }
.pq-app .pq-atlas-dialog>.gr-dialog__head .gr-icon-button { flex-basis: 48px; width: 48px; height: 48px; padding: 6px; }
.pq-app .pq-atlas-dialog>.gr-dialog__head .gr-icon-button svg { width: 32px; height: 32px; flex-basis: 32px; }
.pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: stretch; width: 100%; max-width: 1600px; min-height: 0; padding: 12px; overflow: hidden; scrollbar-gutter: auto; }
.pq-app .pq-atlas-dialog>.gr-scrollbar { display: none; }
.pq-app .pq-atlas-dialog .pq-atlas-layout { flex: 1 1 0; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); align-content: stretch; align-items: stretch; gap: 12px; width: 100%; min-width: 0; min-height: 0; }
.pq-atlas-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; min-width: 0; }
.pq-app .pq-atlas-dialog .pq-atlas-tools { display: flex; flex: 0 0 auto; justify-content: flex-start; align-items: center; gap: 4px; width: auto; margin: 0; }
.pq-app .pq-atlas-dialog .pq-atlas-tools .pq-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 6px; margin: 0; gap: 0; line-height: 1; border-radius: 8px; }
.pq-app .pq-atlas-dialog .pq-atlas-tools .pq-button svg { width: 26px; height: 26px; flex: 0 0 26px; }
.pq-app .pq-atlas-dialog .pq-atlas-progress { flex: 1 1 280px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 44px 8px; align-items: center; gap: 4px 10px; min-width: 0; max-width: 620px; }
.pq-app .pq-atlas-dialog .pq-atlas-progress .pq-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; height: 44px; padding: 6px 10px; gap: 8px; line-height: 1; }
.pq-app .pq-atlas-dialog .pq-atlas-count { min-width: 0; line-height: 1.2; white-space: nowrap; }
.pq-app .pq-atlas-dialog .pq-atlas-progress>.pq-discovery-meter { grid-column: 1/-1; width: 100%; height: 8px; }
.pq-atlas-content { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; min-height: 0; gap: 16px; }
.pq-atlas-main { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.pq-app .pq-atlas-dialog .pq-atlas-canvas { position: static; display: block; width: 100%; height: 100%; min-height: 0; max-width: none; aspect-ratio: auto; }
.pq-app .pq-atlas-dialog .pq-atlas-info { position: absolute; left: 12px; right: 12px; bottom: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; color: #e4edd7; background: #062631ed; line-height: 1.3; pointer-events: none; }
.pq-app .pq-atlas-dialog .pq-atlas-info[hidden] { display: none; }
.pq-app .pq-atlas-dialog .pq-atlas-bottom { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; min-width: 0; min-height: 0; padding: 0; }
.pq-app .pq-atlas-dialog .pq-atlas-bottom[hidden] { display: none; }
.pq-app .pq-atlas-dialog .pq-atlas-back { align-self: flex-start; min-height: 44px; padding: 6px 12px; gap: 8px; }
.pq-atlas-back svg { transform: rotate(180deg); }
.pq-app .pq-atlas-dialog .pq-atlas-detail { display: grid; align-content: start; gap: 12px; padding: 16px; min-width: 0; min-height: 0; border: 1px solid #759e91; border-radius: 10px; background: #082932; line-height: 1.3; }
.pq-app .pq-atlas-dialog .pq-atlas-detail strong { display: block; margin: 0; font-size: max(18pt,1rem); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.pq-atlas-facts { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.pq-app .pq-atlas-dialog .pq-atlas-fact,.pq-app .pq-atlas-dialog .pq-atlas-bearing { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; color: #dce7d5; line-height: 1.3; }
.pq-app .pq-atlas-dialog .pq-atlas-fact>span { display: block; min-width: 0; overflow-wrap: anywhere; }
.pq-app .pq-atlas-dialog .pq-atlas-fact svg,.pq-app .pq-atlas-dialog .pq-atlas-bearing svg { flex: 0 0 26px; color: #acd7c5; }
.pq-app .pq-atlas-dialog .pq-atlas-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 10px; margin: 0; }
.pq-app .pq-atlas-dialog .pq-atlas-actions .pq-button { min-width: 0; min-height: 48px; padding: 8px 10px; }
.pq-app .pq-atlas-dialog .pq-atlas-has-selection { grid-template-rows: minmax(0,1fr); }
.pq-atlas-has-selection .pq-atlas-topbar,.pq-atlas-has-selection .pq-atlas-main { display: none; }
.pq-atlas-has-selection .pq-atlas-content { grid-row: 1/-1; }
@media (min-width:1100px) and (min-height:650px) {
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection { grid-template-rows: auto minmax(0,1fr); }
 .pq-atlas-has-selection .pq-atlas-topbar,.pq-atlas-has-selection .pq-atlas-main { display: flex; }
 .pq-atlas-has-selection .pq-atlas-content { grid-row: auto; grid-template-columns: minmax(0,1fr) minmax(300px,400px); }
 .pq-app .pq-atlas-dialog .pq-atlas-actions { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:420px) {
 .pq-app .pq-atlas-dialog>.gr-dialog__head { padding: 8px 12px; gap: 8px; }
 .pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport { padding: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-layout { gap: 8px; }
 .pq-atlas-topbar { gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-progress { flex-basis: 100%; max-width: none; }
 .pq-app .pq-atlas-dialog .pq-atlas-detail { padding: 12px; gap: 10px; }
 .pq-app .pq-atlas-dialog .pq-atlas-detail strong { font-size: max(16pt,1rem); }
 .pq-app .pq-atlas-dialog .pq-atlas-bottom { gap: 10px; }
 .pq-app .pq-atlas-dialog .pq-atlas-actions { grid-template-columns: minmax(0,1fr); gap: 8px; }
}
@media (max-height:450px) and (min-width:600px) {
 .pq-app .pq-atlas-dialog>.gr-dialog__head { padding: 4px 12px; }
 .pq-app .pq-atlas-dialog>.gr-dialog__head h2 { font-size: max(18pt,1rem); }
 .pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport { padding: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-layout { gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-bottom { gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-detail { padding: 10px 12px; gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-detail strong { font-size: max(16pt,1rem); }
 .pq-app .pq-atlas-dialog .pq-atlas-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Long exploration totals wrap between numbers rather than beneath Stats. */
.pq-app .pq-atlas-dialog .pq-atlas-progress { grid-template-rows: minmax(44px,auto) 8px; }
.pq-app .pq-atlas-dialog .pq-atlas-count { white-space: normal; line-height: 1.15; }
@media (max-height:450px) and (min-width:480px) {
 .pq-app .pq-atlas-dialog>.gr-dialog__head { padding: 4px 12px; }
 .pq-app .pq-atlas-dialog>.gr-dialog__head h2 { font-size: max(18pt,1rem); }
 .pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport { padding: 8px; }
 .pq-atlas-topbar { gap: 8px 12px; }
 .pq-app .pq-atlas-dialog .pq-atlas-layout { gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection .pq-atlas-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(144px,.48fr); grid-template-rows: 46px minmax(0,1fr); align-content: start; gap: 8px 12px; }
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection .pq-atlas-detail { grid-column: 1; grid-row: 1/3; align-self: start; padding: 10px 12px; gap: 8px; }
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection .pq-atlas-detail strong { font-size: max(16pt,1rem); }
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection .pq-atlas-back { grid-column: 2; grid-row: 1; }
 .pq-app .pq-atlas-dialog .pq-atlas-has-selection .pq-atlas-actions { grid-column: 2; grid-row: 2; align-self: start; grid-template-columns: minmax(0,1fr); gap: 8px; }
}
@media (max-height:450px) and (min-width:480px) and (max-width:700px) {
 .pq-app .pq-atlas-dialog .pq-atlas-progress { flex-basis: 220px; max-width: none; }
 .pq-app .pq-atlas-dialog .pq-atlas-progress .pq-button { width: 44px; min-width: 44px; padding: 6px; }
 .pq-app .pq-atlas-dialog .pq-atlas-progress .pq-button>span { display: none; }
}
/* An unsuccessful map order has its own readable state instead of pushing actions offscreen. */
.pq-app .pq-atlas-dialog>.gr-dialog__body:has(>.pq-atlas-error-feedback)>.pq-atlas-layout { display: none; }
.pq-app .pq-atlas-dialog .pq-atlas-error-feedback { display: flex; flex: 0 0 auto; flex-direction: column; align-self: center; width: 100%; max-width: 760px; margin: auto 0; padding: 16px; gap: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.pq-atlas-error-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pq-app .pq-atlas-dialog .pq-atlas-error-feedback .pq-button { min-width: 44px; min-height: 44px; margin: 0; padding: 8px 12px; }
.pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport:has(>.pq-atlas-error-feedback) { overflow-y: auto; }
.pq-app .pq-atlas-dialog>.gr-dialog__body.gr-scroll-viewport.gr-scroll-needed:has(>.pq-atlas-error-feedback) { padding-right: 44px; }
.pq-app .pq-atlas-dialog:has(.pq-atlas-error-feedback)>.gr-scrollbar:not([hidden]) { display: block; }
/* Build115: six clear tools and live combat actions retain real touch targets. */
.pq-inventory-tool { position: relative; }
.pq-inventory-dot { position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border: 2px solid #092a34; border-radius: 50%; background: #f5cc82; box-shadow: 0 0 0 2px #f5cc824d; pointer-events: none; }
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions--live { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions--live .pq-button { min-height: 48px; height: 48px; padding: 8px; }
.pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-actions--live)>h2 { min-width: 0; font-size: var(--pq-font); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pq-live-arrive { from { opacity: 0; } to { opacity: 1; } }
.pq-app .pq-panel:has(.pq-battle-actions--live).pq-arriving { animation: pq-live-arrive .3s ease-out; }
@media (max-width:600px) {
 .pq-app .pq-header__tools { flex-wrap: nowrap; gap: clamp(2px,1vw,6px); }
 .pq-app:has(.pq-welcome[hidden]) .pq-header { min-height: 52px; height: 52px; padding: 4px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-header__tools { gap: clamp(2px,1vw,6px); }
 .pq-app:has(.pq-welcome[hidden]) .pq-tool,.pq-app:has(.pq-welcome:not([hidden])) .pq-tool { width: clamp(44px,8.8vw,56px); min-width: 44px; height: clamp(44px,8.8vw,56px); padding: 6px; }
}
@media (max-width:800px) and (max-height:700px) {
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-course,.pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-dock__actions { display: none !important; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-dock { grid-template-columns: minmax(0,1fr); }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-dock__ship { grid-column: 1; grid-row: 1; }
}
@media (min-width:480px) and (max-width:800px) and (max-height:420px) and (orientation:landscape) {
 .pq-app:has(.pq-welcome[hidden]) .pq-header { min-height: 48px; height: 48px; padding: 2px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-tool { width: 44px; min-width: 44px; height: 44px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-actions--live) { grid-template-columns: minmax(0,1fr) minmax(300px,1.35fr); gap: 6px 10px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions--live { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions--live .pq-button { min-height: 44px; height: 44px; padding: 6px 3px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-actions--live) .pq-opponent-hull>span { gap: 2px 8px; }
}
@media (min-width:480px) and (max-width:800px) and (max-height:300px) and (orientation:landscape) {
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-hud { display: none !important; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-stage { grid-template-rows: minmax(0,1fr) auto; grid-template-areas: "scene" "dock"; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-dock__ship [data-power-label] { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Live captain messages share the chat's custom scroll surface. */
.pq-app .pq-chat-compose { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 10px; width: 100%; min-width: 0; margin-top: 18px; padding: 12px 0 0; border-top: 1px solid #71978b; background: #0a2b35; box-shadow: 0 -10px 18px #0a2b35e8; }
.pq-app .pq-chat-compose-input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 2px solid #9db5a4; border-radius: 9px; color: #f3ead3; background: #031e2b; font: inherit; font-size: var(--pq-font) !important; line-height: 1.25; box-shadow: none; }
.pq-app .pq-chat-compose-input::placeholder { color: #b6cbc1; opacity: 1; font: inherit; font-size: inherit !important; }
.pq-app .pq-chat-compose>.pq-button { min-width: 88px; min-height: 48px; padding: 8px 12px; gap: 8px; }
@media (max-width:420px) {
 .pq-app .pq-chat-compose { gap: 8px; margin-top: 12px; }
 .pq-app .pq-chat-compose-input { padding: 8px; }
 .pq-app .pq-chat-compose>.pq-button { min-width: 80px; padding: 8px 10px; }
 .pq-app .pq-chat-compose>.pq-button svg { display: none; }
}
@media (max-height:350px) {
 .pq-app .pq-chat-compose { padding-top: 8px; margin-top: 10px; }
 .pq-app .pq-chat-compose-input,.pq-app .pq-chat-compose>.pq-button { min-height: 44px; }
}

/* Build119: the helm keeps its own column when sailing status text changes. */
@media (min-width:1200px) and (min-height:561px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-dock { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
 .pq-app:has(.pq-welcome[hidden]) .pq-course { justify-self: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-dock__actions { justify-self: end; width: 100%; max-width: 17em; min-width: 0; }
 .pq-app:has(.pq-welcome[hidden]) .pq-sailing-state { width: 100%; min-height: 3em; justify-content: center; }
}
/* Build116: explain voyage actions beside the action they describe. */
.pq-app .pq-voyage-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.pq-app .pq-voyage-option { min-width: 0; }
.pq-app .pq-setting-help { margin: 8px 0 0; color: #bfd0c5; font: inherit; font-size: var(--pq-font); line-height: 1.45; overflow-wrap: anywhere; }

.pq-app .pq-captain-score { padding: 18px; border: 1px solid #b8aa75; border-radius: 14px; background: #102f36; }
.pq-app .pq-score-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.pq-app .pq-score-total strong { color: #edd19b; font-size: max(24pt,1.5rem); }
.pq-app .pq-score-total strong span,.pq-app .pq-score-total>span,.pq-app .pq-score-current { font-size: var(--pq-font); color: #c6d4c7; }
.pq-app .pq-score-current { margin: 10px 0 0; }
.pq-app .pq-score-parts { display: grid; grid-template-columns: minmax(0,1fr); margin: 18px 0 0; gap: 16px; }
.pq-app .pq-score-parts>div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; min-width: 0; }
.pq-app .pq-score-parts dt { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 400; }
.pq-app .pq-score-parts dt svg { flex: 0 0 28px; color: #e8ca8b; }
.pq-app .pq-score-parts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: #f0d59d; }
.pq-app .pq-score-part-meter { grid-column: 1/-1; height: 6px; overflow: hidden; border-radius: 8px; background: #021d28; }
.pq-app .pq-score-part-meter>span { display: block; height: 100%; background: #8dc4ae; border-radius: inherit; }

.pq-app .pq-fire-damage { padding: 20px; margin: 0 0 20px; border: 2px solid #dbbd7c; border-radius: 14px; background: linear-gradient(130deg,#193d43,#0c2c37); }
.pq-app .pq-fire-damage h3 { display: flex; align-items: center; gap: 12px; margin: 0; color: #f0d59d; font-size: max(18pt,1rem); line-height: 1.2; }
.pq-app .pq-fire-damage h3 svg { flex: 0 0 36px; }
.pq-app .pq-fire-damage>strong { display: block; margin: 12px 0 8px; color: #fff0c7; font-size: max(28pt,1.75rem); font-variant-numeric: tabular-nums; line-height: 1.15; }
.pq-app .pq-fire-damage>strong span { font-size: var(--pq-font); }
.pq-app .pq-fire-damage p { margin: 0; color: #c7d7ca; font-size: var(--pq-font); line-height: 1.4; }
.pq-app .pq-fire-miss { display: inline-block; margin-top: 10px; padding: 5px 10px; border: 1px solid #758f84; border-radius: 8px; color: #e5e4c8; font-size: var(--pq-font); line-height: 1.25; }

/* Reviewed merchant exchange: all quantities are the server's actual fitted gains. */


/* Persistent settings action remains visible on the smallest game screens. */
.pq-app .pq-settings-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pq-app .pq-settings-status { margin: 0; color: #c5d9ce; }
.pq-app .pq-settings-status--error { color: #ffd0b7; }
.pq-app .pq-settings-feedback>.pq-button { min-height: 44px; padding: 8px 16px; }
.pq-app .pq-tool[aria-pressed="true"] { border-color: #e2bd7c; background: #d7ca9c26; color: #ffe6ae; }
@media (max-width:600px) {
 .pq-app .pq-header__tools { display: grid; grid-template-columns: repeat(7,minmax(44px,1fr)); width: 100%; min-width: 0; gap: clamp(0px,calc((100vw - 320px)/14),8px); justify-items: center; }
 .pq-app .pq-header__tools>.pq-online { display: none; }
 .pq-app:has(.pq-welcome[hidden]) .pq-header__tools,.pq-app:has(.pq-welcome:not([hidden])) .pq-header__tools { gap: clamp(0px,calc((100vw - 320px)/14),8px); }
 .pq-app:has(.pq-welcome[hidden]) .pq-header,.pq-app:has(.pq-welcome:not([hidden])) .pq-header { padding-left: 4px; padding-right: 4px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-tool,.pq-app:has(.pq-welcome:not([hidden])) .pq-tool { width: min(56px,100%); min-width: 44px; height: 44px; padding: 6px; }
}
@media (max-width:319px) {
 .pq-app .pq-header__tools { grid-template-columns: repeat(4,minmax(44px,1fr)); gap: 4px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-header,.pq-app:has(.pq-welcome:not([hidden])) .pq-header { height: auto; min-height: 100px; }
}

.pq-app:has(.pq-welcome[hidden]) .pq-hud>button.pq-resource--safe { min-height: 44px; }

@media (max-height:480px) and (min-width:600px) { .pq-weather-notices .gr-notice__copy { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; } .pq-weather-notices .gr-notice { padding:8px 14px; } }

/* Battle power shares the enemy hull readout without another panel. */
.pq-app .pq-opponent-power { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
.pq-app .pq-opponent-power>span { display: inline-flex; align-items: center; min-width: 0; gap: 6px; }
.pq-app .pq-opponent-power>span>svg { flex: 0 0 28px; color: #edc784; }
.pq-app .pq-opponent-power>b { flex: 0 0 auto; white-space: nowrap; }
.pq-app .pq-retire-bonus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: inherit; white-space: nowrap; }
@media (max-width:360px) { .pq-app .pq-island-depart .pq-button { padding-left: 6px; padding-right: 6px; overflow-wrap: normal; } }
/* Keep both enemy metrics and battle controls inside the mobile ocean. */
@media (max-width:600px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock) { padding: 6px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock)>h2 { margin: 0 0 4px; font-size: var(--pq-font); line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-opponent-hull>span { margin-bottom: 4px; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-battle-clock { padding: 4px 0; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions { gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions .pq-button { height: 44px; min-height: 44px; padding: 6px 3px; white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
}
@media (min-width:601px) and (max-height:560px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock) { left: 4px; right: 4px; bottom: 4px; width: calc(100% - 8px); max-width: calc(100% - 8px); max-height: calc(100% - 8px); display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,1fr); gap: 4px 12px; align-items: center; padding: 6px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock)>h2 { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; font-size: var(--pq-font); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock) .pq-battle-clock { grid-column: 2; grid-row: 1; margin: 0; padding: 0; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-battle-clock) .pq-opponent-hull { grid-column: 1; grid-row: 2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-battle-clock) .pq-opponent-hull>span { margin-bottom: 4px; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions { grid-column: 2; grid-row: 2; align-self: end; gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel .pq-battle-actions .pq-button { height: 44px; min-height: 44px; padding: 6px 3px; white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
}
/* Temporary ship charms share one readable component in cargo and ship stats. */
.pq-app .pq-active-powerups { min-width: 0; margin: 20px 0; font-size: var(--pq-font); }
.pq-app .pq-active-powerups>h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #d6dcad; font: inherit; font-weight: 600; line-height: 1.25; }
.pq-app .pq-active-powerups>h3>svg { flex: 0 0 28px; color: #b6d4a7; }
.pq-app .pq-active-powerups__list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 10px; }
.pq-app .pq-active-powerup { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid #83ad946b; border-radius: 12px; background: linear-gradient(120deg,#8db69d13,#082b3400),#0b3039; }
.pq-app .pq-active-powerup__art { display: flex; align-items: center; justify-content: center; width: 56px; height: 62px; }
.pq-app .pq-active-powerup__copy { min-width: 0; }
.pq-app .pq-active-powerup h4 { margin: 0; color: #f1dfb5; font: inherit; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.pq-app .pq-active-powerup p { margin: 8px 0; color: #b8cebb; font: inherit; line-height: 1.35; overflow-wrap: anywhere; }
.pq-app .pq-active-powerup strong { display: block; margin-top: 7px; color: #a5d6b7; font: inherit; font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.pq-app .pq-active-powerup strong>b { color: #e5e5b1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pq-app .pq-active-powerups--compact .pq-active-powerup { grid-template-columns: 44px minmax(0,1fr); gap: 10px; padding: 10px; }
.pq-app .pq-active-powerups--compact .pq-active-powerup__art { width: 44px; height: 50px; }
.pq-app .pq-item-powerup-benefit,.pq-app .pq-item-powerup-duration { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #9bbd9c45; border-radius: 9px; background: #87b9980c; color: #c4d8bb; line-height: 1.35; }
.pq-app .pq-item-powerup-benefit>svg,.pq-app .pq-item-powerup-duration>svg { flex: 0 0 28px; color: #add1a2; }
.pq-app .pq-item-powerup-benefit>span,.pq-app .pq-item-powerup-duration>span { min-width: 0; overflow-wrap: anywhere; }
.pq-app .pq-item-powerup-duration strong { color: #f0d99f; font-weight: 500; }
.pq-app .pq-items-cargo>.pq-active-powerups { margin-bottom: 0; }
.pq-app .pq-items-dialog .pq-item-effects:has(.pq-item-powerup-benefit) { grid-template-columns: minmax(0,1fr); }
@media (max-width:600px) {
 .pq-app .pq-active-powerups__list { grid-template-columns: minmax(0,1fr); }
 .pq-app .pq-active-powerup { gap: 10px; padding: 10px; }
 .pq-app .pq-item-powerup-benefit,.pq-app .pq-item-powerup-duration { padding: 9px; gap: 8px; }
}
/* Capability values retain their size; labels adapt to the actual stats column. */
.pq-app .pq-ship-attack { min-width: 0; container-type: inline-size; container-name: pq-own-metrics; display: grid; gap: 2px; color: #d0ddc5; }
.pq-app .pq-own-tierline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--pq-font); line-height: 1; white-space: nowrap; }
.pq-app .pq-own-attackline { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: var(--pq-font); line-height: 1; white-space: nowrap; }
.pq-app .pq-own-attacklabel { display: inline-flex; align-items: center; min-width: 0; }
.pq-app .pq-own-attacklabel>svg { display: none; }
.pq-app .pq-own-attackline>b { color: #f1d292; font-weight: 600; font-variant-numeric: tabular-nums; }
.pq-app .pq-own-crew-warning { display: inline-flex; justify-content: center; align-items: center; width: 22px; height: 22px; border-radius: 50%; color: #ffddcc; background: #932f28; font-weight: 700; }
.pq-app .pq-crew-critical .pq-own-tierline { color: #ffe0d5; }
.pq-app .pq-upgrade-attack { display: grid; gap: 6px; margin: 8px 0; min-width: 0; }
.pq-app .pq-upgrade-attack>span { display: flex; align-items: center; gap: 10px; color: #c9dbca; }
.pq-app .pq-upgrade-attack>strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font: inherit; color: #c9dbca; font-variant-numeric: tabular-nums; }
.pq-app .pq-upgrade-attack>strong>b { color: #a8d8b4; font-weight: 600; }
@container pq-own-metrics (max-width:260px) {
 .pq-app .pq-own-damage-word { display: none; }
}
@container pq-own-metrics (max-width:180px) {
 .pq-app .pq-own-attacklabel>svg { display: block; width: 28px; height: 24px; }
 .pq-app .pq-own-attackwords { display: none; }
}
@media (max-width:600px) {
 .pq-app .pq-ship-readouts { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 10px; }
 .pq-app .pq-ship-attack { gap: 0; }
}
@media (max-height:560px) and (min-width:601px) {
 .pq-app .pq-ship-attack { display: flex; align-items: center; gap: 12px; }
 .pq-app .pq-own-attackline { flex: 1 1 auto; }
 .pq-app .pq-own-damage-word { display: none; }
}
@media (min-width:480px) and (max-width:800px) and (max-height:420px) and (orientation:landscape) {
 .pq-app .pq-ship-attack { display: flex; align-items: center; gap: 12px; }
 .pq-app .pq-own-attackline { flex: 1 1 auto; }
 .pq-app .pq-own-damage-word { display: none; }
}
@media (max-width:479px) and (max-height:300px) and (orientation:landscape) {
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-hud { display: none !important; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-stage { grid-template-rows: minmax(0,1fr) auto; grid-template-areas: "scene" "dock"; padding: 4px; gap: 4px; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-scene { min-height: 0; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-dock__ship { min-height: 44px; height: 44px; padding: 2px 8px; border-width: 1px; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-ship-attack { display: flex; align-items: center; gap: 8px; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-own-attackline { flex: 1 1 auto; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-own-attackwords { display: none; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-own-attacklabel>svg { display: block; width: 28px; height: 24px; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-scene>.pq-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 10px; padding: 6px 8px; bottom: 4px; left: 4px; right: 4px; width: calc(100% - 8px); max-height: calc(100% - 8px); }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-panel>h2 { grid-column: 1; grid-row: 1; margin: 0; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-opponent-hull { grid-column: 2; grid-row: 1/3; margin: 0; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-battle-clock { grid-column: 1; grid-row: 2; margin: 0; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-battle-last { display: none; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-scene>.pq-panel .pq-battle-actions--live { grid-column: 1/-1; grid-row: 3; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 0; }
 .pq-app.pq-in-battle:has(.pq-battle-actions--live) .pq-scene>.pq-panel .pq-battle-actions--live .pq-button { min-height: 44px; height: 44px; padding: 6px 3px; }
}
.pq-app .pq-opponent-hull,.pq-app .pq-panel__stats { container-type: inline-size; container-name: pq-enemy-metrics; }
@container pq-enemy-metrics (max-width:340px) {
 .pq-app .pq-opponent-power>span>svg { display: none; }
}
@container pq-enemy-metrics (max-width:320px) {
 .pq-app .pq-attack-damage-word { display: none; }
}

@media (max-width:600px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats) { padding: 6px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats)>h2 { margin: 0 0 4px; font-size: var(--pq-font); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__stats { margin: 0 0 6px; gap: 4px 10px; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__actions { gap: 6px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats) .pq-panel__actions .pq-button { height: 44px; min-height: 44px; padding: 6px 3px; white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
}
@media (min-width:601px) and (max-height:560px) {
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats) { left: 4px; right: 4px; bottom: 4px; width: calc(100% - 8px); max-width: calc(100% - 8px); max-height: calc(100% - 8px); display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,1fr); gap: 4px 12px; align-items: center; padding: 6px 8px; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats)>h2 { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; font-size: var(--pq-font); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__stats { grid-column: 1; grid-row: 2; margin: 0; gap: 4px 10px; line-height: 1.2; }
 .pq-app:has(.pq-welcome[hidden]) .pq-panel:has(.pq-panel__stats) .pq-panel__actions { grid-column: 2; grid-row: 1/3; gap: 6px; align-self: center; }
 .pq-app:has(.pq-welcome[hidden]) .pq-scene>.pq-panel:has(.pq-panel__stats) .pq-panel__actions .pq-button { height: 44px; min-height: 44px; padding: 6px 3px; white-space: nowrap; overflow-wrap: normal; line-height: 1.2; }
}
/* Build123: harbour services are a compact ledger, one activity per row. */
.pq-app .pq-harbour-dialog .pq-harbour-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid #73988b; }
.pq-app .pq-harbour-dialog .pq-service-gold,.pq-app .pq-harbour-dialog .pq-harbour-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pq-app .pq-harbour-dialog .pq-service-gold>svg { color: #efcb85; flex: 0 0 28px; }
.pq-app .pq-harbour-dialog .pq-harbour-tools .pq-button { min-height: 44px; padding: 8px 14px; }
.pq-app .pq-harbour-dialog .pq-service-groups { margin: 18px 0 0; gap: 22px; }
.pq-app .pq-harbour-dialog .pq-service-groups h2 { margin: 0 0 6px; font-size: max(20pt,1.35rem); line-height: 1.25; }
.pq-app .pq-harbour-dialog .pq-service-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.pq-app .pq-harbour-dialog .pq-service-row { display: grid; grid-template-columns: minmax(150px,.7fr) minmax(190px,1fr) minmax(300px,1.3fr); align-items: center; gap: 12px 22px; min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #6c94884d; border-radius: 0; background: transparent; align-self: auto; }
.pq-app .pq-harbour-dialog .pq-service-copy,.pq-app .pq-harbour-dialog .pq-service-detail { min-width: 0; }
.pq-app .pq-harbour-dialog .pq-service-copy h3 { display: flex; align-items: center; gap: 10px; margin: 0; color: #f0dfba; font: inherit; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pq-app .pq-harbour-dialog .pq-service-copy .pq-stat-icon { flex: 0 0 32px; width: 32px; height: 36px; }
.pq-app .pq-harbour-dialog .pq-service-meta { display: block; margin: 3px 0 0 42px; color: #bcd2c1; line-height: 1.25; }
.pq-app .pq-harbour-dialog .pq-service-detail .pq-gain { margin: 0; }
.pq-app .pq-harbour-dialog .pq-service-detail .pq-gain-label { gap: 4px 10px; line-height: 1.25; }
.pq-app .pq-harbour-dialog .pq-service-detail .pq-gain-label strong { font-weight: 400; }
.pq-app .pq-harbour-dialog .pq-service-detail .pq-gain-bar { height: 10px; margin: 5px 0; }
.pq-app .pq-harbour-dialog .pq-service-detail .pq-gain-benefit { margin: 0; }
.pq-app .pq-harbour-dialog .pq-service-capacity { min-width: 0; color: #d6e3d1; font-variant-numeric: tabular-nums; }
.pq-app .pq-harbour-dialog .pq-service-capacity>.pq-stat-meter { margin: 5px 0 0; height: 10px; }
.pq-app .pq-harbour-dialog .pq-service-available { color: #c8ddc8; }
.pq-app .pq-harbour-dialog .pq-service-controls { display: grid; grid-template-columns: minmax(100px,1fr) minmax(150px,auto); align-items: center; justify-content: end; gap: 6px 14px; min-width: 0; margin: 0; }
.pq-app .pq-harbour-dialog .pq-service-controls>[data-service-submit] { grid-column: 2; min-width: 0; min-height: 44px; height: auto; padding: 8px 12px; margin: 0; font: inherit; font-size: var(--pq-font) !important; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.pq-app .pq-harbour-dialog .pq-service-quantity { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input { appearance: none; -webkit-appearance: none; display: block; flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: pan-y; accent-color: #e9c580; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input::-webkit-slider-runnable-track { height: 8px; border: 1px solid #96b5a0; border-radius: 8px; background: #09212b; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 2px solid #f8dfaa; border-radius: 50%; background: #d8b46f; box-shadow: 0 1px 5px #0009; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input::-moz-range-track { height: 8px; border: 1px solid #96b5a0; border-radius: 8px; background: #09212b; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid #f8dfaa; border-radius: 50%; background: #d8b46f; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input:focus-visible { outline: 2px solid #f3d69b; outline-offset: 2px; border-radius: 8px; }
.pq-app .pq-harbour-dialog .pq-service-quantity>input:disabled { opacity: .45; cursor: default; }
.pq-app .pq-harbour-dialog .pq-service-quantity>output { flex: 0 0 auto; min-width: 1.5em; margin: 0; padding: 0; color: #f1d699; text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
.pq-app .pq-harbour-dialog .pq-service-reason { grid-column: 1/-1; justify-self: end; color: #efbfa5; line-height: 1.25; }
.pq-app .pq-harbour-dialog .pq-service-reason:empty { display: none; }
.pq-app .pq-harbour-dialog .pq-repair-choice { display: block; min-width: 0; margin: 0; }
.pq-app .pq-harbour-dialog .pq-repair-choice select { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #9ab5a0; border-radius: 8px; color: #efe5c7; background: #09232d; font: inherit; font-size: var(--pq-font) !important; line-height: 1.25; }
.pq-app .pq-harbour-dialog .pq-repair-gift { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; color: #b7d7bb; }
.pq-app .pq-harbour-dialog .pq-upgrade-attack { margin: 6px 0 0; gap: 3px; }
.pq-app .pq-harbour-dialog .pq-upgrade-attack>span { gap: 6px; }
.pq-app .pq-harbour-dialog .pq-tier-benefits { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 5px 0; }
.pq-app .pq-harbour-dialog .pq-tier-benefits li { gap: 6px; }
.pq-app .pq-harbour-dialog .pq-treasure-row .pq-amount { display: block; margin: 0; min-width: 0; }
.pq-app .pq-harbour-dialog .pq-treasure-row .pq-amount input { min-width: 0; width: 100%; max-width: 210px; min-height: 44px; height: 44px; padding: 6px 10px; }
.pq-app .pq-harbour-dialog .pq-treasure-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pq-app .pq-harbour-dialog .pq-treasure-controls>.pq-button { min-height: 44px; padding: 8px 14px; margin: 0; }
@media (max-width:1000px) {
 .pq-app .pq-harbour-dialog .pq-service-row { grid-template-columns: minmax(145px,.8fr) minmax(270px,1.2fr); gap: 8px 18px; }
 .pq-app .pq-harbour-dialog .pq-service-copy { grid-column: 1; grid-row: 1; }
 .pq-app .pq-harbour-dialog .pq-service-detail { grid-column: 1; grid-row: 2; }
 .pq-app .pq-harbour-dialog .pq-service-controls { grid-column: 2; grid-row: 1/3; }
 .pq-app .pq-harbour-dialog .pq-treasure-row .pq-amount { grid-column: 1; grid-row: 2; }
}
@media (max-width:700px) {
 .pq-app .pq-harbour-dialog .pq-service-row { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px 0; }
 .pq-app .pq-harbour-dialog .pq-service-copy,.pq-app .pq-harbour-dialog .pq-service-detail,.pq-app .pq-harbour-dialog .pq-service-controls,.pq-app .pq-harbour-dialog .pq-treasure-row .pq-amount { grid-column: 1; grid-row: auto; }
 .pq-app .pq-harbour-dialog .pq-service-copy h3 { line-height: 1.2; }
 .pq-app .pq-harbour-dialog .pq-service-meta { margin-left: 42px; }
 .pq-app .pq-harbour-dialog .pq-service-controls { grid-template-columns: minmax(90px,1fr) minmax(140px,auto); gap: 6px 10px; }
 .pq-app .pq-harbour-dialog .pq-service-controls>[data-service-submit] { padding: 8px; }
 .pq-app .pq-harbour-dialog .pq-service-capacity { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 12px; }
 .pq-app .pq-harbour-dialog .pq-service-capacity>.pq-stat-meter { margin: 0; }
 .pq-app .pq-harbour-dialog .pq-treasure-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 .pq-app .pq-harbour-dialog .pq-treasure-row .pq-service-copy { grid-column: 1/-1; }
 .pq-app .pq-harbour-dialog .pq-treasure-row .pq-amount { grid-column: 1; }
 .pq-app .pq-harbour-dialog .pq-treasure-controls { grid-column: 2; grid-template-columns: minmax(0,1fr); gap: 6px; }
 .pq-app .pq-harbour-dialog .pq-harbour-tools { gap: 8px; }
 .pq-app .pq-harbour-dialog .pq-harbour-tools>.pq-button { flex: 1 1 auto; }
 .pq-app .pq-harbour-dialog .pq-service-groups { gap: 18px; }
}
@media (max-width:380px) {
 .pq-app .pq-harbour-dialog .pq-service-controls { grid-template-columns: minmax(0,1fr); }
 .pq-app .pq-harbour-dialog .pq-service-controls>[data-service-submit] { grid-column: 1; }
 .pq-app .pq-harbour-dialog .pq-service-controls>.pq-service-quantity { grid-column: 1; }
 .pq-app .pq-harbour-dialog .pq-treasure-controls { grid-template-columns: minmax(0,1fr); }
}

@media (max-width:700px) {
 .pq-app .pq-harbour-dialog .pq-service-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
 .pq-app .pq-harbour-dialog .pq-service-copy h3 { flex: 0 1 auto; }
 .pq-app .pq-harbour-dialog .pq-service-meta { margin: 0 0 0 auto; }
}
@media (min-width:381px) and (max-width:700px) {
 .pq-app .pq-harbour-dialog .pq-treasure-controls { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .pq-app .pq-harbour-dialog .pq-treasure-controls>.pq-button { padding: 8px 4px; }
}
@media (min-width:381px) and (max-width:700px) {
 .pq-app .pq-harbour-dialog .pq-harbour-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 8px; }
 .pq-app .pq-harbour-dialog .pq-harbour-tools>.pq-button,.pq-app .pq-harbour-dialog .pq-harbour-tools>.pq-store-disabled>.pq-button { width: 100%; min-width: 0; padding: 8px 6px; gap: 6px; }
}