/* V19 shared enhancements: drawer menu, loaders, smoother transitions, and performance topic polish. */

:root{
  --drawer-bg:#fffdf7;
  --drawer-line:#d7d4c6;
  --drawer-ink:#163229;
  --drawer-muted:#617166;
  --drawer-accent:#1e5a4c;
  --drawer-accent-2:#c9603d;
}

.cloud-auth-bar{min-height:0}
.cloud-auth-bar.menu-mounted{display:none!important}

.site-hamburger{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:14px;border:1px solid #d8d4c5;
  background:#fffdf7;color:#17362c;cursor:pointer;box-shadow:0 8px 20px #17382d10;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease;
}
.site-hamburger:hover{transform:translateY(-1px);box-shadow:0 10px 26px #17382d18;background:#ffffff}
.site-hamburger svg{width:20px;height:20px;display:block}
.site-menu-anchor{display:flex;align-items:center;gap:10px}
.games-header-row .site-menu-anchor{margin-inline-start:0;margin-inline-end:0}
@media (max-width:680px){
  .site-hamburger{width:42px;height:42px;border-radius:13px}
}

.site-menu-backdrop[hidden], .guest-warning-modal[hidden], .transition-loader[hidden]{display:none!important}
.site-menu-backdrop{
  position:fixed;inset:0;z-index:120;background:#10241f66;backdrop-filter:blur(4px);
}
.site-menu-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(380px,90vw);z-index:121;
  background:var(--drawer-bg);border-left:1px solid var(--drawer-line);box-shadow:-18px 0 48px #12241f24;
  padding:18px 16px 24px;overflow:auto;direction:rtl;color:var(--drawer-ink);
}
.site-menu-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.site-menu-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}
.site-menu-title img{width:42px;height:24px;object-fit:contain}
.site-menu-close{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid #d8d4c5;background:#fff;color:#17362c;cursor:pointer}
.site-menu-close:hover{background:#f8f4ea}
.site-menu-section{border:1px solid #dfdbc9;background:#fff;border-radius:18px;padding:14px 13px;margin-bottom:12px}
.site-menu-section h3{margin:0 0 10px;font:800 14px/1.4 RubikLocal,Rubik,system-ui,sans-serif;color:#244f42}
.site-menu-links{display:grid;gap:8px}
.site-menu-link, .site-menu-action, .site-menu-sound, .drawer-xp-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 14px;
  border-radius:14px;border:1px solid #ddd7c6;background:#fffdf9;color:#17362c;text-decoration:none;
  font:700 14px/1.5 RubikLocal,Rubik,system-ui,sans-serif;cursor:pointer;
}
.site-menu-link:hover, .site-menu-action:hover, .site-menu-sound:hover, .drawer-xp-card:hover{background:#fff;box-shadow:0 8px 18px #17382d0d}
.site-menu-link .menu-kicker, .site-menu-action .menu-kicker{display:block;font-size:11px;color:#6d7c72;font-weight:600}
.site-menu-link .menu-main, .site-menu-action .menu-main{display:block}
.site-menu-link .menu-icon, .site-menu-action .menu-icon, .site-menu-sound .menu-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#eef4f1;color:#1d5a4a;font-size:16px;flex:none}
.site-menu-sound.is-muted .menu-icon{background:#f2ede5;color:#8d7b5a}
.site-menu-sound .menu-sound-copy{flex:1;min-width:0}
.site-menu-sound small, .drawer-xp-card small{display:block;color:#6d7c72;font-weight:600}
.site-menu-account-slot{display:grid;gap:10px}
.site-menu-account-slot > *{max-width:100%}
.site-menu-account-slot :is(button,a){width:100%}
.drawer-xp-card{align-items:flex-start;flex-direction:column}
.drawer-xp-card strong{font-size:1rem}
.drawer-xp-progress{width:100%;height:10px;border-radius:999px;background:#edf2ea;overflow:hidden;border:1px solid #dde5dc}
.drawer-xp-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2d7a66,#61a989);width:0}

/* Improved floating gamer launcher */
.merkaz-games-launcher{position:fixed;left:18px;bottom:18px;z-index:72;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#12241f;color:#fff!important;border:1px solid #ffffff20;box-shadow:0 14px 34px #12241f42;text-decoration:none;font-weight:800;direction:rtl;transition:transform .24s ease,box-shadow .24s ease}
.merkaz-games-launcher:hover{transform:translateY(-2px);box-shadow:0 18px 40px #12241f58}
.merkaz-games-launcher .game-dot{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:#c9603d;font-size:.95rem;flex:none}
.merkaz-games-launcher .new-tag{font-size:.62rem;padding:3px 7px;border-radius:999px;background:#eef4f1;color:#234f5d}
.merkaz-launcher-close{position:fixed;left:12px;bottom:74px;z-index:73;width:28px;height:28px;border-radius:999px;border:1px solid #d8d4c5;background:#fff;color:#15382d;box-shadow:0 8px 18px #12241f18;cursor:pointer}
.merkaz-launcher-close:hover{background:#f8f4ea}
@media (max-width:640px){
  .merkaz-games-launcher{left:12px;bottom:12px;padding:9px 11px}
  .merkaz-games-launcher .new-tag{display:none}
  .merkaz-launcher-close{left:10px;bottom:64px}
}

/* Loading overlay */
.mascot-loading-screen,.transition-loader-panel{display:grid;place-items:center;gap:18px;text-align:center;color:#17362c}
.loader-brand-stack{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;min-height:220px}
.loader-mascot{width:min(190px,42vw);animation:loader-bob 2.8s ease-in-out infinite}
.loader-mascot img{width:100%;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 14px 18px #193d3322)}
.loader-logo-shell{position:relative;width:114px;height:114px;display:grid;place-items:center}
.loader-logo-shell img{width:88px;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 8px 14px #183d3218)}
.loader-turbine{position:absolute;inset:10px;border-radius:50%;border:3px solid #d9c693;border-top-color:#2b7a65;border-right-color:#c9603d;animation:loader-spin 1.05s linear infinite}
.mascot-loading-screen p,.transition-loader p{margin:0;font:700 16px/1.7 RubikLocal,Rubik,system-ui,sans-serif}
.transition-loader{position:fixed;inset:0;z-index:130;background:#fffdf7ec;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px}
.transition-loader-panel{padding:20px 26px;border-radius:28px;background:linear-gradient(180deg,#ffffff,#f6fbf6);border:1px solid #d8dfd1;box-shadow:0 22px 50px #10241f18}
.transition-loader[aria-hidden="false"] .loader-mascot{animation-duration:2.2s}
@keyframes loader-spin{to{transform:rotate(360deg)}}
@keyframes loader-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Guest warning popup */
.guest-warning-modal{position:fixed;inset:0;z-index:125;background:#10241f69;display:grid;place-items:center;padding:18px}
.guest-warning-card{width:min(470px,100%);background:#fffdf7;border:1px solid #d9d5c7;border-radius:24px;box-shadow:0 22px 52px #12241f24;padding:22px 20px;color:#163229;text-align:right;direction:rtl}
.guest-warning-card h3{margin:0 0 10px;font:800 1.25rem/1.3 RubikLocal,Rubik,system-ui,sans-serif}
.guest-warning-card p{margin:0 0 12px;color:#5d6e63;line-height:1.8}
.guest-warning-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.guest-warning-actions button,.guest-warning-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:14px;border:1px solid #d7d2c2;background:#fffdf7;color:#17362c;text-decoration:none;font:700 14px/1.5 RubikLocal,Rubik,system-ui,sans-serif;cursor:pointer}
.guest-warning-actions .guest-primary{background:#14372d;color:#fff;border-color:#14372d}
.guest-warning-actions .guest-primary:hover{background:#1b4a3c}

/* Mascot and transition polish */
.games-page #mascotGreeting{outline:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
.games-page #mascotGreeting:focus,.games-page #mascotGreeting:active{outline:none;box-shadow:none}
.games-page .radar-label{display:none!important}
.games-page .mascot-single{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:58% 62%}
.games-page .mascot-greeting.is-waving .mascot-single{animation:mascotWaveWhole 1.7s ease-in-out 1}
@keyframes mascotWaveWhole{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(3deg) translateY(-3px)}40%{transform:rotate(-3deg) translateY(-1px)}60%{transform:rotate(4deg) translateY(-4px)}80%{transform:rotate(-2deg)}}

/* Smoother in-page transitions */
.transition-scope{will-change:transform,opacity}

/* Performance topic: make its layout feel closer to other topics */
.performance-layout .development-topic{margin-top:0}
.performance-layout .performance-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px
}
.performance-layout .performance-search{
  min-width:min(280px,100%);flex:0 1 280px;display:flex;align-items:center;gap:10px;padding:0 16px;min-height:52px;
  border:1px solid var(--line, #d8d4c5);border-radius:14px;background:#fffdf9;color:#7a857c;font:600 14px/1.5 RubikLocal,Rubik,system-ui,sans-serif;
}
.performance-layout .performance-search svg{width:18px;height:18px;flex:none}
.performance-layout .performance-tabs{margin-bottom:0;min-width:min(230px,100%)}
.performance-layout .development-dossier{min-height:360px}
.topic-performance .topic-count .development-topic-tag{font-size:14px;padding:3px 8px;border-radius:999px;background:#f3ecdc;color:#8a6740;display:inline-flex}

/* Slightly slower global micro-interactions */
button, a, .topic-card, .game-card, .answer-option, .game-answer, .merkaz-games-launcher{transition-duration:.28s!important}

@media (max-width:680px){
  .site-menu-drawer{width:min(360px,92vw);padding:16px 14px 20px}
  .site-menu-link,.site-menu-action,.site-menu-sound,.drawer-xp-card{min-height:46px;padding:11px 12px}
  .guest-warning-actions{flex-direction:column}
  .loader-brand-stack{min-height:190px}
  .loader-mascot{width:min(170px,54vw)}
  .loader-logo-shell{width:96px;height:96px}
  .performance-layout .performance-head{align-items:stretch}
  .performance-layout .performance-search,.performance-layout .performance-tabs{flex:1 1 100%;min-width:0}
}