.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);font-size:12px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.log{white-space:pre-wrap;word-break:break-word;max-height:52vh;overflow:auto}
.kv{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center}
.kv label{color:var(--muted);font-size:12px}
.kv input{max-width:none}
.btnrow{display:flex;flex-wrap:wrap;gap:10px}
.mini{font-size:12px;color:var(--muted)}
.hide{display:none !important}
@keyframes fadeIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* Mobile-first game layout (reference-inspired) */
html,body{height:100%}
body{overflow:hidden}
.game{
  width:100vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  background: var(--bg);
}
/* Area themes (reference-like gradients) */
.game-pond{background:linear-gradient(to bottom,#edf7f2 0%,#daf2e4 40%,#c7edd6 100%)}
.game-lake{background:linear-gradient(to bottom,#e8f4fc 0%,#d4ecff 40%,#bfe2ff 100%)}
.game-sea{background:linear-gradient(to bottom,#f0f9ff 0%,#d6f3ff 40%,#bcedff 100%)}
.water-pond{background:linear-gradient(to bottom,#c7edd6 0%,#a8e7c9 50%,#88e0bb 100%)}
.water-lake{background:linear-gradient(to bottom,#bfe2ff 0%,#9cd5ff 50%,#79cbff 100%)}
.water-sea{background:linear-gradient(to bottom,#bcedff 0%,#94e0ff 50%,#6bd6ff 100%)}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 10px rgba(2,6,23,.06);
}
[data-theme="dark"] .topbar,[data-theme="calm"] .topbar{background: rgba(15,23,42,.18)}
.topitem{display:flex;align-items:baseline;gap:6px;color:var(--text);font-size:14px}
.topitem span{font-weight:700}
.iconbtn{
  border:none;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding:8px 10px;
  font-size:14px;
  cursor:pointer;
}
[data-theme="dark"] .iconbtn,[data-theme="calm"] .iconbtn{background: rgba(15,23,42,.22)}
.areabar{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.48);
}
[data-theme="dark"] .areabar,[data-theme="calm"] .areabar{background: rgba(15,23,42,.14)}
.area{
  flex: 0 0 auto;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.75);
  font-size:13px;
  cursor:pointer;
}
.area.on{background: var(--ma2); color:#fff; border-color: transparent; box-shadow: 0 3px 10px rgba(56,189,248,.22)}
.areahint{margin-left:auto;color:var(--muted);font-size:12px}
.scene{
  flex: 1 1 auto;
  position:relative;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.35);
}
[data-theme="dark"] .scene,[data-theme="calm"] .scene{background: rgba(2,6,23,.10)}
.scene .water{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  height:auto;
  border-radius: 18px;
}
.tipline{
  position:absolute;
  left:12px;
  top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index: 20;
  pointer-events:none;
}
.tiptext{
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.22);
  background: rgba(245,158,11,.12);
  color: var(--warn);
  font-size:12px;
  max-width: 62vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.phasebadge{
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.52);
  color: var(--muted);
  font-size:12px;
}
[data-theme="dark"] .phasebadge,[data-theme="calm"] .phasebadge{background: rgba(15,23,42,.18)}
.cooldownline{
  position:absolute;
  left:12px;
  right: 92px;
  top: 52px;
  z-index: 20;
  display:flex;
  gap:10px;
  align-items:center;
  pointer-events:none;
}
.cooldownline .bar{min-width:0; height:10px}
.storage{
  position:absolute;
  right: 10px;
  top: 90px;
  bottom: 80px;
  width: 96px;
  z-index: 25;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.62);
  box-shadow: 0 4px 14px rgba(2,6,23,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
[data-theme="dark"] .storage,[data-theme="calm"] .storage{background: rgba(15,23,42,.20)}
.stor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 8px 6px 8px;
  gap:6px;
}
.stor-title{font-size:12px;color:var(--muted);font-weight:700}
.miniBtn{
  border:none;
  background: rgba(56,189,248,.18);
  color: rgba(2,6,23,.72);
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 10px;
  padding:6px 8px;
  font-size:12px;
  cursor:pointer;
}
[data-theme="dark"] .miniBtn,[data-theme="calm"] .miniBtn{color: rgba(255,255,255,.82)}
.stor-list{
  padding:6px;
  overflow:auto;
  gap:6px;
}
.stor-list .inv-item{
  padding:6px;
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
[data-theme="dark"] .stor-list .inv-item,[data-theme="calm"] .stor-list .inv-item{background: rgba(2,6,23,.14)}
.stor-list .inv-item .rightTag{display:none}
.stor-list .inv-item .m{display:none}
.stor-list .inv-item .n{font-size:11px}
.stor-list .ico{width:42px;height:42px;border-radius:14px}
.btmBtns{
  display:flex;
  gap:12px;
}
.btnBig{
  flex:1;
  padding:14px 0;
  border:none;
  border-radius: 30px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,.10);
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.72);
  color: rgba(2,6,23,.78);
}
.btnBig.hide{display:none}
.btnBig.primary{animation: btnPulse 2s infinite}
@keyframes btnPulse{
  0%{box-shadow:0 0 0 0 rgba(56,189,248,.28), 0 6px 18px rgba(2,6,23,.10)}
  70%{box-shadow:0 0 0 14px rgba(56,189,248,0), 0 6px 18px rgba(2,6,23,.10)}
  100%{box-shadow:0 0 0 0 rgba(56,189,248,0), 0 6px 18px rgba(2,6,23,.10)}
}
.btnBig.primary{
  background: var(--ma2);
  color:#fff;
  border-color: transparent;
}
.btnBig:disabled{opacity:.55;cursor:not-allowed}

/* Settings modal */
.modal{
  position:fixed;
  inset:0;
  z-index: 999;
  background: rgba(0,20,40,.25);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 12px;
}
.modalPanel{
  width: min(720px, 100%);
  max-height: 86vh;
  overflow:auto;
  border-radius: 20px;
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 16px 46px rgba(2,6,23,.18);
  padding: 14px;
  animation: fadeIn .18s ease-out;
}
.modalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.modalTitle{font-size:14px;font-weight:900;color:var(--text)}

/* Game demo */
.game-wrap{display:grid;grid-template-columns:1fr;gap:12px}
.top-stats{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.stats-left{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bigstat{display:flex;gap:10px;align-items:baseline}
.bigstat .num{font-size:22px;font-weight:700;color:var(--text)}
.bigstat .lbl{font-size:12px;color:var(--muted)}
.water{
  position:relative;
  height: 360px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: radial-gradient(1200px 500px at 50% 20%, rgba(96,165,250,.20), transparent 60%),
              linear-gradient(180deg, rgba(34,211,238,.10), rgba(59,130,246,.08));
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  --tug: 0;      /* 0..1, bite pull strength */
  --bend: 0;     /* 0..1, rod bend strength */
  --bobX: 50%;
  --bobY: 54%;
}
[data-theme="light"] .water{box-shadow: 0 18px 46px rgba(2,6,23,.08)}
.water::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 220px at 50% 100%, rgba(245,158,11,.10), transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 8px, transparent 8px, transparent 16px);
  opacity:.35;
  z-index: 0;
  pointer-events:none;
}
/* Water surface line */
.surface{
  position:absolute;
  left:0; right:0;
  top: 54%;
  height: 0;
  z-index: 2;
  pointer-events:none;
}
.surface::before{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(255,255,255,.08), transparent);
  opacity:.55;
  filter: blur(.2px);
}
.surface::after{
  content:"";
  position:absolute;
  left:-20%;
  right:-20%;
  top:-10px;
  height: 18px;
  background: radial-gradient(400px 18px at 50% 100%, rgba(255,255,255,.10), transparent 65%);
  opacity:.35;
}
/* Sky / clouds (pure CSS, reference-like) */
.sky{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:54%;
  z-index: 1;
  pointer-events:none;
}
.sun{
  position:absolute;
  top: 10%;
  right: 12%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,217,102,.95);
  box-shadow: 0 0 28px rgba(255,217,102,.35);
  opacity:.95;
}
.cloud{
  position:absolute;
  width: 56px;
  height: 28px;
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
  animation: cloudMove 35s linear infinite;
  filter: blur(.1px);
  opacity:.9;
}
.cloud::before,.cloud::after{
  content:"";
  position:absolute;
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
}
.cloud::before{width: 28px;height: 22px;left: 8px;top: -10px}
.cloud::after{width: 30px;height: 24px;right: 10px;top: -8px}
.cloud1{top: 12%; left: 12%}
.cloud2{top: 18%; right: 18%; animation-duration: 44s; opacity:.82}

/* Wavy waterline texture like reference */
.waterLine{
  position:absolute;
  left:0; top:54%;
  width:100%;
  height:46%;
  z-index: 2;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='50'%3E%3Cpath fill='rgba(255,255,255,0.20)' d='M0,25 Q85,12 170,25 T340,25'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 340px 50px;
  animation: waterMove 12s linear infinite;
  opacity:.65;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.05));
}
/* Float (bobber) like reference: half white + half accent */
.bobber{
  position:absolute;
  left: var(--bobX);
  top: var(--bobY);
  transform: translate(-50%,-50%);
  width: 14px;
  height: 54px;
  display:none;
  z-index: 3;
  user-select:none;
  transition: left 520ms cubic-bezier(.2,.9,.2,1), top 520ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18));
}
.bobber .floatBody{
  width:100%;
  height:100%;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 50%, rgba(251,146,60,.95) 50%);
  box-shadow: 0 0 10px rgba(0,0,0,.14);
  border: 1px solid rgba(2,6,23,.12);
}
.water.is-waiting .bobber,
.water.is-bite .bobber,
.water.is-cooldown .bobber{display:block}
.water.is-waiting .bobber{animation: floatReal 2.2s ease-in-out infinite}

