/* OrdJagt v0.3.43 — shared learning UI, used 1:1 in frontend and backend preview */
.ojl-level-reward-card,
.ojl-reward-path,
.ojl-chest-reward,
.ojl-progress-card { box-sizing:border-box; font-family:inherit; }

.ojl-level-reward-card {
  position:relative; width:min(760px,94vw); aspect-ratio:1346/899; isolation:isolate;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,.46));
}
.ojl-level-reward-card.is-pop { animation:ojl-pop .52s cubic-bezier(.17,.86,.27,1.22) both; }
.ojl-reward-panel-art { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ojl-reward-burst { position:absolute; inset:-13%; z-index:0; width:126%; height:126%; object-fit:contain; pointer-events:none; animation:ojl-burst 1.05s ease-out both; }
.ojl-reward-banner { position:absolute; left:24%; top:-3%; width:52%; height:27%; z-index:5; object-fit:contain; pointer-events:none; filter:drop-shadow(0 8px 9px rgba(0,0,0,.24)); }
.ojl-reward-trophy { position:absolute; left:5.5%; top:22%; width:25%; height:59%; z-index:4; object-fit:contain; pointer-events:none; filter:drop-shadow(0 10px 10px rgba(0,0,0,.28)); }
.ojl-level-reward-card.has-floating-trophy .ojl-reward-trophy { animation:ojl-float 2.7s ease-in-out infinite; }
.ojl-reward-safe-copy {
  position:absolute; left:34%; right:15%; top:27%; bottom:19%; z-index:6;
  display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:clamp(5px,1vw,12px);
  padding:clamp(8px,1.4vw,18px); box-sizing:border-box; overflow:hidden; text-align:center;
  color:#3b2a10; container-type:size;
}
.ojl-reward-safe-copy>strong { font-size:clamp(18px,4cqw,36px); line-height:1.06; color:#3f290b; text-shadow:0 2px 0 rgba(255,255,255,.72); overflow-wrap:anywhere; }
.ojl-reward-breakdown { display:grid; gap:3px; width:min(100%,430px); margin-inline:auto; }
.ojl-reward-breakdown span { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:3px 8px; border-bottom:1px solid rgba(88,59,14,.2); font-size:clamp(10px,2.1cqw,16px); font-weight:800; }
.ojl-reward-breakdown em { font-style:normal; min-width:0; text-align:left; overflow-wrap:anywhere; }
.ojl-reward-breakdown b { color:#17612f; white-space:nowrap; font-size:1.08em; }
.ojl-reward-total { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:2px; color:#145d2c; font-size:clamp(14px,3cqw,25px); font-weight:900; }
.ojl-reward-total b { color:#8b5700; font-size:1.18em; }
.ojl-reward-star-icon { width:clamp(28px,8cqh,58px); height:clamp(28px,8cqh,58px); object-fit:contain; }
.ojl-star-dust,.ojl-path-sparkles { position:absolute; inset:0; z-index:7; pointer-events:none; overflow:hidden; }
.ojl-star-dust i,.ojl-path-sparkles i { position:absolute; width:8px; height:8px; border-radius:50%; background:#ffe56a; box-shadow:0 0 8px #fff5a4,0 0 15px #f5b72e; animation:ojl-sparkle 1.7s ease-in-out infinite; }
.ojl-star-dust i:nth-child(1){left:17%;top:30%}.ojl-star-dust i:nth-child(2){left:26%;top:61%;animation-delay:.25s}.ojl-star-dust i:nth-child(3){left:72%;top:21%;animation-delay:.5s}.ojl-star-dust i:nth-child(4){left:82%;top:55%;animation-delay:.75s}.ojl-star-dust i:nth-child(5){left:54%;top:75%;animation-delay:1s}.ojl-star-dust i:nth-child(6){left:42%;top:18%;animation-delay:1.25s}

.ojl-reward-path {
  position:relative; width:min(760px,94vw); min-height:min(690px,88vh); max-height:88vh;
  display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,290px); align-items:center; gap:clamp(14px,3vw,34px);
  padding:clamp(20px,4vw,44px); border:2px solid rgba(230,190,73,.82); border-radius:28px;
  background:radial-gradient(circle at 25% 25%,rgba(51,122,62,.95),rgba(8,53,34,.97) 50%,rgba(5,29,22,.99));
  box-shadow:0 28px 55px rgba(0,0,0,.46),inset 0 0 0 4px rgba(255,231,139,.09); overflow:hidden; isolation:isolate;
  color:#fff5c8;
}
.ojl-reward-path::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 35%,rgba(245,204,79,.06)); pointer-events:none; }
.ojl-path-copy { position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; }
.ojl-path-copy small { color:#f0c85c; font-weight:900; letter-spacing:.09em; text-transform:uppercase; font-size:clamp(12px,1.8vw,18px); }
.ojl-path-copy strong { font-size:clamp(28px,5vw,52px); line-height:1.02; text-wrap:balance; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.ojl-path-copy p { margin:0; max-width:430px; font-size:clamp(17px,2.5vw,26px); line-height:1.25; font-weight:800; color:#fff9df; }
.ojl-path-copy span { display:inline-flex; align-items:baseline; gap:7px; padding:8px 13px; border-radius:999px; background:rgba(0,0,0,.22); border:1px solid rgba(245,205,83,.42); font-weight:800; }
.ojl-path-copy span b { font-size:1.35em; color:#ffe36d; }
.ojl-path-art-wrap { position:relative; justify-self:center; height:min(76vh,620px); aspect-ratio:270/1400; z-index:3; }
.ojl-path-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.32)); }
.ojl-reward-path.has-chain-glow .ojl-path-art { animation:ojl-chain-glow 2s ease-in-out infinite; }
.ojl-path-step-layer { position:absolute; inset:0; z-index:5; pointer-events:none; }
.ojl-path-step { position:absolute; left:var(--ojl-x,47.4%); top:var(--ojl-y); transform:translate(-50%,-50%); width:31%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; }
.ojl-path-step b { color:#fff6c5; font-size:clamp(10px,2.2vw,21px); text-shadow:0 2px 4px #18331c; }
.ojl-path-step-star { width:62%; height:62%; object-fit:contain; filter:drop-shadow(0 0 7px rgba(255,223,83,.95)); }
.ojl-reward-path.has-medal-glow .ojl-path-step.is-done { box-shadow:0 0 0 2px rgba(255,218,81,.62),0 0 18px rgba(255,209,63,.72),inset 0 0 14px rgba(255,232,113,.22); }
.ojl-path-step.is-new { animation:ojl-step-pop .9s cubic-bezier(.17,.88,.27,1.25) both; }
.ojl-path-step.is-next { animation:ojl-next-pulse 1.65s ease-in-out infinite; box-shadow:0 0 13px rgba(255,225,105,.34); }
.ojl-path-chest-overlay{position:absolute;left:var(--ojl-chest-x,50%);top:var(--ojl-chest-y,8.5%);z-index:7;width:var(--ojl-chest-scale,180%);height:auto;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 9px rgba(0,0,0,.3));pointer-events:none}
.ojl-path-chest-hotspot { position:absolute; left:var(--ojl-chest-x,50%); top:var(--ojl-chest-y,8.5%); transform:translate(-50%,-50%); z-index:9; width:var(--ojl-chest-hotspot-scale,104%); height:19%; border:0; border-radius:45%; background:transparent; cursor:pointer; }
.ojl-reward-path.is-editor .ojl-path-step-layer{pointer-events:auto}
.ojl-reward-path.is-editor .ojl-path-step.is-editor-handle{pointer-events:auto;cursor:grab;touch-action:none;background:rgba(12,72,43,.82);border:2px solid #ffd85a;box-shadow:0 0 0 3px rgba(0,0,0,.28),0 0 18px rgba(255,216,90,.75)}
.ojl-reward-path.is-editor .ojl-path-step.is-editor-handle:active{cursor:grabbing}
.ojl-reward-path.is-editor .ojl-path-step.is-editor-handle b{font-size:clamp(13px,2.4vw,22px);color:#fff7c8}
.ojl-path-chest-editor-handle{position:absolute;left:var(--ojl-chest-x,50%);top:var(--ojl-chest-y,8.5%);transform:translate(-50%,-50%);z-index:11;padding:6px 10px;border:2px solid #ffe06b;border-radius:999px;background:#124f31;color:#fff7c7;font-weight:900;box-shadow:0 3px 12px rgba(0,0,0,.45),0 0 16px rgba(255,219,89,.65);cursor:grab;touch-action:none}
.ojl-path-chest-editor-handle:active{cursor:grabbing}
.ojl-reward-path.has-chest-shake .ojl-path-chest-overlay { animation:ojl-chest-overlay-shake 1.25s ease-in-out infinite; transform-origin:50% 50%; }
.ojl-path-sparkles i:nth-child(1){left:65%;top:12%}.ojl-path-sparkles i:nth-child(2){left:74%;top:39%;animation-delay:.4s}.ojl-path-sparkles i:nth-child(3){left:53%;top:66%;animation-delay:.8s}.ojl-path-sparkles i:nth-child(4){left:83%;top:82%;animation-delay:1.2s}

.ojl-chest-reward {
  position:relative; width:min(700px,94vw); min-height:min(650px,86vh); padding:clamp(24px,5vw,56px) clamp(18px,4vw,42px) 28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; isolation:isolate;
  border:2px solid #e7bd4a; border-radius:28px; background:radial-gradient(circle at 50% 42%,#426f2d 0,#143d27 48%,#071f19 100%);
  box-shadow:0 28px 60px rgba(0,0,0,.52); color:#fff3bd; text-align:center;
}
.ojl-chest-reward>strong { position:relative; z-index:8; font-size:clamp(34px,6vw,64px); color:#ffe16d; text-shadow:0 4px 0 #74470a,0 0 18px rgba(255,218,68,.52); }
.ojl-chest-reward>p { position:relative; z-index:8; margin:0; font-size:clamp(18px,2.7vw,28px); font-weight:800; }
.ojl-chest-burst { position:absolute; inset:-10%; z-index:0; width:120%; height:120%; object-fit:contain; animation:ojl-burst 1s ease-out both; }
.ojl-chest-sequence,.ojl-chest-static { position:relative; z-index:6; width:min(78%,520px); aspect-ratio:520/320; object-fit:contain; }
.ojl-chest-sequence { display:grid; place-items:center; }
.ojl-chest-frame { grid-area:1/1; width:100%; height:100%; object-fit:contain; opacity:0; }
.ojl-chest-frame-1{animation:ojl-chest-f1 2.2s steps(1,end) infinite}.ojl-chest-frame-2{animation:ojl-chest-f2 2.2s steps(1,end) infinite}.ojl-chest-frame-3{animation:ojl-chest-f3 2.2s steps(1,end) infinite}.ojl-chest-frame-4{animation:ojl-chest-f4 2.2s steps(1,end) infinite}
.ojl-chest-prizes { position:relative; z-index:8; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; }
.ojl-chest-prizes span { display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:rgba(0,0,0,.28); border:1px solid rgba(255,219,88,.55); font-size:clamp(16px,2.4vw,24px); font-weight:850; }
.ojl-chest-prizes b { color:#ffe16a; font-size:1.2em; }
.ojl-chest-prize-icon { width:38px; height:38px; object-fit:contain; }
.ojl-confetti,.ojl-star-rain { position:absolute; inset:0; z-index:7; pointer-events:none; overflow:hidden; }
.ojl-confetti i { position:absolute; left:var(--ojl-left); top:35%; width:9px; height:17px; border-radius:2px; background:#ffd646; opacity:0; animation:ojl-confetti var(--ojl-duration) var(--ojl-delay) ease-out both; }
.ojl-confetti i:nth-child(4n+2){background:#58cf59}.ojl-confetti i:nth-child(4n+3){background:#37bdf0}.ojl-confetti i:nth-child(4n){background:#f05f59}
.ojl-star-rain i { position:absolute; left:var(--ojl-left); top:-8%; color:#ffe26b; font-style:normal; font-size:var(--ojl-size); text-shadow:0 0 8px #fff3a4,0 0 14px #e8a52a; opacity:0; animation:ojl-star-rain var(--ojl-duration) var(--ojl-delay) linear both; }

.ojl-progress-card { position:relative; width:min(620px,94vw); aspect-ratio:1074/1244; isolation:isolate; filter:drop-shadow(0 24px 38px rgba(0,0,0,.48)); }
.ojl-progress-card.is-pop { animation:ojl-pop .44s cubic-bezier(.17,.86,.27,1.16) both; }
.ojl-progress-panel-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; }
.ojl-progress-safe-copy { position:absolute; left:17%; right:17%; top:19%; bottom:16%; z-index:3; display:flex; flex-direction:column; gap:clamp(7px,1.4vw,15px); padding:clamp(6px,1vw,12px); box-sizing:border-box; overflow:hidden; color:#3c2910; }
.ojl-progress-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 9px; }
.ojl-progress-stats span { min-width:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon label" "icon value"; align-items:center; column-gap:7px; padding:5px 7px; border-radius:9px; background:rgba(255,248,214,.28); border-bottom:1px solid rgba(86,59,18,.18); }
.ojl-progress-icon { grid-area:icon; width:clamp(29px,5vw,55px); height:clamp(29px,5vw,55px); object-fit:contain; }
.ojl-progress-stats em { grid-area:label; min-width:0; font-style:normal; font-size:clamp(9px,1.6vw,13px); font-weight:800; color:#6c5730; }
.ojl-progress-stats b { grid-area:value; min-width:0; font-size:clamp(14px,2.7vw,22px); color:#17572d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ojl-progress-goal { margin-top:auto; display:grid; grid-template-columns:1fr auto; gap:4px 8px; align-items:end; }
.ojl-progress-goal>strong { font-size:clamp(11px,2vw,16px); }.ojl-progress-goal>span { color:#17622e; font-size:clamp(10px,1.8vw,14px); font-weight:900; }
.ojl-progress-bar { grid-column:1/-1; position:relative; width:100%; aspect-ratio:1700/324; }
.ojl-progress-bar-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; }
.ojl-progress-bar i { position:absolute; z-index:2; left:10.5%; top:31%; bottom:28%; width:min(79%,var(--ojl-progress)); border-radius:999px; background:linear-gradient(90deg,#228c3a,#9fdb3a 66%,#f1cf4a); box-shadow:inset 0 2px 2px rgba(255,255,255,.5),0 0 10px rgba(99,189,58,.55); animation:ojl-progress-fill .95s cubic-bezier(.2,.78,.25,1) both; }
.ojl-progress-card.is-static-bar .ojl-progress-bar i{animation:none}
.ojl-progress-goal>small { grid-column:1/-1; text-align:center; font-weight:900; }
.ojl-progress-gift { position:absolute; right:4%; bottom:7%; width:19%; height:22%; object-fit:contain; z-index:4; animation:ojl-float 3s ease-in-out infinite; }

@keyframes ojl-pop{from{opacity:0;transform:scale(.76) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ojl-burst{from{opacity:0;transform:scale(.45) rotate(-8deg)}60%{opacity:1}to{opacity:.9;transform:scale(1) rotate(0)}}
@keyframes ojl-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes ojl-sparkle{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.35)}}
@keyframes ojl-step-pop{0%{opacity:.15;transform:translate(-50%,-50%) scale(.55)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.22)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes ojl-next-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09);filter:brightness(1.18)}}
@keyframes ojl-chain-glow{0%,100%{filter:drop-shadow(0 12px 12px rgba(0,0,0,.32))}50%{filter:drop-shadow(0 12px 12px rgba(0,0,0,.32)) drop-shadow(0 0 10px rgba(255,211,72,.64))}}
@keyframes ojl-chest-overlay-shake{0%,100%{transform:translate(-50%,-50%) rotate(0)}20%{transform:translate(-50%,-50%) rotate(-2deg)}40%{transform:translate(-50%,-50%) rotate(2.2deg)}60%{transform:translate(-50%,-50%) rotate(-1.3deg)}80%{transform:translate(-50%,-50%) rotate(1deg)}}
@keyframes ojl-confetti{0%{opacity:0;transform:translate3d(0,-30px,0) scale(.3) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(var(--ojl-drift),360px,0) scale(.75) rotate(var(--ojl-rot))}}
@keyframes ojl-star-rain{0%{opacity:0;transform:translateY(-20px) rotate(0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(105vh) rotate(420deg)}}
@keyframes ojl-chest-f1{0%,19%{opacity:1}20%,100%{opacity:0}}@keyframes ojl-chest-f2{0%,19%{opacity:0}20%,39%{opacity:1}40%,100%{opacity:0}}@keyframes ojl-chest-f3{0%,39%{opacity:0}40%,59%{opacity:1}60%,100%{opacity:0}}@keyframes ojl-chest-f4{0%,59%{opacity:0}60%,100%{opacity:1}}
@keyframes ojl-progress-fill{from{width:0}to{width:min(79%,var(--ojl-progress))}}

@media(max-width:640px){
  .ojl-level-reward-card{width:96vw;aspect-ratio:.94/1;max-height:86vh}.ojl-reward-panel-art{object-fit:cover}.ojl-reward-banner{left:12%;top:1%;width:76%;height:20%}.ojl-reward-trophy{left:3%;top:59%;width:31%;height:34%}.ojl-reward-safe-copy{left:12%;right:12%;top:22%;bottom:29%}.ojl-reward-breakdown span{font-size:11px}.ojl-reward-total{font-size:17px}
  .ojl-reward-path{grid-template-columns:1fr;min-height:0;max-height:92vh;padding:18px 16px;gap:8px}.ojl-path-copy{align-items:center;text-align:center;gap:7px}.ojl-path-copy strong{font-size:28px}.ojl-path-copy p{font-size:17px}.ojl-path-art-wrap{height:min(58vh,510px)}
  .ojl-chest-reward{min-height:72vh}.ojl-progress-card{width:96vw}.ojl-progress-safe-copy{left:13%;right:13%;top:18%;bottom:18%}.ojl-progress-stats{grid-template-columns:1fr;gap:3px}.ojl-progress-stats span{padding:3px 5px}.ojl-progress-icon{width:34px;height:34px}.ojl-progress-gift{right:5%;bottom:4%;width:24%;height:17%}
}
@media(prefers-reduced-motion:reduce){.ojl-level-reward-card,.ojl-reward-trophy,.ojl-reward-burst,.ojl-path-art,.ojl-path-art-wrap,.ojl-path-step,.ojl-chest-frame,.ojl-confetti i,.ojl-star-rain i,.ojl-progress-card,.ojl-progress-bar i,.ojl-progress-gift{animation:none!important}.ojl-chest-frame{opacity:0!important}.ojl-chest-frame-4{opacity:1!important}}

/* v0.3.44: chest confetti begins when the four-frame opening reaches the open state. */
.ojl-chest-reward .ojl-confetti i{animation-delay:calc(1.1s + var(--ojl-delay))}

/* v0.3.46 — make level transition and path step unmistakably different. */
.ojl-path-level-context {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 10px;
  padding:7px 11px;
  border:1px solid rgba(255,220,100,.5);
  border-radius:999px;
  background:rgba(0,0,0,.24);
  color:#fff5c7;
  font-size:clamp(11px,1.55vw,16px);
  line-height:1.1;
  font-weight:850;
}
.ojl-path-level-context b { color:#fff7d8; white-space:nowrap; }
.ojl-path-level-context span { color:#ffd95c; font-size:1.2em; font-weight:1000; }

@media(max-width:640px){
  .ojl-path-level-context{justify-content:center;border-radius:18px;font-size:12px;padding:6px 9px}
  .ojl-path-copy strong{font-size:clamp(23px,7vw,31px)}
  .ojl-path-copy p{font-size:clamp(14px,4.5vw,18px)}
}

/* v0.3.64 — mobile text sharpness overrides. The viewport shell lives in ordjagt-game.css. */
.ojl-progress-card {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
@media (max-width: 720px) {
  .ojl-level-reward-card,
  .ojl-progress-card {
    filter: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .ojl-progress-safe-copy,
  .ojl-reward-safe-copy {
    filter: none !important;
    transform: none !important;
  }
}