/* ============================================================
   PUZZLE PRO — INSOMNIACT THEME (Full SVG Edition v2.1)
   ============================================================ */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}
.icon-brand{fill:currentColor;stroke:none}
/* ===== SELF-HOSTED VARIABLE FONTS ===== */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('../font/PlusJakartaSans-Variable.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../font/SpaceGrotesk-Variable.woff2') format('woff2')}
:root{--bg-base:#0a0a0f;--bg-elev-1:#101018;--bg-elev-2:#16161f;--bg-elev-3:#1c1c28;--text-primary:#f5f5f7;--text-secondary:#a1a1aa;--text-muted:#6b6b7b;--gold:#facc15;--gold-soft:#fde047;--gold-dark:#ca8a04;--cyan:#22d3ee;--purple:#8b5cf6;--red:#ef4444;--green:#22c55e;--pink:#ec4899;--border-soft:rgba(255,255,255,0.06);--border-mid:rgba(255,255,255,0.10);--border-hi:rgba(250,204,21,0.35);--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--shadow-md:0 8px 24px rgba(0,0,0,0.4);--shadow-lg:0 16px 48px rgba(0,0,0,0.5);--font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;--font-display:'Space Grotesk','Plus Jakarta Sans',sans-serif;--container:1200px}
body.light-mode{--bg-base:#f5f5f7;--bg-elev-1:#ffffff;--bg-elev-2:#f0f0f3;--bg-elev-3:#e8e8ec;--text-primary:#18181b;--text-secondary:#52525b;--text-muted:#71717a;--border-soft:rgba(0,0,0,0.06);--border-mid:rgba(0,0,0,0.12);--border-hi:rgba(202,138,4,0.5);--gold:#ca8a04;--gold-soft:#eab308;--gold-dark:#a16207;background:var(--bg-base);color:var(--text-primary)}
body.light-mode .navbar{background:rgba(245,245,247,0.8)}
body.light-mode .navbar.scrolled{background:rgba(245,245,247,0.95)}
body.light-mode .game-panel{background:radial-gradient(circle at 18% 8%,rgba(202,138,4,.08),transparent 32%),radial-gradient(circle at 88% 82%,rgba(139,92,246,.08),transparent 34%),rgba(255,255,255,.9);border-color:rgba(0,0,0,.1);box-shadow:0 24px 70px rgba(0,0,0,.12)}
body.light-mode #grid{background:rgba(0,0,0,0.03)}
body.light-mode .game-tile.tile-empty{border-color:rgba(0,0,0,0.1)}
body.light-mode .panel-card,body.light-mode .stat,body.light-mode .progress-area{background:rgba(0,0,0,0.03)}
body.light-mode #difficulty,body.light-mode #mode-toggle,body.light-mode .btn-ghost,body.light-mode .icon-btn{background:rgba(0,0,0,0.04)}
body.light-mode .confirm-box,body.light-mode .win-box{background:linear-gradient(135deg,#ffffff 0%,#f5f5f7 100%)}
body.light-mode .toast{background:rgba(24,24,27,0.95);color:#fff}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);line-height:1.6;font-size:16px;overflow-x:clip;max-width:100%;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;transition:background 0.3s ease,color 0.3s ease;padding-top:calc(60px + env(safe-area-inset-top, 0px))}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--gold-dark));border-radius:10px;border:2px solid var(--bg-base)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-soft)}
::selection{background:var(--gold);color:#0a0a0f}
.container-global{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,15,0.35);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,0.05);transition:background 0.35s ease,border-color 0.35s ease}
.navbar.scrolled{background:rgba(10,10,15,0.62);border-bottom-color:rgba(255,255,255,0.08)}
.nav-container{max-width:var(--container);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold);box-shadow:0 0 20px rgba(250,204,21,0.35);transition:transform 0.4s var(--ease-spring)} /* ← BARU */
.brand:hover .brand-logo{transform:rotate(360deg) scale(1.08)} /* ← BARU */
.brand:active .brand-logo{transform:rotate(360deg) scale(1.08)} /* ← BARU */
.brand-name{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--gold);letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;padding:6px 0}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--text-secondary);transition:color 0.25s ease,background 0.25s ease;white-space:nowrap}
.nav-link .icon{font-size:13px;width:13px;height:13px;opacity:0.8}
.nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,0.05)}
.nav-link.active{color:var(--bg-void);background:linear-gradient(135deg,var(--gold),var(--gold-soft));font-weight:600;box-shadow:0 4px 16px rgba(250,204,21,0.3)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:10px;background:var(--bg-glass);border:1px solid var(--border-soft)}
.hamburger span{display:block;width:20px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:1024px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;position:fixed;top:calc(68px + env(safe-area-inset-top, 0px) + 12px);left:24px;right:24px;flex-direction:column;align-items:stretch;gap:4px;padding:16px;border-radius:24px;background:rgba(10,10,18,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-mid);max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;animation:menuIn 0.35s var(--ease-out);z-index:99}
  @keyframes menuIn{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
.nav-link{padding:14px 16px;border-radius:10px;justify-content:flex-start}
}
/* ============================================================
   BACK TO HUB
   ============================================================ */
