:root {
  --bg: #0b1424; --bg2: #13223b; --panel: #172a47; --panel2: #1e3557; --line: #2c4a75;
  --text: #eef4ff; --muted: #93a8c8; --gold: #fbbf24; --gold2: #f59e0b; --red: #ef4444; --green: #4ade80; --blue: #60a5fa;
  --common: #cbd5e1; --uncommon: #4ade80; --rare: #60a5fa; --epic: #c084fc; --legendary: #fb923c; --mythic: #f43f5e; --starter: #94a3b8;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Nunito', system-ui, sans-serif; overflow: hidden; }
body { background: radial-gradient(ellipse at top, #1c3560 0%, var(--bg) 60%); }
h1, h2, h3, .banner-main, .vic-title, .tb-lv, .c-cost, .combo, .energy b, .p-wanted, .p-bounty { font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 1px; font-weight: 400; }
h1 { font-size: 2.2rem; margin: .2em 0 .4em; color: var(--gold); text-shadow: 2px 2px 0 #000; }
h2 { font-size: 1.5rem; margin: 1em 0 .5em; color: #fde68a; }
h3 { font-size: 1.25rem; margin: 0 0 .5em; color: #fde68a; }
.muted { color: var(--muted); } .small { font-size: .8rem; } .warn { color: #fca5a5; } .up { color: var(--green); } .down { color: #f87171; }
button { font-family: inherit; }
#app { height: 100%; display: flex; flex-direction: column; }
#main { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }
#app.in-battle #main { padding: 0; overflow: hidden; }

/* ---------- buttons */
.btn { background: linear-gradient(#2b4a78, #1d355a); color: var(--text); border: 2px solid #3d659c; border-radius: 10px; padding: 8px 14px; font-weight: 800; cursor: pointer; transition: transform .08s, filter .15s; font-size: .95rem; }
.btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.gold { background: linear-gradient(#fcd34d, #f59e0b); color: #3b1d00; border-color: #fde68a; }
.btn.red { background: linear-gradient(#f87171, #b91c1c); border-color: #fca5a5; }
.btn.big { padding: 14px 22px; font-size: 1.1rem; border-radius: 14px; }
.btn.sm { padding: 4px 10px; font-size: .8rem; border-radius: 8px; }
.btn.ghost { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.3); }
.btn.dis, .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn small { display: block; font-size: .72rem; font-weight: 600; opacity: .85; }
.xbtn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.row { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }

.panel { background: linear-gradient(180deg, var(--panel), #132440); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* ---------- art */
.art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.art .emoji { font-size: 2.2em; line-height: 1; filter: drop-shadow(0 3px 2px rgba(0,0,0,.4)); }

/* ---------- topbar */
#topbar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: linear-gradient(#0f1d33, #0b1527); border-bottom: 2px solid #23426d; flex-wrap: wrap; }
.tb-left { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 260px; }
.tb-portrait { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(#3b5f95, #1a2f50); border: 3px solid var(--gold); overflow: visible; font-size: .9rem; }
.tb-portrait .art { border-radius: 50%; overflow: hidden; }
.tb-lv { position: absolute; bottom: -6px; right: -8px; background: var(--gold); color: #3b1d00; border-radius: 10px; padding: 0 6px; font-size: 1rem; border: 2px solid #0b1527; }
.tb-name { font-weight: 900; } .tb-name .muted { font-weight: 600; font-size: .8rem; }
.xpbar { position: relative; height: 16px; width: 220px; background: #0a1220; border-radius: 8px; overflow: hidden; border: 1px solid #2c4a75; margin-top: 3px; }
.xpbar div { height: 100%; background: linear-gradient(90deg, #a855f7, #60a5fa); transition: width .6s; }
.xpbar span { position: absolute; inset: 0; font-size: .68rem; text-align: center; line-height: 15px; font-weight: 800; text-shadow: 1px 1px 0 #000; }
.xpbar.big { width: 100%; height: 20px; margin: 10px 0; } .xpbar.big span { line-height: 19px; font-size: .8rem; }
.tb-money { text-align: right; }
.berries { color: var(--gold); font-weight: 900; font-size: 1.1rem; }
.fame { font-size: .75rem; color: #fca5a5; font-weight: 800; }
.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tab { position: relative; background: transparent; border: 2px solid transparent; color: var(--muted); border-radius: 10px; padding: 4px 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: .72rem; min-width: 52px; }
.tab .ti { font-size: 1.2rem; }
.tab:hover { color: var(--text); background: #1a3050; }
.tab.active { color: var(--gold); border-color: #3d659c; background: #1a3050; }
.tab.locked { opacity: .4; }
.badge { position: absolute; top: -4px; right: -2px; background: var(--red); color: #fff; border-radius: 10px; font-size: .68rem; padding: 0 5px; animation: pulse 1.2s infinite; }

/* ---------- title / create */
.title-screen { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: radial-gradient(circle at 50% 40%, #1e4f8a, #0b1424 70%); }
.title-logo { text-align: center; }
.title-logo .logo-art { width: 160px; height: 160px; margin: 0 auto; font-size: 3.5rem; animation: bob 3s ease-in-out infinite; }
.title-logo h1 { font-size: 5rem; margin: 0; color: var(--gold); text-shadow: 4px 4px 0 #7c2d12, 8px 8px 0 #000; transform: rotate(-3deg); }
.subtitle { color: #bae6fd; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; }
.title-btns { display: flex; flex-direction: column; gap: 12px; min-width: 320px; }
.create { max-width: 1100px; margin: 0 auto; }
.intro { color: #bae6fd; font-size: 1.05rem; }
.name-row { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.1rem; }
.name-row input { background: #0a1424; border: 2px solid #3d659c; color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 1.1rem; font-family: inherit; width: 300px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pick { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; cursor: pointer; text-align: center; transition: transform .1s, border-color .15s; display: flex; flex-direction: column; gap: 4px; }
.pick .art { height: 70px; } .pick .art .emoji { font-size: 2.6rem; }
.pick .art img { object-fit: contain; }
.pick small { color: var(--muted); font-size: .75rem; }
.pick small.paths { color: #fde68a; }
.pick:hover { transform: translateY(-3px); border-color: #5b8bd0; }
.pick.sel { border-color: var(--gold); background: linear-gradient(#2a3f63, #1d3150); box-shadow: 0 0 18px rgba(251,191,36,.35); }
.create-summary { position: sticky; bottom: 0; margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: #0d1a2e; border: 2px solid var(--gold); border-radius: 14px; }

/* ---------- island */
.island-hero { border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; min-height: 290px; display: flex; align-items: flex-end; border: 3px solid #2c4a75; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ih-inner { padding: 22px; width: 100%; background: linear-gradient(transparent, rgba(5,10,20,.85)); }
.ih-inner h1 { font-size: 3rem; margin: 0; color: #fff; text-shadow: 3px 3px 0 #000; }
.ih-inner p { margin: 4px 0 14px; color: #e0f2fe; font-weight: 700; text-shadow: 1px 1px 2px #000; }
.ih-sea { font-weight: 900; color: #fde68a; text-shadow: 1px 1px 0 #000; }
.ih-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.explore { background: linear-gradient(#22c55e, #15803d); border-color: #86efac; font-size: 1.3rem; min-width: 220px; }
.btn.boss { background: linear-gradient(#ef4444, #7f1d1d); border-color: #fca5a5; font-size: 1.15rem; animation: glowRed 2s infinite; }
.btn.boss.done { animation: none; background: linear-gradient(#64748b, #334155); border-color: #94a3b8; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.hub-btn { background: linear-gradient(var(--panel2), var(--panel)); border: 2px solid var(--line); border-radius: 14px; color: var(--text); padding: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .1s; }
.hub-btn:hover { transform: translateY(-3px); border-color: var(--gold); }
.hb-icon { font-size: 2rem; } .hub-btn small { color: var(--muted); font-size: .72rem; }
.qline { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #23426d; }
.qline.done b { color: var(--green); }
.qprog { display: flex; align-items: center; gap: 8px; min-width: 170px; justify-content: flex-end; }
.bar { height: 8px; width: 110px; background: #0a1220; border-radius: 5px; overflow: hidden; }
.bar div { height: 100%; background: linear-gradient(90deg, #22c55e, #a3e635); }

/* ---------- quests */
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.quest-card { background: #f5e6c4; color: #3b2a12; border-radius: 6px; padding: 12px; border: 3px solid #b08a4d; box-shadow: 3px 4px 0 rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 6px; transform: rotate(-.4deg); }
.quest-card:nth-child(2n) { transform: rotate(.5deg); }
.quest-card.npc { background: #fff7d6; border-color: var(--gold2); }
.quest-card.daily { background: #ffe4cc; border-color: #fb923c; }
.qc-title { font-family: 'Bangers'; font-size: 1.3rem; color: #7c2d12; }
.qc-text { font-size: .85rem; } .qc-goal { font-weight: 800; font-size: .85rem; }
.qc-reward { font-size: .8rem; font-weight: 800; color: #14532d; }
.qc-giver { display: flex; align-items: center; gap: 6px; } .qc-giver .art { width: 34px; height: 34px; border-radius: 50%; background: #e7cf9a; overflow: hidden; font-size: .6rem; }

/* ---------- map */
.route { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.route-line { width: 26px; height: 4px; background: repeating-linear-gradient(90deg, #93c5fd 0 6px, transparent 6px 12px); }
.zone-node { width: 150px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.zone-node.open { cursor: pointer; } .zone-node.open:hover { border-color: var(--gold); transform: translateY(-3px); }
.zone-node.locked { opacity: .55; }
.zone-node.here { border-color: var(--green); box-shadow: 0 0 16px rgba(74,222,128,.4); }
.zn-icon { width: 64px; height: 64px; border-radius: 50%; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zone-node small { font-size: .72rem; } .here-tag { color: var(--green); font-weight: 900; }
.sea-event { text-align: center; } .se-ship { font-size: 4rem; animation: sail 2s ease-in-out infinite; }

/* ---------- cards */
.card { position: relative; width: 150px; min-height: 212px; border-radius: 12px; padding: 6px; background: linear-gradient(170deg, #f8fafc, #cbd5e1); color: #0f172a; border: 4px solid var(--rc, #94a3b8); display: flex; flex-direction: column; gap: 3px; box-shadow: 0 6px 14px rgba(0,0,0,.45); user-select: none; transition: transform .12s, box-shadow .12s; }
.card.t-attack { background: linear-gradient(170deg, #fff1f2, #fecdd3); }
.card.t-skill { background: linear-gradient(170deg, #eff6ff, #bfdbfe); }
.card.t-power { background: linear-gradient(170deg, #faf5ff, #e9d5ff); }
.card.r-starter { --rc: var(--starter); } .card.r-common { --rc: #94a3b8; } .card.r-uncommon { --rc: #22c55e; } .card.r-rare { --rc: #3b82f6; }
.card.r-epic { --rc: #a855f7; } .card.r-legendary { --rc: #f97316; box-shadow: 0 0 16px rgba(249,115,22,.5), 0 6px 14px rgba(0,0,0,.45); }
.card.r-mythic { --rc: #e11d48; box-shadow: 0 0 22px rgba(225,29,72,.6), 0 6px 14px rgba(0,0,0,.45); }
.c-cost { position: absolute; top: -10px; left: -10px; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#fde047, #ca8a04); color: #3b1d00; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.c-name { font-weight: 900; font-size: .85rem; text-align: center; padding: 0 4px 0 18px; line-height: 1.1; min-height: 2em; display: flex; align-items: center; justify-content: center; }
.c-art { height: 88px; border-radius: 8px; background: radial-gradient(#ffffff, #94a3b8); overflow: hidden; border: 2px solid rgba(0,0,0,.15); }
.c-art .emoji { font-size: 2.3rem; }
.c-type { text-align: center; font-size: .62rem; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; color: #475569; }
.c-text { font-size: .74rem; text-align: center; line-height: 1.25; flex: 1; }
.c-text .num { color: #b91c1c; font-size: .9rem; } .c-text i { color: #334155; } .kw { color: #7c3aed; font-weight: 800; }
.c-foot { text-align: center; font-size: .72rem; font-weight: 900; background: rgba(0,0,0,.08); border-radius: 6px; padding: 2px; }
.card.small { width: 138px; min-height: 196px; }
.card[data-act] { cursor: pointer; } .card[data-act]:hover { transform: translateY(-4px); }
.card.dim { opacity: .45; filter: grayscale(.6); }
.card-grid { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; }
.ult-preview { margin: 8px 0 14px; }
.compare { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 14px 0; } .compare .arrow { font-size: 2rem; }
.pick-cards { display: flex; gap: 18px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.card.pickable { animation: dealIn .4s backwards; } .card.pickable:nth-child(2) { animation-delay: .1s; } .card.pickable:nth-child(3) { animation-delay: .2s; }
.card.pickable:hover { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 24px var(--gold); }

/* ---------- items */
.item { position: relative; width: 62px; height: 62px; border-radius: 10px; background: radial-gradient(#2a4166, #142540); border: 3px solid var(--rc, #475569); cursor: pointer; box-shadow: inset 0 0 12px rgba(0,0,0,.5); }
.item .i-icon { position: absolute; inset: 4px; } .item .emoji { font-size: 1.8rem; }
.item .i-lv { position: absolute; bottom: -2px; right: 2px; font-size: .65rem; font-weight: 900; text-shadow: 1px 1px 0 #000; }
.item.r-epic, .item.r-legendary, .item.r-mythic { box-shadow: 0 0 12px var(--rc), inset 0 0 12px rgba(0,0,0,.5); }
.item.r-legendary, .item.r-mythic { animation: shimmer 2s infinite; }
.item.empty { display: flex; align-items: center; justify-content: center; opacity: .5; font-size: 1.6rem; cursor: default; }
.item.selected { outline: 3px solid #fff; outline-offset: 2px; }
.item.better::after { content: '▲'; position: absolute; top: -4px; left: 2px; color: var(--green); font-size: .8rem; text-shadow: 1px 1px 0 #000; }
.inv-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.item-detail { background: #0d1a2e; border: 2px solid var(--rc); border-radius: 10px; padding: 10px 12px; margin: 8px 0; text-align: left; }
.item-detail ul { margin: 6px 0; padding-left: 18px; font-size: .88rem; }
.id-name { font-weight: 900; font-size: 1.05rem; }
.sel-detail { margin-top: 10px; }
.gear-row { display: flex; gap: 16px; } .gear-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- hero */
.hero { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }
.poster { background: #f1dfb3; color: #3b2a12; padding: 14px; border-radius: 4px; text-align: center; box-shadow: 4px 6px 0 rgba(0,0,0,.4); border: 2px solid #b08a4d; }
.p-wanted { font-size: 3.4rem; line-height: 1; color: #3b2a12; }
.poster-art { height: 190px; background: #d9c08a; border: 3px solid #3b2a12; margin: 8px 0; font-size: 2rem; }
.poster-art .emoji { font-size: 6rem; }
.p-doa { font-weight: 900; letter-spacing: 2px; } .p-name { font-family: 'Bangers'; font-size: 2rem; }
.p-bounty { font-size: 2rem; } .p-rank { font-weight: 800; font-style: italic; }
table.stats { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.stats td { padding: 3px 4px; border-bottom: 1px solid #23426d; } table.stats td:last-child { text-align: right; font-weight: 900; }
.fruit-box { display: flex; gap: 12px; align-items: flex-start; } .fruit-art { width: 90px; height: 90px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(var(--fc), transparent 70%); }
.fruit-art .emoji { font-size: 3rem; }
.stash { margin-top: 10px; } .stash-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.r-common-t { color: var(--common); } .r-uncommon-t { color: var(--uncommon); } .r-rare-t { color: var(--rare); } .r-epic-t { color: var(--epic); } .r-legendary-t { color: var(--legendary); } .r-mythic-t { color: var(--mythic); }

/* ---------- skills / trees */
.sp-pill { font-size: 1rem; background: var(--gold); color: #3b1d00; border-radius: 20px; padding: 2px 12px; vertical-align: middle; }
.tree-rows { display: flex; flex-direction: column; gap: 4px; }
.tree-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tree-arrow { text-align: center; color: #3d659c; font-size: .8rem; }
.node { display: flex; gap: 10px; align-items: center; width: 330px; background: #0f1d33; border: 2px solid #23426d; border-radius: 12px; padding: 8px 10px; position: relative; }
.node .n-icon { font-size: 1.8rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #1a3050; flex-shrink: 0; }
.n-body { flex: 1; font-size: .85rem; } .n-desc { color: #cbd5e1; font-size: .78rem; } .n-desc .num { color: #fca5a5; }
.n-kind { font-size: .6rem; background: #334155; padding: 1px 5px; border-radius: 5px; vertical-align: middle; }
.n-cost { font-weight: 900; color: var(--gold); white-space: nowrap; }
.node.owned { border-color: var(--green); background: linear-gradient(#123524, #0f1d33); }
.node.available { border-color: var(--gold); cursor: pointer; animation: glowGold 1.6s infinite; } .node.available:hover { transform: scale(1.03); }
.node.locked, .node.sealed { opacity: .45; } .node.poor { opacity: .75; }
.advance { background: linear-gradient(135deg, #3b2a00, #1b2a45); border: 3px solid var(--gold); border-radius: 16px; padding: 12px 16px; margin-bottom: 16px; animation: glowGold 2s infinite; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.adv-card { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.adv-card .art { height: 80px; } .adv-card .art .emoji { font-size: 3rem; }
.adv-card.secret { border-color: #a855f7; background: linear-gradient(#2e1650, var(--panel)); }
.adv-card.locked { opacity: .55; } .secret-tag { color: #c084fc; font-weight: 900; letter-spacing: 2px; }
.haki-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px; }
.haki-path { display: flex; flex-direction: column; align-items: center; } .haki-path .node { width: 100%; }

/* ---------- crew / shop */
.crew-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.crew-card { width: 170px; background: var(--panel); border: 3px solid var(--rc, var(--line)); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.crew-card .art { height: 70px; } .crew-card .art .emoji { font-size: 2.6rem; }
.crew-card.legend { background: linear-gradient(#4a2a00, var(--panel)); box-shadow: 0 0 20px rgba(251,146,60,.5); }
.crew-card.empty { border-style: dashed; color: var(--muted); justify-content: center; min-height: 160px; }
.cons-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cons-card { width: 150px; background: #0f1d33; border: 2px solid #23426d; border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.cons-card .art { height: 48px; } .cons-card small { font-size: .72rem; }
.specials { display: flex; flex-direction: column; gap: 10px; }
.special { display: flex; align-items: center; gap: 14px; } .special > div { flex: 1; } .big-icon { font-size: 2.6rem; }
.special.fruitbox { background: linear-gradient(90deg, #3b0764, transparent); border-radius: 12px; padding: 8px; }
.settings .toggle { display: block; margin: 8px 0; font-weight: 800; cursor: pointer; }
.savebox { width: 100%; height: 120px; background: #0a1424; color: var(--text); border: 2px solid #3d659c; border-radius: 10px; font-family: monospace; font-size: .7rem; }

/* ---------- modal */
.modal-bg { position: fixed; inset: 0; background: rgba(2,6,15,.78); display: flex; align-items: center; justify-content: center; z-index: 50; animation: fadeIn .2s; backdrop-filter: blur(3px); }
.modal { background: linear-gradient(180deg, #1b3256, #0f1d33); border: 3px solid var(--gold); border-radius: 20px; padding: 22px 26px; max-width: 760px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: popIn .3s cubic-bezier(.2,1.6,.4,1); }
.vic-title { font-size: 4rem; margin: 0; color: var(--gold); text-shadow: 3px 3px 0 #7c2d12, 6px 6px 0 #000; animation: popIn .5s cubic-bezier(.2,1.8,.4,1); }
.boss-win .modal { border-color: #f43f5e; box-shadow: 0 0 60px rgba(244,63,94,.5); }
.reward-row { display: flex; justify-content: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.rw { background: #0d1a2e; border: 2px solid #2c4a75; border-radius: 14px; padding: 8px 18px; display: flex; flex-direction: column; align-items: center; font-size: 1.4rem; min-width: 120px; }
.rw b { font-size: 1.5rem; color: var(--gold); } .rw small { font-size: .72rem; color: var(--muted); }
.loot-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.loot-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 120px; animation: lootIn .6s backwards cubic-bezier(.2,1.6,.4,1); }
.loot-drop .item { width: 74px; height: 74px; }
.loot-drop small { font-weight: 800; font-size: .75rem; }
.bonus { color: #a5f3fc; font-weight: 800; margin: 4px 0; }
.quest-upd { background: #0d1a2e; border-radius: 10px; padding: 8px; margin: 8px 0; font-size: .85rem; color: #fde68a; text-align: left; }
.vic-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.defeat h1 { color: #f87171; font-size: 3.5rem; } .tip { color: #fde68a; }
.turnin h2 { font-size: 2.4rem; color: var(--gold); }
.fruit-reveal { position: relative; overflow: hidden; }
.fruit-reveal .fruit-big { width: 160px; height: 160px; margin: 0 auto; border-radius: 50%; background: radial-gradient(var(--fc), transparent 70%); animation: bob 2s ease-in-out infinite; }
.fruit-reveal .fruit-big .emoji { font-size: 6rem; }
.fruit-reveal h2 { font-size: 3rem; color: var(--fc); text-shadow: 2px 2px 0 #000; margin: 0; }
.fruit-reveal h3 { font-size: 2rem; }
.fr-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.06) 0 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; pointer-events: none; }
.fr-cards { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }

/* ---------- battle */
.battle { height: 100vh; display: flex; flex-direction: column; background-size: cover; background-position: center; }
.b-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
.b-zone { background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: 10px; font-weight: 900; }
.boss-tag { background: #b91c1c; padding: 4px 12px; border-radius: 10px; font-family: 'Bangers'; font-size: 1.2rem; letter-spacing: 2px; animation: pulse 1.2s infinite; }
.arena { flex: 1; display: grid; grid-template-columns: 1fr 160px 1fr; align-items: end; padding: 0 5vw 10px; min-height: 0; }
.fighter { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.f-sprite { width: min(26vh, 240px); height: min(26vh, 240px); position: relative; filter: drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.f-sprite .sprite .emoji { font-size: min(17vh, 150px); }
.f-sprite .sprite img { object-fit: contain; }
.fighter.player .f-sprite .sprite { animation: idle 2.4s ease-in-out infinite; }
.fighter.enemy .f-sprite .sprite { animation: idle 2s ease-in-out infinite reverse; }
.fighter.is-boss .f-sprite { width: min(34vh, 320px); height: min(34vh, 320px); }
.fighter.is-boss .f-sprite .sprite .emoji { font-size: min(23vh, 210px); }
.fighter.enraged .f-sprite { filter: drop-shadow(0 0 18px #ef4444) drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.fighter.is-elite .f-name { color: var(--gold); }
.f-name { font-weight: 900; font-size: 1.1rem; background: rgba(0,0,0,.55); padding: 2px 12px; border-radius: 10px; text-shadow: 1px 1px 0 #000; }
.f-name small { color: #fde68a; } .f-title { font-size: .75rem; font-style: italic; color: #e2e8f0; text-shadow: 1px 1px 2px #000; }
.trait { cursor: help; font-size: .9rem; }
.hpbar { position: relative; width: min(320px, 38vw); height: 22px; background: #200a0a; border: 2px solid #000; border-radius: 12px; overflow: visible; }
.hpbar .hp-fill { height: 100%; border-radius: 10px; background: linear-gradient(#4ade80, #16a34a); transition: width .35s cubic-bezier(.3,1.4,.5,1); }
.hpbar.en .hp-fill { background: linear-gradient(#f87171, #b91c1c); }
.hpbar span { position: absolute; inset: 0; text-align: center; font-weight: 900; font-size: .8rem; line-height: 19px; text-shadow: 1px 1px 0 #000; }
.block-badge { position: absolute; left: -16px; top: -8px; background: radial-gradient(#93c5fd, #1d4ed8); border: 2px solid #fff; border-radius: 10px; padding: 1px 6px; font-weight: 900; font-size: .8rem; animation: popIn .25s; }
.statuses { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; min-height: 26px; }
.status { background: rgba(0,0,0,.6); border: 2px solid; border-radius: 8px; padding: 0 5px; font-size: .9rem; cursor: help; animation: popIn .25s; }
.status.buff { border-color: #60a5fa; } .status.debuff { border-color: #f87171; }
.status b { font-size: .75rem; margin-left: 2px; }
.intent { background: rgba(0,0,0,.7); border: 2px solid #fff; border-radius: 12px; padding: 4px 12px; font-weight: 900; font-size: 1.1rem; animation: bob 1.6s ease-in-out infinite; text-align: center; }
.intent small { display: block; font-size: .7rem; color: #cbd5e1; }
.intent.stunned { border-color: #facc15; }
.it-atk { color: #f87171; } .it-def { color: #93c5fd; } .it-heal { color: #4ade80; } .it-buff { color: #a5f3fc; } .it-debuff { color: #fca5a5; }
.mid { display: flex; align-items: center; justify-content: center; height: 100%; }
.combo { font-size: 2.6rem; color: #fde047; text-align: center; text-shadow: 3px 3px 0 #b45309, 5px 5px 0 #000; line-height: .9; transform: rotate(-8deg); }
.combo small { font-size: 1rem; color: #fff; }
.hud { display: grid; grid-template-columns: 150px 1fr 170px; align-items: end; gap: 10px; padding: 8px 14px 12px; background: linear-gradient(transparent, rgba(3,8,18,.92) 30%); }
.hud-left, .hud-right { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.energy { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef08a, #eab308 50%, #a16207); border: 4px solid #fff; display: flex; align-items: center; justify-content: center; color: #3b1d00; box-shadow: 0 0 20px rgba(250,204,21,.6); }
.energy b { font-size: 2.8rem; } .energy small { font-weight: 900; }
.piles { display: flex; gap: 8px; font-size: .8rem; font-weight: 800; }
.cons-row { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cons-btn { position: relative; background: #1e3557; border: 2px solid #3d659c; border-radius: 10px; font-size: 1.3rem; width: 42px; height: 42px; cursor: pointer; }
.cons-btn b { position: absolute; bottom: -4px; right: -4px; font-size: .7rem; background: var(--gold); color: #000; border-radius: 6px; padding: 0 4px; }
.hand { display: flex; justify-content: center; align-items: flex-end; min-height: 230px; }
.hand .card { margin: 0 -14px; transition: transform .15s, margin .15s; transform-origin: bottom center; }
.hand .card:nth-child(1) { transform: rotate(-8deg) translateY(14px); } .hand .card:nth-child(2) { transform: rotate(-4deg) translateY(5px); }
.hand .card:nth-last-child(1) { transform: rotate(8deg) translateY(14px); } .hand .card:nth-last-child(2) { transform: rotate(4deg) translateY(5px); }
.hand .card:only-child { transform: none; }
.hand .card.playable:hover { transform: translateY(-34px) scale(1.15) rotate(0); z-index: 10; margin: 0 8px; box-shadow: 0 0 26px #fde047, 0 10px 20px rgba(0,0,0,.6); }
.hand .card.unplayable { filter: brightness(.6) grayscale(.4); }
.hand .card.playable .c-cost { animation: pulse 1.5s infinite; }
.card.flying { position: fixed; z-index: 40; pointer-events: none; margin: 0; }
.ult-btn { position: relative; width: 120px; height: 120px; border-radius: 50%; border: 4px solid #64748b; background: #0f172a; color: #fff; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ult-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(#a855f7, #6d28d9); transition: height .4s; }
.ult-icon { position: relative; font-size: 2.4rem; } .ult-btn small { position: relative; font-weight: 900; font-size: .7rem; text-shadow: 1px 1px 0 #000; padding: 0 6px; }
.ult-btn.ready { border-color: #fde047; animation: ultReady 1s infinite; }
.ult-btn.ready .ult-fill { background: linear-gradient(#fde047, #f97316); }
.endturn { width: 150px; background: linear-gradient(#f97316, #c2410c); border-color: #fdba74; }

/* ---------- FX */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 59; }
#vfx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 57; }
.float { position: absolute; transform: translate(-50%, -50%); font-family: 'Bangers'; font-size: 2rem; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; animation: floatUp 1.2s ease-out forwards; white-space: nowrap; letter-spacing: 1px; }
.float.big { font-size: 3rem; } .float.crit { font-size: 3.4rem; animation: floatCrit 1.2s ease-out forwards; }
.screen-flash { position: fixed; inset: 0; z-index: 58; pointer-events: none; animation: flash .35s ease-out forwards; }
.banner { position: fixed; left: 0; right: 0; top: 30%; z-index: 70; text-align: center; pointer-events: none; animation: bannerIn 1.8s ease-out forwards; background: linear-gradient(90deg, transparent, rgba(0,0,0,.75) 20%, rgba(0,0,0,.75) 80%, transparent); padding: 14px 0; }
.banner-main { font-size: 4rem; text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0,0,0,.5); }
.banner-sub { font-weight: 900; font-size: 1.1rem; color: #fff; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: #0f1d33; border: 2px solid var(--gold); border-radius: 12px; padding: 10px 14px; font-weight: 800; max-width: 360px; animation: toastIn .3s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.toast.out { opacity: 0; transform: translateX(30px); transition: all .4s; }

.shake { animation: shake .3s; } .shake-big { animation: shakeBig .5s; }
.hit { animation: hitFlash .3s; } .dodge { animation: dodgeAnim .4s; } .lunge { animation: lunge .35s; }
.die { animation: die 1.2s forwards; } .pop { animation: popIn .3s; } .nope { animation: shake .3s; }

@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
@keyframes floatCrit { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-10deg); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -240%) scale(1.1) rotate(-6deg); } }
@keyframes flash { from { opacity: .55; } to { opacity: 0; } }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(2); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px); } }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -1px); } }
@keyframes shakeBig { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-14px, 6px); } 25% { transform: translate(12px, -8px); } 40% { transform: translate(-10px, 8px); } 55% { transform: translate(8px, -4px); } 70% { transform: translate(-5px, 3px); } 85% { transform: translate(3px, -2px); } }
@keyframes hitFlash { 0% { filter: brightness(3) saturate(0); transform: translateX(10px) scale(.95); } 100% { filter: none; transform: none; } }
@keyframes dodgeAnim { 50% { transform: translateX(-40px) skewX(-10deg); opacity: .5; } }
@keyframes lunge { 50% { transform: translateX(-60px) scale(1.1); } }
@keyframes die { 0% { transform: none; } 20% { transform: rotate(-10deg) scale(1.1); filter: brightness(3); } 100% { transform: translateY(40px) rotate(25deg) scale(.6); opacity: 0; filter: grayscale(1); } }
@keyframes idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes dealIn { from { opacity: 0; transform: translateY(60px) rotate(10deg); } }
@keyframes lootIn { 0% { opacity: 0; transform: translateY(-40px) scale(.3) rotate(-30deg); } 100% { opacity: 1; } }
@keyframes shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes glowGold { 0%,100% { box-shadow: 0 0 6px rgba(251,191,36,.3); } 50% { box-shadow: 0 0 20px rgba(251,191,36,.8); } }
@keyframes glowRed { 0%,100% { box-shadow: 0 0 6px rgba(239,68,68,.3); } 50% { box-shadow: 0 0 22px rgba(239,68,68,.8); } }
@keyframes ultReady { 0%,100% { box-shadow: 0 0 10px #fde047; transform: scale(1); } 50% { box-shadow: 0 0 34px #f97316; transform: scale(1.06); } }
@keyframes sail { 0%,100% { transform: rotate(-6deg) translateX(-10px); } 50% { transform: rotate(6deg) translateX(10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px), (max-height: 700px) {
  .create-summary { position: static; flex-direction: column; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hud { grid-template-columns: 1fr; } .hand { min-height: 200px; } .hand .card { width: 120px; min-height: 180px; }
  .arena { grid-template-columns: 1fr 60px 1fr; padding: 0 10px; }
  .tabs { margin-left: 0; }
}

/* ---------- generated art (transparent cutouts) */
.f-sprite .sprite img { object-fit: contain; filter: drop-shadow(0 14px 10px rgba(0,0,0,.55)); }
.fighter.enemy .f-sprite .sprite img { transform: scaleX(1); }
.fighter.is-boss .f-sprite .sprite img { filter: drop-shadow(0 0 18px rgba(239,68,68,.55)) drop-shadow(0 14px 10px rgba(0,0,0,.55)); }
.item .i-icon img, .c-art img, .cons-card .art img { object-fit: contain; }
.pick .art img, .adv-card .art img, .crew-card .art img, .tb-portrait .art img, .poster-art img { object-fit: contain; }
.zn-art img { border-radius: 50%; object-fit: cover; }

/* ---------- styles v2: slots, hybrids, allegiance, deck profile, stances */
.slot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 16px; }
.slot { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; position: relative; min-height: 90px; }
.slot small { display: block; font-size: .72rem; }
.slot .slot-art { width: 70px; height: 70px; flex-shrink: 0; }
.slot .slot-art .emoji { font-size: 2.4rem; }
.slot .slot-art img { object-fit: contain; }
.slot.filled { border-color: #3d659c; }
.slot.open { border: 2px dashed var(--gold); cursor: pointer; animation: glowGold 1.8s infinite; }
.slot.open:hover { background: #22385c; }
.slot.locked { opacity: .5; }
.slot .xbtn { position: absolute; top: 6px; right: 8px; }
.spec-panel.ready { border-color: var(--gold); animation: glowGold 2s infinite; }
.picker { border-color: var(--gold); }
.pick.fac { border-color: color-mix(in srgb, var(--fc) 50%, var(--line)); }
.pick.fac.sel { border-color: var(--fc); box-shadow: 0 0 18px color-mix(in srgb, var(--fc) 50%, transparent); }
.pick .big-icon { font-size: 2.6rem; }
.rank-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.rank { background: #0f1d33; border: 2px solid #23426d; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: .6; }
.rank.got { opacity: 1; border-color: var(--green); background: linear-gradient(#123524, #0f1d33); }
.rank small { font-size: .7rem; color: var(--muted); }
.rank .perk { color: #fde68a; }
.deck-profile .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { background: #0f1d33; border: 2px solid #2c4a75; color: var(--text); border-radius: 20px; padding: 4px 12px; cursor: pointer; font-weight: 800; font-size: .8rem; }
.chip b { color: var(--gold); margin-left: 4px; }
.chip.on { border-color: var(--gold); background: #2a3f63; }
.deck-ult { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.card.r-token { --rc: #fde68a; background: linear-gradient(170deg, #fffbeb, #fde68a); }
.c-text .stance-kw { color: #7c3aed; }
.stance-badge { background: color-mix(in srgb, var(--sc) 30%, #0b1424); border: 2px solid var(--sc); color: #fff; border-radius: 10px; padding: 1px 10px; font-weight: 900; font-size: .8rem; box-shadow: 0 0 12px var(--sc); animation: popIn .3s; }
.powers-row { display: flex; gap: 4px; font-size: 1.1rem; background: rgba(0,0,0,.45); border-radius: 8px; padding: 0 6px; }
@media (max-width: 900px) { .slot-row { grid-template-columns: 1fr; } .rank-ladder { grid-template-columns: repeat(2, 1fr); } }

/* ================= JRPG presentation ================= */
#main.enter { animation: screenIn .35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.02); filter: blur(4px); } }
.f-sprite { transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.fighter.player .f-sprite.pose-dash { transform: translateX(26vw) scale(1.08); transition: transform .16s ease-in; z-index: 5; }
.fighter.enemy .f-sprite.pose-dash { transform: translateX(-26vw) scale(1.08); transition: transform .18s ease-in; z-index: 5; }
.fighter.player .f-sprite.pose-cast { transform: translateY(-14px) scale(1.04); filter: drop-shadow(0 0 18px #7dd3fc); }
.fighter.player .f-sprite.pose-win { animation: winJump .7s ease-out 2; }
@keyframes winJump { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-50px) rotate(-4deg); } }
.arena.hitstop .f-sprite, .arena.hitstop .sprite { animation-play-state: paused !important; }
.arena.hitstop { filter: contrast(1.25) saturate(1.3); }
.fighter { position: relative; }
.stance-aura { position: absolute; bottom: 92px; left: 50%; width: 220px; height: 46px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--sc) 70%, transparent) 0%, transparent 70%); box-shadow: 0 0 40px var(--sc); animation: auraPulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes auraPulse { 50% { opacity: .55; transform: translateX(-50%) scale(1.15); } }
.constructs { position: absolute; left: -10px; top: 30%; display: flex; flex-direction: column; gap: 4px; font-size: 1.6rem; filter: drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.constructs b { font-size: .8rem; background: #0b1424; border-radius: 6px; padding: 0 4px; margin-left: -6px; vertical-align: bottom; }
.fighter.st-burn .sprite img, .fighter.st-burn .sprite .emoji { filter: drop-shadow(0 0 14px #ff6b1a) drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.fighter.st-poison .sprite { filter: hue-rotate(40deg) saturate(1.3); }
.fighter.st-stun .sprite { animation: stunWobble 1s ease-in-out infinite !important; }
@keyframes stunWobble { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.fighter.st-intangible .sprite { opacity: .55; filter: blur(1px); }
.fighter.st-weak .sprite { filter: grayscale(.5) brightness(.85); }
.fighter.st-haki .sprite img { filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 4px #ef4444); }
.battle { position: relative; }
.battle.boss-fight::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(220,38,38,.35); animation: bossVignette 2.5s ease-in-out infinite; }
@keyframes bossVignette { 50% { box-shadow: inset 0 0 180px rgba(220,38,38,.55); } }
.hand .card.retain { box-shadow: 0 0 18px #a78bfa, 0 6px 14px rgba(0,0,0,.45); }

/* overlays */
.jrpg-overlay { position: fixed; inset: 0; z-index: 66; pointer-events: none; overflow: hidden; }
.jrpg-overlay.out { animation: ovOut .3s forwards; }
@keyframes ovOut { to { opacity: 0; } }
.encounter .enc-iris { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); animation: iris .7s ease-out forwards; }
@keyframes iris { from { width: 0; height: 0; box-shadow: 0 0 0 200vmax #000; } to { width: 300vmax; height: 300vmax; box-shadow: 0 0 0 0 #000; } }
.enc-text { position: absolute; top: 42%; width: 100%; text-align: center; font-family: "Bangers"; font-size: 5rem; color: #fde047; text-shadow: 4px 4px 0 #b91c1c, 8px 8px 0 #000; animation: encText .9s ease-out forwards; letter-spacing: 4px; }
@keyframes encText { 0% { transform: scale(3) rotate(-8deg); opacity: 0; } 25% { transform: scale(1) rotate(-4deg); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1) rotate(-4deg); } }
.boss-intro { background: rgba(0,0,0,.55); animation: fadeIn .2s; }
.warn-bar { position: absolute; left: 0; right: 0; height: 54px; background: repeating-linear-gradient(-45deg, #facc15 0 26px, #111 26px 52px); overflow: hidden; display: flex; align-items: center; }
.warn-bar span { white-space: nowrap; font-family: "Bangers"; font-size: 2.2rem; color: #ef4444; text-shadow: 2px 2px 0 #000, -2px -2px 0 #fff; animation: warnScroll 2.4s linear infinite; padding-left: 100%; }
.warn-bar.top { top: 12%; } .warn-bar.bottom { bottom: 12%; } .warn-bar.bottom span { animation-direction: reverse; }
@keyframes warnScroll { to { transform: translateX(-100%); } }
.bi-plate { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 28px; animation: plateIn .5s cubic-bezier(.2,1.4,.4,1) .2s backwards; }
.bi-plate img { width: 260px; height: 260px; object-fit: contain; filter: drop-shadow(0 0 30px #ef4444); }
.bi-emoji { font-size: 9rem; }
.bi-title { font-weight: 900; color: #fca5a5; letter-spacing: 4px; text-transform: uppercase; font-size: 1.1rem; text-shadow: 2px 2px 0 #000; }
.bi-name { font-family: "Bangers"; font-size: 4.5rem; color: #fff; text-shadow: 4px 4px 0 #b91c1c, 8px 8px 0 #000; line-height: 1; }
@keyframes plateIn { from { transform: translate(-60vw,-50%); opacity: 0; } }
.turn-banner .tb-band { position: absolute; top: 34%; left: 0; right: 0; height: 70px; display: flex; align-items: center; justify-content: center; animation: tbIn .9s ease-in-out forwards; }
.turn-banner.player .tb-band { background: linear-gradient(90deg, transparent, rgba(37,99,235,.85) 20%, rgba(37,99,235,.85) 80%, transparent); }
.turn-banner.enemy .tb-band { background: linear-gradient(90deg, transparent, rgba(185,28,28,.85) 20%, rgba(185,28,28,.85) 80%, transparent); }
.tb-band span { font-family: "Bangers"; font-size: 3rem; color: #fff; letter-spacing: 6px; text-shadow: 3px 3px 0 #000; }
@keyframes tbIn { 0% { transform: translateX(-100%) skewX(-20deg); } 25% { transform: translateX(0) skewX(-8deg); } 75% { transform: translateX(0) skewX(-8deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-20deg); opacity: 0; } }
.cutin { background: rgba(0,0,0,.35); }
.ci-band { position: absolute; top: 22%; left: -10%; right: -10%; height: 56%; transform: skewY(-8deg); background: linear-gradient(90deg, #7c2d12, #f59e0b 40%, #fde047 50%, #f59e0b 60%, #7c2d12); box-shadow: 0 0 60px #f59e0b; animation: ciBand .35s ease-out; overflow: hidden; }
.ci-band::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 4px, transparent 4px 40px); animation: ciLines .3s linear infinite; }
@keyframes ciBand { from { transform: skewY(-8deg) scaleY(0); } }
@keyframes ciLines { to { background-position: -40px 0; } }
.ci-art { position: absolute; top: 14%; left: 6%; width: min(48vh, 440px); height: min(70vh, 600px); animation: ciArt 1.5s cubic-bezier(.2,1,.3,1) forwards; }
.ci-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 30px #fff) drop-shadow(10px 10px 0 rgba(0,0,0,.5)); }
.ci-art span { font-size: 14rem; }
@keyframes ciArt { 0% { transform: translateX(-80vw) scale(1.3); } 25% { transform: translateX(0) scale(1); } 85% { transform: translateX(4vw) scale(1.02); } 100% { transform: translateX(120vw) scale(1); } }
.ci-name { position: absolute; top: 40%; right: 6%; text-align: right; font-family: "Bangers"; font-size: clamp(3rem, 7vw, 6.5rem); color: #fff; text-shadow: 4px 4px 0 #7c2d12, 8px 8px 0 #000; animation: ciName 1.5s ease-out forwards; line-height: .95; max-width: 55%; }
.ci-name small { display: block; font-size: 1.4rem; letter-spacing: 8px; color: #7c2d12; text-shadow: none; }
@keyframes ciName { 0% { transform: translateX(80vw) skewX(-15deg); } 25% { transform: translateX(0) skewX(-8deg); } 85% { opacity: 1; } 100% { transform: translateX(-10vw) skewX(-8deg); opacity: 0; } }

/* cards: bigger art + holo shine */
.card { width: 158px; min-height: 230px; overflow: hidden; }
.card.small { width: 146px; min-height: 214px; }
.c-art img { object-fit: cover; border-radius: 6px; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); transform: translateX(-120%); transition: transform .5s; pointer-events: none; }
.card[data-act]:hover::after, .card.pickable:hover::after { transform: translateX(120%); }
.card.r-legendary .c-art, .card.r-mythic .c-art { box-shadow: 0 0 12px var(--rc) inset; }
.hand .card { margin: 0 -18px; }

/* island hub ambience */
.island-hero { position: relative; animation: kenburns 30s ease-in-out infinite alternate; background-size: 115% auto !important; }
@keyframes kenburns { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
.island-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, rgba(255,255,220,.35), transparent 55%); animation: sunRays 6s ease-in-out infinite; }
@keyframes sunRays { 50% { opacity: .5; } }
.settings .slider { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-weight: 800; }
.settings .slider input { flex: 1; max-width: 260px; accent-color: #fbbf24; }

/* ---------------- Bounty Office */
.seals { font-size: 1.1rem; color: #fde68a; background: #2a1d05; border: 2px solid var(--gold2); border-radius: 20px; padding: 2px 12px; margin-left: 10px; vertical-align: middle; text-shadow: none; }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0; }
.sk-day { background: #0d1a2e; border: 2px solid var(--line); border-radius: 10px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.sk-day span { font-size: 1.6rem; }
.sk-day small { font-size: .68rem; color: var(--muted); overflow-wrap: anywhere; }
.sk-day.got { opacity: .55; border-color: #166534; }
.sk-day.today { border-color: var(--gold); background: #2a1d05; box-shadow: 0 0 14px rgba(251,191,36,.45); }
.wanted-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 12px; }
.wanted-poster { position: relative; background: #f1dfb3; color: #3b2a12; padding: 10px 12px 12px; border: 2px solid #b08a4d; border-radius: 4px; text-align: center; box-shadow: 4px 6px 0 rgba(0,0,0,.4); transform: rotate(-1deg); transition: transform .15s; }
.wanted-poster:nth-child(2) { transform: rotate(1deg); }
.wanted-poster:hover { transform: rotate(0) scale(1.02); }
.wp-head { font-size: 2.2rem; font-weight: 900; letter-spacing: 2px; line-height: 1; }
.wp-art { height: 130px; background: #d9c08a; border: 3px solid #3b2a12; margin: 6px 0; }
.wp-art .emoji { font-size: 4rem; }
.wp-art img { width: 100%; height: 100%; object-fit: cover; }
.wp-stars { color: #b45309; font-size: 1.2rem; letter-spacing: 2px; }
.wp-stars span { color: #d6c08e; }
.wp-name { font-weight: 900; font-size: 1.05rem; }
.wp-info, .wp-reward { font-size: .8rem; }
.wp-mod { font-size: .75rem; color: #7c2d12; margin: 4px 0; }
.wp-bounty { font-size: 1.3rem; font-weight: 900; margin: 4px 0; }
.wanted-poster .btn { width: 100%; }
.wanted-poster.claimed { filter: grayscale(.6); }
.wp-stamp { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 1.8rem; font-weight: 900; color: #b91c1c; border: 4px solid #b91c1c; padding: 2px 10px; border-radius: 6px; background: rgba(241,223,179,.85); }
.qline.claimed { opacity: .55; }
.seal-grid, .part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.seal-item, .ship-part { display: flex; align-items: center; gap: 10px; background: #0d1a2e; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.seal-item > div, .ship-part > div { flex: 1; min-width: 0; }
.seal-item .big-icon, .ship-part .big-icon { font-size: 2rem; }
.wanted-bonus { color: var(--gold); font-weight: 900; }
.login-reward { text-align: center; }
.lr-big { font-size: 4.5rem; animation: popIn .5s ease-out; }
.volley { color: #fdba74; font-weight: 700; }

/* ---------------- Shipyard */
.ship-hero { display: flex; gap: 16px; align-items: center; background: linear-gradient(180deg, #123a63, #0b2240); border: 2px solid var(--line); border-radius: 14px; padding: 14px; }
.ship-art { width: 140px; height: 140px; flex: none; border-radius: 12px; background: radial-gradient(#2c6aa5, #0b2240); display: flex; align-items: center; justify-content: center; }
.ship-art .emoji { font-size: 5rem; }
.ship-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.ship-tiers { display: flex; align-items: center; margin: 14px 0; overflow-x: auto; padding-bottom: 4px; }
.ship-tier { display: flex; flex-direction: column; align-items: center; min-width: 74px; opacity: .45; }
.ship-tier span { font-size: 1.8rem; }
.ship-tier small { font-size: .7rem; text-align: center; }
.ship-tier.past { opacity: .8; }
.ship-tier.cur { opacity: 1; color: var(--gold); transform: scale(1.15); }
.st-line { flex: 1; min-width: 12px; height: 3px; background: var(--line); }
.gates { margin: 0; padding-left: 18px; }

/* ---------------- Crew levels, fruit path, encyclopedia */
.bar.thin { height: 5px; width: 100%; }
.crew-card .assist { font-size: .75rem; background: #0d1a2e; border-radius: 8px; padding: 3px 6px; color: var(--muted); }
.crew-card .assist.on { color: #fde68a; border: 1px solid var(--gold2); }
.fruit-path { margin: 6px 0; font-size: .85rem; display: flex; flex-direction: column; gap: 2px; }
.fruit-path > div { color: var(--muted); }
.fruit-path > div.got { color: #fde68a; }
.fruit-dex { margin-top: 12px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.dex-fruit { background: #0d1a2e; border: 2px solid var(--line); border-radius: 10px; padding: 4px; text-align: center; opacity: .5; }
.dex-fruit.seen { opacity: 1; }
.dex-fruit.r-rare { border-color: var(--rare); } .dex-fruit.r-epic { border-color: var(--epic); }
.dex-fruit.r-legendary { border-color: var(--legendary); } .dex-fruit.r-mythic { border-color: var(--mythic); }
.dex-fruit .dex-art { height: 40px; } .dex-fruit .dex-art img { height: 100%; object-fit: contain; }
.dex-fruit .emoji { font-size: 1.6rem; }
.dex-fruit small { display: block; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .streak { grid-template-columns: repeat(4, 1fr); }
  .ship-hero { flex-direction: column; text-align: center; }
}

/* ---------------- Smithy / Market economy */
.tabs-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.enh-list { display: flex; flex-direction: column; gap: 8px; }
.enh-row { display: flex; align-items: center; gap: 12px; background: #0d1a2e; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.enh-info { flex: 1; min-width: 0; }
.tag { font-size: .7rem; background: #14532d; color: #bbf7d0; border-radius: 6px; padding: 1px 6px; }
.item { position: relative; }
.i-plus { position: absolute; top: 2px; left: 4px; font-size: .75rem; font-weight: 900; color: #fde68a; text-shadow: 1px 1px 0 #000; }
.plus { color: #fde68a; }
.iron { color: #93c5fd; font-weight: 900; }
.card-sold { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 2px dashed var(--line); border-radius: 12px; color: var(--muted); font-weight: 900; }

/* ---------------- Story scenes */
.scene { text-align: center; max-width: 560px; margin: 0 auto; }
.sc-icon { font-size: 4rem; line-height: 1.1; animation: popIn .4s ease-out; }
.scene .sc-art { width: 150px; height: 150px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); background: radial-gradient(#2c4a75, #0b1527); display: flex; align-items: center; justify-content: center; }
.scene .sc-art img { width: 100%; height: 100%; object-fit: cover; }
.scene .sc-art .emoji { font-size: 4.5rem; }
.sc-text { font-size: 1.05rem; line-height: 1.5; margin: 10px 0 14px; }
.sc-choices { display: flex; flex-direction: column; gap: 8px; }
.sc-choice { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.sc-choice small { font-size: .75rem; opacity: .8; font-weight: 600; }
.sc-rewards { display: flex; flex-direction: column; gap: 4px; background: #0d1a2e; border: 2px solid var(--line); border-radius: 12px; padding: 10px; margin: 8px 0 12px; font-weight: 700; }
.sc-roll { display: inline-block; font-weight: 900; letter-spacing: 3px; padding: 2px 14px; border-radius: 8px; margin: 4px 0; animation: popIn .3s ease-out; }
.sc-roll.ok { color: #052e16; background: var(--green); }
.sc-roll.bad { color: #fff; background: var(--red); }
.sc-rel { margin: 6px auto; max-width: 320px; }
.rel-bar { position: relative; height: 10px; background: #0a1220; border-radius: 6px; overflow: hidden; margin: 4px 0; }
.rb-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #475569; }
.rb-fill { position: absolute; top: 0; bottom: 0; }
.story-upd { color: #a5f3fc; }

/* ---------------- Captain's Log */
.log-day { margin: 10px 0; }
.ld-head { font-family: inherit; font-weight: 900; color: var(--gold); border-bottom: 1px solid var(--line); padding: 4px 0; }
.log-entry { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; }
.le-i { text-align: center; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fig { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 3px; text-align: center; }
.fig.unknown { opacity: .6; }
.fig .fig-art { height: 110px; border-radius: 10px; overflow: hidden; background: #0d1a2e; display: flex; align-items: center; justify-content: center; }
.fig .fig-art img { width: 100%; height: 100%; object-fit: cover; }
.fig .fig-art .emoji { font-size: 3rem; }
.epi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.epi { background: #0d1a2e; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; opacity: .55; }
.epi.got { opacity: 1; }
.epi.cur { border-color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #0d1a2e; border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; font-size: .85rem; opacity: .6; }
.chip.got { opacity: 1; border-color: var(--legendary); }
.pone-row { display: flex; gap: 6px; margin-top: 6px; }
.pone { font-size: 1.6rem; filter: grayscale(1); opacity: .35; }
.pone.got { filter: none; opacity: 1; }
.p-epithet { font-weight: 900; font-style: italic; font-size: 1.1rem; }

.tb-name .epi { color: var(--gold); font-style: italic; opacity: 1; display: inline; background: none; border: 0; padding: 0; }

/* ---------------- Guide: tooltips, coach marks, goals */
.kw[data-tip] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
#tooltip { position: fixed; z-index: 9999; background: #0b1527; color: var(--text); border: 2px solid var(--gold); border-radius: 10px; padding: 6px 10px; font-size: .85rem; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
#coach { position: fixed; inset: 0; z-index: 9000; }
.coach-hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(3,8,18,.72); border: 3px solid var(--gold); animation: coachPulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes coachPulse { 50% { border-color: #fff3c4; } }
.coach-bubble { position: fixed; width: 320px; max-width: calc(100vw - 24px); background: var(--panel); border: 2px solid var(--gold); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: popIn .25s ease-out; }
.coach-bubble p { margin: 6px 0 10px; }
.goals .goal { padding: 4px 0; border-bottom: 1px dashed #23426d; }
.hub-btn.locked { opacity: .45; filter: grayscale(.8); }
.gl-panel { border-color: var(--gold); }
.glossary { max-height: 60vh; overflow: auto; text-align: left; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

/* ---------------- Recruits, Jolly Roger */
.people-row { display: flex; flex-wrap: wrap; gap: 10px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 150px; background: #0d1a2e; border: 2px solid var(--line); border-radius: 12px; padding: 8px; color: var(--text); cursor: pointer; font: inherit; }
.person:hover { border-color: var(--gold); }
.person .person-art { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #13223b; }
.person .person-art .emoji { font-size: 2.2rem; }
.person small { font-size: .72rem; color: var(--muted); text-align: center; }
.jolly { position: relative; width: 56px; height: 40px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 2px 3px 0 rgba(0,0,0,.35); overflow: hidden; }
.jolly .j-skull { position: relative; z-index: 2; font-size: 1.4rem; }
.jolly .j-cross { position: absolute; z-index: 1; font-size: 1.9rem; opacity: .9; }
.jolly .j-hat { position: absolute; z-index: 3; top: -4px; font-size: 1rem; }
.big-jolly { width: 150px; height: 104px; } .big-jolly .j-skull { font-size: 3.4rem; } .big-jolly .j-cross { font-size: 4.6rem; } .big-jolly .j-hat { font-size: 2.4rem; top: -6px; }
.poster-jolly { position: absolute; top: 10px; right: 10px; transform: rotate(6deg); }
.poster { position: relative; }
.flag-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ship-name { font-size: 1.3rem; font-weight: 900; color: var(--gold); margin-bottom: 8px; }

/* ---------------- Impel Down */
.impel-run { border-color: var(--lc); }
.impel-levels { display: flex; flex-direction: column; gap: 8px; }
.impel-level { display: flex; gap: 12px; align-items: center; background: #0d1a2e; border: 2px solid var(--line); border-left: 6px solid var(--lc); border-radius: 12px; padding: 8px 12px; }
.impel-level.cur { border-color: var(--lc); box-shadow: 0 0 16px color-mix(in srgb, var(--lc) 40%, transparent); }
.impel-level.unknown { opacity: .5; }
.impel-level > div { display: flex; flex-direction: column; }
.il-icon { font-size: 2rem; }
.tower-upd { color: #fca5a5; }

/* ---------------- Friends */
.lboard { width: 100%; border-collapse: collapse; }
.lboard th, .lboard td { padding: 6px 8px; border-bottom: 1px solid #23426d; text-align: left; }
.lboard tr.me { background: rgba(251,191,36,.08); }
.lboard td.top { color: var(--gold); font-weight: 900; }
.lboard .jolly { width: 30px; height: 22px; vertical-align: middle; } .lboard .jolly .j-skull { font-size: .8rem; } .lboard .jolly .j-cross { font-size: 1rem; } .lboard .jolly .j-hat { font-size: .6rem; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.friend { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.friend-poster { position: relative; background: #f1dfb3; color: #3b2a12; border: 2px solid #b08a4d; padding: 8px; text-align: center; border-radius: 4px; }
.fp-wanted { font-weight: 900; font-size: 1.6rem; letter-spacing: 2px; }
.fp-art { height: 120px; background: #d9c08a; border: 2px solid #3b2a12; margin: 4px 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fp-art img { width: 100%; height: 100%; object-fit: cover; } .fp-art .emoji { font-size: 3rem; }
.fp-name { font-weight: 900; font-size: 1.1rem; } .fp-bounty { font-weight: 900; }
.savebox.small { min-height: 60px; }
.rival-panel { text-align: center; }

/* ---------------- Login */
.login { max-width: 380px; margin: 16px auto; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.login label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.login input { padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: #0b1527; color: var(--text); font-size: 1rem; }
.login input:focus { outline: none; border-color: var(--gold); }
.login-err { color: #fecaca; background: #450a0a; border: 1px solid #7f1d1d; border-radius: 8px; padding: 6px 10px; }