/* /operation: Operation Cinder hub, Star Shop, quests, Cinder Case, graffiti & patches */
.op-page{padding-bottom:48px}
.op-star{display:inline-block;width:15px;height:15px;vertical-align:-2px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z' fill='%23E8B84A'/%3E%3C/svg%3E")}
.op-ms{color:var(--gold);font-weight:800;white-space:nowrap}
.op-pro{font-size:11px;font-weight:800;color:#070C16;background:var(--gold);border-radius:4px;padding:2px 6px;letter-spacing:.02em}
.op-excl{font-size:11px;font-weight:800;color:#070C16;background:#FF8A1F;border-radius:4px;padding:2px 7px;letter-spacing:.04em}

.op-hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,122,26,.07),transparent 70%)}
.op-hero-in{display:flex;gap:28px;align-items:center;padding-top:32px}
.op-emblem{width:128px;height:128px;flex-shrink:0}
.op-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.op-kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-weight:700;color:var(--gold);font-size:15px}
.op-title h1{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,7vw,76px);line-height:.9;font-weight:900;letter-spacing:.02em}
.op-title p{margin:0;color:var(--muted)}
.op-earned{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.op-earned>b{font-family:var(--display);font-size:46px;line-height:1;color:var(--gold)}
.op-earned small{color:var(--muted);font-size:13px}
.op-earned span{font-size:13px}
.op-coins{position:relative;display:flex;justify-content:space-between;margin:26px 0 22px;padding:0 6px}
.op-coins::before{content:"";position:absolute;left:30px;right:30px;top:20px;height:4px;border-radius:2px;background:var(--line)}
.op-coins .op-fill{position:absolute;left:30px;top:20px;height:4px;border-radius:2px;background:var(--gold);max-width:calc(100% - 60px)}
.op-coin{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px}
.op-coin i{width:40px;height:40px;border-radius:50%;border:3px solid var(--line-hi);background:var(--deck);box-sizing:border-box}
.op-coin.on i{border-color:var(--gold)}
.op-coin.c0.on i{background:#7a4f24}.op-coin.c1.on i{background:#9aa6b8}.op-coin.c2.on i{background:#d9a93a}.op-coin.c3.on i{background:#7fd3f0}
.op-coin small{font-size:12px;color:var(--muted);white-space:nowrap}

.op-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:8px 0 26px;overflow-x:auto}
.op-tabs button{all:unset;cursor:pointer;color:var(--muted);font-weight:600;font-size:15px;padding:14px 2px;border-bottom:2px solid transparent;display:flex;gap:8px;align-items:center;white-space:nowrap}
.op-tabs button:hover{color:var(--text)}
.op-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--blue)}
.op-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.op-shophead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.op-shophead>div:first-child{flex:1;min-width:260px}
.op-shophead h2,.op-pane h2.op-h{margin:0;font-family:var(--display);text-transform:uppercase;font-size:38px;font-weight:800;letter-spacing:.03em}
.op-shophead p{margin:4px 0 0}
.op-bal{display:flex;align-items:center;gap:8px;background:var(--deck);border:1px solid var(--line);border-radius:8px;padding:11px 16px;font-weight:700}

