/* ANUBIS28 v37 — Temple Sunrise / approved Egyptian visual mockup.
   Only decorative surfaces, hierarchy, home navigation layout and shadows.
   No new product features and no changes to saved-data formats.
   Retain the approved palette and Caesar Dressing / Helvetica typesetting. */
:root {
  --temple-edge: #ca8f4a;
  --temple-edge-soft: #eed4a2;
  --temple-shadow: rgba(94, 51, 17, .22);
  --temple-gold: var(--color-button-gold);
  --temple-stone: var(--color-paper);
  --temple-vignette: rgba(93, 45, 12, .13);
}
html, body {
  background-color: var(--color-canvas);
  background-image:
    linear-gradient(135deg,rgba(94,49,13,.12),rgba(252,233,186,.09) 40%,rgba(130,73,25,.18)),
    var(--texture-sandstone-wall);
  background-repeat:no-repeat,repeat;
  background-size:cover,var(--texture-stone-size);
}
.app-shell {
  max-width: 1180px;
  background-color: var(--color-page);
  background-image:
    linear-gradient(180deg,rgba(255,247,226,.17),rgba(217,169,104,.12)),
    var(--texture-sandstone-page);
  background-repeat:no-repeat,repeat;
  background-size:cover,var(--texture-stone-size);
  box-shadow: 0 12px 72px rgba(66,34,10,.30),0 0 0 2px rgba(136,76,27,.40);
}
/* Panoramic illustrated desert keeps the atmospheric quality of the approved
   mockup while all actual navigation remains semantic text and buttons. */
