@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600&display=swap');
* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh;
    background: radial-gradient(circle at 10% 10%, rgba(34,197,94,.16), transparent 34%),
                radial-gradient(circle at 88% 15%, rgba(59,130,246,.18), transparent 30%),
                linear-gradient(165deg, #11131e 0%, #191a2a 55%, #10121b 100%);
    background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed;
    color: #eef2ff; font-family: 'Oswald', sans-serif; font-size: 1.15rem; letter-spacing: .03em;
    overflow-y: scroll; scrollbar-gutter: stable;
}
.g6-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:12px; padding:14px 22px; border-bottom:1px solid rgba(255,255,255,.15); background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); backdrop-filter:blur(3px); }
.g6-title { font-family:'Bebas Neue',sans-serif; font-size:1.65rem; letter-spacing:.06em; color:#fef08a; text-shadow:0 0 16px rgba(250,204,21,.35); }
.g6-balance { display:inline-flex; align-items:center; justify-content:center; gap:8px; justify-self:center; font-size:1.25rem; color:#bbf7d0; text-shadow:0 0 12px rgba(34,197,94,.45); white-space:nowrap; }
.g6-balance strong { color:#4ade80; }
.g6-coin-icon { width:20px; height:20px; border-radius:50%; position:relative; display:inline-block; background:radial-gradient(circle at 30% 30%, #fff0a8 0%, #ffd84a 35%, #f2b11c 70%, #c57f00 100%); box-shadow:0 0 10px rgba(255,215,0,.5); }
.g6-coin-icon::after { content:'G'; position:absolute; inset:0; display:grid; place-items:center; font-family:'Bebas Neue',sans-serif; font-size:.95rem; color:#5c3a00; }
.g6-nav { display:flex; gap:10px; }
.g6-nav-btn, button.g6-nav-btn, .g6-btn { font-family:'Oswald',sans-serif; text-decoration:none; padding:8px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.1); color:#fff; font-size:1rem; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.28); }
.g6-page { max-width:980px; margin:0 auto; padding:24px 20px 44px; }
.g6-hidden { display:none !important; }
.g6-warn { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.45); color:#fcd34d; padding:16px; border-radius:12px; line-height:1.5; }
.g6-shell { margin-top:4px; }
.g6-shell.g6-game-blocked { display:none !important; }
.g6-top-row { display:grid; grid-template-columns:195px 1fr; gap:10px; align-items:stretch; margin-bottom:10px; }
.g6-image-box { width:195px; aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.04); box-shadow:0 14px 24px rgba(0,0,0,.24); position:relative; }
.g6-character-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:#0f0f13; }
.g6-text-panel { border:1px solid rgba(255,255,255,.24); background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-radius:16px; padding:12px 14px; box-shadow:0 14px 24px rgba(0,0,0,.24); min-height:calc(195px * 16 / 9); display:flex; flex-direction:column; min-width:0; }
.g6-source-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; padding:4px 2px; flex-shrink:0; }
.g6-source { font-size:calc(1.02rem + 2px); color:#e2e8f0; }
.g6-tts-controls { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; flex-shrink:0; }
.g6-tts-btn { width:28px; height:28px; border:none; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; }
.g6-tts-btn:hover { transform:scale(1.12); }
.g6-tts-controls .tts-play { background:#22c55e; color:#fff; }
.g6-tts-controls .tts-pause { background:#f59e0b; color:#fff; }
.g6-tts-controls .tts-stop { background:#ef4444; color:#fff; }
.g6-tts-controls .tts-speed { background:#444; color:#fff; font-weight:bold; font-size:18px; }
.g6-tts-speed { min-width:34px; text-align:center; color:#aaa; font-size:.95rem; }
.g6-text { border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(5,7,15,.65); padding:12px; line-height:1.4; color:#f8fafc; font-size:1.8rem; flex:1 1 auto; display:flex; align-items:center; justify-content:center; text-align:center; }
.g6-bottom { min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(5,7,15,.55); margin-bottom:12px; font-size:1.35rem; color:#e5e7eb; }
.g6-timer-wrap { height:6px; border-radius:999px; background:#20253c; overflow:hidden; border:1px solid #3e4b7e; margin-bottom:14px; }
.g6-timer-bar { height:100%; width:100%; background:linear-gradient(90deg,#38d67b 0%,#f1d450 62%,#e34a4a 100%); transform-origin:left center; }
.g6-timer-bar.is-critical { animation:g6shake .22s infinite; }
@keyframes g6shake { 0%{transform:translateX(0)} 25%{transform:translateX(-1px)} 50%{transform:translateX(1px)} 75%{transform:translateX(-1px)} 100%{transform:translateX(0)} }
.g6-actions { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; justify-items:end; }
.g6-btn { font-size:1.35rem; padding:12px 22px; border-radius:10px; color:#e5e7eb; }
.g6-btn:disabled { opacity:.45; cursor:not-allowed; }
.g6-win-text { text-align:center; font-size:1.25rem; color:#86efac; min-height:24px; justify-self:center; }
.g6-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.g6-modal.g6-hidden { display:none !important; }
.g6-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.g6-modal-box { position:relative; max-width:min(780px, calc(100vw - 40px)); width:100%; padding:26px 30px; border-radius:16px; border:1px solid rgba(255,215,0,.35); background:#1a1a22; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.g6-modal-title { margin:0 0 14px; font-size:1.35rem; color:#f3f4f6; }
.g6-modal-text { margin:0 0 18px; color:#d1d5db; }
.g6-instructions-list { margin:0; padding-left:1.2em; }
.g6-instructions-list li { margin-bottom:.35em; }
.g6-dont-show-label { display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; color:#cbd5e1; font-size:.95rem; line-height:1.35; cursor:pointer; }
.g6-intro-autostart { margin-top:.5em; }
.g6-text.g6-word-row { flex-wrap:wrap; align-content:center; align-items:center; justify-content:flex-start; gap:8px; text-align:left; font-size:1.35rem; padding:14px; overflow-y:auto; max-height:100%; min-height:0; }
.g6-wbtn, .g6-bbtn {
    font-family:'Oswald',sans-serif; font-size:calc(1.15rem + 4px); letter-spacing:.02em;
    padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.1); color:#f8fafc; cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,.22); transition:transform .12s, background .12s, border-color .12s;
}
.g6-wbtn:hover:not(:disabled), .g6-bbtn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(250,204,21,.55); }
.g6-wbtn.is-fixed,
.g6-wbtn.is-fixed:disabled {
    border-color:rgba(34,197,94,.65);
    background:rgba(34,197,94,.28);
    color:#dcfce7;
    opacity:1;
    cursor:default;
    box-shadow:0 0 0 1px rgba(74,222,128,.25);
}
.g6-wbtn.is-selected, .g6-bbtn.is-selected { border-color:#facc15; background:rgba(250,204,21,.22); color:#fff; box-shadow:0 0 0 2px rgba(250,204,21,.35); }
.g6-wbtn.is-flash-ok, .g6-bbtn.is-flash-ok { background:rgba(34,197,94,.55) !important; border-color:#4ade80 !important; color:#052e16 !important; }
.g6-wbtn.is-flash-bad, .g6-bbtn.is-flash-bad { background:rgba(239,68,68,.45) !important; border-color:#f87171 !important; }
.g6-wbtn.is-blink-hint { animation:g6blinkWarn .45s ease-in-out 3; }
.g6-bbtn.is-blink-ok { animation:g6blinkOk .45s ease-in-out 3; }
@keyframes g6blinkWarn { 0%,100%{box-shadow:0 0 0 0 rgba(250,204,21,0)} 50%{box-shadow:0 0 0 3px rgba(250,204,21,.85)} }
@keyframes g6blinkOk { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} 50%{box-shadow:0 0 0 3px rgba(74,222,128,.9)} }
.g6-bottom.g6-bottom-grid {
    display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px;
    min-height:150px; align-content:center; padding:14px;
}
.g6-bbtn.is-used { border-color:rgba(248,113,113,.6); background:rgba(127,29,29,.35); color:#fecaca; text-decoration:line-through; opacity:.92; }
.g6-wbtn.is-timeout:disabled, .g6-bbtn.is-timeout:disabled { opacity:1; cursor:default; }
.g6-wbtn.is-timeout-tc0, .g6-bbtn.is-timeout-tc0 { border-color:#38bdf8; background:rgba(56,189,248,.32); color:#e0f2fe; box-shadow:0 0 0 2px rgba(56,189,248,.45); }
.g6-wbtn.is-timeout-tc1, .g6-bbtn.is-timeout-tc1 { border-color:#fb923c; background:rgba(251,146,60,.32); color:#ffedd5; box-shadow:0 0 0 2px rgba(251,146,60,.45); }
.g6-wbtn.is-timeout-tc2, .g6-bbtn.is-timeout-tc2 { border-color:#f472b6; background:rgba(244,114,182,.32); color:#fce7f3; box-shadow:0 0 0 2px rgba(244,114,182,.45); }
.g6-wbtn.is-timeout-tc3, .g6-bbtn.is-timeout-tc3 { border-color:#a3e635; background:rgba(163,230,53,.28); color:#ecfccb; box-shadow:0 0 0 2px rgba(163,230,53,.45); }
.g6-wbtn.is-timeout-tc4, .g6-bbtn.is-timeout-tc4 { border-color:#c084fc; background:rgba(192,132,252,.32); color:#f3e8ff; box-shadow:0 0 0 2px rgba(192,132,252,.45); }
.g6-bbtn:disabled, .g6-wbtn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.g6-win-text.is-flash { animation:g6flashTxt .55s ease; }
@keyframes g6flashTxt { 0%,100%{opacity:1} 50%{opacity:.55} }
.vtb-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .25s; }
.vtb-overlay.vtb-visible { opacity:1; }
.vtb-overlay.vtb-leaving { opacity:0; }
.vtb-card { background:linear-gradient(145deg,#1e293b,#0f172a); border:2px solid #facc15; border-radius:16px; padding:22px 28px; text-align:center; box-shadow:0 16px 40px rgba(0,0,0,.5); }
.vtb-token-line { margin:0 0 6px; font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:#4ade80; letter-spacing:.05em; }
.vtb-subline { margin:0; color:#e2e8f0; font-size:1.05rem; }