/* One quick launcher for the complete Brain Labs catalogue. */
#preview-modal {
  padding:20px !important;
  background:#14213c99;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#preview-modal > .preview-modal-card {
  display:block;
  width:min(800px,100%);
  max-width:800px !important;
  max-height:calc(100dvh - 40px) !important;
  height:auto;
  position:relative;
  overflow:auto !important;
  border:1px solid #ffffffcc;
  border-radius:25px;
  background:#fff;
  box-shadow:0 24px 80px #0c174d55,inset 0 0 0 1px #ffffffb3;
  color:#20395d;
  font-family:'Nunito',sans-serif;
}
#preview-modal > .preview-modal-card::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  z-index:3;
  height:8px;
  background:linear-gradient(90deg,#8b51f5 0 9%,#22b8e8 9% 27%,#8b51f5 27% 41%,#f758c1 41% 59%,#ff9344 59% 73%,#ffce3e 73% 91%,#80cb51 91%);
}
#preview-modal .preview-modal-close {
  position:absolute;
  z-index:4;
  right:13px;
  top:15px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #fff;
  border-radius:50%;
  background:#fffffff0;
  box-shadow:0 4px 12px #6987b02b;
  color:#647c9f;
  cursor:pointer;
}
#preview-modal .preview-modal-close span { font:700 30px/1 'Nunito',sans-serif; }
#preview-modal .preview-modal-close:hover { background:#f0f5ff; color:#29466f; }
#preview-modal .preview-launch-main {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-rows:auto 1fr;
  align-items:center;
  gap:24px 22px;
  min-height:300px;
  padding:30px 28px 25px;
  background:radial-gradient(ellipse at 2% 90%,#e3f4cb99,transparent 30%),radial-gradient(ellipse at 97% 10%,#caf3ff99,transparent 46%),linear-gradient(140deg,#f6f7ff,#edf4ff 48%,#fffaf2);
}
#preview-modal .preview-modal-header {
  grid-column:1;
  grid-row:1;
  min-width:0;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:0;
  border:0;
  background:none;
}
#preview-modal .preview-modal-emoji {
  display:grid;
  place-items:center;
  width:64px;
  height:70px;
  margin:0;
  border:1px solid #fff;
  border-radius:18px;
  background:#ffffffed;
  box-shadow:0 6px 14px #7994c12e;
  font-size:40px;
  line-height:1;
}
#preview-modal .preview-modal-identity { min-width:0; }
#preview-modal .modal-title {
  margin:0 0 9px;
  color:#20395d;
  font:900 28px/1.12 'Nunito',sans-serif;
  letter-spacing:-.5px;
  overflow-wrap:anywhere;
}
#preview-modal .modal-badges { display:flex; margin:0; }
#preview-modal .time-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:4px 11px;
  border:1px solid #dbe4fb;
  border-radius:20px;
  background:#f7f9ffcc;
  color:#526887;
  font:800 13px/1.2 'Nunito',sans-serif;
}
#preview-modal .preview-time-icon { color:#7489ab; font-size:17px; line-height:1; }
#preview-modal .preview-launch-copy { grid-column:1; grid-row:2; align-self:center; min-width:0; }
#preview-modal .preview-launch-copy h3 { margin:0 0 12px; color:#20395d; font:900 34px/1.1 'Nunito',sans-serif; letter-spacing:-.6px; }
#preview-modal .preview-launch-copy h3 span { display:block; color:#176ee7; }
#preview-modal .preview-launch-copy p { margin:0; max-width:320px; color:#61799a; font:700 14px/1.5 'Nunito',sans-serif; }
#preview-modal .preview-cover-frame {
  grid-column:2;
  grid-row:1 / 3;
  min-width:0;
  margin:34px 0 0;
  border:8px solid #fff;
  border-radius:24px;
  overflow:hidden;
  background:#e9f0ff;
  box-shadow:0 8px 18px #54744830;
  transform:rotate(2deg);
}
#preview-modal .preview-cover-frame picture { display:block; }
#preview-modal .preview-cover-frame img { display:block; width:100%; height:auto; max-height:236px; object-fit:contain; }
#preview-modal .preview-cover-frame[hidden] { display:none; }
#preview-modal .preview-launch-main:has(.preview-cover-frame[hidden]) { grid-template-columns:1fr; min-height:0; }
#preview-modal .preview-modal-footer { padding:12px 20px 16px; background:linear-gradient(#ffffffd9,#fff7f3); }
#preview-modal .preview-level-actions { width:100%; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px; }
#preview-modal .preview-level-actions:has(.game-level-btn:only-child) { grid-template-columns:1fr !important; }
#preview-modal .preview-launch-button {
  --launch-color:#009c70;
  position:relative;
  min-width:0;
  min-height:72px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #ffffff55;
  border-bottom:4px solid #008960;
  border-radius:22px;
  background:radial-gradient(circle at 95% 100%,#ffffff20 0 24%,transparent 25%),linear-gradient(135deg,#0ac995,#00a474);
  box-shadow:0 6px 14px #00a77936,inset 0 2px 3px #ffffff3b;
  color:#fff;
  font-family:'Nunito',sans-serif;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
#preview-modal .game-level-medium { --launch-color:#c87000; border-bottom-color:#e18b00; background:radial-gradient(circle at 95% 100%,#fff3 0 24%,transparent 25%),linear-gradient(135deg,#ffc82f,#ffa000); box-shadow:0 6px 14px #f0a42638,inset 0 2px 3px #ffffff47; }
#preview-modal .game-level-hard { --launch-color:#d72646; border-bottom-color:#d62647; background:radial-gradient(circle at 95% 100%,#ffffff20 0 24%,transparent 25%),linear-gradient(135deg,#ff657b,#f23854); box-shadow:0 6px 14px #e6416436,inset 0 2px 3px #ffffff42; }
#preview-modal .preview-level-icon { display:grid; flex:0 0 36px; place-items:center; width:36px; height:38px; border-radius:50%; background:#005b4126; font-size:26px; line-height:1; }
#preview-modal .game-level-medium .preview-level-icon { background:#d182001c; }
#preview-modal .game-level-hard .preview-level-icon { background:#bd224e24; }
#preview-modal .preview-level-copy { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; text-align:left; }
#preview-modal .preview-level-copy strong { font:900 20px/1.12 'Nunito',sans-serif; }
#preview-modal .preview-level-copy small { padding:0; background:none; color:#fff; font:700 12px/1.15 'Nunito',sans-serif; }
#preview-modal .preview-level-copy .preview-level-best { font-size:11px; }
#preview-modal .preview-level-copy:has(.preview-level-best) > small:not(.preview-level-best) { display:none; }
#preview-modal .preview-level-arrow { display:grid; flex:0 0 30px; place-items:center; width:30px; height:30px; border-radius:50%; background:#ffffffe0; color:var(--launch-color); font:900 32px/1 'Nunito',sans-serif; }
#preview-modal .preview-launch-button:only-child { width:min(240px,100%); justify-self:center; }
#preview-modal .preview-launch-button:hover { transform:translateY(-2px); filter:brightness(1.03); }
#preview-modal :is(.preview-launch-button,.preview-modal-close):focus-visible { outline:3px solid #4754c6; outline-offset:3px; }
@media (max-width:680px) {
  #preview-modal { padding:10px !important; }
  #preview-modal > .preview-modal-card { max-height:calc(100dvh - 20px) !important; border-radius:21px; }
  #preview-modal .preview-modal-close { top:12px; right:10px; width:34px; height:34px; }
  #preview-modal .preview-launch-main { grid-template-columns:1fr; gap:15px; min-height:0; padding:24px 18px 19px; }
  #preview-modal .preview-modal-header { grid-template-columns:50px minmax(0,1fr); gap:12px; padding-right:28px; }
  #preview-modal .preview-modal-emoji { width:50px; height:56px; border-radius:14px; font-size:32px; }
  #preview-modal .modal-title { font-size:22px; margin-bottom:7px; }
  #preview-modal .time-chip { min-height:25px; padding:4px 9px; font-size:12px; }
  #preview-modal .preview-cover-frame { display:none; }
  #preview-modal .preview-launch-copy h3 { font-size:23px; margin-bottom:7px; letter-spacing:-.3px; }
  #preview-modal .preview-launch-copy h3 span { display:inline; }
  #preview-modal .preview-launch-copy p { max-width:none; font-size:13px; line-height:1.4; }
  #preview-modal .preview-modal-footer { padding:12px 13px 17px; }
  #preview-modal .preview-level-actions { gap:8px; }
  #preview-modal .preview-launch-button { flex-direction:column; gap:3px; min-height:84px; padding:8px 4px; border-radius:17px; }
  #preview-modal .preview-level-icon { flex:0 0 26px; width:30px; height:26px; font-size:23px; background:none; }
  #preview-modal .preview-level-copy { flex:0 1 auto; gap:3px; text-align:center; }
  #preview-modal .preview-level-copy strong { font-size:15px; }
  #preview-modal .preview-level-copy small { font-size:11px; }
  #preview-modal .preview-level-arrow { display:none; }
  #preview-modal .preview-launch-button:only-child { width:min(220px,100%); flex-direction:row; gap:12px; min-height:64px; padding:10px 16px; }
  #preview-modal .preview-launch-button:only-child .preview-level-copy { flex:1; text-align:left; }
  #preview-modal .preview-launch-button:only-child .preview-level-copy strong { font-size:20px; }
  #preview-modal .preview-launch-button:only-child .preview-level-arrow { display:grid; }
}
@media (max-width:360px) {
  #preview-modal .preview-launch-main { padding-inline:14px; }
  #preview-modal .preview-modal-header { grid-template-columns:44px minmax(0,1fr); gap:10px; }
  #preview-modal .preview-modal-emoji { width:44px; height:50px; font-size:29px; }
  #preview-modal .modal-title { font-size:20px; }
  #preview-modal .preview-launch-copy h3 { font-size:21px; }
  #preview-modal .preview-level-copy strong { font-size:14px; }
  #preview-modal .preview-level-copy small { font-size:10px; }
}
@media (max-height:520px) {
  #preview-modal { padding:10px !important; }
  #preview-modal > .preview-modal-card { max-height:calc(100dvh - 20px) !important; }
  #preview-modal .preview-launch-main { min-height:0; padding:20px 20px 15px; gap:13px 20px; }
  #preview-modal .preview-modal-header { grid-template-columns:44px minmax(0,1fr); gap:11px; }
  #preview-modal .preview-modal-emoji { width:44px; height:48px; font-size:30px; }
  #preview-modal .modal-title { font-size:21px; margin-bottom:5px; }
  #preview-modal .time-chip { min-height:24px; font-size:12px; }
  #preview-modal .preview-launch-copy h3 { font-size:24px; margin-bottom:7px; }
  #preview-modal .preview-launch-copy p { font-size:12px; line-height:1.35; }
  #preview-modal .preview-cover-frame { margin-top:24px; max-width:245px; justify-self:center; }
  #preview-modal .preview-cover-frame img { max-height:130px; }
  #preview-modal .preview-modal-footer { padding:10px 16px 14px; }
  #preview-modal .preview-launch-button { min-height:60px; padding:8px 10px; gap:8px; }
  #preview-modal .preview-level-icon { width:28px; height:30px; flex-basis:28px; font-size:23px; }
  #preview-modal .preview-level-copy strong { font-size:18px; }
  #preview-modal .preview-level-copy small { font-size:11px; }
}
@media (max-height:520px) and (max-width:680px) {
  #preview-modal .preview-launch-main { padding:21px 15px 12px; gap:10px; }
  #preview-modal .preview-launch-copy h3 { font-size:21px; }
  #preview-modal .preview-launch-button { min-height:60px; flex-direction:row; }
  #preview-modal .preview-level-icon { display:none; }
  #preview-modal .preview-level-copy strong { font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  #preview-modal .preview-launch-button { transition:none; }
}