:root{
  --sea:#04141f; --ink:#f6eedc; --dim:#a9bcc4; --gold:#ffcc5c; --gold2:#e89a2c; --coral:#ff7a6b; --teal:#57d4c7; --mint:#7ee0a3; --violet:#b79bff;
  --glass:rgba(5,28,40,.84); --line:rgba(255,220,160,.22); --card:#fff6e4;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --fd:'Bree Serif',Georgia,serif; --fu:'Rubik',system-ui,sans-serif;
  --mgs-panel:linear-gradient(180deg,rgba(10,44,60,.97),rgba(5,22,32,.97));--mgs-ink:#f6eedc;--mgs-btn:rgba(87,212,199,.12);--mgs-btn-ink:#f6eedc;--mgs-btn-shadow:inset 0 0 0 1px rgba(87,212,199,.5);
  --mgs-accent:linear-gradient(180deg,#ffe29a,#ffb43c);--mgs-accent-ink:#3a2408;--mgs-accent-shadow:0 5px 0 #b86f12;--mgs-icon:rgba(5,28,40,.84);--mgs-icon-ink:#ffcc5c;--mgs-icon-r:12px;--mgs-icon-shadow:inset 0 0 0 1px rgba(255,220,160,.22);
  --mgs-font:'Rubik',system-ui,sans-serif;--mgs-r:22px;--mgs-scrim:rgba(2,10,16,.7);--mgs-top:12px;--mgs-side:12px;
}
[hidden]{display:none !important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sea);color:var(--ink);font-family:var(--fu);font-weight:500;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation;padding:0}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{cursor:default}

