/* Scaffold: daily word puzzle (EnglishBridges) */
.sc-root{
  --sc-bg:#F2F5F9; --sc-panel:#FFFFFF; --sc-ink:#0F2238; --sc-muted:#536579; --sc-line:#CCD6E1;
  --sc-tile:#FFFFFF; --sc-tile-lock:#DCE5EF; --sc-steel:#032D5F; --sc-steel-ink:#FFFFFF;
  --sc-amber:#08602E; --sc-amber-soft:#DCEEE2; --sc-ok:#08602E; --sc-bad:#B23A28; --sc-kbd:#D5DEE8; --sc-kbd-ink:#0F2238;

}
@media (prefers-color-scheme:dark){
  .sc-root:not([data-theme="light"]){
    --sc-bg:#0B1520; --sc-panel:#13202E; --sc-ink:#E4ECF5; --sc-muted:#98A9BB; --sc-line:#2E4256;
    --sc-tile:#1A2A3A; --sc-tile-lock:#25394E; --sc-steel:#86AEE3; --sc-steel-ink:#0B1520;
    --sc-amber:#5BBF86; --sc-amber-soft:#173826; --sc-ok:#5BBF86; --sc-bad:#F07A66; --sc-kbd:#30455A; --sc-kbd-ink:#E4ECF5;
  }
}
.sc-root[data-theme="dark"]{
  --sc-bg:#0B1520; --sc-panel:#13202E; --sc-ink:#E4ECF5; --sc-muted:#98A9BB; --sc-line:#2E4256;
  --sc-tile:#1A2A3A; --sc-tile-lock:#25394E; --sc-steel:#86AEE3; --sc-steel-ink:#0B1520;
  --sc-amber:#5BBF86; --sc-amber-soft:#173826; --sc-ok:#5BBF86; --sc-bad:#F07A66; --sc-kbd:#30455A; --sc-kbd-ink:#E4ECF5;
}
.sc-root{box-sizing:border-box; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--sc-bg); color:var(--sc-ink);
  font-family:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:1rem; line-height:1.45; -webkit-tap-highlight-color:transparent}
.sc-root *,.sc-root *::before,.sc-root *::after{box-sizing:border-box}
.sc-root .wordmark,.sc-root h1,.sc-root h2.title{font-family:"Archivo Black","Arial Black","Segoe UI",system-ui,sans-serif; font-weight:400; letter-spacing:.01em}
.sc-root a{color:var(--sc-steel)}
.sc-root button{font:inherit; font-weight:700; border-radius:.45rem; cursor:pointer; touch-action:manipulation}
.sc-root button:disabled{opacity:.45; cursor:not-allowed}
.sc-root button:focus-visible,.sc-root a:focus-visible{outline:3px solid var(--sc-amber); outline-offset:2px}
.sc-root .btn{padding:.55rem .9rem; border:2px solid var(--sc-steel); background:var(--sc-steel); color:var(--sc-steel-ink); font-size:.95rem; text-decoration:none; display:inline-block}
.sc-root .btn.secondary{background:transparent; color:var(--sc-steel)}
.sc-root .linkbtn{background:none; border:0; padding:.3rem .2rem; color:var(--sc-steel); font-weight:700; text-decoration:underline; text-underline-offset:3px}
.sc-root [hidden]{display:none!important}
.sc-root .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- page mode (home, archive) ---------- */
.sc-root .page{max-width:34rem; margin:0 auto; padding:1rem 1rem 2.5rem}
.sc-root .brand{display:flex; align-items:center; gap:.6rem; margin:.25rem 0 .25rem; color:var(--sc-ink); text-decoration:none; width:max-content}
.sc-root .brand svg{width:2.6rem; height:2.6rem; flex:none}
.sc-root .brand .wordmark{font-size:2rem; margin:0; line-height:1}
.sc-root .brand.small{gap:.45rem; margin:0}
.sc-root .brand.small svg{width:2rem; height:2rem}
.sc-root .brand.small .wordmark{font-size:1.5rem}
.sc-root .tagline{color:var(--sc-muted); margin:0 0 1.25rem}
.sc-root .today{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 .6rem}
.sc-root .today h2{font-size:1.05rem; margin:0}
.sc-root .today span{color:var(--sc-muted); font-size:.9rem}
.sc-root .cards{display:grid; gap:.7rem}
.sc-root .card{display:flex; align-items:center; gap:.9rem; background:var(--sc-panel); border:1px solid var(--sc-line); border-radius:.7rem;
  padding:.85rem 1rem; text-decoration:none; color:inherit; position:relative; overflow:hidden}