/* Make bobber feel half-submerged */
.bobber::after{
  content:"";
  position:absolute;
  left: -10px;
  right: -10px;
  top: 58%;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.10));
  border-radius: 999px;
  opacity:.5;
  pointer-events:none;
}
/* keep bobber straddling the surface line */
.water.is-waiting .bobber,
.water.is-bite .bobber{top: var(--bobY)}
.water.is-bite .bobber::after{opacity:.72}
.water.is-bite .bobber{
  animation: biteTug 520ms ease-in-out infinite;
}
@keyframes biteTug{
  0%{transform:translate(-50%,-50%) translateY(calc(var(--tug) * 10px))}
  45%{transform:translate(-50%,-50%) translateY(calc(var(--tug) * 46px))}
  100%{transform:translate(-50%,-50%) translateY(calc(var(--tug) * 16px))}
}
@keyframes floatReal{
  0%{transform:translate(-50%,-50%) translateY(0) rotate(0deg)}
  50%{transform:translate(-50%,-50%) translateY(-3px) rotate(.6deg)}
  100%{transform:translate(-50%,-50%) translateY(0) rotate(0deg)}
}

/* Hook splash emoji (brief) */
.hook{
  position:absolute;
  left: var(--bobX);
  top: 54%;
  transform: translate(-50%,-80px);
  font-size: 18px;
  opacity:0;
  z-index: 5;
  pointer-events:none;
}
.water.is-cast .hook{animation: hookSplash .45s ease-out forwards}
@keyframes hookSplash{
  0%{transform:translate(-50%,-80px);opacity:1}
  100%{transform:translate(-50%,0);opacity:0}
}

