/* ============================================================================================================================
   ES-PRESTIGE (2026-10-20, Fried or Fertalized R1): the Prestige window, its level-up toast. Drawn by v3/assets/js/es-prestige.js.
   One sheet, two looks: the --pw-* tokens are the current kit's by default and the old-school kit's under html.look-mo (browns, brass,
   cream: NO blue there, the gems are emerald / ruby / amber / amethyst). Everything stops under .still (the page's reduced motion or the
   system's). Bump its ?v= in eastscape.html.
   ========================================================================================================================== */
#presWin { --pw-gold: rgb(var(--gold-rgb, 226, 184, 93)); --pw-gold-l: #f6dc98; --pw-gold-d: #7a5a24; --pw-panel: rgba(18, 12, 10, .94); --pw-panel-2: rgba(255, 255, 255, .045);
  --pw-well: rgba(0, 0, 0, .38); --pw-line: rgba(var(--gold-rgb, 226, 184, 93), .28); --pw-text: #efe4cf; --pw-mute: #b9a88d; --pw-ok: #7fc48a; --pw-bad: #e07a66;
  --pw-r1: #d8b25a; --pw-r2: #d0703a; --pw-r3: #a865d8; --pw-off: #2b2018; --pw-em0: #24563a; --pw-ru0: #5e2222; --pw-am0: #6e4a16; --pw-at0: #4b2d62; --pw-font: inherit; --pw-head: "Cinzel", Georgia, serif;
  width: min(860px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible }
