/* Breaker Finding Game */
.g-hero{background:var(--char);color:#fff;padding:26px 0 22px;text-align:center}
.g-hero h1{color:#fff;font-size:clamp(1.8rem,7vw,3rem);margin:.15em 0 .3em}
.g-hero p{color:#dfe3e6;max-width:560px;margin:0 auto;font-size:1rem}
.g-hero .eyebrow{color:#FFE600}
.g-play{background:var(--cream);padding:14px 0 28px}
.g-play .wrap{width:min(1120px,100% - 20px)}
.hud{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:.9rem;color:var(--char);margin:0 0 10px;padding:0 4px}
.hud b{font-weight:800;font-variant-numeric:tabular-nums}
.hud-new{margin-left:auto;font:inherit;font-weight:700;font-size:.85rem;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--char);cursor:pointer}
.g-grid{display:grid;gap:12px}
.g-left{display:grid;gap:12px;min-width:0}
.g-right{display:grid;gap:12px;align-content:start;min-width:0}
.plan-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 8px 6px}
#plan{display:block;width:100%;height:auto;touch-action:manipulation}
.plan-hint{margin:2px 4px 0;font-size:.8rem;color:var(--muted)}
.i-out,.i-sw{display:inline-block;width:9px;height:13px;border:1.5px solid var(--char);border-radius:2px;vertical-align:-2px;background:#fff}
.i-sw{background:linear-gradient(var(--char),var(--char)) center/2px 6px no-repeat #fff}
.tgt{cursor:pointer}
.tgt:focus{outline:none}
.tgt:focus-visible .ring,.tgt.sel .ring{stroke:#FF0000;stroke-width:2.5;opacity:1}
.ring{fill:none;stroke:#FF0000;opacity:0}
.tgt.sel .ring{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{stroke-width:4;opacity:.55}}
.station{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:start}
#st-svg{width:118px;height:auto;display:block}
.st-side{min-width:0}
.st-title{font-size:1rem;margin:2px 0 4px;line-height:1.25}
.st-msg{font-size:.88rem;line-height:1.45;margin:0 0 8px;color:var(--ink)}
.st-msg .good{color:#0a7a3a;font-weight:700}
.st-msg .bad{color:#c40000;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:6px}
.gbtn{font:inherit;font-size:.85rem;font-weight:700;border:0;border-radius:999px;padding:9px 13px;background:var(--char);color:#fff;cursor:pointer;line-height:1.2;text-align:left}
.gbtn.alt{background:#fff;color:var(--char);border:1.5px solid var(--char)}
.gbtn.lbl{background:#eef6fb;color:var(--char);border:1.5px solid #9fb6c6;border-radius:8px}
.gbtn.flag{background:#fff6f6;color:#b00000;border:1.5px solid #ffb3b3;border-radius:8px}
.gbtn:disabled{opacity:.45;cursor:default}
.gbtn.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.panel{background:#5c656d;border-radius:14px;padding:10px 10px 8px;box-shadow:inset 0 0 0 3px #4b535a,0 8px 22px rgba(41,50,59,.18)}
.panel-head{display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin:0 2px 8px}
.lamp-pill{font-size:.72rem;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:#3a4148;color:#cfd5da}
.lamp-pill.lit{background:#FFE600;color:#29323B;box-shadow:0 0 12px rgba(255,230,0,.7)}
.lamp-pill.dark{background:#1d2227;color:#fff}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;background:#3b4249;border-radius:8px;padding:9px 7px;position:relative}
.panel-grid::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:4px;margin-left:-2px;background:#2a3036;border-radius:2px}
.brk{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:inherit;min-width:0}
.brk.even{flex-direction:row-reverse}
.lbl-badge{flex:0 0 34px;height:30px;display:grid;place-items:center;background:#FF0000;color:#FFE600;font-family:"Times New Roman",Times,"Liberation Serif",serif;font-size:1.35rem;line-height:1;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.35);-webkit-text-stroke:.4px #FFE600}
.brk-body{position:relative;flex:1 1 auto;min-width:0;height:38px;background:#1f2327;border-radius:5px;box-shadow:inset 0 0 0 2px #121417}
.handle{position:absolute;top:5px;height:28px;width:52%;border-radius:4px;background:linear-gradient(#f4f4f2,#cfcfcb);color:#29323B;font-weight:800;font-size:.8rem;display:grid;place-items:center;transition:left .12s,right .12s;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.st{position:absolute;top:0;bottom:0;display:grid;place-items:center;width:44%;font-size:.66rem;font-weight:800;letter-spacing:.06em;color:#8fd19e}
.brk.odd.on .handle{right:4px}.brk.odd.on .st{left:0}
.brk.odd.off .handle{left:4px}.brk.odd.off .st{right:0}
.brk.even.on .handle{left:4px}.brk.even.on .st{right:0}
.brk.even.off .handle{right:4px}.brk.even.off .st{left:0}
.brk.off .st{color:#ff6b6b}
.brk.off .brk-body{box-shadow:inset 0 0 0 2px #c40000}
.brk.hit .brk-body{box-shadow:inset 0 0 0 2px #FFE600,0 0 10px rgba(255,230,0,.7)}
.brk:focus-visible{outline:3px solid #FFE600;outline-offset:2px;border-radius:6px}
.panel-foot{margin:7px 2px 0;font-size:.72rem;color:#e3e7ea;line-height:1.35}
.tipbox{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;background:#fffbe6;border:2px solid #ffd84d;border-radius:14px;padding:12px 14px;font-size:.9rem;line-height:1.45;box-shadow:0 10px 30px rgba(41,50,59,.35);max-width:440px;margin:0 auto}
.tipbox p{margin:0 0 8px}
.tipbox[hidden]{display:none}
.tipbox b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#a07800;margin-bottom:3px}
.g-end{background:#fff;padding:40px 0}
.end-stats{color:var(--muted);font-weight:600}
.tally-wrap{overflow-x:auto;margin:16px 0 26px;border:1px solid var(--line);border-radius:12px}
.tally{width:100%;border-collapse:collapse;font-size:.8rem;min-width:0}
.tally th{background:var(--char);color:#fff;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:8px 5px;text-align:left}
.tally td{padding:7px 5px;border-top:1px solid var(--line);vertical-align:top}
.tally td:first-child{width:44px}.tally td:nth-child(2),.tally td:nth-child(3),.tally td:nth-child(4){white-space:nowrap}
.tally .lbl-badge{width:32px;height:28px;font-size:1.2rem}
.tally .marks{letter-spacing:2px;font-weight:800}
.tally .muted{color:#9aa1a8}
.tally .flagnote{display:block;color:#c40000;font-weight:700;font-size:.78rem;margin-top:2px}
.real{background:var(--cream);border-radius:18px;padding:22px 18px;text-align:center}
.real p{color:var(--muted)}
.linkbtn{background:none;border:0;font:inherit;font-weight:700;color:var(--coral-d);text-decoration:underline;cursor:pointer;margin-top:12px}
.g-rules{background:#fff;padding:40px 0 48px}
.rules{list-style:none;padding:0;margin:22px auto 0;max-width:760px;display:grid;gap:10px;counter-reset:r}
.rules li{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px 14px 14px 52px;position:relative;counter-increment:r}
.rules li::before{content:counter(r);position:absolute;left:12px;top:13px;width:30px;height:27px;display:grid;place-items:center;background:#FF0000;color:#FFE600;font-family:"Times New Roman",Times,serif;font-size:1.2rem;border-radius:5px}
.rules li.got{border-color:#9bd3ad;background:#f1fbf4}
.rules li.got strong::after{content:"  ✓ learned";color:#0a7a3a;font-size:.8rem}
.rules strong{display:block}
.rules span{display:block;color:var(--muted);font-size:.92rem;margin-top:2px}
.safety{max-width:760px;margin:20px auto;padding:14px 16px;border-radius:12px;background:#fff6f6;border:1px solid #ffd0d0;font-size:.9rem}
@media (min-width:820px){
  .g-play{padding:22px 0 40px}
  .g-grid{grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
  .station{grid-template-columns:150px 1fr;padding:14px}
  #st-svg{width:150px}
  .st-msg{font-size:.95rem}
  .g-right{position:sticky;top:76px}
}
@media (prefers-reduced-motion:reduce){.tgt.sel .ring{animation:none}.gbtn.shake{animation:none}}
.station.nudge{animation:shake .35s}

/* Hailey Oct 19 3:19 AM: game in the book's branding (book.css loaded first; values from the OUTLET IDs book) */
.g-hero{background:var(--bk-red) var(--pattern-red) center top/1800px auto repeat!important;border-bottom:5px solid var(--bk-ink);box-shadow:inset 0 -9px 0 var(--bk-pink);padding:30px 0 34px!important}
.g-hero h1{font-family:var(--serif)!important;font-weight:400!important;color:#fff!important;text-shadow:2px 2px 0 var(--bk-red-deep)}
.g-hero p{color:#fff!important;font-family:var(--sans)}
.g-hero .eyebrow{display:inline-block;font-family:var(--pill)!important;font-weight:400;letter-spacing:.08em;text-transform:uppercase;background:var(--bk-yellow);color:#fff!important;border:2px solid var(--bk-ink);box-shadow:2px 2px 0 var(--bk-ink);border-radius:999px;padding:4px 14px 2px}
.g-play{background:var(--bk-pink) var(--pattern) center top/1800px auto repeat!important}
.hud{background:#fff;border:2px solid var(--bk-pink-2);border-radius:10px;padding:8px 10px!important;font-family:var(--sans);color:var(--bk-ink)!important}
.hud b{color:var(--bk-red-ink)}
.hud-new,.gbtn{font-family:var(--pill)!important;font-weight:400!important;letter-spacing:.06em;text-transform:uppercase;font-size:.95rem!important;background:var(--bk-red)!important;color:#fff!important;border:2px solid var(--bk-ink)!important;box-shadow:2px 2px 0 var(--bk-ink);border-radius:999px!important;padding:7px 14px 5px!important}
.gbtn.alt{background:#fff!important;color:var(--bk-ink)!important}
.gbtn.lbl{background:var(--bk-yellow)!important;color:var(--bk-ink)!important;border-radius:8px!important}
.gbtn.flag{background:var(--bk-pink)!important;color:var(--bk-red-ink)!important;border-radius:8px!important}
.plan-card,.station{background:#fff!important;border:2px solid var(--bk-pink-2)!important;border-radius:10px!important;box-shadow:3px 3px 0 var(--bk-ink)}
.st-title{font-family:var(--sans);font-weight:800;color:var(--bk-red-ink)}
.st-msg{font-family:var(--sans);color:var(--bk-ink)}
.plan-hint{font-family:var(--sans);color:var(--bk-muted)}
.panel{box-shadow:inset 0 0 0 3px #4b535a,3px 3px 0 var(--bk-ink)!important;border:2px solid var(--bk-ink)}
.panel-head>span:first-child{font-family:var(--pill);font-weight:400;font-size:1rem;letter-spacing:.08em}
.lbl-badge{background:var(--bk-red)!important;color:var(--bk-yellow)!important;font-family:var(--serif)!important;-webkit-text-stroke:0!important}
.tipbox{background:var(--bk-yellow)!important;border:2px solid var(--bk-ink)!important;box-shadow:4px 4px 0 var(--bk-ink)!important;font-family:var(--sans)}
.tipbox b{color:var(--bk-red-ink)!important;font-family:var(--pill);font-weight:400;font-size:.9rem!important}
.g-end,.g-rules{background:rgba(255,0,0,.12)!important}
.g-end>.wrap,.g-rules>.wrap{background:#fff;border-radius:14px;padding:26px 20px;box-shadow:0 0 0 2px var(--bk-pink-2)}
.g-end h2,.g-rules h2{font-family:var(--serif);font-weight:400;color:var(--bk-red-ink)}
.tally-wrap{border:2px solid var(--bk-pink-2)!important}
.tally th{background:var(--bk-red)!important;font-family:var(--sans)}
.real{background:var(--bk-pink)!important;border:2px solid var(--bk-pink-2)}
.rules li{background:var(--bk-pink)!important;border:2px solid var(--bk-pink-2)!important;border-radius:10px!important;font-family:var(--sans)}
.rules li::before{background:var(--bk-red)!important;color:var(--bk-yellow)!important;font-family:var(--serif)!important}
.rules strong{color:var(--bk-red-ink)}
.safety{background:#fff!important;border:2px solid var(--bk-pink-2)!important;border-left:6px solid var(--bk-red)!important}

.station h2.st-title{background:var(--bk-red)!important;color:#fff!important;font-family:var(--sans)!important;font-weight:800!important;font-size:1rem!important;text-align:left!important;padding:5px 10px!important;margin:0 0 6px!important;border-radius:6px;box-shadow:0 3px 0 var(--bk-pink-2)!important;letter-spacing:0!important}
.station h2.st-title::before,.station h2.st-title::after{display:none!important}
.g-end>.wrap,.g-rules>.wrap{overflow:hidden}
.g-end h2,.g-rules h2{color:#fff!important}

.g-hero .eyebrow{color:#fff!important}

/* Hailey Oct 19 3:22 AM: house and breaker panel side by side (house first / on top on phones), test station below */
.g-left,.g-right{display:contents!important}
.g-grid{display:grid!important;grid-template-columns:1fr;grid-template-areas:"plan" "panel" "station";gap:12px;align-items:start}
.plan-card{grid-area:plan}
.panel{grid-area:panel}
.station{grid-area:station}
@media (min-width:820px){
  .g-grid{grid-template-columns:1.25fr 1fr!important;grid-template-areas:"plan panel" "station station";gap:18px}
  .panel{position:sticky;top:76px;align-self:start}
}
/* Hailey: numbers like the book's labels (lining Times numerals, not Georgia's old-style) */
.lbl-badge,.rules li::before{font-family:"Times New Roman",Times,"Liberation Serif",serif!important;font-variant-numeric:lining-nums;-webkit-text-stroke:.4px var(--bk-yellow)!important}

/* Hailey Oct 19 3:25 AM: desktop = house centered on top, lamp station and breaker panel side by side below */
@media (min-width:820px){
  .g-grid{grid-template-columns:1fr 1fr!important;grid-template-areas:"plan plan" "station panel"!important;gap:18px}
  .plan-card{justify-self:center;width:100%;max-width:760px}
  .panel{position:static!important;align-self:stretch}
  .station{align-self:stretch}
}

/* Hailey Oct 19 1:07 PM: quick success / error popups (compact, bottom, tap to close) */
.toast{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:41;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--bk-ink,#0C0F13);border-left-width:8px;border-radius:12px;padding:8px 12px;box-shadow:3px 3px 0 var(--bk-ink,#0C0F13);font-family:var(--sans,sans-serif);font-size:.86rem;line-height:1.35;color:var(--bk-ink,#0C0F13);cursor:pointer;opacity:0;transform:translateY(12px);transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:none}
.toast[hidden]{display:none}
.toast .t-ic{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;color:#fff}
.toast .t-tx b{display:block;font-weight:800;font-size:.95rem}
.toast.good{border-left-color:#0a7a3a;background:#effaf2}
.toast.good .t-ic{background:#0a7a3a}
.toast.good b{color:#0a7a3a}
.toast.bad{border-left-color:#c40000;background:#fff1f1}
.toast.bad .t-ic{background:#c40000}
.toast.bad b{color:#c40000}
.toast.miss{border-left-color:#8a8f94;background:#fff}
.toast.miss .t-ic{background:#8a8f94}
.toast.miss b{color:var(--bk-ink,#0C0F13)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* QA Oct 19: on computers the quick popup sat on top of breaker 7; keep it in the bottom left corner, clear of the panel */
@media (min-width:820px){.toast{left:16px;right:auto;margin:0;width:calc(100% - 32px);max-width:440px}}

/* QA Oct 19: when the game ends and scrolls to the Tally Sheet, keep its top clear of the sticky header */
.g-end{scroll-margin-top:64px}

/* Hailey Oct 19 7:53 PM: popups at the top middle, stay until replaced or OK tapped */
.toast{top:calc(78px + env(safe-area-inset-top))!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:calc(100% - 24px)!important;max-width:460px!important;margin:0!important;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.toast .t-tx{flex:1 1 auto}
.toast .t-ok{flex:0 0 auto;margin-left:6px;padding:7px 14px;border:2px solid var(--bk-ink,#0C0F13);border-radius:8px;background:#fff;font-weight:800;font-size:.9rem;cursor:pointer;color:var(--bk-ink,#0C0F13)}
.toast .t-ok:hover{background:#FFE600}