:root{
  --giraffe-yellow:#ffd735;
  --giraffe-gold:#f5a800;
  --giraffe-orange:#ffb51b;
  --giraffe-cream:#fff9df;
  --giraffe-ink:#38290f;
  --yellow:#ffd735;
  --gold:#e99b00;
  --border:rgba(224,166,22,.22);
  --line:rgba(224,166,22,.20);
}

.hd-icon{
  display:inline-block;width:1.14em;height:1.14em;flex:0 0 auto;
  vertical-align:-.18em;color:var(--giraffe-ink,#38290f);
  overflow:visible;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
}
.nav-icon .hd-icon,.sidebar-nav .hd-icon,.nav .hd-icon{width:1.34em;height:1.34em;vertical-align:-.28em}
.page-title>.hd-icon,.section-title>.hd-icon{width:1.25em;height:1.25em}
.btn>.hd-icon,button>.hd-icon,a>.hd-icon{margin-right:.32em}
.stat-icon .hd-icon,.stat-box>i .hd-icon{width:1.55em;height:1.55em}
.site-giraffe-theme [data-hd-icon]{align-items:center}

body.site-giraffe-theme{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,215,53,.19),transparent 27%),
    radial-gradient(circle at 86% 12%,rgba(255,181,27,.13),transparent 26%),
    linear-gradient(135deg,#fffef8 0%,#fffaf0 48%,#fffdf8 100%) !important;
}

.site-giraffe-theme .layout,.site-giraffe-theme .app{position:relative;z-index:1}
.site-giraffe-theme .main{position:relative}
.site-giraffe-theme .main>*:not(.site-top-ornament):not(.site-page-mascot):not(.tier-deco){position:relative;z-index:1}
.site-giraffe-theme .main>.tier-deco{position:absolute}

.site-ornament-watermark{
  position:fixed;right:-72px;bottom:-58px;width:540px;height:403px;
  background:url('../site-decor/giraffe-ornaments.png') center/contain no-repeat;
  opacity:.045;mix-blend-mode:multiply;pointer-events:none;z-index:0;
}
.site-top-ornament{
  position:absolute;right:20px;top:-2px;width:min(720px,72%);height:62px;
  background:url('../site-decor/giraffe-ornaments.png') center bottom/720px auto no-repeat;
  opacity:.12;mix-blend-mode:multiply;pointer-events:none;z-index:0;
}

