/* features.css — Funkció-specifikus nézetek: ágrajz, meccsszoba, seedelés. */

/* ágrajz */
.bscroll{overflow-x:auto;padding:4px 0 22px;margin:0 -16px;-webkit-overflow-scrolling:touch}
.bcanvas{position:relative;margin:0 16px}
.bcanvas svg{position:absolute;left:0;top:0;pointer-events:none}
.bcanvas path{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.bh{position:absolute;top:0;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--accent);padding-bottom:5px}
.bh b{font:700 16px var(--f-head);letter-spacing:.08em;text-transform:uppercase}
.bh span{line-height:1}
.mc{position:absolute;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-strong);cursor:pointer;overflow:hidden;transition:border-color .15s}
.mc:hover{border-color:var(--accent)}
.mc.me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px -4px rgba(55,242,216,.55)}
.mc.dim{opacity:.3}
.mrow{display:flex;align-items:center;gap:8px;height:27px;padding:0 8px 0 0}
.mrow i{width:3px;align-self:stretch;flex:none}
.mrow.a i{background:var(--atk)}.mrow.b i{background:var(--def)}
.mtag{font:600 11px var(--f-mono);width:34px;flex:none;text-align:center;color:var(--mute)}
.mnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.msc{font:600 14px var(--f-mono);min-width:20px;text-align:right}
.mrow.l{color:var(--mute)}
.mrow.w .mnm{font-weight:700}
.mrow.w .msc{font-weight:700;color:var(--accent)}
.mrow.w .mtag{color:var(--ink)}
.mrow.hl{background:var(--accent-dim)}
.mrow.tbd .mnm{color:var(--mute);font-style:italic}
.mmeta{margin-top:auto;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;background:rgba(2,7,8,.7);border-top:1px solid var(--line);font:600 10.5px var(--f-head);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.champ{display:flex;align-items:center;gap:16px;background:linear-gradient(90deg,rgba(55,242,216,.2),rgba(55,242,216,.04));border:1px solid var(--accent);color:var(--ink);padding:16px 20px;margin-bottom:16px}
.champ .logo{width:52px;height:52px;font-size:17px}
.champ b{font:700 30px var(--f-head);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 18px rgba(55,242,216,.4)}

/* meccsszoba */
.board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:linear-gradient(180deg,rgba(55,242,216,.045),transparent 60%),var(--paper);border:1px solid var(--line-strong);padding:20px 22px;--cut:16px}
.board .side{display:flex;align-items:center;gap:14px;min-width:0}
.board .side.b{flex-direction:row-reverse;text-align:right}
.board .side.a{box-shadow:inset 3px 0 0 var(--atk);padding-left:16px;margin-left:-22px;padding-block:8px}
.board .side.b{box-shadow:inset -3px 0 0 var(--def);padding-right:16px;margin-right:-22px;padding-block:8px}
.board .nm{font:700 26px/1.05 var(--f-head);letter-spacing:.03em;text-transform:uppercase}
.board .mid{text-align:center}
.vsbig{font:700 38px/1 var(--f-head);letter-spacing:.14em;color:var(--ink);text-shadow:0 0 20px rgba(55,242,216,.35)}
.mmeta .bo{padding:0 6px;font-size:10px;line-height:15px}
.score{font:600 40px/1 var(--f-mono);display:flex;gap:10px;justify-content:center;text-shadow:0 0 20px rgba(55,242,216,.3)}
.score span{color:var(--mute)}
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.maptile{position:relative;min-height:84px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:8px 10px;border:1px solid rgba(255,255,255,.1);color:#fff;cursor:pointer;overflow:hidden;background:linear-gradient(140deg,hsl(var(--h) 38% 30%),hsl(var(--h) 46% 12%));border-radius:2px}
.maptile .mt-img{position:absolute;inset:0;background:center/cover no-repeat}
.maptile::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.05) 62%)}
.maptile b,.maptile small{position:relative;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.maptile b{font:700 20px var(--f-head);letter-spacing:.05em;text-transform:uppercase}
.maptile small{font-size:12px;opacity:.9;min-height:16px}
.maptile[disabled]{cursor:default;color:#fff}
.maptile.can:hover{outline:2px solid var(--accent)}
.maptile.banned{filter:grayscale(1) brightness(.5)}
.maptile.banned b{text-decoration:line-through}
.maptile.pick-a{outline:2px solid var(--atk)}.maptile.pick-b{outline:2px solid var(--def)}
.maptile.decider{outline:2px dashed var(--accent)}
.vsteps{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px}
.vs{font:600 11.5px var(--f-head);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);background:rgba(15,31,35,.75);color:var(--mute)}
.vs.a{border-left:3px solid var(--atk)}.vs.b{border-left:3px solid var(--def)}
.vs.cur{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.vs.done{color:var(--ink)}
.scr{display:grid;grid-template-columns:1fr 64px 20px 64px;gap:8px;align-items:center;margin-bottom:8px}
.scr input{text-align:center;font:600 18px var(--f-mono);min-height:44px;background:#071113;border:1px solid var(--line-strong);border-radius:2px;width:100%}
.scr input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.scr .x{text-align:center;color:var(--mute)}
.demotools{border:1px dashed var(--line-strong);padding:10px 12px;margin-top:14px}
.demotools > b{font:600 11px var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.hero-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:28px 0 12px}

/* seedelés */
.seed{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--paper);border:1px solid var(--line);margin-bottom:6px;cursor:grab}
.seed:hover{border-color:var(--line-strong)}
.seed.drag{opacity:.4}
.seed .n{font:600 15px var(--f-mono);width:26px;text-align:right;color:var(--accent)}
.seed .grip{color:var(--mute)}
.seed .nm{flex:1;font-weight:600}