:root{color-scheme:dark;--bg:#080d14;--text:#f4f8fb;--muted:rgba(239,246,252,.58);--line:rgba(255,255,255,.12);--joey:#ef9e67;--kevin:#72d1cf;--farmer:#98c49b;--gold:#e3c47b;--q-poor:#9d9d9d;--q-common:#f4f8fb;--q-uncommon:#62e36b;--q-rare:#5aa5ff;--q-epic:#c07cff;--q-legendary:#ff8000;--tier-s:#ffb454;--tier-a:#72d1cf;--tier-b:#7fb2ff;--tier-c:#b39cff;--tier-d:#8a95a1;font-family:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans L",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button,a{font:inherit}.backgrounds,.background-shade{position:fixed;inset:0;pointer-events:none}.backgrounds{z-index:-3;background:#08101a}.bg{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 2.2s ease;will-change:opacity}.bg.active{opacity:.58}.background-shade{z-index:-2;background:radial-gradient(circle at 18% 4%,rgba(103,198,255,.12),transparent 24%),radial-gradient(circle at 82% 10%,rgba(255,188,119,.10),transparent 22%),linear-gradient(180deg,rgba(7,12,20,.48),rgba(7,12,20,.78) 34%,#080d14 76%)}
.liquid-glass{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 42%,rgba(255,255,255,.07));backdrop-filter:blur(30px) saturate(1.35);-webkit-backdrop-filter:blur(30px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.04),0 18px 70px rgba(0,0,0,.20)}.liquid-glass:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 28%,transparent 72%,rgba(255,255,255,.04))}.liquid-glass>*{position:relative;z-index:1}.top-shell{position:sticky;top:0;z-index:50;max-width:1500px;margin:0 auto;padding:12px 18px 0}.topbar{height:56px;border-radius:20px;padding:0 14px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:14px}.liquid-button{position:relative;border:0;border-radius:999px;background:transparent;color:#fff;height:38px;padding:0 16px;cursor:pointer;isolation:isolate;transition:transform .25s ease,filter .25s ease}.liquid-button:before,.liquid-button:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1}.liquid-button:before{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.20)}.liquid-button:after{inset:1px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 48%,rgba(255,255,255,.07))}.liquid-button:hover{transform:scale(1.025);filter:brightness(1.08)}.liquid-button span{position:relative;z-index:2;font-size:12px;font-weight:650}
.site-shell{max-width:1500px;margin:0 auto;padding:0 18px 72px}.hero{min-height:64vh;display:grid;place-items:center;padding:70px 0 40px}.hero-inner{text-align:center;max-width:1000px;margin:auto}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.47)}.overline{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--muted)}.glass-card h3{margin:8px 0 12px;font-size:19px;letter-spacing:-.03em}.glass-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:12px}.glass-card dt{color:rgba(255,255,255,.5)}.glass-card dd{margin:0;text-align:right;color:rgba(255,255,255,.83);font-weight:600}
.guide-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:start}.guide-nav-wrap{position:relative}.guide-content{min-width:0}.guide-section{border-top:1px solid rgba(255,255,255,.10);padding:36px 0}.section-head{display:grid;grid-template-columns:35px 1fr;gap:12px;margin-bottom:17px}.section-head>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.055);font-size:11px;font-weight:800;color:var(--muted)}.section-head h2{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.045em;font-weight:650}.section-head p{max-width:780px;margin:5px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.50)}.cards-2,.cards-3{display:grid;gap:12px}.cards-2{grid-template-columns:repeat(2,1fr)}.cards-3{grid-template-columns:repeat(3,1fr)}.glass-card{position:relative;overflow:hidden;padding:16px 17px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.032));backdrop-filter:blur(22px) saturate(1.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 18px 60px rgba(0,0,0,.11)}.glass-card>*{position:relative}.glass-card.accent-joey{box-shadow:inset 3px 0 0 rgba(239,158,103,.75),inset 0 1px 0 rgba(255,255,255,.13),0 18px 60px rgba(0,0,0,.11)}.glass-card.accent-kevin{box-shadow:inset 3px 0 0 rgba(114,209,207,.75),inset 0 1px 0 rgba(255,255,255,.13),0 18px 60px rgba(0,0,0,.11)}.glass-card.accent-farmer{box-shadow:inset 3px 0 0 rgba(152,196,155,.75),inset 0 1px 0 rgba(255,255,255,.13),0 18px 60px rgba(0,0,0,.11)}.glass-card p,.glass-card li{font-size:13px;line-height:1.55;color:rgba(241,247,251,.69)}.glass-card p{margin:0}.glass-card ul{margin:8px 0 0;padding-left:18px}.glass-card li+li{margin-top:5px}.rotation{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:3px 0 12px}.rotation b{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16);border-radius:9px;padding:6px 8px;font-size:12px}.rotation i{font-style:normal;color:rgba(255,255,255,.28)}.info-bar,.warning-bar{margin-top:12px;border-radius:14px;padding:11px 13px;font-size:12px;line-height:1.5}.info-bar{border:1px solid rgba(104,185,235,.21);background:rgba(49,118,160,.11);color:rgba(216,239,255,.82)}.warning-bar{border:1px solid rgba(228,187,106,.22);background:rgba(140,100,27,.11);color:rgba(255,234,190,.85)}details{margin-top:12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04);overflow:hidden}summary{cursor:pointer;list-style:none;padding:11px 13px;font-size:12px;font-weight:650}summary::-webkit-details-marker{display:none}.details-body{border-top:1px solid rgba(255,255,255,.08);padding:9px 13px}.details-body p{margin:4px 0;font-size:12px;color:rgba(255,255,255,.58)}table{width:100%;border-collapse:collapse;min-width:690px;font-size:12px}th,td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}th{font-size:10px;letter-spacing:.03em;color:rgba(255,255,255,.46);background:rgba(255,255,255,.025)}td{color:rgba(241,247,251,.69)}tr:last-child td{border-bottom:0}footer{max-width:1500px;margin:auto;padding:0 18px 36px;text-align:center;font-size:10px;color:rgba(255,255,255,.30)}.anchor{scroll-margin-top:110px}
@media(max-width:1020px){.guide-layout{grid-template-columns:1fr}.guide-nav-wrap{display:none}}@media(max-width:760px){.top-shell,.site-shell{padding-left:10px;padding-right:10px}.topbar{height:54px}.brand strong{font-size:13px}.hero{min-height:72vh;padding-top:55px}.cards-2,.cards-3{grid-template-columns:1fr}.guide-section{padding:28px 0}.section-head{grid-template-columns:31px 1fr}.section-head>span{width:30px;height:30px}.liquid-button{height:36px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bg:not(.active){display:none}}

/* Visibility pass: bigger type, clearer hierarchy, Maxroll-like scan speed. */
html{font-size:16px}.topbar{height:64px}.brand{font-size:16px}.liquid-button{height:44px;padding:0 19px}.liquid-button span{font-size:14px}.eyebrow{font-size:13px}.overline{font-size:12px}.glass-card h3{font-size:25px;line-height:1.15}.glass-card dl{gap:11px 18px;font-size:16px}.guide-layout{grid-template-columns:260px minmax(0,1fr);gap:36px}.guide-section{padding:64px 0}.section-head{grid-template-columns:48px 1fr;gap:15px;margin-bottom:24px}.section-head>span{width:46px;height:46px;border-radius:13px;font-size:14px}.section-head h2{font-size:clamp(36px,4vw,54px);font-weight:700;line-height:1.05}.section-head p{max-width:920px;margin-top:8px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.63)}.cards-2,.cards-3{gap:16px}.glass-card{padding:23px 24px;border-radius:22px}.glass-card p,.glass-card li{font-size:16px;line-height:1.65;color:rgba(241,247,251,.77)}.glass-card ul{margin-top:11px;padding-left:21px}.glass-card li+li{margin-top:7px}.rotation{gap:9px;margin:6px 0 16px}.rotation b{padding:9px 11px;border-radius:11px;font-size:16px}.info-bar,.warning-bar{margin-top:var(--jr-gap);border-radius:17px;padding:15px 17px;font-size:16px;line-height:1.6}details{margin-top:var(--jr-gap);border-radius:17px}summary{padding:15px 17px;font-size:16px}.details-body{padding:12px 17px}.details-body p{margin:6px 0;font-size:15px;line-height:1.6}table{min-width:780px;font-size:16px}th,td{padding:15px 16px}th{font-size:13px}td{line-height:1.55}footer{font-size:12px}
@media(max-width:1100px){.guide-layout{grid-template-columns:1fr}}
@media(max-width:760px){.glass-card h3{font-size:22px}.guide-section{padding:48px 0}.section-head{grid-template-columns:40px minmax(0,1fr)}.section-head>span{width:38px;height:38px}.section-head h2{font-size:36px}.section-head p{font-size:16px}.glass-card{padding:19px}.glass-card p,.glass-card li{font-size:16px}table{font-size:15px}}


