/* Build the Grid — prototype, Dormant site skin (tokens from the
   brand kit / styles.css: white bg, wash surfaces, ink text,
   amber #EAB308 fills with dark ink, amber-deep #A16207 for
   strokes and amber text, ywash for designated surfaces). */
:root{
  --page:#ffffff; --card:#f7f7f7; --tile:#ffffff; --tile-edge:#e7e7e7;
  --ink:#1a1a1a; --muted:#636363; --action:#EAB308; --action-ink:#1a1a1a;
  --amber-deep:#A16207; --ywash:#fdf3d7; --sel:#1a1a1a;
  --cell-line:#d9d9d9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;justify-content:center}
.wrap{width:100%;max-width:430px;padding:18px 14px 96px}
h1{font-size:26px;margin:2px 0 6px;font-weight:800;letter-spacing:-.02em}
.tagline{font-size:15px;line-height:1.45;color:var(--ink);margin:0 0 2px}
.tagline #sub{color:var(--muted)}
.howto{font-size:13px;color:var(--muted);margin:0 0 6px}
.howto summary{cursor:pointer;font-size:12.5px;font-weight:600;width:max-content}
.howto p{line-height:1.5;margin:6px 0 4px}
.howto strong{color:var(--ink)}
.datepill{text-align:center;font-size:11px;font-weight:800;letter-spacing:.22em;
  color:var(--muted);margin:8px 0 0}
.stats{font-size:13px;letter-spacing:.02em;color:var(--ink);text-align:center;
  font-variant-numeric:tabular-nums;margin-top:10px}

/* board + axis headers + value chips */
.board-zone{margin-top:12px}
.axis-top{text-align:center;font-size:11px;font-weight:800;letter-spacing:.22em;
  color:var(--muted);margin:0 0 6px 100px}
.axis-left{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--muted);
  width:14px;margin-right:4px}
.col-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 6px 100px}
.row-chips{display:grid;grid-template-rows:repeat(3,1fr);gap:8px;width:76px;margin-right:6px}
.board-row{display:flex}
.chip{display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:8px;
  min-height:44px;padding:4px 2px;color:transparent;cursor:pointer;
  min-width:0;line-height:1.15;overflow:hidden;word-break:break-word;
  background:var(--card);border:1px solid var(--tile-edge)}
