/* Who Brian Knows — game chrome, Basecamp-lineage pass. The canvas is the field; cards, bubble and HUD sit on top. */
.wbk { background: #1b2930; color: #eaf0f2; overflow: hidden; }
.wbk--full { position: relative; }
.wbk--card { position: relative; }
.wbk__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.wbk--card .wbk__canvas { pointer-events: none; cursor: pointer; }
.wbk--card.is-playing .wbk__canvas { pointer-events: auto; touch-action: none; cursor: pointer; }
.wbk--full .wbk__canvas { touch-action: none; cursor: pointer; }
.wbk__ui { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-rows: 1fr auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.wbk__card { pointer-events: auto; justify-self: center; align-self: center; text-align: center; max-width: 460px; width: 100%; }
.wbk__eyebrow { font-size: 14px; font-weight: 700; color: #f0866f; margin: 0 0 8px; }
.wbk__h { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0 0 12px; text-shadow: 0 2px 18px rgba(27, 41, 48, .9); }
.wbk__prompt { font-size: clamp(1.1rem, 1.2vw + .8rem, 1.5rem); font-weight: 600; margin: 0 0 12px; color: #eaf0f2; }
.wbk__how { margin: 0 0 6px; color: rgba(234, 240, 242, .68); font-size: 15px; }
.wbk__keys { margin: 0; color: rgba(234, 240, 242, .68); font-size: 14px; }
.wbk__keys kbd { font: inherit; border: 1px solid rgba(234, 240, 242, .25); border-radius: 6px; padding: 1px 7px; }
.wbk__note { margin: 12px 0 0; font-size: 14px; }
.wbk__end { background: rgba(27, 41, 48, .94); border-radius: 20px; padding: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.wbk__endhead { font-size: clamp(1.3rem, 1.4vw + .9rem, 1.8rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.wbk__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin: 0 0 12px; }
.wbk__stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wbk__stats dt { font-size: 12px; font-weight: 700; color: rgba(234, 240, 242, .62); }
.wbk__stats dd { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wbk__stats dd.is-red { color: #f0866f; }
.wbk__compare { margin: 0 0 16px; font-size: 13px; color: rgba(234, 240, 242, .62); }
.wbk__compare b { color: #eaf0f2; font-weight: 700; }
.wbk__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.wbk__share { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.wbk__share label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: rgba(234, 240, 242, .62); }
.wbk__share input { width: 100%; min-width: 0; font: 13px/1.4 inherit; font-family: inherit; color: #eaf0f2; background: rgba(234, 240, 242, .08); border: 1px solid rgba(234, 240, 242, .16); border-radius: 10px; padding: 10px 12px; }
.wbk .btn--ghost { background: rgba(234, 240, 242, .12); color: #eaf0f2; }
.wbk .btn--ghost:hover { background: rgba(234, 240, 242, .2); }
.wbk__bubble { position: absolute; max-width: 220px; background: #fff; color: #1f2a30; border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 14px; font-weight: 600; line-height: 1.3; transition: opacity .25s ease; pointer-events: none; z-index: 4; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.wbk__hud { pointer-events: none; display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 10px; border-top: 1px solid rgba(234, 240, 242, .14); align-self: end; }
.wbk__stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wbk__k { font-size: 11px; font-weight: 700; color: rgba(234, 240, 242, .6); }
.wbk__v { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #eaf0f2; }
.wbk__v.is-red { color: #f0866f; }
.wbk__v small { font-size: 12px; color: rgba(234, 240, 242, .62); font-weight: 600; margin-left: 6px; }
@media (max-width: 600px) { .wbk__hud { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .wbk__end { padding: 16px; } .wbk__stats { grid-template-columns: 1fr 1fr; } .wbk__stats dd { font-size: 20px; } .wbk__bubble { max-width: 170px; } }

/* the card's own HUD row */
.gamecard__hud .wbk__v { font-size: 15px; }
.gamecard__hud .wbk__k { font-size: 10.5px; }
@media (max-width: 480px) { .gamecard__hud .wbk__stat:nth-child(3) { display: none; } }

/* /play: full-screen stage */
.playpage { background: #1b2930; overflow: hidden; }
.playpage, .playpage main { height: 100%; }
.play { position: relative; height: 100%; min-height: 100vh; }
.play.is-takeover { position: fixed; inset: 0; z-index: 50; }
.play__top { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.play__top > * { pointer-events: auto; }
.play__back { color: #fff; display: inline-flex; }
.play__back .logo { height: 28px; }
.play__ctl { display: flex; gap: 8px; }
.play .wbk__ui { padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { .wbk__bubble { transition: none; } }

/* compact end card inside the home-page card */
.wbk--card .wbk__end { padding: 16px 18px; max-width: 420px; }
.wbk--card .wbk__endhead { font-size: clamp(1.1rem, 1.2vw + .7rem, 1.45rem); margin-bottom: 10px; }
.wbk--card .wbk__stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; gap: 8px 12px; }
.wbk--card .wbk__stats dd { font-size: 20px; }
.wbk--card .wbk__stats div:nth-child(n+4) { display: none; }
.wbk--card .wbk__compare { margin-bottom: 12px; }
.wbk--card .wbk__actions { margin-bottom: 0; gap: 8px; }
.wbk--card .wbk__actions .btn { min-height: 42px; padding: 9px 14px; font-size: 15px; border-radius: 10px; }
.wbk--card .wbk__share { display: contents; }
.wbk--card .wbk__share label, .wbk--card .wbk__share input { display: none; }
.wbk--card .wbk__share .btn { position: absolute; right: 18px; bottom: 16px; }
.wbk--card .wbk__end { position: relative; }
@media (max-height: 760px) and (min-width: 901px) { .wbk--card .wbk__compare { display: none; } }