/* The mode screen (ui/modes.js): the first step after «На смену». A grid of picture cards; «скоро» ones are dim.
   Desktop 4 columns, phone landscape 4 smaller, phone portrait 2 columns. */
#modePick{position:fixed;inset:0;z-index:45;background:var(--bg);color:var(--ink);box-sizing:border-box;overflow:auto;
  padding:calc(18px + var(--safe-t)) calc(20px + var(--safe-r)) calc(18px + var(--safe-b)) calc(20px + var(--safe-l))}
#modePick[hidden]{display:none}
.md-box{position:relative;display:flex;flex-direction:column;gap:clamp(12px,2.4vh,22px);width:min(1280px,100%);margin:0 auto}
.md-head{display:flex;align-items:center;gap:16px}
.md-head .h{margin:0;font-size:clamp(24px,3.6vw,40px);letter-spacing:.06em}
.md-sub{margin:4px 0 0;color:var(--dim)}
.md-back{flex:none;min-height:44px}
.md-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.md-card{position:relative;display:flex;flex-direction:column;padding:0;border:0;border-radius:0;background:rgba(7,5,11,.78);color:var(--ink);text-align:left;cursor:pointer;
  font:inherit;outline:var(--bw) solid var(--line);outline-offset:0;transition:outline-color .12s,transform .08s}
.md-card:hover,.md-card:focus-visible{outline:2px solid var(--cyan)}
.md-card:active{transform:translateY(1px)}
.md-card.last{outline-color:rgba(255,181,71,.6)}
.md-ph{position:relative;display:block;aspect-ratio:21/9;overflow:hidden;background:linear-gradient(135deg,#1a1024,#07050b 60%,#2a0e1c)}
.md-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.md-tx{display:flex;flex-direction:column;gap:6px;padding:10px 12px 14px}
.md-n{font:700 clamp(18px,1.7vw,24px)/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.md-g{font:500 13px/1.35 var(--mono);letter-spacing:.02em;color:var(--ink2)}
.md-tag{position:absolute;right:8px;top:8px;padding:3px 8px;background:rgba(7,5,11,.85);color:var(--amber);border:1px solid rgba(255,181,71,.55)}
.md-tag:empty{display:none}
.md-leave{align-self:flex-start;margin-top:2px;padding:2px 6px;font-size:10px;letter-spacing:.1em;border:1px solid transparent}
.md-leave.free{color:var(--cyan);border-color:rgba(80,220,255,.4)}
.md-leave.team{color:var(--amber);border-color:rgba(255,181,71,.45)}
.md-wait{margin:0;padding:10px 14px;color:var(--amber);border:1px solid rgba(255,181,71,.55);background:rgba(255,181,71,.08);font-size:12px;letter-spacing:.08em;line-height:1.4}
.md-wait[hidden]{display:none}
.md-wait.flash{animation:mdFlash .5s}
@keyframes mdFlash{0%,60%{background:rgba(255,181,71,.38)}100%{background:rgba(255,181,71,.08)}}
.md-card.wait{opacity:.62}
.md-card.wait .md-tag{color:#fff;border-color:var(--amber)}
.md-card.soon{cursor:default;outline-color:rgba(236,230,242,.08)}
.md-card.soon .md-ph img{filter:grayscale(1) brightness(.55)}
.md-card.soon .md-tx{opacity:.5}
.md-card.soon .md-tag{color:var(--dim);border-color:rgba(236,230,242,.25)}
.md-card.soon:hover{outline-color:rgba(236,230,242,.08)}
@media (max-width:1100px){ .md-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px) and (orientation:portrait){
  .md-grid{grid-template-columns:1fr 1fr}
  .md-ph{aspect-ratio:16/9}
  .md-g{font-size:12px}
  .md-leave{font-size:9px;letter-spacing:.06em}
}
@media (orientation:landscape) and (max-height:520px){
  #modePick{padding-top:calc(8px + var(--safe-t));padding-bottom:calc(8px + var(--safe-b))}
  .md-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .md-ph{aspect-ratio:21/9}
  .md-tx{padding:6px 8px 8px;gap:3px}
  .md-n{font-size:14px}.md-g{font-size:11px}
  .md-head .h{font-size:22px}.md-sub{display:none}
}