@font-face{font-family:TacticsDisplay;src:url('../fonts/Cinzel-Regular-latin.woff2') format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:TacticsDisplay;src:url('../fonts/Cinzel-Regular-latin-ext.woff2') format('woff2');font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-036F,U+1E00-1EFF}
:root{color-scheme:dark;--gold:#ebcf94;--muted:#bbb3ce;--ink:#101124;--line:#897449;--violet:#a184da}
*{box-sizing:border-box}body{margin:0;background:#101124;color:#f6f0e4;font:15px/1.5 'Segoe UI',sans-serif}button,a,input,select{-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{cursor:default;opacity:.58}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ead4a4;outline-offset:5px}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3,.play-button{font-family:TacticsDisplay,Georgia,serif}.arena-icon{width:24px;height:24px;display:inline-block;vertical-align:middle;flex-shrink:0}
.hub{min-height:100svh;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:3vw;padding:8vh 3vw 7vh;background:linear-gradient(90deg,#080b1b08 0%,#0b10221a 60%,#10122599 100%),url('../image/ui/tft/tactic_menu_bg.webp') center/cover no-repeat;box-shadow:inset 0 0 0 2px #78624f,inset 0 0 90px #10102680}
.hub:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#0c0d207a,transparent 40%,transparent 80%,#080b1b60)}
.back-link{position:absolute;top:24px;left:30px;font-size:13px;letter-spacing:.05em;padding:8px 16px;border:1px solid #ac90b15e;background:#16162c9c;backdrop-filter:blur(12px)}.back-link:hover{border-color:var(--gold)}
.hero-menu{align-self:end;justify-self:center;width:min(690px,100%);text-align:center;padding:0 0 7vh 6vw}.tactics-logo{display:block;width:100%;filter:drop-shadow(0 8px 12px #08071c99)}.tagline{font-size:13px;font-weight:600;letter-spacing:.23em;text-shadow:0 2px 8px #060617;margin:-4px 0 35px}
.play-button{position:relative;display:flex;justify-content:center;align-items:center;gap:20px;min-height:88px;text-transform:uppercase;font-size:clamp(20px,2.2vw,32px);font-weight:700;letter-spacing:.025em;border:2px solid #f4d497;outline:1px solid #b99757;outline-offset:5px;background:linear-gradient(110deg,#52392beb,#35223bef 50%,#523224f2);box-shadow:inset 0 0 0 4px #e8b76035,inset 0 0 25px #e9b76136,0 0 22px #ffc97565,0 8px 25px #0d072db3;text-shadow:0 2px 4px #31152e;transition:filter .2s,box-shadow .2s}.play-button:before,.play-button:after{content:'◆';position:absolute;left:calc(50% - 10px);font-size:20px;color:#e9c896;text-shadow:0 0 12px #b59aff}.play-button:before{top:-23px}.play-button:after{bottom:-22px}.play-button:hover{filter:brightness(1.17);box-shadow:inset 0 0 0 4px #e8b76035,0 0 35px #ffc97575}.play-icon .arena-icon{width:36px;height:36px}
.menu-buttons{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:13px;margin-top:26px}.menu-buttons button{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;padding:18px 10px;background:linear-gradient(145deg,#252341f2,#11182aee);border:1px solid #ae8e58;box-shadow:inset 0 0 0 4px #65517945,0 4px 14px #09091c99;min-height:80px}.menu-buttons button:not(:disabled):hover{border-color:#e2c891;background:linear-gradient(145deg,#44325e,#1a2338)}.menu-buttons .arena-icon{color:#bd90e8;width:28px;height:28px}.menu-buttons button span:last-child{font-weight:650;font-size:14px}.menu-buttons small{display:block;color:#b6adc9;font-size:10px;letter-spacing:.04em;margin-top:3px;font-weight:500}
.hub-sidebar{align-self:center;display:grid;gap:15px}.side-panel{border:1px solid #8d796e;outline:1px solid #373449;outline-offset:3px;background:linear-gradient(135deg,#20203bdc,#101329eb);backdrop-filter:blur(10px);padding:23px;box-shadow:0 10px 30px #07061766}.eyebrow{font-size:10px;letter-spacing:.13em;font-weight:700;color:#c4b9d8;margin-bottom:12px}.season-panel{background:radial-gradient(ellipse at 100% 0,#71469f66,transparent 75%),linear-gradient(135deg,#20203bdd,#101329ed)}.season-panel h1{font-size:28px;color:#f5dfae;letter-spacing:.04em}.season-name{color:#c5a8ea;font-size:13px;letter-spacing:.12em;margin:4px 0 13px;font-weight:600}.season-detail{font-size:12px;color:var(--muted)}.rank-panel{min-height:194px;display:flex;align-items:center;gap:18px}.rank-emblem{color:#bca1eb;filter:drop-shadow(0 0 12px #a671fc88)}.rank-emblem .arena-icon{width:70px;height:85px}.rank-panel h2{font:600 15px/1.5 'Segoe UI',sans-serif}.coming-soon{display:inline-block;border:1px solid #987aba;color:#c4abeb;font-size:11px;letter-spacing:.08em;padding:4px 13px;margin-top:13px}.lineup-panel{min-height:226px}.lineup-caption{font-size:11px;color:var(--muted);margin-bottom:13px}.lineup-portraits{display:flex;flex-wrap:wrap;gap:7px}.lineup-portraits>span{width:43px;height:50px;position:relative;border:1px solid var(--rarity)}.lineup-portraits img{width:100%;height:100%;object-fit:cover}.lineup-portraits small{position:absolute;bottom:0;left:0;width:100%;text-align:center;background:#171428cc;color:var(--gold);font-size:10px}.empty-lineup{text-align:center;padding:10px 0 20px;color:#c3b6da}.empty-lineup .arena-icon{width:38px;height:38px;color:#a288c3;margin-bottom:8px}.empty-lineup p{font-size:13px}.empty-lineup small{font-size:11px;color:#928aa8}.quiet-button{padding:9px 15px;background:#191b31;border:1px solid #766587;font-size:12px}.quiet-button:hover{border-color:var(--gold)}.lineup-panel .quiet-button{display:block;margin:18px 0 0 auto}.hub-footer{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:.2em;color:#d1c2d0b3}.hub-footer i{font-style:normal;color:var(--gold);margin:0 14px}
dialog{padding:25px;background:linear-gradient(145deg,#25203a,#10192a);border:1px solid #b89a65;color:#f6f0e4;width:min(650px,calc(100% - 32px));max-height:calc(100svh - 40px);box-shadow:0 0 0 4px #6b547942,0 25px 100px #06071ed9;overflow:auto}dialog::backdrop{background:#070b1fc7;backdrop-filter:blur(7px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.dialog-header .eyebrow{margin-bottom:5px}.dialog-header h2{font-size:26px;color:#f4dcaa}.close-button{width:34px;height:34px;border:1px solid #6f6385;background:#27243c;font-size:24px;line-height:1}.season-option{display:flex;gap:18px;align-items:center;padding:25px 18px;background:#5040663d;border:1px solid #b1935d}.season-option>.arena-icon{color:var(--gold);width:42px;height:42px}.season-option p{font-size:12px;color:var(--muted);margin-top:5px}.selected-label{margin-left:auto;color:var(--gold);font-size:12px}.dialog-note{font-size:12px;color:var(--muted);margin-top:20px}
#planner-dialog{width:min(1160px,calc(100% - 32px))}.planner-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}.board-heading{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:10px}.board-heading strong{color:var(--gold)}#planner-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:linear-gradient(#171c2e40,#141529b0),url('../image/ui/tft_board/alap.webp') center/cover;padding:13px;border:1px solid #66597d}.plan-slot{position:relative;height:135px;border:1px solid #5e5974;background:#101a2d42}.plan-slot.selected{border-color:#ffe1a3;box-shadow:0 0 10px #f5c78c55}.slot-select{width:100%;height:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0}.slot-select>img{width:100%;height:100%;object-fit:contain;object-position:bottom}.slot-select>strong{position:absolute;bottom:25px;left:2px;right:2px;font-size:10px;background:#0c1029bb;padding:2px;text-align:center;overflow:hidden;text-overflow:ellipsis}.slot-select>.arena-icon{opacity:.45}.slot-remove{position:absolute;top:3px;right:3px;background:#15132bd9;border:1px solid #887493;width:20px;height:20px;padding:0;line-height:17px}.slot-stars{position:absolute;bottom:0;left:0;width:100%;height:25px;background:#171327c4;border:0;color:var(--gold);padding:2px}.slot-stars .arena-icon{width:15px;height:15px}.planner-hint{font-size:11px;color:var(--muted);margin:12px 0 18px}.synergy-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.synergy-chip{display:flex;gap:4px;align-items:center;padding:4px 7px;border:1px solid #665b7b;background:#252639;font-size:10px;color:#bfb6cd}.synergy-chip.active{color:#f7dc9a;border-color:#aa8a58;background:#624f2938}.synergy-chip .arena-icon{width:19px;height:19px}.library-filters{display:flex;gap:8px;margin-bottom:12px}.library-filters input{min-width:0;flex:1}.library-filters input,.library-filters select{background:#101629;border:1px solid #726284;color:#eee5f8;padding:10px;font-size:12px}#hero-library{height:385px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start;padding-right:5px;scrollbar-color:#75618d #131b2b}.library-hero{min-width:0;display:flex;align-items:center;gap:8px;padding:6px;text-align:left;border:1px solid #574f6a;border-left:2px solid var(--rarity);background:#1b2033}.library-hero:hover{background:#333047;border-color:var(--rarity)}.library-hero img{width:38px;height:43px;object-fit:cover}.library-hero>span{min-width:0;flex:1}.library-hero strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-hero small{display:block;font-size:9px;color:var(--muted)}.library-hero>b{display:flex;align-items:center;gap:2px;color:var(--rarity);font-size:12px}.library-hero>b .arena-icon{width:13px;height:13px}.planner-footer{display:flex;align-items:center;gap:10px;margin-top:25px;padding-top:18px;border-top:1px solid #594c69}.planner-footer p{flex:1;font-size:11px;color:var(--muted)}.save-button{border:1px solid #d2b477;background:linear-gradient(#614360,#392c4a);color:#ffdfa3;padding:10px 17px;font-size:12px}.save-button:hover{filter:brightness(1.2)}.no-heroes{font-size:13px;color:var(--muted)}
@media(min-width:1800px){.hub{grid-template-columns:minmax(0,1fr) 360px}.hero-menu{width:790px}.side-panel{padding:28px}.rank-panel{min-height:230px}}
@media(max-width:1100px){.hub{grid-template-columns:minmax(0,1fr) 270px;gap:25px;padding:80px 25px 50px}.hero-menu{padding:0 0 40px}.play-button{font-size:23px}.menu-buttons{gap:8px}.menu-buttons button{gap:6px;padding:12px 8px}.menu-buttons button span:last-child{font-size:12px}.side-panel{padding:18px}.rank-emblem .arena-icon{width:50px}.rank-panel{gap:12px}.planner-layout{grid-template-columns:1fr 1fr;gap:18px}.plan-slot{height:115px}.library-hero small{font-size:8px}}
@media(max-width:760px){.hub{display:flex;flex-direction:column;min-height:100svh;background-position:48% top;background-attachment:fixed;padding:90px 20px 55px;gap:35px}.hero-menu{padding:65px 0 0;width:min(550px,100%)}.tactics-logo{width:90%;margin:auto}.tagline{font-size:10px;margin-bottom:28px}.play-button{min-height:72px;font-size:22px;gap:12px}.play-icon .arena-icon{width:28px}.menu-buttons button{flex-direction:column;text-align:center;min-height:100px}.menu-buttons small{font-size:9px}.hub-sidebar{width:100%;grid-template-columns:1fr 1fr;gap:14px}.lineup-panel{grid-column:1/-1;min-height:0}.season-panel h1{font-size:22px}.rank-panel{display:block;min-height:0}.rank-emblem{float:right}.rank-emblem .arena-icon{width:36px;height:50px}.rank-panel h2{font-size:12px}.season-detail{font-size:10px}.side-panel{padding:17px}.back-link{top:20px;left:20px}.hub-footer{font-size:8px}.planner-layout{grid-template-columns:1fr}.plan-slot{height:112px}#hero-library{height:270px}.library-hero small{font-size:9px}.planner-footer{flex-wrap:wrap}.planner-footer p{flex-basis:100%}.planner-footer button{flex:1}.dialog-header h2{font-size:22px}dialog{padding:18px}.season-option{flex-wrap:wrap;padding:18px}.selected-label{margin-left:0}.eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Size the interface with the viewport, while preserving readable minimums. */
:root{--copy:clamp(15px,.82vw,21px);--small:clamp(13px,.7vw,18px);--label:clamp(12px,.65vw,16px);--space:clamp(20px,1.6vw,48px)}
body{font-size:var(--copy)}
.hub{grid-template-columns:minmax(0,1fr) clamp(310px,23vw,580px);gap:var(--space);padding:clamp(80px,8vh,150px) var(--space) clamp(60px,6vh,110px)}
.hero-menu{width:min(1100px,88%);padding:0 0 clamp(20px,4vh,75px) 2vw;min-width:0}
.tactics-logo{width:100%}
.tagline{font-size:var(--small);line-height:1.7;letter-spacing:.16em;margin:0 0 clamp(24px,3vh,48px)}
.play-button{font-size:clamp(26px,2vw,52px);min-height:clamp(88px,7vw,150px);gap:clamp(16px,1.4vw,36px)}
.play-icon .arena-icon{width:clamp(36px,2.5vw,64px);height:clamp(36px,2.5vw,64px)}
.menu-buttons{gap:clamp(10px,.9vw,24px);margin-top:clamp(26px,2vw,48px)}
.menu-buttons button{min-height:clamp(90px,6.4vw,150px);padding:16px 12px;gap:clamp(8px,1vw,22px)}
.menu-buttons button span:last-child{font-size:clamp(15px,.95vw,25px)}
.menu-buttons small{font-size:var(--label);line-height:1.5;color:#d1c7e2}
.menu-buttons .arena-icon{width:clamp(28px,2vw,48px);height:clamp(28px,2vw,48px)}
.menu-buttons button:disabled{opacity:1;color:#c4b9cf;background:linear-gradient(145deg,#28243aee,#15172cee)}
.menu-buttons button:disabled .arena-icon{color:#9f86bc}
.hub-sidebar{min-width:0;gap:clamp(16px,1.2vw,30px)}
.side-panel{padding:clamp(22px,1.8vw,45px)}
.eyebrow{font-size:var(--label);line-height:1.5;letter-spacing:.09em}
.season-panel h1{font-size:clamp(30px,2vw,52px)}
.season-name{font-size:clamp(15px,1vw,24px)}
.season-detail,.lineup-caption,.empty-lineup small{font-size:var(--small);color:#d1c7df}
.rank-panel{min-height:clamp(190px,13vw,320px);gap:clamp(16px,1.5vw,36px)}
.rank-panel h2{font-size:var(--copy)}
.rank-panel>div{min-width:0}
.rank-emblem .arena-icon{width:clamp(58px,4.5vw,110px);height:clamp(70px,5.5vw,135px)}
.coming-soon{font-size:var(--small);padding:6px 16px}
.lineup-panel{min-height:0}
.lineup-portraits>span{width:clamp(48px,3.3vw,80px);height:clamp(58px,4vw,96px)}
.lineup-portraits small{font-size:var(--label)}
.empty-lineup p{font-size:var(--copy)}
.quiet-button,.save-button{font-size:var(--small);min-height:44px;padding:11px 16px;line-height:1.45;white-space:normal}
.back-link{font-size:var(--small);min-height:44px;display:flex;align-items:center}
.hub-footer{font-size:clamp(11px,.6vw,15px)}
.synergy-chip{font-size:var(--label);line-height:1.5;gap:6px;padding:6px 9px}
.synergy-chip .arena-icon{width:23px;height:23px}
dialog{width:min(850px,calc(100% - 40px));padding:var(--space);max-height:calc(100dvh - 40px)}
.dialog-header{gap:16px;margin-bottom:clamp(20px,2vw,40px)}
.dialog-header h2{font-size:clamp(26px,1.8vw,44px)}
.close-button{width:44px;height:44px;flex-shrink:0}
.season-option h3{font-size:clamp(21px,1.3vw,30px)}
.season-option p,.selected-label,.dialog-note{font-size:var(--small)}
#planner-dialog{width:min(1800px,94vw)}
.planner-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(22px,2vw,48px)}
.planned-team,.hero-library{min-width:0}
.board-heading{font-size:var(--small);gap:12px}
#planner-board{grid-template-columns:repeat(var(--board-columns,7),minmax(0,1fr));gap:clamp(6px,.6vw,14px);padding:clamp(8px,1vw,22px)}
.plan-slot{height:clamp(150px,13vw,280px);min-width:0;overflow:hidden}
.slot-select>img{object-fit:cover;object-position:center top}
.slot-select>strong{font-size:var(--small);bottom:38px;line-height:1.25;padding:5px 1px;white-space:normal;overflow-wrap:anywhere}
.slot-remove{width:32px;height:32px;line-height:28px;font-size:23px}
.slot-stars{height:36px}
.slot-stars .arena-icon{width:20px;height:20px}
.planner-hint{font-size:var(--small);line-height:1.6}
.library-filters input,.library-filters select{font-size:var(--small);min-height:48px;padding:12px}
#hero-library{height:clamp(360px,52dvh,760px);gap:10px}
.library-hero{gap:10px;padding:9px;min-height:clamp(80px,5vw,112px)}
.library-hero img{width:clamp(46px,3.3vw,74px);height:clamp(54px,3.9vw,86px);flex-shrink:0}
.library-hero strong{font-size:var(--copy);white-space:normal;line-height:1.35;overflow-wrap:anywhere}
.library-hero small{font-size:var(--label);line-height:1.45;color:#cec4df}
.library-hero>b{font-size:var(--small)}
.library-hero>b .arena-icon{width:17px;height:17px}
.planner-footer{gap:14px;margin-top:24px;flex-wrap:wrap}
.planner-footer p{font-size:var(--small);line-height:1.5;min-width:180px}
.no-heroes{font-size:var(--copy)}
@media(min-width:761px) and (max-height:800px){
  .hub{padding-top:80px;padding-bottom:55px}
  .hero-menu{align-self:center;padding-bottom:0;width:min(900px,90%)}
  .side-panel{padding:20px}.rank-panel{min-height:150px}
  .hub-sidebar{gap:16px}
}
@media(max-width:1100px){
  .hub{grid-template-columns:minmax(0,1fr) 310px;gap:22px;padding-left:24px;padding-right:24px}
  .hero-menu{width:100%;padding-left:0}
  .menu-buttons{grid-template-columns:1fr 1fr 1.35fr}
  .menu-buttons button{flex-direction:column;text-align:center;gap:6px}
  .side-panel{padding:20px}
  #hero-library{grid-template-columns:1fr}
}
@media(max-width:980px){
  .planner-layout{grid-template-columns:1fr}
  #planner-dialog{width:94vw}
  .plan-slot{height:clamp(150px,22vw,220px)}
  #hero-library{grid-template-columns:1fr 1fr;height:360px}
}
@media(max-width:760px){
  .hub{display:flex;padding:90px 20px 60px;gap:36px}
  .hero-menu{width:min(620px,100%);padding:25px 0 0}
  .tactics-logo{width:100%}
  .tagline{font-size:13px;letter-spacing:.1em}
  .play-button{font-size:clamp(23px,4.5vw,32px);min-height:80px;gap:12px}
  .play-icon .arena-icon{width:30px;height:30px}
  .menu-buttons button{min-height:110px;padding:12px 6px}
  .menu-buttons button span:last-child{font-size:15px}
  .menu-buttons small{font-size:12px}
  .hub-sidebar{grid-template-columns:1fr 1fr;width:100%;gap:16px}
  .rank-panel{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:0}
  .rank-emblem{float:none}.rank-emblem .arena-icon{width:44px;height:48px}
  .rank-panel h2{font-size:15px}
  .season-panel h1{font-size:28px}
  .season-detail{font-size:13px}
  .side-panel{padding:20px}
  .lineup-panel{grid-column:1/-1}
  .back-link{top:20px;left:20px}
  .hub-footer{font-size:11px;letter-spacing:.08em}
  dialog{padding:20px;max-height:calc(100dvh - 24px);width:calc(100% - 24px)}
  #planner-dialog{width:calc(100% - 24px)}
  .plan-slot{height:150px}
  .planner-footer p{flex-basis:100%}
  .planner-footer button{flex:1;min-width:120px}
}
@media(max-width:520px){
  .hub-sidebar{grid-template-columns:1fr}
  .rank-panel{flex-direction:row;align-items:center;gap:18px}
  .rank-emblem .arena-icon{width:60px;height:72px}
  .menu-buttons{grid-template-columns:1fr}
  .menu-buttons button{flex-direction:row;justify-content:flex-start;text-align:left;min-height:72px;padding:12px 20px;gap:18px}
  .menu-buttons button span:last-child{font-size:17px}
  .menu-buttons small{font-size:13px}
  #hero-library{grid-template-columns:1fr;height:340px}
  #planner-board{grid-template-columns:repeat(var(--board-columns,7),minmax(0,1fr));gap:4px;padding:5px}
  .planner-hint:before{content:'Mindkét sorban hét mező áll rendelkezésedre. ';display:block;margin-bottom:6px;color:#ead9b7}
  .slot-select>strong{font-size:12px;bottom:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot-stars .arena-icon{width:8px;height:8px}
  .slot-remove{width:clamp(16px,5vw,24px);height:24px;right:1px;font-size:18px;line-height:20px}
  .board-heading{flex-wrap:wrap}
  .library-filters{flex-wrap:wrap}
  .library-filters input{flex-basis:100%}
  .library-filters select{width:100%}
  .season-option{gap:14px}
}