:root {
  --ink: #30323a;
  --muted: #6d7079;
  --paper: #fffdf9;
  --line: #e8e4df;
  --aura: #cef4f8;
  --mint: #c5ebd5;
  --pink: #fed3d9;
  --yellow: #fdf0d7;
  --violet: #d1cceb;
  --rose: #e78398;
  --blue: #55b9c7;
  --player-one: #68aa80;
  --player-two: #c3973d;
  --shadow: 0 24px 60px rgba(48, 50, 58, .13);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 8% 17%, rgba(206,244,248,.78), transparent 24rem),
    radial-gradient(circle at 92% 36%, rgba(254,211,217,.58), transparent 26rem),
    linear-gradient(180deg, #fff 0%, var(--paper) 58%, rgba(253,240,215,.55) 100%);
  color: var(--ink);
  font-family: "Source Sans 3", sans-serif;
  min-height: 100vh;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.topbar {
  align-items: center;
  backdrop-filter: blur(24px);
  background: rgba(255,250,248,.9);
  border-bottom: 1px solid rgba(234,223,228,.95);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px clamp(16px, 4vw, 60px);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand { align-items: center; color: var(--ink); display: inline-flex; flex-shrink: 0; gap: 11px; text-decoration: none; }
.brand strong, .brand small { display: block; line-height: 1.05; }
.brand strong { font-family: "Nunito", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.brand small { color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 1px; }
.brand-mark { align-items: center; background: linear-gradient(135deg, var(--ink), #4a4d59); border-radius: 10px; display: inline-flex; flex-shrink: 0; gap: 3px; height: 44px; justify-content: center; position: relative; width: 44px; }
.mark-eye { background: #fff; border-radius: 50%; display: inline-block; height: 10px; position: relative; width: 10px; }
.mark-eye::after { background: var(--ink); border-radius: 50%; content: ""; height: 4px; left: 3px; position: absolute; top: 3px; width: 4px; }
.mark-lens { border: 2px solid var(--pink); border-radius: 50%; display: inline-block; height: 11px; margin-left: 1px; position: relative; width: 11px; }
.mark-lens::after { background: var(--pink); border-radius: 3px; content: ""; height: 8px; position: absolute; right: -5px; top: 7px; transform: rotate(-42deg); width: 2px; }
.back-link { background: var(--yellow); border: 1px solid rgba(213,166,66,.22); border-radius: 999px; color: var(--ink); font: 900 .86rem "Nunito", sans-serif; padding: 9px 15px; text-decoration: none; }
.back-link:hover { background: #f9e4b9; }

main { margin: 0 auto; max-width: 1260px; padding: clamp(34px, 5vw, 62px) clamp(14px, 3vw, 30px) 70px; }
.hero { margin: 0 auto 28px; max-width: 920px; text-align: center; }
.eyebrow, .modal-kicker { color: #997329; display: block; font: 900 .75rem "Nunito", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { font: 900 clamp(2rem, 5vw, 4rem)/1.04 "Nunito", sans-serif; letter-spacing: -.045em; margin-top: 9px; }
.hero h1 em { color: #d86f87; font-style: normal; }
.hero > p { color: var(--muted); font-size: clamp(.98rem, 1.7vw, 1.15rem); line-height: 1.55; margin: 15px auto 0; max-width: 650px; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.hero-pills span { background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; font-weight: 800; padding: 7px 12px; }

.game-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  min-height: 710px;
  overflow: hidden;
  position: relative;
}
.toolbar { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; min-height: 66px; padding: 12px 18px; }
.round-stats, .tools { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.round-stats span { background: #f7f6f3; border-radius: 9px; color: var(--muted); font-size: .76rem; font-weight: 800; padding: 7px 11px; }
.round-stats strong { color: var(--ink); margin-left: 4px; }
.tools button { background: white; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); cursor: pointer; font-size: .76rem; font-weight: 800; min-height: 34px; padding: 6px 10px; }
.tools button:hover { background: var(--yellow); }

.tugboard { background: linear-gradient(110deg, rgba(206,244,248,.46), rgba(253,240,215,.38), rgba(254,211,217,.42)); border-bottom: 1px solid var(--line); padding: 15px clamp(16px, 4vw, 42px) 8px; }
.tug-score { align-items: center; display: flex; font: 900 .82rem "Nunito", sans-serif; justify-content: space-between; position: absolute; width: calc(50% - clamp(30px, 5vw, 64px)); z-index: 3; }
.tug-score-one { left: clamp(18px, 4vw, 42px); }
.tug-score-two { flex-direction: row-reverse; right: clamp(18px, 4vw, 42px); text-align: right; }
.tug-score span { align-items: center; display: inline-flex; gap: 7px; }
.tug-score i { background: var(--player-one); border-radius: 50%; height: 9px; width: 9px; }
.tug-score-two i { background: var(--player-two); }
.tug-score strong { font-size: .8rem; }
.tug-score b { font-size: 1.05rem; }
.tug-stage { height: clamp(150px, 18vw, 205px); margin: 18px auto 0; max-width: 920px; overflow: hidden; position: relative; }
.ground-line { background: rgba(48,50,58,.1); border-radius: 50%; bottom: 10px; height: 7px; left: 12%; position: absolute; right: 12%; }
.center-line { border-left: 2px dashed rgba(48,50,58,.16); bottom: 12px; left: 50%; position: absolute; top: 28px; }
.tug-character { bottom: 4px; height: 94%; position: absolute; transition: transform .62s cubic-bezier(.2,.8,.2,1); width: 37%; z-index: 2; }
.tug-character img { height: 100%; object-fit: contain; transform-origin: bottom center; width: 100%; }
.tug-character-one { left: 2%; transform-origin: bottom center; }
.tug-character-one img { --girl-shift: 0%; transform: translateX(var(--girl-shift)); transform-origin: 82% 42%; }
.tug-character-two { right: 2%; transform-origin: bottom center; }
.tug-character-two img { transform: scaleX(-1); }
.rope { background: repeating-linear-gradient(112deg, #a76f42 0 6px, #d1a16e 6px 11px); border: 1px solid rgba(92,55,29,.4); border-radius: 999px; box-shadow: 0 2px 2px rgba(48,50,58,.18); height: 8px; left: 25%; position: absolute; right: 25%; top: 43%; transition: transform .62s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.rope-marker { background: #958bc7; border-radius: 4px 4px 11px 11px; box-shadow: 0 2px 4px rgba(48,50,58,.16); height: 31px; left: 50%; position: absolute; top: -4px; transform: translateX(-50%); width: 12px; }
.tugboard.pull-one .tug-character-one img { animation: tugPullOne .62s ease; }
.tugboard.pull-two .tug-character-two img { animation: tugPullTwo .62s ease; }

.play-area { padding: clamp(18px, 3vw, 34px); }
.question-card { margin: 0 auto 18px; max-width: 570px; text-align: center; }
.timer-row { align-items: center; color: var(--muted); display: flex; font-size: .76rem; font-weight: 800; justify-content: space-between; }
.timer-row strong { color: var(--ink); font: 900 .9rem "Nunito", sans-serif; }
.timer-track { background: #eeeae4; border-radius: 999px; height: 7px; margin-top: 7px; overflow: hidden; }
.timer-track span { background: linear-gradient(90deg, var(--blue), var(--mint)); border-radius: inherit; display: block; height: 100%; transition: width .1s linear, background .2s; width: 0; }
.timer-track span.warning { background: linear-gradient(90deg, #ec8c73, var(--rose)); }
.status { color: var(--muted); font-size: .92rem; font-weight: 700; margin-top: 10px; min-height: 24px; }
.status strong { color: var(--ink); }

.players { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.player-panel { border: 2px solid transparent; border-radius: 20px; min-width: 0; padding: clamp(15px, 2.5vw, 24px); position: relative; transition: filter .2s, opacity .2s, transform .2s; }
.player-one { background: linear-gradient(145deg, rgba(197,235,213,.78), rgba(255,255,255,.94)); border-color: #b5dec5; }
.player-two { background: linear-gradient(145deg, rgba(253,240,215,.82), rgba(255,255,255,.94)); border-color: #ead6a8; }
.player-heading { align-items: center; display: flex; gap: 11px; margin-bottom: 15px; }
.player-number { align-items: center; background: var(--player-one); border-radius: 12px; color: white; display: inline-flex; font: 900 1.1rem "Nunito", sans-serif; height: 42px; justify-content: center; width: 42px; }
.player-two .player-number { background: var(--player-two); }
.player-heading h2 { font: 900 1.05rem "Nunito", sans-serif; }
.player-equation { font: 900 clamp(2.55rem, 5.6vw, 4.4rem)/1 "Nunito", sans-serif; letter-spacing: -.04em; margin: 1px 0 16px; text-align: center; }
.answer-grid { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-btn { align-items: center; background: white; border: 2px solid rgba(48,50,58,.11); border-radius: 14px; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; font: 900 clamp(1.25rem, 3vw, 1.8rem) "Nunito", sans-serif; gap: 6px; justify-content: center; min-height: 84px; padding: 8px; touch-action: manipulation; transition: border-color .12s, box-shadow .12s, transform .12s; user-select: none; }
.answer-btn:hover:not(:disabled), .answer-btn:focus-visible { border-color: var(--ink); box-shadow: 0 6px 16px rgba(48,50,58,.1); outline: none; transform: translateY(-2px); }
.answer-btn:active:not(:disabled) { transform: translateY(1px); }
.answer-btn.correct { animation: correctPop .42s ease; background: var(--mint); border-color: #65b988; }
.answer-btn.wrong { animation: wrongShake .3s ease; background: var(--pink); border-color: var(--rose); color: #8b3448; }
.answer-btn:disabled { cursor: default; }
.answer-btn:disabled:not(.correct):not(.wrong) { opacity: .54; }
.player-panel.locked { filter: saturate(.7); opacity: .72; }
.lock-message { bottom: 5px; color: #a13d53; font-size: .7rem; font-weight: 900; min-height: 17px; position: absolute; right: 14px; }
.player-panel.round-winner { animation: winnerGlow .7s ease; }

.layer { align-items: center; backdrop-filter: blur(12px); background: rgba(255,253,249,.88); display: none; inset: 0; justify-content: center; overflow: auto; padding: 24px; position: absolute; z-index: 10; }
.layer.show { display: flex; }
.modal { background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); max-width: 680px; padding: clamp(24px, 4vw, 36px); text-align: center; width: 100%; }
.modal-icon { align-items: center; background: linear-gradient(135deg, var(--pink), var(--yellow), var(--aura)); border-radius: 20px; display: inline-flex; font-size: 2.2rem; height: 70px; justify-content: center; margin-bottom: 14px; transform: rotate(-4deg); width: 70px; }
.modal h2 { font: 900 clamp(1.65rem, 4vw, 2.35rem)/1.08 "Nunito", sans-serif; letter-spacing: -.025em; margin-top: 6px; }
.modal > p { color: var(--muted); line-height: 1.48; margin: 10px auto 0; max-width: 490px; }
.choice-set { border: 0; margin-top: 23px; text-align: left; }
.choice-set legend { font: 900 .78rem "Nunito", sans-serif; margin-bottom: 8px; }
.segmented { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.segmented label { cursor: pointer; position: relative; }
.segmented input { opacity: 0; position: absolute; }
.segmented span { align-items: center; background: #f8f7f4; border: 2px solid transparent; border-radius: 12px; display: flex; flex-direction: column; min-height: 65px; justify-content: center; padding: 8px; text-align: center; transition: .15s ease; }
.segmented b { font: 900 .9rem "Nunito", sans-serif; }
.segmented small { color: var(--muted); font-size: .68rem; margin-top: 2px; }
.segmented input:checked + span { background: var(--yellow); border-color: #e2bd68; box-shadow: 0 5px 15px rgba(213,166,66,.12); }
.segmented input:focus-visible + span { outline: 3px solid rgba(85,185,199,.42); }
.compact-set { margin-top: 16px; }
.character-choices { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.character-set { margin-top: 20px; }
.character-options { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.character-options label { cursor: pointer; position: relative; }
.character-options input { opacity: 0; position: absolute; }
.character-options span { align-items: center; background: #f8f7f4; border: 2px solid transparent; border-radius: 14px; display: grid; gap: 5px; grid-template-columns: 46px 1fr; min-height: 68px; padding: 5px 10px; transition: .15s ease; }
.character-options img { height: 56px; object-fit: contain; width: 44px; }
.player-two-choice .character-options img { transform: scaleX(-1); }
.character-options b { font: 900 .82rem "Nunito", sans-serif; }
.character-options input:checked + span { box-shadow: 0 5px 15px rgba(106,91,68,.1); }
.character-options input[value="girl"]:checked + span { background: linear-gradient(135deg, rgba(254,211,217,.8), rgba(253,240,215,.88)); border-color: #e8b3bd; }
.character-options input[value="boy"]:checked + span { background: linear-gradient(135deg, rgba(206,244,248,.9), rgba(253,240,215,.8)); border-color: #a9dce3; }
.character-options input:focus-visible + span { outline: 3px solid rgba(85,185,199,.42); }
.target-options span { min-height: 56px; }
.target-options b { font-size: 1.05rem; }
.primary-action, .secondary-action { border-radius: 12px; cursor: pointer; font: 900 .9rem "Nunito", sans-serif; min-height: 46px; padding: 10px 18px; }
.primary-action { background: var(--ink); border: 1px solid var(--ink); color: white; margin-top: 18px; min-width: 210px; }
.primary-action:hover { background: #474a53; }
.secondary-action { background: white; border: 1px solid var(--line); color: var(--ink); }
.celebration { font-size: clamp(2rem, 7vw, 3.6rem); letter-spacing: .08em; margin-bottom: 10px; }
.final-score { align-items: center; background: linear-gradient(110deg, rgba(206,244,248,.45), rgba(254,211,217,.4)); border-radius: 18px; display: grid; grid-template-columns: 1fr auto 1fr; margin: 24px auto 4px; max-width: 360px; padding: 18px; }
.final-score span { display: flex; flex-direction: column; }
.final-score b { font: 900 2.3rem "Nunito", sans-serif; }
.final-score small { color: var(--muted); font-size: .68rem; font-weight: 800; }
.final-score i { color: var(--muted); font-style: normal; }
.finish-actions { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
.finish-actions .primary-action { margin-top: 0; min-width: 160px; }

footer { align-items: center; border-top: 1px solid #eadfe4; color: #6d7079; display: flex; flex-wrap: wrap; font-size: 13px; gap: 14px 22px; justify-content: center; padding: 17px; }
footer a { color: inherit; text-decoration: none; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes correctPop { 50% { transform: scale(1.06); } }
@keyframes wrongShake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes winnerGlow { 45% { box-shadow: 0 0 0 6px rgba(197,235,213,.7); transform: translateY(-4px); } }
@keyframes tugPullOne { 0%,100% { transform: translateX(var(--girl-shift)); } 40% { filter: drop-shadow(0 9px 8px rgba(48,50,58,.16)); transform: translateX(var(--girl-shift)) rotate(-2deg); } }
@keyframes tugPullTwo { 40% { filter: drop-shadow(0 9px 8px rgba(48,50,58,.16)); transform: scaleX(-1) translateY(2px) rotate(-2deg); } }

@media (max-width: 760px) {
  .game-shell { min-height: 800px; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .tools { width: 100%; }
  .tools button { flex: 1; }
  .tug-stage { height: 150px; }
  .tug-character-one img { --girl-shift: 2%; }
  .rope { left: 30%; }
  .players { grid-template-columns: 1fr; }
  .player-heading { margin-bottom: 10px; }
  .player-equation { margin-bottom: 12px; }
  .answer-btn { min-height: 68px; }
  .layer { align-items: flex-start; padding: 14px; }
  .modal { margin: auto; }
}

@media (max-width: 480px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .brand small { display: none; }
  .back-link { font-size: .75rem; padding: 8px 10px; }
  main { padding-left: 9px; padding-right: 9px; }
  .game-shell { border-radius: 19px; }
  .toolbar { padding: 11px; }
  .tools button { font-size: .68rem; padding: 5px 6px; }
  .play-area { padding: 15px 11px 18px; }
  .question-card { margin-bottom: 16px; }
  .player-panel { border-radius: 16px; padding: 13px; }
  .answer-grid { gap: 6px; }
  .answer-btn { border-radius: 11px; min-height: 62px; }
  .modal { border-radius: 19px; padding: 23px 16px; }
  .segmented { gap: 5px; }
  .segmented span { padding: 5px; }
  .character-choices { grid-template-columns: 1fr; }
  .character-set { margin-top: 14px; }
  .character-options span { min-height: 58px; }
  .character-options img { height: 48px; }
  .finish-actions { flex-direction: column-reverse; }
  .finish-actions .primary-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}