/* Ranked preparation stays over the home menu; only the body scrolls. */
#ranked-screen { display:flex; align-items:center; justify-content:center; color:#edf1f6; overflow:hidden; }
#ranked-screen [hidden] { display:none!important; }
#ranked-screen .ranked-dialog { display:flex; flex-direction:column; width:min(850px,100%); max-height:100%; min-height:0; min-width:0; overflow:hidden; border:1px solid #526077; border-top:2px solid #d6c18f; border-radius:18px; background:linear-gradient(135deg,#1b283b,#121d2d 75%); box-shadow:0 28px 90px #0009; }
#ranked-screen .ranked-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 26px 16px; border-bottom:1px solid #304057; flex-shrink:0; }
#ranked-screen .ranked-header h2 { margin:0; color:#edf1f6; font-size:24px; }
#ranked-screen .mid-btn { background:#192638; color:#edf1f6; border:1px solid #35445a; border-radius:8px; min-height:36px; }
#ranked-screen .ranked-close { width:38px; height:38px; padding:0; font-size:25px; flex-shrink:0; }
#ranked-screen .ranked-body { flex:0 1 auto; min-height:0; max-width:none; margin:0; padding:22px 26px; gap:16px; overscroll-behavior:contain; }
#ranked-screen .ranked-workbench { display:grid; grid-template-columns:180px minmax(0,1fr); gap:26px; align-items:start; }
#ranked-screen .ranked-deck-preview { min-width:0; }
#ranked-screen .ranked-deck-preview img { display:block; width:100%; height:auto; object-fit:contain; border-radius:10px; border:1px solid #4a5361; }
#ranked-screen .ranked-controls { display:flex; flex-direction:column; min-width:0; gap:16px; }
#ranked-screen .ranked-format-section { border:0; margin:0; padding:0; min-width:0; }
#ranked-screen .ranked-format-section legend { display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px; box-sizing:border-box; color:#a7b5c9; font-size:12px; padding:0; margin-bottom:7px; }
#ranked-screen .ranked-formats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#ranked-screen .ranked-formats label { display:flex; align-items:center; justify-content:flex-start; gap:9px; padding:10px 13px; margin:0; border:1px solid #35445a; border-radius:8px; background:#0f1928; cursor:pointer; }
#ranked-screen .ranked-formats label:has(:checked) { border-color:#d6c18f; background:#d6c18f0c; }
#ranked-screen .ranked-formats input { accent-color:#d6c18f; }
#ranked-screen .ranked-formats strong { display:block; font-size:17px; }
#ranked-screen .ranked-formats small { display:block; color:#a7b5c9; font-size:12px; }
#ranked-screen .ranked-deck-label { display:block; color:#a7b5c9; font-size:12px; }
#ranked-screen #ranked-deck-info { margin:0; font-size:12px; overflow-wrap:anywhere; }
#ranked-screen .ranked-links { display:flex; gap:8px; }
#ranked-screen .ranked-links button { flex:1; min-width:0; min-height:34px; padding:6px 10px; font-size:12px; background:transparent; }
#ranked-screen .ranked-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 26px; flex-shrink:0; border-top:1px solid #304057; background:#111c2b; }
#ranked-screen .ranked-queue-info { min-width:0; flex:1; max-height:110px; overflow:auto; }
#ranked-screen .ranked-live { margin:0; text-align:left; line-height:1.7; font-size:11px; }
#ranked-screen .ranked-live>span { display:block; }
#ranked-screen #ranked-status { margin:4px 0 0; font-size:11px; color:#d6c18f; line-height:1.5; overflow-wrap:anywhere; }
#ranked-screen #ranked-status:empty { display:none; }
#ranked-screen #btn-ranked-queue, #ranked-screen #btn-ranked-cancel { min-width:180px; min-height:44px; font-size:15px; }
#ranked-screen #btn-ranked-queue { background:#d6c18f; color:#182030; border-color:#d6c18f; font-weight:bold; }
#ranked-screen #btn-ranked-cancel { color:#efa5ae; }
@media(max-width:680px) {
  #ranked-screen { padding:12px 14px calc(var(--legal-h,90px) + 12px); }
  #ranked-screen .ranked-dialog { border-radius:14px; }
  #ranked-screen .ranked-header { padding:14px 16px; }
  #ranked-screen .ranked-header h2 { font-size:21px; }
  #ranked-screen .ranked-body { padding:16px; gap:12px; }
  #ranked-screen .ranked-workbench { grid-template-columns:65px minmax(0,1fr); gap:12px; }
  #ranked-screen .ranked-controls { display:contents; }
  #ranked-screen .ranked-deck-preview { grid-column:1; grid-row:1; align-self:center; }
  #ranked-screen .ranked-deck-section { grid-column:2; grid-row:1; align-self:center; min-width:0; }
  #ranked-screen .ranked-format-section { grid-column:1/3; grid-row:2; }
  #ranked-screen .ranked-formats strong { font-size:15px; }
  #ranked-screen .ranked-formats label { padding:8px 10px; }
  #ranked-screen #ranked-deck-info { font-size:11px; }
  #ranked-screen .ranked-footer { padding:12px 16px; gap:8px; }
  #ranked-screen #btn-ranked-queue, #ranked-screen #btn-ranked-cancel { min-width:120px; padding:8px 10px; font-size:13px; }
  #ranked-screen .ranked-live { font-size:10px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  #ranked-screen { padding:8px 24px calc(var(--legal-h,0px) + 8px); }
  #ranked-screen .ranked-header { padding:8px 16px; }
  #ranked-screen .ranked-header h2 { font-size:19px; }
  #ranked-screen .ranked-close { min-height:32px; height:32px; width:32px; }
  #ranked-screen .ranked-body { padding:10px 16px; gap:6px; }
  #ranked-screen .ranked-workbench { grid-template-columns:90px minmax(0,1fr); gap:16px; }
  #ranked-screen .ranked-deck-preview { grid-column:1; grid-row:1; }
  #ranked-screen .ranked-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  #ranked-screen .ranked-format-section { grid-column:1; grid-row:1; }
  #ranked-screen .ranked-deck-section { grid-column:2; grid-row:1; }
  #ranked-screen .ranked-formats label { padding:5px 8px; gap:5px; }
  #ranked-screen .ranked-formats strong { font-size:14px; }
  #ranked-screen .ranked-formats small { font-size:10px; }
  #ranked-screen .ranked-format-section legend, #ranked-screen .ranked-deck-label { font-size:10px; }
  #ranked-screen .ranked-format-section legend { margin-bottom:4px; }
  #ranked-screen #ranked-deck-info { font-size:10px; margin-top:4px; }
  #ranked-screen .ranked-links button { min-height:32px; padding:4px 6px; font-size:11px; }
  #ranked-screen .ranked-footer { padding:8px 16px; gap:12px; }
  #ranked-screen .ranked-queue-info { max-height:50px; }
  #ranked-screen #btn-ranked-queue, #ranked-screen #btn-ranked-cancel { min-height:36px; min-width:160px; font-size:14px; }
  #ranked-screen .ranked-live { font-size:10px; }
}

