/* Matches pisscontrol.com's dark "stage" components (deploy/css/style.css: .planet-stage, .ps-*). */
:root {
  --stage-bg: #0b0b0c; --stage-ink: #f3f1e9; --stage-ink-soft: #95948b; --stage-line: #2a2a28; --stage-yellow: #f4d000;
  --panel: rgba(18, 18, 20, .96); --panel-soft: rgba(11, 11, 12, .78);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--stage-bg); color: var(--stage-ink); overflow: hidden; }
body {
  display: grid; place-items: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased;
}

/* 16:9 stage, uniformly scaled into the viewport. */
#stage {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9;
  container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
}
#canvas { display: block; width: 100%; height: 100%; }

/* Type roles from the site: k = small spaced label, d = Anton figure. Sizes in container units (1cqw = 12.8 logical px). */
.k { font-size: max(10px, .9cqw); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stage-ink-soft); }
.d { font-family: "Anton", "Noto Sans JP", sans-serif; color: var(--stage-yellow); letter-spacing: .03em; font-variant-numeric: tabular-nums; line-height: 1; }
.hint { margin: .6cqw 0 0; font-size: max(10px, .85cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-ink-soft); }

/* HUD readouts */
#hud { position: absolute; inset: 1.8cqw 1.8cqw auto 1.8cqw; display: flex; gap: .8cqw; align-items: stretch; pointer-events: none; }
.readout {
  display: flex; flex-direction: column; gap: .35cqw; padding: .7cqw 1.1cqw .8cqw;
  background: var(--panel-soft); border: 1px solid var(--stage-line); border-radius: 2px;
}
.readout .d { font-size: 3cqw; }
.readout.small .d { font-size: 1.9cqw; }
.readout.best { margin-left: auto; }

/* Angle / power meter: the site's dashed yellow progress bar */
#meter {
  position: absolute; left: 50%; bottom: 4cqw; transform: translateX(-50%); width: 26cqw;
  padding: 1cqw 1.4cqw 1.1cqw; text-align: center; pointer-events: none;
  background: var(--panel); border: 2px solid var(--stage-yellow); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
#meter .k { display: block; }
#meter-value { display: block; font-size: 3.2cqw; margin: .3cqw 0 .6cqw; text-shadow: 0 0 24px rgba(244, 208, 0, .45); }
.bar { height: .5cqw; min-height: 4px; background: repeating-linear-gradient(90deg, var(--stage-line) 0 10px, transparent 10px 16px); }
#meter-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--stage-yellow) 0 10px, transparent 10px 16px); }

