:root{
    --ink:#0E1520; --panel:#17202E; --line:#27354A;
    --gold:#E5B446; --gold-lt:#FFE9A8; --gold-dk:#8A6420;
    --red:#D8453A; --dim:#7C8AA0;
  }
#gcv-shell *{box-sizing:border-box;margin:0;padding:0}
    #gcv-shell{
    background:var(--ink); color:#E9EEF5;
    font-family:'Barlow Condensed',system-ui,sans-serif;
    padding:8px 14px;-webkit-tap-highlight-color:transparent;
    height:100vh;height:100dvh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  body.admin-bar #gcv-shell{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
  #gcv-shell *{box-sizing:border-box;margin:0;padding:0}
#gcv-shell #shell{width:100%;max-width:1500px;margin:0 auto;
  height:100%;display:flex;flex-direction:column;gap:6px}
#gcv-shell header,#gcv-shell #hud,#gcv-shell #kb,
#gcv-shell .fingers,#gcv-shell footer{flex:0 0 auto}

#gcv-shell header{display:flex;align-items:baseline;gap:14px;padding:0 4px 6px}
#gcv-shell header h1{font-size:25px;font-weight:600;letter-spacing:.5px;color:var(--gold)}
#gcv-shell header p{font-size:18px;color:var(--dim)}

#gcv-shell #hud{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel);
       border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0}
#gcv-shell .stat{padding:9px 16px;border-right:1px solid var(--line)}
#gcv-shell .stat:last-child{border-right:none}
#gcv-shell .stat span{display:block;font-size:15px;color:var(--dim);letter-spacing:1px}
#gcv-shell .stat b{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
#gcv-shell #vCombo{color:var(--gold)}
#gcv-shell #vToday{color:var(--gold)}
#gcv-shell #vAll{color:#9FE8E0} #vGold{color:var(--gold-lt)}

#gcv-shell #stage{position:relative;line-height:0}
#gcv-shell canvas{display:block;background:var(--panel);
         border:1px solid var(--line);border-radius:0 0 8px 8px;
         height:100%;width:auto;max-width:100%;margin:0 auto}
  #gcv-shell #stage{flex:1 1 auto;min-height:0;display:flex;justify-content:center;position:relative}

#gcv-shell #overlay{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:12px;text-align:center;line-height:1.5;
    background:rgba(14,21,32,.92);border-radius:0 0 8px 8px;padding:24px}
#gcv-shell #overlay.hidden{display:none}
#gcv-shell #overlay h2{font-size:40px;font-weight:600;color:var(--gold)}
#gcv-shell #overlay p{max-width:62ch;font-size:21px;color:#C3CDDC}
#gcv-shell #overlay .keys{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--dim)}
#gcv-shell button{font-family:inherit;font-size:22px;font-weight:600;letter-spacing:.5px;
    padding:9px 26px;margin-top:2px;cursor:pointer;color:var(--ink);
    background:var(--gold);border:none;border-radius:6px}
#gcv-shell button:hover{background:var(--gold-lt)}
#gcv-shell button:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}

  /* bàn phím ảo */
#gcv-shell #kb{margin-top:10px;padding:10px 6px;background:var(--panel);
      border:1px solid var(--line);border-radius:8px;user-select:none}
#gcv-shell .krow{display:flex;justify-content:center;gap:5px;margin-bottom:5px}
#gcv-shell .krow:last-child{margin-bottom:0}
#gcv-shell .key{
    flex:0 0 auto;width:54px;height:40px;border-radius:5px;
    background:#1E2939;border:1px solid #38465C;color:#C3CDDC;
    font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:transform .06s ease, background .12s ease, color .12s ease, border-color .12s ease;
  }
#gcv-shell .key.wide{width:134px;font-size:16px}
#gcv-shell .key{position:relative}
#gcv-shell .key::after{content:'';position:absolute;left:6px;right:6px;bottom:3px;height:3px;
    border-radius:2px;background:var(--fg,transparent);opacity:.85}
#gcv-shell .key.home::before{content:'';position:absolute;left:50%;bottom:9px;width:14px;height:2px;
    transform:translateX(-50%);background:#7C8AA0;border-radius:2px}
#gcv-shell .fingers{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
    padding:8px 4px 0;font-size:16px;color:var(--dim)}
