/* how to play: the text never scrolls. Every tab is short (the tab row itself swipes sideways),
   and howto.js shrinks the example and the text a little if a small screen still can't fit them */
.hbox{width:100%;max-width:440px;height:min(680px,100%);height:min(680px,calc(100dvh / var(--ui) - 32px));display:flex;flex-direction:column;padding:12px}
.hhead{display:flex;align-items:center;gap:6px}
.htabs{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:2px 8px;min-width:0;
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.htabs::-webkit-scrollbar{display:none}
.htabs button{flex:none;border:0;background:none;color:var(--muted);font:600 13px var(--body);padding:7px 12px;border-radius:999px;white-space:nowrap;cursor:pointer;transition:color .18s,background .18s}
.htabs button:hover{color:var(--text)}
.htabs button[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.hmain{flex:1;display:flex;flex-direction:column;min-height:0}
.hstage{margin-top:10px;height:240px;flex:none;border-radius:18px;border:1px solid var(--line);position:relative;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 90% at 0% 0%,var(--glow-a),transparent 60%),radial-gradient(90% 90% at 100% 100%,var(--glow-b),transparent 60%),var(--well);font-size:14px}
@media (max-height:700px){.hstage{height:200px}}
@media (max-height:600px){.hstage{height:170px}}
.htext{flex:1;min-height:0;overflow:hidden;padding:12px 6px 0}
.tag{display:inline-block;font:600 11.5px var(--body);padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.htext h3{margin:8px 0 8px;font:800 23px/1.15 var(--display);color:var(--text);letter-spacing:-.005em}
.htext ul{margin:0;padding-left:18px;color:var(--muted)}
.htext li{margin:6px 0;line-height:1.45}
.htext li b{color:var(--text);font-weight:600}
.hfoot{display:flex;align-items:center;gap:10px;padding:10px 4px 2px}
.dots{flex:1;display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line2);transition:width .25s var(--ease),background .25s}
.dots i.on{width:18px;background:var(--accent)}
.hfoot .btn{min-height:44px}
#hBack{display:none}
/* the tutorial button sits in the bottom bar; on a phone it takes the dots' place */
.htry[hidden]{display:none}
.htry{white-space:nowrap;padding-left:12px;padding-right:12px}
.htry:not([hidden])~.dots{display:none}
@media (max-width:899px),(max-height:559px){.hfoot .htry{flex:1}}
/* the other rules: a name, then a line or two */
#hList.more{padding:0;list-style:none}
#hList.more li{margin:0;padding:10px 2px;border-bottom:1px solid var(--line)}
#hList.more li:last-child{border-bottom:0}
#hList.more li>b:first-child{display:block;font:700 15px var(--display);color:var(--text);margin-bottom:1px}
@media (min-width:900px) and (min-height:560px){
  .hbox{max-width:960px;height:min(560px,100%);height:min(560px,calc(100dvh / var(--ui) - 32px));padding:16px}
  .htabs{justify-content:safe center;gap:4px}
  .hmain{flex-direction:row;gap:22px;margin-top:14px}
  .hstage{height:auto;flex:1.1;margin:0;font-size:20px}
  .htext{flex:1;padding:6px 4px 0}
  .htext h3{font-size:30px}
  .htext li{font-size:15px;margin:9px 0}
  #hBack{display:inline-flex}
  .htry:not([hidden])~.dots{display:flex}
  .dots{order:-1}
}
/* a phone on its side: example and text side by side */
@media (min-width:640px) and (max-height:559px){
  .hbox{max-width:960px}
  .hmain{flex-direction:row;gap:16px;margin-top:8px}
  .hstage{height:auto;flex:1;margin:0}
  .htext{flex:1;padding:2px 4px 0}
  #hList.more{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  #hList.more li:nth-last-child(2):nth-child(odd){border-bottom:0}
}
/* the examples (howto.js exDemo): a small board, a tag on each edge where two cards touch, a caption.
   exFit zooms the whole thing to fill the stage */
.ex-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.ex-lbl{font:600 11px var(--body);color:var(--muted);letter-spacing:.04em}
.ex{position:relative;display:grid;gap:.3em;padding:.35em;border-radius:.8em;background:var(--board);border:1px solid var(--line2);font-size:16px}
.ex.big{font-size:20px}
.ex .c{width:4.6em;height:5.52em;border-radius:.45em;background:var(--cell-bg);position:relative}
.ex .c .card{position:absolute;top:0;right:0;bottom:0;left:0;font-size:.92em}
.ex-tag{position:absolute;z-index:5;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .2s,transform .3s var(--spring);
  font:800 .82em var(--display);padding:.15em .45em;border-radius:.45em;background:var(--surf2);border:1.5px solid var(--gold-tag);color:var(--gold-tag);white-space:nowrap}
.ex-tag.bad{border-color:var(--crit);color:var(--crit)}
.ex-tag.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ex-tag.on.old{opacity:.35}
.ex-cap{font:800 14px var(--display);font-style:italic;text-transform:uppercase;color:var(--accent-ink);min-height:18px;opacity:0;transition:opacity .25s;text-align:center}
.ex-badge{position:absolute;bottom:-.5em;left:50%;transform:translateX(-50%);z-index:6;font:800 .55em var(--display);letter-spacing:.04em;text-transform:uppercase;
  padding:.15em .5em;border-radius:.4em;background:#ffd76a;color:#2a1a00;white-space:nowrap}
.ex-cap.on{opacity:1}.ex-cap.bad{color:var(--crit)}

#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:var(--z-toast);
  background:var(--surf2);border:1px solid var(--line2);color:var(--text);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;
  transition:opacity .22s,transform .3s var(--spring);max-width:calc(90vw / var(--ui));text-align:center;box-shadow:0 18px 40px rgba(var(--sh),calc(.7*var(--shk)))}
#toast.on{opacity:1;transform:translate(-50%,0)}