/* Cards: the site's link-preview card (2px yellow edge, dark panel, pop-in) */
.card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 34cqw; max-width: 46cqw;
  padding: 2.2cqw 3cqw 2.4cqw; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .5cqw;
  background: var(--panel); border: 2px solid var(--stage-yellow); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  animation: pv-pop .34s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes pv-pop { from { transform: translate(-50%, -50%) scale(.35) translateY(14px); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
#stage[data-hug="true"] #results { left: 72%; }
#action-cue { position: absolute; left: 2cqw; top: 15cqw; z-index: 5; max-width: 44cqw; }
#action-cue[data-ready="true"] { background: #f4d000; color: #17181c; border: 2px solid #17181c; }
#action-cue:disabled { opacity: .65; cursor: default; }
#field-cue { position: absolute; left: 2cqw; top: 19cqw; color: #e7b8ff; background: #17181c; padding: .5cqw; font: 600 max(10px, 1cqw) Inter, sans-serif; }
.logotype {
  margin: 0; font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif; font-optical-sizing: auto;
  font-weight: 800; font-size: 2.1cqw; letter-spacing: -.02em; color: var(--stage-yellow);
}
.card h1 {
  margin: 0; font-family: "Anton", "Noto Sans JP", sans-serif; font-weight: 400; font-size: 6.4cqw; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; color: var(--stage-ink); text-shadow: 0 0 24px rgba(244, 208, 0, .35);
}
.sub { margin: .2cqw 0 .8cqw; font-size: max(11px, 1.1cqw); color: var(--stage-ink-soft); }
.card .big { font-size: 6cqw; text-shadow: 0 0 24px rgba(244, 208, 0, .45); }
.stats { margin: 0; font-size: max(11px, 1.05cqw); color: var(--stage-ink); }
.stats output { font-variant-numeric: tabular-nums; }
.flag { margin: 0 0 .6cqw; min-height: 1.2em; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: max(12px, 1.2cqw); color: var(--stage-yellow); }


/* Title screen: NANACA-style layout (logo + record + list left, big art right) in the stage style.
   The menu drops in from the top with a bounce; the art slides in from the right. */
#title {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center;
  background: linear-gradient(90deg, rgba(11, 11, 12, .82) 0%, rgba(11, 11, 12, .55) 45%, rgba(11, 11, 12, 0) 75%);
  animation: title-fade .3s ease-out;
}
.title-menu {
  margin-left: 4.5cqw; width: min(38cqw, 100%); padding: 2.4cqw 2.6cqw 2cqw;
  display: flex; flex-direction: column; gap: 1cqw;
  background: rgba(18, 18, 20, .96); border: 2px solid var(--stage-yellow); border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  animation: menu-drop .7s cubic-bezier(.2, 1.45, .45, 1) both;
}
.title-menu h1 {
  margin: -.2cqw 0 0; font-family: "Anton", "Noto Sans JP", sans-serif; font-weight: 400; font-size: 5.6cqw; line-height: .95;
  letter-spacing: .03em; text-transform: uppercase; color: var(--stage-ink); text-shadow: 0 0 24px rgba(244, 208, 0, .35);
}
.title-menu .record { margin: 0; display: flex; align-items: baseline; gap: 1cqw; }
.title-menu .record .d { font-size: 2.2cqw; margin-left: auto; }
.title-menu .clear {
  font: 600 max(10px, .8cqw) "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--stage-ink-soft); background: none; border: 1px solid var(--stage-line); border-radius: 2px; padding: .25cqw .6cqw; cursor: pointer;
}
.title-menu .clear:hover, .title-menu .clear:focus-visible { color: var(--stage-yellow); border-color: var(--stage-yellow); outline: none; }
.title-menu .clear[data-armed="true"] { color: #0b0b0c; background: var(--stage-yellow); border-color: var(--stage-yellow); }
.title-menu .menu-list .name { font-size: max(16px, 1.75cqw); }
/* On the title the corner buttons and note step aside (Esc still opens the menu). */
#stage[data-phase="title"] #corner, #stage[data-phase="title"] #tag { display: none; }
@keyframes menu-drop { 0% { transform: translateY(-120%); } 100% { transform: none; } }
@keyframes title-fade { from { opacity: 0; } to { opacity: 1; } }

/* How to play + cast guide: NANACA-style portrait list in the stage style. Portrait frames use the
   same colours as the in-game outcome labels (boost yellow, stop red, slow blue, ...). */
.howto {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(86cqw, calc(100% - 24px)); max-height: 92%; overflow: auto; padding: 1.8cqw 2.2cqw 2cqw;
  display: flex; flex-direction: column; gap: 1cqw;
  background: var(--panel); border: 2px solid var(--stage-yellow); border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  animation: pv-pop-plain .3s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pv-pop-plain { from { transform: translate(-50%, -50%) scale(.9); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.howto-head { display: flex; align-items: center; justify-content: space-between; }
.howto-head h2 { margin: 0; }
.howto .controls { margin: 0; font-size: max(12px, 1.15cqw); color: var(--stage-ink); }
.howto .controls span { display: block; margin-top: .3cqw; color: var(--stage-ink-soft); font-size: max(10px, .9cqw); letter-spacing: .06em; }
.howto b { color: var(--stage-yellow); font-weight: 600; }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw 2cqw; }
.cast li { display: flex; gap: 1cqw; align-items: flex-start; }
.cast canvas {
  flex: none; width: max(48px, 5cqw); height: max(48px, 5cqw); border-radius: .9cqw;
  border: max(3px, .35cqw) solid var(--c); background: #f3f1e9;
}
.cast h3 { margin: 0 0 .15cqw; font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif; font-weight: 700; font-size: max(13px, 1.25cqw); color: var(--stage-ink); }
.cast p { margin: 0; font-size: max(11px, 1cqw); line-height: 1.35; color: var(--stage-ink-soft); }
#info-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55cqw .75cqw; }
#info-btn svg { width: max(16px, 1.5cqw); height: max(16px, 1.5cqw); }
@media (max-width: 640px) { .cast { grid-template-columns: 1fr; } }
/* Buttons: the site's .ps-btn */
.btn {
  font-family: "Inter", "Noto Sans JP", sans-serif; font-size: max(11px, .95cqw); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--stage-yellow); background: var(--panel-soft); border: 1px solid var(--stage-yellow); border-radius: 2px;
  padding: .75cqw 1.6cqw; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--stage-yellow); color: #0b0b0c; outline: none; }
/* Bottom-left corner: Menu + quick-mute speaker. */
#corner { position: absolute; left: 1.8cqw; bottom: 1.8cqw; display: flex; gap: .6cqw; }
#menu-btn { display: inline-flex; align-items: center; gap: .5cqw; }
#sound-btn { display: inline-flex; align-items: center; justify-content: center; padding: .55cqw .75cqw; }
#sound-btn svg { width: max(16px, 1.5cqw); height: max(16px, 1.5cqw); }
#sound-btn .cross { display: none; }
#sound-btn[data-locked="true"] { animation: speaker-wait 1.2s ease-in-out infinite; }
@keyframes speaker-wait { 50% { opacity: .35; } }
#sound-btn[aria-pressed="true"] .waves { display: none; }
#sound-btn[aria-pressed="true"] .cross { display: inline; }
#sound-btn[aria-pressed="true"]:not(:hover):not(:focus-visible) { color: var(--stage-ink-soft); border-color: var(--stage-line); }
#menu-btn .drop { width: .75em; height: 1.1em; }

/* Menu drawer — the site's simplified links list (.link-list) on the dark stage:
   hairline rows, Bricolage names, and on hover/focus the name turns piss yellow
   while the droplet slides in on its left. */
#menu-backdrop { position: absolute; inset: 0; background: rgba(11, 11, 12, .45); }
#menu {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(34cqw, 100%); padding: 2.6cqw 2.6cqw 2cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  background: rgba(18, 18, 20, .97); border-left: 2px solid var(--stage-yellow); box-shadow: -8px 0 24px rgba(0, 0, 0, .45);
  animation: menu-in .28s cubic-bezier(.2, 1, .3, 1);
}
@keyframes menu-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.menu-head { display: flex; align-items: center; gap: .9cqw; }
/* Wordmark: the owner's logo — yellow drop + lowercase "pisscontrol" in a geometric bold. */
.wordmark {
  margin: 0; display: flex; align-items: flex-end; gap: .22em;
  font-family: "Poppins", "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: max(22px, 2.7cqw); letter-spacing: -.035em; line-height: .9; color: var(--stage-yellow);
}
.wordmark .mark { width: .5em; height: .78em; flex: none; margin-bottom: .04em; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { border-bottom: 1px solid var(--stage-line); }
.menu-list li:first-child { border-top: 1px solid var(--stage-line); }
.menu-list button {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw;
  padding: max(10px, 1.15cqw) 2px; background: none; border: 0; color: var(--stage-ink); cursor: pointer; text-align: left;
}
.menu-list button:focus-visible { outline: none; }
.menu-list .name {
  display: inline-flex; align-items: center;
  font-family: "Bricolage Grotesque", "Noto Sans JP", sans-serif; font-weight: 600; font-size: max(16px, 1.6cqw); letter-spacing: -.01em;
  transition: color .15s ease;
}
.menu-list .name::before {
  content: ""; flex: none; width: 0; height: .95em; margin-right: 0; background: currentColor; opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 1 18 28'%3E%3Cpath d='M23 1C23 1 14 13 14 19.5a9 9 0 0 0 18 0C32 13 23 1 23 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 1 18 28'%3E%3Cpath d='M23 1C23 1 14 13 14 19.5a9 9 0 0 0 18 0C32 13 23 1 23 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: width .15s ease, margin-right .15s ease, opacity .15s ease;
}
.menu-list button:hover .name, .menu-list button:focus-visible .name { color: var(--stage-yellow); }
.menu-list button:hover .name::before, .menu-list button:focus-visible .name::before { width: .62em; margin-right: .32em; opacity: 1; }
.menu-list .val { font-size: max(10px, .85cqw); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stage-ink-soft); }
.menu-list button[aria-pressed="false"] .val { color: var(--stage-ink-soft); opacity: .6; }
.menu-list button[aria-pressed="true"] .val { color: var(--stage-yellow); }
/* Sound row: the label mutes, the slider sets volume (yellow fill = level, like the meter bar). */
.menu-list .sound-row { display: flex; align-items: center; gap: 1.2cqw; }
.menu-list .sound-row button { width: auto; flex: none; }
.menu-list .sound-row .val { flex: none; min-width: 4.2em; text-align: right; }
.menu-list .sound-row[data-muted="true"] .val { color: var(--stage-ink-soft); opacity: .6; }
.menu-list .sound-row[data-muted="false"] .val { color: var(--stage-yellow); }
#opt-volume {
  --fill: 30%; flex: 1; min-width: 0; height: 22px; margin: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
#opt-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--stage-yellow) var(--fill), var(--stage-line) var(--fill)); }
#opt-volume::-moz-range-track { height: 4px; border-radius: 2px; background: var(--stage-line); }
#opt-volume::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--stage-yellow); }
#opt-volume::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--stage-yellow); border: 2px solid #0b0b0c; box-shadow: 0 0 0 1px var(--stage-yellow);
}
#opt-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--stage-yellow); border: 2px solid #0b0b0c; }
.sound-row[data-muted="true"] #opt-volume { filter: grayscale(1) brightness(.7); }
#opt-volume:focus-visible { outline: 1px dashed var(--stage-yellow); outline-offset: 4px; }
.menu-foot { margin: auto 0 0; font-size: max(10px, .8cqw); color: var(--stage-ink-soft); }
#stage[data-meter="off"] .readout:not(.best) { display: none; }
#tag { position: absolute; right: 1.8cqw; bottom: .9cqw; text-align: right; margin: 0; font-size: max(9px, .8cqw); letter-spacing: .08em; color: var(--stage-ink); opacity: .7; pointer-events: none; text-shadow: 0 1px 2px #000; }
#error { position: absolute; inset: auto 2cqw 2cqw; background: #C52272; color: white; padding: 1cqw; font-size: 1.4cqw; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .card, #menu, #sound-btn, #title, .title-menu, .howto { animation: none !important; } .menu-list .name, .menu-list .name::before { transition: none; } }

/* Overlays stack above the results/title cards: guide, then menu backdrop, then the menu itself. */
.howto { z-index: 20; }
#menu-backdrop { z-index: 25; }
#menu { z-index: 30; }