/* Starvellum — illuminated-manuscript night palette. Phone-first portrait.
   All colour/layout here; no external fonts or assets. */
:root{
  --ink:#0a0b1a;            /* deepest vellum-night */
  --ink2:#121634;          /* panel night */
  --vellum:#f4ead3;        /* aged parchment ink */
  --gold:#e8c66a;          /* leaf-gold */
  --gold-dim:#b9933f;
  --indigo:#2a2f66;
  --indigo2:#3b4494;
  --line:#2c3570;          /* thin grid line */
  --line-strong:#6b78c6;   /* ward (box) line */
  --cell:#11153a;
  --cell-sel:#2d3686;
  --cell-peer:#1a2051;
  --cell-same:#243073;
  --given:#f4ead3;
  --player:#9fd0ff;        /* player-placed glyph (cool starlight) */
  --wrong:#ff6b7f;
  --wrong-bg:#3a1630;
  --good:#8ce0b0;
  --radius:14px;
  --tapmin:44px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--vellum);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  overflow:hidden;position:fixed;inset:0;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

#app{
  position:relative;z-index:1;display:flex;flex-direction:column;
  height:100%;max-width:560px;margin:0 auto;
  padding:calc(6px + var(--safe-t)) 10px calc(8px + var(--safe-b));
  gap:6px;
}

