/* PokéDefence Generations: fixed 1280x720 landscape stage, scaled to fit. */
:root {
  --bg: #14172b; --panel: #1d2140; --panel2: #262b52; --line: #3a4078; --ink: #f1f3ff; --mute: #9aa3d6;
  --gold: #ffcb05; --blue: #2a75bb; --good: #5ee08a; --warn: #ffb347; --bad: #ff6b6b;
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0d1a; color: var(--ink); overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; background: var(--bg); overflow: hidden; }
#app { position: absolute; inset: 0; }
img { image-rendering: pixelated; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--mute); font-size: 13px; }
.good { color: var(--good); font-weight: bold; } .warn { color: var(--warn); font-weight: bold; } .bad { color: var(--bad); font-weight: bold; }
.note { background: #2b3166; border-left: 4px solid var(--gold); padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.big { font-size: 18px; margin: 8px 0; }
small { font-size: 11px; }

/* rotate notice (portrait phones) */
#rotate { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 99; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 16px; }
#rotate div { font-size: 64px; }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

/* buttons */
.btn { background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; padding: 9px 16px; margin: 4px; font-weight: bold; transition: transform .08s, background .15s; }
.btn:hover { background: #313770; } .btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(#ffd84d, #f2b705); color: #2a2100; border-color: #b08400; box-shadow: 0 3px 0 #9a7400; }
.btn.primary:hover { background: linear-gradient(#ffe066, #ffc21a); }
.btn.big { font-size: 20px; padding: 12px 28px; }
.btn.sm { padding: 5px 10px; font-size: 13px; margin: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon { background: rgba(10,12,28,.75); border: 2px solid rgba(255,255,255,.2); border-radius: 50%; width: 40px; height: 40px; font-size: 18px; }

/* type badges */
.type { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5); margin: 1px 2px; }
.type.sm { font-size: 10px; padding: 1px 6px; }
.tdot { display: inline-block; min-width: 26px; padding: 0 3px; height: 15px; line-height: 15px; border-radius: 4px; font-size: 9px; font-weight: bold; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.6); margin: 1px; vertical-align: middle; }

/* top bar */
.topbar { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--panel); border-bottom: 2px solid var(--line); }
.tb-title { font-size: 22px; font-weight: bold; flex: 1; }
.tb-extra { display: flex; gap: 8px; align-items: center; }
.chip, .gamechip { padding: 5px 12px; border-radius: 14px; background: var(--panel2); font-weight: bold; font-size: 14px; }
.gamechip { color: #fff; }

/* modal */
.overlay { position: absolute; inset: 0; background: rgba(5,6,15,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 18px 22px; max-width: 900px; max-height: 680px; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; min-width: 360px; }
.modal h2 { margin: 4px 0 10px; } .modal h2.win { color: var(--gold); font-size: 32px; } .modal h2.lose { color: var(--bad); font-size: 32px; }
.modal p { max-width: 640px; margin: 8px auto; }
.modal .row { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.howto { text-align: left; } .howto p { margin: 6px 0; }
.sec { font-size: 12px; letter-spacing: 1px; color: var(--gold); font-weight: bold; margin: 10px 0 6px; text-align: left; }
.sec small { color: var(--mute); letter-spacing: 0; font-weight: normal; }

/* title */
.title { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #2d3a8c 0%, #14172b 70%); }
.logo { font-size: 78px; font-weight: 900; color: var(--gold); -webkit-text-stroke: 3px #2a75bb; letter-spacing: 1px; text-shadow: 0 6px 0 #1b3f73; line-height: 1; }
.logo span { color: #fff; }
.logo em { display: block; text-align: center; font-size: 34px; font-style: normal; color: #fff; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: 10px; margin-top: 8px; }
.title-mons { display: flex; gap: 6px; margin: 18px 0; } .title-mons img { width: 96px; height: 96px; animation: bob 1.6s ease-in-out infinite; }
.title-mons img:nth-child(2n) { animation-delay: .4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.title-btns { display: flex; flex-direction: column; align-items: center; }
.fine { position: absolute; bottom: 10px; font-size: 11px; color: var(--mute); }

/* choose game / starter */
.choose { display: flex; gap: 28px; justify-content: center; align-items: center; height: 664px; }
.gamecard, .startercard { width: 300px; min-height: 340px; border-radius: 20px; border: 4px solid var(--c); background: linear-gradient(160deg, var(--c), #14172b 80%); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: transform .15s; }
.gamecard:hover, .startercard:hover { transform: translateY(-6px) scale(1.02); }
.gc-name { font-size: 28px; font-weight: 900; } .gc-note { font-size: 14px; color: #dde; }
.startercard img { width: 160px; height: 160px; }

/* region map */
.region { display: flex; height: 664px; }
.rleft { width: 960px; display: flex; flex-direction: column; }
.rmap { position: relative; height: 500px; background: radial-gradient(ellipse at 40% 50%, #3f8f5a, #24543a 70%), #24543a; overflow: hidden; border-bottom: 2px solid var(--line); }
.rmap::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px); }
.rlines { position: absolute; inset: 0; width: 100%; height: 100%; }
.rlines polyline { fill: none; stroke: #f3e3b3; stroke-width: 10; stroke-dasharray: 2 14; stroke-linecap: round; }
.tnode { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: var(--c, #555); font-size: 24px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0,0,0,.35); text-shadow: 0 2px 2px rgba(0,0,0,.5); }
.tnode small { position: absolute; top: 68px; white-space: nowrap; font-size: 12px; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 8px; }
.tnode.locked, .tnode.stub { filter: grayscale(.85) brightness(.7); }
.tnode.stub::after { content: '🚧'; position: absolute; font-size: 14px; right: -6px; top: -6px; }
.tnode.sel { outline: 4px solid var(--gold); outline-offset: 3px; animation: pulse 1.2s infinite; }
.tnode.home { --c: #e35d5d; width: 48px; height: 48px; font-size: 20px; }
.tnode.e4 { --c: #6f35fc; }
@keyframes pulse { 50% { outline-offset: 7px; } }
.wstrip { flex: 1; padding: 10px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, #1d2140), #1d2140); }
.wtitle { font-size: 20px; font-weight: 900; display: flex; align-items: baseline; gap: 12px; } .wtitle small { color: var(--mute); font-size: 13px; }
.wrow { display: flex; align-items: center; margin-top: 10px; }
.lnode { width: 180px; background: var(--panel2); border: 3px solid var(--line); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; }
.lnode.open { border-color: var(--gold); } .lnode.open:hover { transform: translateY(-3px); }
.lnode.locked, .lnode.stub { opacity: .55; }
.licon { font-size: 22px; font-weight: 900; } .lnode.gym .licon { font-size: 30px; }
.lname { font-weight: bold; font-size: 14px; } .lstars { color: var(--gold); letter-spacing: 2px; }
.ldots { flex: 1; height: 0; border-top: 5px dotted #f3e3b3; margin: 0 4px; }
.modes { width: 320px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border-left: 2px solid var(--line); }
.mode { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--panel2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; }
.mode:hover { border-color: var(--gold); } .mode.locked { opacity: .55; }
.mode b { display: block; font-size: 17px; } .mode small { color: var(--mute); font-size: 12px; } .mi { font-size: 30px; }
.meet { display: flex; flex-wrap: wrap; justify-content: center; } .meet img { width: 64px; height: 64px; }

/* mode screens */
.modecard { height: 664px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 160px; }
.modecard .hero { width: 180px; height: 180px; } .modecard p { max-width: 720px; }
.pair { display: flex; gap: 20px; }
.e4row { display: flex; gap: 10px; } .e4m { border: 3px solid var(--c); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; background: var(--panel2); }

/* party select */
.party { display: flex; height: 664px; }
.pleft { flex: 1; padding: 6px 16px; overflow: auto; }
.pright { width: 330px; background: var(--panel); border-left: 2px solid var(--line); padding: 12px; display: flex; flex-direction: column; overflow: auto; }
.pright .btn { margin-top: auto; }
.slots { display: flex; gap: 8px; } .slot { width: 84px; height: 84px; border-radius: 14px; background: var(--panel2); border: 3px dashed var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot img { width: 84px; }
.boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.boxmon { position: relative; background: var(--panel2); border: 3px solid var(--line); border-radius: 12px; padding: 4px; text-align: center; cursor: pointer; font-size: 13px; }
.boxmon.on { border-color: var(--gold); background: #3a3f7a; } .boxmon img { width: 72px; height: 72px; }
.boxmon .info { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--line); font-size: 12px; padding: 0; }
.threat { display: flex; align-items: center; gap: 6px; } .threat img { width: 44px; height: 44px; }

/* battle */
.battle { display: flex; height: 720px; }
.mapwrap { position: relative; width: 1000px; height: 720px; }
canvas.map { display: block; width: 1000px; height: 720px; touch-action: none; }
.hud-tl { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; pointer-events: none; }
.hud-tr { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; align-items: center; }
.pill { background: rgba(10,12,28,.78); border: 2px solid rgba(255,255,255,.18); border-radius: 22px; padding: 7px 16px; font-size: 18px; font-weight: bold; }
.pill.cash b { color: var(--gold); }
.tip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: 760px; background: rgba(10,12,28,.88); border: 2px solid var(--gold); border-radius: 12px; padding: 8px 14px; font-size: 15px; cursor: pointer; }
.toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); background: rgba(160,30,40,.92); border-radius: 10px; padding: 7px 16px; font-weight: bold; pointer-events: none; }
.side { width: 280px; height: 720px; background: var(--panel); border-left: 3px solid var(--line); display: flex; flex-direction: column; padding: 10px; }
.lvl-name { font-size: 18px; font-weight: 900; } .lvl-sub { color: var(--mute); font-size: 13px; }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card { position: relative; background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; padding: 2px 4px 5px; text-align: center; cursor: grab; touch-action: none; }
.card:hover { border-color: var(--gold); } .card.poor { opacity: .5; } .card.poor .cost { color: var(--bad); }
.card img { width: 64px; height: 64px; margin: -6px 0 -10px; pointer-events: none; }
.cname { font-size: 13px; font-weight: bold; } .cost { color: var(--gold); font-weight: 900; }
.hk { position: absolute; left: 5px; top: 3px; font-size: 11px; color: var(--mute); }
.shiny-tog { position: absolute; right: 3px; top: 3px; border: 0; background: transparent; font-size: 14px; opacity: .35; padding: 0; }
.shiny-tog.on { opacity: 1; }
.next { background: #171a36; border-radius: 10px; padding: 6px; flex: 1; overflow: auto; }
.nrow { display: flex; align-items: center; gap: 5px; font-size: 14px; } .nrow img { width: 40px; height: 40px; margin: -4px 0; }
.ntypes { flex: 1; }
.tag { font-size: 10px; font-weight: 900; border-radius: 6px; padding: 1px 5px; background: #555; }
.tag.horde { background: #7a8c10; } .tag.aggro { background: #a12a2a; } .tag.boss { background: #a12a6a; }
.controls { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.auto { font-size: 13px; color: var(--mute); }
.play { width: 120px; height: 120px; border-radius: 50%; border: 5px solid #1c6b2e; background: radial-gradient(circle at 40% 35%, #7dff9a, #2bb24c 60%, #1c7a34); box-shadow: 0 6px 0 #145c26; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,.4); }
.play span { font-size: 46px; line-height: 1; } .play small { font-weight: bold; font-size: 12px; }
.play.running { background: radial-gradient(circle at 40% 35%, #8fd0ff, #2a75bb 60%, #1b4f85); border-color: #1b4f85; box-shadow: 0 6px 0 #133a63; }
.play:active { transform: translateY(3px); box-shadow: 0 3px 0 #145c26; }

/* tower panel */
.tpanel { position: absolute; top: 62px; width: 310px; max-height: 650px; overflow: auto; background: rgba(22,25,52,.96); border: 2px solid var(--line); border-radius: 14px; padding: 10px; font-size: 13px; z-index: 5; }
.tpanel.left { left: 10px; } .tpanel.right { left: 680px; }
.tp-head { display: flex; gap: 8px; align-items: center; } .tp-head img { width: 72px; height: 72px; margin: -8px -4px; }
.tp-head > div { flex: 1; } .tp-name { font-size: 18px; font-weight: 900; }
.x { background: transparent; border: 0; font-size: 18px; align-self: flex-start; }
.match { background: #171a36; border-radius: 8px; padding: 5px 7px; margin: 6px 0; line-height: 1.6; }
.stats { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 4px 0; } .stats b { color: #fff; }
.traits { color: var(--mute); font-size: 12px; margin-bottom: 4px; }
.path { margin: 6px 0; }
.plabel { display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 12px; color: var(--gold); }
.plabel kbd { background: var(--line); border-radius: 4px; padding: 0 5px; color: #fff; font-size: 11px; }
.pips { display: flex; gap: 3px; margin-left: auto; } .pips i { width: 14px; height: 6px; border-radius: 3px; background: #3a4078; } .pips i.on { background: var(--good); }
.up { width: 100%; text-align: left; background: linear-gradient(#2f6b3e, #24532f); border: 2px solid #4caf63; border-radius: 10px; padding: 6px 8px; margin-top: 3px; display: grid; grid-template-columns: 1fr auto; }
.up b { font-size: 14px; } .up small { grid-column: 1; color: #d6f5dd; } .up .price { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 900; color: var(--gold); font-size: 16px; }
.up.open { background: linear-gradient(#2a4f86, #213e6b); border-color: #5a95e0; } .up.open .price { color: #ffb4b4; }
.up.locked { background: #2b2c36; border-color: #a8484a; color: #9a9cab; } .up.locked small { color: #ff8a8a; } .up.locked .price { color: #8a8c99; }
.up.maxed { text-align: center; color: var(--gold); font-weight: 900; background: #3a3420; border-color: #8a7a30; }
.tp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.sell { background: #5a2330; border-color: #a33a4a; margin-left: auto; }

/* enemy info */
.einfo { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; background: rgba(22,25,52,.95); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; max-width: 420px; }
.einfo img { width: 72px; height: 72px; }

/* results / catch */
.bigstars { font-size: 46px; color: var(--gold); letter-spacing: 6px; }
.catchrow { display: flex; justify-content: center; gap: 10px; }
.catchmon { background: var(--panel2); border: 3px solid var(--line); border-radius: 14px; padding: 6px 14px; } .catchmon:hover { border-color: var(--gold); }
.catchmon img { width: 96px; height: 96px; }
.caught { display: flex; flex-direction: column; align-items: center; font-weight: bold; color: var(--good); } .caught img { width: 96px; }
.xplist { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.xprow { display: flex; align-items: center; font-size: 13px; } .xprow img { width: 40px; height: 40px; }

/* pokedex */
.tabs { display: flex; }
.dexgrid { height: 664px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 10px; align-content: start; }
.dexmon { background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; padding: 3px; font-size: 12px; }
.dexmon img { width: 72px; height: 72px; display: block; margin: 0 auto; }
.dexmon.unk img { filter: brightness(0) opacity(.35); } .dexmon.seen img { filter: grayscale(1) opacity(.7); } .dexmon.owned { border-color: #5a6ad0; }
.dexhead { display: flex; align-items: center; gap: 12px; text-align: left; } .dexhead img { width: 110px; height: 110px; }
.dexcols { display: grid; grid-template-columns: 260px 1fr; gap: 18px; text-align: left; font-size: 13px; line-height: 1.5; }
.sbar { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 6px; }
.sbar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #5ee08a, #ffcb05); display: block; }
.evo { display: flex; gap: 14px; justify-content: center; } .evo div { display: flex; flex-direction: column; align-items: center; font-size: 13px; } .evo img { width: 72px; height: 72px; }
.paths3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left; font-size: 12px; }

/* save backup */
.savecode { width: 100%; height: 58px; background: #11142a; color: var(--mute); border: 1px solid var(--line); border-radius: 8px; font: 11px monospace; padding: 6px; resize: none; user-select: text; -webkit-user-select: text; }

/* VS setup */
.vs { height: 664px; padding: 8px 24px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.seg { display: flex; gap: 8px; }
.segb { flex: 1; background: var(--panel2); border: 3px solid var(--line); border-radius: 12px; padding: 8px 12px; text-align: left; display: flex; flex-direction: column; }
.segb b { font-size: 17px; } .segb small { color: var(--mute); font-size: 12px; }
.segb.on { border-color: var(--gold); background: #3a3f7a; } .segb.off { opacity: .45; }
.vsbox { display: flex; flex-wrap: wrap; gap: 2px; } .vsbox img { width: 52px; height: 52px; background: var(--panel2); border-radius: 8px; }
.vsfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* VS battle side panel */
.slots.many { flex-wrap: wrap; } .slots.many .slot { width: 60px; height: 60px; } .slots.many .slot img { width: 60px; }
.vsside { gap: 4px; }
.wallet { background: #171a36; border-radius: 8px; padding: 5px 8px; font-weight: bold; color: var(--gold); font-size: 14px; }
.tabs2 { display: flex; gap: 4px; } .tabb { flex: 1; background: var(--panel2); border: 2px solid var(--line); border-radius: 8px; padding: 4px; font-weight: bold; font-size: 13px; }
.tabb.on { border-color: var(--gold); }
.tabbody { flex: 1; overflow: auto; min-height: 0; }
.shop.compact { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.shop.compact .card { padding: 0 0 2px; border-radius: 8px; }
.shop.compact .card img { width: 50px; height: 50px; margin: -4px 0 -8px; }
.shop.compact .cost { font-size: 12px; }
.card.send { cursor: pointer; } .card .eco { color: var(--good); font-size: 10px; display: block; margin-top: -2px; }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 4px; }
.kindb { background: var(--panel2); border: 2px solid var(--line); border-radius: 8px; font-size: 12px; padding: 3px; font-weight: bold; }
.kindb.on { border-color: var(--gold); } .kindb.locked { opacity: .4; }
.mini { position: relative; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; height: 182px; flex: none; }
.mini canvas.map { width: 252px; height: 181px; }
.minilbl { position: absolute; left: 4px; top: 4px; background: rgba(10,12,28,.8); border-radius: 8px; padding: 1px 7px; font-size: 12px; font-weight: bold; }
.play.small { width: 84px; height: 84px; } .play.small span { font-size: 32px; }

/* info buttons + modal close */
.mclose { position: sticky; top: 0; float: right; margin: -8px -10px 0 0; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel2); font-size: 15px; z-index: 2; }
.cinfo { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--line); color: #fff; font-size: 11px; font-weight: bold; padding: 0; }
.card .shiny-tog { right: 3px; top: 3px; }
.nrow { cursor: pointer; border-radius: 6px; } .nrow:hover { background: #262b52; }
.here { background: #2b3166; border-radius: 10px; padding: 4px 10px 8px; margin-bottom: 8px; text-align: left; }
.vsrow2 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vschip { display: inline-flex; align-items: center; background: var(--panel2); border-radius: 8px; padding: 0 6px 0 0; font-weight: bold; } .vschip img { width: 36px; height: 36px; }

/* tower panel: stat grid + upgrade chips (colour = what it does) */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin: 4px 0; }
.srow { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px; align-items: center; font-size: 12px; }
.srow b { color: #fff; } .srow i { font-style: normal; text-align: center; }
.c-dmg i, .c-dmg { color: #ff7a7a; } .c-spd i, .c-spd { color: #ffb347; } .c-rng i, .c-rng { color: #7dc4ff; } .c-hp i, .c-hp { color: #5ee08a; }
.c-spl i, .c-spl { color: #ffd23f; } .c-shot i, .c-shot { color: #f0f0f0; } .c-fx i, .c-fx { color: #d39bff; } .c-eye i, .c-eye { color: #6ff0e0; } .c-evo { color: #ffcb05; }
.chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.chip2 { font-size: 11px; background: rgba(0,0,0,.28); border-radius: 6px; padding: 0 5px; }
.chip2 s { opacity: .6; } .chip2 b { color: inherit; }
.tp-btns { display: flex; gap: 6px; align-self: flex-start; } .cinfo.big { position: static; width: 26px; height: 26px; font-size: 13px; }

.effects { text-align: left; background: #232850; border-radius: 10px; padding: 4px 10px 8px; margin: 6px 0; font-size: 13px; line-height: 1.45; } .effects div + div { margin-top: 3px; }

.lnode { flex: 0 1 180px; min-width: 128px; }
.rlines polyline { stroke-dasharray: 3 13; }

.kindb .klock { display: none; font-size: 10px; } .kindb.locked .klock { display: inline; }
.sendlist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.c-terr i, .c-terr { color: #9ee37d; } .c-terr { grid-column: 1 / -1; }

/* world overview */
.worldgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 14px; height: 610px; }
.regcard { background: var(--panel2); border: 3px solid var(--line); border-radius: 14px; padding: 6px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.regcard:hover { border-color: var(--gold); }
.regcard.playing { border-color: var(--gold); background: #343a78; } .regcard.cleared { border-color: var(--good); }
.regcard.locked, .regcard.coming { filter: saturate(.55) brightness(.85); }
.regn { font-size: 11px; color: var(--mute); letter-spacing: 1px; } .regname { font-size: 22px; font-weight: 900; }
.regmons { display: flex; } .regmons img { width: 56px; height: 56px; margin: -6px 0; } .regmons.small img { width: 44px; height: 44px; }
.regdots { display: flex; gap: 4px; } .regdots i { width: 14px; height: 14px; border-radius: 50%; opacity: .35; border: 2px solid rgba(255,255,255,.4); } .regdots i.on { opacity: 1; border-color: #fff; }
.regst { font-size: 12px; font-weight: bold; color: var(--gold); margin-top: auto; }
.worldfoot { text-align: center; padding: 0 20px; }
.preview { height: 664px; overflow: auto; padding: 8px 16px; }
.prow { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; } .prow .chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px; }
.pareas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.parea { background: var(--panel2); border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 10px; padding: 6px 8px; font-size: 13px; }
.pa-head { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pa-levels { display: flex; flex-direction: column; margin-top: 4px; font-size: 12px; } .pa-levels .gymlv { color: var(--gold); font-weight: bold; }

.lockr { color: var(--warn); font-weight: normal; }
.up.open .chips, .up.locked .chips { opacity: .55; }
.dexpath { margin: 3px 0 6px; } .nextnow:disabled { opacity: .45; }

.chip-new { background: rgba(255,210,63,.22); border: 1px solid #ffd23f; color: #fff2b8 !important; font-weight: 900; }
.evonext { color: var(--gold); font-size: 12px; font-weight: bold; }

.ability { font-size: 12px; color: #ffe9a8; background: rgba(255,210,63,.12); border-radius: 6px; padding: 2px 6px; margin-top: 3px; }
.abilitybox { text-align: left; background: rgba(255,210,63,.1); border-radius: 10px; padding: 2px 10px 8px; margin: 6px 0; }

.c-ally i, .c-ally { color: #8ef0c0; } .c-cash i, .c-cash { color: #ffe066; }

/* trainer abilities */
.tbar { display: flex; gap: 6px; justify-content: space-between; margin: 2px 0 4px; }
.tbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #555c8f; background: rgba(20,24,52,.9); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tbtn span { font-size: 24px; z-index: 1; } .tbtn small { position: absolute; right: 6px; bottom: 2px; font-size: 10px; font-weight: bold; color: var(--mute); z-index: 1; }
.tbtn .sweep { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0,.6); }
.tbtn .secs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000; z-index: 2; pointer-events: none; }
.tbtn.ready { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,203,5,.5); } .tbtn.aim { border-color: #ff5a5a; animation: pulse 0.8s infinite; }
.tip { bottom: 74px; }

/* trainer: armed ability prompt (Deploy / Cancel), greyed between waves; tower panel prev/next */
.tbtn.off { opacity: .4; filter: grayscale(1); }
.abar { background: rgba(255,90,90,.12); border: 2px solid #ff5a5a; border-radius: 10px; padding: 6px 8px; font-size: 12px; margin-bottom: 4px; }
.abar small { color: var(--mute); } .abar .row { display: flex; gap: 6px; margin-top: 4px; }
.navb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--line); color: #fff; font-size: 17px; font-weight: 900; line-height: 1; padding: 0; }
/* Side panel layout pass: compact sideways party cards so the next-wave list gets real room (it was squashed to one line). */
.side > * { flex-shrink: 0; }
.side > .next { flex: 1 1 auto; flex-shrink: 1; min-height: 96px; }
.side .shop:not(.compact) .card { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto auto; column-gap: 4px; text-align: left; padding: 3px 6px 3px 2px; align-items: center; }
.side .shop:not(.compact) .card img { width: 52px; height: 52px; margin: -4px -4px -4px -6px; grid-row: 1 / 4; }
.side .shop:not(.compact) .card .cname { font-size: 12px; line-height: 1.1; }
.side .shop:not(.compact) .card .ctypes, .side .shop:not(.compact) .card .cost { font-size: 12px; line-height: 1.2; }
.side .shop:not(.compact) .card .hk { left: auto; right: 24px; top: auto; bottom: 3px; }
.side .play:not(.small) { width: 96px; height: 96px; } .side .play:not(.small) span { font-size: 38px; }

/* Tower panel: evolution line beside the name; ability + type traits share one box */
.tp-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.evostrip { display: flex; align-items: center; gap: 1px; font-size: 11px; color: var(--mute); }
.evostrip img { width: 30px; height: 30px; margin: -4px -3px; opacity: .45; image-rendering: pixelated; }
.evostrip img.cur { opacity: 1; filter: drop-shadow(0 0 3px var(--gold)); }
.evostrip .arr { color: var(--mute); margin: 0 1px; }
.tp-head .muted { font-size: 11px; }
.ability .trait { color: var(--mute); font-size: 11px; }
.tpanel { width: 320px; }
.tpanel.right { left: 670px; }
.tpanel .tp-btns { position: absolute; top: 8px; right: 8px; gap: 4px; } .tpanel .tp-name { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tp-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Pokédex detail: nav bar, evolution line by the name, tower numbers as a grid; Compare view + picker */
.dexnav { display: flex; align-items: center; gap: 8px; margin: -6px 26px 6px 0; }
.evobig .evostrip img { width: 44px; height: 44px; margin: -6px -4px; }
.dexhead h2 { margin: 0 0 2px; }
.tstats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; } .tstats div { display: flex; justify-content: space-between; } .tstats span { color: var(--mute); }
.pickq { width: 100%; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--line); background: #171a36; color: #fff; margin-bottom: 8px; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 4px; max-height: 470px; overflow: auto; }
.pickmon { background: var(--panel2); border: 2px solid var(--line); border-radius: 8px; padding: 2px; display: flex; flex-direction: column; align-items: center; }
.pickmon:hover { border-color: var(--gold); } .pickmon img { width: 56px; height: 56px; margin: -4px 0 -6px; } .pickmon small { font-size: 11px; }
.cmp { min-width: 560px; }
.cmprow { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 8px; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cmprow > b:first-child { text-align: right; } .cmprow > span { text-align: center; color: var(--mute); font-size: 12px; }
.cmprow b.win { color: var(--good); } .cmprow b.win::after { content: ' ▲'; font-size: 10px; }
.cmprow > b:first-child.win::after { content: ''; } .cmprow > b:first-child.win::before { content: '▲ '; font-size: 10px; }
.cmphead { display: flex; align-items: center; gap: 6px; } .cmprow > .cmphead:first-child { flex-direction: row-reverse; text-align: right; }
.cmphead img { width: 72px; height: 72px; }
.cmphead { position: relative; padding-top: 30px; } .cmpswap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.cmptypes { display: flex; flex-wrap: wrap; gap: 2px; } .cmprow.wide > .cmptypes:first-child { justify-content: flex-end; }
#savepill { position: fixed; right: 12px; bottom: 10px; z-index: 9999; padding: 5px 10px; border-radius: 999px; background: rgba(20, 60, 35, .92); color: #d6f5dd; font: 600 13px "Trebuchet MS", sans-serif; opacity: 0; transition: opacity .3s; pointer-events: none; }
#savepill.show { opacity: 1; } #savepill.bad { background: rgba(90, 50, 20, .92); color: #ffe2b8; }
.cloudcode { font: 900 22px monospace; letter-spacing: 2px; color: var(--gold); }