:root{--bg:#0d1b26;--card:#132736;--card2:#18324a;--line:rgba(255,255,255,.1);--txt:#eef5f8;--mut:#93a9b6;--gold:#ffc53d;
--c0:#9aa5ad;--c1:#4cc46a;--c2:#3d8bfd;--c3:#a96bff;--c4:#ffb703;--c5:#ff4fa3}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;user-select:none}
.wrap{max-width:560px;margin:0 auto;padding:12px 12px 40px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
h1{font-family:Fredoka,sans-serif;font-size:24px;margin:0;letter-spacing:.01em}
h1 span{color:var(--gold)}
.coins{font-family:Fredoka;font-size:18px;background:var(--card);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.coins b{color:var(--gold)}
.spots{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.spot{flex:none;font:600 13px Inter;padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--txt);cursor:pointer}
.spot.on{background:var(--gold);color:#251a00;border-color:var(--gold)}
.spot.lock{color:var(--mut)}
.scene{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
canvas{display:block;width:100%;height:310px;cursor:pointer}
.cond{position:absolute;top:8px;left:8px;display:flex;gap:6px}
.cond span{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px}
.hint{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.4);font-size:12px;padding:5px 9px;border-radius:999px;font-weight:600}
.reel{position:absolute;left:5%;right:5%;bottom:14px;display:none;background:rgba(5,15,22,.82);border-radius:12px;padding:10px 12px}
.reel.on{display:block}
.reel .lbl{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:7px}
.bar{position:relative;height:22px;background:#2a3d4a;border-radius:6px;overflow:hidden}
.zone{position:absolute;top:0;bottom:0;background:#3ecf6e;box-shadow:0 0 12px #3ecf6e}
.mark{position:absolute;top:-3px;bottom:-3px;width:4px;background:#fff;border-radius:2px;box-shadow:0 0 6px #fff}
.act{width:100%;margin-top:10px;font:700 20px Fredoka;padding:16px;border:none;border-radius:14px;background:var(--gold);color:#251a00;cursor:pointer;transition:transform .06s}
.act:active{transform:scale(.98)}
.act.wait{background:#24435a;color:var(--txt)}
.act.bite{background:#ff4d4d;color:#fff;animation:pulse .4s infinite alternate}
@keyframes pulse{to{transform:scale(1.03)}}
.baitrow{display:flex;gap:6px;margin-top:8px}
.bait{flex:1;font:600 12px Inter;padding:8px 4px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--txt);cursor:pointer;text-align:center}
.bait.on{border-color:var(--gold);color:var(--gold)}
.bait small{display:block;color:var(--mut);font-weight:400;margin-top:2px}
.daily{margin-top:8px;background:linear-gradient(90deg,#1f4b3a,#1a3a52);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.daily button,.btn{font:600 13px Inter;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--txt);cursor:pointer}
.btn.gold,.daily button{background:var(--gold);color:#251a00;border-color:var(--gold)}
.btn:disabled{opacity:.4;cursor:default}
.tabs{display:flex;gap:6px;margin-top:14px}
.tab{flex:1;text-align:center;padding:9px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:14px;cursor:pointer}
.tab.on{background:var(--card2);border-color:var(--gold)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;min-height:120px}
.row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}
.row:last-child{border:none}
.row .ic{width:54px;height:34px;flex:none;display:flex;align-items:center;justify-content:center}
.row .nm{flex:1;font-weight:600;font-size:14px}
.row .nm small{display:block;font-weight:400;font-size:12px;color:var(--mut)}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;color:var(--mut)}
.dex{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dx{background:var(--card2);border-radius:10px;padding:8px 4px;text-align:center;font-size:11px;font-weight:600;border:1px solid transparent}
.dx svg{width:64px;height:38px}
.dx.unk{color:var(--mut)}
.dx.unk svg{filter:brightness(0) opacity(.35)}
.dx small{display:block;font-weight:400;color:var(--mut);margin-top:2px}
.sec{font:600 15px Fredoka;margin:12px 0 6px}
.sec:first-child{margin-top:0}
.prog{height:6px;background:#203646;border-radius:3px;overflow:hidden;margin:4px 0 8px}
.prog i{display:block;height:100%;background:var(--gold)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal.on{display:flex}
.mbox{background:#132736;border:1px solid var(--line);border-radius:18px;width:100%;max-width:380px;padding:20px;text-align:center;position:relative;overflow:hidden}
.rar{font:700 13px Inter;letter-spacing:.12em;text-transform:uppercase}
.big{margin:8px auto;width:220px;height:130px;display:flex;align-items:center;justify-content:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.big svg{width:220px;height:130px;overflow:visible}
.big.fish svg{animation:swim 2.6s ease-in-out infinite;transform-origin:50% 55%}
.big.fish.r4 svg,.big.fish.r5 svg{animation:swim 2.6s ease-in-out infinite,glowp 1.8s ease-in-out infinite}
@keyframes swim{0%,100%{transform:rotate(-2deg)}35%{transform:rotate(2.5deg) translateY(-4px)}70%{transform:rotate(-2deg)}80%{transform:rotate(-10deg) translateY(-9px)}88%{transform:rotate(7deg) translateY(-2px)}94%{transform:rotate(-3deg)}}
@keyframes glowp{50%{filter:drop-shadow(0 0 18px var(--gl)) brightness(1.2)}}
.big .tail{transform-box:fill-box;transform-origin:100% 50%;animation:wag .32s ease-in-out infinite alternate}
@keyframes wag{from{transform:skewY(-9deg) scaleX(.9)}to{transform:skewY(9deg) scaleX(1.02)}}
.dx svg,.evb svg,.row .ic svg{overflow:visible}
@keyframes pop{from{transform:scale(.2) rotate(-12deg);opacity:0}}
.mname{font:700 24px Fredoka}
.mstat{color:var(--mut);font-size:14px;margin:4px 0 14px}
.newb{display:inline-block;background:var(--gold);color:#251a00;font-weight:700;font-size:11px;padding:3px 8px;border-radius:999px;margin-bottom:6px}
.rays{position:absolute;inset:-50%;background:repeating-conic-gradient(var(--rc) 0 10deg,transparent 10deg 20deg);opacity:.14;animation:spin 12s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.mbtns{display:flex;gap:8px;position:relative}
.mbtns .btn{flex:1;padding:12px}
.geo{width:170px;height:170px;margin:10px auto;cursor:pointer;position:relative}
.geo svg{width:100%;height:100%}
.geo.hit{animation:sh .2s}
@keyframes sh{25%{transform:translate(-4px,2px) rotate(-3deg)}75%{transform:translate(4px,-2px) rotate(3deg)}}
.shop .row .btn{min-width:86px}
.bcard{background:var(--card2);border-radius:14px;padding:12px;margin-bottom:8px;border:1px solid var(--line)}
.bcard .bh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bcard .be{font-size:30px}
.bcard .bn{font:600 17px Fredoka}
.bcard .bn small{display:block;font:400 12px Inter;color:var(--mut)}
.bcard .own{margin-left:auto;font:700 14px Inter;background:#0f2130;padding:5px 10px;border-radius:999px}
.bund{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bund button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:10px;border:1px solid var(--gold);background:transparent;color:var(--txt);cursor:pointer;font:600 14px Inter;position:relative}
.bund button b{color:var(--gold);font-size:13px}
.bund button:hover{background:#ffc53d18}
.bund button.no{opacity:.45}
.bund .sv{position:absolute;top:-8px;right:-4px;background:#3ecf6e;color:#062;font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px}
.crate{background:linear-gradient(120deg,#3a2a08,#5a3d0a 50%,#3a2a08);border:1px solid var(--gold);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.crate .nm{flex:1;font:600 15px Fredoka}
.crate .nm small{display:block;font:400 12px Inter;color:#e8d6a8}
.perks{text-align:left;font-size:14px;margin:10px 0 14px;padding-left:20px;line-height:1.6}
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-20px);background:#fff;color:#111;padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;transition:.25s;z-index:20;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.dev{margin-top:22px;font-size:12px;color:var(--mut);background:#0a151e;border-radius:12px;padding:10px}
.dev select{font:inherit;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:3px}
.dev .btn{padding:4px 8px;font-size:12px}
.savebox{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:14px}
.foot{margin-top:12px;color:#5f7684;font-size:11px;text-align:center}
.disc{position:fixed;left:50%;top:12px;transform:translate(-50%,-140%);z-index:30;width:min(92vw,400px);display:flex;align-items:center;gap:12px;
  background:linear-gradient(120deg,#1b3348,#243f5c);border:2px solid var(--dc,#ffc53d);border-radius:16px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 18px var(--dc,#ffc53d);cursor:pointer;transition:transform .45s cubic-bezier(.2,1.5,.4,1)}
.disc.on{transform:translate(-50%,0)}
.disc .di{width:70px;height:44px;flex:none;animation:dwig 1s ease-in-out infinite alternate}
.disc .di svg{width:70px;height:44px;overflow:visible}
@keyframes dwig{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.disc .dt{font:700 11px Inter;letter-spacing:.12em;color:var(--dc,#ffc53d)}
.disc .dn{font:600 17px Fredoka;color:#fff;line-height:1.15}
.disc .ds{font-size:12px;color:var(--mut)}
.dx.ping{animation:ping 1.2s ease-in-out 3}
@keyframes ping{50%{transform:scale(1.12);box-shadow:0 0 24px var(--gc2)}}
#fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:15}
.mute{font-size:18px;background:var(--card);border:1px solid var(--line);border-radius:999px;width:38px;height:36px;cursor:pointer;color:var(--txt)}
.tab{position:relative}
.tab .dot{position:absolute;top:-5px;right:-5px;background:#ff4d4d;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 6px;display:none}
.tab .dot.on{display:block;animation:pulse .5s infinite alternate}
.dx{transition:transform .15s}
.dx.got{background:radial-gradient(circle at 50% 35%,var(--gc) 0%,var(--card2) 70%);border-color:var(--gc2);box-shadow:0 0 14px var(--gc)}
.dx.got.r4,.dx.got.r5{position:relative;overflow:hidden}
.dx.got.r4::after,.dx.got.r5::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:shimmer 2.4s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.dx.new{animation:newp 1s infinite alternate}
@keyframes newp{to{transform:scale(1.06)}}
.dx .nb{position:absolute;top:4px;left:4px;background:#ff4d4d;color:#fff;font-size:9px;padding:1px 5px;border-radius:999px;z-index:2}
.dx{position:relative}
.dx.insea{outline:2px solid #3ecf6e99;outline-offset:-1px}
.ixhead{background:var(--card2);border-radius:12px;padding:12px;margin-bottom:6px;text-align:center}
.ixhead .n{font:700 28px Fredoka;color:var(--gold)}
.ixhead .prog{height:10px;margin:8px 0 4px}
.ixhead .prog i{background:linear-gradient(90deg,#ffc53d,#ff4fa3)}
.flash{position:fixed;inset:0;pointer-events:none;z-index:14;opacity:0}
.flash.go{animation:fl .7s}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}
.mbox.shake{animation:sh .45s}
.dexline{font-size:12px;color:var(--gold);margin:-8px 0 12px;position:relative}

/* ---------- Clean layout (Nov 2026) ---------- */
/* Header: daily gift + settings as small round buttons */
.topr{display:flex;gap:6px;align-items:center}
.ibtn{position:relative;font-size:17px;background:var(--card);border:1px solid var(--line);border-radius:999px;width:38px;height:36px;cursor:pointer;color:var(--txt);padding:0}
.ibtn .pip{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#ff4d4d;border:2px solid var(--bg);display:none}
#dailyBtn.ready{border-color:var(--gold);box-shadow:0 0 10px rgba(255,197,61,.35)}
#dailyBtn.ready .pip{display:block;animation:pulse .6s infinite alternate}
#dailyBtn:not(.ready){opacity:.55}
.cond span{cursor:default}
#wx{cursor:pointer}

/* Bait picker: one segmented control instead of three boxes */
.baitrow{gap:0;margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px}
.bait{border:none;background:transparent;border-radius:9px;padding:7px 4px}
.bait .bn{font-weight:600}
.bait.on{background:var(--card2);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,197,61,.55)}
.bait small{font-size:11px}
.bait.empty .bn{opacity:.5}
.bait.empty small{color:var(--gold);opacity:.85}

/* This week / seasonal: one slim card */
.ev{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.evr{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:13px}
.evr+.evr{border-top:1px solid var(--line)}
.evr svg{width:44px;height:26px;flex:none}
.evr .et{min-width:0;flex:1}
.evr small{display:block;color:var(--mut);font-size:11px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evr .tag{font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-right:6px;vertical-align:1px}
.feat .tag{background:#3b2470;color:#d4c1ff}
.sea .tag{background:#5a2f0e;color:#ffd3a1}

/* Tabs + their contents: one panel */
.book{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tabs{margin:0;gap:4px;padding:5px;background:#0f2130;border-bottom:1px solid var(--line)}
.tab{background:transparent;border:none;border-radius:10px;padding:9px 6px;color:var(--mut);font-size:14px}
.tab.on{background:var(--card2);color:var(--txt);box-shadow:inset 0 -2px 0 var(--gold)}
.tab .dot{top:0;right:4px}
.panel{background:transparent;border:none;border-radius:0;margin-top:0}

/* Angler Pass card at the top of the Shop */
.passcard{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:6px;border-radius:14px;border:1px solid rgba(255,197,61,.5);background:linear-gradient(120deg,#2a2410,#1d2a33)}
.passcard .pe{font-size:26px}
.passcard .nm{flex:1;font:600 15px Fredoka;color:var(--gold)}
.passcard .nm small{display:block;font:400 12px Inter;color:#d9cfae;margin-top:1px}
.passcard .btn{padding:9px 16px}
.passcard.on{border-color:rgba(62,207,110,.5);background:linear-gradient(120deg,#123024,#1d2a33)}
.passcard.on .nm{color:#7fe3a0}

/* Settings popup */
.mbox.menu{text-align:left}
.mbox.menu .mname{text-align:center;margin-bottom:12px}
.setrow{width:100%;text-align:left;padding:11px 12px;font-size:14px}
.mbox.menu .savebox{margin-top:10px;background:var(--card2)}
.foot{margin-top:18px}
.hint:empty{display:none}
.coins,.tab,h1{white-space:nowrap}
@media (max-width:370px){h1{font-size:20px}.ibtn{width:34px;height:34px;font-size:15px}.coins{font-size:16px;padding:6px 10px}.bait .bn{font-size:11px}.tab{font-size:13px;padding:9px 2px}}

/* =====================================================================
   DOCKSIDE WOOD THEME (Nov 2026)
   Wood is used as frames and trim. Panel insides are dark walnut (not
   bright cream) so nothing glares at night and fish colors stay readable.
   Cream is only used for small things: selected tabs, chips, secondary buttons.
   ===================================================================== */
:root{
  --wood:repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.16) 46px 48px),
         repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 3px,rgba(0,0,0,.03) 3px 7px),
         linear-gradient(180deg,#80502a,#5e3719);
  --walnut:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px),
           linear-gradient(180deg,#3d2817,#2f1e11);
  --walnut2:linear-gradient(180deg,#4a321d,#3b2716);
  --cream:#f6e6c4;--cream2:#e8cf9e;--brown:#5a3318;--lipwood:#2c1608;--lipcream:#a5763f;
  --green1:#5fcf74;--green2:#36a852;--greenlip:#1f6d33;
  --coral1:#ff8a5b;--coral2:#e8613a;--corallip:#9e3a1c;
}
body{background:radial-gradient(900px 500px at 50% -10%,#1b3046,#0e1922 65%)}

/* --- header --- */
h1{color:#fff3dc;text-shadow:0 2px 0 var(--lipwood),0 3px 8px rgba(0,0,0,.45)}
h1 span{color:#ffd166}
.ibtn{background:linear-gradient(var(--cream),var(--cream2));border:none;box-shadow:0 4px 0 var(--lipcream),inset 0 2px 0 #fff8e8;transition:transform .08s,box-shadow .08s}
.ibtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--lipcream),inset 0 2px 0 #fff8e8}
.ibtn .pip{border-color:#0e1922}
#dailyBtn.ready{box-shadow:0 4px 0 var(--lipcream),0 0 14px rgba(255,209,102,.55),inset 0 2px 0 #fff8e8}
.coins{background:linear-gradient(var(--cream),var(--cream2));color:var(--brown);border:none;box-shadow:0 4px 0 var(--lipcream),inset 0 2px 0 #fff8e8}
.coins b{color:#8a4b10}

/* --- location pills: little planks --- */
.spots{padding:2px 2px 10px}
.spot{background:var(--walnut2);border:none;color:#f1dfc0;box-shadow:0 3px 0 var(--lipwood),inset 0 1px 0 rgba(255,220,170,.15)}
.spot.on{background:linear-gradient(var(--cream),var(--cream2));color:var(--brown);box-shadow:0 3px 0 var(--lipcream),inset 0 2px 0 #fff8e8}
.spot.lock{color:#b79b78}

/* --- the scene: big water in a wooden frame --- */
.scene{padding:7px;background:var(--wood);border:none;border-radius:22px;margin-top:4px;
  box-shadow:0 5px 0 var(--lipwood),0 12px 26px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,220,170,.18)}
canvas#cv{border-radius:15px;height:310px;height:clamp(300px,calc(100vh - 312px),640px);height:clamp(300px,calc(100svh - 312px),640px)}
.cond{top:15px;left:15px}
.hint{top:15px;right:15px}
.reel{left:calc(5% + 7px);right:calc(5% + 7px);bottom:21px}
.evchips{position:absolute;top:47px;left:15px;display:flex;gap:6px;z-index:3}
.evchips .chip{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);font-size:12px;font-weight:600;padding:5px 9px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.12)}
.evchips .chip.feat{border-color:rgba(205,182,255,.45)}
.evchips .chip.sea{border-color:rgba(255,190,120,.45)}
.ev{position:absolute;top:80px;left:15px;right:15px;margin:0;z-index:4;display:none;background:var(--walnut);border:none;border-radius:14px;
  box-shadow:0 0 0 3px #6b4423,0 8px 20px rgba(0,0,0,.5);padding-right:30px;--mut:#cbb79a}
.ev.on{display:block;animation:popin .18s ease-out}
.evr+.evr{border-top:1px dashed rgba(255,220,170,.18)}
.evx{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#f1dfc0;font-size:12px;cursor:pointer}
@keyframes popin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* --- chunky buttons (squish when pressed) --- */
.act,.btn,.bait,.tab,.spot,.bund button{transition:transform .08s,box-shadow .08s,filter .15s}
.act{margin-top:14px;border-radius:18px;color:#fff;background:linear-gradient(var(--green1),var(--green2));
  box-shadow:0 6px 0 var(--greenlip),0 10px 18px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.4);text-shadow:0 2px 0 var(--greenlip);font-size:24px;padding:15px}
.act:active{transform:translateY(5px);box-shadow:0 1px 0 var(--greenlip),inset 0 3px 0 rgba(255,255,255,.4)}
.act:not(.wait):not(.bite){animation:castpulse 2.4s ease-in-out infinite}
@keyframes castpulse{50%{filter:brightness(1.08)}}
.act.wait{background:var(--walnut2);color:#f1dfc0;text-shadow:none;box-shadow:0 6px 0 var(--lipwood),inset 0 2px 0 rgba(255,220,170,.12)}
.act.bite{background:linear-gradient(#ff6b5b,#e8402f);color:#fff;text-shadow:0 2px 0 #8e1d12;box-shadow:0 6px 0 #8e1d12,inset 0 3px 0 rgba(255,255,255,.35)}
.btn,.daily button{border:none;border-radius:11px;color:var(--brown);background:linear-gradient(#fff3d9,#f0d7a6);box-shadow:0 4px 0 var(--lipcream),inset 0 2px 0 #fff}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--lipcream),inset 0 2px 0 #fff}
.btn.gold{color:#fff;background:linear-gradient(var(--coral1),var(--coral2));box-shadow:0 4px 0 var(--corallip),inset 0 2px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 var(--corallip)}
.btn.gold:active:not(:disabled){box-shadow:0 0 0 var(--corallip),inset 0 2px 0 rgba(255,255,255,.35)}
.btn:disabled{opacity:.45;box-shadow:none}

/* --- bait picker: a wooden tray --- */
.baitrow{background:var(--walnut);border:none;border-radius:14px;padding:4px;gap:4px;margin-top:14px;
  box-shadow:0 0 0 3px #6b4423,0 4px 0 3px var(--lipwood)}
.bait{color:#f1dfc0;border-radius:10px}
.bait small{color:#cbb79a}
.bait.on{background:linear-gradient(var(--cream),var(--cream2));color:#8a4b10;box-shadow:0 3px 0 var(--lipcream),inset 0 2px 0 #fff8e8}
.bait.on small{color:#8a6a48}
.bait.empty small{color:#ffd166}

/* --- tabs + panel: wood frame, walnut inside --- */
.book{margin-top:20px;background:var(--walnut);border:none;border-radius:18px;--mut:#cbb79a;--line:rgba(255,220,170,.14);--card2:#4a321d;
  box-shadow:0 0 0 4px #6b4423,0 6px 0 4px var(--lipwood),0 14px 26px rgba(0,0,0,.4)}
.tabs{background:var(--wood);border-bottom:none;padding:6px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.tab{color:#f1dfc0;font-family:Fredoka;font-weight:600;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tab.on{background:linear-gradient(var(--cream),var(--cream2));color:var(--brown);text-shadow:none;box-shadow:0 3px 0 var(--lipcream),inset 0 2px 0 #fff8e8}
.tab .dot{border:2px solid #5e3719}
.panel{padding:12px 14px 14px}
.panel .row{border-bottom:1px dashed rgba(255,220,170,.16)}
.panel .row:last-child{border:none}
.sec{color:#ffe2b0}
.bcard{background:var(--walnut2);border:none;box-shadow:inset 0 1px 0 rgba(255,220,170,.1),0 3px 0 rgba(0,0,0,.25)}
.bcard .own{background:rgba(0,0,0,.25)}
.bund button{border:none!important;box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,220,170,.12)}
.bund button:active{transform:translateY(3px);box-shadow:none}
.crate{border:none;box-shadow:0 0 0 2px rgba(255,197,61,.55),0 3px 0 2px rgba(0,0,0,.3)}
.passcard{border:none;background:linear-gradient(120deg,#ffe3a3,#ffcf6b);box-shadow:0 4px 0 #b9832e,inset 0 2px 0 #fff4d0}
.passcard .nm{color:#7a3d00}
.passcard .nm small{color:#7a5322}
.passcard.on{background:linear-gradient(120deg,#c9f0cf,#9be0a8);box-shadow:0 4px 0 #3f8f52,inset 0 2px 0 #effff1}
.passcard.on .nm{color:#1f5f2e}
.passcard.on .nm small{color:#2f6b3c}
.ixhead{background:var(--walnut2);box-shadow:inset 0 1px 0 rgba(255,220,170,.1)}
.phead{color:#cbb79a}

/* --- popups: walnut box in a wooden frame --- */
.modal{background:rgba(10,8,5,.6);backdrop-filter:blur(3px)}
.modal.on .mbox{animation:popin .2s ease-out}
.mbox{background:var(--walnut);border:none;border-radius:22px;--mut:#cbb79a;--card2:#4a321d;--line:rgba(255,220,170,.14);
  box-shadow:0 0 0 5px #6b4423,0 0 0 8px #4a2c14,0 18px 40px rgba(0,0,0,.6)}
.mname{color:#fff3dc;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.mbox.menu .savebox{background:var(--walnut2);border:none}
#svTxt{background:#1f140b!important;border-color:rgba(255,220,170,.2)!important}
.setrow{background:linear-gradient(#fff3d9,#f0d7a6)}
.book,.mbox{--c0:#d9d0c1}
.ev svg[style*="brightness(0)"]{filter:brightness(0) invert(.9) opacity(.4)!important}
.modal.on .mbox.shake{animation:sh .45s}
/* events card now lives at the top of the Index tab */
.panel .ev{position:static;display:block;margin:0 0 10px;padding-right:0;background:var(--walnut2);box-shadow:inset 0 1px 0 rgba(255,220,170,.1),0 3px 0 rgba(0,0,0,.25);animation:none}
.book .prog{background:rgba(0,0,0,.32)}
/* bucket: full-bucket cast button + favorite stars */
.act.full{background:linear-gradient(var(--coral1),var(--coral2));box-shadow:0 6px 0 var(--corallip),0 10px 18px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.35);text-shadow:0 2px 0 var(--corallip);font-size:20px}
.act.full:active{box-shadow:0 1px 0 var(--corallip),inset 0 3px 0 rgba(255,255,255,.35)}
.fav{background:none;border:none;font-size:22px;line-height:1;color:#8a6a48;cursor:pointer;padding:4px 6px;transition:transform .12s}
.fav.on{color:#ffd166;text-shadow:0 0 8px rgba(255,209,102,.6)}
.fav:active{transform:scale(1.3)}
.favnote{color:#ffd166}
/* Angler Pass "coming soon" (while real payments are off) */
.passcard.soon{background:linear-gradient(120deg,#5a4520,#3d3020);box-shadow:inset 0 0 0 2px rgba(255,209,102,.35),0 3px 0 rgba(0,0,0,.3)}
.passcard.soon .nm{color:#ffd166}
.passcard.soon .nm small{color:#d9c49a}
.soontag{font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:#3a2600;background:#ffd166;padding:5px 9px;border-radius:999px;white-space:nowrap}

/* ---------- tutorial coach bubble ---------- */
.coach{position:absolute;left:50%;bottom:92px;transform:translate(-50%,8px);z-index:5;max-width:86%;text-align:center;
  background:linear-gradient(var(--cream),var(--cream2));color:var(--brown);font:600 14px Inter;padding:9px 14px;border-radius:14px;
  box-shadow:0 4px 0 var(--lipcream),0 8px 18px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.coach.on{opacity:1;transform:translate(-50%,0);animation:coachbob 1.6s ease-in-out infinite}
.coach b{color:#b8480a}
@keyframes coachbob{50%{transform:translate(-50%,-4px)}}
.act.coachme{animation:coachpulse 1s ease-in-out infinite}
@keyframes coachpulse{50%{transform:scale(1.035);filter:brightness(1.12)}}

/* ---------- reeling: jolt when a fish thrashes ---------- */
.reel.jolt{animation:jolt .28s}
@keyframes jolt{20%{transform:translateX(-7px) rotate(-1.2deg)}50%{transform:translateX(6px) rotate(1deg)}80%{transform:translateX(-3px)}}

/* ---------- 4 tabs ---------- */
.tab{font-size:14px;padding:9px 2px}
@media (max-width:400px){.tab{font-size:12.5px}}

/* ---------- goals ---------- */
.goal{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;border-radius:12px;background:var(--walnut2);box-shadow:inset 0 1px 0 rgba(255,220,170,.08)}
.goal .gt{flex:1;font-weight:600;font-size:14px;min-width:0}
.goal .gt small{display:block;font-weight:400;font-size:12px;color:#cbb79a;margin-top:1px}
.goal .prog{height:6px;margin:6px 0 0}
.goal.ready{box-shadow:inset 0 0 0 2px rgba(255,209,102,.6),0 0 12px rgba(255,209,102,.18)}
.goal.got{opacity:.55}
.gok{font:700 18px Fredoka;color:#7fe3a0;padding:0 6px}
.tab .dot#gdot{right:2px}

/* ---------- rarity labels (not just color) ---------- */
.rtag{display:inline-block;font:700 9.5px Inter;letter-spacing:.05em;text-transform:uppercase;padding:1px 5px;border-radius:4px;margin-right:2px;vertical-align:1px;color:#1b130b}
.rtag.r0{background:#cfc6b8}.rtag.r1{background:#6fd389}.rtag.r2{background:#6aa7ff}.rtag.r3{background:#bf94ff}.rtag.r4{background:#ffc53d}.rtag.r5{background:#ff7dbd}

/* ---------- home screen ---------- */
.home{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,rgba(10,20,32,.45),rgba(8,12,20,.88) 75%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .45s}
.home.out{opacity:0;pointer-events:none}
.hbox{text-align:center;max-width:360px;animation:homein .7s ease-out}
@keyframes homein{from{opacity:0;transform:translateY(14px)}}
.hicon{width:112px;height:112px;border-radius:28px;box-shadow:0 0 0 5px #6b4423,0 0 0 9px #4a2c14,0 16px 34px rgba(0,0,0,.55);animation:hbob 3s ease-in-out infinite}
@keyframes hbob{50%{transform:translateY(-6px) rotate(-2deg)}}
.hlogo{font-size:44px;margin:22px 0 2px;line-height:1.05}
.htag{margin:0;color:#e9d9bb;font:500 15px Inter;letter-spacing:.02em}
.act.hplay{width:auto;display:inline-block;padding:16px 46px;margin-top:26px;font-size:24px}
.hstats{margin-top:18px;color:#cbb79a;font-size:13.5px;line-height:1.7}
.hgift{color:#ffd166;font-weight:600}

/* ---------- drawn icons (replace emoji) ---------- */
.ico{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.25em;line-height:0;flex:none}
.ico svg{width:100%;height:100%;display:block;overflow:visible}
.ibtn .ico{width:22px;height:22px;vertical-align:middle}
.tab .ico{margin-right:3px}
.toast .ico{width:1.15em;height:1.15em}
/* tabs: icon above label (fits 4 tabs on small phones) */
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12.5px;padding:7px 2px 6px;line-height:1.1}
.tab .ico{width:22px;height:22px;margin:0}
.tab .dot{top:2px;right:calc(50% - 24px)}
.tab .dot#gdot{right:calc(50% - 24px)}
@media (max-width:400px){.tab{font-size:12px}}
.newb.from{background:#3f6b4f;color:#e8f7ec}

/* ---------- bait icons: the lure glints, the golden bait glows ---------- */
.ico-lure .glint{animation:glint 2.4s ease-in-out infinite}
@keyframes glint{0%,55%{transform:translateX(-10px) rotate(20deg)}85%,100%{transform:translateX(16px) rotate(20deg)}}
.ico-gold svg{filter:drop-shadow(0 0 3px rgba(255,200,60,.75));animation:goldpulse 2s ease-in-out infinite}
@keyframes goldpulse{50%{filter:drop-shadow(0 0 6px rgba(255,210,80,1))}}
.ico-gold .gspark{transform-origin:18px 5px;animation:gspark 2s ease-in-out infinite}
@keyframes gspark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.ico-lure .glint{transform-box:fill-box;transform-origin:center}

/* ---------- My Tank ---------- */
.tankbtn{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 10px;padding:12px 14px;border:none;border-radius:14px;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(120deg,#1f6fb0,#123f6e);box-shadow:0 4px 0 #0a2a4a,inset 0 2px 0 rgba(255,255,255,.2);transition:transform .08s,box-shadow .08s}
.tankbtn:active{transform:translateY(4px);box-shadow:0 0 0 #0a2a4a,inset 0 2px 0 rgba(255,255,255,.2)}
.tankbtn .tk{font-size:26px}.tankbtn .tk .ico{width:30px;height:30px}
.tankbtn b{display:block;font:600 17px Fredoka}.tankbtn small{display:block;font-size:12px;color:#bfe3ff}
.tankbtn .go{margin-left:auto;font:700 26px Fredoka;opacity:.8}
.tankview{position:fixed;inset:0;z-index:35;display:none;background:#06182c}
.tankview.on{display:block;animation:popin .25s ease-out}
#tankCv{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}
.tankhud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(rgba(10,20,32,.65),rgba(10,20,32,0));pointer-events:none}
.tankhud>*{pointer-events:auto}
.tanktitle{font:700 22px Fredoka;color:#fff3dc;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.tanktitle small{font:500 13px Inter;color:#bfe3ff;text-shadow:none}
.tankhint{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(20,12,6,.75);color:#f1dfc0;font-size:13px;padding:8px 14px;border-radius:999px;transition:opacity .6s;pointer-events:none}
.tankempty{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px;color:#e9f4ff}
.tankempty div{font-size:48px}.tankempty div .ico{width:56px;height:56px}
.tankempty b{font:700 22px Fredoka}.tankempty span{color:#bfe3ff;font-size:14px;max-width:280px}
.tanktitle{white-space:nowrap;font-size:20px}
.tanktitle small{display:block;font-size:12px;margin-top:-2px}

/* ---------- scene shake when landing big/rare fish ---------- */
.scene.shake{animation:sceneshake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes sceneshake{10%,90%{transform:translate(calc(var(--shk) * -.3),0)}20%,80%{transform:translate(calc(var(--shk) * .6),calc(var(--shk) * -.2))}30%,50%,70%{transform:translate(calc(var(--shk) * -1),calc(var(--shk) * .3))}40%,60%{transform:translate(var(--shk),calc(var(--shk) * -.3))}}

/* ---------- quick catch card ---------- */
.qcard{position:absolute;left:14px;right:14px;bottom:16px;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(var(--cream),var(--cream2));color:var(--brown);box-shadow:0 4px 0 var(--lipcream),0 10px 22px rgba(0,0,0,.35);transform:translateY(130%);opacity:0;transition:transform .3s cubic-bezier(.2,1.4,.4,1),opacity .2s}
.qcard.on{transform:none;opacity:1}
.qcard .qi{width:62px;height:40px;flex:none}.qcard .qi svg{width:100%;height:100%;overflow:visible}
.qcard .qt{flex:1;min-width:0}.qcard b{font:600 15px Fredoka;display:block}.qcard small{font-size:11.5px;color:#7a5322}
.qcard .btn{padding:7px 11px;font-size:12.5px}

/* ---------- XP bar ---------- */
.xpbar{display:flex;align-items:center;gap:8px;margin:-2px 0 8px;cursor:pointer}
.xpbar .lv{font:700 13px Fredoka;color:var(--brown);background:linear-gradient(var(--cream),var(--cream2));padding:2px 9px;border-radius:999px;box-shadow:0 2px 0 var(--lipcream);white-space:nowrap}
.xpbar .xpt{flex:1;height:8px;border-radius:999px;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);overflow:hidden}
.xpbar .xpt i{display:block;height:100%;background:linear-gradient(90deg,#5fcf74,#c6ff3a);border-radius:999px;transition:width .6s}
.xpbar .xpn{font-size:11px;color:#9fb6c4;white-space:nowrap}

/* ---------- level up / calendar / pot / leaderboards ---------- */
.lvbig{font:700 64px Fredoka;color:#ffd166;text-shadow:0 4px 0 #8a4b10,0 0 24px rgba(255,209,102,.6);line-height:1;margin:6px 0}
.unl{margin-top:10px;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 10px;font-size:13px;color:#ffe2b0}
.calgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cday{position:relative;background:var(--walnut2);border-radius:10px;padding:6px 4px;text-align:center;font-size:11px;color:#f1dfc0;min-height:58px}
.cday small{display:block;color:#cbb79a;font-size:10px;margin-bottom:2px}
.cday.d7{grid-column:span 2;background:linear-gradient(120deg,#5a4520,#3d3020)}
.cday.today{box-shadow:inset 0 0 0 2px #ffd166,0 0 12px rgba(255,209,102,.35)}
.cday.done{opacity:.55}.cday .ck{position:absolute;top:2px;right:6px;color:#7fe3a0}.cday div{margin-top:2px}
.saver,.calpass{margin-top:8px;font-size:12px;color:#cbb79a}.calpass{color:#ffd166}
.haul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.haul div{background:var(--walnut2);border-radius:10px;padding:4px}.haul svg{width:100%;height:46px;overflow:visible}.haul small{font-size:10.5px;color:#f1dfc0}
.lbt{margin:8px 0 6px;color:#ffe2b0}.lbr{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:9px;margin-bottom:4px;background:var(--walnut2);font-size:13.5px}
.lbr span{width:18px;color:#cbb79a}.lbr b{flex:1;text-align:left}.lbr i{font-style:normal;color:#ffd166}.lbr.me{box-shadow:inset 0 0 0 2px #7fe3a0}
.lbbtn{background:linear-gradient(120deg,#8a5a1f,#5a3a12);box-shadow:0 4px 0 #3a2208,inset 0 2px 0 rgba(255,255,255,.2)}
.setnote{font-size:11.5px;color:#cbb79a;margin:4px 2px 0}

/* ---------- mastery stars on Index cards ---------- */
.mst{margin-top:3px;font-size:13px;letter-spacing:1px;color:#6b5a44}.mst span{font-size:10px;letter-spacing:0;color:#cbb79a;margin-left:4px}
.mst.t1{color:#d58a4a}.mst.t2{color:#d9e2ea}.mst.t3{color:#ffd166;text-shadow:0 0 6px rgba(255,209,102,.6)}

/* ---------- tank decorate panel ---------- */
.decor{position:absolute;right:10px;top:calc(60px + env(safe-area-inset-top));width:min(300px,calc(100% - 20px));max-height:70%;overflow:auto;display:none;z-index:3;
  background:var(--walnut);border-radius:16px;padding:10px 12px;box-shadow:0 0 0 3px #6b4423,0 10px 24px rgba(0,0,0,.5);--mut:#cbb79a}
.decor.on{display:block;animation:popin .2s}
.dhead{display:flex;align-items:center;gap:8px;font:700 18px Fredoka;color:#fff3dc;margin-bottom:6px}.dhead span{font:600 13px Inter;color:#ffd166;margin-left:auto}
.dx2{border:none;background:rgba(255,255,255,.12);color:#f1dfc0;border-radius:50%;width:26px;height:26px;cursor:pointer}
.drow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(255,220,170,.15);font-size:14px;color:#f1dfc0}
.drow .btn{padding:6px 10px;font-size:12.5px}
.tankhud .btn{padding:7px 12px}
/* ---------- 6 tabs ---------- */
.tab{font-size:11.5px;padding:7px 1px 6px}
.tab .ico{width:21px;height:21px}
@media (max-width:370px){.tab{font-size:10.5px}.tab .ico{width:19px;height:19px}}
.tanktab{display:none;padding:0 12px 12px}
#tankMini{display:block;width:100%;height:300px;border-radius:12px;box-shadow:0 0 0 3px #6b4423,inset 0 0 0 1px rgba(255,255,255,.15);touch-action:manipulation;cursor:pointer}
.phead .btn{padding:6px 10px;font-size:12px}
.soonbox{background:linear-gradient(120deg,#5a4520,#3d3020);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:inset 0 0 0 2px rgba(255,209,102,.35)}
.soonbox b{display:block;font:600 16px Fredoka;color:#ffd166}.soonbox span{font-size:13px;color:#e9dcc2}
.lbr .rtag{width:auto;margin-right:4px}

/* ---------- small fixes ---------- */
/* #1 long messages wrap instead of running off the screen */
.toast{white-space:normal;max-width:calc(100vw - 24px);width:max-content;text-align:center;line-height:1.35;border-radius:18px}
/* #4 header fits on the smallest phones */
@media (max-width:350px){h1{font-size:17px}.topr{gap:4px}.ibtn{width:30px;height:30px}.ibtn .ico{width:18px;height:18px}.coins{font-size:14px;padding:5px 8px}}
/* #8 tab badges stay inside the tab on tiny screens */
@media (max-width:370px){.tab .dot{font-size:9.5px;padding:1px 5px;right:calc(50% - 20px)}}

/* ---------- previewing a locked location ---------- */
.spot.peek{box-shadow:0 3px 0 var(--lipwood),inset 0 0 0 2px #ffd166;color:#ffd166}
.peek{position:absolute;left:14px;right:14px;bottom:18px;z-index:6;display:none;padding:10px 12px 12px;border-radius:14px;background:var(--walnut);color:#f1dfc0;
  box-shadow:0 0 0 3px #6b4423,0 8px 22px rgba(0,0,0,.45)}
.peek.on{display:block;animation:popin .25s ease-out}
.pk1{display:flex;align-items:center;justify-content:space-between}.pk1 b{font:600 18px Fredoka;color:#fff3dc}
.pkx{border:none;background:rgba(255,255,255,.12);color:#f1dfc0;border-radius:50%;width:26px;height:26px;cursor:pointer}
.pk2{font-size:12.5px;color:#cbb79a;margin:2px 0 8px}.pk2 .rtag{vertical-align:0}
.pkbar{height:8px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden}.pkbar i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#ff8a5b)}
.pk3{font-size:12px;color:#ffe2b0;margin:4px 0 8px;text-align:right}
.peek .btn{width:100%}

/* ---------- treasure chest ---------- */
.cwrap{width:190px;margin:4px auto 0;cursor:pointer}.cwrap svg{width:100%;height:auto;overflow:visible}
/* the lid pops up and tips back on its hinge (stays attached), with a little overshoot */
.chest .lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.3,1.8,.5,1)}
.chest.open .lid{transform:translateY(-22px) rotate(-14deg) scaleY(.82)}
.chest .cglow{transition:opacity .4s}.chest.open .cglow{opacity:1;filter:blur(3px)}
.chest.bob{animation:cbob 1.1s ease-in-out infinite}@keyframes cbob{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.chest.shake{animation:cshake .6s}@keyframes cshake{10%,50%,90%{transform:translateX(-6px) rotate(-4deg)}30%,70%{transform:translateX(6px) rotate(4deg)}}
.ctap{font:600 16px Fredoka;color:#ffd166;margin-top:4px;animation:pulse .7s infinite alternate;cursor:pointer}
.camt{font:700 40px Fredoka;color:#ffd166;text-shadow:0 3px 0 #8a4b10;margin:2px 0}.camt.pop{animation:popin .3s}
/* ---------- angler wardrobe ---------- */
.wardcv{display:block;width:150px;height:150px;margin:0 auto 6px;border-radius:14px;box-shadow:0 0 0 3px #6b4423}
.wl{font:600 13px Fredoka;color:#ffe2b0;margin:8px 0 4px}
.hats{display:flex;flex-wrap:wrap;gap:6px}.hatb{border:none;border-radius:10px;padding:6px 9px;font:600 12px Inter;color:var(--brown);background:linear-gradient(#fff3d9,#f0d7a6);box-shadow:0 3px 0 var(--lipcream);cursor:pointer}
.hatb small{display:block;font-size:10.5px;color:#8a4b10}.hatb.on{background:linear-gradient(var(--coral1),var(--coral2));color:#fff;box-shadow:0 3px 0 var(--corallip)}
.sws{display:flex;gap:7px;flex-wrap:wrap}.sw{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.25);cursor:pointer}.sw.on{border-color:#fff;box-shadow:0 0 0 2px #ffd166}
/* Tab bar: plain wood grain (no stray plank seams), with seams placed exactly between the tabs */
.tabs{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 3px,rgba(0,0,0,.03) 3px 7px),linear-gradient(180deg,#80502a,#5e3719)}
.tab+.tab::before{content:"";position:absolute;left:-3px;top:6px;bottom:6px;width:2px;border-radius:1px;background:rgba(0,0,0,.2)}
.tab.on::before,.tab.on+.tab::before{display:none}
/* Cloud save box in Settings */
.clnote{font-size:12px;color:var(--mut);margin:4px 0 8px;line-height:1.4}.clnote b{color:var(--txt)}
.clin{width:100%;font:16px Inter,system-ui,sans-serif;background:#0f1712;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px;box-sizing:border-box}
#clCode{letter-spacing:.3em;text-align:center;font-size:20px}
.clerr{color:#ff8a7a;font-size:12px;margin-top:6px;min-height:1px}
.clpick{width:100%;margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:2px}.clpick small{font-size:11.5px;opacity:.8;font-weight:500}
.cldel{display:block;margin:10px auto 0;background:none;border:none;color:#ff9a8a;font:600 12.5px Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:4px}
.clnote a,.foot a{color:inherit;text-decoration:underline}