/* Ironstrike brand tokens (copied from ironstrike-ai/index.html). Zero dependencies. */
:root{--bg:#0a0a0b;--panel:#141416;--steel-line:#38393e;--text:#eae8e4;--dim:#9a9a9f;--ember:#f5821f;--ember-bright:#ff9e42}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:24px 16px}
main.wrap{flex:1}
h1{font-size:2rem;line-height:1.15;margin:0 0 8px}
p{margin:0 0 12px}
a{color:var(--ember-bright)}
#how a{display:inline-block;padding:11px 0;min-height:44px;box-sizing:border-box}
.lede{color:var(--dim)}
button,.btn{min-height:44px;min-width:44px;padding:10px 20px;font:inherit;font-weight:600;color:#0a0a0b;background:var(--ember);border:0;border-radius:8px;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--ember-bright);outline-offset:2px}
.is-footer{border-top:1px solid var(--steel-line);color:var(--dim);font-size:.875rem;padding:16px;max-width:760px;margin:0 auto;width:100%}
.is-footer p{margin:0 0 8px}
.is-footer a{padding:14px 6px;margin:-14px -6px}

/* Cipher */
.wrap{padding:12px 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top h1{font-size:1.6rem;margin:0}
.topbtns{display:flex;align-items:center;gap:8px}
.howlink{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.lede{margin:0 0 4px}
.status{margin:0 0 6px;min-height:1.5em;font-weight:600}
.game{display:grid;gap:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mark{position:relative;display:inline-block;width:22px;height:22px;flex:none}
.mark.empty::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--steel-line)}
.m0{background:#f5821f;border-radius:50%}
.m1{background:#ffd166;border-radius:3px}
.m2{background:#e0463a;clip-path:polygon(50% 4%,96% 92%,4% 92%)}
.m3{background:#eae8e4;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.m4{background:#4fb3bf;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.m5{background:#8f7cf0;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.row{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;border-radius:6px;background:var(--panel);color:var(--dim);font-size:.875rem}
.row.done{color:var(--text)}
.row.new{animation:rowin 150ms ease-out}
.num{width:1.4em;text-align:right;color:var(--dim)}
.marks{display:flex;gap:6px}
.cnt{white-space:nowrap}
.reveal{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:600}
.reveal[hidden],#play[hidden],#how[hidden]{display:none}
.panel{display:grid;gap:8px;align-content:start}
.tray,.palette{display:grid;gap:8px}
.tray{grid-template-columns:repeat(4,48px);justify-content:center}
.palette{grid-template-columns:repeat(6,minmax(44px,1fr))}
.slot,.pal{position:relative;display:flex;align-items:center;justify-content:center;padding:0;min-height:48px;background:var(--panel);border:1px solid var(--steel-line);border-radius:8px;color:var(--dim)}
.slot{width:48px;border-style:dashed}
.slot.filled{border-style:solid}
.pal:disabled,.actions button:disabled{opacity:.4;cursor:default}
.pal .mark,.slot .mark{width:26px;height:26px}
.key{position:absolute;right:4px;bottom:1px;font-size:.6875rem;color:var(--dim)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions button{min-height:48px}
.ghost{background:var(--panel);color:var(--text);border:1px solid var(--steel-line)}
.best{margin:0;color:var(--dim);font-size:.875rem}
.linkbtn{background:none;color:var(--ember-bright);text-decoration:underline;padding:0 4px;justify-self:start;font-weight:400}
.hints,.rules{display:none;color:var(--dim);font-size:.875rem}
#how{max-width:640px;margin:0 auto}
#how h2{margin:12px 0 8px}
@keyframes rowin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.row.new{animation:none}}
@media (min-width:820px){
  .wrap{padding:24px}
  .top h1{font-size:2rem}
  .game,.top,.lede,.status{max-width:560px;margin-left:auto;margin-right:auto}
  .lede,.status{width:100%}
  .row{height:40px;font-size:1rem}
  .mark{width:28px;height:28px}
  .pal .mark,.slot .mark{width:32px;height:32px}
  .palette{grid-template-columns:repeat(6,56px);justify-content:space-between}
  .pal{min-height:56px}
  .hints{display:block;margin:0}
}
@media (min-width:1100px){
  .wrap{max-width:1200px}
  .top,.lede,.status{max-width:none;margin-left:0;margin-right:0}
  .game{max-width:none;margin:0;grid-template-columns:1fr 420px;gap:48px;align-items:start}
  .row{height:44px}
  .panel{position:sticky;top:16px}
  .rules{display:block;margin-top:8px}
  .rules p{margin:0 0 4px}
  .palette{grid-template-columns:repeat(6,minmax(44px,1fr))}
}
@media (min-width:1700px){.wrap{max-width:1280px}}