:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eef3f7;background:#030a11;font-synthesis:none;text-rendering:optimizeLegibility;
  --bg:#030a11;--panel:#07131e;--panel-2:#0a1824;--panel-3:#0d1d2a;--line:#1b2d3b;
  --text:#f2f5f7;--muted:#8e9ba6;--gold:#d9a83e;--gold-2:#f0c65c;--green:#7fd556;--red:#e76e66;
  --radius:9px;--shadow:0 18px 55px rgba(0,0,0,.26)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:
 radial-gradient(circle at 14% 0%,rgba(22,61,83,.18),transparent 34%),
 linear-gradient(#030a11,#040c13 62%,#030a11);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
a{color:inherit;text-decoration:none}
img{max-width:100%}
main{min-height:calc(100vh - 190px)}
.site-header{height:74px;position:sticky;top:0;z-index:50;background:rgba(3,10,17,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(45,65,78,.55)}
.header-inner{max-width:1480px;height:100%;margin:auto;padding:0 28px;display:flex;align-items:center;gap:34px}
.brand{border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;padding:0}
.brand-mark,.auth-icon{display:grid;place-items:center;color:#07101a;font-family:Georgia,serif;font-weight:900;background:linear-gradient(135deg,var(--gold-2),#9d671e);clip-path:polygon(50% 0,92% 22%,92% 78%,50% 100%,8% 78%,8% 22%)}
.brand-mark{width:37px;height:42px;font-size:22px}
.main-nav{display:flex;align-self:stretch;gap:5px}
.main-nav button{position:relative;border:0;background:transparent;color:#d8dee3;padding:0 17px;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.03em}
.main-nav button:hover,.main-nav button.active{color:var(--gold-2)}
.main-nav button.active:after{content:"";position:absolute;height:2px;left:12px;right:12px;bottom:0;background:var(--gold)}
.classic-top-button{margin-left:auto;border:1px solid rgba(240,198,92,.72);border-radius:999px;padding:10px 15px;background:linear-gradient(135deg,rgba(217,168,62,.2),rgba(5,15,23,.92));color:#f7d77b;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.035em;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 26px rgba(217,168,62,.12)}
.classic-top-button:hover,.classic-top-button.active{background:linear-gradient(135deg,#e3b14b,#9d671e);color:#08121b;border-color:#f0c65c;transform:translateY(-1px)}
.classic-top-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor}
.header-actions{position:relative}
.button{border:1px solid transparent;border-radius:6px;padding:11px 18px;text-transform:uppercase;font-size:12px;font-weight:850;letter-spacing:.02em;color:#fff;background:#102130;display:inline-flex;justify-content:center;align-items:center;gap:8px}
.button:hover{transform:translateY(-1px)}
.button-gold{background:linear-gradient(135deg,#e3b14b,#bd8123);color:#fff;border-color:#f0c45d;box-shadow:0 8px 24px rgba(195,134,36,.18)}
.button-outline{background:rgba(4,13,20,.42);border-color:#9b7226;color:#efc55b}
.button-danger{background:rgba(151,51,51,.15);border-color:#7f3e3e;color:#f18d86}
.button-wide{width:100%}
.user-button{border:1px solid var(--line);background:var(--panel);color:#fff;border-radius:7px;padding:7px 11px 7px 7px;display:flex;align-items:center;gap:9px}
.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#c89333;color:#06101a;font-weight:900}
.account-menu{position:absolute;right:0;top:48px;width:205px;padding:7px;background:#091723;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.account-menu button{display:block;width:100%;text-align:left;padding:11px;border:0;background:transparent;color:#dfe5e9;border-radius:5px}
.account-menu button:hover{background:#112536}
.page{width:min(1480px,calc(100% - 56px));margin:0 auto;padding:28px 0 36px}
.page-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(335px,.95fr);gap:18px;align-items:start}
.guide-browser,.side-card,.guide-section,.admin-list,.admin-editor,.not-found{background:linear-gradient(155deg,rgba(9,24,35,.98),rgba(5,15,23,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 35px rgba(0,0,0,.13)}
.guide-browser{padding:22px}
.browser-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.eyebrow{text-transform:uppercase;color:#e0b24a;font-size:11px;font-weight:900;letter-spacing:.08em}
.browser-heading h1{font-size:28px;margin:5px 0 2px;line-height:1}
.browser-heading p{color:var(--muted);margin:0;font-size:14px}
.guide-count{color:#9cacb8;font-size:12px}
.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;display:grid;gap:12px;margin-bottom:14px}
.role-filters{display:flex;gap:7px;overflow:auto;padding-bottom:1px}
.role-filters button,.mini-role-tabs button{white-space:nowrap;background:#0a1722;border:1px solid #1c2c38;color:#9ba8b2;border-radius:5px;padding:9px 13px;text-transform:uppercase;font-size:11px;font-weight:800}
.role-filters button span{margin-right:7px}
.role-filters button.active,.mini-role-tabs button.active{border-color:#a87825;color:#f0c454;background:rgba(169,119,35,.11)}
.filter-tools{display:grid;grid-template-columns:1fr 175px;gap:10px}
.search-field{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#06121c;border-radius:5px;padding:0 11px}
.search-field input,.filter-tools select{width:100%;border:0;outline:none;color:#dce4e8;background:transparent;padding:10px}
.filter-tools select{border:1px solid var(--line);background:#06121c;border-radius:5px}
.guide-list{display:grid;gap:10px}
.guide-row{min-height:116px;display:grid;grid-template-columns:44px 112px minmax(170px,1.5fr) 145px 130px 180px 135px;align-items:center;background:linear-gradient(100deg,#091722,#07131d);border:1px solid #1a2b38;border-radius:7px;overflow:hidden;position:relative}
.guide-row:hover{border-color:#46515a;transform:translateY(-1px)}
.tier-badge{align-self:start;justify-self:start;margin:9px 0 0 9px;width:27px;height:27px;border-radius:5px;display:grid;place-items:center;background:#d4a23d;color:#07101a;font-weight:950;z-index:2}
.tier-s{background:#e6b64f}.tier-a{background:#d49d43}.tier-b{background:#8eb379}.tier-c{background:#718394}
.guide-champion{width:112px;height:116px;object-fit:cover;align-self:stretch;margin-left:-44px;mask-image:linear-gradient(90deg,#000 72%,transparent)}
.guide-identity{padding:12px 10px}
.guide-identity h2{font-size:19px;margin:0 0 3px}
.guide-identity p{color:#c2cbd1;margin:0 0 12px;font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide-identity span{font-size:11px;text-transform:uppercase;color:#8f9da7}
.guide-identity i{font-style:normal;text-transform:none;margin-left:9px;color:#c9a64f}
.guide-stats{display:flex;gap:19px;border-left:1px solid var(--line);padding-left:16px}
.guide-stats span,.ranking-stat{display:grid;gap:2px}
.guide-stats b{color:var(--green);font-size:16px}
.guide-stats small,.ranking-stat small{color:#75848f;font-size:10px}
.guide-preview>small{display:block;color:#82909a;text-transform:uppercase;font-size:10px;margin-bottom:7px}
.icon-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.icon-line.large{gap:8px}
.game-icon{position:relative;display:inline-grid;place-items:center;flex:none;border:1px solid #384752;background:#0b1924;overflow:hidden}
.game-icon img{width:100%;height:100%;object-fit:cover}
.game-icon-sm{width:34px;height:34px;border-radius:5px}.game-icon-md{width:44px;height:44px;border-radius:7px}.game-icon-lg{width:57px;height:57px;border-radius:8px}
.game-icon small{position:absolute;right:-1px;bottom:-1px;min-width:18px;height:18px;display:grid;place-items:center;background:#101d27;border:1px solid #aa7d2c;color:#f2c75d;font-size:10px;font-weight:900}
.icon-fallback{font-weight:900;color:#e4ba55}
.tooltip-anchor{position:relative;display:inline-flex;outline:none}
.game-tooltip{visibility:hidden;opacity:0;pointer-events:none;position:absolute;z-index:200;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,5px);width:280px;padding:12px;border:1px solid #5d4b27;border-radius:7px;background:#05111a;box-shadow:0 14px 38px rgba(0,0,0,.55);display:grid;gap:7px;color:#cbd5da;font-size:12px;line-height:1.45;text-align:left}
.game-tooltip:after{content:"";position:absolute;left:50%;top:100%;border:6px solid transparent;border-top-color:#5d4b27}
.game-tooltip strong{color:#efc55c;font-size:13px}.game-tooltip small{color:#8c9aa4}.tooltip-reason{border-top:1px solid #243641;padding-top:7px}.tooltip-reason b{color:#e6edf1}
.tooltip-anchor:hover .game-tooltip,.tooltip-anchor:focus .game-tooltip{visibility:visible;opacity:1;transform:translate(-50%,0)}
.guide-cta{margin-right:13px}
.load-more{width:100%;margin-top:11px;border:1px solid #805f25;background:#081722;color:#e7ba50;border-radius:6px;padding:10px;font-size:12px;text-transform:uppercase;font-weight:850}
.loading-panel{padding:50px;text-align:center;color:#9aa8b2;border:1px dashed #31414c;border-radius:7px}
.sidebar{display:grid;gap:14px}
.side-card{padding:17px}
.patch-card{min-height:160px;position:relative;overflow:hidden;background:
 radial-gradient(circle at 90% 50%,rgba(221,168,57,.18),transparent 33%),
 linear-gradient(145deg,#091722,#06121b)}
.patch-card:after{content:"◇";position:absolute;right:30px;top:17px;font-size:94px;color:rgba(216,162,55,.17);transform:rotate(45deg)}
.patch-card>*{position:relative;z-index:1;display:block}
.patch-number{font-size:31px;margin:10px 0 2px}
.patch-card>span:not(.eyebrow){color:#8f9ba5;font-size:12px}
.patch-card .button{width:max-content;margin-top:15px}
.side-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.side-card-title h3,.side-card h3{margin:0;font-size:13px;text-transform:uppercase}
.side-card-title button{border:0;background:transparent;color:#d9a83e;text-transform:uppercase;font-size:9px;font-weight:900}
.mini-role-tabs{display:flex;overflow:auto;border-bottom:1px solid var(--line);margin:0 -4px 7px;padding:0 4px 8px;gap:4px}
.mini-role-tabs button{border:0;padding:6px 8px;background:transparent}
.ranking-list,.counter-list{display:grid}
.ranking-row{display:grid;grid-template-columns:25px 35px 1fr auto;align-items:center;gap:9px;padding:9px 3px;border-bottom:1px solid rgba(37,55,68,.65)}
.rank{color:#d5a53e;font-weight:900;text-align:center}
.ranking-name{display:grid}.ranking-name b{font-size:13px}.ranking-name small{color:#6f7e89;text-transform:uppercase;font-size:9px;margin-top:2px}
.ranking-stat{text-align:right}.ranking-stat b{font-size:13px}.empty-note{color:#7e8c96;font-size:12px}
.counter-row{display:grid;grid-template-columns:35px 1fr 15px 50px 1fr 35px;align-items:center;gap:7px;padding:9px 0;border-bottom:1px solid rgba(37,55,68,.65);font-size:12px}
.counter-row strong{color:var(--green);text-align:center}.counter-row>span:nth-last-child(2){text-align:right}.counter-arrow{color:#b1822d;font-size:22px}
.site-footer{width:min(1480px,calc(100% - 56px));margin:0 auto 20px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0;background:#06121b}
.footer-grid button{display:grid;gap:4px;text-align:left;padding:17px 22px;background:transparent;color:#fff;border:0;border-right:1px solid var(--line)}
.footer-grid button:last-child{border-right:0}.footer-grid b{text-transform:uppercase;font-size:12px}.footer-grid span{color:#7f8c96;font-size:11px}
.footer-bottom{display:flex;justify-content:space-between;color:#667580;font-size:11px;padding:15px 4px}
.modal-backdrop{position:fixed;z-index:300;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px}
.auth-modal{width:min(430px,100%);position:relative;padding:30px;background:linear-gradient(155deg,#0a1b28,#06111a);border:1px solid #32434f;border-radius:12px;box-shadow:0 30px 90px #000}
.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#82909a;font-size:27px}.auth-icon{width:50px;height:56px;margin:auto;font-size:27px}
.auth-modal h2{text-align:center;margin:15px 0 5px}.auth-modal>p{text-align:center;color:#8e9ba5;font-size:13px;margin:0 0 18px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:18px}
.auth-tabs button{border:0;background:transparent;padding:10px;color:#81909a;font-weight:800}.auth-tabs button.active{color:#e9ba4e;border-bottom:2px solid #d5a23c}
.form-stack{display:grid;gap:13px}.form-stack label,.form-grid label,.rune-tree-selectors label{display:grid;gap:6px}
.form-stack label>span,.form-grid label>span,.rune-tree-selectors label>span{color:#aab5bc;font-size:11px;text-transform:uppercase;font-weight:800}
input,select,textarea{width:100%;border:1px solid #263946;background:#06131d;color:#e9eef1;border-radius:6px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#96702a;box-shadow:0 0 0 3px rgba(194,139,40,.08)}
textarea{resize:vertical;line-height:1.5}
.form-error,.form-warning,.form-success{padding:11px 13px;border-radius:6px;font-size:12px}.form-error{border:1px solid #7b3a3a;background:#2b1215;color:#f4a2a2}.form-warning{border:1px solid #755c2e;background:#251e10;color:#e8c46c}.form-success{border:1px solid #3f7042;background:#102718;color:#9ee29e}.muted{color:var(--muted)}
.toast{position:fixed;z-index:500;right:22px;bottom:22px;max-width:380px;border:1px solid #9c762e;border-radius:7px;background:#0c1a24;color:#eac057;padding:13px 18px;box-shadow:var(--shadow)}
.guide-hero{min-height:360px;background-size:cover;background-position:center 20%;border-bottom:1px solid var(--line)}
.guide-hero-inner{width:min(1480px,calc(100% - 56px));margin:auto;padding:34px 0;min-height:360px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.back-link{border:0;background:transparent;color:#c39a43;padding:0;margin-bottom:27px}
.hero-title-row{display:flex;align-items:center;gap:18px;max-width:850px}.hero-title-row>img{width:100px;height:100px;border-radius:10px;border:1px solid #b68630;object-fit:cover}
.hero-title-row h1{font-size:38px;line-height:1.05;margin:8px 0 10px}.hero-title-row p{color:#c0c9cf;line-height:1.55;margin:0;max-width:760px}
.guide-meta-line{display:flex;gap:20px;flex-wrap:wrap;margin-top:15px;color:#83919b;font-size:11px;text-transform:uppercase}
.guide-hero-inner>.button{margin-top:19px}
.guide-content-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(270px,.7fr);gap:18px;align-items:start}
.guide-main{display:grid;gap:15px}.guide-aside{display:grid;gap:15px}
.guide-section{padding:20px}.section-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:17px}
.section-heading h2{margin:0;font-size:18px}.section-heading span{color:#8b9aa4;font-size:11px;text-transform:uppercase}
.quick-grid{display:grid;grid-template-columns:.65fr 1.1fr 1.6fr;gap:20px}.quick-grid>div{border-right:1px solid var(--line)}.quick-grid>div:last-child{border:0}
.quick-grid h3{font-size:11px;color:#8c9aa4;text-transform:uppercase;margin:0 0 10px}
.detailed-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.detailed-item{display:flex;gap:12px;align-items:flex-start;border:1px solid #1a2c39;background:#07141e;border-radius:7px;padding:11px}.detailed-item>div{min-width:0}
.detailed-item b{font-size:13px;color:#e6edf0}.detailed-item p{font-size:11px;line-height:1.45;color:#8998a2;margin:5px 0 0}
.ability-row{display:flex;gap:10px;margin-bottom:18px}
.skill-order{display:grid;grid-template-columns:repeat(18,1fr);gap:4px;overflow:auto}.skill-order span{min-width:34px;display:grid;border:1px solid #273a47;background:#07141e;text-align:center;border-radius:4px;overflow:hidden}
.skill-order small{background:#0e202d;color:#73828c;font-size:8px;padding:3px}.skill-order b{padding:7px 3px;color:#e9bb51}
.prose p{white-space:pre-line;color:#b8c3ca;line-height:1.75;font-size:14px}
.tip-list{display:grid;gap:9px;padding:0;margin:0;list-style:none}.tip-list li{position:relative;padding:10px 12px 10px 34px;border:1px solid #1c303d;background:#07151f;border-radius:6px;color:#b9c5cb;font-size:13px;line-height:1.5}.tip-list li:before{content:"✓";position:absolute;left:12px;color:#d9aa43;font-weight:900}
.sticky-card{position:sticky;top:90px}.guide-aside h2{font-size:26px;margin:7px 0}.guide-aside p{color:#8997a1;font-size:12px;line-height:1.5}
.tag-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.tag-list span{border:1px solid #2a3b47;background:#0a1a25;border-radius:20px;padding:5px 9px;color:#9ba9b2;font-size:10px}
.guide-aside h4{font-size:10px;text-transform:uppercase;color:#82919b;margin:15px 0 8px}.matchup-icons{display:flex;gap:7px;flex-wrap:wrap}
.narrow-page{max-width:920px}.not-found{padding:75px 25px;text-align:center}.not-found>span{font-size:44px;color:#d8aa42;font-weight:950}.not-found h1{font-size:30px;margin:10px}.not-found p{color:#8f9da7}
.admin-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:17px;align-items:start}
.admin-list{position:sticky;top:91px;max-height:calc(100vh - 112px);overflow:hidden}.admin-list-head{display:flex;justify-content:space-between;align-items:center;padding:17px;border-bottom:1px solid var(--line)}
.admin-list-head h2{font-size:20px;margin:4px 0 0}.admin-list-head .button{padding:8px 10px}
.admin-list{display:flex;flex-direction:column}
.admin-queue-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.admin-queue-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #243845;background:#07141e;color:#8796a0;border-radius:6px;padding:9px 7px;font-size:10px;font-weight:850;text-transform:uppercase}
.admin-queue-tabs button.active{border-color:#8e6a28;background:rgba(203,151,51,.1);color:#efc35c}
.admin-queue-tabs span{min-width:20px;border-radius:20px;background:#142733;padding:2px 6px;font-size:9px;text-align:center}
.admin-queue-tabs .pending-count{background:#7d3d26;color:#ffd0b5}
.submission-sidebar-note{padding:11px 13px;border-bottom:1px solid var(--line);color:#82919b;font-size:10px;line-height:1.5;background:#07151f}
.admin-list-empty{display:grid;gap:5px;padding:22px 14px;text-align:center;color:#7f8d97}
.admin-list-empty b{font-size:12px;color:#b9c5cb}.admin-list-empty span{font-size:10px;line-height:1.5}
.admin-guide-list>button.pending{border-left:2px solid #b4842f}
.editor-submission-meta{margin:7px 0 0;color:#84939d;font-size:11px}
.editor-submission-meta b{color:#d7e0e4}
.moderation-info{display:flex;gap:13px;align-items:flex-start;max-width:720px;border:1px solid #6f5726;background:rgba(126,91,29,.12);border-radius:8px;padding:15px}
.moderation-info.review{border-color:#386844;background:rgba(45,108,62,.12)}
.moderation-info>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#a67828;color:#071019;font-weight:950}
.moderation-info.review>span{background:#4d9c60}
.moderation-info h3{margin:0 0 5px;font-size:14px}.moderation-info p{margin:0;color:#98a6ae;font-size:11px;line-height:1.55}
.moderation-reject{margin-top:8px}
.admin-guide-list{flex:1;min-height:0;overflow:auto;padding:7px}.admin-guide-list>button{width:100%;display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#dce4e8;text-align:left;padding:8px}
.admin-guide-list>button:hover,.admin-guide-list>button.active{background:#102230;border-color:#30434f}.admin-guide-list img{width:39px;height:39px;border-radius:5px}.admin-guide-list span{display:grid}.admin-guide-list b{font-size:12px}.admin-guide-list small{font-size:9px;color:#788792;text-transform:uppercase;margin-top:3px}
.admin-editor{overflow:hidden}.admin-editor-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px;border-bottom:1px solid var(--line)}
.admin-editor-head h1{font-size:24px;margin:5px 0 0}.admin-editor-head>div:last-child{display:flex;gap:8px}
.admin-tabs{display:flex;overflow:auto;border-bottom:1px solid var(--line);padding:0 17px}.admin-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#84939d;padding:14px 15px;font-size:11px;text-transform:uppercase;font-weight:850;white-space:nowrap}.admin-tabs button.active{color:#e7b84b;border-bottom-color:#d9a63e}
.admin-panel{padding:20px;display:grid;gap:22px}.admin-subsection{border:1px solid #1b2f3c;background:#06131c;border-radius:7px;padding:16px}
.admin-subheading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.admin-subheading h3{font-size:15px;margin:0 0 4px}.admin-subheading p{font-size:11px;color:#7d8c96;margin:0}.admin-subheading>span{border:1px solid #6f5726;color:#e6ba52;border-radius:4px;padding:5px 8px;font-size:10px}
.form-grid{display:grid;gap:14px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}
.selected-champion{display:flex;align-items:center;gap:11px;border:1px solid #2d404c;background:#081722;border-radius:7px;padding:7px}.selected-champion img{width:47px;height:47px;border-radius:6px}.selected-champion span{display:grid}.selected-champion small{color:#7f8d97;font-size:10px;margin-top:3px}.selected-champion button{margin-left:auto;border:0;background:transparent;color:#d9a83e}
.catalog-picker{position:relative}.catalog-results{position:absolute;z-index:100;top:calc(100% + 4px);left:0;right:0;max-height:330px;overflow:auto;background:#071620;border:1px solid #31434f;border-radius:7px;box-shadow:var(--shadow);padding:5px}
.catalog-results>button{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:0;background:transparent;color:#dfe6e9;padding:7px;border-radius:5px}.catalog-results>button:hover{background:#112634}.catalog-results img{width:38px;height:38px;border-radius:4px}.catalog-results span{display:grid}.catalog-results small{color:#75848f;font-size:10px}.catalog-results em{margin-left:auto;color:#d6aa45;font-size:10px}.catalog-results>span{padding:15px;color:#7c8b95}
.selected-item-list{display:grid;gap:8px;margin-top:11px}.selected-item{display:grid;grid-template-columns:57px 1fr 33px;gap:11px;align-items:start;border:1px solid #203440;background:#091924;border-radius:7px;padding:9px}.selected-item>div:nth-child(2){display:grid;gap:3px}.selected-item small{color:#71808b;font-size:10px}.selected-item textarea{margin-top:5px;padding:8px;font-size:11px}.remove-button{border:0;background:transparent;color:#e67770;font-size:20px}
.rune-tree-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rune-builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}.rune-column{border:1px solid #1c2f3b;border-radius:7px;padding:13px}.rune-column h4{margin:0 0 12px}.rune-column h4 small{color:#71808a;font-weight:400}
.rune-slot{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #1a2c38;padding:9px 0}.rune-slot:last-child{border:0}.rune-slot>button,.spell-selector>button{border:1px solid transparent;background:transparent;color:#91a0aa;border-radius:6px;padding:6px;display:flex;align-items:center;gap:7px}.rune-slot>button span,.spell-selector>button>span{font-size:10px}.rune-slot>button.selected,.spell-selector>button.selected{border-color:#a57728;background:rgba(176,126,37,.1);color:#e8bd56}
.spell-selector{display:flex;gap:8px;flex-wrap:wrap}
.section-editor-list{display:grid;gap:10px}.section-editor-list>div{border:1px solid #203440;background:#081722;border-radius:7px;padding:11px;display:grid;gap:8px}.section-editor-list>div>button{justify-self:end;border:0;background:transparent;color:#db7771;font-size:11px}
.matchup-builder{display:grid;grid-template-columns:1fr 1fr;gap:15px}.counter-picker{border:1px solid #203440;background:#07151f;border-radius:7px;padding:14px}.counter-picker h4{margin:0 0 12px}.picked-champions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}.picked-champions>span{display:flex;align-items:center;gap:5px;border:1px solid #2a3e4a;border-radius:20px;padding:4px 7px 4px 4px;font-size:10px}.picked-champions img{width:25px;height:25px;border-radius:50%}.picked-champions button{border:0;background:transparent;color:#e07a74;padding:0}
.tags-input{border:1px solid #263946;background:#06131d;border-radius:6px;padding:7px}.tags-input>div{display:flex;gap:5px;flex-wrap:wrap}.tags-input span{display:flex;align-items:center;gap:4px;border:1px solid #3a4c57;border-radius:20px;padding:4px 7px;color:#b8c4ca;font-size:10px}.tags-input button{border:0;background:transparent;color:#d87a72;padding:0}.tags-input input{border:0;padding:6px 4px;box-shadow:none}
.checkbox-label{display:flex!important;grid-template-columns:18px 1fr!important;align-items:center}.checkbox-label input{width:17px;height:17px}
.publish-summary{max-width:560px;border:1px solid #263a47;background:#071620;border-radius:7px;padding:18px}.publish-summary h3{margin-top:0}.publish-summary ul{display:grid;gap:8px;padding:0;list-style:none}.publish-summary li:before{content:"○";margin-right:8px;color:#7c8b95}.publish-summary li.ok:before{content:"✓";color:var(--green)}
@media(max-width:1250px){
  .guide-row{grid-template-columns:40px 98px minmax(180px,1.5fr) 130px 150px 125px}
  .guide-champion{width:98px}.guide-preview:first-of-type{display:none}.guide-stats{padding-left:11px;gap:12px}
}
@media(max-width:1050px){
  .main-nav{display:none}.page-grid,.guide-content-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,1fr)}.patch-card{grid-column:1/-1}
  .admin-layout{grid-template-columns:1fr}.admin-list{position:static;max-height:none}.admin-guide-list{display:flex;overflow:auto;max-height:none}.admin-guide-list>button{min-width:180px}
}
@media(max-width:780px){
  .header-inner,.page,.guide-hero-inner,.site-footer{width:calc(100% - 28px);padding-left:0;padding-right:0}.header-inner{padding:0}.site-header{height:64px}
  .brand{font-size:17px}.brand-mark{width:31px;height:35px}.user-button>span:nth-child(2){display:none}
  .page{padding-top:14px}.guide-browser{padding:13px}.browser-heading{align-items:start}.guide-count{display:none}
  .filter-tools{grid-template-columns:1fr}.guide-row{grid-template-columns:36px 82px 1fr 112px;min-height:101px}.guide-champion{width:82px;height:101px;margin-left:-36px}.guide-identity{padding:8px 5px}.guide-identity h2{font-size:16px}.guide-identity p{margin-bottom:7px}.guide-stats,.guide-preview{display:none}.guide-cta{font-size:9px;padding:9px 7px;margin-right:7px}
  .sidebar{grid-template-columns:1fr}.patch-card{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid button:nth-child(2){border-right:0}.footer-grid button{border-bottom:1px solid var(--line)}.footer-bottom{display:grid;gap:6px;text-align:center}
  .hero-title-row{align-items:flex-start}.hero-title-row>img{width:72px;height:72px}.hero-title-row h1{font-size:27px}.guide-hero,.guide-hero-inner{min-height:330px}.guide-meta-line{gap:8px 13px}
  .quick-grid,.detailed-items,.form-grid.two,.rune-builder-grid,.rune-tree-selectors,.matchup-builder{grid-template-columns:1fr}.quick-grid>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:13px}.skill-order{grid-template-columns:repeat(9,1fr)}
  .admin-editor-head{align-items:flex-start}.admin-editor-head>div:last-child{display:grid}.admin-tabs{padding:0}.admin-panel{padding:12px}.form-grid .full{grid-column:auto}.game-tooltip{width:220px;left:0;transform:none}.tooltip-anchor:hover .game-tooltip,.tooltip-anchor:focus .game-tooltip{transform:none}
}
@media(max-width:480px){
  .guide-row{grid-template-columns:34px 74px 1fr}.guide-champion{width:74px;margin-left:-34px}.guide-cta{grid-column:3;width:max-content;margin:-9px 0 10px 5px}.guide-identity span{font-size:9px}
  .footer-grid{grid-template-columns:1fr}.footer-grid button{border-right:0}.hero-title-row>img{display:none}.counter-row{grid-template-columns:35px 1fr 15px 45px 1fr 35px}.admin-editor-head{display:grid}.selected-item{grid-template-columns:47px 1fr 28px}.game-icon-lg{width:47px;height:47px}
}


/* Interaktywny panel kontr */
.counter-card{overflow:visible}
.counter-card .side-card-title{margin-bottom:11px}
.counter-card .side-card-title>div{display:grid;gap:4px}
.counter-card .side-card-title p{margin:0;color:#7f8d97;font-size:11px;line-height:1.4}
.counter-champion-picker{position:relative;z-index:30}
.counter-picker-trigger{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;padding:8px;border:1px solid #2b3f4b;border-radius:7px;background:linear-gradient(100deg,#0a1b27,#07141e);color:#e5ecef;text-align:left}
.counter-picker-trigger:hover,.counter-picker-trigger:focus-visible{border-color:#8b692b;box-shadow:0 0 0 3px rgba(190,139,42,.08)}
.counter-picker-label{display:grid;gap:2px;min-width:0}
.counter-picker-label small{color:#71818c;text-transform:uppercase;font-size:8px;font-weight:850;letter-spacing:.06em}
.counter-picker-label b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.counter-picker-chevron{color:#d5a43d;font-size:20px;transition:transform .18s ease}
.counter-picker-chevron.open{transform:rotate(180deg)}
.counter-picker-placeholder{width:44px;height:44px;display:grid;place-items:center;border:1px solid #354854;border-radius:7px;color:#d1a441;font-weight:900}
.counter-picker-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;padding:7px;border:1px solid #384b57;border-radius:8px;background:#06131d;box-shadow:0 20px 55px rgba(0,0,0,.62)}
.counter-picker-search{height:39px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid #263a47;border-radius:6px;background:#091923}
.counter-picker-search>span{color:#c89a3b}
.counter-picker-search input{height:100%;padding:0;border:0;background:transparent;box-shadow:none}
.counter-picker-options{max-height:285px;overflow:auto;margin-top:6px;padding-right:2px}
.counter-picker-options>button{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:7px;border:1px solid transparent;border-radius:6px;background:transparent;color:#dfe6e9;text-align:left}
.counter-picker-options>button:hover,.counter-picker-options>button.selected{border-color:#304550;background:#102432}
.counter-picker-options>button>span:nth-child(2){display:grid;gap:2px;min-width:0}
.counter-picker-options b{font-size:12px}
.counter-picker-options small{color:#71808a;font-size:9px}
.counter-picker-options em{color:#e0b24a;font-style:normal;font-weight:900}
.counter-picker-options .empty-note{margin:10px}
.counter-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 1px 5px;color:#82919b;font-size:9px}
.counter-summary span{text-transform:uppercase}
.counter-summary b{color:#d7ac49}
.counter-summary small{white-space:nowrap;color:#64747f}
.counter-results{display:grid}
.counter-result-row{display:grid;grid-template-columns:22px 35px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid rgba(37,55,68,.65)}
.counter-result-row:last-child{border-bottom:0}
.counter-result-row:hover{background:rgba(17,37,50,.45)}
.counter-result-rank{color:#b98b32;font-size:11px;font-weight:900;text-align:center}
.counter-result-name{display:grid;gap:2px;min-width:0}
.counter-result-name b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.counter-result-name small{color:#6d7c87;font-size:9px}
.counter-result-stat{display:grid;gap:2px;text-align:right}
.counter-result-stat b{color:var(--green);font-size:13px}
.counter-result-stat small{color:#687782;font-size:8px;text-transform:uppercase}

@media(max-width:480px){
  .counter-picker-menu{position:fixed;z-index:600;left:14px;right:14px;top:78px;max-height:calc(100vh - 95px)}
  .counter-picker-options{max-height:calc(100vh - 165px)}
  .counter-summary{align-items:flex-start;display:grid}
}


/* Warstwy ponad przycinającymi kontenerami */
.game-tooltip-portal{
  position:fixed;
  z-index:10050;
  right:auto;
  bottom:auto;
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:none;
  box-sizing:border-box;
}
.game-tooltip-portal:after{display:none}
.catalog-results-portal{
  position:fixed;
  z-index:10040;
  right:auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
}
.catalog-results-portal[data-placement="top"]{box-shadow:0 -18px 45px rgba(0,0,0,.55)}
.catalog-results-portal[data-placement="bottom"]{box-shadow:0 18px 45px rgba(0,0,0,.55)}

/* Zaawansowany rozwój umiejętności */
.admin-panel,.admin-subsection,.skill-editor{min-width:0}
.skill-admin-subsection{overflow:visible}
.skill-editor{display:grid;gap:19px}
.skill-priority-block{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto;
  align-items:center;
  gap:18px;
  padding:14px;
  border:1px solid #203744;
  border-radius:8px;
  background:linear-gradient(100deg,#081822,#07131d);
}
.skill-priority-block>div:first-child,.skill-grid-heading>div{display:grid;gap:4px}
.skill-priority-block>div:first-child>b,.skill-grid-heading b{font-size:13px;color:#edf2f4}
.skill-priority-block>div:first-child>small,.skill-grid-heading small{font-size:10px;line-height:1.45;color:#7f8f99}
.skill-priority-picker{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.skill-priority-picker>button:not(.skill-reset-button){
  min-width:91px;
  display:grid;
  grid-template-columns:23px 21px;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:7px;
  padding:8px 10px;
  border:1px solid #2a404d;
  border-radius:7px;
  background:#06131d;
  color:#8d9ca5;
  text-align:left;
}
.skill-priority-picker>button:not(.skill-reset-button)>span{
  grid-row:1/3;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#102330;
  color:#7f8e97;
  font-size:10px;
  font-weight:900;
}
.skill-priority-picker>button:not(.skill-reset-button)>b{font-size:14px;line-height:1}
.skill-priority-picker>button:not(.skill-reset-button)>small{
  max-width:72px;
  overflow:hidden;
  color:#687985;
  font-size:8px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.skill-priority-picker>button:not(.skill-reset-button):hover{border-color:#765b29;color:#e5bd5b}
.skill-priority-picker>button.selected{
  border-color:#b0832d;
  background:rgba(182,132,38,.13);
  color:#f0c75e;
  box-shadow:inset 0 0 0 1px rgba(222,176,74,.08);
}
.skill-priority-picker>button.selected>span{background:#d4a13b;color:#07121a}
.skill-reset-button{
  align-self:center;
  border:1px solid #334650;
  border-radius:6px;
  background:transparent;
  color:#82919b;
  padding:8px 10px;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
}
.skill-reset-button:hover:not(:disabled){border-color:#8f6b29;color:#e3b94e}
.skill-reset-button:disabled{opacity:.38;cursor:not-allowed}
.skill-grid-heading{display:flex;align-items:end;justify-content:space-between;gap:15px}
.skill-grid-scroll{
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  scrollbar-color:#6f5526 #07131d;
}
.skill-level-grid{
  min-width:936px;
  display:grid;
  grid-template-columns:190px repeat(18,41px);
  border:1px solid #263b48;
  border-radius:8px;
  overflow:hidden;
  background:#06131c;
}
.skill-grid-corner,.skill-level-head{
  height:34px;
  display:grid;
  place-items:center;
  border-right:1px solid #203440;
  border-bottom:1px solid #2a3d49;
  background:#0d202c;
  color:#75858f;
  font-size:9px;
  font-weight:900;
}
.skill-grid-corner{
  position:sticky;
  left:0;
  z-index:4;
  justify-items:start;
  padding:0 12px;
  color:#a8b4bb;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.skill-level-head:nth-child(19){border-right:0}
.skill-row-label{
  position:sticky;
  left:0;
  z-index:3;
  min-width:0;
  height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-right:1px solid #2b404c;
  border-bottom:1px solid #1d303c;
  background:#091923;
  box-shadow:7px 0 13px rgba(0,0,0,.18);
}
.skill-row-label>span:last-child{min-width:0;display:grid;gap:3px}
.skill-row-label b{
  overflow:hidden;
  color:#dfe7ea;
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.skill-row-label small{color:#72838e;font-size:8px}
.skill-key-fallback{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #836325;
  border-radius:5px;
  background:#101d27;
  color:#e8bc55;
  font-weight:950;
}
.skill-grid-cell{
  height:52px;
  display:grid;
  place-items:center;
  border:0;
  border-right:1px solid #182b36;
  border-bottom:1px solid #1d303c;
  background:#06131c;
  color:#647681;
  font-size:11px;
  font-weight:950;
}
button.skill-grid-cell:hover:not(:disabled){background:#0f2532;color:#d9ad47}
.skill-grid-cell.selected{
  background:linear-gradient(155deg,#d2a03b,#9d7021);
  color:#07121a;
  box-shadow:inset 0 0 0 2px rgba(255,220,124,.22);
}
button.skill-grid-cell:disabled{opacity:.27;cursor:not-allowed}
.skill-level-grid>:nth-last-child(-n+19){border-bottom:0}
.public-skill-grid{margin-top:4px}
.public-skill-grid .skill-level-grid{min-width:900px;grid-template-columns:154px repeat(18,41px)}
.public-skill-grid .skill-row-label{height:46px}
.public-skill-grid .skill-grid-cell{height:46px}
.skill-grid-cell-static{cursor:default}

@media(max-width:760px){
  .skill-priority-block{grid-template-columns:1fr;align-items:start}
  .skill-priority-picker{justify-content:flex-start}
  .skill-grid-heading{align-items:start;flex-direction:column}
  .skill-level-grid{grid-template-columns:158px repeat(18,39px);min-width:860px}
  .public-skill-grid .skill-level-grid{grid-template-columns:138px repeat(18,39px);min-width:840px}
}


/* Import poradnika z JSON */
.button-json-import{
  border:1px solid #3d5f70;
  background:#0a1b26;
  color:#c7d6de;
}
.button-json-import:hover:not(:disabled){
  border-color:#c39335;
  color:#f0c65c;
  background:#102431;
}
.button-json-import>span{
  margin-right:6px;
  color:#d9aa43;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight:900;
}
.button-ghost{
  border:1px solid transparent;
  background:transparent;
  color:#8fa0aa;
}
.button-ghost:hover{color:#e6edf0;background:#0b1b25}

.json-import-backdrop{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,8,13,.82);
  backdrop-filter:blur(7px);
}
.json-import-modal{
  width:min(980px,100%);
  max-height:min(900px,calc(100vh - 48px));
  display:grid;
  grid-template-rows:auto auto minmax(280px,1fr) auto auto;
  overflow:hidden;
  border:1px solid #29414e;
  border-radius:12px;
  background:#07151f;
  box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.025);
}
.json-import-modal>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 18px;
  border-bottom:1px solid #203440;
  background:linear-gradient(115deg,#0b1e2a,#07151f);
}
.json-import-modal>header h2{margin:4px 0 7px;color:#f0f4f5;font-size:22px}
.json-import-modal>header p{margin:0;color:#8797a1;font-size:12px;line-height:1.55}
.modal-close-button{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #304653;
  border-radius:7px;
  background:#091923;
  color:#91a0a9;
  font-size:23px;
  line-height:1;
}
.modal-close-button:hover{border-color:#9b762e;color:#efc35a}

.json-import-help{
  margin:18px 24px 0;
  padding:13px 15px;
  border:1px solid #29414f;
  border-left:3px solid #c49232;
  border-radius:7px;
  background:#0a1a24;
}
.json-import-help b{display:block;color:#e6edf0;font-size:12px}
.json-import-help p{margin:5px 0;color:#9aa9b1;font-size:11px;line-height:1.55}
.json-import-help small{display:block;color:#71828d;font-size:10px;line-height:1.5}

.json-import-editor{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:8px;
  padding:18px 24px 0;
}
.json-import-editor>span{
  color:#c6d1d6;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.json-import-editor textarea{
  width:100%;
  min-height:300px;
  resize:none;
  border:1px solid #2d4655;
  border-radius:8px;
  background:#040d13;
  color:#dbe6ea;
  padding:15px 16px;
  outline:none;
  font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  tab-size:2;
}
.json-import-editor textarea:focus{
  border-color:#b5842b;
  box-shadow:0 0 0 3px rgba(185,133,42,.12);
}
.json-import-editor textarea::placeholder{color:#4f626e}

.json-import-error{
  max-height:170px;
  overflow:auto;
  margin:14px 24px 0;
  padding:12px 14px;
  border:1px solid #7d3636;
  border-radius:7px;
  background:rgba(109,35,35,.18);
  color:#f0b1b1;
  font-size:11px;
  line-height:1.5;
}
.json-import-error b{display:block;color:#ffd0d0}
.json-import-error ul{margin:8px 0 0;padding-left:18px}
.json-import-error li+li{margin-top:4px}

.json-import-modal>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 24px 22px;
  border-top:1px solid #203440;
  background:#081720;
}
.json-import-modal>footer>div{display:flex;gap:9px}

@media(max-width:760px){
  .json-import-backdrop{padding:0}
  .json-import-modal{
    width:100%;
    max-height:100vh;
    height:100vh;
    border:0;
    border-radius:0;
    grid-template-rows:auto auto minmax(220px,1fr) auto auto;
  }
  .json-import-modal>header{padding:17px 16px 14px}
  .json-import-help{margin:13px 16px 0}
  .json-import-editor{padding:14px 16px 0}
  .json-import-error{margin:12px 16px 0}
  .json-import-modal>footer{
    align-items:stretch;
    flex-direction:column;
    padding:14px 16px 18px;
  }
  .json-import-modal>footer>div{display:grid;grid-template-columns:1fr 1fr}
  .json-import-modal>footer>.button{width:100%}
}


.classic-page{display:flex;flex-direction:column;gap:18px}
.classic-hero,.classic-section{background:linear-gradient(155deg,rgba(9,24,35,.98),rgba(5,15,23,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 35px rgba(0,0,0,.13)}
.classic-hero{min-height:340px;padding:34px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:center;overflow:hidden;position:relative}
.classic-hero:before{content:"";position:absolute;inset:-40% -10% auto auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(217,168,62,.18),transparent 65%);pointer-events:none}
.classic-hero h1{font-size:48px;line-height:1;margin:8px 0 12px}
.classic-hero p{max-width:760px;color:#b7c2ca;font-size:17px;line-height:1.65;margin:0}
.classic-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.classic-rune{position:relative;z-index:1;width:220px;height:250px;margin-left:auto;display:grid;place-items:center;background:linear-gradient(135deg,#f0c65c,#9d671e);clip-path:polygon(50% 0,92% 22%,92% 78%,50% 100%,8% 78%,8% 22%);box-shadow:0 22px 60px rgba(217,168,62,.18)}
.classic-rune:after{content:"";position:absolute;inset:14px;background:linear-gradient(155deg,#07131e,#0d1d2a);clip-path:inherit}
.classic-rune span{position:relative;z-index:1;color:#f0c65c;font-family:Georgia,serif;font-size:56px;font-weight:900;letter-spacing:.04em}
.classic-section{padding:24px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}
.section-title h2{margin:4px 0 0;font-size:24px}
.classic-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.classic-card{background:rgba(8,20,31,.72);border:1px solid rgba(217,168,62,.18);border-radius:8px;padding:18px}
.classic-card h3{margin:0 0 8px;color:#f0c65c;font-size:18px}
.classic-card p,.classic-roadmap p{margin:0;color:#aeb9c2;line-height:1.6}
.classic-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.classic-table-row{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1fr)}
.classic-table-row span{padding:14px;border-bottom:1px solid var(--line);color:#c5cdd4}
.classic-table-row span+span{border-left:1px solid var(--line)}
.classic-table-row:last-child span{border-bottom:0}
.classic-table-head span{background:rgba(217,168,62,.12);color:#f0c65c;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.classic-roadmap{border-color:rgba(217,168,62,.35)}
.classic-roadmap h2{margin:6px 0 8px}

@media (max-width:900px){
  .classic-hero{grid-template-columns:1fr;padding:24px}
  .classic-rune{width:160px;height:180px;margin:0}
  .classic-cards{grid-template-columns:1fr}
  .classic-table-row{grid-template-columns:1fr}
  .classic-table-row span+span{border-left:0}
  .classic-table-row span{border-bottom:1px solid var(--line)}
}

@media (max-width:760px){
  .main-nav{overflow:auto}
  .main-nav button{white-space:nowrap;padding:0 12px}
  .classic-hero h1{font-size:38px}
}