/* Progression UI (hero card, rank emblems, level locks, result extras) and the Quest theme. */

/* ---------- hero card (home) ---------- */

.hero {
  display: flex; align-items: center; gap: 10px; border: none; background: transparent; padding: 0; text-align: left;
  min-width: 0; color: inherit;
}
.hero-avatar { position: relative; flex: none; }
.hero-avatar .owl { display: none; }
.hero-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-name { font-size: clamp(14px, 2.4vmin, 19px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-name b { font-weight: 900; }
.xpbar {
  display: block; width: clamp(110px, 20vmin, 200px); height: 10px; border-radius: 999px;
  background: var(--violet-soft); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.xpbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFC845, #FF9F1C); transition: width .8s cubic-bezier(.3, 1.2, .5, 1); }
.hero-stats { display: flex; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.hs { display: inline-flex; align-items: center; gap: 2px; }
.hs svg { width: 15px; height: 15px; }
.hs:first-child svg { color: #FFC845; }

/* ---------- help level locks & medals ---------- */

.lvl { position: relative; }
.lvl-lock, .lvl-medal { position: absolute; display: none; }
.lvl-lock { top: 3px; right: 3px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #8A82AD; color: #fff; }
.lvl .lvl-lock svg, .lvl .lvl-medal svg { width: 100%; height: 100%; }
.lvl.locked { opacity: .55; }
.lvl.locked .lvl-lock { display: block; }
.lvl-medal { top: 2px; left: 2px; width: 20px; height: 20px; }
.lvl-medal:not(:empty) { display: block; }
.lvl.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- result: rank pips, XP, new rank ---------- */

.rpips { display: flex; gap: 7px; margin: 4px 0 2px; }
.pip { width: 14px; height: 14px; border-radius: 4px; transform: rotate(45deg); background: #E7E2F2; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.08); }
.pip.on.m1 { background: linear-gradient(135deg, #C68B52, #8A5A2B); }
.pip.on.m2 { background: linear-gradient(135deg, #F0A868, #B8692F); }
.pip.on.m3 { background: linear-gradient(135deg, #F4F7FB, #AAB7C6); }
.pip.on.m4 { background: linear-gradient(135deg, #FFE27A, #F0B323); }
.pip.on.m5 { background: linear-gradient(135deg, #E4FBFF, #8FD8FF 60%, #9A7BFF); }
.pip.new { animation: pipIn .7s .5s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes pipIn { from { transform: rotate(45deg) scale(0); } 60% { transform: rotate(45deg) scale(1.6); } }
.rxp { display: flex; gap: 10px; align-items: center; font-weight: 900; }
.rxp-gain { color: #D48A00; animation: rise .6s .45s both; }
.rlvl { background: linear-gradient(135deg, #FFE27A, #F0B323); color: #5A3A00; padding: 2px 10px; border-radius: 999px; animation: rise .6s .8s both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.rrank { display: flex; align-items: center; gap: 10px; font-weight: 800; line-height: 1.15; animation: rise .5s .3s both; }
.remblem { width: clamp(46px, 8vmin, 64px); height: clamp(46px, 8vmin, 64px); animation: emblemIn .9s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.remblem svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
@keyframes emblemIn { from { transform: scale(0) rotate(-200deg); } }
@media (max-aspect-ratio: 5/4) {
  .result .rpips, .result .rxp, .result .rrank { display: none; }
}

/* ---------- settings: segmented pickers ---------- */

.pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-weight: 700; font-size: 17px; }
.pick .seg { margin: 0; }
.pick .seg button { height: 40px; font-size: 16px; }
.tgl b { font-weight: 700; }
#btnMusic.off { opacity: .5; }

@media (max-width: 620px) {
  .hero-info { display: none; }
  #btnFull, #btnMusic { display: none !important; } /* music stays in settings */
  [data-theme=quest] .hero { padding: 4px; margin-right: 10px; }
}

dialog { max-height: 94vh; overflow-y: auto; }

/* =====================================================================
   QUEST THEME: wood, parchment and gold over a painted fantasy valley
   ===================================================================== */

[data-theme=quest] {
  --bg: #2B1B10;
  --paper: #F4E8CE;
  --ink: #3B2410;
  --muted: #8C6A45;
  --violet: #B5651D;
  --violet-soft: #EAD9B5;
  --card: #F6EBD2;
  --wood: linear-gradient(180deg, #7B4F2B, #5B3519);
  --gold: #E2B04A;
  --shadow: 0 3px 0 rgba(30, 16, 5, .55), 0 6px 16px rgba(20, 10, 0, .35);
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
}
[data-theme=quest] body { background: #2B1B10; }
[data-theme=quest] .screen {
  background: linear-gradient(180deg, rgba(25, 14, 5, .35), rgba(25, 14, 5, .05) 30%, rgba(25, 14, 5, .4)),
    url(../assets/quest/bg.webp) center / cover no-repeat, #3A2414;
}
[data-theme=quest] #practice, [data-theme=quest] #paper {
  background: linear-gradient(rgba(36, 21, 9, .78), rgba(36, 21, 9, .78)), url(../assets/quest/bg.webp) center / cover no-repeat, #3A2414;
}

[data-theme=quest] .btn {
  background: var(--wood); color: #FCEBC4;
  box-shadow: inset 0 0 0 2px var(--gold), var(--shadow);
}
[data-theme=quest] .btn:active { box-shadow: inset 0 0 0 2px var(--gold), 0 1px 0 rgba(30, 16, 5, .6); }
[data-theme=quest] .btn.ghost { background: transparent; box-shadow: none; color: #F6DFA8; }
[data-theme=quest] .btn.primary { background: linear-gradient(180deg, #F6CF6A, #D4962A); color: #3A2208; }
[data-theme=quest] .btn.accent { background: linear-gradient(180deg, #D8573A, #A7351F); color: #FFF3DC; }
[data-theme=quest] .btn.case { color: #FCEBC4; font-family: var(--serif); }
[data-theme=quest] .btn.danger { color: #FFB4A0; }
[data-theme=quest] dialog .btn.ghost { color: var(--muted); }
[data-theme=quest] .result .btn:not(.primary) { color: #FCEBC4; }

[data-theme=quest] .seg { background: rgba(30, 16, 5, .55); box-shadow: inset 0 0 0 2px rgba(226, 176, 74, .6); }
[data-theme=quest] .seg button { color: #E8D3A6; font-family: var(--serif); }
[data-theme=quest] .seg button.on { background: linear-gradient(180deg, #F6CF6A, #D4962A); color: #3A2208; }
[data-theme=quest] dialog .seg { background: #E6D2A8; box-shadow: inset 0 0 0 2px #C9A15A; }
[data-theme=quest] dialog .seg button { color: #7A5A35; }
[data-theme=quest] dialog .seg button.on { color: #3A2208; }

/* hero card: the owl on a wooden plaque */
[data-theme=quest] .hero {
  background: var(--wood); border-radius: 20px; padding: 4px 16px 4px 4px;
  box-shadow: inset 0 0 0 2px var(--gold), var(--shadow); color: #FCEBC4;
}
[data-theme=quest] .hero-avatar { width: calc(var(--btn) * 1.05); height: calc(var(--btn) * 1.05); }
[data-theme=quest] .hero-avatar .logo-mark { display: none; }
[data-theme=quest] .hero-avatar .owl {
  display: block; position: absolute; left: -2px; bottom: -6px; height: calc(var(--btn) * 1.3); width: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); animation: owlBob 3.2s ease-in-out infinite; transform-origin: 50% 100%;
}
@keyframes owlBob { 50% { transform: translateY(-3px) rotate(-3deg); } }
[data-theme=quest] .hero-name { font-family: var(--serif); }
[data-theme=quest] .hero-name b { color: var(--gold); }
[data-theme=quest] .xpbar { background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1.5px rgba(226, 176, 74, .7); }
[data-theme=quest] .xpbar i { background: linear-gradient(90deg, #7FD4FF, #9A7BFF); box-shadow: 0 0 8px rgba(140, 200, 255, .8); }
[data-theme=quest] .hero-stats { color: #E8D3A6; }

/* letter tiles: parchment cards framed in the rank's material */
[data-theme=quest] .tile {
  background: url(../assets/quest/parchment.webp) center / cover, #F2E3C2; border-radius: 16px;
  border: 4px solid #6B4421; border-bottom-width: 6px; box-shadow: var(--shadow);
}
[data-theme=quest] .tile .glyph svg polyline { stroke: hsl(var(--h) 55% 32%); }
[data-theme=quest] .tile .glyph svg circle { fill: hsl(var(--h) 55% 32%); stroke: none; }
[data-theme=quest] .tile .stars i { color: rgba(90, 60, 30, .18); }
[data-theme=quest] .tile .stars i.on { color: #F0B323; filter: drop-shadow(0 1px 0 #8A5A00); }
[data-theme=quest] .tile.r1 { border-color: #8A5A2B; }
[data-theme=quest] .tile.r2 { border-color: #C0763A; }
[data-theme=quest] .tile.r3 { border-color: #B9C5D3; }
[data-theme=quest] .tile.r4 { border-color: #F0B323; box-shadow: 0 0 12px rgba(255, 200, 60, .5), var(--shadow); }
[data-theme=quest] .tile.r5 { border-color: #8FD8FF; box-shadow: 0 0 16px rgba(140, 210, 255, .8), var(--shadow); animation: crystal 3s ease-in-out infinite; }
@keyframes crystal { 50% { box-shadow: 0 0 26px rgba(170, 140, 255, .9), var(--shadow); } }

/* practice */
[data-theme=quest] .chip { background: url(../assets/quest/parchment.webp) center / cover; box-shadow: inset 0 0 0 3px #8A5A2B, var(--shadow); }
[data-theme=quest] .chip svg polyline { stroke: #5B3519; }
[data-theme=quest] .chip svg circle { fill: #5B3519; }
[data-theme=quest] .stage {
  border-radius: 18px; background: var(--paper);
  box-shadow: 0 0 0 5px #6B4421, 0 0 0 8px #C9973F, 0 8px 30px rgba(0, 0, 0, .5);
  margin: 6px clamp(14px, 2.2vmin, 24px) 10px;
}
[data-theme=quest] .title { color: #FCEBC4; font-family: var(--serif); }
[data-theme=quest] .toast { background: #F6EBD2; color: var(--ink); box-shadow: inset 0 0 0 2px #C9973F, var(--shadow); font-family: var(--serif); }
[data-theme=quest] .toast.start { color: #1F7A3E; }
[data-theme=quest] .toast.watch { color: #A5561A; }
[data-theme=quest] .toast.locked { color: #8C6A45; }
[data-theme=quest] .result {
  background: url(../assets/quest/parchment.webp) center / cover, #F6EBD2;
  box-shadow: inset 0 0 0 3px #C9973F, inset 0 0 0 6px #7B4F2B, var(--shadow);
}
[data-theme=quest] .rmsg, [data-theme=quest] .rrank { font-family: var(--serif); color: #4A2C10; }
[data-theme=quest] .rnote { color: #7A5A35; }
[data-theme=quest] .rs { color: rgba(90, 60, 30, .18); }
[data-theme=quest] .rs.on { color: #F0B323; }
[data-theme=quest] .assist { background: var(--wood); box-shadow: inset 0 0 0 2px var(--gold), var(--shadow); }
[data-theme=quest] .lvl { color: #E8D3A6; }
[data-theme=quest] .lvl.on { background: rgba(255, 220, 140, .18); color: #FFE7A6; box-shadow: inset 0 0 0 2.5px var(--gold); }
[data-theme=quest] .lvl-lock { background: #3A2414; color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
[data-theme=quest] .crayon { border-color: #F6EBD2; }

/* settings: a parchment scroll */
[data-theme=quest] dialog { background: url(../assets/quest/parchment.webp) center / cover, #F6EBD2; box-shadow: 0 0 0 4px #7B4F2B, 0 0 0 7px #C9973F, 0 20px 60px rgba(0,0,0,.6); }
[data-theme=quest] dialog::backdrop { background: rgba(20, 10, 0, .55); }
[data-theme=quest] .dlg-head h2 { font-family: var(--serif); }
[data-theme=quest] .tgl span { background: #D8C39A; }
[data-theme=quest] .tgl input:checked + span { background: #2FA35A; }