@keyframes nudge-left{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-4px)}
  60%{transform:translateX(0)}
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(250,204,21,0.5)}
  70%{box-shadow:0 0 0 12px rgba(250,204,21,0)}
  100%{box-shadow:0 0 0 0 rgba(250,204,21,0)}
}
.back-to-hub{position:fixed;top:calc(88px + env(safe-area-inset-top, 0px));left:max(22px,calc((100vw - 1200px)/2));z-index:90;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:rgba(16,16,24,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-mid);border-radius:999px;color:var(--text-secondary);font-family:var(--font-body);font-size:0.85rem;font-weight:600;text-decoration:none;transition:color 0.25s ease,border-color 0.25s ease,transform 0.25s ease,background 0.25s ease;cursor:pointer}
.back-to-hub .icon{font-size:0.85rem;transition:transform 0.25s ease}
.back-to-hub:hover{color:var(--gold);border-color:var(--border-hi);background:rgba(16,16,24,0.95);transform:translateY(-2px)}
.back-to-hub:hover .icon{transform:translateX(-4px)}
.back-to-hub:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:640px){
  .back-to-hub{top:calc(80px + env(safe-area-inset-top, 0px));left:calc(12px + env(safe-area-inset-left, 0px));width:44px;height:44px;padding:0;gap:0;animation:pulse-ring 2s ease-out infinite}
  .back-to-hub span{display:none}
  .back-to-hub .icon{font-size:1rem;animation:nudge-left 2s ease-in-out infinite}
  .back-to-hub:active,.back-to-hub:active .icon{animation:none}
}
/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:50px 0 60px;overflow:hidden;isolation:isolate;text-align:center}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);z-index:-2;pointer-events:none}
.hero-glow{position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.hero-glow-1{width:500px;height:500px;top:-100px;left:-100px;background:radial-gradient(circle,rgba(250,204,21,0.18) 0%,rgba(250,204,21,0.08) 35%,transparent 70%)}
.hero-glow-2{width:600px;height:600px;bottom:-200px;right:-150px;background:radial-gradient(circle,rgba(139,92,246,0.18) 0%,rgba(139,92,246,0.08) 35%,transparent 70%)}
.hero-content{max-width:800px;margin:0 auto;padding:0 24px}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(250,204,21,0.08);border:1px solid var(--border-hi);color:var(--gold);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.02em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:20px}
.badge .icon{font-size:13px;width:13px;height:13px}
.hero-title{font-family:var(--font-display);font-size:clamp(32px,5.5vw,56px);font-weight:700;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-title .hero-icon{width:1em;height:1em;color:var(--gold);stroke-width:1.75;display:inline-block;vertical-align:-0.075em;filter:drop-shadow(0 0 12px rgba(250,204,21,0.4));animation:puzzle-wiggle 3s ease-in-out infinite}
@keyframes puzzle-wiggle{
  0%,100%{transform:rotate(-3deg) scale(1)}
  50%{transform:rotate(3deg) scale(1.03)}
}
.gradient-text{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 50%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-desc{font-size:clamp(15px,1.6vw,17px);color:var(--text-secondary);max-width:560px;margin:0 auto}
/* ============================================================
   GAME SECTION
   ============================================================ */
.game-section{padding:20px 20px 80px;position:relative}
.game-panel{max-width:1180px;margin:0 auto;padding:28px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,0.85fr);grid-template-areas:"board side"
        "progress side"
        "stats side";gap:20px 24px;background:radial-gradient(circle at 18% 8%,rgba(250,204,21,.08),transparent 32%),radial-gradient(circle at 88% 82%,rgba(139,92,246,.09),transparent 34%),rgba(16,16,24,.78);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 80px rgba(250,204,21,.04);transition:background 0.3s ease,border-color 0.3s ease}
.board-area{grid-area:board;display:flex;justify-content:center;align-items:center;position:relative;padding:10px}
.board-wrap{position:relative;width:min(100%,560px);aspect-ratio:1}
.board-wrap::before{content:'';position:absolute;inset:-12px;border-radius:30px;background:radial-gradient(circle,rgba(250,204,21,.10),transparent 68%);filter:blur(10px);z-index:-1;pointer-events:none}
.board-overlay{position:absolute;inset:0;background:rgba(10,10,15,0.85);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:10;transition:opacity 0.4s ease,visibility 0.4s ease;text-align:center;padding:20px}
.board-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.btn-play-overlay{width:80px;height:80px;border-radius:50%;background:var(--gold);color:#0a0a0f;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(250,204,21,0.4);transition:transform 0.25s ease,box-shadow 0.25s ease;cursor:pointer;border:none}
.btn-play-overlay:hover{transform:scale(1.08);box-shadow:0 0 45px rgba(250,204,21,0.6)}
.btn-play-overlay:active{transform:scale(0.95)}
.overlay-text{display:flex;flex-direction:column;gap:6px}
.overlay-text strong{font-family:var(--font-display);font-size:1.2rem;color:var(--text-primary);letter-spacing:-0.02em}
.overlay-text span{font-size:0.85rem;color:var(--text-secondary)}
#grid{display:grid;gap:clamp(4px,.8vw,8px);width:100%;height:100%;padding:clamp(6px,1.2vw,10px);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.13));border:1px solid rgba(250,204,21,.3);border-radius:calc(var(--r-lg) + 3px);box-shadow:inset 0 3px 18px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.035);touch-action:manipulation;transition:background 0.3s ease}
.game-tile{position:relative;width:100%;height:100%;min-width:0;min-height:0;border-radius:10px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);color:#0a0a0f;font-family:var(--font-display);font-weight:700;cursor:pointer;transition:transform 0.18s cubic-bezier(.2,.75,.25,1),box-shadow 0.18s ease,border-color 0.18s ease,filter 0.18s ease;display:flex;align-items:center;justify-content:center;overflow:hidden;user-select:none;touch-action:manipulation;padding:0;box-shadow:0 5px 10px rgba(0,0,0,.19),0 1px 0 rgba(255,255,255,.28) inset,0 -2px 0 rgba(0,0,0,.07) inset;backface-visibility:hidden}
.game-tile:focus-visible{outline:3px solid var(--gold);outline-offset:2px;z-index:5}
.game-tile:not(:disabled):hover{transform:translateY(-2px) scale(1.015);box-shadow:0 10px 18px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.34) inset;filter:saturate(1.06) brightness(1.025);z-index:4}
.game-tile:not(:disabled):active{transform:translateY(1px) scale(.975);box-shadow:0 2px 5px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.18) inset}
.game-tile:disabled{cursor:not-allowed}
.game-tile.tile-empty{background:repeating-linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,.018) 6px,rgba(0,0,0,.025) 6px,rgba(0,0,0,.025) 12px)!important;border:2px dashed rgba(250,204,21,.22);box-shadow:inset 0 2px 9px rgba(0,0,0,.12);cursor:default}
.game-tile .tile-number{display:block;font-size:clamp(1.4rem,3.5vw,2.4rem);line-height:1;text-shadow:0 1px 2px rgba(0,0,0,0.25);z-index:2;pointer-events:none}
.game-tile.image-mode .tile-number{position:absolute;bottom:5px;right:7px;font-size:clamp(0.7rem,1.3vw,0.95rem);background:rgba(0,0,0,0.6);color:#fff;padding:2px 6px;border-radius:6px;text-shadow:none}
.game-tile.correct-pos{border-color:rgba(250,204,21,.58);box-shadow:0 0 0 1px rgba(250,204,21,.28) inset,0 5px 13px rgba(0,0,0,.16),0 0 13px rgba(250,204,21,.12)}
.game-tile.hinted{animation:hint-glow 0.4s ease-in-out 4;border-color:var(--purple)!important;z-index:6}
@keyframes hint-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}
  50%{box-shadow:0 0 0 6px rgba(139,92,246,0.5),0 0 24px rgba(139,92,246,0.7)}
}
.game-tile.image-mode{background-size:cover;background-position:center;background-repeat:no-repeat}
/* Progress */
.progress-area{grid-area:progress;padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid rgba(250,204,21,.16);border-radius:var(--r-md);transition:background 0.3s ease;position:relative;overflow:hidden}
.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted)}
.progress-header .icon{color:var(--gold);margin-right:6px}
.progress-header > span:first-child{display:inline-flex;align-items:center;gap:8px}
#progress-text{color:var(--gold-soft);font-family:var(--font-display);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
.progress-track{width:100%;height:10px;background:rgba(255,255,255,0.05);border-radius:999px;overflow:hidden;border:1px solid var(--border-soft)}
#progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--cyan));border-radius:999px;transition:width 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 12px rgba(250,204,21,0.4)}
/* Stats */
.stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:radial-gradient(ellipse at 50% 0%,rgba(250,204,21,.055),transparent 75%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012));padding:16px 12px 14px;border-radius:var(--r-lg);border:1px solid rgba(250,204,21,.13);text-align:center;transition:border-color .2s ease,transform .2s ease,background .2s ease;box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025);position:relative;overflow:hidden;min-width:0}
.stat:hover{border-color:rgba(250,204,21,.28);transform:translateY(-2px)}
.stat-value{font-family:var(--font-display);font-size:clamp(1.2rem,2.2vw,1.65rem);font-weight:700;color:var(--text-primary);line-height:1.2;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:0.72rem;color:var(--text-secondary);margin-top:7px;letter-spacing:.025em;font-weight:600}
.stat-label .icon{color:var(--gold);width:14px;height:14px}
/* Side Panel */
.side-panel{grid-area:side;display:flex;flex-direction:column;gap:14px;min-width:0}
.panel-card{background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:16px;transition:background 0.3s ease;box-shadow:0 8px 26px rgba(0,0,0,.12)}
.panel-title{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.panel-title .icon{color:var(--gold);width:14px;height:14px}
/* Mode Toggle */
#mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,0.04);border:1px solid var(--border-mid);border-radius:999px;padding:4px}
#mode-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:999px;font-size:0.82rem;font-weight:600;color:var(--text-secondary);background:transparent;transition:background 0.25s ease,color 0.25s ease,box-shadow 0.25s ease;white-space:nowrap;font-family:inherit}
#mode-toggle button .icon{font-size:0.85rem;width:0.85rem;height:0.85rem}
#mode-toggle button:hover:not(.active){color:var(--text-primary);background:rgba(255,255,255,0.05)}
#mode-toggle button.active{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);color:#0a0a0f;box-shadow:0 4px 14px rgba(250,204,21,0.35)}
#mode-toggle button.active[data-mode="image"]{background:linear-gradient(135deg,var(--purple),#7c3aed);color:#fff;box-shadow:0 4px 14px rgba(139,92,246,0.4)}
.field-label{display:block;font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
#difficulty{width:100%;padding:11px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border-mid);border-radius:var(--r-md);color:var(--text-primary);font-family:inherit;font-size:0.88rem;font-weight:600;cursor:pointer;transition:border-color 0.2s ease,background 0.2s ease;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
#difficulty:hover{background-color:rgba(255,255,255,0.06);border-color:var(--border-hi)}
#difficulty:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#difficulty option{background:var(--bg-elev-2);color:var(--text-primary);padding:8px}
/* Actions */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.actions #start-button{grid-column:1 / -1}
.btn{padding:12px 16px;border-radius:var(--r-md);font-size:0.85rem;font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:48px;font-family:inherit}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 100%);color:#0a0a0f;box-shadow:0 7px 20px rgba(202,138,4,.18);font-size:0.95rem}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(202,138,4,.27)}
.btn-primary.reset{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 6px 20px rgba(239,68,68,0.3)}
.btn-primary.reset:hover:not(:disabled){box-shadow:0 10px 28px rgba(239,68,68,0.45)}
.btn-purple{background:linear-gradient(135deg,var(--purple),#7c3aed);color:#fff;box-shadow:0 6px 20px rgba(139,92,246,0.25)}
.btn-purple:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(139,92,246,0.4)}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text-secondary);border:1px solid var(--border-mid)}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,0.08);color:var(--text-primary);transform:translateY(-2px)}
/* Utility */
.utility-row{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-bottom:4px}
.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid var(--border-mid);color:var(--text-secondary);transition:background 0.25s ease,border-color 0.25s ease,color 0.25s ease,transform 0.25s ease;cursor:pointer}
.icon-btn:hover{background:rgba(250,204,21,0.12);border-color:var(--border-hi);color:var(--gold);transform:translateY(-2px)}
.icon-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.icon-btn.is-off{opacity:.55;border-color:var(--border-soft)}
.icon-btn .icon,.icon-btn svg{width:18px;height:18px}
/* Upload */
#upload-panel[hidden]{display:none!important}
.upload-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px 16px;border:2px dashed rgba(255,255,255,0.15);border-radius:var(--r-md);background:rgba(255,255,255,0.02);cursor:pointer;transition:border-color 0.25s ease,background 0.25s ease,transform 0.25s ease;text-align:center;min-height:110px}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--purple);background:rgba(139,92,246,0.08);transform:translateY(-2px)}
.upload-zone .upload-icon{font-size:1.6rem;color:var(--purple);transition:transform 0.25s ease;width:1.6rem;height:1.6rem}
.upload-zone:hover .upload-icon,.upload-zone.dragover .upload-icon{transform:scale(1.15) translateY(-2px)}
.upload-text{font-size:0.82rem;font-weight:600;color:var(--text-primary)}
.upload-hint{font-size:0.7rem;color:var(--text-muted)}
#image-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
#upload-preview{display:none;width:100%;max-height:130px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border-mid);margin-top:10px}
#upload-preview.show{display:block}
.upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.upload-actions .btn{padding:10px 12px;min-height:40px;font-size:0.78rem}
.image-status{font-size:0.72rem;color:var(--text-muted);margin-top:8px;min-height:16px;font-style:italic;text-align:center}
.image-status.success{color:#4ade80;font-style:normal;font-weight:600}
/* Achievements */
.achievements-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.achievement-count{font-size:0.72rem;color:var(--text-muted);font-weight:700;letter-spacing:0.04em}
.achievements-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (max-width:480px){
  .achievements-grid{grid-template-columns:1fr}
}
.achievement-badge{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:0.72rem;font-weight:600;transition:background 0.3s ease,border-color 0.3s ease,color 0.3s ease,opacity 0.3s ease;border:1px solid var(--border-soft);background:rgba(255,255,255,0.02);color:var(--text-muted)}
.achievement-badge .badge-icon{width:18px;height:18px;color:currentColor;stroke-width:2;flex-shrink:0;filter:grayscale(1) opacity(0.6);transition:filter 0.3s ease,color 0.3s ease}
.achievement-badge .badge-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achievement-badge.locked{opacity:0.55}
.achievement-badge.unlocked{background:linear-gradient(135deg,rgba(74,222,128,0.12),rgba(34,197,94,0.06));border-color:rgba(74,222,128,0.35);color:#4ade80;opacity:1;box-shadow:0 0 12px rgba(74,222,128,0.1)}
.achievement-badge.unlocked .badge-icon{filter:none;color:#4ade80;filter:drop-shadow(0 0 6px rgba(74,222,128,0.4))}
/* Toast */
.toast{position:fixed;bottom:calc(2rem + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(120px);padding:0.75rem 1.5rem;border-radius:var(--r-md);background:rgba(16,16,24,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-weight:500;font-size:0.875rem;z-index:10000;transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1),opacity 0.5s cubic-bezier(0.34,1.56,0.64,1);opacity:0;pointer-events:none;text-align:center;max-width:90%;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success{border:1px solid rgba(74,222,128,0.35)}
.toast.error{border:1px solid rgba(248,113,113,0.35)}
.toast.info{border:1px solid rgba(250,204,21,0.35)}
/* Confirm Dialog */
.confirm-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10001;padding:20px;opacity:0;transition:opacity 0.25s ease}
.confirm-overlay[hidden]{display:none}
.confirm-overlay.show{opacity:1}
.confirm-box{max-height:calc(100% - 24px);overflow-y:auto;background:linear-gradient(135deg,#16161f 0%,#1c1c28 100%);border:1px solid var(--border-hi);border-radius:var(--r-xl);padding:28px;max-width:420px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,0.6);transform:scale(0.9) translateY(20px);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);text-align:center}
.confirm-overlay.show .confirm-box{transform:scale(1) translateY(0)}
.confirm-icon{width:48px;height:48px;color:var(--gold);margin:0 auto 16px}
.confirm-icon .icon{width:100%;height:100%;stroke-width:1.75}
.confirm-title{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:10px}
.confirm-message{color:var(--text-secondary);font-size:0.9rem;margin-bottom:24px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-btn{padding:12px 24px;border-radius:var(--r-md);font-weight:600;font-size:0.9rem;cursor:pointer;transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease,color 0.25s ease;border:none;font-family:inherit;flex:1}
.confirm-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.confirm-btn.cancel{background:rgba(255,255,255,0.06);color:var(--text-secondary);border:1px solid var(--border-soft)}
.confirm-btn.cancel:hover{background:rgba(255,255,255,0.1);color:var(--text-primary)}
.confirm-btn.ok{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#0a0a0f}
.confirm-btn.ok:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(250,204,21,0.4)}
/* ============================================================
   WIN MODAL
   ============================================================ */
.win-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:50;padding:clamp(8px,3%,20px);border-radius:var(--r-lg);overflow:auto;opacity:0;transition:opacity 0.25s ease}
.win-overlay[hidden]{display:none}
.win-overlay.show{opacity:1}
.win-box{background:radial-gradient(circle at 50% 0%,rgba(250,204,21,.15),transparent 60%),linear-gradient(135deg,#16161f 0%,#1c1c28 100%);border:1px solid rgba(250,204,21,.24);border-radius:var(--r-xl);padding:32px 28px;max-width:440px;width:100%;max-height:100%;overflow-y:auto;box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 50px rgba(250,204,21,.07);transform:scale(0.85) translateY(30px);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);text-align:center;position:relative}
.win-overlay.show .win-box{transform:scale(1) translateY(0)}
.win-close{position:absolute;top:8px;right:8px;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid var(--border-mid);color:var(--text-secondary);transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,transform 0.25s ease;cursor:pointer;z-index:20;touch-action:manipulation}
.win-close:hover,.win-close:active{background:rgba(239,68,68,0.15);color:#fca5a5;border-color:rgba(239,68,68,0.35);transform:rotate(90deg)}
.win-close .icon{font-size:1.1rem;width:20px;height:20px;pointer-events:none}
.win-trophy{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle,rgba(250,204,21,0.15),transparent 70%);color:var(--gold);animation:trophy-bounce 1.2s ease-in-out infinite}
.win-trophy .icon{width:48px;height:48px;stroke-width:1.75}
@keyframes trophy-bounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.05)}
}
.win-title{font-family:var(--font-display);font-size:1.6rem;font-weight:700;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-soft) 50%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.win-subtitle{font-size:0.88rem;color:var(--text-secondary);margin-bottom:22px}
.win-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.win-stat{background:rgba(255,255,255,0.04);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:14px 10px}
.win-stat-value{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--gold);line-height:1.1}
.win-stat-label{font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;font-weight:600}
.win-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.win-actions .btn{width:100%}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:10003}
/* Responsive */
@media (max-width:900px){
  .game-panel{max-width:640px;padding:20px 16px;grid-template-columns:1fr;grid-template-areas:"board"
              "progress"
              "side"
              "stats";gap:16px}
  .board-wrap{width:min(100%,440px)}
  .side-panel{order:0}
}
@media (max-width:640px){
  .back-to-hub{top:80px;left:12px;width:44px;height:44px;padding:0;gap:0;animation:pulse-ring 2s ease-out infinite}
  .back-to-hub span{display:none}
  .back-to-hub .icon{font-size:1rem;animation:nudge-left 2s ease-in-out infinite}
  .back-to-hub:active,.back-to-hub:active .icon{animation:none}
}
@media (max-width:480px){
  .hero{padding:110px 0 40px}
  .game-section{padding:10px 12px 60px}
  .game-panel{padding:14px 12px;border-radius:var(--r-lg)}
  .board-wrap{width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* Modal kemenangan harus muat di dalam papan persegi pada layar HP. */
      .win-overlay{padding:6px;overflow:hidden;align-items:center}
  .win-box{width:100%;max-height:100%;padding:18px 12px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .win-box::-webkit-scrollbar{display:none}
  .win-close{top:5px;right:5px;width:36px;height:36px;min-width:36px;min-height:36px}
  .win-title{font-size:1.15rem;margin-bottom:4px}
  .win-trophy{width:42px;height:42px;margin-bottom:4px}
  .win-trophy .icon{width:30px;height:30px}
  .win-subtitle{font-size:.78rem;line-height:1.35;margin:0 0 10px}
  .win-stats{gap:7px;margin-bottom:10px}
  .win-stat{padding:8px 6px}
  .win-stat-value{font-size:1.3rem}
  .win-stat-label{font-size:.62rem;margin-top:3px}
  .win-actions{gap:6px}
  .win-actions .btn{min-width:0;padding:10px 6px;font-size:.78rem}
}
@media (max-width:480px) and (max-height:700px){
  .win-box{padding-top:12px;padding-bottom:10px}
  .win-trophy{width:36px;height:36px;margin-bottom:2px}
  .win-trophy .icon{width:26px;height:26px}
  .win-subtitle{margin-bottom:7px}
  .win-stats{margin-bottom:7px}
  .win-stat{padding:6px 5px}
  .win-actions .btn{padding-top:8px;padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .hero-title .hero-icon,.footer::before,.footer::after,.footer-brand .brand-logo,.status-dot,.footer-credit .icon,.win-trophy,.game-tile.hinted{animation:none!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/* ============================================================
   FOOTER — MIDNIGHT CONSTELLATION
   ============================================================ */
.footer{background:var(--bg-elev-1);padding-top:64px;margin-top:auto;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--gold-dark) 20%,var(--gold) 50%,var(--gold-dark) 80%,transparent 100%);opacity:0.6;animation:shimmer 4s ease-in-out infinite;z-index:2}
@keyframes shimmer{
  0%,100%{opacity:0.3}
  50%{opacity:0.85}
}
.footer::after{content:'';position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(250,204,21,0.45),transparent),radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,0.30),transparent),radial-gradient(1px 1px at 80% 20%,rgba(34,211,238,0.35),transparent),radial-gradient(1.5px 1.5px at 40% 80%,rgba(250,204,21,0.35),transparent),radial-gradient(1px 1px at 10% 60%,rgba(255,255,255,0.22),transparent),radial-gradient(1px 1px at 90% 85%,rgba(250,204,21,0.28),transparent);background-size:200% 200%;pointer-events:none;opacity:0.5;animation:twinkle 8s ease-in-out infinite;z-index:0}
@keyframes twinkle{
  0%,100%{opacity:0.3}
  50%{opacity:0.65}
}
.footer > .container-global,.footer-grid,.footer-bottom{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand .brand-logo{position:relative;animation:glow-pulse 3s ease-in-out infinite}
@keyframes glow-pulse{
  0%,100%{box-shadow:0 0 16px rgba(250,204,21,0.3)}
  50%{box-shadow:0 0 28px rgba(250,204,21,0.65)}
}
.footer-desc{color:var(--text-secondary);font-size:14px;max-width:300px}
.status-pill{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:5px 12px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);border-radius:999px;font-size:11px;font-weight:600;color:#4ade80;letter-spacing:0.02em}
.status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.85)}
}
.footer-col h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);margin-bottom:16px}
.footer-col h4 .col-num{font-family:var(--font-display);font-size:11px;color:var(--text-muted);font-weight:500;opacity:0.6;letter-spacing:0}
.footer-col h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent)}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.footer-col a{position:relative;display:inline-flex;align-items:center;gap:0;color:var(--text-secondary);font-size:14px;padding:6px 0;transition:color 0.25s ease,gap 0.25s ease}
.footer-col a::before{content:'→';opacity:0;transform:translateX(-8px);transition:opacity 0.25s ease,transform 0.25s ease;color:var(--gold);font-size:12px}
.footer-col a:hover{color:var(--gold);gap:6px}
.footer-col a:hover::before{opacity:1;transform:translateX(0)}
.footer-col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.footer-col a.footer-current{color:var(--gold);cursor:default;pointer-events:none;font-weight:600}
.no-js [data-aos]{opacity:1!important;transform:none!important}
.footer-current{display:inline-flex;align-items:center;color:var(--gold);font-size:14px;padding:6px 0;cursor:default}
.footer-current::before{content:'→';visibility:hidden;font-size:12px;flex:0 0 auto}
.socials{display:flex;gap:12px;align-items:center}
.socials a{position:relative;width:40px;height:40px;padding:0;flex:0 0 40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--border-soft);color:var(--text-secondary);transition:background 0.25s ease,color 0.25s ease,border-color 0.25s ease,transform 0.25s ease}
.socials a::before{content:none;display:none}
.socials a .icon{display:block;width:16px;height:16px}
.socials a:hover{background:var(--gold);color:var(--bg-base);border-color:var(--gold);transform:translateY(-3px)}
.socials a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.footer-bottom{border-top:1px solid var(--border-soft);padding:24px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.footer-credit a{color:var(--gold);font-weight:600}
.footer-credit a:hover{color:var(--gold-soft)}
.footer-credit strong{color:var(--gold);font-weight:600}
.footer-credit .icon{color:#ef4444;margin:0 2px;width:1em;height:1em;display:inline-block;vertical-align:-0.125em;animation:heartbeat 1.4s ease-in-out infinite}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.25)}
  30%{transform:scale(1)}
  45%{transform:scale(1.2)}
}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom-inner{justify-content:center;text-align:center}
}
@media (max-width:480px){
  .confirm-overlay{padding:6px;overflow:hidden;align-items:center}
  .confirm-box{width:100%;max-height:100%;padding:26px 18px 22px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:var(--r-lg)}
  .confirm-box::-webkit-scrollbar{display:none}
  .confirm-icon{width:42px;height:42px;margin:0 auto 12px}
  .confirm-icon .icon{width:30px;height:30px}
  .confirm-title{font-size:1.15rem;margin-bottom:8px}
  .confirm-message{font-size:.82rem;line-height:1.4;margin:0 0 18px}
  .confirm-actions{gap:8px}
  .confirm-btn{min-width:0;padding:11px 8px;font-size:.8rem}
}
@media (max-width:480px) and (max-height:700px){
  .confirm-box{padding-top:20px;padding-bottom:16px}
  .confirm-icon{width:36px;height:36px;margin-bottom:8px}
  .confirm-icon .icon{width:26px;height:26px}
  .confirm-message{margin-bottom:12px}
  .confirm-btn{padding-top:9px;padding-bottom:9px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Extracted inline styles ===== */


/* Extracted inline style attributes */
.inline-style-1 {display:none}
.inline-style-2 {position:fixed;top:0;left:0;right:0;padding:14px 20px;background:linear-gradient(135deg,#7f1d1d,#991b1b);color:#fff;text-align:center;font-size:14px;font-weight:600;z-index:99999;}
.inline-style-3 {grid-column: 1 / -1;}
.inline-style-4 {margin-bottom: 0;}