/* vanilleeu.exe — the retro-window layer on top of v2.css.

   Adds the Y2K / Vena-skin vocabulary: ".exe" windows with a lilac title bar,
   pixel hearts, a crescent moon, sparkles and the overlay pack's stickers
   (wings, horns, panel titles). v2.css stays the base (palette, pills, skull
   button, player hooks). */

:root {
  /* was a pixel font: no 8-bit lettering anywhere, the "pixel" labels are Poppins now */
  --pixel: var(--sans);
  --violet: #b9a3f0;
}

/* --------------------------------------------------------------- window -- */
.exe-win {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1.5px solid rgba(243, 201, 242, .75); border-radius: 12px;
  background: linear-gradient(180deg, #2a252c, #221f24);
  box-shadow: 0 0 0 4px rgba(243, 201, 242, .06), 0 18px 40px rgba(0, 0, 0, .45);
  transition: box-shadow .2s;
  animation: exe-open .55s cubic-bezier(.2, .9, .3, 1.2) both;
  animation-delay: var(--open-delay, 0s);
}
.exe-win:hover { box-shadow: 0 0 0 4px rgba(243, 201, 242, .1), 0 0 26px rgba(230, 169, 230, .25), 0 18px 40px rgba(0, 0, 0, .45); }
@keyframes exe-open { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* title bar: a glowing outline and lilac text (no fill), like a HUD */
.exe-bar {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px;
  height: 32px; padding: 0 8px 0 14px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, rgba(243, 201, 242, .1), rgba(185, 163, 240, .04) 70%, transparent);
  border-bottom: 1.5px solid rgba(243, 201, 242, .55);
  color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .7);
}
.exe-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 15px/1 var(--pixel); letter-spacing: .04em; }
.exe-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.exe-btns i {
  display: grid; place-items: center; width: 20px; height: 18px;
  border: 1.5px solid rgba(243, 201, 242, .7); border-radius: 4px;
  font: 600 11px/1 var(--pixel); font-style: normal; color: var(--lilac); background: transparent; text-shadow: none;
  transition: background .15s, color .15s;
}
.exe-win:hover .exe-btns i:last-child { background: var(--lilac); color: var(--dark-ink); box-shadow: 0 0 10px rgba(243, 201, 242, .7); }
.exe-body { flex: 1; min-width: 0; min-height: 0; padding: 16px 18px; }