.op-row{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;background:#0A1220;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:18px}
.op-info{display:flex;flex-direction:column;gap:8px;padding:6px}
.op-info img{width:84px;height:84px;object-fit:contain}
.op-info h3{margin:0;font-family:var(--display);text-transform:uppercase;font-size:22px;line-height:1.05;font-weight:800}
.op-info p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.op-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.op-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;background:var(--deck);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0;position:relative}
.op-card:hover{border-color:var(--blue)}
.op-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.op-card[aria-disabled="true"]{cursor:default;opacity:.55}
.op-card[aria-disabled="true"]:hover{border-color:var(--line)}
.op-card .op-art{height:150px;display:flex;align-items:center;justify-content:center;background:#0F1B31;border-bottom:4px solid var(--r,#4B69FF);position:relative}
.op-card .op-art img{max-width:82%;max-height:126px;object-fit:contain}
.op-card .op-art .op-excl{position:absolute;top:9px;left:9px}
.op-card .op-b{padding:11px 13px;display:flex;flex-direction:column;gap:5px}
.op-card .op-n{font-weight:600}
.op-card .op-f{display:flex;justify-content:space-between;align-items:center;gap:8px}
.op-card .op-t{font-size:12px;font-weight:700;color:var(--r,#4B69FF)}
.op-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.op-login{margin-top:18px}

/* quests */
.op-qwrap{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.op-qmain{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
.op-qside{flex:1 1 320px;display:flex;flex-direction:column;gap:16px;min-width:0}
.op-qhead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.op-qhead>div:first-child{flex:1;min-width:240px}
.op-qhead .op-qsum{text-align:right}
.op-q{display:flex;align-items:center;gap:16px;background:var(--deck);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.op-q.done{border-color:#5c4a1f}
.op-q .op-qi{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0F1B31;flex-shrink:0}
.op-q.done .op-qi{background:var(--gold)}
.op-q .op-qb{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.op-q .op-qt{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.op-q .op-qt small{color:var(--muted);font-size:12px}
.op-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.op-bar i{display:block;height:6px;background:var(--blue)}
.op-q.done .op-bar i{background:var(--gold)}
.op-q .op-qp{width:64px;text-align:right;color:var(--muted);font-size:13px;flex-shrink:0}
.op-q .op-ms{width:74px;text-align:right;flex-shrink:0}
.op-qbonus{display:flex;align-items:center;gap:14px;background:#0A1220;border:1px dashed var(--line-hi);border-radius:10px;padding:14px 16px;color:var(--muted)}
.op-qbonus span:not(.op-ms){flex:1}
.op-tiers{background:var(--deck);border:1px solid var(--line-hi);border-radius:12px;padding:18px}
.op-tiers h3{margin:0 0 12px;font-family:var(--display);text-transform:uppercase;font-size:22px;font-weight:800}
.op-tiers table{width:100%;border-collapse:collapse;font-size:14px}
.op-tiers th{color:var(--muted);font-weight:500;text-align:right;padding:4px 0}
.op-tiers th:first-child,.op-tiers td:first-child{text-align:left}
.op-tiers td{padding:6px 0;text-align:right;font-weight:700}
.op-tiers td:first-child{font-weight:500}
.op-tiers p{color:var(--muted);font-size:13px;margin:12px 0 0}
.op-lock{border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;background:#0A1220}
.op-lock .btn{background:var(--gold);color:#070C16;border-color:var(--gold)}

/* Cinder Case */
.op-case{display:flex;gap:28px;align-items:center;flex-wrap:wrap;background:#0A1220;border:1px solid var(--line);border-radius:12px;padding:22px 26px}
.op-case>img{width:300px;max-width:100%;height:auto}
.op-case .op-cmain{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
.op-case h2{margin:0;font-family:var(--display);text-transform:uppercase;font-size:54px;line-height:.95;font-weight:900}
.op-case .op-excl{align-self:flex-start}
.op-odds{display:flex;flex-direction:column;gap:6px;width:230px}
.op-odds div{display:flex;justify-content:space-between;background:var(--deck);border-radius:6px;padding:8px 12px;border-left:3px solid var(--r);font-size:13px;font-weight:700}
.op-odds span{color:var(--r)}
.op-rare{margin-top:18px;background:var(--deck);border:1px solid #5c4a1f;border-radius:12px;padding:18px 22px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.op-rare .op-rstar{width:160px;height:110px;border-radius:10px;background:#0F1B31;border-bottom:4px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:62px;font-weight:900;color:var(--gold)}
.op-rare>div:last-child{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px;line-height:1.55}
.op-rare h3{margin:0;font-family:var(--display);text-transform:uppercase;font-size:26px;font-weight:800;color:var(--gold)}
.op-gems{display:flex;flex-wrap:wrap;gap:8px}
.op-gems img{width:92px;height:69px;object-fit:contain;background:#0F1B31;border-radius:6px}
.op-contents{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.op-skin{background:var(--deck);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.op-skin .op-art{height:100px;background:#0F1B31;border-bottom:4px solid var(--r);display:flex;align-items:center;justify-content:center}
.op-skin .op-art img{max-width:86%;max-height:86px;object-fit:contain}
.op-skin div:last-child{padding:9px 11px;display:flex;flex-direction:column;gap:1px}
.op-skin small{color:var(--muted);font-size:12px}
.op-skin b{font-size:14px}
.op-skin em{font-style:normal;font-size:12px;font-weight:700;color:var(--r)}

/* graffiti & patches, how to earn */
.op-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.op-box{background:var(--deck);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px}
.op-box h3{margin:0;font-family:var(--display);text-transform:uppercase;font-size:26px;font-weight:800}
.op-box p{margin:0;color:var(--muted);line-height:1.5}
.op-box code{background:#0F1B31;border:1px solid var(--line-hi);border-radius:6px;padding:3px 8px;color:var(--text)}
.op-box .op-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.op-box .op-boxes .op-card .op-art{height:110px}
.op-box .op-boxes .op-card .op-art img{max-height:92px}
.op-earn{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.op-earn div{background:var(--deck);border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.op-earn div.hi{border-color:var(--line-hi)}.op-earn div.pro{border-color:#5c4a1f}
.op-earn small{color:var(--muted);font-size:13px}
.op-earn b{font-family:var(--display);font-size:30px;font-weight:800;color:var(--gold)}
.op-earn b span{font-size:16px;color:var(--ice)}
.op-hist{margin-top:22px;width:100%;border-collapse:collapse;font-size:14px}
.op-hist th{text-align:left;color:var(--muted);font-weight:500;padding:8px 6px;border-bottom:1px solid var(--line)}
.op-hist td{padding:9px 6px;border-bottom:1px solid var(--line)}
.op-hist td.p{color:#4ADE80;font-weight:700;text-align:right}.op-hist td.m{color:#F87171;font-weight:700;text-align:right}
.op-histbox{overflow-x:auto}

/* redeem result */
.op-got{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.op-got img{max-width:260px;max-height:180px;object-fit:contain}
.op-got b{font-size:18px}

/* play page banner */
.op-banner{display:flex;align-items:center;min-height:220px;margin-bottom:22px;border-radius:14px;border:1px solid #3a2416;overflow:hidden;text-decoration:none;color:var(--text);background:#0A0D16 url("/assets/img/operation/cinder-banner.png") right center/auto 100% no-repeat}
.op-banner:hover{border-color:#FF8A1F}
.op-banner>div{padding:26px 40px;display:flex;flex-direction:column;gap:9px;max-width:600px;background:linear-gradient(90deg,rgba(7,11,20,.92) 60%,rgba(7,11,20,0))}
.op-banner .op-live{display:flex;gap:9px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.14em;color:#FFB547}
.op-banner .op-live i{width:9px;height:9px;border-radius:50%;background:#FF8A1F}
.op-banner strong{font-family:var(--display);text-transform:uppercase;font-size:clamp(36px,5vw,58px);line-height:.92;font-weight:900}
.op-banner p{margin:0;color:#C9D2E3;line-height:1.5}
.op-banner .btn{align-self:flex-start;background:#FF8A1F;border-color:#FF8A1F;color:#070C16;font-weight:800}

@media (max-width:720px){
  .op-hero-in{flex-wrap:wrap;gap:16px}
  .op-emblem{width:72px;height:72px}
  .op-title,.op-earned{flex:1 1 100%}
  .op-earned{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .op-earned>b{font-size:34px}
  .op-earned{align-items:flex-start;text-align:left}
  .op-row{grid-template-columns:1fr}
  .op-info{flex-direction:row;flex-wrap:wrap;align-items:center}
  .op-info img{width:56px;height:56px}
  .op-info h3{flex:1}
  .op-info p{flex-basis:100%}
  .op-coin small{font-size:11px}
  .op-q{flex-wrap:wrap}
  .op-q .op-qp{width:auto}
  .op-odds{width:100%}
  .op-banner>div{padding:22px;background:rgba(7,11,20,.86)}
}
/* Star Shop quantity (batch 40) */
.op-qty{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 4px}
.op-qty .btn{min-width:42px;height:40px;padding:0 12px;font-size:18px}
.op-qty .op-qmax{font-size:13px}
.op-qty output{min-width:44px;text-align:center;font:800 26px/1 var(--display)}
.op-qtot{margin:8px 0 0;text-align:center;color:var(--muted);font-size:13px}.op-qtot b{color:var(--text)}