:root{--bg:#eaf7ff;--ink:#10202f;--muted:#637384;--panel:#ffffff;--line:#cfe6f4;--blue:#6cc7ff;--deep:#176ca4;--green:#39b66f;--gold:#ffc84a;--red:#ef5b5b;--purple:#8b7cff;--shadow:0 18px 45px rgba(22,83,126,.18)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#c9f0ff 0,#f8fcff 34%,#eaf7ff 100%);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{max-width:1180px;margin:0 auto;padding:18px 14px 70px}.hero{display:flex;justify-content:space-between;gap:16px;align-items:center;background:linear-gradient(135deg,#fff 0,#d9f5ff 58%,#bcecff 100%);border:1px solid var(--line);border-radius:30px;padding:22px;box-shadow:var(--shadow);margin-bottom:14px}.kicker,.label{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--deep)}h1,h2{margin:0}h1{font-size:clamp(34px,7vw,66px);line-height:.94}h2{font-size:clamp(22px,4vw,34px)}p{margin:8px 0 0;line-height:1.45;color:var(--muted)}.platformCard{font-weight:1000;color:#fff;background:linear-gradient(135deg,var(--deep),var(--purple));padding:18px;border-radius:22px;box-shadow:0 12px 28px rgba(23,108,164,.28);min-width:180px;text-align:center}.panel{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px}.setup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}label{font-size:12px;color:var(--deep);font-weight:900;text-transform:uppercase;letter-spacing:.1em}select,input{width:100%;border:1px solid #bfdceb;background:#f7fcff;border-radius:16px;padding:13px 12px;font-size:16px;color:var(--ink);outline:none}select:focus,input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(108,199,255,.22)}button{border:1px solid #bcd9e8;background:#fff;color:var(--ink);border-radius:999px;padding:11px 14px;font-weight:900;cursor:pointer}button.primary{background:linear-gradient(135deg,var(--green),#1b8e55);color:#fff;border-color:#159051}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.bbNote{display:none;background:#fff8e0;border-color:#ffe099}.bbNote.show{display:block}.endpointGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.endpointCard{position:relative;border:2px solid #d8ecf6;background:#f8fdff;border-radius:24px;padding:14px;cursor:pointer;min-height:210px;transition:.15s}.endpointCard:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,83,126,.16)}.endpointCard.on{border-color:var(--blue);background:#eaf8ff;box-shadow:0 0 0 4px rgba(108,199,255,.18)}.endpointCard img{height:82px;max-width:100%;object-fit:contain;display:block;margin:4px auto 12px;filter:drop-shadow(0 12px 12px rgba(0,0,0,.15))}.endpointCard b{font-size:22px}.rank{position:absolute;top:10px;left:10px;background:var(--gold);border-radius:999px;padding:5px 8px;font-size:12px;font-weight:1000}.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.chip{font-size:11px;font-weight:900;border:1px solid #cae1ef;border-radius:999px;padding:5px 7px;background:#fff;color:#496477}.now{display:grid;grid-template-columns:1.5fr 260px;gap:16px;align-items:stretch;background:linear-gradient(135deg,#ffffff 0,#f2fcff 100%)}.nowLeft{display:flex;flex-direction:column}.bigAction{margin-top:14px;border:3px solid var(--green);border-radius:28px;padding:20px;background:#edfff5;font-size:clamp(26px,5vw,48px);font-weight:1000;line-height:1.05}.subAction{font-size:16px;font-weight:700;color:#406172;margin-top:8px}.actionRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.magPortrait{border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 50% 20%,#ffffff 0,#dff5ff 62%,#c8ecff 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px}.magPortrait img{max-width:180px;max-height:140px;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.15))}.magPortrait b{font-size:25px}.magPortrait span{color:var(--muted);font-weight:700}.statGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.routeCards{display:grid;gap:12px}.routeCard{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;border:1px solid #d2e8f3;background:#f8fdff;border-radius:22px;padding:12px}.routeCard.active{border-color:var(--green);box-shadow:0 0 0 4px rgba(57,182,111,.14);background:#f0fff6}.routeCard.stop{border-color:#ffb6b6;background:#fff4f4}.routeIcon{width:76px;height:76px;border-radius:20px;background:#e7f7ff;display:flex;align-items:center;justify-content:center}.routeIcon img{max-width:64px;max-height:64px;object-fit:contain}.routeCard h3{margin:0;font-size:20px}.routeCard p{margin:4px 0 0}.badge{font-weight:1000;border-radius:999px;padding:8px 10px;background:#eef9ff;border:1px solid #c7e4f2;color:var(--deep);white-space:nowrap}.badge.red{background:#fff1f1;border-color:#ffc9c9;color:#c43535}.badge.green{background:#ebfff4;border-color:#b8efce;color:#198d52}.pbCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.pbCard{border:1px solid #d2e8f3;border-radius:20px;padding:12px;background:#f8fdff}.pbCard b{font-size:20px}.proof summary{font-weight:1000;cursor:pointer}.proof pre{white-space:pre-wrap;overflow:auto;background:#0b1824;color:#e6f6ff;border-radius:18px;padding:14px;font-size:12px}.hidden{display:none!important}
@media(max-width:820px){.hero,.now{grid-template-columns:1fr;display:grid}.setup,.statGrid{grid-template-columns:1fr 1fr}.platformCard{text-align:left}.routeCard{grid-template-columns:58px 1fr}.routeIcon{width:58px;height:58px}.routeCard .badge{grid-column:2;justify-self:start}.magPortrait img{max-height:110px}.sectionHead{align-items:flex-start}.endpointGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.app{padding:10px 8px 50px}.hero,.panel{border-radius:20px;padding:12px}.setup,.statGrid{grid-template-columns:1fr}.endpointGrid{grid-template-columns:1fr}.bigAction{font-size:31px;padding:16px}.routeCard{border-radius:18px}.routeIcon{display:none}.routeCard{grid-template-columns:1fr}.routeCard .badge{grid-column:1}.actionRow button{width:100%}}

/* v1.2 noob-safe player mode */
.hero h1{max-width:780px}.profileGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.profileCard{white-space:normal;text-align:left;border:2px solid #d8ecf6;background:#f8fdff;border-radius:24px;padding:16px;min-height:118px;display:flex;flex-direction:column;gap:7px}.profileCard b{font-size:22px}.profileCard span{font-weight:700;color:var(--muted);line-height:1.35}.profileCard.on{border-color:var(--green);background:#f0fff6;box-shadow:0 0 0 4px rgba(57,182,111,.14)}
.timerBox{margin-top:14px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:2px solid #d8ecf6;background:#f8fdff;border-radius:24px;padding:12px}.timerLabel{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--deep);font-weight:1000}.timerBox b{font-size:36px;letter-spacing:-.04em}.timerBox b.ready{color:#fff;background:var(--green);border-radius:16px;padding:8px 12px;display:inline-block;animation:pulse 1s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.magPortrait span{font-size:14px}.pbRate{margin-top:8px;display:inline-block;border:1px solid #cae1ef;border-radius:999px;padding:6px 9px;background:#fff;font-size:12px;font-weight:1000;color:var(--deep)}.pbCard small{display:block;margin-top:8px;color:var(--muted);font-weight:800}.endpointPB{background:#fffaf0}.statsPanel summary{font-weight:1000;cursor:pointer}.smallNote{font-size:13px;margin-bottom:12px}.routeCard.stop.active{box-shadow:0 0 0 4px rgba(239,91,91,.14)}
@media(max-width:820px){.profileGrid{grid-template-columns:1fr}.timerBox{grid-template-columns:1fr}.timerBox button{width:100%}}


/* v1.3 reactive setup visibility */
.setupImpact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;background:linear-gradient(135deg,#ffffff,#eefbff)}
.setupImpact div{border:1px solid #d2e8f3;background:#f8fdff;border-radius:18px;padding:12px}
.setupImpact b{display:block;font-size:16px;color:var(--deep)}
.setupImpact span{display:block;margin-top:4px;color:var(--muted);font-weight:750;line-height:1.35;font-size:13px}.chip.good{border-color:#9fe3bb;background:#effff6;color:#167b48}.chip.warn{border-color:#ffd08a;background:#fff8e8;color:#9a6400}.chip.setupChip{background:#eef9ff;color:#176ca4;border-color:#b8e0f4}.endpointCard.on .setupChip{background:#fff}.rank{letter-spacing:.04em}
@media(max-width:820px){.setupImpact{grid-template-columns:1fr}}

/* v1.4 visual-first guidance */
.setupImpact{grid-template-columns:repeat(4,minmax(0,1fr));}
.visualSetupCard{display:grid!important;grid-template-columns:64px 1fr;gap:10px;align-items:center;min-height:86px;}
.visualSetupCard.wide{grid-template-columns:1fr;}
.setupBigIcon{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.14));}
.setupBigIcon.sid{width:76px;max-width:100%;}
.chip img{width:22px;height:22px;object-fit:contain;margin-right:5px;vertical-align:middle;}
.endpointCard.visual{min-height:270px;padding-top:18px;}
.endpointHero{height:105px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.endpointHero img{height:100px!important;margin:0!important;}
.miniRoute{display:flex;align-items:center;gap:5px;margin:10px 0 2px;padding:7px;border-radius:16px;background:#fff;border:1px solid #d2e8f3;min-height:48px;overflow:hidden;}
.miniRoute:before{content:"route";font-size:10px;font-weight:1000;color:var(--deep);text-transform:uppercase;letter-spacing:.08em;margin-right:3px;}
.miniRoute img{width:34px!important;height:34px!important;margin:0!important;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(0,0,0,.12));}
.handoverVisual{display:flex;justify-content:center;gap:12px;margin-bottom:12px;}
.handoverVisual img{height:72px;max-width:120px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.16));}
.transferPics{display:flex;gap:8px;margin-top:10px;align-items:center;}
.transferPics img{height:52px;max-width:110px;object-fit:contain;background:#fff;border:1px solid #d2e8f3;border-radius:16px;padding:5px;}
.visualPB{position:relative;min-height:190px;padding-top:16px;}
.pbIcon{width:46px;height:46px;object-fit:contain;float:right;margin-left:8px;background:#fff;border:1px solid #d2e8f3;border-radius:14px;padding:5px;}
.learnedMag{height:64px;max-width:100%;object-fit:contain;margin-top:10px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.12));}
.endpointPB .learnedMag{height:82px;display:block;margin:0 auto 8px;}
.magPortrait img{image-rendering:auto;}
@media(max-width:820px){.setupImpact{grid-template-columns:1fr 1fr}.visualSetupCard{grid-template-columns:54px 1fr}.setupBigIcon{width:54px;height:54px}.endpointHero{height:92px}.endpointHero img{height:88px!important}.handoverVisual img{height:58px}.transferPics img{height:44px}}
@media(max-width:520px){.setupImpact{grid-template-columns:1fr}.endpointCard.visual{min-height:0}.miniRoute img{width:28px!important;height:28px!important}.endpointHero{height:84px}.endpointHero img{height:80px!important}.pbIcon{width:40px;height:40px}.learnedMag{height:54px}.handoverVisual{flex-wrap:wrap}.handoverVisual img{height:52px}}

.rareMagGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px}
.rareCard{background:#152235;border:2px solid #3b5c82;border-radius:18px;padding:12px;text-align:center;cursor:pointer}
.rareCard img{height:110px;image-rendering:auto}
.rareCard.active{border-color:#ffd54a;box-shadow:0 0 20px rgba(255,213,74,.4)}
.rareCard b{display:block;margin-top:8px;font-size:18px}

.pbCard{text-align:center}.pbCard img{width:96px;height:96px;object-fit:contain}.pbCard b{display:block}
.routeCard{background:#132033;border:1px solid #4b6b8f;border-radius:16px;padding:16px;margin:10px}
.routeAction{font-size:28px;font-weight:bold;color:#9fe870}
.journeyStep{display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid #334}

/* v1.8 GPS truth cards */
#routeNow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.gpsCard{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px;background:rgba(255,255,255,.055);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.gpsCard h3{margin:.25rem 0 .35rem;font-size:1.25rem}.gpsCard p{margin:0;color:var(--muted)}
.gpsCard.important{border-color:rgba(255,190,90,.42)}.gpsCard.goal{border-color:rgba(124,200,255,.44)}
#routeJourney{display:grid;gap:8px}.gpsLine{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.16);color:var(--muted)}.gpsLine b{color:var(--text)}


/* Living Possibility Grid — real relation layer, not a mockup */
.possibilityPanel{background:linear-gradient(135deg,#f8fdff,#eefaff)}
.gridLegend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.lg{font-size:11px;font-weight:1000;border-radius:999px;padding:6px 9px;border:1px solid #cadfea;background:#fff}.lg.selected{background:#e8f3ff;border-color:#7cc8ff}.lg.native{background:#ebfff4;border-color:#39b66f}.lg.trade{background:#fff7e8;border-color:#ffc84a}.lg.blocked{background:#eef2f5;border-color:#c9d3da;color:#73818b}.possibilitySummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.summaryPill{border:1px solid #d2e8f3;border-radius:18px;background:#fff;padding:12px}.summaryPill b{display:block;font-size:24px;line-height:1;color:var(--deep)}.summaryPill span{font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.possibilityGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;align-items:stretch}.gridGroup{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em;color:var(--deep)}.gridGroup:after{content:"";height:1px;flex:1;background:#d2e8f3}.magCell{position:relative;min-height:82px;border:1px solid #d3e5ee;border-radius:14px;background:#f7fbfe;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:7px;cursor:pointer;transition:.14s;overflow:hidden}.magCell:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(22,83,126,.13)}.magCell img{max-width:45px;max-height:40px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12))}.magCell .cellName{font-size:11px;line-height:1.05;font-weight:1000;max-width:100%;overflow:hidden;text-overflow:ellipsis}.magCell .cellMeta{font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.06em;color:#698092;font-weight:900}.magCell.selected{background:#eaf8ff;border-color:#6cc7ff;box-shadow:0 0 0 3px rgba(108,199,255,.2)}.magCell.native{background:#effff6;border-color:#39b66f}.magCell.trade{background:#fff8e9;border-color:#ffc84a}.magCell.recommended{box-shadow:0 0 0 3px rgba(255,200,74,.24);border-color:#ffc84a}.magCell.blocked{background:#eef2f5;border-color:#d5dde3;opacity:.46;filter:grayscale(1)}.magCell.helper{background:#fffdf4;border-color:#ffd879}.magCell.pb.native,.magCell.pb.trade{background:#f0f7ff;border-color:#8bc9ff}.magCell.endpoint .cellName{font-size:12px}.magCell.endpoint img{max-width:52px;max-height:48px}.magCell:after{content:attr(data-status);position:absolute;top:4px;right:5px;font-size:8px;font-weight:1000;text-transform:uppercase;color:#526675;background:rgba(255,255,255,.75);border-radius:999px;padding:2px 4px}.magCell.blocked:after{content:"off"}.magCell.selected:after{content:"you"}.magCell.native:after{content:"yes"}.magCell.trade:after{content:"trade"}.magCell.recommended:before{content:"★";position:absolute;top:3px;left:7px;color:#d99b00;font-weight:1000}.possibilityPanel .smallNote{margin:0;color:#577084}.cellTooltip{display:none}@media(max-width:820px){.possibilitySummary{grid-template-columns:repeat(2,minmax(0,1fr))}.possibilityGrid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}.magCell{min-height:74px;border-radius:12px}.magCell img{max-width:38px;max-height:34px}.magCell .cellName{font-size:10px}.gridLegend{justify-content:flex-start}}

/* Scribble Board — overview + recipe only */
.scribblePanel{background:linear-gradient(135deg,#fdfefe,#eefaff);position:relative;overflow:hidden}
.scribbleBoard{position:relative;border:2px solid #d2e8f3;background:radial-gradient(circle at 50% 36%,rgba(124,200,255,.18),transparent 34%),#f8fdff;border-radius:28px;padding:18px;min-height:520px;overflow:hidden}
.routeSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.routeSvg path{fill:none;stroke:#2aa7ff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 7px rgba(42,167,255,.26))}.routeSvg path.tradePath{stroke:#ffb72d;stroke-dasharray:10 8}.routeSvg circle{fill:#fff;stroke:#2aa7ff;stroke-width:4}.scribbleRow{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;z-index:2}.scribbleGroup>b{display:block;margin:0 0 9px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--deep)}.scribbleTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}.sidTiles{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}.scribbleTile{position:relative;min-height:76px;border:1px solid #d2e8f3;background:#fff;border-radius:16px;padding:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;cursor:pointer;transition:.14s;z-index:2}.scribbleTile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,83,126,.13)}.scribbleTile img{max-width:46px;max-height:42px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12))}.scribbleTile span{font-size:10px;line-height:1.05;font-weight:1000;color:#17354b}.scribbleTile.selected{background:#eaf8ff;border-color:#6cc7ff;box-shadow:0 0 0 3px rgba(108,199,255,.2)}.scribbleTile.native{background:#effff6;border-color:#39b66f}.scribbleTile.trade{background:#fff8e9;border-color:#ffc84a}.scribbleTile.blocked{opacity:.35;filter:grayscale(1);background:#eef2f5}.scribbleTile.routeNode{box-shadow:0 0 0 4px rgba(42,167,255,.22),0 14px 28px rgba(42,167,255,.16);border-color:#2aa7ff}.scribbleTile.tradeNode{box-shadow:0 0 0 4px rgba(255,183,45,.22),0 14px 28px rgba(255,183,45,.16);border-color:#ffb72d}.scribbleMiddle{position:relative;z-index:2;min-height:120px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.routeChip{border:2px solid #d2e8f3;background:#fff;border-radius:20px;padding:10px 12px;font-weight:1000;color:#17354b;display:flex;align-items:center;gap:8px}.routeChip img{height:42px;max-width:86px;object-fit:contain}.routeChip.trade{border-color:#ffbf3d;background:#fff8e9}.scribbleEndpoints{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:9px;align-items:end;margin-top:14px}.scribbleEndpoints .scribbleTile{min-height:92px}.scribbleEndpoints .scribbleTile img{max-width:58px;max-height:54px}.recipeCard{margin-top:16px;border:2px solid #d2e8f3;background:#fff;border-radius:28px;padding:18px;box-shadow:0 20px 44px rgba(22,83,126,.08)}.recipeTop{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center}.recipeTop img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.14))}.recipeTop h3{margin:0;font-size:28px}.recipeTop p{margin:4px 0 0;color:var(--muted);font-weight:800}.recipeBadge{border-radius:999px;padding:9px 12px;font-weight:1000;background:#effff6;border:1px solid #39b66f;color:#167b48}.recipeBadge.trade{background:#fff8e9;border-color:#ffc84a;color:#8c5c00}.recipeSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:14px}.recipeStep{border:1px solid #d2e8f3;border-radius:20px;padding:12px;background:#f8fdff}.recipeStep.trade{background:#fff8e9;border-color:#ffc84a}.recipeStep small{display:block;text-transform:uppercase;letter-spacing:.1em;font-weight:1000;color:var(--deep);font-size:10px}.recipeStep b{display:block;font-size:20px;margin:4px 0;color:#17354b}.recipeStep span{display:block;color:var(--muted);font-weight:800}.counter{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;margin-top:10px}.counterRead{font-weight:1000;background:#fff;border:1px solid #d2e8f3;border-radius:999px;padding:8px 10px;text-align:center}.counter button{border-radius:999px;padding:7px 10px}.counter button.done{background:#39b66f;color:#fff;border-color:#39b66f}.counter button.undo{background:#fff}.counter button.resetSeg{background:#fff3f3;border-color:#ffc7c7;color:#9b3636}.recipeNote{margin-top:12px;padding:12px;border-radius:18px;background:#f1f8fc;color:#577084;font-weight:800}.recipeWarn{margin-top:12px;padding:12px;border-radius:18px;background:#fff3e3;border:1px solid #ffd596;color:#8c5c00;font-weight:900}
@media(max-width:820px){.scribbleBoard{min-height:620px;padding:12px}.scribbleRow{grid-template-columns:1fr}.scribbleTiles{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}.scribbleTile{min-height:68px;border-radius:14px}.scribbleTile img{max-width:38px;max-height:34px}.scribbleEndpoints{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}.recipeTop{grid-template-columns:64px 1fr}.recipeTop img{width:64px;height:64px}.recipeBadge{grid-column:1/-1;text-align:center}.counter{grid-template-columns:1fr 1fr 1fr}.counterRead{grid-column:1/-1}.routeSvg path{stroke-width:4}}


/* Main Scribble Board trim */
.legacyHidden{display:none!important}
.mainHero{align-items:end}
.nameCheck{background:rgba(255,255,255,.82);border:1px solid #d2e8f3;border-radius:22px;padding:14px;min-width:220px;box-shadow:0 12px 30px rgba(22,83,126,.08)}
.nameCheck label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:1000;color:var(--deep);margin-bottom:7px}.nameCheck input{width:100%;border:1px solid #d2e8f3;border-radius:14px;padding:11px 12px;font-weight:900;color:#17354b;background:#fff}.nameCheck small{display:block;margin-top:7px;color:#7890a1;font-weight:800;font-size:11px;line-height:1.25}.scribblePanel{margin-top:18px}.compactHead h2{margin-bottom:2px}.scribbleBoard{min-height:680px;background:radial-gradient(circle at 66% 50%,rgba(124,200,255,.28),transparent 34%),linear-gradient(180deg,#fbfeff,#effaff);}.scribbleRow{grid-template-columns:1.1fr .9fr}.scribbleGroup>b{font-size:14px;color:#14618e}.scribbleTile{border-radius:22px;min-height:92px}.scribbleTile img{max-width:56px;max-height:48px}.scribbleTile span{font-size:12px}.sidTiles .scribbleTile img{max-width:50px;max-height:46px}.scribbleMiddle{min-height:138px}.routeChip{font-size:18px;border-radius:26px;padding:14px 18px}.routeChip img{height:54px}.scribbleEndpoints{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));margin-top:8px}.scribbleEndpoints .scribbleTile{min-height:126px}.scribbleEndpoints .scribbleTile img{max-width:78px;max-height:70px}.recipeCard{position:relative;margin-top:18px}.recipeWarn{display:none}.recipeNote{font-size:12px}.routeSvg path{stroke-width:7}.routeSvg circle{r:8}
@media(max-width:820px){.mainHero{display:block}.nameCheck{margin-top:14px}.scribbleBoard{min-height:760px}.scribbleRow{grid-template-columns:1fr}.scribbleTile{min-height:78px}.scribbleEndpoints{grid-template-columns:repeat(3,minmax(0,1fr))}.scribbleEndpoints .scribbleTile{min-height:112px}.routeChip{font-size:15px}.recipeSteps{grid-template-columns:1fr}.recipeTop h3{font-size:24px}}

/* v2 sync patch: name calculator + compact in-game bar sync */
.nameTools{display:grid;grid-template-columns:120px 1fr;gap:8px}.nameTools select,.nameTools input{border:1px solid #d2e8f3;border-radius:14px;padding:11px 12px;font-weight:900;background:#fff;color:#17354b}.nameResult{margin-top:9px;border:1px solid #d2e8f3;background:#f8fdff;border-radius:16px;padding:8px 10px;min-height:42px;display:flex;align-items:center;gap:10px;font-weight:1000;color:#17354b}.nameResult img{width:34px;height:34px;object-fit:contain}.nameResult button{margin-left:auto;border-radius:999px;padding:7px 10px;background:#2aa7ff;color:white;border-color:#2aa7ff;font-weight:1000}.magSync{margin-top:14px;border:1px solid #d2e8f3;background:linear-gradient(180deg,#f8fdff,#eefaff);border-radius:20px;padding:12px}.magSync summary{cursor:pointer;font-weight:1000;color:#17354b}.syncBars{display:grid;gap:8px;margin-top:10px}.syncRow{display:grid;grid-template-columns:48px 34px 1fr 42px;align-items:center;gap:8px;font-weight:1000;color:#17354b}.syncBar{height:14px;border-radius:999px;background:#dbeaf2;overflow:hidden;border:1px solid #c5deea}.syncBar i{display:block;height:100%;border-radius:999px;background:#2aa7ff;transition:width .28s ease}.syncBar i.pow{background:#ff8b3d}.syncBar i.dex{background:#45b36b}.syncBar i.mind{background:#9f7bff}.syncBar i.def{background:#8aa7bb}.syncRow em{font-style:normal;color:#7890a1;font-size:12px}.syncReset{margin-top:10px;border-radius:999px;padding:8px 12px;background:#fff;border:1px solid #d2e8f3;font-weight:1000;color:#17354b}.magSync p{margin:9px 0 0;color:#7890a1;font-size:12px;font-weight:800}.recipeStep.complete{border-color:#8be0ad;background:#effff6}.recipeStep.complete b{color:#198d52}
@media(max-width:520px){.nameTools{grid-template-columns:1fr}.syncRow{grid-template-columns:42px 30px 1fr 34px}.nameResult{font-size:12px}}


/* Food mode recipe upgrade */
.foodModes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px;border:1px solid #d7ebf6;background:#f8fdff;border-radius:18px}
.foodModes b{display:block;font-size:14px}
.foodModes span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.foodButtons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.foodButtons button{padding:9px 12px;background:#fff}
.foodButtons button.on{background:linear-gradient(135deg,var(--blue),var(--deep));color:#fff;border-color:var(--deep)}
.budgetTag{display:inline-flex!important;align-self:flex-start;margin-top:6px;padding:4px 8px;border-radius:999px;background:#e9f7ff;color:var(--deep);font-size:11px!important;font-weight:900}
.altFoods{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed #d5e8f3}
.altFoods span{font-size:12px!important;color:var(--muted)}
.altFoods button{font-size:12px;padding:7px 9px;background:#fff7de;border-color:#ffe19a}
.counterRead em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
@media(max-width:700px){.foodModes{align-items:flex-start;flex-direction:column}.foodButtons{justify-content:flex-start}}