:root{color-scheme:light;--blue:#347df0;--blue-deep:#173f91;--ink:#152c54;--muted:#7184a5;--paper:#fffdf8;--line:#e6edf7;--gold:#ffbd43;--pink:#f27ade;--cyan:#55dce8;--green:#89cd3e;--shadow:0 16px 42px rgba(26,68,135,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;line-height:1.55}
a{color:inherit}button,input{font:inherit}button{cursor:pointer}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));background:#fff;box-shadow:0 1px 0 rgba(28,65,127,.08);position:sticky;top:0;z-index:10}
.brand{display:inline-flex;gap:10px;align-items:center;font-weight:900;text-decoration:none;font-size:15px;letter-spacing:-.03em}
.brand-mark,.footer-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#ffce51,#ff9f36);color:#fff;font-family:'Jua',sans-serif;font-size:22px;text-shadow:0 2px 0 #d87922;box-shadow:inset 0 -3px 0 rgba(180,91,19,.15)}
.topbar nav{display:flex;gap:32px;font-size:13px;color:#526887;font-weight:700}.topbar nav a{text-decoration:none}.topbar nav a:hover,.source-link:hover{color:var(--blue)}
.source-link{font-size:12px;font-weight:800;color:#607493;text-decoration:none;border:1px solid #dfe7f3;border-radius:99px;padding:8px 12px}
.hero{position:relative;min-height:448px;margin-top:26px;border-radius:28px;padding:54px 60px 52px;color:#fff;background:linear-gradient(112deg,#347df0 0%,#3d85f1 57%,#59b9ef 100%);overflow:hidden;box-shadow:0 22px 45px rgba(38,103,202,.2)}
.hero:before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-28px;top:-185px;background:rgba(148,222,255,.13)}
.hero:after{content:"";position:absolute;width:270px;height:190px;border-radius:50%;right:55px;bottom:-135px;background:rgba(255,255,255,.13)}
.hero-copy{position:relative;z-index:2;max-width:610px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#d4f9ff;letter-spacing:.12em;font-size:10px;font-weight:900}
.live-dot{width:8px;height:8px;background:#8affd1;border-radius:50%;box-shadow:0 0 0 4px rgba(138,255,209,.16)}
.hero h1{font-family:'Jua',sans-serif;font-size:clamp(46px,6vw,74px);letter-spacing:-.055em;line-height:1.05;margin:18px 0 10px;text-shadow:0 4px 0 rgba(23,72,161,.24)}
.hero h1 span{color:#ffdf58;text-shadow:0 4px 0 #dd9c25,0 6px 8px rgba(19,61,139,.15)}
.hero-copy>p{font-size:15px;color:#e7f4ff;margin:0 0 26px}
.hero-meta{display:flex;gap:30px;margin-bottom:27px}.hero-meta>div{display:grid;gap:3px}.meta-label{font-size:10px;font-weight:800;color:#baddff}.hero-meta strong{font-size:12px;color:#fff}
.button{min-height:43px;border:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-size:13px;font-weight:900;padding:0 17px;transition:transform .15s,box-shadow .15s}.button:hover{transform:translateY(-1px)}
.button-light{background:#fff;color:#286cd5;box-shadow:0 5px 0 rgba(22,64,133,.2)}.button-blue{background:var(--blue);color:#fff;box-shadow:0 4px 0 #205ec6}.button-outline{border:1px solid #cbd9ed;background:#fff;color:#3c5d8e;min-height:38px;border-radius:10px}
.hero-art{position:absolute;right:43px;top:38px;width:400px;height:324px;z-index:1}
.letter-tile{position:absolute;display:grid;place-items:center;border:4px solid rgba(255,255,255,.65);border-radius:22px;width:95px;height:104px;font-family:'Jua',sans-serif;font-size:63px;color:#fff;text-shadow:0 4px 0 rgba(31,81,166,.19);box-shadow:0 11px 0 rgba(25,76,163,.22),0 18px 30px rgba(27,74,144,.18);transform:rotate(-8deg)}
.tile-yellow{top:34px;left:76px;background:linear-gradient(150deg,#ffe466,#ffab37);z-index:2}.tile-pink{top:51px;right:56px;background:linear-gradient(150deg,#ff9de5,#eb59d4);transform:rotate(8deg);z-index:2}.tile-cyan{top:142px;left:175px;background:linear-gradient(150deg,#7ff2f5,#23bfe5);transform:rotate(5deg);z-index:3}
.hero-board{position:absolute;left:12px;right:2px;bottom:28px;display:flex;align-items:center;justify-content:center;gap:7px;transform:rotate(-3deg)}.hero-board span{display:grid;place-items:center;width:61px;height:68px;border-radius:13px;background:#f276e0;color:#fff;font-family:'Jua',sans-serif;font-size:40px;text-shadow:0 3px 0 #bc45b9;box-shadow:0 6px 0 #c842be}.hero-board span:nth-child(2n){background:#4ce0eb;text-shadow:0 3px 0 #159cc9;box-shadow:0 6px 0 #1aaacb;transform:translateY(10px)}
.spark{position:absolute;color:#fff3a0;font-size:28px}.spark-one{top:10px;right:93px}.spark-two{top:178px;left:24px;font-size:18px}.cloud{position:absolute;background:#dff8ff;border-radius:99px;opacity:.8}.cloud-one{width:90px;height:21px;left:4px;bottom:4px}.cloud-two{width:68px;height:16px;right:6px;bottom:4px}
.hero-countdown{position:absolute;right:26px;bottom:24px;z-index:4;display:grid;gap:3px;min-width:180px;padding:12px 16px;border:1px solid rgba(255,255,255,.34);border-radius:14px;background:rgba(21,72,158,.35);backdrop-filter:blur(8px)}.countdown-label{font-size:10px;color:#c8e9ff;font-weight:800}.hero-countdown strong{font-variant-numeric:tabular-nums;font-size:17px;letter-spacing:.015em}
.tracker-section{padding-top:76px;padding-bottom:80px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading h2{font-family:'Jua',sans-serif;font-size:36px;letter-spacing:-.035em;margin:3px 0 0;color:#173a75}.section-heading>p{font-size:12px;color:var(--muted);margin:0 0 4px;line-height:1.8}.eyebrow-blue{color:#5590ec}
.tracker-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:18px}.card{background:#fff;border:1px solid #e9eef7;border-radius:20px;box-shadow:var(--shadow)}.score-card,.goal-card{padding:25px 27px 24px;min-height:306px}.card-topline{display:flex;align-items:center;gap:10px}.muted{color:#8392aa;font-size:11px;font-weight:800}.card-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;font-size:15px;font-weight:900}.icon-blue{background:#e9f1ff;color:#4784ed}.icon-gold{background:#fff3d2;color:#e9a521}.icon-cyan{background:#e4fafa;color:#21aebd}.local-badge{margin-left:auto;font-size:10px;font-weight:800;color:#5682c2;background:#f0f6ff;border-radius:99px;padding:5px 9px}
.score-total{display:flex;align-items:baseline;gap:7px;margin:6px 0 12px;color:#1b4eac}.score-total strong{font-family:'Jua',sans-serif;font-variant-numeric:tabular-nums;font-size:52px;letter-spacing:-.04em}.score-total span{font-size:16px;font-weight:900;color:#7692c0}
.score-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:11px 0 15px;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7}.score-stats div{display:grid;gap:3px}.score-stats div+div{border-left:1px solid #edf1f7;padding-left:18px}.score-stats span{font-size:10px;color:#8998ae;font-weight:700}.score-stats strong{font-size:14px;font-weight:900;color:#2d4979;font-variant-numeric:tabular-nums}
.run-form{margin-top:15px}.run-form>label,.baseline-form>label{font-size:11px;font-weight:900;color:#3d567d}.input-row{display:flex;align-items:center;gap:9px;margin-top:6px}.input-row input{height:43px;min-width:0;flex:1;border:1px solid #dce5f1;border-radius:11px;background:#fbfdff;padding:0 12px;color:#19365f;font-size:14px;font-weight:800;outline:none;font-variant-numeric:tabular-nums}.input-row input:focus{border-color:#6d9df2;box-shadow:0 0 0 3px rgba(74,133,233,.12)}.input-row>span{font-size:11px;color:#8998ae;font-weight:800;margin-left:-5px}.input-row .button{flex:none;min-height:42px}.field-hint,.form-message{font-size:10px;color:#8b9bb4;margin:7px 0 0}.form-message{min-height:0;color:#257f61;font-weight:800}.form-message:not(:empty){margin-top:6px}
.starting-score{margin-top:13px;border-top:1px dashed #e6edf5;padding-top:10px}.starting-score summary{font-size:10px;color:#6f83a3;font-weight:800;cursor:pointer}.baseline-form{margin-top:9px}.baseline-form .input-row{margin-top:4px}.baseline-form .input-row input{height:38px;font-size:12px}
.goal-card{background:linear-gradient(140deg,#fff 0%,#fffcf5 100%)}.next-goal{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:21px 0 15px}.next-goal>div{display:grid;gap:2px}.next-goal>div>strong{font-family:'Jua',sans-serif;color:#204f9f;font-size:27px;line-height:1.1}.next-goal>div>span{font-size:11px;color:#7284a1;font-weight:700}.goal-remaining{font-size:11px;color:#d8951e;font-weight:900;white-space:nowrap}.progress-track{height:13px;overflow:hidden;border-radius:20px;background:#eaf0f7;box-shadow:inset 0 2px 3px rgba(44,73,119,.06)}.progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffcb4c,#f6a42b);transition:width .35s}.progress-labels{display:flex;justify-content:space-between;margin-top:6px;color:#91a0b5;font-size:9px;font-weight:800;font-variant-numeric:tabular-nums}.plan-box{display:flex;gap:11px;margin-top:17px;padding:12px 13px;border-radius:13px;background:#f1f6ff}.plan-icon{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:9px;background:#dfeaff;color:#4983e3}.plan-box strong{display:block;font-size:11px;color:#38577f}.plan-box p{font-size:9px;line-height:1.55;color:#8796ad;margin:3px 0 0}.milestone-mini{display:flex;gap:6px;justify-content:space-between;margin-top:15px}.milestone-dot{display:flex;align-items:center;gap:5px;color:#9aa8ba;font-size:9px;font-weight:800;white-space:nowrap}.milestone-dot:before{content:"";width:7px;height:7px;border-radius:50%;background:#dce4ef}.milestone-dot.done{color:#4482d9}.milestone-dot.done:before{background:#58b9ef;box-shadow:0 0 0 3px #e6f7ff}
.history-card{margin-top:18px;padding:21px 24px}.history-heading{display:flex;align-items:center;justify-content:space-between}.history-heading h3{font-family:'Jua',sans-serif;color:#21477e;font-size:22px;margin:0}.text-button{border:0;background:transparent;color:#9a7890;font-size:10px;font-weight:800;padding:8px}.text-button:hover{color:#de6b83}.history-list{margin-top:13px}.history-empty{padding:20px 12px;text-align:center;border-radius:12px;background:#f7f9fc;color:#94a1b4;font-size:11px}.history-row{display:grid;grid-template-columns:1fr 130px 60px;align-items:center;gap:14px;padding:11px 12px;border-top:1px solid #f0f3f8}.history-row:first-child{border-top:0}.history-date{font-size:10px;color:#91a0b5}.history-score{font-size:13px;font-weight:900;color:#385c91;font-variant-numeric:tabular-nums}.history-score small{display:block;font-size:9px;color:#a2aec0;font-weight:600}.delete-run{justify-self:end;border:0;background:#f3f6fb;color:#8a9bb3;border-radius:8px;width:28px;height:28px;font-size:15px}.delete-run:hover{background:#fff0f1;color:#e87884}
.rewards-section{position:relative;overflow:hidden;padding:69px 0 76px;background:linear-gradient(125deg,#2054ab,#1f70ca 70%,#31a6cc);color:#fff}.rewards-section:before,.rewards-section:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09);width:510px;height:510px;pointer-events:none}.rewards-section:before{left:-300px;top:100px}.rewards-section:after{right:-300px;top:-260px}.rewards-section .wrap{position:relative;z-index:1}.section-heading-light h2{color:#fff}.section-heading-light>p{color:#c7e1ff}.section-heading-light .eyebrow{color:#93ecf5}
.reward-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.reward-card{position:relative;min-height:174px;padding:18px 17px 14px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.1);backdrop-filter:blur(5px);transition:transform .2s,background .2s}.reward-card.achieved{background:rgba(255,221,117,.19);border-color:rgba(255,224,125,.65);transform:translateY(-2px)}.reward-threshold{display:flex;align-items:center;justify-content:space-between;color:#d6edff;font-size:10px;font-weight:900}.reward-threshold strong{font-family:'Jua',sans-serif;font-size:20px;color:#ffdf74}.reward-name{min-height:42px;margin-top:15px;color:#fff;font-size:13px;font-weight:900;line-height:1.5}.reward-state{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);font-size:9px;color:#d0e8ff;font-weight:700}.claim-check{display:flex;align-items:center;gap:5px;cursor:pointer}.claim-check input{accent-color:#9bd745;width:14px;height:14px}.claim-check input:disabled{cursor:not-allowed;opacity:.5}.reward-card.claimed .reward-state>span{color:#c7ff92}
.reward-notes{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:15px 17px;border-radius:13px;background:rgba(8,47,117,.24);color:#cfe5ff;font-size:10px;line-height:1.8}.reward-notes>span{font-size:17px}.reward-notes p{margin:0}.reward-notes strong{color:#fff}
.ranking-band{display:flex;align-items:center;gap:15px;margin-top:12px;padding:14px 17px;border-radius:14px;background:#fff;color:#244d88}.ranking-medal{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px;background:#fff0be;color:#cf8e10;font-family:'Jua',sans-serif;font-size:20px}.ranking-band strong{font-size:12px}.ranking-band p{margin:3px 0 0;color:#8193ae;font-size:10px}.ranking-tag{margin-left:auto;padding:7px 10px;border-radius:9px;background:#ebf5ff;color:#3683cf;font-size:9px;font-weight:900;white-space:nowrap}
.guide-section{padding-top:76px;padding-bottom:70px}.guide-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:18px}.guide-card{padding:24px 25px}.guide-title{display:flex;align-items:center;gap:12px;margin-bottom:19px}.guide-number{display:grid;place-items:center;width:41px;height:41px;border-radius:14px;background:#e9f2ff;color:#4482e4;font-family:'Jua',sans-serif;font-size:19px}.guide-number-gold{background:#fff1d5;color:#dc9e28}.guide-title h3{margin:0;color:#284c81;font-family:'Jua',sans-serif;font-size:23px}.step-list{padding:0;margin:0;list-style:none;display:grid;gap:16px}.step-list li{display:flex;align-items:flex-start;gap:10px}.step-list li>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:8px;background:#edf4ff;color:#4784e9;font-size:11px;font-weight:900}.step-list strong{font-size:11px;color:#385883}.step-list p{margin:3px 0 0;color:#8191a8;font-size:10px;line-height:1.7}.step-list b{color:#326fc7}
.checklist{display:grid;gap:8px;margin-top:19px;padding:12px 13px;border-radius:12px;background:#f5f8fc}.checklist label{display:flex;align-items:center;gap:8px;font-size:10px;color:#526986;font-weight:700;cursor:pointer}.checklist input{accent-color:#4688ec;width:15px;height:15px}.eligibility-note{margin:9px 0 0;color:#8a9bb3;font-size:9px;font-weight:700}.eligibility-note.ready{color:#2e9b73}
.rule-list{display:grid;gap:11px;padding:0;margin:0;list-style:none}.rule-list li{display:flex;align-items:flex-start;gap:9px}.rule-symbol{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;background:#f0f6ff;color:#4884e7;font-size:12px;font-weight:900}.rule-list p{margin:1px 0 0;color:#7486a1;font-size:10px;line-height:1.65}.rule-list b{color:#395e91}.score-table-wrap{overflow-x:auto;margin-top:16px}.score-table{width:100%;border-collapse:collapse;text-align:center;font-size:10px;border-radius:10px;overflow:hidden}.score-table caption{text-align:left;padding:0 0 6px;color:#617999;font-size:9px;font-weight:900}.score-table th{background:#f1a332;color:#fff;padding:7px 9px;font-size:9px}.score-table td{border:1px solid #f1e6d4;padding:6px 9px;color:#6c809b;background:#fffbf4}.guide-footnote{border-top:1px dashed #e8edf4;padding-top:12px;margin:13px 0 0;color:#94a0b1;font-size:9px;line-height:1.7}
.phase-card{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;align-items:center;margin-top:18px;padding:21px 24px}.phase-intro{display:flex;gap:10px;align-items:flex-start}.phase-intro h3{margin:1px 0 3px;font-family:'Jua',sans-serif;color:#2e5284;font-size:17px}.phase-intro p{margin:0;color:#8a99af;font-size:9px;line-height:1.65}.phase-list{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.phase-list div{display:grid;gap:3px;padding:10px 9px;border-radius:10px;background:#f4f8fd;text-align:center}.phase-list span{font-size:9px;color:#8293ac}.phase-list strong{font-size:10px;color:#3f6394}.source-footnote{text-align:center;margin:22px 0 0;color:#99a5b7;font-size:9px}.source-footnote a{color:#5a8fdb;font-weight:800;text-decoration:none}.source-footnote a:hover{text-decoration:underline}
.footer{background:#f3f7fc;border-top:1px solid #e6edf5}.footer .wrap{min-height:69px;display:flex;align-items:center;gap:9px;color:#5e7395;font-size:10px;font-weight:800}.footer-mark{width:25px;height:25px;border-radius:8px;font-size:16px}.footer-note{margin-left:auto;color:#95a3b6;font-weight:600}
@media(max-width:900px){.hero{padding-left:38px}.hero-art{right:-21px;transform:scale(.83);transform-origin:right center;opacity:.85}.hero-copy{max-width:55%}.hero-meta{display:grid;gap:10px}.hero-countdown{right:22px;bottom:17px}.tracker-grid{grid-template-columns:1fr 1fr}.score-card,.goal-card{padding-inline:20px}.reward-grid{grid-template-columns:repeat(2,1fr)}.guide-grid{grid-template-columns:1fr}.phase-card{grid-template-columns:1fr}.phase-intro{max-width:550px}}
@media(max-width:620px){.wrap{width:min(100% - 30px,500px)}.topbar{height:60px;padding:0 15px}.brand{font-size:12px}.brand-mark{width:30px;height:30px;font-size:19px}.topbar nav{display:none}.source-link{font-size:10px;padding:7px 9px}.hero{margin-top:13px;min-height:590px;border-radius:21px;padding:34px 25px 190px}.hero-copy{max-width:none}.hero h1{font-size:53px;margin-top:15px}.hero-copy>p{max-width:265px;font-size:13px}.hero-meta{gap:10px;margin-bottom:16px}.hero-meta strong{font-size:10px;max-width:295px}.button{min-height:40px;font-size:11px}.hero-art{top:auto;right:50%;bottom:-8px;transform:translateX(50%) scale(.72);transform-origin:center bottom;opacity:1}.hero-countdown{right:13px;bottom:13px;min-width:146px;padding:9px 11px}.hero-countdown strong{font-size:13px}.countdown-label{font-size:9px}.section-heading{display:block;margin-bottom:18px}.section-heading h2{font-size:31px}.section-heading>p{margin-top:7px;font-size:10px}.tracker-section,.guide-section{padding-top:52px;padding-bottom:56px}.tracker-grid{grid-template-columns:1fr;gap:12px}.score-card,.goal-card{padding:20px}.score-total strong{font-size:47px}.history-card{padding:18px 16px;margin-top:12px}.history-row{grid-template-columns:1fr 90px 30px;gap:5px;padding-inline:6px}.history-score{font-size:11px}.reward-grid{gap:8px}.reward-card{min-height:157px;padding:14px 12px}.reward-threshold strong{font-size:17px}.reward-name{font-size:11px;min-height:38px}.reward-state{font-size:8px}.reward-notes{font-size:9px;padding:12px}.ranking-band{gap:10px;padding:12px}.ranking-band p{font-size:9px}.ranking-tag{font-size:8px;padding:6px}.guide-card{padding:20px 17px}.guide-title{margin-bottom:15px}.phase-card{padding:18px 14px;gap:15px}.phase-list{grid-template-columns:repeat(2,1fr)}.phase-list div:last-child{grid-column:span 2}.footer .wrap{min-height:62px;flex-wrap:wrap;padding-block:12px}.footer-note{width:100%;margin:0 0 0 34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Piece placement practice board */
.planner-section{padding-top:0;padding-bottom:78px}
.planner-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}
.practice-board-card,.piece-picker-card{padding:23px 24px}
.practice-topline,.piece-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.practice-topline h3,.piece-picker-heading h3{margin:1px 0 0;color:#294d82;font-family:'Arial Rounded MT Bold',system-ui,sans-serif;font-size:21px}
.practice-stats{display:flex;align-items:center;gap:14px}
.practice-stats span{display:grid;gap:1px;color:#8392aa;font-size:9px;font-weight:800;text-align:right}
.practice-stats strong{color:#2e5ba0;font-size:13px;font-variant-numeric:tabular-nums}
.board-shell{width:min(100%,468px);margin:15px auto 0;padding:10px;border:1px solid #dfe8f3;border-radius:15px;background:#f3f7fc;box-shadow:inset 0 2px 4px rgba(39,72,115,.05)}
.practice-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;aspect-ratio:1}
.board-cell{min-width:0;min-height:0;padding:0;border:1px solid #dce5f0;border-radius:4px;background:#fff;touch-action:manipulation;transition:background .08s,border-color .08s}
.board-cell:hover{border-color:#83a9e9}
.board-cell.occupied{border-color:rgba(255,255,255,.45);box-shadow:inset 0 -3px 0 rgba(22,61,112,.14),inset 0 1px 1px rgba(255,255,255,.7)}
.tone-pink{background-color:#ed73d8!important}.tone-gold{background-color:#ffc747!important}.tone-cyan{background-color:#48d5e9!important}.tone-blue{background-color:#58a5ed!important}.tone-green{background-color:#87d64d!important}
.board-cell.piece-preview.preview-valid:not(.occupied){border-color:#d59d27;background:#ffdf82}
.board-cell.piece-preview.preview-invalid:not(.occupied){border-color:#e77a84;background:#ffb0b3}
.board-cell.preview-overlap{border-color:#e05664!important;background:#ec6872!important}
.board-caption{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:10px;color:#8797ae;font-size:9px;font-weight:700}
.board-caption #practiceStatus{min-height:18px}.board-caption #practiceStatus.status-error{color:#d45668}.board-caption #practiceStatus.status-success{color:#25896b}
.board-caption #practiceStage{flex:none;border-radius:99px;padding:4px 8px;background:#edf4ff;color:#4d7dc0}
.practice-actions{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.practice-actions .button{min-height:35px;padding-inline:12px;font-size:10px}.practice-actions .button:disabled{cursor:not-allowed;opacity:.45;transform:none}
.button-reset{background:#fff1ef;color:#cb6d69;box-shadow:0 3px 0 #f2d2ce}
.piece-picker-heading{margin-bottom:13px}.orientation-actions{display:flex;gap:7px}.icon-button{width:35px;height:35px;border:1px solid #dce7f5;border-radius:11px;background:#f5f9ff;color:#4684e6;font-size:21px;font-weight:800}.icon-button:hover{background:#e9f2ff}
.piece-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:280px;overflow:auto;padding:2px 3px 4px}
.piece-option{position:relative;display:flex;align-items:center;justify-content:center;height:65px;min-width:0;border:1px solid #e5ebf4;border-radius:11px;background:#fbfcfe;transition:background .12s,border-color .12s,transform .12s}.piece-option:hover{transform:translateY(-1px);border-color:#9ab9ee}.piece-option.selected{border:2px solid #5790eb;background:#eef5ff;box-shadow:0 0 0 3px rgba(87,144,235,.1)}.piece-option img{max-width:47px;max-height:47px;object-fit:contain;image-rendering:pixelated}.piece-option>span{position:absolute;right:4px;bottom:2px;color:#9aa8ba;font-size:7px;font-weight:800}
.selected-piece{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px;border-radius:13px;background:#f3f7fc}.selected-piece-preview{display:grid;grid-template-columns:repeat(var(--preview-columns),10px);grid-auto-rows:10px;gap:2px;padding:5px;border-radius:9px;background:#fff}.mini-cell{width:10px;height:10px;border-radius:2px;background:transparent}.mini-cell.filled{border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 -2px 0 rgba(22,61,112,.12)}.selected-piece>div:last-child{display:grid;gap:1px}.selected-label{font-size:8px;color:#8e9bb0}.selected-piece strong{font-size:12px;color:#395985}.selected-piece>div:last-child>span:last-child{font-size:9px;color:#8194ae}
.planner-note{display:flex;gap:8px;margin-top:13px;padding:11px 12px;border-radius:12px;background:#fff8e9;color:#ad8d4c}.planner-note>span{flex:none;font-size:14px}.planner-note p{margin:0;color:#978358;font-size:9px;line-height:1.7}
@media(max-width:900px){.planner-grid{grid-template-columns:1fr 1fr}.practice-board-card,.piece-picker-card{padding:18px}.practice-stats{gap:8px}.piece-picker{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.planner-section{padding-bottom:54px}.planner-grid{grid-template-columns:1fr;gap:12px}.practice-board-card,.piece-picker-card{padding:17px 14px}.board-shell{padding:7px;border-radius:11px}.practice-board{gap:2px}.board-cell{border-radius:3px}.piece-picker{grid-template-columns:repeat(5,minmax(0,1fr));max-height:240px}.piece-option{height:59px}.practice-topline h3,.piece-picker-heading h3{font-size:18px}.practice-stats span{font-size:8px}.practice-stats strong{font-size:12px}}

/* Full event simulator */
.manual-controls,.search-settings{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.manual-controls label,.search-settings label,.token-list label{font-size:11px;color:#50678a;display:flex;align-items:center;gap:6px}
.manual-controls select,.search-settings select,.token-list select{min-height:32px;border:1px solid #dce5f0;border-radius:8px;background:#fff;color:#385b87;padding:4px}
.manual-controls .button{font-size:10px;padding:8px;min-height:32px}
.manual-controls [aria-pressed="true"]{background:#e4f0ff;border-color:#347df0}
.hand-used-toggle{border:0;background:transparent;color:#6887ad;font-size:10px;padding:6px}
.hand-used-toggle:disabled{opacity:.4}
.token-list{display:grid;gap:8px;font-size:11px;color:#7186a6}
.token-list label{flex-wrap:wrap}
.simulator-actions{flex-wrap:wrap}
[hidden]{display:none!important}
main{display:flex;flex-direction:column}
.hero{order:0}.planner-section{order:1}.tracker-section{order:2}.rewards-section{order:3}.guide-section{order:4}
.planner-section{padding-top:55px;padding-bottom:74px}
.simulator-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr);gap:18px;align-items:start}
.simulator-board-card,.simulator-controls{padding:22px}
.simulator-scoreboard{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:8px;margin-bottom:20px}
.simulator-scoreboard>div{display:grid;align-content:center;gap:2px;min-height:57px;padding:9px 11px;border:1px solid #e7edf6;border-radius:12px;background:#f8faff}
.simulator-scoreboard>div:first-child{background:#eef5ff;border-color:#dce9ff}
.simulator-scoreboard span{font-size:9px;color:#8495af;font-weight:800}
.simulator-scoreboard strong{font-size:16px;color:#315993;font-variant-numeric:tabular-nums}
.simulator-scoreboard .run-score strong{font-family:'Jua',sans-serif;font-size:21px;color:#256bd3}
.board-tools-header,.control-heading,.plan-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.board-tools-header h3,.control-heading h3,.plan-result-heading h3{margin:0;color:#284c81;font-family:'Jua',sans-serif;font-size:19px}
.board-tools-header .button{min-height:34px;padding:0 11px;font-size:10px}
.board-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.board-tool-hint{margin:6px 0 0;color:#97a4b6;font-size:8px;line-height:1.5}
.board-tool{min-height:32px;padding:0 9px;border:1px solid #e2eaf5;border-radius:9px;background:#fff;color:#6b7f9d;font-size:9px;font-weight:800}
.board-tool:hover,.board-tool.active{border-color:#8db3ef;background:#eff5ff;color:#3978d3}
.board-tools.tools-locked{opacity:.45;pointer-events:none}
.board-tools.spawn-required{padding:5px;border-radius:10px;background:#fff8e9;box-shadow:0 0 0 2px #ffe1a1}
.simulator-board-shell{width:min(100%,390px);padding:8px;margin-top:13px}
.practice-board{grid-template-rows:repeat(16,minmax(0,1fr));gap:2px;aspect-ratio:10 / 16}
.board-cell{position:relative;border-radius:3px}
.board-cell:disabled{cursor:default}
.board-cell.occupied{border-color:#5d8fd9;background-color:#6b9fe9!important;box-shadow:inset 0 -3px 0 rgba(22,61,112,.16),inset 0 1px 1px rgba(255,255,255,.62)}
.board-cell.has-token:after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.68);border-radius:3px;pointer-events:none}
.cell-token{position:absolute;right:0;bottom:0;z-index:1;display:grid;place-items:center;width:58%;height:58%;min-width:11px;min-height:11px;border-radius:50% 3px 3px 3px;background:#f4b92e;color:#fff;font-size:clamp(7px,1vw,11px);font-weight:900;line-height:1;box-shadow:0 1px 2px rgba(32,48,77,.25)}
.token-swap .cell-token{background:#8b70d9}
.board-cell.suggested-cell{z-index:2;border:2px solid #ffd149!important;box-shadow:0 0 0 2px rgba(255,209,73,.32),inset 0 0 0 999px rgba(255,210,83,.22)}
.sim-status{min-height:34px;margin-top:10px;padding:8px 10px;border-radius:9px;background:#f2f7ff;color:#55749e;font-size:9px;font-weight:700;line-height:1.6}
.pending-spawn{display:grid;gap:3px;margin-top:9px;padding:11px 12px;border:1px solid #ffdf9e;border-radius:11px;background:#fff8e9;color:#946715}
.pending-spawn[hidden]{display:none}
.pending-spawn span{font-size:10px;font-weight:900}.pending-spawn strong{font-size:9px;line-height:1.55}.pending-spawn .text-button{justify-self:start;padding:4px 0;color:#9b7a42}
.simulator-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.simulator-actions .button{min-height:37px;padding-inline:11px;font-size:10px}
.simulator-actions .button:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}
.simulator-controls{display:grid;gap:18px}
.control-section+.control-section{padding-top:16px;border-top:1px solid #edf1f7}
.control-heading .eyebrow{font-size:8px}
.control-heading h3{font-size:17px}
.small-chip{flex:none;padding:5px 8px;border-radius:99px;background:#f0f5fc;color:#6e83a2;font-size:8px;font-weight:800;white-space:nowrap}
.hand-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}
.hand-slot{position:relative;min-width:0}
.hand-slot-main{display:grid;justify-items:center;align-content:center;gap:3px;width:100%;min-height:103px;padding:10px 5px 7px;border:1px solid #e3eaf4;border-radius:12px;background:#fbfcff;color:#566e90}
.hand-slot-main.completed{background:#f4f6f9;color:#a0aaba;cursor:default}
.hand-slot.selected .hand-slot-main{border:2px solid #6295e9;background:#f0f6ff;box-shadow:0 0 0 3px rgba(98,149,233,.1)}
.hand-slot-number{position:absolute;top:6px;left:8px;color:#a1aec0;font-size:8px;font-weight:900}
.hand-slot-main img{width:47px;height:47px;object-fit:contain;image-rendering:pixelated}
.hand-piece-name{font-size:8px;font-weight:900}.hand-piece-cells{color:#8b9bb1;font-size:8px}
.hand-empty{padding-top:10px;color:#99a7ba;font-size:9px;font-weight:800}
.hand-slot-clear{position:absolute;top:4px;right:5px;width:20px;height:20px;border:0;border-radius:7px;background:#f1f4f8;color:#91a0b3;font-size:15px;line-height:1}
.control-hint{margin:8px 0 0;color:#8292aa;font-size:9px;line-height:1.65}
.swap-controls{display:flex;align-items:center;gap:6px;margin-top:9px}
.swap-controls .button{min-height:32px;padding-inline:10px;font-size:9px}
.swap-controls .button:disabled{opacity:.45;cursor:not-allowed}
.piece-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-height:246px;margin-top:10px}
.piece-option{height:56px;border-radius:9px}
.piece-option img{max-width:43px;max-height:43px}
.piece-option>span{font-size:7px}
.ability-row{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #f0f3f8}
.ability-row:last-child{border-bottom:0;padding-bottom:0}
.ability-symbol{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;font-size:15px;font-weight:900}
.dot-symbol{background:#fff5db;color:#d79b22}.swap-symbol{background:#f1edff;color:#8168d0}
.ability-row>div:nth-child(2){display:grid;gap:1px}.ability-row>div:nth-child(2) strong{font-size:10px;color:#455f85}.ability-row small{font-size:8px;color:#95a2b5}
.ability-counter{display:flex;align-items:center;gap:8px}.ability-counter button{width:25px;height:25px;border:1px solid #e2e9f3;border-radius:8px;background:#fff;color:#527cad;font-weight:900}.ability-counter button:disabled{opacity:.4;cursor:not-allowed}.ability-counter strong{min-width:12px;text-align:center;color:#3d5f91;font-size:11px}
.state-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.state-input-grid label{display:grid;gap:4px;color:#667c9f;font-size:8px;font-weight:800}
.state-input-grid input{width:100%;height:34px;border:1px solid #e0e8f3;border-radius:8px;padding:0 9px;background:#fbfdff;color:#315887;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.state-input-grid .wide-field{grid-column:1/-1}
.state-input-grid small{color:#95a2b5;font-size:7px;font-weight:600;line-height:1.5}
.random-note,.official-rules-note{margin:9px 0 0;padding:10px;border-radius:10px;background:#f2f7ff;color:#7186a6;font-size:8px;line-height:1.65}
.official-rules-note{background:#fbf8f0;color:#96855f}
.plan-panel{margin-top:13px}
.plan-placeholder,.plan-empty{padding:18px 14px;border-radius:12px;background:#f7f9fc;color:#8a9ab1;text-align:center;font-size:9px;line-height:1.7}
.plan-placeholder.searching{background:#eff6ff;color:#5d83ba}
.plan-empty strong{color:#4b6283;font-size:11px}.plan-empty p{margin:5px 0 0}
.plan-result{padding:15px;border:1px solid #dfe9f7;border-radius:14px;background:linear-gradient(145deg,#fbfdff,#f5f9ff)}
.plan-result-heading{align-items:flex-end}.plan-result-heading h3{font-size:15px}.plan-result-heading>strong{color:#2874da;font-family:'Jua',sans-serif;font-size:19px;white-space:nowrap}
.plan-summary{margin:8px 0 0;color:#8191a9;font-size:8px;line-height:1.65}
.plan-first-piece{display:flex;align-items:center;gap:8px;margin-top:9px;padding:7px 9px;border-radius:9px;background:#fff;color:#5a7294;font-size:8px;font-weight:800}
.plan-first-piece img{width:31px;height:31px;object-fit:contain;image-rendering:pixelated}
.plan-sequence{display:grid;gap:0;padding:0;margin:11px 0 0;list-style:none}
.plan-sequence li{display:grid;grid-template-columns:21px 1fr;gap:8px;padding:8px 0;border-top:1px solid #e8eef6}
.plan-step-number{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#e8f1ff;color:#4b83d8;font-size:8px;font-weight:900}
.plan-sequence li>div{display:grid;gap:1px}.plan-sequence strong{color:#465f83;font-size:9px}.plan-sequence small{color:#8394ad;font-size:8px}.plan-sequence em{color:#46a17c;font-size:8px;font-style:normal;font-weight:800}
.plan-footnote{margin-top:9px;color:#9aa7b8;font-size:7px;line-height:1.6}
.hand-section .control-heading{align-items:flex-start}
@media(max-width:900px){
  .simulator-grid{grid-template-columns:1fr 1fr}
  .simulator-board-card,.simulator-controls{padding:17px}
  .simulator-scoreboard{gap:5px}
  .simulator-scoreboard>div{padding:8px}
  .simulator-board-shell{width:min(100%,350px)}
  .piece-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
  .planner-section{padding-top:40px;padding-bottom:54px}
  .simulator-grid{grid-template-columns:1fr;gap:12px}
  .simulator-board-card,.simulator-controls{padding:17px 14px}
  .simulator-board-shell{width:min(100%,390px)}
  .simulator-scoreboard{grid-template-columns:1.2fr repeat(3,1fr)}
  .simulator-scoreboard>div{min-height:51px;padding:7px}
  .simulator-scoreboard span{font-size:8px}
  .simulator-scoreboard strong{font-size:13px}
  .simulator-scoreboard .run-score strong{font-size:18px}
  .piece-picker{grid-template-columns:repeat(5,minmax(0,1fr));max-height:240px}
}