/* Offline cup: character select, customization neutrals, pack images */
/* ===== Cup: arcade character select ===== */
.arcade { display: flex; flex-direction: column; gap: 14px; }
.as-intro { color: var(--muted); font-size: 14px; }
.as-grade-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.as-grade { all: unset; cursor: pointer; display: grid; place-items: center; width: 38px; height: 40px; border-radius: 8px; opacity: .45; transition: opacity .15s, transform .15s; }
.as-grade:hover { opacity: .85; }
.as-grade[aria-pressed="true"] { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
.as-arrow { all: unset; cursor: pointer; font-size: 24px; padding: 0 6px; color: var(--muted); }
.as-arrow:disabled { opacity: .2; cursor: default; }
.as-grade-name { margin-left: 12px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.as-grade-name small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; margin-left: 4px; }
.as-main { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.as-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.as-card .dcard { width: 240px; }
.as-strong { font-size: 13px; font-weight: 600; }
.as-side { flex: 1; min-width: 300px; max-width: 480px; display: flex; flex-direction: column; gap: 14px; }
.as-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.as-tile { all: unset; cursor: pointer; position: relative; aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, var(--panel), var(--asphalt)); border: 2px solid rgba(255, 255, 255, .08); transition: transform .12s, border-color .12s; }
.as-tile:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.as-tile-ic { width: 32%; color: var(--c); }
.as-tile.ph { overflow: hidden; justify-content: flex-end; }
.as-tile-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-tile.ph::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.as-tile.ph b { position: relative; z-index: 1; margin-bottom: 5px; text-shadow: 0 1px 3px #000; }
.as-tile.ph .flag { z-index: 1; }
.as-tile-ic svg { width: 100%; height: auto; display: block; }
.as-tile b { font-family: var(--display); font-style: italic; font-size: 16px; line-height: 1; }
.as-tile .flag { width: 16px; height: auto; position: absolute; right: 5px; top: 5px; }
.as-tile[aria-selected="true"] { border-color: var(--c); box-shadow: 0 0 0 2px #05070c, 0 0 16px var(--c); }
.as-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.as-go small { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) { .as-main { justify-content: center; } .as-side { min-width: 0; max-width: none; width: 100%; flex: 1 1 100%; } .as-grade-name { margin-left: 0; width: 100%; } }

.cu-kitbox { width: 100%; max-width: 560px; border-radius: 12px; overflow: hidden; background: #808080; }
.cu-kitbox canvas { display: block; width: 100%; height: auto; }
.cu-helmetbox { max-width: 460px; }

.cu-neutrals { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-neutrals button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cu-neutrals i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); }
.cu-neutrals button[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .1); }

.pack-img { flex: none; width: 100px; display: flex; align-items: center; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.pack-cv { display: block; height: auto; }
.pk-big .pack-art.has-img { width: auto; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px color-mix(in srgb, var(--pk) 45%, transparent)); }
.pk-big .pack-art.has-img::after { display: none; }