/* Final polish: Maxroll reading flow, restrained liquid glass, lower compositor cost. */
html{font-size:18px}
body{font-size:18px;line-height:1.62}
.background-shade{background:linear-gradient(180deg,rgba(5,10,17,.43),rgba(5,10,17,.80) 30%,#080d14 72%),radial-gradient(circle at 20% 6%,rgba(92,174,227,.10),transparent 23%),radial-gradient(circle at 82% 8%,rgba(227,169,104,.08),transparent 22%)}
.bg{transition:opacity 1.4s ease;will-change:auto}.bg.active{opacity:.50}
.liquid-glass{backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(20,30,42,.78) 45%,rgba(255,255,255,.045))}
.liquid-button:before{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero{min-height:58vh;padding:76px 0 54px}.hero-inner{max-width:1120px}
.guide-layout{grid-template-columns:280px minmax(0,1fr);gap:42px}
.guide-section{padding:70px 0}.section-head{grid-template-columns:52px 1fr;gap:17px;margin-bottom:28px}.section-head>span{width:50px;height:50px;font-size:15px}.section-head h2{font-size:clamp(42px,4.2vw,58px);line-height:1.02}.section-head p{max-width:980px;font-size:19px;line-height:1.55;color:rgba(255,255,255,.70)}
.cards-2,.cards-3{gap:18px}.glass-card{padding:27px 28px;background:rgba(17,27,38,.92);backdrop-filter:none;-webkit-backdrop-filter:none}.glass-card h3{font-size:27px}.glass-card p,.glass-card li{font-size:18px;line-height:1.65;color:rgba(244,248,251,.84)}.overline{font-size:13px}.rotation{gap:10px;margin:8px 0 18px}.rotation b{font-size:18px;padding:11px 13px}.info-bar,.warning-bar{font-size:17px;line-height:1.6;padding:16px var(--jr-pad);background:rgba(16,27,38,.92)}
summary{font-size:17px;padding:16px var(--jr-pad)}.details-body{padding:16px var(--jr-pad)}.details-body p,.details-body li{font-size:16px;line-height:1.6}
.profession-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.profession-card,.secondary-card{padding:24px 25px;border:1px solid rgba(255,255,255,.11);border-radius:21px;background:rgba(17,27,38,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}.profession-card.accent-joey{box-shadow:inset 3px 0 0 rgba(239,158,103,.78),inset 0 1px 0 rgba(255,255,255,.09)}.profession-card.accent-kevin{box-shadow:inset 3px 0 0 rgba(114,209,207,.78),inset 0 1px 0 rgba(255,255,255,.09)}.profession-card.accent-farmer{box-shadow:inset 3px 0 0 rgba(152,196,155,.78),inset 0 1px 0 rgba(255,255,255,.09)}.profession-card h3,.secondary-card h3{margin:8px 0 12px;font-size:25px;line-height:1.15}.profession-card p,.secondary-card p{font-size:17px;line-height:1.62;color:rgba(244,248,251,.82)}.profession-link{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);font-size:15px;color:rgba(255,255,255,.58)}.secondary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--jr-gap)}table{font-size:17px}th{font-size:14px}th,td{padding:16px}td{line-height:1.6}
footer{font-size:13px}
.reveal{transform:translateY(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media(max-width:1100px){.guide-layout{grid-template-columns:1fr}.profession-grid,.secondary-grid{grid-template-columns:1fr}}
@media(max-width:760px){html{font-size:17px}.hero{min-height:auto;padding:66px 0 44px}.section-head{grid-template-columns:44px minmax(0,1fr)}.section-head>span{width:42px;height:42px}.section-head h2{font-size:39px}.section-head p{font-size:18px}.guide-section{padding:54px 0}.glass-card,.profession-card,.secondary-card{padding:22px}.glass-card p,.glass-card li,.profession-card p,.secondary-card p{font-size:17px}.rotation b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.reveal{transform:none}}

/* Guide first: the deploy build skips the decorative scroll demo. */
.guide-layout{margin-top:10px}

/* Maxroll-style icon layer */
.wow-icon-wrap{
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.24);
  color:rgba(255,255,255,.52);
  font-weight:800;
}
.wow-icon-wrap::before{content:attr(data-fallback);content:attr(data-fallback) / "";position:absolute;inset:0;display:grid;place-items:center;font-size:.78em}
.wow-icon{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.wow-icon-xs{width:28px;height:28px;border-radius:7px}
.wow-icon-sm{width:38px;height:38px;border-radius:9px}
.wow-icon-lg{width:56px;height:56px;border-radius:12px}
.wow-icon-skill{width:42px;height:42px;border-radius:8px}
.glass-card>.wow-icon-wrap,.secondary-card>.wow-icon-wrap{margin-bottom:14px}
.title-icon-row{display:flex;align-items:center;gap:12px}.title-icon-row>span:last-child{min-width:0;overflow-wrap:anywhere}
.icon-stack{display:flex;align-items:center}
.icon-stack .wow-icon-wrap+ .wow-icon-wrap{margin-left:-8px}
.profession-card h3{margin-top:10px}

.rotation{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 20px}
.skill-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 11px 8px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(7,13,21,.72);
  color:#fff;
  font-size:17px;
  font-weight:700;
  line-height:1;
}
.glass-card li>.wow-icon-wrap{vertical-align:middle;margin-right:9px;margin-top:-2px}
.daily-icons{display:flex;align-items:center;gap:7px}
.daily-icons{margin-bottom:10px}
.daily-icons .wow-icon-wrap+ .wow-icon-wrap{margin-left:-3px}

@media(max-width:760px){
  .wow-icon-lg{width:50px;height:50px}
  .wow-icon-skill{width:38px;height:38px}
  .skill-pill{font-size:16px}
  .rotation{gap:8px}
}

/* Lightweight interaction pass */

.topbar,.liquid-button{transition:height .32s cubic-bezier(.22,.8,.24,1),transform .32s cubic-bezier(.22,.8,.24,1),background-color .32s ease,border-color .32s ease}
.nav-compact .topbar{height:54px;background:rgba(8,13,20,.78)}
.nav-compact .top-shell{padding-top:8px}

.motion-card{position:relative;overflow:hidden;transform:translateZ(0)}
.motion-card::after{content:"";position:absolute;top:-35%;bottom:-35%;left:-38%;width:30%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg) translateX(-240%);opacity:0;z-index:4}
@media(hover:hover) and (pointer:fine){
  .motion-card.entered:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20);box-shadow:0 20px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.12)}
  .motion-card.entered:hover::after{opacity:1;transform:skewX(-18deg) translateX(560%);transition:transform .8s cubic-bezier(.2,.65,.25,1),opacity .18s ease}
}

