:root{
  --bg:#06111f; --panel:rgba(8,25,42,.78); --panel2:rgba(12,35,56,.88);
  --text:#f4fbff; --muted:#b7c8d5; --blue:#22a7ff; --gold:#ffc857; --green:#45d483;
  --border:rgba(255,255,255,.15); --shadow:0 24px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%;margin:0} body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#020912;color:var(--text);overflow:hidden}.app{min-height:100dvh;display:grid;place-items:center;position:relative;overflow:hidden}.scene-layer{position:absolute;inset:0;pointer-events:none}.sky{background:radial-gradient(circle at 50% 14%,rgba(255,199,100,.45),transparent 28%),linear-gradient(180deg,#10233c 0%,#0d2740 32%,#081724 100%);transition:1s}.water{top:34%;background:linear-gradient(180deg,rgba(40,122,161,.25),rgba(5,20,31,.94)),repeating-linear-gradient(-8deg,rgba(255,255,255,.08) 0 2px,transparent 2px 16px);filter:saturate(1.1);animation:waterMove 7s linear infinite}.boat{top:auto;height:39%;bottom:-7%;background:linear-gradient(115deg,transparent 0 15%,rgba(42,25,13,.95) 16% 43%,rgba(99,62,31,.95) 44% 49%,rgba(31,19,12,.98) 50% 68%,transparent 69%),linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,198,90,.08),rgba(0,0,0,.3));clip-path:polygon(0 42%,100% 0,100% 100%,0 100%);opacity:.96}.time-subuh .sky{background:radial-gradient(circle at 45% 18%,rgba(136,176,255,.18),transparent 26%),linear-gradient(180deg,#081226,#14213c 45%,#071724)}.time-pagi .sky{background:radial-gradient(circle at 48% 18%,rgba(255,224,135,.55),transparent 28%),linear-gradient(180deg,#62a7d7 0%,#1f6a94 45%,#0d2635 100%)}.time-siang .sky{background:radial-gradient(circle at 44% 14%,rgba(255,244,195,.7),transparent 26%),linear-gradient(180deg,#3e9ed9 0%,#1372a4 42%,#0d2a3b 100%)}.time-senja .sky{background:radial-gradient(circle at 47% 17%,rgba(255,174,75,.65),transparent 30%),linear-gradient(180deg,#201639 0%,#7a3e35 42%,#061724 100%)}.time-malam .sky,.time-dini .sky{background:radial-gradient(circle at 70% 13%,rgba(229,240,255,.45),transparent 7%),radial-gradient(circle at 25% 20%,rgba(45,123,255,.16),transparent 30%),linear-gradient(180deg,#020617 0%,#071629 52%,#030b12 100%)}@keyframes waterMove{to{background-position:180px 0,180px 0}}.phone-shell{position:relative;z-index:2;width:min(430px,100vw);height:100dvh;max-height:920px;padding:18px 18px 12px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,rgba(3,12,22,.18),rgba(3,12,22,.5));backdrop-filter:blur(1px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px}.brand-wrap{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.4px}.brand-text{color:#fff}.brand-text::first-letter{color:var(--blue)}.brand-logo{width:30px;height:30px;border-radius:9px;object-fit:cover}.hidden{display:none!important}.mini-badge,.live-badge,.stat-chip{border:1px solid var(--border);background:rgba(0,0,0,.34);border-radius:999px;padding:7px 10px;font-size:12px;color:#e8f7ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.hero{text-align:center;margin-top:2px}.hero h1{font-size:clamp(38px,12vw,58px);line-height:.88;margin:12px 0 6px;font-weight:1000;letter-spacing:-1.5px;text-shadow:0 5px 24px rgba(0,0,0,.75)}.hero p{margin:0;color:#ffe38b;font-weight:800}.live-badge{display:inline-block;margin-top:10px;color:#8bf7b7}.panel{background:linear-gradient(180deg,var(--panel),rgba(5,20,34,.82));border:1px solid var(--border);box-shadow:var(--shadow);border-radius:28px;padding:18px}.gate-panel{margin-top:auto}.panel h2{margin:0 0 8px;font-size:22px}.muted{margin:0 0 14px;color:var(--muted);font-size:13px}.field-label{display:block;font-size:13px;font-weight:800;color:#d8efff;margin:10px 0 7px}.input,select{width:100%;height:46px;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:0 14px;background:rgba(0,0,0,.32);color:var(--text);outline:none;font-size:15px}.input:focus{border-color:rgba(55,181,255,.75);box-shadow:0 0 0 3px rgba(34,167,255,.15)}.ticket-head{display:flex;align-items:center;justify-content:space-between}.ticket-list{display:grid;gap:8px;margin-bottom:14px}.ticket-line{display:flex;gap:8px}.ticket-line .input{height:42px}.small-remove{width:42px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.08);color:#fff}.primary-btn,.ghost-btn,.ghost-wide{border:0;border-radius:18px;min-height:50px;padding:0 16px;font-weight:1000;font-size:16px;color:#fff;cursor:pointer;transition:.2s transform,.2s opacity}.primary-btn:active{transform:scale(.98)}.primary-btn:disabled,.input:disabled{opacity:.45;cursor:not-allowed}.blue{width:100%;background:linear-gradient(180deg,#36b8ff,#126dcc);box-shadow:0 10px 30px rgba(16,125,220,.35)}.gold{width:100%;background:linear-gradient(180deg,#ffe18a,#c98720);color:#2b1700;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:0 12px 34px rgba(255,179,45,.32);border:1px solid rgba(255,239,162,.85)}.ghost-btn,.ghost-wide{background:rgba(255,255,255,.08);border:1px solid var(--border);color:#d9f1ff}.ghost-btn{min-height:34px;border-radius:12px;font-size:13px}.ghost-wide{width:100%;margin-top:10px}.tiny-note{font-size:12px;color:#b7c8d5;text-align:center;margin:10px 0 0}.inactive-panel{text-align:center;border-color:rgba(255,200,87,.35)}.arena{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:420px}.arena-top{display:flex;gap:8px;justify-content:center}.green{color:#8bf7b7}.rod-wrap{position:relative;flex:1;min-height:260px}.rod{position:absolute;right:42px;top:20px;width:9px;height:235px;background:linear-gradient(90deg,#19100a,#d6a15a,#1a0e08);border-radius:999px;transform:rotate(23deg);transform-origin:top;box-shadow:0 0 18px rgba(0,0,0,.8)}.line{position:absolute;right:145px;top:50px;width:1px;height:205px;background:rgba(235,245,255,.8);transform:rotate(2deg);transform-origin:top}.bobber{position:absolute;left:50%;top:190px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#ef3030 0 50%,#fff 51%);box-shadow:0 0 20px rgba(255,255,255,.25)}.ripple{position:absolute;left:calc(50% - 23px);top:207px;width:70px;height:28px;border:2px solid rgba(255,255,255,.28);border-radius:50%;animation:ripple 1.6s ease-in-out infinite}.casting .rod{animation:rodBend 1s ease}.casting .bobber{animation:bob 1s ease}.casting .ripple{animation:splash .8s ease}@keyframes ripple{50%{transform:scale(1.18);opacity:.5}}@keyframes rodBend{50%{transform:rotate(30deg)}}@keyframes bob{50%{transform:translateY(18px)}}@keyframes splash{50%{transform:scale(1.8);opacity:.2}}.arena-hint{text-align:center;color:#c7d9e6;font-size:13px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:999px;padding:10px}.success-label{text-align:center;color:var(--gold);font-size:36px;font-weight:1000;margin:0;text-shadow:0 3px 18px rgba(255,200,87,.35)}.result-panel{text-align:center}.fish-card{margin:10px 0 16px;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(180deg,rgba(49,129,170,.35),rgba(1,20,32,.9));padding:16px}.fish-visual{font-size:84px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}.fish-card h3{font-size:24px;margin:4px 0}.stars{font-size:22px;letter-spacing:2px;margin:4px 0}.reward-line{font-size:20px;margin:8px 0 0}.summary-panel{margin-top:auto}.catch-list{display:grid;gap:8px;margin:12px 0}.catch-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.07)}.total-box{padding:14px;border-radius:16px;background:rgba(255,200,87,.16);border:1px solid rgba(255,200,87,.4);font-size:18px}.claim-note{font-size:12px;color:#ffe7a8;text-align:center}.footer-click{text-align:center;margin-top:auto;color:rgba(234,247,255,.75);font-size:13px;padding:8px;user-select:none}.admin-dialog{border:0;border-radius:24px;padding:0;background:transparent;color:#fff}.admin-dialog::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}.admin-card{width:min(390px,92vw);padding:20px;border-radius:24px;background:#081827;border:1px solid var(--border);box-shadow:var(--shadow);display:grid;gap:12px}.settings-card{max-height:86vh;overflow:auto}.row-actions{display:flex;gap:10px}.row-actions>*{flex:1}.toast{position:fixed;z-index:8;left:50%;bottom:22px;transform:translateX(-50%);max-width:92vw;padding:12px 16px;border-radius:16px;background:rgba(0,0,0,.84);border:1px solid var(--border);box-shadow:var(--shadow);font-weight:800;text-align:center}