.sc-root .card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:.4rem; background:repeating-linear-gradient(180deg,var(--sc-amber) 0 .6rem,var(--sc-steel) .6rem 1.2rem)}
.sc-root .card .lvl{flex:1; padding-left:.3rem}
.sc-root .card .lvl b{display:block; font-size:1.1rem}
.sc-root .card .lvl small{color:var(--sc-muted)}
.sc-root .card .status{text-align:right; font-weight:700; min-width:4.5rem}
.sc-root .card .status .num{font-size:1.6rem; line-height:1; font-variant-numeric:tabular-nums}
.sc-root .card .status small{display:block; font-weight:400; color:var(--sc-muted); font-size:.78rem}
.sc-root .card.none{opacity:.6}
.sc-root .statline{display:flex; gap:1.5rem; margin:1.2rem 0 .4rem; color:var(--sc-muted); font-size:.92rem}
.sc-root .statline b{color:var(--sc-ink); font-size:1.15rem}
.sc-root .navlinks{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem}
.sc-root .foot{color:var(--sc-muted); font-size:.8rem; margin-top:2rem}

.sc-root .arch-row{display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--sc-line)}
.sc-root .arch-row .d{flex:1; font-size:.95rem}
.sc-root .arch-row .d small{color:var(--sc-muted); display:block; font-size:.78rem}
.sc-root .chip{min-width:4.6rem; padding:.35rem .4rem; border-radius:.4rem; text-align:center; text-decoration:none; font-size:.82rem; font-weight:700;
  border:2px solid var(--sc-steel); color:var(--sc-steel); background:transparent}
.sc-root .chip.done{background:var(--sc-tile-lock); border-color:var(--sc-tile-lock); color:var(--sc-ink)}
.sc-root .chip.prog{border-color:var(--sc-amber); color:var(--sc-ink)}
.sc-root .chip.empty{border:2px dashed var(--sc-line); color:var(--sc-muted)}
.sc-root .arch-head{display:flex; gap:.6rem; color:var(--sc-muted); font-size:.78rem; padding-bottom:.3rem; border-bottom:1px solid var(--sc-line)}
.sc-root .arch-head span:first-child{flex:1}
.sc-root .arch-head span{min-width:4.6rem; text-align:center}

/* ---------- game mode ---------- */
.sc-root.sc-game{overflow:hidden}
/* the game screen fills exactly the space it is given, so the keyboard always stays visible */
.sc-root.sc-game > #sc-view{height:100%}
.sc-root .app{height:100%; max-width:34rem; margin:0 auto; display:flex; flex-direction:column}
.sc-root .ghead{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .9rem .2rem}
.sc-root .gsub{display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; padding:0 .9rem .45rem; font-size:.85rem; color:var(--sc-muted)}
.sc-root .backlink{color:var(--sc-steel); text-decoration:none; font-weight:700}
.sc-root .back{background:none; border:0; color:var(--sc-ink); font-size:1.35rem; padding:.1rem .35rem; line-height:1}
.sc-root .gtitle{flex:1; min-width:0}
.sc-root .gtitle .wordmark{font-size:1.05rem; display:block; line-height:1.15}
.sc-root .gtitle small{color:var(--sc-muted); font-size:.82rem}
.sc-root .score{font-weight:700; font-size:1.3rem; font-variant-numeric:tabular-nums; text-align:right; line-height:1}
.sc-root .score small{display:block; font-weight:400; font-size:.72rem; color:var(--sc-muted)}
.sc-root .track{display:flex; gap:.3rem; padding:0 .8rem .5rem}
.sc-root .track span{flex:1; height:.32rem; border-radius:.15rem; background:var(--sc-line)}
.sc-root .track span.done{background:var(--sc-steel)} .sc-root .track span.now{background:var(--sc-amber)} .sc-root .track span.final{flex:2}
.sc-root .scroll{flex:1; min-height:0; overflow-y:auto; padding:.25rem .9rem .5rem; -webkit-overflow-scrolling:touch}
.sc-root .stage-label{color:var(--sc-muted); font-size:.9rem; margin:0 0 .35rem; text-align:center}
.sc-root .board{display:flex; gap:.3rem; justify-content:center; margin:.25rem 0 .7rem}
.sc-root .tile{--tw:min(2.8rem, calc((min(100vw, 34rem) - 2.2rem) / var(--n) - .3rem));
  width:var(--tw); aspect-ratio:1/1.1; display:grid; place-items:center;
  border:2px solid var(--sc-line); border-radius:.35rem; background:var(--sc-tile); font-weight:700; font-size:calc(var(--tw) * .55)}
