.breaker-game { --br-ink:#203840; --br-muted:#50666a; color:var(--br-ink); font-family:inherit; }
.breaker-game * { box-sizing:border-box; }
.breaker-game .br-shell { position:relative; max-width:1080px; margin:0 auto; padding:clamp(12px,2vw,22px); border:1px solid #c2cec4; border-radius:17px; background:#f7f4e8; }
.breaker-game p { color:var(--br-ink); }
.breaker-game .br-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.breaker-game .br-heading h2 { margin:0; font-size:clamp(1.45rem,2.5vw,2rem); }
.breaker-game .br-kicker { margin:0 0 3px; color:#456a62; font-size:.74rem; font-weight:850; letter-spacing:.1em; }
.breaker-game .br-memory { margin:0; color:var(--br-muted); font-size:.84rem; }
.breaker-game .br-intro { margin:7px 0 10px; font-size:.94rem; }
.breaker-game .br-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.breaker-game .br-tiers, .breaker-game .br-steering, .breaker-game .br-actions { display:flex; flex-wrap:wrap; gap:7px; }
.breaker-game button { min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #839b94; border-radius:9px; background:#fffdf6; color:#203a3d; font:inherit; font-weight:650; cursor:pointer; }
.breaker-game button:hover:not(:disabled) { background:#e8f0e4; }
.breaker-game button:focus-visible, .breaker-game canvas:focus-visible { outline:3px solid #18756a; outline-offset:3px; }
.breaker-game button:disabled { opacity:.55; cursor:not-allowed; }
.breaker-game .br-tiers [aria-pressed="true"] { border-color:#38766c; background:#d9ebdf; box-shadow:inset 0 0 0 1px #38766c; }
.breaker-game .br-readouts { display:flex; flex:1; flex-wrap:wrap; gap:7px 14px; color:var(--br-muted); font-size:.86rem; }
.breaker-game .br-readouts strong { color:var(--br-ink); font-size:1rem; }
.breaker-game .br-rewards { min-height:1.15em; margin:5px 0 8px; color:#385951; font-size:.82rem; }
.breaker-game canvas { display:block; width:min(100%, 640px); height:auto; margin:0 auto; aspect-ratio:32 / 21; border:3px solid #bd9b62; border-radius:10px; background:#183246; touch-action:none; }
.breaker-game .br-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.breaker-game .br-steering button { display:flex; align-items:center; justify-content:center; flex-direction:column; min-width:78px; background:#36575c; color:#fff3d1; font:700 1.15rem/1 system-ui,sans-serif; touch-action:none; user-select:none; }
.breaker-game .br-steering button small { margin-top:3px; font:600 .65rem/1.1 system-ui,sans-serif; }
.breaker-game .br-steering button:hover:not(:disabled) { background:#26464c; }
.breaker-game .br-actions { justify-content:flex-end; }
.breaker-game .br-actions button:first-child { border-color:#c49b59; background:#efc77d; color:#293f43; }
.breaker-game .br-status { min-height:1.5em; margin:8px 0 0; padding:8px 11px; border-left:4px solid #9baf9e; border-radius:3px; background:#edf2e9; text-align:center; font-weight:700; }
.breaker-game .br-help { margin:6px auto 0; color:var(--br-muted); text-align:center; font-size:.78rem; line-height:1.4; }
.breaker-game .br-confirm { position:absolute; z-index:5; inset:0; display:grid; place-items:center; padding:18px; border-radius:17px; background:rgba(17,35,37,.6); }
.breaker-game .br-confirm[hidden] { display:none; }
.breaker-game .br-confirm section { width:min(100%,430px); padding:22px; border:1px solid #a7b6a6; border-radius:14px; background:#fffdf6; box-shadow:0 12px 38px #0004; }
.breaker-game .br-confirm h3 { margin:0 0 8px; }
.breaker-game .br-confirm p { color:#293f43; }
.breaker-game .br-confirm section > div { display:flex; flex-wrap:wrap; gap:8px; }
@media(max-width:740px) { .breaker-game .br-heading { align-items:flex-start; flex-direction:column; gap:3px; } .breaker-game .br-controls { flex-direction:column; } .breaker-game .br-actions { justify-content:center; } }
@media(max-width:450px) { .breaker-game .br-shell { padding:9px; } .breaker-game .br-tiers { width:100%; } .breaker-game .br-tiers button { flex:1; padding:7px 8px; } .breaker-game .br-readouts { font-size:.78rem; } .breaker-game .br-steering button { min-width:65px; } }
@media(min-width:761px) and (max-height:760px) {
  .breaker-game .br-shell { padding:8px 12px; border-radius:12px; }
  .breaker-game .br-heading { justify-content:flex-end; min-height:1em; }
  .breaker-game .br-heading > div { display:none; }
  .breaker-game .br-memory { font-size:.74rem; line-height:1.1; }
  .breaker-game .br-intro { display:none; }
  .breaker-game .br-toolbar { gap:5px 12px; }
  .breaker-game .br-tiers, .breaker-game .br-steering, .breaker-game .br-actions { gap:5px; }
  .breaker-game button { min-height:38px; padding:6px 10px; }
  .breaker-game .br-readouts { gap:4px 11px; font-size:.8rem; }
  .breaker-game .br-readouts strong { font-size:.9rem; }
  .breaker-game .br-rewards { min-height:1em; margin:3px 0 5px; font-size:.75rem; line-height:1.1; }
  .breaker-game canvas { width:auto; max-width:100%; height:min(320px, calc(100vh - 390px)); }
  .breaker-game .br-controls { margin-top:5px; gap:6px; }
  .breaker-game .br-steering button { min-width:68px; }
  .breaker-game .br-steering button small { font-size:.61rem; }
  .breaker-game .br-status { min-height:1.2em; margin-top:5px; padding:5px 8px; }
  .breaker-game .br-help { margin-top:3px; font-size:.7rem; line-height:1.2; }
}
@media(prefers-reduced-motion:reduce) { .breaker-game *, .breaker-game *::before, .breaker-game *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }