/* FightCards Web parity layer v1.5.0 */

/* Arrange: keep the header breathable and make the timer a subordinate strip. */
.arrange-content{padding-top:8px!important}
.arrange-head{
  grid-template-columns:72px minmax(0,1fr) 86px!important;
  min-height:118px!important;
  align-items:start!important;
  position:relative!important;
  gap:10px!important;
}
.arrange-title{padding-top:3px!important;text-align:center!important;min-width:0}
.arrange-title>b{font-size:30px!important;line-height:1!important}
.arrange-title>span{font-size:11px!important;line-height:1.15!important;white-space:normal!important;display:block;margin-top:7px}
.arrange-timer{
  position:absolute!important;
  left:50%!important;
  top:72px!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  min-width:116px!important;
  height:32px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid rgba(255,196,92,.75)!important;
  background:rgba(13,16,22,.86)!important;
  box-shadow:0 0 0 1px rgba(45,220,255,.12) inset!important;
}
.arrange-timer span,.arrange-timer small{font-size:10px!important;letter-spacing:.08em!important}
.arrange-timer b{font-size:18px!important;line-height:1!important;color:#ffc45c!important}
.arrange-timer.urgent{border-color:#ff5d62!important;box-shadow:0 0 14px rgba(255,93,98,.25)!important}
.arrange-timer.urgent b{color:#ff5d62!important}
.auto-btn{height:58px!important;align-self:start!important}

/* Shared parity screens */
.feature-screen .screen-scroll{padding-bottom:30px}
.feature-content{padding:12px 14px 28px;display:flex;flex-direction:column;gap:12px}
.feature-card{position:relative;padding:14px;color:#fff}
.feature-card h2,.feature-card h3,.feature-card p{margin:0}
.feature-title{font-size:25px;color:#ffc45c;letter-spacing:.03em}
.feature-sub{font-size:12px;color:#c8cbd2;line-height:1.35}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feature-grid.one{grid-template-columns:1fr}
.feature-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature-mini{padding:10px!important;min-height:74px;display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center}
.feature-mini b{font-size:18px;color:#ffc45c}
.feature-mini span{font-size:10px;color:#cfd3da}
.feature-row{display:flex;align-items:center;gap:10px}
.feature-row.between{justify-content:space-between}
.feature-avatar{width:50px;height:50px;border-radius:50%;border:2px solid #ffc45c;object-fit:cover;background:#0a0e15}
.feature-divider{height:1px;background:rgba(255,255,255,.09);margin:3px 0}
.feature-input,.feature-select,.feature-textarea{
  width:100%;box-sizing:border-box;background:#0c111a;color:#fff;border:1px solid rgba(255,196,92,.55);padding:12px 11px;font:inherit;outline:none
}
.feature-textarea{min-height:96px;resize:vertical}
.feature-input:focus,.feature-select:focus,.feature-textarea:focus{border-color:#2ddcff;box-shadow:0 0 0 2px rgba(45,220,255,.12)}
.feature-form{display:flex;flex-direction:column;gap:9px}
.feature-form label{font-size:10px;color:#ffc45c;letter-spacing:.08em}
.feature-btn{min-height:46px;border:1px solid rgba(255,196,92,.7);background:#17110d;color:#fff;font-family:inherit;font-size:17px;padding:9px 12px;cursor:pointer}
.feature-btn.primary{background:#33220b;color:#ffc45c}
.feature-btn.cyan{border-color:#2ddcff;color:#2ddcff}
.feature-btn.danger{border-color:#ff5d62;color:#ff7d80}
.feature-btn:disabled{opacity:.45;cursor:not-allowed}
.feature-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:7px}
.feature-tab{min-height:42px;border:1px solid rgba(255,196,92,.45);background:#14100d;color:#ddd;font-family:inherit;padding:7px 4px}
.feature-tab.on{border-color:#ffc45c;color:#ffc45c;box-shadow:0 0 0 1px rgba(255,196,92,.18) inset}
.feature-empty{padding:22px 12px;text-align:center;color:#aeb5c1;font-size:13px}
.feature-status{padding:9px 11px;border:1px solid rgba(45,220,255,.32);background:rgba(45,220,255,.07);font-size:11px;color:#bdeef6;line-height:1.35}
.feature-status.bad{border-color:rgba(255,93,98,.45);background:rgba(255,93,98,.07);color:#ffb1b4}

/* Room */
.room-code{font-size:34px;letter-spacing:.15em;color:#ffc45c;text-align:center;padding:8px 0}
.room-player-list{display:flex;flex-direction:column;gap:8px}
.room-player{padding:10px 11px!important;display:flex;align-items:center;gap:10px}
.room-player .feature-avatar{width:42px;height:42px}
.room-player .room-player-copy{flex:1;min-width:0}
.room-player b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-player small{color:#aeb5c1}
.room-host{color:#ffc45c;font-size:10px}

/* Ranked */
.rank-hero{padding:16px!important;text-align:center}
.rank-name{font-size:32px;color:#ffc45c}
.rank-record{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.rank-mode{padding:14px!important;text-align:center;min-height:116px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.rank-mode h3{font-size:22px}
.rank-mode.live{border-color:#2ddcff}
.rank-mode.locked{opacity:.56}

/* Campaign */
.campaign-energy{display:flex;gap:6px;align-items:center}
.energy-pip{width:22px;height:22px;border-radius:50%;border:2px solid #ffc45c;background:#261a08;box-shadow:0 0 8px rgba(255,196,92,.25)}
.energy-pip.empty{background:#10131a;border-color:#515866;box-shadow:none}
.campaign-chapters{display:flex;gap:7px;overflow:auto;padding-bottom:2px}
.campaign-chapters button{flex:0 0 auto}
.campaign-node{padding:12px!important;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center}
.campaign-node .node-num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:2px solid #ffc45c;color:#ffc45c;font-size:18px}
.campaign-node.locked{opacity:.48}
.campaign-node.complete .node-num{border-color:#5ce1a1;color:#5ce1a1}
.campaign-node.boss{box-shadow:0 0 20px rgba(255,93,98,.18)}
.campaign-node b{display:block;font-size:17px}
.campaign-node small{color:#aeb5c1}
.gang-grid{display:grid;grid-template-columns:1fr;gap:9px}
.gang-card{padding:13px!important}
.gang-card h3{color:#ffc45c}
.gang-card .perk{color:#5ce1a1;font-size:11px;margin-top:6px}
.gang-card .con{color:#ff8b8f;font-size:11px;margin-top:3px}

/* Social */
.social-person{padding:10px!important;display:flex;gap:10px;align-items:center}
.social-person .copy{flex:1;min-width:0}
.social-person b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-person small{font-size:10px;color:#9fa6b0}
.social-actions{display:flex;gap:5px}
.social-actions button{font-size:10px;min-height:32px;padding:5px 8px}

/* Economy */
.dynamic-store-grid,.recruit-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dynamic-store-item{padding:11px!important;display:flex;flex-direction:column;min-height:150px;gap:6px}
.dynamic-store-item img{height:62px;width:100%;object-fit:contain}
.dynamic-store-item h3{font-size:16px}
.dynamic-store-item p{font-size:11px;color:#b9bec6}
.dynamic-store-item .price{margin-top:auto;color:#ffc45c;font-size:14px}
.recruit-live-card{padding:14px!important;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center}
.recruit-live-card img{width:70px;height:92px;object-fit:cover;border-radius:8px}
.reward-card-reveal img{width:100%;height:160px;object-fit:cover;border-radius:10px}

/* Achievements / leaderboard */
.achievement-row,.leader-row{padding:10px!important;display:flex;align-items:center;gap:10px}
.achievement-row .copy,.leader-row .copy{flex:1;min-width:0}
.progress-track{height:7px;background:#242b35;margin-top:5px;overflow:hidden}
.progress-track i{display:block;height:100%;background:#ffc45c}
.leader-pos{width:34px;text-align:center;font-size:20px;color:#ffc45c}

/* Compact desktop-like phone viewport remains comfortable. */
@media (min-width:700px){
  .feature-content{padding-left:16px;padding-right:16px}
}
@media (max-width:390px){
  .arrange-head{grid-template-columns:62px minmax(0,1fr) 74px!important;gap:6px!important}
  .arrange-title>b{font-size:26px!important}
  .auto-btn{font-size:15px!important}
  .arrange-timer{top:69px!important;min-width:105px!important}
  .feature-grid{gap:7px}
}

/* v1.5 parity: account lifecycle, help and training */
.auth-parity{padding-top:14px}.auth-parity .feature-card{max-width:430px;margin:18px auto}.link-button{background:none;border:0;color:#f4cc72;font:inherit;text-decoration:underline;cursor:pointer;padding:4px 0}.otp-input{text-align:center;letter-spacing:.28em;font-size:1.35rem!important;font-weight:800}.training-row{display:grid;grid-template-columns:minmax(118px,1.15fr) minmax(100px,.8fr) auto;gap:12px;align-items:center;padding:12px;margin-bottom:12px}.training-card-pair{display:flex;align-items:center;gap:6px;min-width:0}.training-card-pair .fighter-card.small{width:72px;min-width:72px}.training-arrow{font-size:25px;color:#f2c052;font-weight:900}.training-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.training-copy b{font-size:15px}.training-copy small{font-size:10px;color:#d8d2c6}.training-row .feature-btn{min-width:92px}@media(max-width:430px){.training-row{grid-template-columns:1fr auto;gap:8px}.training-card-pair{grid-column:1/2}.training-copy{grid-column:1/2}.training-row .feature-btn{grid-column:2/3;grid-row:1/3;align-self:stretch;padding:8px}.training-card-pair .fighter-card.small{width:62px;min-width:62px}}

/* v1.5 final Arrange breathing room: one-line subtitle + compact timer rail. */
.arrange-head{min-height:102px!important;align-items:start!important}
.arrange-title>b{font-size:28px!important}
.arrange-title>span{font-size:9px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;margin-top:5px!important}
.arrange-timer{top:58px!important;min-width:92px!important;height:26px!important;padding:0 10px!important;gap:6px!important;border-width:1px!important}
.arrange-timer span,.arrange-timer small{font-size:8px!important}.arrange-timer b{font-size:16px!important}
@media(max-width:390px){.arrange-head{min-height:98px!important}.arrange-title>b{font-size:24px!important}.arrange-title>span{font-size:8px!important}.arrange-timer{top:55px!important;min-width:86px!important;height:25px!important}}


/* v2.0 ranked + achievements polish */
.achievement-row.claimable{border-color:rgba(74,214,119,.5)!important;box-shadow:0 0 0 1px rgba(74,214,119,.16),0 10px 22px rgba(0,0,0,.22)!important}
.achievement-row .feature-btn.primary{white-space:nowrap}
.ranked-screen .feature-content{gap:12px}
.ranked-shell{display:grid;gap:14px}
.ranked-hero{position:relative;overflow:hidden;padding:16px 14px 14px!important;background:linear-gradient(180deg,rgba(7,12,19,.96),rgba(10,15,24,.94))!important;border:1px solid rgba(92,206,255,.28)!important}
.ranked-season-mark{position:absolute;right:10px;top:8px;font:900 56px/1 FCDisplay,Arial,sans-serif;color:rgba(88,198,255,.08);pointer-events:none}
.ranked-hero-main{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:center}
.ranked-badge-wrap{width:90px;height:90px;border-radius:22px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),rgba(255,255,255,.02) 58%,rgba(0,0,0,.14));display:grid;place-items:center;border:1px solid rgba(255,255,255,.1)}
.ranked-badge{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.ranked-rank-name{font:900 26px/1 FCDisplay,Arial,sans-serif;color:#fff;margin-top:2px}
.ranked-progress-copy{margin-top:6px;font:800 11px/1.15 Arial,sans-serif;letter-spacing:.06em;color:#69d4ff;text-transform:uppercase}
.ranked-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.ranked-progress-bar{margin-top:12px;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ranked-progress-bar>i{display:block;height:100%;background:linear-gradient(90deg,#39B6FF,#78dbff)}
.ranked-mode-list{display:grid;gap:12px}
.ranked-mode-card{position:relative;overflow:hidden;padding:14px!important;border:1px solid rgba(255,255,255,.12)!important;text-align:left;color:#fff;background:linear-gradient(180deg,rgba(8,12,18,.92),rgba(8,12,18,.98))!important}
.ranked-mode-card::before{content:'';position:absolute;inset:0;background-image:var(--rank-bg);background-size:cover;background-position:center;opacity:.18;pointer-events:none}
.ranked-mode-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,11,.26),rgba(4,7,11,.82));pointer-events:none}
.ranked-mode-card>*{position:relative;z-index:1}
.ranked-mode-card.active,.ranked-mode-card:hover{border-color:rgba(57,182,255,.58)!important;box-shadow:0 0 0 1px rgba(57,182,255,.14),0 12px 24px rgba(0,0,0,.28)!important}
.ranked-mode-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ranked-mode-top span{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:28px;padding:0 10px;border-radius:999px;background:rgba(57,182,255,.15);border:1px solid rgba(57,182,255,.28);font:800 12px/1 Arial,sans-serif;color:#9fe8ff}
.ranked-mode-top b{font:900 19px/1 FCDisplay,Arial,sans-serif;color:#fff}
.ranked-mode-card p{margin:10px 0 14px;color:#d8e4ef;font-size:12px;line-height:1.32}
.ranked-mode-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ranked-mode-foot em{font-style:normal;font:700 10px/1 Arial,sans-serif;letter-spacing:.08em;color:#d1deeb;text-transform:uppercase}
.ranked-mode-foot strong{font:900 12px/1 FCDisplay,Arial,sans-serif;color:#ffd590}