.clash-overlay{justify-content:flex-start;overflow-y:auto;padding-top:22px;padding-bottom:24px}
.clash-overlay>img{width:62px}
.clash-overlay>p:first-of-type{margin-top:10px}
.clash-overlay h2{font-size:clamp(2rem,5vw,4.2rem);margin:5px 0 8px}
.clash-overlay>p:last-of-type{max-width:620px;margin-bottom:12px}
.clash-overlay-wallet{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;color:#a5a6a2;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.clash-overlay-wallet strong{color:#ffd44a;font:800 1.05rem Syne,sans-serif}
.clash-district-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(680px,100%);margin-bottom:12px}
.clash-district-select button{min-width:0;min-height:66px;padding:9px;border:1px solid #343740;border-radius:14px;background:#0c0e14;color:#fff;text-align:left;cursor:pointer}
.clash-district-select button.selected{border-color:#ff3f81;background:rgba(255,63,129,.12);box-shadow:0 0 22px rgba(255,63,129,.18)}
.clash-district-select button:disabled{opacity:.35;cursor:not-allowed}
.clash-district-select strong,.clash-district-select span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clash-district-select strong{font:800 .72rem Syne,sans-serif}
.clash-district-select span{margin-top:4px;color:#8c8d89;font-size:.62rem}
.clash-character-select{width:min(680px,100%);margin-bottom:12px}
.clash-start{min-height:48px}
.clash-shot-controls{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(260px,1.7fr) auto;gap:14px;align-items:center;padding:13px 16px;border-top:1px solid #292d36;background:#090b11}
.clash-shot-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.clash-shot-copy span{color:#777;font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.clash-shot-copy strong{overflow:hidden;color:#fff;font:700 .86rem Syne,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.clash-timing{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;opacity:.38;transition:opacity .2s ease}
.clash-timing.ready{opacity:1}
.clash-timing-track{position:relative;height:18px;overflow:hidden;border:1px solid #343945;border-radius:999px;background:linear-gradient(90deg,#ff3f81 0 17%,#ffd44a 34%,#75f08c 50%,#ffd44a 66%,#ff3f81 83% 100%)}
.clash-perfect-zone{position:absolute;top:0;bottom:0;left:46%;width:8%;border-right:2px solid rgba(255,255,255,.72);border-left:2px solid rgba(255,255,255,.72);background:rgba(255,255,255,.28)}
.clash-timing-track i{position:absolute;top:-4px;bottom:-4px;left:50%;width:4px;border-radius:999px;background:#fff;box-shadow:0 0 12px #fff;transform:translateX(-50%)}
.clash-release-hint{color:#a8aaa5;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.clash-ability{min-height:46px;padding:0 18px;border:0;border-radius:999px;font:800 .72rem Syne,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.clash-ability.armed{background:linear-gradient(105deg,#75f08c,#4de1ff);box-shadow:0 0 24px rgba(77,225,255,.28)}
.clash-ability:disabled{opacity:.38;cursor:not-allowed}
.clash-career{max-width:1500px;margin:28px auto 0;padding:28px;border:1px solid rgba(255,212,74,.34);border-radius:28px;background:radial-gradient(circle at 90% 0,rgba(255,212,74,.1),transparent 28%),#080a0f}
.clash-career-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.clash-career-head h2{margin:7px 0 0;font:800 clamp(2rem,5vw,4.3rem)/.92 Syne,sans-serif;letter-spacing:-.055em}
.clash-wallet{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;margin:0}
.clash-wallet span{color:#8c8d89;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.clash-wallet strong{color:#ffd44a;font:800 2rem Syne,sans-serif}
.clash-daily{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:24px 0 14px;padding:16px 18px;border:1px solid rgba(77,225,255,.25);border-radius:16px;background:rgba(77,225,255,.06)}
.clash-daily span{color:#4de1ff;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.clash-daily strong{font:700 .94rem Syne,sans-serif}
.clash-daily p{margin:0;color:#ffd44a;font-weight:800}
.clash-daily.complete{border-color:rgba(117,240,140,.55);background:rgba(117,240,140,.08)}
.clash-gear-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.clash-gear-grid article{display:flex;min-width:0;flex-direction:column;min-height:210px;padding:18px;border:1px solid #2c3039;border-radius:18px;background:linear-gradient(155deg,#131722,#090b10)}
.clash-gear-grid article>span{color:#777;font-size:.63rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.clash-gear-grid h3{margin:8px 0 9px;font:800 1.08rem Syne,sans-serif}
.clash-gear-grid p{margin:0 0 18px;color:#969893;font-size:.82rem;line-height:1.45}
.clash-gear-grid button{min-height:44px;margin-top:auto;border:1px solid #3a3f49;border-radius:12px;background:#11141b;color:#fff;font:800 .7rem Syne,sans-serif;cursor:pointer}
.clash-gear-grid button:not(:disabled):hover{border-color:#ffd44a;color:#ffd44a}
.clash-gear-grid button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:860px){
  .clash-overlay{inset:68px 0 0;padding:18px 13px calc(110px + env(safe-area-inset-bottom))}
  .clash-overlay>img{width:52px;flex-basis:52px}
  .clash-overlay h2{font-size:clamp(1.85rem,8.5vw,2.7rem)}
  .clash-overlay>p:last-of-type{font-size:.82rem;line-height:1.3}
  .clash-district-select{grid-template-columns:1fr}
  .clash-district-select button{min-height:50px}
  .clash-character-select{grid-template-columns:1fr 1fr}
  .clash-shot-controls{grid-template-columns:1fr auto;gap:10px;padding:11px 12px}
  .clash-shot-copy{grid-column:1/-1}
  .clash-shot-copy strong{font-size:.78rem}
  .clash-timing{grid-column:1/-1;grid-template-columns:1fr}
  .clash-release-hint{text-align:center}
  .clash-ability{grid-column:1/-1;width:100%}
  .clash-career{margin-top:20px;padding:20px 14px;border-radius:20px}
  .clash-career-head{align-items:flex-start}
  .clash-career-head h2{font-size:clamp(2rem,10vw,3.2rem)}
  .clash-wallet strong{font-size:1.5rem}
  .clash-daily{grid-template-columns:1fr auto;gap:6px 12px;padding:14px}
  .clash-daily span{grid-column:1/-1}
  .clash-gear-grid{grid-template-columns:1fr 1fr}
  .clash-gear-grid article{min-height:205px;padding:15px}
}
@media(max-width:430px){.clash-gear-grid{grid-template-columns:1fr}.clash-gear-grid article{min-height:0}.clash-career-head{align-items:flex-start;flex-direction:column}.clash-wallet{align-items:flex-start}}