/* Format and rank share one choice; the selected card opens both deck stores. */
#ranked-screen #btn-ranked-pick { display:block; width:100%; padding:0; border:0; border-radius:10px; background:#0f1928; color:#d6c18f; overflow:hidden; }
#ranked-screen #btn-ranked-pick img { box-sizing:border-box; border-radius:10px 10px 0 0; }
#ranked-screen .ranked-pick-hint { display:block; padding:7px 2px; font-size:12px; }
#ranked-screen .ranked-format-rank { display:flex; align-items:center; gap:5px; margin-top:6px; font-size:13px; color:#edf1f6; overflow-wrap:anywhere; }
#ranked-screen .ranked-formats label>span { min-width:0; }
#ranked-screen #ranked-deck-store { font-size:12px; color:#d6c18f; overflow-wrap:anywhere; min-width:0; margin:6px 0 0; }
#ranked-screen #btn-ranked-edit { flex-shrink:0; padding:6px 12px; font-size:12px; }
#ranked-screen button:focus-visible, .ranked-deck-picker button:focus-visible { outline:2px solid #d6c18f; outline-offset:2px; }
#ranked-screen button:disabled { opacity:.5; cursor:default; }
#modal-box .ranked-popup { background:#162132; color:#edf1f6; border-top:2px solid #d6c18f; }
#modal-box .ranked-popup .bot-dialog-header { border-color:#304057; background:none; }
#modal-box .ranked-popup .bot-dialog-header h3 { color:#edf1f6; }
#modal-box .ranked-popup .bot-dialog-header p { color:#a7b5c9; margin:5px 0 0; font-size:12px; }
#modal-box .ranked-popup .bot-dialog-close { background:#192638; border-color:#35445a; color:#edf1f6; }
.ranked-picker-content { overflow:auto; min-height:0; padding:16px 20px 20px; overscroll-behavior:contain; }
.ranked-picker-group+.ranked-picker-group { margin-top:20px; }
.ranked-picker-group h4 { margin:0 0 10px; font-size:13px; color:#d6c18f; overflow-wrap:anywhere; }
.ranked-picker-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#modal-box .ranked-picker-option { display:flex; align-items:center; gap:12px; min-width:0; padding:8px; background:#0f1928; color:#edf1f6; border:1px solid #35445a; border-radius:9px; text-align:left; }
#modal-box .ranked-picker-option[aria-pressed="true"] { border-color:#d6c18f; background:#d6c18f12; }
.ranked-picker-option img { width:58px; height:auto; border-radius:5px; flex-shrink:0; }
.ranked-picker-option>span { min-width:0; }
.ranked-picker-option strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.ranked-picker-option small { display:block; color:#a7b5c9; font-size:11px; margin-top:5px; }
.ranked-picker-option .ranked-picker-ban { color:#efa5ae; }
@media(max-width:680px) {
  #ranked-screen .ranked-format-rank { font-size:12px; }
  #ranked-screen .ranked-pick-hint { font-size:10px; padding:5px 0; }
  .ranked-picker-content { padding:12px; }
  .ranked-picker-list { grid-template-columns:1fr; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  #ranked-screen .ranked-pick-hint { font-size:10px; padding:4px 0; }
  #ranked-screen .ranked-format-rank { font-size:11px; margin-top:3px; gap:3px; }
  #ranked-screen .ranked-format-rank .rank-badge { --rb:19px!important; }
  #ranked-screen #btn-ranked-edit { min-height:32px; padding:4px 8px; font-size:11px; }
  #ranked-screen #ranked-deck-store { font-size:10px; }
  .ranked-picker-content { padding:10px 16px; }
  .ranked-picker-option img { width:44px; }
}

#ranked-screen .ranked-deck-summary { border-left:2px solid #d6c18f; padding:2px 0 2px 12px; min-width:0; }
#ranked-screen #ranked-deck-name { margin:6px 0 0; font-size:20px; line-height:1.4; overflow-wrap:anywhere; }
@media(max-width:680px) { #ranked-screen #ranked-deck-name { font-size:16px; } }
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) { #ranked-screen #ranked-deck-name { font-size:15px; margin-top:4px; } }

#ranked-screen .ranked-header { flex-wrap:wrap; gap:10px; }
#ranked-screen .ranked-heading, #ranked-screen .ranked-header-actions { display:flex; align-items:center; gap:8px; }
#ranked-screen .ranked-header-actions { margin-left:auto; min-width:0; }
#ranked-screen #btn-ranked-rules { min-height:26px; width:26px; padding:0; border-radius:50%; font-weight:bold; color:#d6c18f; }
#ranked-screen .ranked-links button { flex:none; white-space:nowrap; }
#ranked-screen .ranked-formats strong { font-size:15px; }
#ranked-screen .ranked-formats small { font-size:11px; line-height:1.6; }
#ranked-screen .ranked-format-rank { font-size:12px; }
#ranked-screen .ranked-format-stats { margin-top:5px; color:#edf1f6; }
#ranked-screen .ranked-deck-section { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; }
#ranked-screen #ranked-deck-info { margin-top:7px; }
#ranked-screen #btn-ranked-edit { background:#d6c18f; border-color:#d6c18f; color:#182030; font-weight:bold; min-height:40px; }
#ranked-screen #btn-ranked-edit:hover:not(:disabled) { background:#e7d4a6; }
.ranked-rules-content { padding:0 24px 24px; overflow:auto; min-height:0; font-size:14px; line-height:1.9; color:#c5cfdd; }
.ranked-rules-content p { margin:0; }
@media(max-width:680px) {
  #ranked-screen .ranked-header { padding:12px; gap:6px; }
  #ranked-screen .ranked-header h2 { font-size:19px; }
  #ranked-screen .ranked-header-actions, #ranked-screen .ranked-links { gap:4px; }
  #ranked-screen .ranked-links button { padding:5px 7px; font-size:11px; min-height:32px; }
  #ranked-screen .ranked-close { width:30px; height:32px; min-height:32px; }
  #ranked-screen .ranked-deck-section { gap:8px; }
  #ranked-screen #btn-ranked-edit { min-height:36px; padding:5px 8px; font-size:11px; }
  #ranked-screen .ranked-formats strong { font-size:14px; }
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  #ranked-screen .ranked-formats small { font-size:10px; }
  #ranked-screen .ranked-deck-section { gap:8px; }
  #ranked-screen #btn-ranked-edit { min-height:34px; }
  .ranked-rules-content { padding:0 16px 14px; font-size:12px; }
}

#ranked-screen .ranked-formats label { align-items:flex-start; }
#ranked-screen .ranked-formats input { margin-top:4px; flex-shrink:0; }
#ranked-screen .ranked-format-stats { white-space:pre-line; word-break:keep-all; }

#ranked-rules-season { padding:10px 12px; margin:0 0 14px; background:#0f1928; border-left:2px solid #d6c18f; color:#d6c18f; }