.pickem-page { padding-top: 2rem; padding-bottom: 3rem; }
.pickem-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; }
.pickem-heading h1 { font-family: var(--font-heading); font-size: clamp(1.6rem,4vw,2.2rem); margin: .5rem 0; }
.pickem-heading p, .pickem-week-control label { color: var(--text-muted); font-size: .9rem; }
.pickem-week-control label { display: block; margin-bottom: .4rem; }
.pickem-week-control select { min-width: 230px; }
.pickem-week-banner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .7rem; padding: 0.8rem 1.1rem; background: #0b1c29; border: 1px solid #1e3a46; border-radius: 10px; margin: 1.2rem 0 .5rem; font-size: .8rem; color: #aec8d5; }
.pickem-week-banner i { color: var(--cyan-primary); margin-right: .3rem; }
.pickem-feedback { min-height: 1.2rem; margin-bottom: .6rem; font-size: .85rem; color: var(--cyan-primary); }

/* Tips Bar (reorganized at the top) */
.pickem-layout { display: flex; flex-direction: column; gap: 1.2rem; }
.pickem-tips-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.pickem-tip-card { border: 1px solid var(--border-subtle); background: var(--bg-card); border-radius: 10px; padding: 0.75rem 0.95rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pickem-tip-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--cyan-primary); margin-bottom: 0.25rem; }
.pickem-tip-title strong { color: #d6e4ed; }
.pickem-tip-card p { color: var(--text-muted); font-size: 0.77rem; line-height: 1.45; margin: 0; }
.pickem-tip-card strong { color: #d6e4ed; }
.pickem-tip-card a { display: inline-block; font-size: 0.77rem; margin-top: 0.25rem; color: var(--cyan-primary); }
#pickem-modal-login { font-size: .8rem; color: var(--cyan-primary); }

/* Five categories per row on desktop, with fewer columns on smaller screens. */
.pickem-categories { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.pickem-card { border: 1px solid #19a7b6; border-radius: 11px; background: linear-gradient(160deg,#121c29,#080e17); box-shadow: 0 0 14px #00e5ff10; padding: 0.95rem; display: flex; flex-direction: column; min-width: 0; transition: transform 0.2s ease, border-color 0.2s ease; }
.pickem-card:hover { border-color: var(--cyan-primary); transform: translateY(-2px); }
.pickem-card-art { height: 100px; border-radius: 6px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 110%,#14596799,transparent 65%),linear-gradient(135deg,#1d2837,#0c101a); border: 1px solid #334155; }
.pickem-card-art::before, .pickem-card-art::after { content:''; position:absolute; border: 1px solid #68819550; width: 90px; height: 90px; transform:rotate(45deg); }
.pickem-card-art::after { width: 60px; height: 60px; border-color: #5bc9db30; }
.pickem-question-mark { font: 800 2.2rem var(--font-heading); color: #b9dae0; text-shadow: 0 0 20px #00eaff55; z-index: 1; }
.pickem-event { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.2rem 0.35rem; background: #030810d0; text-align: center; font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 800; z-index: 2; color: var(--cyan-primary); }
.pickem-card h2 { font-size: 0.95rem; text-align: center; font-weight: 650; line-height: 1.35; margin: 0.65rem 0.2rem 0.3rem; min-height: 4.05em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pickem-card-description { font-size: 0.78rem; color: var(--text-muted); text-align: center; line-height: 1.4; margin-bottom: 0.6rem; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pickem-reward { align-self: center; border: 1px solid var(--gold-hextech); color: #f6d678; padding: 0.2rem 0.55rem; border-radius: 20px; font-size: 0.7rem; margin: auto 0 0.65rem; white-space: nowrap; }
.pickem-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 0.75rem; background: var(--cyan-primary); color: #04141e; border: 1px solid var(--cyan-primary); font: 750 0.8rem var(--font-body); border-radius: 6px; cursor: pointer; width: 100%; }
.pickem-primary:hover { box-shadow: 0 0 16px #00efff35; }
.pickem-page button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.pickem-card-answer { text-align: center; font-size: 0.72rem; margin: 0.45rem 0 0; color: #b5c9db; word-break: break-word; }
.pickem-card-result { border-top: 1px solid #2d4053; margin-top: 0.5rem; padding-top: 0.5rem; text-align: center; font-size: 0.74rem; color: #dbecf1; }
.pickem-coming { border: 1px dashed #2c3c52; border-radius: 11px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem 1rem; color: #91a1b6; }
.pickem-coming i { font-size: 1.8rem; color: #466678; margin-bottom: 0.6rem; }
.pickem-coming h2 { font-size: .88rem; color: #bbc7d5; margin-bottom: .4rem; }
.pickem-coming p { font-size: .75rem; line-height: 1.6; }

/* Modal Dialog */
.pickem-dialog { margin: auto; width: min(650px,94vw); max-height: 90vh; padding: 1.5rem; border: 1px solid #3e5868; border-radius: 12px; background: #0e1623; color: var(--text-main); }
.pickem-dialog::backdrop { background: #02050cda; }
.pickem-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .7rem; }
.pickem-dialog-heading h2 { font-size: 1.15rem; line-height: 1.6; margin-top: .4rem; }
.pickem-close { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: .1rem .3rem; font-size: 1.3rem; }
#pickem-dialog-description { color: var(--text-muted); font-size: .85rem; margin-bottom: 1.25rem; }
.pickem-dialog label { display: block; font-size: .85rem; margin: 1rem 0 .5rem; }
.pickem-dialog label span { color: var(--text-muted); }
.pickem-dialog select, .pickem-dialog input { width: 100%; }
.pickem-dialog select { padding: 1rem; font-size: 1rem; border-color: #426875; }
.pickem-champion-picker { position: relative; }
.pickem-champion-picker input { padding: 1rem; font-size: 1rem; border-color: #426875; }
.pickem-champion-options { max-height: 220px; overflow-y: auto; margin-top: .35rem; border: 1px solid #426875; border-radius: 6px; background: #080e17; overscroll-behavior: contain; }
.pickem-champion-option { display: block; padding: .65rem .9rem; cursor: pointer; font-size: .95rem; }
.pickem-champion-option:hover, .pickem-champion-option.is-active { background: #143541; color: var(--cyan-primary); }
.pickem-champion-option[aria-selected="true"] { font-weight: 750; }
.pickem-champion-help { display: block; font-size: .75rem; color: var(--text-muted); margin: .4rem 0 0; }
.pickem-champion-empty { padding: .8rem .9rem; font-size: .85rem; color: var(--text-muted); }
.pickem-page input:focus-visible { outline: 2px solid var(--cyan-primary); outline-offset: 3px; }
.pickem-answer-summary { border: 1px solid #594e2a; background: #292616; border-radius: 8px; color: #f3d58a; padding: .85rem; font-size: .82rem; margin-top: 1.2rem; }
#pickem-modal-status { font-size: .8rem; color: var(--text-muted); margin-top: .8rem; }
.pickem-dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #2c3c4d; }
.pickem-dialog-actions span { font-size: .72rem; color: var(--text-muted); max-width: 250px; }
.pickem-error { font-size: .8rem; color: #ffa9b2; margin-top: .8rem; }

/* Results */
.pickem-results { margin-top: 2rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); padding: 1.25rem; }
.pickem-results h2 { font-size: 1.1rem; }
.pickem-results > p { color: var(--text-muted); font-size: .8rem; margin: .4rem 0 1rem; }
.pickem-ballot-summary, .pickem-result-entry { display: grid; grid-template-columns: minmax(120px,1fr) minmax(100px,1fr) minmax(90px,.6fr); align-items: center; gap: .7rem; padding: .9rem 0; border-bottom: 1px solid #283548; font-size: .85rem; }
.pickem-result-entry:last-child { border: 0; }
.pickem-result-entry small { display: block; color: var(--text-muted); font-size: .72rem; }
.pickem-win { color: var(--win-green); } .pickem-wait { color: var(--gold-hextech); }
.pickem-page [hidden] { display: none !important; }
.pickem-page button:focus-visible, .pickem-page select:focus-visible { outline: 2px solid var(--cyan-primary); outline-offset: 3px; }

/* Media Queries */
@media(max-width:1200px) { .pickem-categories { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media(max-width:1000px) { .pickem-categories { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media(max-width:760px) { .pickem-categories { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:950px) {
  .pickem-tips-bar { grid-template-columns: 1fr; gap: 0.75rem; }
}
@media(max-width:600px) {
  .pickem-categories { grid-template-columns: minmax(0,1fr); }
  .pickem-page { padding-top: 1.5rem; }
  .pickem-week-control { width: 100%; }
  .pickem-week-control select { width:100%; min-width:0; }
  .pickem-coming { min-height:130px; }
  .pickem-dialog { padding:1.15rem; }
  .pickem-dialog-actions { flex-direction:column; align-items:stretch; }
  .pickem-dialog-actions span { max-width:none; }
  .pickem-result-entry { grid-template-columns: minmax(0,1fr); }
}

.pickem-ballot + .pickem-ballot { margin-top: 1.25rem; }
.pickem-duel-rule { color: var(--cyan-primary); font-size: .78rem; line-height: 1.5; margin: .3rem 0 .7rem; }
.pickem-ballot-summary { padding: .9rem; background: #0b1c29; border-radius: 8px; }
.pickem-ballot-summary small { display: block; color: var(--text-muted); }
@media(max-width:600px) { .pickem-ballot-summary { grid-template-columns: minmax(0,1fr); } }