@keyframes cloudMove{0%{transform:translateX(0)}100%{transform:translateX(35px)}}
@keyframes waterMove{0%{background-position-x:0}100%{background-position-x:200px}}
/* Water cut overlay: covers lower part of objects for "half-in-water" look */
.watercut{
  position:absolute;
  left:0; right:0;
  top: 54%;
  bottom: 0;
  z-index: 4;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(2,6,23,.08) 26%, rgba(2,6,23,.02)),
    radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,.06), transparent 65%);
  opacity:.78;
}
[data-theme="light"] .watercut{opacity:.55}
.splash{
  position:absolute;
  left:50%;
  top:54%;
  width: 180px;
  height: 90px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  opacity:0;
  z-index:2;
  pointer-events:none;
}
.water.is-cast .splash{animation: splash 520ms ease-out}
@keyframes splash{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.65)}
  35%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.15)}
}
/* Rod + line (SVG rod, bend driven by JS) */
.rodSvg{
  position:absolute;
  right:-22px;
  bottom:-44px;
  width: 460px;
  height: 360px;
  transform-origin: 90% 90%;
  transform: rotate(-12deg);
  z-index: 4;
  pointer-events:none;
  opacity: .98;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.18));
}
[data-theme="guofeng"] .rodSvg{filter: drop-shadow(0 14px 26px rgba(2,6,23,.10))}
.rodSvg .rodGuide{opacity:.92}
.rodSvg #rodPath{stroke-width: 2.0}
.rodSvg #rodGrip{stroke-width: 5.2}
/* Dynamic line via SVG path */
.line-svg{
  position:absolute;
  inset:0;
  z-index: 3;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
}
.water.is-waiting .line-svg,
.water.is-bite .line-svg,
.water.is-cooldown .line-svg{opacity: 1;}
.line-svg path{
  stroke: rgba(17,24,39,.26);
  stroke-width: 0.55;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.08));
  opacity: .72;
}
.water.is-bite .line-svg path{
  stroke: rgba(17,24,39,.30);
  stroke-width: 0.80;
  opacity: .85;
}
.water.is-bite .rodSvg{animation: rodPull .22s ease-in-out infinite alternate}
@keyframes rodPull{
  0%{transform: rotate(-12deg)}
  100%{transform: rotate(-4deg)}
}
.water.is-cast .rodSvg{animation: rodCast .65s ease-out}
@keyframes rodCast{
  0%{transform: rotate(-12deg)}
  45%{transform: rotate(-36deg)}
  100%{transform: rotate(-12deg)}
}
.bobber.is-float{animation: bob 2.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}
.bobber.is-bite{animation: bite .42s infinite}
@keyframes bite{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.06);opacity:.7}}
.ring{
  position:absolute;
  left:50%; top:58%;
  transform: translate(-50%,-50%) scale(.2);
  width: 210px; height: 210px;
  border-radius: 999px;
  border: 3px solid rgba(82,155,138,.35);
  opacity:0;
  z-index:2;
  pointer-events:none;
}
.ring.is-on{animation: ring 1s ease-out forwards}
@keyframes ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
/* Underwater fish shadows */
.fish-layer{
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;
  opacity:.55;
  filter: blur(.2px);
}
.fish-shadow{
  position:absolute;
  width: 90px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(2,6,23,.20), rgba(2,6,23,.06), transparent 72%);
  transform: translate(-50%,-50%) scaleX(1.15);
  opacity:.55;
  mix-blend-mode: multiply;
}
/* Inventory fish icon */
.inv .ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(2,6,23,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
[data-theme="light"] .inv .ico{background: rgba(2,6,23,.04); border-color: rgba(2,6,23,.08)}
.inv .ico img{width:100%;height:100%;display:block}
.inv .inv-item{gap:12px}
.inv .rightTag{
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}
[data-theme="cartoon"] .fish-shadow{
  background: radial-gradient(closest-side, rgba(2,6,23,.16), rgba(2,6,23,.05), transparent 72%);
  opacity:.45;
}
.toast{
  position:absolute; left:50%; top:14px;
  transform:translateX(-50%);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.25);
  background: rgba(245,158,11,.12);
  color: var(--warn);
  font-size:12px;
  z-index: 5;
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
  max-width: min(680px, calc(100% - 28px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toast.is-on{opacity:1; transform:translateX(-50%) translateY(2px)}
.statusline{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top: 10px;
}
.status-badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.10);
  color: var(--muted);
  font-size:12px;
}
[data-theme="light"] .status-badge{background: rgba(2,6,23,.03)}
.cooldown{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px;
}
.bar{
  flex:1 1 240px;
  height: 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.35);
  overflow:hidden;
  min-width: 220px;
}
[data-theme="light"] .bar{background: rgba(2,6,23,.06)}
.bar > i{
  display:block; height:100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(96,165,250,.9), rgba(52,211,153,.9));
  border-radius:999px;
  transition: width .18s ease;
}
.inv{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top: 10px;
}
.inv-item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(15,23,42,.18);
}
[data-theme="light"] .inv-item{background: rgba(2,6,23,.03)}
.inv-item .n{font-weight:600}
.inv-item .m{color:var(--muted); font-size:12px}
.split{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between}