.guide-section .section-head>span{transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease,transform .28s ease}
.guide-section.section-current .section-head>span{color:#fff;border-color:var(--muted);background:linear-gradient(145deg,rgba(114,209,207,.18),rgba(239,158,103,.15));box-shadow:0 0 0 4px rgba(255,255,255,.025),0 10px 30px rgba(0,0,0,.16);transform:translateY(-2px)}

.skill-pill{transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.skill-pill .wow-icon{transition:transform .24s cubic-bezier(.22,.8,.24,1)}
@media(hover:hover){
  .skill-pill:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.23);background:rgba(255,255,255,.075);box-shadow:0 12px 28px rgba(0,0,0,.18)}
  .skill-pill:hover .wow-icon{transform:scale(1.08)}
}

.todo-status{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;margin:0 0 var(--jr-gap);max-width:520px}
.todo-status>span{color:rgba(255,255,255,.48);font-size:13px;font-weight:800;letter-spacing:.10em;text-transform:uppercase}
.todo-status p{grid-column:1/-1;margin:2px 0 0;font-size:16px;color:var(--muted)}
.todo-status strong{justify-self:end;font-size:15px;font-weight:700}
.todo-meter{grid-column:1/-1;height:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}
.todo-meter i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--farmer),var(--kevin),var(--gold));transition:transform .32s cubic-bezier(.22,.8,.24,1)}
.daily-step{position:relative;transition:border-color .24s ease,background .24s ease,transform .24s ease,opacity .24s ease}
.daily-step.step-current{border-color:rgba(255,255,255,.24);background:rgba(22,31,42,.97)}
.daily-step.task-done{border-color:rgba(152,196,155,.22)}
.daily-step.task-done h3{color:var(--text)}
.daily-check{position:absolute;right:18px;top:18px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.055);color:rgba(255,255,255,.28);cursor:pointer;z-index:5;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.daily-check:hover{transform:scale(1.06);color:#fff;border-color:rgba(255,255,255,.28)}
.daily-check:active{transform:scale(.94)}
.task-done .daily-check{color:#0c1510;background:var(--farmer);border-color:rgba(255,255,255,.30)}
.daily-icons,.daily-meta,.daily-step h3{padding-right:46px}

.wow-icon-wrap{transition:transform .22s cubic-bezier(.22,.8,.24,1),box-shadow .22s ease}
@media(hover:hover){
  .glass-card:hover>.wow-icon-wrap,.profession-card:hover .wow-icon-wrap,.secondary-card:hover>.wow-icon-wrap{transform:translateY(-2px) rotate(-1deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.28)}
}

@media(max-width:760px){
  .daily-check{right:calc(var(--jr-pad) - 5px);top:calc(var(--jr-pad) - 5px)}
  .motion-card::after{display:none}
}

/* Header cleanup */

/* Legacy tooltips */

/* Dedup pass: the daily list is now an action list, not a second guide */
#ablauf.reveal .daily-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#ablauf.reveal .daily-step{min-height:210px}
@media(max-width:820px){
  #ablauf.reveal .daily-flow-grid{grid-template-columns:1fr}
  #ablauf.reveal .daily-step{min-height:0}
}

/* Buildbook */
.buildbook{margin:18px auto 34px;max-width:1280px;padding:0 10px;scroll-margin-top:120px}
.accent-joey{box-shadow:inset 0 3px 0 rgba(239,158,103,.65)}.accent-kevin{box-shadow:inset 0 3px 0 rgba(114,209,207,.65)}.accent-farmer{box-shadow:inset 0 3px 0 rgba(152,196,155,.65)}

/* Global popover: outside cards, never clipped */
.global-popover{position:fixed;z-index:9999;width:min(380px,calc(100vw - 24px));padding:16px 17px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:linear-gradient(145deg,rgba(34,45,58,.97),rgba(17,25,34,.97));box-shadow:0 24px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);opacity:0;transform:translateY(7px) scale(.985);pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.global-popover.visible{opacity:1;transform:translateY(0) scale(1)}
#global-popover-title{display:block;margin-bottom:5px;font-size:16px;color:#fff}#global-popover-body{margin:0;color:rgba(238,244,247,.78);font-size:15px;line-height:1.55}

/* Apple-style floating dock */
.floating-dock{position:fixed;left:50%;bottom:18px;z-index:900;display:flex;align-items:flex-end;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:linear-gradient(145deg,rgba(38,50,63,.72),rgba(16,23,31,.76));box-shadow:0 20px 55px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);transform:translateX(-50%)}
.dock-item{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.72);transform-origin:center bottom;transition:width .16s ease,height .16s ease,transform .16s ease,background .16s ease,color .16s ease}
.dock-item svg{width:52%;height:52%}.dock-item::before{content:attr(data-dock-label);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,6px);padding:6px 8px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(15,22,30,.96);box-shadow:0 10px 30px rgba(0,0,0,.3);color:#fff;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease}.dock-item:focus-visible::before{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){.dock-item:hover::before{opacity:1;transform:translate(-50%,0)}}
.dock-item:focus-visible{color:#fff;background:rgba(255,255,255,.09);outline:none}
@media(hover:hover) and (pointer:fine){.dock-item:hover{color:#fff;background:rgba(255,255,255,.09);outline:none}}

/* Book replaces repetitive explanation */

@media(max-width:900px){
  .floating-dock{bottom:10px;gap:5px;padding:7px 8px}.dock-item{width:40px;height:40px;border-radius:12px}
}
@media(max-width:700px){
  .buildbook{padding:0}.global-popover{backdrop-filter:none;-webkit-backdrop-filter:none}.floating-dock{width:calc(100vw - 20px);justify-content:center;overflow-x:auto}.dock-item{flex:0 0 40px}
}
@media(prefers-reduced-motion:reduce){
  .global-popover,.dock-item,.dock-item::before{transition:none!important}
}

/* Floating dock replaces the former mobile tab strip */

/* Semantic icon pass: player icons identify people, topic icons identify actions */
.daily-step .wow-icon-wrap{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(0,0,0,.22);
}
.daily-step .daily-icons{
  min-height:30px;
}

/* v10 information layer */
.skill-pill[data-popover-title],#kampf.reveal .combat-tip,.stat-chip,.mini-info{
  cursor:help;
}
.skill-info-dot{
  display:inline-grid;
  place-items:center;
  width:18px;height:18px;
  margin-left:2px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.58);
  font-style:normal;
  font-size:10px;
  font-weight:800;
}
#kampf.reveal .combat-tip{
  width:100%;border:0;background:transparent;color:inherit;text-align:left;font:inherit;vertical-align:top;
  border-radius:9px;
  padding:5px 7px 5px 0;
}
#kampf.reveal .combat-tip>.wow-icon-wrap{vertical-align:middle;margin-right:8px}
#kampf.reveal .combat-tip:hover{
  color:#fff;
}
.stat-chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#eef4f7;
  border-radius:999px;
  padding:5px 9px;
  margin:2px 5px 2px 0;
  font-size:16px;
  font-weight:700;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.stat-chip:focus-visible{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
  outline:none;
}
@media(hover:hover) and (pointer:fine){.stat-chip:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
  outline:none;
}}
@media(pointer:coarse){.stat-chip,.combat-tip{min-height:44px}}
.profession-grid{
  align-items:stretch;
}
.profession-card{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  min-height:100%;
}
.profession-card h3{min-height:76px}
.profession-body{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.profession-row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:14px;
  align-items:start;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.profession-row strong{font-size:15px}
.profession-row span{font-size:15px;line-height:1.48;color:rgba(238,244,247,.72)}
.profession-link{
  align-self:end;
  min-height:58px;
  display:flex;
  align-items:center;
  margin-top:12px;
}
.camp-bonus-row{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(238,244,247,.68);
  font-size:14px;
  font-weight:700;
}
.camp-bonus-row>span{min-width:0;overflow-wrap:break-word;hyphens:auto}
.mini-info{
  width:30px;height:30px;
  display:grid;place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:12px;
  font-weight:800;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.mini-info:focus-visible{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:scale(1.05);
  outline:none;
}
@media(hover:hover) and (pointer:fine){.mini-info:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  transform:scale(1.05);
  outline:none;
}}
#lager.reveal .cards-3{align-items:stretch}
#lager.reveal .glass-card{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
#lager.reveal .glass-card h3{min-height:64px}
#lager.reveal .glass-card p{font-size:16px;line-height:1.5}
#beute.reveal dd{display:flex;flex-wrap:wrap;align-items:center}
@media(max-width:900px){
  .profession-card h3,#lager.reveal .glass-card h3{min-height:0}
  .profession-row{grid-template-columns:1fr;gap:4px}
  .profession-link{min-height:0}
}

/* =========================================================
   v12 layout-stable foundation
   ========================================================= */
:root{
  --jr-shell:1500px;
  --jr-content:1240px;
}

/* HEADER + DOCK */
.top-shell{
  max-width:var(--jr-shell);
  padding:12px 18px 0;
}
.topbar{
  min-height:72px;
  height:auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  overflow:visible;
  padding:8px 12px;
}
.brand{white-space:nowrap}
.floating-dock{
  position:static;
  left:auto;
  bottom:auto;
  transform:none;
  justify-self:center;
  z-index:3;
  gap:6px;
  padding:6px 8px;
  border-radius:17px;
  background:rgba(17,25,34,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}
.dock-item{
  width:40px;
  height:40px;
  border-radius:11px;
}
.dock-item svg{width:20px;height:20px}
.dock-item::before{bottom:-34px}
.nav-compact .topbar{min-height:64px;height:auto}
.nav-compact .top-shell{padding-top:8px}

/* HERO: never clip the domain */
.hero{
  min-height:58vh;
  overflow:visible;
  padding:72px 0 48px;
}
.hero-inner{
  width:100%;
  max-width:1280px;
  padding:0 34px;
  overflow:visible;
}

/* GLOBAL GUIDE RHYTHM */
.site-shell{max-width:var(--jr-shell);padding:0 18px 64px}
.buildbook{
  max-width:var(--jr-content);
  margin:0 auto;
  padding:0 0 var(--jr-section-y);
}
.guide-layout{
  max-width:var(--jr-content);
  margin:0 auto;
  grid-template-columns:210px minmax(0,1fr);
  gap:34px;
}
.guide-section{
  padding:var(--jr-section-y) 0;
}
.section-head{
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  margin-bottom:var(--jr-head-gap);
}
.section-head>span{
  width:42px;
  height:42px;
  border-radius:13px;
}
.section-head h2{
  font-size:clamp(38px,4.2vw,58px);
  line-height:1;
  overflow-wrap:break-word;
  hyphens:auto;
}
.section-head p{
  max-width:var(--jr-measure);
  margin-top:8px;
  font-size:18px;
  line-height:1.55;
}

/* Equal rhythm for the three secondary profession cards */
.secondary-card.aligned-card{
  display:grid;
  grid-template-rows:58px 22px minmax(92px,auto) 1fr;
  align-content:start;
  height:100%;
}
.secondary-card.aligned-card>.wow-icon-wrap{margin:0}
.secondary-card.aligned-card>.overline{align-self:center}
.secondary-card.aligned-card>h3{
  margin:8px 0 14px;
  align-self:start;
}
.secondary-card.aligned-card>p{
  margin:0;
  align-self:start;
}

/* POPOVER: one consistent overlay for skills, stats, buildbook, camp */
.global-popover{
  width:min(390px,calc(100vw - 24px));
  padding:16px 17px;
  border-radius:16px;
  z-index:99999;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  transform:translateY(7px) scale(.985);
}
.popover-content{max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* Multi-line game tooltips (pet bonuses, seal effects) keep their line breaks. */
#global-popover-body{white-space:pre-line}
.global-popover.visible:not(.interactive){pointer-events:none}
.global-popover.visible{
  pointer-events:auto;
  visibility:visible;
  opacity:1;
  transform:translateY(0) scale(1);
}
.global-popover::after{
  pointer-events:none;
  content:"";
  position:absolute;
  width:9px;height:9px;
  background:rgba(28,38,50,.98);
  transform:rotate(45deg);
  border-left:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  left:var(--popover-arrow-x,50%);
  bottom:-5px;
}
.global-popover[data-placement="below"]::after{
  top:-5px;
  bottom:auto;
  transform:rotate(225deg);
}
/* Beside its trigger, tree or menu the popover points at nothing in particular. */
.global-popover[data-placement="beside"]::after{display:none}
/* Tooltip cards (data-tip, see jokeroll.v23.js): the client tooltip of an item, spell or talent, or a class or spec card,
   in the site's look: opaque, a thin gold top line, icon frame and name in the quality or class colour (--tip), lines in
   the client's colours, the site's own text under it as a separate note. Every colour reaches 4.5:1 on the card. */
.global-popover.has-tip{border-top:2px solid var(--gold)}
.global-popover.has-tip[data-placement="below"]::after{border-color:var(--gold)}
.has-tip #global-popover-title{display:none}
.has-tip #global-popover-body:not(:empty){margin-top:12px}
.tip:empty{display:none}
.tip-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.tip-icon.wow-icon-wrap{width:40px;height:40px;border:2px solid var(--tip);border-radius:9px;box-shadow:none;font-size:16px}
.tip-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;line-height:1.3}
.tip-name{font-size:17px;font-weight:750;color:var(--tip);overflow-wrap:break-word}
.tip-role{flex-basis:100%;font-size:14px;color:var(--muted)}
.tip-rank{font-size:14px;color:var(--muted);white-space:nowrap}
.tip-lines{display:grid;gap:4px;margin-top:12px}
.tip-lines>p{margin:0;font-size:16px;line-height:1.45;color:#eef4f7;overflow-wrap:break-word}
.tip-pair{display:flex;justify-content:space-between;gap:12px}
.tip-pair>span:last-child{text-align:right}
.tip-lines>.tip-beschreibung{margin-top:4px}
.tip-lines>.tip-gruen{color:var(--q-uncommon)}
.tip-lines>:is(.tip-gold,.tip-beschreibung){color:var(--gold)}
.tip-lines>:is(.tip-bedingung,.tip-grau,.tip-preis){font-size:14px;line-height:1.4}
.tip-lines>:is(.tip-bedingung,.tip-preis){color:var(--muted)}
.tip-lines>.tip-grau{color:var(--q-poor)}
.tip-lines>.tip-rot{color:#ff9f8f}
.tip-lines>.tip-material{color:#66bbff}
.tip-lines>.tip-q3{color:var(--q-rare)}
.tip-lines>.tip-q4{color:var(--q-epic)}
.tip-lines>.tip-q5{color:var(--q-legendary)}
.tip-coins b{font-weight:800}
.coin-G{color:var(--gold)}
.coin-S{color:#c7ccd1}
.coin-K{color:#d6955b}
.tip-tiers{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.tip-verdict{margin:12px 0 0;font-size:16px;line-height:1.45;color:#eef4f7}
.tip-hint{margin:8px 0 0;font-size:16px;font-weight:750;color:var(--tip)}
.tip-note{margin:12px 0 -8px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;font-weight:750;color:var(--accent,var(--kevin))}
/* One tier badge everywhere: cards, guide hero, class cards, start page previews. */
.tier-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;color:#0d141b;font-size:13px;font-weight:900;line-height:1}
.tier-badge.tier-S{background:var(--tier-s)}.tier-badge.tier-A{background:var(--tier-a)}.tier-badge.tier-B{background:var(--tier-b)}.tier-badge.tier-C{background:var(--tier-c)}.tier-badge.tier-D{background:var(--tier-d)}
.tier-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 4px 3px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);font-size:14px;font-weight:750;color:rgba(238,244,247,.86);white-space:nowrap}
/* A symbol with a card shows it on hover; bare symbols say so with the help cursor and a lighter frame. */
[data-tip]:not(a,button,[role="button"],.talent-node,:is(a,button,[role="button"]) *){cursor:help}
@media(hover:hover) and (pointer:fine){.wow-icon-wrap[data-tip]:hover{border-color:rgba(255,255,255,.45)}}
.skill-pill[data-popover-title],
#kampf.reveal .combat-tip,
.stat-chip,
.mini-info{
  cursor:pointer;
}
body :is(a,button,summary,[role="button"]):focus-visible{
  outline:2px solid var(--kevin);
  outline-offset:3px;
}
/* J23: a pinned trigger takes the page accent; the Duo guide has none and stays turquoise. */
body [data-popover-title][aria-expanded="true"]{
  border-color:var(--accent,var(--kevin));
}
body details:not(.site-menu)>summary:focus-visible{outline-offset:-4px;border-radius:16px}
@media(hover:hover){details:not(.site-menu)>summary:hover{background:rgba(255,255,255,.04)}}
.skip-link{
  position:fixed;top:12px;left:16px;z-index:100000;
  padding:10px 16px;border-radius:12px;background:var(--bg);color:var(--text);
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0)}
summary{display:flex;align-items:center;gap:12px}
summary::after{content:"+";content:"+" / "";margin-left:auto;font-size:20px;color:var(--kevin)}
details[open]>summary::after{content:"−";content:"−" / ""}
/* keep book/dock from obscuring following sections */
.buildbook + .guide-layout{margin-top:8px}

/* mobile: dock stays in header, second row */
@media(max-width:900px){
  .topbar{
    grid-template-columns:auto auto;
    gap:8px;
  }
  .floating-dock{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    justify-content:center;
    overflow-x:auto;
  }
  .dock-item{flex:0 0 38px;width:38px;height:38px}
  .topbar>.liquid-button{justify-self:end}
  .guide-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .site-shell{padding-left:16px;padding-right:16px;padding-bottom:48px}
  .hero{min-height:52vh;padding:58px 0 34px}
  .hero-inner{padding:0 8px}
  .section-head{grid-template-columns:40px minmax(0,1fr)}
  .section-head h2{font-size:39px}
  .section-head p{font-size:17px}
}
/* Numbered section heads (Duo guide): on small phones the intro uses the full width below the number and title. */
@media(max-width:560px){
  .section-head:has(>span){row-gap:8px;align-items:center}
  .section-head:has(>span)>div{display:contents}
  .section-head:has(>span) h2{grid-column:2}
  .section-head:has(>span)>div>p{grid-column:1/-1;margin:0}
}
@media(max-width:420px){.section-head h2{font-size:33px}}

/* =========================================================
   v13 workflow + performance pass
   ========================================================= */
:root{
  --jr-content:1240px;
  --jr-section-y:48px;
  --jr-gap:24px;
  --jr-pad:24px;
  --jr-head-gap:24px;
  --jr-measure:60ch;
  --jr-radius:20px;
  --jr-glass:rgba(25,35,46,.82);
  --jr-glass-strong:rgba(25,35,46,.94);
  --jr-line:rgba(255,255,255,.10);
}

/* Header: one calm glass language, subtle ambient color only */
.topbar{
  position:relative;
  min-height:70px;
  background:
    linear-gradient(90deg,rgba(239,158,103,.045),transparent 28%,transparent 72%,rgba(114,209,207,.045)),
    rgba(28,40,52,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 34px rgba(0,0,0,.12);
}
.topbar::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:-9px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--joey),rgba(255,255,255,.30),var(--kevin),transparent);
  opacity:.28;
}
.floating-dock{
  background:rgba(12,20,29,.38)!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.dock-item{
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
.dock-item.active{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.09);
  color:#fff;
}
@media(hover:hover) and (pointer:fine){.dock-item:hover{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.09);
  color:#fff;
}}
.header-cta{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Hero: short and calm */
.hero{
  min-height:48vh!important;
  padding:72px 0 42px!important;
}

/* Supplied brand assets; preserve the existing surfaces and spacing. */
.jokeroll-brand-mark{display:block;width:40px;height:40px;object-fit:contain}

/* A few color anchors per paragraph, using the existing character palette. */
.key-term{font-weight:650}
.key-term-joey{color:var(--joey)}
.key-term-kevin{color:var(--kevin)}
.key-term-farmer{color:var(--farmer)}
.key-term-gold{color:var(--gold)}
#kampf.reveal .accent-joey .combat-tip strong,#kampf.reveal .accent-joey .skill-pill>span:nth-child(2),#beute.reveal .accent-joey .stat-chip{color:var(--joey)}
#kampf.reveal .accent-kevin .combat-tip strong,#kampf.reveal .accent-kevin .skill-pill>span:nth-child(2),#beute.reveal .accent-kevin .stat-chip{color:var(--kevin)}

/* Buildbook is a normal guide section now */
#buildbook{padding-top:var(--jr-section-y)}
.build-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--jr-gap);
}
.build-profile{
  position:relative;
  overflow:hidden;
  padding:var(--jr-pad);
  border:1px solid var(--jr-line);
  border-radius:var(--jr-radius);
  background:var(--jr-glass-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.build-profile.joey{border-left:3px solid rgba(239,158,103,.88)}
.build-profile.kevin{border-left:3px solid rgba(114,209,207,.88)}
.build-profile-head{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-bottom:20px;
}
.build-icon{
  width:68px;height:68px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.build-profile-head h3{
  margin:3px 0 4px;
  font-size:clamp(27px,2.2vw,35px);
  line-height:1.15;
  letter-spacing:-.035em;
}
.build-profile-head p{
  margin:0;
  color:rgba(238,244,247,.68);
  font-size:16px;
  line-height:1.45;
}
.build-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.08);
  border-left:1px solid rgba(255,255,255,.08);
}
.build-facts>div{
  min-width:0;
  padding:13px 14px;
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.build-facts span{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.build-facts strong{
  display:block;
  font-size:15px;
  line-height:1.35;
}
.build-decisions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px;
}
.build-decision{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1px 8px;
  align-items:center;
  min-height:62px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:#eef4f7;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.build-decision strong{font-size:16px}
.build-decision span{
  grid-column:1;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.build-decision i{
  grid-column:2;
  grid-row:1/3;
  width:22px;height:22px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:rgba(255,255,255,.60);
  font-style:normal;
  font-size:10px;
}
.build-decision:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.17);
  outline:none;
}
@media(hover:hover) and (pointer:fine){.build-decision:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.17);
  outline:none;
}}
.farmer-strip{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:14px;
  align-items:center;
  margin-top:var(--jr-gap);
  padding:15px 17px;
  border:1px solid var(--jr-line);
  border-radius:16px;
  background:rgba(25,35,46,.78);
}
.farmer-icon{
  width:50px;height:50px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
}
.farmer-strip strong{display:block;font-size:17px}
.farmer-strip span{display:block;color:rgba(238,244,247,.58);font-size:14px;margin-top:2px}
.farmer-strip .build-decision{
  min-width:112px;
  min-height:48px;
  grid-template-columns:1fr auto;
}

/* Rotation: exact, symmetrical 2x2 */
.rotation-grid{
  display:grid;
  gap:10px;
  margin:16px 0 22px;
}
.rotation-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.rotation-connector{
  pointer-events:none;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.32);
  font-size:20px;
  font-weight:700;
}
.rotation-grid .skill-pill{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  min-height:58px;
  margin:0;
  padding:7px 9px;
}
.rotation-grid .skill-pill>span:nth-child(2){
  min-width:0;
  overflow-wrap:anywhere;
}

/* Performance: no continuous card reveals / blur-heavy popovers */
.motion-card::after{display:none!important}
.global-popover{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(19,28,38,.985)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
  transition:opacity .12s ease,transform .12s ease!important;
}

/* Consistent guide spacing */
.guide-section{padding:var(--jr-section-y) 0!important}
.glass-card,.profession-card,.secondary-card,.daily-step,.build-profile{
  padding:var(--jr-pad)!important;
  border-radius:var(--jr-radius)!important;
}
.cards-2,.cards-3,.profession-grid,.secondary-grid,.daily-flow-grid{
  gap:var(--jr-gap)!important;
}

/* Footer removed, no spare bottom block */
footer{display:none!important}
#ablauf.reveal .callout.good{display:none!important}

@media(max-width:900px){
  .build-split{grid-template-columns:1fr}
  .farmer-strip{grid-template-columns:48px 1fr}
  .farmer-strip .build-decision{grid-column:1/-1}
}
@media(max-width:1280px){
  #kampf.reveal .cards-2{grid-template-columns:1fr}
}
@media(max-width:760px){
  .build-facts,.build-decisions{grid-template-columns:1fr}
  .build-profile-head{grid-template-columns:58px 1fr}
  .build-icon{width:58px;height:58px}
}
@media(max-width:560px){
  .rotation-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .rotation-connector{
    width:18px;
    height:18px;
    justify-self:center;
    transform:rotate(90deg);
  }
  .rotation-grid .skill-pill{grid-template-columns:38px minmax(0,1fr) 18px}
}

/* v14 polish */
.hero{min-height:44vh!important;padding-top:62px!important;padding-bottom:34px!important}
.guide-section{padding:var(--jr-section-y) 0!important}
.section-head p{font-size:17px!important;line-height:1.5!important}
.cards-2,.cards-3,.profession-grid,.secondary-grid,.daily-flow-grid,.build-split{gap:var(--jr-gap)!important}
.glass-card,.profession-card,.secondary-card,.daily-step,.build-profile{padding:var(--jr-pad)!important;border-radius:var(--jr-radius)!important}
.glass-card p,.profession-card p,.secondary-card p,.daily-step p{line-height:1.52}
.build-profile{display:grid;grid-template-rows:auto auto 1fr}
@media(min-width:901px){
  .build-profile{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
.build-profile-head{min-height:92px}
.build-decisions{align-self:end}
.farmer-strip{grid-template-columns:50px minmax(0,1fr)!important}
.farmer-strip>.build-decision{min-width:118px!important;grid-column:auto!important}
.rotation-grid{gap:12px!important}
.rotation-row{min-height:58px}
.rotation-grid .skill-pill{min-height:60px!important;grid-template-columns:42px minmax(0,1fr) 18px!important}
.rotation-grid .skill-pill>span:nth-child(2){white-space:normal;line-height:1.18}
#kampf.reveal .glass-card>ul{margin-top:4px;display:grid;gap:10px}
#kampf.reveal .glass-card>ul li{min-height:32px;align-items:center}
.profession-grid,.secondary-grid{align-items:stretch}
.profession-card{grid-template-rows:auto auto 1fr auto!important;height:100%}
.profession-body{height:100%}
.profession-row{min-height:72px;align-content:start}
.secondary-card.aligned-card{grid-template-rows:58px 20px 86px 1fr!important;min-height:320px}
.secondary-card.aligned-card h3{margin:0!important;align-self:start!important;line-height:1.22}
.secondary-card.aligned-card p{margin:0!important;align-self:start!important}
#lager.reveal .cards-3{align-items:stretch}
#lager.reveal .glass-card{grid-template-rows:auto 68px 1fr auto!important;min-height:300px}
#lager.reveal .glass-card h3{min-height:0!important;margin:10px 0 12px;align-self:start}
#lager.reveal .glass-card p{margin:0;align-self:start}
.camp-bonus-row{align-self:end}
#beute.reveal .cards-2{align-items:stretch}
#beute.reveal .glass-card{height:100%}
#beute.reveal dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0}
#beute.reveal dt,#beute.reveal dd{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
#beute.reveal dd{margin:0}.stat-chip{white-space:nowrap}
.global-popover{width:min(360px,calc(100vw - 32px))!important;padding:14px 15px!important;border-radius:14px!important;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s!important;overflow:visible;background:rgba(18,27,37,.99)!important}
/* Close fades out: visibility flips after the fade, opening shows at once. */
.global-popover.visible{transition-delay:0s!important}
#global-popover-title{font-size:16px!important}#global-popover-body{font-size:16px;line-height:1.5}
.topbar{background:radial-gradient(340px 90px at 24% 0%,rgba(239,158,103,.06),transparent 72%),radial-gradient(340px 90px at 76% 0%,rgba(114,209,207,.06),transparent 72%),rgba(24,35,46,.78)!important}
@media(max-width:900px){.farmer-strip{grid-template-columns:48px minmax(0,1fr)!important}.farmer-strip>.build-decision{grid-column:1/-1!important;width:100%}}
@media(max-width:760px){
 :root{--jr-section-y:32px;--jr-gap:16px;--jr-pad:16px}
 .hero{min-height:40vh!important}
 #beute.reveal dl{grid-template-columns:1fr}
 #beute.reveal dt{padding-bottom:3px;border-bottom:0}#beute.reveal dd{padding-top:0}
 .secondary-card.aligned-card{min-height:0;grid-template-rows:auto!important}
 #lager.reveal .glass-card{min-height:0;grid-template-rows:auto!important}
}

/* =========================================================
   v15: one navigation, rounded floating header
   ========================================================= */

/* The outer header shell is only positioning, never a visible rectangle. */
.top-shell{
  position:sticky;
  top:10px;
  z-index:80;
  width:min(var(--jr-content),calc(100% - 36px));
  margin:0 auto;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* One self-contained glass capsule. */
.topbar{
  width:100%;
  min-height:72px;
  padding:9px 12px 9px 14px!important;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:28px!important;
  background:
    radial-gradient(260px 90px at 20% 0%,rgba(239,158,103,.055),transparent 72%),
    radial-gradient(260px 90px at 80% 0%,rgba(114,209,207,.055),transparent 72%),
    rgba(29,40,52,.76)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 12px 36px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
}

/* Remove the old underline / pseudo rectangular accents. */
.topbar::before,
.topbar::after,
.top-shell::before,
.top-shell::after{
  display:none!important;
  content:none!important;
}

/* Brand feels like part of the capsule, not a separate card. */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}
.brand strong{font-size:15px}

/* Dock visually melts into the same header. */
.floating-dock{
  position:static!important;
  justify-self:center;
  display:flex!important;
  align-items:center;
  gap:5px!important;
  width:auto!important;
  padding:4px!important;
  border:0!important;
  border-radius:18px!important;
  background:rgba(7,14,22,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
}
.dock-item{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:rgba(238,244,247,.64)!important;
  box-shadow:none!important;
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease!important;
}
.dock-item.active{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.085)!important;
  color:#fff!important;
}
@media(hover:hover) and (pointer:fine){.dock-item:hover{
  transform:translateY(-1px)!important;
  background:rgba(255,255,255,.085)!important;
  color:#fff!important;
}}
.dock-item svg{
  width:21px!important;
  height:21px!important;
}
.dock-item::before{
  top:calc(100% + 8px)!important;
  bottom:auto!important;
  border-radius:9px!important;
  background:rgba(15,23,32,.96)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

/* CTA becomes a proper Apple-like pill. */
.header-cta,
.topbar > .liquid-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  justify-self:end;
  min-height:44px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 16px rgba(0,0,0,.10)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.header-cta:hover,
.topbar > .liquid-button:hover{
  background:rgba(255,255,255,.12)!important;
}

/* v23: one site menu in the header capsule. It lists every page; the dock keeps the sections of the current page. */
/* The panel hangs from the whole header capsule, not from the button. */
/* Reset the generic details look (sources lists); overflow stays visible so the panel can hang below the header. */
.site-menu{position:static;justify-self:end;margin:0;border:0;border-radius:0;background:none;overflow:visible}
.site-menu-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.10);color:#fff;font-size:14px;font-weight:700;cursor:pointer;list-style:none;transition:background .16s ease}
.site-menu-toggle::-webkit-details-marker{display:none}
.site-menu>.site-menu-toggle::after{content:none}
.site-menu-toggle svg{width:20px;height:20px}
.site-menu-toggle:hover,.site-menu[open] .site-menu-toggle{background:rgba(255,255,255,.13)}
.site-menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(900px,calc(100vw - 28px));max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#101822;box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.menu-home{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:12px;color:#fff;font-size:15px;font-weight:700;text-decoration:none;background:rgba(255,255,255,.05)}
.menu-home svg{width:18px;height:18px}
.menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:dense;gap:18px}
.menu-classes{grid-column:span 2}
.menu-group .overline{margin:0 0 8px;color:var(--accent,var(--gold));text-transform:uppercase}
.menu-group ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.menu-classes ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-group a{display:flex;align-items:center;gap:9px;min-height:40px;padding:5px 9px;border-radius:11px;color:rgba(238,244,247,.8);font-size:15px;font-weight:650;text-decoration:none;transition:background .14s ease,color .14s ease}
.menu-group a:hover,.menu-home:hover{background:rgba(255,255,255,.08);color:#fff}
.menu-group a[aria-current]{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 3px 0 0 var(--accent,var(--gold))}
.menu-icon{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.14)}
@media(max-width:1100px){.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  /* Mobile header: the menu is one more equal slot next to the section icons. */
  .site-menu-toggle{justify-content:center;width:100%;min-width:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;color:rgba(238,244,247,.72)}
  .site-menu-toggle:hover,.site-menu[open] .site-menu-toggle{background:rgba(255,255,255,.085);color:#fff}
  .site-menu{justify-self:stretch}
  .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-menu-panel{right:0;left:0;width:auto;top:calc(100% + 8px);max-height:calc(100dvh - 90px);padding:14px 14px 28px;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
}
@media(max-width:760px){.menu-grid{grid-template-columns:1fr}.menu-classes{grid-column:auto}.menu-group ul{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-group a,.menu-home{min-height:44px}}
/* Wide screens show the section names next to the dock icons (generated pages carry the label span). */
.dock-label{display:none}
@media(min-width:1280px){
  .dock-item:has(.dock-label){width:auto!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center;gap:8px;padding:0 12px!important;text-decoration:none}
  .dock-item:has(.dock-label)::before{display:none}
  .dock-label{display:inline;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:650}
}
/* The duo guide keeps its Tagesplan button next to the menu; on phones only the menu remains. */
.header-actions{display:flex;align-items:center;gap:8px;justify-self:end;position:static}
@media(max-width:900px){.header-actions{justify-self:stretch}.header-actions .header-cta{display:none}.header-actions .site-menu{flex:1}}

/* No sidebar means content gets the space back. */
.guide-layout.single-column-guide{
  display:block!important;
  max-width:var(--jr-content,1240px)!important;
  margin:0 auto!important;
}
.guide-layout.single-column-guide > .guide-content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* Header compaction should preserve the rounded shape. */
.nav-compact .top-shell{
  top:7px;
  padding:0!important;
}
.nav-compact .topbar{
  min-height:72px!important;
  height:auto!important;
  border-radius:24px!important;
  background:rgba(24,35,46,.86)!important;
}

/* Desktop guide starts in a cleaner centered column. */
.site-shell{
  max-width:1480px!important;
}
.guide-content{
  max-width:1240px!important;
  margin:0 auto!important;
}

/* Mobile: one compact row with all six guide destinations. */
@media(max-width:900px){
  .anchor{scroll-margin-top:88px}
  .top-shell{width:calc(100% - 16px);top:6px}
  .topbar,.nav-compact .topbar{
    grid-template-columns:minmax(0,1fr) minmax(0,var(--dock-fr,6fr)) minmax(0,1fr)!important;
    min-height:60px!important;
    height:auto!important;
    gap:0!important;
    padding:6px!important;
    border-radius:20px!important;
  }
  .topbar > .header-cta{display:none}
  .brand{min-width:0;min-height:44px;justify-content:center}
  .jokeroll-brand-mark{width:34px;height:34px}
  .floating-dock{
    grid-column:2;
    grid-row:1;
    display:grid!important;
    grid-template-columns:repeat(var(--dock-count,6),minmax(0,1fr));
    justify-self:stretch!important;
    justify-content:stretch!important;
    gap:0!important;
    padding:0!important;
    overflow:visible;
    background:transparent!important;
    box-shadow:none!important;
  }
  .dock-item{
    width:100%!important;
    min-width:0;
    height:44px!important;
    border-radius:12px!important;
  }
  .dock-item.active{color:var(--accent,var(--kevin))!important}
  .dock-item:last-child::before{left:auto;right:0;transform:translateY(0)}
}

/* v21: content-driven card spacing and aligned metadata. */
@media(min-width:901px){
  .topbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-inline:14px!important}
  .brand{justify-self:start;min-height:44px}
}

.build-profile-head > div{align-self:start}
.profession-link{
  display:block;
  min-height:0;
  margin-top:0;
  border-top:0;
  line-height:1.55;
}
.secondary-card.aligned-card{
  min-height:0;
  grid-template-rows:56px auto auto 1fr!important;
  row-gap:8px;
}
#lager.reveal .glass-card{
  min-height:0;
  grid-template-rows:56px auto auto 1fr auto!important;
  row-gap:10px;
}
#lager.reveal .glass-card > .wow-icon-wrap{margin-bottom:0}
#lager.reveal .glass-card h3{margin:0}
.camp-bonus-row{margin-top:4px}
.mini-info{width:44px;height:44px}
.todo-status{max-width:none}
.daily-icons{min-height:34px}
.daily-meta,.daily-step h3{padding-right:0}
.daily-meta{flex-wrap:wrap;gap:6px 12px}
.daily-who{margin-left:auto;white-space:nowrap}
@media(min-width:1101px){
  .profession-link{min-height:calc(3.1em + 13px)}
  .secondary-grid{row-gap:8px!important}
  .secondary-card.aligned-card{grid-row:span 4;grid-template-rows:subgrid!important}
}
@media(max-width:1100px){
  .profession-card h3{min-height:0}
  .profession-row{min-height:0}
}

/* Accessibility preference must win over component-specific transitions. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  :root body *,:root body *::before,:root body *::after{animation:none!important;transition:none!important}
}

/* The duo guide's heading, where the logo stood (Kevin and Joey's secret page; it loads this file only). */
.duo-title{margin:10px 0 22px;font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
/* v24: the duo guide hero links to the duo planner. */
.hero-inner .hero-planer{display:inline-flex;align-items:center;margin-top:22px;text-decoration:none}

/* v29 speed pass: colours, borders, backgrounds and shadows switch at once; only transform and opacity glide, because
   the compositor runs those without repainting every frame. On a four times slower CPU this cut the paint work per
   hover by about 80 % and the scroll work by about 85 %. New transitions: transform and opacity only. */
.topbar,.liquid-button,.guide-section .section-head>span,.skill-pill,.daily-step,.daily-check,.wow-icon-wrap,.dock-item,.stat-chip,.mini-info,
.build-decision,.site-menu-toggle,.menu-group a,.tag,.sibling-switch a,.tierlist-card,.doc-card,.planner-pick,.filter-chip,
.class-card,.featured-card,.talent-node,.talent-planner .talent-node,.talent-step[data-popover-title],.tier-entry,.card-link,
.planner-btn,.check-item,.talent-planner .talent-rank,.talent-planner .talent-icon,.talent-arrow::before,.talent-arrow::after{
  transition-property:transform,opacity!important;
}
/* Cards open fast and short: 4 px in 120 ms, no scale (scaled text is drawn again on every frame). */
.global-popover{transform:translateY(4px)!important;transition:opacity .12s ease-out,transform .12s ease-out,visibility 0s linear .12s!important}
.global-popover.visible{transform:none!important;transition-delay:0s!important}

/* A quiet wordmark on desktop; the monogram keeps its equal mobile header slot. */
.brand .lootcifer-wordmark{display:block;font-size:16px;font-weight:500;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.brand .lootcifer-monogram{display:none;object-fit:contain}
@media(min-width:901px){.brand{padding-inline:12px}}
@media(max-width:900px){.brand .lootcifer-wordmark{display:none}.brand .lootcifer-monogram{display:block;width:34px;height:34px}}

/* Each duo comparison has its own row; expanded talent details stay inside that card. */
.build-profile.duo-choice{display:flex;flex-direction:column;gap:16px;grid-row:auto}
.duo-choice .build-decisions{align-self:stretch;display:block;margin:0}
.duo-choice .build-decision{width:100%}
.duo-choice>p,.duo-choice>details{margin:0}
.duo-choice-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.duo-choice .liquid-button{display:inline-flex;align-items:center;min-height:44px;height:auto;font-size:16px;font-weight:400;text-decoration:none}
.duo-choice .liquid-button span{font-size:16px;font-weight:400}
.duo-choice .build-profile-head>div{min-width:0}
.duo-choice h3{overflow-wrap:anywhere}
body[data-auto-highlight] .guide-section a{color:var(--text);text-underline-offset:3px}

/* Duo notes use their full text column and equipment advice reads as short paragraphs. */
.farmer-strip>div{min-width:0}
.farmer-strip strong{font-size:18px;line-height:1.35}
.farmer-strip p{margin:6px 0 0;font-size:16px;line-height:1.55}
#beute .loot-guidance dl{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0}
#beute .loot-guidance dl>div{min-width:0}
#beute .loot-guidance dt,#beute .loot-guidance dd{display:block;padding:0;border:0;text-align:left;line-height:1.55}
#beute .loot-guidance dt{margin:0 0 6px;font-size:16px;font-weight:500}
#beute .loot-guidance dd{margin:0;font-size:18px;font-weight:400}
.duo-loot-link{display:inline-flex;align-items:center;max-width:100%;min-height:44px;height:auto;padding:12px 20px;font-size:16px;font-weight:500;line-height:1.4;text-decoration:none}
.duo-loot-link span{font-size:16px;font-weight:500}
@media(max-width:760px){.farmer-strip strong{font-size:16px}#beute .loot-guidance dd{font-size:16px}}