/* Persona Shell — web port of Persona-Quickshell.
   #ui is a stage laid out in the original's logical pixels (1920×1080 design) and
   scaled with a single transform, so every px value here matches the QML source. */

:root {
  --bg: #0c0f1d;
  --fg: #c2c3c6;
  --c1: #1788b6;
  --c2: #578db7;
  --c3: #209fcd;
  --c5: #1cc9d9;
  --yahei: 'Microsoft YaHei', 'Noto Sans', 'Segoe UI', sans-serif;
  --bahn: 'Bahnschrift Condensed', 'Barlow Condensed', sans-serif;
  --mont: 'Montserrat', sans-serif;
  --bebas: 'Bebas Neue', 'Barlow Condensed', sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mont);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

#wall, #wall-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#wall-fallback {
  display: none;
  background: url(../assets/wall/fg-hd.webp) center / cover, url(../assets/wall/bars-hd.webp) center / cover, url(../assets/wall/bg-hd.webp) center / cover;
}
body.no-gl #wall { display: none; }
body.no-gl #wall-fallback { display: block; }

#ui {
  position: fixed;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  pointer-events: none;
  contain: layout style;
}
/* Screen shaders: the wallpaper does it in WebGL; widgets are filtered individually so
   the GPU only filters their own small boxes, not a full-screen transparent surface. */
#ui.f-bluelight > * { filter: url(#f-bluelight); }
#ui.f-grey > * { filter: grayscale(1) contrast(1.18) sepia(0.12) brightness(0.97); }
#ui.f-invert > * { filter: invert(1); }
#ui.f-vibrant > * { filter: saturate(1.6) contrast(1.03); }
#ui.f-crimson > * { filter: url(#f-crimson); }
#ui.f-posterize > * { filter: url(#f-posterize); }
#ui.f-night > * { filter: url(#f-night); }
#ui.f-sepia > * { filter: sepia(1); }
#ui.f-noir > * { filter: grayscale(1) contrast(2.2); }
/* CRT: one cheap scanline + vignette overlay over everything */
body.crt::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

