@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/fraunces-700.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/franklin-500.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/franklin-600.woff2") format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/franklin-700.woff2") format("woff2")}
@font-face{font-family:"Fraunces Fallback";src:local("Liberation Serif"),local("Times New Roman"),local("Times"),local("Nimbus Roman");size-adjust:106.9%;ascent-override:97.8%;descent-override:25.5%;line-gap-override:0%}
@font-face{font-family:"Franklin Fallback";src:local("Liberation Sans"),local("Arial"),local("Helvetica");size-adjust:107.8%;ascent-override:96.6%;descent-override:24.6%;line-gap-override:0%}

:root{
  --ink:#121212;--ink2:#555;--ink3:#8a8a86;--line:#e2e2de;--soft:#f5f5f2;--bg:#fff;
  --R:#e5534b;--B:#3b7ddd;--Y:#f2bf2a;--G:#36a96a;--P:#8a5cd8;
  --ok:#1f9d55;--no:#d23c3c;
  --serif:Fraunces,"Fraunces Fallback",serif;--sans:"Libre Franklin","Franklin Fallback",sans-serif;
  --pad:16px;
}
*{box-sizing:border-box}
html{color-scheme:light}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
html.rt-drag,html.rt-drag body{overflow:hidden;overscroll-behavior:none}
body{min-height:100vh}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-40px;background:#fff;padding:8px 12px;z-index:9}
.skip:focus{top:8px}

