/*
 * Mahjong 101: a one-screen, playable tutorial. Type stays 24px (h1, h2) and 14px, weight 400
 * (case-studies.css). Tiles are ivory with a purple pixel side; faces are pixel art drawn to
 * canvas by mahjong.js and used as background images.
 */
html,body{height:100%}
html body h1{font-size:var(--type-display)!important}
.mj-page{margin:0;background:#1d1d1f;color:#ffffffd9;overflow:hidden;overscroll-behavior:none}
.mj-page .px-sound-toggle{top:.6rem;bottom:auto;right:.75rem}
.mj-app{
  --tile-w:min(64px,calc((100vw - 5rem) / 7.4),calc((100vh - 23rem) / 5.4));
  position:relative;z-index:1;box-sizing:border-box;display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;gap:.6rem;
  width:100%;max-width:46rem;height:100vh;margin:0 auto;
  padding:.6rem 1rem calc(.75rem + env(safe-area-inset-bottom));
}
@supports(height:100dvh){.mj-app{height:100dvh;--tile-w:min(64px,calc((100vw - 5rem) / 7.4),calc((100dvh - 23rem) / 5.4))}}
.mj-app a{color:inherit}

/* ---------- Top ---------- */
.mj-top{display:flex;align-items:center;gap:1rem;min-height:2rem;padding-right:8rem}
.mj-home{text-decoration:none;color:#ffffff99;white-space:nowrap}
.mj-home:hover,.mj-home:focus-visible{color:#fff}
.mj-brand{margin:0;color:#fff;line-height:1.2;white-space:nowrap}
.mj-progress{display:flex;align-items:center;gap:.75rem}
.mj-steps{flex:1;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:0;padding:0;list-style:none}
.mj-steps li{height:8px;background:#ffffff1c;box-shadow:inset 0 -2px 0 #00000055}
.mj-steps li{cursor:pointer}
.mj-steps li.is-done{background:#b87bfb}
.mj-steps li.is-now{background:#d7b4ff;animation:mj-blink 1s steps(1,end) infinite}
.mj-steps_label{min-width:8.5rem;text-align:right;color:#d7b4ff;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}

/* ---------- Lesson ---------- */
.mj-lesson{min-height:4.9rem}
.mj-title{margin:0;color:#fff;line-height:1.25}
.mj-text{margin:.35rem 0 0;line-height:1.6;color:#ffffffbf}
.mj-text b{color:#fff;font-weight:400}

/* ---------- Stage (the table) ---------- */
.mj-stage{position:relative;display:flex;flex-direction:column;min-height:0;padding:.9rem .5rem;overflow:hidden auto;border:1px solid #ffffff26;background:#141417 radial-gradient(circle at 1px 1px,#ffffff0d 1px,transparent 0) 0 0/1rem 1rem}
.mj-stage:before,.mj-stage:after{content:"";position:absolute;width:10px;height:10px;border:2px solid #b87bfb;pointer-events:none}
.mj-stage:before{top:6px;left:6px;border-right:0;border-bottom:0}
.mj-stage:after{right:6px;bottom:6px;border-left:0;border-top:0}
.mj-stage_inner{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:100%;margin:auto}
.mj-stage.is-enter .mj-stage_inner>*{animation:mj-enter .34s cubic-bezier(.2,.9,.3,1.15) both}
.mj-stage.is-enter .mj-stage_inner>*:nth-child(2){animation-delay:.05s}
.mj-stage.is-enter .mj-stage_inner>*:nth-child(3){animation-delay:.1s}
.mj-stage.is-enter .mj-stage_inner>*:nth-child(4){animation-delay:.15s}

/* ---------- Tiles ---------- */
.mj-tile{
  --tw:var(--tile-w);position:relative;flex:0 0 auto;box-sizing:border-box;width:var(--tw);height:calc(var(--tw) * 4 / 3);
  margin:0;padding:0;border:0;border-radius:3px;background:#f4eedd;cursor:pointer;color:inherit;
  box-shadow:inset 0 0 0 1px #fffdf6,inset 0 -3px 0 #ddd2b6,0 3px 0 #b87bfb,0 5px 0 #7d52c4,0 6px 0 #0b0a0e;
  transition:translate .16s cubic-bezier(.3,1.8,.55,1),box-shadow .16s,filter .16s,opacity .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.mj-tile:before,.mj-tile:after{content:none!important}
.mj-face{position:absolute;inset:2px 2px 4px;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
@media(hover:hover) and (pointer:fine){.mj-tile:not([disabled]):not([aria-pressed="true"]):hover{translate:0 -4px}}
.mj-tile[aria-pressed="true"]{translate:0 -11px;box-shadow:inset 0 0 0 1px #fffdf6,inset 0 -3px 0 #ddd2b6,0 3px 0 #d7b4ff,0 5px 0 #b87bfb,0 6px 0 #0b0a0e,0 0 0 3px #d7b4ff}
.mj-tile:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mj-tile[disabled]{cursor:default}
.mj-tile.is-down{background:#b87bfb;box-shadow:inset 0 0 0 1px #d7b4ff,inset 0 -3px 0 #7d52c4,0 3px 0 #f4eedd,0 5px 0 #ddd2b6,0 6px 0 #0b0a0e}
.mj-tile.is-down .mj-face{background-image:var(--mj-back)!important}
.mj-tile.is-mini{--tw:calc(var(--tile-w) * .72)}
.mj-tile.is-mini .mj-face{inset:1px 1px 3px}
.mj-tile.is-hint{animation:mj-hint .7s steps(2,end) infinite}
.mj-tile.is-shake{animation:mj-shake .34s steps(4,end)}
.mj-tile.is-glow{filter:brightness(1.12) drop-shadow(0 0 6px #d7b4ffcc)}
.mj-tile.is-gone{opacity:0;pointer-events:none}

.mj-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 5px;max-width:calc(var(--tile-w) * 7 + 32px)}
.mj-hand.is-wide{max-width:calc(var(--tile-w) * 9 + 42px)}
.mj-grid{display:grid;grid-template-columns:repeat(3,auto);gap:16px 14px}
.mj-grid .mj-tile{--tw:min(calc(var(--tile-w) * 1.35),72px)}
.mj-melds{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.6rem .75rem;min-height:calc(var(--tile-w) * 4 / 3 + 1.9rem)}
.mj-melds:empty:before{content:"Sets go here";display:grid;place-items:center;width:calc(var(--tile-w) * 3 + 24px);height:calc(var(--tile-w) * 4 / 3 + 1.6rem);border:1px dashed #ffffff33;color:#ffffff55;text-transform:uppercase;letter-spacing:.1em}
.mj-set{position:relative;display:flex;gap:3px;padding:5px 5px 1.55rem;border:1px dashed #d7b4ff88;background:#b87bfb14}
.mj-set.is-new{animation:mj-pop .4s cubic-bezier(.2,1.6,.4,1)}
.mj-set_label{position:absolute;left:0;right:0;bottom:.2rem;text-align:center;color:#d7b4ff;text-transform:uppercase;letter-spacing:.1em;line-height:1.2;white-space:nowrap}
.mj-groups{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .6rem}

/* ---------- Wall, pool, table ---------- */
.mj-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem}
.mj-wall{display:flex;gap:2px;padding:6px;border:1px solid #ffffff1f;background:#0000002e;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mj-wall .mj-tile{--tw:calc(var(--tile-w) * .5);pointer-events:none}
.mj-wall.is-callout{outline:2px solid #d7b4ff;outline-offset:2px;animation:mj-callout .8s steps(2,end) infinite}
.mj-wall_label{color:#ffffff80;text-transform:uppercase;letter-spacing:.1em}
.mj-tray{display:flex;align-items:center;gap:.5rem;min-height:calc(var(--tile-w) * .72 * 4 / 3);color:#ffffff80;text-transform:uppercase;letter-spacing:.1em}
.mj-pool{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:calc(var(--tile-w) * .72 * 4 / 3)}
.mj-table{display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;align-items:center;justify-items:center;gap:.4rem .75rem}
.mj-seat{padding:.25rem .5rem;border:1px solid #ffffff26;color:#ffffff99;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.mj-seat.is-active{color:#1d1d1f;background:#d7b4ff;border-color:#d7b4ff}
.mj-seat--across{grid-column:2;grid-row:1}
.mj-seat--left{grid-column:1;grid-row:2}
.mj-seat--right{grid-column:3;grid-row:2}
.mj-seat--you{grid-column:2;grid-row:3;color:#d7b4ff;border-color:#d7b4ff88}
.mj-spot{grid-column:2;grid-row:2;display:grid;place-items:center;width:calc(var(--tile-w) * 1.4);height:calc(var(--tile-w) * 1.6);border:1px dashed #ffffff33}
.mj-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.mj-actions .button-work{min-width:0}
.mj-stage[data-step="seize"] .mj-actions{flex-wrap:nowrap}
.mj-stage[data-step="seize"] .mj-actions .mj-action{padding:.65rem .75rem}
.mj-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.mj-chip{padding:.3rem .55rem;border:1px solid #ffffff2e;color:#ffffff66;text-transform:uppercase;letter-spacing:.08em;transition:color .2s,border-color .2s,background .2s}
.mj-chip.is-on{color:#1d1d1f;background:#d7b4ff;border-color:#d7b4ff;animation:mj-pop .35s cubic-bezier(.2,1.6,.4,1)}
.mj-sum{margin:0;max-width:28rem;color:#d7b4ff;letter-spacing:.08em;text-align:center;line-height:1.6;min-height:1.4em}

/* ---------- Buttons ---------- */
.mj-controls{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:.6rem}
.mj-controls .button-work{width:100%;min-width:0;margin:0;padding:.75rem .5rem;white-space:nowrap}
.mj-ghost.button-work{color:var(--white);background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff30,inset 2px 2px 0 #ffffff30,inset -2px -2px 0 #00000060,4px 4px 0 #0b0a0e}
.mj-ghost.button-work:hover{background:#ffffff20}
.mj-ghost.button-work:after{content:"]"}
.mj-controls [hidden]{display:none!important}
.mj-controls .button-work[disabled]{opacity:.38;cursor:not-allowed;filter:grayscale(.6)}
.mj-next.is-ready{animation:mj-ready 1.1s steps(2,end) infinite}
.mj-action{padding:.7rem 1rem}

/* ---------- Feedback, banner, receipt ---------- */
.mj-feedback{margin:0;min-height:3.2em;text-align:center;line-height:1.6;color:#ffffffbf}
.mj-feedback[data-tone="good"]{color:#fff}
.mj-feedback[data-tone="good"]:before{content:"✓ ";color:#b87bfb}
.mj-feedback[data-tone="bad"]{color:#ffb3b3}
.mj-feedback[data-tone="bad"]:before{content:"× ";color:#ff7b7b}
.mj-feedback.is-pop{animation:mj-say .3s steps(3,end)}
.mj-banner{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.mj-banner span{display:inline-block;padding:.35rem .9rem;color:#1d1d1f;background:#d7b4ff;box-shadow:4px 4px 0 #7d52c4,8px 8px 0 #0b0a0e;letter-spacing:.2em;animation:mj-banner 1.6s cubic-bezier(.2,1.5,.4,1) both}
.mj-receipt.bp-receipt{width:min(100%,21rem);margin:0;padding:1rem 1rem 1.75rem}
.mj-receipt .bp-receipt_items dd{white-space:nowrap}
.mj-noscript{padding:1rem}

/* ---------- Header button and tile library ---------- */
.mj-link{margin:0;padding:.25rem .4rem;border:0;background:none;color:#d7b4ff;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mj-link:hover,.mj-link:focus-visible{color:#fff}
.mj-lib-open{flex:0 0 auto;margin:0 0 0 auto;padding:.4rem .6rem;border:0;color:#d7b4ff;background:#1d1d1fe6;box-shadow:inset 0 0 0 1px #b87bfb88;font:inherit;line-height:1;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.mj-lib-open:before{content:"▦ "}
.mj-lib-open:hover,.mj-lib-open:focus-visible{color:#fff;box-shadow:inset 0 0 0 1px #b87bfb}
.mj-library{box-sizing:border-box;width:100%;max-width:46rem;height:100vh;max-height:none;margin:0 auto;padding:0;border:0;background:#1d1d1f;color:#ffffffd9;overflow:hidden}
@supports(height:100dvh){.mj-library{height:100dvh}}
.mj-library::backdrop{background:#0b0a0ee6}
.mj-library[open] .mj-lib{animation:mj-enter .3s cubic-bezier(.2,.9,.3,1.15) both}
.mj-lib{--tile-w:min(56px,calc((100vw - 4rem) / 5.2));box-sizing:border-box;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:.7rem;height:100%;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom))}
.mj-lib_top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mj-lib_close{padding:.45rem .7rem;border:0;color:#fff;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff30;font:inherit;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.mj-lib_close:hover,.mj-lib_close:focus-visible{background:#ffffff24}
.mj-lib_filters{display:flex;flex-wrap:wrap;gap:.4rem}
.mj-lib_filters button{padding:.4rem .6rem;border:0;color:#ffffffbf;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff26;font:inherit;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.mj-lib_filters button[aria-pressed="true"]{color:#1d1d1f;background:#d7b4ff;box-shadow:none}
.mj-lib_note{margin:0;min-height:3.2em;line-height:1.6;color:#ffffffbf}
.mj-lib_note b{color:#fff;font-weight:400}
.mj-lib_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-w) + 2.2rem),1fr));align-content:start;gap:.8rem .5rem;padding:.9rem .25rem 1.5rem;overflow:auto;border-top:1px solid #ffffff1f}
.mj-card{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:0;text-align:center}
.mj-card[hidden]{display:none}
.mj-card figcaption{display:flex;flex-direction:column;gap:.1rem;line-height:1.35}
.mj-card_name{color:#fff}
.mj-card_say{color:#d7b4ff}
.mj-card_tile{position:relative;display:inline-block}
/* Copy count: plain text past the tile's top-right corner, lifted by a stacked pixel shadow (the type rule keeps weight 400). */
.mj-badge{position:absolute;top:-.4rem;right:-1.3rem;z-index:2;color:#d7b4ff;line-height:1;letter-spacing:0;white-space:nowrap;text-shadow:1px 1px 0 #0b0a0e,2px 2px 0 #7d52c4,3px 3px 0 #0b0a0e;pointer-events:none}
.mj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mj-lib_grid.is-chars{grid-template-columns:repeat(auto-fill,minmax(calc(var(--tile-w) + 3.2rem),1fr))}

/* ---------- Motion ---------- */
@keyframes mj-blink{50%{opacity:.35}}
@keyframes mj-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mj-hint{50%{filter:brightness(1.2) drop-shadow(0 0 8px #d7b4ff)}}
@keyframes mj-shake{0%{transform:translateX(-5px)}25%{transform:translateX(5px)}50%{transform:translateX(-3px)}75%{transform:translateX(3px)}100%{transform:none}}
@keyframes mj-pop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:none}}
@keyframes mj-callout{50%{outline-color:transparent}}
@keyframes mj-ready{50%{filter:brightness(1.25)}}
@keyframes mj-say{0%{transform:translateY(4px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes mj-banner{0%{transform:scale(.2) rotate(-4deg);opacity:0}20%{transform:scale(1.18) rotate(2deg);opacity:1}35%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:translateY(-12px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .mj-tile,.mj-stage.is-enter .mj-stage_inner>*,.mj-set.is-new,.mj-chip.is-on,.mj-feedback.is-pop,.mj-next.is-ready,.mj-tile.is-hint,.mj-tile.is-shake,.mj-wall.is-callout,.mj-steps li.is-now{animation:none!important;transition:none!important}
  .mj-banner span{animation:none}
}

/* ---------- Small and short screens ---------- */
@media(max-width:480px){
  .mj-app{gap:.5rem;padding-left:.75rem;padding-right:.75rem}
  .mj-top{padding-right:7rem;gap:.75rem}
  .mj-home{display:none}
  .mj-top{padding-right:6.6rem}
  .mj-steps_label{min-width:0}
  .mj-controls{grid-template-columns:1fr 1fr 1.3fr;gap:.45rem}
}
@media(max-height:640px){.mj-lesson{min-height:0}.mj-text{line-height:1.45}.mj-feedback{min-height:2.9em}}
/* Short screens: the busiest tables shrink their tiles so the lesson stays on one screen. */
@media(max-height:720px){
  .mj-stage{padding:.6rem .5rem}
  .mj-stage_inner{gap:.6rem}
  .mj-grid .mj-tile{--tw:calc(var(--tile-w) * 1.1)}
  .mj-grid{gap:12px}
  .mj-stage[data-step="seize"] .mj-tile,.mj-stage[data-step="ready"] .mj-tile{--tw:calc(var(--tile-w) * .72)}
  .mj-stage[data-step="win"] .mj-tile{--tw:calc(var(--tile-w) * .8)}
  .mj-stage[data-step="seize"] .mj-melds{min-height:calc(var(--tile-w) * .72 * 4 / 3 + 1.7rem)}
  .mj-stage[data-step="seize"] .mj-table{grid-template-columns:repeat(4,auto);grid-template-rows:auto;gap:.4rem}
  .mj-stage[data-step="seize"] .mj-seat--left{grid-column:1;grid-row:1}
  .mj-stage[data-step="seize"] .mj-seat--across{grid-column:2;grid-row:1}
  .mj-stage[data-step="seize"] .mj-seat--right{grid-column:3;grid-row:1}
  .mj-stage[data-step="seize"] .mj-spot{grid-column:4;grid-row:1;width:calc(var(--tile-w) * 1.05);height:calc(var(--tile-w) * 1.25)}
  .mj-stage[data-step="seize"] .mj-seat--you{display:none}
  .mj-stage[data-step="seize"] .mj-spot{height:calc(var(--tile-w) * 1.3)}
  .mj-stage[data-step="win"] .mj-tile.is-mini{--tw:calc(var(--tile-w) * .56)}
  .mj-stage[data-step="win"] .mj-set{padding-bottom:1.35rem}
  .mj-receipt.bp-receipt{padding:.75rem .9rem 1.4rem}
  .mj-receipt .bp-receipt_head{display:none}
  .mj-receipt .bp-receipt_items{gap:.15rem}
  .mj-receipt .bp-receipt_total{margin-top:.45rem!important;padding-top:.45rem}
  .mj-receipt.bp-receipt{padding:.6rem .9rem 1.2rem}
  .mj-grid .mj-tile{--tw:var(--tile-w)}
  .mj-grid{gap:10px}
  .mj-stage[data-step="ready"] .mj-hand{display:none}
}