:root{--paper:#f6f1e2;--paper-2:#fffdf6;--grid:#6096d229;--margin-red:#de545473;--ink:#1e2a5a;--ink-soft:#1e2a5ab3;--pencil:#7a7a7a;--pencil-light:#b9b9b9;--red:#d8312f;--hl-yellow:#ffe96b;--hl-pink:#ffb3c6;--hl-green:#c5f07a;--sticky:#fff59d;--fire:#e2492b;--frost:#2b7fd3;--storm:#8146c8;--arcane:#1e4fa8;--nature:#3b9b52;--shadow:#c9418a;--font-marker:"Permanent Marker", "Patrick Hand", cursive;--font-ui:"Patrick Hand", "Comic Sans MS", cursive;--font-hand:"Caveat", "Patrick Hand", cursive;--hand-radius:255px 15px 225px 15px / 15px 225px 15px 255px;--hand-radius-2:15px 255px 15px 225px / 225px 15px 255px 15px;--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--paper-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;background-color:var(--paper);background-image:linear-gradient(90deg, transparent 0 71px, var(--margin-red) 71px 73px, transparent 73px), repeating-linear-gradient(0deg, transparent 0 23px, var(--grid) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--grid) 23px 24px);overflow:hidden}body:before{content:"";background-image:var(--paper-noise);pointer-events:none;z-index:0;opacity:.8;position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 13px 20%,#d9d2c0 0 9px,#0000001f 10px,#0000 12px),radial-gradient(circle at 13px,#d9d2c0 0 9px,#0000001f 10px,#0000 12px),radial-gradient(circle at 13px 80%,#d9d2c0 0 9px,#0000001f 10px,#0000 12px);width:26px;position:fixed;top:0;bottom:0;left:24px}[hidden]{display:none!important}#app{z-index:1;height:100%;position:relative}.screen{height:100%}b{font-weight:700}.red{color:var(--red)}.btn{font:20px/1 var(--font-ui);color:var(--ink);background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--hand-radius);cursor:pointer;transition:transform .15s var(--ease-out), box-shadow .15s, background-color .15s, opacity .2s;padding:11px 26px;box-shadow:2px 3px #1e2a5a40}.btn:hover:not(:disabled){transform:translate(-1px,-2px)rotate(-1deg);box-shadow:4px 5px #1e2a5a40}.btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px #1e2a5a40}.btn:focus-visible{outline:2px dashed var(--red);outline-offset:3px}.btn:disabled{opacity:.45;cursor:default;box-shadow:none}.btn-primary{background:var(--hl-yellow)}.btn-quiet{box-shadow:none;border-style:dashed;padding:9px 18px;font-size:17px}.link-btn{font:700 16px var(--font-hand);color:var(--pencil);cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:4px 6px;-webkit-text-decoration:underline wavy #7a7a7a99;text-decoration:underline wavy #7a7a7a99}.link-btn:hover{color:var(--ink)}#title-screen{justify-content:center;align-items:center;padding:24px 16px;display:flex;position:relative}.title-wrap{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.title{font:76px/1.05 var(--font-marker);color:var(--ink);text-shadow:3px 3px 0 var(--hl-yellow), 4px 4px 0 #1e2a5a1f;animation:rise .7s var(--ease-out) both;margin:0;transform:rotate(-2deg)}.title .amp{color:var(--red);font-family:var(--font-hand);font-size:.95em;font-weight:700}.tagline{font:700 24px var(--font-hand);color:var(--pencil);animation:rise .7s .1s var(--ease-out) both;margin:4px 0 0}.title-canvas{width:min(620px,92vw);height:210px;animation:rise .7s .2s var(--ease-out) both}.menu{animation:rise .7s .3s var(--ease-out) both;flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.fine-print{font:700 16px var(--font-hand);color:var(--pencil);margin:12px 0 0}.fine-print a{color:var(--pencil);text-underline-offset:3px;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.sticky{background:var(--sticky);width:270px;font:16px/1.35 var(--font-ui);color:#3a3320;animation:rise .7s .4s var(--ease-out) both;padding:14px 18px 16px;position:absolute;bottom:max(24px,8vh);right:max(24px,6vw);transform:rotate(2.5deg);box-shadow:2px 4px 10px #503c142e,inset 0 -30px 30px -30px #0000000f}.sticky:before,.rules-note:before{content:"";background:#ffffff73;border-left:1px dashed #0000001a;border-right:1px dashed #0000001a;width:70px;height:22px;position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(-3deg)}.sticky h2{font:22px var(--font-marker);color:var(--ink);margin:0 0 6px}.sticky p{margin:0 0 8px}.doodle{color:var(--pencil);font:700 28px var(--font-hand);opacity:.45;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute}.doodle-star{font-size:40px;top:14%;left:12%;transform:rotate(-12deg)}.doodle-bolt{font-size:34px;top:12%;right:14%;transform:rotate(14deg)}.doodle-zzz{bottom:12%;left:10%;transform:rotate(-8deg)}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}#duel-screen{grid-template-rows:auto 1fr auto;display:grid}.hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px 28px 4px;display:grid}.wizard-panel{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--hand-radius);flex-direction:column;justify-self:start;gap:4px;min-width:230px;padding:8px 18px 10px;transition:box-shadow .3s;display:flex;transform:rotate(-1deg);box-shadow:2px 3px #1e2a5a2e}.wizard-panel.is-right{text-align:right;border-radius:var(--hand-radius-2);justify-self:end;align-items:flex-end;transform:rotate(1deg)}.wizard-panel.is-active{box-shadow:2px 3px 0 #1e2a5a2e, 0 0 0 4px var(--hl-yellow)}.wizard-name{font:21px var(--font-marker)}.wizard-title{font:700 16px var(--font-hand);color:var(--pencil);margin-left:8px}.pips{align-items:center;gap:3px;display:flex}.hp-heart,.ap-star{width:24px;height:24px;overflow:visible}.hp-heart path{fill:var(--red);stroke:var(--ink);stroke-width:1.6px;stroke-linejoin:round;transition:fill .3s}.hp-heart.is-lost path{fill:none;stroke:var(--pencil-light)}.hp-heart .scribble{fill:none;stroke:var(--red)}.hp-heart.is-hit{animation:heart-break .6s var(--ease-out)}@keyframes heart-break{30%{transform:scale(1.5)rotate(-12deg)}}.ap-star polygon{fill:var(--hl-yellow);stroke:var(--ink);stroke-width:1.6px;stroke-linejoin:round;transition:fill .2s,stroke .2s}.ap-star.is-spent polygon{fill:none;stroke:var(--pencil-light)}.ap-star.is-queued polygon{fill:none;stroke:var(--ink);stroke-dasharray:3 2}.status-chip{font:700 15px var(--font-hand);border-radius:var(--hand-radius);color:var(--shadow);border:1.5px solid;margin-left:6px;padding:0 8px}.turn-banner{font:28px var(--font-marker);color:var(--ink);white-space:nowrap;transform:rotate(-1.5deg)}.turn-banner span{background:linear-gradient(transparent 52%, var(--hl-yellow) 52% 92%, transparent 92%);padding:0 8px}.turn-banner.is-new{animation:banner-in .5s var(--ease-spring)}@keyframes banner-in{0%{opacity:0;transform:scale(.6)rotate(-8deg)}}.field-wrap{min-height:0;position:relative}#field{width:100%;height:100%;display:block;position:absolute;inset:0}.corner-actions{z-index:5;gap:4px;display:flex;position:fixed;bottom:10px;right:14px}.coach{background:var(--sticky);width:min(500px,100% - 32px);font:17px/1.3 var(--font-ui);color:#3a3320;z-index:3;align-items:flex-start;gap:12px;padding:12px 38px 12px 14px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)rotate(-1deg);box-shadow:2px 4px 10px #503c1433}.coach.is-in{animation:note-in .45s var(--ease-spring)}@keyframes note-in{0%{opacity:0;transform:translate(-50%)translateY(-20px)rotate(3deg)}}.coach-owl{fill:none;width:46px;height:52px;stroke:var(--ink);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none}.coach-owl path:first-child{fill:#fff9ee}.coach-owl .eye{fill:#fff}.coach-owl .pupil{fill:var(--ink);stroke:none}.coach-owl .beak{fill:#f2c230}.coach-text{margin:0}.coach-close{font:22px var(--font-ui);color:var(--pencil);cursor:pointer;background:0 0;border:none;position:absolute;top:2px;right:8px}.rules-note{background:var(--sticky);width:min(540px,100% - 32px);font:16px/1.28 var(--font-ui);color:#3a3320;z-index:4;padding:12px 22px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)rotate(1.2deg);box-shadow:2px 4px 10px #503c1433}.rules-note.is-in{animation:rules-in .45s var(--ease-spring)}@keyframes rules-in{0%{opacity:0;transform:translate(-50%)translateY(24px)rotate(5deg)}}.rules-note h2{font:26px var(--font-marker);color:var(--ink);margin:0 0 6px}.rules-list{margin:0 0 10px;padding-left:22px}.rules-list li{margin-bottom:5px}.rules-list li::marker{color:var(--red);font-weight:700}.rules-foot{justify-content:flex-end;align-items:center;gap:12px;display:flex}.tray{justify-content:center;align-items:flex-end;gap:34px;min-height:236px;padding:8px 20px 18px;display:flex}.hand{align-items:flex-end;gap:16px;display:flex}.tray-actions{flex-direction:column;align-items:center;gap:8px;width:180px;padding-bottom:22px;display:flex}.btn-cast{width:100%;padding:14px 20px;font-size:24px}.btn-cast.is-armed{animation:1.2s ease-in-out infinite wiggle}@keyframes wiggle{0%,to{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}.tray-hint{min-height:2.4em;font:700 16px/1.2 var(--font-hand);color:var(--pencil);text-align:center;margin:0}.card{--el:var(--arcane);--tilt:0deg;background-color:var(--paper-2);background-image:var(--paper-noise);border:2px solid var(--ink);border-radius:var(--hand-radius);cursor:pointer;-webkit-user-select:none;user-select:none;width:150px;height:212px;color:var(--ink);transform:rotate(var(--tilt));transition:transform .25s var(--ease-out), box-shadow .25s, opacity .25s, filter .25s;animation:deal .45s var(--ease-out) both;flex-direction:column;gap:5px;padding:12px 11px 10px;display:flex;position:relative;box-shadow:2px 3px #1e2a5a26,0 10px 20px #3c280a1f}.card:nth-child(2n){border-radius:var(--hand-radius-2)}.hand.is-dealt .card{animation:none}.hand.is-locked .card{pointer-events:none}.hand.is-locked .card:not(.is-queued){opacity:.4;filter:grayscale(.6)}.card:nth-child(2){animation-delay:60ms}.card:nth-child(3){animation-delay:.12s}.card:nth-child(4){animation-delay:.18s}@keyframes deal{0%{opacity:0;transform:translateY(70px)rotate(8deg)}}.card:hover{z-index:2;transform:translateY(-14px)rotate(0)scale(1.03);box-shadow:2px 3px #1e2a5a26,0 18px 30px #3c280a33}.card.is-queued{box-shadow:2px 3px 0 #1e2a5a26, 0 0 0 3px var(--el), 0 18px 30px #3c280a33;transform:translateY(-30px)rotate(0)}.card.is-unaffordable{opacity:.45;filter:grayscale(.7);cursor:not-allowed}.card.is-unaffordable:hover{transform:rotate(var(--tilt))}.card-tape{width:66px;height:20px;font:700 13px/1 var(--font-hand);color:var(--pencil);pointer-events:none;background:#ffec8c8c;border-left:1px dashed #0000001f;border-right:1px dashed #0000001f;place-items:center;display:grid;position:absolute;top:-11px;left:50%;transform:translate(-50%)rotate(-4deg);box-shadow:0 1px 2px #00000014}.card:nth-child(2n) .card-tape{transform:translate(-50%)rotate(4deg)}.card-cost{width:42px;height:42px;font:15px var(--font-marker);color:var(--ink);place-items:center;display:grid;position:absolute;top:-17px;left:-17px}.card-cost svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.card-cost polygon{fill:var(--hl-yellow);stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round}.card-cost span{margin-top:3px;position:relative}.card-order{width:32px;height:32px;font:20px var(--font-marker);color:var(--red);background:var(--paper-2);border:2.5px solid var(--red);animation:pop .3s var(--ease-spring);border-radius:45% 55% 50% 50%/50% 45% 55% 50%;place-items:center;display:grid;position:absolute;top:-14px;right:-12px;transform:rotate(8deg)}@keyframes pop{0%{transform:scale(0)rotate(40deg)}}.card-head{justify-content:space-between;align-items:baseline;gap:4px;padding-left:12px;display:flex}.card-name{font:16px var(--font-marker);letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.card.has-long-name .card-name{font-size:13px}.card.is-queued .card-name{background:linear-gradient(transparent 50%, var(--hl-yellow) 50% 92%, transparent 92%)}.card-symbol{font:700 15px var(--font-hand);color:var(--el);white-space:nowrap}.card-graph{width:100%;height:66px;color:var(--el);border-bottom:1px dashed #7a7a7a59}.card-desc{color:#3a3a3a;flex:1;font-size:13.5px;line-height:1.25}.card-stats{font:700 14px var(--font-hand);color:var(--pencil);justify-content:space-between;display:flex}.card-stats b{color:var(--el)}.card-dirs{gap:6px;display:flex}.card-dir{font:15px var(--font-ui);border:2px solid var(--ink);border-radius:var(--hand-radius);background:var(--paper-2);color:var(--ink);cursor:pointer;flex:1;justify-content:center;align-items:baseline;gap:4px;padding:3px 0;transition:background-color .15s,transform .15s;display:flex}.card-dir small{font:700 13px var(--font-hand);color:var(--pencil)}.card-dir:hover:not(:disabled){background:var(--hl-yellow);transform:translateY(-1px)rotate(-2deg)}.card-dir:disabled{opacity:.3;cursor:not-allowed}.card-back{background-color:var(--paper-2);background-image:var(--paper-noise), repeating-linear-gradient(-45deg, transparent 0 9px, #1e2a5a12 9px 10px);border:2px solid var(--ink);border-radius:var(--hand-radius);width:118px;height:166px;font:44px var(--font-marker);color:#1e2a5a59;animation:deal .45s var(--ease-out) both;place-items:center;display:grid;position:relative;transform:rotate(-2deg);box-shadow:2px 3px #1e2a5a26}.card-back:nth-child(2n){border-radius:var(--hand-radius-2);transform:rotate(2deg)}.card.is-revealed{animation:reveal .5s var(--ease-spring) both;box-shadow:2px 3px 0 #1e2a5a26, 0 0 0 3px var(--el);transform:translateY(-30px)rotate(0)}@keyframes reveal{0%{transform:rotateY(90deg)translateY(-30px)}}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10;background:#463a1e59;place-items:center;padding:24px;animation:.3s both fade;display:grid;position:fixed;inset:0;overflow:auto}@keyframes fade{0%{opacity:0}}.overlay-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;display:flex}.scroll{text-align:center;background-color:#f9efcf;background-image:var(--paper-noise), linear-gradient(90deg, #785a281f, transparent 8%, transparent 92%, #785a281f);max-width:min(600px,100vw - 48px);animation:rise .5s var(--ease-spring) both;border-left:2px solid #785a2859;border-right:2px solid #785a2859;padding:46px 56px 44px;position:relative;box-shadow:0 24px 50px #3c280a4d}.scroll:before,.scroll:after{content:"";background:linear-gradient(#ecdcae,#c9ad74 55%,#e6d3a3);border:2px solid #5a3c1480;border-radius:14px;height:28px;position:absolute;left:-16px;right:-16px;box-shadow:0 4px 8px #0003}.scroll:before{top:-14px}.scroll:after{bottom:-14px}.scroll h1{font:54px/1.1 var(--font-marker);color:var(--ink);text-shadow:3px 3px 0 var(--hl-yellow);margin:0 0 8px;transform:rotate(-2deg)}.scroll-defeat h1{color:var(--red);text-shadow:3px 3px 0 var(--hl-pink)}.scroll-final h1{text-shadow:3px 3px 0 var(--hl-green)}.scroll p{font:20px/1.3 var(--font-ui);color:#4a4030;margin:0 0 6px}.scroll .fine{font:700 17px var(--font-hand);color:var(--pencil);margin-top:10px}.stat-block{text-align:left;border-top:1.5px dashed #5a3c1459;width:min(320px,100%);margin:16px auto 0;padding-top:8px}.stat-title{font:700 18px var(--font-hand)!important;color:var(--pencil)!important;margin:0 0 2px!important}.stat-row{font:700 20px var(--font-hand);color:var(--ink);justify-content:space-between;display:flex}.stat-row b{color:var(--red)}.note{text-align:center;background-color:var(--paper-2);background-image:var(--paper-noise);border:2px solid var(--ink);border-radius:var(--hand-radius);max-width:min(560px,100vw - 48px);animation:rise .5s var(--ease-spring) both;padding:28px 40px 30px;position:relative;transform:rotate(-1deg);box-shadow:3px 4px #1e2a5a33,0 24px 50px #3c280a40}.note:before{content:"";background:#ffec8c99;border-left:1px dashed #0000001f;border-right:1px dashed #0000001f;width:80px;height:24px;position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(-3deg)}.note h2{font:40px/1.1 var(--font-marker);color:var(--ink);margin:0}.note p{font:19px/1.3 var(--font-ui);color:#3a3a3a;margin:6px 0}.note-kicker{text-transform:lowercase;font:700 18px var(--font-hand)!important;color:var(--pencil)!important}.note-title{font:700 19px var(--font-hand)!important;color:var(--pencil)!important;margin-top:0!important}.note-lesson{background:var(--sticky);padding:8px 14px;display:inline-block;transform:rotate(1deg);box-shadow:1px 2px 6px #0000001f;margin-top:10px!important;font-size:17px!important}.note-lesson:before{content:"lesson: ";font:700 17px var(--font-hand);color:var(--red)}.portrait{width:150px;height:170px;margin:6px auto 0;display:block}.note-reward{max-width:min(720px,100vw - 48px)}.reward-cards{flex-wrap:wrap;justify-content:center;gap:22px;margin:26px 0 4px;padding-top:12px;display:flex}.reward-cards .card{animation:deal .45s var(--ease-out) both}.card-heart .card-head{padding-left:0}.card-heart-art{align-self:center;width:76px;height:70px;margin:8px 0 6px}.card-heart-art path{fill:var(--red);stroke:var(--ink);stroke-width:1.3px;stroke-linejoin:round}.reward-cards .card.is-choice:hover{transform:translateY(-12px)rotate(0)scale(1.06)}.note-actions{align-self:start;max-width:min(920px,100vw - 48px)}.action-group{text-align:left;margin-top:22px}.action-group h3{font:26px var(--font-marker);color:var(--ink);margin:0}.note .action-blurb{font:700 18px var(--font-hand);color:var(--pencil);margin:0 0 8px}.action-row{flex-wrap:wrap;gap:26px 22px;padding-top:14px;display:flex}.action-cell{flex-direction:column;align-items:center;gap:4px;width:150px;display:flex}.card.is-listed{cursor:default;animation:none}.note .action-when{font:700 17px var(--font-hand);color:var(--red);text-align:center;margin:6px 0 0}.note .action-users{font:700 15px/1.1 var(--font-hand);color:var(--pencil);text-align:center;margin:0}.toast{background:var(--paper-2);border:2px solid var(--red);border-radius:var(--hand-radius);color:var(--red);font:19px var(--font-ui);opacity:0;pointer-events:none;z-index:20;padding:8px 18px;transition:opacity .2s,transform .2s;position:fixed;top:96px;left:50%;transform:translate(-50%,-10px)rotate(-1deg)}.toast.is-visible{opacity:1;transform:translate(-50%)rotate(-1deg)}@media (width<=860px){.title{font-size:52px}.sticky{width:min(320px,100%);margin-top:18px;position:static;transform:rotate(-1deg)}#title-screen{flex-direction:column;overflow:auto}.doodle{display:none}.hud{grid-template-columns:1fr 1fr;padding:10px 12px 4px}.turn-banner{grid-area:1/1/auto/-1;justify-self:center;font-size:20px}.wizard-panel{min-width:0;padding:6px 12px}.wizard-title{display:none}.tray{flex-direction:column;align-items:center;gap:8px;min-height:0;padding:6px 12px 12px}.hand{gap:10px}.card{width:108px;height:176px;padding:10px 8px 8px}.card-desc,.tray-actions{width:100%;max-width:340px;padding-bottom:0}.corner-actions{top:4px;bottom:auto;right:8px}.scroll{padding:36px 24px}.note{padding:24px 20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}