/* The same tropical midnight / gold material on both phone pages. */
body:has(:is(#tab-quests,#tab-history):not(.hidden)){
  background:#03100d;
  color:#f1eddf;
}
body:has(:is(#tab-quests,#tab-history):not(.hidden)) .shell:before{
  position:fixed;inset:0;
  width:100%;height:100dvh;
  background:linear-gradient(180deg,#02120b55,#03111280 48%,#020b109e),url('./assets/tropical-forest-v1.png') center 35%/cover no-repeat;
  filter:brightness(.86) saturate(1.05) blur(1px);
  mask-image:none;-webkit-mask-image:none;
}
html{scroll-padding-top:calc(var(--dashboard-height,290px) + max(16px,env(safe-area-inset-top)) + 10px)}
#homeCharacterHost,#historyCharacterHost{
  position:sticky;top:max(16px,env(safe-area-inset-top));z-index:15;
  isolation:isolate;
  margin-inline:-2px;margin-top:-4px;padding:4px 2px 3px;
  border:0;border-bottom:1px solid #c3a75c55;border-radius:0 0 12px 12px;
  background:linear-gradient(125deg,#04160fbb,#071d18a6 52%,#061116cc);
  backdrop-filter:blur(9px) saturate(1.14);-webkit-backdrop-filter:blur(9px) saturate(1.14);
  box-shadow:0 7px 14px #02090580,inset 0 -1px #f0d48714;
}
.character-dashboard .home-status-strip{margin-bottom:5px;background:linear-gradient(115deg,#1b3324ab,#071715c9);box-shadow:inset 0 1px 2px #f9e29a22,0 1px 5px #0005}
#homeQuestList{padding-top:8px}
.character-dashboard .category-stats{background:linear-gradient(115deg,#061b1670,#07131945)}
.character-dashboard .category-meter{background:linear-gradient(#35443b,#172a24);box-shadow:inset 0 1px 2px #0008,inset 0 -1px #d9e4b611}
.character-dashboard .category-meter i{box-shadow:0 0 7px color-mix(in srgb,var(--category) 75%,transparent),inset 0 1px 2px #fff8e666;transition:width .8s cubic-bezier(.2,.65,.25,1)}

/* The filled sectors stay sharp; only the separate rim carries the larger halo. */
.character-dashboard .wheel-slice{filter:saturate(1.24) brightness(1.055)}
.character-dashboard .wheel-halo{stroke-width:7;opacity:.95}
.character-dashboard .wheel-rim{stroke-width:1.4}
.character-dashboard .quest-wheel{box-shadow:0 0 4px #ffedb238,0 0 13px #d8ab3424}
.character-dashboard .quest-wheel:after{
  content:'';display:block;position:absolute;inset:0;border-radius:50%;pointer-events:none;filter:none;
  background:radial-gradient(ellipse at 26% 14%,#fff7d126,transparent 42%),radial-gradient(ellipse at 55% 82%,#ffe89815,transparent 48%);
  box-shadow:inset -3px -5px 8px #03101d38,inset 2px 2px 7px #fff7bf28;
}
.character-dashboard .home-avatar-art{filter:drop-shadow(3px 3px 3px #000b) drop-shadow(0 0 1px #ffebac) drop-shadow(0 0 3px #ffc85b88)}

/* One more expressive idle; the lower body and the planted boot line never transform. */
.character-dashboard .hero-figure{animation:none}
.character-dashboard .idle-body{
  /* Keep both whole boots and knees; carve out the animated dagger arm above 70%. */
  clip-path:polygon(28% 55%,78% 55%,78% 56%,100% 56%,100% 100%,0 100%,0 70%,28% 70%);
  transform:none!important;animation:none!important;
}
.character-dashboard .idle-torso{
  clip-path:polygon(28% 16%,78% 16%,85% 22%,78% 32%,78% 58%,28% 58%);
  transform-origin:50% 58%;
  animation:tropical-hero-breathe 3.8s ease-in-out infinite;
}
.character-dashboard .idle-head{transform-origin:49% 19%;animation:tropical-head-breathe 3.8s ease-in-out infinite}
.character-dashboard .idle-arm-left{transform-origin:27% 25%;animation:tropical-arm-left 4.4s ease-in-out infinite}
.character-dashboard .idle-arm-right{transform-origin:80% 25%;animation:tropical-arm-right 4.9s ease-in-out infinite}
@keyframes tropical-hero-breathe{
  0%,100%{transform:scale(1,1)}
  45%{transform:scale(1.05,1.04)}
  68%{transform:scale(1.028,1.018)}
}
@keyframes tropical-head-breathe{
  0%,100%{transform:translateY(0) rotate(-1.7deg)}
  44%{transform:translateY(-1px) rotate(2.8deg)}
  71%{transform:translateY(-.35px) rotate(.7deg)}
}
@keyframes tropical-arm-left{
  0%,100%{transform:rotate(-1.7deg)}
  40%{transform:rotate(3.2deg)}
  73%{transform:rotate(.8deg)}
}
@keyframes tropical-arm-right{
  0%,100%{transform:rotate(1.5deg)}
  54%{transform:rotate(-3deg)}
  79%{transform:rotate(-.4deg)}
}

/* Translucent, softly layered fire remains attached to both ellipse arcs. */
.character-dashboard .aura-flames>span{
  width:calc(4px + var(--flame-strength,0)*5px);
  height:calc(3px + var(--flame-strength,0)*32px);
  clip-path:none;border-radius:55% 24% 43% 47%;
  background:radial-gradient(ellipse at 50% 84%,#fffbe7bf 0 13%,color-mix(in srgb,currentColor 78%,transparent) 43%,transparent 76%);
  filter:blur(.65px);
  opacity:calc(.012 + var(--flame-strength,0)*.57);
  mix-blend-mode:screen;
  animation:tropical-flame-wave calc(1.45s - var(--flame-strength,0)*.52s) calc(var(--i,0)*-.19s) ease-in-out infinite alternate;
}
.character-dashboard .aura-flames>span:before{
  content:'';position:absolute;inset:5% -24% 0;border-radius:55% 28% 49% 50%;
  background:radial-gradient(ellipse at 45% 78%,currentColor,transparent 70%);
  filter:blur(1.45px);opacity:.3;
}
.character-dashboard .aura-flames>span:after{
  content:'';position:absolute;inset:38% 30% 1%;border-radius:65% 20% 45% 50%;
  background:linear-gradient(0deg,#fffdf1bd,currentColor 48%,transparent);filter:blur(.35px);opacity:.62;
}
.character-dashboard .hero-aura .hero-floor{opacity:.85;filter:drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px color-mix(in srgb,currentColor 42%,transparent))}
.character-dashboard .hero-aura.is-leveling .aura-flames>span{height:39px;width:8px;opacity:.67}
@keyframes tropical-flame-wave{
  0%{transform:translateX(-50%) scale(.78,.7) skewX(-11deg) rotate(-2deg)}
  44%{transform:translateX(-50%) scale(1.08,1.14) skewX(9deg) rotate(2deg)}
  100%{transform:translateX(-50%) scale(.9,.85) skewX(-5deg) rotate(-1deg)}
}

/* History actions and main capture buttons use the same warm gold glass. */
#tab-history .history-controls,
#tab-quests .home-dock .home-capture{
  border-color:#c7a863a6;
  background:linear-gradient(125deg,#2d3627e0,#091b17ec);
  box-shadow:inset 0 1px 3px #ffe8a72f,0 0 10px #0007;
}
#tab-history .history-controls .sm-btn,
.home-capture button:not(.capture-prompt){
  border-color:#d4b86d;
  background:linear-gradient(135deg,#705a3482,#16241bd9);
  color:#f3d996;
  box-shadow:inset 0 1px 5px #f7dc9c38,0 0 5px #d5ad3e20;
}
#tab-history .history-controls .sm-btn svg{color:inherit}
#tab-history .history-controls .sm-btn:hover,
.home-capture button:not(.capture-prompt):hover{background:linear-gradient(135deg,#8c713e99,#243221);border-color:#f3d789}
#tab-history .history-controls .sm-btn:active,
.home-capture button:not(.capture-prompt):active{box-shadow:inset 0 2px 5px #0005,0 0 8px #f0c85933}

/* Reward notice is visual feedback, never a blocking dialog. */
.reward-backdrop{
  position:fixed;inset:0;z-index:31;pointer-events:none;
  background:#020b0926;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:1;transition:opacity .22s ease;
}
.reward-popup{
  position:fixed;z-index:32;left:50%;top:44%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:360px;box-sizing:border-box;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 17px;
  padding:20px 22px 22px;text-align:center;pointer-events:none;
  border:1px solid #e6c77ca8;border-radius:19px;
  color:#fff2cc;background:radial-gradient(ellipse at 18% 0,#b49a5133,transparent 60%),linear-gradient(145deg,#304038d9,#10221fe6);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 0 26px #d4ae4538,inset 0 1px 3px #fff1be59,0 18px 45px #0006;
  animation:tropical-reward-in .32s cubic-bezier(.18,.8,.2,1) both;
}
.reward-popup .reward-symbol{display:block;flex-basis:100%;font-size:31px;line-height:1;color:#f3d17c;text-shadow:0 0 10px #ffe49566}
.reward-popup .reward-symbol svg{display:block;width:32px;height:32px;margin:auto}
.reward-popup .reward-title{flex-basis:100%;margin:1px 0 4px;font:400 22px/1.2 Georgia,serif;overflow-wrap:anywhere;color:#fff1c9}
.reward-popup .reward-xp,.reward-popup .reward-gold{display:inline-flex;align-items:baseline;gap:5px;margin:0;color:#e7d8ad;font:13px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.reward-popup #rewardXp,.reward-popup #rewardGold{color:#fff1b9;font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.reward-popup.is-leaving{animation:tropical-reward-out .22s ease both}
.reward-backdrop.is-leaving{opacity:0}
@keyframes tropical-reward-in{from{opacity:0;translate:0 13px;scale:.95}to{opacity:1;translate:0 0;scale:1}}
@keyframes tropical-reward-out{from{opacity:1;translate:0 0;scale:1}to{opacity:0;translate:0 -9px;scale:.985}}

/* A separate handle keeps scrolling and opening quests predictable on a phone. */
.home-quest{position:relative;scroll-margin-top:calc(var(--dashboard-height,290px) + max(16px,env(safe-area-inset-top)) + 10px)}
#tab-quests .home-quest:has(>.quest-drag-handle) .quest-expand{padding-right:55px}
.quest-drag-handle{
  display:grid;place-items:center;position:absolute;right:3px;top:5px;z-index:3;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:6px;
  border:1px solid #b59c5644;border-radius:7px;background:linear-gradient(#7c734622,#10231b44);
  color:#d4bf83;font:23px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
.quest-drag-handle svg{width:22px;height:22px}
.quest-drag-handle:focus-visible{outline:2px solid #ffe4a1;outline-offset:2px}
.quest-drag-handle:active{cursor:grabbing;color:#fff0b7;background:#8f773244}
.home-quest.is-dragging{z-index:18;border-color:#ffe29c;box-shadow:0 9px 22px #0009,0 0 13px #f7d58155;opacity:.9}
.home-quest.drag-over{border-color:#eed28b;box-shadow:inset 0 0 13px #e9c56d24,0 0 8px #dbb15144}

@media(prefers-reduced-motion:reduce){
  .character-dashboard .idle-torso,.character-dashboard .idle-head,
  .character-dashboard .idle-arm-left,.character-dashboard .idle-arm-right{animation:none!important;transform:none!important}
  .character-dashboard .aura-flames>span{animation:none!important;transform:translateX(-50%);height:calc(1px + var(--flame-strength,0)*12px);opacity:calc(var(--flame-strength,0)*.3)}
  .reward-popup,.reward-backdrop{animation:none!important;transition:none!important}
  .reward-popup.is-leaving,.reward-backdrop.is-leaving{opacity:0}
}