/* currency icons */
.pearl{display:inline-block;width:17px;height:17px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#f1e9ff 30%,#b9b0d8 100%);box-shadow:0 0 8px rgba(255,245,230,.7)}
.glass{display:inline-block;width:12px;height:15px;flex:none;background:linear-gradient(150deg,#d6fff5,#57d4c7 55%,#1f8f8a);clip-path:polygon(30% 0,100% 18%,85% 100%,0 80%);margin-right:6px;vertical-align:-2px}
.ico-pause{display:inline-block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) 0 calc(var(--sal) + 58px + var(--pl,0px));display:flex;align-items:flex-start;gap:8px;pointer-events:none;z-index:5}
#hud > *{pointer-events:auto}
.wavebox{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:6px 11px 7px;min-width:112px}
.wv{font:700 12px/1 var(--fu);letter-spacing:.08em;display:flex;align-items:baseline;gap:6px;color:#c9d8de}
.wv b{font:400 24px/1 var(--fd);color:#fff;letter-spacing:0}
.wv em{font:600 11.5px var(--fu);font-style:normal;color:var(--teal);margin-left:auto;padding-left:6px;letter-spacing:0;white-space:nowrap}
.wbar{height:4px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:5px;overflow:hidden}
.wbar i{display:block;height:100%;background:linear-gradient(90deg,#3aa6b9,var(--teal));transform-origin:0 50%;transform:scaleX(0)}
.tide{flex:1;max-width:250px;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:0 11px;height:46px;margin:0 auto}
.tbar{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.tbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#c9b8ff,#fff4dc);transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear;box-shadow:0 0 8px rgba(255,240,220,.6)}
.tide b{font:400 21px var(--fd);color:var(--gold);min-width:14px;text-align:right}
.hud-r{display:flex;gap:6px}
.ib{width:48px;height:46px;border-radius:12px;background:var(--glass);border:1px solid var(--line);display:grid;place-items:center;font:700 16px var(--fu);color:var(--ink)}
.ib:active{transform:scale(.94)}

/* powers sit in the bottom corner, within thumb reach */
#abil{position:fixed;z-index:5;display:flex;gap:12px;pointer-events:none;left:calc(var(--sal) + 12px);bottom:calc(max(var(--sab), var(--ob,0px)) + 14px)}
.ab{pointer-events:auto;position:relative;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1.5px solid var(--line);overflow:hidden}
.ab .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(200,235,255,.32) calc(var(--p,0)*360deg),transparent 0)}
.ab span{position:relative;font:800 12px var(--fu);letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.ab.ready{border-color:#cdeeff;box-shadow:0 0 16px rgba(190,230,255,.55),inset 0 0 12px rgba(190,230,255,.3);animation:abp 1.4s ease-in-out infinite}
#abOver.ready{border-color:var(--gold);box-shadow:0 0 16px rgba(255,204,92,.6),inset 0 0 12px rgba(255,204,92,.3)}
#abOver .cd{background:conic-gradient(rgba(255,204,92,.35) calc(var(--p,0)*360deg),transparent 0)}
@keyframes abp{50%{transform:scale(1.06)}}

#hint{position:fixed;z-index:6;left:50%;bottom:calc(max(var(--sab), var(--ob,0px)) + 98px);transform:translateX(-50%);max-width:min(340px,86vw);text-align:center;background:rgba(6,30,44,.95);border:1px solid var(--gold);border-radius:14px;padding:10px 14px;font:500 14.5px/1.35 var(--fu);box-shadow:0 0 22px rgba(255,204,92,.25);pointer-events:none}
#toast{position:fixed;z-index:30;top:calc(var(--sat) + 60px);left:50%;transform:translateX(-50%);background:rgba(6,30,44,.96);border:1px solid var(--line);color:var(--gold);border-radius:12px;padding:8px 14px;font:600 14px var(--fu);max-width:92vw;text-align:center;pointer-events:none}
#toast.go{animation:tin .25s ease-out}
@keyframes tin{from{opacity:0;transform:translate(-50%,-6px)}}

/* ---------- pick cards ---------- */
#pick{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;padding:calc(var(--sat) + 60px) calc(var(--sar) + 12px) calc(max(var(--sab), var(--ob,0px)) + 14px) calc(var(--sal) + 12px);background:linear-gradient(180deg,rgba(2,10,16,0) 20%,rgba(2,10,16,.72) 62%)}
body.land #pick{align-items:center;background:rgba(2,10,16,.55)}
#pick.lock .card{pointer-events:none}
.pwrap{width:min(560px,100%);text-align:center}
body.land .pwrap{width:min(860px,100%)}
.pk{margin:0;color:var(--gold);font:600 13px var(--fu);letter-spacing:.14em;text-transform:uppercase}
#pick h2{margin:2px 0 12px;font:400 30px var(--fd);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.cards{display:grid;gap:10px;grid-template-columns:1fr}
body.land .cards{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.card{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:13px 16px;min-height:88px;border-radius:18px;background:linear-gradient(180deg,#fffaf0,#f3e5c8);color:#2c2418;box-shadow:0 5px 0 #b8925a,0 14px 26px rgba(0,0,0,.45);animation:cin .38s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,0s)}
body.land .card{flex-direction:column;align-items:flex-start;min-height:190px;padding:16px}
.card:active{transform:translateY(3px);box-shadow:0 2px 0 #b8925a,0 8px 16px rgba(0,0,0,.4)}
@keyframes cin{from{opacity:0;transform:translateY(40px) rotate(-3deg) scale(.9)}}
.card .ci{flex:none;width:54px;height:54px;border-radius:15px;display:grid;place-items:center}
.card .ci svg{width:30px;height:30px;fill:#fff;stroke:#fff}
.card.atk .ci{background:linear-gradient(160deg,#ffcf6b,#ef8b2c)}
.card.def .ci{background:linear-gradient(160deg,#ff9b88,#c9453a)}
.card.utl .ci{background:linear-gradient(160deg,#c9b5ff,#6b55c9)}
.card .cb{display:flex;flex-direction:column;gap:1px;min-width:0}
.card .cr{font:800 11.5px var(--fu);letter-spacing:.12em;text-transform:uppercase;color:#8a7a62}
.card .cn{font:400 22px/1.1 var(--fd);color:#2c2418}
.card .cs{font:600 14.5px var(--fu);color:#5d5140}
.card .cv{font:800 18px var(--fu);color:#2c2418;font-variant-numeric:tabular-nums;margin-top:3px}
.card .cd{font:500 13px/1.3 var(--fu);color:#6d604c;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cb{flex:1}
.card .cv em{font-style:normal;color:#1f8f5a}
.card kbd{position:absolute;right:10px;top:8px;font:700 11px var(--fu);color:#b6a483;display:none}
@media (hover:hover) and (pointer:fine){ .card kbd{display:block} .card:hover{transform:translateY(-3px)} }
.card.r1{background:linear-gradient(180deg,#f2fbff,#cfe9f7);box-shadow:0 5px 0 #5f9dbf,0 14px 26px rgba(0,0,0,.45),0 0 0 2px #8cc9ea inset}
.card.r1 .cr{color:#2f7aa3}
.card.r2{background:linear-gradient(180deg,#fff6d8,#ffd98a);box-shadow:0 5px 0 #c98a1a,0 14px 30px rgba(0,0,0,.45),0 0 26px rgba(255,204,92,.65)}
.card.r2 .cr{color:#a86400}
.card.r2::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 45%,transparent 60%);background-size:250% 100%;animation:shine 2.2s ease-in-out infinite;pointer-events:none}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
.prow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;min-height:20px;color:var(--dim);font-size:13.5px}
.prow .mid{flex:none;height:42px;padding:0 16px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);overflow-y:auto;touch-action:pan-y}
.screen.dim{background:rgba(2,10,16,.7);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#title{background:radial-gradient(ellipse at 50% 40%,rgba(2,10,16,0) 0%,rgba(2,10,16,.5) 75%)}
.tcard{width:min(380px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin:auto}
.tleft,.tright{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#logoSpot{width:170px;height:170px;margin:0 auto -8px}
h1{margin:0;font:400 46px/1 var(--fd);color:#fff6e0;text-shadow:0 0 22px rgba(255,190,90,.55),0 3px 0 rgba(0,0,0,.35)}
h1 span{color:var(--gold)}
.tag{margin:-4px 0 4px;color:var(--dim);font-size:15px}
.tier{display:flex;align-items:center;gap:8px;width:100%}
.arr{width:48px;height:52px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font:600 28px/1 var(--fu);color:var(--gold)}
.arr:disabled{opacity:.3}
.arr.locked{color:var(--dim);position:relative}
.arr.locked::after{content:"";position:absolute;right:7px;top:7px;width:8px;height:7px;border-radius:2px;background:var(--dim)}
.tname{flex:1;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;min-height:52px}
.tname b{font:400 18px var(--fd)}
.tname small{color:var(--dim);font-size:12.5px;line-height:1.2}
.big{width:100%;height:58px;border-radius:18px;font:400 22px var(--fd);color:#3a2408;background:linear-gradient(180deg,#ffe29a,#ffb43c);box-shadow:0 5px 0 #b86f12,0 0 26px rgba(255,190,80,.45)}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #b86f12,0 0 20px rgba(255,190,80,.4)}
.row2{display:flex;gap:8px;width:100%}
.mid{flex:1;height:48px;border-radius:14px;font:600 15.5px var(--fu);background:rgba(87,212,199,.12);border:1px solid rgba(87,212,199,.5);display:flex;align-items:center;justify-content:center;gap:4px}
.mid b{color:#d6fff5;margin-left:4px}
.mid.ghost{background:transparent;border-color:var(--line);color:var(--dim)}
.mid.glow{box-shadow:0 0 16px rgba(87,212,199,.5);animation:abp 1.6s ease-in-out infinite}
.recs{color:var(--dim);font-size:13.5px;line-height:1.35;max-width:320px}

.mcard{width:min(380px,100%);margin:auto;background:linear-gradient(180deg,rgba(10,44,60,.97),rgba(5,22,32,.97));border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center;box-shadow:0 0 40px rgba(255,190,90,.12),0 20px 40px rgba(0,0,0,.4)}
.mcard h2{margin:0;font:400 30px var(--fd)}
.mcard h2 b{color:var(--gold);font-weight:400}
.kicker{margin:0;color:var(--coral);font:600 13px var(--fu);letter-spacing:.14em;text-transform:uppercase}
.obest{margin:-4px 0 0;color:var(--dim);font-size:15px}
.obest.hot{color:var(--gold)}
.ogrid,.pstats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ogrid div,.pstats div{display:flex;justify-content:space-between;gap:6px;background:rgba(255,255,255,.05);border-radius:10px;padding:6px 9px;font-size:14px}
.ogrid span,.pstats span{color:var(--dim)}
.ogrid b,.pstats b{font-weight:600}
.oshards{font:400 19px var(--fd);color:#d6fff5;padding:7px;border-radius:12px;background:rgba(87,212,199,.1);border:1px solid rgba(87,212,199,.35)}
#mgPanel:empty{display:none}
#mgPanel .mgk{margin:0 auto}

.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:16px;cursor:pointer}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg i{width:44px;height:26px;border-radius:13px;background:rgba(255,255,255,.16);position:relative;transition:background .15s}
.tg i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#e8e0cc;transition:transform .15s}
.tg input:checked + i{background:#2fa596}
.tg input:checked + i::after{transform:translateX(18px);background:#fff}

/* ---------- workshop ---------- */
#shop{background:rgba(2,10,16,.84);align-items:flex-start}
.scard{width:min(640px,100%);margin:0 auto;display:flex;flex-direction:column;gap:10px}
.shead{display:flex;align-items:center;gap:10px}
.shead h2{margin:0;flex:1;font:400 24px var(--fd)}
.shead .ib{font-size:26px;color:var(--gold)}
.bal{display:flex;align-items:center;font:400 19px var(--fd);color:#d6fff5;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.sub{margin:0;color:var(--dim);font-size:14.5px;line-height:1.35}
.tabs{display:flex;gap:4px;background:rgba(255,255,255,.05);border-radius:12px;padding:3px}
.stabs{position:sticky;top:0;z-index:2;background:rgba(6,30,44,.97)}
.tab{flex:1;height:40px;border-radius:9px;font:600 14.5px var(--fu);color:var(--dim)}
.tab.on{background:linear-gradient(180deg,#ffe29a,#ffb43c);color:#3a2408}
.slist{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:600px){.slist{grid-template-columns:1fr 1fr}}
.si{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:5px;align-items:center;padding:13px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(18,64,82,.55),rgba(8,34,46,.55));border:1px solid var(--line);text-align:left}
.si .st{display:flex;align-items:baseline;gap:8px;grid-column:1;flex-wrap:wrap}
.si .st b{font:400 19px var(--fd)}
.si .st small{color:#c6d3d8;font:600 12.5px var(--fu)}
.si p{margin:2px 0 0;grid-column:1;color:var(--dim);font-size:13.5px;line-height:1.3}
.si p.sv{color:var(--teal);font-weight:600}
.si p.sv em{font-style:normal;color:#d6fff5}
.si.lockd{border-style:dashed}
.sbuy{grid-column:2;grid-row:1 / span 4;min-width:92px;min-height:58px;border-radius:14px;font:400 17px var(--fd);color:#3a2408;background:linear-gradient(180deg,#ffe29a,#ffb43c);box-shadow:0 3px 0 #b86f12;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 10px}
.sbuy small{font:700 10.5px var(--fu);letter-spacing:.06em;text-transform:uppercase}
.sbuy .glass{margin:0 0 2px}
.sbuy.no{background:rgba(255,255,255,.08);color:var(--dim);box-shadow:none}
.sbuy:disabled{background:rgba(126,224,163,.14);color:var(--mint);box-shadow:none}

@media (max-height:560px) and (orientation:landscape){
  .tcard{flex-direction:row;align-items:center;width:min(700px,100%);gap:22px}
  .tleft{flex:1;gap:4px}
  .tright{flex:1.25;gap:9px}
  #logoSpot{width:120px;height:120px;margin:0 auto}
  h1{font-size:34px}
  .tag{font-size:13px}
  .mcard{padding:12px;gap:7px}
  .mcard h2{font-size:24px}
  .ogrid div{padding:4px 8px}
  .big{height:48px;font-size:19px}
  .mid{height:42px}
  #pick{padding-top:calc(var(--sat) + 8px)}
  #pick h2{font-size:22px;margin-bottom:8px}
  body.land .card{min-height:150px;padding:12px}
  .card .cd{display:none}
  .card .cn{font-size:19px}
}
@media (max-width:380px){ .tide{max-width:150px} .wavebox{min-width:0} .wv em{display:none} .ib{width:44px} }

/* springy feedback: numbers and icons pop when they change */
.bump{animation:bump .32s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
.wv b,.tide b,.pearl{display:inline-block}
.card.won{animation:won .23s ease-out forwards}
.card.lost{animation:lost .2s ease-in forwards}
@keyframes won{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(.9) translateY(-30px);opacity:0}}
@keyframes lost{to{transform:translateY(40px) scale(.9);opacity:0}}
.card.r1::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;animation:shine 3.2s ease-in-out infinite;pointer-events:none}

/* Workshop rows: level pips, a clear Now / Next pair and a buy button that says what it needs */
.si .pips{grid-column:1;display:flex;gap:3px}
.si .pips i{flex:1;max-width:18px;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.si .pips i.on{background:linear-gradient(90deg,#ffd27a,#ffb43c)}
.si p.sd{margin:0;grid-column:1;color:#b9c9cf;font-size:14px;line-height:1.35}
.si .chips{grid-column:1;display:flex;flex-wrap:wrap;gap:6px}
.si .chip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:9px;font:700 14px var(--fu);font-variant-numeric:tabular-nums}
.si .chip em{font:700 10.5px var(--fu);font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.si .chip.now{background:rgba(255,255,255,.07);color:#e9f2f4}
.si .chip.nx{background:rgba(87,212,199,.16);color:#bff7ee;border:1px solid rgba(87,212,199,.35)}
.sbuy .pr{display:flex;align-items:center;font:400 19px var(--fd)}
.sbuy small{font:700 10.5px var(--fu);letter-spacing:.06em;text-transform:uppercase}
.sbuy small.need{text-transform:none;letter-spacing:0;font-size:11px;margin-top:1px}
.si.maxd{border-color:rgba(126,224,163,.35)}
@media (max-width:420px){ .si .chip{font-size:13px} .sbuy{min-width:84px} }

/* pick screen on short phones: scroll instead of running under the HUD, and drop the description line */
#pick{overflow-y:auto}
.pwrap{margin-top:auto}
@media (max-height:740px) and (orientation:portrait){
  .card .cd{display:none}
  .card{min-height:76px;padding:10px 14px}
  #pick h2{font-size:26px;margin-bottom:8px}
}

.ib.tcorner{position:fixed;z-index:12;width:48px;height:46px;top:calc(var(--sat) + 12px);left:calc(var(--sal) + 12px);color:var(--gold)}
.ib.tcorner svg{width:22px;height:22px}