.bar{height:56px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
.logo{font:700 24px/1 var(--serif);letter-spacing:-.5px;display:flex;align-items:center;gap:8px;text-decoration:none}
.nav{display:none;gap:22px;align-items:center;font:600 14px var(--sans);color:var(--ink2)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
.icons{display:flex;gap:10px}
.ic{width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:700 14px var(--sans);text-decoration:none;background:#fff;color:var(--ink)}
.ic.sq{border-radius:8px}

.wrap{padding:8px var(--pad) 12px;max-width:1100px;margin:0 auto}
.title{text-align:center}
.title h1{font:600 22px/1.2 var(--serif);letter-spacing:-.3px;margin:0}
.title p,.chip-row{font:500 13px var(--sans);color:var(--ink2);margin:6px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--soft);font:600 12px var(--sans);color:var(--ink)}

.rules{display:flex;gap:8px;margin-top:8px}
.rule{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:8px 28px 6px 8px;background:#fff;position:relative}
.rule .n{font:700 11px var(--sans);color:var(--ink3);letter-spacing:.6px;text-transform:uppercase}
.rule .t{font:600 14px/1.25 var(--sans);margin-top:4px;overflow-wrap:anywhere}
.rule .st{font:600 11px var(--sans);margin-top:6px;color:var(--ink3);min-height:1.2em}
.rule .tk{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--sans);color:#fff}
.rule .tk:empty{display:none}
.rule.ok{border-color:#bfe3cc;background:#f3faf5}
.rule.ok .tk{background:var(--ok)}
.rule.ok .st{color:var(--ok)}
.rule.no{border-color:#f0c9c6;background:#fdf5f4}
.rule.no .tk{background:var(--no)}
.rule.no .st{color:var(--no)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.sw.red{background:var(--R)}.sw.blue{background:var(--B)}.sw.yellow{background:var(--Y)}.sw.green{background:var(--G)}.sw.purple{background:var(--P)}

.play-grid{display:block}
rt-board{display:block;touch-action:none;margin-top:8px;position:relative;width:100%;min-height:306px;overflow:visible}
[data-piece-tray]{min-height:62px;touch-action:none}
rt-board .boardbox{position:relative;width:100%;margin:0 auto;overflow:visible}
rt-board .board-svg{width:100%;height:auto;display:block}
rt-board .float{position:absolute;left:0;top:0;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));z-index:7}
rt-board .float[hidden]{display:none}
rt-board .tools{position:static;display:flex;width:100%;margin:8px 0 0;justify-content:center;gap:8px;background:transparent;padding:0;z-index:6}
rt-board .tools[hidden]{display:none}
rt-board .tools button{color:#fff;font:700 15px/1 var(--sans);min-height:44px;flex:1;max-width:220px;padding:0 14px;border-radius:999px;border:0;background:var(--ink);display:flex;flex-flow:row nowrap;gap:6px;align-items:center;justify-content:center;white-space:nowrap}
rt-board .tools button + button{border-left:1px solid #444}
rt-board .tools kbd{font:700 11px var(--sans);background:#333;border-radius:4px;padding:1px 5px;color:#ddd}
rt-board.shake .boardbox{animation:shake .28s ease}
@keyframes shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)}}

.tray{display:flex;justify-content:space-between;align-items:flex-end;gap:6px;margin-top:8px;padding:10px 0 4px;border-top:1px solid var(--line)}
.slot{flex:1 1 0;min-width:44px;min-height:44px;width:auto;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:0;padding:4px 2px;font:600 10.5px var(--sans);color:var(--ink2);cursor:pointer}
.slot .pc{height:48px;display:flex;align-items:center}
.slot .nm{text-align:center;line-height:1.2;overflow-wrap:anywhere}
.slot.placed .pc{opacity:.28}
.slot.placed .nm::after{content:" ✓";color:var(--ok)}
.slot.active .pc{width:52px;min-height:40px;border:1.5px dashed #d8a7a4;border-radius:8px;justify-content:center}
.slot.active .pc svg{display:none}
.slot.active .pc::before{content:"in hand";font:700 10px var(--sans);color:var(--R)}

.btn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;font:700 16px var(--sans);background:var(--ink);color:#fff;border:0;width:100%;text-decoration:none;cursor:pointer}
.btn[disabled],.btn.off{background:#e6e6e3;color:#9a9a96;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ok{background:var(--ok)}
.hint{font:500 12px/1.4 var(--sans);color:var(--ink2);text-align:center;margin:8px 0 0}
.hint.left{text-align:left}
.row{display:flex;gap:10px;margin-top:16px}
.row .btn{flex:1}

.hard-chip{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--soft);font:700 12px var(--sans);color:var(--ink)}
.hard-chip input{width:16px;height:16px;accent-color:var(--ink);margin:0}
.desk-only{display:none}
.phone-hint{margin-top:6px}
.rules-col > h2{display:none}

dialog{border:0;border-radius:18px;padding:22px 20px;max-width:min(420px,calc(100% - 32px));box-shadow:0 16px 50px rgba(0,0,0,.28)}
dialog::backdrop{background:rgba(0,0,0,.42)}
dialog h2{font:600 24px var(--serif);margin:0 0 8px}
dialog p{font:500 14px/1.45 var(--sans);color:var(--ink2);margin:0 0 16px}
.lock-error{color:var(--no);font-weight:700}
#share-sheet{width:min(420px,100%);margin:auto auto 0;border-radius:22px 22px 0 0;padding:12px 20px 24px}
.grab{width:40px;height:5px;border-radius:3px;background:#d6d6d2;margin:0 auto 12px}
.share-text{border:1.5px solid var(--line);border-radius:14px;padding:14px;background:var(--soft);font:600 14px/1.28 var(--sans);white-space:pre;overflow:auto}
.toast{position:fixed;left:50%;top:64px;transform:translateX(-50%);background:var(--ink);color:#fff;font:700 14px var(--sans);padding:11px 18px;border-radius:999px;z-index:8;white-space:nowrap}

.reveal{text-align:center}
.eyebrow{font:600 13px var(--sans);color:var(--ink2)}
.badge{width:118px;height:118px;border-radius:50%;margin:10px auto 0;display:grid;place-items:center;background:#f5f5f2;border:3px solid #e2e2de;overflow:hidden}
.badge svg{width:92px;height:92px;display:block}
.badge.common{background:#f5f5f2;border-color:#e2e2de}
.badge.uncommon{background:#e7f1ff;border-color:#b9d2f5}
.badge.rare{background:#e5f8fb;border-color:#9ad7e2}
.badge.epic{background:#f1eafd;border-color:#d9c8f7}
.badge.legendary{background:#fff6dd;border-color:#f0d48a}
.tier-name{font:700 clamp(32px, 11vw, 44px)/1 var(--serif);margin:12px 0 0;letter-spacing:-.5px}
.pct{font:700 19px var(--sans);margin:8px 0 0}
.base{font:500 13px var(--sans);color:var(--ink2);margin-top:4px}
.tiers{margin-top:12px;font:600 11px/1.5 var(--sans);color:var(--ink2)}
.tiers b{color:#4b2a8f;background:#f1eafd;border-radius:4px;padding:1px 4px}
.mine{display:flex;gap:14px;align-items:flex-start;text-align:left;margin-top:16px;padding:14px;border-radius:14px;background:var(--soft)}
.mine > div{min-width:0}
.mine h3{font:700 15px var(--sans);margin:0}
.mine p{font:500 12.5px/1.4 var(--sans);color:var(--ink2);margin:4px 0 0}
.rule-results{list-style:none;padding:0;margin:8px 0 0}
.rule-results li{font:600 13px/1.35 var(--sans);margin:0 0 4px;overflow-wrap:anywhere}
.rule-results .met{color:var(--ok)}
.rule-results .miss{color:var(--no)}
.failbox{border:1.5px solid #f0c9c6;background:#fdf5f4;border-radius:14px;padding:14px;margin-top:14px;text-align:left}

.heat-sec{margin-top:28px;text-align:left}
.heat-sec h2{font:600 22px/1.2 var(--serif);margin:0}
.sub{font:500 13px var(--sans);color:var(--ink2);margin:4px 0 0}
.toggles{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.toggles button{min-height:44px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);font:600 13px var(--sans);background:#fff;display:flex;align-items:center;gap:6px;cursor:pointer}
.toggles button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.heat{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:360px;margin:12px auto 0}
.heat-cell{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font:700 12px var(--sans);color:#333}
.h0,.h5{background:#fbf7f7;color:#5c3030}.h10,.h15{background:#f8e6e4;color:#5c3030}.h20,.h25{background:#f4d4d0;color:#5c3030}
.h30,.h35{background:#efc2bc;color:#4a2424}.h40,.h45{background:#eab0a8;color:#4a2424}.h50,.h55{background:#e49d94;color:#3f1e1e}
.h60,.h65{background:#de8b82;color:#3f1e1e}.h70,.h75{background:#d97a70;color:#fff}.h80,.h85{background:#e08a82;color:#fff}
.h90,.h95,.h100{background:#e7a099;color:#4a2424}
.legend{display:flex;align-items:center;gap:8px;justify-content:center;font:600 11px var(--sans);color:var(--ink2);margin-top:8px}
.legend i{display:block;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fbf7f7,#e7a099)}
.lbl{font:700 11px var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);margin-top:22px}
.top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.t3{border:1.5px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;min-width:0}
.t3 svg{max-width:100%;height:auto}
.board-wrap{position:relative}
.board-hint{position:absolute;left:12px;right:12px;top:42%;transform:none;z-index:3;margin:0;pointer-events:none;background:rgba(255,255,255,.94);border:1.5px dashed var(--ink);border-radius:12px;padding:10px 14px;font:700 14px/1.3 var(--sans);text-align:center}
.coach{position:absolute;left:8px;right:8px;top:8px;z-index:8;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;text-align:left}
.coach p{margin:0 0 10px;font:600 14px/1.35 var(--sans);color:#fff}
.coach .btn{height:44px;font-size:16px}
rt-board.coach-place,rt-board.coach-rotate,rt-board.coach-rule{outline:3px solid var(--ink);outline-offset:4px}
.how{margin:8px auto 0;max-width:420px;text-align:left;font:500 13px/1.4 var(--sans);color:var(--ink2)}
.how summary{cursor:pointer;font-weight:700;color:var(--ink)}
.next{margin:8px 0 0;font:600 13px var(--sans);color:var(--ink2)}
.heat-cell.mode{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#f7f5f4}
.heat-cell.mode b,.heat-cell.mode small{position:relative;z-index:1}
.heat-cell.mode small{font:700 11px/1.1 var(--sans);text-align:center}
.fill{position:absolute;inset:0}
.fill.red{background-color:var(--R)}.fill.blue{background-color:var(--B)}.fill.yellow{background-color:var(--Y)}.fill.green{background-color:var(--G)}.fill.purple{background-color:var(--P)}
.fill.stripes{background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.4) 3px 6px)}
.fill.dots{background-image:radial-gradient(circle,rgba(255,255,255,.7) 1.2px,transparent 1.4px);background-size:8px 8px}
.fill.checks,.fill.grid{background-image:linear-gradient(rgba(255,255,255,.28) 50%,transparent 50%),linear-gradient(90deg,rgba(255,255,255,.28) 50%,transparent 50%);background-size:8px 8px}
.fill.bars{background-image:repeating-linear-gradient(transparent 0 5px,rgba(90,60,0,.28) 5px 8px)}
.fill.rings,.fill.cross{background-image:radial-gradient(circle,transparent 2px,rgba(255,255,255,.65) 2.4px,transparent 3.4px);background-size:10px 10px}
.fill.l0{opacity:.15}.fill.l20{opacity:.3}.fill.l40{opacity:.5}.fill.l60{opacity:.7}.fill.l80{opacity:.85}.fill.l100{opacity:1}
.t3 b{display:block;font:700 13px var(--sans);margin-top:4px}
.t3 small{font:600 11px var(--sans);color:var(--ink2)}
.streaks{display:flex;gap:10px;margin-top:10px}
.streaks div,.sc{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px}
.streaks b,.sc b{font:700 26px/1 var(--serif)}
.streaks span,.sc span{display:block;font:600 12px var(--sans);margin-top:4px}
.strip{display:flex;gap:6px;margin-top:8px}
.strip div{flex:1;text-align:center;border-radius:10px;background:var(--soft);padding:6px 0;font:600 10.5px var(--sans);color:var(--ink2)}
.strip b{display:block;font-size:16px}
.strip .today{background:#f1eafd;color:#4b2a8f;outline:2px solid #d9c8f7}
.st2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hist{margin-top:8px}
.hist a,.rowk{display:flex;justify-content:space-between;gap:12px;font:600 13px var(--sans);padding:10px 0;border-top:1px solid var(--line);text-decoration:none}
.rowk span{color:var(--ink2);font-weight:500}
.panel{max-width:640px;margin:0 auto}
.panel h1{font:600 28px var(--serif);margin:0}

.empty,.error{max-width:520px;margin:48px auto;text-align:center;padding:0 16px}
.empty h1,.error h1{font:600 32px var(--serif)}
.tutorial{text-align:left}
.tutorial h2{font:600 26px var(--serif)}

.reveal .badge{animation:pop .45s ease both}
.reveal .tier-name{animation:rise .45s ease .08s both}
.reveal .pct{animation:rise .45s ease .16s both}
@keyframes pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .reveal .badge,.reveal .tier-name,.reveal .pct,rt-board.shake .boardbox{animation:none}
}

.pieces-col h2{display:none}
.pieces-col .lock{margin-top:8px}
.side h2{font:700 12px var(--sans);letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
@media (max-width:959px){
  .hint.keys{display:none}
  rt-board .tools kbd{display:none}
  .tiers{overflow-wrap:anywhere}
}

@media (min-width:960px){
  .bar{height:64px;padding:0 36px}
  .logo{font-size:28px}
  .icons{display:none}
  .nav{display:flex}
  .wrap{padding-top:36px;max-width:1280px}
  .title{margin-top:18px}
  .title h1{font-size:34px}
  .play-grid{display:grid;grid-template-columns:minmax(260px,320px) minmax(360px,560px) minmax(260px,320px);gap:48px;align-items:start;justify-content:center;margin-top:36px}
  .rules{flex-direction:column;gap:14px;margin-top:0}
  .rule{padding:18px 20px;border-radius:14px}
  .rule .t{font-size:20px;margin-top:6px}
  .rule .n{font-size:12px}
  .rule .st{font-size:13px;margin-top:8px}
  .rule .tk{width:28px;height:28px;font-size:15px;top:16px;right:16px}
  .pieces-col h2,.rules-col > h2,.desk-only{display:block}
  .phone-hint{display:none}
  .wrap{padding-top:28px;padding-bottom:32px}
  rt-board{min-height:480px}
  rt-board .boardbox{width:min(100%,480px)}
  rt-board .tools{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:max-content;margin:0;background:var(--ink);border-radius:999px;padding:4px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
  rt-board .tools button{background:transparent;max-width:none;flex:none;font-size:13px}
  [data-piece-tray]{min-height:250px}
  .pieces-col .tray{display:grid;grid-template-columns:1fr 1fr;border-top:0;gap:12px;margin-top:0;padding-top:0}
  .pieces-col .slot{width:auto;border:1.5px solid var(--line);border-radius:14px;min-height:118px;justify-content:center;font-size:13px}
  .pieces-col .slot .pc{height:64px}
  .pieces-col .lock{margin-top:22px}
  .heat{max-width:440px}
  .top3{max-width:720px}
  #share-sheet{margin:auto;border-radius:22px}
}

.textbtn{border:0;background:transparent;color:var(--ink2);font:600 13px var(--sans);padding:0 4px;cursor:pointer;text-decoration:none}
.site-foot{display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center;padding:22px 16px 32px;border-top:1px solid var(--line);color:var(--ink2);font:600 13px var(--sans)}
.site-foot a{color:inherit;text-decoration:none}
.narrow{max-width:440px;margin:0 auto;padding:22px 16px 32px}
.narrow h1{font:600 32px/1.1 var(--serif);letter-spacing:-.4px;margin:8px 0}
.narrow h2{font:600 18px/1.2 var(--serif);margin:18px 0 6px}
.narrow p{font:500 15px/1.45 var(--sans);color:var(--ink2)}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.stack label{font:700 13px var(--sans)}
.stack input[type="email"]{height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font:500 16px var(--sans)}
.notice{background:var(--soft);border-radius:12px;padding:10px 12px;color:var(--ink)}
.draft{background:#fff6d8;color:#5c4a12;border-radius:12px;padding:10px 12px;font:700 13px/1.4 var(--sans)}
.free{background:#e9f6ee;color:#17693b;border-radius:12px;padding:8px 12px;text-align:center;font:700 14px var(--sans)}
.hero{text-align:center}
.plans{display:flex;gap:10px}
.plan{flex:1;border:1.5px solid var(--line);border-radius:14px;padding:12px;display:block;cursor:pointer}
.plan:has(input:checked){border:2.5px solid var(--ink)}
.plan input{position:absolute;opacity:0}
.plan b{display:block;font:700 22px var(--sans)}
.plan span{font:600 12.5px var(--sans);color:var(--ink2)}
.perks{list-style:none;padding:0;margin:16px 0}
.perks li{padding:8px 0;border-top:1px solid var(--line);font:600 14px/1.35 var(--sans)}
.perks li:first-child{border-top:0}
.perks small{display:block;font:500 12px/1.35 var(--sans);color:var(--ink2)}
.never{background:var(--soft);border-radius:12px;padding:10px 14px;font:500 13px/1.45 var(--sans);color:var(--ink2)}
.never b{color:var(--ink)}
.repair{margin:12px 0;padding:12px;border:1.5px solid var(--line);border-radius:14px}
.hist a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;font:600 14px var(--sans)}