.sc-root .tile.next{border-color:var(--sc-steel)}
.sc-root .tile.filled{border-color:var(--sc-ink); animation:pop .08s ease-out}
.sc-root .tile.locked{background:var(--sc-tile-lock); border-color:var(--sc-tile-lock)}
.sc-root .board.right .tile{background:var(--sc-ok); border-color:var(--sc-ok); color:var(--sc-steel-ink)}
.sc-root .board.wrong{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
@keyframes pop{from{transform:scale(1.08)}to{transform:scale(1)}}
.sc-root .clues{background:var(--sc-panel); border:1px solid var(--sc-line); border-radius:.55rem; padding:.7rem .85rem}
.sc-root .clues p{margin:0} .sc-root .clues p + p{margin-top:.5rem}
.sc-root .clues .kind{font-weight:700; margin-right:.35rem}
.sc-root .clues .empty{color:var(--sc-muted)}
.sc-root .gap{display:inline-block; min-width:3rem; border-bottom:2px solid var(--sc-ink); transform:translateY(-.2em)}
.sc-root .tray{display:flex; gap:.45rem; justify-content:center; margin:.1rem 0 .55rem; flex-wrap:wrap}
.sc-root .tray span{width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:50%; border:3px solid var(--sc-amber); font-weight:700; font-size:1.15rem}
.sc-root .solved{margin-top:1rem}
.sc-root .solved h3{font-size:.85rem; margin:0 0 .4rem; color:var(--sc-muted); font-weight:400}
.sc-root .rows{display:flex; flex-wrap:wrap; gap:.4rem .9rem}
.sc-root .row{display:flex; gap:.15rem}
.sc-root .row b{width:1.45rem; height:1.6rem; display:grid; place-items:center; font-size:.85rem; background:var(--sc-tile-lock); border-radius:.25rem; position:relative}
.sc-root .row b.key::after{content:""; position:absolute; inset:-3px; border:3px solid var(--sc-amber); border-radius:50%; animation:ring .5s ease-out both; animation-delay:calc(var(--i) * 140ms)}
@keyframes ring{from{transform:scale(1.8); opacity:0}to{transform:scale(1); opacity:1}}
.sc-root .bar{display:flex; align-items:center; gap:.6rem; padding:.45rem .9rem; border-top:1px solid var(--sc-line)}
.sc-root .msg{flex:1; margin:0; font-weight:700; font-size:.9rem; min-height:1.3rem}
.sc-root .msg.bad{color:var(--sc-bad)} .sc-root .msg.ok{color:var(--sc-ok)}
.sc-root .kbd{padding:.35rem .25rem .5rem; user-select:none; -webkit-user-select:none}
.sc-root .krow{display:flex; gap:.3rem; justify-content:center; margin-top:.35rem}
.sc-root .k{flex:1; max-width:2.6rem; height:3.3rem; border:0; background:var(--sc-kbd); color:var(--sc-kbd-ink); font-size:1.15rem; padding:0}
.sc-root .k.wide{max-width:4.1rem; flex:1.5; font-size:.8rem}
.sc-root .k.check{background:var(--sc-steel); color:var(--sc-steel-ink)}
.sc-root .k.avail{background:var(--sc-amber-soft); box-shadow:inset 0 0 0 2px var(--sc-amber)}
.sc-root .k:active{filter:brightness(.88)}
.sc-root .spacer{flex:.5; max-width:1.3rem}
.sc-root .result{padding-top:.5rem}
.sc-root .result h2{font-size:2rem; letter-spacing:.12em; margin:.25rem 0 0; text-align:center}
.sc-root .result .big{font-size:3rem; font-weight:700; text-align:center; line-height:1; margin:.75rem 0 .2rem}
.sc-root .result .sub{text-align:center; color:var(--sc-muted); margin:0 0 1rem}
.sc-root table{width:100%; border-collapse:collapse; margin-bottom:1rem; font-size:.95rem}
.sc-root th,.sc-root td{text-align:left; padding:.35rem .3rem; border-bottom:1px solid var(--sc-line)}
.sc-root th{font-weight:400; color:var(--sc-muted); font-size:.85rem}
.sc-root td.n,.sc-root th.n{text-align:right; font-variant-numeric:tabular-nums}
.sc-root .fine{color:var(--sc-muted); font-size:.82rem; margin:0 0 1rem}
.sc-root .actions{display:flex; gap:.5rem; flex-wrap:wrap}
.sc-root .countdown{color:var(--sc-muted); font-size:.9rem; margin-top:1rem}

/* ---------- help dialog ---------- */
.sc-root dialog{border:1px solid var(--sc-line); border-radius:.8rem; background:var(--sc-panel); color:var(--sc-ink); max-width:30rem; width:calc(100% - 2rem); padding:1.1rem 1.2rem}
.sc-root dialog::backdrop{background:rgba(10,20,30,.5)}
.sc-root dialog h2{margin:0 0 .6rem; font-size:1.3rem}
.sc-root dialog ol{padding-left:1.2rem; margin:.4rem 0 .8rem}
.sc-root dialog li{margin-bottom:.35rem}

@media (prefers-reduced-motion:reduce){.sc-root *{animation:none!important}}
@media (max-height:600px){ .sc-root .k{height:2.8rem} .sc-root .tile{--tw:min(2.3rem, calc((min(100vw, 34rem) - 2.2rem) / var(--n) - .3rem))} }
@media (min-width:700px) and (min-height:560px){
  .sc-root.sc-game{overflow:auto}
  .sc-root.sc-game .app{height:auto; margin:2rem auto; border:1px solid var(--sc-line); border-radius:.8rem; padding:.4rem 0 0}
  .sc-root.sc-game .scroll{flex:none; overflow:visible; min-height:13rem; padding-top:.75rem}
}

/* ---------- EnglishBridges footer ---------- */
.sc-root .ebfoot{display:flex; align-items:center; gap:.75rem; margin:2rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--sc-line); color:var(--sc-muted); font-size:.85rem; text-decoration:none}
.sc-root .ebfoot img{width:84px; height:auto; background:#fff; border-radius:.4rem; padding:.25rem; flex:none}
.sc-root .ebfoot b{color:var(--sc-steel); display:block; font-size:.95rem}
.sc-root.sc-game .ebfoot{margin:1.5rem 0 .25rem}

/* ---------- personal records ---------- */
.sc-root .mystats{margin:.4rem 0 .2rem; font-size:.9rem; background:var(--sc-panel); border:1px solid var(--sc-line); border-radius:.55rem; border-collapse:separate; border-spacing:0; overflow:hidden}
.sc-root .mystats caption{text-align:left; font-weight:700; padding:0 0 .35rem; color:var(--sc-ink)}
.sc-root .mystats th,.sc-root .mystats td{padding:.4rem .6rem}
.sc-root .mystats tr:last-child td{border-bottom:0}