/* Giao diện Game Hub dùng chung cho game độc lập (lich-su, giao-thong, lop-hoc-so): nạp SAU css của game.
   Thẻ bo góc, nút chính gradient đỏ-cam, font Be Vietnam Pro, header "← Game HVSC" thống nhất. Màu nền/chữ vẫn theo tông + chủ đề của từng game. */
@font-face{font-family:BVP;src:url(/assets/fonts/BeVietnamPro-ExtraBold.ttf);font-weight:800;font-display:swap}
:root{--hub-grad:linear-gradient(135deg,#e31e25 0%,#ff5b45 48%,#ff8f3d 100%);--hub-r:22px}
html body h1,html body h2,html body h3,html body h4{font-family:BVP,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}

/* header thống nhất */
html body .top{min-height:64px;padding:10px max(16px,env(safe-area-inset-left));gap:10px;font-family:BVP,system-ui,sans-serif}
html body .top .brand,html body .top .home{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(127,127,127,.16);
 font:800 16px/1 BVP,system-ui,sans-serif;text-decoration:none;color:inherit;white-space:nowrap;width:auto;height:auto;flex:none;border:0;transition:background-color .2s}
html body .top .brand:hover,html body .top .home:hover{background:rgba(127,127,127,.28)}
html body .top .brand b,html body .top .home b{color:var(--hv-accent,var(--yel,var(--gold2,#ffb020)));font-weight:800}
html body .top .stat{margin-left:auto;gap:8px}
html body .top .stat span{border-radius:999px;padding:6px 14px;min-height:32px;display:inline-flex;align-items:center}
html body .top .nav-cta{margin-left:0}
html body .top img{height:36px;width:auto}

/* thẻ chọn chế độ */
html body .modes{gap:16px}
html body .mode{border-radius:var(--hub-r);border-width:1.5px;padding:20px;box-shadow:0 14px 28px -18px rgba(0,0,0,.55);transition:transform .22s,box-shadow .22s,border-color .22s,background-color .22s}
html body .mode:hover{transform:translateY(-4px);box-shadow:0 20px 34px -18px rgba(0,0,0,.6)}
html body .mode:focus-visible{outline:3px solid var(--hv-accent,#ff6a3d);outline-offset:3px}
html body .mode h3{font-size:19px;margin:8px 0 4px}
html body .mode .i{font-size:34px;line-height:1.1}

/* khung chơi */
html body .stage{border-radius:28px}
html body .opt,html body .ev,html body .clue,html body .scene,html body .fb{border-radius:16px}
html body .card{border-radius:20px}
html body .rank{border-radius:22px}
html body .seg button{min-height:44px}

/* nút chính gradient đỏ-cam */
html body .btn:not(.g):not(.r):not(.o):not(.alt):not(.gold),html body button.pri{background:var(--hub-grad);color:#fff;border:0;border-radius:999px;min-height:48px;padding:0 26px;
 font:800 16px/1 BVP,system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 22px -10px rgba(227,30,37,.65);transition:transform .15s,filter .15s}
html body .btn,html body .btn.g,html body .btn.r,html body .btn.o,html body .btn.alt,html body .btn.gold{border-radius:999px;min-height:48px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;font-weight:800}
html body .btn.g{background:linear-gradient(135deg,#16a870,#2ee59d);color:#06281c;box-shadow:0 10px 20px -12px rgba(22,168,112,.7)}
html body .btn.r{box-shadow:0 10px 20px -12px rgba(255,74,74,.7)}
html body .btn.o,html body .btn.alt{box-shadow:0 8px 18px -12px rgba(0,0,0,.6)}
html body .btn.gold{box-shadow:0 10px 20px -12px rgba(184,134,11,.7)}
html body .btn:hover,html body button.pri:hover{transform:translateY(-2px);filter:brightness(1.05)}
html body .btn:active,html body button.pri:active{transform:translateY(1px);filter:none}
html body .btn:focus-visible,html body button.pri:focus-visible{outline:3px solid var(--hv-accent,#7c3aed);outline-offset:3px}
html body .btnrow{gap:12px}
@media(prefers-reduced-motion:reduce){html body .mode,html body .btn,html body button.pri{transition:none}html body .mode:hover,html body .btn:hover,html body button.pri:hover{transform:none}}
@media(max-width:520px){
 html body .top{padding:8px 12px;min-height:60px}
 html body .top .brand,html body .top .home{padding:0 12px 0 10px;font-size:15px}
 html body .stage{border-radius:22px}
 html body .mode{padding:16px}
}