.row-chips .chip{font-size:9px;letter-spacing:0}
.chip.hyph{-webkit-hyphens:auto;hyphens:auto}
.chip:active{transform:scale(.94)}
.chip.locked{color:var(--ink)}
.cell.flyland{animation:lockpop .32s ease-out}
.flytile{position:fixed;z-index:60;border:1.5px solid var(--tile-edge);border-radius:12px;
  background:var(--tile);display:flex;align-items:center;justify-content:center;
  pointer-events:none;will-change:transform;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.flytile img{width:70%;height:70%;object-fit:contain}
.board{position:relative;flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);gap:8px}
.track{position:absolute;border-radius:14px;pointer-events:none;z-index:0}
.cell{position:relative;z-index:1;border:1.5px dashed var(--cell-line);border-radius:14px;
  background:var(--tile);min-height:96px;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:6px 4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.cell.filled{border-style:solid;border-color:var(--cell-line)}
.cell.targetline{border:2px solid var(--amber-deep);
  box-shadow:0 0 0 3px rgba(234,179,8,.35),0 0 16px rgba(234,179,8,.25);
  background:var(--ywash)}
.cell.filled.targetline{background:var(--tile)}
.chip.active{background:var(--ywash);box-shadow:0 0 0 2px var(--amber-deep);color:var(--muted)}
.axis-top.on,.axis-left.on{color:var(--amber-deep)}
.cell.sel{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel)}
.cell img{width:52px;height:52px;max-width:100%;object-fit:contain;pointer-events:none}
.cell .t{font-size:10.5px;line-height:1.15;text-align:center;color:var(--ink);pointer-events:none}
.cell.shake{animation:shake .38s ease}
.cell.slidehintx{animation:slidehintx .55s ease}
.cell.slidehinty{animation:slidehinty .55s ease}
.cell.drop{animation:drop .22s ease-out}
.cell.lockpop{animation:lockpop .3s ease-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes drop{from{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes lockpop{0%{transform:scale(1)}40%{transform:scale(1.06,.92)}100%{transform:scale(1)}}
@keyframes slidehintx{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes slidehinty{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}75%{transform:translateY(6px)}}

/* tray */
.tray{margin-top:14px;background:var(--card);border:1px solid var(--tile-edge);
  border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:8px}
.tray-row{display:grid;gap:8px}
.tray-row.r5{grid-template-columns:repeat(5,1fr)}
.tray-row.r4{grid-template-columns:repeat(4,1fr);margin:0 auto;width:82%}
.ttile{border:1.5px solid var(--tile-edge);border-radius:12px;background:var(--tile);
  min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:5px 2px;cursor:pointer;min-height:64px;-webkit-tap-highlight-color:transparent}
.ttile img{width:36px;height:36px;object-fit:contain;pointer-events:none}
.ttile .t{font-size:8.5px;line-height:1.1;text-align:center;color:var(--ink);pointer-events:none}
.ttile.sel{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel)}
.ttile.ghost{border-style:dashed;background:transparent;opacity:.35;cursor:default}
.ttile.ghost img,.ttile.ghost .t{visibility:hidden}

.msg{min-height:20px;font-size:13.5px;margin:12px 2px 0;color:var(--ink)}
.msg.bad{color:#b42318}.msg.good{color:#067647}
.msg.win{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
  animation:lockpop .35s ease-out}
/* results pop-up (modal) */
.banner{display:none;position:fixed;inset:0;z-index:80;padding:20px;overflow-y:auto;
  background:rgba(26,26,26,.45);align-items:center;justify-content:center}
.banner.show{display:flex}
.banner .card{background:#ffffff;border-radius:16px;padding:22px 20px;width:100%;
  max-width:330px;box-shadow:0 18px 50px rgba(0,0,0,.25);position:relative;
  text-align:center;animation:pop .38s cubic-bezier(.25,.9,.3,1.22)}
@keyframes pop{from{transform:scale(.85) translateY(16px);opacity:0}}
.banner h2{margin:0 0 4px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.banner .x{position:absolute;top:6px;right:10px;background:none;border:none;
  font-size:16px;color:var(--muted);cursor:pointer;padding:6px}
.final-score{font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.banner .meta{margin:2px 0 0;font-size:13px;color:var(--muted)}
.banner .sqs{display:flex;gap:5px;justify-content:center;margin:12px 0 4px;flex-wrap:wrap}
.banner .sqs span{width:22px;height:22px;border-radius:6px;border:1px solid var(--tile-edge);
  background:#ffffff}
.banner .sharetext{margin:8px 0 12px;font-size:11.5px;color:var(--muted);
  white-space:pre-wrap;word-break:break-word}
.banner .btnrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.banner .sharecard-img{display:none;width:100%;max-width:264px;border:1px solid var(--tile-edge);
  border-radius:14px;margin:12px auto 14px}
.banner button{background:var(--action);color:var(--action-ink);border:none;border-radius:9px;
  padding:9px 14px;font-weight:700;font-size:13.5px;cursor:pointer;flex:1}
.banner button.alt{background:var(--card);border:1px solid var(--tile-edge);color:var(--ink)}

/* sticky action bar */
.actionbar{position:sticky;bottom:10px;margin-top:14px;display:flex;gap:8px;
  background:#ffffff;border:1px solid var(--tile-edge);border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));z-index:5}
.submit{flex:1;background:var(--action);color:var(--action-ink);border:none;border-radius:10px;
  padding:11px 8px;font-size:14.5px;font-weight:800;cursor:pointer}
.submit.dim{opacity:.45}
.hintbtn{flex:0 0 auto;background:#ffffff;color:var(--ink);border:1.5px solid var(--ink);
  border-radius:10px;padding:11px 12px;font-size:14px;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion: no-preference){
  .hintbtn.nudge{animation:hintpulse 1.1s ease-in-out infinite}
  @keyframes hintpulse{0%,100%{box-shadow:0 0 0 0 rgba(161,98,7,0)}
    50%{box-shadow:0 0 0 5px rgba(161,98,7,.35)}}
}
/* utility + quiet nav rows under the game */
.utilrow{display:flex;gap:18px;justify-content:center;margin-top:14px}
.utilrow button{background:none;border:none;color:var(--muted);font-size:13px;
  font-weight:600;cursor:pointer;padding:4px 2px;text-decoration:underline}
.quietnav{display:flex;gap:8px;justify-content:center;align-items:center;
  margin-top:8px;font-size:12.5px;color:var(--muted)}
.quietnav a{color:var(--muted)}
.tm-attrib{font-size:11px;color:var(--muted);margin:26px 2px 0;line-height:1.5}

/* past games archive */
.arch-sub{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0 0 4px}
.arch-card{border:1px solid var(--tile-edge);border-radius:14px;background:var(--card);
  padding:4px 8px;margin-top:12px}
.arch-row{display:flex;align-items:center;gap:8px;padding:11px 8px;color:var(--ink);
  text-decoration:none;font-size:14.5px;font-weight:600}
.arch-row + .arch-row{border-top:1px solid var(--tile-edge)}
.arch-tag{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber-deep)}
.arch-done{margin-left:auto;color:#067647;font-weight:700;font-size:13px;white-space:nowrap}
.arch-row .arch-done + .arch-tag{margin-left:0}
.arch-note{padding:11px 8px;color:var(--muted);font-size:13.5px;text-align:center}
@media (prefers-reduced-motion: reduce){
  .cell.shake,.cell.drop,.cell.lockpop,.cell.flyland,.cell.slidehintx,.cell.slidehinty{animation:none}
  .banner .card{animation:none}
}