/* unscrambl.ing - Track A. Shares the mayhap header, footer and warmth. */

:root{
  --paper:#F4F1EA;
  --card:#FFFDF8;
  --chrome:#EDE8DE;
  --ink:#1B2220;
  --muted:#6B7570;
  --rule:#D6CFC1;
  --rail:#A9A091;
  --set:#2E6B4F;        /* locked in the right spot */
  --lift:#B4682A;       /* picked up */
  --shadow:rgba(27,34,32,.13);

  --row:clamp(46px, 6.6dvh, 58px);
  --gap:8px;
  --pad:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14181A; --card:#1D2326; --chrome:#191E21; --ink:#E8EBE7;
    --muted:#98A29D; --rule:#2E373A; --rail:#4E5A5C; --set:#58A57C;
    --lift:#D39A4F; --shadow:rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#14181A; --card:#1D2326; --chrome:#191E21; --ink:#E8EBE7;
  --muted:#98A29D; --rule:#2E373A; --rail:#4E5A5C; --set:#58A57C;
  --lift:#D39A4F; --shadow:rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- chrome */
.chrome{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top);
}
.bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
     max-width:560px; margin:0 auto; padding:0 var(--pad); height:52px}
.grp{display:flex; gap:14px; align-items:center}
.grp.end{justify-content:flex-end}
.gamename{
  font-family:"Roboto Slab",Georgia,serif; font-weight:600; font-size:23px;
  margin:0; letter-spacing:-.005em;
}
.gamename span{font-weight:400; color:var(--muted)}
.icon{
  background:none; border:0; color:var(--ink); padding:6px; margin:-6px;
  cursor:pointer; display:grid; place-items:center; text-decoration:none;
}
.icon:focus-visible{outline:2px solid var(--lift); outline-offset:1px; border-radius:3px}


/* ------------------------------------------------------------------ game */
main{
  max-width:430px; margin:0 auto;
  padding:14px var(--pad) 4px;
  display:flex; flex-direction:column;
}
.promptwrap{margin:6px 0 12px}
.puzzno{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin:0 0 3px; font-variant-numeric:tabular-nums;
}
.prompt{
  font-family:"Roboto Slab",Georgia,serif; font-weight:500;
  font-size:clamp(21px, 5.6vw, 27px); line-height:1.15;
  margin:0; letter-spacing:-.01em;
}

.board{position:relative; margin-left:24px}
.rail{
  position:absolute; left:-24px; top:6px; bottom:6px; width:16px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
}
.rail i{
  font-style:normal; font-size:9.5px; color:var(--muted);
  writing-mode:vertical-rl; letter-spacing:.09em; text-transform:uppercase;
}
.rail:before{
  content:""; position:absolute; top:24px; bottom:24px; left:50%; width:1px;
  background:var(--rail); opacity:.5;
}
.stack{position:relative}

.tile{
  position:absolute; left:0; right:0; height:var(--row);
  display:flex; align-items:center; gap:10px; padding:0 13px;
  background:var(--card); border:1px solid var(--rule); border-radius:3px;
  cursor:grab; touch-action:none; user-select:none;
  transition:transform .17s cubic-bezier(.2,.7,.3,1),
             border-color .15s, box-shadow .15s;
}
.tile:focus-visible{outline:2px solid var(--lift); outline-offset:2px}
.tile .slot{width:13px; flex:none; font-size:11.5px; color:var(--muted);
            font-variant-numeric:tabular-nums}