/* ---- header ---- */
#bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand .mark{width:30px;height:30px;flex:0 0 auto;color:var(--gold);filter:drop-shadow(0 0 6px rgba(232,198,106,.5))}
.brand .mark svg{width:100%;height:100%}
.titles{min-width:0}
.titles h1{margin:0;font-size:19px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}
.titles p{margin:0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#9aa3d8;opacity:.8}
.barbtns{display:flex;gap:6px;flex:0 0 auto}
.icon{
  min-width:var(--tapmin);min-height:38px;padding:0 10px;border-radius:10px;
  background:var(--ink2);color:var(--vellum);border:1px solid var(--line);
  font-size:15px;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s;
}
.icon:hover{border-color:var(--line-strong)}
.icon.off{opacity:.45}
.icon.on{color:var(--gold);border-color:var(--gold-dim)}

/* ---- status strip ---- */
#status{display:flex;gap:6px;justify-content:space-between}
.stat{
  flex:1;background:linear-gradient(180deg,rgba(43,53,112,.35),rgba(10,11,26,.3));
  border:1px solid var(--line);border-radius:10px;padding:5px 4px;text-align:center;min-width:0;
}
.stat .k{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8e97d6}
.stat .v{display:block;font-size:14px;color:var(--vellum);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.seed .v{font-size:12px;color:#b7c0ff}
#mistV.warn{color:var(--wrong)}

/* ---- board ---- */
#stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#boardWrap{position:relative;width:min(94vw,66vh,440px);aspect-ratio:1/1}
#board{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);
  background:var(--line-strong);gap:1px;padding:2px;border-radius:10px;
  border:2px solid var(--line-strong);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 10px 40px rgba(0,0,0,.55),inset 0 0 40px rgba(59,68,148,.25);
  touch-action:none;
}
.cell{
  position:relative;background:var(--cell);display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;color:var(--player);
  transition:background .1s;
}
.cell.br{margin-right:1px}      /* ward seam right */
.cell.bb{margin-bottom:1px}     /* ward seam bottom */
.cell.peer{background:var(--cell-peer)}
.cell.same{background:var(--cell-same)}
.cell.sel{background:var(--cell-sel);box-shadow:inset 0 0 0 2px var(--gold)}
.cell.given{color:var(--given)}
.cell.wrong{background:var(--wrong-bg)!important;color:var(--wrong)!important}
.cell.hintpop{animation:hintpop .7s ease-out}
.cell.placepop .cellv{animation:placepop .28s cubic-bezier(.2,1.4,.4,1)}
.cell.shake{animation:shake .32s}
.cell.unitflash{animation:unitflash .6s ease-out}

.cellv{width:76%;height:76%;display:flex;align-items:center;justify-content:center;line-height:1}
.cellv svg{width:100%;height:100%}
.cellv.num{font-size:0;}
.cellv.num::before{content:attr(data-n);font-size:min(7vw,30px);font-weight:600}
.cell.given .cellv svg,.cell.given .cellv.num::before{filter:drop-shadow(0 0 3px rgba(232,198,106,.25))}

/* pencil marks 3x3 */
.marks{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}
.mk{display:flex;align-items:center;justify-content:center;font-size:min(2.6vw,11px);color:#8fa0e8;line-height:1}
.mk.empty{visibility:hidden}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}

/* ---- controls ---- */
#controls{display:flex;flex-direction:column;gap:7px}
#tools{display:flex;gap:6px}
.tool{
  flex:1;min-height:var(--tapmin);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--ink2);border:1px solid var(--line);border-radius:11px;color:var(--vellum);
  cursor:pointer;font-family:inherit;padding:4px 2px;transition:background .12s,border-color .12s,transform .06s;
}
.tool:active{transform:translateY(1px)}
.tool .ti{font-size:19px;line-height:1}
.tool .tl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#aab2e6}
.tool:disabled{opacity:.35;cursor:default}
.tool.active{background:var(--indigo2);border-color:var(--gold-dim)}
.tool.active .tl{color:var(--gold)}

#pad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.key{
  position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,#1a2050,#11143a);
  border:1px solid var(--line);border-radius:11px;color:var(--player);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:14%;
  font-family:inherit;transition:border-color .12s,transform .06s,background .12s;
}
.key:active{transform:translateY(1px)}
.key:hover{border-color:var(--line-strong)}
.key svg{width:100%;height:100%}
.key .kn{position:absolute;top:1px;right:3px;font-size:9px;color:#7f8ad0;font-weight:600}
.key.num{font-size:min(5.6vw,22px);font-weight:600;padding:0}
.key.num .kn{display:none}
.key.done{opacity:.22;pointer-events:none}

/* ---- overlays ---- */
.overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,6,18,.72);backdrop-filter:blur(3px);
  animation:fade .2s ease-out;
}
.overlay.hidden{display:none}
.panel{
  width:100%;max-width:400px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg,#171c42,#0d1030);
  border:1px solid var(--gold-dim);border-radius:18px;padding:22px 20px calc(20px + var(--safe-b));
  text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.6),inset 0 0 60px rgba(59,68,148,.2);
}
.panel h2{margin:4px 0 10px;color:var(--gold);font-size:23px;letter-spacing:.08em}
.lede{margin:0 auto 16px;max-width:34ch;font-size:14px;line-height:1.55;color:#cfd6ff}
.row-label{margin:14px 0 8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#8e97d6}
.crest{width:72px;height:72px;margin:0 auto 6px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(232,198,106,.5))}
.crest svg{width:100%;height:100%}

button.big{appearance:none;
  display:block;width:100%;min-height:var(--tapmin);margin:8px 0 0;padding:13px;
  background:linear-gradient(180deg,var(--indigo2),var(--indigo));color:var(--vellum);
  border:1px solid var(--gold-dim);border-radius:12px;font-family:inherit;font-size:16px;
  letter-spacing:.04em;cursor:pointer;transition:transform .06s,filter .12s;
}
button.big:active{transform:translateY(1px)}
button.big:hover{filter:brightness(1.1)}
button.big.daily{background:linear-gradient(180deg,var(--gold),var(--gold-dim));color:#241a06;border-color:var(--gold);font-weight:600}
button.big.ghost{background:transparent;color:#cfd6ff}

.tiers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tierbtn{
  min-height:var(--tapmin);padding:10px 8px;border-radius:12px;cursor:pointer;font-family:inherit;
  background:var(--ink2);border:1px solid var(--line);color:var(--vellum);text-align:left;
  transition:border-color .12s,background .12s;
}
.tierbtn:hover{border-color:var(--line-strong)}
.tierbtn .tname{display:block;font-size:15px;color:var(--gold);letter-spacing:.04em}
.tierbtn .tdesc{display:block;font-size:10.5px;color:#9aa3d8;margin-top:2px}

.menu-foot{display:flex;justify-content:center;gap:18px;margin-top:16px}
.link{background:none;border:none;color:#9fb0ff;cursor:pointer;font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px}

.how{text-align:left;margin:0 0 10px;padding-left:18px}
.how li{font-size:13.5px;line-height:1.55;color:#cfd6ff;margin-bottom:9px}
.how b{color:var(--gold)}

.legendgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.legitem{display:flex;align-items:center;gap:9px;background:var(--ink2);border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.legitem .lg{width:30px;height:30px;color:var(--player);flex:0 0 auto}
.legitem .lg svg{width:100%;height:100%}
.legitem .ln{text-align:left;min-width:0}
.legitem .ln b{display:block;color:var(--gold);font-size:13px}
.legitem .ln span{font-size:11px;color:#9aa3d8}

.resultstats{display:flex;justify-content:center;gap:10px;margin:4px 0 6px;flex-wrap:wrap}
.rs{background:var(--ink2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:76px}
.rs .k{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8e97d6}
.rs .v{display:block;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums}
.resultbtns{margin-top:6px}

/* generation overlay */
#gen{z-index:30;background:rgba(5,6,18,.86)}
.geninner{text-align:center}
#genMsg{margin-top:16px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#aab2e6}
.orrery{width:84px;height:84px;margin:0 auto;position:relative}
.orrery::before,.orrery::after{content:"";position:absolute;border-radius:50%;border:2px solid transparent}
.orrery::before{inset:0;border-top-color:var(--gold);border-right-color:var(--gold-dim);animation:spin 1.1s linear infinite}
.orrery::after{inset:20px;border-bottom-color:var(--indigo2);border-left-color:var(--line-strong);animation:spin 1.7s linear infinite reverse}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes placepop{0%{transform:scale(.3);opacity:.2}100%{transform:scale(1);opacity:1}}
@keyframes hintpop{0%{box-shadow:inset 0 0 0 3px var(--gold)}100%{box-shadow:inset 0 0 0 0 transparent}}
@keyframes unitflash{0%{background:rgba(232,198,106,.5)}100%{background:var(--cell)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* the Leetdom inline player is ~332px wide: keep the title clear of the header buttons */
@media (max-width:360px){
  .brand{gap:7px}
  .brand .mark{width:24px;height:24px}
  .titles h1{font-size:15px;letter-spacing:.06em}
  .titles p{font-size:9.5px;letter-spacing:.12em}
}
@media (max-width:310px){
  .brand .mark{display:none}
  .titles h1{font-size:13px;letter-spacing:.04em}
  .titles p{font-size:8.5px;letter-spacing:.08em}
}

/* landscape / short screens: board left, panels right so everything fits */
@media (max-height:560px) and (orientation:landscape){
  #app{max-width:none;flex-flow:row wrap;align-content:center;gap:8px 12px;padding:6px 12px}
  #bar{flex:1 1 100%;order:1}
  #stage{order:2;flex:0 0 auto}
  /* leave room for the 118px status column + a 160px keypad, or narrow landscape phones wrap */
  #boardWrap{width:min(82vh,48vw,calc(100vw - 330px))}
  #status{order:3;flex-direction:column;flex:0 0 118px;justify-content:center}
  #controls{order:4;flex:1 1 160px;min-width:0;justify-content:center}
  /* 3x3 keypad + tool row must fit under the header: cap its width by the viewport height */
  #pad{grid-template-columns:repeat(3,1fr);width:min(100%,calc(100vh - 120px));margin:0 auto}
}