:root {
  --bg: #061824;
  --bg-2: #092739;
  --panel: rgba(10, 42, 57, .78);
  --panel-strong: rgba(8, 32, 45, .94);
  --line: rgba(255,255,255,.10);
  --text: #f5fbff;
  --muted: #9bb7c4;
  --accent: #27d2c5;
  --accent-2: #68f0d7;
  --accent-rgb: 39,210,197;
  --hot: #ff8c68;
  --gold: #ffc45d;
  --danger: #ff647c;
  --shadow: 0 28px 70px rgba(0,0,0,.34);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; }
body { overflow-x: hidden; }
html.game-active, body.game-active { overflow: hidden; width: 100%; height: 100%; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); outline-offset: 2px; }

body[data-theme="lagoon"] { --bg:#061824; --bg-2:#092b3f; --panel:rgba(9,43,58,.78); --accent:#27d2c5; --accent-2:#83f0d3; --accent-rgb:39,210,197; --hot:#ff8d6e; }
body[data-theme="sunset"] { --bg:#25142d; --bg-2:#51283e; --panel:rgba(62,29,58,.80); --accent:#ff9f68; --accent-2:#ffd16f; --accent-rgb:255,159,104; --hot:#ff5f7a; }
body[data-theme="midnight"] { --bg:#070b22; --bg-2:#111a40; --panel:rgba(14,22,56,.82); --accent:#7c8cff; --accent-2:#be8dff; --accent-rgb:124,140,255; --hot:#54d8ff; }
body[data-theme="coral"] { --bg:#1f1621; --bg-2:#42222e; --panel:rgba(55,28,39,.82); --accent:#ff6f78; --accent-2:#ffb267; --accent-rgb:255,111,120; --hot:#ffd85f; }
body[data-theme="arctic"] { --bg:#071c2a; --bg-2:#10384b; --panel:rgba(10,48,64,.80); --accent:#80e8ff; --accent-2:#e0fbff; --accent-rgb:128,232,255; --hot:#9fb7ff; }

.app-shell { min-height: 100vh; position: relative; overflow: hidden; background:
  radial-gradient(circle at 15% 5%, rgba(var(--accent-rgb), .16), transparent 25rem),
  linear-gradient(160deg, var(--bg), var(--bg-2)); }
.ambient-orb { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(90px); opacity: .13; pointer-events: none; }
.orb-a { background: var(--accent); top: -10rem; left: -8rem; }
.orb-b { background: var(--hot); right: -12rem; bottom: -8rem; }

.topbar { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 10px; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; border:0; background:transparent; cursor:pointer; padding:4px; text-align:left; }
.brand-mark { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(145deg, var(--accent), var(--accent-2)); box-shadow:0 10px 24px rgba(var(--accent-rgb),.23); font-size:23px; }
.brand strong { display:block; font-size:16px; line-height:1; letter-spacing:.02em; }
.brand small { display:block; color:var(--accent-2); font-weight:800; font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-top:5px; }
.wallet-pill { display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:rgba(0,0,0,.22); padding:10px 15px; border-radius:99px; backdrop-filter:blur(18px); box-shadow:0 10px 28px rgba(0,0,0,.16); }
.wallet-pill span { color:var(--gold); }

main { position:relative; z-index:2; }
.screen { display:none; width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:22px 0 116px; animation:screenIn .32s ease; }
.screen.active { display:block; }
@keyframes screenIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.glass-panel { border:1px solid var(--line); background:linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(24px); }
.glass-dark { border:1px solid rgba(255,255,255,.12); background:rgba(3,15,24,.66); box-shadow:0 16px 40px rgba(0,0,0,.25); backdrop-filter:blur(16px); }

.hero-card { min-height:440px; border-radius:34px; padding:54px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; overflow:hidden; position:relative; }
.hero-card::after { content:""; position:absolute; inset:auto -20% -55% 30%; height:80%; background:radial-gradient(circle, rgba(var(--accent-rgb),.24), transparent 65%); pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:650px; }
.eyebrow, .label { display:block; color:var(--accent-2); font-size:11px; font-weight:900; letter-spacing:.19em; text-transform:uppercase; }
.hero-copy h1 { font-size:clamp(42px,6vw,74px); line-height:.98; letter-spacing:-.055em; margin:16px 0 22px; }
.gradient-text { background:linear-gradient(90deg, var(--accent-2), #fff 76%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy p { max-width:610px; color:#c4d7df; font-size:16px; line-height:1.8; margin:0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn { border:0; border-radius:15px; padding:12px 18px; cursor:pointer; font-weight:850; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:.18s transform,.18s filter,.18s opacity; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#052027; box-shadow:0 14px 32px rgba(var(--accent-rgb),.22); }
.btn-secondary { background:rgba(255,255,255,.075); border:1px solid var(--line); }
.btn-danger { background:rgba(255,100,124,.13); border:1px solid rgba(255,100,124,.35); color:#ffb0bd; }
.btn-xl { min-height:58px; padding:15px 23px; border-radius:18px; font-size:15px; }
.btn-icon { font-size:15px; }

.hero-visual { position:relative; z-index:1; display:grid; place-items:center; min-height:330px; }
.mini-ocean { width:min(370px,100%); aspect-ratio:1; border-radius:50%; position:relative; overflow:hidden; background:radial-gradient(circle at 38% 22%, rgba(255,255,255,.14), transparent 22%), linear-gradient(160deg, #0a6582, #0b324d 70%); box-shadow:inset 0 0 70px rgba(255,255,255,.07), 0 26px 60px rgba(0,0,0,.3), 0 0 0 14px rgba(255,255,255,.025); }
.wave { position:absolute; width:150%; height:90px; left:-25%; border-radius:45%; border-top:2px solid rgba(255,255,255,.22); }
.wave-1 { top:32%; animation:wave 6s linear infinite; }
.wave-2 { top:62%; animation:wave 8s linear infinite reverse; opacity:.6; }
@keyframes wave { to { transform:rotate(360deg); } }
.raft-demo { position:absolute; width:115px; height:100px; top:44%; left:50%; transform:translate(-50%,-50%) rotate(-5deg); animation:floaty 3.8s ease-in-out infinite; }
@keyframes floaty { 50% { transform:translate(-50%,-54%) rotate(4deg); } }
.raft-base { position:absolute; left:9px; bottom:7px; width:96px; height:38px; border-radius:11px 11px 18px 18px; background:repeating-linear-gradient(90deg,#bd793e 0 14px,#94572d 14px 18px); box-shadow:0 10px 14px rgba(0,0,0,.32); }
.sail { position:absolute; left:53px; top:4px; width:4px; height:62px; background:#e9f5f2; border-radius:4px; }
.sail::after { content:""; position:absolute; left:4px; top:2px; width:43px; height:42px; background:linear-gradient(135deg,#fff,#89f0da); clip-path:polygon(0 0,100% 78%,0 100%); }
.hero-avatar { position:absolute; left:29px; bottom:38px; font-size:30px; filter:drop-shadow(0 5px 6px rgba(0,0,0,.35)); }
.pet-bob { position:absolute; right:3px; bottom:26px; font-size:23px; }
.float-item { position:absolute; filter:drop-shadow(0 4px 7px rgba(0,0,0,.35)); animation:bob 2.8s ease-in-out infinite; }
.float-1 { left:18%; top:25%; font-size:31px; }
.float-2 { right:15%; top:27%; font-size:28px; animation-delay:.6s; }
.float-3 { right:18%; bottom:20%; font-size:25px; animation-delay:1.1s; }
@keyframes bob { 50% { transform:translateY(-9px) rotate(6deg); } }

.home-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:18px; margin-top:18px; }
.profile-card, .stats-card { border-radius:var(--radius); padding:24px; }
.profile-head { display:flex; align-items:center; gap:15px; }
.profile-avatar { width:60px; height:60px; border-radius:19px; display:grid; place-items:center; background:linear-gradient(145deg,rgba(var(--accent-rgb),.3),rgba(255,255,255,.05)); border:1px solid rgba(var(--accent-rgb),.35); font-size:31px; }
.profile-head h2 { margin:5px 0 0; font-size:22px; }
.level-badge { margin-left:auto; background:rgba(var(--accent-rgb),.13); color:var(--accent-2); padding:8px 11px; border-radius:11px; font-size:12px; font-weight:800; }
.xp-track, .museum-track, .mission-track, .mini-progress { height:7px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.xp-track { margin-top:20px; }
.xp-track span, .museum-track span, .mission-track span, .mini-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0; transition:width .4s ease; }
.profile-meta { margin-top:8px; display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.section-heading.compact h2 { margin:5px 0 18px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat { padding:14px; border-radius:16px; background:rgba(255,255,255,.042); display:flex; align-items:center; gap:11px; }
.stat>span { font-size:24px; }
.stat small { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.stat strong { font-size:18px; }
.stat em { font-size:11px; font-style:normal; color:var(--muted); }

.quick-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px; }
.quick-card { border-radius:20px; padding:19px; color:inherit; cursor:pointer; display:flex; align-items:center; gap:13px; text-align:left; transition:.18s transform,.18s border-color; }
.quick-card:hover { transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.34); }
.quick-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(var(--accent-rgb),.13); font-size:22px; }
.quick-card strong, .quick-card small { display:block; }
.quick-card small { color:var(--muted); margin-top:4px; }
.quick-card b { margin-left:auto; font-size:24px; color:var(--muted); }

.page-header { display:flex; align-items:center; gap:16px; margin:12px 0 26px; }
.page-header h1 { margin:4px 0 0; font-size:38px; letter-spacing:-.035em; }
.icon-button { width:48px; height:48px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.055); cursor:pointer; font-size:22px; }
.tabbar { display:flex; gap:8px; overflow:auto; padding-bottom:8px; scrollbar-width:none; }
.tabbar::-webkit-scrollbar { display:none; }
.tabbar button { border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:99px; padding:11px 17px; cursor:pointer; white-space:nowrap; font-weight:800; color:var(--muted); }
.tabbar button.active { color:#052027; border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.shop-grid, .museum-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-top:18px; }
.shop-card, .museum-card { position:relative; overflow:hidden; min-height:240px; border-radius:22px; padding:20px; border:1px solid var(--line); background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.02)),var(--panel); box-shadow:0 18px 44px rgba(0,0,0,.19); }
.shop-preview { height:105px; border-radius:17px; display:grid; place-items:center; font-size:48px; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),transparent 30%),linear-gradient(150deg,rgba(var(--accent-rgb),.25),rgba(255,255,255,.03)); margin-bottom:16px; }
.theme-swatch { width:100%; height:100%; border-radius:inherit; position:relative; overflow:hidden; }
.theme-swatch::after { content:"⛵"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:40px; }
.shop-card h3, .museum-card h3 { margin:0 0 6px; font-size:17px; }
.shop-card p, .museum-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; min-height:36px; }
.shop-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:15px; }
.price { color:var(--gold); font-weight:900; }
.shop-action { min-width:82px; padding:9px 12px; border-radius:11px; border:0; cursor:pointer; background:rgba(var(--accent-rgb),.14); color:var(--accent-2); font-weight:850; }
.shop-action.owned { color:#91e6aa; background:rgba(94,205,128,.13); }
.shop-action.equipped { color:#082226; background:var(--accent-2); }
.lock-badge { position:absolute; top:14px; right:14px; padding:6px 8px; border-radius:9px; background:rgba(0,0,0,.46); font-size:11px; }
.rarity { display:inline-flex; margin-top:10px; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); }

.museum-summary { border-radius:22px; padding:22px; display:grid; grid-template-columns:auto 1fr; gap:12px 25px; align-items:center; }
.museum-summary small, .museum-summary strong { display:block; }
.museum-summary strong { margin-top:5px; font-size:24px; }
.museum-summary p { grid-column:1/-1; margin:0; color:var(--muted); font-size:13px; }
.museum-card { min-height:220px; }
.museum-card.locked { filter:saturate(.25); opacity:.6; }
.museum-icon { height:92px; display:grid; place-items:center; font-size:50px; }

.settings-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.settings-card { border-radius:24px; padding:25px; }
.settings-card h2 { margin:0 0 22px; font-size:21px; }
.field-label { display:block; color:var(--muted); font-size:12px; font-weight:800; margin:19px 0 8px; }
.input-row { display:flex; gap:9px; }
input, select { width:100%; border:1px solid var(--line); background:rgba(0,0,0,.20); color:var(--text); padding:13px 14px; border-radius:13px; }
select option { color:#111; }
.choice-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.choice { aspect-ratio:1; border:1px solid var(--line); background:rgba(255,255,255,.045); border-radius:14px; cursor:pointer; display:grid; place-items:center; font-size:24px; position:relative; }
.choice.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.18); background:rgba(var(--accent-rgb),.12); }
.choice.locked::after { content:"🔒"; position:absolute; right:2px; bottom:2px; font-size:10px; }
.theme-picker { display:flex; gap:10px; flex-wrap:wrap; }
.theme-choice { width:48px; height:48px; border-radius:15px; border:3px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.theme-choice.active { border-color:#fff; transform:scale(1.06); }
.toggle-row { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:18px 0; border-top:1px solid var(--line); margin-top:18px; }
.toggle-row strong, .toggle-row small { display:block; }
.toggle-row small { color:var(--muted); margin-top:4px; }
.toggle { width:51px; height:29px; border-radius:99px; border:0; padding:3px; background:rgba(255,255,255,.12); cursor:pointer; }
.toggle span { display:block; width:23px; height:23px; border-radius:50%; background:#fff; transition:.18s transform; }
.toggle.on { background:var(--accent); }
.toggle.on span { transform:translateX(22px); }
.danger-zone { grid-column:1/-1; }
.danger-zone p { color:var(--muted); }

.bottom-nav { position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:50; width:min(530px,calc(100% - 24px)); display:grid; grid-template-columns:repeat(4,1fr); padding:8px; border-radius:22px; border:1px solid var(--line); background:rgba(4,20,30,.82); backdrop-filter:blur(24px); box-shadow:0 18px 55px rgba(0,0,0,.35); }
.bottom-nav button { border:0; background:transparent; color:var(--muted); border-radius:15px; padding:9px 6px; cursor:pointer; display:grid; place-items:center; gap:4px; }
.bottom-nav button span { font-size:20px; }
.bottom-nav button small { font-size:10px; font-weight:800; }
.bottom-nav button.active { color:var(--text); background:rgba(var(--accent-rgb),.13); }

.screen.game-screen { position:fixed; inset:0; z-index:100; width:100%; padding:0; max-width:none; margin:0; background:#052235; overflow:hidden; }
.screen.game-screen.active { display:block; }
#gameCanvas { width:100%; height:100%; display:block; touch-action:none; }
.game-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle,transparent 53%,rgba(0,0,0,.24)); }
.hud-top { position:absolute; inset:16px 18px auto; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.hud-cluster, .resource-row { display:flex; gap:9px; }
.hud-button, .timer-card, .score-card, .resource-row>div { pointer-events:auto; border:1px solid rgba(255,255,255,.13); background:rgba(2,20,31,.68); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.hud-button { width:48px; height:48px; border-radius:15px; cursor:pointer; font-weight:900; }
.zoom-control { pointer-events:auto; height:48px; display:flex; align-items:center; gap:2px; padding:4px; border:1px solid rgba(255,255,255,.13); border-radius:15px; background:rgba(2,20,31,.68); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(0,0,0,.2); }
.zoom-control button { width:35px; height:38px; border:0; border-radius:10px; color:#fff; background:rgba(255,255,255,.08); font-size:19px; font-weight:900; cursor:pointer; touch-action:manipulation; }
.zoom-control button:active { transform:scale(.94); background:rgba(var(--accent-rgb),.22); }
.zoom-control span { min-width:44px; text-align:center; color:var(--accent-2); font-size:10px; font-weight:900; letter-spacing:.03em; }
.timer-card { min-width:88px; padding:9px 14px; border-radius:15px; text-align:center; }
.timer-card small, .score-card small { display:block; color:#9fb7c4; font-size:9px; font-weight:900; letter-spacing:.14em; }
.timer-card strong { font-size:18px; }
.score-card { min-width:170px; border-radius:18px; padding:10px 18px; text-align:center; }
.score-card strong { display:block; font-size:27px; line-height:1.15; }
.mini-progress { height:4px; margin-top:7px; }
.resource-row>div { min-width:72px; padding:11px 12px; border-radius:15px; display:flex; gap:8px; justify-content:center; }
.resource-row span { font-size:16px; }
.leaderboard { position:absolute; top:88px; right:18px; width:225px; padding:14px; border-radius:18px; }
.leaderboard-title { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.13em; margin-bottom:10px; }
.leaderboard-title b { color:var(--accent-2); }
.leader-row { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:7px; padding:5px 7px; border-radius:9px; font-size:11px; }
.leader-row.player { background:rgba(var(--accent-rgb),.13); color:var(--accent-2); }
.leader-row .rank { color:var(--muted); }
.leader-row .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mission-card { position:absolute; left:18px; bottom:78px; width:min(310px,calc(100% - 36px)); border-radius:17px; padding:13px 15px; display:flex; align-items:center; gap:12px; }
.mission-card>span { font-size:24px; }
.mission-card>div { flex:1; }
.mission-card small { display:block; color:var(--muted); font-size:8px; letter-spacing:.15em; font-weight:900; }
.mission-card strong { display:block; font-size:12px; margin:3px 0 7px; }
.mission-track { height:5px; }
.event-banner { position:absolute; left:50%; top:92px; transform:translate(-50%,-18px); border-radius:99px; padding:10px 18px; background:linear-gradient(135deg,var(--hot),var(--gold)); color:#251718; font-weight:900; box-shadow:0 10px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.25s opacity,.25s transform; }
.event-banner.show { opacity:1; transform:translate(-50%,0); }
.controls-hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:8px; align-items:center; white-space:nowrap; color:rgba(255,255,255,.68); font-size:10px; background:rgba(0,0,0,.25); padding:8px 12px; border-radius:99px; }
.controls-hint span:nth-child(odd) { color:#fff; font-weight:800; }
.controls-hint i { opacity:.35; }
.mobile-controls { display:none; position:absolute; inset:auto 16px max(18px,env(safe-area-inset-bottom)); justify-content:space-between; align-items:end; pointer-events:none; }
.action-buttons { display:flex; gap:12px; align-items:end; pointer-events:auto; }
.action { border:1px solid rgba(255,255,255,.17); border-radius:50%; color:#fff; background:rgba(2,18,28,.58); backdrop-filter:blur(10px); display:grid; place-items:center; touch-action:none; box-shadow:0 12px 28px rgba(0,0,0,.24); }
.action span, .action small { display:block; }
.action small { font-size:8px; font-weight:800; }
.boost-action { width:70px; height:70px; }
.cannon-action { width:92px; height:92px; background:rgba(var(--accent-rgb),.27); }
.action span { font-size:24px; }

.modal-backdrop { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:18px; background:rgba(0,8,14,.70); backdrop-filter:blur(10px); }
.modal-backdrop[hidden] { display:none; }
.modal { width:min(520px,100%); border-radius:28px; padding:28px; text-align:center; max-height:90vh; overflow:auto; }
.modal h2 { margin:10px 0; font-size:30px; }
.modal p { color:var(--muted); line-height:1.65; }
.modal-icon { font-size:58px; }
.modal-actions { display:flex; gap:10px; margin-top:22px; }
.modal-actions .btn { flex:1; }
.daily-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:20px 0; }
.daily-day { border-radius:12px; padding:10px 3px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.daily-day small, .daily-day strong { display:block; }
.daily-day small { color:var(--muted); font-size:8px; }
.daily-day strong { margin-top:6px; font-size:12px; color:var(--gold); }
.daily-day.current { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.10); }
.daily-day.claimed { opacity:.46; }
.result-rank { font-size:64px; font-weight:950; color:var(--accent-2); line-height:1; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:20px 0; }
.result-grid div { border-radius:14px; padding:13px 6px; background:rgba(255,255,255,.04); }
.result-grid small, .result-grid strong { display:block; }
.result-grid small { color:var(--muted); font-size:9px; }
.result-grid strong { margin-top:5px; }
.pause-list { display:grid; gap:9px; margin-top:20px; }
.pause-list .btn { width:100%; }

.toast-stack { position:fixed; z-index:400; right:18px; bottom:104px; display:grid; gap:9px; pointer-events:none; }
.toast { max-width:320px; padding:12px 15px; border-radius:14px; background:rgba(5,28,39,.94); border:1px solid var(--line); box-shadow:0 14px 35px rgba(0,0,0,.28); animation:toastIn .25s ease, toastOut .25s ease 2.75s forwards; font-size:13px; }
@keyframes toastIn { from { opacity:0; transform:translateX(15px); } }
@keyframes toastOut { to { opacity:0; transform:translateX(15px); } }

@media (max-width: 900px) {
  .hero-card { grid-template-columns:1fr; padding:38px; }
  .hero-visual { position:absolute; right:-100px; bottom:-110px; width:420px; opacity:.42; }
  .hero-copy { max-width:630px; }
  .home-grid { grid-template-columns:1fr; }
  .quick-links { grid-template-columns:1fr; }
  .shop-grid, .museum-grid { grid-template-columns:repeat(2,1fr); }
  .settings-layout { grid-template-columns:1fr; }
  .danger-zone { grid-column:auto; }
}

@media (max-width: 650px) {
  .topbar { width:calc(100% - 24px); padding-top:13px; }
  .screen { width:calc(100% - 24px); padding-top:12px; }
  .hero-card { min-height:480px; padding:30px 24px; border-radius:26px; align-items:start; }
  .hero-copy h1 { font-size:45px; margin-top:14px; }
  .hero-copy p { font-size:14px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-visual { right:-120px; bottom:-120px; width:390px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .profile-meta { flex-direction:column; }
  .page-header h1 { font-size:31px; }
  .shop-grid, .museum-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .shop-card, .museum-card { padding:14px; min-height:220px; }
  .shop-preview { height:88px; }
  .choice-grid { grid-template-columns:repeat(5,1fr); }
  .museum-summary { grid-template-columns:1fr; }
  .museum-summary p { grid-column:auto; }
  .hud-top { inset:10px 10px auto; }
  .hud-cluster { gap:5px; }
  .hud-button { width:42px; height:42px; }
  .zoom-control { height:42px; padding:3px; }
  .zoom-control button { width:30px; height:34px; font-size:17px; }
  .zoom-control span { min-width:38px; font-size:9px; }
  .timer-card { min-width:70px; padding:7px 9px; }
  .score-card { min-width:105px; padding:7px 10px; }
  .score-card strong { font-size:21px; }
  .resource-row { position:absolute; top:48px; right:0; gap:5px; }
  .resource-row>div { min-width:54px; padding:7px 8px; font-size:11px; }
  .leaderboard { top:102px; right:10px; width:166px; padding:10px; }
  .leader-row { grid-template-columns:18px 1fr auto; gap:4px; padding:4px; font-size:9px; }
  .mission-card { bottom:155px; left:10px; width:220px; padding:10px; }
  .controls-hint { display:none; }
  .mobile-controls { display:flex; }
  .event-banner { top:105px; font-size:11px; }
  .daily-grid { gap:3px; }
  .daily-day { padding:8px 1px; }
  .modal { padding:22px; }
}

@media (pointer: coarse) { .controls-hint { display:none; } .mobile-controls { display:flex; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }


/* Version 1.1.0: pirate titles, pet growth, pointer-hold movement */
.pirate-rank-panel { margin-top:18px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:12px 13px; border-radius:16px; background:linear-gradient(135deg,rgba(255,196,91,.11),rgba(var(--accent-rgb),.08)); border:1px solid rgba(255,210,118,.16); }
.pirate-rank-emblem { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:rgba(255,196,91,.12); color:var(--gold); font-size:22px; }
.pirate-rank-copy small, .pirate-rank-copy strong { display:block; }
.pirate-rank-copy small { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.14em; }
.pirate-rank-copy strong { margin-top:3px; font-size:15px; color:#fff3c8; }
.pirate-rank-points { color:var(--gold); font-size:11px; font-weight:900; white-space:nowrap; }
.infamy-track { height:5px; margin-top:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.infamy-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f4b84f,#ffe39a); transition:width .4s ease; }

.pet-shop-card { min-height:300px; }
.pet-level-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.pet-level-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:9px; background:rgba(var(--accent-rgb),.12); color:var(--accent-2); font-size:10px; font-weight:900; }
.pet-effect { color:#d7e9ef; font-size:10px; font-weight:800; text-align:right; }
.pet-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }
.pet-actions .shop-action { min-width:0; padding:9px 7px; font-size:11px; }
.shop-action.upgrade { color:#ffe6a5; background:rgba(246,184,91,.13); }
.shop-action:disabled { cursor:default; opacity:.62; }
.choice.pet-choice { aspect-ratio:auto; min-height:58px; padding:6px 3px; grid-template-rows:1fr auto; font-size:22px; }
.choice.pet-choice small { font-size:8px; color:var(--muted); font-weight:900; }
.choice.pet-choice.active small { color:var(--accent-2); }

#gameCanvas { cursor:crosshair; -webkit-user-select:none; user-select:none; }
#gameCanvas.pointer-driving { cursor:grabbing; }
.hold-move-badge { width:126px; min-height:82px; border-radius:24px; display:grid; place-items:center; align-content:center; gap:3px; color:rgba(255,255,255,.82); background:rgba(2,18,28,.30); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); pointer-events:none; }
.hold-move-badge span { font-size:29px; line-height:1; }
.hold-move-badge small { max-width:92px; text-align:center; font-size:8px; line-height:1.25; font-weight:850; }
.result-title-up { margin:10px 0 2px; padding:10px 12px; border-radius:13px; color:#fff1b7; background:rgba(246,184,91,.11); border:1px solid rgba(246,184,91,.18); font-size:12px; font-weight:850; }

@media (max-width:650px) {
  .pirate-rank-panel { grid-template-columns:auto 1fr; }
  .pirate-rank-points { grid-column:2; }
  .pet-shop-card { min-height:290px; }
  .pet-actions { grid-template-columns:1fr; }
  .hold-move-badge { width:104px; min-height:70px; border-radius:20px; }
}


/* Version 1.1.1: rank gallery, ship evolution, knockout recovery */
.rank-list-button { width:100%; margin-top:10px; border:1px solid rgba(255,210,118,.18); color:#ffe8a5; background:rgba(246,184,91,.075); border-radius:13px; padding:9px 11px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:900; }
.rank-list-button:hover { border-color:rgba(255,210,118,.34); background:rgba(246,184,91,.13); }
.rank-list-modal { display:grid; gap:8px; margin:18px 0 4px; text-align:left; }
.rank-list-row { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:10px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.rank-list-row.current { border-color:rgba(246,184,91,.55); background:linear-gradient(135deg,rgba(246,184,91,.18),rgba(var(--accent-rgb),.08)); box-shadow:0 0 0 2px rgba(246,184,91,.08); }
.rank-list-row.reached { border-color:rgba(105,232,170,.22); }
.rank-list-row.locked { opacity:.58; filter:saturate(.45); }
.rank-list-row .rank-no { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:rgba(0,0,0,.22); color:var(--gold); font-size:12px; font-weight:950; }
.rank-list-row strong, .rank-list-row small { display:block; }
.rank-list-row strong { color:#fff5c8; font-size:14px; }
.rank-list-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.rank-list-row em { font-style:normal; font-size:10px; font-weight:950; color:var(--accent-2); white-space:nowrap; }
@media (max-width: 650px) {
  .rank-list-row { grid-template-columns:30px 1fr; }
  .rank-list-row em { grid-column:2; }
}


/* Version 1.2.0: cannon combat, live-match entry, shipyard upgrades, generated BGM */
.cannon-action { background:linear-gradient(145deg,rgba(255,157,71,.34),rgba(123,41,29,.62)); border-color:rgba(255,205,135,.30); box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 0 22px rgba(255,160,76,.10); }
.cannon-action span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#1d2427; background:radial-gradient(circle at 34% 28%,#66747b,#20282c 56%,#070b0d); box-shadow:inset -5px -6px 9px rgba(0,0,0,.54),0 0 14px rgba(255,143,61,.22); font-size:20px; line-height:1; }
.shipyard-intro { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:18px 20px; border-radius:20px; background:linear-gradient(135deg,rgba(246,184,91,.14),rgba(var(--accent-rgb),.08)); border:1px solid rgba(255,211,125,.18); }
.shipyard-intro .shipyard-emblem { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:#ffe09a; background:rgba(246,184,91,.13); font-size:30px; }
.shipyard-intro h2 { margin:0 0 5px; font-size:20px; }
.shipyard-intro p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.ship-upgrade-card { min-height:300px; position:relative; overflow:hidden; }
.ship-upgrade-card::before { content:""; position:absolute; inset:-60px -80px auto auto; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(246,184,91,.15),transparent 66%); pointer-events:none; }
.ship-upgrade-icon { width:82px; height:82px; margin:3px auto 14px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(145deg,rgba(255,218,143,.16),rgba(0,0,0,.15)); border:1px solid rgba(255,224,165,.17); font-size:38px; }
.ship-level-line { display:flex; justify-content:space-between; gap:8px; align-items:center; margin:13px 0 8px; }
.ship-level-line b { color:#ffe4a1; font-size:12px; }
.ship-level-line span { color:var(--accent-2); font-size:10px; font-weight:900; }
.ship-level-track { height:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); margin-bottom:12px; }
.ship-level-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e77c41,#ffd678); }
.ship-effect-list { display:grid; gap:5px; min-height:42px; color:#d9edf0; font-size:10px; font-weight:800; }
.ship-effect-list span { display:flex; align-items:center; gap:6px; }
.ship-upgrade-button { width:100%; margin-top:15px; border:1px solid rgba(255,216,145,.22); border-radius:12px; padding:11px 10px; color:#281b13; background:linear-gradient(135deg,#f5b65d,#ffe09a); font-weight:950; cursor:pointer; }
.ship-upgrade-button:disabled { cursor:default; color:#d7d9d9; background:rgba(255,255,255,.08); opacity:.68; }
.ship-start-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:16px 0 4px; }
.ship-start-summary div { border-radius:13px; padding:10px 5px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); }
.ship-start-summary small,.ship-start-summary strong { display:block; }
.ship-start-summary small { color:var(--muted); font-size:8px; }
.ship-start-summary strong { margin-top:4px; color:#ffe3a0; font-size:12px; }
.late-join-chip { display:inline-flex; align-items:center; gap:7px; margin-top:5px; border-radius:99px; padding:7px 11px; color:#ffd98b; background:rgba(246,184,91,.10); border:1px solid rgba(246,184,91,.17); font-size:10px; font-weight:900; }
@media (max-width:650px) {
  .shipyard-intro { grid-template-columns:1fr; text-align:center; }
  .shipyard-intro .shipyard-emblem { margin:auto; }
  .ship-upgrade-card { min-height:285px; grid-column:1/-1; }
  .ship-start-summary { grid-template-columns:1fr; }
}


/* Version 1.2.1: endless voyage and score settlement */
.hud-cluster { min-width:52px; }
.settlement-breakdown { display:grid; gap:8px; margin:16px 0 4px; }
.settlement-row { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:11px 13px; border-radius:13px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.075); }
.settlement-row span { color:var(--muted); font-size:11px; font-weight:800; }
.settlement-row strong { color:#ffe09a; font-size:15px; }
.settlement-row.total { background:linear-gradient(135deg,rgba(246,184,91,.16),rgba(var(--accent-rgb),.08)); border-color:rgba(255,218,143,.18); }
.settlement-row.total strong { font-size:20px; }

.stats-grid .stat:last-child:nth-child(5){grid-column:1/-1;}
@media (max-width:700px){.stats-grid .stat:last-child:nth-child(5){grid-column:auto;}}


/* Version 1.4.0: navy records and world events */
.navy-log-button{margin-top:14px;border-color:rgba(148,211,232,.22);color:#d9f4ff;background:rgba(89,155,180,.09)}
.navy-record-list{display:grid;gap:8px;max-height:min(58vh,560px);overflow:auto;margin:16px 0;padding-right:4px;text-align:left}
.navy-record-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(3,20,29,.45)}
.navy-record-row.defeated{border-color:rgba(255,211,112,.28);background:rgba(255,191,70,.08)}
.navy-record-row strong{font-size:13px}.navy-record-row em{font-size:11px;font-style:normal;color:#ffe094;font-weight:900}.navy-record-tier{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font-weight:900;font-size:11px}
.stats-grid .stat:last-child:nth-child(5){grid-column:auto}
@media(max-width:700px){.navy-record-row{grid-template-columns:28px minmax(0,1fr)}.navy-record-row em{grid-column:2}}


.quick-card.locked { opacity:.58; filter:saturate(.55); }
.headquarters-panel { max-width:860px; margin:0 auto; padding:38px; text-align:center; position:relative; overflow:hidden; }
.headquarters-panel::before { content:""; position:absolute; inset:-40%; background:radial-gradient(circle,rgba(255,84,77,.14),transparent 55%); pointer-events:none; }
.headquarters-emblem { font-size:72px; filter:drop-shadow(0 16px 24px rgba(0,0,0,.35)); position:relative; }
.headquarters-status { display:inline-flex; margin:10px 0 12px; padding:8px 16px; border-radius:999px; background:rgba(255,91,91,.14); color:#ffb0ad; font-weight:800; position:relative; }
.headquarters-status.unlocked { background:rgba(52,220,179,.14); color:#9effdf; }
.headquarters-panel h2,.headquarters-panel p,.headquarters-panel button,.headquarters-facts { position:relative; }
.headquarters-panel > p { color:var(--muted); line-height:1.8; max-width:650px; margin:10px auto 24px; }
.headquarters-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.headquarters-facts div { padding:16px 10px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.18); }
.headquarters-facts small { display:block; color:var(--muted); font-size:11px; letter-spacing:.12em; }
.headquarters-facts strong { display:block; margin-top:7px; font-size:17px; }
.headquarters-reward { color:#ffd98a !important; font-weight:800; }
@media(max-width:680px){.headquarters-panel{padding:26px 18px}.headquarters-facts{grid-template-columns:1fr}.headquarters-emblem{font-size:58px}}

  
/* Version 1.5.1: Nautivara brand, original SVG UI art, legal notices */
.brand-mark { padding:5px; overflow:hidden; }
.brand-mark img { width:100%; height:100%; display:block; border-radius:10px; }
.brand small { letter-spacing:.12em; font-size:9px; }
.mini-art { width:23px; height:23px; display:block; }
.button-art { width:25px; height:25px; display:block; }
.art-float { width:36px; height:36px; object-fit:contain; }
.quick-icon img { width:32px; height:32px; display:block; }
.headquarters-emblem img { width:88px; height:88px; display:block; margin:auto; filter:drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
.resource-art { width:22px; height:22px; display:block; }
.bottom-nav button>img { width:23px; height:23px; display:block; }
.rights-strip { margin-top:18px; border-radius:20px; padding:16px 20px; display:flex; align-items:center; gap:14px; }
.rights-strip>img { width:46px; height:46px; border-radius:13px; }
.rights-strip strong,.rights-strip small { display:block; }
.rights-strip strong { color:var(--accent-2); font-size:12px; margin-bottom:4px; }
.rights-strip small { color:var(--muted); line-height:1.55; font-size:10px; }
.rights-zone { grid-column:1/-1; }
.rights-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rights-heading img { width:44px; height:44px; border-radius:12px; }
.rights-heading h2 { margin:0; }
.rights-zone p { color:var(--muted); line-height:1.65; margin:7px 0; }
.rights-zone .rights-note { font-size:11px; }
@media(max-width:650px){
  .rights-strip { align-items:flex-start; padding:14px; }
  .rights-strip>img { width:40px; height:40px; }
  .rights-zone { grid-column:auto; }
}