@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
:root{--bg:#0a0a1a;--panel:#12122a;--accent:#f0c040;--accent2:#40c0f0;--green:#40e080;--red:#f04040;--purple:#c060f0;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);font-family:'Press Start 2P',monospace;color:#fff;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 30% 60%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 50% 10%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.4) 0%,transparent 100%),radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 20% 90%,rgba(255,255,255,.3) 0%,transparent 100%),radial-gradient(1px 1px at 80% 15%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 45% 45%,rgba(255,255,255,.4) 0%,transparent 100%);pointer-events:none;z-index:0;}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:opacity .3s;}
.screen.hidden{opacity:0;pointer-events:none;}

/* ── HOME ── */
#homeScreen{flex-direction:column;background:linear-gradient(135deg,#0a0a1a 0%,#1a0a2a 100%);}
.home-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;}
.logo{text-align:center;animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.logo-t{display:block;font-size:clamp(24px,5vw,44px);color:var(--accent);text-shadow:0 0 20px var(--accent),4px 4px 0 #a08020;letter-spacing:4px;}
.logo-s{display:block;font-size:clamp(8px,1.5vw,12px);color:var(--accent2);letter-spacing:2px;margin-top:8px;text-shadow:0 0 10px var(--accent2);}
.divider{width:280px;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:6px auto;}

/* ── CHỌN SỐ THÙNG ── */
.box-count-wrap{background:var(--panel);border:2px solid var(--accent2);padding:14px 30px;text-align:center;box-shadow:0 0 20px rgba(64,192,240,.15);}
.box-count-lbl{font-size:8px;color:var(--accent2);letter-spacing:2px;margin-bottom:10px;}
.box-count-row{display:flex;align-items:center;justify-content:center;gap:18px;}
.bc-btn{font-family:'Press Start 2P',monospace;font-size:10px;width:32px;height:32px;background:transparent;border:2px solid var(--accent2);color:var(--accent2);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.bc-btn:hover{background:rgba(64,192,240,.15);box-shadow:0 0 10px rgba(64,192,240,.3);}
.bc-btn:active{transform:scale(.92);}
.bc-val{font-size:22px;color:var(--accent);min-width:36px;text-align:center;text-shadow:0 0 10px var(--accent);}
.bc-range-hint{font-family:'VT323',monospace;font-size:14px;color:#444;margin-top:6px;}

/* ── MENU ── */
.menu-box{background:var(--panel);border:2px solid var(--accent);padding:28px 44px;text-align:center;box-shadow:0 0 30px rgba(240,192,64,.2);}
.menu-lbl{font-size:9px;color:var(--accent2);margin-bottom:18px;letter-spacing:2px;}
.diff-btns{display:flex;flex-direction:column;gap:10px;}
.dbtn{font-family:'Press Start 2P',monospace;font-size:10px;padding:13px 38px;border:2px solid;background:transparent;cursor:pointer;transition:all .15s;letter-spacing:1px;}
.dbtn:active{transform:scale(.97);}
.dbtn.easy{border-color:var(--green);color:var(--green);}
.dbtn.easy:hover{background:rgba(64,224,128,.12);box-shadow:0 0 15px rgba(64,224,128,.3);}
.dbtn.med{border-color:var(--accent);color:var(--accent);}
.dbtn.med:hover{background:rgba(240,192,64,.12);box-shadow:0 0 15px rgba(240,192,64,.3);}
.dbtn.hard{border-color:var(--red);color:var(--red);}
.dbtn.hard:hover{background:rgba(240,64,64,.12);box-shadow:0 0 15px rgba(240,64,64,.3);}
/* ── NÚT NGẪU NHIÊN ── */
.dbtn.random{border-color:var(--purple);color:var(--purple);animation:randGlow 2s ease-in-out infinite;}
@keyframes randGlow{0%,100%{box-shadow:none}50%{box-shadow:0 0 18px rgba(192,96,240,.45)}}
.dbtn.random:hover{background:rgba(192,96,240,.12);box-shadow:0 0 20px rgba(192,96,240,.4);}
.hint{font-family:'VT323',monospace;font-size:16px;color:#444;text-align:center;}

/* ── TUTORIAL ── */
#tutorialScreen{background:rgba(0,0,0,.85);backdrop-filter:blur(4px);}
.tut-box{background:var(--panel);border:2px solid var(--accent2);padding:32px 40px;max-width:560px;width:90vw;box-shadow:0 0 40px rgba(64,192,240,.2);}
.tut-title{font-size:12px;color:var(--accent2);text-shadow:0 0 10px var(--accent2);margin-bottom:22px;text-align:center;letter-spacing:2px;}
.tut-sec{margin-bottom:18px;}
.tut-sec-t{font-size:7px;color:var(--accent);margin-bottom:8px;letter-spacing:1px;border-bottom:1px solid rgba(240,192,64,.25);padding-bottom:4px;}
.tut-txt{font-family:'VT323',monospace;font-size:18px;color:#ccc;line-height:1.65;}
.tut-txt span{color:var(--accent2);font-weight:bold;}
.key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:160px;margin:10px auto;}
.key{background:#2a2a4a;border:2px solid #4a4a8a;border-bottom:4px solid #2a2a5a;padding:7px 3px;text-align:center;font-size:8px;color:var(--accent);border-radius:3px;}
.key.empty{visibility:hidden;}.key.ctr{color:var(--accent2);border-color:var(--accent2);}
.key-lbls{display:flex;gap:16px;justify-content:center;margin-top:7px;flex-wrap:wrap;}
.key-lbl{font-family:'VT323',monospace;font-size:15px;color:#aaa;}
.key-lbl span{color:var(--accent);font-size:17px;}
.start-btn{font-family:'Press Start 2P',monospace;font-size:9px;padding:13px 46px;border:2px solid var(--green);background:transparent;color:var(--green);cursor:pointer;display:block;margin:22px auto 0;letter-spacing:1px;text-shadow:0 0 8px var(--green);transition:all .15s;}
.start-btn:hover{background:rgba(64,224,128,.12);box-shadow:0 0 20px rgba(64,224,128,.3);}

/* ── GAME HUD ── */
#gameScreen{flex-direction:column;background:var(--bg);}
.game-hdr{position:fixed;top:0;left:0;right:0;padding:8px 16px;background:var(--panel);border-bottom:2px solid rgba(240,192,64,.25);display:flex;align-items:center;justify-content:space-between;z-index:20;gap:10px;}
.hud-item{font-size:7px;color:#666;min-width:60px;}
.hud-val{color:var(--accent);font-size:9px;display:block;margin-top:2px;}
.hud-val.g{color:var(--green);}.hud-val.de{color:var(--green);}.hud-val.me{color:var(--accent);}.hud-val.ha{color:var(--red);}
.hud-val.rnd{color:var(--purple);animation:randGlow 2s ease-in-out infinite;}
.pbar{width:100px;height:6px;background:#1a1a2e;border:1px solid #333;overflow:hidden;margin-top:3px;}
.pfill{height:100%;background:var(--green);transition:width .3s;box-shadow:0 0 5px var(--green);}
#canvas{display:block;margin-top:48px;image-rendering:pixelated;image-rendering:crisp-edges;}

/* ── NÚT MỞ BẢNG MÀU ── */
.color-toggle-btn{font-family:'Press Start 2P',monospace;font-size:14px;padding:4px 8px;background:transparent;border:2px solid var(--purple);color:var(--purple);cursor:pointer;transition:all .15s;border-radius:2px;}
.color-toggle-btn:hover{background:rgba(192,96,240,.15);box-shadow:0 0 12px rgba(192,96,240,.4);}

/* ── PAUSE ── */
#pauseMenu{background:rgba(0,0,0,.82);backdrop-filter:blur(6px);}
.pause-box{background:var(--panel);border:2px solid #555;padding:36px 54px;text-align:center;min-width:280px;}
.pause-t{font-size:14px;color:#999;margin-bottom:26px;letter-spacing:3px;}
.pbtn{font-family:'Press Start 2P',monospace;font-size:8px;padding:11px 26px;border:2px solid;background:transparent;cursor:pointer;display:block;width:100%;margin-bottom:10px;letter-spacing:1px;transition:all .15s;}
.pbtn.res{border-color:var(--green);color:var(--green);}.pbtn.res:hover{background:rgba(64,224,128,.1);}
.pbtn.rst{border-color:var(--accent);color:var(--accent);}.pbtn.rst:hover{background:rgba(240,192,64,.1);}
.pbtn.qt{border-color:var(--red);color:var(--red);}.pbtn.qt:hover{background:rgba(240,64,64,.1);}

/* ── WIN ── */
#winScreen{background:rgba(0,0,0,.85);backdrop-filter:blur(6px);flex-direction:column;}
.win-box{background:var(--panel);border:2px solid var(--green);padding:36px 54px;text-align:center;box-shadow:0 0 40px rgba(64,224,128,.3);animation:wp 1s ease-in-out infinite;}
@keyframes wp{0%,100%{box-shadow:0 0 40px rgba(64,224,128,.3)}50%{box-shadow:0 0 65px rgba(64,224,128,.6)}}
.win-t{font-size:16px;color:var(--green);text-shadow:0 0 14px var(--green);margin-bottom:8px;animation:float 2s ease-in-out infinite;}
.win-e{font-size:34px;margin:8px 0;}
.win-st{font-family:'VT323',monospace;font-size:19px;color:#aaa;margin:14px 0;line-height:1.65;}
.win-st span{color:var(--accent);}
.win-btns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
.wbtn{font-family:'Press Start 2P',monospace;font-size:7px;padding:11px 16px;border:2px solid;background:transparent;cursor:pointer;letter-spacing:1px;transition:all .15s;}
.wbtn.rp{border-color:var(--accent);color:var(--accent);}.wbtn.rp:hover{background:rgba(240,192,64,.1);}
.wbtn.nx{border-color:var(--green);color:var(--green);}.wbtn.nx:hover{background:rgba(64,224,128,.1);}
.wbtn.hm{border-color:#777;color:#777;}.wbtn.hm:hover{background:rgba(128,128,128,.1);}

/* ── PARTICLES ── */
.particle{position:fixed;pointer-events:none;font-size:18px;z-index:999;animation:pfly 1.6s ease-out forwards;}
@keyframes pfly{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-120px) scale(.4);opacity:0}}

/* ── LOADING OVERLAY ── */
#loadingOverlay{position:fixed;inset:0;background:rgba(10,10,26,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px);transition:opacity .4s;}
#loadingOverlay.hidden{opacity:0;pointer-events:none;}
.ld-title{font-size:11px;color:var(--accent);letter-spacing:3px;margin-bottom:24px;text-shadow:0 0 15px var(--accent);}
.ld-bar-wrap{width:260px;height:10px;background:#1a1a35;border:1px solid #333;border-radius:5px;overflow:hidden;margin-bottom:16px;}
.ld-bar{height:100%;background:linear-gradient(90deg,var(--accent2),var(--green));border-radius:5px;transition:width .2s;box-shadow:0 0 8px var(--accent2);}
.ld-txt{font-family:'VT323',monospace;font-size:20px;color:#888;letter-spacing:1px;}
.ld-attempt{font-family:'VT323',monospace;font-size:15px;color:#444;margin-top:8px;}
.ld-icon{font-size:36px;animation:spin 1s linear infinite;margin-bottom:18px;}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════
   BẢNG MÀU TÙY CHỈNH
══════════════════════════════════════════════ */
#colorPanel{
  position:fixed;
  top:54px; right:12px;
  width:260px;
  background:var(--panel);
  border:2px solid var(--purple);
  box-shadow:0 0 30px rgba(192,96,240,.3);
  z-index:100;
  border-radius:2px;
  transition:opacity .2s, transform .2s;
  max-height:calc(100vh - 70px);
  overflow-y:auto;
}
#colorPanel.hidden{opacity:0;pointer-events:none;transform:translateY(-8px);}
.cp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(192,96,240,.3);position:sticky;top:0;background:var(--panel);z-index:1;}
.cp-title{font-size:8px;color:var(--purple);letter-spacing:2px;text-shadow:0 0 8px var(--purple);}
.cp-close{background:transparent;border:1px solid #555;color:#888;font-size:10px;width:22px;height:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.cp-close:hover{border-color:var(--red);color:var(--red);}
.cp-body{padding:12px 14px;display:flex;flex-direction:column;gap:12px;}
.cp-group{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);padding:10px 12px;}
.cp-group-lbl{font-size:7px;color:var(--accent2);letter-spacing:1px;margin-bottom:8px;text-transform:uppercase;}
.cp-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.cp-row:last-child{margin-bottom:0;}
.cp-row label{font-family:'VT323',monospace;font-size:15px;color:#aaa;flex:1;}
.cp-row input[type="color"]{
  width:36px;height:24px;
  padding:1px;
  border:2px solid #444;
  background:#111;
  cursor:pointer;
  border-radius:2px;
  transition:border-color .15s;
}
.cp-row input[type="color"]:hover{border-color:var(--purple);}
.cp-reset{font-family:'Press Start 2P',monospace;font-size:7px;padding:9px;background:transparent;border:2px solid #555;color:#666;cursor:pointer;width:100%;letter-spacing:1px;transition:all .15s;margin-top:4px;}
.cp-reset:hover{border-color:var(--accent);color:var(--accent);background:rgba(240,192,64,.08);}

/* Scrollbar cho bảng màu */
#colorPanel::-webkit-scrollbar{width:4px;}
#colorPanel::-webkit-scrollbar-track{background:#0a0a1a;}
#colorPanel::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
#colorPanel::-webkit-scrollbar-thumb:hover{background:#555;}