/* Skill Bingo — a clean card; the clue on top; marked words stay readable. */
.dxg .sb { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.2vh, 10px); padding: clamp(8px, 1.4vh, 14px) clamp(10px, 2.4vw, 26px); overflow: hidden; }
.sb-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.sb-skill { font-family: var(--g-head); font-size: .85rem; padding: 3px 12px; border-radius: 999px; background: #DDF2F0; color: #0E4A49; }
.sb-count { font-family: var(--g-head); color: var(--g-navy); font-size: .95rem; }
.sb-help { min-height: 32px; font-size: .85rem; padding: 0 12px; }
.sb-help__text { margin: 0; max-width: 620px; padding: 6px 12px; border-radius: 12px; background: #FFF6D6; font-size: .95rem; text-align: center; }
.sb-prompt { margin: 0; padding: 8px 20px; border-radius: 16px; background: #fff; border: 3px solid #F6D878; font-family: var(--g-head); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); color: var(--g-navy); text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.sb-chip { display: inline-block; padding: 0 .4em; border-radius: 999px; background: #F6D878; }
/* The card */
.sb-card { flex-shrink: 0; width: min(100%, 560px); border-radius: 18px; background: #fff; border: 3px solid #1C2B3D; box-shadow: 0 8px 20px rgba(28, 43, 61, .12); overflow: hidden; }
.sb-head { padding: 5px 0; text-align: center; font-family: var(--g-head); font-weight: 700; letter-spacing: .14em; font-size: 1rem; color: #fff;
	background: linear-gradient(90deg, #17706F, #1C2B3D 50%, #17706F); }
.sb-grid { --cols: 4; display: flex; flex-direction: column; }
.sb-row { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.sb-cell {
	position: relative; aspect-ratio: 1.35; min-height: 0; margin: 0; padding: 4px; cursor: pointer; display: grid; place-items: center;
	border: 0; border-right: 2px solid #DCE5E6; border-bottom: 2px solid #DCE5E6; background: #fff; color: var(--g-navy);
	font-family: var(--g-head); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); transition: background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.sb-row .sb-cell:last-child { border-right: 0; }
.sb-row:last-child .sb-cell { border-bottom: 0; }
.sb-cell:hover:not(.is-marked) { background: #F0FAF8; }
.sb-cell:focus-visible { outline: 4px solid var(--g-blue); outline-offset: -4px; z-index: 2; }
.sb-cell__text { position: relative; z-index: 1; }
/* Marked: a soft star + ring behind the word (shape + color); the word stays readable */
.sb-mark { position: absolute; inset: 10%; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.5, .6, 1);
	background: #FFF3C4; border: 3px solid #E0C052; }
.sb-mark::after { content: "★"; position: absolute; top: -6px; right: -4px; font-size: 1.05rem; color: #C9A93A; }
.sb-cell.is-marked { cursor: default; }
.sb-cell.is-marked .sb-mark { opacity: 1; transform: none; }
.sb-cell.is-wrong { animation: dxg-wiggle .38s ease-in-out; box-shadow: inset 0 0 0 3px #E08B7A; }
.sb-cell.is-win .sb-mark { background: #CFF0EA; border-color: var(--g-aqua); }
.sb-cell.is-win .sb-mark::after { content: "✓"; color: var(--g-aqua-dark); font-weight: 700; }
.sb-grid.is-blackout .sb-mark { background: #CFF0EA; border-color: var(--g-aqua); }
.sb-msg { margin: 0; min-height: 1.4em; font-family: var(--g-head); font-weight: 500; color: var(--g-blue); }
.sb-streak { position: absolute; top: 8px; right: 12px; padding: 3px 12px; border-radius: 999px; background: #FFF5D1; border: 2px solid #E9C85A; font-family: var(--g-head); font-weight: 600; font-size: .9rem; color: #5C4500; opacity: 0; transition: opacity .2s; }
.sb-streak.is-on { opacity: 1; }
.sb-win { z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
	padding: 8px 18px; border-radius: 16px; background: #fff; border: 3px solid #F6D878; box-shadow: 0 8px 20px rgba(28, 43, 61, .16); }
.sb-win[hidden] { display: none; }
.sb-win__title { margin: 0; font-family: var(--g-head); font-weight: 800; font-size: 1.8rem; color: var(--g-blue); }
.sb-msg[hidden] { display: none; }
.sb-confetti { position: absolute; top: -10px; width: 10px; height: 14px; border-radius: 2px; animation: sb-fall 1.5s ease-in forwards; pointer-events: none; z-index: 4; }
.sb-confetti--0 { background: #F6D878; } .sb-confetti--1 { background: #E8836F; } .sb-confetti--2 { background: #9DD3DA; } .sb-confetti--3 { background: #A9D8B8; }
@keyframes sb-fall { to { transform: translateY(620px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-mark { transition: none; } .sb-cell.is-wrong { animation: none; } }
@media (max-height: 700px) and (min-width: 600px) { .sb-card { width: min(100%, 480px); } .sb-cell { aspect-ratio: 1.55; } }
@media (max-width: 599px) {
	.sb-skill { display: none; }
	.sb-prompt { font-size: 1.05rem; padding: 6px 12px; }
	.sb-cell { aspect-ratio: 1.1; font-size: 1.25rem; }
	.sb-streak { position: static; }
	.dxg .sb { justify-content: flex-start; overflow-y: auto; }
	.sb > * { flex-shrink: 0; }
}