:root{
  --ink:#2B2730;
  --bg:#EAF7FF;
  --bg2:#F9FFE5;
  --card:#FFFFFF;
  --brand:#FFC107;
  --brand-2:#FFA000;
  --mint:#D1FFE2;
  --line:#F6E6A8;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffffff 0%, var(--bg) 60%) no-repeat,
    radial-gradient(900px 500px at -10% 10%, #ffffff 0%, var(--bg2) 70%) no-repeat;
}

/* App bar */
.appbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.logo-portal{width:54px;height:54px;object-fit:contain;border-radius:14px;border:3px solid var(--line);background:#fff}
.brand-title{font-weight:900;font-size:20px;margin:0}

/* Container & card */
.wrap{max-width:1040px;margin:0 auto;padding:16px}
.phone{
  background:var(--card);border:3px solid var(--line);border-radius:28px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);padding:18px;
}

/* Buttons */
.pill{
  border:none;cursor:pointer;font-weight:900;line-height:1;text-decoration:none;
  background:linear-gradient(180deg,var(--brand),#FFC000);
  color:#311;border-radius:9999px;box-shadow:0 4px 0 var(--brand-2);
  padding:10px 16px;transition:transform .05s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.pill:active{transform:translateY(1px)}
.pill-ghost{background:#fff;border:3px solid var(--brand);box-shadow:none;color:#5a4a00}

/* Grid games */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:#fff;border:3px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.06);text-decoration:none;color:inherit}
.card-icon{width:84px;height:84px;border-radius:24px;margin:0 auto 8px;display:grid;place-items:center;font-size:40px;border:4px solid #fff;background:linear-gradient(#FFF7D0,#FFE29A);box-shadow:inset 0 -6px 0 rgba(0,0,0,.06),0 8px 16px rgba(0,0,0,.05)}
.card-title{text-align:center;font-weight:900;font-size:18px;margin:6px 0 4px}
.card-desc{text-align:center;opacity:.85}

/* Top panel */
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.me{display:flex;align-items:center;gap:10px}
.ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(180deg,#fff,#ffe6ff);border:3px solid #fff;box-shadow:0 6px 10px rgba(0,0,0,.06)}
.badge{background:var(--mint);border:3px solid #C1F3D6;border-radius:999px;padding:6px 10px;font-weight:900}

/* Forms */
.row{margin:10px 0}
.input{width:100%;padding:14px;border:3px solid #FFE29A;border-radius:14px;background:#FFFDF7;font-size:16px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Scores form grid */
.form-grid{display:grid;gap:12px;grid-template-columns:1fr}
.form-grid .field{display:flex;flex-direction:column;gap:6px}
.form-grid label{font-weight:900}
.form-grid .input{border-radius:18px}
@media (min-width:520px){ .form-grid{grid-template-columns:1fr 1fr} .span-2{grid-column:span 2} }

/* Table */
.table-card{overflow:hidden}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:20px}
th,td{padding:12px 10px;border-bottom:2px dashed #f3e9b8;text-align:left}
th{background:#fff8d8}
.rank{font-weight:900}

/* Footer */
.footer{text-align:center;margin:16px 0 8px;font-size:13px;color:#7a6c45}

/* Sound toggle FAB */
.sound-fab{
  position:fixed; right:14px; bottom:14px; z-index:20;
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:3px solid var(--line);
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.12);
  cursor:pointer; user-select:none;
}
.sound-fab.muted{ opacity:.65 }

/* Mobile tiny fix */
@media (max-width:360px){ .actions .pill{padding:8px 10px;font-size:14px} .brand-title{font-size:18px} }

/* ====== BACKGROUND HALAMAN (Point 3) ====== */
/* Jika situs dipasang di ROOT domain, pakai path absolut /assets/... */
.bg-home{
  background: #EAF7FF url('/assets/img/bg-home.svg') center/cover no-repeat fixed;
}
.bg-login{
  background: #EAF7FF url('/assets/img/bg-login.svg') center/1200px auto no-repeat fixed;
}
.bg-score{
  background: #FFFDF7 url('/assets/img/bg-score.svg') center/cover no-repeat fixed;
}
.bg-game{
  background: #EAF7FF url('/assets/img/bg-game.svg') center/cover no-repeat fixed;
}

/* --- Jika situs dipasang di SUBFOLDER (mis. /nuhagames/) ---
   ganti 4 deklarasi di atas menjadi versi ini:
   .bg-home  { background: #EAF7FF url('../img/bg-home.svg')  center/cover no-repeat fixed; }
   .bg-login { background: #EAF7FF url('../img/bg-login.svg') center/1200px auto no-repeat fixed; }
   .bg-score { background: #FFFDF7 url('../img/bg-score.svg') center/cover no-repeat fixed; }
   .bg-game  { background: #EAF7FF url('../img/bg-game.svg')  center/cover no-repeat fixed; }
*/

/* ====== BONUS: kartu/phone makin clean (Point 4) ====== */
.phone{
  background: rgba(255,255,255,.92);
  border: 3px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  padding: 18px;
  backdrop-filter: saturate(1.06) blur(0px);
}
.logo-portal{
  width:54px; height:54px;
  object-fit:contain;
  border-radius:14px;
  border:3px solid var(--line);
  background:#fff;
}