/* Rough draft look: an underwater night, to be replaced by the real art. */
:root { --bg: #17252c; --bg2: #213640; --card: #2a4552; --ink: #f2efe8; --muted: #a7bcc4; --gold: #f2c766; --hot: #e07a62; --ok: #8fcfa8;
	--safe-t: env(safe-area-inset-top); --safe-b: env(safe-area-inset-bottom); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; width: 100%; overflow-x: hidden; }
body { background: linear-gradient(rgba(16,32,42,0.42), rgba(10,22,30,0.62)), url('assets/art/bg.jpg') center 30% / cover no-repeat fixed, var(--bg); color: var(--ink); font: 16px/1.3 ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
	display: flex; flex-direction: column; align-items: center; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
.hud { width: min(100%, 520px); display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) 14px 6px; }
.menu { width: 44px; height: 44px; border: 0; border-radius: 14px; background: #ffffff14; font-size: 20px; }
.lvl { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; }
.tier { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--hot); color: #fff; text-transform: uppercase; letter-spacing: 0.06em; }
.tier:empty { display: none; }
.tier.super { background: linear-gradient(90deg, #d9667f, #e09a52); }
.moves { display: grid; justify-items: center; min-width: 64px; padding: 4px 10px; border-radius: 16px; background: #00000033; }
.moves b { font-size: 34px; line-height: 1; }
.moves small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.moves.low b { color: var(--hot); }
.goals { width: min(100%, 520px); display: flex; justify-content: center; gap: 10px; padding: 2px 14px 8px; flex-wrap: wrap; }
.goal { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #00000033; font-weight: 800; font-size: 20px; }
.goal .i { font-size: 28px; filter: saturate(0.8); }
.goal.done { background: #2e8a5a66; }
.goal.done b::after { content: ' ✓'; color: var(--ok); }
.stage { position: relative; flex: 1; width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 4px; } /* flex, not grid: a grid track took the canvas’s 2–3× pixel width on iPhone and pushed the board off-centre */
canvas { touch-action: none; display: block; max-width: calc(100vw - 8px); max-height: calc(100vw - 8px); } /* never wider than the phone */
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0.6); pointer-events: none; opacity: 0;
	font-weight: 900; font-size: clamp(26px, 8vw, 40px); text-align: center; color: var(--gold); text-shadow: 0 3px 0 #9a6b1f, 0 6px 18px #000a;
	transition: opacity 0.18s, transform 0.25s cubic-bezier(.2,1.6,.4,1); white-space: nowrap; }
.banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.foot { padding: 8px 14px calc(var(--safe-b) + 12px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* tools: in-game boosters under the board */
.tools { display: flex; gap: 10px; justify-content: center; }
.foot .tool { position: relative; width: 58px; height: 58px; padding: 4px; border-radius: 16px; background: #00000040; display: grid; place-items: center; }
.tool img { width: 40px; height: 40px; }
.tool small { position: absolute; right: -4px; bottom: -6px; display: flex; align-items: center; gap: 1px; padding: 1px 6px; border-radius: 999px; background: #10202a; color: var(--gold); font-weight: 800; font-size: 11px; }
.tool small .ic.coin { width: 12px; height: 12px; }
.tool.armed { box-shadow: inset 0 0 0 3px var(--gold); background: #f2c76633; animation: bump 0.28s cubic-bezier(.2,1.8,.4,1); }
.tool:disabled { opacity: 0.4; }
.newthing { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px; border-radius: 14px; background: #ffffff12; }
.newthing img { width: 52px; height: 52px; flex: none; }
.newthing b { color: var(--gold); }
.streak .ic { width: 28px; height: 28px; vertical-align: middle; }
.foot button { border: 0; border-radius: 999px; background: #ffffff14; padding: 10px 18px; color: var(--muted); }
.overlay[hidden] { display: none; }
/* Scrolls when a card is taller than the screen (long menu, phone keyboard open); auto margins keep short cards centred */
.overlay { position: fixed; inset: 0; z-index: 10; display: flex; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	padding: max(20px, var(--safe-t)) 20px max(20px, var(--safe-b)); background: #021018cc; backdrop-filter: blur(4px); }
.overlay > .card { margin: auto; }
.card { width: min(100%, 380px); display: grid; gap: 12px; padding: 24px 22px; border-radius: 26px; background: var(--card); text-align: center; box-shadow: 0 20px 60px #000a; }
.card h2 { margin: 0; font-size: 28px; }
.card p { margin: 0; color: var(--muted); }
.card .big { font-size: 46px; line-height: 1; }
.card .goalrow { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.btn { min-height: 52px; border: 0; border-radius: 999px; font-weight: 800; font-size: 18px; background: #ffffff1f; }
.btn.go { background: linear-gradient(180deg, #f2cf7a, #e5ad45); color: #3b2a08; box-shadow: 0 4px 0 #b9832a; }
.btn.alt { background: linear-gradient(180deg, #9fd6b4, #6db58a); color: #0d3320; box-shadow: 0 4px 0 #4f8a66; }
.btn.small { min-height: 44px; font-size: 15px; background: none; color: var(--muted); }
.list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; text-align: left; }
.list button { min-height: 48px; border: 0; border-radius: 14px; background: #ffffff14; padding: 8px 14px; text-align: left; }
.fine { font-size: 13px; color: var(--muted); }

/* art in the goal pills and cards */
.ic { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: middle; }
.goal .i .ic { width: 34px; height: 34px; }

/* the welcome poster, the medal, your buttons */
.poster { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 22px; }
.medal { width: 110px; height: 110px; justify-self: center; object-fit: contain; animation: pop 0.6s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(0.3) rotate(-20deg); } }
.artbtn { border: 0; background: none; padding: 0; justify-self: center; cursor: pointer; transition: transform 0.12s; }
.artbtn img { display: block; width: min(240px, 70vw); height: auto; }
.artbtn:active { transform: scale(0.94); }
.ic.sand { border-radius: 8px; }
.card { background: rgba(28,52,64,0.92); }

/* doubloons, boosters, the Boatyard */
.coins { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 10px 4px 6px; border: 0; border-radius: 999px; background: #00000040; font-weight: 800; font-size: 17px; }
.coins img { width: 28px; height: 28px; }
.coins span { font-size: 16px; margin-left: 2px; }
.ic.coin { width: 1.2em; height: 1.2em; margin-right: 2px; }
.boosters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.booster { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 0; border-radius: 16px; background: #ffffff12; font-size: 12px; line-height: 1.2; }
.booster img { width: 44px; height: 44px; }
.booster small { color: var(--gold); font-weight: 800; }
.booster[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--gold); background: #f2c76622; }
.booster:disabled { opacity: 0.4; }
.payout { display: grid; justify-items: center; gap: 2px; }
.paybig { font-size: 30px; font-weight: 900; color: var(--gold); }
.yard { display: grid; place-items: center; height: 190px; }
.stage { width: 190px; height: 190px; object-fit: contain; }
.stage.hammer { animation: hammer 0.45s cubic-bezier(.2,1.8,.4,1); }
.stage.launch { animation: launch 1.4s cubic-bezier(.2,1.4,.4,1); }
@keyframes hammer { 30% { transform: scale(0.88, 1.08) rotate(-4deg); } 60% { transform: scale(1.08, 0.94) rotate(3deg); } }
@keyframes launch { 0% { transform: translateY(60px) scale(0.6); opacity: 0; } 60% { transform: translateY(-10px) scale(1.12); opacity: 1; } }
.boatname { font-weight: 800; font-size: 20px; color: var(--ink); }
.dots { display: flex; justify-content: center; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #ffffff26; }
.dots i.on { background: var(--gold); }
.harbor { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 52px; padding: 8px; border-radius: 16px; background: #0000002e; }
.harbor img { width: 52px; height: 52px; object-fit: contain; }

/* delight */
.flyer { position: fixed; left: 0; top: 0; width: 40px; height: 40px; z-index: 30; pointer-events: none; object-fit: contain; will-change: transform; }
.goal.bump, .coins.bump { animation: bump 0.28s cubic-bezier(.2,1.8,.4,1); }
@keyframes bump { 40% { transform: scale(1.18); } }
.moves.low b { animation: lowpulse 0.9s ease-in-out infinite; }
@keyframes lowpulse { 50% { transform: scale(1.18); color: var(--hot); } }
@media (prefers-reduced-motion: reduce) { .flyer { display: none; } }

/* milestone chests */
.pips { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; background: #ffffff22; }
.pips i.on { background: var(--gold); box-shadow: 0 0 8px #f2c76688; }
.pips img { width: 30px; height: 30px; margin-left: 4px; opacity: 0.85; }
.chestbtn { display: flex; align-items: center; justify-content: center; gap: 8px; animation: glow 1.2s ease-in-out infinite; }
.chestbtn img { width: 34px; height: 34px; }
@keyframes glow { 50% { box-shadow: 0 4px 0 #4f8a66, 0 0 18px #f2c766; } }
.chest { border: 0; background: none; padding: 0; justify-self: center; cursor: pointer; }
.chest img { width: 180px; height: 180px; object-fit: contain; display: block; }
.chest.shaking { animation: rattle 1.1s ease-in-out infinite; }
@keyframes rattle { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-7deg) scale(1.04); } 74% { transform: rotate(6deg) scale(1.06); } 82% { transform: rotate(-4deg); } 90% { transform: rotate(3deg); } }
.chest.popped img { animation: popopen 0.6s cubic-bezier(.2,1.8,.4,1); }
@keyframes popopen { 0% { transform: scale(0.8, 1.2); } 50% { transform: scale(1.18, 0.9); } }
.loot { display: grid; gap: 8px; justify-items: center; min-height: 10px; }
.lootb { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lootb span { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #ffffff14; font-weight: 700; font-size: 14px; animation: popopen 0.5s cubic-bezier(.2,1.8,.4,1); }
.lootb img { width: 30px; height: 30px; }
.curse { font-style: italic; color: #c9b2e6; margin: 0; }
.booster.owned small { color: var(--ok); }

/* Spanish buttons drawn in code (pirate style), the welcome greeting */
.pbtn { justify-self: center; min-width: min(250px, 72vw); min-height: 60px; padding: 10px 28px; border: 3px solid #c99a4a; border-radius: 999px;
	font: 900 24px/1 ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; color: #fff8e6; letter-spacing: 0.01em; cursor: pointer;
	text-shadow: 0 2px 0 #00000055; box-shadow: inset 0 3px 0 #ffffff55, inset 0 -5px 0 #0000002e, 0 5px 0 #7a5420, 0 8px 16px #0006; transition: transform 0.1s; }
.pbtn.green { background: linear-gradient(180deg, #6fd36a, #2f9b3c); }
.pbtn.blue { background: linear-gradient(180deg, #5ab4f0, #2773c2); }
.pbtn.orange { background: linear-gradient(180deg, #ffad4d, #e0662a); }
.pbtn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #ffffff55, inset 0 -5px 0 #0000002e, 0 2px 0 #7a5420; }
.ahoy { font-size: 30px; color: var(--gold); text-shadow: 0 3px 0 #9a6b1f; margin: 0; }

/* Feral Republic edition: language switch and the made-with-AI line */
.langs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 0.75rem; }
.langs [aria-pressed="true"] { outline: 2px solid #ffd76a; outline-offset: 2px; }
.fine.made { opacity: 0.7; font-size: 0.75rem; }
.fine a { color: inherit; }

/* Account sign-in and the status note */
.acct { display: grid; gap: 8px; text-align: left; }
.acct label { font-size: 14px; font-weight: 700; color: var(--ink); }
.acct input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; touch-action: auto; /* the page blocks selection for the board; inputs need it back to paste */
	min-height: 50px; padding: 0 14px; border: 2px solid #ffffff33; border-radius: 14px; background: #0f1d24; color: var(--ink); font: inherit; font-size: 18px; }
.acct input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.acct input[aria-invalid="true"] { border-color: var(--hot); }
.acct input.code { letter-spacing: 0.4em; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; }
.acct .err { color: #ffb4a3; font-size: 14px; font-weight: 600; }
.acct .pbtn { margin-top: 6px; }
.card .note { padding: 10px 12px; border-radius: 12px; background: #ffffff14; color: var(--ink); font-size: 14px; }