.breaker-page { min-height:100vh; background:radial-gradient(circle at 12% 10%,#ff5d8514,transparent 26%),radial-gradient(circle at 88% 32%,#ffd16610,transparent 28%),var(--bg); }
.breaker-shell { width:min(1120px,calc(100% - 28px)); margin:0 auto; padding:18px 0 70px; }
/* Barcode Breaker leaves useful gutters on standard desktop screens. Its rails
 * start at 1440px, fit only inside measured free space, and remain entirely
 * absent from tablet and phone layouts. */
@media (min-width:1440px) {
  body.breaker-page .breaker-ad-rail {
    display:block;
    position:fixed;
    top:118px;
    z-index:5;
    width:clamp(120px,calc((100vw - 1120px)/2 - 32px),300px);
    min-height:250px;
  }
}
.breaker-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.58fr); align-items:end; gap:18px; margin-bottom:10px; }
.breaker-heading h1 { margin:3px 0 0; font-size:clamp(1.65rem,4vw,2.45rem); }
.breaker-heading p { margin:3px 0 0; color:var(--muted); }
.breaker-heading .hunt-kicker span { margin-left:5px; padding:2px 6px; border:1px solid #ff7b9877; border-radius:999px; color:#ff9bae; font-size:.52rem; }
.breaker-notice { padding:25px; border:1px solid #ff657e66; border-radius:18px; background:#2c1720; text-align:center; }
.breaker-board { overflow:hidden; border:1px solid #39445e; border-radius:24px; background:linear-gradient(145deg,#11192b,#0b1120); box-shadow:0 24px 70px #0005; }
.breaker-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid #2b354c; }
.breaker-topline > div:first-child span,.breaker-topline > div:first-child b { display:block; }
.breaker-topline span { color:#ff8ba4; font-size:.61rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.breaker-topline b { font-size:.85rem; }
.breaker-top-actions { display:flex; align-items:center; gap:14px; }
.breaker-live-timer { display:flex; align-items:baseline; gap:7px; padding:6px 10px; border:1px solid #40506d; border-radius:10px; background:#151e31; }
.breaker-live-timer b { min-width:42px; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.breaker-legend { display:flex; align-items:center; gap:6px; color:#aeb8d2; font-size:.65rem; font-weight:900; }
.breaker-legend span { width:11px; height:11px; margin-left:4px; border-radius:3px; }
.breaker-legend .exact { background:#2cb96b; }
.breaker-legend .present { background:#d4a72c; }
.breaker-stage { display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; padding:14px; }
.breaker-product { min-width:0; padding:12px; border:1px solid #33405a; border-radius:18px; background:#151d30; }
.breaker-product-image { position:relative; display:grid; aspect-ratio:1; place-items:center; overflow:hidden; margin-bottom:8px; border-radius:14px; background:#fff; }
.breaker-product-image img { width:100%; height:100%; padding:14px; object-fit:contain; filter:blur(13px) grayscale(.7); opacity:.68; transform:scale(1.08); transition:filter .55s ease,opacity .55s ease,transform .55s ease; }
.breaker-lock { position:absolute; display:grid; width:64px; height:64px; place-items:center; border:3px solid #151d30; border-radius:22px; background:#ff5d85; color:#fff; font-family:var(--font-display); font-size:2.2rem; box-shadow:0 12px 25px #0005; }
.breaker-product.revealed { border-color:#55e08a88; background:#123124; }
.breaker-product.revealed img { filter:none; opacity:1; transform:scale(1); }
.breaker-product.revealed .breaker-lock { opacity:0; transform:scale(.7); pointer-events:none; }
.breaker-product h2 { margin:2px 0; font-size:1.1rem; line-height:1.1; }
.breaker-product p { margin:3px 0 0; color:#aeb8d2; font-size:.74rem; }
.breaker-commerce { margin-top:10px; padding:9px; border:1px solid #55e08a55; border-radius:12px; background:#081d14aa; }
.breaker-commerce[hidden] { display:none; }
.breaker-commerce > b { display:block; margin-bottom:6px; color:#d9ffe7; font-size:.72rem; }
.breaker-commerce > small { display:block; margin-bottom:6px; color:#aeb8d2; font-size:.54rem; line-height:1.3; }
.breaker-buy-links { display:flex; flex-wrap:wrap; gap:6px; }
.breaker-buy-links a { padding:7px 9px; border:1px solid #55e08a88; border-radius:9px; background:#1d5135; color:#fff; font-size:.66rem; font-weight:900; text-decoration:none; }
.breaker-buy-links a:hover,.breaker-buy-links a:focus-visible { border-color:#8af4b1; background:#287049; }
.breaker-console { min-width:0; }
.breaker-playgrid { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:stretch; gap:9px; }
.breaker-live-code { display:flex; min-width:0; flex-direction:column; }
.barcode-canvas { display:flex; height:226px; align-items:stretch; overflow:hidden; padding:12px 12px 6px; border:3px solid #fff; border-radius:15px; background:#fff; box-shadow:0 13px 32px #0005; }
.barcode-canvas svg { display:block; width:100%; height:100%; margin:0 auto; }
.barcode-caption { margin:5px 3px 8px; color:#aeb8d2; font-size:.68rem; line-height:1.35; }
.barcode-caption b { color:#ff8ba4; }
.breaker-guess-panel { grid-column:1/-1; padding:10px; border:1px solid #3b4660; border-radius:16px; background:#10182a; }
.breaker-entry-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:2px 2px 7px; }
.breaker-entry-head b { color:#ff9bae; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; }
.breaker-entry-head span { color:#aeb8d2; font-size:.66rem; }
.digit-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:min(390px,100%); margin:0 auto; }
.digit-slot { position:relative; display:grid; min-height:64px; place-content:center; gap:3px; padding:5px; border:2px solid #48536d; border-radius:13px; background:#171f32; color:#fff; text-align:center; box-shadow:none; }
.digit-slot span { min-height:1em; font-family:var(--font-display); font-size:2rem; font-weight:900; line-height:1; }
.digit-slot small { min-height:.8rem; color:#aeb8d2; font-size:.54rem; font-weight:900; letter-spacing:.05em; line-height:1; text-transform:uppercase; }
.digit-slot.filled { border-color:#7b88a6; }
.digit-slot.selected { border-color:#ff6485; background:#35192a; box-shadow:0 0 0 3px #ff5d8529,0 10px 25px #0003; transform:translateY(-1px); }
.digit-slot.selected::before { content:'NEXT'; position:absolute; top:-9px; left:50%; padding:2px 6px; border-radius:999px; background:#ff5d85; color:#fff; font-size:.46rem; font-weight:1000; letter-spacing:.08em; transform:translateX(-50%); }
.digit-slot.exact { border-color:#55e08a; background:#17663d; box-shadow:inset 0 0 0 1px #76efa022,0 8px 22px #071a1055; }
.digit-slot.exact::after { content:'✓'; position:absolute; top:5px; right:6px; display:grid; width:17px; height:17px; place-items:center; border-radius:50%; background:#72efa2; color:#0d3a23; font-size:.66rem; font-weight:1000; }
.digit-slot.exact small { color:#b8f7cf; }
.digit-slot.present { border-color:#ffd166; background:#6d5218; }
.digit-slot.present small { color:#ffe6a1; }
.digit-slot.absent { border-color:#5a657d; background:#242b3c; color:#d3d9e8; }
.digit-slot.absent small { color:#9da7bd; }
.digit-keypad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; width:min(500px,100%); margin:7px auto 0; }
.digit-keypad button { min-height:42px; padding:4px; border:1px solid #46516c; border-radius:10px; background:#1b253b; color:#fff; font-family:var(--font-display); font-size:1.12rem; font-weight:900; box-shadow:none; }
.digit-keypad button.exact { border-color:#49db87; background:#19804a; }
.digit-keypad button.present { border-color:#ffd166; background:#967019; }
.digit-keypad button.absent { opacity:.45; }
.digit-keypad button:hover:not(:disabled),.digit-keypad button:focus-visible { border-color:#ff6b8a; background:#3b1c30; transform:translateY(-1px); }
.digit-slot:disabled,.digit-keypad button:disabled { opacity:.75; }
.digit-slot.exact:disabled { opacity:1; cursor:not-allowed; }
.breaker-hint { grid-column:1/-1; min-height:36px; margin:0; padding:7px 10px; border:1px solid #ffd16655; border-radius:11px; background:#ffd1660d; color:#ffe3a0; font-size:.73rem; line-height:1.3; }
.breaker-submit { grid-column:1/-1; width:100%; background:linear-gradient(120deg,#ff9346,#ff4f83); box-shadow:0 12px 26px #ff5d8533; }
.breaker-submit:disabled { opacity:.6; box-shadow:none; }
.breaker-results-button { grid-column:1/-1; width:100%; background:linear-gradient(120deg,#ff9346,#ff4f83); color:#fff; box-shadow:0 12px 26px #ff5d8533; }
.breaker-completion-summary { grid-column:1/-1; padding:10px; border:1px solid #55e08a66; border-radius:14px; background:linear-gradient(135deg,#143427,#10192b 72%); box-shadow:inset 4px 0 0 #55e08a; }
.breaker-history-wrap { min-width:0; height:260px; overflow:auto; padding:10px; border:1px solid #3b4660; border-radius:15px; background:#0d1424; scrollbar-width:thin; scrollbar-color:#58647e transparent; }
.breaker-history-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.breaker-history-title b { color:#ff9bae; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; }
.breaker-history-title span { color:#aeb8d2; font-size:.62rem; }
.breaker-history { display:grid; gap:6px; }
.breaker-history-empty { padding:10px 0; font-size:.72rem; }
.guess-row { display:grid; grid-template-columns:20px repeat(4,minmax(0,1fr)); align-items:center; gap:5px; }
.guess-number { color:#8994ad; font-size:.65rem; font-weight:900; text-align:center; }
.guess-tile { display:grid; min-width:0; height:39px; place-items:center; border:1px solid #49546d; border-radius:9px; background:#20283a; color:#fff; font-family:var(--font-display); font-size:1.25rem; font-weight:900; animation:breaker-flip .38s ease both; }
.guess-row.empty .guess-tile { border-style:dashed; background:#151c2c; opacity:.58; animation:none; }
.guess-tile:nth-of-type(3) { animation-delay:.06s; }
.guess-tile:nth-of-type(4) { animation-delay:.12s; }
.guess-tile:nth-of-type(5) { animation-delay:.18s; }
.guess-tile.exact { border-color:#55e08a; background:#19804a; }
.guess-tile.present { border-color:#ffd166; background:#967019; }
.guess-tile.absent { color:#aab3c8; background:#252c3d; }
@keyframes breaker-flip { 0% { opacity:.25; transform:rotateX(78deg) scale(.94); } 100% { opacity:1; transform:none; } }
.barcode-school { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr); gap:18px; margin-top:18px; padding:18px; border:1px solid #33405a; border-radius:20px; background:#111827; }
.barcode-school h2 { margin:3px 0 4px; font-size:1.25rem; }
.barcode-school p { margin:0; color:#aeb8d2; font-size:.78rem; line-height:1.5; }
.barcode-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.barcode-facts article { padding:11px; border:1px solid #33405a; border-radius:13px; background:#151e31; }
.barcode-facts b,.barcode-facts span { display:block; }
.barcode-facts b { color:#ffd166; font-family:var(--font-display); font-size:1.35rem; }
.barcode-facts span { color:#c5cee2; font-size:.66rem; line-height:1.35; }
.breaker-gs1 { grid-column:1/-1; width:fit-content; padding:0; }

.breaker-result-scoreboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; text-align:left; }
.breaker-result-scoreboard article { position:relative; overflow:hidden; padding:12px 13px; border:1px solid #43516d; border-radius:14px; background:linear-gradient(145deg,#182238,#11192b); }
.breaker-result-scoreboard article::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:#8091b7; }
.breaker-result-scoreboard article.ahead { border-color:#55e08a88; background:linear-gradient(145deg,#153a29,#10271e); }
.breaker-result-scoreboard article.ahead::before { background:#55e08a; }
.breaker-result-scoreboard article.behind { border-color:#ffd16677; background:linear-gradient(145deg,#382d18,#251f14); }
.breaker-result-scoreboard article.behind::before { background:#ffd166; }
.breaker-result-scoreboard span,.breaker-result-scoreboard b,.breaker-result-scoreboard small { display:block; }
.breaker-result-scoreboard span { color:#aeb8d2; font-size:.61rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.breaker-result-scoreboard b { margin:2px 0 1px; color:#fff; font-family:var(--font-display); font-size:1.75rem; font-variant-numeric:tabular-nums; line-height:1; }
.breaker-result-scoreboard small { color:#c8d1e5; font-size:.66rem; font-weight:800; }
#breakerResultCompare { margin:8px 0 0; padding:8px 10px; border:1px solid #43516d; border-radius:10px; background:#0d1626aa; color:#d8e0ef; font-size:.7rem; line-height:1.35; text-align:center; }

@media (max-width:760px) {
  .breaker-shell { width:min(100% - 14px,1120px); padding-top:8px; }
  .breaker-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:7px; }
  .breaker-heading > div { min-width:0; }
  .breaker-heading h1 { font-size:clamp(1.15rem,5.2vw,1.5rem); line-height:1.05; }
  .breaker-heading p { display:none; }
  .breaker-top-actions { gap:7px; }
  .breaker-live-timer { padding:4px 7px; }
  .breaker-live-timer span { display:none; }
  .breaker-stage { grid-template-columns:1fr; gap:8px; padding:9px; }
  .breaker-product { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; column-gap:10px; padding:9px; }
  .breaker-product-image { grid-row:1/5; margin:0; }
  .breaker-lock { width:42px; height:42px; border-radius:14px; font-size:1.5rem; }
  .breaker-product h2 { font-size:.98rem; }
  .breaker-product p { font-size:.67rem; line-height:1.2; }
  .breaker-commerce { grid-column:2; margin-top:5px; padding:7px; }
  .breaker-playgrid { grid-template-columns:minmax(0,1.22fr) minmax(132px,.78fr); gap:6px; }
  .barcode-canvas { height:111px; padding:8px 8px 4px; border-width:2px; }
  .barcode-caption { margin:4px 2px 6px; font-size:.61rem; }
  .breaker-history-wrap { height:139px; padding:6px; border-radius:12px; }
  .breaker-history-title { margin-bottom:5px; }
  .breaker-history-title b,.breaker-history-title span { font-size:.52rem; }
  .breaker-history { gap:3px; }
  .guess-row { grid-template-columns:14px repeat(4,minmax(0,1fr)); gap:3px; }
  .guess-number { font-size:.5rem; }
  .guess-tile { height:20px; border-radius:5px; font-size:.72rem; }
  .breaker-hint { min-height:34px; padding:6px 8px; font-size:.69rem; }
  .barcode-school { grid-template-columns:1fr; padding:13px; }
  .barcode-facts { grid-template-columns:1fr; }
  .breaker-gs1 { grid-column:auto; }
}

@media (max-width:480px) {
  .breaker-topline { padding:8px 9px; }
  .breaker-legend { font-size:.55rem; }
  .breaker-guess-panel { padding:7px; }
  .breaker-entry-head { margin-bottom:5px; }
  .breaker-entry-head span { display:none; }
  .digit-controls { gap:6px; }
  .digit-slot { min-height:54px; padding:3px; }
  .digit-slot span { font-size:1.7rem; }
  .digit-slot small { font-size:.49rem; }
  .digit-keypad { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-top:5px; }
  .digit-keypad button { min-height:42px; font-size:1.05rem; }
  .breaker-playgrid { grid-template-columns:minmax(0,1.15fr) minmax(118px,.85fr); }
  .breaker-history-title span { display:none; }
  .breaker-result-scoreboard { gap:6px; }
  .breaker-result-scoreboard article { padding:10px; }
  .breaker-result-scoreboard b { font-size:1.45rem; }
}

@media (max-width:760px) and (max-height:720px) {
  .breaker-heading .hunt-kicker { display:none; }
  .breaker-heading h1 { font-size:1.05rem; }
  .breaker-topline { padding-block:6px; }
  .breaker-stage { gap:5px; padding:6px; }
  .breaker-product { grid-template-columns:52px minmax(0,1fr); column-gap:8px; padding:6px; }
  .breaker-product-image { width:52px; }
  .breaker-lock { width:32px; height:32px; border-width:2px; border-radius:11px; font-size:1.15rem; }
  .breaker-product p { display:none; }
  .barcode-caption { display:none; }
  .breaker-hint { min-height:30px; font-size:.63rem; }
}

@media (min-width:761px) and (max-height:820px) {
  .breaker-shell { padding-top:10px; }
  .breaker-heading { margin-bottom:7px; }
  .breaker-heading h1 { font-size:2rem; }
  .breaker-heading p { display:none; }
  .breaker-stage { gap:10px; padding:9px; }
  .breaker-product { align-self:start; }
  .breaker-guess-panel { padding:8px; }
  .digit-slot { min-height:56px; }
  .digit-keypad button { min-height:38px; }
  .breaker-hint { min-height:32px; padding-block:5px; }
}

@media (prefers-reduced-motion:reduce) {
  .breaker-product-image img { transition:none; }
  .guess-tile { animation:none; }
}