/* Guofeng theme (soft ink-wash) */
[data-theme="guofeng"]{
  --bg: #f7f4ee;
  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.62);
  --border: rgba(15,23,42,.12);
  --text: #111827;
  --muted: rgba(17,24,39,.68);
  --warn: #a16207;
  --ma1: #b45309; /* warm tea */
  --ma2: #1f6feb; /* calm blue */
  --ma3: #0f766e; /* teal */
}
[data-theme="guofeng"] .water{
  background:
    radial-gradient(1100px 520px at 50% 18%, rgba(31,111,235,.10), transparent 62%),
    radial-gradient(900px 420px at 10% 90%, rgba(15,118,110,.10), transparent 65%),
    linear-gradient(180deg, rgba(2,132,199,.07), rgba(15,118,110,.05));
  box-shadow: 0 18px 46px rgba(2,6,23,.06);
}
[data-theme="guofeng"] .water::after{
  opacity:.22;
  background:
    radial-gradient(900px 260px at 50% 105%, rgba(180,83,9,.08), transparent 68%),
    radial-gradient(800px 260px at 80% 40%, rgba(31,111,235,.06), transparent 68%),
    repeating-linear-gradient(135deg, rgba(17,24,39,.035), rgba(17,24,39,.035) 10px, transparent 10px, transparent 20px);
}

