/* SAME BRAIN on the shared engine: bold flat stickers on a deep indigo night. Hot pink brains, lemon sparks, white
   sticker outlines, rounded chunky type (Fredoka) and a friendly sans (Nunito Sans). Everything is scoped to
   html[data-game="sb"] (the engine's join screen, lobby and TV pages get the palette) and to .sb (the game's own
   views, sb- prefixed classes). Phones first (portrait, typing with the keyboard up); a TV is read from 3 m. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:opsz,wght@6..12,600;6..12,800;6..12,900&display=swap');

html[data-game="sb"] {
  --night: #1b1240; --night-2: #2a1c5e; --night-3: #3a2a7a; --hot: #ff4f9a; --hot-d: #c42a6c; --lemon: #ffe14a; --lemon-d: #c9a90f;
  --ice: #8fd8ff; --mint2: #3fe0b0; --chalk: #fff8f0;
  --fred: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif; --sbody: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  /* the engine's palette in Same Brain colours */
  --ink-2: #241752; --ink-3: #33236e; --paper: #fff8f0; --paper-2: #f1e3f5; --paper-ink: #1b1240;
  --pink: #ff4f9a; --pink-deep: #c42a6c; --blue: #6b5cff; --blue-deep: #4a3bd6; --yellow: #ffe14a; --yellow-deep: #c9a90f;
  --orange: #ff8a3d; --mint: #3fe0b0; --good: #3fe0b0; --bad: #ff4f9a;
  --display: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
  background: var(--night);
}
html[data-game="sb"] body { background: radial-gradient(120% 70% at 50% 0%, #3b2687, var(--night) 60%) fixed, var(--night); }
html[data-game="sb"] .studio { background: transparent; }
html[data-game="sb"] .h1, html[data-game="sb"] .h2, html[data-game="sb"] .h3, html[data-game="sb"] .display { font-family: var(--fred); font-weight: 700; letter-spacing: 0; text-transform: none; }
html[data-game="sb"] .btn { font-family: var(--fred); font-weight: 700; letter-spacing: .01em; text-transform: none; }

/* the engine's pages: logo + lobby card */
html[data-game="sb"] .sb-homelogo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
html[data-game="sb"] .sb-homelogo img { width: min(62vw, 330px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); animation: sbBob 3s ease-in-out infinite; }
html[data-game="sb"] .sb-homelogo.tv img { width: min(30vw, 440px); }
html[data-game="sb"] .sb-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="sb"] .sb-lobby-art { width: 96px; height: auto; grid-row: span 2; }
html[data-game="sb"] .sb-lobbycard.tv .sb-lobby-art { width: 150px; }
html[data-game="sb"] .sb-lobby-plan { font-weight: 800; margin-top: 4px; }

/* the wordmark: two stacked words, a white sticker outline */
.sb-word { display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); line-height: .86; font: 700 clamp(54px, 17vw, 96px) var(--fred, 'Fredoka', sans-serif); }
.sb-word span { color: var(--lemon, #ffe14a); -webkit-text-stroke: 3px #1b1240; paint-order: stroke fill; text-shadow: 0 0 0 #fff, 4px 4px 0 #fff, 7px 7px 0 rgba(0, 0, 0, .3); }
.sb-word span + span { color: var(--hot, #ff4f9a); }
.tv .sb-word { font-size: clamp(64px, 8vw, 130px); }
@keyframes sbBob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }

/* ------------------------------------------------------------- the game's own views */
.sb { --night: #1b1240; --night-2: #2a1c5e; --night-3: #3a2a7a; --hot: #ff4f9a; --hot-d: #c42a6c; --lemon: #ffe14a; --lemon-d: #c9a90f; --ice: #8fd8ff; --mint2: #3fe0b0; --chalk: #fff8f0;
  --fred: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif; --sbody: 'Nunito Sans', system-ui, sans-serif;
  font: 600 16px/1.35 var(--sbody); color: var(--chalk); }
.sb button { font: inherit; color: inherit; cursor: pointer; }
.sb button:focus-visible { outline: 3px solid var(--lemon); outline-offset: 2px; }
.sb h2 { margin: 0; font: 700 30px/1.05 var(--fred); text-wrap: balance; }
.sb-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.sb-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sb-logo { display: flex; flex-direction: column; align-items: center; }
.sb-logo img { width: min(70vw, 360px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); animation: sbBob 3s ease-in-out infinite; }
.sb-logo.small img { width: 150px; }
.sb-logo.small .sb-word { font-size: 46px; }
.sb-tag { font: 700 22px var(--fred); background: var(--hot); color: #fff; padding: 6px 16px 8px; border-radius: 999px; border: 3px solid #fff; transform: rotate(2deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .3); }
.sb-sub { margin: 0; font-weight: 800; opacity: .8; }
.sb-card { width: min(100%, 520px); background: var(--night-2); border: 3px solid #fff; border-radius: 24px; padding: 20px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); display: grid; gap: 14px; text-align: center; justify-items: center; }
.tv .sb-card { width: min(70vw, 900px); }

/* the play view: head (count + timer), the stage, the waiting strip */
.sb-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.sb-head { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.sb-count { font: 700 15px var(--fred); background: var(--night-3); padding: 4px 12px; border-radius: 999px; }
.sb-spicy { font: 700 13px var(--fred); background: var(--hot); color: #fff; padding: 3px 8px; border-radius: 8px; }
.sb-timer { grid-column: -2; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sb-timer i { display: block; height: 100%; background: var(--lemon); transform-origin: left; border-radius: 999px; transition: background .3s; }
.sb-timer.hurry i { background: var(--hot); animation: sbPulse .5s ease-in-out infinite alternate; }
@keyframes sbPulse { to { opacity: .55; } }
.sb-stage { flex: 1; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; text-align: center; }
.sb-kind { font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--lemon); }
.sb-q { font: 700 clamp(32px, 10vw, 52px)/1.05 var(--fred); max-width: 18ch; text-wrap: balance; animation: sbIn .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.sb-q.small { font-size: clamp(20px, 6vw, 28px); opacity: .9; animation: none; }
.tv .sb-q { font-size: clamp(56px, 6.4vw, 110px); max-width: 22ch; }
@keyframes sbIn { from { transform: scale(.7) rotate(-3deg); opacity: 0; } }
.sb-hint { font-weight: 800; font-size: 22px; opacity: .8; }

/* typing */
.sb-answer { width: min(100%, 460px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sb-answer.shake { animation: sbShake .35s; }
@keyframes sbShake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.sb-row { display: flex; gap: 8px; }
.sb-in { flex: 1; min-width: 0; width: auto; height: 60px; border: 3px solid #fff; border-radius: 18px; background: var(--chalk); color: var(--night); padding: 0 16px; font: 700 24px var(--fred); -webkit-user-select: text; user-select: text; }
.sb-in:focus { outline: 4px solid var(--lemon); outline-offset: 1px; }
.sb-lock { flex: none; padding: 0 18px; border: 3px solid #fff; border-radius: 18px; background: var(--hot); font: 700 20px var(--fred) !important; color: #fff !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, .3); }
.sb-lock:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.sb-mine { min-height: 22px; font-weight: 800; }
.sb-mine b { color: var(--lemon); font: 700 20px var(--fred); }
.sb-mine small { display: block; font-weight: 600; opacity: .7; font-size: 13px; }

/* four-choice */
.sb-opts { width: min(100%, 520px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-opts.tv { width: min(80vw, 1300px); gap: 18px; }
.sb-opt { min-height: 84px; padding: 10px; border: 3px solid #fff; border-radius: 20px; background: var(--night-3); font: 700 20px/1.1 var(--fred); box-shadow: 4px 4px 0 rgba(0, 0, 0, .3); overflow-wrap: anywhere; display: grid; place-items: center; }
.sb-opts.tv .sb-opt { min-height: 140px; font-size: clamp(28px, 2.8vw, 48px); }
.sb-opt:nth-child(1) { background: #6b5cff; } .sb-opt:nth-child(2) { background: #e83f8a; } .sb-opt:nth-child(3) { background: #13a98a; } .sb-opt:nth-child(4) { background: #e57a19; }
.sb-opt.on { outline: 5px solid var(--lemon); outline-offset: 2px; transform: scale(1.04); }
.sb-opt:active { transform: scale(.97); }

/* who is in */
.sb-who { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sb-pill { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 14px; opacity: .6; }
.sb-pill.in { background: var(--mint2); color: var(--night); opacity: 1; }
.sb-pill.in::before { content: '\2713  '; }
.sb-pill.me { box-shadow: inset 0 0 0 2px #fff; }
.sb-pill.pop { animation: sbPop .4s cubic-bezier(.2, 1.8, .4, 1); }
.tv .sb-pill { font-size: 24px; padding: 8px 18px; }
@keyframes sbPop { from { transform: scale(.5); } }

/* the reveal */
.sb-stage.reveal { justify-content: flex-start; gap: 12px; }
.sb-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border: 3px solid #fff; border-radius: 22px; text-align: left; animation: sbIn .5s .3s cubic-bezier(.2, 1.5, .4, 1) both; box-shadow: 5px 5px 0 rgba(0, 0, 0, .3); }
.sb-banner img { width: 86px; height: 86px; object-fit: contain; }
.sb-banner b { display: block; font: 700 28px/1 var(--fred); }
.sb-banner.same { background: var(--lemon); color: var(--night); }
.sb-banner.freeze { background: var(--ice); color: var(--night); }
.tv .sb-banner img { width: 150px; height: 150px; } .tv .sb-banner b { font-size: 56px; }
.sb-you { font: 700 30px var(--fred); padding: 4px 18px 6px; border-radius: 999px; animation: sbIn .45s .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.sb-you small { font: 800 15px var(--sbody); }
.sb-you.good { background: var(--mint2); color: var(--night); }
.sb-you.bad { background: var(--hot); color: #fff; }
.sb-drink { display: flex; align-items: center; gap: 14px; width: min(100%, 460px); padding: 12px 18px 12px 12px; border: 4px solid #fff; border-radius: 26px; background: var(--hot); color: #fff; text-align: left; box-shadow: 6px 6px 0 rgba(0, 0, 0, .35); animation: sbIn .5s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.sb-drink img { width: 92px; height: 92px; object-fit: contain; flex: none; }
.sb-drink b { display: block; font: 700 clamp(44px, 14vw, 64px)/.95 var(--fred); animation: sbThrob 1.2s 1.2s ease-in-out infinite; }
.sb-drink span { display: block; font-weight: 900; font-size: 16px; }
.sb-drink small { display: block; margin-top: 4px; font: 700 18px var(--fred); color: var(--lemon); }
@keyframes sbThrob { 50% { transform: scale(1.07); } }
.sb-drinklist { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; padding: 10px 22px; border-radius: 22px; background: var(--hot); border: 3px solid #fff; font: 700 30px var(--fred); animation: sbIn .5s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.sb-drinklist small { font-size: 22px; color: var(--lemon); }
.sb-lock-s { display: block; font: 800 13px var(--sbody); opacity: .8; }
.sb-lock-s:empty { display: none; }
.sb-piles { width: min(100%, 560px); display: grid; gap: 8px; }
.tv .sb-piles { width: min(86vw, 1500px); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sb-pile { position: relative; display: grid; gap: 4px; text-align: left; padding: 10px 14px; border: 3px solid rgba(255, 255, 255, .5); border-radius: 18px; background: var(--night-2); color: var(--chalk); animation: sbDeal .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.sb-pile:nth-child(2) { animation-delay: .08s; } .sb-pile:nth-child(3) { animation-delay: .16s; } .sb-pile:nth-child(4) { animation-delay: .24s; } .sb-pile:nth-child(n+5) { animation-delay: .32s; }
@keyframes sbDeal { from { transform: translateY(18px) scale(.94); opacity: 0; } }
.sb-pile[disabled] { cursor: default; }
.sb-pile.top { background: var(--lemon); color: var(--night); border-color: #fff; box-shadow: 5px 5px 0 rgba(0, 0, 0, .3); }
.sb-pile.alone { opacity: .78; border-style: dashed; }
.sb-pile.mine { outline: 3px solid var(--hot); outline-offset: 2px; }
.sb-pile.picked { outline: 4px dashed var(--mint2); outline-offset: 3px; transform: scale(1.02); }
.sb-pile-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sb-pile-h b { font: 700 24px/1.05 var(--fred); overflow-wrap: anywhere; }
.sb-pile-h .n { flex: none; min-width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 22px var(--fred); background: var(--hot); color: #fff; }
.sb-pile.top .sb-pile-h .n { background: var(--night); color: var(--lemon); }
.sb-names { display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 800; font-size: 14px; opacity: .85; }
.sb-pts, .sb-sip { position: absolute; right: 10px; bottom: 8px; font: 700 16px var(--fred); }
.sb-sip { color: var(--hot); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.tv .sb-pile-h b { font-size: 40px; } .tv .sb-names { font-size: 22px; }
.sb-none { margin: 0; font-weight: 800; opacity: .7; }
.sb-lead { display: grid; gap: 8px; justify-items: center; }
.sb-mergehint { margin: 0; font-weight: 800; font-size: 14px; opacity: .85; }
.sb-nextbtn { min-height: 58px; width: min(100%, 420px); border: 3px solid #fff; border-radius: 999px; background: var(--lemon); color: var(--night) !important; font: 700 22px var(--fred) !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, .35); }
.sb-nextbtn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.sb-nextbtn[disabled] { opacity: .6; }
.sb-ghost { min-height: 48px; padding: 0 18px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; background: none; font-weight: 800; }
.sb-wait { margin: 0; text-align: center; font-weight: 800; opacity: .75; }
.sb-board { display: grid; gap: 4px; width: min(40vw, 520px); margin: 0 auto; }
.sb-board .sb-row { justify-content: space-between; font: 600 26px var(--fred); padding: 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); }

/* awards + final */
.sb-stage.over { gap: 18px; }
.sb-big { font: 700 44px var(--fred) !important; color: var(--lemon); }
.sb-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: min(100%, 720px); }
.sb-award { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 20px; background: var(--night-2); border: 3px solid #fff; animation: sbIn .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.sb-award img { width: 90px; height: 90px; object-fit: contain; }
.sb-award b { font: 700 20px var(--fred); color: var(--lemon); }
.sb-award span { font-weight: 900; font-size: 17px; }
.sb-award small { opacity: .75; }
.sb-lines { font-weight: 800; opacity: .8; }
.sb-table { width: 100%; border-collapse: collapse; font-weight: 800; }
.sb-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; text-align: right; }
.sb-table td { padding: 6px 4px; border-top: 1px solid rgba(255, 255, 255, .15); text-align: right; }
.sb-table td:first-child, .sb-table th:first-child { text-align: left; }
.sb-table tr.me td { color: var(--lemon); }
.sb-awardline { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 14px; }
.sb-btns { display: grid; gap: 10px; width: 100%; justify-items: center; }

/* the TV: bigger everything, roomy padding */
.sb-play.tv { padding: 3vh 4vw; gap: 2.4vh; }
.tv .sb-head { grid-template-columns: auto auto 1fr; }
.tv .sb-count { font-size: 28px; padding: 8px 20px; }
.tv .sb-timer { height: 20px; }

@media (prefers-reduced-motion: reduce) { .sb *, .sb-homelogo img { animation: none !important; } }
@media (max-height: 640px) { .sb-q { font-size: 30px; } .sb-opt { min-height: 66px; font-size: 18px; } }