*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#1a1a1a}
canvas{display:block;width:100%;height:100%;position:fixed;inset:0}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:"Trebuchet MS",Verdana,system-ui}
.hud>*{pointer-events:auto}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 100%);padding-bottom:16px}
.hud-group{display:flex;align-items:center;gap:8px}

.top-btn{width:44px;height:44px;border:2px solid rgba(255,215,0,0.5);border-radius:12px;background:rgba(61,43,31,0.85);color:#f5f0e8;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.1s;backdrop-filter:blur(4px)}
.top-btn:active{transform:scale(0.92);background:rgba(61,43,31,0.95)}
.top-btn:disabled{opacity:0.3;pointer-events:none}

.level-chip{padding:6px 14px;border-radius:20px;background:rgba(61,43,31,0.85);border:2px solid rgba(255,215,0,0.4);color:#ffd700;font-weight:700;font-size:15px;backdrop-filter:blur(4px)}
.move-chip{padding:6px 14px;border-radius:20px;background:rgba(61,43,31,0.85);border:2px solid rgba(245,240,232,0.3);color:#f5f0e8;font-weight:600;font-size:14px;white-space:nowrap;backdrop-filter:blur(4px)}

/* Overlays */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(26,26,26,0.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.3s}
.overlay.visible{opacity:1;pointer-events:auto}

/* Title */
.title-panel{text-align:center;padding:30px 50px;background:linear-gradient(180deg,#3d2b1f,#2a1f14);border:3px solid #ffd700;border-radius:28px;box-shadow:0 12px 0 #1a120c,0 30px 60px rgba(0,0,0,0.5)}
.title-icon{width:80px;height:80px;margin:0 auto 12px;background:radial-gradient(circle at 35% 35%,#ff6b6b,#c0392b,#8e44ad);border-radius:50%;border:3px solid #ffd700;box-shadow:0 0 30px rgba(255,215,0,0.3)}
.game-title{font-family:Georgia,Cambria,serif;font-size:48px;font-weight:700;color:#ffd700;text-shadow:0 3px 0 #8b6914,0 6px 20px rgba(0,0,0,0.5);letter-spacing:2px}
.title-sub{font-family:Georgia,Cambria,serif;font-size:22px;color:#b8a99a;margin-bottom:20px;letter-spacing:6px;text-transform:uppercase}

/* Level Select */
.ls-panel{padding:20px 28px;background:linear-gradient(180deg,#3d2b1f,#2a1f14);border:3px solid #ffd700;border-radius:24px;box-shadow:0 10px 0 #1a120c,0 30px 50px rgba(0,0,0,0.5);max-width:520px;width:90%;max-height:85vh;overflow-y:auto}
.ls-title{font-family:Georgia,Cambria,serif;font-size:28px;color:#ffd700;text-align:center;margin-bottom:16px;text-shadow:0 2px 0 #8b6914}
.ls-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ls-btn{width:100%;aspect-ratio:1;border-radius:12px;font-family:"Trebuchet MS",Verdana,system-ui;font-size:16px;font-weight:700;border:2px solid rgba(255,215,0,0.3);background:rgba(255,255,255,0.08);color:#b8a99a;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ls-btn.unlocked{border-color:rgba(255,215,0,0.6);color:#f5f0e8;background:rgba(255,215,0,0.08)}
.ls-btn.unlocked:active{transform:scale(0.93);background:rgba(255,215,0,0.18)}
.ls-btn.completed{background:rgba(46,204,113,0.15);border-color:#2ecc71;color:#2ecc71}
.ls-btn.completed .ls-moves{font-size:10px;color:#2ecc71;opacity:0.8}
.ls-btn.locked{opacity:0.4;cursor:default}
.ls-btn.locked::after{content:"\1F512";font-size:14px}
.ls-btn.current{border-color:#ffd700;box-shadow:0 0 12px rgba(255,215,0,0.3)}

/* Win overlay */
.win-panel{text-align:center;padding:30px 44px;background:linear-gradient(180deg,#3d2b1f,#2a1f14);border:3px solid #ffd700;border-radius:28px;box-shadow:0 12px 0 #1a120c,0 30px 60px rgba(0,0,0,0.5)}
.win-icon{font-size:64px;color:#ffd700;text-shadow:0 0 30px rgba(255,215,0,0.5);margin-bottom:4px;animation:winPulse 0.6s ease-in-out infinite alternate}
@keyframes winPulse{from{transform:scale(1)}to{transform:scale(1.12)}}
.win-title{font-family:Georgia,Cambria,serif;font-size:34px;color:#ffd700;text-shadow:0 2px 0 #8b6914;margin-bottom:8px}
.win-moves{font-family:"Trebuchet MS",Verdana,system-ui;font-size:20px;color:#f5f0e8;margin-bottom:4px}
.win-feat{font-size:15px;color:#b8a99a;margin-bottom:20px;min-height:22px}
.win-buttons{display:flex;gap:12px;justify-content:center}

/* Buttons */
.game-btn{border:none;border-radius:14px;padding:12px 30px;font-family:"Trebuchet MS",Verdana,system-ui;font-weight:800;font-size:17px;cursor:pointer;transition:all 0.1s;-webkit-tap-highlight-color:transparent}
.game-btn:active{transform:scale(0.95)}
.game-btn.primary{background:linear-gradient(180deg,#ffd700,#f0c000);color:#1a120c;box-shadow:0 5px 0 #b8960e,0 8px 20px rgba(255,215,0,0.2)}
.game-btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #b8960e,0 5px 15px rgba(255,215,0,0.15)}
.game-btn.secondary{background:rgba(255,255,255,0.1);color:#f5f0e8;border:2px solid rgba(245,240,232,0.3);box-shadow:0 4px 0 rgba(0,0,0,0.3)}
.game-btn.secondary:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,0.3)}

@media(max-width:600px){
  .title-panel{padding:24px 30px!important}
  .game-title{font-size:36px!important}
  .title-sub{font-size:18px!important}
  .title-icon{width:60px;height:60px}
  .ls-panel{padding:16px 18px!important}
  .ls-grid{gap:8px!important}
  .ls-title{font-size:22px!important}
  .ls-btn{font-size:14px!important;border-radius:10px!important}
  .win-panel{padding:24px 28px!important}
  .win-title{font-size:28px!important}
  .game-btn{padding:10px 22px;font-size:15px}
  .top-btn{width:40px;height:40px;font-size:20px}
  .level-chip{font-size:13px;padding:4px 10px}
  .move-chip{font-size:12px;padding:4px 10px}
}