/* v9.0 release shell: one quiet header, a purposeful left rail, and a playful learning passport. */
:root {
  --sidebar: 246px;
  --topbar: 72px;
}

.topbar {
  grid-template-columns: var(--sidebar) minmax(0, 1fr) auto;
  height: var(--topbar);
}

.screen-location {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px auto minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 20px;
}

.screen-location-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #173f2e;
  background: #e9f3dc;
  border-radius: 10px;
  font-size: 18px;
}

.screen-location>span:nth-child(2) { min-width: 0; }
.screen-location small,
.screen-location b { display: block; }
.screen-location small { color: #6a7d72; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.screen-location b { overflow: hidden; margin-top: 2px; color: #173f2e; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.screen-location em { overflow: hidden; color: #6b7b72; font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.topbar-actions { padding-right: 16px; }
.top-role-edit { display: none; }
.language-button { min-height: 42px; border-color: #c7d4cb; background: #fff; }

.sidebar { justify-content: flex-start; }
.sidebar-scroll { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #486254 transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #486254; border-radius: 999px; }

.sidebar-role-switcher { padding: 10px 10px 5px; }
.sidebar-role-switcher .current-role-button {
  width: 100%;
  min-height: 58px;
  grid-template-columns: 29px minmax(0,1fr) auto;
  gap: 8px;
  color: #fff;
  background: #123528;
  border: 1px solid #365647;
  box-shadow: none;
}
.sidebar-role-switcher .current-role-button:hover,
.sidebar-role-switcher .current-role-button:focus-visible { background: #184735; border-color: #d8ff72; }
.sidebar-role-switcher .current-role-button>.ui-icon { width: 24px; height: 24px; color: #d8ff72; }
.sidebar-role-switcher .current-role-button small { color: #91a99d; font-size: 12px; letter-spacing: .08em; }
.sidebar-role-switcher .current-role-button b { color: #fff; font-size: 13px; }
.sidebar-role-switcher .current-role-button em { min-width: 28px; width: 28px; height: 28px; padding: 0; justify-content: center; color: #123528; background: #d8ff72; }
.sidebar-role-switcher .current-role-button em span { display: none; }

.sidebar nav { padding: 4px 8px 8px; gap: 2px; overflow: visible; }
.sidebar .nav-item { min-height: 48px; padding: 7px 8px; }
.sidebar .nav-item b { font-size: 13px; }
.sidebar .nav-item small { font-size: 12px; }

.sidebar-section,
.sidebar-game-card,
.sidebar-passport { margin: 0 9px 10px; }
.sidebar-section { padding-top: 11px; border-top: 1px solid #294438; }
.sidebar-section>p { margin: 0 3px 8px; color: #7f968a; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.sidebar-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sidebar-shortcuts button {
  min-width: 0;
  min-height: 67px;
  padding: 7px 3px;
  display: grid;
  place-items: center;
  color: #d9e6df;
  background: #102c21;
  border: 1px solid #315044;
  border-radius: 10px;
  cursor: pointer;
}
.sidebar-shortcuts button:hover,
.sidebar-shortcuts button:focus-visible { color: #102c21; background: #d8ff72; border-color: #d8ff72; }
.sidebar-shortcuts button>span:first-child { font-size: 20px; }
.sidebar-shortcuts button b { font-size: 12px; }
.sidebar-shortcuts button small { color: inherit; font-size: 10px; opacity: .7; }

.sidebar-article-link {
  width: calc(100% - 18px);
  min-height: 52px;
  margin: 0 9px 7px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #142e24;
  text-align: left;
  background: #fffdf2;
  border: 1px solid #dcc78b;
  border-radius: 11px;
  cursor: pointer;
}
.sidebar-article-link:hover,
.sidebar-article-link:focus-visible { background: #fff2b9; border-color: #e1ad2e; outline: 2px solid rgba(225,173,46,.2); }
.sidebar-article-link .note-n { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; background: #252525; border-radius: 8px; font-weight: 900; }
.sidebar-article-link span:nth-child(2) { display: grid; }
.sidebar-article-link b { font-size: 13px; }
.sidebar-article-link small { color: #6c725e; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.sidebar-article-link i { font-style: normal; }

.sidebar-utility-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.sidebar-utility-row button {
  min-width: 0;
  min-height: 38px;
  padding: 5px 3px;
  color: #b8c8bf;
  background: transparent;
  border: 1px solid #345044;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
}
.sidebar-utility-row button:hover,
.sidebar-utility-row button:focus-visible { color: #fff; background: #183c2e; border-color: #779686; }
.sidebar-utility-row button>b { margin-left: 2px; color: #d8ff72; }

.sidebar-game-card {
  padding: 9px 10px;
  color: #173f2e;
  background: linear-gradient(145deg,#eaff9d,#f4cf6a);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.17);
}
.sidebar-game-heading { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 7px; }
.sidebar-game-heading>span:first-child { display: grid; width: 32px; height: 32px; place-items: center; background: rgba(255,255,255,.62); border-radius: 10px; font-size: 19px; }
.sidebar-game-heading small,
.sidebar-game-heading b { display: block; }
.sidebar-game-heading small { font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.sidebar-game-heading b { font-size: 14px; }
.sidebar-game-card>p { margin: 5px 0; color: #405d4e; font-size: 11px; line-height: 1.35; }
.sidebar-game-card>a { min-height: 34px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #173f2e; border-radius: 9px; font-size: 11px; font-weight: 900; text-decoration: none; }
.sidebar-game-card>a:hover,
.sidebar-game-card>a:focus-visible { background: #27664a; outline: 3px solid rgba(23,63,46,.18); }
.sidebar-game-card.is-returning { background: linear-gradient(145deg,#cfeeff,#d8ff72); }

.sidebar-passport { color: #dce9e2; background: #102c21; border: 1px solid #315044; border-radius: 12px; }
.sidebar-passport>summary { min-height: 45px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; }
.sidebar-passport>summary::-webkit-details-marker { display: none; }
.sidebar-passport>summary>span { display: flex; align-items: center; gap: 6px; }
.sidebar-passport>summary b { font-size: 12px; }
.sidebar-passport>summary em { padding: 3px 6px; color: #102c21; background: #d8ff72; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 900; }
.sidebar-passport[open]>summary { border-bottom: 1px solid #315044; }
.journey-mission { padding: 10px; }
.journey-mission small,
.journey-mission b { display: block; }
.journey-mission small { color: #8ca296; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.journey-mission b { margin: 3px 0 7px; color: #fff; font-size: 12px; }
.journey-mission button,
.journey-surprise { width: 100%; min-height: 34px; color: #102c21; background: #d8ff72; border: 0; border-radius: 8px; font-size: 11px; font-weight: 900; cursor: pointer; }
.journey-stamps { padding: 0 10px 9px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.journey-stamps span { min-width: 0; padding: 5px 1px; display: grid; place-items: center; color: #71857a; background: #0b2219; border: 1px dashed #3d594c; border-radius: 8px; font-size: 16px; }
.journey-stamps span small { overflow: hidden; width: 100%; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.journey-stamps span.earned { color: #173f2e; background: #f5ffd0; border-color: #d8ff72; border-style: solid; animation: stamp-in .45s ease both; }
.journey-surprise { width: calc(100% - 20px); margin: 0 10px 10px; color: #dce9e2; background: #1b4936; border: 1px solid #416654; }
.journey-surprise:hover,
.journey-surprise:focus-visible { color: #102c21; background: #f4cf6a; }

.sidebar-foot { min-height: 48px; padding: 9px 12px; flex: 0 0 auto; }
.sidebar-foot b { font-size: 11px; }
.sidebar-foot small { overflow: hidden; max-width: 175px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-side-action { display: none; }

.game-return-dock { display: none !important; }

.toast {
  top: auto;
  right: 20px;
  bottom: 20px;
  left: auto;
  max-width: min(430px,calc(100vw - var(--sidebar) - 44px));
  transform: translateY(10px);
  border: 1px solid rgba(216,255,114,.35);
  box-shadow: 0 12px 34px rgba(4,28,19,.24);
}
.toast.show { transform: none; }

.journey-leaf-pop { position: fixed; z-index: 300; left: var(--leaf-x,50vw); top: var(--leaf-y,50vh); pointer-events: none; font-size: 22px; animation: leaf-pop .9s ease-out both; }

@keyframes stamp-in { 0% { transform: scale(.7) rotate(-9deg); opacity: .2; } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: none; opacity: 1; } }
@keyframes leaf-pop { 0% { transform: translate(-50%,-10%) scale(.4) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--leaf-dx,0px)),-90px) scale(1.2) rotate(var(--leaf-r,20deg)); opacity: 0; } }

@media (max-width: 1200px) and (min-width: 801px) {
  :root { --sidebar: 224px; }
  .screen-location { grid-template-columns: 32px auto; }
  .screen-location>em { display: none; }
  .sidebar-game-card { padding: 7px 9px; }
  .sidebar-game-card>p { display: none; }
  .sidebar-game-heading { grid-template-columns: 29px 1fr; }
  .sidebar-game-heading>span:first-child { width: 29px; height: 29px; font-size: 17px; }
  .sidebar-game-heading small { font-size: 8px; letter-spacing: .03em; }
  .sidebar-game-heading b { font-size: 12px; }
  .sidebar-game-card>a { min-height: 31px; margin-top: 5px; }
  .sidebar .nav-item { min-height: 38px; padding-block: 3px; }
  .sidebar .nav-item i { width: 21px; height: 21px; }
  .sidebar .nav-item b { font-size: 12px; }
  .sidebar .nav-item small { display: none; }
  .catalog-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-keyword { grid-column: 1 / -1; }
  .sidebar-shortcuts button { min-height: 62px; }
}

@media (max-width: 800px) {
  :root { --topbar: 65px; --sidebar: 0px; }
  .topbar { grid-template-columns: minmax(138px,.8fr) minmax(110px,1fr) auto; }
  .topbar .terminal-brand { grid-column: auto; }
  .screen-location { min-width: 0; grid-template-columns: 1fr; padding: 0 8px; }
  .screen-location-mark,
  .screen-location small,
  .screen-location em { display: none; }
  .screen-location b { font-size: 13px; text-align: center; }
  .topbar-actions { padding-right: 7px; gap: 4px; }
  .top-role-edit { display: inline-grid; width: 39px; height: 39px; place-items: center; color: #173f2e; background: #eef5e9; border: 1px solid #c9d8cd; border-radius: 9px; }
  .top-role-edit .ui-icon { width: 20px; height: 20px; }
  .language-button { min-width: 49px; padding: 0 6px; }
  .language-button .lang-current { display: none; }
  .app-shell { padding-top: 69px; }
  .context-bar { top: 69px; }
  .player-context { top: 69px; }
  .sidebar { top: auto; right: 0; bottom: 0; left: 0; width: auto; height: 72px; display: block; overflow-x: auto; overflow-y: hidden; }
  .sidebar-scroll { width: max-content; height: 72px; overflow: visible; }
  .sidebar-role-switcher,
  .sidebar-article-link,
  .sidebar-section,
  .sidebar-game-card,
  .sidebar-passport,
  .sidebar-foot { display: none; }
  .sidebar nav { width: max-content !important; min-width: max-content !important; height: 72px; padding: 6px !important; display: flex !important; flex-wrap: nowrap; gap: 2px; }
  .sidebar .nav-item,
  .mobile-side-action { width: 76px; min-width: 76px; height: 59px; flex: 0 0 76px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #a7b7ad; background: transparent; border: 0; border-radius: 8px; font-size: 12px; text-decoration: none; }
  .sidebar .nav-item span { display: none; }
  .sidebar .nav-item i { width: 22px; height: 22px; flex: 0 0 auto; }
  .sidebar .nav-item b,
  .mobile-side-action b { display: block; overflow: hidden; max-width: 100%; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .nav-item small { display: none; }
  .mobile-side-action>span { display: grid; width: 22px; height: 22px; place-items: center; color: #d8ff72; font-weight: 900; }
  .mobile-side-action { order: -1; }
  .mobile-side-action:hover,
  .mobile-side-action:focus-visible { color: #fff; background: #153d2c; }
  .workspace { margin-left: 0; padding-bottom: 93px; }
  .toast { right: 10px; bottom: 82px; left: 10px; max-width: none; }
}

@media (max-width: 520px) {
  .topbar { grid-template-columns: minmax(126px,1fr) auto; }
  .screen-location { display: none; }
  .topbar .terminal-brand strong { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-stamps span.earned,
  .journey-leaf-pop { animation: none; }
}

@media print {
  .screen-location,
  .sidebar-passport { display: none !important; }
}