.j-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-bottom: 10px; }
.j-sc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; background: var(--bg-elevated); border: 2px solid var(--border); transition: border-color .2s, transform .2s; min-width: 0; }
.j-sc .pk-av { width: 26px; height: 26px; font-size: .75rem; }
.j-sc b { font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-sc span { font-weight: 900; font-variant-numeric: tabular-nums; font-size: .95rem; }
.j-sc.neg span { color: var(--pk-bad); }
.j-sc.turn { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.j-sc.me b { color: var(--accent); }
.j-status { text-align: center; margin: 4px 0 10px; }
.j-board { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; }
.j-cat { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; text-align: center; color: #cfd3ff; background: #1b1f5e; border-radius: 8px; padding: 6px 2px; display: grid; place-items: center; min-height: 44px; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.j-cell { min-height: 48px; border: 0; border-radius: 8px; background: linear-gradient(180deg, #2a33a8, #1d2488); color: #ffd84d; font: inherit; font-weight: 900; font-size: 1rem; text-shadow: 0 2px 0 rgba(0,0,0,.4); cursor: pointer; transition: transform .1s, filter .15s; touch-action: manipulation; }
.j-cell:not(:disabled):active { transform: scale(.93); }
.j-cell:disabled:not(.done) { filter: saturate(.7); cursor: default; }
.j-cell.done { background: var(--border); opacity: .35; }
.j-q { background: linear-gradient(180deg, #2a33a8, #171c6e); color: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 10px 30px rgba(20,24,110,.4); }
.j-q.dd { background: linear-gradient(160deg, #b5179e, #3a0ca3); }
.j-qh { display: flex; justify-content: space-between; font-size: .8rem; opacity: .85; font-weight: 700; text-transform: uppercase; }
.j-qh b { color: #ffd84d; }
.j-qt { font-size: 1.25rem; font-weight: 800; line-height: 1.35; margin: 12px 0 4px; }
.j-ans { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.12); font-weight: 800; }
.j-opts { margin-top: 4px; }
.j-buzzer { display: block; margin: 18px auto 6px; width: min(64vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 0; font: inherit; font-weight: 900; font-size: 2rem; letter-spacing: .05em; color: #fff; background: radial-gradient(circle at 35% 30%, #ff8a9e, #e0204a 60%, #99102f); box-shadow: 0 10px 0 #7a0c25, 0 18px 40px rgba(224,32,74,.45); cursor: pointer; touch-action: manipulation; transition: transform .06s, box-shadow .06s; -webkit-user-select: none; user-select: none; }
.j-buzzer.hit, .j-buzzer:active { transform: translateY(8px); box-shadow: 0 2px 0 #7a0c25, 0 8px 20px rgba(224,32,74,.35); }
.j-buzzer:disabled { filter: grayscale(1); opacity: .5; font-size: 1.1rem; }
.j-buzzed { text-align: center; font-size: 1.1rem; margin: 14px 0; }
.j-right { background: var(--pk-good); color: #062; border: 0; min-height: 56px; }
.j-wrong { background: var(--pk-bad); color: #fff; border: 0; min-height: 56px; }
.j-res { display: grid; gap: 6px; margin: 12px 0; }
.j-rr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); animation: pkIn .3s both; }
.j-rr span { flex: 1; font-weight: 700; }
.j-rr small { color: var(--text-muted); }
.j-rr b { font-weight: 900; }
.j-rr.up b { color: var(--pk-good); } .j-rr.down b { color: var(--pk-bad); }
.j-rr:nth-child(2) { animation-delay: .05s } .j-rr:nth-child(3) { animation-delay: .1s } .j-rr:nth-child(4) { animation-delay: .15s } .j-rr:nth-child(5) { animation-delay: .2s }