:root {
  --ink: #2b1a0c;
  --parch: #ecdcb0;
  --parch2: #dcc58c;
  --wood: #4a2e17;
  --wood2: #6b4426;
  --gold: #f2b632;
  --gold2: #ffd766;
  --red: #c0392b;
  --sea: #0a2233;
  --panel: rgba(12, 28, 44, 0.8);   /* no backdrop blur: re-blurring a 60 fps canvas under every HUD panel costs phones a lot */
  --line: rgba(255, 225, 160, 0.28);
  --txt: #f4ead0;
  --display: 'Pirata One', 'Cinzel', Georgia, serif;
  --body: 'Cinzel', 'Palatino Linotype', Georgia, serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sea); color: var(--txt); font-family: var(--body); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#c { position: fixed; inset: 0; display: block; cursor: crosshair; }
.hidden { display: none !important; }
kbd { display: inline-block; font: 700 0.78em var(--body); padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-bottom-width: 2px; color: inherit; }
.parch kbd { background: rgba(60, 35, 10, 0.1); border-color: rgba(60, 35, 10, 0.4); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }

#hudTL { position: absolute; left: 14px; top: 14px; width: 240px; padding: 10px 12px 12px; }
.rankRow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rankRow b { font-family: var(--display); font-size: 20px; color: var(--gold2); letter-spacing: 0.5px; font-weight: 400; }
.rankRow small { font-size: 10px; opacity: 0.75; letter-spacing: 1px; text-transform: uppercase; }
.thin { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); margin: 3px 0 9px; overflow: hidden; }
.thin i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c78a1c, var(--gold2)); }
.stat { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.stat label { width: 42px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.8; }
.bar { position: relative; flex: 1; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; transition: transform 0.15s linear; }
.bar.hull i { background: linear-gradient(#e4574a, #a92b22); }
.bar.crew i { background: linear-gradient(#5fb4e8, #2a76b0); }
.bar.boss i { background: linear-gradient(#b76bff, #6a2aa8); }
.bar b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; text-shadow: 0 1px 2px #000; letter-spacing: 0.5px; }
.goldRow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.goldRow b { font-size: 20px; color: var(--gold2); text-shadow: 0 1px 2px #000; }
.goldRow small { margin-left: auto; font-size: 10px; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }
.coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold) 55%, #a86f0c); border: 1px solid #7a4d05; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); display: inline-block; }

#hudTR { position: absolute; right: 14px; top: 14px; width: 188px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#windBox { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; width: 100%; }
#windC { width: 58px; height: 58px; }
.windInfo { display: flex; flex-direction: column; line-height: 1.25; }
.windInfo b { font-size: 13px; letter-spacing: 1px; }
.windInfo small { font-size: 10px; opacity: 0.8; letter-spacing: 0.8px; }
#mini { width: 180px; height: 180px; border-radius: 50%; border: 3px solid #5b3d1d; box-shadow: 0 0 0 2px rgba(255, 225, 160, 0.35), 0 4px 18px rgba(0, 0, 0, 0.5); background: #b39a68; pointer-events: auto; cursor: pointer; }

#goals { position: absolute; left: 14px; top: 204px; width: 240px; padding: 8px 12px 10px; font-size: 12px; transition: opacity 0.3s; }
#goals.collapsed ul { display: none; }
#goals h4 { margin: 0 0 4px; font: 400 17px var(--display); color: var(--gold2); display: flex; justify-content: space-between; align-items: center; }
#goals ul { list-style: none; margin: 0; padding: 0; }
#goals li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; line-height: 1.25; }
#goals li .ck { width: 14px; height: 14px; flex: none; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 3px; position: relative; top: 2px; }
#goals li.done { opacity: 0.6; text-decoration: line-through; }
#goals li.done .ck { background: #4fbf6a; border-color: #4fbf6a; }
#goals li.done .ck::after { content: '✓'; position: absolute; inset: -3px 0 0 1px; font-size: 12px; color: #08210f; }
#goals li.locked { opacity: 0.45; }
#goals li em { font-style: normal; opacity: 0.75; margin-left: auto; white-space: nowrap; }

#bossBar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(420px, 46vw); text-align: center; }
#bossBar span { font: 400 22px var(--display); color: #e2c1ff; text-shadow: 0 2px 6px #000; }
#bossBar .bar { height: 14px; margin-top: 2px; }

#toasts { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, 92vw); }
#bossBar:not(.hidden) ~ #toasts { top: 84px; }
.toast { padding: 8px 16px; border-radius: 10px; background: rgba(10, 22, 36, 0.86); border: 1px solid var(--line); font-size: 14px; text-align: center; letter-spacing: 0.4px; animation: toastIn 0.35s ease-out, toastOut 0.5s 4.2s ease-in forwards; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.toast.good { border-color: #6fd08a; color: #d6ffe0; }
.toast.bad { border-color: #e2503f; color: #ffd6d0; }
.toast.gold { border-color: var(--gold); color: var(--gold2); }
.toast.epic { border-color: #c56bff; color: #f0d9ff; font-family: var(--display); font-size: 22px; padding: 10px 22px; }
.toast.hint { border-style: dashed; opacity: 0.95; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

#prompt { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); padding: 9px 20px; border-radius: 22px; background: rgba(10, 22, 36, 0.88); border: 1.5px solid var(--gold); color: var(--gold2); font-size: 16px; letter-spacing: 0.8px; white-space: nowrap; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 18px rgba(255, 210, 100, 0.5); } }

#hudBottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 16px; }
.gun { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gun small { font-size: 9px; letter-spacing: 2px; opacity: 0.8; }
.ring { --p: 100; --c: #f2b632; width: 66px; height: 66px; border-radius: 50%; padding: 6px; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(0, 0, 0, 0.5) 0); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4); }
.ring.ready { --c: #7dffa0; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 16px rgba(125, 255, 160, 0.5); }
.ring .core { width: 100%; height: 100%; border-radius: 50%; background: #10202f; display: grid; place-items: center; font: 400 26px var(--display); color: #fff; position: relative; }
.ring .core b { font-weight: 400; }
.ring .core::after { content: attr(data-n); position: absolute; right: -4px; bottom: -4px; font: 700 11px var(--body); background: #7a3b1a; border-radius: 9px; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, 0.4); }
#helm { padding: 8px 18px 6px; text-align: center; min-width: 138px; }
.sails { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
.sails i { width: 26px; height: 14px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: rgba(255, 255, 255, 0.16); transition: background 0.2s; }
.sails i.on { background: #f5ecd0; }
#speedTxt { font-size: 22px; color: #fff; line-height: 1.1; }
#helm small { font-size: 9px; letter-spacing: 1.5px; opacity: 0.6; }

#hudBtns { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
#hudBtns button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: #fff; font-size: 18px; cursor: pointer; }
#hudBtns button:hover { background: rgba(40, 70, 100, 0.8); }

#edgeWarn { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); font: 400 30px var(--display); color: #ffb0a0; text-shadow: 0 2px 10px #000; pointer-events: none; text-align: center; padding: 0 16px; }

/* touch controls */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch button { position: absolute; pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line); background: rgba(12, 28, 44, 0.62); color: #fff; font-size: 22px; touch-action: none; }
#touch button:active { background: rgba(60, 110, 160, 0.8); }
#touch [data-k='left'] { left: 12px; bottom: 116px; }
#touch [data-k='right'] { left: 84px; bottom: 116px; }
#touch [data-k='saildown'] { right: 12px; bottom: 116px; width: 54px; height: 54px; }
#touch [data-k='sailup'] { right: 12px; bottom: 178px; width: 54px; height: 54px; }
#touch [data-k='act'] { right: 74px; bottom: 116px; width: 58px; height: 58px; background: rgba(120, 80, 14, 0.7); }
.gun { pointer-events: auto; cursor: pointer; touch-action: none; }
@media (pointer: coarse) { #prompt { bottom: 196px; } }

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; display: grid; place-items: center; z-index: 20; overflow: auto; padding: 16px; }
.overlay { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; pointer-events: none; }
#title { background: radial-gradient(ellipse at center, rgba(4, 14, 28, 0.15) 0%, rgba(4, 14, 28, 0.62) 100%); }
.titleBox { text-align: center; padding: 20px; }
.skull { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(3deg); } }
h1 { margin: 0; font: 400 clamp(52px, 10vw, 112px)/1 var(--display); color: var(--gold2); text-shadow: 0 3px 0 #7a4d05, 0 6px 0 #4a2e17, 0 10px 26px rgba(0, 0, 0, 0.75); letter-spacing: 2px; }
.sub { margin: 6px 0 28px; font-size: clamp(13px, 2.4vw, 19px); letter-spacing: 4px; text-transform: uppercase; color: #dbeaf5; text-shadow: 0 2px 8px #000; }
.menu { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.btn { font: 700 15px var(--body); letter-spacing: 1.5px; text-transform: uppercase; color: #fbeecd; padding: 11px 26px; min-width: 230px; border-radius: 10px; cursor: pointer; border: 2px solid #2b1a0c; background: linear-gradient(#7b5230, #573519); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.35), 0 4px 0 #2b1a0c, 0 6px 14px rgba(0, 0, 0, 0.4); transition: transform 0.08s, filter 0.15s; }
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.35), 0 1px 0 #2b1a0c; }
.btn.big { font-size: 20px; padding: 14px 34px; background: linear-gradient(#e8b53a, #b47a12); color: #2b1a0c; text-shadow: 0 1px 0 rgba(255, 240, 190, 0.5); }
.btn.small { min-width: 0; padding: 6px 14px; font-size: 12px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.touchOnly { display: none; }
@media (pointer: coarse) { .btn.touchOnly { display: inline-block; pointer-events: auto; margin-top: 12px; } }
.titleFoot { margin-top: 26px; display: flex; gap: 22px; justify-content: center; font-size: 13px; }
.titleFoot.dark { color: var(--ink); }
.chk { display: flex; align-items: center; gap: 6px; cursor: pointer; letter-spacing: 1px; }
.chk input { accent-color: #c78a1c; width: 16px; height: 16px; }

.parch { background: radial-gradient(ellipse at 20% 10%, #f4e6bd, var(--parch) 45%, var(--parch2)); color: var(--ink); border: 3px solid #5b3d1d; border-radius: 14px; box-shadow: 0 0 0 3px #2b1a0c, 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(120, 80, 20, 0.25); padding: 22px 28px 24px; max-width: min(96vw, 560px); text-align: center; }
.parch.wide { max-width: min(96vw, 980px); width: 100%; }
.parch h2 { margin: 0 0 10px; font: 400 40px var(--display); color: #4a2410; }
.parch h2.red { color: #9c2418; font-size: 56px; }
.parch h3 { margin: 4px 0 8px; font: 400 24px var(--display); color: #6b3a14; }
.parch p { line-height: 1.5; }
.parch .menu { margin-top: 14px; }
.parch .btn { color: #fbeecd; }
.parch .btn.big { color: #2b1a0c; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; margin-bottom: 16px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } .parch { padding: 16px; } .parch h2 { font-size: 32px; } }
table.keys { width: 100%; border-collapse: collapse; font-size: 13px; }
table.keys td { padding: 5px 4px; border-bottom: 1px dotted rgba(60, 35, 10, 0.3); vertical-align: top; }
table.keys td:first-child { white-space: nowrap; width: 46%; }
ul.tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
ul.tips li { margin-bottom: 6px; }
.fine { font-size: 11px; opacity: 0.7; margin-bottom: 0; }
.crown { font-size: 60px; color: #b47a12; line-height: 1; text-shadow: 0 3px 0 #7a4d05; }
.statsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.statsGrid div { background: rgba(60, 35, 10, 0.1); border: 1px solid rgba(60, 35, 10, 0.3); border-radius: 8px; padding: 8px; }
.statsGrid b { display: block; font-size: 24px; color: #6b3a14; }
.statsGrid small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }

#loading { background: rgba(4, 14, 28, 0.85); z-index: 30; }
.loadBox { text-align: center; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }
.spinner { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--gold2); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* map */
#mapScreen, #port, #pause, #help, #dead, #victory { background: rgba(3, 10, 20, 0.7); backdrop-filter: blur(3px); }
.mapWrap { padding: 14px 18px 16px; max-width: min(96vw, 820px); }
.mapWrap h2 { font-size: 34px; margin-bottom: 6px; }
#bigMap { width: min(64vh, 84vw); height: min(64vh, 84vw); border: 3px solid #5b3d1d; border-radius: 6px; background: #b39a68; display: block; margin: 0 auto 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 12px; margin-bottom: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.lg { width: 11px; height: 11px; display: inline-block; border-radius: 50%; border: 1px solid #2b1a0c; }
.lg.you { background: #fff; } .lg.port { background: #f2b632; border-radius: 2px; } .lg.x { background: none; border: none; color: #c0281c; font-style: normal; font-weight: 700; line-height: 11px; }
.lg.x::before { content: '✕'; }
.lg.foe { background: #e2503f; } .lg.merch { background: #4fbf6a; } .lg.boss { background: #c56bff; }

/* port */
#portPanel { text-align: left; }
#portPanel header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; border-bottom: 2px solid rgba(60, 35, 10, 0.35); padding-bottom: 8px; }
#portPanel header h2 { margin: 0; font-size: 44px; }
.goldBadge { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; color: #6b3a14; }
.portGrid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .portGrid { grid-template-columns: 1fr; } }
.card { background: rgba(255, 245, 210, 0.45); border: 1.5px solid rgba(60, 35, 10, 0.4); border-radius: 10px; padding: 10px 14px 12px; }
.card h3 { margin: 0 0 6px; font-size: 24px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dotted rgba(60, 35, 10, 0.3); font-size: 13px; }
.row:last-child { border-bottom: none; }
.row .nm { font-weight: 700; letter-spacing: 0.5px; }
.row .ds { font-size: 11px; opacity: 0.8; display: block; font-weight: 500; line-height: 1.3; }
.pips { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #6b3a14; }
.pips i.on { background: #c78a1c; }
.card .btn { min-width: 0; padding: 6px 12px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.rumor { margin-top: 8px; padding: 8px 10px; background: rgba(60, 35, 10, 0.08); border-left: 3px solid #b47a12; font-style: italic; font-size: 13px; line-height: 1.4; min-height: 54px; }
#portPanel footer { margin-top: 14px; text-align: center; }
.shipStats { font-size: 12px; opacity: 0.85; line-height: 1.5; margin-bottom: 4px; }

/* boarding */
.boardBox { background: rgba(20, 8, 4, 0.82); border: 2px solid #c0392b; border-radius: 14px; padding: 16px 26px 20px; text-align: center; margin-top: -20vh; min-width: min(90vw, 520px); }
.boardBox h2 { margin: 0; font: 400 38px var(--display); color: #ff9d8a; }
.boardBox p { margin: 4px 0 12px; font-size: 14px; }
.clash { display: flex; align-items: center; gap: 14px; }
.clash .side { text-align: center; min-width: 70px; }
.clash .side b { display: block; font-size: 30px; }
.clash .side small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
.boardBar { height: 26px; border-radius: 13px; background: #7a1d14; }
.boardBar i { background: linear-gradient(#f5d97a, #c98d18); transition: transform 0.05s linear; }
.boardBar .mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.5); }

@media (max-width: 700px) {
  #hudTL { width: 176px; padding: 7px 9px 9px; left: 8px; top: 8px; }
  .rankRow b { font-size: 16px; }
  #hudTR { right: 8px; top: 8px; width: 118px; }
  #windBox { padding: 4px 8px 4px 4px; } #windC { width: 40px; height: 40px; } .windInfo small:nth-child(3) { display: none; }
  #mini { width: 112px; height: 112px; }
  #goals { display: none; }
  #hudBtns { top: 196px; bottom: auto; right: 8px; }
  #hudBtns button { width: 38px; height: 38px; }
  .ring { width: 54px; height: 54px; } .ring .core { font-size: 20px; }
  #prompt { bottom: 158px; font-size: 14px; }
  #hudBottom { bottom: 8px; gap: 8px; }
  #helm { min-width: 96px; padding: 6px 10px; } #speedTxt { font-size: 17px; } #sailHint { display: none; }
}


/* ---------- Outer Banks additions ---------- */
#titleFlag { width: min(270px, 52vw); height: auto; aspect-ratio: 3 / 2; display: block; margin: 0 auto 4px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.era { margin: -18px 0 26px; font-size: clamp(11px, 1.8vw, 14px); letter-spacing: 3px; text-transform: uppercase; color: #f2d58a; text-shadow: 0 2px 8px #000; }
.credit { margin: 14px 0 0; font-size: 10px; opacity: 0.6; letter-spacing: 0.6px; }
.credit a { color: inherit; }
#depthTxt { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.85; margin-top: 2px; color: #bfe3ff; }
#depthTxt.warn { color: #ffe17a; opacity: 1; }
#depthTxt.bad { color: #ff7a6a; opacity: 1; animation: pulse 0.9s ease-in-out infinite; }
.lg.lamp { background: #ffd24a; }
.history { text-align: left; margin: 0 0 16px; padding: 10px 14px 4px; border-top: 2px solid rgba(60, 35, 10, 0.35); font-size: 12.5px; line-height: 1.5; }
.history h3 { margin-top: 0; }
.history p { margin: 0 0 8px; }
.portSub { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b3a14; margin-top: -4px; }
.portBlurb { margin: -2px 0 10px; font-style: italic; font-size: 14px; text-align: left; }
.parch.wide { max-height: 94vh; overflow: auto; }
@media (max-width: 700px) {
  #toasts { top: 214px; }
  #bossBar:not(.hidden) ~ #toasts { top: 250px; }
  .era { margin-top: -10px; }
}

/* ---------- hold, provisions, home ---------- */
.stat.sm { margin: 3px 0; }
.stat.sm .bar { height: 12px; border-radius: 6px; }
.stat.sm .bar b { font-size: 9.5px; line-height: 12px; }
.supplies { display: flex; gap: 8px; }
.supplies .stat { flex: 1; min-width: 0; gap: 5px; }
.supplies .stat label { width: auto; }
.bar.food i { background: linear-gradient(#e2b071, #9a6a2c); }
.bar.water i { background: linear-gradient(#7fd8f0, #2b8db8); }
.bar.hold i { background: linear-gradient(#f2cf62, #b3861c); }
.bar.low { border-color: #ff7a6a; animation: pulse 0.9s ease-in-out infinite; }
.bar.heavy i { background: linear-gradient(#f29a52, #b3531c); }
.lg.home { background: #ffe066; box-shadow: 0 0 0 3px rgba(255, 224, 120, 0.45); }
.portGrid.four { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .portGrid.four { grid-template-columns: 1fr; } }
.portMsg { margin: 0 0 10px; padding: 8px 12px; background: rgba(180, 122, 18, 0.16); border-left: 3px solid #b47a12; font-size: 13.5px; text-align: left; }
.risk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; background: rgba(192, 40, 28, 0.1); border-left: 3px solid #c0281c; font-size: 13.5px; text-align: left; }
.risk .btn { min-width: 0; padding: 6px 12px; font-size: 12px; letter-spacing: 1px; }
.btns { display: inline-flex; gap: 6px; }
.warnTxt { color: #b3261a; }
.card .tip { display: block; margin-top: 8px; font-size: 11px; font-style: italic; line-height: 1.35; opacity: 0.8; }
.row > .btn, .row > .btns { flex: none; }
.row > div:first-child { min-width: 0; }
@media (max-width: 700px) {
  .stat.sm { margin: 2px 0; }
  .stat.sm .bar { height: 10px; } .stat.sm .bar b { font-size: 8.5px; line-height: 10px; }
  .supplies { gap: 6px; }
  .stat label { width: 34px; font-size: 9px; letter-spacing: 1px; }
  .supplies .stat label { width: auto; }
}

/* ---------- phones, touch and accessibility (Oct 2026 pass) ---------- */
/* the site's leaderboard pill sits bottom-left, right on top of the port gun on a phone: keep it for menus only */
@media (max-width: 760px), (pointer: coarse) { body.hudOn:not(.menuOpen) .avl-lb-btn { display: none; } }
@media (max-width: 700px) {
  #hudBtns button { width: 44px; height: 44px; }
  #toasts { top: 250px; }
  #bossBar:not(.hidden) ~ #toasts { top: 286px; }
  #prompt { white-space: normal; max-width: calc(100vw - 24px); width: max-content; text-align: center; }
}
/* the interact prompt goes above the touch buttons (the phone rule above used to pull it down onto them) */
@media (pointer: coarse) { #prompt { bottom: 244px; } }
button:focus-visible, .btn:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* phones held sideways: the desktop HUD does not fit 375 px of height, so use the compact HUD and move the touch
   buttons to the bottom corners, the prompt above the helm, and the messages into the gap between the top panels */
@media (max-height: 500px) and (orientation: landscape) {
  #hudTL { width: 176px; padding: 7px 9px 9px; left: 8px; top: 8px; }
  .rankRow b { font-size: 16px; }
  .stat.sm { margin: 2px 0; }
  .stat.sm .bar { height: 10px; } .stat.sm .bar b { font-size: 8.5px; line-height: 10px; }
  .stat label { width: 34px; font-size: 9px; letter-spacing: 1px; } .supplies .stat label { width: auto; }
  #hudTR { right: 8px; top: 8px; width: 150px; gap: 6px; }
  #windBox { padding: 4px 8px 4px 4px; } #windC { width: 40px; height: 40px; } .windInfo small:nth-child(3) { display: none; }
  #mini { width: 96px; height: 96px; }
  #goals { display: none; }
  #hudBtns { top: 164px; bottom: auto; right: 8px; }
  #hudBtns button { width: 44px; height: 44px; }
  .ring { width: 54px; height: 54px; } .ring .core { font-size: 20px; }
  #hudBottom { bottom: 8px; gap: 8px; }
  #helm { min-width: 96px; padding: 6px 10px; } #speedTxt { font-size: 17px; } #sailHint { display: none; }
  #touch [data-k='left'] { left: 12px; bottom: 12px; }
  #touch [data-k='right'] { left: 84px; bottom: 12px; }
  #touch [data-k='saildown'] { right: 12px; bottom: 12px; }
  #touch [data-k='sailup'] { right: 12px; bottom: 74px; }
  #touch [data-k='act'] { right: 74px; bottom: 12px; }
  #toasts { top: 8px; width: calc(100vw - 390px); gap: 4px; }
  .toast { font-size: 12px; padding: 5px 10px; letter-spacing: 0.2px; }
  #bossBar:not(.hidden) ~ #toasts { top: 44px; }
  #prompt, .hudOn #prompt { bottom: 104px; font-size: 13px; white-space: normal; width: max-content; max-width: calc(100vw - 340px); text-align: center; }
}