/* Cartoon theme (bright + rounded) */
[data-theme="cartoon"]{
  --bg: #eef7ff;
  --panel: rgba(255,255,255,.92);
  --panel2: rgba(255,255,255,.78);
  --border: rgba(2,6,23,.10);
  --text: #0b1220;
  --muted: rgba(11,18,32,.62);
  --warn: #c2410c;
  --ma1: #fb923c;
  --ma2: #38bdf8;
  --ma3: #34d399;
}
[data-theme="cartoon"] .water{
  border: 2px solid rgba(2,6,23,.10);
  background:
    radial-gradient(1200px 520px at 50% 15%, rgba(56,189,248,.22), transparent 62%),
    radial-gradient(900px 420px at 18% 92%, rgba(52,211,153,.18), transparent 64%),
    linear-gradient(180deg, rgba(125,211,252,.18), rgba(59,130,246,.10));
  box-shadow: 0 18px 46px rgba(2,6,23,.08);
}
[data-theme="cartoon"] .water::after{
  opacity:.16;
  background:
    radial-gradient(900px 260px at 50% 105%, rgba(251,146,60,.12), transparent 70%),
    repeating-linear-gradient(135deg, rgba(2,6,23,.03), rgba(2,6,23,.03) 10px, transparent 10px, transparent 20px);
}
[data-theme="cartoon"] .bobber{
  filter: drop-shadow(0 14px 26px rgba(2,6,23,.18));
}