/* --------------------------------------------------- shared small bits -- */
.exe-welcome { margin: 0; font: 400 clamp(40px, 4.2vw, 74px)/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); white-space: nowrap; }
.exe-tagline { margin: 10px 0 0; font: 500 12px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #d9cbd9; }
.exe-hearts { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.scene-star { width: 22px; height: 22px; fill: var(--lilac); animation: heart-cycle 5s ease-in-out infinite both; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes heart-cycle {
  0%, 6% { opacity: .25; filter: none; transform: none; }
  12% { opacity: 1; filter: drop-shadow(0 0 7px rgba(243, 201, 242, .9)); transform: translateY(-4px) scale(1.18); }
  18%, 58% { opacity: 1; filter: drop-shadow(0 0 5px rgba(243, 201, 242, .55)); transform: none; }
  70%, 100% { opacity: .25; filter: none; transform: none; }
}


/* --------------------------------------------------------- home: layout -- */
.home-desk {
  display: grid; grid-template-columns: minmax(290px, 330px) minmax(0, 1fr) minmax(330px, 390px); gap: 24px;
  max-width: 1840px; margin: 0 auto; padding: 0 40px 40px;
}
.home-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; min-height: 0; }
.home-col > .exe-win:nth-child(2) { --open-delay: .12s; }
.home-col--mid .exe-win { --open-delay: .2s; }

/* one screen, no scroll, on a computer: the page is the stream scene */
@media (min-width: 1100px) and (min-height: 700px) {
  body.page-home { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .page-home .site-header { flex: none; }
  .page-home .site-header::after { height: 60px; }
  .page-home main { flex: 1; min-height: 0; }
  .page-home .home-desk { height: 100%; padding-bottom: 26px; }
  .page-home .site-footer, .page-home .note-fab, .page-home .mutual-fab { display: none; }
  .page-home .np-exe--side { flex: 1; min-height: 0; }
  .page-home .news-exe { flex: 1; min-height: 0; }
  .page-home .news-exe .exe-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
  .page-home .gb-exe { flex: 1; min-height: 0; }
  .page-home .gb-exe .wall-window { flex: 1; height: auto; min-height: 90px; }
}

/* ---------------------------------------------------------- home: scene -- */
.home-scene { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 26px 0 6px; animation: exe-open .7s ease both; }
.scene-title { position: relative; display: grid; justify-items: center; text-align: center; }
.scene-wing { width: clamp(90px, 9vw, 160px); opacity: .9; transform: rotate(-8deg); filter: drop-shadow(0 0 12px rgba(230, 169, 230, .35)); animation: wing-flap 4s ease-in-out infinite; }
.scene-wing--right { transform: scaleX(-1) rotate(-8deg); animation-name: wing-flap-r; }
@keyframes wing-flap { 50% { transform: rotate(-14deg) translateY(-4px); } }
@keyframes wing-flap-r { 50% { transform: scaleX(-1) rotate(-14deg) translateY(-4px); } }

/* ------------------------------------------------------ home: profile -- */
.profile-exe .exe-body { display: grid; gap: 14px; }
.profile-top { display: flex; align-items: center; gap: 14px; }
.profile-ava { flex: none; width: 86px; height: 86px; border-radius: 14px; object-fit: cover; object-position: 50% 40%; box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.profile-name { display: block; font: 400 36px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.profile-live { display: block; margin-top: 6px; font: 500 13px var(--pixel); color: var(--lilac); }
.profile-facts { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-block: 1px dashed rgba(243, 201, 242, .3); }
.profile-facts div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.profile-facts dt { font: 500 13px var(--pixel); color: var(--lilac); }
.profile-facts dd { margin: 0; font-size: 13.5px; color: var(--text); }
.profile-socials { justify-content: space-between; gap: 6px; }
.profile-socials .round-social { width: 36px; height: 36px; }
.profile-socials .round-social::before { inset: 9px; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-actions .pill { width: 100%; }

/* --------------------------------------------------------- now_playing -- */
.np-exe .exe-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 18px; align-items: center; }
.np-exe-cover {
  grid-row: 1 / 3; aspect-ratio: 1; border-radius: 10px; background: #18151a center / cover;
  box-shadow: 0 0 0 2px var(--lilac), 0 0 calc(22px * var(--beat, 0)) rgba(243, 201, 242, .8);
  transform: scale(calc(1 + .03 * var(--beat, 0)));
}
.np-exe-info { display: grid; gap: 3px; min-width: 0; align-self: end; }
.np-exe-info .kicker { font: 500 10.5px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--lilac); }
.np-exe-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 20px/1.25 var(--sans); color: var(--text); }
.np-exe-title:hover { color: var(--lilac); }
.np-exe-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: #cfc4cf; }
.np-exe-controls { display: flex; align-items: center; gap: 10px; align-self: start; }
.np-exe-controls .skull-btn { width: 52px; height: 52px; }
.np-exe-controls .skull-btn svg { width: 26px; height: 26px; }
.np-exe-controls .round-btn { width: 32px; height: 32px; font-size: 15px; }
.np-exe-controls .np-volume { flex: 1; width: auto; min-width: 60px; margin-left: 4px; }
.np-exe .track { grid-column: 1 / -1; flex: none; margin-top: 6px; }
/* compact version in the homepage side column: cover + title, then the controls */
.np-exe--side .exe-body { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
.np-exe--side .np-exe-cover { flex: 1; width: 100%; min-height: 110px; aspect-ratio: auto; }
.np-exe--side .np-exe-info { align-self: stretch; }
.np-exe--side .np-exe-controls { align-self: stretch; }
.np-exe--side .track { margin-top: 0; }

/* ---------------------------------------------------------- what's new -- */
/* picture cards: the first post is the headline, the four others share a 2x2
   grid; the image says what it is about before the words do */
.news { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.35fr 1fr 1fr; gap: 12px; height: 100%; margin: 0; padding: 0; list-style: none; }
.news li { display: grid; min-height: 0; }
.news li:first-child { grid-column: 1 / -1; }
.news-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 120px; padding: 14px 16px; overflow: hidden;
  border: 1.5px solid rgba(243, 201, 242, .3); border-radius: 12px; background: #18151a center / cover no-repeat; isolation: isolate;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.news-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 22, .25), rgba(20, 17, 22, .92) 78%); transition: background .2s; }
.news-card:hover { border-color: var(--lilac); box-shadow: 0 0 26px rgba(230, 169, 230, .35); transform: translateY(-3px); }
.news-card:hover::before { background: linear-gradient(180deg, rgba(20, 17, 22, .05), rgba(20, 17, 22, .85) 78%); }
.news-tag { align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: rgba(20, 17, 22, .8); border: 1px solid rgba(243, 201, 242, .6); font: 500 13px var(--pixel); color: var(--lilac); }
.news-tag b { font-weight: inherit; }
.news-copy { display: grid; gap: 2px; min-width: 0; }
.news-copy strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 22px/1.2 var(--sans); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.news li:first-child .news-copy strong { font-size: 30px; }
.news-sub { font: 500 14px var(--pixel); color: var(--lilac); }
.news-sub b { font-weight: inherit; }
.news-go { position: absolute; right: 14px; bottom: 12px; font-size: 20px; color: var(--lilac); transition: transform .2s; }
.news-card:hover .news-go { transform: translateX(4px); }
@media (max-width: 760px) { .news { grid-template-columns: 1fr; grid-template-rows: none; } .news li:first-child { grid-column: auto; } }

/* ---------------------------------------------------------- dear_diary -- */
.diary-exe .exe-body { display: flex; padding: 0; }
.diary-exe a { position: relative; display: block; flex: 1; padding: 14px 120px 14px 18px; border-radius: 0 0 10px 10px; background: repeating-linear-gradient(transparent 0 27px, rgba(243, 201, 242, .14) 27px 28px); }
.diary-line { display: block; font: italic 400 17px/28px Georgia, "Times New Roman", serif; color: #f5e9f5; }
.diary-open { display: inline-block; margin-top: 2px; font: 500 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--lilac); }
.diary-exe a:hover .diary-open { text-decoration: underline; }
.diary-photo { position: absolute; top: -8px; right: 16px; width: 84px; aspect-ratio: 4 / 5; border: 5px solid #f4ede6; border-bottom-width: 16px; border-radius: 3px; background: #1b1b1b center / cover; box-shadow: 0 10px 22px rgba(0, 0, 0, .5); transform: rotate(4deg); transition: transform .2s; }
.diary-exe a:hover .diary-photo { transform: rotate(0) scale(1.05); }

/* ----------------------------------------------------------- guestbook -- */
.gb-exe .exe-body { display: flex; flex-direction: column; gap: 10px; }
.gb-steps { display: grid; gap: 8px; }
.gb-step { display: flex; align-items: center; gap: 10px; font: 500 11.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.gb-num {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; background: var(--lilac); color: var(--dark-ink); font: 600 12px var(--pixel); letter-spacing: 0;
}
.gb-steps input, .gb-steps textarea {
  width: 100%; padding: 9px 12px; border: 1px solid rgba(243, 201, 242, .3); border-radius: 10px;
  background: rgba(20, 18, 20, .85); color: var(--text); font: 400 14.5px var(--sans); resize: none;
  transition: border-color .18s, box-shadow .18s;
}
.gb-steps input:hover, .gb-steps textarea:hover, .gb-steps input:focus, .gb-steps textarea:focus { outline: none; border-color: var(--lilac); box-shadow: var(--soft-glow); }
.gb-send { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gb-send .kicker { white-space: nowrap; }
.gb-send .pill { gap: 10px; }
.gb-send .gb-num { width: 20px; height: 20px; font-size: 11px; background: var(--dark-ink); color: var(--lilac); }
.gb-exe .wall-divider { margin: 4px 0 0; }
.gb-exe .wall-window { height: 280px; }
.gb-exe .wall-cta { flex: none; margin-top: 0; }

/* ----------------------------------------------- smaller screens / phone -- */
@media (max-width: 1099px) {
  .home-desk { grid-template-columns: 1fr 1fr; padding: 0 24px 40px; }
  .home-col--mid { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .home-desk { grid-template-columns: 1fr; padding: 0 16px 40px; }
  .scene-wing { width: 56px; }
  .exe-welcome { font-size: 38px; white-space: normal; }
  .exe-tagline { letter-spacing: .16em; font-size: 10.5px; }
  .np-exe .exe-body { grid-template-columns: 76px minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
  .np-exe-cover { grid-row: auto; }
  .np-exe-controls { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .exe-win, .home-scene, .scene-star, .scene-wing { animation: none; }
}


/* ------------------------------------------------- overlay panel titles -- */
/* the stream panels' metal titles (About me, Games, My setup, F.A.Q…) */
.panel-title { display: block; width: 320px; max-width: 78vw; height: auto; margin: -18px auto -26px; filter: drop-shadow(0 0 16px rgba(243, 201, 242, .35)); }
.sec-panel { display: block; width: 250px; max-width: 70vw; height: auto; margin: 0 0 -18px -14px; }

/* ----------------------------------------------------------- mini games -- */
/* readable type: the old pirate/gothic display fonts become Poppins / pixel */
.page-games .games-page { --display: var(--sans); --font-authentic-signature: var(--pixel); }
.page-games .games-page h2, .page-games .games-page h3 { font-weight: 600; letter-spacing: .02em; }
.page-games .games-page .minigames-center { background: none; box-shadow: none; }
.page-games .games-page .minigames-page { padding: 0; min-height: 0; }
.page-games .games-page .mg-intro { margin: 0 0 22px; font-size: 15px; color: #d9cfd9; }
.page-games .games-page .games-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; gap: 20px; padding-top: 10px; }
.page-games .games-page .game-card { min-height: 0; animation: exe-open .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.page-games .games-page .game-card:nth-child(2) { animation-delay: .06s; } .page-games .games-page .game-card:nth-child(3) { animation-delay: .12s; } .page-games .games-page .game-card:nth-child(4) { animation-delay: .18s; } .page-games .games-page .game-card:nth-child(5) { animation-delay: .24s; }
.page-games .games-page .game-card-copy { padding-bottom: 44px; }
@media (max-width: 1250px) { .page-games .games-page .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .page-games .games-page .games-grid { grid-template-columns: 1fr; } }
/* every game card is a little .exe window */
.page-games .games-page .game-card { padding-top: 30px; border: 1.5px solid rgba(243, 201, 242, .6); border-radius: 12px; background: #221f24; }
.page-games .games-page .game-card::before {
  content: attr(data-exe); position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; height: 30px; padding: 0 84px 0 14px;
  background: linear-gradient(90deg, rgba(243, 201, 242, .1), transparent 70%), #221f24; border-bottom: 1.5px solid rgba(243, 201, 242, .55); color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .7); font: 500 14px var(--pixel);
}
.page-games .games-page .game-card::after { content: "_ □ ×"; position: absolute; top: 7px; right: 12px; z-index: 2; font: 600 13px var(--pixel); letter-spacing: 5px; color: var(--lilac); }
.page-games .games-page .game-card:hover, .page-games .games-page .game-card:focus-visible { border-color: var(--lilac); outline: 0; box-shadow: 0 0 26px rgba(230, 169, 230, .3); }
.page-games .games-page .game-card-kicker { font: 500 13px var(--pixel); text-transform: none; }
.page-games .games-page .game-card h2 { font-size: 20px; }
.page-games .games-page .game-card p { color: #c9bfc9; font-size: 14px; }
.page-games .games-page .game-card-open { font: 600 14px var(--pixel); }

/* a game opens full screen, like a maximised window */
html.game-open, html.game-open body { overflow: hidden; }
.page-games .games-page .game-view.active {
  position: fixed; inset: 0; z-index: 300; overflow: auto; padding: 0 0 32px;
  background: radial-gradient(rgba(243, 201, 242, .08) 1px, transparent 1.5px) 0 0 / 16px 16px, #1c191e;
  animation: exe-open .35s ease both;
}
.page-games .games-page .game-view-head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; height: 46px; margin: 0 0 18px; padding: 0 10px 0 22px;
  background: #1c191e; border-bottom: 1.5px solid rgba(243, 201, 242, .6); color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .7); box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.game-view-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 19px var(--pixel); }
.game-view-hint { font: 500 13px var(--pixel); opacity: .7; }
.page-games .games-page .back-games { padding: 8px 14px; border: 1.5px solid var(--lilac); border-radius: 8px; background: transparent; color: var(--lilac); font: 600 14px var(--pixel); cursor: pointer; }
.page-games .games-page .back-games:hover, .page-games .games-page .back-games:focus-visible { background: #000; outline: 2px solid var(--dark-ink); outline-offset: 2px; }
.page-games .games-page .game-view.active > .mini-game-panel { max-width: 1440px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 760px) {
  .game-view-hint { display: none; }
  .page-games .games-page .game-view.active > .mini-game-panel { padding: 0 12px; }
}

/* -------------------------------------------------------- tablet covers -- */
.covers-intro { max-width: 760px; margin: 0 auto 30px; text-align: center; font-size: 16px; color: #ddd3dd; }
.cv-exe .exe-body { display: grid; gap: 18px; padding: 18px; }
.cv-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.cv-stage { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 10px; background: radial-gradient(rgba(243, 201, 242, .1) 1px, transparent 1.5px) 0 0 / 14px 14px, #17141a; overflow: hidden; }
.cv-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cv-stage img.is-in { animation: cv-in .35s ease both; }
@keyframes cv-in { from { opacity: 0; transform: scale(.98); } }
.cv-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(20, 18, 22, .75); }
.cv-arrow--prev { left: 12px; }
.cv-arrow--next { right: 12px; }
.cv-info { display: grid; gap: 14px; align-content: start; padding-top: 6px; }
.cv-count { font: 500 15px var(--pixel); color: var(--lilac); }
.cv-count b { font-weight: 600; }
.cv-name { font: 400 clamp(34px, 3vw, 50px)/1.05 var(--display); color: #fbeefb; text-shadow: var(--glow); overflow-wrap: anywhere; }
.cv-facts { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-block: 1px dashed rgba(243, 201, 242, .3); }
.cv-facts div { display: grid; grid-template-columns: 70px 1fr; }
.cv-facts dt { font: 500 14px var(--pixel); color: var(--lilac); }
.cv-facts dd { margin: 0; font-size: 15px; text-transform: lowercase; }
.cv-note { margin: 0; font-size: 13.5px; color: #d6cdd6; }
.cv-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-photos:empty { display: none; }
.cv-photos button { width: 62px; height: 62px; border: 0; border-radius: 8px; background: #1b1b1b center / cover; box-shadow: 0 0 0 1.5px rgba(243, 201, 242, .3); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.cv-photos button:hover { transform: translateY(-2px); }
.cv-photos button[aria-current="true"] { box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-actions [hidden] { display: none; }
.cv-rail { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
.cv-thumb { flex: 0 0 150px; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; }
.cv-thumb img { width: 150px; height: 96px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(243, 201, 242, .2); transition: box-shadow .15s, transform .15s; }
.cv-thumb span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 13px var(--pixel); }
.cv-thumb:hover img { transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(243, 201, 242, .6); }
.cv-thumb[aria-current] img { box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.cv-thumb[aria-current] span { color: var(--lilac); }
.cover-viewer .notice { margin-top: 14px; }

/* the five steps as a timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 19px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, rgba(243, 201, 242, .6) 0 8px, transparent 8px 14px); }
.timeline li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.tl-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lilac); color: var(--dark-ink); font: 600 18px var(--pixel); box-shadow: var(--glow); }
.timeline strong { margin-top: 6px; font: 500 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.timeline p { margin: 0; font-size: 13.5px; color: #cfc5cf; }

/* faq with the overlay's F.A.Q title, price as a receipt */
.faq-exe { padding-top: 4px; }
.receipt .exe-body { display: grid; gap: 14px; padding: 22px 24px; background: #f4ede6; border-radius: 0 0 10px 10px; color: #2b2427; font: 500 14px/1.5 var(--pixel); }
.receipt-head { text-align: center; font-size: 13px; opacity: .75; }
.receipt-lines { display: grid; gap: 6px; margin: 0; padding: 12px 0; border-block: 2px dashed rgba(43, 36, 39, .35); list-style: none; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 10px; }
.receipt-lines b { color: #b04f8b; }
.receipt-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 18px; }
.receipt-total strong { font: 400 64px/1 var(--display); color: #b04f8b; }
.receipt-foot { text-align: center; font-size: 12px; opacity: .7; }

@media (max-width: 900px) {
  .cv-main { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; justify-items: start; }
  .timeline::before { top: 0; bottom: 0; left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(rgba(243, 201, 242, .6) 0 8px, transparent 8px 14px); }
  .timeline li { grid-template-columns: 40px 1fr; justify-items: start; column-gap: 14px; text-align: left; }
  .timeline li .tl-dot { grid-row: span 2; }
  .timeline strong { margin-top: 0; }
}

/* ----------------------------------------------- one-screen pages (fit) -- */
/* Base.astro `fit`: on a computer the page is one screen, like the homepage.
   The content stays in the 1320px wrap, so the floating buttons and the
   floating player keep their gutters. Smaller screens scroll normally. */
@media (min-width: 1100px) and (min-height: 700px) {
  body.one-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .one-screen .site-header { flex: none; min-height: 0; }
  .one-screen .site-header::after { height: 50px; }
  .one-screen main { flex: 1; min-height: 0; padding-bottom: 26px; }
  .one-screen main > .wrap { height: 100%; }
  .one-screen .site-footer { display: none; }
}
.hero-title--fit { padding: 0 20px 6px; }
.hero-title--fit .panel-title { width: auto; height: 150px; margin: -34px auto -18px; }
.hero-title--fit .title-pills { margin-top: 10px; }

/* ------------------------------------------------------------- about me -- */
.about-desk { display: grid; gap: 22px 26px; align-items: start; align-content: start; grid-template-columns: 300px minmax(0, 1fr) minmax(300px, 380px); }
.about-stack, .about-side, .about-left { display: grid; gap: 22px; }
.about-stack .exe-win:nth-child(2) { --open-delay: .1s; }
.about-side { --open-delay: .15s; }
.about-side .exe-win { --open-delay: .2s; }

/* the photo as a polaroid */
.polaroid { display: block; width: 100%; padding: 12px 12px 0; border: 0; border-radius: 4px; background: #f4ede6; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); cursor: zoom-in; transform: rotate(-1.5deg); transition: transform .2s; }
.polaroid:hover { transform: rotate(0) scale(1.02); }
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid > span { display: block; padding: 12px 4px 14px; text-align: center; font: 500 14px var(--pixel); color: #6d5a66; }

/* profile.txt */
.about-facts { display: grid; gap: 0; margin: 0; }
.about-facts div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px dashed rgba(243, 201, 242, .2); }
.about-facts div:last-child { border-bottom: 0; }
.about-facts dt { font: 500 15px var(--pixel); color: var(--lilac); }
.about-facts dd { margin: 0; font-size: 15px; }
.about-facts a { color: var(--text); border-bottom: 1px solid rgba(243, 201, 242, .4); }
.about-facts a:hover { color: var(--lilac); }
.about-facts .soft { color: var(--muted); }
.about-facts .soft b { color: var(--lilac); font-weight: 600; }
.about-note .prose p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
.about-note .prose p:last-child { margin: 0; }

/* work with me + links */
.about-work p { margin: 0 0 14px; font-size: 15px; }
.about-work-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.link-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.link-list a { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background .15s; }
.link-list a:hover { background: rgba(243, 201, 242, .08); }
.link-icon { width: 22px; height: 22px; background: var(--lilac); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.link-list strong { font-size: 14px; }
.link-list span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--muted); }
.link-list i { font-style: normal; color: var(--lilac); }

@media (max-width: 1180px) {
  .about-desk { grid-template-columns: 260px minmax(0, 1fr); }
  .about-left { grid-row: span 1; }
  .about-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 760px) {
  .about-desk { grid-template-columns: 1fr; }
  .about-side { grid-template-columns: 1fr; }
  .polaroid { max-width: 300px; margin: 0 auto; }
}

/* ------------------------------------------------------------------ osu! -- */
.story-exe .exe-body { font-size: 15px; line-height: 1.7; }
.story-exe p { margin: 0 0 12px; }
.story-count { margin: 16px 0 0 !important; padding-top: 12px; border-top: 1px dashed rgba(243, 201, 242, .3); font: 500 15px var(--pixel); color: var(--muted); }
.story-count b { font-size: 22px; color: var(--lilac); }
.player-card { --open-delay: .1s; }
.pc-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(243, 201, 242, .3); }
.pc-head img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.pc-head div { display: grid; flex: 1; }
.pc-head strong { font: 400 34px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.pc-head span { margin-top: 4px; font: 500 13px var(--pixel); color: var(--muted); }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.pc-stats li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: linear-gradient(100deg, rgba(123, 90, 124, .55), rgba(44, 42, 44, .6)); }
.pc-stats svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--lilac); stroke-width: 1.6; }
.pc-stats small { font: 500 12px var(--pixel); color: var(--lilac); }
.pc-stats strong { font-size: 14px; font-weight: 600; }

/* section heads that use an overlay panel title */
.sec-head--panel { align-items: center; }
.sec-head--panel .sec-panel { margin: -30px -20px -40px -24px; }

/* gear cards get a little .exe title bar */
.gear[data-exe] { padding-top: 44px; border: 1.5px solid rgba(243, 201, 242, .6); border-radius: 12px; overflow: hidden; }
.gear[data-exe]::before { content: attr(data-exe); position: absolute; inset: 0 0 auto; display: flex; align-items: center; height: 30px; padding: 0 14px; background: linear-gradient(90deg, rgba(243, 201, 242, .1), transparent 70%), #221f24; border-bottom: 1.5px solid rgba(243, 201, 242, .55); color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .7); font: 500 14px var(--pixel); }
.gear[data-exe]::after { display: none; }
.gear .display-title { font-family: var(--sans); font-weight: 600; font-size: 18px; }

@media (max-width: 760px) {
  .pc-stats { grid-template-columns: 1fr; }
}

/* the homepage has no name in the top bar (the page is the welcome) */
.page-home .topbar .brand { display: none; }

/* osu! skins: one .osk window each, with a real preview made from the skin
   files (background, tinted hit circle, number, approach circle, cursor) */
.skins-exe { gap: 26px; }
.skin-win .exe-body { display: grid; justify-items: center; gap: 8px; padding: 0 20px 22px; text-align: center; }
.skin-art { position: relative; width: calc(100% + 40px); aspect-ratio: 16 / 9; margin-bottom: 8px; overflow: hidden; background: #111 center / cover no-repeat; }
.skin-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(34, 31, 36, .9)); pointer-events: none; }
.sk-hit, .sk-approach { position: absolute; left: 58%; top: 52%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.sk-hit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sk-hit .sk-num { inset: 30%; width: 40%; height: 40%; }
.sk-hit { animation: sk-hit 1.8s ease-out infinite; }
.sk-approach { object-fit: contain; animation: sk-approach 1.8s linear infinite; }
.sk-approach--ring { border: 3px solid var(--combo); border-radius: 50%; box-shadow: 0 0 10px var(--combo); }
.sk-cursor { position: absolute; left: 58%; top: 52%; z-index: 1; width: 15%; transform: translate(-50%, -50%); animation: sk-cursor 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5)); }
@keyframes sk-approach { 0% { transform: translate(-50%, -50%) scale(3); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 71%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes sk-hit { 0% { opacity: 0; transform: translate(-50%, -50%); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%); } 85%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }
@keyframes sk-cursor { 0% { transform: translate(-50%, -50%) translate(-160%, 90%); } 62%, 78% { transform: translate(-50%, -50%); } 100% { transform: translate(-50%, -50%) translate(130%, -60%); } }
.skin-name { font: 400 50px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); text-transform: lowercase; }
.skin-for { font: 500 14px var(--pixel); color: var(--muted); }
.skin-for a { color: var(--lilac); }
.skin-dl { margin-top: 8px; }

/* tournaments: a blog-style window, rows like the homepage's what's new */
.tourneys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tourney {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; overflow: hidden;
  border: 1px solid rgba(243, 201, 242, .16); border-radius: 10px; background: rgba(18, 16, 20, .55);
  transition: border-color .18s, background .18s, transform .18s;
}
.tourney::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(243, 201, 242, .16) 50%, transparent 60%) -200% 0 / 200% 100% no-repeat; pointer-events: none; }
.tourney:hover { border-color: var(--lilac); background: rgba(243, 201, 242, .07); transform: translateX(4px); }
.tourney:hover::after { animation: shine .8s ease; }
@keyframes shine { to { background-position: 200% 0; } }
.tourney-year { flex: none; padding: 4px 8px; border: 1.5px solid rgba(243, 201, 242, .6); border-radius: 4px; font: 600 15px var(--pixel); color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .6); }
.tourney-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.tourney-copy strong { font: 600 15px/1.3 var(--sans); }
.tourney-copy small { font: 500 13px var(--pixel); color: var(--muted); }
.tourney-go { flex: none; font: 500 13px var(--pixel); color: var(--lilac); }
@media (max-width: 900px) { .tourneys { grid-template-columns: 1fr; } }
/* small previews: the game names lead */
.page-games .games-page .game-card-art { height: 104px; }
.page-games .games-page .game-card-preview { padding: 8px 12px; transform: scale(.82); transform-origin: center; }
.page-games .games-page .game-card h2 { font-size: 22px; line-height: 1.15; }
@media (min-width: 1100px) and (min-height: 700px) {
  .page-games .games-page, .page-games .games-page .minigames-center, .page-games .games-page .minigames-page, .page-games #games-home { height: 100%; }
  .page-games #games-home:not(.hidden) { display: grid; align-content: center; }
}

/* -------------------------------------------------------- hall of fame -- */
.hero-title--fit .glow-title { font-size: 78px; line-height: 1; }
.hof-desk { display: grid; grid-template-columns: 360px minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.page-hof .hero-title--fit .title-pills { margin-top: 18px; }
.page-hof .hero-title--fit { padding-bottom: 22px; }
.hof-preview #draft-preview { transform: none; }
.hof-preview .draft-preview-area .community-wall { padding: 4px 8px 10px; }
.hof-desk .hof-compose.composer, .hof-desk .hof-wall.hof-board { display: flex; padding: 0; background: linear-gradient(180deg, #2a252c, #221f24); }
.hof-wall { --open-delay: .1s; }
.hof-preview { --open-delay: .2s; }
.hof-compose .wall-form input, .hof-compose .wall-form textarea, .hof-compose .wall-form select { margin-bottom: 10px; padding: 9px 12px; }
.hof-compose .wall-form textarea { resize: none; }
.hof-compose .contribution-types { margin-bottom: 12px; }
.hof-compose .contribution-types button { height: 30px; padding: 0 12px; }
.hof-compose .wall-submit { width: 100%; }
.hof-compose .wall-supporting { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.hof-wall .exe-body { display: flex; flex-direction: column; gap: 12px; }
.hof-wall .community-wall { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; padding: 10px 6px 6px; }
.hof-wall .wall-footer { margin-top: 0; padding-top: 10px; border-top: 1px dashed rgba(243, 201, 242, .25); }
.hof-preview .draft-preview-area h3 { margin: 0 0 14px; font: 500 14px var(--pixel); letter-spacing: 0; color: var(--lilac); }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .hof-desk { height: 100%; align-items: stretch; }
  .one-screen .hof-desk > .exe-win { min-height: 0; }
  .one-screen .hof-desk .exe-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
  .one-screen .hof-wall .exe-body { overflow: hidden; }
  .one-screen .hof-wall .community-wall { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
  .one-screen .hof-preview { align-self: start; }
}
@media (max-width: 1250px) {
  .hof-desk { grid-template-columns: 340px minmax(0, 1fr); }
  .hof-preview { display: none; }
}
@media (max-width: 760px) {
  .hof-desk { grid-template-columns: 1fr; }
  .hof-wall { order: -1; }
}
.hof-wall .community-wall { align-content: start; }
.hof-wall .wall-prompt { min-height: 96px; }
.wall-prompt strong { font: 600 15px/1.35 var(--sans); }



/* ---------------------------------------------- page transition (v2.js) -- */
/* Same language as the site: the overlay's charcoal + hanging chains fade in,
   a small .exe window opens ("opening osu.exe…") and fills a bar of pixel
   hearts; the page is swapped once it is full, then the window closes and the
   veil fades away. Only fades and gentle scale: nothing flashes. */
.vtrans { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.vtrans.is-in, .vtrans.is-out { visibility: visible; }
.vt-veil { position: absolute; inset: 0; background: url("/assets/v2/banner.webp?v=3") center top / cover no-repeat, rgba(35, 35, 35, .97); opacity: 0; }
.vt-win {
  position: relative; width: min(380px, 86vw); border: 1.5px solid rgba(243, 201, 242, .75); border-radius: 12px;
  background: linear-gradient(180deg, #2a252c, #221f24); box-shadow: 0 0 0 4px rgba(243, 201, 242, .06), 0 0 40px rgba(230, 169, 230, .25), 0 24px 50px rgba(0, 0, 0, .5);
  opacity: 0;
}
.vt-body { display: grid; justify-items: center; gap: 8px; padding: 22px 22px 24px; text-align: center; }
.vt-name { font: 400 46px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.vt-label { font: 500 15px var(--pixel); color: var(--muted); }
.vt-label span { color: var(--lilac); }
.vt-hearts { display: flex; gap: 7px; margin-top: 6px; }
.vt-hearts i { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .22; }
.is-in .vt-veil { animation: vt-veil-in .18s ease-out both; }
.is-in .vt-veil { background-position: center -30px, 0 0; }
.is-in .vt-win { animation: vt-win-in .2s cubic-bezier(.2, .9, .3, 1.15) .03s both; }
.is-in .vt-hearts i { animation: vt-heart .12s ease-out calc(.06s + var(--i) * 22ms) both; }
.is-out .vt-hearts i { opacity: 1; filter: drop-shadow(0 0 5px rgba(243, 201, 242, .8)); }
.is-out .vt-win { animation: vt-win-out .16s ease-in both; }
.is-out .vt-veil { animation: vt-veil-out .24s ease-in .04s both; }
@keyframes vt-veil-in { from { opacity: 0; background-position: center -30px, 0 0; } to { opacity: 1; background-position: center top, 0 0; } }
@keyframes vt-veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-win-in { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes vt-win-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
@keyframes vt-heart { from { opacity: .22; transform: scale(.7); } 60% { transform: scale(1.2); } to { opacity: 1; transform: none; filter: drop-shadow(0 0 5px rgba(243, 201, 242, .8)); } }

/* cute extra #1: a little burst of pixel hearts where you click (v2.js) */
.click-heart {
  position: fixed; z-index: 1001; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(243, 201, 242, .7));
  animation: click-heart .55s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes click-heart { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .vtrans, .click-heart { display: none; } .scene-star { animation: none; } }
/* little demon horns above the welcome (no sparkles between them) */
.scene-horns { position: absolute; top: -48px; left: 50%; width: 150px; height: 60px; opacity: .9; transform: translateX(-50%); filter: drop-shadow(0 0 12px rgba(230, 169, 230, .35)); animation: horns-tilt 4s ease-in-out infinite; }
@keyframes horns-tilt { 50% { transform: translateX(-50%) translateY(-3px) scale(1.03); } }

/* about me: Y2K ticker, stamps, copyable email */
.ticker { grid-column: 1 / -1; overflow: hidden; height: 34px; border-block: 1.5px solid rgba(243, 201, 242, .45); background: rgba(243, 201, 242, .05); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; animation: ticker 38s linear infinite; }
.ticker-track span { padding: 0 18px; font: 500 15px var(--pixel); color: var(--lilac); white-space: nowrap; text-shadow: 0 0 8px rgba(243, 201, 242, .6); }
.ticker-track b { margin-left: 18px; color: #fbeefb; }
@keyframes ticker { to { transform: translateX(-50%); } }
.polaroid img { aspect-ratio: 1 / 1; }
.stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.stamp { display: grid; place-items: center; height: 38px; border: 1.5px solid rgba(243, 201, 242, .7); border-radius: 3px; line-height: 1.05; text-align: center; transition: transform .15s; }
.stamp:hover { transform: rotate(-3deg) scale(1.06); }
.stamp b { font: 600 12px var(--pixel); text-transform: uppercase; letter-spacing: .04em; }
.stamp span { font: 500 10.5px var(--pixel); }
.stamp--a { background: linear-gradient(#f3c9f2, #d9a3d9); color: var(--dark-ink); }
.stamp--b { background: #1c191e; color: var(--lilac); }
.stamp--c { background: repeating-linear-gradient(45deg, #2b2430 0 6px, #352c3a 6px 12px); color: #fbeefb; }
.stamp--d { background: #000; color: #fbeefb; text-shadow: 0 0 6px var(--lilac); }
.stamp--e { background: linear-gradient(90deg, #b9a3f0, #f3c9f2); color: var(--dark-ink); }
.stamp--f { background: #1c191e; color: #cfc4cf; border-style: dashed; }
.mail-copy { display: grid; width: 100%; gap: 2px; margin: 0 0 14px; padding: 12px 14px; border: 1.5px dashed rgba(243, 201, 242, .55); border-radius: 10px; background: rgba(243, 201, 242, .05); color: var(--text); text-align: left; cursor: copy; transition: border-color .15s, background .15s; }
.mail-copy:hover { border-color: var(--lilac); background: rgba(243, 201, 242, .1); }
.mail-copy.is-copied { border-style: solid; box-shadow: var(--soft-glow); }
.mail-label { font: 500 12px var(--pixel); color: var(--muted); }
.mail-copy strong { font-size: 16px; color: var(--lilac); overflow-wrap: anywhere; }
.mail-hint { font: 500 12px var(--pixel); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
@media (max-width: 760px) { .np-screen { overflow-x: clip; } .np-screen .np-art, .np-screen .np-info { min-width: 0; } }

/* ------------------------------------------------------- coca discord -- */
/* reading order: 1 next multi (main window) · 2 who is around · 3 join in */
.around-step { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 16px var(--pixel); color: var(--lilac); }
.around-step b { color: #fbeefb; }
.around-step:not(:first-child) { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(243, 201, 242, .25); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 8px var(--lilac); }
.discord-hero { padding-top: 8px; }
.discord-desk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(300px, 340px); gap: 24px; align-items: start; }
.discord-left, .discord-mid, .discord-side { display: grid; gap: 22px; align-content: start; min-height: 0; }
.discord-mid .exe-win { --open-delay: .1s; }
.discord-side .exe-win { --open-delay: .18s; }
/* next multi */
.multi-exe .exe-body { display: grid; grid-template-columns: 1fr 170px; gap: 0; padding: 0; }
.multi-exe .banner-img { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.multi-exe .multi-next { padding: 18px 20px 20px; }
.multi-exe .multi-next .kicker { font: 500 14px var(--pixel); letter-spacing: 0; text-transform: none; color: var(--lilac); }
.multi-exe .multi-next .date { margin-top: 6px; }
.multi-exe .multi-next .time { font-size: 64px; }
.multi-exe .lobby { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font: 500 14px var(--pixel); color: var(--muted); }
.multi-exe .lobby b { color: var(--lilac); font-weight: 600; }
.multi-exe .multi-plan { padding: 16px; border: 0; border-left: 1px dashed rgba(243, 201, 242, .3); border-radius: 0 0 10px 0; color: var(--text); }
.multi-exe .multi-plan strong { font-size: 20px; padding: 8px; }
.multi-exe .multi-plan .kicker { font: 500 13px var(--pixel); letter-spacing: 0; text-transform: none; color: var(--lilac); }
/* people */
.online-count { display: block; margin-bottom: 10px; font: 500 14px var(--pixel); color: var(--muted); }
.online-count b { color: var(--lilac); font-size: 18px; }
.discord-mid .member-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
#discord-page-voice { max-height: 170px; }
/* join the team + around */
.team-list, .around-links { display: grid; gap: 10px; }
.team-list .bar, .around-links .bar { width: 100%; min-height: 0; padding: 10px 14px; border: 0; color: var(--text); text-align: left; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; }
.team-list .bar:hover, .around-links .bar:hover { transform: translateX(4px); filter: brightness(1.15); box-shadow: 0 0 0 1.5px var(--lilac); }
.around-links { grid-template-columns: 1fr 1fr; }
.around-links .bar svg { display: none; }
.around-links .bar small { font-size: 9px; }
.around-links .bar strong { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.around-art { display: block; width: calc(100% + 36px); height: 110px; margin: -16px -18px 14px; object-fit: cover; object-position: center 30%; }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .discord-desk { height: 100%; align-items: stretch; }
  .one-screen .discord-desk > * { min-height: 0; }
  .one-screen .discord-mid { grid-template-rows: minmax(0, 1fr); }
  .one-screen .online-exe { min-height: 0; }
  .one-screen .online-exe .exe-body { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .online-exe #discord-members-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
  .one-screen .discord-left { grid-template-rows: minmax(0, 1fr); }
  .one-screen .discord-left .multi-exe { min-height: 0; }
  .one-screen .multi-exe .exe-body { grid-template-rows: auto minmax(0, 1fr); }
  .one-screen .multi-exe .multi-next { display: flex; flex-direction: column; justify-content: center; }
  .one-screen .multi-exe .multi-next .time { font-size: 92px; }
  .one-screen .multi-exe .multi-next .date { font-size: 15px; }
  .one-screen .discord-side { align-content: start; overflow: hidden; }
}
@media (max-width: 1250px) { .discord-desk { grid-template-columns: 1fr 1fr; } .discord-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: start; } .discord-mid .member-list { max-height: 420px; } }
@media (max-width: 760px) { .discord-desk, .discord-side { grid-template-columns: 1fr; } .multi-exe .exe-body { grid-template-columns: 1fr; } .multi-exe .multi-plan { border-left: 0; border-top: 1px dashed rgba(243, 201, 242, .3); border-radius: 0 0 10px 10px; } }

/* --------------------------------------------- the page's main window -- */
/* .exe-win--focus = what to look at first on a page: thicker lit border, a
   brighter title bar, a soft halo. The other windows of that page step back. */
.exe-win--focus {
  border: 2px solid var(--lilac);
  box-shadow: 0 0 0 5px rgba(243, 201, 242, .1), 0 0 38px rgba(230, 169, 230, .32), 0 22px 44px rgba(0, 0, 0, .5);
}
.exe-win--focus:hover { box-shadow: 0 0 0 5px rgba(243, 201, 242, .14), 0 0 46px rgba(230, 169, 230, .42), 0 22px 44px rgba(0, 0, 0, .5); }
.exe-win--focus > .exe-bar { height: 38px; background: linear-gradient(90deg, rgba(243, 201, 242, .24), rgba(185, 163, 240, .08) 70%, transparent); border-bottom-color: var(--lilac); }
.exe-win--focus > .exe-bar .exe-title { font-size: 18px; color: #fbeefb; }
main:has(.exe-win--focus) .exe-win:not(.exe-win--focus) { border-color: rgba(243, 201, 242, .38); box-shadow: 0 16px 36px rgba(0, 0, 0, .4); }
main:has(.exe-win--focus) .exe-win:not(.exe-win--focus) > .exe-bar { border-bottom-color: rgba(243, 201, 242, .3); background: none; }

/* ------------------------------------------------------ osu! (one screen) -- */
.osu-desk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); gap: 22px 24px; }
.osu-card { grid-column: 1 / -1; }
.osu-card .exe-body { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "pfp id stats" "pfp links stats"; gap: 10px 24px; align-items: center; padding: 16px 22px; }
.oc-pfp { grid-area: pfp; width: 112px; height: 112px; border-radius: 18px; object-fit: cover; box-shadow: 0 0 0 2px var(--lilac), var(--glow); }
.oc-id { grid-area: id; display: grid; gap: 4px; min-width: 0; }
.oc-name { font: 400 44px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.oc-sub { font: 500 14px var(--pixel); color: var(--muted); }
.oc-sub b { color: var(--lilac); }
.oc-id p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #e5dbe5; }
.osu-panel .np-screen { min-height: 0; }
.osu-panel .np-info { padding: 22px 26px 20px; }
.osu-panel .np-artist { margin-top: 10px; }
.osu-panel .np-title { font-size: 32px; }
.osu-panel .np-player { margin-top: 14px; }
.osu-panel .np-art { min-height: 0; }
.tourney-cake { align-self: flex-end; margin-top: 10px; }
.oc-stats { grid-area: stats; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.oc-stats li { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: linear-gradient(100deg, rgba(123, 90, 124, .5), rgba(44, 42, 44, .55)); }
.oc-stats svg { grid-row: span 2; width: 20px; height: 20px; fill: none; stroke: var(--lilac); stroke-width: 1.6; }
.oc-stats small { font: 500 12px var(--pixel); color: var(--lilac); }
.oc-stats strong { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.oc-links { grid-area: links; display: flex; flex-wrap: wrap; gap: 8px; }
.osu-app, .tourney-exe { --open-delay: .1s; min-height: 0; }
.tourney-exe { --open-delay: .16s; }
.osu-app .exe-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 18px; }
.osu-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.osu-tabs button { padding: 8px 18px; border: 1.5px solid rgba(243, 201, 242, .45); border-radius: 99px; background: transparent; color: var(--text); font: 500 15px var(--pixel); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.osu-tabs button:hover { border-color: var(--lilac); color: var(--lilac); }
.osu-tabs button[aria-selected="true"] { background: var(--lilac); border-color: var(--lilac); color: var(--dark-ink); box-shadow: var(--soft-glow); }
.osu-panel { min-height: 0; animation: exe-open .3s ease both; }
.osu-panel[hidden] { display: none; }
.osu-panel .np-screen { margin-top: 12px; }
.osu-panel .gear-grid, .osu-panel .skins-grid { gap: 16px; }
.osu-panel .skins-more { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.tourney-exe .exe-body { display: flex; flex-direction: column; }
.tourney-exe .tourneys { grid-template-columns: 1fr; gap: 8px; }
.tourney-exe .tourney { padding: 10px 12px; }
.tourney-exe .tourney-copy strong { font-size: 14px; }
.panel-note { margin: 0 0 10px; font: 500 14px var(--pixel); color: var(--muted); }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .osu-desk { height: 100%; }
  .one-screen .osu-app .exe-body, .one-screen .tourney-exe .exe-body { min-height: 0; }
  .one-screen .osu-panel { flex: 1; display: flex; flex-direction: column; }
  .one-screen .osu-panel[hidden] { display: none; }
  /* each tab fills the window: no empty band under the content */
  .one-screen .osu-panel--maps .np-screen { flex: 1; min-height: 0; }
  .one-screen .osu-panel .gear-grid, .one-screen .osu-panel .skins-grid { flex: 1; min-height: 0; align-items: stretch; }
  .one-screen .osu-panel .gear { display: flex; flex-direction: column; }
  .one-screen .osu-panel .gear > button { flex: 1; min-height: 0; }
  .one-screen .osu-panel .gear img { height: 100%; min-height: 120px; }
  .one-screen .osu-panel .skin-win { min-height: 0; }
  .one-screen .tourney-exe .tourneys { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
}
@media (max-width: 1100px) {
  .osu-desk { grid-template-columns: 1fr; }
  .osu-card .exe-body { grid-template-columns: 90px minmax(0, 1fr); grid-template-areas: "pfp id" "links links" "stats stats"; }
  .oc-pfp { width: 90px; height: 90px; }
}
@media (max-width: 760px) { .osu-card .exe-body { grid-template-columns: 1fr; grid-template-areas: "pfp" "id" "links" "stats"; } .oc-stats { grid-template-columns: 1fr; } }

/* hall of fame: the 4 kinds of piece as tiles, softer labels */
.hof-compose .contribution-types div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hof-compose .contribution-types button { display: grid; justify-items: center; gap: 4px; height: auto; padding: 10px 4px 8px; border-radius: 10px; font: 500 13px var(--pixel); letter-spacing: 0; text-transform: none; }
.hof-compose .contribution-types button b { font-size: 20px; line-height: 1; color: var(--lilac); }
.hof-compose .contribution-types button[aria-pressed="true"] b { color: var(--dark-ink); }
.hof-compose .wall-form label { font: 500 14px var(--pixel); letter-spacing: 0; text-transform: none; color: var(--lilac); }
.hof-compose .wall-form label b { color: var(--muted); font-weight: 500; }
.hof-compose .wall-submit { height: 46px; font-size: 12px; box-shadow: var(--soft-glow); }
.hof-compose .wall-supporting { text-align: center; font: 500 13px var(--pixel); }
.hof-preview .draft-preview-area h3 { text-transform: none; }

/* mini games: the "play random" button in the title pills */
.pill.random-game { border: 0; cursor: pointer; }

/* ---------------------------------------------- mini games: the arcade -- */
.page-games .games-page .arcade { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.page-games .games-page .arcade.hidden { display: none; }
.arcade-list .exe-body { display: flex; flex-direction: column; gap: 14px; }
.arcade-tabs { display: grid; gap: 8px; }
.arcade-tabs button, .arcade-soon { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid rgba(243, 201, 242, .2); border-radius: 12px; background: rgba(18, 16, 20, .5); color: var(--text); text-align: left; }
.arcade-tabs button { cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.arcade-tabs button:hover { border-color: rgba(243, 201, 242, .6); transform: translateX(4px); }
.arcade-tabs button[aria-selected="true"] { border-color: var(--lilac); background: rgba(243, 201, 242, .1); box-shadow: var(--soft-glow); }
.arcade-num { font: 600 22px var(--pixel); color: var(--lilac); text-shadow: 0 0 8px rgba(243, 201, 242, .6); }
.arcade-name { display: grid; font: 600 16px/1.25 var(--sans); }
.arcade-name small { font: 500 13px var(--pixel); color: var(--muted); }
.arcade-arrow { color: var(--lilac); opacity: 0; transition: opacity .15s; }
.arcade-tabs button[aria-selected="true"] .arcade-arrow, .arcade-tabs button:hover .arcade-arrow { opacity: 1; }
.arcade-soon { opacity: .45; border-style: dashed; }
.arcade-list .random-game { width: 100%; height: 44px; margin-top: auto; font-size: 12px; }
.arcade-screen .exe-body { display: flex; flex-direction: column; padding: 0; }
.arcade-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; animation: exe-open .3s ease both; }
.arcade-panel[hidden] { display: none; }
.page-games .games-page .arcade-art { flex: 1; height: auto; min-height: 220px; border: 0; border-bottom: 1px dashed rgba(243, 201, 242, .3); background: radial-gradient(rgba(243, 201, 242, .08) 1px, transparent 1.5px) 0 0 / 16px 16px, #141117; }
.page-games .games-page .arcade-art .game-card-preview { width: 62%; height: auto; padding: 18px; background: none; transform: scale(1.5); }
.page-games .games-page .arcade-art .game-card-preview-badge { display: none; }
.arcade-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kicker play" "title play" "text play"; gap: 4px 28px; align-items: center; padding: 22px 28px 26px; }
.arcade-copy .game-card-kicker { grid-area: kicker; margin: 0; }
.page-games .games-page .arcade-copy h2 { grid-area: title; margin: 0; font-size: 34px; line-height: 1.1; }
.arcade-copy p { grid-area: text; margin: 0; font-size: 15px; color: #d4c9d4; }
.arcade-play { grid-area: play; height: 64px; padding: 0 38px; border: 0; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 16px var(--pixel); letter-spacing: .06em; cursor: pointer; box-shadow: var(--glow); transition: transform .15s, background .15s; }
.arcade-play:hover { transform: scale(1.05); background: #fff; }
@media (min-width: 1100px) and (min-height: 700px) {
  .page-games #games-home.arcade:not(.hidden) { display: grid; height: 100%; align-content: stretch; }
  .page-games .arcade .exe-win { min-height: 0; }
}
@media (max-width: 900px) {
  .page-games .games-page .arcade { grid-template-columns: 1fr; }
  .arcade-copy { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "text" "play"; }
  .arcade-play { justify-self: start; margin-top: 10px; }
}

/* ------------------------------------- tablet covers: gallery + order.exe -- */
.covers-desk { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.covers-desk .cover-viewer .notice { margin-top: 10px; font-size: 12px; }
.covers-desk .cv-main { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 22px; }
.covers-desk .cv-name { font-size: clamp(30px, 2.4vw, 42px); }
.order-exe { --open-delay: .1s; scroll-margin-top: 20px; }
.order-exe .exe-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }
.order-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border: 1.5px solid var(--lilac); border-radius: 99px; font: 500 15px var(--pixel); color: var(--lilac); }
.order-status b { color: #fbeefb; }
.order-price { display: flex; align-items: center; gap: 16px; }
.order-price strong { font: 400 84px/1 var(--display); color: #fbeefb; text-shadow: var(--glow); }
.order-price span { display: grid; font: 600 20px/1.2 var(--sans); }
.order-price small { margin-top: 4px; font: 500 13px var(--pixel); color: var(--muted); }
.order-included { display: grid; gap: 6px; margin: 0; padding: 14px 0; border-block: 1px dashed rgba(243, 201, 242, .3); list-style: none; }
.order-included li { font-size: 14.5px; }
.order-included li::before { content: "✓ "; color: var(--lilac); font-weight: 600; }
.order-included b { color: var(--lilac); }
.order-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.order-steps li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 500 12px/1.2 var(--pixel); color: #d6cbd6; }
.order-steps li span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(243, 201, 242, .12); border: 1.5px solid var(--lilac); color: var(--lilac); font: 600 14px var(--pixel); }
.order-cta { height: 64px; border: 0; border-radius: 16px; background: var(--lilac); color: var(--dark-ink); font: 400 32px/1 var(--gothic); cursor: pointer; box-shadow: var(--glow); transition: transform .15s, background .15s; }
.order-cta:hover { transform: translateY(-2px); background: #fff; }
.order-cta.is-closed { height: auto; padding: 14px; background: transparent; color: var(--lilac); box-shadow: inset 0 0 0 1.5px var(--lilac); font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.order-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faq-dialog { width: min(92vw, 640px); }
.faq-dialog .dialog-body { padding-top: 26px; }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .covers-desk { height: 100%; align-items: stretch; }
  .one-screen .covers-desk > * { min-height: 0; }
  .one-screen .cover-viewer { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .cover-viewer .cv-exe { flex: 1; min-height: 0; }
  .one-screen .cv-exe .exe-body { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .cv-exe .cv-main { flex: 1; min-height: 0; }
  .one-screen .cv-exe .cv-stage { aspect-ratio: auto; height: 100%; min-height: 0; }
  .one-screen .order-exe .exe-body { justify-content: space-between; }
}
@media (max-width: 1100px) { .covers-desk { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .order-steps { grid-template-columns: 1fr; justify-items: start; } .order-steps li { grid-template-columns: 30px 1fr; justify-items: start; align-items: center; text-align: left; } }
/* no pirate font: cover names in Poppins, the price in the site's gothic */
.covers-desk .cv-name { font: 600 30px/1.1 var(--sans); text-shadow: 0 0 14px rgba(243, 201, 242, .45); }
.order-price strong { font-family: var(--gothic); }
@media (max-width: 760px) { .around-links { grid-template-columns: 1fr; } .around-links .bar { min-width: 0; } }

/* ------------------------------------- one-screen pages use the full width -- */
/* on a wide screen (>= 1760px) the fit pages spread like the homepage; the
   music player becomes a compact pill in the top bar (between the pills and
   the menu) and the two floating buttons step aside, as on the homepage. */
@media (min-width: 1760px) and (min-height: 700px) {
  .one-screen main > .wrap { max-width: 1840px; padding: 0 40px; }
  .one-screen .mutual-fab, .one-screen .note-fab { display: none; }
  .one-screen .float-player {
    top: 21px; bottom: auto; left: 430px; right: auto; width: 360px; height: 52px;
    grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 10px; padding: 5px 10px 5px 6px; border-radius: 99px;
    transform-origin: 50% 50%;
  }
  .one-screen .float-player .fp-cover { grid-row: 1; width: 40px; height: 40px; }
  .one-screen .fp-copy { grid-column: 2; grid-row: 1; }
  .one-screen .fp-copy small { font-size: 9px; letter-spacing: .2em; }
  .one-screen .fp-copy strong { font-size: 14px; }
  .one-screen .fp-copy span { display: none; }
  .one-screen .fp-controls { grid-column: 3; grid-row: 1; }
  .one-screen .fp-controls .round-btn { width: 26px; height: 26px; }
  .one-screen .fp-controls .skull-btn { width: 36px; height: 36px; }
  .one-screen .fp-volume { display: none; }
}

/* about me, v3: photo | hi_im_vanilleeu.txt (main) | work + links */
.about-desk { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) minmax(300px, 400px); align-items: stretch; }
.about-hi { --open-delay: .08s; }
.about-hi .exe-body { display: flex; flex-direction: column; gap: 22px; padding: 26px 30px; }
.hi-title { margin: 0; font: 400 clamp(46px, 4vw, 72px)/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.hi-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hi-tiles li { display: grid; gap: 6px; padding: 18px 16px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 14px; background: linear-gradient(160deg, rgba(123, 90, 124, .45), rgba(28, 25, 30, .6)); text-align: center; }
.hi-tiles b { font: 600 clamp(40px, 3.6vw, 62px)/1 var(--sans); color: #fbeefb; text-shadow: var(--glow); }
.hi-tiles span { font: 500 14px var(--pixel); color: var(--lilac); }
.hi-text { display: grid; gap: 12px; max-width: 760px; }
.hi-text p { margin: 0; font-size: 16.5px; line-height: 1.7; color: #e8dfe8; }
.hi-text strong { color: var(--lilac); }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .about-desk { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .one-screen .about-hi .exe-body { justify-content: center; }
}
@media (max-width: 1180px) { .about-desk { grid-template-columns: 260px minmax(0, 1fr); } .about-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .about-desk { grid-template-columns: 1fr; } .about-side { grid-template-columns: 1fr; } .hi-tiles { grid-template-columns: 1fr; } }

/* osu!, v3: card on top; favorite maps | skins & setup | tournaments below */
.osu-desk { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(300px, 380px); }
.maps-exe { --open-delay: .06s; min-height: 0; }
.maps-exe .exe-body { display: flex; flex-direction: column; padding: 14px; }
/* the favorite-map player stacked: picture on top, info below (less tall than the wide one) */
.np-screen--stack { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 8px 0 0; }
.np-screen--stack .np-art { flex: 1; min-height: 120px; border-radius: 4px 4px 0 0; }
.np-screen--stack .np-art::after { background: linear-gradient(180deg, transparent 55%, var(--panel)); }
.np-screen--stack .np-info { padding: 14px 18px 16px; }
.np-screen--stack .np-artist { margin-top: 6px; }
.np-screen--stack .np-title { font: 600 22px/1.2 var(--sans); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-screen--stack .np-meta { margin-top: 8px; }
.np-screen--stack .np-player { margin-top: 10px; gap: 10px; }
.np-screen--stack .np-player .skull-btn { width: 54px; height: 54px; }
.np-screen--stack .np-player .np-volume { width: auto; flex: 1; }
.np-screen--stack .np-more { margin-top: 10px; }
/* skins: the preview stays inside its window, circles all at the same scale */
.skin-win .skin-art { width: auto; margin: 0 -20px 8px; }
.sk-hit, .sk-approach { width: 22%; }
.sk-cursor { width: 9%; }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .maps-exe .exe-body { min-height: 0; }
}
@media (max-width: 1100px) { .osu-desk { grid-template-columns: 1fr; } }

/* discord, v3: next multi (main) | join the team + around coca | who's around (small, secondary) */
.discord-desk { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(250px, 300px); }
.discord-mid .around-art { height: 170px; }
.discord-side .online-exe { --open-delay: .22s; }
.discord-side .around-step { font-size: 14px; }
.discord-side .member-list { grid-template-columns: 1fr; gap: 6px; }
.discord-side .member { padding: 5px 8px; font-size: 12px; }
.discord-side .member img, .discord-side .member .ava { flex-basis: 24px; width: 24px; height: 24px; }
.discord-side #discord-page-voice { max-height: 150px; }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .discord-mid { grid-template-rows: none; align-content: start; }
  .one-screen .discord-side { grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: visible; }
}
@media (max-width: 1250px) { .discord-desk { grid-template-columns: 1fr 1fr; } .discord-side { grid-column: 1 / -1; } }
/* wider side columns once the page uses the full width */
@media (min-width: 1760px) and (min-height: 700px) {
  .one-screen .hof-desk { grid-template-columns: 440px minmax(0, 1fr) 420px; }
  .one-screen .page-games .games-page .arcade, .page-games.one-screen .games-page .arcade { grid-template-columns: 440px minmax(0, 1fr); }
  .one-screen .covers-desk { grid-template-columns: minmax(0, 1fr) 470px; }
}

/* ------------------------------------------------------- osu! love meter -- */
/* arcade preview: two avatars and a score */
.page-games .games-page .love-card-art { display: flex; align-items: center; justify-content: center; gap: 18px; }
.lca-ava { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--lilac), var(--mauve)); box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.lca-ava--b { background: linear-gradient(135deg, var(--violet), #3a2f42); }
.love-card-art b { font: 600 26px var(--pixel); color: var(--lilac); text-shadow: var(--glow); }
/* the game */
.love { display: grid; justify-items: center; gap: 14px; max-width: 980px; margin: 0 auto; padding: 10px 0 30px; text-align: center; }
.love-title { margin: 0; font: 400 64px/1 var(--gothic) !important; color: #fbeefb; text-shadow: var(--glow); }
.love-sub { margin: 0; font: 500 15px var(--pixel); color: var(--muted); }
.love-form { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "a heart b" "go go go"; align-items: center; gap: 18px 26px; width: 100%; margin-top: 10px; }
.love-player[data-love-side="a"] { grid-area: a; }
.love-player[data-love-side="b"] { grid-area: b; }
.love-player { display: grid; justify-items: center; gap: 8px; padding: 18px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 14px; background: rgba(28, 25, 30, .8); }
.love-ava { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(243, 201, 242, .25), transparent 60%), #18151a center / cover; box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.love-player label { font: 500 14px var(--pixel); color: var(--lilac); }
.love-player input { width: 100%; padding: 10px 14px; border: 1px solid rgba(243, 201, 242, .35); border-radius: 10px; background: #141117; color: var(--text); font: 400 15px var(--sans); text-align: center; }
.love-player input:focus { outline: none; border-color: var(--lilac); box-shadow: var(--soft-glow); }
.love-player small { min-height: 18px; font: 500 13px var(--pixel); color: var(--muted); }
.love-player small a { color: var(--lilac); }
.love-heart { grid-area: heart; font-size: 54px; color: var(--lilac); text-shadow: var(--glow); animation: love-beat 1.2s ease-in-out infinite; }
.is-measuring .love-heart { animation-duration: .35s; }
@keyframes love-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.love-go { grid-area: go; justify-self: center; height: 58px; padding: 0 42px; border: 0; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 400 30px/1 var(--gothic); cursor: pointer; box-shadow: var(--glow); transition: transform .15s, background .15s; }
.love-go:hover { transform: scale(1.04); background: #fff; }
.love-go:disabled { opacity: .6; cursor: progress; }
.love-status { min-height: 20px; margin: 0; font: 500 14px var(--pixel); color: var(--lilac); }
.love-status.error { color: #ff9fb0; }
.love-result { display: grid; justify-items: center; gap: 12px; width: 100%; animation: exe-open .4s ease both; }
.love-result[hidden] { display: none; }
.love-score { font: 600 96px/1 var(--sans); color: #fbeefb; text-shadow: var(--glow); }
.love-hearts { display: flex; gap: 8px; }
.love-hearts i { width: 30px; height: 27px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23f3c9f2' d='M12 21.5C5.5 16.6 1 12.8 1 7.6 1 4 3.8 1.2 7.2 1.2c2 0 3.8 1 4.8 2.6 1-1.6 2.8-2.6 4.8-2.6C20.2 1.2 23 4 23 7.6c0 5.2-4.5 9-11 13.9z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .2; transition: opacity .15s, transform .15s, filter .15s; }
.love-hearts i.on { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(243, 201, 242, .9)); }
.is-match .love-hearts i.on { animation: heart-cycle 1.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .05s); }
.love-verdict { margin: 0; font: 400 34px/1.2 var(--gothic); color: var(--lilac); text-shadow: var(--glow); }
.love-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; width: min(760px, 100%); margin: 8px 0 0; padding: 14px 18px; border: 1px dashed rgba(243, 201, 242, .3); border-radius: 12px; list-style: none; }
.love-parts li { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; text-align: left; font: 500 14px var(--pixel); }
.love-parts i { position: relative; height: 8px; border-radius: 4px; background: rgba(243, 201, 242, .12); overflow: hidden; }
.love-parts i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: 4px; background: linear-gradient(90deg, var(--violet), var(--lilac)); animation: love-bar .9s ease-out both; }
@keyframes love-bar { from { width: 0; } }
.love-parts b { color: var(--lilac); text-align: right; }
@media (max-width: 760px) {
  .love-form { grid-template-columns: 1fr; grid-template-areas: "a" "heart" "b" "go"; }
  .love-parts { grid-template-columns: 1fr; }
  .love-title { font-size: 46px !important; }
  .love-score { font-size: 72px; }
}

/* ---- details round (2026-11-15) ---- */
/* about: wings around the greeting, the centre less of a block */
.hi-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.hi-wing { width: clamp(70px, 6vw, 120px); opacity: .9; transform: rotate(-8deg); filter: drop-shadow(0 0 12px rgba(230, 169, 230, .35)); animation: wing-flap 4s ease-in-out infinite; }
.hi-wing--r { transform: scaleX(-1) rotate(-8deg); animation-name: wing-flap-r; }
.about-hi .exe-body { align-items: center; text-align: center; }
.about-hi .hi-tiles { width: min(100%, 860px); }
.about-hi .hi-text { margin: 0 auto; }
.polaroid { padding-bottom: 12px; }
/* osu!: links centred, the cake a little bigger */
.np-screen--stack .np-more, .osu-panel .skins-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.tourney-cake { align-self: center; height: 38px; padding: 0 18px; font-size: 12px; }
/* discord: the whole banner, a smaller multi column, the online list to the bottom, room under the pills */
.discord-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(250px, 300px); }
.discord-hero { padding-bottom: 22px; }
.discord-hero .title-pills { margin-top: 0; }
.multi-exe .banner-img, .one-screen .multi-exe .banner-img { aspect-ratio: 1856 / 576; height: auto; object-fit: contain; background: #1c191e; }
.one-screen .multi-exe .multi-next .time { font-size: 72px; }
.discord-side #discord-members-list { max-height: none; }
/* tablet covers: closer to the rest of the site */
.covers-desk .cv-name { font: 400 48px/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); text-transform: lowercase; }
.covers-desk .cv-stage { background: radial-gradient(rgba(243, 201, 242, .08) 1px, transparent 1.5px) 0 0 / 16px 16px, #1c191e; border: 1px solid rgba(243, 201, 242, .2); }
.covers-desk .cv-thumb span { font: 600 12px var(--sans); letter-spacing: .04em; }
.order-included a { color: var(--lilac); border-bottom: 1px solid rgba(243, 201, 242, .4); }
/* mini games: a bigger "play random" */
.arcade-list .random-game { height: 54px; font-size: 15px; letter-spacing: .14em; }

/* ---- mini games round (2026-11-16) ------------------------------------------
   The games were carried over with the old site's colours (--pink, --pink2,
   --pink-light), which v2 never defines: the active crossword word lost its
   background and its letters vanished into the black board. They get the
   site's lilacs now, and the love meter's look: gothic title, rounded
   outlined panels, pill buttons. */
.page-games .games-page { --pink: #c98bca; --pink2: #e6a9e6; --pink-light: #f6dcf5; --pink-main: var(--lilac); }

/* arcade art: the welcome page's scene — wings either side, sparkles, a picture card */
.page-games .games-page .arcade-art { position: relative; display: grid; place-items: center; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 14% 22% / 18px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 84% 18% / 24px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 78% 80% / 14px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 22% 78% / 12px no-repeat,
    radial-gradient(ellipse at 50% 55%, rgba(230, 169, 230, .16), transparent 62%),
    radial-gradient(rgba(243, 201, 242, .07) 1px, transparent 1.5px) 0 0 / 16px 16px, #141117; }
.page-games .games-page .arcade-art::before, .page-games .games-page .arcade-art::after { content: ""; position: absolute; top: 50%; width: clamp(120px, 11vw, 200px); aspect-ratio: 1; margin-top: calc(clamp(120px, 11vw, 200px) / -2);
  background: url("/assets/overlay/items/wings.png") center / contain no-repeat; opacity: .85; filter: drop-shadow(0 0 14px rgba(230, 169, 230, .35)); animation: wing-flap 4s ease-in-out infinite; }
.page-games .games-page .arcade-art::before { left: 10%; }
.page-games .games-page .arcade-art::after { right: 10%; animation-name: wing-flap-r; transform: scaleX(-1); }
.page-games .games-page .arcade-art .game-card-preview { position: relative; z-index: 1; width: min(46%, 520px); padding: 26px; transform: rotate(-2deg); border: 1.5px solid var(--lilac); border-radius: 18px;
  background: linear-gradient(180deg, #2a2330, #1c181f); box-shadow: var(--soft-glow), 0 18px 40px rgba(0, 0, 0, .45); }
.page-games .games-page .arcade-panel:nth-child(even) .arcade-art .game-card-preview { transform: rotate(2deg); }
/* crosswords: light squares, one lilac word */
.page-games .games-page .arcade-art .crossword-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.page-games .games-page .arcade-art .mini-crossword { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(7, 1fr); gap: 3px; width: 100%; height: auto; max-width: none; aspect-ratio: 9 / 7; }
.page-games .games-page .arcade-art .mini-crossword span { background: #f7eef7; border-radius: 3px; box-shadow: none; }
.page-games .games-page .arcade-art .mini-crossword span:nth-child(n+3):nth-child(-n+7) { background: var(--pink2); box-shadow: 0 0 8px rgba(243, 201, 242, .7); }
.page-games .games-page .arcade-art .crossword-preview-clues { display: grid; gap: 10px; }
.page-games .games-page .arcade-art .crossword-preview-clues span { height: 9px; border-radius: 9px; background: rgba(243, 201, 242, .22); }
.page-games .games-page .arcade-art .crossword-preview-clues span:first-child { background: var(--lilac); width: 80%; }
.page-games .games-page .arcade-art .crossword-preview-clues span:nth-child(3) { width: 65%; }
/* love meter: my picture, a mystery player, the score */
.page-games .games-page .arcade-art .love-card-art { display: flex; align-items: center; justify-content: center; gap: 22px; }
.page-games .games-page .arcade-art .lca-ava { width: 92px; height: 92px; border-radius: 50%; background: url("/assets/osu/pfp.png") center / cover; box-shadow: 0 0 0 2px var(--lilac), var(--soft-glow); }
.page-games .games-page .arcade-art .lca-ava--b { background: radial-gradient(circle at 50% 40%, rgba(243, 201, 242, .3), transparent 62%), #18151a; position: relative; }
.page-games .games-page .arcade-art .lca-ava--b::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 40px var(--sans); color: var(--lilac); }
.page-games .games-page .arcade-art .love-card-art b { font: 600 30px var(--sans); color: #fbeefb; text-shadow: var(--glow); white-space: nowrap; }
/* hidden sentence: letter tiles */
.page-games .games-page .arcade-art .sentence-card-art { display: grid; gap: 18px; justify-items: center; }
.page-games .games-page .arcade-art .sentence-card-row, .page-games .games-page .arcade-art .sentence-card-bank { display: flex; gap: 8px; }
.page-games .games-page .arcade-art .sentence-card-row span, .page-games .games-page .arcade-art .sentence-card-bank span { display: grid; place-items: center; width: 46px; height: 52px; border-radius: 10px; border: 1.5px solid rgba(243, 201, 242, .4); background: #141117; color: #fbeefb; font: 600 22px var(--sans); }
.page-games .games-page .arcade-art .sentence-card-row span:nth-child(2), .page-games .games-page .arcade-art .sentence-card-row span:nth-child(5) { border-color: var(--lilac); color: var(--lilac); box-shadow: var(--soft-glow); }
.page-games .games-page .arcade-art .sentence-card-bank span { width: 40px; height: 44px; background: var(--lilac); border-color: var(--lilac); color: var(--dark-ink); font-size: 18px; }
/* guess the beatmap: a real cover, blurred, and a question mark */
.page-games .games-page .arcade-art .beatmap-card-art { padding: 0; overflow: hidden; }
.page-games .games-page .arcade-art .beatmap-card-cover { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 7; border: 0; border-radius: 0;
  background: linear-gradient(rgba(28, 24, 31, .35), rgba(28, 24, 31, .55)), url("https://assets.ppy.sh/beatmaps/1254944/covers/cover.jpg") center / cover;
  font: 600 72px var(--sans); color: #fbeefb; text-shadow: var(--glow); }

/* inside a game: one shared head, the love meter's */
.page-games .games-page .cw-top, .page-games .games-page .sentence-head, .page-games .games-page .oreo-head { display: grid; justify-items: center; gap: 12px; margin: 0 0 18px; text-align: center; }
.page-games .games-page .cw-title h2, .page-games .games-page .sentence-head h2, .page-games .games-page .oreo-head h2 { margin: 0; font: 400 52px/1 var(--gothic) !important; color: #fbeefb; text-transform: lowercase; text-shadow: var(--glow); letter-spacing: 0; }
.page-games .games-page .cw-title p, .page-games .games-page .sentence-head p, .page-games .games-page .oreo-head p { margin: 6px 0 0; font: 500 15px var(--sans) !important; color: var(--muted) !important; }
.page-games .games-page .cw-actions, .page-games .games-page .sentence-actions, .page-games .games-page .oreo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-games .games-page .cw-actions button, .page-games .games-page .sentence-actions button, .page-games .games-page .oreo-tabs button, .page-games .games-page .oreo-modes button, .page-games .games-page .oreo-giveup {
  height: 38px; padding: 0 20px; border: 1.5px solid rgba(243, 201, 242, .45); border-radius: 99px; background: rgba(28, 25, 30, .8); color: var(--text); font: 500 14px var(--sans); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.page-games .games-page .cw-actions button:hover, .page-games .games-page .sentence-actions button:hover, .page-games .games-page .oreo-tabs button:hover, .page-games .games-page .oreo-modes button:hover, .page-games .games-page .oreo-giveup:hover { border-color: var(--lilac); color: #fff; outline: 0; }
.page-games .games-page .oreo-tabs button[aria-selected="true"], .page-games .games-page .oreo-modes button[aria-pressed="true"], .page-games .games-page .oreo-modes button.active { background: var(--lilac); border-color: var(--lilac); color: var(--dark-ink); }
.page-games .games-page .cw-actions button:first-child, .page-games .games-page .sentence-actions button:first-child { background: var(--lilac); border-color: var(--lilac); color: var(--dark-ink); }
.page-games .games-page .cw-status, .page-games .games-page .sentence-status { text-align: center; font: 500 15px var(--sans); color: var(--lilac); }

/* crosswords: the board in a dotted frame, the clues on the right, all of them shown */
.page-games .games-page .cw-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; align-items: stretch; }
.page-games .games-page .cw-clue-panel { order: 2; max-height: none; padding: 18px; gap: 14px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 16px; background: rgba(28, 25, 30, .8); }
.page-games .games-page .minigames-page.game-active .cw-clue-panel { max-height: calc(100vh - 230px); }
.page-games .games-page .cw-current-view { flex: none; padding: 16px 18px; border: 1.5px solid var(--lilac); border-radius: 12px; background: rgba(243, 201, 242, .08); box-shadow: var(--soft-glow); }
.page-games .games-page .cw-current-empty { margin: 0; color: var(--muted); font: 500 15px var(--sans); }
.page-games .games-page .cw-current-heading { margin-bottom: 6px; color: var(--lilac); font: 600 13px var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; }
.page-games .games-page .cw-current-definition { color: #fbeefb; font: 500 17px/1.5 var(--sans) !important; }
.page-games .games-page .cw-current-length { margin: 8px 0 0; padding: 0; color: var(--muted); font: 500 13px var(--sans) !important; }
.page-games .games-page .cw-direction-tabs { margin-bottom: 10px; }
.page-games .games-page .cw-direction-tabs button { border-radius: 99px; padding: 4px 12px; font: 600 11px var(--sans); background: transparent; border-color: rgba(243, 201, 242, .45); color: var(--text); }
.page-games .games-page .cw-direction-tabs button[aria-pressed="true"] { background: var(--lilac); border-color: var(--lilac); color: var(--dark-ink); }
.page-games .games-page .cw-progress { padding-top: 8px; color: var(--muted); font: 500 12px var(--sans); }
.page-games .games-page .cw-all-view { flex: 1; padding: 0 6px 0 0; }
.page-games .games-page .cw-clue-group h3 { margin: 0 0 6px; padding: 3px 12px; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 11px var(--sans); letter-spacing: .1em; }
.page-games .games-page .cw-clue { padding: 7px 10px; border: 0; border-left: 2px solid transparent; border-radius: 8px; color: #d9cfd9; font: 400 14px/1.45 var(--sans); }
.page-games .games-page .cw-clue b { color: var(--lilac); }
.page-games .games-page .cw-clue:hover { background: rgba(243, 201, 242, .07); outline: 0; color: #fff; }
.page-games .games-page .cw-clue.active { background: rgba(243, 201, 242, .16); border-left-color: var(--lilac); color: #fff; }
.page-games .games-page .cw-board-wrap { padding: 22px; border: 1.5px solid rgba(243, 201, 242, .2); border-radius: 16px; background: radial-gradient(rgba(243, 201, 242, .08) 1px, transparent 1.5px) 0 0 / 16px 16px, #1c191e; }
.page-games .games-page .cw-cell { border: 1px solid #3a3340; background: #f7eef7; transition: background .12s; }
.page-games .games-page .cw-cell input { color: var(--dark-ink); font: 700 17px var(--sans); }
.page-games .games-page .cw-cell .num { color: #7b5a7c; font: 600 10px var(--sans); }
.page-games .games-page .cw-cell.crossing-word { background: #f3d9f2; box-shadow: none; }
.page-games .games-page .cw-cell.word-active { background: var(--pink2); }
.page-games .games-page .cw-cell.active { z-index: 4; background: #fff; box-shadow: inset 0 0 0 3px #9b5a9c, 0 0 0 2px var(--lilac), 0 0 16px rgba(243, 201, 242, .9); }
.page-games .games-page .cw-cell.correct { background: #cdeed9; }
.page-games .games-page .cw-cell.wrong { background: #ffc6d2; }

/* the hidden sentence: soft tiles, a picked letter glows */
.page-games .games-page .sentence-instruction { margin: 0 auto 16px; padding: 0; border: 0; background: none; text-align: center; font: 500 14px var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; }
.page-games .games-page .sentence-board-scroll { padding: 22px; border: 1.5px solid rgba(243, 201, 242, .2); border-radius: 16px; background: radial-gradient(rgba(243, 201, 242, .08) 1px, transparent 1.5px) 0 0 / 16px 16px, #1c191e; }
.page-games .games-page .sentence-cell { border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 8px; background: #141117; color: #fbeefb; font: 600 18px var(--sans); }
.page-games .games-page .sentence-cell.fixed { border-color: transparent; background: transparent; color: var(--lilac); }
.page-games .games-page .sentence-cell.is-selected { border-color: var(--lilac); box-shadow: var(--soft-glow); }
.page-games .games-page .sentence-cell.is-correct { border-color: #9fdcb5; background: rgba(159, 220, 181, .15); }
.page-games .games-page .sentence-cell.is-wrong { border-color: #ff9fb0; background: rgba(255, 159, 176, .15); }
.page-games .games-page .sentence-mark { color: var(--lilac); }
.page-games .games-page .sentence-bank-wrap { margin-top: 18px; padding: 18px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 16px; background: rgba(28, 25, 30, .8); }
.page-games .games-page .sentence-bank-wrap h3 { display: inline-block; margin: 0 0 12px; padding: 3px 12px; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 11px var(--sans); letter-spacing: .1em; }
.page-games .games-page .sentence-tile { border: 1.5px solid var(--lilac); border-radius: 8px; background: rgba(243, 201, 242, .12); color: #fbeefb; font: 600 17px var(--sans); transition: transform .12s, background .12s; }
.page-games .games-page .sentence-tile:hover { transform: translateY(-2px); background: var(--lilac); color: var(--dark-ink); }
.page-games .games-page .sentence-tile.is-selected { background: var(--lilac); color: var(--dark-ink); box-shadow: var(--glow); }

/* guess the beatmap: rounded cover, the love meter's input and button */
.page-games .games-page .oreo-art, .page-games .games-page .oreo-side, .page-games .games-page .oreo-setup, .page-games .games-page .oreo-board-list { border: 1.5px solid rgba(243, 201, 242, .35) !important; border-radius: 16px; overflow: hidden; background: rgba(28, 25, 30, .8); }
.page-games .games-page .oreo-player { border-radius: 12px; border-color: rgba(243, 201, 242, .35); background: rgba(20, 17, 23, .85); }
.page-games .games-page .oreo-play-btn { border-radius: 50%; background: var(--lilac); color: var(--dark-ink); }
.page-games .games-page .oreo-track span, .page-games .games-page .oreo-timer-bar span, .page-games .games-page .oreo-timer-bar::after { background: linear-gradient(90deg, var(--violet, #b48bb4), var(--lilac)); }
.page-games .games-page .oreo-timer-num { font: 600 64px/1 var(--sans); color: #fbeefb; text-shadow: var(--glow); }
.page-games .games-page .oreo-guess-form { gap: 10px; }
.page-games .games-page .oreo-guess { height: 48px; padding: 0 18px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 99px; background: #141117; color: var(--text); font: 400 16px var(--sans); }
.page-games .games-page .oreo-guess:focus { outline: none; border-color: var(--lilac); box-shadow: var(--soft-glow); }
.page-games .games-page .oreo-guess-form button[type="submit"], .page-games .games-page .oreo-start { height: 48px; padding: 0 30px; border: 0; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 15px var(--sans); box-shadow: var(--soft-glow); cursor: pointer; }
.page-games .games-page .oreo-giveup { height: 48px; }
.page-games .games-page .oreo-lead { font: 500 15px/1.5 var(--sans); text-transform: none; color: var(--muted); }

/* the game screen's own bar: the site's outlined title */
.page-games .games-page .back-games { height: 34px; padding: 0 16px; border: 1.5px solid rgba(243, 201, 242, .45); border-radius: 99px; background: transparent; color: var(--text); font: 500 13px var(--sans); }
.page-games .games-page .back-games:hover { border-color: var(--lilac); background: var(--lilac); color: var(--dark-ink); outline: 0; }

@media (max-width: 900px) {
  .page-games .games-page .cw-layout { grid-template-columns: 1fr; }
  .page-games .games-page .cw-clue-panel { order: 0; max-height: 300px; }
  .page-games .games-page .arcade-art::before, .page-games .games-page .arcade-art::after { width: 70px; margin-top: -35px; left: 2%; }
  .page-games .games-page .arcade-art::after { left: auto; right: 2%; }
  .page-games .games-page .arcade-art .game-card-preview { width: 70%; }
}
@media (prefers-reduced-motion: reduce) { .page-games .games-page .arcade-art::before, .page-games .games-page .arcade-art::after { animation: none; } }
.page-games .games-page .arcade-art .beatmap-card-art { display: grid; grid-template-columns: 1fr; gap: 0; }
.page-games .games-page .arcade-art .beatmap-card-ui { display: grid; gap: 6px; padding: 16px 22px 20px; text-align: left; }
.page-games .games-page .arcade-art .beatmap-card-ui strong { font: 600 17px var(--sans); color: #fbeefb; text-transform: lowercase; letter-spacing: 0; }
.page-games .games-page .arcade-art .beatmap-card-ui small { font: 500 13px var(--sans); color: var(--muted); }
.page-games .games-page .arcade-art .beatmap-card-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lilac) 38%, rgba(243, 201, 242, .18) 38%); }
.page-games .games-page .arcade-art .beatmap-card-controls { display: none; }
.page-games .games-page .cw-top, .page-games .games-page .sentence-head, .page-games .games-page .oreo-head { grid-template-columns: minmax(0, 1fr); width: 100%; }
.page-games .games-page .sentence-word { background: transparent; }
.page-games .games-page .sentence-tile.selected { background: var(--lilac); color: var(--dark-ink); box-shadow: var(--glow); }
.page-games .games-page .oreo-art img { width: 100%; object-fit: cover; }

/* ---- last details (2026-11-14 night) ----------------------------------------- */
/* home: each picture sits on its own layer, a little zoomed, so the pictures'
   own edges (the tablet frame, a cut crossword row) never show along the card */
.news-card { background-size: 0 0; background-color: #18151a; }
.news-card::after { content: ""; position: absolute; inset: 0; z-index: -2; background-image: inherit; background-position: var(--pos, center); background-size: cover; background-repeat: no-repeat; transform: scale(var(--zoom, 1.08)); transition: transform .4s ease; }
.news-card:hover::after { transform: scale(calc(var(--zoom, 1.08) + .04)); }
.news li:nth-child(2) .news-card { --zoom: 1.45; --pos: 50% 40%; }
.news li:nth-child(3) .news-card { --zoom: 1.2; }
.news li:nth-child(5) .news-card { --zoom: 1.12; --pos: 50% 18%; }

/* about: my setup behind the greeting, dimmed; the birthday as a date */
.about-hi .exe-body { background: linear-gradient(rgba(24, 20, 27, .64), rgba(24, 20, 27, .8)), url("/assets/about/setup.jpg") center 30% / cover no-repeat, #1c191e; }
.hi-tiles li:nth-child(2) b { font-size: clamp(28px, 2.3vw, 42px); line-height: clamp(40px, 3.6vw, 62px); white-space: nowrap; }
.hi-tiles span i { font-style: normal; font-weight: 700; color: #fbeefb; }
@media (min-width: 1100px) and (min-height: 700px) { .one-screen .about-desk { grid-template-rows: minmax(0, 1fr); } }

/* osu!: the Y2K ticker on top */
.osu-desk { grid-template-rows: auto auto minmax(0, 1fr); }

/* discord: the next multi as an event ticket */
.discord-desk .multi-exe .exe-body, .one-screen .discord-desk .multi-exe .exe-body { display: flex; flex-direction: column; padding: 0; }
.discord-desk .multi-exe .multi-next, .one-screen .discord-desk .multi-exe .multi-next { display: flex; flex-direction: row; flex: 1; align-items: center; justify-content: center; gap: 30px; padding: 24px 28px 8px; }
.mn-cal { position: relative; display: grid; justify-items: center; width: 124px; padding: 16px 0 14px; border-radius: 18px; background: var(--lilac); color: var(--dark-ink); box-shadow: var(--glow); transform: rotate(-3deg); }
.mn-cal::before { content: ""; position: absolute; top: -7px; left: 26px; right: 26px; height: 14px; background: radial-gradient(circle, #1c191e 4px, transparent 5px) 0 0 / 50% 100% repeat-x; }
.mn-cal small { font: 600 14px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.mn-cal b { font: 600 66px/1 var(--sans); }
.mn-main { display: grid; gap: 4px; min-width: 0; }
.discord-desk .multi-exe .mn-main .kicker { font: 500 16px var(--sans); letter-spacing: 0; text-transform: none; color: var(--lilac); }
.mn-main em { font-style: normal; color: #fbeefb; }
.discord-desk .multi-exe .multi-next .time, .one-screen .discord-desk .multi-exe .multi-next .time { font: 600 88px/1 var(--sans); color: #fbeefb; text-shadow: var(--glow); }
.discord-desk .multi-exe .multi-next .date { margin: 0; font: 600 13px var(--sans); letter-spacing: .18em; color: var(--muted); }
.discord-desk .multi-exe .theme { justify-self: start; margin: 6px 0 0; padding: 4px 12px; border: 1px solid rgba(243, 201, 242, .4); border-radius: 99px; font: 500 12px var(--sans); }
.mn-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px 24px; list-style: none; }
.mn-info li { display: grid; gap: 2px; padding: 12px 10px; border: 1.5px solid rgba(243, 201, 242, .3); border-radius: 12px; background: rgba(243, 201, 242, .06); text-align: center; }
.mn-info small { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mn-info b { font: 600 17px var(--sans); color: #fbeefb; }
.mn-info button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mn-info button span { color: var(--lilac); font-size: 13px; }
.mn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px 24px 24px; }
@media (max-width: 760px) {
  .discord-desk .multi-exe .multi-next { flex-direction: column; gap: 18px; text-align: center; }
  .discord-desk .multi-exe .theme { justify-self: center; }
  .mn-info { grid-template-columns: 1fr; }
}

/* music player: under OFFLINE / COMMISSIONS OPEN, with its volume, on every page */
@media (min-width: 1760px) and (min-height: 700px) {
  .one-screen .float-player { top: 82px; left: 48px; width: 440px; grid-template-columns: 40px minmax(0, 1fr) auto 86px; }
  .one-screen .fp-volume { display: flex; grid-column: 4; grid-row: 1; }
}
@media (max-width: 760px) {
  .float-player .fp-volume { display: flex; grid-column: 1 / -1; grid-row: 2; }
  .note-fab { bottom: 108px; }
  .mutual-fab { bottom: 152px; }
  .page-home .mutual-fab { bottom: 82px; }
}
/* the 3-column Discord desk is for computers only (a later rule above forgot the media query) */
@media (max-width: 1250px) { .discord-desk { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .discord-desk { grid-template-columns: 1fr; } .discord-desk .multi-exe .multi-next, .one-screen .discord-desk .multi-exe .multi-next { flex-direction: column; } }

/* ---- big round (2026-11-15) ---------------------------------------------------- */
/* page transition: four ways for the same window to arrive (v2.js picks one, never
   the same twice in a row). Same veil, same sparkle bar; only gentle moves. */
.vt-win::before, .vt-win::after { content: ""; position: absolute; top: 50%; width: 110px; height: 110px; margin-top: -55px; background: url("/assets/overlay/items/wings.png") center / contain no-repeat; opacity: 0; filter: drop-shadow(0 0 12px rgba(230, 169, 230, .4)); }
.vt-win::before { right: 100%; margin-right: -6px; }
.vt-win::after { left: 100%; margin-left: -6px; transform: scaleX(-1); }
/* 2: it drops from the chains and settles */
.vtrans[data-vt="2"].is-in .vt-win { animation: vt-drop .26s cubic-bezier(.2, .9, .3, 1.2) .02s both; transform-origin: 50% -40px; }
.vtrans[data-vt="2"].is-out .vt-win { animation: vt-drop-out .16s ease-in both; }
@keyframes vt-drop { from { opacity: 0; transform: translateY(-46px) rotate(-5deg); } 70% { opacity: 1; transform: translateY(3px) rotate(1.2deg); } to { opacity: 1; transform: none; } }
@keyframes vt-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(26px); } }
/* 3: it glides in from the left and leaves to the right, wings out */
.vtrans[data-vt="3"].is-in .vt-win { animation: vt-glide .22s cubic-bezier(.2, .8, .3, 1) .02s both; }
.vtrans[data-vt="3"].is-out .vt-win { animation: vt-glide-out .16s ease-in both; }
.vtrans[data-vt="3"].is-in .vt-win::before, .vtrans[data-vt="3"].is-in .vt-win::after { animation: vt-wing .22s ease-out .1s both; }
.vtrans[data-vt="3"].is-out .vt-win::before, .vtrans[data-vt="3"].is-out .vt-win::after { opacity: .9; }
@keyframes vt-glide { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes vt-glide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(70px); } }
@keyframes vt-wing { from { opacity: 0; } to { opacity: .9; } }
/* 4: it opens like a lid, the sparkles fill from the right */
.vtrans[data-vt="4"].is-in .vt-win { animation: vt-lid .24s cubic-bezier(.2, .8, .3, 1) .02s both; transform-origin: 50% 0; }
.vtrans[data-vt="4"].is-out .vt-win { animation: vt-lid-out .16s ease-in both; transform-origin: 50% 100%; }
.vtrans[data-vt="4"].is-in .vt-hearts i { animation-delay: calc(.06s + (7 - var(--i)) * 22ms); }
.vtrans[data-vt="4"].is-in .vt-win::before, .vtrans[data-vt="4"].is-in .vt-win::after { animation: vt-wing .22s ease-out .1s both; }
.vtrans[data-vt="4"].is-out .vt-win::before, .vtrans[data-vt="4"].is-out .vt-win::after { opacity: .9; }
@keyframes vt-lid { from { opacity: 0; transform: perspective(700px) rotateX(-65deg); } to { opacity: 1; transform: perspective(700px) rotateX(0); } }
@keyframes vt-lid-out { from { opacity: 1; transform: perspective(700px) rotateX(0); } to { opacity: 0; transform: perspective(700px) rotateX(55deg); } }

/* a little bigger to read: home and osu! */
.page-home .profile-live { font-size: 14.5px; }
.page-home .profile-facts dt, .page-home .profile-facts dd { font-size: 15px; }
.page-home .np-exe-info .kicker { font-size: 11.5px; }
.page-home .np-exe-artist { font-size: 14.5px; }
.page-home .diary-open { font-size: 12px; }
.page-home .gb-step { font-size: 12.5px; }
.page-home .news-tag { font-size: 14px; }
.page-home .news-sub { font-size: 15.5px; }
.page-home .news-copy strong { font-size: 24px; }
.page-home .news li:first-child .news-copy strong { font-size: 32px; }
.page-osu .ticker-track span { font-size: 16px; }
.page-osu .oc-sub { font-size: 15.5px; }
.page-osu .oc-id p { font-size: 15.5px; }
.page-osu .oc-stats small { font-size: 13px; }
.page-osu .oc-stats strong { font-size: 15px; }
.page-osu .osu-tabs button { font-size: 16px; }
.page-osu .skin-for { font-size: 15px; }
.page-osu .tourney-exe .tourney-copy strong { font-size: 15.5px; }
.page-osu .tourney-copy small, .page-osu .tourney-go { font-size: 14px; }
.page-osu .pill.small { height: 30px; font-size: 11.5px; }

/* osu!: the three hit circles at the same visible size, a real download button, a bigger cake */
.sk-hit img:first-child { transform: scale(var(--hit, 1)); }
.skin-win .skin-dl { flex: none; align-self: center; justify-self: center; height: 36px; min-height: 36px; padding: 0 20px; margin-top: 10px; font-size: 11.5px; letter-spacing: .16em; line-height: 1; white-space: nowrap; }
.page-osu .tourney-cake { height: 46px; padding: 0 26px; font-size: 14px; letter-spacing: .1em; }

@media (min-width: 1100px) and (min-height: 700px) {
  /* about: no window runs on empty — the photo takes what is left, the links share their window */
  .one-screen .about-left { grid-template-rows: minmax(0, 1fr) auto; }
  .one-screen .about-left .booth-exe .exe-body { display: grid; place-items: center; min-height: 0; }
  .one-screen .about-left .polaroid { width: auto; max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: 1 / 1.03; }
  .one-screen .about-left .polaroid img { height: calc(100% - 0px); }
  .one-screen .about-side { grid-template-rows: auto minmax(0, 1fr); }
  .one-screen .about-links .exe-body { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .about-links .link-list { flex: 1; display: grid; grid-auto-rows: 1fr; }
  .one-screen .about-links .link-list li { display: grid; }
  .one-screen .about-links .link-list a { height: 100%; }

  /* discord: a compact next multi with join_the_team under it; around_coca fills the middle */
  .one-screen .discord-left { grid-template-rows: auto minmax(0, 1fr); }
  .one-screen .discord-left .team-exe .exe-body { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .discord-left .team-list { flex: 1; grid-auto-rows: 1fr; }
  .one-screen .discord-mid { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  .one-screen .discord-mid .around-exe .exe-body { display: flex; flex-direction: column; min-height: 0; }
  .one-screen .discord-mid .around-art { flex: 1; min-height: 0; height: auto; }
}
@media (min-width: 761px) {
  .discord-desk .multi-exe .exe-body, .one-screen .discord-desk .multi-exe .exe-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); grid-template-rows: auto auto auto; }
  .discord-desk .multi-exe .banner-img { grid-column: 1 / -1; }
  .discord-desk .multi-exe .multi-next, .one-screen .discord-desk .multi-exe .multi-next { grid-column: 1; grid-row: 2 / span 2; justify-content: center; gap: 22px; padding: 18px 20px; }
  .discord-desk .multi-exe .multi-next .time, .one-screen .discord-desk .multi-exe .multi-next .time { font-size: 64px; }
  .discord-desk .mn-cal { width: 96px; padding: 12px 0 10px; }
  .discord-desk .mn-cal b { font-size: 46px; }
  .discord-desk .mn-cal small { font-size: 12px; }
  .discord-desk .mn-info { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; gap: 6px; padding: 18px 18px 8px 0; }
  .discord-desk .mn-info li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; text-align: left; }
  .discord-desk .mn-info b { font-size: 14.5px; }
  .discord-desk .mn-actions { grid-column: 2; grid-row: 3; padding: 0 18px 18px 0; }
  .discord-desk .mn-actions .pill { width: 100%; justify-content: center; }
}

/* tablet covers: Acrid, my partner, in plain sight; the showcase turns; click a cover to hold it */
.order-partner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--lilac); border-radius: 14px; background: linear-gradient(100deg, rgba(123, 90, 124, .55), rgba(28, 25, 30, .6)); box-shadow: var(--soft-glow); color: var(--text); transition: transform .2s, box-shadow .2s; }
.order-partner:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.op-star { font-size: 22px; color: var(--lilac); text-shadow: var(--glow); }
.op-copy { display: grid; flex: 1; min-width: 0; }
.op-copy small { font: 500 12px var(--sans); color: var(--lilac); }
.op-copy strong { font: 400 26px/1.1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.op-go { flex: none; padding: 7px 14px; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 13px var(--sans); }
.cv-stage { position: relative; }
.cv-stage img[data-cv-zoom] { cursor: zoom-in; }
.is-turning .cv-stage::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 3px; background: linear-gradient(90deg, var(--violet), var(--lilac)); transform-origin: 0 50%; animation: cv-turn 4.5s linear infinite; }
@keyframes cv-turn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.v2-dialog.is-tilt { overflow: visible; background: transparent; box-shadow: none; border-color: transparent; }
.v2-dialog.is-tilt .lightbox-img { border-radius: 14px; background: transparent; transform: perspective(1100px) scale(.93); transition: transform .14s ease-out; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(230, 169, 230, .25)); cursor: grab; }
.v2-dialog.is-tilt .lightbox-caption, .v2-dialog.is-tilt .lightbox-thumbs { background: rgba(34, 31, 36, .92); border-radius: 12px; margin-top: 10px; }

/* hall of fame: ask me anything, and a real osu! card (banner behind, avatar, name) */
.ama-open { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 14px 16px; border: 1.5px dashed rgba(243, 201, 242, .55); border-radius: 14px; background: rgba(243, 201, 242, .06); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ama-open:hover { border-style: solid; border-color: var(--lilac); background: rgba(243, 201, 242, .12); transform: translateY(-2px); }
.ama-open > span:first-child { font-size: 22px; color: var(--lilac); text-shadow: var(--glow); }
.ama-open strong { display: block; font: 400 26px/1.1 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.ama-open small { font: 500 12.5px var(--sans); color: var(--muted); }
.ama-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(243, 201, 242, .35); border-radius: 12px; background: #141117; color: var(--text); font: 400 15px/1.5 var(--sans); resize: vertical; }
.ama-form textarea:focus { outline: none; border-color: var(--lilac); box-shadow: var(--soft-glow); }
.ama-form .form-status { min-height: 20px; margin: 10px 0; color: var(--lilac); }
.ama-form .form-status.error { color: #ff9fb0; }
.piece-osu-card.has-cover { min-height: 96px; padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 999px rgba(20, 16, 20, .5); }
.piece-profile-card .piece-osu-visual img { width: 60px; height: 60px; box-shadow: 0 0 0 2px var(--lilac); }
.piece-profile-card .piece-osu-body strong { font-size: 18px; }
@media (min-width: 1100px) and (min-height: 700px) {
  /* skins on one screen: the preview takes the room that is left, the texts keep theirs */
  .one-screen .osu-panel .skin-win .exe-body { grid-template-rows: minmax(84px, 1fr) auto auto auto; gap: 6px; padding-bottom: 16px; }
  .one-screen .osu-panel .skin-win .skin-art { aspect-ratio: auto; height: 100%; margin-bottom: 4px; }
  .one-screen .osu-panel .skin-name { font-size: 42px; }
  .one-screen .osu-panel .skin-win .skin-dl { margin-top: 4px; }
  .one-screen .osu-panel .sk-hit, .one-screen .osu-panel .sk-approach { width: auto; height: 62%; }
  .one-screen .osu-panel .sk-cursor { width: auto; height: 26%; }
}
.page-osu .oc-id p { font-size: 15px; line-height: 1.5; }
@media (min-width: 1100px) { .page-osu .osu-card .exe-body { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 560px); padding: 12px 22px; gap: 8px 24px; } }
.page-osu .oc-stats strong { font-size: 14px; }
.page-osu .oc-stats li { padding-block: 8px; }
@media (min-width: 1100px) { .page-osu .osu-card .exe-body { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 410px); } }
.page-osu .oc-id p { font-size: 14.5px; }
.page-osu .oc-stats strong { font-size: 13.5px; }
.page-osu .oc-stats small { font-size: 12.5px; }
@media (min-width: 1100px) and (min-height: 700px) {
  /* about: the polaroid stays inside me.jpg, whatever the window's shape */
  .one-screen .about-left .booth-exe .exe-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .one-screen .about-left .polaroid { display: flex; flex-direction: column; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1.04; }
  .one-screen .about-left .polaroid img { flex: 1; min-height: 0; height: auto; aspect-ratio: auto; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .about-left .polaroid { width: 100%; height: 100%; aspect-ratio: auto; }
}
.page-home .profile-live { font-size: 13.5px; white-space: nowrap; }
/* phones: the cover on top, its info under it (the 2-column stage squeezed the picture to a stamp) */
@media (max-width: 760px) { .covers-desk .cv-main { grid-template-columns: minmax(0, 1fr); } .covers-desk .cv-info { width: auto; min-width: 0; } .covers-desk .cv-name { font-size: 38px; overflow-wrap: anywhere; } }

/* ---- round of 2026-11-15, evening ------------------------------------------------ */
/* home: the diary without the ruled lines, no step numbers, a now_playing that answers the mouse */
.diary-exe a { padding-block: 16px; background: none; }
.diary-line { line-height: 1.35; }
.diary-open { margin-top: 8px; }
.gb-step { gap: 0; }
.np-exe { transition: border-color .2s, box-shadow .2s; }
.np-exe:hover { border-color: var(--lilac); box-shadow: 0 0 26px rgba(230, 169, 230, .35); }
.np-exe .np-exe-cover { transition: transform .25s, filter .25s; }
.np-exe:hover .np-exe-cover { transform: scale(1.02); filter: brightness(1.12); }

/* the picture viewer: the osu! button only when there is a profile to open */
.lightbox-caption a[hidden] { display: none; }
.lightbox-caption .pill { flex: none; white-space: nowrap; }

/* osu!: things you can touch say so */
.osu-tab-link { display: inline-flex; align-items: center; padding: 8px 18px; border: 1.5px dashed rgba(243, 201, 242, .55); border-radius: 99px; color: var(--lilac); font: 500 16px var(--sans); transition: background .15s, color .15s, border-color .15s; }
.osu-tab-link:hover { border-style: solid; border-color: var(--lilac); background: var(--lilac); color: var(--dark-ink); }
.skin-win { transition: border-color .2s, box-shadow .2s; }
.skin-win:hover { border-color: var(--lilac); box-shadow: 0 0 24px rgba(230, 169, 230, .35); }
.skin-win .skin-art { transition: filter .25s; }
.skin-win:hover .skin-art { filter: brightness(1.2) saturate(1.1); }
.gear { transition: transform .2s, box-shadow .2s, border-color .2s; }
.gear:hover { transform: translateY(-3px); border-color: var(--lilac); box-shadow: 0 0 24px rgba(230, 169, 230, .35); }
.gear button { position: relative; overflow: hidden; }
.gear button img { transition: transform .3s; }
.gear:hover button img { transform: scale(1.05); }
.gear button::after { content: "see it bigger ⤢"; position: absolute; right: 10px; bottom: 10px; padding: 5px 12px; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 12px var(--sans); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.gear:hover button::after { opacity: 1; transform: none; }
.maps-exe { transition: border-color .2s, box-shadow .2s; }
.maps-exe:hover { border-color: var(--lilac); box-shadow: 0 0 24px rgba(230, 169, 230, .35); }
.maps-exe .np-art-img { transition: filter .25s; }
.maps-exe:hover .np-art-img { filter: brightness(1.18); }

/* discord: next multi on the left, join_the_team inside its window, readable form titles */
@media (min-width: 761px) {
  .discord-desk .multi-exe .multi-next, .one-screen .discord-desk .multi-exe .multi-next { justify-content: flex-start; padding: 18px 26px; }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .discord-left .team-exe { min-height: 0; }
  .one-screen .discord-left .team-list { min-height: 0; gap: 8px; }
  .one-screen .discord-left .team-list .bar { min-height: 0; padding-block: 4px; }
}
#discord-form-title, #multi-calendar-title, .v2-dialog .gothic-title { text-transform: lowercase; }

/* tablet covers: a shop window. The cover floats on a blurred glow of itself, its
   name sits on it; the info that was beside it is on the picture or one click away. */
.covers-desk .cv-exe .exe-body { gap: 14px; }
.covers-desk .cv-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1.5px solid rgba(243, 201, 242, .5); border-radius: 14px; overflow: hidden; background: #141117; box-shadow: var(--soft-glow); isolation: isolate; }
.covers-desk .cv-stage::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--cv-bg, none) center / cover no-repeat; filter: blur(34px) brightness(.5) saturate(1.3); transition: background-image .5s; }
.covers-desk .cv-stage::after, .covers-desk .is-turning .cv-stage::after, .is-turning .covers-desk .cv-stage::after { content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1; width: auto; height: auto; background: linear-gradient(transparent, rgba(20, 17, 22, .9)); transform: none; animation: none; pointer-events: none; }
.covers-desk .cv-stage img[data-cv-img] { width: 100%; height: 100%; padding: 22px 22px 30px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); cursor: zoom-in; transition: transform .3s; }
.covers-desk .cv-stage img[data-cv-img].is-in { animation: cv-show .7s cubic-bezier(.2, .8, .3, 1) both, cv-float 6s ease-in-out .7s infinite; }
.covers-desk .cv-stage:hover img[data-cv-img] { transform: scale(1.02); }
@keyframes cv-show { from { opacity: 0; transform: translateY(18px) scale(.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes cv-float { 50% { transform: translateY(-6px) rotate(.4deg); } }
.cv-plate { position: absolute; left: 24px; bottom: 20px; z-index: 2; display: grid; gap: 6px; max-width: min(70%, 640px); pointer-events: none; text-align: left; }
.cv-plate a { pointer-events: auto; }
.cv-plate.is-in > * { animation: cv-plate .5s cubic-bezier(.2, .8, .3, 1) both; }
.cv-plate.is-in > :nth-child(2) { animation-delay: .06s; }
.cv-plate.is-in > :nth-child(3) { animation-delay: .12s; }
.cv-plate.is-in > :nth-child(4) { animation-delay: .18s; }
@keyframes cv-plate { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.covers-desk .cv-plate .cv-count { font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.covers-desk .cv-plate .cv-name { font: 400 clamp(44px, 4vw, 72px)/1 var(--gothic); color: #fbeefb; text-shadow: var(--glow), 0 2px 12px rgba(0, 0, 0, .8); text-transform: lowercase; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chips > * { padding: 4px 12px; border: 1px solid rgba(243, 201, 242, .55); border-radius: 99px; background: rgba(20, 17, 22, .7); font: 500 13px var(--sans); color: var(--text); text-transform: lowercase; }
.cv-chips a { border-color: var(--lilac); background: var(--lilac); color: var(--dark-ink); font-weight: 600; }
.cv-chips [hidden] { display: none; }
.covers-desk .cv-plate .cv-note { margin: 0; font-size: 13px; color: #e0d6e0; text-shadow: 0 1px 6px #000; }
.cv-hint { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 5px 14px; border-radius: 99px; background: rgba(20, 17, 22, .75); border: 1px solid rgba(243, 201, 242, .5); font: 500 12.5px var(--sans); color: var(--lilac); pointer-events: none; opacity: .85; transition: opacity .2s, background .2s, color .2s; }
.cv-stage:hover .cv-hint { opacity: 1; background: var(--lilac); color: var(--dark-ink); }
.covers-desk .cv-photos { position: absolute; right: 20px; bottom: 20px; z-index: 2; flex-wrap: nowrap; }
.covers-desk .cv-photos button { width: 56px; height: 56px; box-shadow: 0 0 0 1.5px rgba(243, 201, 242, .5), 0 6px 14px rgba(0, 0, 0, .5); }
.covers-desk .cv-arrow { z-index: 3; }
.covers-desk .cv-thumb[aria-current] span::before { content: "✦ "; }
.covers-desk .cv-thumb img { transition: box-shadow .2s, transform .2s, filter .2s; filter: brightness(.75); }
.covers-desk .cv-thumb:hover img, .covers-desk .cv-thumb[aria-current] img { filter: none; }
.covers-desk .cv-thumb[aria-current] img { transform: translateY(-3px); }
.notice-exe { margin-top: 14px; }
.notice-exe .exe-body { padding: 10px 16px; }
.notice-exe p { margin: 0; font-size: 13px; color: var(--muted); }
.notice-exe b { color: var(--lilac); }
.op-copy strong { font: 700 22px/1.15 var(--sans); letter-spacing: .01em; text-shadow: 0 0 12px rgba(243, 201, 242, .5); }
@media (min-width: 1100px) and (min-height: 700px) {
  .one-screen .cv-exe .cv-stage { flex: 1; height: auto; min-height: 0; aspect-ratio: auto; }
  .one-screen .cover-viewer .notice-exe { flex: none; }
}
@media (max-width: 760px) {
  .covers-desk .cv-stage { aspect-ratio: 4 / 3; }
  .covers-desk .cv-plate { left: 14px; bottom: 12px; max-width: 92%; }
  .covers-desk .cv-plate .cv-name { font-size: 34px; }
  .covers-desk .cv-photos { right: 12px; bottom: auto; top: 12px; }
  .covers-desk .cv-photos button { width: 40px; height: 40px; }
  .cv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .covers-desk .cv-stage img[data-cv-img].is-in, .cv-plate.is-in > * { animation: none; } }

/* mini games: each game has its own word and its own colour behind its card */
.arcade-mark { position: absolute; left: 50%; top: 6%; z-index: 0; transform: translateX(-50%) rotate(-4deg); font: 400 clamp(90px, 11vw, 200px)/1 var(--gothic); color: var(--tint, var(--lilac)); opacity: .16; white-space: nowrap; pointer-events: none; text-shadow: 0 0 40px var(--tint, var(--lilac)); }
.page-games .games-page .arcade-art .game-card-preview { border-color: var(--tint, var(--lilac)); box-shadow: 0 0 26px color-mix(in srgb, var(--tint, #f3c9f2) 40%, transparent), 0 18px 40px rgba(0, 0, 0, .45); }
.page-games .games-page .arcade-art::before, .page-games .games-page .arcade-art::after { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tint, #e6a9e6) 70%, transparent)); }
.page-games .games-page .arcade-art .mini-crossword span:nth-child(n+3):nth-child(-n+7) { background: var(--tint, var(--pink2)); box-shadow: 0 0 8px var(--tint, var(--lilac)); }
.page-games .games-page .arcade-art .crossword-preview-clues span:first-child { background: var(--tint, var(--lilac)); }

/* love meter: the whole avatar, centred */
.love-ava { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* hall of fame: ask me anything is its own window; a fourth card style */
.hof-side { display: grid; gap: 22px; align-content: start; min-width: 0; }
.hof-ama .ama-open { margin-top: 0; }
@media (max-width: 1250px) { .hof-side { grid-column: 1 / -1; } }
.wall-piece.piece-lace { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' fill-opacity='.11' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 0 0 / 34px 34px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3c9f2' fill-opacity='.11' d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0z'/%3E%3C/svg%3E") 17px 17px / 34px 34px, linear-gradient(160deg, #3a2a3c, #241c27); color: #fbeefb; box-shadow: 0 0 0 1.5px var(--lilac), inset 0 0 0 5px #241c27, inset 0 0 0 6px rgba(243, 201, 242, .45), 0 10px 22px rgba(0, 0, 0, .45); }
.wall-piece.piece-lace footer, .wall-piece.piece-lace time { color: #e3d3e3; }
.wall-piece.piece-lace p, .wall-piece.piece-lace strong { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* five more ways for the transition window to arrive (5 to 9) */
.vtrans[data-vt="5"].is-in .vt-win { animation: vt-zoom .24s cubic-bezier(.2, .8, .3, 1) .02s both; }
.vtrans[data-vt="5"].is-out .vt-win { animation: vt-zoom-out .16s ease-in both; }
@keyframes vt-zoom { from { opacity: 0; transform: scale(1.3); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes vt-zoom-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.8); } }
.vtrans[data-vt="6"].is-in .vt-win { animation: vt-rise .24s cubic-bezier(.2, .9, .3, 1.1) .02s both; }
.vtrans[data-vt="6"].is-out .vt-win { animation: vt-rise-out .16s ease-in both; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes vt-rise-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-50px); } }
.vtrans[data-vt="7"].is-in .vt-win { animation: vt-swing .26s cubic-bezier(.2, .9, .3, 1.15) .02s both; }
.vtrans[data-vt="7"].is-out .vt-win { animation: vt-swing-out .16s ease-in both; }
.vtrans[data-vt="7"].is-in .vt-hearts i { animation-delay: calc(.06s + (7 - var(--i)) * 22ms); }
@keyframes vt-swing { from { opacity: 0; transform: translateX(70px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes vt-swing-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-70px) rotate(-4deg); } }
.vtrans[data-vt="8"].is-in .vt-win { animation: vt-unfold .24s cubic-bezier(.2, .8, .3, 1) .02s both; }
.vtrans[data-vt="8"].is-out .vt-win { animation: vt-fold .16s ease-in both; }
@keyframes vt-unfold { from { opacity: 0; transform: scaleX(.15); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes vt-fold { from { opacity: 1; transform: none; } to { opacity: 0; transform: scaleY(.1); } }
.vtrans[data-vt="9"].is-in .vt-win { animation: vt-pop .28s cubic-bezier(.2, .9, .3, 1.3) .02s both; }
.vtrans[data-vt="9"].is-out .vt-win { animation: vt-pop-out .16s ease-in both; }
.vtrans[data-vt="9"].is-in .vt-win::before, .vtrans[data-vt="9"].is-in .vt-win::after, .vtrans[data-vt="6"].is-in .vt-win::before, .vtrans[data-vt="6"].is-in .vt-win::after { animation: vt-wing .22s ease-out .1s both; }
.vtrans[data-vt="9"].is-out .vt-win::before, .vtrans[data-vt="9"].is-out .vt-win::after, .vtrans[data-vt="6"].is-out .vt-win::before, .vtrans[data-vt="6"].is-out .vt-win::after { opacity: .9; }
@keyframes vt-pop { from { opacity: 0; transform: scale(.55) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes vt-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.1); } }

/* osu!: favorite_maps.exe is the player there, the little one steps aside */
.page-osu .float-player { display: none; }
.covers-desk .cv-stage img[data-cv-img] { position: absolute; inset: 0; box-sizing: border-box; }
/* the little player: a rounded rectangle, exactly as wide as the two pills above it */
@media (min-width: 1760px) and (min-height: 700px) {
  .one-screen .float-player { left: 48px; width: 362px; border-radius: 14px; grid-template-columns: 38px minmax(0, 1fr) auto 54px; gap: 0 8px; padding: 6px 12px 6px 8px; }
  .one-screen .float-player .fp-cover { width: 38px; height: 38px; border-radius: 9px; }
  .one-screen .float-player.is-playing .fp-cover { animation: none; }
}
.covers-desk .cv-stage img[data-cv-img] { padding: 14px 14px 22px; }

/* ============ round 2026-11-15 =========================================== */
/* dear diary: one window, one screen */
.diary-desk { display: grid; place-items: center; }
.diary-page { width: min(980px, 100%); }
.diary-spread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 46px; align-items: center; padding: 34px 44px 38px; }
.diary-polaroid { margin: 0; padding: 12px 12px 0; border-radius: 3px; background: #f4ede6; box-shadow: 0 18px 36px rgba(0, 0, 0, .55); transform: rotate(-3deg); }
.diary-polaroid img { display: block; width: clamp(200px, 22vw, 300px); aspect-ratio: 4 / 5; object-fit: cover; }
.diary-polaroid figcaption { padding: 10px 0 12px; font: italic 400 20px Georgia, "Times New Roman", serif; color: #3a3036; text-align: center; }
.diary-words { display: grid; gap: 14px; justify-items: start; }
.diary-soon { margin: 0; font: italic 400 clamp(30px, 2.6vw, 44px)/1.2 Georgia, "Times New Roman", serif; color: #fbeefb; text-shadow: 0 0 18px rgba(243, 201, 242, .35); }
.diary-sub { margin: 0; font-size: 16px; color: var(--muted); }
.diary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (min-width: 1100px) and (min-height: 700px) { .one-screen .diary-desk { height: 100%; } }
@media (max-width: 760px) { .diary-spread { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding: 24px 18px; text-align: center; } .diary-words { justify-items: center; } }

/* discord: the vocal list scrolls like the online list; next_multi a little darker */
#discord-page-voice { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
.discord-desk .multi-exe { background: linear-gradient(#211d23, #19161b); }
.discord-desk .mn-info li { background: rgba(10, 8, 12, .45); }

/* home: the notes keep scrolling under the mouse */
.wall-window:hover .wall-track { animation-play-state: running; }

/* osu!: tournaments.txt as a timeline */
.tourney-exe .tourneys { position: relative; padding-left: 26px; }
.tourney-exe .tourneys::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--violet, #b9a3f0), var(--lilac)); opacity: .55; }
.tourney-exe .tourneys > li { position: relative; }
.tourney-exe .tourneys > li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #1c191e; box-shadow: 0 0 0 2px rgba(243, 201, 242, .7); }
.tourney-exe .tourneys > li.tl-year-start::before { left: -26px; width: 16px; height: 16px; margin-top: -8px; border-radius: 0; background: var(--lilac); box-shadow: none; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 6px rgba(243, 201, 242, .9)); }
.tourney-exe .tourneys > li:last-child::before { animation: tl-now 2.4s ease-in-out infinite; }
@keyframes tl-now { 50% { filter: drop-shadow(0 0 12px rgba(243, 201, 242, 1)); transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .tourney-exe .tourneys > li:last-child::before { animation: none; } }

/* hall of fame: gothic stars, redone — a dark card in a thin gothic frame, a few stars, no wallpaper */
.wall-piece.piece-lace {
  background:
    radial-gradient(circle at 85% 12%, rgba(243, 201, 242, .16), transparent 38%),
    linear-gradient(165deg, #2a2030, #17131a 70%);
  color: #fbeefb;
  box-shadow: 0 0 0 1px rgba(243, 201, 242, .55), inset 0 0 0 6px #17131a, inset 0 0 0 7px rgba(243, 201, 242, .28), 0 12px 24px rgba(0, 0, 0, .5);
}
.wall-piece.piece-lace::before, .wall-piece.piece-lace::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--lilac); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); filter: drop-shadow(0 0 4px rgba(243, 201, 242, .8)); pointer-events: none; }
.wall-piece.piece-lace::before { top: -7px; right: -7px; }
.wall-piece.piece-lace::after { bottom: -6px; left: -6px; width: 12px; height: 12px; opacity: .8; }
.wall-piece.piece-lace footer, .wall-piece.piece-lace time { color: #d9c8d9; }
.wall-piece.piece-lace p, .wall-piece.piece-lace strong { text-shadow: none; }

/* tablet covers: open a commission — the same family as Acrid's card, but the star of the window */
.order-cta { position: relative; display: flex; align-items: center; gap: 14px; height: auto; min-height: 78px; padding: 14px 18px; overflow: hidden; border: 1.5px solid var(--lilac); border-radius: 16px; background: linear-gradient(100deg, #f3c9f2, #d9a3e6 55%, #b9a3f0); color: var(--dark-ink); text-align: left; font: inherit; box-shadow: var(--glow); animation: oc-breathe 3.2s ease-in-out infinite; }
.order-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) -150% 0 / 220% 100% no-repeat; animation: oc-shine 3.6s ease-in-out infinite; pointer-events: none; }
.order-cta:hover { transform: translateY(-2px) scale(1.01); background: linear-gradient(100deg, #fff, #f3c9f2 60%, #d9c2f5); }
.oc-star { font-size: 28px; line-height: 1; text-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: oc-spin 6s linear infinite; }
.oc-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.oc-copy small { font: 600 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.oc-copy strong { font: 400 34px/1 var(--gothic); }
.oc-go { flex: none; padding: 9px 16px; border-radius: 99px; background: var(--dark-ink); color: var(--lilac); font: 600 14px var(--sans); transition: transform .2s; }
.order-cta:hover .oc-go { transform: translateX(3px); }
.order-cta.is-closed { animation: none; }
.order-cta.is-closed::after { display: none; }
@keyframes oc-breathe { 50% { box-shadow: 0 0 0 4px rgba(243, 201, 242, .18), 0 0 34px rgba(230, 169, 230, .55); } }
@keyframes oc-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes oc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-cta, .order-cta::after, .oc-star { animation: none; } }

/* the commission form: dark, like the Discord forms (mod / multi-host application) */
.cover-commission { z-index: 1200; background: rgba(8, 6, 9, .78); backdrop-filter: blur(3px); }
.cover-commission.is-opening .cover-commission-shell { animation: cf-in .25s ease both; }
@keyframes cf-in { from { opacity: 0; transform: translateY(10px); } }
.cover-commission-shell { box-sizing: border-box; width: min(1000px, calc(100vw - 36px)); max-height: calc(100vh - 36px); padding: 26px; border-radius: 6px; background: #262626; color: var(--text); box-shadow: 0 0 0 1px var(--lilac), 0 30px 80px rgba(0, 0, 0, .6); scrollbar-width: thin; scrollbar-color: var(--mauve) transparent; }
.commission-form-close { top: 22px; right: 22px; padding: 6px 14px; border: 1px solid var(--lilac); border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 500 12px var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.commission-form-close:hover { background: #fff; }
.commission-form-header { padding: 0 110px 0 0; border: 0; }
.commission-form-kicker { font: 400 11.5px var(--sans); letter-spacing: .28em; color: #a79fa8; text-transform: uppercase; }
.commission-form-header h2 { margin: 6px 0 18px; font: 400 40px/1 var(--gothic); color: var(--lilac); text-shadow: var(--glow); text-transform: lowercase; }
.commission-stepper { gap: 8px; margin: 0 0 20px; }
.commission-stepper li { padding: 6px 14px; border: 1px solid rgba(243, 201, 242, .3); border-radius: 99px; font: 500 12px var(--sans); letter-spacing: .06em; color: #a79fa8; text-transform: lowercase; }
.commission-stepper li b { margin-right: 4px; color: inherit; opacity: .7; }
.commission-stepper li.is-active { border-color: var(--lilac); background: var(--lilac); color: var(--dark-ink); }
.commission-stepper li.is-complete { border-color: rgba(243, 201, 242, .6); color: var(--lilac); }
.commission-step { min-height: 250px; }
.commission-step[hidden], .commission-ready[hidden] { display: none; }
.commission-field { gap: 6px; margin-bottom: 16px; color: var(--text); }
.commission-field > span, .commission-field-label, .commission-choice legend, .commission-deadline legend { font: 400 15px/1.6 var(--sans); letter-spacing: 0; color: var(--text); text-transform: none; }
.commission-field b { color: var(--lilac); }
.commission-field input, .commission-field textarea, #commission-deadline-date { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid rgba(243, 201, 242, .3); border-radius: 10px; background: #1b1b1b; color: var(--text); font: 400 14px/1.5 var(--sans); resize: vertical; }
.commission-field input:focus, .commission-field textarea:focus, #commission-deadline-date:focus { border-color: var(--lilac); outline: 2px solid rgba(243, 201, 242, .2); outline-offset: 1px; }
.commission-field input::placeholder, .commission-field textarea::placeholder { color: #7d757e; }
.commission-field small, .commission-examples { font: 400 11.5px/1.6 var(--sans); color: #8e868f; }
.commission-error, .commission-upload-error, .commission-submit-error { min-height: 14px; margin: 0; font: 400 12px var(--sans); color: #ff9fb0; }
.commission-field.is-invalid input, .commission-field.is-invalid textarea { border-color: #ff9fb0; }
.commission-upload { position: relative; min-height: 130px; margin-top: 6px; border: 1.5px dashed rgba(243, 201, 242, .5); border-radius: 10px; background: #1b1b1b; transition: border-color .15s, background .15s; }
.commission-upload:hover, .commission-upload:focus-within, .commission-upload.is-dragging { border-color: var(--lilac); background: rgba(243, 201, 242, .06); }
.commission-upload strong { font: 500 14px var(--sans); color: var(--text); }
.commission-upload small { font: 400 12px var(--sans); color: #8e868f; }
.commission-previews { display: grid; gap: 6px; }
.commission-file-summary { margin: 0; font: 500 13px var(--sans); color: var(--lilac); }
.commission-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border: 1px solid rgba(243, 201, 242, .22); border-radius: 10px; background: #1b1b1b; font: 400 12.5px var(--sans); }
.commission-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commission-preview button { flex: none; padding: 0; border: 0; background: none; color: var(--lilac); font: 500 12px var(--sans); cursor: pointer; }
.commission-choice, .commission-deadline { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(243, 201, 242, .22); border-radius: 10px; }
.commission-choice label, .commission-deadline-options label { position: relative; }
.commission-choice label span, .commission-deadline-options span { padding: 6px 14px; border: 1px solid rgba(243, 201, 242, .4); border-radius: 99px; background: transparent; font: 500 12px var(--sans); letter-spacing: .04em; color: var(--text); text-transform: lowercase; }
.commission-choice input:checked + span, .commission-deadline-options input:checked + span { border-color: var(--lilac); background: var(--lilac); color: var(--dark-ink); }
.commission-deadline { display: grid; gap: 8px; font: 400 13px var(--sans); }
.commission-deadline > small { font: 400 11.5px var(--sans); color: #8e868f; }
.commission-icon-label img { width: 16px; height: 16px; object-fit: contain; }
.commission-recap, .commission-payment { border: 1px solid rgba(243, 201, 242, .22); background: #1b1b1b; color: var(--text); font: 400 13px var(--sans); }
.commission-recap strong { font: 600 18px var(--sans); color: var(--lilac); }
.commission-recap p { margin: 0; flex-basis: 100%; color: #8e868f; font-size: 12px; }
.commission-payment strong { font: 600 13px var(--sans); letter-spacing: .1em; }
.commission-payment span { color: #a79fa8; }
.commission-form-actions, [data-commission-actions] { align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(243, 201, 242, .18); }
[data-commission-actions] button { height: 38px; padding: 0 18px; border: 1px solid var(--lilac); border-radius: 99px; background: transparent; color: var(--text); font: 500 12px var(--sans); letter-spacing: .1em; text-transform: lowercase; cursor: pointer; }
[data-commission-actions] button:disabled { opacity: .4; cursor: default; }
[data-commission-actions] button[data-commission-next], [data-commission-actions] button[data-commission-submit] { margin-left: auto; background: var(--lilac); color: var(--dark-ink); }
[data-commission-actions] button[hidden] { display: none; }
.commission-step-count { margin: auto; font: 400 12px var(--sans); color: #8e868f; }
.commission-ready { padding: 40px 20px; text-align: center; }
.commission-ready > span { font: 400 11.5px var(--sans); letter-spacing: .28em; color: #a79fa8; }
.commission-ready h3 { margin: 10px 0 6px; font: 400 40px var(--gothic); color: var(--lilac); text-shadow: var(--glow); text-transform: lowercase; }
.commission-ready small { color: #8e868f; }
@media (max-width: 680px) { .cover-commission { padding: 10px; } .cover-commission-shell { width: calc(100vw - 20px); padding: 20px 16px; } .commission-form-header { padding-right: 90px; } .commission-field-grid, .commission-reference-grid { grid-template-columns: 1fr; } }

/* tablet covers: the showcase comes alive — each cover turns in from the side it comes from,
   catches the light once it lands, a few stars twinkle around it, and the rail shows the timer */
.covers-desk .cv-stage img[data-cv-img].is-in { animation: cv-in-next .8s cubic-bezier(.2, .8, .3, 1) both, cv-float 6s ease-in-out .8s infinite; }
[data-cv-dir="prev"] .cv-stage img[data-cv-img].is-in { animation-name: cv-in-prev, cv-float; }
@keyframes cv-in-next { from { opacity: 0; transform: perspective(1200px) translateX(70px) rotateY(-26deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cv-in-prev { from { opacity: 0; transform: perspective(1200px) translateX(-70px) rotateY(26deg) scale(.9); } to { opacity: 1; transform: none; } }
.cv-shine { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; padding: 14px 14px 22px; pointer-events: none;
  -webkit-mask: var(--cv-bg) center / contain no-repeat content-box; mask: var(--cv-bg) center / contain no-repeat content-box;
  overflow: hidden; }
.cv-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34) 50%, transparent); transform: translateX(-120%) skewX(-14deg); }
.cv-shine.is-in::before { animation: cv-sheen 5s ease-in-out .7s infinite; }
.cv-shine.is-in { animation: cv-in-next .8s cubic-bezier(.2, .8, .3, 1) both, cv-float 6s ease-in-out .8s infinite; }
[data-cv-dir="prev"] .cv-shine.is-in { animation-name: cv-in-prev, cv-float; }
@keyframes cv-sheen { 0% { transform: translateX(-120%) skewX(-14deg); } 35%, 100% { transform: translateX(450%) skewX(-14deg); } }
.cv-sparkles i { position: absolute; z-index: 2; width: 14px; height: 14px; background: #fbeefb; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px rgba(243, 201, 242, .95)); opacity: 0; pointer-events: none; animation: cv-twinkle 3.4s ease-in-out infinite; }
.cv-sparkles i:nth-child(1) { top: 12%; left: 18%; animation-delay: .2s; }
.cv-sparkles i:nth-child(2) { top: 9%; right: 21%; width: 20px; height: 20px; animation-delay: 1.1s; }
.cv-sparkles i:nth-child(3) { top: 46%; right: 9%; width: 10px; height: 10px; animation-delay: 2s; }
.cv-sparkles i:nth-child(4) { top: 38%; left: 8%; width: 18px; height: 18px; animation-delay: 2.7s; }
.cv-sparkles i:nth-child(5) { top: 24%; left: 50%; width: 9px; height: 9px; animation-delay: 1.6s; }
@keyframes cv-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.5) rotate(90deg); } }
.covers-desk .cv-thumb { position: relative; }
.covers-desk .is-turning .cv-thumb[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; top: 99px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--violet, #b9a3f0), var(--lilac)); transform-origin: 0 50%; animation: cv-turn 4.5s linear both; }
.covers-desk.covers-desk .is-turning .cv-thumb[aria-current]::after { box-shadow: 0 0 8px rgba(243, 201, 242, .7); }
@media (prefers-reduced-motion: reduce) { .cv-shine.is-in, .cv-shine.is-in::before, .cv-sparkles i, [data-cv-dir] .cv-stage img[data-cv-img].is-in { animation: none; } .cv-sparkles i { opacity: .7; } }

/* hall of fame: the picture is shown whole in the preview; "crop it" lets you frame it */
.preview-photo.is-whole img { object-fit: contain; background: #141117; }
.crop-view { aspect-ratio: 4 / 3; background: #141117 no-repeat; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 1.5px rgba(243, 201, 242, .6); }
.crop-view.is-dragging { cursor: grabbing; }
.crop-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 12px; }
.crop-tools[hidden], .crop-zoom[hidden] { display: none; }
.crop-tools [aria-pressed="true"] { background: var(--lilac); color: var(--dark-ink); }
.crop-zoom { display: flex; align-items: center; gap: 8px; font: 500 12px var(--sans); color: var(--muted); }
.crop-zoom input { width: 120px; accent-color: var(--lilac); }
.crop-tools small { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--muted); }

/* home: whats_new.txt is a little newspaper — "the vanille times" (src/data/news.js) */
.page-home .news-exe .exe-body { display: flex; }
.paper { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; padding: 12px 20px 16px; }
.paper-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 3px double rgba(243, 201, 242, .55); }
.paper-head span { font: 600 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.paper-head span:last-child { text-align: right; }
.paper-head strong { font: 400 clamp(30px, 2.5vw, 44px)/1 var(--gothic); color: var(--lilac); text-shadow: var(--glow); white-space: nowrap; }
.paper-body { display: grid; flex: 1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 0; }
.paper-kicker { font: 600 11.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lilac); }
.paper-front { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding-right: 24px; border-right: 1px solid rgba(243, 201, 242, .25); }
.paper-front h2 { margin: 0; font: 400 clamp(40px, 3.6vw, 62px)/.95 var(--gothic); color: #fbeefb; text-shadow: var(--glow); }
.paper-front p { margin: 0; font: 400 16.5px/1.5 Georgia, "Times New Roman", serif; color: #e9dfe9; }
.paper-front p::first-letter { float: left; margin: 4px 8px 0 0; font: 400 46px/.8 var(--gothic); color: var(--lilac); }
.paper-date { font: italic 400 13px Georgia, serif; color: var(--muted); }
.paper-briefs { display: grid; grid-auto-rows: 1fr; min-width: 0; padding-left: 22px; }
.paper-brief { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; padding: 10px 0; border-bottom: 1px dashed rgba(243, 201, 242, .3); color: var(--text); }
.paper-brief:last-child { border-bottom: 0; }
.paper-brief strong { font: italic 700 21px/1.15 Georgia, "Times New Roman", serif; color: #fbeefb; transition: color .15s; }
.paper-brief > span:last-child { font-size: 14px; color: #cfc4cf; }
.paper-brief:hover strong { color: var(--lilac); }
.paper-pic { float: right; order: -1; align-self: flex-end; width: 120px; height: 76px; margin-bottom: -84px; border-radius: 8px; background: #18151a center / cover; box-shadow: 0 0 0 1.5px rgba(243, 201, 242, .35); filter: grayscale(.25) contrast(1.05); transition: filter .2s; }
.paper-brief:has(.paper-pic) { padding-right: 134px; }
.paper-brief:has(.paper-pic) .paper-pic { position: absolute; right: 0; top: 50%; margin: -38px 0 0; }
.paper-brief:hover .paper-pic { filter: none; }
.paper-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 10px; border-top: 3px double rgba(243, 201, 242, .55); }
.paper-foot a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 12px; border: 1px solid rgba(243, 201, 242, .3); border-radius: 10px; color: var(--text); transition: border-color .15s, background .15s; }
.paper-foot a:hover { border-color: var(--lilac); background: rgba(243, 201, 242, .06); }
.paper-foot small { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.paper-foot b { overflow: hidden; font: 600 14px var(--sans); color: var(--lilac); white-space: nowrap; text-overflow: ellipsis; }
.giveaway { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.giveaway-go { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 15px var(--sans); box-shadow: var(--glow); transition: transform .15s, background .15s; }
.giveaway-go:hover { transform: translateY(-2px); background: #fff; }
.giveaway-osu { width: 24px; height: 24px; border-radius: 50%; background: var(--dark-ink); -webkit-mask: url("/assets/social/osu.png") center / contain no-repeat; mask: url("/assets/social/osu.png") center / contain no-repeat; }
.giveaway-note { font-size: 13px; color: var(--muted); }
.giveaway.is-in .giveaway-go { display: none; }
.giveaway.is-in .giveaway-note { padding: 8px 16px; border: 1.5px solid var(--lilac); border-radius: 99px; font: 600 14px var(--sans); color: var(--lilac); }
.giveaway.is-closed .giveaway-go { pointer-events: none; opacity: .5; box-shadow: none; }
.giveaway-note.is-error { color: #ff9fb0; }
@media (max-width: 760px) {
  .paper-head { grid-template-columns: 1fr; text-align: center; } .paper-head span:last-child { text-align: center; }
  .paper-body { grid-template-columns: 1fr; } .paper-front { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid rgba(243, 201, 242, .25); }
  .paper-briefs { padding-left: 0; } .paper-foot { grid-template-columns: 1fr; }
}

/* ============ round 2026-11-15 (2) ======================================== */
/* tablet covers: open a commission — calm, like the site's other buttons */
.order-cta, .order-cta:hover { display: block; height: 54px; min-height: 0; padding: 0 20px; border: 0; border-radius: 99px; background: var(--lilac); color: var(--dark-ink); font: 600 16px var(--sans); letter-spacing: .04em; text-align: center; box-shadow: none; animation: none; transform: none; }
.order-cta::after { display: none; }
.order-cta:hover { background: #fff; }
.order-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.order-price strong { font: 600 64px/1 var(--sans); letter-spacing: -.02em; color: #fbeefb; text-shadow: 0 0 18px rgba(243, 201, 242, .35); }

/* osu!: the ticker, slower */
.page-osu .ticker-track { animation-duration: 70s; }

/* love meter: share the result */
.love-share { display: grid; gap: 8px; justify-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(243, 201, 242, .3); }
.love-share-title { font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); }
.love-share-row { display: flex; gap: 8px; }
.love-share input { width: 200px; padding: 8px 14px; border: 1px solid rgba(243, 201, 242, .35); border-radius: 99px; background: #1b1b1b; color: var(--text); font: 400 14px var(--sans); }
.love-share small { min-height: 16px; font-size: 13px; color: var(--muted); }
.love-share small.error { color: #ff9fb0; }
.love-share small a { color: var(--lilac); text-decoration: underline; }
.love-share.is-shared .love-share-row { display: none; }

/* hall of fame + home wall: a love meter card */
.piece-love { display: grid; gap: 8px; justify-items: center; padding: 12px 8px; text-align: center; }
.piece-love-kicker { font: 600 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.piece-love-row { display: flex; align-items: center; gap: 12px; }
.piece-love-player { display: grid; justify-items: center; gap: 4px; color: inherit; }
.piece-love-player b { max-width: 90px; overflow: hidden; font: 600 13px var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.piece-love-ava { width: 52px; height: 52px; border-radius: 50%; background: #2a2530 center / cover; box-shadow: 0 0 0 2px var(--lilac); }
.piece-love-score { font: 400 34px/1 var(--gothic); color: var(--lilac); text-shadow: var(--glow); }
.piece-love p { margin: 0; font-size: 13px; }
.piece-love-mini { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: start; gap: 10px; }
.piece-love-mini .ava { width: 34px; height: 34px; border-radius: 50%; background: #2a2530 center / cover; box-shadow: 0 0 0 1.5px var(--lilac); }
.piece-love-mini b { font: 600 18px var(--sans); color: var(--lilac); }
.piece-love-mini small { grid-column: 1 / -1; font-size: 12.5px; opacity: .85; }

/* ============ round 2026-11-15 (3) ======================================== */
/* tablet covers: no blurred copy of the cover behind it — the cover alone, on the dark stage */
.covers-desk .cv-stage::before { display: none; }
.covers-desk .cv-stage { background: radial-gradient(rgba(243, 201, 242, .07) 1px, transparent 1.5px) 0 0 / 16px 16px, #16131a; }

/* love meter: share box to the right of player 2 */
.love-form:has(.love-share:not([hidden])) { grid-template-columns: 1fr auto 1fr minmax(240px, .95fr); grid-template-areas: "a heart b share" "go go go share"; }
.love-form .love-share { grid-area: share; align-self: stretch; align-content: center; margin: 0; padding: 16px 18px; border: 1.5px dashed rgba(243, 201, 242, .4); border-radius: 14px; }
.love-form .love-share[hidden] { display: none; }
.love-form .love-share-row { flex-wrap: wrap; justify-content: center; }
.love-form .love-share input { width: 170px; }
@media (max-width: 900px) { .love-form:has(.love-share:not([hidden])) { grid-template-columns: 1fr; grid-template-areas: "a" "heart" "b" "go" "share"; } }

/* pictures can't be dragged out of the site (mine and the Hall of Fame's) */
img { -webkit-user-drag: none; user-drag: none; }