:root{
  --bg:#0d1017; --surface:#161b23; --surface2:#1d232d; --line:#262d38;
  --ink:#d9dee6; --dim:#8b93a1; --amber:#f0912f; --amber-dk:#c4741f;
  --green:#4ade80; --red:#f87171; --mono:Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  font:16px/1.6 Calibri,"Segoe UI",system-ui,sans-serif;
  background:var(--bg) url("/palouse.svg") no-repeat center bottom fixed;
  background-size:cover}

header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.6rem;background:rgba(8,10,15,.86);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{color:#fff;text-decoration:none;font:700 1.15rem Cambria,Georgia,serif}
.brand span{color:var(--amber)}
nav{display:flex;align-items:center;gap:1.1rem}
nav a{color:var(--dim);text-decoration:none}nav a:hover{color:#fff}
nav .who{color:var(--amber);font-weight:700;font-family:var(--mono);font-size:.95rem}

main{flex:1;width:100%;max-width:56rem;margin:0 auto;padding:2rem 1.6rem 5rem}
h1{font:700 2.1rem Cambria,Georgia,serif;margin:.2rem 0 1rem;color:#fff}
h2{font:700 1.35rem Cambria,Georgia,serif;margin:2rem 0 .8rem;color:#fff;
  display:flex;align-items:center;gap:.8rem}
h3{font:700 1.1rem Cambria,Georgia,serif;margin:0;color:#fff}
a{color:var(--amber)}
.muted{color:var(--dim)}.err{color:var(--red);font-weight:700}.ok{color:var(--green);font-weight:700}

.cta{display:inline-block;background:var(--amber);color:#150d04;border:0;border-radius:4px;
  padding:.5rem 1rem;font:700 1rem inherit;cursor:pointer;text-decoration:none}
.cta:hover{background:var(--amber-dk)}
.cta.big{padding:.7rem 1.5rem;font-size:1.1rem;margin-top:.6rem}
.cta.small{padding:.25rem .7rem;font-size:.85rem}
.link{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;
  text-decoration:underline;padding:0}.link:hover{color:#fff}
.inline{display:inline-flex;gap:.5rem;align-items:center}

.hero{padding:1.5rem 0 2rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.card{background:rgba(22,27,35,.92);border:1px solid var(--line);border-radius:6px;padding:1.3rem;
  display:flex;flex-direction:column;gap:.85rem;max-width:32rem}
label{display:flex;flex-direction:column;gap:.3rem;font-weight:700}
label.check{flex-direction:row;align-items:center;gap:.5rem;font-weight:400}
input,textarea{font:inherit;padding:.5rem;border:1px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:-1px;border-color:transparent}
input::placeholder{color:#5b6270}

table.board{width:100%;border-collapse:collapse;margin-top:.5rem}
table.board td,table.board th{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left}
table.board th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.rank{width:2.5rem;color:var(--dim);font-weight:700;font-family:var(--mono)}
.handle{font-weight:700;font-family:var(--mono);color:#fff}
.score{text-align:right;font:700 1.1rem var(--mono);color:var(--amber)}
.solved{color:var(--dim)}
tr.podium .handle{color:var(--amber)}
tr.podium .rank::after{content:"";}

.rowhead{display:flex;align-items:baseline;justify-content:space-between}
.mine{font:700 1.3rem var(--mono);color:var(--amber)}

.chal{background:rgba(22,27,35,.92);border:1px solid var(--line);border-radius:6px;
  padding:1.1rem 1.3rem;margin:1rem 0}
.chal.done{border-color:#1f4d33;background:#101a14}
.chal header{display:flex;align-items:center;gap:.8rem;background:none;padding:0;border:0}
.cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bg);
  background:var(--dim);padding:.15rem .5rem;border-radius:3px;font-weight:700}
.pts{margin-left:auto;font:700 1.2rem var(--mono);color:var(--amber)}
.chal .body{margin:.8rem 0}.chal .meta{color:var(--dim);font-size:.9rem}
.chal-code,.chal-embed{background:#080a0f;color:var(--ink);padding:.8rem 1rem;border-radius:4px;
  overflow-x:auto;font:14px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;
  border:1px solid var(--line)}
code{background:var(--surface2);color:var(--amber);padding:.1rem .35rem;border-radius:3px;
  font:.9em var(--mono)}
details.hint{display:inline}
details.hint summary{display:inline;list-style:none;cursor:pointer;color:var(--amber)}
details.hint summary::-webkit-details-marker{display:none}
details.hint summary::before{content:"\25B8 "}
details.hint[open] summary::before{content:"\25BE "}

fieldset.handles{background:rgba(13,16,23,.6);border:1px solid var(--line);border-radius:6px;padding:.9rem 1rem 1rem;margin:0}
fieldset.handles legend{font-weight:700;padding:0 .4rem;color:#fff}
.chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);
  border-radius:20px;padding:.4rem .9rem;margin:.2rem .3rem .2rem 0;cursor:pointer;
  font-weight:400;background:var(--surface2);font-family:var(--mono);font-size:.95rem;color:var(--ink)}
.chip:hover{border-color:var(--amber)}
.chip input{accent-color:var(--amber)}
.chip:has(input:checked){border-color:var(--amber);background:#2a1c0c;color:#fff;font-weight:700}
.chip.own{font-family:inherit;font-style:italic}
.ownfield{display:block;margin:.5rem 0 0;width:100%;max-width:18rem;font-family:var(--mono)}
.small{font-size:.85rem;margin:.6rem 0 0}

footer{border-top:1px solid var(--line);background:rgba(8,10,15,.7);padding:1.2rem 1.6rem;color:var(--dim);
  font-size:.9rem;text-align:center}

/* WSU crimson as atmosphere; amber stays the interactive colour */
.brand{text-shadow:0 0 24px rgba(166,15,45,.55)}
h1{text-shadow:0 1px 0 rgba(0,0,0,.6)}
table.board{background:rgba(13,16,23,.55);border-radius:6px}