/* ───────────────────────── Clock ───────────────────────── */
#clock {
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 200px;
  overflow: hidden;
  z-index: 10;
}
#clock > * { position: absolute; }
.wave-outer {
  z-index: 1;
  top: 0;
  right: -30px;
  width: 500px;
  height: 140px;
  overflow: hidden;
}
.wave-strip, .wave-text-scroll {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 500px 100%;
  animation: waveScroll 10s linear infinite;
  will-change: transform;
}
@keyframes waveScroll { to { transform: translate3d(-500px, 0, 0); } }
.wave-text {
  z-index: 5;
  top: -9.6px;
  right: -30px;
  width: 500px;
  height: 120px;
  overflow: hidden;
}
#dateMaskText {
  font: 700 129.6px var(--yahei);
  letter-spacing: -14.4px;
  dominant-baseline: text-before-edge;
}
.c-time, .c-weekday, .c-battery, .c-daytime { z-index: 50; white-space: nowrap; line-height: normal; }
.c-time {
  top: 3.84px;
  right: 230.4px;
  font: 700 115.2px var(--yahei);
  letter-spacing: -4.03px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(19, 0, 184, 0.82);
}
.c-weekday {
  top: 67.2px;
  right: 172.8px;
  width: 38.4px;
  text-align: center;
  display: flex;
  justify-content: center;
  font: 500 27.84px var(--bahn);
  letter-spacing: -1.92px;
  color: #fff;
  text-shadow: 1px 0 #00f, -1px 0 #00f, 0 1px #00f, 0 -1px #00f;
}
.c-battery {
  top: 38.4px;
  right: 115.2px;
  width: 96px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font: 700 28.8px 'JetBrains Mono', monospace;
  color: #fffb9f;
  text-shadow: 0 1px 0 rgba(84, 0, 217, 0.39);
}
.c-battery svg { width: 30px; height: 30px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(84, 0, 217, 0.39)); }
.c-battery.phase { top: 44px; font: 700 17px var(--yahei); letter-spacing: 0; color: #fffb9f; text-shadow: 0 1px 0 #1300b8; }
.c-daytime {
  top: 96px;
  right: 124.8px;
  width: 105.6px;
  display: flex;
  justify-content: center;
  font: 700 24.96px var(--yahei);
  letter-spacing: -2px;
  color: #00dbff;
  text-shadow: 1px 0 #002c90, -1px 0 #002c90, 0 1px #002c90, 0 -1px #002c90;
}
.c-circle1 {
  z-index: 60;
  top: 45px;
  right: 40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #ffd200;
  box-shadow: 1px 1px 1px #402b00;
}
.c-circle2 {
  z-index: 61;
  top: 47px;
  right: 42px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ffe500;
  box-shadow: 0 0 6px #fff72a;
}
.c-moon { z-index: 62; top: 47px; right: 41.5px; width: 76px; height: 76px; }

.moon { position: relative; border-radius: 50%; overflow: hidden; isolation: isolate; }
.moon .mh { position: absolute; top: 0; width: 50%; height: 100%; }
.moon .mh.l { left: 0; }
.moon .mh.r { right: 0; }
.moon .me { position: absolute; inset: 0; border-radius: 50%; }

/* ───────────────────────── G33KS title (ransom-note tiles, top centre) ───────────────────────── */
.g-title {
  position: absolute;
  top: 26px;
  left: 50%;
  translate: -50% 0;
  z-index: 11;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-1.5deg);
  pointer-events: none;
}
.g-title span {
  display: grid;
  place-items: center;
  width: 78px;
  height: 92px;
  font: 400 72px/1 'Rubik Dirt', 'Anton', 'Impact', sans-serif;
  border: 4px solid #fff;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.45);
}
/* each tile its own colour + tilt, like letters cut from different pages */
.g-title .t1 { background: #1a6aff; color: #fff; transform: rotate(-6deg) translateY(3px); font-size: 78px; }
.g-title .t2 { background: #fff; color: #0d1a3a; border-color: #8df6ff; transform: rotate(4deg) translateY(-4px); }
.g-title .t3 { background: #8df6ff; color: #0d1a3a; transform: rotate(-3deg) translateY(2px); width: 72px; }
.g-title .t4 { background: #0b113d; color: #8df6ff; transform: rotate(5deg) translateY(-2px); width: 84px; }
.g-title .t5 { background: #1a6aff; color: #fff; transform: rotate(-4deg) translateY(4px); font-size: 80px; }

/* ───────────────────────── JP culture button (under the clock) ───────────────────────── */
.jp-btn {
  --accent: #1a6aff;
  --panel-a: #0d1a3a;
  --panel-b: #10185f;
  --word: #8df6ff;
  position: absolute;
  top: 150px;
  right: 40px;
  z-index: 11;
  width: 220px;
  height: 62px;
  padding: 0 14px 5px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background:
    linear-gradient(162deg, var(--accent) 0 17%, transparent 17.5%),
    linear-gradient(-19deg, var(--accent) 0 13%, transparent 13.5%),
    linear-gradient(90deg, var(--panel-a), var(--panel-b) 45%, var(--panel-a));
  box-shadow: 6px 5px 0 rgba(5, 13, 59, 0.55);
  transform: rotate(-3deg);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 150ms;
}
.jp-ja { font: 400 13px/1 'Dela Gothic One', var(--yahei); color: #d2fdff; opacity: 0.85; margin: 0 0 3px 36px; letter-spacing: 1px; }
.jp-en {
  font: 700 28px/0.9 var(--mont);
  letter-spacing: -1px;
  color: var(--word);
  text-shadow: 0 2px 0 rgba(5, 13, 59, 0.6);
  transform: skewX(-12deg);
  transform-origin: 0 100%;
  white-space: nowrap;
}
.jp-btn:hover { --panel-a: #8df6ff; --panel-b: #d3fdff; --word: #041238; transform: rotate(-3deg) scale(1.06); box-shadow: 6px 5px 0 rgba(5, 13, 59, 0.7); }
.jp-btn:hover .jp-en { text-shadow: none; }
.jp-btn:hover .jp-ja { color: #041238; }
.jp-btn:active { transform: rotate(-3deg) scale(0.97); }
.jp-btn:focus-visible { outline: 2px solid var(--c5); outline-offset: 4px; }
/* second button, stacked under JP CULTURE */
.game-btn { top: 232px; right: 52px; }

/* ───────────────────────── Calendar board (T_UI_VoiceAnswer blue card) ───────────────────────── */
#events {
  position: absolute;
  right: 36px;
  bottom: 40px;
  width: 488px;
  height: 519px;
  z-index: 10;
  pointer-events: none;
  --ink: #eef1ff;
  --hand: 'Caveat', 'Segoe Print', cursive;
}
/* corners measured from the texture (888×944 box, normalised) */
.ev-box {
  position: absolute;
  inset: 0;
  background: #09007f;
  clip-path: polygon(19.1% 0, 100% 12.9%, 74.3% 100%, 0 77.1%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.ev-hl { position: absolute; inset: 0; background: #0d00b9; clip-path: polygon(19.1% 0, 56.8% 5.9%, 12.4% 27.5%); }
.ev-pin { position: absolute; left: 67px; top: 30px; width: 56px; height: 56px; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5)); }
.ev-title {
  position: absolute;
  left: 134px;
  top: 50px;
  font: 400 44px/1 'Dela Gothic One', var(--yahei);
  color: #fff;
  letter-spacing: -1px;
  transform: rotate(3deg);
  transform-origin: 0 50%;
  white-space: nowrap;
}
.ev-title span { color: #9aa8ff; }
.ev-bubble { position: absolute; left: 368px; top: 62px; width: 62px; height: 36px; fill: none; stroke: #fff; stroke-width: 2.2; transform: rotate(6deg); }
.ev-paper {
  position: absolute;
  left: 88px;
  top: 108px;
  width: 300px;
  transform: rotate(6.5deg);
  transform-origin: 0 0;
  font-family: var(--hand);
  color: var(--ink);
}
.ev-month { font: 700 34px/1 var(--hand); margin: 0 0 8px 4px; transform: rotate(-2deg); }
.ev-month small { font-size: 22px; opacity: 0.75; margin-left: 4px; }
.ev-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; text-align: center; }
.ev-wd { font: 700 17px/1.4 var(--hand); color: #9aa8ff; }
.ev-d { position: relative; font: 500 23px/1.35 var(--hand); }
.ev-d.today { text-decoration: underline wavy rgba(154, 168, 255, 0.8) 1.5px; text-underline-offset: 3px; }
.ev-d.event { color: #fff; font-weight: 700; }
.ev-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 36px;
  translate: -50% -52%;
  overflow: visible;
  fill: none;
  stroke: #ff4d6d;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: evDraw 1.1s 0.8s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes evDraw { to { stroke-dashoffset: 0; } }
/* tilted to follow the card's sloping bottom edge; 14px below the dates, well clear of the edge */
.ev-list { list-style: none; margin: 14px 0 0 48px; padding: 0; font: 600 28px/1.2 var(--hand); transform: rotate(5deg); }
.ev-list li { display: flex; align-items: baseline; gap: 8px; }
.ev-list b { color: #ff6b85; font-weight: 700; font-size: 31px; }
.ev-list span { opacity: 0.6; }
.ev-list .none { opacity: 0.55; font-size: 20px; }

/* ───────────────────────── Music player (Capsule) ───────────────────────── */
#player {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 800px;
  height: 300px;
  z-index: 10;
}
.player-img {
  position: absolute;
  left: -20px;
  top: -115px;
  width: 500px;
  height: 500px;
  object-fit: contain;
  transform: rotate(10deg);
  pointer-events: auto; /* wheel over the player = volume */
  -webkit-user-drag: none;
}
.player-info {
  position: absolute;
  left: 250px;
  top: 115px;
  width: 100px;
  height: 60px;
  transform: rotate(10deg);
}
.player-row {
  position: absolute;
  left: -63px;
  top: 0;
  height: 60px;
  display: flex;
  align-items: center;
}
.player-text { width: 80px; padding-left: 20px; transform: translateY(-12px); }
/* the LCD's text area ends just before the ◁ button: keep the marquee inside it */
.marquee { overflow: hidden; white-space: nowrap; max-width: 88px; width: max-content; }
/* scrolling text fades out at the LCD edges instead of being cut mid-letter */
.marquee.scrolling {
  width: 88px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 10px), transparent 100%);
}
.marquee span { display: inline-block; will-change: transform; }
.marquee.artist { font: 500 12px 'Linux Biolinum', 'Alegreya Sans', serif; color: var(--c3); height: 17px; line-height: 17px; }
.marquee.title { font: 500 16px 'Linux Biolinum', 'Alegreya Sans', serif; color: #000; line-height: 20px; height: 22px; }
.marquee.artist:empty, .marquee.artist.empty { visibility: hidden; }
.player-controls { position: relative; width: 106px; height: 1px; margin-left: 40px; }
.p-btn {
  position: absolute;
  top: -15px;
  width: 30px;
  height: 30px;
  pointer-events: auto;
  color: #c2c3c6;
  transition: color 150ms;
}
.p-btn svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.p-btn:hover { color: var(--c3); }
.p-btn.prev { left: 0; }
.p-btn.next { right: 0; }
.p-disc {
  position: absolute;
  left: 23px;
  top: -35px;
  width: 60px;
  height: 60px;
  pointer-events: auto;
}
.disc-art {
  position: absolute;
  inset: 8px;
  background: conic-gradient(from 20deg, #d8d0c2, #9a9081, #efe8da, #8a8172, #d8d0c2, #b3aa9a, #d8d0c2);
  background-size: cover;
  background-position: center;
  -webkit-mask: url(../assets/img/disc-mask.svg) center / 100% 100%;
  mask: url(../assets/img/disc-mask.svg) center / 100% 100%;
  animation: discSpin 60s linear infinite paused;
  transition: scale 300ms cubic-bezier(0.33, 1, 0.68, 1);
}
.p-disc:hover .disc-art { scale: 0.8; }
#player.playing .disc-art { animation-play-state: running; }
@keyframes discSpin { to { transform: rotate(360deg); } }

/* ───────────────────────── App drawer ───────────────────────── */
/* part of the scene now (mascot on the sill): above the widgets, below launcher/menus */
#drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 520px; z-index: 12; }
/* mascot on the window sill — hovering it opens the drawer. left/bottom/width are set in JS */
.mascot {
  position: absolute;
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 3px rgba(4, 10, 40, 0.45));
  transform-origin: 50% 100%;
  transition: translate 250ms cubic-bezier(0.33, 1, 0.68, 1), filter 250ms;
}
.mascot:hover { translate: 0 -5px; filter: drop-shadow(0 9px 6px rgba(4, 10, 40, 0.4)) drop-shadow(0 0 10px rgba(125, 212, 252, 0.35)); }
/* left/top set in JS: the container origin is the mascot's chest; boxes fly out to an arc */
.drawer-blades { position: absolute; width: 0; height: 0; pointer-events: none; }
.mascot:focus-visible { outline: 2px solid var(--c5); outline-offset: 4px; border-radius: 8px; }
/* Blade = dialog box from T_UI_Dialog_02: navy gradient panel, blue slanted band
   top-left, blue wedge bottom-right, flat grey offset shadow, big slanted blue word */
.blade {
  /* colours from the rest of the page: transition blue accents, Stats-card navy,
     menu cyan for the word; hover flips to cyan like the active Stats card */
  --accent: #1a6aff;
  --panel-a: #0d1a3a;
  --panel-b: #10185f;
  --word: #8df6ff;
  position: absolute;
  left: -102px;
  top: -29px;
  width: 204px;
  height: 58px;
  background:
    linear-gradient(162deg, var(--accent) 0 17%, transparent 17.5%),
    linear-gradient(-19deg, var(--accent) 0 13%, transparent 13.5%),
    linear-gradient(90deg, var(--panel-a), var(--panel-b) 45%, var(--panel-a));
  box-shadow: 6px 5px 0 rgba(5, 13, 59, 0.55);
  transition: box-shadow 150ms;
  overflow: hidden;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 10px 4px 6px;
  color: #fff;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  white-space: nowrap;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.blade.show { display: flex; }
.blade:active { cursor: grabbing; }
.blade .bl {
  font: 700 34px/0.9 var(--mont);
  letter-spacing: -1.5px;
  color: var(--word);
  text-shadow: 0 2px 0 rgba(5, 13, 59, 0.6);
  text-transform: uppercase;
  transform: skewX(-12deg) rotate(-5deg);
  transform-origin: 0 100%;
  margin-bottom: 2px;
  transition: color 150ms;
}
.blade .bi { font-size: 12px; color: #d2fdff; opacity: 0.9; margin-bottom: 2px; }
.blade:hover { --panel-a: #8df6ff; --panel-b: #d3fdff; --word: #041238; box-shadow: 6px 5px 0 rgba(5, 13, 59, 0.7); }
.blade:hover .bl { text-shadow: none; }
.blade:hover .bi { color: #041238; }

/* ───────────────────────── App launcher ───────────────────────── */
#search { position: absolute; inset: 0; z-index: 30; pointer-events: auto; }
.search-panel { position: absolute; left: 50px; top: calc(50% - 350px); width: 380px; height: 700px; }
.sp-border, .sp-bg { position: absolute; transform-origin: 0 0; transform: matrix(1, 0, -0.04, 1, 0, 0); }
.sp-border { inset: -3px; border: 3px solid #fff; border-radius: 6px; }
.sp-bg { inset: 0; background: #111827; opacity: 0.97; border-radius: 4px; }
.sp-col { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sp-head { position: relative; height: 80px; flex: none; }
.sp-apps {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 160px;
  height: 50px;
  display: grid;
  place-items: center;
  background: #1a6aff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  font: 700 22px var(--mont);
  letter-spacing: 3px;
  color: #fff;
}
.sp-input {
  position: absolute;
  right: 16px;
  top: 24px;
  width: 160px;
  height: 32px;
  border: 1px solid #1a6aff;
  border-radius: 3px;
  padding: 0 10px;
  display: flex;
}
.sp-input input { all: unset; width: 100%; font: 13px var(--mont); color: #fff; user-select: text; }
.sp-input input::placeholder { color: rgba(255, 255, 255, 0.27); }
.sp-sep { height: 2px; background: #1a6aff; opacity: 0.6; flex: none; }
.sp-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(26, 106, 255, 0.6) transparent; }
.sp-item { position: relative; height: 80px; display: flex; align-items: center; cursor: pointer; }
.sp-item::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 150ms; }
.sp-item::after { content: ''; position: absolute; left: 36px; right: 0; bottom: 0; height: 1px; background: #fff; opacity: 0.08; }
.sp-item.active::before { opacity: 1; }
.sp-item .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1a6aff; display: none; }
.sp-item.active .bar { display: block; }
.sp-item .ic {
  position: relative;
  margin: 0 4px;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  background: #1e2a3a;
  font: 700 18px var(--mont);
  color: #fff;
  transition: background 150ms;
}
.sp-item.active .ic { background: #1a6aff; }
.sp-item .tx { position: relative; min-width: 0; width: calc(100% - 108px); display: flex; flex-direction: column; gap: 4px; }
.sp-item .nm { font: 700 15px var(--mont); color: #fff; transition: color 150ms; }
.sp-item .cm { font: 12px var(--mont); color: #7dd4fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 150ms; }
.sp-item.active .nm { color: #111; }
.sp-item.active .cm { color: #333; }

/* ───────────────────────── OSD ───────────────────────── */
.osd {
  position: absolute;
  left: calc(50% - 275px);
  top: calc(100% / 9);
  width: 550px;
  height: 50px;
  border-radius: 25px;
  background: var(--c2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  z-index: 90;
}
.osd-icon svg { width: 27px; height: 27px; fill: #fff; display: block; }
.osd-track { flex: 1; height: 10px; border-radius: 20px; background: var(--c3); overflow: hidden; }
.osd-fill { height: 100%; width: 100%; border-radius: 20px; background: #fff; transform-origin: 0 0; }
.osd-val { min-width: 50px; text-align: right; font: 700 20px var(--mont); color: #fff; }

/* ───────────────────────── Full-screen layers ───────────────────────── */
.layer { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; }
.layer video, .layer .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.layer .content { position: absolute; inset: 0; }
.z-top { z-index: 40; }
.z-pause { z-index: 70; }
.z-trans { z-index: 80; pointer-events: none; }

/* P3rTransition / P3rTransition3 wipes */
.wipe { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* P3rTransition2 */
.t2-bg { position: absolute; inset: 0; background: #000; transform: translateX(-100%); will-change: transform; }
.t2-col { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; width: 95%; }
.t2-block { height: 324px; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; }
.t2-block i { display: block; width: 100%; height: 100%; transform: matrix(1, 0, -0.15, 1, 0, 0); transform-origin: 0 0; }
.bubbles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Resume (Stats) ── */
.rs-left { position: absolute; left: 2.8%; top: 9%; display: flex; flex-direction: column; gap: 10px; }
.rs-list-title { font: 400 72px 'proggyfonts', var(--mont); color: #f6fbff; padding-left: 12px; line-height: 1.2; }
.rs-card { position: relative; width: 680px; height: 112px; cursor: default; transition: height 300ms cubic-bezier(0.33, 1, 0.68, 1), translate 250ms cubic-bezier(0.33, 1, 0.68, 1); }
.rs-card.active { height: 136px; translate: 6px 0; }
.rs-card .shape { position: absolute; inset: 0; background: #10185f; clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%); }
.rs-card .shade { position: absolute; left: 3%; right: -10px; top: 100%; height: 8px; background: rgba(5, 13, 59, 0.85); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); }
.rs-card.active .shape { background: #8df6ff; }
.rs-card.active .shade { background: #ccc; }
.rs-card .badge {
  position: absolute;
  left: -8px;
  top: 10px;
  width: 52px;
  height: 66px;
  background: #0b113d;
  border: 3px solid #9cf7ff;
  transform: rotate(-8deg);
  display: grid;
  place-items: center;
  font: 400 28px var(--mont);
  color: #d2fdff;
}
.rs-card .badge span { transform: rotate(8deg); }
.rs-card.active .badge { background: #000; border-color: #000; color: #fff; }
.rs-card .ttl { position: absolute; left: 62px; top: 14px; font: 400 48px/1 var(--mont); color: #a5f6ff; }
.rs-card .rank { position: absolute; right: 20px; top: 10px; display: flex; align-items: flex-end; gap: 8px; color: #9ffbff; }
.rs-card .rank small { font: 400 22px var(--mont); padding-bottom: 8px; }
.rs-card .rank b { font: 400 60px/1 var(--mont); }
.rs-card .sub { position: absolute; left: 64px; right: 14px; bottom: 12px; height: 32px; background: #85f4ff; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); display: flex; align-items: center; padding-left: 14px; font: 400 20px var(--mont); color: #041238; }
.rs-card.active .ttl, .rs-card.active .rank { color: #000; }
.rs-card.active .sub { background: #000; color: #fff; }
.rs-detail { position: absolute; right: 4.5%; top: 9.5%; width: min(39%, 620px); height: 74%; }
.rs-detail .bgp { position: absolute; inset: 0; background: linear-gradient(rgba(15, 28, 105, 0.96), rgba(8, 16, 68, 0.97)); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.rs-head { position: relative; height: 92px; background: linear-gradient(90deg, #8ef5ff, #d3fdff); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); display: flex; align-items: center; gap: 14px; padding: 0 18px; color: #08153f; }
.rs-head .ix { font: 400 40px var(--mont); }
.rs-head .tt { font: 400 36px var(--mont); }
.rs-rows { position: absolute; left: 0; right: 0; top: 110px; bottom: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.rs-row { flex: none; height: 56px; background: rgba(8, 18, 72, 0.96); border-radius: 2px; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.rs-row .t { font: 400 24px var(--mont); color: #f2fcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.rs-row .s { margin-left: 1px; height: 34px; padding: 0 14px; display: grid; place-items: center; background: #8df6ff; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); font: 400 16px var(--mont); color: #06133b; white-space: nowrap; }

/* ── Committee (was Options/Shaders) ── */
.op-bars { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.op-bar { position: relative; height: 64px; transition: height 300ms cubic-bezier(0.33, 1, 0.68, 1); }
.op-bar.active { height: 90px; }
.op-bar .red { position: absolute; left: 50%; top: -7px; width: calc(50% + 18px); height: 100%; background: #c4001a; opacity: 0; transition: opacity 200ms; }
.op-bar.active .red { opacity: 1; }
.op-main { position: relative; height: 100%; background: #111; overflow: hidden; cursor: pointer; }
.op-white { position: absolute; top: 0; bottom: 0; right: 0; width: 32px; background: #fff; transition: width 350ms cubic-bezier(0.33, 1, 0.68, 1); }
.op-bar.active .op-white { width: 78%; }
.op-white::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent); opacity: 0; transition: opacity 350ms; }
.op-bar.active .op-white::before { opacity: 1; }
.op-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); z-index: 10; }
.op-char { position: absolute; top: 0; bottom: 0; left: 110px; width: 160px; height: 100%; object-fit: cover; object-position: top; z-index: 3; }
.op-row { position: absolute; inset: 0 20px; display: flex; z-index: 4; pointer-events: none; }
.op-role { width: 60px; height: 100%; display: flex; align-items: center; font: 400 50px var(--bebas); color: #fff; transform: rotate(-30deg); white-space: nowrap; }
/* Group header plate — shape measured from T_UI_Battle_PartyPanel's top-left box:
   top edge rises to the right, bottom edge falls, both sides lean in. */
.op-group {
  position: relative;
  width: 300px;
  height: 44px;
  margin: 4px 0 2px 18px;
  background: #fff;
  clip-path: polygon(0 7%, 100% 0, 97.7% 100%, 3.4% 86%);
  display: flex;
  align-items: center;
  padding-left: 22px;
  font: 400 30px/1 var(--bebas);
  letter-spacing: 1px;
  color: #111;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.op-group:not(:first-child) { margin-top: 18px; }
.op-role.multi span { line-height: 0.92; display: block; }
.op-label { flex: 1; display: grid; place-items: center; font: 400 28px var(--bebas); color: rgba(255, 255, 255, 0.85); transition: color 200ms; }
.op-bar.active .op-label { color: #111; }
.op-dim { position: absolute; inset: 0; background: rgba(40, 45, 54, 0.68); opacity: 0; transition: opacity 320ms; z-index: 12; pointer-events: none; }
/* Status card — P3R party screen ("whose status will you check?"): blue water band on
   top, white body crossed by black slashes, a huge slanted number, portrait bursting
   out of the right side and a red checker tag. The whole card leans back in 3D. */
.st-card { --cc: #1c8de6; position: absolute; left: 25%; top: 20%; width: 1300px; height: 580px; z-index: 20; opacity: 0; pointer-events: none;
  transform: perspective(2600px) rotateY(-7deg) rotateZ(-3deg); transform-origin: 50% 50%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)); }
.st-card.on { pointer-events: auto; }
.st-sky { position: absolute; left: 0; right: 0; top: 0; height: 150px; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(-8deg, rgba(255, 255, 255, 0.10) 0 3px, transparent 3px 22px),
    radial-gradient(ellipse at 20% 60%, color-mix(in srgb, var(--cc) 75%, #fff) 0, transparent 55%),
    radial-gradient(ellipse at 70% 30%, var(--cc) 0, transparent 60%),
    linear-gradient(170deg, color-mix(in srgb, var(--cc) 65%, #000), color-mix(in srgb, var(--cc) 88%, #fff) 55%, color-mix(in srgb, var(--cc) 60%, #000));
  transition: background 250ms; }
.st-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #fff; }
.st-nav { position: absolute; left: 60px; top: 62px; display: flex; align-items: center; gap: 14px; transform: rotate(-4deg); z-index: 2;
  font: 900 italic 54px/1 var(--mont); color: #fff; text-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 40%, #000); }
.st-nav span { cursor: pointer; transition: scale 120ms; }
.st-nav span:hover { scale: 1.2; }
.st-nav span:first-child { color: #ff2b4a; }
/* one dot per member; the current one is a big white diamond */
.st-dots { width: 320px; height: 20px; display: flex; align-items: center; justify-content: space-between; }
.st-dots b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transition: all 200ms; }
.st-dots b.on { width: 18px; height: 18px; border-radius: 2px; background: #fff; rotate: 45deg; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 45%, #000), 0 0 14px #fff; }
.st-body { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; overflow: hidden;
  background: repeating-linear-gradient(-12deg, #fff 0 26px, #eef1f6 26px 30px); clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.st-stripe { position: absolute; left: -60px; right: 35%; background: #0b0b0f; transform: rotate(-4deg); transform-origin: 0 0; }
.st-stripe.s1 { top: 18px; height: 10px; }
.st-stripe.s2 { top: 330px; height: 34px; }
.st-stripe.s3 { top: 388px; height: 12px; right: 45%; }
.st-num { position: absolute; left: 10px; top: 10px; font: 400 430px/0.9 var(--bebas); letter-spacing: -6px; color: #0b0b0f;
  transform: skewX(-14deg); -webkit-text-stroke: 8px #0b0b0f; }
.st-info { position: absolute; left: 290px; top: 60px; width: 480px; transform: rotate(-4deg); transform-origin: 0 0; color: #111; }
.st-r1 { display: flex; align-items: flex-end; gap: 26px; padding-bottom: 8px; border-bottom: 3px solid #111; }
.st-name { font: 700 30px/1 var(--mont); }
.st-lv { margin-left: auto; font: 900 italic 54px/0.8 var(--mont); }
.st-lv small { font: 700 italic 18px var(--mont); margin: 0 6px 0 4px; }
.st-r2 { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; }
.st-r2 b { font: 400 64px/0.9 var(--bebas); letter-spacing: 1px; }
.st-r2 span { font: 700 18px var(--mont); color: #555; }
/* stats box — P5 status panel: jagged black plate with an inset white outline
   (black shape, white copy inset, black copy inset again), rows staggered */
.st-r3 { position: relative; display: inline-flex; flex-direction: column; gap: 8px; margin: 26px 0 0 -14px; padding: 22px 52px 26px 34px;
  white-space: nowrap; font: 700 italic 22px var(--mont); color: #fff; background: #0b0b0f; transform: rotate(-2deg);
  clip-path: polygon(0 8%, 97% 0, 100% 70%, 88% 76%, 90% 100%, 4% 94%); }
.st-r3::before, .st-r3::after { content: ''; position: absolute; clip-path: inherit; }
.st-r3::before { inset: 8px 10px; background: #fff; }
.st-r3::after { inset: 11px 13px; background: #0b0b0f; }
.st-r3 span { position: relative; z-index: 1; }
.st-r3 span:nth-child(even) { margin-left: 34px; }
.st-r3 em { font-style: normal; margin: 0 10px; }
.st-r3 b { font: 900 italic 26px var(--mont); letter-spacing: 0.5px; }
.st-photo { position: absolute; right: 0; top: -60px; bottom: 0; width: 500px; overflow: hidden; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); background: #63d4f6; }
.st-photo::before { content: ''; position: absolute; left: 0; bottom: 0; width: 70%; height: 55%; background: #1c52d8; clip-path: polygon(0 40%, 70% 0, 55% 100%, 0 100%); }
.st-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 40% 0; }
.st-tag { position: absolute; right: 150px; bottom: 120px; display: flex; align-items: center; gap: 14px; padding: 6px 26px 6px 10px; background: #111; transform: rotate(-6deg); z-index: 3; }
.st-tag i { width: 48px; height: 48px; background: conic-gradient(#e6002d 25%, #fff 0 50%, #e6002d 0 75%, #fff 0) 0 0 / 24px 24px; }
.st-tag span { font: 900 italic 46px/1 var(--mont); color: #ff2b4a; letter-spacing: -1px; }
.st-guide { position: absolute; right: 30px; bottom: 24px; z-index: 3; text-align: right; padding: 8px 18px; background: rgba(255, 255, 255, 0.92); clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); font: 700 22px var(--yahei); color: #111; transform: rotate(-4deg); }
.st-guide small { display: block; font: 600 11px var(--mont); color: #777; text-align: left; }
.st-keys { margin-top: 6px; font: 600 15px var(--mont); display: flex; justify-content: flex-end; gap: 16px; }
.st-keys kbd + kbd { margin-left: 3px; }
.st-keys kbd { font: 700 12px var(--mont); padding: 1px 6px; border-radius: 10px; background: #111; color: #fff; }

/* ── Calendar ── */
.cal-bg { position: absolute; inset: 0; background: #0b113d; }
.cal-band { position: absolute; background: #1a4fa8; }
.cal-line { position: absolute; height: 5px; background: #fff; }
.cal-head { position: absolute; left: 40px; top: 10%; display: flex; flex-direction: column; }
.cal-year { font: 700 60px/1.2 var(--mont); color: #fff; }
.cal-month { font: 700 30px/1 var(--yahei); color: #b4c8ff; margin-top: -8px; }
.cal-mnum { font: 700 250px/1 var(--yahei); color: #fff; margin: -40px 0 0 200px; }
.cal-entry { position: absolute; will-change: transform; }
.cal-entry .num { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--yahei); font-weight: 700; color: #fff; line-height: 1; }
.cal-entry .dn { position: absolute; font: 700 20px var(--bahn); color: #fff; }
.cal-entry .dn.sun { color: #ff4444; box-shadow: 0 1.5px 0 #ff4444; }
.cal-entry .dn.sat { color: #4488ff; box-shadow: 0 1.5px 0 #4488ff; }
.cal-ring { position: absolute; border-radius: 50%; border: solid #6490ff; opacity: 0.6; }
.cal-moonwrap { position: absolute; }
.cal-moonring { position: absolute; border-radius: 50%; border: 1.5px solid #ffe700; }

/* ── Pause (Power) ── */
.pz-seq { position: absolute; inset: 0; width: 100%; height: 100%; }
/* big slanted blue lettering, tilted into the top-left corner of the pause loop that stays
   white in every frame (the ribbon and hair never come within ~24px of it) */
.pz-archive {
  position: absolute;
  left: 167px;
  top: 285px;
  z-index: 10;
  font: italic 900 110px/1 var(--mont);
  letter-spacing: -2px;
  color: #0b2bd6;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-69deg);
  pointer-events: none;
}
/* Archive: Instagram highlights as glass shards over the blue water (js/archive.js).
   Each shard is a white polygon with the photo clipped to the same polygon, inset, like the
   P5 stats plate; the outline differs per shard. */
.ar { position: absolute; top: 0; right: 0; bottom: 0; width: 1240px; z-index: 10; visibility: hidden; }
.ar.on { visibility: visible; }
.ar-shards { position: absolute; inset: 0; transition: opacity 260ms, translate 360ms cubic-bezier(0.5, 0, 0.75, 0); }
.ar-shards.away { opacity: 0; translate: 260px 0; pointer-events: none; }
.ar-shard, .ar-item { position: absolute; rotate: var(--rot); cursor: pointer; transition: scale 200ms cubic-bezier(0.33, 1, 0.68, 1), filter 200ms; }
.ar-glass { position: absolute; inset: 0; background: #fff; clip-path: var(--poly); }
.ar-glass img, .ar-glass video { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; clip-path: var(--poly); background: #0a2a9e; }
.ar-shard { filter: drop-shadow(14px 18px 0 rgba(4, 12, 80, 0.55)); }
.ar-shard:hover, .ar-shard:focus-visible { scale: 1.06; filter: drop-shadow(18px 22px 0 #ffe23a); outline: none; z-index: 2; }
.ar-shard .ar-glass img { transition: scale 400ms; }
.ar-shard:hover .ar-glass img { scale: 1.08; }
/* title plate: black slab, white italic caps, red underline bar */
.ar-plate { position: absolute; left: -26px; bottom: 34px; max-width: 120%; padding: 8px 22px 10px 16px; background: #0b0b0f; rotate: -6deg;
  clip-path: polygon(0 6%, 100% 0, 96% 100%, 3% 92%); white-space: nowrap; box-shadow: inset 0 -6px 0 #e6002d; }
.ar-plate b { display: block; font: 900 italic 38px/1 var(--mont); color: #fff; text-transform: uppercase; letter-spacing: -1px; }
.ar-plate small { display: block; margin-top: 4px; font: 700 15px var(--mont); color: #7dd4fc; letter-spacing: 2px; }
/* item count: SALE-style yellow numerals with a blue drop */
.ar-count { position: absolute; right: -10px; top: -30px; font: 400 110px/0.8 var(--bebas); color: #ffe23a; rotate: 10deg;
  text-shadow: 6px 6px 0 #0a1aa8; -webkit-text-stroke: 2px #0a1aa8; pointer-events: none; }
.ar-shard:nth-child(4) .ar-count { top: auto; right: -70px; bottom: 10px; rotate: -8deg; }
.ar-new { position: absolute; left: 30%; top: -22px; padding: 4px 22px; border: 5px solid #e6002d; border-radius: 50%; background: #ffe23a;
  font: 900 italic 30px/1 var(--mont); color: #e6002d; rotate: -10deg; animation: ar-pulse 1.4s ease-in-out infinite; }
@keyframes ar-pulse { 50% { scale: 1.12; } }

/* one highlight: tilted strip */
.ar-gallery { position: absolute; inset: 0; cursor: grab; }
.ar-gallery:active { cursor: grabbing; }
.ar-head { position: absolute; left: 80px; top: 50px; rotate: -5deg; z-index: 3; }
.ar-head h2 { margin: 10px 0 0; font: 900 italic 92px/0.9 var(--mont); text-transform: uppercase; letter-spacing: -3px; color: #ffe23a;
  text-shadow: 7px 7px 0 #0a1aa8; -webkit-text-stroke: 2px #0a1aa8; white-space: nowrap; }
.ar-head small { display: inline-block; margin: 8px 0 0 10px; padding: 3px 12px; background: #0b0b0f; font: 700 18px var(--mont); color: #fff; letter-spacing: 3px; }
.ar-back { display: inline-block; padding: 6px 20px 6px 14px; background: #fff; font: 900 italic 26px var(--mont); color: #0b2bd6; cursor: pointer;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); transition: scale 150ms; }
.ar-back:hover { scale: 1.1; background: #ffe23a; }
.ar-track { position: absolute; left: 60px; top: 300px; height: 640px; rotate: -5deg; transform-origin: 0 50%; }
.ar-item { width: 250px; height: 444px; filter: drop-shadow(10px 14px 0 rgba(4, 12, 80, 0.5)); }
.ar-item:hover { scale: 1.08; z-index: 2; filter: drop-shadow(14px 18px 0 #ffe23a); }
.ar-item.vid::after { content: '▶'; position: absolute; right: 22px; bottom: 26px; width: 46px; height: 46px; display: grid; place-items: center;
  background: #e6002d; color: #fff; font-size: 20px; clip-path: polygon(0 10%, 100% 0, 90% 100%, 6% 90%); pointer-events: none; transition: opacity 200ms; }
.ar-item.vid:hover::after { opacity: 0; }
.ar-no { position: absolute; left: -6px; top: -18px; font: 400 64px/1 var(--bebas); color: #fff; text-shadow: 4px 4px 0 #0b0b0f; pointer-events: none; }

/* one item, big */
.ar-focus { position: absolute; inset: 0; z-index: 5; background: rgba(4, 10, 60, 0.82); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.ar-frame { position: absolute; left: 50%; top: 50%; width: 520px; height: 924px; margin: -462px 0 0 -260px; rotate: -3deg;
  filter: drop-shadow(16px 20px 0 #ffe23a); }
.ar-frame video { cursor: pointer; }
.ar-idx { position: absolute; right: 70px; bottom: 50px; font: 400 40px var(--bebas); color: #7dd4fc; rotate: -6deg; }
.ar-idx b { font-size: 90px; color: #fff; }
.ar-nav { position: absolute; top: 50%; margin-top: -45px; width: 90px; height: 90px; display: grid; place-items: center; background: #fff;
  color: #0b2bd6; font-size: 36px; cursor: pointer; clip-path: polygon(10% 0, 100% 8%, 90% 100%, 0 92%); transition: scale 150ms, background 150ms; }
.ar-nav:hover { scale: 1.15; background: #ffe23a; }
.ar-nav.prev { left: 220px; }
.ar-nav.next { right: 120px; }

/* ───────────────────────── Chrome ───────────────────────── */
#dim { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 150; }
#loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity 500ms;
}
#loader.done { opacity: 0; pointer-events: none; }
.loader-bar { width: min(320px, 60vw); height: 4px; background: #1a2248; transform: skewX(-20deg); overflow: hidden; }
.loader-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #1a6aff, #7dd4fc); transform-origin: 0 0; transform: scaleX(0); transition: transform 250ms; }
#hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%); /* bottom-centre: the calendar board owns bottom-right */
  z-index: 120;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px 12px 16px;
  background: rgba(11, 17, 61, 0.9);
  border-left: 4px solid #7dd4fc;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font: 400 13px/1.5 var(--mont);
  color: #d2fdff;
  transition: opacity 600ms, translate 600ms;
  cursor: pointer;
}
#hint.out { opacity: 0; translate: 40px 0; pointer-events: none; }
#hint b { font: 400 20px var(--bebas); letter-spacing: 1px; color: #8df6ff; }
#hint kbd { font: 700 11px 'JetBrains Mono', monospace; padding: 1px 5px; border: 1px solid rgba(141, 246, 255, 0.4); border-radius: 3px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wave-strip, .wave-text-scroll { animation-duration: 40s; }
}