#gcv-shell .fingers i{display:inline-block;width:16px;height:3px;border-radius:2px;
    margin-right:4px;vertical-align:middle;font-style:normal}
#gcv-shell .key.hint{border-color:var(--gold);color:var(--gold-lt);
            box-shadow:0 0 12px rgba(229,180,70,.35) inset}
#gcv-shell .key.soft{border-color:var(--gold-dk);color:var(--gold)}
#gcv-shell .key.down{background:var(--gold);border-color:var(--gold-lt);color:var(--ink);
            transform:translateY(2px) scale(.96);transition:none}
#gcv-shell .key.bad{background:var(--red);border-color:var(--red);color:#fff;transition:none}

#gcv-shell #overlay input{font-family:'IBM Plex Mono',monospace;font-size:16px;
    padding:10px 12px;width:320px;max-width:82vw;text-align:center;
    background:#101825;border:1px solid var(--line);border-radius:6px;color:#E9EEF5}
#gcv-shell #overlay input::placeholder{color:#556070}
#gcv-shell #overlay input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,180,70,.18)}
#gcv-shell .err{color:var(--red);font-size:15px;min-height:19px}
#gcv-shell .note{font-size:14px;color:var(--dim)}
#gcv-shell button.ghost{background:none;color:var(--dim);border:1px solid var(--line);font-size:18px;padding:8px 20px}
#gcv-shell button.ghost:hover{background:#1E2939;color:#C3CDDC}
#gcv-shell button[disabled]{opacity:.55;cursor:default}
#gcv-shell .packs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:560px}
#gcv-shell button.pack{font-size:18px;padding:8px 18px;margin-top:0;position:relative;
  background:#1B2433;color:var(--dim);border:1px solid var(--line);
  transition:color .18s ease, border-color .18s ease, background .18s ease}
#gcv-shell button.pack:hover{color:#C3CDDC;border-color:#4B5B75;background:#222E41}

/* bộ đang chọn: viền neon vàng, thở nhẹ */
#gcv-shell button.pack.on{
  background:#2A2206;color:var(--gold-lt);border:1px solid var(--gold);
  text-shadow:0 0 8px rgba(255,233,168,.65);
  animation:gcvNeon 1.9s ease-in-out infinite}
#gcv-shell button.pack.on::before{
  content:'';position:absolute;inset:-4px;border-radius:8px;pointer-events:none;
  border:1px solid rgba(229,180,70,.35);filter:blur(2px)}
@keyframes gcvNeon{
  0%,100%{box-shadow:0 0 5px rgba(229,180,70,.55), 0 0 14px rgba(229,180,70,.30), inset 0 0 7px rgba(229,180,70,.16)}
  50%    {box-shadow:0 0 11px rgba(229,180,70,.95), 0 0 28px rgba(229,180,70,.55), inset 0 0 12px rgba(229,180,70,.30)}
}
@media (prefers-reduced-motion:reduce){
  #gcv-shell button.pack.on{animation:none;
    box-shadow:0 0 9px rgba(229,180,70,.75), 0 0 22px rgba(229,180,70,.4)}
}
#gcv-shell .share{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#gcv-shell .share button{font-size:15px;padding:7px 14px;margin-top:0}
#gcv-shell .linkbox{display:flex;gap:6px;width:440px;max-width:88vw}
#gcv-shell .linkbox input{flex:1;width:auto;text-align:left;font-size:14px;padding:9px 10px}
#gcv-shell .invite{display:flex;align-items:center;gap:10px;justify-content:center;
    padding:8px 14px;border:1px solid var(--gold-dk);border-radius:6px;
    background:rgba(229,180,70,.08);color:var(--gold-lt);font-size:17px}
#gcv-shell .invite b{font-size:24px;font-variant-numeric:tabular-nums}
#gcv-shell .beststrip{width:100%}
#gcv-shell .lead{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#gcv-shell .lead-box{min-width:190px;padding:8px 16px;border:1px solid var(--line);
  border-radius:8px;background:#151E2C;text-align:center}
#gcv-shell .lead-box.hot{border-color:var(--gold);background:#241D06;
  box-shadow:0 0 14px rgba(229,180,70,.22)}
#gcv-shell .lead-box span{display:block;font-size:13px;letter-spacing:1px;color:var(--dim)}
#gcv-shell .lead-box b{display:block;font-size:32px;line-height:1.1;color:var(--gold-lt);
  font-variant-numeric:tabular-nums}
