/* RIVAL v0.3 — shared inner pages, armory and match dialogs. */
.page-head{position:relative;margin:10px 0 30px;padding:12px 0 24px;border-bottom:1px solid var(--line)}
.page-head:after{content:'';position:absolute;left:0;bottom:-1px;width:84px;height:3px;background:var(--accent)}
.page-head .eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent)}
.page-title{font-size:clamp(38px,4.8vw,70px);line-height:1.1;letter-spacing:-.7px;max-width:1040px;margin:18px 0;color:var(--text);text-wrap:balance;overflow-wrap:break-word}
.page-intro{font-size:14px;line-height:1.85;max-width:760px;color:var(--muted);margin-bottom:0}
.status-note{background:#171c23;border:1px solid #303944;border-radius:10px;color:#bdc5d1;padding:16px 18px;font-size:12px;line-height:1.8;gap:12px;margin:24px 0}
.status-note svg{color:var(--accent);width:19px;height:19px;margin-top:2px}
.large-card{min-width:0;border:1px solid var(--line);border-radius:14px;padding:30px;background:linear-gradient(145deg,#191d24,#12151a);box-shadow:0 12px 35px #00000014}
.large-card h2{font-family:Manrope,Arial,sans-serif;font-size:20px;line-height:1.5;letter-spacing:-.45px;margin:0 0 20px;color:var(--text)}
.large-card .kicker{font-size:11px;letter-spacing:1.4px;color:var(--muted);line-height:1.7}
.balance-note{color:var(--muted);font-size:12px;line-height:1.8}
.empty-state{color:var(--muted);border:1px dashed #38414d;background:#11151b;border-radius:10px;padding:38px 22px;margin-top:22px}
.empty-state svg{color:var(--accent);width:34px;height:34px;margin-bottom:16px}
.empty-state p{font-size:13px;line-height:1.85;max-width:600px}

/* The armory uses large real artwork, with no invented inventory or price. */
.filters{gap:9px;margin:28px 0 22px}
.filters button{min-height:44px;border:1px solid #303740;background:#171b21;color:#b4bdca;border-radius:8px;padding:11px 17px;font-size:12px;font-weight:700;transition:background .18s,border-color .18s,color .18s}
.filters button:hover{border-color:#657184;color:#fff;background:#202630}
.filters button.active{color:#10150b;border-color:var(--accent);background:var(--accent)}
.search-field{min-width:230px;flex:0 1 310px;margin-left:auto}
.search-field input{height:46px;min-width:0;width:100%;border:1px solid #303740;border-radius:8px;background:#101419;color:var(--text);font-size:13px;padding:12px 14px 12px 40px}
.search-field input::placeholder{color:#939eae}
.search-field svg{width:18px;height:18px;top:14px;left:13px;color:#99a6b7}
.market-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.item-card{--item-glow:#b28cff;position:relative;min-width:0;border:1px solid #30343e;border-radius:13px;background:#14181f;box-shadow:0 14px 32px #00000025;transition:transform .22s,border-color .22s,box-shadow .22s}
.item-card:nth-child(3n+2){--item-glow:#d674b8}
.item-card:nth-child(3n+3){--item-glow:#ed739b}
body[data-game=dota2] .item-card{--item-glow:#f18c47}
body[data-game=dota2] .item-card:nth-child(3n+2){--item-glow:#ef7247}
body[data-game=dota2] .item-card:nth-child(3n+3){--item-glow:#9dd889}
.item-card:hover{transform:translateY(-3px);border-color:#56616f;box-shadow:0 20px 42px #00000045}
.item-visual,.item-card:nth-child(2n) .item-visual{height:228px;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--item-glow) 13%,transparent),transparent 70%),linear-gradient(145deg,#1d222c,#11151b);overflow:hidden}
.item-visual:before{content:'';position:absolute;width:130%;height:1px;left:-15%;bottom:48px;background:#ffffff0b;transform:rotate(-12deg);pointer-events:none}
.item-visual .item-label{left:18px;top:16px;z-index:2;color:#aeb9cb;font-size:11px;line-height:1.5;letter-spacing:1.4px}
.item-visual .real-item-art{width:100%;height:200px;max-width:100%;object-fit:contain;filter:drop-shadow(0 16px 15px #0009);transform:translateY(12px);transition:transform .3s}
.item-card:hover .real-item-art{transform:translateY(7px) scale(1.035)}
.item-rarity{height:3px;left:0;right:0;box-shadow:0 -5px 28px color-mix(in srgb,var(--item-glow) 28%,transparent)}
.item-info{padding:22px}
.item-info .type{font-size:11px;color:#a3adbc;margin-bottom:9px;line-height:1.6}
.item-info h3{font-size:17px;line-height:1.5;letter-spacing:-.35px;margin:0 0 18px;min-height:26px;color:var(--text)}
.item-info .price.price-pending{min-height:34px;font-size:12px;font-weight:600;line-height:1.5;color:#b3bdca;gap:10px;display:flex;align-items:center}
.item-info .price.price-pending small{font-size:11px;color:#8c99aa;letter-spacing:.6px;white-space:nowrap}
.item-info button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;margin-top:18px;padding:12px 14px;border:1px solid #39424e;border-radius:8px;background:#202630;color:#e7ecf3;font-size:12px;font-weight:800;transition:background .18s,border-color .18s,color .18s}
.item-info button:hover{background:var(--accent);border-color:var(--accent);color:#10150c}
.item-info button svg{width:18px;height:18px}
.item-detail-art{background:radial-gradient(ellipse at 50% 70%,#59506d4d,transparent 70%),#10141b;border:1px solid #353d48;border-radius:12px;margin:24px 0;overflow:hidden}
.item-detail-art img{height:270px;width:100%;object-fit:contain;padding:12px;filter:drop-shadow(0 15px 14px #0008)}

/* Wallet and transparent fee calculator. */
.wallet-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px}
.wallet-grid>.large-card:first-child{background:radial-gradient(ellipse at 100% 0,#c5ff560a,transparent 65%),linear-gradient(145deg,#1b2028,#13171d)}
.balance-number{font-family:'Barlow Condensed','Oswald',Impact,sans-serif;font-size:84px;line-height:1;letter-spacing:-1px;margin:25px 0 12px;font-weight:700;color:var(--text)}
.balance-number>span{color:#8f9aab!important}
.mini-balance{border-bottom:1px solid #303742;font-size:13px;line-height:1.6;padding:16px 0;gap:18px}
.mini-balance span{color:#a8b2c0}
.mini-balance b{white-space:nowrap;color:#edf1f7}
.wallet-actions{gap:10px;margin-top:26px}
.fee-number{font-family:'Barlow Condensed','Oswald',Impact,sans-serif;font-size:84px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--accent);margin:23px 0 18px}
.calc{margin-top:21px}
.calc label{font-size:13px;line-height:1.8;color:#aeb9c8}
.calc label strong{color:#f5f7fa}
.calc input{accent-color:var(--accent);height:28px;margin:18px 0;width:100%}
.calc-grid{gap:12px;border-top:1px solid #323a45;padding-top:18px}
.calc-grid>div{min-width:0}
.calc-grid small{font-size:11px;line-height:1.65;letter-spacing:.6px;color:#9da9ba}
.calc-grid b{font-size:26px;line-height:1.4;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:#f2f6fc;margin:8px 0}
.calc-grid .highlight b{color:var(--accent)}
.money-preview .large-card{background:#11151b;border-color:#343d49;border-radius:12px;padding:24px}
.money-preview .calc-grid b{font-size:25px}
.money-preview .balance-note{font-size:12px;color:#a1adbd}
.money-preview .status-note{font-size:12px}

/* Ranking tables stay scrollable inside their own card. */
.table-card{min-width:0;max-width:100%;border:1px solid #303741;background:#13171d;border-radius:12px;overflow:auto;overscroll-behavior-x:contain;scrollbar-color:#4a5667 #171c23}
.table-card table{min-width:650px;width:100%;border-collapse:collapse}
.table-card th{font-size:11px;letter-spacing:1px;font-weight:700;background:#1c222b;color:#a8b4c5;padding:18px 20px;white-space:nowrap}
.table-card td{font-size:14px;line-height:1.6;color:#c2ccd8;border-top:1px solid #29313b;padding:19px 20px;white-space:nowrap}
.table-card tbody tr{transition:background .15s}
.table-card tbody tr:hover{background:#1d242e}
.table-card tbody tr:first-child{background:linear-gradient(90deg,#c5ff5608,transparent)}
.table-card td strong{color:#f7f9fc;font-size:16px;font-variant-numeric:tabular-nums}
.table-card td .player{gap:12px;font-weight:800;color:#e9eef6}
.table-card .avatar{width:38px;height:38px;border:1px solid #465467;border-radius:9px;background:linear-gradient(135deg,#344153,#1b232e);font-size:15px;color:#d9e4f3}
.table-card .rank-num{font-size:29px;color:#a3afbe}
.table-card .rank-num.gold{color:var(--accent)}
.table-card .rank-chip{border:1px solid #3f505e;border-radius:5px;background:#202d38;color:#b9d4e8;font-size:11px;font-weight:700;letter-spacing:.8px;padding:6px 9px}
.table-footer{font-size:12px;line-height:1.85;color:#a2aebe;margin:18px 0 0}

/* Rules read like clear regulations, with comfortable line length. */
.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rule-card{min-width:0;position:relative;background:linear-gradient(140deg,#191e26,#12171d);border:1px solid #303946;border-radius:13px;padding:30px;overflow:hidden}
.rule-card:before{content:'';position:absolute;inset:0 auto auto 0;width:3px;height:64px;background:var(--accent)}
.rule-card:nth-child(2):before{background:#ff885c}
.rule-card .eyebrow{font-size:11px;letter-spacing:1.5px;line-height:1.7}
.rule-card h2{font-family:'Oswald','Arial Narrow',sans-serif;font-size:30px;line-height:1.35;letter-spacing:-.2px;margin:0 0 22px;color:var(--text)}
.rule-card ul{padding-left:19px;margin:0}
.rule-card li,.rule-card p{font-size:13px;line-height:1.95;color:#b1bdcd;margin:12px 0}
.rule-card li::marker{color:var(--accent)}
.rule-card li strong{color:#f2f5fa;font-weight:700}
.rules-faq{border:1px solid #303945;background:#12171d;border-radius:12px;padding:0 25px;margin-top:25px}
.rules-faq details{border-bottom:1px solid #2d3540;padding:0}
.rules-faq summary{display:list-item;min-height:58px;padding:18px 0;font-size:14px;line-height:1.7;font-weight:700;color:#dbe3ee}
.rules-faq summary::marker{color:var(--accent)}
.rules-faq details[open] summary{color:var(--accent)}
.rules-faq p{font-size:13px;line-height:1.95;color:#aebacb;margin:0;padding:0 0 22px;max-width:1000px}

/* Dialogs, scores and hero library. */
.modal-backdrop{background:#05080dd9;backdrop-filter:blur(12px);padding:24px}
.modal{width:600px;max-width:100%;max-height:min(90vh,920px);border:1px solid #414c5c;border-radius:16px;padding:36px;background:radial-gradient(ellipse at 0 0,#c5ff5606,transparent 50%),#151a21;box-shadow:0 32px 120px #000a,0 1px 0 #ffffff08 inset;scrollbar-color:#526076 #151a21}
.modal:before{content:'';position:absolute;top:0;left:36px;width:70px;height:3px;background:var(--accent)}
.close-modal{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;border-radius:9px;font-size:28px;line-height:1;color:#aab6c6;padding:0;transition:background .18s,color .18s}
.close-modal:hover{background:#29323f;border-color:#3a4656;color:white}
.modal .eyebrow{padding-right:28px;font-size:11px;line-height:1.8;letter-spacing:1.2px;color:var(--accent);flex-wrap:wrap}
.modal h2{font-family:'Oswald','Arial Narrow',sans-serif;font-size:31px;font-weight:600;letter-spacing:-.3px;line-height:1.35;margin:17px 0 19px;color:var(--text);padding-right:8px}
.modal p,.modal ul{font-size:13px;line-height:1.9;color:#b1bdce}
.modal li{margin:9px 0}
.modal .modal-icon{width:52px;height:52px;border-radius:12px;background:#252e3a;border:1px solid #3a4655;color:var(--accent)}
.modal .modal-icon svg{width:27px;height:27px}
.modal .primary,.modal .secondary{min-height:46px;font-size:13px}
.modal .modal-buttons{display:flex;align-items:stretch;gap:10px;margin-top:20px;flex-wrap:wrap}
.modal .balance-note{font-size:11px;line-height:1.9;color:#9aa8ba}
.modal-status{border:1px solid #3b4655;background:#202833;border-radius:9px;padding:14px 16px;font-size:12px;line-height:1.9;color:#bdcadb;margin-top:20px}
.modal-status svg{color:var(--accent);width:18px;height:18px}
.lobby-code{font-family:'Barlow Condensed','Oswald',Impact,sans-serif;font-size:52px;line-height:1.2;letter-spacing:4px;color:var(--accent);margin:22px 0}
.lobby-settings{grid-template-columns:110px minmax(0,1fr);font-size:13px;line-height:1.8;gap:12px;margin:24px 0}
.lobby-settings dt{color:#97a5b8}
.lobby-settings dd{color:#e0e7f1;overflow-wrap:anywhere}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;text-align:center;border:1px solid #3b4656;border-radius:12px;background:linear-gradient(125deg,#1e2935,#111822);padding:28px 20px;margin:25px 0}
.scoreboard small{font-size:11px;line-height:1.6;color:#aebdce;font-weight:700;letter-spacing:1px}
.scoreboard b{font-size:76px;line-height:1.2;font-variant-numeric:tabular-nums;color:#f5f7fa;display:block;margin-top:9px}
.scoreboard>div:first-child b{color:var(--accent)}
.scoreboard>span{font-size:24px;color:#697c94}
.round-buttons{gap:10px;margin:6px 0}
.round-buttons .secondary{font-size:12px;line-height:1.6;min-height:48px;padding:10px 12px}
.modal .result-title{font-family:'Oswald','Arial Narrow',sans-serif!important;font-size:46px!important;color:var(--accent);line-height:1.2}
.hero-search-label{font-size:12px;font-weight:700;color:#c3cddd;margin:20px 0 10px}
#hero-search{height:48px;background:#0d1219;border:1px solid #3b4656;border-radius:8px;color:#eef3fa;padding:12px 14px;font-size:14px}
#hero-search::placeholder{color:#8e9baf}
.hero-pool{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:390px;margin:20px 0;padding:2px 7px 4px 2px;scrollbar-color:#526076 #151a21}
.pool-hero{min-width:0;border:1px solid #374353;border-radius:8px;background:#202936;transition:border-color .18s,background .18s}
.pool-hero span{font-size:11px;font-weight:600;line-height:1.5;padding:9px 4px;color:#c9d5e4;min-height:34px}
.pool-hero:hover{border-color:#8f9fb4;background:#2b3746}
.pool-hero.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pool-hero.active span{color:var(--accent)}
.pool-hero.banned b{font-size:48px;color:#ff8a7f;background:#40141a26}
.toast{background:#222b37;border:1px solid #596b82;box-shadow:0 16px 45px #0008;border-radius:10px;color:#e3ebf6;font-size:13px;line-height:1.7;padding:15px 20px}

@media(max-width:1100px){
  .market-grid{gap:14px}.item-info{padding:18px}.item-info h3{font-size:16px}
  .item-visual,.item-card:nth-child(2n) .item-visual{height:200px}.item-visual .real-item-art{height:180px}
  .item-info .price.price-pending{display:block}.item-info .price.price-pending small{display:block;margin-top:5px}
  .wallet-grid{gap:16px}.large-card{padding:25px}.rule-card{padding:25px}
}
@media(max-width:800px){
  .page-title{font-size:48px}.page-head{margin-bottom:25px}.page-intro{font-size:13px}
  .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wallet-grid,.rule-grid{grid-template-columns:minmax(0,1fr)}
  .rule-card{padding:28px}.rule-card h2{font-size:29px}
  .search-field{flex-basis:100%;max-width:none;margin:6px 0 0}
  .item-info h3{min-height:48px}
}
@media(max-width:580px){
  .page-head{padding-top:5px;padding-bottom:22px;margin-top:4px}
  .page-head .eyebrow{font-size:11px;letter-spacing:1.4px}.page-title{font-size:38px;line-height:1.15;letter-spacing:-.35px;margin:17px 0}.page-intro{font-size:13px;line-height:1.85}
  .status-note{font-size:12px;line-height:1.85;padding:14px;gap:10px;margin:21px 0}
  .large-card{padding:22px;border-radius:12px}.large-card h2{font-size:18px}.large-card .kicker{font-size:11px;letter-spacing:1px}
  .empty-state{padding:30px 18px}.empty-state p{font-size:13px}
  .filters{gap:7px;margin:22px 0 18px}.filters button{padding:10px 12px;font-size:11px;min-height:44px}
  .market-grid{gap:13px}.item-info{padding:16px}.item-info h3{font-size:15px;line-height:1.5;margin-bottom:14px;min-height:46px}
  .item-info .type{font-size:11px}.item-info .price.price-pending{font-size:11px;min-height:40px}.item-info .price.price-pending small{font-size:11px}
  .item-info button{padding:11px;font-size:11px;min-height:44px}.item-info button svg{width:16px;height:16px}
  .item-visual,.item-card:nth-child(2n) .item-visual{height:176px}.item-visual .real-item-art{height:154px}.item-visual .item-label{font-size:11px;letter-spacing:.8px;left:13px;top:13px}
  .balance-number,.fee-number{font-size:76px}.mini-balance{font-size:12px}.balance-note{font-size:12px}
  .wallet-actions{gap:8px}.wallet-actions .primary{flex:1 1 100%;justify-content:center}.wallet-actions .secondary{flex:1 1 0;justify-content:center}
  .calc-grid{gap:9px}.calc-grid small{font-size:11px;letter-spacing:0}.calc-grid b,.money-preview .calc-grid b{font-size:23px}.calc label{font-size:13px}
  .rule-card{padding:23px}.rule-card h2{font-size:27px}.rule-card li,.rule-card p{font-size:13px;line-height:1.9}.rules-faq{padding:0 20px}.rules-faq summary{font-size:13px}.rules-faq p{font-size:13px}
  .table-card th{padding:16px;font-size:11px}.table-card td{padding:16px;font-size:13px}.table-footer{font-size:12px}
  .modal-backdrop{padding:14px}.modal{max-height:calc(100dvh - 28px);padding:30px 22px;border-radius:13px}.modal:before{left:22px}.modal .eyebrow{font-size:11px}.modal h2{font-size:27px;margin:15px 0 18px}.modal p,.modal ul{font-size:13px}
  .modal .modal-buttons{gap:8px}.modal .modal-buttons .primary,.modal .modal-buttons .secondary{width:100%;justify-content:center}
  .item-detail-art img{height:230px;padding:8px}.lobby-code{font-size:46px;letter-spacing:3px}.lobby-settings{grid-template-columns:82px minmax(0,1fr);gap:10px;font-size:12px}
  .scoreboard{padding:23px 12px;gap:10px}.scoreboard b{font-size:65px}.scoreboard small{font-size:11px;letter-spacing:.5px}.round-buttons .secondary{font-size:11px;padding:9px;line-height:1.7}.modal .result-title{font-size:37px!important}
  .hero-pool{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:350px}.pool-hero span{font-size:11px;line-height:1.6;padding:8px 3px}.toast{font-size:12px;bottom:83px;padding:13px 17px}
}
@media(max-width:420px){
  .market-grid{grid-template-columns:minmax(0,1fr)}
  .item-visual,.item-card:nth-child(2n) .item-visual{height:226px}.item-visual .real-item-art{height:204px}.item-visual .item-label{font-size:11px;left:18px;top:16px}
  .item-info{padding:20px}.item-info h3{font-size:18px;min-height:0}.item-info .price.price-pending{display:flex;font-size:12px;min-height:30px}.item-info .price.price-pending small{margin:0}
  .item-info button{font-size:12px;padding:12px 14px}.page-title{font-size:34px}.large-card{padding:20px}.calc-grid b,.money-preview .calc-grid b{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .item-card,.item-visual .real-item-art,.item-info button,.filters button,.table-card tbody tr,.pool-hero,.close-modal{transition:none}
  .item-card:hover{transform:none}.item-card:hover .real-item-art{transform:translateY(12px)}
}