.tile .name{
  font-family:"Roboto Slab",Georgia,serif; font-size:clamp(16px,4.3vw,19px);
  font-weight:500; flex:1; min-width:0; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em;
}
.tile .where{font-size:11.5px; color:var(--muted); flex:none; max-width:36%;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .val{font-size:12.5px; flex:none; opacity:0; transition:opacity .35s;
           font-variant-numeric:tabular-nums}
.tile.revealed .where{display:none}
.tile.revealed .val{opacity:1}
.tile.lifted{cursor:grabbing; border-color:var(--lift); z-index:5;
             box-shadow:0 7px 18px var(--shadow);
             transition:border-color .15s, box-shadow .15s}
.tile.picked{border-color:var(--lift); box-shadow:0 0 0 1px var(--lift) inset}
.tile.set{cursor:default; border-color:var(--set); box-shadow:-3px 0 0 0 var(--set)}
.tile.set .slot{color:var(--set)}

.meter{display:flex; align-items:center; gap:7px; margin-top:16px; min-height:20px}
.meter b{font-weight:400; font-size:12px; color:var(--muted);
         letter-spacing:.06em; text-transform:uppercase; margin-right:2px}
.dot{width:9px; height:9px; border-radius:50%; border:1px solid var(--rail)}
.dot.used{background:var(--rail)}

.go{
  margin-top:10px; width:100%; height:50px; flex:none;
  background:var(--ink); color:var(--paper); border:0; border-radius:3px;
  font-family:inherit; font-size:15px; font-weight:500; cursor:pointer;
}
.go:disabled{opacity:.34; cursor:default}
.go:focus-visible{outline:2px solid var(--lift); outline-offset:2px}

/* ---------------------------------------------------------------- footer */
.foot{
  margin-top:26px; text-align:center;
  padding:18px var(--pad) calc(24px + env(safe-area-inset-bottom));
  max-width:430px; margin-inline:auto;
}
.next{font-size:14px; color:var(--muted); margin:0 0 6px; font-variant-numeric:tabular-nums}
.more{margin:0 0 16px}
.more a{font-size:14px; color:var(--ink); text-decoration:underline;
        text-underline-offset:3px; text-decoration-thickness:1px}
.creds{font-size:10.5px; color:var(--muted); margin:0; line-height:1.55; opacity:.8}
.creds a{color:var(--muted)}

/* ---------------------------------------------------------------- modals */
.modal[hidden]{display:none}
.modal{
  position:fixed; inset:0; z-index:50; background:rgba(20,24,22,.42);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; backdrop-filter:blur(1.5px);
}
@media (min-width:560px){ .modal{align-items:center; padding:20px} }
.sheet{
  position:relative; width:100%; max-width:430px;
  background:var(--card); border:1px solid var(--rule);
  border-radius:10px 10px 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));
  max-height:88dvh; overflow-y:auto;
}
@media (min-width:560px){ .sheet{border-radius:6px; padding-bottom:26px} }
.sheet h3{
  font-family:"Roboto Slab",Georgia,serif; font-weight:600;
  font-size:22px; margin:0 0 12px;
}
.sheet h4.subhead{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:22px 0 10px;
}
.sheet p{font-size:14.5px; margin:0 0 11px}
.fine{font-size:12px; color:var(--muted)}
.close{position:absolute; top:16px; right:14px; background:none; border:0;
       color:var(--muted); padding:8px; cursor:pointer}

.tallies{display:flex; gap:22px}
.tally b{display:block; font-family:"Roboto Slab",Georgia,serif;
         font-size:27px; font-weight:500; font-variant-numeric:tabular-nums}
.tally span{font-size:11.5px; color:var(--muted)}

.dist{display:flex; flex-direction:column; gap:5px}
.distrow{display:flex; align-items:center; gap:9px; font-size:12.5px}
.distrow .lab{width:92px; flex:none; color:var(--muted)}
.distrow .barfill{
  background:var(--rail); color:var(--paper); height:19px; border-radius:2px;
  min-width:20px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:6px; font-size:11px; font-variant-numeric:tabular-nums;
}
.distrow.best .barfill{background:var(--set)}

.endnote{color:var(--muted)}
.answer{margin:14px 0 4px; border-top:1px solid var(--rule)}
.answer div{display:flex; justify-content:space-between; gap:12px;
            padding:7px 0; border-bottom:1px solid var(--rule); font-size:14px}
.answer .nm{font-family:"Roboto Slab",Georgia,serif; font-weight:500}
.answer .vl{color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.basis{font-size:11.5px; color:var(--muted); margin:8px 0 0}
.grid{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:19px;
      line-height:1.25; letter-spacing:.16em; color:var(--muted); margin:16px 0 14px}
.acts{display:flex; gap:9px}
.acts button{
  flex:1; height:44px; border-radius:3px; font-family:inherit; font-size:14.5px;
  border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer;
}
.acts .primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}

@media (prefers-reduced-motion: reduce){ .tile{transition:none} }