:root{
  --night:#17183f;
  --night-soft:#24285c;
  --cream:#fffaf0;
  --paper:#fffefa;
  --gold:#ffcb56;
  --coral:#ff8588;
  --teal:#62d4c5;
  --violet:#9f8df3;
  --sky:#4f92e7;
  --green:#39b978;
  --muted:#626b82;
  --line:#252750;
  --blue:#1266c7;
  --amber:#ffcb56;
  --amber-dark:#8a5a00;
  --wash:#edf3ff;
  --card:#fffefa;
  --shadow:0 18px 44px rgba(10,12,40,.18)
}

html{background:var(--night)}
body{
  background:
    radial-gradient(circle at 8% 3%,rgba(159,141,243,.28),transparent 25%),
    radial-gradient(circle at 95% 100%,rgba(98,212,197,.18),transparent 28%),
    linear-gradient(145deg,#181a48,#0e102d);
  color:var(--night)
}
.app-shell{max-width:1480px}

.masthead{
  grid-template-columns:minmax(270px,1fr) auto auto auto auto;
  align-items:center;
  margin-bottom:16px;
  padding:15px 18px;
  color:#fff;
  background:linear-gradient(125deg,rgba(39,42,96,.96),rgba(20,22,61,.98));
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  box-shadow:0 16px 35px rgba(5,6,28,.25)
}
.brand-lockup{display:flex;align-items:center;gap:14px}
.brand-symbol{position:relative;display:block;width:58px;height:54px;flex:none;filter:drop-shadow(4px 5px 0 rgba(4,5,24,.38))}
.brand-symbol i{position:absolute;inset:0;display:block;border:1px solid rgba(23,24,63,.88)}
.brand-symbol i:nth-child(1){background:var(--gold);clip-path:polygon(50% 50%,25% 0,75% 0)}
.brand-symbol i:nth-child(2){background:var(--teal);clip-path:polygon(50% 50%,75% 0,100% 50%)}
.brand-symbol i:nth-child(3){background:var(--coral);clip-path:polygon(50% 50%,100% 50%,75% 100%)}
.brand-symbol i:nth-child(4){background:var(--violet);clip-path:polygon(50% 50%,75% 100%,25% 100%)}
.brand-symbol i:nth-child(5){background:var(--sky);clip-path:polygon(50% 50%,25% 100%,0 50%)}
.brand-symbol i:nth-child(6){background:#ff9e4f;clip-path:polygon(50% 50%,0 50%,25% 0)}
.masthead .eyebrow{color:var(--gold);font-size:10px;margin-bottom:5px}
.masthead h1{color:#fff;font-size:36px;letter-spacing:.015em;font-weight:900}
.masthead h1 span{color:var(--teal)}
.masthead .tagline{color:#d9dcef;font-size:13px;margin-top:5px}

.edition-switch{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);border-radius:12px;font-size:11px}
.edition-switch a,.edition-switch strong{display:flex;align-items:center;gap:6px;padding:8px 10px;white-space:nowrap}
.edition-switch a{color:#d7daee}
.edition-switch a:hover{background:rgba(255,255,255,.1);color:#fff}
.edition-switch strong{background:var(--gold);color:var(--night)}
.edition-switch small{display:grid;place-items:center;min-width:22px;height:20px;padding:0 4px;border-radius:7px;background:rgba(23,24,63,.14);font-size:9px}

.top-nav button{color:#cfd3e8;border:1px solid transparent}
.top-nav button:hover{background:rgba(255,255,255,.1);color:#fff}
.top-nav .nav-primary{background:var(--teal);color:var(--night);border-color:rgba(255,255,255,.28)}
.puzzle-picker label,.progress span{color:#bfc4dc}
.puzzle-picker select{border:1px solid rgba(255,255,255,.28);background:#fff;color:var(--night)}
.progress small{color:#c5c9dd}

.game-layout{gap:18px}
.board-column,.side-panel>section{
  background:var(--paper);
  border:2px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow)
}
.board-column{border-radius:24px;padding:16px 18px 18px;outline:1px solid rgba(23,24,63,.15);outline-offset:-1px}
.puzzle-strip{border-bottom:2px solid #ebe4d5;padding-bottom:10px}
.puzzle-strip strong{font-size:17px;letter-spacing:.08em}
.puzzle-strip em{background:#e4f7f3;color:#126c61;border:1px solid #a5ddd4}
.puzzle-strip>span{color:#7c668f}
.toolbar button,.actions button{border-radius:10px}
.mode-switch{background:#e7e8f1;border:1px solid #d0d1df;padding:3px}
.mode-switch button.active{background:var(--night);color:#fff;box-shadow:0 3px 8px rgba(23,24,63,.25)}

.board-wrap{
  position:relative;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.98) 0 24%,rgba(255,250,230,.82) 58%,transparent 76%),
    linear-gradient(145deg,#f0ecff,#fff4d9);
  overflow:hidden
}
.board-wrap:before,.board-wrap:after{content:"";position:absolute;width:150px;height:150px;border:1px solid rgba(23,24,63,.06);transform:rotate(30deg);pointer-events:none}
.board-wrap:before{left:-80px;top:-80px}.board-wrap:after{right:-75px;bottom:-85px}
.board{position:relative;z-index:1;filter:drop-shadow(0 10px 11px rgba(18,20,58,.12))}
.cell polygon{stroke:var(--night);stroke-width:2.15;transition:fill .14s,stroke .14s,filter .14s}
.board .cell:nth-child(4n+1) polygon{fill:#fff0b8}
.board .cell:nth-child(4n+2) polygon{fill:#dceaff}
.board .cell:nth-child(4n+3) polygon{fill:#ffe0df}
.board .cell:nth-child(4n) polygon{fill:#d9f4ef}
.board .cell:hover polygon{fill:#fff8dd;filter:brightness(1.02)}
.board .cell.in-region polygon{fill:#efeaff;stroke:#6d5bd0;stroke-width:2.5}
.board .cell.selected polygon{fill:var(--gold);stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 6px var(--night))}
.board .cell.fixed polygon{fill:var(--night);stroke:var(--gold);stroke-width:3}
.board .cell.fixed .cell-letter{fill:#fff}
.cell-letter{fill:var(--night);font-size:27px;font-weight:900}
.cell-notes{fill:#655208;font-weight:900}
.centre>circle:first-child{stroke-width:4}
.centre.selected>circle:first-child{stroke:#fff;fill:var(--violet);filter:drop-shadow(0 0 6px var(--night))}
.centre-core{fill:var(--night);stroke:var(--paper);stroke-width:2}
.centre.boundary .centre-core{fill:var(--coral);stroke:var(--night);stroke-width:1.5}

.letter-pad button{border:1px solid #d5d6e4;background:#fffefa;color:var(--night);border-radius:8px;box-shadow:0 2px 0 #d8d4ca;font-weight:850}
.letter-pad button:hover{background:var(--gold);border-color:#c58d15}
.letter-pad .erase{background:#eceaf5;color:#5e6178}
.status{border:1px solid #dedce8;background:#f3f1f8;color:#50566f}
.status.success{border-color:#90cfaa;background:#e4f6ea;color:#126336}
.actions .check{background:linear-gradient(135deg,var(--gold),#ffac42);border-color:#d78f18;color:#332200;box-shadow:0 5px 12px rgba(211,143,31,.25)}
.actions .share{background:var(--teal);color:var(--night);border-color:#2eaa9c}

.side-panel>section{border-radius:20px;padding:19px 21px}
.how-to{background:linear-gradient(145deg,#fffefa,#f2eeff)!important}
.word-bank{background:linear-gradient(160deg,#fffefa,#fff8e7)!important}
.side-panel h2{color:var(--night)}
.legend i{width:12px;height:12px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--night)}
.six-dot{background:var(--night)}
.four-dot,.three-dot{background:var(--coral);border-color:var(--night)}
.bank-heading{padding-bottom:9px;border-bottom:2px solid var(--night)}
.bank-heading span{background:var(--night);color:#fff}
.word-grid{gap:6px}
.word-grid button{border:1px solid #d9d7e1;background:#fff;border-radius:8px;padding:7px 8px;color:var(--night);font-weight:750}
.word-grid button:hover{background:#fff1bf;border-color:#dba634}
.word-grid button.used{background:#e3f1e8;color:#6a8171;border-color:#bad4c3;text-decoration:line-through}
.greybrow-link{color:#6755bd;border-top-color:#d9d3e9}

.modal{border:2px solid rgba(255,255,255,.7);border-radius:24px;background:linear-gradient(145deg,#fffefa,#f7f4ff);box-shadow:0 28px 90px rgba(5,6,30,.5)}
.modal::backdrop{background:rgba(9,10,35,.76);backdrop-filter:blur(4px)}
.primary,.modal button.primary{border-color:#bf861b;background:linear-gradient(135deg,var(--gold),#ffae45);color:#332200}
.tutorial-example span{background:#fff1bd;border:2px solid var(--night)}
.tutorial-example span:nth-child(2){background:#d9f4ef}.tutorial-example span:nth-child(3){background:#ffe0df}.tutorial-example span:nth-child(4){background:#e2ddff}
.tutorial-actions span{color:#6a56ca}
.archive-card{border-color:#d8d6e1;background:#fffefa}
.archive-card:hover{border-color:#7563d0;background:#f3efff}
.archive-card.solved{background:#e4f6ea;border-color:#83c99d}
.stat-grid div{border:1px solid #ddd9e7;background:#f4f0ff}
.badge.earned{background:#fff0bd;border-color:#d9a125}
.completion-mark{color:var(--coral)}
.earned-badge{background:#fff0bd;border-color:#d9a125}

@media(max-width:1180px){
  .masthead{grid-template-columns:minmax(245px,1fr) auto auto auto}
  .progress{display:none}
}
@media(max-width:900px){
  .masthead{grid-template-columns:minmax(230px,1fr) auto auto}
  .puzzle-picker{grid-column:2/4}
}
@media(max-width:700px){
  body{background:linear-gradient(155deg,#171943,#0f112f)}
  .app-shell{padding:10px 8px 28px}
  .masthead{grid-template-columns:1fr auto;gap:10px;padding:12px;border-radius:18px}
  .brand-symbol{width:46px;height:43px}
  .masthead h1{font-size:28px}
  .masthead .eyebrow{font-size:8px;letter-spacing:.13em}
  .masthead .tagline{display:none}
  .edition-switch{grid-column:2;grid-row:1}
  .edition-switch a,.edition-switch strong{font-size:0;padding:7px}
  .edition-switch a small,.edition-switch strong small{font-size:10px}
  .top-nav{grid-column:1/-1;grid-row:auto}
  .puzzle-picker{grid-column:1/-1}
  .board-column{border-radius:18px;padding:10px 6px 14px}
  .board-wrap{border-radius:14px}
  .side-panel>section{border-radius:18px}
  .cell-letter{font-size:25px}
}

@media(min-width:700px) and (max-height:760px){
  .masthead{padding-top:9px;padding-bottom:9px}
  .masthead .eyebrow,.masthead .tagline{display:none}
  .brand-symbol{width:45px;height:42px}
  .masthead h1{font-size:29px}
}