.shelem-page { display: grid; gap: .85rem; max-width: 680px; margin-inline: auto; padding-bottom: .8rem; }
.shelem-heading { position: relative; padding: .2rem .15rem .1rem; }
.shelem-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .75rem; color: var(--arcade-muted); font-size: .7rem; font-weight: 700; }
.shelem-back i { color: var(--arcade-cyan); }
.shelem-eyebrow { display: inline-flex; align-items: center; gap: .35rem; color: var(--arcade-cyan); font-size: .68rem; font-weight: 800; }
.shelem-heading h1 { margin: .15rem 0 .1rem; font-size: clamp(1.7rem, 8vw, 2.3rem); font-weight: 950; letter-spacing: -.06em; }
.shelem-heading h1 em { color: var(--arcade-lime); font-style: normal; }
.shelem-heading > p { margin: .12rem 0 0; color: var(--arcade-muted); font-size: .75rem; }
.shelem-messages { display: grid; gap: .4rem; }
.shelem-message { margin: 0; padding: .65rem .8rem; border: 1px solid rgba(71,230,238,.2); border-radius: .8rem; background: rgba(71,230,238,.06); color: var(--arcade-cyan); font-size: .72rem; line-height: 1.8; }
.shelem-message--error, .shelem-message--warning { border-color: rgba(255,79,154,.25); background: rgba(255,79,154,.07); color: #ff94be; }
.shelem-message--success { border-color: rgba(200,255,61,.2); background: rgba(200,255,61,.06); color: var(--arcade-lime); }
.shelem-panel { padding: .9rem; border: 1px solid var(--arcade-line); border-radius: 1.15rem; background: radial-gradient(ellipse at 100% 0, rgba(71,230,238,.07), transparent 48%), var(--arcade-panel); box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.shelem-section-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; }
.shelem-section-icon { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(200,255,61,.18); border-radius: .8rem; background: rgba(200,255,61,.08); color: var(--arcade-lime); }
.shelem-section-icon--pink { border-color: rgba(255,79,154,.2); background: rgba(255,79,154,.08); color: var(--arcade-pink); }
.shelem-section-heading .shelem-eyebrow { font-size: .6rem; }
.shelem-section-heading h2 { margin: 0; font-size: 1.02rem; font-weight: 900; }
.shelem-form { display: grid; gap: .85rem; }
.shelem-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.shelem-fieldset legend, .shelem-field > span { display: block; margin-bottom: .4rem; color: var(--arcade-text); font-size: .75rem; font-weight: 800; }
.shelem-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.shelem-type-card { position: relative; display: flex; min-height: 4.2rem; align-items: center; gap: .55rem; padding: .55rem; border: 1px solid var(--arcade-line); border-radius: .85rem; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.shelem-type-card:has(input:checked), .shelem-type-card.is-selected { border-color: rgba(200,255,61,.4); background: rgba(200,255,61,.07); box-shadow: inset 0 0 0 1px rgba(200,255,61,.08); }
.shelem-type-card:active { transform: scale(.985); }
.shelem-type-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.shelem-type-card:focus-within { outline: 2px solid var(--arcade-cyan); outline-offset: 2px; }
.shelem-type-icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; background: rgba(200,255,61,.1); color: var(--arcade-lime); }
.shelem-type-icon--pink { background: rgba(255,79,154,.1); color: var(--arcade-pink); }
.shelem-type-card b, .shelem-type-card small { display: block; }
.shelem-type-card b { font-size: .75rem; }
.shelem-type-card small { margin-top: .08rem; color: var(--arcade-muted); font-size: .62rem; }
.shelem-field { display: block; min-width: 0; }
.shelem-field input, .shelem-field select { display: block; width: 100%; min-height: 2.95rem; padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.11); border-radius: .78rem; outline: 0; background: #151419; color: var(--arcade-text); font: inherit; font-size: .82rem; transition: border-color .16s, box-shadow .16s; }
.shelem-field input::placeholder { color: #706a76; }
.shelem-field input:focus, .shelem-field select:focus { border-color: rgba(71,230,238,.65); box-shadow: 0 0 0 3px rgba(71,230,238,.09); }
.shelem-field input[aria-invalid="true"] { border-color: var(--arcade-pink); }
.shelem-field > small { display: block; margin-top: .28rem; color: var(--arcade-soft); font-size: .62rem; }
.shelem-field .shelem-field-error, .shelem-field-error { color: #ff89b6; }
.shelem-input-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.shelem-opponent-control { display: block; }
.shelem-button { display: inline-flex; min-height: 2.85rem; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border: 0; border-radius: .82rem; font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; transition: transform .15s, filter .15s; }
.shelem-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.shelem-button:active { transform: translateY(1px) scale(.99); }
.shelem-button--primary { background: var(--arcade-lime); color: #151419; box-shadow: 0 7px 20px rgba(200,255,61,.13); }
.shelem-button--danger { min-height: 2.55rem; background: var(--arcade-pink); color: #fff; }
.shelem-submit { width: 100%; min-height: 3.1rem; margin-top: .1rem; }
.shelem-game-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; color: var(--arcade-muted); font-size: .67rem; }
.shelem-game-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.shelem-game-meta i { color: var(--arcade-cyan); }
.shelem-scoreboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.shelem-score-card { position: relative; display: grid; min-height: 7.4rem; align-content: center; justify-items: center; gap: .12rem; overflow: hidden; padding: .75rem .45rem; border: 1px solid rgba(200,255,61,.2); border-radius: 1.05rem; background: radial-gradient(ellipse at 50% 0, rgba(200,255,61,.11), transparent 70%), var(--arcade-panel); text-align: center; }
.shelem-score-card--b { border-color: rgba(255,79,154,.2); background: radial-gradient(ellipse at 50% 0, rgba(255,79,154,.11), transparent 70%), var(--arcade-panel); }
.shelem-score-card__team { max-width: 100%; overflow: hidden; color: var(--arcade-muted); font-size: .67rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.shelem-score-card__team i { margin-left: .25rem; color: var(--arcade-lime); }
.shelem-score-card--b .shelem-score-card__team i { color: var(--arcade-pink); }
.shelem-score-card strong { color: var(--arcade-lime); direction: ltr; font-size: clamp(1.8rem, 9vw, 2.5rem); font-weight: 950; font-variant-numeric: tabular-nums; line-height: 1.2; }
.shelem-score-card--b strong { color: #ff87b5; }
.shelem-score-card > small { color: var(--arcade-soft); font-size: .59rem; }
.shelem-reset, .shelem-rules { overflow: hidden; border: 1px solid var(--arcade-line); border-radius: .9rem; background: rgba(255,255,255,.025); }
.shelem-reset > summary, .shelem-rules > summary { display: flex; min-height: 2.85rem; align-items: center; gap: .5rem; padding: .65rem .8rem; color: var(--arcade-muted); font-size: .72rem; font-weight: 800; cursor: pointer; list-style: none; }
.shelem-reset > summary::-webkit-details-marker, .shelem-rules > summary::-webkit-details-marker { display: none; }
.shelem-reset > summary::after, .shelem-rules > summary::after { margin-right: auto; content: "＋"; color: var(--arcade-cyan); }
.shelem-reset[open] > summary::after, .shelem-rules[open] > summary::after { content: "−"; }
.shelem-reset > summary i { color: var(--arcade-pink); }
.shelem-reset__confirm { padding: 0 .8rem .8rem; }
.shelem-reset__confirm p { margin: .05rem 0 .65rem; color: var(--arcade-muted); font-size: .7rem; line-height: 1.8; }
.shelem-section-heading { margin-bottom: .85rem; }
.shelem-table-wrap { display: none; width: 100%; overflow: auto; border: 1px solid var(--arcade-line); border-radius: .8rem; scrollbar-color: rgba(71,230,238,.35) transparent; }
.shelem-round-cards { display: grid; gap: .65rem; }
.shelem-round-card { display: grid; gap: .6rem; padding: .75rem; border: 1px solid var(--arcade-line); border-radius: .9rem; background: rgba(255,255,255,.025); }
.shelem-round-card__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.shelem-round-card__header > div { display: flex; align-items: center; gap: .45rem; }
.shelem-round-card__header b { font-size: .78rem; }
.shelem-round-card__detail { margin: 0; color: var(--arcade-muted); font-size: .64rem; line-height: 1.8; overflow-wrap: anywhere; }
.shelem-round-card__scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.shelem-round-card__scores > div { min-width: 0; padding: .5rem; border-radius: .6rem; background: rgba(200,255,61,.06); color: var(--arcade-lime); }
.shelem-round-card__scores > div:last-child { background: rgba(255,79,154,.06); color: #ff87b5; }
.shelem-round-card__scores small { display: block; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.shelem-round-card__scores strong { display: block; margin-top: .15rem; direction: ltr; text-align: right; font-size: .95rem; font-variant-numeric: tabular-nums; }
.shelem-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .67rem; text-align: right; }
.shelem-table th, .shelem-table td { padding: .6rem .5rem; border-bottom: 1px solid var(--arcade-line); white-space: nowrap; }
.shelem-table thead th { background: rgba(71,230,238,.07); color: var(--arcade-cyan); font-size: .62rem; font-weight: 900; }
.shelem-table tbody th { color: var(--arcade-muted); font-weight: 800; }
.shelem-table tbody td { color: #ded9e2; }
.shelem-table tr:last-child th, .shelem-table tr:last-child td { border-bottom: 0; }
.shelem-positive { color: var(--arcade-lime) !important; font-weight: 900; }
.shelem-negative { color: #ff87b5 !important; font-weight: 900; }
.shelem-status { display: inline-flex; padding: .19rem .42rem; border-radius: 999px; background: rgba(200,255,61,.09); color: var(--arcade-lime); font-size: .58rem; font-weight: 900; }
.shelem-status--failed { background: rgba(255,79,154,.1); color: #ff87b5; }
.shelem-delete-round { display: inline-flex; min-height: 2rem; align-items: center; gap: .3rem; padding: .25rem .45rem; border: 1px solid rgba(255,79,154,.2); border-radius: .55rem; background: rgba(255,79,154,.06); color: #ff87b5; font: inherit; font-size: .62rem; cursor: pointer; }
.shelem-empty { display: grid; justify-items: center; padding: 1.25rem .6rem; text-align: center; }
.shelem-empty > span { display: grid; width: 2.7rem; height: 2.7rem; margin-bottom: .45rem; place-items: center; border: 1px solid rgba(71,230,238,.18); border-radius: .9rem; background: rgba(71,230,238,.07); color: var(--arcade-cyan); font-size: 1.1rem; }
.shelem-empty b { font-size: .78rem; }
.shelem-empty p { margin: .2rem 0 0; color: var(--arcade-muted); font-size: .67rem; }
.shelem-rules > summary { color: var(--arcade-cyan); }
.shelem-rules > summary i { color: var(--arcade-lime); }
.shelem-rules__body { padding: 0 .8rem .75rem; }
.shelem-rules__body p, .shelem-rules--standalone p { margin: .45rem 0; color: var(--arcade-muted); font-size: .68rem; line-height: 1.9; }
.shelem-example { margin-top: .55rem; padding: .6rem; border-right: 2px solid var(--arcade-lime); border-radius: .45rem; background: rgba(200,255,61,.05); color: var(--arcade-muted); font-size: .67rem; line-height: 1.8; }
.shelem-example b { color: var(--arcade-lime); }
.shelem-rules--standalone { padding: .8rem; }
.shelem-rules--standalone h2 { margin: 0 0 .35rem; color: var(--arcade-cyan); font-size: .78rem; }
.shelem-rules--standalone h2 i { margin-left: .35rem; color: var(--arcade-lime); }
.shelem-rules--standalone p:last-child { margin-bottom: 0; }
@media (min-width: 560px) {
  .shelem-page { gap: 1rem; }
  .shelem-panel { padding: 1.05rem; }
  .shelem-score-card { min-height: 8rem; }
  .shelem-table { min-width: 100%; font-size: .72rem; }
  .shelem-table th, .shelem-table td { padding: .68rem .6rem; }
}
@media (min-width: 440px) {
  .shelem-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelem-field--opponent { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .shelem-table-wrap { display: block; }
  .shelem-round-cards { display: none; }
}
@media (max-width: 359px) {
  .shelem-page { gap: .65rem; }
  .shelem-panel { padding: .7rem; }
  .shelem-scoreboard { gap: .45rem; }
  .shelem-score-card { min-height: 6.5rem; }
  .shelem-type-options { grid-template-columns: minmax(0, 1fr); }
  .shelem-round-card__details, .shelem-round-card__scores { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .shelem-type-card, .shelem-button, .shelem-field input, .shelem-field select { transition: none; } }