@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800&family=Exo+2:wght@700;800&family=Baloo+2:wght@700;800&display=swap");  /* Neon skin; Baloo 2 = start screen titles */
/* 🎮 Trò chơi (games.js). Built on the app's card / btn / chip / bar / kbd; only the game parts are styled here.
   Every class starts with kb- (Koala Bingo) so nothing clashes with the rest of the app. */
.kb-title { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.kb-title img { width: 76px; height: 76px; flex: none; }
.kb-title h1 { font-size: 2.8rem; margin: 0; line-height: 1; }
.kb-title p { margin: 4px 0 0; font-size: 1.05rem; }

/* start screen */
.kb-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-rules li { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.kb-rules li b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; }
.kb-label { font-size: .78rem; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.kb-go { font-size: 1.05rem; padding: 11px 26px; }
.kb-go .kbd, .kb-btns .kbd, .kb-ctrl .kbd { margin-left: 4px; }

/* game: caller on the left, board on the right */
.kb-game { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.kb-caller { position: sticky; top: 12px; }
.kb-call { position: relative; background: var(--accent-soft); border-radius: 18px; min-height: 120px; display: grid; place-items: center; text-align: center; padding: 14px 10px 10px; margin: 6px 0 10px; transition: background .2s; }
.kb-call b { font-size: 1.9rem; font-weight: 900; color: var(--navy); line-height: 1.05; overflow-wrap: anywhere; }
.kb-call .ic { width: 60px; height: 60px; }
.kb-call.listen .ic { animation: kb-wob 1s ease-in-out infinite; }
.kb-call.ok { background: var(--ok-soft); } .kb-call.ok b { color: var(--ok); }
.kb-call.bad { background: var(--bad-soft); animation: kb-shake .4s; } .kb-call.bad b { color: var(--bad); }
.kb-koala { position: absolute; width: 58px; height: 58px; left: -10px; top: -22px; }
.kb-said { min-height: 42px; text-align: center; font-weight: 700; color: var(--navy); font-size: .95rem; }
.kb-said i { display: block; font-style: normal; color: var(--ink-2); font-weight: 600; font-size: .85rem; }
.kb-ctrl { display: grid; gap: 7px; margin: 8px 0 12px; }
.kb-ctrl .btn { justify-content: flex-start; width: 100%; }
.kb-ctrl .btn .kbd { margin-left: auto; }
.kb-ctrl .btn .ic { width: 20px; height: 20px; }
.kb-buoy { position: relative; padding-bottom: 14px !important; white-space: nowrap; }
.kb-sfx.off { color: var(--ink-3); }
.kb-sfx.off .ic { opacity: .5; }
.kb-left { margin-left: auto; font-weight: 900; color: var(--accent); }
.kb-buoy .kbd { margin-left: 6px !important; }
.kb-buoy.pulse .ic { animation: kb-spin .5s; }
.kb-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kb-nums div { background: var(--panel-2); border-radius: 12px; padding: 6px; text-align: center; }
.kb-nums b { display: block; font-size: 1.2rem; font-weight: 900; color: var(--navy); }
.kb-nums span { font-size: .7rem; color: var(--ink-3); font-weight: 700; }
.kb-tray { margin-top: 10px; font-size: .75rem; color: var(--ink-3); font-weight: 700; }
.kb-tray div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.kb-tray i { font-style: normal; font-size: .7rem; font-weight: 800; border-radius: 99px; padding: 2px 7px; background: var(--ok-soft); color: var(--ok); }
.kb-tray i.bad { background: var(--bad-soft); color: var(--bad); }

.kb-board { position: relative; min-width: 0; }
.kb-timebar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kb-timebar .bar { flex: 1; height: 12px; margin: 0; }
.kb-timebar .bar > i { width: 100%; transform-origin: left; }
.kb-timebar.low .bar > i { background: var(--bad); }
.kb-timebar.plus .bar > i { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); }
.kb-timebar b { min-width: 52px; text-align: right; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; }
.kb-timebar.low b { color: var(--bad); }
.kb-scroll { overflow-x: auto; padding-bottom: 4px; }
.kb-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; min-width: 680px; }
.kb-head { text-align: center; font-weight: 900; color: var(--accent); font-size: 1.2rem; padding-bottom: 2px; }
.kb-cell { position: relative; border: 1px solid var(--line); background: var(--panel); color: var(--navy); border-radius: 12px; min-height: 60px; padding: 8px 4px;
  font-weight: 800; font-size: 1.02rem; line-height: 1.1; cursor: pointer; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; transition: transform .08s, border-color .15s; }
.kb-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.kb-cell > span { position: relative; z-index: 1; }
.kb-cell.ok { background: var(--accent-soft); border-color: transparent; cursor: default; }
.kb-cell.ok::before { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--accent-2); opacity: .45; animation: kb-daub .28s cubic-bezier(.3,1.6,.5,1); }
.kb-cell.miss { background: var(--panel-2); color: var(--ink-3); cursor: default; text-decoration: line-through; border-style: dashed; }
.kb-cell.bad { animation: kb-shake .35s; border-color: var(--bad); background: var(--bad-soft); }
.kb-cell.hot { border: 2px dashed var(--accent); animation: kb-glow 1.2s ease-in-out infinite; }
.kb-cell.win { background: var(--accent); color: var(--accent-ink); animation: kb-pop .4s; }
.kb-cell.win::before { opacity: 0; }
.kb-fb { min-height: 24px; margin-top: 10px; font-weight: 700; text-align: center; color: var(--bad); }
.kb-fb em { font-style: normal; background: var(--panel-2); border-radius: 8px; padding: 1px 8px; color: var(--navy); }
.kb-hint { font-size: .8rem; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.kb-float { position: absolute; font-weight: 900; color: var(--ok); pointer-events: none; animation: kb-up .9s forwards; z-index: 3; }
.kb-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 4; }
.kb-banner small { margin-top: 10px; font-weight: 900; font-size: 1.3rem; color: var(--accent); background: var(--panel); padding: 2px 14px; border-radius: 99px; box-shadow: var(--shadow); animation: kb-pop .4s; }
.kb-neon .kb-banner small { background: #07121c; color: var(--ny); border: 1px solid var(--ny); box-shadow: 0 0 12px var(--gy); }
.kb-banner b { font-size: 4.2rem; font-weight: 900; color: var(--accent-ink); background: var(--accent); padding: 6px 30px; border-radius: 24px; box-shadow: var(--shadow); animation: kb-slam .45s cubic-bezier(.3,1.6,.5,1); }

.kb-levels { display: grid; gap: 6px; margin-top: 12px; }
.kb-levels div { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 6px 12px; border-radius: 12px; border: 1px dashed var(--line); }
.kb-levels b { color: var(--navy); } .kb-levels span { color: var(--ink-2); }
.kb-nums .low b { color: var(--bad); }
.kb-rkoala { width: 96px; height: 96px; display: block; margin: 0 auto 4px; }
.kb-result.won .kb-rkoala { animation: kb-hop .6s ease-out 3; }
.kb-result.lost .kb-rkoala { animation: kb-sway 1.2s ease-in-out 2; filter: saturate(.7); }
.kb-result.lost .kb-big { color: var(--bad); }
@keyframes kb-hop { 40% { transform: translateY(-16px) rotate(-6deg); } }
@keyframes kb-sway { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
  display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: var(--ink-2); }
.kb-st { font-size: .8rem; letter-spacing: 1px; } .kb-st i { font-style: normal; color: var(--line); } .kb-st i.on { color: var(--hat, #f6bd33); }
.kb-st.lockt { color: var(--ink-3); font-size: .72rem; font-weight: 800; letter-spacing: 0; }
.kb-ldesc { font-size: .8rem; color: var(--ink-2); margin-top: 6px; font-weight: 700; }
.kb-stage { text-align: center; margin-bottom: 4px; }
.kb-stage span { display: block; font-size: .72rem; color: var(--ink-3); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.kb-stage b { color: var(--navy); font-size: .95rem; }
.kb-grid.small { min-width: 0; max-width: 620px; margin: 0 auto; }
.kb-grid.small .kb-cell { min-height: 72px; font-size: 1.2rem; }
.kb-stripwrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0 2px; flex-wrap: wrap; }
.kb-strip { display: flex; gap: 3px; }
.kb-strip i { width: 16px; height: 8px; border-radius: 4px; background: var(--line); }
.kb-strip i.end { margin-right: 6px; }
.kb-strip i.done { background: var(--accent); }
.kb-strip i.me { outline: 2px solid var(--navy); outline-offset: 1px; }
/* result */
.kb-result { text-align: center; }
.kb-stars { font-size: 2.4rem; letter-spacing: 6px; color: var(--accent); }
.kb-stars .off { color: var(--line); }
.kb-big { font-size: 1.5rem; font-weight: 900; color: var(--navy); margin: 4px 0; }
.kb-kpis { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.kb-kpis div { background: var(--panel-2); border-radius: 14px; padding: 8px 14px; min-width: 100px; }
.kb-kpis b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--navy); }
.kb-kpis span { font-size: .72rem; color: var(--ink-3); font-weight: 700; }
.kb-mix { max-width: 540px; margin: 10px auto; text-align: left; background: var(--panel-2); border-radius: 14px; padding: 10px 14px; }
.kb-mix div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.kb-mix div:last-child { border: 0; }
.kb-mix s { color: var(--bad); text-decoration: none; } .kb-mix u { color: var(--ok); text-decoration: none; }
.kb-btns { margin-top: 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@keyframes kb-wob { 50% { transform: rotate(-8deg) scale(1.05); } }
@keyframes kb-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes kb-pop { 50% { transform: scale(1.08); } }
@keyframes kb-spin { to { transform: rotate(360deg); } }
@keyframes kb-daub { from { transform: scale(.2); opacity: 0; } }
@keyframes kb-glow { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
@keyframes kb-up { to { transform: translateY(-36px); opacity: 0; } }
@keyframes kb-slam { from { transform: scale(2.4); opacity: 0; } }

/* ================= Neon skin (.kb-neon on .kb-root; picked on the start screen, kept in ep-bingo-skin) =================
   The app's teal + hard-hat yellow glowing on near-black, like Word Drop's Neon skin. Titles in Orbitron, digits in
   Exo 2 (Orbitron draws 0 with a slash, which reads like Ø). */
.kb-neon { --nt: #45e0c4; --ny: #f6bd33; --ng: #5fe3a8; --nr: #ff7a6e; --gt: rgba(69,224,196,.5); --gy: rgba(246,189,51,.6); --nl: #1c3a4a;
  --i-line: #dcebf7; --i-fill: #1f5f56; --i-bg: #0c1b28;
  background: radial-gradient(70% 50% at 85% 0%, rgba(69,224,196,.1), transparent 60%), #07121c; color: #e6f6f4;
  border-radius: 26px; padding: 22px; margin: -6px -6px 0; }
.kb-neon .kb-title h1 { font-family: "Orbitron", "Nunito", sans-serif; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #e6f6f4; text-shadow: 0 0 14px var(--gt); }
.kb-neon .kb-title h1::after { background: var(--nt); box-shadow: 0 0 10px var(--gt); }
.kb-neon .kb-t2 { color: var(--ny); text-shadow: 0 0 14px var(--gy); }
.kb-neon .muted, .kb-neon .kb-said i, .kb-neon .kb-hint, .kb-neon .kb-tray, .kb-neon .kb-label, .kb-neon .kb-kpis span, .kb-neon .kb-nums span { color: #9fc3c6; }
.kb-neon h3 { color: #e6f6f4; }
.kb-neon .card { background: rgba(255,255,255,.02); border: 1px solid var(--nl); box-shadow: none; color: #e6f6f4; }
.kb-neon .kb-rules li { background: rgba(255,255,255,.03); border: 1px solid var(--nl); }
.kb-neon .kb-rules li b { background: transparent; color: var(--nt); border: 1.5px solid var(--nt); box-shadow: 0 0 8px var(--gt); }
.kb-neon .chip { background: transparent; border: 1.5px solid var(--nl); color: #e6f6f4; }
.kb-neon .chip.on { border-color: var(--nt); color: var(--nt); background: rgba(69,224,196,.08); box-shadow: 0 0 12px var(--gt); }
.kb-neon .kbd { background: transparent; color: var(--nt); border-color: var(--nl); }
.kb-neon .btn { background: transparent; border: 1.5px solid var(--nl); color: #e6f6f4; box-shadow: none; }
.kb-neon .btn:hover { background: rgba(69,224,196,.06); }
.kb-neon .btn.primary { background: var(--nt); border-color: var(--nt); color: #03201b; box-shadow: 0 0 18px var(--gt); }
.kb-neon .btn.primary .kbd { color: #03201b; border-color: rgba(3,32,27,.3); }
.kb-neon .kb-replay { border: 2px solid var(--ny); color: var(--ny); background: rgba(246,189,51,.06); box-shadow: 0 0 16px var(--gy), inset 0 0 10px rgba(246,189,51,.12); }
.kb-neon .kb-replay .kbd { color: var(--ny); border-color: rgba(246,189,51,.4); }
.kb-neon .kb-left { color: var(--nt); }
.kb-neon .kb-sfx.off { color: #5f8590; }
/* caller */
.kb-neon .kb-call { background: rgba(69,224,196,.05); border: 2px solid var(--nt); box-shadow: 0 0 16px var(--gt), inset 0 0 14px rgba(69,224,196,.15); }
.kb-neon .kb-call b { color: #c9fff4; text-shadow: 0 0 10px rgba(69,224,196,.9); }
.kb-neon .kb-call.ok { background: rgba(95,227,168,.1); border-color: var(--ng); box-shadow: 0 0 18px rgba(95,227,168,.6); }
.kb-neon .kb-call.ok b { color: #d6ffe9; text-shadow: 0 0 10px var(--ng); }
.kb-neon .kb-call.bad { background: rgba(255,122,110,.1); border-color: var(--nr); box-shadow: 0 0 18px rgba(255,122,110,.6); }
.kb-neon .kb-call.bad b { color: #ffe0dc; text-shadow: 0 0 10px var(--nr); }
.kb-neon .kb-said { color: #e6f6f4; }
.kb-neon .kb-nums div { background: rgba(255,255,255,.02); border: 1.5px solid rgba(246,189,51,.5); box-shadow: 0 0 10px rgba(246,189,51,.12); }
.kb-neon .kb-nums div:first-child { border-color: var(--nt); box-shadow: 0 0 14px var(--gt), inset 0 0 10px rgba(69,224,196,.12); }
.kb-neon .kb-nums b { color: var(--ny); text-shadow: 0 0 10px var(--gy); }
.kb-neon .kb-nums div:first-child b { color: var(--nt); text-shadow: 0 0 10px var(--gt); }
.kb-neon .kb-tray i { background: rgba(95,227,168,.12); color: #d6ffe9; border: 1px solid var(--ng); box-shadow: 0 0 6px rgba(95,227,168,.4); }
.kb-neon .kb-tray i.bad { background: rgba(255,122,110,.12); color: #ffe0dc; border-color: var(--nr); box-shadow: 0 0 6px rgba(255,122,110,.4); }
/* board */
.kb-neon .kb-board { background: radial-gradient(ellipse at 50% 0%, #0d2233, #040b12 75%); border: 1.5px solid #12303f; box-shadow: 0 0 24px rgba(69,224,196,.08); }
.kb-neon .kb-timebar .bar { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px #173341; }
.kb-neon .kb-timebar .bar > i { background: linear-gradient(90deg, var(--nt), var(--ny)); box-shadow: 0 0 10px var(--gt); }
.kb-neon .kb-timebar.low .bar > i { background: var(--nr); box-shadow: 0 0 10px var(--nr); }
.kb-neon .kb-timebar.plus .bar > i { background: var(--ny); box-shadow: 0 0 14px var(--gy); }
.kb-neon .kb-timebar b { color: var(--ny); text-shadow: 0 0 8px var(--gy); }
.kb-neon .kb-timebar.low b { color: var(--nr); text-shadow: 0 0 8px var(--nr); }
.kb-neon .kb-head { font-family: "Orbitron", "Nunito", sans-serif; color: var(--nt); text-shadow: 0 0 10px var(--gt); font-size: 1.05rem; }
.kb-neon .kb-head:nth-child(n+6):nth-child(-n+10) { color: var(--ny); text-shadow: 0 0 10px var(--gy); }
.kb-neon .kb-cell { background: rgba(69,224,196,.04); color: #c9fff4; border: 1.5px solid rgba(69,224,196,.55);
  box-shadow: 0 0 8px rgba(69,224,196,.2), inset 0 0 6px rgba(69,224,196,.08); text-shadow: 0 0 7px rgba(69,224,196,.8); }
.kb-neon .kb-cell:hover { border-color: var(--nt); box-shadow: 0 0 14px var(--gt); }
.kb-neon .kb-cell.ok { color: #04140f; background: var(--ng); border-color: #b9ffe0; box-shadow: 0 0 16px rgba(95,227,168,.8); text-shadow: none; }
.kb-neon .kb-cell.ok::before { display: none; }
.kb-neon .kb-cell.hot { color: #fff2c8; background: rgba(246,189,51,.1); border: 2px solid var(--ny); box-shadow: 0 0 16px rgba(246,189,51,.75), inset 0 0 8px rgba(246,189,51,.3); text-shadow: 0 0 7px var(--gy); animation: kb-nglow 1.2s ease-in-out infinite; }
.kb-neon .kb-cell.miss { color: #4f7380; background: rgba(255,255,255,.02); border: 1.5px solid #173341; box-shadow: none; text-shadow: none; }
.kb-neon .kb-cell.bad { color: #ffe0dc; background: rgba(255,122,110,.14); border-color: var(--nr); box-shadow: 0 0 16px rgba(255,122,110,.6); text-shadow: 0 0 7px var(--nr); }
.kb-neon .kb-cell.win { color: #07121c; background: var(--ny); border-color: var(--ny); box-shadow: 0 0 20px rgba(246,189,51,.9); text-shadow: none; }
.kb-neon .kb-fb { color: var(--nr); }
.kb-neon .kb-fb em { background: rgba(255,255,255,.05); color: #e6f6f4; }
.kb-neon .kb-float { color: var(--ny); text-shadow: 0 0 10px var(--gy); }
.kb-neon .kb-banner b { background: transparent; box-shadow: none; color: var(--ny); font-family: "Orbitron", "Nunito", sans-serif; letter-spacing: .06em;
  text-shadow: 0 0 .25em var(--gy), 0 0 .6em var(--gy); }
/* result */
.kb-neon .kb-stars { color: var(--ny); text-shadow: 0 0 12px var(--gy); }
.kb-neon .kb-stars .off { color: #173341; text-shadow: none; }
.kb-neon .kb-big { color: #e6f6f4; }
.kb-neon .kb-kpis div { background: rgba(255,255,255,.02); border: 1.5px solid rgba(246,189,51,.5); }
.kb-neon .kb-kpis b { color: var(--ny); text-shadow: 0 0 10px var(--gy); }
.kb-neon .kb-mix { background: rgba(255,255,255,.03); border: 1px solid var(--nl); }
.kb-neon .kb-mix div { border-color: var(--nl); }
.kb-neon .kb-mix s { color: var(--nr); } .kb-neon .kb-mix u { color: var(--ng); }
.kb-neon .kb-levels div { border-color: var(--nl); } .kb-neon .kb-levels b { color: #e6f6f4; } .kb-neon .kb-levels span { color: #9fc3c6; }
.kb-neon .kb-nums .low { border-color: var(--nr) !important; } .kb-neon .kb-nums .low b { color: var(--nr); text-shadow: 0 0 10px var(--nr); }
.kb-neon .kb-result.lost .kb-big { color: var(--nr); text-shadow: 0 0 10px var(--nr); }
.kb-neon .kb-result.won .kb-big { color: var(--ny); text-shadow: 0 0 12px var(--gy); }
.kb-neon .kb-st i { color: #173341; } .kb-neon .kb-st i.on { color: var(--ny); text-shadow: 0 0 6px var(--gy); }
.kb-neon .kb-ldesc { color: #9fc3c6; }
.kb-neon .kb-stage b { color: #e6f6f4; } .kb-neon .kb-stage span { color: #5f8590; }
.kb-neon .kb-strip i { background: #173341; } .kb-neon .kb-strip i.done { background: var(--nt); box-shadow: 0 0 6px var(--gt); }
.kb-neon .kb-strip i.me { outline-color: var(--ny); }
/* digits in Exo 2 */
.kb-neon .kb-cell, .kb-neon .kb-call b, .kb-neon .kb-nums b, .kb-neon .kb-timebar b, .kb-neon .kb-kpis b, .kb-neon .kb-tray i,
.kb-neon .kb-float, .kb-neon .kb-left { font-family: "Exo 2", "Nunito", sans-serif; }
@keyframes kb-nglow { 50% { box-shadow: 0 0 26px rgba(246,189,51,.95), inset 0 0 10px rgba(246,189,51,.4); } }

@media (max-width: 1000px) {
  .kb-title h1 { font-size: 2.2rem; } .kb-title img { width: 58px; height: 58px; }
  .kb-game { grid-template-columns: 1fr; }
  .kb-caller { position: static; }
}

/* ================= Titles (danh hiệu): shelf on the start screens, reveal on the result screens (games.js ttShelf / ttReveal).
   Tiers: t1 bronze, t2 silver, t3 gold (hard-hat yellow), t4 legend (teal + gold, shimmering). Shared by Bingo and Word Drop. */
.kb-tt-badge { flex: none; display: inline-grid; filter: drop-shadow(0 3px 5px rgba(31, 58, 104, .25)); }
.kb-tt-badge .in { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
.kb-tt-badge .sh { stroke: #1f3a68; stroke-width: 2; }
.kb-tt-badge .s { fill: #fff; stroke: #1f3a68; stroke-width: 1.2; stroke-linejoin: round; }
.kb-tt-badge.t1 .g1 { stop-color: #e7a86a; } .kb-tt-badge.t1 .g2 { stop-color: #9a5a2a; }
.kb-tt-badge.t2 .g1 { stop-color: #f4f8fb; } .kb-tt-badge.t2 .g2 { stop-color: #8fa0b2; }
.kb-tt-badge.t3 .g1 { stop-color: #ffe27a; } .kb-tt-badge.t3 .g2 { stop-color: #e3a414; }
.kb-tt-badge.t4 .g1 { stop-color: #5fe3c8; } .kb-tt-badge.t4 .g2 { stop-color: #1f7f9e; }
.kb-tt-badge.t4 .s { fill: #f6bd33; }
.kb-tt-badge.t4:not(.lock) { animation: kb-tt-shine 2.6s ease-in-out infinite; }
.kb-tt-badge.lock { filter: grayscale(1) opacity(.38); }
.kb-tt-badge.lock .s { fill: transparent; }
@keyframes kb-tt-shine { 50% { filter: drop-shadow(0 0 8px rgba(246, 189, 51, .85)) drop-shadow(0 3px 5px rgba(31, 58, 104, .25)); } }

.kb-tt-shelf { margin: 10px 0; width: 100%; text-align: left; }
.kb-tt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.kb-tt-head > b { color: var(--navy); font-weight: 900; }
.kb-tt-head > span { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.kb-tt-head strong { font-weight: 900; }
.kb-tt-head strong.t1 { color: #a8622c; } .kb-tt-head strong.t2 { color: #6b7f93; } .kb-tt-head strong.t3 { color: #c98a00; } .kb-tt-head strong.t4 { color: var(--accent); }
.kb-tt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.kb-tt-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--panel-2); border: 2px solid transparent; min-width: 0; }
.kb-tt-item > div { min-width: 0; display: flex; flex-direction: column; }
.kb-tt-item b { font-weight: 900; font-size: .88rem; color: var(--ink-3); line-height: 1.2; }
.kb-tt-item small { font-size: .72rem; font-weight: 600; color: var(--ink-3); line-height: 1.25; }
.kb-tt-item.has b { color: var(--navy); }
.kb-tt-item.has small { color: var(--ink-2); }
.kb-tt-item.cur { border-color: var(--accent); }

.kb-tt-reveal { display: grid; gap: 8px; width: 100%; margin: 12px auto 4px; max-width: 420px; }
.kb-tt-new { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; text-align: left;
  background: linear-gradient(120deg, var(--panel-2), var(--accent-soft)); border: 2px solid var(--wd-hat, #f6bd33);
  animation: kb-tt-pop .7s cubic-bezier(.2, 1.6, .4, 1) .6s both; }
.kb-tt-new .kb-tt-badge { animation: kb-tt-spin 1s ease-out .7s both; }
.kb-tt-new.t4 .kb-tt-badge { animation: kb-tt-spin 1s ease-out .7s both, kb-tt-shine 2.6s ease-in-out 1.7s infinite; }
.kb-tt-new > div { display: flex; flex-direction: column; }
.kb-tt-new small { font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #c98a00; }
.kb-tt-new b { font-size: 1.3rem; font-weight: 900; color: var(--navy); line-height: 1.15; }
.kb-tt-new span { font-size: .85rem; font-weight: 700; color: var(--ink-2); font-style: italic; }
@keyframes kb-tt-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes kb-tt-spin { from { transform: rotateY(540deg) scale(.4); opacity: 0; } }

/* neon skins of both games */
.kb-neon .kb-tt-item, .wd-neon .kb-tt-item { background: rgba(255, 255, 255, .04); border-color: rgba(69, 224, 196, .15); }
.kb-neon .kb-tt-item.cur, .wd-neon .kb-tt-item.cur { border-color: #45e0c4; box-shadow: 0 0 12px rgba(69, 224, 196, .4); }
.kb-neon .kb-tt-item.has b, .wd-neon .kb-tt-item.has b { color: #f6bd33; text-shadow: 0 0 10px rgba(246, 189, 51, .5); }
.kb-neon .kb-tt-item.has .kb-tt-badge, .wd-neon .kb-tt-item.has .kb-tt-badge { filter: drop-shadow(0 0 7px rgba(246, 189, 51, .55)); }
.kb-neon .kb-tt-new, .wd-neon .kb-tt-new { background: rgba(5, 12, 20, .7); box-shadow: 0 0 22px rgba(246, 189, 51, .45); }
.kb-neon .kb-tt-new b, .wd-neon .kb-tt-new b { color: #f6bd33; text-shadow: 0 0 14px rgba(246, 189, 51, .6); font-family: "Orbitron", "Nunito", sans-serif; letter-spacing: .02em; }

/* ================= Start screen: pick a ticket (games.js bingoView; design D of graphics/bingo_start_options.html, 2026-09-29).
   One ticket per topic (--c = its colour) fanned in a deck; the 3 stamps at its foot are the stages. Titles in Baloo 2. */
.kb-lobby { display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--accent-soft), var(--bg));
  border-radius: 26px; padding: 22px 16px 18px; }
.kb-lhead { display: flex; align-items: center; gap: 14px; }
.kb-lhead img { width: 70px; height: 70px; flex: none; animation: kb-bob 3.4s ease-in-out infinite; }
.kb-lhead h1 { margin: 0; font: 800 2.6rem/1 "Baloo 2", "Nunito", sans-serif; color: var(--navy); }
.kb-lhead .kb-t2 { color: var(--accent); }
.kb-lhead p { margin: 2px 0 0; color: var(--ink-2); font-weight: 700; }
.kb-lhead p b { color: var(--navy); }
@keyframes kb-bob { 50% { transform: translateY(-5px) rotate(2deg); } }
.kb-deck { position: relative; width: 100%; height: 350px; overflow: hidden; }
.kb-ticket { position: absolute; left: 50%; top: 14px; width: 330px; background: var(--panel); border-radius: 18px; overflow: hidden; cursor: pointer;
  box-shadow: 0 14px 30px rgba(31, 58, 104, .16); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .3s, filter .3s; }
.kb-ticket:not(.on) { filter: saturate(.7); }
.kb-ticket:not(.on) .kb-stamp { pointer-events: none; }
.kb-band { display: flex; align-items: center; gap: 8px; background: var(--c); color: #fff; padding: 10px 14px 8px; }
.kb-band .ik-ic, .kb-band .ic { width: 24px; height: 24px; flex: none; background: #fff; border-radius: 8px; padding: 2px; }
.kb-band b { flex: 1; font: 800 1.3rem/1.1 "Baloo 2", "Nunito", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-band span { font-weight: 800; font-size: .8rem; opacity: .92; }
.kb-letters { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font: 800 1.15rem "Baloo 2", "Nunito", sans-serif; color: var(--c); padding: 8px 14px 0; }
.kb-tcells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 6px 14px 12px; }
.kb-tcells i { position: relative; min-height: 44px; border-radius: 9px; background: var(--panel-2); display: grid; place-items: center; text-align: center;
  font: 700 .72rem/1.1 "Exo 2", "Nunito", sans-serif; font-style: normal; color: var(--ink-2); padding: 2px; overflow-wrap: anywhere; }
.kb-tcells i.dab::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c); opacity: .5; }
.kb-perf { border-top: 3px dashed var(--line); margin: 0 10px; }
.kb-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px; }
.kb-stamp { position: relative; font: inherit; cursor: pointer; background: var(--panel); border: 2px solid var(--line); border-radius: 11px; padding: 6px 2px 5px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15; transition: transform .15s; }
.kb-stamp b { font: 800 .98rem "Baloo 2", "Nunito", sans-serif; color: var(--navy); }
.kb-stamp small { font-size: .7rem; font-weight: 800; color: var(--ink-3); }
.kb-stamp .kb-st { font-size: .9rem; letter-spacing: 0; }
.kb-stamp img { position: absolute; width: 26px; height: 26px; top: -13px; right: -9px; }
.kb-stamp.done { border-color: var(--c); transform: rotate(-4deg); }
.kb-stamp.done small { color: var(--c); }
.kb-stamp.cur { border-color: var(--hat, #f6bd33); background: var(--warn-soft); }
.kb-stamp.lock { cursor: not-allowed; }
.kb-stamp.lock b, .kb-stamp.lock small { color: var(--ink-3); }
.kb-stamp.sel { box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--navy); }
.kb-stamp:not(.lock):hover { transform: translateY(-2px); }
.kb-stamp.done:hover { transform: rotate(-4deg) translateY(-2px); }
.kb-arrow { position: absolute; top: 150px; z-index: 20; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; background: var(--panel);
  color: var(--navy); font: 900 1.6rem/1 "Nunito", sans-serif; box-shadow: 0 4px 12px rgba(31, 58, 104, .16); }
.kb-arrow.l { left: 6%; } .kb-arrow.r { right: 6%; }
.kb-arrow:disabled { opacity: .3; cursor: default; }
.kb-dock { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.kb-lv { display: flex; gap: 8px; }
.kb-lv .chip { font-weight: 800; }
.kb-play { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--hat, #f6bd33); color: var(--navy);
  font: 800 1.35rem/1 "Baloo 2", "Nunito", sans-serif; padding: 14px 30px 10px; border-radius: 18px; box-shadow: 0 6px 0 #d99a12; animation: kb-pulse 1.8s ease-in-out infinite; }
.kb-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #d99a12; }
.kb-play .kbd { font-size: .72rem; border-color: rgba(31, 58, 104, .35); background: transparent; color: var(--navy); }
@keyframes kb-pulse { 50% { transform: scale(1.03); } }
.kb-lfoot { display: flex; align-items: center; justify-content: center; gap: 8px 24px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); font-weight: 700; }
.kb-lfoot .kb-ldesc { margin: 0; }
.kb-tshelf { display: flex; align-items: center; gap: 4px; }
.kb-tshelf .kb-tt-badge.cur { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 8px; }
.kb-tshelf span { margin-left: 4px; } .kb-tshelf strong { color: var(--navy); }
.kb-fkeys { display: flex; align-items: center; gap: 5px; }
.kb-fkeys .kbd { margin-left: 6px; }
.kb-help { width: 100%; max-width: 900px; }
.kb-help summary { cursor: pointer; text-align: center; color: var(--accent); font-weight: 800; font-size: .88rem; list-style: none; }
.kb-help summary::-webkit-details-marker { display: none; }
.kb-help summary::before { content: "? "; }
.kb-helpin { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; margin-top: 10px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .kb-play, .kb-lhead img { animation: none; } .kb-ticket { transition: none; } }
@media (max-width: 760px) { .kb-ticket { width: 280px; } .kb-arrow.l { left: 4px; } .kb-arrow.r { right: 4px; } .kb-helpin { grid-template-columns: 1fr; } .kb-lhead h1 { font-size: 2rem; } }
/* Neon: the deck glows on near-black */
.kb-neon.kb-lobby { background: radial-gradient(70% 50% at 50% 0%, rgba(69,224,196,.12), transparent 60%), #07121c; margin: 0; }
.kb-neon .kb-lhead h1 { color: #e6f6f4; text-shadow: 0 0 14px var(--gt); } .kb-neon .kb-lhead .kb-t2 { color: var(--ny); text-shadow: 0 0 14px var(--gy); }
.kb-neon .kb-lhead p, .kb-neon .kb-lfoot { color: #9fc3c6; } .kb-neon .kb-lhead p b, .kb-neon .kb-tshelf strong { color: var(--ny); }
.kb-neon .kb-ticket { background: #0b1a26; border: 1.5px solid var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.kb-neon .kb-band { background: transparent; color: #e6f6f4; border-bottom: 1.5px solid var(--c); }
.kb-neon .kb-band b { text-shadow: 0 0 10px var(--c); }
.kb-neon .kb-letters { color: var(--nt); text-shadow: 0 0 8px var(--gt); }
.kb-neon .kb-tcells i { background: rgba(255,255,255,.04); color: #9fc3c6; }
.kb-neon .kb-tcells i.dab::after { background: var(--nt); opacity: .35; box-shadow: 0 0 10px var(--gt); }
.kb-neon .kb-perf { border-color: var(--nl); }
.kb-neon .kb-stamp { background: #07121c; border-color: var(--nl); }
.kb-neon .kb-stamp b { color: #c9fff4; }
.kb-neon .kb-stamp.done { border-color: var(--nt); box-shadow: 0 0 10px var(--gt); } .kb-neon .kb-stamp.done small { color: var(--nt); }
.kb-neon .kb-stamp.cur { border-color: var(--ny); background: rgba(246,189,51,.08); box-shadow: 0 0 12px var(--gy); }
.kb-neon .kb-stamp.sel { box-shadow: 0 0 0 3px #07121c, 0 0 0 5px var(--nt), 0 0 14px var(--gt); }
.kb-neon .kb-arrow { background: #0b1a26; color: var(--nt); box-shadow: 0 0 12px var(--gt); }
.kb-neon .kb-play { background: transparent; color: var(--ny); border: 3px solid var(--ny); box-shadow: 0 0 20px var(--gy), inset 0 0 14px rgba(246,189,51,.2); text-shadow: 0 0 10px var(--gy); }
.kb-neon .kb-play .kbd { color: var(--ny); border-color: rgba(246,189,51,.5); }
.kb-neon .kb-help summary { color: var(--nt); }