@font-face{font-family:Montserrat;src:url('fonts/montserrat/Montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Nunito;src:url('fonts/nunito/Nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
/* Blue, red, and white from the supplied We Say Yes! artwork. */
.ready-games .game-card.needs{--card-border:#ff3035;--card-bg:#ffffff;--card-ink:#143d63;--card-shadow:#155795;border-radius:28px 28px 12px 28px;font-family:Nunito,Arial,sans-serif}
.ready-games .needs .game-copy{background:#ffffff;color:#143d63}
.ready-games .needs .game-copy::before{height:8px;background:repeating-linear-gradient(120deg,#ff3035 0 18px,#ffffff 18px 28px)}
.ready-games .needs h2{font:400 clamp(26px,3vw,36px)/1.15 Montserrat,Impact,sans-serif;letter-spacing:0;color:#155795}
.ready-games .needs .game-copy small{color:#155795;font-weight:900;letter-spacing:1.2px}
.ready-games .needs .game-copy p{font-size:17px;line-height:1.55}
.ready-games .needs .game-action{background:#155795;color:#ffffff;border:2px solid #155795;border-radius:12px;box-shadow:0 4px 0 #ff3035;font:900 16px/1.3 Nunito,Arial,sans-serif}
.ready-games .needs .game-art{background:radial-gradient(circle at center,#ffffff22 0 38%,transparent 39%),repeating-conic-gradient(from 0deg at 50% 50%,#155795 0deg 15deg,#124a80 15deg 30deg);border-bottom:4px solid #ff3035}
.ready-games .needs .yes-art{position:relative;min-height:180px;isolation:isolate}
.yes-art .yes-badge{font:400 clamp(48px,6vw,70px)/1 Montserrat,Impact,sans-serif;letter-spacing:-2px;color:#143d63;background:#ff3035;border:4px solid #ffffff;border-radius:50%;padding:25px 14px;transform:rotate(-9deg);box-shadow:6px 8px 0 #0d355c66}
.ready-games .yes-art span{position:absolute;font-size:40px;margin:0;bottom:17px;left:18px;transform:rotate(-12deg)}
.ready-games .yes-art span+span{left:auto;right:18px;bottom:22px;font-size:36px;margin:0;transform:rotate(12deg)}
body:is([data-game="needs-vs-wants"],.needs-active){font-family:Nunito,Arial,sans-serif;background:radial-gradient(circle at 15% 20%,#ff303516,transparent 40%),#f5f8fc;color:#ffffff}
body[data-page="play"].needs-active{background:radial-gradient(circle at 15% 20%,#ff303516,transparent 40%),#f5f8fc}
body:is([data-game="needs-vs-wants"],.needs-active) :is(h1,#game-title){font:400 clamp(32px,6vw,56px)/1.15 Montserrat,Impact,sans-serif;letter-spacing:0;color:#ff3035}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.eyebrow,main>p){color:#155795}
body.needs-active .controller-title{background:transparent;border-color:#155795}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.message,.student-question){background:#ffffff;color:#143d63;border:3px solid #ff3035;border-radius:24px;box-shadow:0 7px 0 #155795}
body.needs-active .student-question :is(h2,.eyebrow),body.needs-active .student-question::after{color:#143d63}
/* Match the classroom shell's specificity so its blue panel cannot split this color pair. */
body[data-page="play"].needs-active .student-question{background:#ffffff;color:#143d63;border:3px solid #ff3035;border-radius:24px;box-shadow:0 7px 0 #155795}
body[data-page="play"].needs-active .student-question :is(h2,.eyebrow),body[data-page="play"].needs-active .student-question::after{color:#143d63}
body[data-page="play"].needs-active .student-question h2{font:800 clamp(23px,3.6vw,32px)/1.5 Nunito,Arial,sans-serif;letter-spacing:0}
.controller-bar .back-games-label{display:none}
body[data-page="play"][data-game="needs-vs-wants"] .controller-bar>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;max-width:100%;min-height:46px;padding:10px 13px;background:#155795;color:#ffffff;border:2px solid #ff3035;border-radius:12px;font:800 15px/1.3 Nunito,Arial,sans-serif;box-shadow:0 3px 0 #0d355c}
body[data-page="play"][data-game="needs-vs-wants"] .controller-bar>a .back-games-label{display:inline;color:#ffffff}
body[data-page="play"][data-game="needs-vs-wants"] .controller-bar>a i{color:#ff3035;font-size:20px}
body[data-page="play"][data-game="needs-vs-wants"] .controller-bar>a:hover{background:#104574;color:#ffffff}
body[data-page="play"].needs-active .controller-bar>a:focus-visible{outline:3px solid #ff3035;outline-offset:4px}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.message h2,.student-question h2){font-family:Nunito,Arial,sans-serif;font-weight:800}
body:is([data-game="needs-vs-wants"],.needs-active) :is(button,.stats){font-family:Nunito,Arial,sans-serif}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.choices,.answer-grid) button{border:2px solid #ffffff;border-radius:18px;box-shadow:0 5px 0 #0d355c;font-weight:900}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.choices,.answer-grid) button:first-child{background:#155795;color:white}
body:is([data-game="needs-vs-wants"],.needs-active) :is(.choices,.answer-grid) button:nth-child(2){background:#ff3035;color:#143d63}
body[data-game="needs-vs-wants"] :is(#feedback,#finish,.stats){background:#ffffff;color:#143d63;border:2px solid #ff3035}
body[data-game="needs-vs-wants"] progress{accent-color:#ff3035}
body:is([data-game="needs-vs-wants"],.needs-active) .game-instructions-reopen{background:#155795;border-color:#ff3035;color:#ffffff;font-family:Nunito,Arial,sans-serif;box-shadow:0 4px 0 #0d355c}
.game-instructions-dialog[data-instructions-game="needs-vs-wants"]{background:#ffffff;color:#143d63;border:3px solid #ff3035;border-radius:24px}
.game-instructions-dialog[data-instructions-game="needs-vs-wants"]>h2{font:400 28px/1.2 Montserrat,Impact,sans-serif;color:#155795}
body:is([data-game="needs-vs-wants"],.needs-active) .game-instructions p,.game-instructions-dialog[data-instructions-game="needs-vs-wants"] .game-instructions p{font-family:Nunito,Arial,sans-serif}
.cards a[href="needs/index.html"]{background:#ffffff;color:#143d63;border:3px solid #ff3035;font-family:Nunito,Arial,sans-serif}
.cards a[href="needs/index.html"] h2{font-family:Montserrat,Impact,sans-serif;font-weight:400;color:#155795}

/* Supplied artwork keeps the original block lettering and red brush-script accent. */
.ready-games .needs .yes-art{background:#ffffff;border-bottom:5px solid #ff3035;padding:12px}
.ready-games .needs .yes-brand-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ready-games .needs h2{font-weight:900;color:#155795;text-transform:uppercase}
.ready-games .needs .game-copy::before{background:#155795;height:5px}
body[data-game="needs-vs-wants"]{color:#143d63}
body[data-page="play"].needs-active :is(#player-name,#play-room){color:#155795}
body[data-page="play"].needs-active .controller-title #game-title,body[data-game="needs-vs-wants"] main>h1{color:#155795;font-weight:900}
body[data-page="play"].needs-active .controller-title #game-art{background:#155795;border-color:#ff3035;box-shadow:0 5px 0 #0d355c}
body[data-page="play"][data-game="needs-vs-wants"] .controller-bar>a i{color:#ffffff}
body[data-page="play"].needs-active .answer-grid button:where(:not(.correct-reveal):not(.incorrect-reveal)):first-child,body[data-game="needs-vs-wants"] .choices button:first-child{background:#155795;color:#ffffff;border-color:#155795}
body[data-page="play"].needs-active .answer-grid button:where(:not(.correct-reveal):not(.incorrect-reveal)):nth-child(2),body[data-game="needs-vs-wants"] .choices button:nth-child(2){background:#ffffff;color:#155795;border:3px solid #ff3035}
body[data-page="play"].needs-active .answer-grid button:hover:not(:disabled){background:#104574;color:#ffffff;border-color:#ff3035}
body[data-game="needs-vs-wants"] .game-instructions-reopen .fa-solid{color:#ffffff}
.game-instructions-dialog[data-instructions-game="needs-vs-wants"]>h2{font-weight:900}
.ready-games .needs .yes-art{padding:0;overflow:hidden;background:radial-gradient(ellipse at center,#ffffff,#e7f0fa)}
.ready-games .needs .yes-card-mascot{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:94%;height:auto;max-width:none}
.yes-heading-mascot{display:none}
body[data-game="needs-vs-wants"] .yes-heading-mascot{display:block;position:relative;width:min(300px,100%);height:210px;overflow:hidden;margin:18px auto 0}
.yes-heading-mascot img{display:block;width:100%;height:auto}
body[data-page="play"][data-game="needs-vs-wants"] .controller-title{position:relative;padding-right:285px;min-height:230px}
body[data-page="play"][data-game="needs-vs-wants"] .controller-title .yes-heading-mascot{position:absolute;right:0;bottom:0;width:265px;height:225px;margin:0}
.game-instructions-dialog[data-instructions-game="needs-vs-wants"] .game-instructions-mascot{width:230px;max-width:100%;height:190px;object-fit:cover;object-position:top;margin-inline:auto}
@media(max-width:600px){body[data-page="play"][data-game="needs-vs-wants"] .controller-title{padding-right:0}body[data-page="play"][data-game="needs-vs-wants"] .controller-title .yes-heading-mascot{position:relative;width:265px;height:205px;margin:18px auto 0}}

/* Supplied Ascension lobby photograph, shared by all game pages. */
body:is([data-game="needs-vs-wants"],.needs-active),body[data-page="play"]:is([data-game="needs-vs-wants"],.needs-active){background-color:#e7e4d8;background-image:linear-gradient(#f5f8fc66,#f5f8fc99),url('we-say-yes-background.jpg');background-position:center,center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;min-height:100vh}

/* Keep the supplied brand artwork readable in the game heading. */
.yes-title-logo{display:block;width:100%;max-width:340px;height:auto;object-fit:contain}