@media (min-width:620px){.phone-shell{border:1px solid rgba(255,255,255,.12);border-radius:34px;height:min(900px,96vh);overflow:hidden}.app{padding:2vh 0}.boat{width:560px;left:50%;transform:translateX(-50%)}}

/* v2 zonk mode */
.zonk-item { opacity: .82; }
.result-panel .success-label { transition: color .2s ease; }

/* v2.1 final polish: visual lebih realistis dari sisi sampan/perahu */
.water{
  top:30%;
  background:
    radial-gradient(ellipse at 54% 38%,rgba(255,214,128,.18),transparent 18%),
    linear-gradient(180deg,rgba(32,115,151,.28),rgba(5,18,30,.96)),
    repeating-linear-gradient(-5deg,rgba(255,255,255,.055) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(7deg,rgba(73,164,205,.07) 0 2px,transparent 2px 34px);
  animation:waterMove 11s linear infinite;
}
.boat{
  height:43%;bottom:-9%;opacity:1;
  background:
    linear-gradient(103deg,transparent 0 12%,rgba(18,10,7,.96) 13% 17%,rgba(95,55,28,.98) 18% 22%,rgba(38,20,12,.99) 23% 30%,rgba(117,72,35,.98) 31% 35%,rgba(32,17,10,.99) 36% 42%,rgba(98,59,28,.98) 43% 48%,rgba(27,15,10,.99) 49% 58%,transparent 59%),
    linear-gradient(92deg,transparent 0 6%,rgba(255,197,89,.06) 7% 48%,rgba(0,0,0,.36) 70%,transparent 90%);
  clip-path:polygon(0 52%,100% 3%,100% 100%,0 100%);
  box-shadow:inset 0 22px 42px rgba(255,205,107,.08), inset 0 -35px 60px rgba(0,0,0,.45);
}
.boat::after{content:"";position:absolute;inset:18% 0 auto 0;height:10px;background:linear-gradient(90deg,transparent,rgba(255,217,138,.18),rgba(0,0,0,.3));transform:skewY(-8deg)}
.arena{min-height:430px}.rod-wrap{min-height:300px;perspective:680px;overflow:hidden;border-radius:24px}.rod-wrap::before{content:"";position:absolute;right:-22px;bottom:-10px;width:70%;height:45%;background:linear-gradient(112deg,rgba(24,13,8,.98),rgba(114,70,35,.98) 28%,rgba(42,23,13,.98) 46%,rgba(146,91,44,.9) 52%,rgba(28,16,10,.96));clip-path:polygon(22% 0,100% 20%,100% 100%,0 100%);box-shadow:inset 0 18px 30px rgba(255,211,128,.12), inset 0 -28px 45px rgba(0,0,0,.48);z-index:0}.rod-wrap::after{content:"";position:absolute;right:8px;bottom:95px;width:58%;height:12px;background:linear-gradient(90deg,rgba(255,218,139,.22),rgba(0,0,0,.35));transform:rotate(-16deg);border-radius:999px;z-index:1}.rod{right:54px;top:18px;width:6px;height:260px;background:linear-gradient(90deg,#080503,#7c4b22 38%,#e0aa5d 55%,#130b05);transform:rotate(25deg);z-index:2;filter:drop-shadow(0 12px 18px rgba(0,0,0,.7))}.line{right:154px;top:54px;height:220px;background:rgba(235,245,255,.62);z-index:2}.bobber{left:49%;top:214px;width:18px;height:24px;border-radius:50% 50% 44% 44%;box-shadow:0 0 16px rgba(255,255,255,.18);z-index:2}.ripple{left:calc(49% - 28px);top:233px;width:72px;height:22px;border-color:rgba(215,240,255,.22);z-index:1}.arena-hint{background:rgba(3,11,19,.58);backdrop-filter:blur(5px)}
.fish-visual{width:190px;height:112px;margin:8px auto 12px;position:relative;font-size:0;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}.fish-css .fish-body{position:absolute;left:36px;top:28px;width:118px;height:58px;border-radius:54% 46% 48% 52%;background:linear-gradient(135deg,#d7543f,#ffb08a 42%,#8d211e);box-shadow:inset -18px -10px 22px rgba(0,0,0,.18),inset 18px 6px 18px rgba(255,255,255,.2)}.fish-css .fish-tail{position:absolute;right:16px;top:35px;width:45px;height:45px;background:linear-gradient(135deg,#c5362a,#ff8d65);clip-path:polygon(0 50%,100% 0,74% 50%,100% 100%)}.fish-css .fish-fin{position:absolute;left:82px;top:15px;width:34px;height:28px;background:linear-gradient(180deg,#ff8766,#98251f);clip-path:polygon(10% 100%,50% 0,90% 100%)}.fish-css .fish-eye{position:absolute;left:52px;top:45px;width:9px;height:9px;background:#101010;border:2px solid #fff;border-radius:50%}.fish-small .fish-body{background:linear-gradient(135deg,#a6c6d9,#eef6f8 44%,#6c8796);transform:scale(.75);transform-origin:center}.fish-small .fish-tail{background:linear-gradient(135deg,#88a9ba,#d3e3ea);transform:scale(.78);transform-origin:left}.fish-bawal .fish-body{background:linear-gradient(135deg,#9cb5bd,#f1d7a4 45%,#5f7881);height:66px;border-radius:58% 42% 58% 42%}.fish-bawal .fish-tail{background:linear-gradient(135deg,#8ea7b2,#dfc38d)}.fish-red .fish-body{background:linear-gradient(135deg,#bf2e24,#ffb38b 43%,#841715)}.fish-red .fish-tail{background:linear-gradient(135deg,#a81f1b,#ff7a56)}.fish-tuna .fish-body{width:132px;height:52px;background:linear-gradient(135deg,#1a5b84,#dae9ef 45%,#0b314c)}.fish-tuna .fish-tail{background:linear-gradient(135deg,#0b314c,#4a90b8)}.fish-gold .fish-body{background:linear-gradient(135deg,#d48a19,#ffe39a 42%,#b56209);box-shadow:0 0 34px rgba(255,204,76,.32),inset -18px -10px 22px rgba(0,0,0,.16)}.fish-gold .fish-tail{background:linear-gradient(135deg,#d79622,#ffd46e)}.fish-gold::before{content:"👑";position:absolute;left:72px;top:-16px;font-size:28px;z-index:4;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}.fish-zonk{height:92px}.fish-zonk .fish-body,.fish-zonk .fish-tail,.fish-zonk .fish-fin,.fish-zonk .fish-eye{display:none}.fish-zonk::before{content:"";position:absolute;left:86px;top:4px;width:2px;height:58px;background:rgba(235,245,255,.65)}.fish-zonk::after{content:"";position:absolute;left:78px;top:55px;width:30px;height:30px;border:4px solid rgba(230,239,246,.9);border-top:0;border-left-color:transparent;border-radius:0 0 50% 50%;transform:rotate(-28deg)}
.history-card{max-height:84vh;overflow:auto}.ghost-wide.compact{min-height:42px;margin:8px 0 0;font-size:14px}.claim-note{line-height:1.45}.summary-panel #resetBtn.hidden{display:none!important}