html.look-mo #presWin { --pw-gold: var(--os-gold, #e2b85d); --pw-gold-l: var(--os-gold-l, #f0cf7c); --pw-gold-d: var(--os-gold-d, #6b4f22); --pw-panel: var(--os-panel, #241b15);
  --pw-panel-2: var(--os-panel-2, #2c2219); --pw-well: var(--os-well, #120e0b); --pw-line: var(--os-line-2, #4a3826); --pw-text: var(--os-cream, #e9dcc3); --pw-mute: var(--os-mute, #a8957c);
  --pw-ok: var(--os-ok, #70b57d); --pw-bad: var(--os-warn, #d16a57); --pw-font: var(--os-text); --pw-head: var(--os-sub, "Cinzel", Georgia, serif) }
#presWin[hidden] { display: none !important }
/* THE GILDED FRAME: a double brass band, a dark well inside it, four cut corners with a gem each */
#presWin .pw-frame { position: relative; display: flex; flex-direction: column; max-height: inherit; min-height: 0; color: var(--pw-text); font-family: var(--pw-font);
  background: radial-gradient(ellipse 70% 50% at 30% 0%, rgba(var(--gold-rgb, 226, 184, 93), .10), transparent 70%), var(--pw-panel);
  border: 3px solid var(--pw-gold-d); outline: 1px solid #000; box-shadow: inset 0 0 0 2px var(--pw-gold), inset 0 0 0 4px #000, inset 0 0 0 5px var(--pw-gold-d), 0 18px 48px rgba(0, 0, 0, .55) }
html.look-mo #presWin .pw-frame { border-radius: 0 }
html:not(.look-mo) #presWin .pw-frame { border-radius: 10px }
#presWin .pw-c { position: absolute; width: 18px; height: 18px; z-index: 2; pointer-events: none; background: linear-gradient(135deg, var(--pw-gold-l), var(--pw-gold) 45%, var(--pw-gold-d)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 1px 0 #000) }
#presWin .pw-c::after { content: ""; position: absolute; inset: 5px; background: #8a2a2a; clip-path: inherit }
html.look-mo #presWin .pw-c::after { background: var(--os-red, #8a2a22) }
#presWin .pw-c.tl { left: -9px; top: -9px } #presWin .pw-c.tr { right: -9px; top: -9px } #presWin .pw-c.bl { left: -9px; bottom: -9px } #presWin .pw-c.br { right: -9px; bottom: -9px }
#presWin .pw-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--pw-line); background: linear-gradient(180deg, rgba(var(--gold-rgb, 226, 184, 93), .14), transparent) }
html.look-mo #presWin .pw-head { background: linear-gradient(180deg, #3a2a18, var(--pw-panel)) }
#presWin .pw-head > b { font: 700 21px/1 var(--pw-head); letter-spacing: .06em; color: var(--pw-gold-l); text-shadow: 0 1px 0 #000 }
#presWin .pw-head > small { color: var(--pw-mute); font-size: 13px; font-style: italic }
#presWin .pw-head .win-x { margin-left: auto }
#presWin .pw-body { overflow: auto; padding: 12px 16px 14px; min-height: 0 }
#presWin img { image-rendering: pixelated }
#presWin .ey { display: block; font: 700 10px/1.1 var(--pw-head); letter-spacing: .14em; text-transform: uppercase; color: var(--pw-gold) }
#presWin .pw-note, #presWin .pw-foot { margin: 6px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--pw-mute) }
#presWin .pw-foot { text-align: center; margin-top: 12px; font-style: italic }

/* the skills along the top */
#presWin .pw-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px }
#presWin .pw-sk { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 3px; min-height: 30px; background: var(--pw-well); border: 1px solid var(--pw-line); color: var(--pw-text); cursor: pointer; font: 700 12px/1 var(--pw-font); border-radius: 4px }
#presWin .pw-sk img { width: 22px; height: 22px }
#presWin .pw-sk.on { border-color: var(--pw-gold); box-shadow: inset 0 0 0 1px var(--pw-gold); background: rgba(var(--gold-rgb, 226, 184, 93), .14) }
#presWin .pw-sk.r1 b { color: var(--pw-r1) } #presWin .pw-sk.r2 b { color: var(--pw-r2) } #presWin .pw-sk.r3 b { color: var(--pw-r3) }

#presWin .pw-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start }
#presWin .pw-main.compact { grid-template-columns: 1fr }

/* THE RING */
#presWin .pw-dial { position: relative; width: 300px; height: 300px; display: grid; place-items: center }
#presWin .pw-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
#presWin .pw-r0 { fill: none; stroke: var(--pw-gold-d); stroke-width: 3 }
#presWin .pw-r1 { fill: var(--pw-well); stroke: var(--pw-gold-d); stroke-width: 2 }
#presWin .pw-tick { stroke: var(--pw-gold); stroke-width: 2 }
#presWin .pw-seg { fill: var(--pw-off); stroke: #000; stroke-width: 1.2 }
#presWin .pw-seg.on { fill: var(--pw-gold); stroke: #3a2810 }
#presWin .pw-seg.on.mj { fill: var(--pw-gold-l) }
#presWin .pw-seg.next { fill: var(--pw-gold-d); animation: pwPulse 1.6s ease-in-out infinite }
@keyframes pwPulse { 0%, 100% { fill: var(--pw-gold-d) } 50% { fill: var(--pw-gold) } }
#presWin .pw-dial.r1 .pw-r0 { stroke: var(--pw-r1) } #presWin .pw-dial.r2 .pw-r0 { stroke: var(--pw-r2) } #presWin .pw-dial.r3 .pw-r0 { stroke: var(--pw-r3); stroke-width: 4 }
/* the gems: emerald 105, ruby 110, amber 115, amethyst 120 */
#presWin .pw-gem .g0 { stroke: #000; stroke-width: 1.4 } #presWin .pw-gem .g1 { fill: rgba(255, 255, 255, .45) } #presWin .pw-gem .g2 { fill: rgba(0, 0, 0, .28) }
#presWin .pw-gem.emerald .g0 { fill: #3fae6a } #presWin .pw-gem.ruby .g0 { fill: #d23b3b } #presWin .pw-gem.amber .g0 { fill: #f0a12c } #presWin .pw-gem.amethyst .g0 { fill: #a55fd6 }
#presWin .pw-gem.shut { opacity: .38; filter: grayscale(.7) }
#presWin .pw-gem.open .g0 { animation: pwGem 1.2s ease-in-out infinite }
@keyframes pwGem { 0%, 100% { stroke: #000; stroke-width: 1.4 } 50% { stroke: #fff2c4; stroke-width: 3 } }
#presWin .pw-dial.flare::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px var(--pw-gold-l), 0 0 40px 12px rgba(var(--gold-rgb, 226, 184, 93), .55); animation: pwFlare 1.8s ease-out forwards }
html.look-mo #presWin .pw-dial.flare::after { box-shadow: 0 0 0 3px var(--os-gold-l, #f0cf7c), 0 0 30px 10px rgba(226, 184, 93, .5) }
@keyframes pwFlare { 0% { opacity: 0; transform: scale(.9) } 25% { opacity: 1 } 100% { opacity: 0; transform: scale(1.12) } }
#presWin .pw-centre { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px }
#presWin .pw-ic img { width: 40px; height: 40px }
#presWin .pw-skn { font: 700 12px/1.1 var(--pw-head); letter-spacing: .1em; text-transform: uppercase; color: var(--pw-mute) }
#presWin .pw-lv { font: 800 58px/1 var(--pw-head); color: var(--pw-gold-l); text-shadow: 0 2px 0 #000, 0 0 18px rgba(var(--gold-rgb, 226, 184, 93), .35); font-variant-numeric: lining-nums }
html.look-mo #presWin .pw-lv { text-shadow: 0 2px 0 #000 }
#presWin .pw-rk { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1.2 var(--pw-head); letter-spacing: .08em; color: var(--pw-mute) }
#presWin .pw-rk.r1 { color: var(--pw-r1) } #presWin .pw-rk.r2 { color: var(--pw-r2) } #presWin .pw-rk.r3 { color: var(--pw-r3) }

/* the compact strip */
#presWin .pw-dialc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 4px; background: var(--pw-well); border: 1px solid var(--pw-line) }
#presWin .pw-dialc .pw-lv { font-size: 44px }
#presWin .pw-strip { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; width: calc(100% - 16px) }
#presWin .pw-strip > i { height: 12px; background: var(--pw-off); border: 1px solid #000 }
#presWin .pw-strip > i.on { background: var(--pw-gold) }
#presWin .pw-strip > i.next { animation: pwPip 1.6s ease-in-out infinite }
@keyframes pwPip { 0%, 100% { background: var(--pw-gold-d) } 50% { background: var(--pw-gold) } }
#presWin .pw-strip > i.mj { transform: rotate(45deg) scale(.82); border-color: #000 }
#presWin .pw-strip > i.mj.emerald { background: var(--pw-em0) } #presWin .pw-strip > i.mj.ruby { background: var(--pw-ru0) } #presWin .pw-strip > i.mj.amber { background: var(--pw-am0) } #presWin .pw-strip > i.mj.amethyst { background: var(--pw-at0) }
#presWin .pw-strip > i.mj.set.emerald { background: #3fae6a } #presWin .pw-strip > i.mj.set.ruby { background: #d23b3b } #presWin .pw-strip > i.mj.set.amber { background: #f0a12c } #presWin .pw-strip > i.mj.set.amethyst { background: #a55fd6 }
#presWin .pw-lines { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 13px } #presWin .pw-lines b { color: var(--pw-gold) }

/* the side */
#presWin .pw-side { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
#presWin .pw-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
#presWin .pw-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: var(--pw-well); border: 1px solid var(--pw-line); opacity: .55; filter: grayscale(.8) }
#presWin .pw-rank.got { opacity: 1; filter: none } #presWin .pw-rank b { font: 700 12.5px/1.1 var(--pw-head) } #presWin .pw-rank small { color: var(--pw-mute); font-size: 11px }
#presWin .pw-rank.got.r1 { border-color: var(--pw-r1) } #presWin .pw-rank.got.r2 { border-color: var(--pw-r2) } #presWin .pw-rank.got.r3 { border-color: var(--pw-r3) }
#presWin .pw-rank.got.r1 b { color: var(--pw-r1) } #presWin .pw-rank.got.r2 b { color: var(--pw-r2) } #presWin .pw-rank.got.r3 b { color: var(--pw-r3) }
#presWin .pw-prog { padding: 8px 10px; background: var(--pw-panel-2); border: 1px solid var(--pw-line) }
#presWin .pw-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap } #presWin .pw-ph small, #presWin .pw-prog.max small { color: var(--pw-mute); font-size: 12px }
#presWin .pw-prog.max b { display: block; color: var(--pw-r3) }
#presWin .pw-bar { position: relative; height: 12px; margin-top: 6px; background: var(--pw-well); border: 1px solid #000 }
#presWin .pw-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(var(--pw-gold-l), var(--pw-gold) 60%, var(--pw-gold-d)) }
#presWin .pw-next, #presWin .pw-cape { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--pw-panel-2); border: 1px solid var(--pw-line) }
#presWin .pw-next > div, #presWin .pw-cape > div { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
#presWin .pw-next small:not(.ey), #presWin .pw-cape small { color: var(--pw-mute); font-size: 12.5px }
#presWin .pw-nl { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font: 800 15px/1 var(--pw-head); color: var(--pw-gold-l); background: var(--pw-well); border: 1px solid var(--pw-gold-d); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) }
#presWin .pw-cape.got { border-color: var(--pw-r3) } #presWin .pw-cape:not(.got) .pw-star { opacity: .5; filter: grayscale(.6) }
#presWin .pw-major { padding: 8px 10px; background: var(--pw-panel-2); border: 1px solid var(--pw-line) }
#presWin .pw-major.waiting { border-color: var(--pw-gold); box-shadow: inset 0 0 0 1px var(--pw-gold) }
#presWin .pw-mh { display: flex; align-items: center; gap: 6px; margin-bottom: 6px } #presWin .pw-mh b { font: 800 15px/1 var(--pw-head); color: var(--pw-gold-l) } #presWin .pw-mh span:last-child { color: var(--pw-mute); font-size: 12.5px }
#presWin .pw-gemi { display: inline-block; width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid #000; flex: none }
#presWin .pw-gemi.emerald { background: #3fae6a } #presWin .pw-gemi.ruby { background: #d23b3b } #presWin .pw-gemi.amber { background: #f0a12c } #presWin .pw-gemi.amethyst { background: #a55fd6 }
#presWin .pw-opts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: stretch }
#presWin .compact .pw-opts, #presWin.narrow .pw-opts { grid-template-columns: 1fr }
#presWin .pw-or { align-self: center; color: var(--pw-mute); font-style: italic; font-size: 12px }
#presWin .pw-opt { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; background: var(--pw-well); border: 1px solid var(--pw-line) }
#presWin .pw-opt b { color: var(--pw-text); font-size: 13.5px } #presWin .pw-opt small { color: var(--pw-mute); font-size: 12px; line-height: 1.3; flex: 1 }
#presWin .pw-opt.mine { border-color: var(--pw-gold) } #presWin .pw-opt.mine b { color: var(--pw-gold-l) }
#presWin .pw-tag { font: 700 11px/1 var(--pw-head); letter-spacing: .1em; text-transform: uppercase; color: var(--pw-gold); font-style: normal }
#presWin .pw-title { display: flex; flex-wrap: wrap; gap: 5px; align-items: center }
/* buttons: brass for a choice, dark for the rest */
#presWin .pw-btn { cursor: pointer; padding: 5px 10px; min-height: 28px; font: 700 12.5px/1.1 var(--pw-font); color: var(--pw-text); background: var(--pw-well); border: 1px solid var(--pw-line); border-radius: 4px }
html.look-mo #presWin .pw-btn { border-radius: 0 }
#presWin .pw-btn.pri { color: #1b1206; background: linear-gradient(var(--pw-gold-l), var(--pw-gold) 55%, var(--pw-gold-d)); border-color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, .3) }
#presWin .pw-btn.big { padding: 9px 16px; font-size: 14px; width: 100% }
#presWin .pw-btn.sm { min-height: 24px; padding: 3px 8px; font-size: 12px }
#presWin .pw-btn.on { border-color: var(--pw-gold); color: var(--pw-gold-l) }
#presWin .pw-btn:disabled, #presWin .pw-btn.pri:disabled { cursor: not-allowed; color: var(--pw-mute); background: var(--pw-well); border-color: var(--pw-line); text-shadow: none }
#presWin .pw-btn:not(:disabled):hover { filter: brightness(1.12) }
#presWin .pw-btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px }
/* the gate */
#presWin .pw-gate { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--pw-well); border: 1px solid var(--pw-gold-d); box-shadow: inset 0 0 0 1px #000 }
#presWin .pw-gh { display: flex; gap: 10px; align-items: center } #presWin .pw-gh b { display: block; font: 700 17px/1.1 var(--pw-head); color: var(--pw-gold-l) } #presWin .pw-gh small { color: var(--pw-mute); font-size: 12.5px }
#presWin .pw-need { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
#presWin .pw-need li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; background: var(--pw-panel-2); border-left: 3px solid var(--pw-bad); font-size: 13px }
#presWin .pw-need li.ok { border-left-color: var(--pw-ok) } #presWin .pw-need li em { color: var(--pw-mute); font-style: normal }
#presWin .pw-need li.no em { color: var(--pw-bad) }
/* the folds */
#presWin .pw-fold { margin-top: 10px; padding: 8px 10px; background: var(--pw-well); border: 1px solid var(--pw-line) }
#presWin .pw-track { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px }
#presWin .pw-track li { display: grid; grid-template-columns: 36px 1fr; gap: 6px; padding: 4px 6px; font-size: 12.5px; color: var(--pw-mute) }
#presWin .pw-track li > b { font: 800 13px/1.2 var(--pw-head); color: var(--pw-mute) }
#presWin .pw-track li.on { color: var(--pw-text) } #presWin .pw-track li.on > b { color: var(--pw-gold) } #presWin .pw-track li.next { background: rgba(var(--gold-rgb, 226, 184, 93), .08) }
#presWin .pw-track li em { font-style: normal; font-weight: 700; color: inherit } #presWin .pw-track li em.mine { color: var(--pw-gold-l); text-decoration: underline }
#presWin .pw-track li.mj { border-left: 3px solid #555 } #presWin .pw-track li.mj.emerald { border-left-color: #3fae6a } #presWin .pw-track li.mj.ruby { border-left-color: #d23b3b } #presWin .pw-track li.mj.amber { border-left-color: #f0a12c } #presWin .pw-track li.mj.amethyst { border-left-color: #a55fd6 }
#presWin .pw-track li i { color: var(--pw-mute) }
#presWin .pw-perks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px }
#presWin .pw-perks li { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: var(--pw-panel-2); border: 1px solid var(--pw-line) } #presWin .pw-perks li small { color: var(--pw-mute); font-size: 12px }
#presWin .pw-perks li.mj { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 6px } #presWin .pw-perks li.mj small { flex-basis: 100% }

/* narrow: everything in one column */
#presWin.narrow .pw-head > small { display: none }
#presWin.narrow .pw-body { padding: 10px }
#presWin.narrow .pw-ranks .pw-rank b { font-size: 11px }
@media (max-width: 640px) { #presWin { width: calc(100% - 28px) } }   /* (v1.8 QA) the window sits 14px in (.win), so 28 keeps its right edge on a phone (12 ran 2px off at 375) */

/* THE TOAST: a level past 99 (top centre, above the world; the window opens on a click) */
#presToast { position: absolute; left: 50%; top: 64px; z-index: 30; display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: min(440px, calc(100% - 24px)); padding: 8px 14px 8px 10px; transform: translateX(-50%);
  color: #efe4cf; background: linear-gradient(180deg, #2c1f14, #17100b); border: 2px solid #7a5a24; box-shadow: inset 0 0 0 1px #e2b85d, 0 10px 26px rgba(0, 0, 0, .5); cursor: pointer }
#presToast[hidden] { display: none }
#presToast > div { display: flex; flex-direction: column; gap: 1px; min-width: 0 } #presToast b { font: 800 18px/1.1 "Cinzel", Georgia, serif; color: #f6dc98; display: inline-flex; align-items: center; gap: 4px }
#presToast small { color: #c9b796; font-size: 12.5px } #presToast .ey { font: 700 10px/1.1 "Cinzel", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #e2b85d }
#presToast .pw-tl { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: 800 15px/1 "Cinzel", Georgia, serif; color: #1b1206; background: linear-gradient(#f6dc98, #e2b85d 55%, #7a5a24); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) }
#presToast img { image-rendering: pixelated }
#presToast.rank.r1 { border-color: #d8b25a } #presToast.rank.r2 { border-color: #d0703a } #presToast.rank.r3 { border-color: #a865d8; box-shadow: inset 0 0 0 1px #d9b4f4, 0 10px 30px rgba(120, 60, 170, .5) }
#presToast.show { animation: pwToast .5s cubic-bezier(.2, 1.4, .4, 1) }
@keyframes pwToast { from { opacity: 0; transform: translate(-50%, -14px) scale(.94) } to { opacity: 1; transform: translate(-50%, 0) scale(1) } }

/* reduced motion: nothing moves */
#presWin.still *, #presWin.still .pw-dial::after, #presToast.still { animation: none !important }
@media (prefers-reduced-motion: reduce) { #presWin *, #presToast { animation: none !important } }

/* THE SKILLS TAB: a skill at 80 or more wears a small gem in its tile's corner that opens the Prestige window (or its gate) */
.skt { position: relative }
.skt > .skt-pres { position: absolute; right: 3px; top: 3px; width: 11px; height: 11px; transform: rotate(45deg); cursor: pointer; background: linear-gradient(135deg, #f6dc98, #e2b85d 50%, #7a5a24); border: 1px solid #000; box-shadow: 0 1px 0 rgba(0, 0, 0, .5) }
.skt > .skt-pres.gate { background: linear-gradient(135deg, #b8a58a, #6b5a44 60%, #3a2e22) }
.skt > .skt-pres.r1 { background: linear-gradient(135deg, #fff0b8, #d8b25a 55%, #6b4f22) } .skt > .skt-pres.r2 { background: linear-gradient(135deg, #ffd0a8, #d0703a 55%, #6b2e12) } .skt > .skt-pres.r3 { background: linear-gradient(135deg, #ecd0ff, #a865d8 55%, #4b2266) }
.skt > .skt-pres:hover, .skt > .skt-pres:focus-visible { outline: 2px solid #f6dc98; outline-offset: 1px }
#skCard .skc-gate { color: #e7a37a }
#presWin img.pw-crest, #presWin img.pw-star, #presToast img { image-rendering: auto }
html.look-mo #presWin .pw-btn.pri:not(:disabled), #presWin .pw-btn.pri:not(:disabled) { color: #1b1206 !important; -webkit-text-fill-color: #1b1206 }
#presWin .pw-capei { flex: none; image-rendering: auto; filter: drop-shadow(0 0 4px rgba(226, 184, 93, .6)) } #presWin .pw-cape:not(.got) .pw-capei { filter: grayscale(.5) brightness(.8) }

/* OVERVIEW | YOUR TREE (2026-10-20, the owner: "let users see their prestige skill tree, or recent picks"). The cooking window's grammar:
   a list on the left (levels 101-120), the detail on the right ("Your tree gives now"), brass on the buttons that act. Phone: one column. */
#presWin .pw-views { display: flex; gap: 0; margin: -4px 0 10px; border-bottom: 1px solid var(--pw-line) }
#presWin .pw-vt { cursor: pointer; padding: 6px 14px; min-height: 32px; margin-bottom: -1px; font: 700 13px/1 var(--pw-head); letter-spacing: .04em; color: var(--pw-mute); background: transparent; border: 1px solid transparent; border-bottom: 0 }
#presWin .pw-vt.on { color: var(--pw-gold-l); background: var(--pw-panel-2); border-color: var(--pw-line); box-shadow: inset 0 2px 0 var(--pw-gold) }
#presWin .pw-vt:focus-visible, #presWin .pw-rp:focus-visible, #presWin .pw-btn:focus-visible { outline: 2px solid var(--pw-gold-l); outline-offset: 1px }
/* the Recent picks row */
#presWin .pw-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 6px 8px; background: var(--pw-well); border: 1px solid var(--pw-line) }
#presWin .pw-rlist { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 }
#presWin .pw-rp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 8px 3px 4px; cursor: pointer; text-align: left; color: var(--pw-text); background: var(--pw-panel-2); border: 1px solid var(--pw-gold-d) }
#presWin .pw-rp img { width: 22px; height: 22px; flex: none }
#presWin .pw-rp span { display: flex; flex-direction: column; min-width: 0 }
#presWin .pw-rp b { font-size: 12.5px; color: var(--pw-gold-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#presWin .pw-rp small { font-size: 11px; color: var(--pw-mute) }
#presWin .pw-rp:hover { border-color: var(--pw-gold) }
/* the tree: list + detail */
#presWin .pw-tree { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start }
#presWin .pw-tlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; min-width: 0 }
#presWin .pw-tr { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 5px 8px; background: var(--pw-well); border: 1px solid var(--pw-line); border-left-width: 3px; min-width: 0 }
#presWin .pw-tl { font: 800 14px/1.3 var(--pw-head); color: var(--pw-mute) }
#presWin .pw-tb { min-width: 0; overflow-wrap: anywhere }
#presWin .pw-th { display: flex; align-items: center; gap: 6px; font-size: 13px }
#presWin .pw-th > b { color: var(--pw-text) }
#presWin .pw-tb > small { display: block; font-size: 12px; line-height: 1.3; color: var(--pw-mute) }
#presWin .pw-st { margin-left: auto; flex: none; font: 700 10px/1 var(--pw-head); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--pw-mute) }
#presWin .pw-tr.got { border-left-color: var(--pw-gold) } #presWin .pw-tr.got .pw-tl, #presWin .pw-st.got { color: var(--pw-gold) }
#presWin .pw-tr.next { border-left-color: var(--pw-gold-d); background: var(--pw-panel-2) } #presWin .pw-st.next { color: var(--pw-gold-l) }
#presWin .pw-tr.lock { opacity: .62 } #presWin .pw-tr.lock .pw-th > b { color: var(--pw-mute) }
#presWin .pw-tr.mj.emerald { border-left-color: #3fae6a } #presWin .pw-tr.mj.ruby { border-left-color: #d23b3b } #presWin .pw-tr.mj.amber { border-left-color: #f0a12c } #presWin .pw-tr.mj.amethyst { border-left-color: #a55fd6 }
#presWin .pw-tr.choose { box-shadow: inset 0 0 0 1px var(--pw-gold) } #presWin .pw-st.choose { color: var(--pw-gold-l) }
#presWin .pw-topts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px }
#presWin .pw-to { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; min-width: 0; background: var(--pw-panel-2); border: 1px solid var(--pw-line) }
#presWin .pw-to b { font-size: 13px; color: var(--pw-text) } #presWin .pw-to small { font-size: 12px; line-height: 1.3; color: var(--pw-mute) }
#presWin .pw-to .pw-btn { align-self: flex-end; margin-top: 2px }
#presWin .pw-to.mine { border-color: var(--pw-gold); background: linear-gradient(180deg, rgba(var(--gold-rgb, 226, 184, 93), .16), var(--pw-panel-2)); box-shadow: inset 0 0 0 1px var(--pw-gold-d) }
#presWin .pw-to.mine b { color: var(--pw-gold-l) } #presWin .pw-to.mine .pw-tag { align-self: flex-end }
#presWin .pw-to.dim { opacity: .55 }
#presWin .pw-tcape { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 8px; border: 1px dashed var(--pw-gold-d) }
#presWin .pw-tcape.got { border-style: solid; border-color: var(--pw-gold) }
#presWin .pw-tcape span { display: flex; flex-direction: column } #presWin .pw-tcape b { font-size: 12.5px; color: var(--pw-gold-l) } #presWin .pw-tcape small { font-size: 11.5px; color: var(--pw-mute) }
#presWin .pw-tsum { position: sticky; top: 0; padding: 8px 10px; background: var(--pw-well); border: 1px solid var(--pw-gold-d); min-width: 0; overflow-wrap: anywhere }
#presWin .pw-tsum ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.3 }
#presWin .pw-tsum li b { color: var(--pw-text) } #presWin .pw-tsum li i { color: var(--pw-mute) } #presWin .pw-tsum li.pk b { color: var(--pw-gold-l) }
#presWin .pw-tsum .pw-gemi { width: 9px; height: 9px; margin-right: 4px; vertical-align: 1px }
#presWin .pw-wait { color: var(--pw-gold-l) }
#presWin.narrow .pw-tree { grid-template-columns: 1fr }
#presWin.narrow .pw-tsum { position: static; order: -1 }
@media (max-width: 520px) { #presWin .pw-topts { grid-template-columns: 1fr } #presWin .pw-vt { padding: 6px 10px } }

/* (2026-10-23, the owner: "the buttons of the skill need a new design ... way too small, and its not intuitive") THE SKILL PICKER AS CARDS (es-prestige.js body):
   a how-to line, three groups with a heading, and cards big enough to read: picture, name, what's next, the level large on the right */
#presWin .pw-pick { margin-bottom: 12px }
#presWin .pw-pickhow { margin: 0 0 8px; font: 600 13px/1.3 var(--pw-font); color: var(--pw-mute) }
#presWin .pw-pg { margin-bottom: 10px }
#presWin .pw-pgh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--pw-line) }
#presWin .pw-pgh b { font: 700 14px/1.2 var(--pw-head); color: var(--pw-gold) }
#presWin .pw-pgh small { font: 600 12px/1.2 var(--pw-font); color: var(--pw-mute) }
#presWin .pw-pick .pw-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 0 }
#presWin .pw-pick .pw-sk { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 46px; padding: 5px 10px 5px 6px; text-align: left; font: 600 13px/1.2 var(--pw-font) }
#presWin .pw-pick .pw-sk:hover { border-color: var(--pw-gold); background: rgba(var(--gold-rgb, 226, 184, 93), .08) }
#presWin .pw-pick .pw-ski { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--pw-line) }
#presWin .pw-pick .pw-ski img { width: 28px; height: 28px }
#presWin .pw-pick .pw-skt { display: grid; gap: 2px; min-width: 0 }
#presWin .pw-pick .pw-skt b { font: 700 13.5px/1.15 var(--pw-font); color: var(--pw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#presWin .pw-pick .pw-skt small { font: 600 11.5px/1.2 var(--pw-font); color: var(--pw-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#presWin .pw-pick .pw-skl { font: 800 20px/1 var(--pw-head); font-style: normal; color: var(--pw-text) }
#presWin .pw-pick .pw-sk.r1 .pw-skl { color: var(--pw-r1) } #presWin .pw-pick .pw-sk.r2 .pw-skl { color: var(--pw-r2) } #presWin .pw-pick .pw-sk.r3 .pw-skl { color: var(--pw-r3) }
#presWin .pw-pick .pw-sk.due { border-color: #c87a2c; box-shadow: inset 0 0 0 1px rgba(200, 122, 44, .5) }
#presWin .pw-pick .pw-sk.due .pw-skt small { color: #f0a85a }
#presWin .pw-pick .pw-sk.on { border-color: var(--pw-gold); box-shadow: inset 0 0 0 2px var(--pw-gold); background: rgba(var(--gold-rgb, 226, 184, 93), .16) }

/* (2026-10-23, the owner: "add special styling and hover to the prestige tabs trees options, and an even more special styling to the 5, 10, 15, 20 choices")
   THE TREE'S ROWS: a lift and a warm edge on hover, a gold sheen on the levels you have. THE PICKS OF TWO (105, 110, 115, 120) wear their gem: its colour
   as a wash and a double frame, studs at the corners, a larger level number in the gem's colour, a soft glow that grows on hover; their two options are
   cards that rise and take the gem's edge when pointed at */
#presWin .pw-tr { position: relative; transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out }
#presWin .pw-tr:not(.mj):hover { transform: translateX(3px); background: var(--pw-panel-2); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb, 226, 184, 93), .45), 0 2px 6px rgba(0, 0, 0, .35) }
#presWin .pw-tr.got:not(.mj) { background: linear-gradient(90deg, rgba(var(--gold-rgb, 226, 184, 93), .12), transparent 55%), var(--pw-well) }
#presWin .pw-tr.next:not(.mj) { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb, 226, 184, 93), .35) }
#presWin .pw-tr.mj { --gem: 165, 95, 214; margin: 6px 0; padding: 9px 10px 10px; border: 1px solid rgb(var(--gem)); border-left-width: 4px;
  background: linear-gradient(120deg, rgba(var(--gem), .22), rgba(var(--gem), .05) 55%, rgba(0, 0, 0, .15)), var(--pw-well);
  box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(var(--gem), .35), 0 0 14px rgba(var(--gem), .25); opacity: 1 }
#presWin .pw-tr.mj.emerald { --gem: 63, 174, 106 } #presWin .pw-tr.mj.ruby { --gem: 210, 59, 59 } #presWin .pw-tr.mj.amber { --gem: 240, 161, 44 } #presWin .pw-tr.mj.amethyst { --gem: 165, 95, 214 }
#presWin .pw-tr.mj::before, #presWin .pw-tr.mj::after { content: ""; position: absolute; width: 7px; height: 7px; background: rgb(var(--gem)); box-shadow: 0 0 0 1px #000; transform: rotate(45deg) }
#presWin .pw-tr.mj::before { left: -5px; top: -5px } #presWin .pw-tr.mj::after { right: -5px; bottom: -5px }
#presWin .pw-tr.mj .pw-tl { font-size: 20px; color: rgb(var(--gem)); text-shadow: 0 1px 0 #000, 0 0 8px rgba(var(--gem), .55) }
#presWin .pw-tr.mj .pw-th > span:not(.pw-gemi) { font: 700 14px/1.2 var(--pw-head); letter-spacing: .04em; color: var(--pw-text) }
#presWin .pw-tr.mj .pw-gemi { transform: scale(1.25) }
#presWin .pw-tr.mj.lock { opacity: .78; filter: saturate(.7) }
#presWin .pw-tr.mj:hover { box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(var(--gem), .6), 0 0 22px rgba(var(--gem), .45); filter: none }
#presWin .pw-tr.mj.choose { animation: pwGemPulse 1.8s ease-in-out infinite }
@keyframes pwGemPulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(var(--gem), .7), 0 0 26px rgba(var(--gem), .55) } }
@media (prefers-reduced-motion: reduce) { #presWin .pw-tr, #presWin .pw-to { transition: none } #presWin .pw-tr.mj.choose { animation: none } #presWin .pw-tr:not(.mj):hover, #presWin .pw-to:hover { transform: none } }
#presWin .pw-tr.mj .pw-to { transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .12)), var(--pw-panel-2) }
#presWin .pw-tr.mj .pw-to:hover { transform: translateY(-2px); border-color: rgb(var(--gem)); box-shadow: 0 0 0 1px rgba(var(--gem), .5), 0 4px 10px rgba(0, 0, 0, .45) }
#presWin .pw-tr.mj .pw-to:hover b { color: #fff }
#presWin .pw-tr.mj .pw-to.mine { border-color: rgb(var(--gem)); box-shadow: inset 0 0 0 1px rgba(var(--gem), .7), 0 0 10px rgba(var(--gem), .35) }

/* ============================================================================================================================
   (2026-10-24, the owner's redesign: "make the prestige window look like this ... our styling and sizing ... special coloring for
   achieving prestige, level 105, 110, etc.") THE NEW LAYOUT (es-prestige.js body): head stats, skill cards, the chosen skill's panel,
   the road, Overview / Your tree. Each milestone has its own colour once reached (--pz): 99 brass, 100 gold (Master), 105 emerald,
   110 ruby (Grandmaster), 115 amber, 120 amethyst (Legend). A card and the big number wear the highest one reached.
   ========================================================================================================================== */
#presWin { width: min(900px, calc(100% - 24px)) }
#presWin .pw-body { display: flex; flex-direction: column; gap: 10px }
#presWin .pz-m99 { --pz: #b98a4a; --pz-d: #3a2a18 } #presWin .pz-m100 { --pz: #e2c063; --pz-d: #4a3a18 } #presWin .pz-m105 { --pz: #49c27a; --pz-d: #173d27 }
#presWin .pz-m110 { --pz: #e0554a; --pz-d: #4a1a17 } #presWin .pz-m115 { --pz: #f0aa3a; --pz-d: #4d3410 } #presWin .pz-m120 { --pz: #b876f0; --pz-d: #351d4d }
#presWin .pz-frame { background: var(--pw-well); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line); padding: 10px }
#presWin .os-h { font: 700 12px/1.2 var(--pw-head); letter-spacing: .12em; text-transform: uppercase; color: var(--pw-gold) }
#presWin small { color: var(--pw-mute) }
/* head stats */
#presWin .pz-stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px }
#presWin .pz-stat { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--pw-panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line) }
#presWin .pz-stat b { display: block; font-size: 13.5px } #presWin .pz-stat small { display: block; font-size: 11.5px; margin-top: 2px }
#presWin .pz-stat .pz-big { font: 800 24px/1 Georgia, serif; color: var(--pz, var(--pw-gold)) } #presWin .pz-stat .pz-big em { font: 400 12px var(--pw-font); font-style: normal; color: var(--pw-mute) }
#presWin .pz-si img, #presWin .pz-si .ico { width: 34px; height: 34px }
/* skill cards */
#presWin .pz-skz { display: flex; flex-direction: column; gap: 8px }
#presWin .pz-skh { display: flex; align-items: center; justify-content: space-between; gap: 10px } #presWin .pz-skh small { display: block; font-size: 11.5px; margin-top: 2px }
#presWin .pz-q { width: 190px; height: 30px; flex: none }
#presWin .pz-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
#presWin .pz-card { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; text-align: left; cursor: pointer; color: var(--pw-text); font: inherit;
  background: var(--pw-panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line), inset 3px 0 0 var(--pz, transparent) }
#presWin .pz-card:hover { box-shadow: inset 0 0 0 1px var(--pw-gold-d), inset 3px 0 0 var(--pz, transparent); background: color-mix(in srgb, var(--pw-panel-2) 85%, #fff) }
#presWin .pz-card.on { background: linear-gradient(90deg, var(--pz-d, #3a2418), var(--pw-panel-2)); box-shadow: inset 0 0 0 1px var(--pz, var(--pw-gold)), inset 0 0 0 2px #000, inset 3px 0 0 var(--pz, var(--pw-gold)) }
#presWin .pz-card.due::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--pw-gold-l); border: 1px solid #000; transform: rotate(45deg) }
#presWin .pz-card.pre { opacity: .8 }
#presWin .pz-ci { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--pw-well); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line) }
#presWin .pz-ci img, #presWin .pz-ci .ico { width: 28px; height: 28px; margin: 0 }
#presWin .pz-ct { flex: 1; min-width: 0 } #presWin .pz-ct b, #presWin .pz-ct small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#presWin .pz-ct b { font-size: 13px } #presWin .pz-ct small { font-size: 11px }
#presWin .pz-cl { flex: none; font: 700 21px/1 Georgia, serif; font-style: normal; color: var(--pz, var(--pw-mute)) } #presWin .pz-card.pre .pz-cl { font-size: 16px }
#presWin .pz-more { display: flex; justify-content: center } #presWin .pz-more[hidden] { display: none }
/* the chosen skill */
#presWin .pz-sel { padding: 12px 14px; border: 1px solid #000; background: linear-gradient(90deg, var(--pz-d, #2c1c18), var(--pw-panel) 65%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pz, var(--pw-gold-d)) 70%, transparent) }
#presWin .pz-st { display: flex; align-items: center; gap: 14px }
#presWin .pz-selic { flex: none; display: grid; place-items: center; width: 62px; height: 62px; background: var(--pw-well); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pz, var(--pw-gold-d)) }
#presWin .pz-selic img, #presWin .pz-selic .ico { width: 48px; height: 48px; margin: 0 }
#presWin .pz-stt { flex: 1; min-width: 0 } #presWin .pz-stt .ey { color: var(--pz, var(--pw-gold)) }
#presWin .pz-stt h2 { margin: 3px 0; font: 700 26px/1.1 var(--pw-head); color: var(--pw-gold-l) } #presWin .pz-stt h2 .os-pill { vertical-align: middle; font-size: 10px }
#presWin .pz-stt p { margin: 0; font-size: 12.5px; color: var(--pw-text) }
#presWin .pz-lv { flex: none; min-width: 90px; text-align: right; font: 700 44px/1 Georgia, serif; color: var(--pz, var(--pw-gold)); text-shadow: 0 2px 0 #000 }
#presWin .pz-lv small { display: block; padding-top: 4px; font: 700 10px/1 var(--pw-head); letter-spacing: .14em; text-transform: uppercase }
#presWin .pz-sel .pw-prog { margin-top: 10px }
#presWin .pz-sel .pw-bar i { background: linear-gradient(color-mix(in srgb, var(--pz, var(--pw-gold)) 60%, #fff), var(--pz, var(--pw-gold))) }
/* the road */
#presWin .pz-rh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px } #presWin .pz-rh small { font-size: 11.5px }
#presWin .pz-tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px }
#presWin .pz-tier { position: relative; padding: 9px 5px 8px; text-align: center; background: var(--pw-panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line) }
#presWin .pz-tier::before { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 7px; height: 7px; transform: rotate(45deg); background: var(--pw-off); border: 1px solid #000 }
#presWin .pz-tier .n { display: block; font: 700 22px/1 Georgia, serif; color: var(--pw-mute) }
#presWin .pz-tier span { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700 } #presWin .pz-tier small { font-size: 10.5px }
#presWin .pz-tier.done { background: linear-gradient(var(--pz-d), var(--pw-panel-2)); box-shadow: inset 0 0 0 1px var(--pz), inset 0 2px 0 var(--pz) }
#presWin .pz-tier.done::before { background: var(--pz) } #presWin .pz-tier.done .n, #presWin .pz-tier.done small { color: var(--pz) }
#presWin .pz-tier.now { box-shadow: inset 0 0 0 1px var(--pw-gold-l) } #presWin .pz-tier.now::before { background: var(--pw-gold-l) }
#presWin .pz-tier.wait { animation: pzWait 1.6s ease-in-out infinite } @keyframes pzWait { 50% { box-shadow: inset 0 0 0 1px var(--pz), inset 0 0 14px color-mix(in srgb, var(--pz) 45%, transparent) } }
#presWin.still .pz-tier.wait { animation: none }
/* the tabs and the lower half */
#presWin .pz-tabs { display: flex; gap: 5px } #presWin .pz-tabs .os-btn.on { color: var(--pw-gold-l); box-shadow: inset 0 0 0 1px var(--pw-gold) }
#presWin .pz-lower { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; align-items: start }
#presWin .pz-rew { display: flex; flex-direction: column; gap: 8px }
#presWin .pz-seals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
#presWin .pz-seal { padding: 9px 6px; text-align: center; background: var(--pw-panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px var(--pw-line); opacity: .72 }
#presWin .pz-seal .pw-crest { display: block; margin: 0 auto 6px } #presWin .pz-seal b { display: block; font-size: 13px } #presWin .pz-seal span { display: block; margin: 2px 0; font-size: 11px; color: var(--pz) } #presWin .pz-seal small { font-size: 11px }
#presWin .pz-seal.done { opacity: 1; background: linear-gradient(var(--pz-d), var(--pw-panel-2)); box-shadow: inset 0 0 0 1px var(--pz) } #presWin .pz-seal.done small { color: var(--pz) }
/* narrow (under 620 px of window) */
#presWin.narrow .pz-stats { grid-template-columns: 1fr 1fr } #presWin.narrow .pz-stats .pz-stat:first-child { grid-column: 1 / -1 }
#presWin.narrow .pz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } #presWin.narrow .pz-skh { flex-wrap: wrap } #presWin.narrow .pz-q { width: 100% }
#presWin.narrow .pz-tiers { grid-template-columns: repeat(3, 1fr); row-gap: 10px } #presWin.narrow .pz-lower { grid-template-columns: 1fr }
#presWin.narrow .pz-lv { font-size: 32px; min-width: 56px } #presWin.narrow .pz-stt h2 { font-size: 20px } #presWin.narrow .pz-selic { width: 48px; height: 48px }
/* Midnight (not the default theme): the kit's buttons and fields drawn plainly here */
html:not(.look-mo) #presWin .os-btn { padding: 5px 10px; background: var(--pw-panel-2); color: var(--pw-text); border: 1px solid var(--pw-line); border-radius: 4px; cursor: pointer; font: 700 12px var(--pw-font) }
html:not(.look-mo) #presWin .os-input { padding: 0 8px; background: var(--pw-well); color: var(--pw-text); border: 1px solid var(--pw-line); border-radius: 4px }
html:not(.look-mo) #presWin .os-pill { padding: 1px 6px; border: 1px solid var(--pw-gold); color: var(--pw-gold); border-radius: 3px; font-weight: 700 }