/* style.css — Pirate's Bounty */
:root{
  color-scheme:dark;--ink:#f3ead7;--muted:#9db1b2;--dim:#637d83;
  --line:rgba(190,220,210,.16);--panel:rgba(7,20,31,.88);--solid:#0a202f;
  --gold:#efbd58;--teal:#5bc1b2;--danger:#e06a61;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace
}
@media(prefers-color-scheme:light){:root{color-scheme:light;--ink:#172c35;--muted:#4e6b70;--dim:#71888b;--line:rgba(23,57,65,.16);--panel:rgba(245,249,246,.92);--solid:#f1f6f3;--gold:#aa721d;--teal:#197f7b;--danger:#ad443d}}
html[data-theme=dark]{color-scheme:dark}
html[data-theme=light]{color-scheme:light;--ink:#172c35;--muted:#4e6b70;--dim:#71888b;--line:rgba(23,57,65,.16);--panel:rgba(245,249,246,.92);--solid:#f1f6f3;--gold:#aa721d;--teal:#197f7b;--danger:#ad443d}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#071c2d;color:var(--ink);font-family:var(--font);touch-action:manipulation;-webkit-font-smoothing:antialiased}
button{font:inherit}
#app{position:relative;width:100%;height:100%;min-width:320px;overflow:hidden;background:#071c2d}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
.hidden{display:none!important}
.screen{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgba(28,93,105,.42),transparent 46%),linear-gradient(135deg,rgba(3,14,25,.72),rgba(4,24,38,.94))}
.start-card{width:min(100%,540px);padding:clamp(24px,5vw,52px);text-align:center;border:1px solid rgba(207,224,207,.2);border-radius:24px;background:rgba(5,20,31,.84);box-shadow:0 28px 90px #0008,inset 0 1px #fff1;backdrop-filter:blur(18px);animation:rise .65s ease both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eyebrow,.modal-kicker,.mission-kicker{color:var(--gold);font:700 .68rem/1 var(--mono);letter-spacing:.17em}
.crest{width:78px;height:78px;margin:0 auto 20px;color:var(--gold);filter:drop-shadow(0 0 20px #efbd5840)}
.crest svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
h1{margin:0;color:var(--ink);font:500 clamp(2rem,7vw,3.8rem) Georgia,"Times New Roman",serif;letter-spacing:-.045em}
.lead{max-width:430px;margin:17px auto 26px;color:var(--muted);font-size:.98rem;line-height:1.65}
.how-to{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px;text-align:left}
.how-to div{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:.74rem}
.how-to strong{min-width:47px;color:var(--gold);font:700 .65rem var(--mono)}
#start-btn,.primary-btn{min-height:48px;padding:0 22px;border:0;border-radius:11px;color:#162a2d;background:linear-gradient(135deg,#f2cb75,#c18736);box-shadow:0 8px 25px #cb8f313d;cursor:pointer;font-weight:800;transition:.18s ease}
#start-btn{display:inline-flex;align-items:center;gap:24px;padding-left:28px;padding-right:16px;font-size:.95rem}
#start-btn b{font-size:1.35rem;font-weight:400}
#start-btn:hover,.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 30px #cb8f3157}
#start-btn:focus-visible,.primary-btn:focus-visible,.touch-controls button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.resume-note{min-height:16px;margin:14px 0 0;color:var(--dim);font:.68rem var(--mono)}
#hud{position:absolute;inset:0;z-index:5;pointer-events:none}
#hud>*{pointer-events:auto}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px 24px;background:linear-gradient(#030f18c7,transparent)}
.brand-mark{display:flex;align-items:center;gap:9px;color:#ece6d3bf;font:700 .67rem var(--mono);letter-spacing:.12em}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.stats{display:flex;gap:7px}.stat{min-width:78px;padding:9px 12px 10px;border:1px solid var(--line);border-radius:10px;background:#04121cac;backdrop-filter:blur(10px)}
.stat-label{display:block;margin-bottom:4px;color:var(--dim);font:700 .57rem var(--mono);letter-spacing:.1em}.stat strong{color:var(--ink);font:700 .92rem var(--mono)}.stat.gold strong{color:var(--gold)}
.mission-card{position:absolute;top:94px;left:24px;width:min(275px,calc(100% - 48px));padding:14px 16px;border-left:2px solid var(--gold);background:#04121c9e;backdrop-filter:blur(8px)}
.mission-card strong,.mission-card>span:not(.mission-kicker){display:block}.mission-card strong{margin:8px 0 4px;font:500 1.05rem Georgia,"Times New Roman",serif}.mission-card>span:not(.mission-kicker){color:var(--muted);font-size:.75rem}
.mission-progress{height:4px;margin-top:13px;overflow:hidden;background:#fff2}.mission-progress i{display:block;width:0;height:100%;background:var(--gold);transition:width .3s ease}.goal-distance{margin-top:9px!important;color:var(--gold)!important;font:700 .61rem var(--mono)!important;letter-spacing:.03em}
.status-pill{position:absolute;top:22px;left:50%;transform:translateX(-50%);padding:7px 13px;border:1px solid var(--line);border-radius:20px;color:var(--muted);background:#04121c94;font:.68rem var(--mono);backdrop-filter:blur(8px);white-space:nowrap}
.status-pill.flash{animation:flash .5s ease}@keyframes flash{50%{color:var(--gold);border-color:var(--gold)}}
.bottom-hud{position:absolute;right:24px;bottom:22px;left:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.compass{position:relative;width:76px;height:76px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:#04121cb8;box-shadow:inset 0 0 0 5px #fff1;color:var(--dim);font:700 .58rem var(--mono)}
.compass span{position:absolute}.compass span:nth-child(1){top:8px;left:50%;transform:translateX(-50%);color:var(--gold)}.compass span:nth-child(2){top:50%;right:8px;transform:translateY(-50%)}.compass span:nth-child(3){bottom:8px;left:50%;transform:translateX(-50%)}.compass span:nth-child(4){top:50%;left:8px;transform:translateY(-50%)}
.compass i{position:absolute;left:50%;top:50%;width:2px;height:27px;transform-origin:50% 100%;background:linear-gradient(var(--danger) 50%,var(--muted) 50%);border-radius:2px}
.controls-copy{color:#ceddd7a0;font:.65rem var(--mono);text-align:center}
.minimap-wrap{text-align:right}#minimap{display:block;width:160px;height:160px;border:1px solid var(--line);border-radius:14px;background:#04121cb8}
.minimap-wrap span{display:block;margin-top:5px;color:var(--dim);font:700 .52rem var(--mono);letter-spacing:.1em}
.touch-controls{display:none;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);gap:8px}
.touch-controls button{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;color:var(--ink);background:#04121cc2;font-size:1.5rem;touch-action:none}
.modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:24px;background:#020b1273;backdrop-filter:blur(5px)}
.modal-card{width:min(100%,390px);padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--solid);box-shadow:0 25px 70px #0007;text-align:center;animation:rise .25s ease both}
.modal-card h2{margin:10px 0;font:500 1.8rem Georgia,"Times New Roman",serif}.modal-card p{margin:0 0 24px;color:var(--muted);line-height:1.6;font-size:.9rem}.danger-card{border-top:3px solid var(--danger)}
@media(max-width:680px){
  .topbar{padding:14px}.brand-mark{display:none}.stats{width:100%;justify-content:flex-end}.stat{min-width:0;padding:8px 9px}.stat-label{font-size:.5rem}.stat strong{font-size:.76rem}
  .status-pill{top:76px;font-size:.59rem}.mission-card{top:112px;left:14px}.bottom-hud{right:14px;bottom:14px;left:14px}.controls-copy{display:none}#minimap{width:108px;height:108px}.compass{width:62px;height:62px}.compass i{height:22px}.touch-controls{display:flex}
}
@media(max-height:520px){.mission-card{display:none}.bottom-hud{bottom:10px}#minimap{width:88px;height:88px}.compass{width:58px;height:58px}.touch-controls{display:none}}
@media(max-width:390px){.start-card{padding:24px 18px}.how-to{gap:5px}.how-to div{font-size:.67rem;padding:6px}.how-to strong{min-width:39px;font-size:.57rem}}