.site-giraffe-theme .sidebar{
  border-right-color:rgba(224,166,22,.24) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,250,226,.80)) !important;
  box-shadow:12px 0 34px rgba(188,128,0,.055);
}
.site-giraffe-theme .sidebar::after{
  content:'';position:absolute;left:12px;right:12px;bottom:14px;height:54px;
  background:url('../site-decor/giraffe-ornaments.png') center bottom/620px auto no-repeat;
  opacity:.16;mix-blend-mode:multiply;pointer-events:none;
}
.site-giraffe-theme .sidebar-logo{position:relative;z-index:1}
.site-giraffe-theme .sidebar-logo .mascot-small{
  width:82px !important;height:94px !important;border-radius:26px !important;
  object-fit:contain !important;object-position:center bottom;background:transparent;
  border:0 !important;padding:0;
  box-shadow:0 10px 25px rgba(222,156,14,.14);margin-bottom:8px !important;
}
.site-giraffe-theme .sidebar-logo .site-name{color:#2d2414 !important;letter-spacing:.06em}
.site-giraffe-theme .sidebar-logo .site-sub{color:#9a791d}
.site-giraffe-theme .sidebar-nav a:hover,.site-giraffe-theme .nav a:hover{
  background:linear-gradient(90deg,#fff9d9,#fff3bd) !important;color:#b87800 !important;
}
.site-giraffe-theme .sidebar-nav a.active,.site-giraffe-theme .nav a.active{
  background:linear-gradient(90deg,#fff2a9,#fff8dc) !important;
  color:#9d6500 !important;box-shadow:inset 4px 0 0 var(--giraffe-gold),0 5px 14px rgba(220,158,16,.08);
}

.site-page-mascot{
  position:absolute;right:32px;top:54px;width:108px;height:124px;z-index:4;
  object-fit:contain;object-position:center bottom;background:transparent;
  border:0;border-radius:0;padding:0;
  filter:drop-shadow(0 14px 18px rgba(206,143,7,.18));pointer-events:none;
}
.theme-page-overview .site-page-mascot{top:10px;width:76px;height:86px;border-radius:22px}
.theme-page-admin .site-page-mascot{top:8px;width:72px;height:82px;border-radius:21px}
.theme-page-search .site-page-mascot{top:10px;width:72px;height:82px;border-radius:21px}
.theme-page-detail .site-page-mascot{top:60px;width:96px;height:112px}
.site-giraffe-theme .main.has-site-page-mascot>.page-title,
.site-giraffe-theme .main.has-site-page-mascot>.container>.page-title{padding-right:145px;min-height:52px}
.theme-page-admin .topbar{padding-right:140px}

.site-giraffe-theme .page-title{
  color:#302611;display:flex;align-items:center;gap:10px;
  text-shadow:0 2px 0 rgba(255,215,53,.18);
}
.site-giraffe-theme .page-title::after{
  content:'';display:inline-block;width:116px;height:3px;margin-left:6px;border-radius:99px;
  background:linear-gradient(90deg,#f2ad00,rgba(255,215,53,.12));opacity:.62;
}

.site-giraffe-theme .header,.site-giraffe-theme .topbar,
.site-giraffe-theme .filter-bar,.site-giraffe-theme .search-hero{
  border-color:rgba(224,166,22,.24) !important;
  box-shadow:0 9px 28px rgba(179,116,0,.07);
}
.site-giraffe-theme .filter-chip.active,.site-giraffe-theme .day-tab.active,
.site-giraffe-theme .fchip.active{
  background:linear-gradient(135deg,#ffd735,#ffb51b) !important;
  border-color:#efa700 !important;color:#3b2a05 !important;
  box-shadow:0 7px 16px rgba(232,164,11,.18);
}

.site-giraffe-theme .anime-card,.site-giraffe-theme .news-card,
.site-giraffe-theme .side-card,.site-giraffe-theme .editor-card,
.site-giraffe-theme .hl-card,.site-giraffe-theme .stat-box,
.site-giraffe-theme .meta-item,.site-giraffe-theme .day-section,
.site-giraffe-theme .search-result,.site-giraffe-theme .table-wrap{
  border-color:rgba(224,166,22,.20) !important;
}
.site-giraffe-theme .anime-card:hover,.site-giraffe-theme .news-card:hover,
.site-giraffe-theme .editor-card:hover,.site-giraffe-theme .hl-card:hover,
.site-giraffe-theme .search-result:hover{
  border-color:rgba(235,164,0,.48) !important;
  box-shadow:0 14px 32px rgba(190,125,0,.12) !important;
}

.theme-page-index .hero{
  border:1px solid rgba(224,166,22,.22);border-radius:26px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.94),rgba(255,249,216,.88)),
    url('../site-decor/giraffe-ornaments.png') center/760px auto no-repeat !important;
  box-shadow:0 18px 46px rgba(174,115,0,.09);margin:10px 22px 0;overflow:hidden;
}
.theme-page-index .hero::after{
  content:'';position:absolute;left:34px;right:34px;bottom:8px;height:34px;
  background:url('../site-decor/giraffe-ornaments.png') center bottom/690px auto no-repeat;
  opacity:.32;mix-blend-mode:multiply;pointer-events:none;
}
.theme-page-index .hero-mascot img{
  height:232px !important;width:205px;object-fit:contain !important;object-position:center bottom;
  background:transparent;border:0;border-radius:0;padding:0;
  filter:drop-shadow(0 16px 18px rgba(207,143,8,.18));
}
.theme-page-index .qa-card{position:relative;overflow:hidden}
.theme-page-index .qa-card::after{
  content:'';position:absolute;right:12px;top:9px;width:24px;height:24px;
  background:url('../icons/decor/sparkle.svg') center/contain no-repeat;opacity:.34;
}
.theme-page-index .ai-rec{border-color:rgba(224,166,22,.30);background:linear-gradient(135deg,#fffbe7,#fff5c8)}
.theme-page-index .ai-rec .ai-mascot img{width:86px;height:96px;border-radius:0;object-fit:contain;background:transparent;padding:0;filter:drop-shadow(0 8px 9px rgba(207,143,8,.16))}

.site-giraffe-theme .logo img{
  width:58px !important;height:66px !important;border-radius:20px !important;
  object-fit:contain !important;object-position:center bottom;background:transparent;padding:0;
}
.site-giraffe-theme .mascot-card img{
  border-radius:0;background:transparent;object-fit:contain !important;padding:0;
}
.site-giraffe-theme .deco-mascot-jump{
  width:112px!important;height:126px!important;object-fit:contain;
  top:-8px!important;border-radius:0;background:transparent;padding:0;
  filter:drop-shadow(0 12px 14px rgba(201,137,0,.16));
}
.site-giraffe-theme .note,.site-giraffe-theme .tip{
  background:linear-gradient(135deg,#fff5bf,#fffdf3) !important;
  border-color:rgba(238,171,13,.42) !important;
}
.site-giraffe-theme .note img,.site-giraffe-theme .tip img{
  border-radius:0;background:transparent;border:0;padding:0;filter:drop-shadow(0 5px 7px rgba(201,137,0,.14));
}

.theme-page-search .no-results{
  min-height:190px;background:rgba(255,252,236,.82) url('../site-decor/optimized/mascot-6-md.webp') 24% center/112px auto no-repeat;
  border:1px dashed rgba(224,166,22,.35);border-radius:24px;padding-left:170px;
}
.theme-page-calendar .empty{
  min-height:142px;background:rgba(255,252,236,.80) url('../site-decor/optimized/mascot-4-sm.webp') 30% center/88px auto no-repeat;
  border:1px dashed rgba(224,166,22,.30);border-radius:18px;padding-left:120px;
}
.theme-page-tier-workbench .pool-empty{
  background:url('../site-decor/optimized/mascot-6-sm.webp') center 8px/82px auto no-repeat;padding-top:98px;height:190px;
}

@media(max-width:1100px){
  .site-page-mascot{width:88px;height:102px;right:20px}
  .site-giraffe-theme .main.has-site-page-mascot>.page-title,
  .site-giraffe-theme .main.has-site-page-mascot>.container>.page-title{padding-right:112px}
  .theme-page-index .hero{margin:8px 14px 0}
}
@media(max-width:900px){
  .site-top-ornament{width:76%;height:48px;opacity:.08}
  .site-page-mascot{display:none}
  .site-giraffe-theme .main.has-site-page-mascot>.page-title,
  .site-giraffe-theme .main.has-site-page-mascot>.container>.page-title{padding-right:0}
  .theme-page-admin .topbar{padding-right:0}
  .theme-page-index .hero{margin:8px 0 0}
}
@media(max-width:600px){
  .site-ornament-watermark{width:340px;right:-120px;opacity:.035}
  .site-giraffe-theme .page-title::after{width:62px}
  .theme-page-search .no-results,.theme-page-calendar .empty{background-image:none;padding-left:20px}
}

@media(prefers-reduced-motion:no-preference){
  .site-page-mascot{animation:siteMascotFloat 5s ease-in-out infinite}
  @keyframes siteMascotFloat{50%{transform:translateY(-5px) rotate(1deg)}}
}