.topbar {
  min-height: 108px;
  padding: 14px clamp(16px,3vw,32px);
  align-items:center;
  position:relative;
  isolation:isolate;
  color: var(--color-heading);
  background-color:#edd19c;
  background-image:
    linear-gradient(90deg,rgba(255,243,203,.50),rgba(255,230,177,.19) 47%,rgba(255,230,177,.12)),
    url("assets/decor/temple-sunrise.svg");
  background-size:cover,cover;
  background-position:center,center 53%;
  border-bottom:4px solid #9a5b25;
  box-shadow:inset 0 -3px 0 rgba(255,232,163,.58),0 3px 7px rgba(110,61,20,.18);
}
.topbar::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  right:12px;top:10px;
  height:76px;width:49px;
  border:2px solid rgba(111,61,19,.48);
  border-radius:17px;
  background:rgba(255,238,193,.20);
  box-shadow:inset 0 0 0 3px rgba(255,249,226,.24);
  opacity:.35;
}
.brand {align-items:center;gap:12px;padding:3px 8px 3px 0}
.brand-logo {
  width:57px;height:57px;object-fit:contain;
  filter:drop-shadow(1px 3px 2px rgba(75,35,7,.25));
}
.brand-text {
  font-family:var(--font-display-anubis);
  color:#65300f;
  font-size:clamp(29px,3.8vw,41px);
  font-weight:400;
  letter-spacing:.012em;
  text-shadow:0 2px 0 rgba(255,228,163,.95),1px 3px 1px rgba(104,54,13,.33);
  white-space:nowrap;
}
.brand-text .gold {color:#b96d17}
.topbar-right {z-index:1;margin-right:46px;flex-wrap:nowrap}
.pill {
  background:rgba(255,244,217,.88);border:1px solid #b98849;
  box-shadow:0 2px 2px rgba(101,53,16,.13);
  color:var(--color-heading);font-size:10px;letter-spacing:.04em;
}
.pill-preview {color:#79431a}
.status-dot {background:var(--color-success)}
.tabs {
  z-index:1;
  position:relative;
  padding:5px 11px;
  gap:5px;
  background-image:
    linear-gradient(180deg,rgba(255,244,214,.56),rgba(216,167,96,.46)),
    var(--texture-sandstone-panel);
  background-size:cover,var(--texture-stone-size);
  border-bottom:3px solid var(--temple-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 7px rgba(92,49,17,.1);
}
.tab {
  color:var(--color-heading);
  font-size:13px;
  font-weight:800;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid transparent;
  box-shadow:none;
}
.tab.active,.tab:hover {
  color:var(--color-heading);
  border-color:#ce9c5e;
  background:linear-gradient(#ffe8b9,#e8be80);
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 2px 0 rgba(117,65,26,.2);
}
.content {
  position:relative;
  padding-top:clamp(15px,1.8vw,21px);
  background-image:linear-gradient(180deg,rgba(255,250,233,.14),transparent 200px);
}
.section-title,.hero h1,.glossary-group-title {
  color:var(--color-heading);
  text-shadow:0 1px rgba(255,232,185,.8);
}
.section-title {line-height:1.12;letter-spacing:.008em}
.eyebrow {color:var(--color-orange);letter-spacing:.09em}
.section-desc {color:var(--color-heading)}
/* Carved stone surfaces have a raised luminous edge and a darker bottom rim.
   The inner white veil ensures Memages and instructional copy stay readable. */
.card, .soft-card, .menu-card, .catalog-item, .memage-card,
.digit-tile, .learn-panel, .detail-image-trigger, .glossary-entry,
.public-study-guide.card, .technique-card, .training-bound {
  border:1px solid #dbad70;
  background-color:var(--color-card);
  background-image:
    linear-gradient(148deg,rgba(255,255,255,.81),rgba(255,246,215,.63) 72%,rgba(233,194,133,.58)),
    var(--texture-sandstone-panel);
  background-size:cover,var(--texture-stone-size);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.92),
    inset 0 -2px 0 rgba(177,112,47,.20),
    0 3px 0 rgba(164,99,37,.19),
    0 5px 12px rgba(104,57,19,.10);
}
.card,.soft-card,.glossary-entry,.learn-panel {border-radius:15px}
.menu-card,.digit-tile {border-radius:14px}
.quiz-panel,.glossary-mapping,.detail-quiz {box-shadow:inset 0 2px 0 #fff9e9,0 4px 0 #d9a467,0 10px 20px rgba(102,51,13,.12)}
/* Ensure existing bright Memage artworks sit against pale, calm stone. */
.memages-catalog-screen .catalog-item,
.memages-catalog-screen .catalog-image,
.detail-image-trigger,.memage-card {
  background-color:#fffaf0;
  background-image:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,249,232,.68)),var(--texture-sandstone-page);
}
.memages-catalog-screen .catalog-item:hover,
.digit-tile:hover {
  border-color:var(--color-button-gold);
  box-shadow:inset 0 2px 0 #fff,0 3px 0 #d39e5b,0 6px 16px rgba(103,49,11,.16);
}
/* Raised stone/bronze controls; gold CTA remains recognisable. */
.btn, .btn.gold-btn, .btn.ghost, .catalog-page,
.switcher button.on, .glossary-jump a {
  font-family:var(--font-text-anubis);
  font-weight:800;
  border-radius:11px;
  transition:background .15s,box-shadow .15s,transform .15s;
}
.btn {
  background:linear-gradient(180deg,#c87a2e,var(--color-button-primary));
  border:1px solid #8f4d17;color:var(--color-button-primary-ink);
  box-shadow:inset 0 2px 0 rgba(255,236,184,.34),0 3px 0 #864613,0 5px 10px rgba(94,47,11,.14);
}
.btn.gold-btn,.learning-back-row .learning-back-btn {
  background:linear-gradient(180deg,#f9c55c,var(--color-button-gold) 61%,#cf8e25);
  color:var(--color-button-gold-ink);
  border-color:#bd7827;
  box-shadow:inset 0 2px 0 #ffe7a7,0 3px 0 #af6e1c,0 5px 12px rgba(121,61,11,.2);
}
.btn.ghost {
  background:linear-gradient(180deg,#fff8e9,#f2d5a0);
  border:1px solid #d6a25c;
  color:var(--color-heading);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95),0 3px 0 #cca16b,0 4px 9px rgba(112,58,15,.1);
}
.btn:hover,.btn.gold-btn:hover,.btn.ghost:hover,
.learning-back-row .learning-back-btn:hover {filter:brightness(1.06);transform:translateY(-1px)}
.btn:active,.catalog-page:active {transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(100,52,20,.18)}
.tab:focus-visible,.btn:focus-visible,.catalog-item:focus-visible,
.temple-nav-card:focus-visible {outline:3px solid var(--color-focus);outline-offset:3px}
.catalog-page {
  background:linear-gradient(180deg,#fffaf0,#f1d2a0);
  border:1px solid #d6a163;
  box-shadow:inset 0 1px 0 #fff9ef,0 2px 0 rgba(130,79,38,.16);
}
.catalog-page.active {background:linear-gradient(180deg,#b96c24,#96501a);color:#fff8e7;border-color:#854513}
.search,.answer-input,.training-select {
  border:1px solid #d3a66c;
  background:linear-gradient(#fffefa,#fff9ed);
  box-shadow:inset 0 2px 4px rgba(130,76,32,.06);
}
.switcher {background:#e7bf88;border:1px solid #d4ab76}
.switcher button.on {background:linear-gradient(#fffdf7,#f5e7cc)}
.training-bound {box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(127,72,27,.11)}
.training-slider {accent-color:var(--color-orange)}
.quiz-target {
  background-color:#fff6df;
  background-image:linear-gradient(rgba(255,250,235,.66),rgba(251,230,188,.42)),var(--texture-sandstone-page);
  border:2px solid #d9a66b;
  box-shadow:inset 0 2px 5px rgba(123,73,24,.1),0 1px 0 #fff;
}
.quiz-target img {background:none}
.recall-choices .btn.ghost,
.detail-choices .btn.ghost {min-height:48px;font-size:20px}
.learn-panel {border-left:5px solid var(--color-orange);padding:13px 15px}
.detail-image-trigger {border:2px solid #dbab67;box-shadow:inset 0 2px 0 #fff,0 4px 0 #d4a46c,0 6px 14px rgba(96,54,21,.13)}
/* A discreet line of carved Egyptian glyphs, only in a few information zones. */
.glossary-group-title::after,.public-memixes-guide .section-title::after {
  content:"";display:inline-block;height:19px;width:76px;margin-left:14px;vertical-align:middle;
  background:url("assets/decor/hieroglyph-frieze.svg") left center / auto 19px no-repeat;
  opacity:.40;
}
.public-study-guide summary {color:var(--color-heading);background:linear-gradient(90deg,rgba(255,251,242,.57),rgba(255,232,184,.16))}
.public-study-guide.card {box-shadow:inset 0 1px 0 #fff,0 2px 0 #d8a96d,0 3px 9px rgba(116,69,21,.10)}
.footer {border-top:3px solid #d5a46b;background-image:linear-gradient(rgba(255,245,222,.45),rgba(227,183,118,.38)),var(--texture-sandstone-panel)}
/* Home: eight richly carved stone navigation tiles, matched to the chosen
   proposal. All targets are existing routes and callbacks. */
.home-temple {margin:0 auto;max-width:1050px}
.home-temple-intro {
  display:flex;flex-direction:column;gap:2px;
  margin:0 0 12px;
  padding:5px 0 8px;
  border-bottom:1px solid rgba(169,106,39,.23);
}
.home-temple-intro .eyebrow {margin:0}
.home-temple-intro .section-title {font-size:clamp(25px,3vw,33px);margin:0}
.home-temple-intro .section-desc {margin:0;font-size:14px}
.temple-nav-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:11px 0 16px}
.temple-nav-card {
  position:relative;isolation:isolate;min-width:0;min-height:132px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  padding:11px 10px 13px;
  border:2px solid #d59b58;border-radius:18px;
  cursor:pointer;
  color:var(--color-heading);
  background-color:#f6d39c;
  background-image:
    linear-gradient(135deg,rgba(255,249,227,.87),rgba(247,211,151,.40) 59%,rgba(211,151,77,.44)),
    var(--texture-sandstone-panel);
  background-size:cover,var(--texture-stone-size);
  box-shadow:inset 0 3px 1px rgba(255,255,255,.80),inset 0 -3px 1px rgba(150,92,36,.26),
    0 5px 0 #bb8042,0 9px 13px rgba(94,46,10,.18);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.temple-nav-card::after {
  position:absolute;content:"";pointer-events:none;
  inset:5px;border:1px solid rgba(198,127,47,.35);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
}
.temple-nav-card img {width:51px;height:51px;object-fit:contain;filter:drop-shadow(1px 2px 0 rgba(255,232,181,.9));}
.temple-nav-card span {display:block;font:800 15px/1.14 var(--font-text-anubis);max-width:100%;text-align:center;text-transform:uppercase;letter-spacing:.014em}
.temple-nav-card:hover {
  transform:translateY(-2px);border-color:#b7752e;
  box-shadow:inset 0 3px 1px rgba(255,255,255,.84),inset 0 -3px 1px rgba(150,92,36,.27),0 7px 0 #b2793b,0 13px 18px rgba(94,46,10,.22);
}
.temple-nav-card:active {transform:translateY(3px);box-shadow:inset 0 2px 6px rgba(113,64,26,.16),0 2px 0 #b2793b}
.temple-lesson-prompt {
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid #d5a269;border-radius:13px;
  background:linear-gradient(90deg,rgba(255,251,234,.83),rgba(239,202,142,.68)),var(--texture-sandstone-panel);
  background-size:cover,var(--texture-stone-size);
  padding:11px 14px;
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #d3a36d;
}
.temple-lesson-prompt span {font-size:14px;color:var(--color-heading)}
.temple-lesson-prompt .btn {flex:none;white-space:nowrap}
/* Old black cinematic lesson is intentionally unchanged. */
.intro-images .soft-card.center,.intro-images .intro-scene,.story-img,.scene-on-quiz {background-image:none;background-color:var(--color-scene-bg)}
/* Never put a separate colored square behind emphasized coding letters. */
mark.digitcode-letter,.word-coding mark.digitcode-letter {background:transparent!important;box-shadow:none}
@media(max-width:800px){
  .topbar{min-height:88px;padding:10px 14px;background-position:center,60% 49%}
  .brand-logo{width:44px;height:44px}
  .brand-text{font-size:clamp(24px,4.3vw,31px)}
  .topbar-right{margin-right:25px}
  .topbar::after{right:7px;top:8px;height:58px;width:34px}
  .temple-nav-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .temple-nav-card{min-height:114px;padding:9px 5px;gap:4px}
  .temple-nav-card img{width:42px;height:42px}
  .temple-nav-card span{font-size:12px}
}
@media(max-width:600px){
  .topbar{min-height:74px;padding:8px 12px;background-position:center,66% center}
  .brand-logo{width:38px;height:38px}
  .brand{gap:7px}
  .brand-text{font-size:24px}
  .topbar-right{margin-right:0;gap:4px}
  .topbar::after{display:none}
  .pill{padding:4px 6px;font-size:9px}
  .pill-preview{display:none}
  .tabs{justify-content:flex-start;padding:5px 6px}
  .tab{font-size:12px;padding:7px 10px}
  .content{padding-top:11px}
  .temple-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .temple-nav-card{min-height:108px;gap:2px;padding:8px 5px 10px}
  .temple-nav-card img{width:43px;height:43px}
  .temple-nav-card span{font-size:13px}
  .temple-lesson-prompt{flex-wrap:wrap;padding:10px;gap:9px}
  .temple-lesson-prompt .btn{width:100%}
  .footer{flex-wrap:wrap;gap:3px}
}
@media(max-width:355px){
  .brand-text{font-size:21px}
  .brand-logo{width:33px;height:33px}
  .pill.guest{padding:3px 5px;font-size:8px}
  .temple-nav-card span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.btn,.temple-nav-card{transition:none}}
/* Side pilasters frame the temple on wide screens without occupying layout space. */
@media(min-width:1120px){
  .app-shell{position:relative;isolation:isolate}
  .app-shell::before,.app-shell::after{
    content:"";position:absolute;top:159px;bottom:40px;width:28px;
    pointer-events:none;z-index:0;opacity:.27;
    background-image:
      linear-gradient(90deg,#9d612e,#dfb779 24%,#fff0c9 38%,#bf8745 61%,#e3b87c 78%,#9d612e),
      url("assets/decor/hieroglyph-frieze.svg");
    border:1px solid #a36b31;
    box-shadow:inset 2px 0 2px rgba(255,246,203,.67),3px 2px 5px rgba(102,58,23,.12);
    border-radius:5px;
  }
  .app-shell::before{left:14px}
  .app-shell::after{right:14px;transform:scaleX(-1)}
  .app-shell > *{position:relative;z-index:1}
}
/* Show the blue sky and pyramid peaks, not only the pyramids' lower faces. */
.topbar{background-position:center,center 17%}
@media(max-width:800px){.topbar{background-position:center,60% 18%}}
@media(max-width:600px){.topbar{background-position:center,66% 15%}}