:root{
    --bg1:#fff6d6; --bg2:#d9f3ff;
    --ink:#2b2350; --muted:#6b6590;
    --card:#ffffff; --line:#e7e2f7;
    --primary:#6c4cf5; --primary-ink:#fff;
    --sun:#ffb800; --pink:#ff6fa5; --mint:#20c997; --sky:#3fa9f5;
    --given:#efeaff; --given-ink:#3a2d8f;
    --empty:#fffbe8; --empty-border:#ffcf3f;
    --ok:#d6f8ea; --ok-ink:#0b7a55;
    --bad:#ffe0e6; --bad-ink:#c21f4a;
    --hint:#e1f2ff; --hint-ink:#1f6fb2;
    --deco:#f3f1f8;
    --shadow:0 6px 0 rgba(43,35,80,.12);
    --radius:18px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%}
  body{
    font-family:"Baloo 2",system-ui,"Segoe UI",Roboto,sans-serif;
    color:var(--ink);
    background:var(--bg1);
    background-image:
      radial-gradient(circle at 10% 10%, #ffe28a 0 60px, transparent 61px),
      radial-gradient(circle at 92% 18%, #b9e6ff 0 80px, transparent 81px),
      radial-gradient(circle at 85% 92%, #ffd0e2 0 70px, transparent 71px),
      linear-gradient(160deg,var(--bg1),var(--bg2));
    background-attachment:fixed;
    -webkit-tap-highlight-color:transparent;
  }
  button{font-family:inherit;cursor:pointer;border:0}
  .screen{display:none;min-height:100vh;padding:20px 16px 40px;max-width:760px;margin:0 auto}
  .screen.active{display:block}
  .screen.center.active{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

  /* ---------- Titles ---------- */
  .logo{font-weight:800;line-height:1.02;margin:0;letter-spacing:.5px}
  .logo .l1{display:block;font-size:clamp(28px,7vw,48px);color:var(--primary)}
  .logo .l2{display:block;font-size:clamp(34px,9vw,62px);color:var(--pink);text-shadow:3px 3px 0 #ffe28a}
  .tagline{font-size:clamp(17px,4vw,22px);color:var(--muted);margin:6px 0 0;font-weight:700}
  .mini-grid{display:grid;grid-template-columns:repeat(3,40px);gap:6px;margin:22px auto}
  .mini-grid span{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:18px;box-shadow:0 3px 0 rgba(0,0,0,.12)}

  /* ---------- Cards / buttons ---------- */
  .card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:22px;border:2px solid var(--line)}
  .btn{background:var(--primary);color:var(--primary-ink);font-weight:800;font-size:18px;padding:12px 22px;border-radius:14px;box-shadow:0 4px 0 #4a2fc4;transition:transform .08s}
  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4a2fc4}
  .btn.big{font-size:24px;padding:14px 46px;border-radius:18px}
  .btn.sun{background:var(--sun);color:#3d2a00;box-shadow:0 4px 0 #c98f00}
  .btn.mint{background:var(--mint);box-shadow:0 4px 0 #129a72}
  .btn.sky{background:var(--sky);box-shadow:0 4px 0 #1f7fc4}
  .btn.pink{background:var(--pink);box-shadow:0 4px 0 #d64582}
  .btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn.small{font-size:15px;padding:8px 14px;border-radius:12px}

  /* ---------- Passcode ---------- */
  .gate-card{width:100%;max-width:380px;margin-top:24px}
  .gate-card label{display:block;font-weight:700;margin-bottom:8px;font-size:18px}
  .pass-input{width:100%;font-family:inherit;font-size:26px;font-weight:800;letter-spacing:4px;text-align:center;padding:10px 12px;border-radius:14px;border:3px solid var(--line);outline:none;color:var(--ink);text-transform:uppercase}
  .pass-input:focus{border-color:var(--primary)}
  .gate-msg{min-height:26px;margin:10px 0 4px;font-weight:700;color:var(--bad-ink)}
  .shake{animation:shake .4s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

  /* ---------- Level select ---------- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .topbar h2{margin:0;font-size:26px}
  .levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  @media (max-width:520px){.levels{grid-template-columns:repeat(2,1fr)}}
  .lvl{background:#fff;border:3px solid var(--line);border-radius:20px;padding:14px 8px 10px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s}
  .lvl:hover{transform:translateY(-2px)}
  .lvl .num{font-size:40px;font-weight:800;line-height:1}
  .lvl .sub{font-size:14px;color:var(--muted);font-weight:700}
  .lvl .stars{font-size:18px;letter-spacing:2px;color:#d8d3e8}
  .lvl .stars b{color:var(--sun)}
  .lvl:nth-child(4n+1) .num{color:var(--primary)}
  .lvl:nth-child(4n+2) .num{color:var(--pink)}
  .lvl:nth-child(4n+3) .num{color:var(--mint)}
  .lvl:nth-child(4n+4) .num{color:var(--sky)}
  .lvl:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .lvl .lock{font-size:15px;font-weight:800;color:var(--muted)}
  .lvl .timechip{font-size:14px;font-weight:800;color:var(--bad-ink)}
  .mode-card{margin-bottom:16px}
  .mode-card .opt{font-size:17px;padding:10px 16px}
  .settings{margin-top:18px}
  /* ---------- Timer ---------- */
  .pill.timer{display:none;border-color:#ffb3c7;background:#fff0f4}
  .pill.timer b{color:var(--bad-ink);font-variant-numeric:tabular-nums}
  .pill.timer.low{animation:pulse .6s infinite alternate;background:var(--bad)}
  @keyframes pulse{to{transform:scale(1.08)}}
  .timebar{display:none;height:10px;background:#ffe3ea;border-radius:999px;overflow:hidden;margin:-4px auto 12px;max-width:400px}
  .timebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--sun))}
  .ta .pill.timer, .ta .timebar{display:block}
  .ta .pill.timer{display:inline-block}
  .settings h3{margin:0 0 8px;font-size:19px}
  .opt-row{display:flex;gap:8px;flex-wrap:wrap}
  .opt{background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:700;font-size:15px;color:var(--ink);text-align:left}
  .opt.on{border-color:var(--primary);background:var(--given)}
  .settings p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.35}
  .rules-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
  .rules-table td{padding:5px 6px;border-bottom:1px dashed var(--line)}
  .rules-table td:first-child{font-weight:800;color:var(--primary);width:1%;white-space:nowrap;padding-right:14px}

  /* ---------- Game ---------- */
  .hud{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
  .pill{background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 14px;font-weight:700;font-size:16px}
  .pill b{color:var(--primary)}
  .game-wrap{display:grid;grid-template-columns:1fr;gap:14px;justify-items:center}
  @media (min-width:740px){.game-wrap{grid-template-columns:auto 1fr;align-items:start}}
  .board{width:min(92vw,400px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;background:#fff;border-radius:26px;box-shadow:var(--shadow);border:3px solid var(--line)}
  .cell{position:relative;aspect-ratio:1/1;border-radius:var(--radius);display:grid;place-items:center;font-weight:800;font-size:clamp(36px,11vw,58px);line-height:1;user-select:none;border:3px solid transparent;transition:transform .1s, background .2s}
  .cell .lbl{position:absolute;top:6px;left:9px;font-size:clamp(13px,3.6vw,17px);font-weight:800;opacity:.75}
  .cell .rule{position:absolute;bottom:5px;right:8px;font-size:clamp(10px,2.8vw,13px);font-weight:700;opacity:.6}
  .cell.given{background:var(--given);color:var(--given-ink)}
  .cell.empty{background:var(--empty);border:3px dashed var(--empty-border);color:#d4b44a;cursor:pointer}
  .cell.empty:hover{transform:scale(1.03)}
  .cell.selected{border-style:solid;border-color:var(--primary);box-shadow:0 0 0 4px rgba(108,76,245,.2);background:#fff}
  .cell.correct{background:var(--ok);color:var(--ok-ink)}
  .cell.hinted{background:var(--hint);color:var(--hint-ink)}
  .cell.wrong{background:var(--bad);color:var(--bad-ink)}
  .cell.deco{background:var(--deco);color:#b8b2cc}
  .cell.pop{animation:pop .35s}
  @keyframes pop{0%{transform:scale(.7)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
  .side{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
  .panel{background:#fff;border-radius:20px;border:2px solid var(--line);box-shadow:var(--shadow);padding:14px}
  .panel h4{margin:0 0 8px;font-size:17px}
  .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .chip{aspect-ratio:1/1;border-radius:12px;background:var(--given);color:var(--given-ink);font-size:clamp(20px,5.5vw,26px);font-weight:800;box-shadow:0 3px 0 #cfc5f5;display:grid;place-items:center}
  .chip:active{transform:translateY(2px);box-shadow:0 1px 0 #cfc5f5}
  .chip.tried{background:var(--bad);color:var(--bad-ink);box-shadow:0 3px 0 #f3b3c3;text-decoration:line-through}
  .pad-empty{color:var(--muted);font-weight:700;font-size:16px;padding:6px 0}
  .feedback{min-height:48px;border-radius:14px;padding:10px 12px;font-weight:700;font-size:17px;background:#f7f5ff}
  .feedback.ok{background:var(--ok);color:var(--ok-ink)}
  .feedback.bad{background:var(--bad);color:var(--bad-ink)}
  .feedback.info{background:var(--hint);color:var(--hint-ink)}
  .formula{display:flex;flex-direction:column;gap:6px;font-size:18px;font-weight:700}
  .formula div{background:#faf9ff;border-radius:10px;padding:6px 10px}
  .formula .eq-ok{color:var(--ok-ink)}
  .note{font-size:14px;color:var(--muted);line-height:1.35;margin:0}
  .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
  .progress{height:12px;background:#eee9fb;border-radius:999px;overflow:hidden;margin-top:6px}
  .progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--sky));transition:width .3s}

  /* ---------- Modal ---------- */
  .modal{position:fixed;inset:0;background:rgba(43,35,80,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
  .modal.show{display:flex}
  .modal .card{max-width:400px;width:100%;text-align:center;animation:pop .4s}
  .modal h2{margin:0;font-size:32px;color:var(--pink)}
  .big-stars{font-size:46px;letter-spacing:6px;color:#e2ddf0;margin:6px 0}
  .big-stars b{color:var(--sun)}
  /* ---------- Syiling & Avatar ---------- */
  .coin-pill{display:inline-flex;align-items:center;gap:6px;background:#fff7d6;border:2px solid #ffd76a;border-radius:999px;padding:4px 14px;font-weight:800;font-size:17px;color:#7a5600;white-space:nowrap}
  .avatar-holder{display:grid;place-items:center;margin:0 auto}
  .avatar-holder agent-robot-avatar{display:block}
  .avatar-fallback{line-height:1}
  .title-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
  .admin-link{background:none;color:var(--muted);font-weight:700;font-size:14px;text-decoration:underline;margin-top:22px}
  .coin-earn{font-size:24px;font-weight:800;color:#b07a00;margin:6px 0 2px}
  .coin-earn.none{font-size:15px;color:var(--muted)}
  .shop-wrap{display:grid;grid-template-columns:1fr;gap:14px}
  @media (min-width:760px){.shop-wrap{grid-template-columns:300px 1fr;align-items:start}.shop-preview{position:sticky;top:12px}}
  .shop-preview{text-align:center}
  .shop-sel{font-weight:800;font-size:20px;margin:6px 0}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .tab{background:#fff;border:2px solid var(--line);border-radius:12px;padding:6px 12px;font-weight:700;font-size:15px;color:var(--ink)}
  .tab.on{border-color:var(--primary);background:var(--given)}
  .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
  .item{position:relative;background:#fff;border:3px solid var(--line);border-radius:16px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;font-size:13px;color:var(--ink);text-align:center;line-height:1.2}
  .item .emo{font-size:30px;line-height:1.1}
  .item .price{color:#7a5600;font-weight:800;font-size:14px}
  .item .tag{font-size:12px;font-weight:800;color:var(--ok-ink)}
  .item.owned{border-color:#b6ead6}
  .item.equipped{border-color:var(--mint);background:var(--ok)}
  .item.off{opacity:.45}
  .item.sel{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,76,245,.25)}
  .swatch-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
  .swatch{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}
  .swatch.sel{box-shadow:0 0 0 4px var(--primary)}
  .swatch.cur::after{content:"✓";display:grid;place-items:center;height:100%;color:#fff;font-weight:800;text-shadow:0 0 3px #000}
  .admin-table{width:100%;border-collapse:collapse;font-size:15px}
  .admin-table td,.admin-table th{padding:6px;border-bottom:1px dashed var(--line);text-align:left}
  .admin-table th{font-size:14px;color:var(--muted)}
  .num-in{width:72px;font-family:inherit;font-size:16px;font-weight:700;padding:4px 6px;border:2px solid var(--line);border-radius:8px;color:var(--ink)}
  .lvl-coins{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
  .lvl-coins label{font-weight:700;font-size:14px;display:flex;flex-direction:column;gap:2px}
  .admin-section{margin-top:16px}
  .admin-section h3{margin:0 0 8px;font-size:19px}
  .json-box{width:100%;min-height:110px;font-family:ui-monospace,Consolas,monospace;font-size:12px;border:2px solid var(--line);border-radius:10px;padding:8px;color:var(--ink)}
  .confetti{position:fixed;top:-20px;width:10px;height:14px;border-radius:3px;z-index:11;pointer-events:none;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

  /* ---------- Log masuk Google ---------- */
  .google-btn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#1f1f1f;border:2px solid var(--line);border-radius:14px;padding:12px 22px;font-weight:800;font-size:18px;box-shadow:var(--shadow)}
  .google-btn svg{width:22px;height:22px}
  .google-btn:disabled{opacity:.6}
  .user-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px;font-weight:700;color:var(--muted);font-size:14px}
  .link-btn{background:none;color:var(--primary);font-weight:800;text-decoration:underline;font-size:14px;padding:0}
  .free-pill{display:inline-flex;align-items:center;gap:6px;background:#e6f6ff;border:2px solid #b6e0ff;border-radius:999px;padding:4px 12px;font-weight:800;font-size:15px;color:#1f6fb2;white-space:nowrap}
  .free-pill.paid{background:var(--ok);border-color:#b6ead6;color:var(--ok-ink)}
  .free-pill.low{background:var(--bad);border-color:#ffb3c7;color:var(--bad-ink)}

  /* ---------- Bayaran ---------- */
  .price-old{text-decoration:line-through;color:var(--muted);font-size:20px;font-weight:700}
  .price-new{font-size:44px;font-weight:800;color:var(--pink);line-height:1.1}
  .promo-tag{display:inline-block;background:var(--sun);color:#3d2a00;border-radius:999px;padding:2px 12px;font-weight:800;font-size:14px}
  .pay-list{text-align:left;margin:10px auto;max-width:300px;font-weight:700;line-height:1.7}

  /* ---------- Footer ---------- */
  .site-footer{max-width:760px;margin:10px auto 0;padding:18px 16px 28px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
  .site-footer a{color:var(--primary);font-weight:700}
  .site-footer .links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:6px}

  /* ---------- Admin ---------- */
  .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .stat{background:#faf9ff;border-radius:14px;padding:10px 12px;font-weight:700;color:var(--muted)}
  .stat b{display:block;font-size:24px;color:var(--ink)}
  .table-scroll{overflow-x:auto}
  .admin-table .st-paid{color:var(--ok-ink);font-weight:800}
  .admin-table .st-failed{color:var(--bad-ink);font-weight:800}
  .text-in{font-family:inherit;font-size:16px;font-weight:700;padding:6px 10px;border:2px solid var(--line);border-radius:10px;color:var(--ink);min-width:0;width:min(320px,100%)}
  .row-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
  .loading{opacity:.6;pointer-events:none}
  .modal a{color:var(--primary);font-weight:700}