/* Battle decisions share the stage with the original creature art. */
#sBattle .bmenu.moves{height:auto;min-height:236px;grid-template-rows:minmax(76px,1fr) minmax(76px,1fr) 44px}
#sBattle .move-brief{font:600 12px/1.35 var(--f);color:#294c3b;white-space:normal;overflow-wrap:anywhere;margin-top:3px}
#sBattle .mv .mn{white-space:normal;overflow-wrap:anywhere;font-size:16px}
#sBattle .mv .mi{flex-wrap:wrap;row-gap:3px}
#sBattle .mv:focus-visible{outline:3px solid #d29b29;outline-offset:3px}
#sBattle .tbox{height:70px;font-size:15px}
#sBattle .battle-readout{font-size:12px;line-height:1.4}
#sBattle .mv:not(:disabled):hover{background:#fff7d8!important}
@media(min-width:700px) and (max-height:520px){
 #sBattle{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.9fr);grid-template-rows:54px minmax(48px,1fr) auto auto}
 #sBattle .btop{grid-column:1/-1}
 #sBattle .scene{grid-column:1;grid-row:2/5;min-height:0}
 #sBattle .tbox{grid-column:2;grid-row:2;height:auto;min-height:48px;padding:8px 12px;font-size:13px}
 #sBattle .battle-readout{grid-column:2;grid-row:3;padding:5px 10px;font-size:11px}
 #sBattle .bmenu{grid-column:2;grid-row:4;height:190px;padding:6px 10px;gap:6px}
 #sBattle .bmenu.moves{min-height:214px;grid-template-rows:minmax(70px,1fr) minmax(70px,1fr) 44px}
 #sBattle .move-brief{font-size:11px}#sBattle .mv .mn{font-size:14px}
 #sBattle .hpbox{max-width:67%;width:210px;padding:4px 7px}
 #sBattle .hpbox.foe{left:8px;top:10px}#sBattle .hpbox.me{right:8px;bottom:10px}
}
@media(prefers-reduced-motion:no-preference){#sBattle .bmenu.moves .mv{animation:move-ready .18s ease-out both}@keyframes move-ready{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}}
/* ===== Ballpoint pen on cream paper: chrome overrides (blue ink text, sketchy paper panels) ===== */
:root{--ink:#283a8c;--ink-soft:#4b5a99;--paper:#f8f1e2;--paper2:#efe5cf;--line:#cdd8ee}
html,body{background:#e6dcc4}
#game{box-shadow:0 0 0 2px rgba(40,58,140,.18),0 12px 40px rgba(120,98,60,.25)}
#sWorld{background:#e9e2cf}
#sBattle{background:#f4ecdb}
.duo .dtop,.btop{background:#f8f1e2;color:var(--ink);border-bottom:2.5px solid var(--ink)}
.btop .bt{color:var(--ink)}
.battle-readout{background:#efe5cf;color:#1f2d6e;border-top:2px dashed rgba(40,58,140,.35)}
.owgoal{background:rgba(251,247,238,.95);color:var(--ink);border:2px solid var(--ink);border-radius:255px 14px 225px 14px/14px 225px 14px 255px}
.toast{background:#fffaf0;color:var(--ink);border:2.5px solid var(--ink);box-shadow:3px 4px 0 rgba(40,58,140,.25);border-radius:255px 16px 225px 16px/16px 225px 16px 255px}
.sheet{background:rgba(120,98,60,.32)}
.utrade{background:rgba(120,98,60,.4)}
.cardview{background:rgba(236,226,204,.95)}
.cardview .lbl{color:#c8423a;text-shadow:none}
.field-link{background:#fffaf0;color:var(--ink);border:2.5px solid var(--ink)}
.hpbox{background:#fffaf0;box-shadow:3px 3px 0 rgba(40,58,140,.3);border-radius:255px 12px 225px 12px/12px 225px 12px 255px}
.tbox{background:#fffaf0;color:#1f2d6e}
.tbox::before{border-color:var(--ink);border-style:dashed;opacity:.35}
.bmenu{background:var(--paper2)}
.btn{box-shadow:3px 3px 0 rgba(40,58,140,.45)}
.btn:active{box-shadow:1px 1px 0 rgba(40,58,140,.45)}
.owtalk{background:#fffaf0;color:#1f2d6e;box-shadow:0 0 0 2.5px var(--ink),4px 6px 0 2px rgba(40,58,140,.22);border-radius:255px 16px 225px 16px/16px 225px 16px 255px}
.owsign.in{background:#e7ebf5;color:var(--ink);border-color:var(--ink);box-shadow:3px 4px 0 rgba(40,58,140,.25);text-shadow:none}
.owsign.wd{background:#f1dfba;color:#5a3d20;text-shadow:none}
.evo{background:radial-gradient(circle at 50% 42%,#fffaf0,#e9dcc0 75%)!important}
.wipe i{background:#f4ecdb;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
@media(prefers-reduced-motion:no-preference){
 .sheet:not([hidden]) .pan{animation:mon-sheet-in .42s cubic-bezier(.34,1.56,.64,1) both}
 @keyframes mon-sheet-in{from{transform:translateY(26px) rotate(-1deg) scale(.97);opacity:0}to{transform:none;opacity:1}}
 .toast:not([hidden]){animation:mon-toast-in .38s cubic-bezier(.34,1.56,.64,1) both}
 @keyframes mon-toast-in{from{transform:translate(-50%,12px) scale(.9);opacity:0}to{transform:translate(-50%,0) scale(1);opacity:1}}
 .owtalk:not([hidden]){animation:mon-talk-in .34s cubic-bezier(.34,1.56,.64,1) both}
 @keyframes mon-talk-in{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
}
#sTitle .hero{background:#f4ecdb center 78%/cover no-repeat;border:2.5px solid var(--ink);border-bottom-width:3.5px;border-radius:255px 22px 225px 22px/22px 225px 22px 255px;overflow:hidden}
#sTitle .hero::before{color:var(--ink);z-index:2}
#sTitle .hero canvas{filter:none}
#sTitle{background:radial-gradient(ellipse at 80% 18%,#f6dcae 0,transparent 35%),#f8f1e2}
#sTitle .h1{color:var(--ink)}
#sTitle>.sub,#sTitle .expedition-label{color:#3a4a8a}
#sTitle .paper,#sTitle .stc,#sTitle .teamc,#sTitle .advslot{border-color:var(--ink);box-shadow:3px 5px 0 rgba(40,58,140,.22)}
#sTitle .advslot.empty{box-shadow:none}
/* path mode: pen route stops on the baked paper map */
.node{background:#fffaf0;border:2.5px solid var(--ink);border-radius:52% 48% 50% 46%/48% 52% 46% 54%;box-shadow:2px 3px 0 rgba(40,58,140,.25)}
.node img.mcw-glyph{width:30px;height:30px;pointer-events:none}
.node.boss img.mcw-glyph{width:38px;height:38px}
.node::before{background:repeating-linear-gradient(-35deg,rgba(40,58,140,.28) 0 1px,transparent 1px 4px);border-radius:50%}
.node small{background:rgba(255,250,240,.94);color:var(--ink);border:1.5px solid rgba(40,58,140,.35)}
.node.k-grass{background:#e9f3d6}.node.k-heal{background:#fbe3d6}.node.k-shop{background:#fbf0c8}.node.k-trainer{background:#e2ecfa}.node.k-stash{background:#f6e8d2}.node.k-event{background:#efe6fa}.node.k-ghost{background:#ebebf4}
.node.boss{background:#fff4d2;box-shadow:0 0 0 3px #f7d27a,2px 4px 0 3px rgba(40,58,140,.25);border-radius:22px 18px 24px 16px/18px 24px 16px 22px}
.node.reach{background:#ffd75e;box-shadow:3px 4px 0 var(--ink)}
.node.glow{box-shadow:0 0 0 3px #fff3b0,0 0 0 5px rgba(40,58,140,.35)}
.legend .lg img.mcw-glyph{width:28px;height:28px}
#sMap{background:#f8f1e2}
.maphead{background:#f8f1e2;border-bottom:2.5px solid var(--ink)}
.maphead .t{color:var(--ink)}
@media (max-width:520px){
 .maphead>.row{flex-wrap:wrap!important;row-gap:6px}
 .maphead>.row>.t{order:-1;flex:1 1 calc(100% - 56px);white-space:normal;line-height:1.1}
 .maphead>.row>#homeMap{order:-2}
 .maphead>.row>.coin{margin-right:auto}
}
/* silhouettes are baked into the canvas in ink; keep only a soft fade */
.sils canvas,canvas.sil{filter:none!important;opacity:.8}
.stc canvas.sil.lock{width:92px;height:92px;opacity:.3}
.stc[disabled] canvas{filter:none!important}
/* starter, team and move cards: ink-blue wobbly borders like the sheets and HP boxes */
#sTitle .paper,.stc,.teamc{border:2.5px solid var(--ink)!important;border-radius:255px 18px 225px 18px/18px 225px 18px 255px;box-shadow:2px 4px 0 rgba(40,58,140,.25)!important;background:#fffaf0}
.stc[disabled]{background:#f3ecdc}
.mv,.bmenu .mb{border:2.5px solid var(--ink)!important;border-radius:18px 225px 18px 255px/255px 18px 225px 18px;box-shadow:2px 4px 0 rgba(40,58,140,.28)!important}
.battle-readout{background:#efe5cf!important;color:#1f2d6e!important}
.field-link{background:#fffaf0;color:var(--ink);border:2.5px solid var(--ink)}
#owField{box-shadow:2px 4px 0 rgba(40,58,140,.28);border:2.5px solid var(--ink)}
.expedition-label{color:#3a4a8a}
.bmenu{background:#f3ead6!important;border-color:var(--ink)!important}
.mb{color:var(--ink)!important}
.mb.fight{background:#f4ad97}.mb.bag{background:#f8d987}.mb.team{background:#b3dcc0}.mb.run{background:#b2d1ea}
.mb.observe{background:#e2eedb}.mb.rally{background:#f8e0cf}
.learn-portrait{background:#fffaf0;border:2.5px solid var(--ink);border-radius:255px 18px 225px 18px/18px 225px 18px 255px}
/* the paper fade sits behind the top bar only (about 56px plus the safe area), not the whole HUD block */
.owhud{background:linear-gradient(rgba(248,241,226,.94) 0,rgba(248,241,226,.86) 76%,rgba(248,241,226,0) 100%) top/100% calc(64px + env(safe-area-inset-top,0px)) no-repeat!important}
@media (max-height:500px){.owhud{background-size:100% calc(56px + env(safe-area-inset-top,0px))!important}}
body:has(#mcw-audio-bar) #sTitle [data-mute]{display:none!important}
#sTitle .advslot.empty{border-style:dashed!important;box-shadow:none!important;border-radius:14px}
/* the menu grows with its rows (first battle adds Observe/Rally) instead of pushing the last row off screen */
.bmenu{height:auto!important;min-height:156px;grid-auto-rows:minmax(44px,1fr)}
.bmenu.field-menu{min-height:200px}
@media(max-height:700px){.bmenu.field-menu{min-height:172px}}
.owtalk p{color:#1f2d6e;text-shadow:none}
.owtalk b{background:#3b53b8;color:#fff;border:2.5px solid var(--ink);box-shadow:none}
/* hero buddies keep a square box (the buffer is square), so nothing stretches */
#sTitle .hero canvas{height:auto!important;aspect-ratio:1/1;align-self:flex-end}
/* battle chrome in ink: HP boxes, level chip, HP label, text box, evolution box */
.hpbox{border:2px solid var(--ink)!important;border-bottom-width:3.5px!important;border-radius:255px 16px 225px 16px/16px 225px 16px 255px!important;box-shadow:2px 4px 0 rgba(40,58,140,.22)!important;background:#fffaf0!important}
.hpbox.foe{border-bottom-color:var(--ink)!important}
.hpbox .nm span{color:#283a8c!important;background:#e8ecf8!important}
.hprow i{background:var(--ink)!important;color:#fff7d4!important}
.hpbar{border-color:var(--ink)!important;background:#ebe6d6!important}
.xpbar{border-color:#8e9ac8!important}
.tbox{border-top:2.5px solid var(--ink)!important;color:#1f2d6e!important}
.tbox::before{border-color:rgba(40,58,140,.35)!important}
#evoBox .tbox,#evoBox{border-color:var(--ink)!important}
#sBattle .btop [data-mute]{width:44px!important;height:44px!important}
/* friends strip (mcw-club.js) in ballpoint ink, restyled from this page only */
.mcwf{--ink:#283a8c;--paper:#fbf6ea;--teal:#2e7d5b;background:#fbf6ea!important;color:#283a8c!important;border:2px solid #283a8c!important;border-radius:18px 7px 16px 9px/9px 16px 7px 18px!important;box-shadow:3px 4px 0 rgba(40,58,140,.22)!important}
.mcwf-hd b{font-family:Caveat,"Comic Sans MS",cursive;font-size:25px;color:#283a8c}
.mcwf-empty,.mcwf-row b,.mcwf-row small,.mcwf-approval{color:#283a8c!important}
.mcwf-row{background:#fffdf6!important;border:1.5px solid rgba(40,58,140,.35)!important}
.mcwf-chip{background:#fff1bd!important;color:#283a8c!important;border:1.5px solid #283a8c!important}
.mcwf-btn,.mcwf .mcwf-btn{border:2.5px solid #283a8c!important;color:#283a8c!important;box-shadow:2px 3px 0 rgba(40,58,140,.3)!important}
/* locked things read clearly (>= 4.5:1); the lock shows through hatching and the faded picture, not text opacity */
.stc[disabled]{opacity:1!important;background:#f3ecdc repeating-linear-gradient(-45deg,transparent 0 7px,rgba(40,58,140,.07) 7px 8px)!important}
.stc[disabled] b,.stc[disabled] small{color:#3a4a8a!important}
.stc[disabled] .chip{opacity:.85}
.node.locked{opacity:1!important;background:#f1ebdc repeating-linear-gradient(-45deg,transparent 0 5px,rgba(40,58,140,.12) 5px 6px)!important;border-style:dashed!important}
.node.locked img.mcw-glyph{opacity:.45}
.node.locked small{color:#3a4a8a!important}
/* short phones (SE, landscape-ish heights): keep Continue above the fold */
@media (max-height:700px) and (max-width:720px){#sTitle .hero{height:132px;margin-top:8px;margin-bottom:8px}#sTitle .hero canvas{width:104px;height:104px}#sTitle .hero canvas:nth-child(2){width:128px;height:128px}#sTitle .sub{margin-top:4px;font-size:15px}#sTitle .expedition-label{margin-top:4px}}
/* narrow phones: tap-to-walk does most of the work, so the thumb buttons step back and free the world */
@media (max-width:360px){#sWorld .owa{width:64px;height:64px;font-size:30px;right:12px}#sWorld .owb2{width:50px;height:50px;right:84px}#sWorld .owu{width:46px;height:46px;right:16px;bottom:calc(106px + env(safe-area-inset-bottom,0px))}}
#sWorld .owgoal{text-wrap:balance}
.sheet .opt.go{background:#ffd75e;border-color:var(--ink)}.sheet .opt.go small{color:var(--ink);opacity:.8}
img.pen-ball{width:1.35em;height:1.35em;vertical-align:-.3em;display:inline-block;pointer-events:none}
.pen-ic{width:1em;height:1em;display:inline-block;vertical-align:-.12em}#owMenu .pen-ic,#mapMenu .pen-ic{width:24px;height:24px}
/* round 2 polish: readable HUD numbers, labels and long names */
#owCoins,#mapCoins{font-size:22px;line-height:1}
#sWorld .owb2 small{font-size:11px;letter-spacing:.02em}
#nickIn{color:var(--ink);background:#fffdf6}
.teamc h3,.teamc .nm,.teamc b{overflow-wrap:anywhere;min-width:0}
.sheet .opt span{min-width:0;overflow-wrap:anywhere}
.teamc>*{min-width:0}
.coach.under-hp{flex-direction:row-reverse}.coach.under-hp .bub{border-radius:16px 4px 16px 16px}
.catch-card{display:grid;place-items:center;margin:4px 0 8px}.catch-card>*{width:min(250px,72vw);max-width:100%}
.catch-card .card{font-size:12.5px}
@media (min-width:700px){#sTitle p.sub{margin-top:22px}}
#owPips{flex:0 1 auto}#owPips .pip{flex:0 0 32px;width:32px}
#sWorld .owrow2{pointer-events:none}#sWorld .owrow2 #owPips,#sWorld .owrow2 #owSkills>*{pointer-events:auto}
