/* Homework Organizer V3 — URL game hub and in-app browser. */
body.arcade-mode .web-games-hub {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr);
  gap: 16px;
  margin: 20px 0 22px;
}
body.arcade-mode .web-game-panel {
  padding: 23px;
  border-radius: 19px;
  border: 1px solid rgba(140, 158, 225, .24);
  background: linear-gradient(145deg, rgba(20, 30, 63, .97), rgba(8, 16, 35, .95));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  min-width: 0;
}
body.arcade-mode .web-game-panel .web-game-kicker {
  display: block;
  color: #75d7fb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
body.arcade-mode .web-game-panel h2 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: clamp(19px, 2.8vw, 26px);
}
body.arcade-mode .web-game-panel p {
  color: #a9bad4;
  font-size: 12px;
  line-height: 1.55;
}
body.arcade-mode .web-game-form {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}
body.arcade-mode .web-game-form label { display: grid; gap: 5px; font-size: 11px; color: #d2ddf3; font-weight: 700; }
body.arcade-mode .web-game-form input,
body.arcade-mode .web-browser-address {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(140, 160, 228, .28);
  color: #eef4ff;
  background: #0a1431;
  border-radius: 10px;
  padding: 12px 13px;
  font-size: 13px; font-weight: 500; font-family: inherit;
}
body.arcade-mode .web-game-form input::placeholder,
body.arcade-mode .web-browser-address::placeholder { color: #7c8daa; }
body.arcade-mode .web-game-form-actions { display: flex; gap: 9px; flex-wrap: wrap; }
body.arcade-mode .web-game-form-actions button,
body.arcade-mode .web-game-link-actions button,
body.arcade-mode .web-browser-toolbar button {
  border-radius: 10px;
  border: 1px solid rgba(136, 155, 218, .3);
  background: #1e2e59;
  padding: 11px 14px;
  color: #eaf3ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  transition: filter .15s ease, transform .15s ease;
}
body.arcade-mode .web-game-form-actions button:hover,
body.arcade-mode .web-game-link-actions button:hover,
body.arcade-mode .web-browser-toolbar button:hover { filter: brightness(1.25); }
body.arcade-mode .web-game-form-actions button:active,
body.arcade-mode .web-game-link-actions button:active,
body.arcade-mode .web-browser-toolbar button:active { transform: scale(.98); }
body.arcade-mode .web-game-form-actions button:first-child,
body.arcade-mode .web-game-link-actions button:first-child,
body.arcade-mode .web-browser-toolbar button[type=submit] {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(115deg, #6357ff, #376fe8);
}
body.arcade-mode .web-game-message { min-height: 19px; margin: 9px 0 0; color: #9ce4bd !important; font-size: 11px; }
body.arcade-mode .web-game-message.is-error { color: #ffacb9 !important; }
body.arcade-mode .web-game-saved { max-height: 345px; overflow-y: auto; display: grid; gap: 8px; }
body.arcade-mode .web-game-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border-radius: 13px;
  border: 1px solid rgba(133, 160, 227, .16);
  background: rgba(18, 34, 70, .65);
}
body.arcade-mode .web-game-link-icon { font-size: 23px; }
body.arcade-mode .web-game-link-details { flex: 1; min-width: 0; display: grid; gap: 3px; }
body.arcade-mode .web-game-link-details strong,
body.arcade-mode .web-game-link-details small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.arcade-mode .web-game-link-details strong { color: #f7f9ff; font-size: 12px; }
body.arcade-mode .web-game-link-details small { color: #9eacc6; font-size: 10px; }
body.arcade-mode .web-game-link-actions { display: flex; gap: 5px; }
body.arcade-mode .web-game-link-actions button { padding: 8px; font-size: 10px; }
body.arcade-mode .web-game-empty { padding: 18px 10px; text-align: center; border: 1px dashed #405174; border-radius: 12px; }
body.arcade-mode .web-browser {
  overflow: hidden;
  border: 1px solid #34476e;
  border-radius: 15px;
  background: #0c152d;
}
body.arcade-mode .web-browser-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; background: #111f3f; border-bottom: 1px solid #334269; }
body.arcade-mode .web-browser-toolbar .web-browser-address { flex: 1 1 280px; width: auto; background: #071125; }
body.arcade-mode .web-browser-toolbar button { padding: 11px 12px; }
body.arcade-mode .web-browser-toolbar button:disabled { opacity: .38; cursor: default; filter: none; }
body.arcade-mode .web-browser-notice { padding: 10px 15px; color: #a5d4f8; background: #101b35; font-size: 11px; }
body.arcade-mode .web-browser-viewport { min-height: clamp(320px, 60vh, 760px); height: clamp(320px, 65vh, 760px); background: #081225; display: flex; }
body.arcade-mode .web-browser-frame { flex: 1; width: 100%; height: 100%; border: 0; background: white; }
body.arcade-mode .web-browser-placeholder { margin: auto; padding: 24px; text-align: center; max-width: 410px; color: #fff; }
body.arcade-mode .web-browser-empty-icon { display: block; font-size: 48px; margin-bottom: 15px; }
body.arcade-mode .web-browser-placeholder strong { font-size: 20px; }
body.arcade-mode .web-browser-placeholder p { color: #9fb1d0; line-height: 1.55; font-size: 13px; }
body.arcade-mode .web-browser-tip { padding: 8px 14px 13px; margin: 0; background: #101b35; color: #92a4c2; font-size: 11px; line-height: 1.5; }
body.arcade-mode .game-stage:fullscreen .web-browser-viewport,
body.arcade-mode .game-stage.pseudo-fullscreen .web-browser-viewport { height: calc(100dvh - 180px); max-height: none; }
@media (max-width: 940px) {
  body.arcade-mode .web-games-hub { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.arcade-mode .web-game-panel { padding: 16px; }
  body.arcade-mode .web-browser-toolbar { gap: 6px; }
  body.arcade-mode .web-browser-toolbar button { padding: 10px; font-size: 11px; }
  body.arcade-mode .web-game-link { flex-wrap: wrap; }
  body.arcade-mode .web-game-link-actions { width: 100%; justify-content: flex-end; }
  body.arcade-mode .web-browser-viewport { height: 55dvh; min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  body.arcade-mode .web-game-form-actions button,
  body.arcade-mode .web-game-link-actions button,
  body.arcade-mode .web-browser-toolbar button { transition: none; }
}