:root{
  --felt:#13201B; --felt-hi:#1D2E27; --felt-line:#2A3F36;
  --stock:#F1EBDD; --stock-2:#E4DAC4; --stock-edge:#CFC3A6;
  --ink:#23201A; --ink-soft:#6E6656;
  --madder:#9A3423; --gilt:#B08D4F;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{max-width:100%;overflow-x:hidden}
html,body{margin:0;padding:0}
body{
  position:relative;
  background:var(--felt);
  background-image:radial-gradient(120% 80% at 50% 0%,var(--felt-hi) 0%,var(--felt) 62%);
  color:var(--stock); font-family:var(--sans); min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:26px 18px 40px;
}
.date{
  font:600 10.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:#7E8F84; margin-bottom:22px; text-align:center;
}
.stage{perspective:1400px; width:100%; display:flex; justify-content:center}
.card{
  position:relative; width:250px; height:428px;
  transform-style:preserve-3d; transition:transform .85s cubic-bezier(.2,.8,.25,1);
  cursor:pointer;
}
.card.flipped{transform:rotateY(180deg)}
.card.locked{cursor:default}
.face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:9px; overflow:hidden;
  box-shadow:0 22px 44px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.07) inset;
}
.face.front{transform:rotateY(180deg); background:var(--stock)}
.face.back{background:#1A2C33}
.face svg{display:block;width:100%;height:100%}
.face img{display:block;width:100%;height:100%;object-fit:cover}

.hint{
  margin-top:20px; font:600 10.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:#7E8F84; height:14px; text-align:center;
  transition:opacity .4s;
}
.hint.gone{opacity:0}

.reading{
  max-width:430px; width:100%; margin-top:6px; text-align:center;
  opacity:0; transform:translateY(14px); transition:opacity .6s .25s, transform .6s .25s;
}
.reading.show{opacity:1;transform:none}
.rule{width:34px;height:1px;background:var(--gilt);opacity:.6;margin:26px auto 20px}
.cname{
  font:400 25px/1.2 var(--serif); color:var(--stock);
  letter-spacing:.02em; margin:0 0 4px;
}
.cnum{
  font:600 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gilt); margin-bottom:12px;
}
.lead{
  font:400 18.5px/1.42 var(--serif); font-style:italic;
  color:#EFE7D6; margin:0 0 16px;
}
.text{font:15.5px/1.65 var(--sans); color:#C3CFC7; margin:0}
.today{
  margin-top:22px; padding:15px 17px; border:1px solid var(--felt-line);
  border-left:2px solid var(--madder); text-align:left; background:rgba(0,0,0,.16);
}
.today b{
  display:block; font:600 9.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--madder); margin-bottom:7px;
}
.today span{font:15px/1.55 var(--sans); color:#D3DCD5}
.empty{
  margin-top:20px; padding:14px; border:1px dashed var(--felt-line);
  font:13px/1.5 var(--sans); color:#7E8F84;
}
footer{
  margin-top:38px; text-align:center;
  font:11.5px/1.6 var(--sans); color:#63756A;
}
footer a{color:#8AA396;text-decoration:none;border-bottom:1px solid #33473D;cursor:pointer}
footer a:hover{color:var(--gilt);border-color:var(--gilt)}
.warn{margin-top:8px;color:#7E6A4A;font-size:10.5px}

/* сетка всех 78 */
.grid{
  display:none; width:100%; max-width:760px; margin-top:30px;
  border-top:1px solid var(--felt-line); padding-top:22px;
}
.grid.on{display:block}
.gh{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#7E8F84;
}
.gsec{font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gilt);opacity:.75;margin:16px 0 8px}
.gwrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.mini{
  position:relative;aspect-ratio:.66;border:1px solid var(--felt-line);
  background:rgba(0,0,0,.2);border-radius:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:600 11px var(--serif);color:#5F7268;transition:.15s;
}
.mini:hover{border-color:var(--gilt);color:var(--gilt)}
.mini.full{color:#C9D3CB;border-color:#3E5A4D}
.mini.full::after{
  content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;
  border-radius:50%;background:var(--gilt);
}

.home{position:absolute;top:22px;left:20px;display:inline-flex;align-items:center;gap:7px;
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:#63756A;text-decoration:none;transition:color .16s;z-index:5}
.home:hover{color:var(--gilt)}
.home svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
@media(max-width:400px){
  .card{width:212px;height:363px}
  .cname{font-size:22px} .lead{font-size:17px}
}