/* Zoshigaya shared theme: P3R and P5R modes, set by theme/mode.js on <html data-mode>. */

@font-face { font-family: "Barlow"; src: url("/theme/fonts/barlow-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/theme/fonts/barlow-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/theme/fonts/barlow-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/theme/fonts/barlowcondensed-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/theme/fonts/barlowcondensed-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/theme/fonts/barlowcondensed-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/theme/fonts/barlowsemicondensed-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/theme/fonts/barlowsemicondensed-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Anton"; src: url("/theme/fonts/anton-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url("/theme/fonts/archivoblack-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Abril Fatface"; src: url("/theme/fonts/abrilfatface-400-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-num: "Barlow Condensed", "Barlow", sans-serif;
  /* Typed values: semi-condensed and a touch heavier, so fields read like the game's text boxes. */
  --font-field: 500 1rem/1.3 "Barlow Semi Condensed", "Barlow", sans-serif;
  --tap: 44px;
  --ease-snap: cubic-bezier(.2, 1.4, .4, 1);
  --ease-sink: cubic-bezier(.16, 1, .3, 1);
}

/* P3R: near-black navy surfaces so electric blue is only an accent, cyan labels, moon-yellow accent. */
:root, [data-mode="p3r"] {
  --bg: #070a1f;
  --bg-2: #0b0f2b;
  --panel: #11163d;
  --panel-2: #182052;
  --edge: #123ffd;
  --line: #283070;
  --line-strong: #5468d0;
  --ink: #ffffff;
  --ink-2: #c3cdff;
  --ink-3: #9fb0ff;
  --accent: #123ffd;
  --on-accent: #ffffff;
  --select: #ffffff;
  --on-select: #123ffd;
  --row: #182052;
  --on-row: #ffffff;
  --on-row-2: #c3cdff;
  --hl: #5ee8ff;
  --warm: #f5e200;
  --ghost: #0088e2;
  --focus: #f5e200;
  --danger: #ff8fa3;
  --ok: #5ee8ff;
  --data-1: #5ee8ff;
  --data-2: #f5e200;
  --data-3: #ff8fa3;
  --header: #123ffd;
  --on-header: #ffffff;
  --cut: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  --cut-panel: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  --tilt: 0deg;
  --tilt-alt: 0deg;
  color-scheme: dark;
}

/* P5R: black ground, white slabs, red field and selection, aqua and pink data. */
[data-mode="p5r"] {
  --bg: #0d0d0d;
  --bg-2: #161616;
  --panel: #0d0d0d;
  --panel-2: #1f1f1f;
  --edge: #ffffff;
  --line: #3a3a3a;
  --line-strong: #bdbdbd;
  --ink: #ffffff;
  --ink-2: #cfcfcf;
  --ink-3: #a8a8a8;
  --accent: #ff0504;
  --on-accent: #0d0d0d;
  --select: #ff0504;
  --on-select: #0d0d0d;
  --row: #ffffff;
  --on-row: #0d0d0d;
  --on-row-2: #4a4a4a;
  --hl: #69fdef;
  --warm: #f95def;
  --ghost: #ffffff;
  --focus: #69fdef;
  --danger: #ff6b6b;
  --ok: #69fdef;
  --data-1: #69fdef;
  --data-2: #f95def;
  --data-3: #ff0504;
  --header: #ff0504;
  --on-header: #0d0d0d;
  --cut: polygon(0 10%, 100% 0, 97% 100%, 2% 90%);
  --cut-panel: polygon(0 0, 100% 1.5%, 99% 100%, 1% 98.5%);
  --tilt: -1.2deg;
  --tilt-alt: 1deg;
}

/* Browser surfaces */
html { background: var(--bg); color: var(--ink); accent-color: var(--accent); scrollbar-color: var(--line-strong) var(--bg); }
::selection { background: var(--hl); color: #070a1f; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.pm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Mode switch */
.pm-mode { display: inline-flex; flex: none; border: 2px solid currentColor; }
.pm-mode button {
  min-width: 52px; min-height: var(--tap); padding: 0 12px; border: 0; background: transparent; color: inherit;
  font: 800 italic 18px/1 var(--font-num); letter-spacing: .02em; cursor: pointer;
}
.pm-mode button[aria-pressed="true"] { background: currentColor; }
.pm-mode button[aria-pressed="true"] span { color: var(--header); }
[data-mode="p5r"] .pm-mode { transform: rotate(-2deg); }

/* Title card: collage letters in P5R, heavy italic with cyan beat in P3R */
.pm-title { font: 800 italic clamp(2rem, 1.4rem + 3vw, 3.5rem)/1 var(--font-num); letter-spacing: -.01em; margin: 0; }
.pm-letters { display: inline-flex; flex-wrap: wrap; gap: 2px; perspective: 600px; }
/* Title letters arrive one by one: P3R flips them like the menu's cards, P5R slams them down. */
[data-mode="p3r"] .pm-l { animation: pm-letter-flip .55s calc(var(--n, 0) * 32ms + .1s) var(--ease-sink) both; }
[data-mode="p5r"] .pm-l { animation: pm-letter-slam .24s calc(var(--n, 0) * 28ms + .05s) var(--ease-snap) both; }
@keyframes pm-letter-flip { from { rotate: y 95deg; opacity: 0; } }
@keyframes pm-letter-slam { from { scale: 1.9; opacity: 0; } }
.pm-l { display: inline-block; }
.pm-gap { display: inline-block; width: .35em; }
[data-mode="p3r"] .pm-word:nth-child(even) .pm-l, [data-mode="p3r"] .pm-l:first-child { color: var(--hl); }
.pm-word { display: inline-flex; }
[data-mode="p5r"] .pm-title { font-style: normal; }
[data-mode="p5r"] .pm-l { padding: 0 .08em; line-height: 1.08; font-size: .82em; }
[data-mode="p5r"] .pm-l:nth-child(3n+1) { background: #fff; color: #0d0d0d; font-family: "Anton", sans-serif; transform: rotate(-5deg); }
[data-mode="p5r"] .pm-l:nth-child(3n+2) { background: var(--accent); color: #0d0d0d; font-family: "Abril Fatface", serif; transform: rotate(4deg) translateY(.05em); }
[data-mode="p5r"] .pm-l:nth-child(3n) { background: #0d0d0d; color: #fff; font-family: "Archivo Black", sans-serif; box-shadow: inset 0 0 0 2px #fff; transform: rotate(-2deg); }
[data-mode="p5r"] .pm-l:nth-child(4n) { transform: rotate(6deg) translateY(-.04em); }

/* Tag: section label */
.pm-tag {
  display: inline-block; margin: 0; padding: 5px 20px 4px; font: 700 italic 1.125rem/1.1 var(--font-num);
  background: var(--edge); color: var(--on-accent); clip-path: var(--cut);
}
[data-mode="p5r"] .pm-tag { background: #fff; color: #0d0d0d; clip-path: none; transform: rotate(-2deg); padding: 6px 16px; }

/* Ghost word behind big numbers */
.pm-ghost {
  position: absolute; pointer-events: none; user-select: none; white-space: nowrap;
  font: 800 italic clamp(4rem, 3rem + 6vw, 8rem)/.8 var(--font-num); color: var(--ghost); opacity: .32;
}
[data-mode="p5r"] .pm-ghost { color: transparent; -webkit-text-stroke: 2px var(--ghost); opacity: .45; }
.pm-num { font: 800 italic clamp(2.75rem, 2rem + 3vw, 4.5rem)/.9 var(--font-num); font-variant-numeric: tabular-nums; }

/* Slab: the menu panel */
.pm-slab { position: relative; background: var(--panel); padding: 18px; }
[data-mode="p3r"] .pm-slab { border: 2px solid var(--edge); clip-path: var(--cut-panel); }
/* P5R dialogue boxes: black slab, thick white outline, offset white plate behind. */
[data-mode="p5r"] .pm-slab { border: 3px solid #fff; box-shadow: 7px 7px 0 #fff; transform: rotate(-.6deg); margin-right: 7px; }

/* Menu rows. The slanted plate is drawn on ::before so text stays level and never touches a cut corner. */
.pm-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pm-row {
  position: relative; isolation: isolate; display: grid; align-items: center; gap: 12px; min-height: var(--tap);
  padding: 8px 34px; color: var(--on-row); text-decoration: none; transition: translate .18s var(--ease-snap), color .2s;
}
.pm-row::before {
  content: ""; position: absolute; inset: 0 8px; z-index: -1;
  background: linear-gradient(var(--select), var(--select)) no-repeat 0 0 / 0% 100%, var(--row);
  transform: skewX(-12deg); transition: background-size .28s var(--ease-sink);
}
[data-mode="p3r"] .pm-row::before { border: 1px solid var(--edge); }
[data-mode="p3r"] li:nth-child(n) > .pm-row { margin-left: calc(min(var(--i, 0), 6) * 8px); }
[data-mode="p5r"] .pm-row::before { inset: 0; transform: skewX(-6deg) rotate(-.8deg); }
[data-mode="p5r"] li:nth-child(even) > .pm-row::before { transform: skewX(6deg) rotate(.8deg); }
/* The cursor: in P3R a white bar slides in, in P5R the plate snaps to red. */
.pm-row.is-selected, a.pm-row:hover, a.pm-row:focus-visible, button.pm-row:hover, button.pm-row:focus-visible { color: var(--on-select); }
.pm-row.is-selected::before, a.pm-row:hover::before, a.pm-row:focus-visible::before, button.pm-row:hover::before, button.pm-row:focus-visible::before { background-size: 100% 100%, auto; }
[data-mode="p5r"] .pm-row::before { transition-duration: .1s; }
a.pm-row:hover, button.pm-row:hover { translate: 12px 0; }
a.pm-row:focus-visible { outline-offset: 4px; }
.pm-rank { font: 800 italic 1.75rem/1 var(--font-num); }

/* Buttons */
/* The slanted shape lives on ::before so borders survive the slant and focus outlines are not clipped. */
.pm-btn {
  --btn-bg: var(--accent); --btn-edge: var(--accent);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 26px; border: 0; background: none; color: var(--on-accent);
  font: 700 italic 1.125rem/1 var(--font-num); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .14s var(--ease-snap), filter .14s;
}
.pm-btn::before { content: ""; position: absolute; inset: 0 6px; z-index: -1; background: var(--btn-bg); border: 2px solid var(--btn-edge); transform: skewX(-14deg); }
[data-mode="p5r"] .pm-btn::before { inset: 0; border: 0; transform: none; clip-path: var(--cut); }
.pm-btn:hover { transform: translateX(3px) rotate(-1deg); filter: brightness(1.12); }
.pm-btn:disabled { opacity: .55; cursor: progress; transform: none; }
.pm-btn--ghost { --btn-bg: transparent; --btn-edge: var(--line-strong); color: var(--ink); }
[data-mode="p5r"] .pm-btn--ghost { --btn-bg: #fff; color: #0d0d0d; }

/* Fields */
.pm-field { display: grid; gap: 6px; font: 600 .875rem/1.3 var(--font-ui); color: var(--ink-2); }
.pm-input {
  width: 100%; min-height: var(--tap); padding: 0 14px; font: var(--font-field); letter-spacing: .01em; color: var(--ink);
  background: var(--bg); border: 2px solid var(--line-strong); border-radius: 0;
}
.pm-input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 2px var(--focus); }
[data-mode="p5r"] .pm-input { background-color: #fff; color: #0d0d0d; border-color: #fff; }
[data-mode="p5r"] .pm-input::placeholder { color: #4a4a4a; }
select.pm-input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }

.pm-note { color: var(--ink-2); }
.pm-error { color: var(--danger); }

/* Mode change: a full-screen wipe in the new mode's colour */
.pm-wipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.pm-wipe.to-p5r { background: #ff0504; animation: pm-wipe-p5 .52s var(--ease-snap) both; }
.pm-wipe.to-p3r { background: #123ffd; animation: pm-wipe-p3 .7s var(--ease-sink) both; }
/* View change: a slanted band crosses the screen, striped in the mode's colours. */
.pm-sweep.to-p5r { background: linear-gradient(110deg, #ff0504 0 82%, #0d0d0d 82% 88%, #ff0504 88% 93%, #fff 93%); animation: pm-wipe-p5 .46s var(--ease-snap) both; }
.pm-sweep.to-p3r { background: linear-gradient(100deg, #11163d 0 58%, #123ffd 58% 94%, #5ee8ff 94% 96%, #123ffd 96%); animation: pm-wipe-p5 .62s var(--ease-sink) both; }
.pm-wipe i {
  position: absolute; left: var(--x); bottom: -40px; width: var(--s); height: var(--s); border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .75); background: rgb(255 255 255 / .12);
  animation: pm-bubble .75s var(--d) var(--ease-sink) both;
}
@keyframes pm-bubble { from { translate: 0 0; opacity: 1; } to { translate: 12px -75vh; opacity: 0; } }

/* Mode-switch signatures: P5R throws a calling-card star burst, P3R lifts the moon through the water. */
:root { --burst: polygon(50% 0, 58% 30%, 85% 8%, 70% 38%, 100% 42%, 72% 56%, 92% 86%, 60% 70%, 50% 100%, 42% 72%, 10% 90%, 30% 58%, 0 46%, 28% 38%, 14% 10%, 42% 30%); }
.pm-wipe:not(.pm-sweep)::before, .pm-wipe:not(.pm-sweep)::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.pm-wipe.to-p5r:not(.pm-sweep)::before { width: 90vmin; height: 90vmin; background: #fff; clip-path: var(--burst); animation: pm-burst .52s var(--ease-snap) both; }
.pm-wipe.to-p5r:not(.pm-sweep)::after { width: 62vmin; height: 62vmin; background: #0d0d0d; clip-path: var(--burst); animation: pm-burst .52s .04s var(--ease-snap) both; }
@keyframes pm-burst { 0% { scale: 0; rotate: -40deg; } 55% { scale: 1; rotate: 6deg; } 100% { scale: 1.3; rotate: 12deg; opacity: 0; } }
.pm-wipe.to-p3r:not(.pm-sweep)::before {
  /* A crescent: the element itself is empty, its hard offset shadow is the moon. */
  width: 22vmin; height: 22vmin; border-radius: 50%;
  box-shadow: -5vmin 2vmin 0 0 #f5e200;
  animation: pm-moon .7s var(--ease-sink) both;
}
@keyframes pm-moon { from { translate: -50% 60vh; } 60% { translate: -50% -50%; } to { translate: -50% -60%; opacity: 0; } }

/* Hit feedback at the pointer */
.pm-hit { position: fixed; z-index: 9998; width: 0; height: 0; pointer-events: none; }
.pm-hit::before, .pm-hit::after { content: ""; position: absolute; left: 0; top: 0; translate: -50% -50%; }
.pm-hit-p3r::before, .pm-hit-p3r::after { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #fff; animation: pm-ripple .6s var(--ease-sink) both; }
.pm-hit-p3r::after { border-color: #5ee8ff; animation-delay: .12s; }
@keyframes pm-ripple { from { scale: .15; opacity: 1; } to { scale: 2.4; opacity: 0; } }
.pm-hit-p5r::before { width: 84px; height: 84px; background: #fff; clip-path: var(--burst); animation: pm-hit-burst .38s var(--ease-snap) both; }
.pm-hit-p5r::after { width: 54px; height: 54px; background: #ff0504; clip-path: var(--burst); animation: pm-hit-burst .38s .03s var(--ease-snap) both; }
@keyframes pm-hit-burst { from { scale: .1; rotate: -30deg; opacity: 1; } 60% { opacity: 1; } to { scale: 1.2; rotate: 15deg; opacity: 0; } }
@keyframes pm-wipe-p5 {
  0% { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); }
  45% { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); }
  100% { clip-path: polygon(120% 0, 120% 0, 100% 100%, 100% 100%); }
}
@keyframes pm-wipe-p3 {
  0% { clip-path: inset(100% 0 0 0); opacity: 1; }
  45% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* Entrances: P5R snaps in from the side, P3R rises out of a blur */
[data-mode="p5r"] .pm-enter { animation: pm-snap .26s var(--ease-snap) both; animation-delay: calc(var(--i, 0) * 45ms); }
[data-mode="p3r"] .pm-enter { animation: pm-sink .7s var(--ease-sink) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pm-snap { from { opacity: 0; translate: -56px 0; rotate: -5deg; scale: 1.06; } }
@keyframes pm-sink { from { opacity: 0; translate: 0 22px; filter: blur(6px); } }
.pm-rows > .pm-enter:nth-child(1) { --i: 1; } .pm-rows > .pm-enter:nth-child(2) { --i: 2; } .pm-rows > .pm-enter:nth-child(3) { --i: 3; }
.pm-rows > .pm-enter:nth-child(4) { --i: 4; } .pm-rows > .pm-enter:nth-child(5) { --i: 5; } .pm-rows > .pm-enter:nth-child(6) { --i: 6; }
.pm-rows > .pm-enter:nth-child(7) { --i: 7; } .pm-rows > .pm-enter:nth-child(8) { --i: 8; } .pm-rows > .pm-enter:nth-child(n+9) { --i: 9; }
/* P3R water shimmer: one light sweep over a panel as it arrives */
[data-mode="p3r"] .pm-shimmer { overflow: hidden; }
[data-mode="p3r"] .pm-shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .2) 50%, transparent 62%);
  translate: -100% 0; animation: pm-shine 1.4s .45s var(--ease-sink) both;
}
@keyframes pm-shine { to { translate: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .pm-enter, .pm-wipe, .pm-shimmer::after, .pm-l { animation: none !important; }
  .pm-hit { display: none; }
  .pm-row::before { transition: none; }
  .pm-wipe { display: none; }
  .pm-row, .pm-btn { transition: none; }
}