/* Floralia · power-saving mode "ห้วงนิทรา" (js/powersave.js, design E of powersavepick.html): black, a gold frame, the EXP ring
   on the left with the run's numbers under it, the log of things picked up on the right, the slide-to-return knob below. */
body.pw-on #ui, body.pw-on canvas { visibility: hidden; }   /* (nothing of the game drawn or laid out while it sleeps) */
#pwsave { position: fixed; inset: 0; z-index: 99990; overflow: hidden; color: #f1e8d4; font-family: Prompt, Mali, sans-serif; user-select: none;
  background: radial-gradient(ellipse at 50% 30%, #1c1424, #06050a 70%); }
#pwsave[hidden] { display: none; }
#pwsave .pw-frame { position: absolute; inset: 18px; border: 1px solid #6a5230; border-radius: 6px; box-shadow: inset 0 0 0 5px #0a080e, inset 0 0 0 6px #4a3820; pointer-events: none; }
#pwsave .pw-frame::before, #pwsave .pw-frame::after { content: ''; position: absolute; width: 90px; height: 90px; border: 2px solid #c9a24a; }
#pwsave .pw-frame::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
#pwsave .pw-frame::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
#pwsave .pw-ttl { position: absolute; left: 0; right: 0; top: 4.5vh; text-align: center; }
#pwsave .pw-ttl b { font: 800 26px Cinzel, Prompt, serif; letter-spacing: 8px; background: linear-gradient(180deg, #fff2c0, #c9913a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#pwsave .pw-ttl small { display: block; margin-top: 4px; color: #8d8472; font-size: 13px; letter-spacing: 3px; }
#pwsave b, #pwsave time, #pwsave u, #pwsave em { font-variant-numeric: tabular-nums; }
/* the ring: EXP of the level */
#pwsave .pw-ring { position: absolute; left: 8vw; top: 17vh; width: min(34vw, 46vh); aspect-ratio: 1; }
#pwsave .pw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#pwsave .pw-ring circle[data-pw="arc"] { transition: stroke-dashoffset 1s ease-out; filter: drop-shadow(0 0 4px rgba(255, 207, 106, .55)); }
#pwsave .pw-hero { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); object-fit: contain; opacity: .18; }
#pwsave .pw-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
#pwsave .pw-in em { font-style: normal; font-size: 20px; color: #f1e8d4; }
#pwsave .pw-in b { display: block; font: 700 clamp(30px, 5vh, 52px) Fredoka, Prompt, sans-serif; color: #ffe3a3; }
#pwsave .pw-in small { color: #8d8472; font-size: 13px; }
/* the run's numbers */
#pwsave .pw-st { position: absolute; left: 8vw; top: calc(17vh + min(34vw, 46vh) + 2vh); width: min(34vw, 46vh); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
#pwsave .pw-st div { padding: 7px 4px; text-align: center; border-top: 1px solid #3a2e22; }
#pwsave .pw-st small { color: #8d8472; font-size: 12px; }
#pwsave .pw-st b { display: block; font: 600 20px Fredoka, Prompt, sans-serif; color: #f1e8d4; }
/* the log */
#pwsave .pw-tl { position: absolute; left: 47vw; right: 6vw; top: 15vh; bottom: 17vh; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); }
#pwsave .pw-tl h4 { margin: 0 0 10px; color: #e8c27a; font: 600 15px Prompt, sans-serif; letter-spacing: 3px; }
#pwsave .pw-ev { display: grid; grid-template-columns: 64px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #1e1824; }
#pwsave .pw-ev.new { animation: pw-in .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pw-in { from { transform: translateX(-14px); opacity: 0; } }
#pwsave .pw-ev time { color: #8d8472; font: 500 14px Fredoka, sans-serif; }
#pwsave .pw-ev .pw-ts { width: 46px; height: 46px; }
#pwsave .pw-ev > span:not(.tslot) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; }
#pwsave .pw-ev u { text-decoration: none; color: #f1e8d4; font: 700 15px Fredoka, sans-serif; }
#pwsave .pw-none { color: #5f5848; font-size: 14px; }
/* slide to come back */
#pwsave .pw-unlock { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); width: min(360px, 80vw); height: 54px; border-radius: 30px; border: 1px solid rgba(232, 194, 122, .35);
  background: rgba(20, 16, 26, .7); display: flex; align-items: center; justify-content: center; color: #b8ab90; font-size: 15px; touch-action: none; }
#pwsave .pw-unlock i { position: absolute; left: 5px; top: 5px; z-index: 1; width: 44px; height: 44px; border-radius: 50%; cursor: grab; transition: transform .25s ease-out;
  background: radial-gradient(circle at 40% 35%, #fff3c8, #e0a84a 60%, #8a5a1c); box-shadow: 0 0 14px rgba(255, 200, 100, .6); }
#pwsave .pw-unlock span { background: linear-gradient(90deg, #6d6352 0, #fff3d0 50%, #6d6352 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pw-shim 2.4s linear infinite; }
@keyframes pw-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* a phone held upright: the ring on top, the log under it */
@media (max-aspect-ratio: 1/1) {
  #pwsave .pw-ring { left: 50%; transform: translateX(-50%); top: 11vh; width: min(62vw, 34vh); }
  #pwsave .pw-st { left: 50%; transform: translateX(-50%); top: calc(11vh + min(62vw, 34vh) + 1vh); width: min(86vw, 420px); grid-template-columns: repeat(4, 1fr); }
  #pwsave .pw-tl { left: 7vw; right: 7vw; top: calc(11vh + min(62vw, 34vh) + 12vh); bottom: 14vh; }
}
/* the HUD button on the left, under the CP plate and the buff row (js/powersave.js placeBtn): the สแกน button's slot frame */
#pwbtn { position: fixed; z-index: 880; width: calc(26px * var(--u, 1)); height: calc(26px * var(--u, 1)); min-width: 26px; min-height: 26px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); transition: transform .12s; }
#pwbtn[hidden] { display: none; }
#pwbtn i { font-style: normal; font-size: calc(13px * var(--u, 1)); line-height: 1; filter: drop-shadow(0 0 4px rgba(255, 220, 140, .7)); pointer-events: none; }
#pwbtn b { position: absolute; left: 50%; bottom: calc(-7px * var(--u, 1)); transform: translateX(-50%); padding: 0 calc(5px * var(--u, 1)); border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 800 calc(8px * var(--u, 1)) / calc(11px * var(--u, 1)) 'Mali', sans-serif; color: #ffe7a6; background: #1d1410; border: 1px solid #b8893a; }
#pwbtn:hover { transform: scale(1.08); }
body.win-open #pwbtn { opacity: 0; visibility: hidden; pointer-events: none; }