.game-shell { --ink:#0b2451; --blue:#1266c4; --cyan:#22c7e8; --yellow:#ffeb16; --green:#399a19; --coral:#db5275; --line:#dce7f1; --shadow:0 18px 45px rgba(11,36,81,.11); width:min(1120px,calc(100% - 32px)); margin:auto; padding:32px 0; color:var(--ink); font-family:ui-rounded,"Avenir Next",Avenir,"Nunito Sans",sans-serif; }
.game-shell,.game-shell * { box-sizing:border-box; }.algebravo-page { margin:0; min-width:320px; background:linear-gradient(145deg,#f7fcff,#fffdf6 65%); }.game-shell button,.game-shell output { font:inherit; }
.game-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.eyebrow { margin:0 0 4px; color:var(--green); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.game-shell h1,.game-shell h2,.game-shell p { margin-top:0; }.game-shell h1 { margin-bottom:0; color:var(--blue); font-size:clamp(2.2rem,5vw,3.75rem); line-height:.9; letter-spacing:-.06em; }.game-shell h2 { margin-bottom:0; font-size:1rem; }.game-banner { display:block; width:min(285px,40vw); height:auto; }
.header-meta { display:flex; gap:8px; }.date-card { min-width:116px; padding:9px 12px; border:2px solid var(--cyan); border-radius:12px; background:white; text-align:right; box-shadow:0 4px 0 rgba(34,199,232,.15); }
.date-card span { display:block; color:var(--green); font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .date-card strong { font-size:.9rem; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,320px); gap:clamp(30px,6vw,70px); align-items:center; }
.board-wrap { display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; gap:6px 16px; }
.board { grid-column:1; grid-row:1; display:grid; grid-template-columns:repeat(5,minmax(38px,1fr)); gap:8px; padding:14px; border:4px solid var(--cyan); border-radius:20px; background:linear-gradient(135deg,#f7fdff,white); box-shadow:var(--shadow); }
.column-clues { grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:3px 8px; padding:0 14px; } .column-clues .clue-label { grid-column:1/-1; color:var(--green); font-size:.68rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.row-clues { grid-column:2; grid-row:1; display:grid; grid-template-rows:repeat(3,1fr); gap:8px; }
.cell,.operator,.row-clues output,.column-clues output { display:grid; place-items:center; min-width:0; aspect-ratio:1; }
.cell { position:relative; border:3px dashed #b9d8e8; border-radius:16px; background:white; transition:border-color .16s ease,background .16s ease,transform .16s ease; }.cell.is-correct { border-color:var(--green); background:#f0f9ea; }.cell.is-correct .token { border-color:var(--green); color:var(--green); background:white; }
.cell.is-target { border-color:var(--blue); background:#edf9ff; transform:scale(1.04); }
.operator { color:var(--blue); font-size:clamp(1.5rem,4vw,2.5rem); font-weight:900; }.operator.is-spacer { visibility:hidden; }
.row-clues output,.column-clues output { color:var(--green); font-size:clamp(1.35rem,4vw,2.15rem); font-weight:900; }.row-clues output { aspect-ratio:auto; min-height:54px; border-left:3px solid var(--green); }.column-clues output { aspect-ratio:auto; min-height:31px; padding-top:3px; border-top:3px solid var(--green); }.board.is-solved { border-color:var(--green); box-shadow:0 0 0 6px rgba(57,154,25,.12),var(--shadow); }
.board-note { margin:8px 0 0; color:#56718c; font-size:.88rem; }
.control-panel { padding:24px; border-radius:24px; background:white; box-shadow:var(--shadow); }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:15px; }.section-heading span { color:var(--green); font-size:.72rem; font-weight:800; }
.token-tray { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.token { display:grid; place-items:center; justify-self:center; width:60%; aspect-ratio:1; border:3px solid var(--coral); border-radius:50%; color:#ab1635; background:#fffafa; font-size:clamp(1rem,2.4vw,1.5rem); font-weight:900; cursor:grab; touch-action:none; user-select:none; transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease; }.token:hover { transform:translateY(-3px); box-shadow:0 7px 0 rgba(219,82,117,.16); }.token:active,.token.is-dragging { cursor:grabbing; transform:scale(.96); box-shadow:none; }.token.is-selected { outline:4px solid var(--yellow); outline-offset:2px; }.token.is-dragging { position:fixed; z-index:10; width:64px; pointer-events:none; opacity:.92; }
.actions { display:grid; gap:10px; margin:24px 0; }.button { min-height:45px; border:0; border-radius:10px; padding:10px 14px; font-weight:900; cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }.button:hover { transform:translateY(-2px); }.button:active { transform:translateY(1px); box-shadow:none; }.button-primary { color:var(--ink); background:var(--yellow); box-shadow:0 4px 0 #d8c708; }.button-secondary { color:white; background:var(--blue); box-shadow:0 4px 0 #09478d; }.button-text { color:var(--green); background:transparent; }
.rules { padding-top:20px; border-top:1px solid var(--line); }.rules p { margin:8px 0 0; color:#56718c; font-size:.84rem; line-height:1.5; }.status { margin:22px 0 0; min-height:1.5em; color:var(--green); font-weight:800; text-align:center; }.status.is-success { padding:12px 16px; border:2px solid var(--green); border-radius:12px; background:#eff9e9; font-size:1.05rem; box-shadow:0 4px 0 rgba(57,154,25,.15); }
@media (max-width:720px) { .game-shell { width:min(100% - 24px,560px); padding:18px 0 24px; }.game-header { align-items:start; margin-bottom:14px; }.game-banner { width:min(240px,42vw); }.game-layout { grid-template-columns:1fr; gap:14px; }.puzzle-area { width:90%; margin:auto; }.control-panel { padding:20px; }.row-clues { gap:5px; } }
@media (max-width:420px) { .game-header { gap:8px; }.game-banner { width:130px; }.header-meta { gap:5px; }.date-card { min-width:0; width:88px; padding:6px 4px; border-radius:9px; }.date-card span { font-size:.5rem; }.date-card strong { font-size:.66rem; }.board-wrap { gap:5px 8px; }.board { gap:4px; padding:8px; border-width:3px; }.column-clues { gap:2px 4px; padding:0 8px; }.column-clues output { min-height:26px; }.board-note { font-size:.8rem; } }

.daily-app-promo { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; width:min(1120px,calc(100% - 32px)); margin:22px auto 48px; padding:28px 30px; border-left:6px solid #db5275; background:#0b2451; color:white; font-family:ui-rounded,"Avenir Next",Avenir,"Nunito Sans",sans-serif; box-shadow:0 18px 45px rgba(11,36,81,.14); }
.daily-app-promo h2 { margin:0 0 8px; color:white; font-size:clamp(1.45rem,3vw,2.1rem); line-height:1.1; }
.daily-app-promo p { max-width:720px; margin:0; color:#dce7f1; line-height:1.55; }
.daily-app-promo .promo-eyebrow { margin:0 0 5px; color:#ffeb16; font-size:.72rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.promo-link { display:inline-block; padding:12px 16px; border-radius:8px; background:#ffeb16; color:#0b2451; font-weight:900; text-decoration:none; white-space:nowrap; box-shadow:0 4px 0 #c9b900; }
.promo-link:hover { transform:translateY(-2px); }
.promo-link:active { transform:translateY(1px); box-shadow:none; }
@media (max-width:720px) { .daily-app-promo { grid-template-columns:1fr; gap:18px; width:min(100% - 24px,560px); margin-top:12px; padding:24px; }.promo-link { justify-self:start; white-space:normal; } }