/* generated by dev/doodle/css.py from style.css; hand rules from dev/doodle/extra.css at the end */
body.doodle .vsbar { border-radius: 14px 17px 22px 20px / 16px 24px 22px 14px; }
body.doodle .vsbar::before { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, rgba(255, 255, 255, 0.28); }
body.doodle .plate .ava { border-radius: 8px 9px 8px 14px / 10px 13px 9px 9px; }
body.doodle .bubble { border-radius: 34px 38px 37px 35px / 35px 21px 31px 27px; }
body.doodle .card { border-radius: 24px 27px 18px 19px / 20px 24px 31px 24px; }
body.doodle .card::after { background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, rgba(255, 255, 255, 0.12); }
body.doodle .offer.comeback .ribbon { background: repeating-linear-gradient(-45deg, #6aa3f5 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #a7d0ff; }
body.doodle .offer.comeback .bubble { background: repeating-linear-gradient(-45deg, #dbecff 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffffff; }
body.doodle .timer { background: repeating-linear-gradient(-45deg, #a97b45 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #cb9d5f; border-radius: 20px 33px 31px 33px / 24px 28px 18px 20px; }
body.doodle .timer .bar i { background: repeating-linear-gradient(-45deg, #f3b64e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffe6a8; }
body.doodle .toast { border-radius: 27px 30px 29px 23px / 31px 19px 28px 34px; }
body.doodle .splash .half.red { background: repeating-linear-gradient(-45deg, #d9525c 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ea6771; }
body.doodle .splash .half.blue { background: repeating-linear-gradient(-45deg, #6472e8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #7c8bf6; }
body.doodle .splash .who .ava { border-radius: 13px 19px 17px 15px / 18px 19px 12px 19px; }
body.doodle .pill { background: repeating-linear-gradient(-45deg, #443e58 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #5b5470; border-radius: 20px 25px 31px 20px / 23px 26px 25px 18px; }
body.doodle .pill.money { background: repeating-linear-gradient(-45deg, #37314c 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #4b4463; }
body.doodle .iconbtn { background: repeating-linear-gradient(-45deg, #c9c5dc 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #eceaf6; border-radius: 46% 50% 48% 49% / 47% 46% 48% 50%; }
body.doodle .shield { background: repeating-linear-gradient(-45deg, #7a55c9 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #a07be8; }
body.doodle .step.done .shield { background: repeating-linear-gradient(-45deg, #f0a92e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffd15c; }
body.doodle .bubble-l, body.doodle .bubble-r { background: repeating-linear-gradient(-45deg, #dfe8f7 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffffff; border-radius: 16px 18px 21px 12px / 17px 16px 13px 14px; }
body.doodle .step.done .bubble-l, body.doodle .step.done .bubble-r { background: repeating-linear-gradient(-45deg, #79cf4e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b9f08a; }
body.doodle .progress { border-radius: 15px 25px 15px 21px / 23px 16px 25px 28px; }
body.doodle .progress i { background: repeating-linear-gradient(-45deg, #8f5ce0 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #c99bff; }
body.doodle .battle { border-radius: 27px 20px 30px 20px / 23px 30px 18px 29px; }
body.doodle .tab { background: repeating-linear-gradient(-45deg, #55609f 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #6f7cc9; }
body.doodle .tab.on { background: repeating-linear-gradient(-45deg, #f0a93e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffd98a; }
body.doodle .ribbon-title { background: repeating-linear-gradient(-45deg, #f6c453 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffe9a8; border-radius: 29px 19px 22px 27px / 22px 28px 21px 22px; }
body.doodle .deckrow { background: repeating-linear-gradient(-45deg, #f3b950 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffdf95; border-radius: 15px 15px 21px 13px / 20px 22px 18px 23px; }
body.doodle .ucard.spellcard { background: repeating-linear-gradient(-45deg, #a870e8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #d6b0ff; }
body.doodle .ucard.spellcard.locked { background: repeating-linear-gradient(-45deg, #6a6076 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8d8296; }
body.doodle .grid { border-radius: 15px 16px 13px 17px / 18px 21px 18px 21px; }
body.doodle .ucard { background: repeating-linear-gradient(-45deg, #ef6b78 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ff9aa2; border-radius: 13px 15px 17px 18px / 13px 10px 15px 14px; }
body.doodle .ucard.r-rare { background: repeating-linear-gradient(-45deg, #5f95ee 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #93c6ff; }
body.doodle .ucard.r-epic { background: repeating-linear-gradient(-45deg, #a165e6 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #d3a1ff; }
body.doodle .ucard.r-legendary { background: repeating-linear-gradient(-45deg, #f0b13c 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffe08a; }
body.doodle .ucard.locked { background: repeating-linear-gradient(-45deg, #6a6076 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8d8296; }
body.doodle .ucard .lvl { border-radius: 8px 10px 11px 12px / 6px 10px 7px 11px; }
body.doodle .ucard .bits { border-radius: 7px 8px 6px 5px / 9px 8px 7px 8px; }
body.doodle .ucard .bits i { background: repeating-linear-gradient(-45deg, #5b9de8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #9fd0ff; }
body.doodle .ucard .up-arrow { background: repeating-linear-gradient(-45deg, #6fcf4a 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b9f08a; border-radius: 8px 9px 9px 10px / 8px 10px 10px 7px; }
body.doodle .modal { background: repeating-linear-gradient(-45deg, #8fb5f5 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #bcd6ff; border-radius: 23px 20px 23px 27px / 34px 30px 28px 34px; }
body.doodle .modal .x { background: repeating-linear-gradient(-45deg, #e2505c 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ff8a8a; border-radius: 47% 48% 51% 47% / 51% 50% 47% 52%; }
body.doodle .modal .stats { border-radius: 18px 18px 16px 14px / 13px 12px 14px 14px; }
body.doodle .modal .skill { border-radius: 13px 14px 12px 17px / 15px 13px 17px 12px; }
body.doodle .modal .skill.on { background: repeating-linear-gradient(-45deg, #d4f5a8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #f4ffe4; }
body.doodle .modal .skill .learn { background: repeating-linear-gradient(-45deg, #f0a93e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffd98a; border-radius: 13px 12px 11px 14px / 11px 14px 13px 10px; }
body.doodle .pill.sp { background: repeating-linear-gradient(-45deg, #523619 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #6b4a2a; }
body.doodle .modal .lvbar { border-radius: 15px 16px 15px 19px / 19px 13px 19px 13px; }
body.doodle .modal .lvbar i { background: repeating-linear-gradient(-45deg, #5b9de8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #9fd0ff; }
body.doodle .name-input { border-radius: 11px 10px 10px 16px / 11px 10px 17px 10px; }
body.doodle .big-btn { border-radius: 23px 13px 23px 19px / 21px 15px 19px 17px; }
body.doodle .big-btn.green { background: repeating-linear-gradient(-45deg, #6cc93f 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b4ef7d; }
body.doodle .big-btn.blue { background: repeating-linear-gradient(-45deg, #5a8ce8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8fc0ff; }
body.doodle .big-btn.red { background: repeating-linear-gradient(-45deg, #e05460 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ff9a9a; }
body.doodle .big-btn.orange { background: repeating-linear-gradient(-45deg, #e0782f 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffbf7a; }
body.doodle .toggle { border-radius: 14px 15px 10px 15px / 13px 17px 13px 15px; }
body.doodle .toggle.on { background: repeating-linear-gradient(-45deg, #6cc93f 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b4ef7d; }
body.doodle .segbtn { border-radius: 10px 14px 13px 10px / 9px 12px 9px 15px; }
body.doodle .segbtn.on { background: repeating-linear-gradient(-45deg, #f0a93e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffd98a; }
body.doodle .lrow { background: repeating-linear-gradient(-45deg, #5a66aa 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #6f7cc9; border-radius: 15px 10px 10px 10px / 11px 13px 11px 16px; }
body.doodle .lrow.you { background: repeating-linear-gradient(-45deg, #f0a93e 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffd98a; }
body.doodle .lrow .av { border-radius: 6px 6px 6px 10px / 8px 9px 7px 9px; }
body.doodle .vs-intro .side.red { background: repeating-linear-gradient(-45deg, #d9525c 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ea6771; }
body.doodle .vs-intro .side.blue { background: repeating-linear-gradient(-45deg, #6472e8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #7c8bf6; }
body.doodle .vs-intro .av { border-radius: 17px 21px 28px 28px / 22px 23px 22px 22px; }
body.doodle .results .panel { background: repeating-linear-gradient(-45deg, #8fb5f5 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #bcd6ff; border-radius: 18px 27px 34px 18px / 24px 31px 22px 29px; }
body.doodle .results .panel.win { background: repeating-linear-gradient(-45deg, #f7c057 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #ffe6a0; }
body.doodle .rrow { border-radius: 13px 15px 10px 11px / 12px 15px 11px 10px; }
body.doodle .rrow .av { border-radius: 10px 7px 7px 11px / 10px 9px 11px 11px; }
body.doodle .rrow.unlock { background: repeating-linear-gradient(-45deg, #ffd98a 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #fff3c4; }
body.doodle .rrow .eq { background: repeating-linear-gradient(-45deg, #5a8ce8 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8fc0ff; border-radius: 14px 14px 9px 12px / 9px 12px 11px 9px; }
body.doodle .nextunit { background: repeating-linear-gradient(-45deg, #ffd98a 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #fff3c4; border-radius: 24px 27px 23px 24px / 25px 17px 23px 26px; }
body.doodle .nextunit .av { border-radius: 8px 12px 10px 7px / 11px 7px 8px 10px; }
body.doodle .quitbtn { background: repeating-linear-gradient(-45deg, #6b6484 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8d86a8; border-radius: 10px 16px 11px 9px / 14px 11px 9px 10px; }
body.doodle .prize { background: repeating-linear-gradient(-45deg, #4d4767 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #6a6288; border-radius: 15px 11px 15px 16px / 18px 14px 16px 10px; }
body.doodle .step.done .prize { background: repeating-linear-gradient(-45deg, #6a6288 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #8d84b5; }
body.doodle .prize.ready { background: repeating-linear-gradient(-45deg, #6fcf4a 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b9f07f; }
body.doodle .step.claimed .prize { background: repeating-linear-gradient(-45deg, #3b3652 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #4d4767; }
body.doodle .step .prize.ready { background: repeating-linear-gradient(-45deg, #6fcf4a 0 2.2px, transparent 2.2px 5.6px) left bottom / 100% 36% no-repeat, #b9f07f; }
body.doodle .progress .max { border-radius: 6px 8px 8px 10px / 8px 10px 6px 10px; }
body.doodle .arow { border-radius: 12px 15px 13px 15px / 12px 10px 8px 10px; }
body.doodle .arow .av { border-radius: 7px 11px 9px 11px / 11px 10px 11px 7px; }
/* ---- hand rules (dev/doodle/extra.css) ---- */
body.doodle {
  --ol: #2b2733;
  --font: "Shantell Sans", "Baloo2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}
body.doodle #phone { background: #f4ecd8; }
/* SVG line art (hearts, tab icons, coins) wobbles like the pen */
body.doodle .heart svg, body.doodle .tab svg, body.doodle svg.icon, body.doodle .icon svg { filter: url(#dd-wobble); }
body.doodle .heart .h { stroke: var(--ol); stroke-width: 3.4; }
body.doodle .heart .s { fill: rgba(255, 255, 255, 0.75); }
/* ink-bordered boxes: the border drawn by hand (a displacement filter; static boxes cache it) */
body.doodle .pill, body.doodle .iconbtn, body.doodle .shield, body.doodle .bubble-l, body.doodle .bubble-r, body.doodle .progress,
body.doodle .ribbon-title, body.doodle .deckrow, body.doodle .ucard, body.doodle .modal, body.doodle .big-btn, body.doodle .tab,
body.doodle .lrow, body.doodle .vsbar, body.doodle .card, body.doodle .bubble, body.doodle .timer, body.doodle .toggle,
body.doodle .segbtn, body.doodle .battle, body.doodle .toast, body.doodle .modal .stats, body.doodle .x, body.doodle .nextunit, body.doodle .rrow .eq, body.doodle .modal .skill, body.doodle .modal .skill .learn { filter: url(#dd-wobble); }
body.doodle .modal .skill .learn.off { filter: url(#dd-wobble) grayscale(.6) brightness(.9); }
body.doodle .big-btn.off { filter: url(#dd-wobble) grayscale(.55) brightness(.85); }
/* Shantell is wider than Baloo 2: the tightest labels come down a size */
body.doodle .opt-row .lbl { font-size: 19px; }
body.doodle .opt-row .seg.wrap .segbtn { font-size: 14px; }
body.doodle .card .label { font-size: 24px; }
body.doodle .card .art[data-long] ~ .label { font-size: 20px; }