:root{font-family:system-ui,sans-serif;color-scheme:dark;--bg:#101522;--card:#1d293b;--text:#f6f8fc;--muted:#afbbcb;--edge:#39475d;--accent:#77d6b7}body.light{color-scheme:light;--bg:#f4f6fa;--card:#fff;--text:#18243a;--muted:#5b6b7e;--edge:#d8dfeb;--accent:#0a8868}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:auto;padding:16px;max-width:850px}header,.bar,.buttons,nav{display:flex;align-items:center;justify-content:space-between;gap:10px}header h1{font-size:1.9rem}h2{font-size:1.25rem}h3{font-size:1rem}nav{justify-content:flex-start;border-bottom:1px solid var(--edge);margin-bottom:18px}button{background:var(--accent);border:0;border-radius:9px;padding:10px 13px;font-weight:700;cursor:pointer;color:#13241e}button:disabled{opacity:.45}nav button{background:transparent;color:var(--muted);border-radius:0}nav .selected{color:var(--accent);border-bottom:2px solid var(--accent)}.card,.slot{background:var(--card);border:1px solid var(--edge);padding:14px;border-radius:13px;margin:10px 0}.bar{align-items:flex-start}.bar h2{margin:8px 0}#slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.slot{margin:0}.identity{display:flex;align-items:center;gap:10px}.identity img{width:85px;height:85px;object-fit:contain}.identity strong{font-size:1.05rem}.pills{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0}.pill{display:inline-block;background:var(--c);color:white;text-shadow:0 1px 2px #0008;font-size:.73rem;font-weight:750;padding:5px 8px;border-radius:7px}.movechip{display:inline-block;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 24%,var(--card));padding:7px;border-radius:5px;font-size:.82rem;margin:3px 4px 3px 0}.muted,.note,footer,p{color:var(--muted);font-size:.88rem}dialog{background:var(--card);color:var(--text);border:1px solid var(--edge);border-radius:15px;width:min(96vw,500px);max-height:92dvh;overflow:auto;padding:18px}dialog::backdrop{background:#000a}label{display:block;color:var(--muted);font-size:.9rem;margin:12px 0}input,select{display:block;width:100%;background:var(--bg);border:1px solid var(--edge);color:var(--text);border-radius:9px;padding:12px;margin-top:6px;font:inherit}.search{position:relative}.suggestions{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--edge);max-height:190px;overflow-y:auto;z-index:20;border-radius:8px}.suggestions button{display:block;background:transparent;color:var(--text);text-align:left;width:100%;font-weight:500}.suggestions button:hover{background:var(--bg)}.moveRow{display:grid;grid-template-columns:24px minmax(0,1fr) 38px;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--edge);border-radius:10px;padding:8px;margin:8px 0}.moveRow input{margin:0}.moveRow .search{min-width:0}.moveRow .clear{background:var(--card);color:var(--text)}.moveType{min-height:23px;margin-top:4px}.buttons{justify-content:flex-end;margin-top:15px}.error{color:#ff8181}.effect{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--edge);padding:8px 0;gap:10px}.effect b{font-size:.84rem}.good{color:#4fdb90}.bad{color:#e9ae57}.zero{color:#ff7373}footer{text-align:center;margin:30px 0}[hidden]{display:none!important}

.rank-header{display:flex;align-items:center;gap:10px}.rank-number{background:var(--accent);color:#10241e;padding:9px 11px;border-radius:9px;font-weight:800}.rank-summary{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.rank-summary strong{font-size:.92rem}.rank-summary span{font-size:.82rem;font-weight:750}.rank-card:first-of-type{border-color:var(--accent)}.rank-card .note{line-height:1.5}

.mode-switch{display:flex;gap:8px;margin:12px 0}.mode-switch button.selected{background:var(--accent);color:#10241e}.opponent-report{border-top:1px solid var(--line);padding-top:9px;margin-top:10px}.opponent-report h4{margin:3px 0 8px}

.pair-identities{display:flex;gap:12px;flex-wrap:wrap}.pair-identities .identity img{width:52px;height:52px}.pair-action{margin:10px 0;padding:8px;border-radius:8px;background:var(--surface,#ffffff0c)}.pair-action .bad{font-size:.8rem}

/* Tak-Dex V6 visual refresh */
:root{--bg:#0c0e12;--card:#171a20;--text:#f7f7f8;--muted:#a3a6b1;--edge:#353942;--accent:#e33343;--line:#353942;--surface:#24262c;--gold:#f0be42}
body.light{--bg:#f6f3f3;--card:#fff;--text:#25262b;--muted:#6b6970;--edge:#d9d2d4;--accent:#ca2537;--line:#d9d2d4;--surface:#f3eeee;--gold:#c38b16}
body{position:relative;isolation:isolate;min-height:100dvh;max-width:900px;padding:18px 14px 36px;background:radial-gradient(ellipse at 100% 0%,#45161e 0%,transparent 35%),var(--bg)}
body.light{background:radial-gradient(ellipse at 100% 0%,#f8dfe3 0%,transparent 35%),var(--bg)}
body::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;right:-95px;width:min(72vw,440px);aspect-ratio:1;border-radius:50%;opacity:.13;background:radial-gradient(circle at center,#0c0e12 0 11%,#b7b7b7 11% 15%,#0c0e12 15% 18%,transparent 18%),linear-gradient(0deg,transparent 0 44%,#050607 44% 56%,transparent 56%),linear-gradient(#e33343 0 50%,#d9dadd 50% 100%);box-shadow:inset 0 0 0 15px #06070a,0 0 65px #e3334326;transform:rotate(-18deg)}
body.light::before{opacity:.10}
.app-header{padding:12px 3px 22px;gap:12px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand h1{margin:0;font-size:clamp(1.9rem,7.5vw,3rem);line-height:1;letter-spacing:.01em;font-weight:950;font-style:italic;text-shadow:0 2px 4px #0005;white-space:nowrap}.brand h1 span{color:var(--accent)}.brand p{font-size:.62rem;letter-spacing:.12em;font-weight:700;margin:7px 0 0}.brand-ball{width:49px;height:49px;flex-shrink:0;border-radius:50%;border:4px solid #131418;background:linear-gradient(#e53a47 0 44%,#111 44% 56%,#f1f2f3 56%);position:relative;box-shadow:0 2px 10px #0008}.brand-ball span{position:absolute;width:18px;height:18px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#eceef0;border:4px solid #15171b}
#theme{background:var(--surface);color:var(--text);border:1px solid var(--edge);font-size:.77rem;flex-shrink:0}
.main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--edge);border-radius:15px;overflow:hidden;margin:0 0 22px;background:#12151a;box-shadow:0 5px 20px #0003}.main-tabs button{border:0!important;border-radius:0;background:transparent;color:#aeb0b9;padding:16px 8px;font-size:.95rem;font-weight:900}.main-tabs button.selected{background:linear-gradient(130deg,#b91e2c,#e43848);color:#fff;box-shadow:inset 0 0 0 1px #f55b66}
button{background:linear-gradient(135deg,#e33c4b,#bf2232);color:white;border:1px solid #e44958;border-radius:10px;box-shadow:0 3px 10px #0002}button:hover{filter:brightness(1.08)}button:disabled{filter:none}
.card,.slot{background:var(--card);border:1px solid var(--edge);border-radius:16px;box-shadow:0 8px 25px #0003}.card{padding:14px}.card strong,.slot strong{color:var(--text)}.card p{margin:8px 0}
.section-label{display:flex;align-items:center;gap:10px;margin:4px 0 10px;font-size:1.05rem;letter-spacing:.05em;color:var(--muted);font-weight:850}.results-label{margin-top:26px}
#foePreview,#foePreview2{background:var(--card);border:1px solid var(--edge);border-radius:15px;padding:10px;margin:10px 0}#foePreview:empty,#foePreview2:empty{display:none}#foePreview .identity img,#foePreview2 .identity img{width:105px;height:105px}.identity strong{font-size:1.05rem}
.rank-card:first-of-type{border-color:var(--gold);box-shadow:0 0 0 1px #f0be4233,0 0 18px #f0be4229}.rank-card:first-of-type .rank-number{background:linear-gradient(145deg,#e9bd45,#926a1c);color:#fff}.rank-number{background:#303a46;color:#e4e8f0;border:1px solid #5a6270;border-radius:10px;min-width:40px;text-align:center}.rank-card{padding:12px}.rank-header{gap:9px}.rank-summary{border-top:1px solid var(--edge);padding-top:10px}.rank-summary strong{color:var(--text)}.good{color:#5be99b}.bad{color:#f07878}.zero{color:#ff7b7b}
.mode-switch{background:#12151a;border:1px solid var(--edge);border-radius:12px;overflow:hidden;gap:0}.mode-switch button{flex:1;border:0;border-radius:0;background:transparent;color:#b5b5bb;box-shadow:none}.mode-switch button.selected{background:linear-gradient(135deg,#d72b3a,#ad1d2c);color:white}.movechip,.pill{border-radius:7px}.pair-action{border:1px solid var(--edge);border-radius:10px}dialog{box-shadow:0 25px 80px #000a}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}.suggestions{box-shadow:0 12px 35px #0008}footer{opacity:.8}
@media(max-width:450px){.brand-ball{width:40px;height:40px;border-width:3px}.brand-ball span{width:16px;height:16px}.brand{gap:8px}.brand p{font-size:.5rem;letter-spacing:.06em}#theme{padding:9px 7px}.main-tabs button{font-size:.85rem}.rank-header .identity img{width:68px;height:68px}}

/* V7 closer to original TAK-DEX concept: stacked recommendation cards and gold #1 */
#battlePage{position:relative}
#battlePage>.section-label:first-child{padding:8px 4px}
#battlePage>p{max-width:640px}
#matchups{margin-top:12px}
.analysis-disclaimer{color:var(--muted);font-size:.76rem;line-height:1.45;padding:9px 12px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--card) 75%,transparent);border-radius:7px}
.rank-card{padding:12px 13px;margin:10px 0;background:linear-gradient(145deg,#181b21,#101217);border:1px solid #343842}
body.light .rank-card{background:linear-gradient(145deg,#fff,#f5f2f2)}
.rank-card.rank-winner{border:1.5px solid #f1c342;box-shadow:0 0 0 1px #c88b2525,0 0 18px #efba3a40}
.recommendation-head{display:flex;gap:10px;align-items:center;min-width:0}
.ranking-medal{display:grid;place-items:center;min-width:35px;height:38px;border-radius:9px;background:#303742;border:1px solid #49505b;color:#e6e8ed;font-size:1.15rem;font-weight:900}
.rank-winner .ranking-medal{background:linear-gradient(145deg,#e8bd43,#86601b);border-color:#ffd866;color:white;font-size:1.5rem}
.recommendation-head .identity{flex:1;min-width:0}
.recommendation-head .identity img{width:75px;height:75px;object-fit:contain}
.recommendation-head .identity strong{font-size:1.12rem}
.rank-risk{font-size:.69rem;font-weight:900;max-width:78px;text-align:right;letter-spacing:.02em}
.recommended-move{margin:8px 0 0 45px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;border-top:1px solid #ffffff16;padding:10px 0 6px}
.recommended-move small{font-size:.69rem;font-weight:900;color:#aeb3be;letter-spacing:.06em}
.recommended-move strong{font-size:.98rem;color:var(--text)}
.recommended-move>span{font-size:.75rem;color:#72e4a0}
.move-stats{font-size:.73rem;color:var(--muted);font-weight:650}
.expand-details{margin-top:8px;border-top:1px solid var(--edge)}
.expand-details summary{list-style:none;cursor:pointer;padding:10px 2px 2px;font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.expand-details summary::-webkit-details-marker{display:none}
.expand-details[open] summary{color:var(--accent);margin-bottom:8px}
.matchup-details{padding:8px 0;border-top:1px solid var(--edge)}
.matchup-details h4{font-size:.77rem;color:var(--muted);letter-spacing:.08em;margin:3px 0 8px}
.threat-row{font-size:.76rem;color:var(--muted);margin-bottom:10px}
.move-detail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff10}
.move-detail-numbers{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.move-detail-numbers b{font-size:.79rem}
.moveRow .moveType{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:5px}
.subheading{font-size:.86rem;letter-spacing:.07em;color:var(--muted);margin:22px 0 10px}
@media(max-width:480px){.rank-risk{font-size:.61rem}.recommendation-head .identity img{width:64px;height:64px}.recommended-move{margin-left:0}.move-detail-row .movechip{max-width:48%}}

/* V8: fixed bottom navigation, cropped portraits, distressed Poké Ball */
body{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px));overflow-x:hidden}
.main-tabs{position:fixed;z-index:100;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),640px);margin:0;display:grid;grid-template-columns:1fr 1fr;border:1px solid #4a3439;border-radius:19px;background:linear-gradient(155deg,#26272c,#101116);padding:6px;gap:5px;box-shadow:0 -8px 36px #000a,0 8px 24px #0007;backdrop-filter:blur(14px)}
.main-tabs button{min-height:58px;border-radius:13px!important;display:flex;justify-content:center;align-items:center;gap:9px;font-size:.94rem;letter-spacing:.055em;box-shadow:none}
.main-tabs button.selected{background:linear-gradient(135deg,#ef4350,#a91d2b);box-shadow:0 3px 13px #e8324544,inset 0 1px #ffffff38}
body.light .main-tabs{background:linear-gradient(135deg,#fff,#f0e5e7);border-color:#cbb8bd}
.rank-card{overflow:hidden}
.recommendation-head{align-items:stretch;min-height:114px;gap:7px}
.ranking-medal{align-self:center}
.rank-identity{flex:1;gap:4px!important;min-width:0;align-items:center}
.rank-portrait{width:112px;height:118px;flex:0 0 112px;position:relative;overflow:hidden;align-self:stretch;mask-image:linear-gradient(to right,black 76%,transparent 100%)}
.recommendation-head .rank-portrait img{position:absolute;width:160px!important;height:160px!important;max-width:none;object-fit:contain;left:-23px;top:-12px;filter:drop-shadow(0 4px 8px #0008)}
.rank-info{min-width:0;flex:1;position:relative;z-index:1}
.rank-info strong{font-size:1.08rem;line-height:1.1}
.rank-info .pills{margin-top:9px}
.rank-risk{align-self:center;flex:0 0 72px}
.full-pokemon{display:flex;align-items:center;justify-content:center;min-height:175px;margin:10px 0;background:radial-gradient(ellipse at center,#e3324521,transparent 65%);border-radius:13px}
.full-pokemon img{height:190px;width:min(100%,250px);object-fit:contain;filter:drop-shadow(0 8px 12px #0008)}
/* Distressed Poké Ball watermark: split arcs and rough scratched edges */
body::before{top:12px;right:-110px;width:min(82vw,470px);opacity:.18;transform:rotate(-24deg);background:
radial-gradient(circle at center,#111318 0 10%,#c9c9c9 10% 14%,#0b0c0f 14% 17%,transparent 17%),
linear-gradient(13deg,transparent 0 43%,#0a0b0e 43% 56%,transparent 56%),
linear-gradient(104deg,transparent 0 18%,#0b0c0f 18% 19.5%,transparent 19.5% 77%,#090a0d 77% 79%,transparent 79%),
repeating-linear-gradient(113deg,transparent 0 23px,#0b0d11 24px 25px,transparent 26px 57px),
linear-gradient(#e53b4c 0 50%,#d3d5d9 50% 100%);
box-shadow:inset 0 0 0 12px #090a0c,inset 0 0 0 22px #f5f5f5,0 0 45px #e3334330;
clip-path:polygon(2% 20%,9% 15%,14% 5%,29% 3%,36% 0,45% 4%,53% 1%,63% 5%,71% 4%,85% 15%,91% 24%,96% 38%,100% 48%,95% 56%,99% 67%,92% 75%,91% 87%,80% 90%,73% 97%,61% 96%,52% 100%,44% 95%,32% 98%,25% 92%,12% 90%,7% 80%,2% 69%,5% 58%,0 47%,5% 38%,0 30%)}
@media(max-width:460px){.rank-portrait{width:88px;flex-basis:88px;height:110px}.recommendation-head .rank-portrait img{width:143px!important;height:143px!important;left:-27px;top:-7px}.rank-risk{flex-basis:62px;font-size:.59rem}.rank-info strong{font-size:1rem}.ranking-medal{min-width:30px;padding:6px}}
@media(max-width:355px){.rank-portrait{width:70px;flex-basis:70px}.rank-risk{flex-basis:53px}.recommendation-head .rank-portrait img{left:-38px}}

/* V9: true mobile viewport, 4-item persistent dock matching the reference */
html{width:100%;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;min-width:0;margin:0;padding:14px 12px calc(108px + env(safe-area-inset-bottom,0px));overflow-x:clip}
main,header,section,.card,.slot,#matchups,#slots{max-width:100%;min-width:0}
main{width:100%;margin-inline:auto;max-width:850px}
body::before{position:absolute;max-width:100vw;right:-65px;pointer-events:none}
.app-header{width:100%;min-width:0}
.app-header .brand{min-width:0;flex:1}
.app-header .brand>div:last-child{min-width:0}
.app-header .brand h1{font-size:clamp(1.45rem,7vw,2.65rem)}
.app-header .brand p{font-size:clamp(.42rem,1.8vw,.65rem);white-space:normal}
.main-tabs{--nav-bg:#101216;position:fixed;bottom:0;left:0;right:0;top:auto;transform:none;width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:10px 4px calc(10px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid #383940;border-radius:22px 22px 0 0;background:linear-gradient(180deg,#14161a,#090a0e);box-shadow:0 -9px 30px #0009;z-index:200;overflow:visible;isolation:isolate}
.main-tabs::before{content:"";position:absolute;top:-3px;left:calc(37.5% - 24px);width:48px;height:3px;background:var(--accent);box-shadow:0 0 11px var(--accent);border-radius:4px;pointer-events:none;opacity:0}
.main-tabs button{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-width:0;min-height:60px;padding:5px 0;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;color:#8e929d!important;font-size:.75rem;letter-spacing:0;white-space:nowrap;line-height:1.15}
.main-tabs button.selected{color:#f04455!important}
.main-tabs button svg{display:block;width:25px;height:25px;flex-shrink:0}
.main-tabs button span{display:block}
.main-tabs button.selected::before{content:"";position:absolute;top:0;width:44px;height:3px;background:#f03c4d;border-radius:0 0 5px 5px;box-shadow:0 0 11px #e33343}
body.light .main-tabs{background:linear-gradient(180deg,#fff,#f3ebed);border-color:#d5c6c9}
body.light .main-tabs button{color:#7a7c83!important}
body.light .main-tabs button.selected{color:#c5263b!important}
#slots{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.recommendation-head{width:100%;min-width:0}
.rank-identity{min-width:0;overflow:hidden}
.rank-info{min-width:0}
.rank-info strong{overflow-wrap:anywhere}
.rank-portrait{max-width:30vw;flex-shrink:1}
.rank-risk{min-width:0;overflow-wrap:anywhere}
.move-detail-row{min-width:0}
.move-detail-row>*{min-width:0}
.mode-switch{width:100%}
.mode-switch button{min-width:0}
.dex-entry{display:flex;gap:14px;align-items:center}
.dex-entry img{width:110px;max-width:40%;object-fit:contain}
@media(max-width:390px){body{padding-left:9px;padding-right:9px}.rank-card{padding:10px 8px}.recommendation-head{gap:4px}.ranking-medal{min-width:28px}.rank-portrait{flex-basis:67px;width:67px}.rank-info strong{font-size:.91rem}.rank-risk{flex-basis:50px;font-size:.55rem}.rank-info .pill{font-size:.61rem;padding:4px 5px}}

/* V10: reference-inspired background only. Oversized dark fractured Poké Ball at top right. */
body{background:radial-gradient(ellipse 85% 42% at 91% -8%,#40151c 0%,#1d1016 38%,transparent 80%),#0b0d11}
body.light{background:radial-gradient(ellipse 85% 42% at 91% -8%,#f4d9dd 0%,transparent 78%),var(--bg)}
body::before{top:-140px;right:-145px;width:min(105vw,590px);max-width:none;aspect-ratio:1;border-radius:50%;opacity:.45;transform:rotate(-20deg);clip-path:none;box-shadow:inset 0 0 0 9px #06070a,inset 0 0 42px #050607,0 0 60px #8d172b29;background:
radial-gradient(circle at 50% 50%,#24252a 0 8%,#090a0e 8.5% 12%,#545055 12.5% 15%,#090b0e 15.5% 17%,transparent 17.5%),
linear-gradient(0deg,transparent 0 45%,#07080b 45% 55%,transparent 55%),
conic-gradient(from 5deg at 50% 50%,#a82231 0 48deg,#0a0b0e 48deg 58deg,#711c29 58deg 96deg,#0a0b0e 96deg 103deg,#a32838 103deg 180deg,#313137 180deg 222deg,#0a0b0e 222deg 233deg,#46434a 233deg 282deg,#0a0b0e 282deg 292deg,#37333b 292deg 360deg);
filter:drop-shadow(0 12px 24px #000a)}
body.light::before{opacity:.16}
@media(max-width:500px){body::before{top:-85px;right:-135px;width:410px;max-width:none}}

/* V11: approved cinematic Poké Ball background image, replacing CSS recreation. */
body:not(.light){background-color:#090c10;background-image:url('./takdex-background.webp');background-repeat:no-repeat;background-position:right top;background-size:max(100%, 900px) auto;background-attachment:fixed}
body::before,body.light::before{display:none!important;content:none!important}
@media(min-width:900px){body:not(.light){background-size:cover}}

/* V12: portrait wallpaper fills the phone viewport without stretching or bright gaps. */
body:not(.light){background-color:#080a0e;background-image:linear-gradient(rgba(4,6,9,.20),rgba(4,6,9,.20)),url('./takdex-background.webp');background-repeat:no-repeat;background-position:center top;background-size:cover;background-attachment:fixed}
@media(max-width:899px){body:not(.light){background-size:cover;background-position:center top}}

/* V13: fit the complete portrait wallpaper to the visible phone viewport instead of cropping it to the long document. */
body:not(.light){background-image:linear-gradient(rgba(4,6,9,.20),rgba(4,6,9,.20)),url("./takdex-background.webp");background-color:#080a0e;background-repeat:no-repeat;background-position:center top;background-size:100% 100dvh;background-attachment:fixed}
@media(max-width:899px){body:not(.light){background-size:100% 100dvh;background-position:center top}}

/* V14: preserve wallpaper aspect ratio; fill viewport height without distortion.
   Gradient layer fills viewport; photo layer is auto-width and 100dvh tall. */
body:not(.light){background-size:100% 100%,auto 100dvh!important;background-position:center top,center top!important}
@media(max-width:899px){body:not(.light){background-size:100% 100%,auto 100dvh!important;background-position:center top,center top!important}}

/* V15: keep wallpaper round and remove right-edge gap. A fixed, viewport-sized layer
   uses cover independently of document height. No stretching. */
html{background:#080a0e}
body:not(.light){background-image:none!important;background-color:transparent!important}
body:not(.light)::after{content:"";display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(4,6,9,.20),rgba(4,6,9,.20)),url('./takdex-background.webp');background-size:cover,cover;background-position:center top,center top;background-repeat:no-repeat;background-color:#080a0e}

/* V16 additional tools */
.tool-card{background:var(--card);border:1px solid var(--edge);border-radius:15px;padding:14px;margin:12px 0;display:grid;gap:12px}
.tool-card label{display:grid;gap:6px;min-width:0}
.tool-card input,.tool-card select,.plan-slot input{width:100%;max-width:100%;min-width:0}
.tool-link{display:block;text-align:left;padding:17px;background:var(--surface);border:1px solid var(--edge);color:var(--text);font-weight:750}
.theme-card{margin-top:22px}
.planner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;margin-bottom:18px}
.plan-slot{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:11px;display:grid;gap:9px}
.plan-slot label{display:grid;gap:4px;font-size:.8rem;color:var(--muted)}
.learn-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--edge);font-size:.83rem}
.learn-row small{color:var(--muted)}
.evo-line{padding:9px 2px;border-bottom:1px solid var(--edge)}
.tm-result{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.planner-result{margin:12px 0}
body.light{background:#f9f7f7!important}
body.light::after{content:"";display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)),url('./takdex-background-light.webp');background-size:cover,cover;background-position:center top,center top;background-repeat:no-repeat;background-color:#f9f7f7}

/* V17 · Six successive opponent matchups with original Battle ranking cards */
.planner-opponent{margin:20px 0 32px;border-top:1px solid var(--edge);padding-top:14px}
.planner-opponent-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.planner-opponent-number{background:linear-gradient(140deg,#d82439,#8e1225);color:#fff;border-radius:11px;padding:12px;font-weight:900;font-size:1.15rem}
.planner-opponent-art{width:70px;height:70px;flex:0 0 70px;overflow:hidden}
.planner-opponent-art img{width:100%;height:100%;object-fit:contain}
.planner-opponent-heading small{font-weight:800;letter-spacing:.08em;color:var(--muted);font-size:.67rem}
.planner-opponent-heading h3{margin:3px 0;font-size:1.2rem}
.planner-opponent-heading h3 span{font-size:.78rem;color:var(--muted);white-space:nowrap}
.planner-opponent-moves{line-height:2.1;margin-bottom:14px;font-size:.77rem}
.planner-opponent-moves .movechip{display:inline-block;margin:2px}
.planner-opponent .rank-card{margin:10px 0}
.planner-opponent .expand-details h4{margin:12px 0 5px}
@media(max-width:390px){.planner-opponent-art{width:55px;height:55px;flex-basis:55px}.planner-opponent-heading{gap:6px}.planner-opponent-number{padding:9px}}

/* V18: identical wallpaper geometry in both themes, light palette is recolored. */
body.light{background:transparent!important;background-color:transparent!important}
body.light::after{background-image:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),url('./takdex-background-light.webp');background-size:cover,cover;background-position:center top,center top;background-repeat:no-repeat;background-color:#f6f3f3}
/* Clear control for quick battle opponent replacement. */
.battle-search{position:relative}
.battle-search input{padding-right:45px!important}
.battle-clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;min-width:30px;padding:0;border:1px solid var(--edge);border-radius:50%;background:var(--surface);color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2}
.battle-clear[hidden]{display:none!important}

/* V21: readable text over the detailed light wallpaper, without altering cards. */
body.light main > section > h2,
body.light main > section > h3,
body.light #battlePage > p,
body.light #plannerPage > p,
body.light #teamsPage > .bar h2,
body.light #plannerPage > .bar h2,
body.light #tmPage > .bar h2,
body.light footer,
body.light .app-header .brand p {
  text-shadow: 0 0 4px #fff, 0 0 9px #fff, 0 0 16px #fff, 0 1px 2px #fffd;
}
body.light #battlePage > p, body.light footer {color:#353841}
body.light .app-header .brand h1 {text-shadow:0 0 5px #fff,0 0 12px #fff}
/* Soft-edged portraits: no black drop shadow, less cropping, symmetric fade. */
.rank-portrait {
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 9%,#000 23%,#000 75%,rgba(0,0,0,.6) 89%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 9%,#000 23%,#000 75%,rgba(0,0,0,.6) 89%,transparent 100%);
}
.recommendation-head .rank-portrait img {
  filter:none!important;
  width:145px!important;height:145px!important;left:-16px;top:-3px;
}
@media(max-width:460px){.recommendation-head .rank-portrait img{width:130px!important;height:130px!important;left:-21px;top:0}}
@media(max-width:355px){.recommendation-head .rank-portrait img{left:-31px}}
.full-pokemon img {filter:none!important}

/* V22: reduce battle-card Pokémon portrait scale by a further 15%, preserving
   the symmetrical fade and centering artwork inside the existing portrait slot. */
.recommendation-head .rank-portrait img{
  width:123px!important;
  height:123px!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%);
}
@media(max-width:460px){
  .recommendation-head .rank-portrait img{
    width:110px!important;
    height:110px!important;
  }
}

/* V23: full, uncropped battle portraits, matching Team-tab artwork.
   No masking, fading, zoom, offsets or shadows. Both themes. */
.rank-portrait {
  -webkit-mask-image:none!important; mask-image:none!important;
  width:clamp(76px,21vw,116px)!important;
  flex:0 0 clamp(76px,21vw,116px)!important;
  height:116px!important; max-width:none!important;
  display:flex;align-items:center;justify-content:center;
  overflow:visible!important;align-self:center;
}
.recommendation-head .rank-portrait img {
  position:static!important; display:block!important;
  width:100%!important;height:100%!important;max-width:100%!important;
  object-fit:contain!important;object-position:center!important;
  left:auto!important;top:auto!important;transform:none!important;
  filter:none!important;opacity:1!important;
}
.rank-identity{gap:8px!important;flex:1 1 auto;min-width:0;}
.rank-info{min-width:0;flex:1 1 auto;}
.rank-info strong{overflow-wrap:anywhere;}
@media(max-width:460px){
 .recommendation-head{gap:5px!important;}
 .rank-portrait{width:clamp(70px,20vw,96px)!important;flex-basis:clamp(70px,20vw,96px)!important;height:100px!important;}
 .rank-risk{flex:0 1 62px;min-width:0;}
}
@media(max-width:355px){
 .rank-portrait{width:68px!important;flex-basis:68px!important;height:88px!important;}
 .rank-risk{flex-basis:48px;}
}

/* V24: evolution artwork beside each evolutionary stage */
#dexResult .evo-line{display:flex;align-items:center;gap:10px;min-height:78px;flex-wrap:nowrap}
#dexResult .evo-art{width:72px;height:72px;object-fit:contain;flex:0 0 72px;filter:none!important;mask-image:none!important;-webkit-mask-image:none!important}
#dexResult .evo-description{display:flex;flex-direction:column;gap:3px;min-width:0}
#dexResult .evo-description small{font-size:.8em;opacity:.85}
@media(max-width:420px){#dexResult .evo-art{width:60px;height:60px;flex-basis:60px}}

/* V25: evolution types stay visually grouped under the correct form */
.evo-types{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.evo-line .evo-description{min-width:0;flex:1}

/* V29: selected tab underline anchored to the button, never the bar. */
.main-tabs button{position:relative!important;}
.main-tabs button.selected::before{top:0!important;left:50%!important;transform:translateX(-50%)!important;right:auto!important;}
/* V29: official Tactical Radar branding in the header. */
.app-header .brand-radar{width:49px;height:49px;object-fit:contain;flex:0 0 49px;border-radius:12px;display:block;}
@media(max-width:450px){.app-header .brand-radar{width:40px;height:40px;flex-basis:40px;border-radius:10px;}}

/* V30: unified transparent Tactical Radar wordmark, centered and responsive. */
.app-header{display:flex;justify-content:center;align-items:center;padding:12px 10px 20px!important;}
.app-header .brand{width:100%;max-width:650px;display:flex;justify-content:center;align-items:center;flex:1;min-width:0;}
.app-header .brand-wordmark{display:block;width:100%;max-width:610px;height:auto;object-fit:contain;filter:none;}
@media(max-width:450px){.app-header{padding:10px 6px 18px!important}.app-header .brand-wordmark{width:100%;max-width:100%;}}

/* V31: navigation indicator touches the top border of the fixed bar. */
.main-tabs{padding-top:7px!important}
.main-tabs button.selected::before{top:-8px!important;height:3px!important}

/* V35 team controls */
#teams article.card{position:relative;padding-bottom:38px}
.delete-team-link{position:absolute;right:12px;bottom:9px;background:none!important;border:0!important;box-shadow:none!important;color:#ef6464!important;font-size:12px!important;font-weight:400!important;padding:3px 4px!important;min-height:0!important;width:auto!important}
.delete-team-link:hover{text-decoration:underline}

.team-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.team-actions button{padding:9px 12px;font-size:.86rem}

/* V37: combined searchable TM/HM selector */
.tm-combo{position:relative}.tm-combo input{padding-right:52px}.tm-combo-arrow{position:absolute;right:2px;top:7px;bottom:2px;width:44px;padding:0;border-radius:0 8px 8px 0;background:transparent;color:var(--text);font-size:1.3rem;border-left:1px solid var(--edge)}.tm-combo .suggestions{top:100%;max-height:230px}.tm-combo .suggestions button:focus{background:var(--bg);outline:1px solid var(--accent)}

/* V38: evolution artwork/name navigate to that Pokédex entry. */
#dexResult .evo-navigate{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left;background:transparent;border:0;color:inherit;padding:5px 4px;border-radius:10px;cursor:pointer;font:inherit}
#dexResult .evo-navigate:hover,#dexResult .evo-navigate:focus-visible{background:rgba(225,55,70,.12);outline:2px solid transparent}
#dexResult .evo-navigate:focus-visible{outline-color:var(--accent,#e33343)}
#dexResult .evo-navigate .evo-types{display:flex;flex-wrap:wrap}