/* Eight illustrated choices, with the game still visible behind the hub. */
#panel #modeList .modePicker { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:14px 0 4px; }
#panel #modeList .modePicker button {
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:90px auto 1fr;
  align-items:center; justify-items:center; align-content:start;
  min-width:0; min-height:164px!important; padding:12px 9px!important; gap:5px;
  text-align:center; border-radius:12px;
  border:1px solid #526577!important; border-bottom:3px solid var(--mode-accent)!important;
  background:linear-gradient(160deg,#132837ed,#0b1723f5)!important;
  transition:transform .16s ease,border-color .16s ease;
}
#panel #modeList .modePicker button::before {
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:120px;height:120px;top:-20px;left:calc(50% - 60px);border-radius:50%;
  background:radial-gradient(circle,var(--mode-accent),transparent 68%);opacity:.13;
}
#panel #modeList .modePicker button[aria-pressed=true] {border-color:var(--mode-accent)!important; background:linear-gradient(160deg,#204041f2,#101f2bf2)!important;}
#panel #modeList .modePicker button:focus-visible {outline:3px solid #ffe392;outline-offset:3px;}
#panel #modeList .modePicker button:active {transform:scale(.97);}
#panel #modeList .modePicker .modeGlyph {
  grid-column:1;grid-row:1;display:grid;place-items:center;width:90px;height:90px;
  color:var(--mode-accent);font-size:48px;line-height:1;pointer-events:none;
}
#modeList .modeGlyph img {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
#panel #modeList .modePicker b {grid-column:1;grid-row:2;font-size:24px!important;line-height:1.05;font-weight:400;color:#f1f5ed;}
#panel #modeList .modePicker small {grid-column:1;grid-row:3;align-self:start;font-size:15px!important;line-height:1.1;color:#b7c9d4;max-width:100%;}
#panel #modeHero.modeArtwork {width:128px;height:128px;object-fit:contain;margin:0 auto 4px;}
#panel #modeDetail {position:relative;isolation:isolate;}
#panel #modeDetail:has(.modeArtwork)::before {content:'';position:absolute;z-index:-1;pointer-events:none;top:-14px;left:calc(50% - 90px);width:180px;height:160px;background:radial-gradient(ellipse,var(--mode-accent),transparent 65%);opacity:.14;}
#panel.modeArt81 .modeGlyph img,#panel .modeArtwork {animation:modeFloat81 4.8s ease-in-out infinite;animation-delay:var(--mode-delay,0s);animation-play-state:paused;}
#panel.modeMotion81 .modeGlyph img,#panel.modeMotion81 .modeArtwork {animation-play-state:running;}
@keyframes modeFloat81 {0%,100%{transform:translateY(2px) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@media(hover:hover) and (pointer:fine) {
  #panel #modeList .modePicker button:hover {transform:translateY(-3px);border-color:var(--mode-accent)!important;}
  #panel #modeList .modePicker button:hover::before {opacity:.22;}
}
@media(max-width:700px) {
  #panel #modeList .modePicker {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px;}
  #panel #modeList .modePicker button {min-height:127px!important;grid-template-rows:64px auto 1fr;padding:8px 6px!important;gap:3px;}
  #panel #modeList .modePicker .modeGlyph {width:68px;height:68px;}
  #panel #modeList .modePicker b {font-size:22px!important;}
  #panel #modeList .modePicker small {font-size:14px!important;}
  #panel #modeHero.modeArtwork {width:104px;height:104px;}
}
@media(max-height:500px) and (min-width:600px) {
  #panel #modeList .modePicker {grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:4px;}
  #panel #modeList .modePicker button {min-height:100px!important;grid-template-rows:47px auto 1fr;padding:5px!important;gap:2px;}
  #panel #modeList .modePicker .modeGlyph {width:50px;height:50px;}
  #panel #modeList .modePicker b {font-size:20px!important;}
  #panel #modeList .modePicker small {font-size:13px!important;}
  #panel #modeHero.modeArtwork {width:64px;height:64px;}
}
@media(prefers-reduced-motion:reduce) {
  #panel.modeArt81 .modeGlyph img,#panel .modeArtwork {animation:none!important;}
  #panel #modeList .modePicker button {transition:none;}
}