#gcv-shell .lead-box.hot b{color:var(--gold)}
#gcv-shell .lead-box em{font-style:normal;font-size:15px;color:#C3CDDC}
#gcv-shell .dim{color:var(--dim);font-size:16px}
#gcv-shell .boards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
#gcv-shell .bhead{padding:6px 12px;background:#1B2433;border-bottom:1px solid var(--line);
  font-size:15px;letter-spacing:1px;color:var(--gold)}
#gcv-shell .bhead i{font-style:normal;color:var(--dim);letter-spacing:0;font-size:14px}
#gcv-shell .boards .board:first-child .bhead{color:var(--gold-lt);background:#2A2206}
#gcv-shell .board{width:430px;flex:0 1 430px;max-width:88vw;border:1px solid var(--line);border-radius:6px;
    background:#101825;overflow:hidden;font-size:16px}
#gcv-shell .brow{display:grid;grid-template-columns:44px 1fr 92px 72px;gap:8px;
    padding:7px 12px;border-bottom:1px solid #1E2939;text-align:left;align-items:center}
#gcv-shell .brow:last-child{border-bottom:none}
#gcv-shell .brow.head{color:var(--dim);font-size:13px;letter-spacing:1px;background:#17202E}
#gcv-shell .brow.me{background:rgba(229,180,70,.13);color:var(--gold-lt)}
#gcv-shell .brow b{font-variant-numeric:tabular-nums;text-align:right}
#gcv-shell .brow span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gcv-shell .brow em{font-style:normal;color:var(--dim);font-size:14px;text-align:right}
#gcv-shell #mobileInput{position:absolute;opacity:0;height:1px;width:1px;border:0}
#gcv-shell footer{padding:8px 4px 0;font-size:16px;color:var(--dim)}
  @media (max-width:960px){
  #gcv-shell .beststrip{width:100%}
#gcv-shell .lead{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#gcv-shell .lead-box{min-width:190px;padding:8px 16px;border:1px solid var(--line);
  border-radius:8px;background:#151E2C;text-align:center}
#gcv-shell .lead-box.hot{border-color:var(--gold);background:#241D06;
  box-shadow:0 0 14px rgba(229,180,70,.22)}
#gcv-shell .lead-box span{display:block;font-size:13px;letter-spacing:1px;color:var(--dim)}
#gcv-shell .lead-box b{display:block;font-size:32px;line-height:1.1;color:var(--gold-lt);
  font-variant-numeric:tabular-nums}
#gcv-shell .lead-box.hot b{color:var(--gold)}
#gcv-shell .lead-box em{font-style:normal;font-size:15px;color:#C3CDDC}
#gcv-shell .dim{color:var(--dim);font-size:16px}
#gcv-shell .boards{flex-direction:column;align-items:center}
}
@media (max-width:1200px){
  #gcv-shell #hud{grid-template-columns:repeat(4,1fr)}
  #gcv-shell .stat:nth-child(n+5){border-top:1px solid var(--line)}
}
@media (max-height:900px){
  #gcv-shell .key{width:54px;height:42px;font-size:17px}
  #gcv-shell .key.wide{width:120px}
  #gcv-shell .stat b{font-size:25px}
  #gcv-shell .stat{padding:6px 14px}
  #gcv-shell .fingers{font-size:14px;gap:10px;padding:5px 4px 0}
  #gcv-shell header{padding-bottom:2px}
  #gcv-shell header h1{font-size:21px}
  #gcv-shell footer{font-size:14px;padding:5px 4px 0}
}
@media (max-height:760px){
  #gcv-shell .key{width:46px;height:36px;font-size:15px}
  #gcv-shell .key.wide{width:104px}
  #gcv-shell .fingers,#gcv-shell footer,#gcv-shell header p{display:none}
  #gcv-shell .stat b{font-size:22px}
  #gcv-shell .stat span{font-size:13px}
}
@media (max-width:760px){
#gcv-shell .key{width:8.6vw;height:34px;font-size:13px}
#gcv-shell .key.wide{width:19vw;font-size:11px}
#gcv-shell .stat b{font-size:18px} .stat span{font-size:11px} header p{display:none}
  }
  @media (prefers-reduced-motion:reduce){.key{transition:none}}