:root {
  --void: #050a14;
  --void-2: #0b1624;
  --deck: #102538;
  --paper: #f1e5c4;
  --paper-2: #fff8df;
  --ink: #18243a;
  --attention: #59d8ff;
  --energy: #ffb957;
  --time: #55d5b4;
  --pollution: #ff3f82;
  --feedback: #b49cff;
  --muted: #9bb0bd;
  --line: rgba(178, 218, 229, .23);
  --hard-line: rgba(219, 239, 241, .42);
  --display: "STSongti-SC-Black", "Songti SC", "STSong", serif;
  --body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "SF Mono", Menlo, Monaco, monospace;
  --shadow: 0 18px 42px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
  margin: 0;
  overflow: hidden;
  background: var(--void);
}

body {
  color: var(--paper-2);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 3px solid var(--attention); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.game-shell {
  position: relative;
  isolation: isolate;
  width: min(1600px, 100%);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 52px 156px minmax(260px, 1fr) 278px;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 31%, rgba(40, 110, 122, .16), transparent 24%),
    radial-gradient(circle at 16% 8%, rgba(35, 104, 139, .2), transparent 27%),
    linear-gradient(155deg, #040911 0%, #091522 48%, #07111d 100%);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .24;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 192, 204, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 192, 204, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 75%, transparent);
}

.game-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 112px;
  bottom: 190px;
  z-index: -1;
  width: min(620px, 46vw);
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(89, 216, 255, .08), rgba(89, 216, 255, .015) 44%, rgba(255, 63, 130, .045));
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  pointer-events: none;
}

/* HUD ------------------------------------------------------------------- */

.hud {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(520px, 1.8fr) minmax(100px, .5fr);
  align-items: center;
  gap: 14px;
  padding: 4px 12px;
  background: rgba(5, 15, 24, .82);
  border-bottom: 1px solid var(--hard-line);
}

.run-mark { display: flex; align-items: center; gap: 9px; min-width: 0; }
.run-glyph {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--void); background: var(--energy); border: 1px solid #ffe1a6;
  clip-path: polygon(50% 0, 63% 30%, 100% 50%, 63% 70%, 50% 100%, 37% 70%, 0 50%, 37% 30%);
  filter: drop-shadow(0 0 8px rgba(255, 185, 87, .32));
}
.run-mark div { min-width: 0; display: grid; }
.run-mark small { color: #8fa8b4; font: 700 8px/1.1 var(--mono); letter-spacing: .12em; }
.run-mark strong { margin-top: 3px; color: var(--paper); font: 900 18px/1 var(--display); white-space: nowrap; }

.hud-resources { min-width: 0; display: flex; justify-content: center; align-items: stretch; gap: 6px; }
.hud-resources section {
  min-width: 80px;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  background: rgba(17, 39, 53, .8);
  border: 1px solid var(--line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.hud-label { display: flex; align-items: center; gap: 5px; color: #9eb1bc; font-size: 9px; font-weight: 700; white-space: nowrap; }
.hud-resources b { font: 900 17px/1 var(--mono); }
.resource-dot { width: 7px; height: 7px; display: inline-block; transform: rotate(45deg); }
.attention-dot { background: var(--attention); }
.energy-dot { background: var(--energy); }
.time-dot { background: var(--time); }

.attention-meter { flex: 1 1 230px; max-width: 270px; }
.attention-meter > b { color: var(--attention); }
.attention-pips { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; min-width: 70px; }
.attention-pips i { height: 9px; background: var(--attention); transform: skewX(-16deg); box-shadow: 0 0 7px rgba(89, 216, 255, .25); transition: opacity .16s, transform .16s; }
.attention-pips i.empty { opacity: .13; box-shadow: none; }
.attention-pips i.hit { animation: pipBreak .44s both; }
.energy-meter b { color: var(--energy); }
.time-meter b { color: var(--time); }

.goal-meter { flex: 1 1 190px; max-width: 235px; }
.goal-track { min-width: 52px; flex: 1; height: 7px; overflow: hidden; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .13); transform: skewX(-14deg); }
.goal-track i { display: block; width: 0; height: 100%; background: var(--energy); box-shadow: 0 0 12px rgba(255, 185, 87, .5); transition: width .3s ease; }
.goal-meter b { color: var(--energy); font-size: 12px; }

.hud-tools { display: flex; justify-content: flex-end; gap: 5px; }
.icon-button {
  min-width: 38px; height: 34px; padding: 0 9px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: #b8c8ce; background: rgba(17, 38, 52, .76); border: 1px solid var(--line);
  cursor: pointer;
}
.icon-button span { font-size: 8px; }
.icon-button:hover { color: var(--paper); border-color: var(--hard-line); }
.icon-button[aria-pressed="true"] { color: #ffe6a8; border-color: rgba(255, 185, 87, .55); background: rgba(75, 53, 25, .55); box-shadow: inset 0 0 14px rgba(255, 185, 87, .08); }
.icon-button.is-unavailable { color: #73858e; border-color: rgba(115, 133, 142, .24); cursor: not-allowed; }

/* Opponent -------------------------------------------------------------- */

.opponent-zone {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(150px, .55fr) minmax(410px, 1.65fr) minmax(140px, .48fr);
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 20, 31, .96), rgba(13, 38, 52, .94) 48%, rgba(16, 27, 44, .96)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .02) 22px 23px);
  border: 1px solid rgba(108, 186, 203, .28);
  box-shadow: inset 0 -18px 38px rgba(0, 0, 0, .18), var(--shadow);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.opponent-zone::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pollution); box-shadow: 0 0 22px rgba(255, 63, 130, .6);
}

.opponent-portrait { display: grid; place-items: center; position: relative; }
.opponent-status { position: absolute; bottom: 0; padding: 2px 6px; color: #ffb1cb; background: #301222; border: 1px solid #8d2d52; font: 700 7px var(--mono); letter-spacing: .12em; }
.algorithm-aperture { position: relative; width: 82px; height: 82px; display: grid; place-items: center; }
.orbit { position: absolute; inset: 4px; border: 1px solid rgba(89, 216, 255, .34); border-radius: 50%; }
.orbit-a { transform: scaleX(.48) rotate(20deg); animation: orbitA 7s linear infinite; }
.orbit-b { transform: scaleY(.48) rotate(-22deg); border-color: rgba(255, 185, 87, .38); animation: orbitB 5.4s linear infinite reverse; }
.orbit-c { inset: 13px; border-style: dashed; animation: spin 8s linear infinite; }
.algorithm-eye {
  position: relative; width: 35px; height: 35px; display: grid; place-items: center;
  background: radial-gradient(circle at 42% 38%, #e7fbff 0 5%, var(--attention) 7% 28%, #0b4661 31% 60%, #06111c 63%);
  border-radius: 50%; box-shadow: 0 0 21px rgba(89, 216, 255, .48), 0 0 0 7px rgba(89, 216, 255, .06);
  animation: watch 3.2s ease-in-out infinite;
}
.algorithm-eye i { width: 8px; height: 14px; background: #03101c; border-radius: 50%; animation: pupil 4.5s ease-in-out infinite; }
.opponent-zone.is-hit .algorithm-aperture { animation: opponentRecoil .42s both; }

.opponent-copy { min-width: 0; }
.opponent-copy small { color: #829da8; font: 700 8px var(--mono); letter-spacing: .11em; }
.opponent-copy h1 { margin: 2px 0; color: var(--paper); font: 900 clamp(23px, 2vw, 31px)/1 var(--display); }
.opponent-copy p { margin: 5px 0 0; color: #a3b9c1; font-size: 10px; line-height: 1.35; }

.intent-card {
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-rows: 25px 1fr 27px;
  overflow: hidden;
  color: #dcebed;
  background: linear-gradient(145deg, rgba(5, 13, 23, .96), rgba(16, 21, 37, .96));
  border: 1px solid rgba(255, 63, 130, .42);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45), 0 9px 22px rgba(0, 0, 0, .2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.intent-card > header { display: flex; justify-content: space-between; align-items: center; padding: 4px 9px; background: rgba(255, 255, 255, .045); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 8px; }
.intent-label { color: #ff9abc; font-family: var(--mono); font-weight: 800; letter-spacing: .09em; }
.intent-main { min-width: 0; display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; padding: 6px 10px 4px; }
.intent-main > div { min-width: 0; }
.intent-glyph { width: 30px; height: 30px; display: grid; place-items: center; color: var(--pollution); border: 1px solid currentColor; transform: rotate(45deg); }
.intent-glyph::first-letter { transform: rotate(-45deg); }
.intent-main strong { display: block; overflow: hidden; color: #ffd6e4; font: 900 15px/1.1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.intent-main p { margin: 3px 0 0; overflow: hidden; color: #94a9b1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.opponent-zone.boss .intent-main p { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.encounter-dilemma {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 5px;
  margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(255, 185, 87, .24);
}
.encounter-dilemma > span {
  padding: 2px 4px; color: #2b210b; background: var(--energy); border: 1px solid #ffe0a2;
  font: 900 6px/1.15 var(--mono); white-space: nowrap;
}
.dilemma-rule {
  display: block; overflow: visible; color: #f7dfab; font-size: 7px; line-height: 1.25;
  font-weight: 700; white-space: normal;
}
.intent-effects { display: flex; align-items: center; gap: 5px; padding: 4px 9px; overflow: hidden; background: rgba(255, 255, 255, .035); }
.intent-effects span { padding: 2px 6px; color: #a9c1c8; border: 1px solid rgba(160, 198, 207, .2); font-size: 7px; font-weight: 800; white-space: nowrap; }
.intent-effects .bad { color: #ffb3cc; border-color: rgba(255, 63, 130, .3); }

.pull-meter { display: grid; gap: 8px; padding: 0 4px; }
.pull-meter > span { display: flex; justify-content: space-between; color: #879faa; font-size: 9px; }
.pull-meter b { color: #ff9fc0; font: 900 18px/1 var(--mono); }
.pull-track { height: 8px; overflow: hidden; background: #03080d; border: 1px solid rgba(255, 255, 255, .13); transform: skewX(-12deg); }
.pull-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7d4fd1, var(--pollution)); box-shadow: 0 0 12px rgba(255, 63, 130, .55); transition: width .35s ease; }

/* Battlefield ----------------------------------------------------------- */

.battlefield {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 9px;
  padding: 9px;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(210, 224, 218, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 224, 218, .055) 1px, transparent 1px),
    linear-gradient(155deg, #d9ddcf, #c7d4d0 54%, #aebfc0);
  background-size: 28px 28px, 28px 28px, auto;
  border: 1px solid rgba(243, 229, 196, .55);
  box-shadow: inset 0 0 45px rgba(31, 53, 57, .15), var(--shadow);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.feed-beam { position: absolute; left: 50%; top: -18px; bottom: -14px; width: 36%; transform: translateX(-50%); pointer-events: none; opacity: .32; }
.feed-beam::before,
.feed-beam::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(38, 110, 123, .75), transparent); }
.feed-beam::before { left: 0; transform: rotate(-5deg); }
.feed-beam::after { right: 0; transform: rotate(5deg); }
.feed-beam i { position: absolute; left: 50%; top: 0; width: 2px; height: 42px; background: var(--attention); box-shadow: 0 0 10px rgba(89, 216, 255, .6); animation: signalDrop 2.4s ease-in infinite; }

.program-rack,
.shot-bay { position: relative; z-index: 2; min-width: 0; min-height: 0; padding: 7px; background: rgba(241, 229, 196, .5); border: 1px solid rgba(38, 66, 71, .28); }
.program-rack.is-empty { display: none; }
.battlefield.has-programs { grid-template-columns: 112px minmax(0, 1fr) 156px; }
.program-rack > header,
.shot-bay > header { display: flex; justify-content: space-between; gap: 4px; padding-bottom: 5px; border-bottom: 1px solid rgba(29, 59, 64, .18); }
.program-rack > header span,
.shot-bay > header span { color: #243b43; font: 900 9px var(--display); }
.program-rack > header small,
.shot-bay > header small { color: #657c80; font-size: 6px; }
.program-slots { height: calc(100% - 23px); display: grid; grid-template-rows: repeat(3, 1fr); gap: 5px; padding-top: 5px; }
.program-slot { min-height: 0; display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 4px; padding: 4px; color: #2e5159; background: rgba(255, 255, 255, .35); border: 1px dashed rgba(50, 87, 94, .38); }
.program-slot > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; }
.program-slot small { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.program-slot.filled { color: #594012; background: #f3d792; border: 1px solid #8c6b23; box-shadow: 0 0 15px rgba(255, 185, 87, .18); }
.program-slot.triggered { animation: programPulse .8s both; }

.lane-wrap { position: relative; z-index: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: 36px minmax(0, 1fr); }
.lane-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px; }
.lane-heading > div { display: grid; }
.lane-heading small { color: #5b747a; font: 700 7px var(--mono); letter-spacing: .12em; }
.lane-heading strong { color: #162f37; font: 900 16px/1.1 var(--display); }
.lane-heading p { max-width: 380px; margin: 0; padding: 5px 8px; color: #496168; background: rgba(255, 255, 255, .37); border-left: 2px solid #4f8e9b; font-size: 8px; }
.lane-heading p.targeting { color: #633a0a; background: #ffe5a8; border-color: #aa7622; animation: hintPulse 1s ease-in-out infinite; }

.input-lane { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 5px; align-items: stretch; }
.lane-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 35px minmax(0, 1fr); padding: 5px; background: rgba(242, 246, 233, .48); border: 1px solid rgba(43, 75, 81, .24); }
.lane-stage.danger { background: rgba(255, 224, 231, .45); border-color: rgba(170, 49, 89, .35); }
.lane-stage > header { min-width: 0; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 5px; }
.lane-stage > header > b { width: 22px; height: 22px; display: grid; place-items: center; color: #e9f4f2; background: #446974; transform: rotate(45deg); font: 800 8px var(--mono); }
.lane-stage > header > b::first-letter { transform: rotate(-45deg); }
.lane-stage.danger > header > b { background: #a83760; }
.lane-stage > header span { min-width: 0; display: grid; }
.lane-stage > header strong { color: #243e45; font-size: 9px; white-space: nowrap; }
.lane-stage > header small { color: #708589; font-size: 6px; }
.lane-arrow { align-self: center; width: 20px; height: 20px; display: grid; place-items: center; color: #426773; background: #d9e2dc; border: 1px solid rgba(45, 79, 86, .25); transform: rotate(45deg); font: 900 16px/1 var(--mono); }
.lane-slot { min-width: 0; min-height: 0; display: grid; align-content: stretch; }
.lane-slot.has-stack { grid-auto-rows: minmax(58px, 1fr); gap: 3px; overflow-y: auto; scrollbar-width: thin; }
.lane-slot.has-stack .input-card { min-height: 58px; padding-block: 5px; }
.empty-slot { display: grid; place-items: center; min-height: 100%; color: #788b8d; border: 1px dashed rgba(51, 87, 92, .28); font-size: 8px; }

.input-card {
  position: relative; min-width: 0; min-height: 0; display: grid; align-content: center; gap: 5px; padding: 9px;
  color: #1c333a; text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(228, 233, 221, .92)),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(44, 78, 84, .04) 7px 8px);
  border: 1px solid #6e8c91; box-shadow: 0 7px 13px rgba(25, 48, 52, .16);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  cursor: default; transition: transform .16s, filter .16s, box-shadow .16s;
}
.input-card::before { content: "输入"; justify-self: start; padding: 2px 5px; color: #315d67; border: 1px solid rgba(49, 93, 103, .32); font: 700 6px var(--mono); letter-spacing: .09em; }
.input-card strong { display: block; color: #182f37; font: 900 clamp(10px, .92vw, 14px)/1.18 var(--display); }
.input-card p { margin: 0; color: #536d70; font-size: 7px; line-height: 1.35; }
.input-card footer { display: flex; flex-wrap: wrap; gap: 3px; }
.input-card footer span { padding: 2px 4px; color: #546e72; background: rgba(65, 105, 112, .09); font-size: 6px; font-weight: 800; }
.input-card.targetable { cursor: pointer; transform: translateY(-3px); border-color: #a06a13; box-shadow: 0 0 0 3px rgba(255, 185, 87, .48), 0 10px 19px rgba(71, 50, 11, .2); animation: targetGlow 1.1s ease-in-out infinite; }
.input-card.illegal { opacity: .35; filter: grayscale(.7); }
.input-card.polluting { animation: inputCorrupt .65s both; }

.shot-bay { display: grid; grid-template-rows: 24px 1fr; }
.command-card {
  position: relative; min-height: 0; display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; gap: 3px;
  margin-top: 5px; padding: 7px; color: #2f250f; text-align: center;
  background:
    radial-gradient(circle at 71% 18%, rgba(255, 255, 255, .88) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 38%, #fff8d1, #f0c56e 58%, #aa6c26 100%);
  border: 2px solid #e7ba57; box-shadow: inset 0 0 0 3px #18304f, inset 0 0 0 4px rgba(255, 244, 202, .72), 0 7px 14px rgba(67, 45, 8, .2);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  cursor: pointer; transition: transform .16s, filter .16s;
}
.command-card:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.07); }
.command-card:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.78); opacity: .68; }
.command-cost { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; z-index: 4; display: grid; place-items: center; color: #fff4cd; background: #172845; border: 2px solid #f1c664; border-radius: 50%; box-shadow: 0 2px 0 #765018; font: 900 9px var(--mono); }
.feedback-promise {
  position: absolute; right: 6px; top: 6px; z-index: 4; width: 29px; height: 38px;
  display: grid; place-items: center; align-content: center; gap: 1px;
  color: #f5ebff; background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .28), transparent 26%),
    linear-gradient(150deg, #59468f, #241b4c);
  border: 1px solid #d7c1ff; box-shadow: 0 0 12px rgba(180, 156, 255, .42);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  transform: rotate(5deg);
}
.feedback-promise i { font: 900 13px/1 var(--display); }
.feedback-promise small { font: 800 4.5px/1 var(--mono); white-space: nowrap; }
.command-art { position: relative; width: 49px; height: 49px; display: block; overflow: hidden; background: radial-gradient(circle at 50% 50%, #244a73, #0b1930 68%); border: 2px solid #765222; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 239, 183, .38), 0 0 12px rgba(255, 194, 78, .35); }
.command-art .command-orbit { position: absolute; inset: 7px; border: 1px solid rgba(255, 219, 127, .62); border-radius: 50%; transform: rotate(-18deg) scaleY(.62); }
.command-art .command-shot { position: absolute; left: 8px; top: 24px; width: 31px; height: 3px; background: linear-gradient(90deg, rgba(255, 221, 126, .12), #ffe09a 38%, #fff6d1); box-shadow: 0 0 7px rgba(255, 222, 141, .74); transform: rotate(-11deg); }
.command-art .command-shot::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 3px solid #fff6d1; border-right: 3px solid #fff6d1; transform: rotate(45deg); }
.command-art .command-star { position: absolute; right: 6px; top: 5px; width: auto; height: auto; color: #ffe59b; background: none; font: normal 10px/1 var(--display); text-shadow: 0 0 7px #ffd36f; transform: none; }
.command-card strong { font: 900 13px/1 var(--display); }
.command-card > small { color: #665127; font-size: 6px; line-height: 1.25; }
.command-card > b { padding: 2px 5px; color: #fff1c3; background: #604313; font-size: 7px; }
.command-card.ready { animation: commandReady 1.4s ease-in-out infinite; }

.piles { position: absolute; right: 174px; bottom: 8px; z-index: 3; display: flex; gap: 4px; }
.pile { min-width: 50px; height: 28px; display: grid; grid-template-columns: 15px 1fr auto; align-items: center; gap: 3px; padding: 3px 5px; color: #27434a; background: rgba(241, 229, 196, .68); border: 1px solid rgba(42, 72, 78, .3); }
.pile span { font-size: 10px; }
.pile small { font-size: 6px; }
.pile b { font: 900 9px var(--mono); }
.pile.discard { transform: rotate(-1deg); }
.pile.removed { transform: rotate(1deg); opacity: .8; }
.pile.pulse { animation: pileReceive .7s both; }

/* Player hand ----------------------------------------------------------- */

.player-zone {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  padding: 7px 9px 8px;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(180deg, #c6d0ca 0%, #dce0d2 20%, #c0cac4 100%);
  border: 1px solid rgba(243, 229, 196, .62);
  box-shadow: inset 0 18px 35px rgba(255, 255, 255, .12), var(--shadow);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.player-zone::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--attention), transparent); opacity: .55; }
.hand-bar { min-width: 0; display: grid; grid-template-columns: 145px 1fr 205px; align-items: center; gap: 10px; padding: 0 4px; }
.hand-bar > div { display: flex; align-items: baseline; gap: 8px; }
.hand-bar small { color: #60777b; font: 700 7px var(--mono); letter-spacing: .1em; }
.hand-bar h2 { margin: 0; color: #173039; font: 900 20px/1 var(--display); }
.hand-bar > p { margin: 0; color: #5a7074; font-size: 8px; text-align: center; }
.end-turn-button {
  min-height: 38px; display: grid; align-content: center; justify-items: start; gap: 2px; padding: 5px 12px;
  color: #f3ead0; background: linear-gradient(145deg, #173a47, #0c202e); border: 1px solid #4d8490;
  box-shadow: 0 3px 0 #061017; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.end-turn-button strong { font-size: 11px; }
.end-turn-button small { color: #9fc0c7; font-size: 6px; }
.end-turn-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
.end-turn-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.end-turn-button.opening-suggested:not(:disabled) { box-shadow: 0 0 0 3px var(--energy), 0 0 26px rgba(255, 185, 87, .56); animation: coachCardPulse 1.25s ease-in-out infinite; }

.hand {
  min-width: 0; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  padding: 2px 54px 3px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.hand::-webkit-scrollbar { display: none; }
.empty-hand { width: 100%; min-height: 100%; display: grid; place-items: center; color: #61777a; border: 1px dashed rgba(46, 80, 85, .35); font-size: 10px; }

.game-card {
  --accent: #5189a3;
  --frame: #16314f;
  --trim: #e7bd67;
  --sheet: #fff4d8;
  --sheet-shadow: #ded1ad;
  --art-a: #173c64;
  --art-b: #5976a8;
  --art-glow: #ffd985;
  --rail: rgba(255, 230, 163, .86);
  --rail-rotate: -7deg;
  --rail-direction: 1;
  --sigil-x: 50%;
  --sigil-y: 51%;
  --sigil-size: 38px;
  --sigil-rotate: 0deg;
  --sigil-radius: 50%;
  --sigil-clip: none;
  --spark-x: 54%;
  --spark-y: 51%;
  --spark-w: 34px;
  --spark-rotate: -8deg;
  position: relative;
  width: clamp(134px, 10.2vw, 158px); min-width: clamp(134px, 10.2vw, 158px); height: 210px;
  display: grid; grid-template-rows: 18px 66px 27px 1fr 17px; gap: 4px;
  padding: 9px 10px 8px; color: var(--ink); text-align: left;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .72), transparent 26%),
    linear-gradient(165deg, var(--sheet), var(--sheet-shadow));
  border: 2px solid var(--trim);
  box-shadow: inset 0 0 0 4px var(--frame), inset 0 0 0 5px rgba(255, 255, 255, .36), 0 9px 15px rgba(10, 23, 36, .28);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  cursor: pointer; transform-origin: 50% 110%;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.game-card::before { content: ""; position: absolute; inset: 5px; z-index: 0; border: 1px solid color-mix(in srgb, var(--trim) 70%, transparent); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); pointer-events: none; }
.game-card::after { content: "✦"; position: absolute; right: 7px; bottom: 5px; z-index: 1; color: color-mix(in srgb, var(--trim) 78%, var(--frame)); font: normal 8px/1 var(--display); opacity: .72; pointer-events: none; }
.game-card > * { position: relative; z-index: 2; }
.game-card:nth-child(5n + 1) { transform: rotate(-2.4deg); }
.game-card:nth-child(5n + 2) { transform: rotate(-1deg); }
.game-card:nth-child(5n + 4) { transform: rotate(1deg); }
.game-card:nth-child(5n) { transform: rotate(2.4deg); }
.game-card:hover:not(:disabled) { z-index: 4; transform: translateY(-13px) scale(1.045); box-shadow: inset 0 0 0 4px var(--frame), inset 0 0 0 5px rgba(255, 255, 255, .44), 0 18px 23px rgba(8, 20, 33, .36); }
.game-card:active:not(:disabled) { transform: translateY(-7px) scale(1.02); }
.game-card:disabled { cursor: not-allowed; filter: saturate(.45); opacity: .62; }
.game-card.placeholder { filter: saturate(.55); }
.game-card.selected { z-index: 6; transform: translateY(-20px) scale(1.07) !important; box-shadow: 0 0 0 3px var(--energy), 0 20px 27px rgba(52, 39, 8, .3); }
.game-card.opening-suggested:not(:disabled) { z-index: 5; box-shadow: 0 0 0 3px var(--energy), 0 0 26px rgba(255, 185, 87, .62); animation: coachCardPulse 1.25s ease-in-out infinite; }
.command-card.opening-suggested:not(:disabled) { box-shadow: 0 0 0 3px var(--energy), 0 0 26px rgba(255, 185, 87, .62); animation: coachCardPulse 1.25s ease-in-out infinite; }
.game-card.reward-arrival { z-index: 6; box-shadow: 0 0 0 3px var(--feedback), 0 0 28px rgba(102, 227, 189, .68); animation: rewardArrivalPulse .9s ease-in-out 2; }
.game-card.feedback-origin { z-index: 6; box-shadow: 0 0 0 3px var(--feedback), 0 0 30px rgba(180, 156, 255, .78); animation: feedbackOriginPulse .9s ease-in-out 2; }
.game-card.showcase:disabled { cursor: default; filter: none; opacity: 1; }
.opponent-zone.is-acting { animation: enemyIntentPulse .72s ease-out; }
.game-card.illegal { opacity: .32; filter: grayscale(.7); }
.game-card.hand-target { box-shadow: 0 0 0 3px var(--energy), 0 12px 21px rgba(68, 48, 7, .26); animation: targetGlow 1s ease-in-out infinite; }
.card-kind { min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 30px 0 3px; color: var(--frame); font: 900 7px/1 var(--mono); letter-spacing: .09em; white-space: nowrap; }
.card-kind i { width: 12px; height: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff7d8; background: var(--frame); border: 1px solid var(--trim); border-radius: 50%; font: normal 6px/1 var(--display); }
.card-cost { position: absolute; right: 5px; top: 5px; z-index: 5; min-width: 29px; height: 27px; display: flex; align-items: center; justify-content: center; gap: 1px; padding: 0 4px; color: #fff8e8; background: color-mix(in srgb, var(--frame) 88%, #000); border: 2px solid var(--trim); border-radius: 50%; box-shadow: 0 2px 0 color-mix(in srgb, var(--frame) 70%, #000), 0 0 9px rgba(255, 217, 133, .2); }
.card-cost b { font: 900 10px/1 var(--mono); }
.card-cost small { margin-top: 3px; font: 800 5px/1 var(--body); opacity: .82; }
.card-art {
  position: relative; isolation: isolate; width: 100%; height: 66px; display: block; overflow: hidden;
  color: #fff; background:
    radial-gradient(circle at 73% 25%, color-mix(in srgb, var(--art-glow) 42%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 25% 74%, color-mix(in srgb, var(--art-glow) 24%, transparent), transparent 28%),
    linear-gradient(145deg, var(--art-a), var(--art-b));
  border: 1px solid color-mix(in srgb, var(--trim) 74%, #203047); border-radius: 9px 9px 3px 3px;
  box-shadow: inset 0 -13px 24px rgba(3, 11, 28, .22), 0 2px 0 rgba(255, 255, 255, .46);
}
.card-art::before { content: ""; position: absolute; inset: 4px; z-index: 6; border: 1px solid rgba(255, 240, 191, .26); border-radius: 6px 6px 2px 2px; pointer-events: none; }
.card-art::after { content: ""; position: absolute; right: 8px; top: 7px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; box-shadow: -5px 2px 0 -1px rgba(255, 238, 184, .72); opacity: .72; }
.card-art__stars { position: absolute; left: 17%; top: 24%; z-index: 1; width: 2px; height: 2px; background: #fff4ca; border-radius: 50%; box-shadow: 23px -7px 0 #fff4ca, 55px 8px 0 rgba(255, 244, 202, .75), 12px 31px 0 rgba(255, 244, 202, .68), 72px 30px 0 rgba(255, 244, 202, .82), 41px 17px 0 rgba(255, 244, 202, .48); filter: drop-shadow(0 0 3px var(--art-glow)); }
.card-art__rail { position: absolute; left: -8%; top: 44%; z-index: 2; width: 116%; height: 30px; border-top: 1.5px solid var(--rail); border-radius: 50%; transform: rotate(var(--rail-rotate)) scaleX(var(--rail-direction)); transform-origin: center; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--art-glow) 52%, transparent)); }
.card-art__rail::before,
.card-art__rail::after { content: ""; position: absolute; top: -4px; width: 7px; height: 7px; background: #fff1b3; border: 1px solid color-mix(in srgb, var(--art-glow) 72%, #fff); border-radius: 50%; box-shadow: 0 0 7px var(--art-glow); }
.card-art__rail::before { left: 16%; }
.card-art__rail::after { right: 15%; }
.card-art__sigil { position: absolute; left: var(--sigil-x); top: var(--sigil-y); z-index: 4; width: var(--sigil-size); height: var(--sigil-size); display: grid; place-items: center; color: #fff8d9; background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--art-glow) 55%, #fff), color-mix(in srgb, var(--frame) 82%, #000) 66%); border: 2px solid color-mix(in srgb, var(--trim) 82%, #fff); border-radius: var(--sigil-radius); clip-path: var(--sigil-clip); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 0 13px color-mix(in srgb, var(--art-glow) 50%, transparent); font: 900 20px/1 var(--display); text-shadow: 0 2px 0 rgba(0, 0, 0, .28); transform: translate(-50%, -50%) rotate(var(--sigil-rotate)); }
.card-art__spark { position: absolute; left: var(--spark-x); top: var(--spark-y); z-index: 3; width: var(--spark-w); height: 2px; background: linear-gradient(90deg, var(--rail), transparent); box-shadow: 0 0 7px var(--art-glow); transform: rotate(var(--spark-rotate)); transform-origin: left center; }
.card-art__spark::after { content: "✦"; position: absolute; right: -2px; top: -6px; color: #fff1ad; font: normal 10px/1 var(--display); text-shadow: 0 0 6px var(--art-glow); }
.game-card > strong { overflow: hidden; color: #152d3b; font: 900 13px/1.08 var(--display); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.game-card > p { margin: 0; overflow: hidden; color: #465d62; font-size: 8.5px; line-height: 1.36; }
.game-card > small { align-self: end; justify-self: start; max-width: calc(100% - 12px); overflow: hidden; padding: 3px 6px; color: #344f59; background: color-mix(in srgb, var(--accent) 13%, transparent); border-left: 2px solid var(--accent); font-size: 6.5px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.game-card > small.card-meaning::before { content: "现实｜"; color: color-mix(in srgb, var(--accent) 78%, #362e65); }
.game-card.behavior { --accent: #4f8ead; --frame: #173b5b; --trim: #d7bd7d; --art-a: #102f54; --art-b: #557ab0; --art-glow: #9edfff; --rail: rgba(211, 241, 255, .9); --rail-rotate: 1deg; }
.game-card.filter { --accent: #2c86a5; --frame: #123b59; --trim: #90dfe5; --art-a: #0b385a; --art-b: #287f9d; --art-glow: #7cf5eb; --rail: rgba(165, 255, 241, .94); --rail-rotate: -2deg; --spark-rotate: 87deg; --spark-w: 27px; }
.game-card.boundary { --accent: #268774; --frame: #143f49; --trim: #9ad9bd; --art-a: #0e3d4a; --art-b: #2c8b79; --art-glow: #9af7cf; --rail: rgba(185, 255, 225, .9); --rail-rotate: 0deg; --spark-rotate: 90deg; --spark-w: 24px; }
.game-card.action { --accent: #b77a20; --frame: #183657; --trim: #edbd5e; --art-a: #142d58; --art-b: #6c5a9d; --art-glow: #ffd878; --rail: rgba(255, 226, 144, .96); --rail-rotate: -12deg; --spark-rotate: -13deg; }
.game-card.pollution { --accent: var(--pollution); --frame: #260d24; --trim: #df6b9b; --sheet: #56132e; --sheet-shadow: #270b20; --art-a: #140817; --art-b: #7b1743; --art-glow: #ff5b96; --rail: rgba(255, 113, 161, .88); --rail-rotate: 14deg; --sigil-radius: 38% 62% 45% 55%; color: #ffe6ef; background: linear-gradient(145deg, rgba(255, 113, 161, .14), transparent 26%), linear-gradient(155deg, var(--sheet), var(--sheet-shadow)); border-color: var(--trim); }
.game-card.pollution::before { border-style: dashed; border-color: rgba(255, 121, 168, .38); }
.game-card.pollution::after { color: #ff7aa8; content: "✧"; }
.game-card.pollution .card-kind,
.game-card.pollution > strong,
.game-card.pollution > p { color: #ffe4ed; }
.game-card.pollution .card-kind i { color: #260918; background: #ff7aaa; border-color: #ffc0d4; }
.game-card.pollution > small { color: #ffd7e5; background: rgba(20, 0, 9, .36); border-color: #ff6f9f; }
.game-card.pollution .card-art { border-radius: 3px; clip-path: polygon(0 7px, 8px 0, 45% 3px, 53% 0, 100% 7px, 96% 84%, 100% 100%, 8px 97%, 0 100%); }
.game-card.pollution .card-art__rail { border-top-style: dashed; }
.game-card.feedback { --accent: #7967c2; --frame: #34275f; --trim: #c7afff; --sheet: #f7efff; --sheet-shadow: #d2c2ed; --art-a: #312564; --art-b: #8974cf; --art-glow: #dfcaff; --rail: rgba(239, 222, 255, .94); --rail-direction: -1; --rail-rotate: -10deg; --sigil-x: 66%; --spark-x: 43%; --spark-rotate: 171deg; }
.game-card.pollution.temptation { --frame: #392038; --trim: #f1c765; --sheet: #f6d892; --sheet-shadow: #a83f67; --art-a: #43203f; --art-b: #bb426c; --art-glow: #ffd36b; --rail: rgba(255, 221, 118, .96); color: #2b1b2c; background: linear-gradient(145deg, rgba(255, 246, 189, .58), transparent 27%), linear-gradient(155deg, var(--sheet), var(--sheet-shadow)); }
.game-card.pollution.temptation .card-kind,
.game-card.pollution.temptation > strong { color: #2d1b31; }
.game-card.pollution.temptation > p { color: #4b273b; }
.game-card.pollution.temptation > small { color: #4a2539; background: rgba(255, 244, 186, .42); border-color: #6f2448; }
.game-card.pollution.temptation .card-kind i { color: #fff3bd; background: #5c2446; border-color: #f1c765; }
.game-card.program { --accent: var(--energy); }

/* Each operation ticket gets a distinct miniature constellation. */
.game-card[data-card-id="question"] { --sigil-x: 34%; --sigil-y: 47%; --sigil-rotate: -9deg; --spark-x: 44%; --spark-y: 47%; --spark-w: 48px; --spark-rotate: -15deg; }
.game-card[data-card-id="source_check"] { --sigil-size: 41px; --sigil-radius: 50%; --spark-x: 50%; --spark-y: 20%; --spark-w: 42px; --spark-rotate: 90deg; }
.game-card[data-card-id="source_check"] .card-art__sigil { background: radial-gradient(circle, #0f2941 0 23%, #7cf5eb 25% 28%, #184a68 30% 53%, #b9fff2 55% 58%, #123b59 60%); }
.game-card[data-card-id="draft60"] { --sigil-x: 38%; --sigil-y: 55%; --sigil-size: 36px; --sigil-radius: 3px; --sigil-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --spark-x: 46%; --spark-y: 51%; --spark-w: 54px; --spark-rotate: -20deg; }
.game-card[data-card-id="single_task"] { --sigil-x: 43%; --sigil-size: 39px; --sigil-radius: 6px; --rail-rotate: 0deg; --spark-x: 55%; --spark-w: 38px; --spark-rotate: 0deg; }
.game-card[data-card-id="single_task"] .card-art__sigil { box-shadow: -15px 0 0 -9px rgba(255, 232, 160, .28), -27px 0 0 -9px rgba(255, 232, 160, .16), inset 0 0 0 2px rgba(255,255,255,.16), 0 0 13px rgba(255,216,120,.52); }
.game-card[data-card-id="pause"] { --sigil-x: 40%; --sigil-y: 52%; --rail-rotate: 0deg; --spark-x: 57%; --spark-y: 49%; --spark-w: 31px; --spark-rotate: 0deg; }
.game-card[data-card-id="pause"] .card-art__sigil { border-radius: 50% 15% 50% 50%; box-shadow: inset 8px -2px 0 rgba(6, 24, 49, .5), 0 0 14px rgba(158,223,255,.58); }
.game-card[data-card-id="close_tabs"] { --sigil-x: 66%; --sigil-size: 38px; --sigil-radius: 5px; --rail-rotate: 0deg; --spark-x: 45%; --spark-y: 18%; --spark-w: 46px; --spark-rotate: 90deg; }
.game-card[data-card-id="close_tabs"] .card-art__rail { box-shadow: 0 -8px 0 -7px var(--rail), 0 8px 0 -7px var(--rail); }
.game-card[data-card-id="cross_validate"] { --sigil-size: 40px; --rail-rotate: -16deg; --spark-x: 24%; --spark-y: 33%; --spark-w: 74px; --spark-rotate: 28deg; }
.game-card[data-card-id="narrow_circle"] { --sigil-size: 26px; --spark-x: 51%; --spark-y: 50%; --spark-w: 40px; --spark-rotate: 0deg; }
.game-card[data-card-id="narrow_circle"] .card-art__sigil { box-shadow: 0 0 0 7px rgba(124, 245, 235, .2), 0 0 0 13px rgba(124, 245, 235, .12), 0 0 17px #7cf5eb; }
.game-card[data-card-id="ship_rough"] { --sigil-x: 40%; --sigil-y: 57%; --sigil-size: 42px; --sigil-radius: 2px; --sigil-clip: polygon(0 18%, 100% 0, 76% 100%, 44% 72%, 12% 100%); --spark-x: 49%; --spark-y: 45%; --spark-w: 49px; --spark-rotate: -18deg; }
.game-card[data-card-id="public_test"] { --sigil-x: 35%; --sigil-radius: 5px; --spark-x: 48%; --spark-y: 50%; --spark-w: 53px; --spark-rotate: -9deg; }
.game-card[data-card-id="public_test"] .card-art__spark { box-shadow: 0 -7px 0 -1px rgba(255, 226, 144, .38), 0 7px 0 -1px rgba(255, 226, 144, .38), 0 0 7px var(--art-glow); }
.game-card[data-card-id="clear_notifications"] { --sigil-x: 70%; --sigil-size: 37px; --sigil-radius: 5px; --spark-x: 22%; --spark-y: 43%; --spark-w: 66px; --spark-rotate: 0deg; }
.game-card[data-card-id="clear_notifications"] .card-art__rail { border-top-width: 5px; border-radius: 0; opacity: .65; }
.game-card[data-card-id="write_anxiety"] { --sigil-x: 70%; --sigil-rotate: -18deg; --spark-x: 18%; --spark-y: 70%; --spark-w: 68px; --spark-rotate: -9deg; }
.game-card[data-card-id="write_anxiety"] .card-art__rail { border-top-style: dotted; border-top-width: 2px; }
.game-card[data-card-id="learn_one_more"] { --sigil-size: 44px; --sigil-rotate: -8deg; --spark-x: 50%; --spark-y: 49%; --spark-w: 45px; --spark-rotate: 24deg; }
.game-card[data-card-id="learn_one_more"] .card-art__rail { left: 14%; top: 9%; width: 72%; height: 52px; border: 2px solid var(--rail); border-radius: 50%; transform: rotate(-9deg); }
.game-card[data-card-id="algorithm_pull"] { --sigil-x: 72%; --sigil-size: 43px; --sigil-rotate: 16deg; --spark-x: 20%; --spark-y: 39%; --spark-w: 53px; --spark-rotate: 12deg; }
.game-card[data-card-id="algorithm_pull"] .card-art__rail { border-radius: 10% 90% 50% 50%; border-top-width: 2px; }
.game-card[data-card-id="comparison"] { --sigil-x: 52%; --sigil-size: 42px; --sigil-radius: 50% 50% 42% 58%; --rail-rotate: 0deg; --spark-x: 22%; --spark-y: 28%; --spark-w: 72px; --spark-rotate: 90deg; }
.game-card[data-card-id="comparison"] .card-art__sigil { box-shadow: -21px 4px 0 -8px rgba(255, 135, 174, .45), 21px -4px 0 -10px rgba(255, 135, 174, .3), 0 0 14px #ff5b96; }
.game-card[data-card-id="fake_progress"] { --sigil-size: 35px; --spark-w: 0px; }
.game-card[data-card-id="fake_progress"] .card-art__rail { left: 16%; top: 8%; width: 68%; height: 53px; border: 2px dashed var(--rail); border-radius: 50%; transform: rotate(12deg); }
.game-card[data-card-id="wait_ready"] { --sigil-x: 37%; --rail-rotate: 0deg; --spark-x: 63%; --spark-y: 16%; --spark-w: 49px; --spark-rotate: 90deg; }
.game-card[data-card-id="wait_ready"] .card-art__spark { width: 3px; background: #ff86ae; box-shadow: 8px 0 0 #ff86ae, 0 0 8px #ff5b96; }
.game-card[data-card-id="validation"] { --sigil-x: 68%; --sigil-size: 39px; --sigil-radius: 50% 50% 50% 12%; --spark-x: 56%; --spark-y: 52%; --spark-w: 51px; --spark-rotate: 166deg; }
.game-card[data-card-id="exposed_problem"] { --sigil-x: 65%; --sigil-size: 40px; --sigil-radius: 4px; --sigil-clip: polygon(0 0, 47% 8%, 55% 0, 100% 9%, 91% 48%, 100% 62%, 80% 100%, 48% 89%, 21% 100%, 8% 61%); --spark-x: 57%; --spark-y: 48%; --spark-w: 46px; --spark-rotate: 172deg; }
.game-card[data-card-id="rejection"] { --sigil-x: 64%; --sigil-size: 41px; --sigil-radius: 50% 12% 12% 50%; --rail-direction: -1; --spark-x: 54%; --spark-y: 51%; --spark-w: 50px; --spark-rotate: 170deg; }
.game-card[data-card-id="silence"] { --sigil-x: 56%; --sigil-size: 28px; --rail-rotate: 0deg; --spark-w: 0px; }
.game-card[data-card-id="silence"] .card-art__stars { opacity: .18; }
.game-card[data-card-id="silence"] .card-art__rail { opacity: .28; }
.command-card.clarity-window { border-color: #87f0d0; box-shadow: 0 0 0 2px rgba(135, 240, 208, .18), 0 0 24px rgba(71, 209, 170, .28); }
.command-card.hot-window { border-color: #ff9459; box-shadow: inset 0 0 0 2px rgba(255, 148, 89, .35), 0 0 24px rgba(255, 98, 82, .58); }

/* Real-shot settlement ------------------------------------------------- */

.shot-settlement-layer {
  position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; padding: 18px;
  overflow: hidden; pointer-events: auto; cursor: wait;
  background:
    radial-gradient(circle at 50% 48%, rgba(70, 52, 124, .24), transparent 35%),
    rgba(2, 7, 13, .82);
  backdrop-filter: blur(6px);
  animation: settlementLayerIn .22s .24s both;
}
.shot-settlement-panel {
  width: min(760px, 100%); max-height: calc(100dvh - 36px);
  display: grid; grid-template-columns: minmax(140px, .8fr) 190px minmax(220px, 1.2fr);
  align-items: center; justify-items: center; gap: 22px; padding: 22px;
  color: var(--paper-2); background:
    linear-gradient(135deg, rgba(14, 37, 54, .97), rgba(25, 20, 52, .98));
  border: 1px solid rgba(199, 175, 255, .58);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 0 48px rgba(180, 156, 255, .06);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
.settlement-impact { display: grid; justify-items: center; gap: 8px; text-align: center; animation: settlementImpact .5s .05s both; }
.settlement-impact small,
.settlement-result > small { color: #a7bac2; font: 800 7px/1 var(--mono); letter-spacing: .13em; }
.settlement-impact strong { color: var(--energy); font: 900 clamp(24px, 4vw, 42px)/1 var(--mono); text-shadow: 0 0 22px rgba(255, 185, 87, .45); }
.settlement-impact span { padding: 4px 7px; color: #ffe6a8; background: rgba(255, 185, 87, .1); border: 1px solid rgba(255, 185, 87, .32); font-size: 8px; font-weight: 900; }
.settlement-flip { position: relative; width: 170px; height: 226px; perspective: 900px; }
.settlement-card-back,
.settlement-card-front { position: absolute; inset: 0; backface-visibility: hidden; transform-style: preserve-3d; }
.settlement-card-back {
  display: grid; place-items: center; align-content: center; gap: 9px;
  color: #f4ebff; background:
    radial-gradient(circle at 50% 44%, rgba(230, 214, 255, .28), transparent 18%),
    repeating-radial-gradient(circle at 50% 45%, transparent 0 17px, rgba(212, 190, 255, .18) 18px 19px),
    linear-gradient(145deg, #563e91, #17132f);
  border: 2px solid #ceb6ff; box-shadow: inset 0 0 0 5px #2e2257, 0 0 32px rgba(180, 156, 255, .55);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  animation: settlementBackFlip .7s .48s cubic-bezier(.2, .75, .2, 1) both;
}
.settlement-card-back i { color: #fff4c2; font: normal 30px/1 var(--display); text-shadow: 0 0 15px #fff1af; }
.settlement-card-back b { font: 900 24px/1 var(--display); }
.settlement-card-back small { color: #c7b9e5; font-size: 7px; }
.settlement-card-front { transform: rotateY(180deg); animation: settlementFrontFlip .7s .48s cubic-bezier(.2, .75, .2, 1) both; }
.settlement-card-front .game-card { width: 170px; min-width: 170px; height: 226px; transform: none; }
.settlement-result { min-width: 0; display: grid; gap: 8px; justify-self: stretch; opacity: 0; animation: settlementResultIn .35s 1.12s both; }
.settlement-result > strong { color: #f0e7ff; font: 900 clamp(16px, 2vw, 23px)/1.18 var(--display); }
.settlement-result > p { margin: 0; padding: 6px 8px; color: #d9caff; background: rgba(180, 156, 255, .1); border-left: 2px solid var(--feedback); font-size: 9px; line-height: 1.35; }
.settlement-pollution { display: flex; flex-wrap: wrap; gap: 5px; opacity: 0; animation: settlementResultIn .35s 1.5s both; }
.settlement-pollution span { padding: 5px 7px; color: #ffe1eb; background: rgba(115, 28, 62, .72); border: 1px solid var(--pollution); font-size: 8px; font-weight: 900; }
.settlement-pollution .clean-result { color: #c9f6e8; background: rgba(47, 148, 118, .16); border-color: #4ebc9a; }

/* Entry and modal layers ------------------------------------------------ */

.start-layer,
.modal-layer { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.start-layer { align-items: end; padding-bottom: clamp(185px, 25vh, 235px); background: radial-gradient(circle at 50% 43%, rgba(3, 9, 15, .18), rgba(3, 8, 14, .54) 72%); backdrop-filter: blur(1.5px); }
.mission-card {
  position: relative; width: min(480px, calc(100% - 18px)); padding: 17px 19px;
  color: var(--paper-2); background: rgba(5, 15, 24, .95); border: 1px solid rgba(255, 185, 87, .7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 4px 0 var(--energy);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mission-card > small,
.reward-panel > small,
.report-panel > small,
.help-panel > small { color: var(--energy); font: 800 8px var(--mono); letter-spacing: .12em; }
.mission-card h2 { margin: 5px 0 3px; font: 900 clamp(24px, 3vw, 34px)/1.08 var(--display); }
.mission-card p { margin: 0 0 12px; color: #b8c8c9; font-size: 11px; }
.start-button {
  min-height: 43px; padding: 9px 19px; color: #1b260e; background: var(--energy); border: 1px solid #ffe0a4;
  box-shadow: 0 4px 0 #7c5014; font-weight: 900; cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.start-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.startup-error { display: block; margin-top: 7px; color: #ff9fbd; font-size: 9px; }

.modal-layer { z-index: 30; background: rgba(2, 7, 12, .82); backdrop-filter: blur(8px); }
.reward-panel,
.report-panel,
.help-panel {
  position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); padding: 24px;
  overflow: auto; color: var(--paper-2); background: #091a27; border: 1px solid rgba(140, 206, 216, .4);
  box-shadow: var(--shadow); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.reward-panel h2,
.report-panel h2,
.help-panel h2 { margin: 6px 0 5px; font: 900 clamp(23px, 3.5vw, 35px)/1.08 var(--display); }
.reward-panel > p,
.report-panel > p,
.help-panel > p { margin: 0 0 15px; color: #afc2c6; font-size: 11px; line-height: 1.5; }
.reward-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-items: center; }
#reward-choices { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); max-height: 52vh; overflow: auto; }
.reward-choices .game-card { width: min(170px, 100%); min-width: 0; height: 220px; }
.reward-actions { position: sticky; bottom: -1px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 15px; padding-top: 8px; background: #091a27; }
.secondary-action,
.text-action { min-height: 39px; padding: 8px 14px; cursor: pointer; }
.secondary-action { color: #f8e8ba; background: #173843; border: 1px solid #4c7f89; }
.text-action { color: #a8bdc1; background: transparent; border: 1px solid rgba(139, 187, 195, .24); }
.report-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 15px 0; }
.report-stats div { padding: 10px; background: rgba(255, 255, 255, .045); border-top: 2px solid var(--attention); }
.report-stats small { display: block; color: #8da8ae; font-size: 7px; }
.report-stats b { color: var(--paper); font: 900 21px var(--mono); }
.help-panel { width: min(590px, 100%); }
.help-panel b { color: var(--energy); }
.cognition-key { display: grid; gap: 6px; margin: 13px 0 12px; }
.cognition-key > div {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 9px;
  padding: 7px 9px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(140, 206, 216, .19);
}
.cognition-key dt { color: var(--energy); font: 900 9px/1.25 var(--display); }
.cognition-key dd { margin: 0; color: #afc2c6; font-size: 9px; line-height: 1.35; }
.help-panel > p.cognition-flow { margin-bottom: 0; padding-top: 10px; border-top: 1px solid rgba(140, 206, 216, .22); }
.close-button { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; color: #b9c9cc; background: transparent; border: 1px solid var(--line); cursor: pointer; }

.toast {
  position: absolute; left: 50%; bottom: 286px; z-index: 40; max-width: min(440px, calc(100% - 24px));
  padding: 8px 14px; color: #162d31; background: #a7f2d8; border: 1px solid #2f9476;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .3); font-size: 10px; font-weight: 800;
  opacity: 0; transform: translate(-50%, 9px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { color: #ffe5ee; background: #731c3e; border-color: var(--pollution); }

.fx-layer { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.flying-card { position: fixed; z-index: 1; width: var(--w, 120px); height: var(--h, 160px); left: var(--x, 0); top: var(--y, 0); display: grid; place-items: center; padding: 8px; overflow: hidden; color: #18243a; background: var(--paper); border: 2px solid var(--pollution); box-shadow: 0 0 24px rgba(255, 63, 130, .55); clip-path: polygon(8px 0, 100% 0, 100% 85%, 82% 100%, 0 100%, 0 8px); font: 900 11px/1.25 var(--display); text-align: center; }
.flying-card.pollution-flight { animation: pollutionToPile .72s cubic-bezier(.2, .7, .2, 1) both; }
.flying-card.feedback-flight { border-color: var(--feedback); box-shadow: 0 0 28px rgba(180, 156, 255, .7); animation: feedbackReturn .84s cubic-bezier(.2, .65, .2, 1) both; }
.flying-card.program-flight { border-color: var(--energy); animation: programMigrate .7s cubic-bezier(.2, .65, .2, 1) both; }
.flying-card.play-flight { border-color: var(--attention); box-shadow: 0 0 24px rgba(89, 216, 255, .48); animation: cardResolve .38s cubic-bezier(.2, .7, .2, 1) both; }
.floating-number { position: fixed; z-index: 3; left: var(--x); top: var(--y); color: var(--pollution); font: 900 22px var(--mono); text-shadow: 0 2px 9px #000; animation: floatNumber .8s both; }
.floating-number.good { color: var(--energy); }

/* Moonlight postal art pass --------------------------------------------- */

:root {
  --void: #081333;
  --void-2: #101b4d;
  --deck: #173d85;
  --paper: #f8e8c4;
  --paper-2: #fff4d8;
  --ink: #292748;
  --attention: #78d9ef;
  --energy: #f1c66f;
  --time: #78d8c2;
  --pollution: #d94f86;
  --feedback: #b7a4f4;
  --muted: #b8c6dc;
  --line: rgba(255, 232, 174, .28);
  --hard-line: rgba(255, 236, 184, .6);
  --display: "Yuanti SC", "STYuanti-SC-Bold", "STSongti-SC-Black", "Songti SC", serif;
  --shadow: 0 18px 46px rgba(9, 14, 49, .38);
}

.game-shell {
  border: 1px solid rgba(241, 198, 111, .26);
  background-color: #0b1843;
  background-image:
    linear-gradient(180deg, rgba(5, 15, 52, .2), rgba(11, 15, 55, .5) 42%, rgba(32, 27, 70, .72)),
    linear-gradient(90deg, rgba(8, 19, 55, .55), transparent 43%, rgba(16, 16, 58, .18)),
    url("assets/art/moon-post-route.jpg");
  background-position: center, center, 68% center;
  background-size: cover, cover, cover;
  box-shadow: inset 0 0 90px rgba(4, 8, 35, .38);
}

.game-shell::before {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 209, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 8%, rgba(255, 247, 209, .6) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 14%, rgba(255, 247, 209, .75) 0 1px, transparent 2px),
    linear-gradient(180deg, transparent 0 55%, rgba(17, 20, 69, .16) 72%, rgba(11, 14, 51, .45));
  background-size: 173px 151px, 221px 187px, 269px 199px, auto;
  mask-image: none;
}

.game-shell::after {
  left: 9%;
  top: 34%;
  bottom: auto;
  width: 70%;
  height: 24%;
  transform: none;
  background: radial-gradient(ellipse at center, rgba(255, 226, 144, .16), transparent 69%);
  filter: blur(12px);
}

.world-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hud,
.opponent-zone,
.battlefield,
.player-zone { z-index: 1; }

.world-star {
  position: absolute;
  color: #fff2bc;
  font-style: normal;
  text-shadow: 0 0 9px #ffd778, 0 0 22px rgba(255, 220, 129, .7);
  animation: worldStarTwinkle 3.4s ease-in-out infinite;
}
.world-star-a { left: 8%; top: 26%; font-size: 13px; }
.world-star-b { left: 38%; top: 18%; font-size: 9px; animation-delay: -1.3s; }
.world-star-c { right: 12%; top: 42%; font-size: 12px; animation-delay: -2.1s; }

.winged-letter {
  position: absolute;
  left: 10%;
  top: 40%;
  width: 38px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #76521a;
  background: linear-gradient(145deg, #fff8de, #f3cf83);
  border: 1px solid #fff1ba;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(255, 218, 119, .84);
  transform: rotate(-8deg);
  animation: postalLetterArc 9s ease-in-out infinite;
}
.winged-letter::before,
.winged-letter::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 22px;
  height: 16px;
  background: linear-gradient(145deg, rgba(255, 246, 224, .95), rgba(242, 184, 204, .8));
  filter: drop-shadow(0 0 5px rgba(255, 230, 181, .7));
}
.winged-letter::before { right: 92%; clip-path: polygon(100% 25%, 70% 0, 72% 28%, 27% 9%, 45% 42%, 0 41%, 42% 67%, 12% 100%, 77% 77%, 100% 100%); }
.winged-letter::after { left: 92%; clip-path: polygon(0 25%, 30% 0, 28% 28%, 73% 9%, 55% 42%, 100% 41%, 58% 67%, 88% 100%, 23% 77%, 0 100%); }
.winged-letter i { font: normal 9px/1 var(--display); }

.cloud-veil {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 21%;
  height: 13%;
  opacity: .32;
  background:
    radial-gradient(ellipse at 8% 100%, #f5d9ee 0 22%, transparent 23%),
    radial-gradient(ellipse at 28% 100%, #d7d8f5 0 28%, transparent 29%),
    radial-gradient(ellipse at 55% 100%, #f0d6ec 0 24%, transparent 25%),
    radial-gradient(ellipse at 78% 100%, #cfd9f7 0 27%, transparent 28%),
    radial-gradient(ellipse at 96% 100%, #f1d7eb 0 24%, transparent 25%);
  filter: blur(5px);
  animation: cloudVeilFloat 8s ease-in-out infinite;
}

.hud {
  border: 1px solid rgba(241, 198, 111, .5);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18, 43, 101, .88), rgba(35, 28, 91, .82));
  box-shadow: inset 0 1px 0 rgba(255, 245, 204, .2), 0 10px 30px rgba(7, 13, 52, .22);
  backdrop-filter: blur(12px) saturate(1.18);
}

.run-glyph {
  position: relative;
  width: 36px;
  height: 27px;
  overflow: visible;
  color: #72511d;
  background: linear-gradient(145deg, #fff7d9, #edc66e);
  border: 2px solid #f5d98f;
  border-radius: 5px;
  clip-path: none;
  filter: drop-shadow(0 0 9px rgba(255, 214, 113, .42));
}
.run-glyph::before,
.run-glyph::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 13px;
  height: 16px;
  background: rgba(255, 241, 221, .88);
}
.run-glyph::before { right: 95%; clip-path: polygon(100% 20%, 42% 0, 56% 34%, 0 27%, 48% 58%, 22% 100%, 100% 70%); }
.run-glyph::after { left: 95%; clip-path: polygon(0 20%, 58% 0, 44% 34%, 100% 27%, 52% 58%, 78% 100%, 0 70%); }
.run-mark small { color: #c8cfee; }
.run-mark strong { color: #fff1ca; text-shadow: 0 1px 8px rgba(255, 221, 140, .25); }

.hud-resources section {
  border-color: rgba(255, 232, 174, .32);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(95, 94, 176, .14));
  clip-path: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hud-label { color: #d4d9f1; }
.resource-dot { border-radius: 50%; box-shadow: 0 0 8px currentColor; transform: none; }
.attention-pips i { border-radius: 5px; transform: none; }
.goal-track { border-color: rgba(255, 223, 146, .38); border-radius: 999px; transform: none; }
.goal-track i { background: linear-gradient(90deg, #f5bedd, var(--energy)); }

.icon-button {
  border-color: rgba(255, 232, 174, .34);
  border-radius: 12px;
  color: #e2ddf5;
  background: rgba(21, 35, 88, .58);
}
.icon-button:hover { color: #fff2c7; border-color: #e8c772; background: rgba(54, 56, 124, .72); }
.icon-button[aria-pressed="true"] { color: #3a2a12; border-color: #ffe3a0; background: linear-gradient(145deg, #ffe6a8, #dca951); }
.opponent-zone {
  border: 1px solid rgba(239, 205, 126, .58);
  border-radius: 22px;
  background:
    radial-gradient(circle at 7% 50%, rgba(121, 216, 239, .18), transparent 14%),
    linear-gradient(110deg, rgba(16, 40, 99, .9), rgba(45, 34, 103, .84) 58%, rgba(83, 43, 94, .8));
  box-shadow: inset 0 1px 0 rgba(255, 244, 211, .2), 0 14px 38px rgba(5, 10, 42, .28);
  clip-path: none;
  backdrop-filter: blur(10px) saturate(1.16);
}
.opponent-zone::before {
  left: 7%;
  right: 7%;
  top: 0;
  bottom: auto;
  width: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f2cc77, #f4bcd8, transparent);
  box-shadow: 0 0 16px rgba(244, 200, 116, .44);
}
.opponent-zone::after {
  content: "✦";
  position: absolute;
  right: 18px;
  top: 10px;
  color: rgba(255, 226, 150, .72);
  font: normal 12px/1 var(--display);
  text-shadow: 0 0 8px rgba(255, 221, 142, .7);
}

.algorithm-aperture {
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle, rgba(120, 220, 239, .1), transparent 66%);
  filter: drop-shadow(0 0 14px rgba(121, 216, 239, .3));
}
.orbit { border-color: rgba(255, 226, 153, .58); }
.orbit-b { border-color: rgba(239, 178, 208, .72); }
.algorithm-eye {
  background: radial-gradient(circle at 42% 38%, #fff8df 0 5%, #f09abb 8% 24%, #783c85 28% 56%, #171336 61%);
  border: 2px solid #f0ce7c;
  box-shadow: 0 0 22px rgba(239, 169, 201, .54), 0 0 0 8px rgba(255, 221, 139, .07);
}
.opponent-status {
  color: #fff2ce;
  background: linear-gradient(145deg, #8a3d6d, #4e245d);
  border-color: #e8a9c7;
  border-radius: 999px;
}
.opponent-copy small { color: #c5cae6; }
.opponent-copy h1 { color: #fff0c7; }
.opponent-copy p { color: #d2d2e8; }

.intent-card {
  color: #2b294c;
  border: 2px solid #e9c46f;
  border-radius: 17px;
  background:
    radial-gradient(circle at 92% 16%, rgba(238, 173, 204, .4) 0 6px, transparent 7px),
    linear-gradient(145deg, rgba(255, 249, 225, .98), rgba(238, 217, 194, .97));
  box-shadow: inset 0 0 0 3px rgba(91, 69, 126, .12), 0 9px 24px rgba(12, 18, 54, .24);
  clip-path: none;
}
.intent-card > header {
  color: #fff3d0;
  background: linear-gradient(90deg, #254b8c, #5c4b9d);
  border-bottom-color: rgba(235, 199, 112, .6);
}
.intent-label { color: #ffd8e8; }
.intent-main strong { color: #392b58; }
.intent-main p { color: #625b79; }
.intent-glyph {
  color: #854c80;
  background: #f1b7cf;
  border: 2px solid #a8618e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(240, 184, 207, .24);
}
.encounter-dilemma { border-top-color: rgba(121, 91, 151, .24); }
.encounter-dilemma > span {
  color: #fff4d0;
  background: #314e8f;
  border-color: #7997cf;
  border-radius: 999px;
}
.dilemma-rule { color: #5d426a; }
.intent-effects { background: rgba(64, 55, 105, .09); }
.intent-effects span {
  color: #4d5374;
  background: rgba(255, 255, 255, .52);
  border-color: rgba(76, 74, 121, .22);
  border-radius: 999px;
}
.intent-effects .bad { color: #87355c; background: rgba(243, 188, 211, .42); border-color: rgba(181, 78, 124, .34); }

.pull-meter > span { color: #d4d4e8; }
.pull-meter b { color: #ffc1d8; text-shadow: 0 0 10px rgba(235, 118, 167, .35); }
.pull-track { border-color: rgba(255, 227, 157, .45); border-radius: 999px; transform: none; }
.pull-track i { background: linear-gradient(90deg, #816fd0, #e4578a); }

.battlefield {
  border: 1px solid rgba(245, 210, 132, .62);
  border-radius: 24px;
  color: #292748;
  background:
    radial-gradient(circle at 15% 16%, rgba(255, 248, 219, .64) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 24%, rgba(255, 248, 219, .52) 0 1px, transparent 2px),
    linear-gradient(160deg, rgba(237, 229, 255, .9), rgba(166, 184, 228, .84) 55%, rgba(228, 192, 220, .8));
  background-size: 121px 109px, 163px 143px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 38px rgba(8, 14, 49, .28);
  clip-path: none;
  backdrop-filter: blur(9px) saturate(1.08);
}

.feed-beam {
  left: 12%;
  right: 11%;
  top: 48%;
  bottom: auto;
  width: auto;
  height: 38%;
  transform: none;
  opacity: .78;
}
.feed-beam::before,
.feed-beam::after {
  top: 0;
  bottom: auto;
  width: 52%;
  height: 65%;
  background: none;
  border-top: 2px solid rgba(242, 195, 92, .7);
  border-radius: 50%;
  box-shadow: 0 -4px 13px rgba(255, 215, 113, .32);
}
.feed-beam::before { left: 0; transform: rotate(-4deg); }
.feed-beam::after { right: 0; transform: rotate(4deg); }
.feed-beam i {
  left: 4%;
  top: 0;
  width: 9px;
  height: 9px;
  background: #ffe69a;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(255, 211, 101, .86);
  animation: postalSignal 3s ease-in-out infinite;
}

.program-rack {
  border: 2px solid #d6aa55;
  border-radius: 16px;
  color: #fff0cd;
  background: linear-gradient(155deg, rgba(63, 43, 80, .93), rgba(35, 47, 99, .94));
  box-shadow: inset 0 0 0 3px rgba(255, 229, 165, .12), 0 10px 22px rgba(20, 15, 50, .22);
}
.program-rack > header { border-bottom-color: rgba(238, 198, 108, .32); }
.program-rack > header small { color: #d4c4dd; }
.program-slot { border-radius: 10px; border-color: rgba(246, 207, 119, .34); }
.program-slot.filled { color: #4a361b; background: linear-gradient(145deg, #fff1c8, #e5b96c); }

.lane-heading small { color: #625f8b; }
.lane-heading strong { color: #2b315f; }
.lane-heading p {
  color: #704b6c;
  background: rgba(255, 245, 223, .72);
  border: 1px solid rgba(188, 131, 167, .28);
  border-radius: 999px;
}
.input-lane { align-items: stretch; }
.lane-stage {
  position: relative;
  border: 1px solid rgba(204, 163, 93, .66);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 248, 225, .9), rgba(211, 218, 249, .88));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3), 0 8px 20px rgba(37, 36, 91, .14);
}
.lane-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -5px;
  height: 8px;
  border-radius: 50%;
  background: rgba(70, 61, 120, .18);
  filter: blur(4px);
}
.lane-stage.danger {
  border-color: rgba(201, 91, 139, .68);
  background: linear-gradient(160deg, rgba(255, 240, 220, .92), rgba(239, 182, 209, .86));
}
.lane-stage > header > b {
  color: #fff2c8;
  background: linear-gradient(145deg, #31599d, #6a5aad);
  border-color: #efca78;
  border-radius: 50%;
}
.lane-stage > header strong { color: #35355f; }
.lane-stage > header small { color: #7b7390; }
.lane-arrow { color: #d3973b; text-shadow: 0 0 9px rgba(255, 210, 104, .65); }
.empty-slot { color: #7f7896; border-color: rgba(98, 83, 137, .22); border-radius: 12px; }

.input-card {
  border: 1px solid #c79d58;
  border-radius: 13px;
  color: #2e3158;
  background:
    linear-gradient(35deg, transparent 49%, rgba(198, 152, 90, .18) 50% 51%, transparent 52%),
    linear-gradient(145deg, rgba(255, 252, 236, .98), rgba(237, 220, 204, .96));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .32), 0 7px 15px rgba(45, 39, 84, .16);
  clip-path: none;
}
.input-card::before {
  color: #fff2c9;
  background: #4867a4;
  border-color: #7790c3;
  border-radius: 999px;
}
.input-card strong { color: #333258; }
.input-card p { color: #655e78; }
.input-card footer span { color: #62536b; background: rgba(234, 181, 205, .28); border-radius: 999px; }
.input-card.targetable { border-color: #e5ad47; box-shadow: 0 0 0 3px rgba(255, 220, 129, .72), 0 12px 22px rgba(74, 51, 20, .2); }

.command-card {
  color: #fff1ce;
  border: 2px solid #e9bd5b;
  border-radius: 18px;
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 231, 160, .22), transparent 22%),
    linear-gradient(155deg, #254f91, #182a66 58%, #34245d);
  box-shadow: inset 0 0 0 3px rgba(255, 238, 185, .13), 0 9px 21px rgba(21, 21, 69, .26);
  clip-path: none;
}
.command-cost { color: #3f2e16; background: #f8d67f; border-color: #fff1bd; }
.feedback-promise { color: #fff2d0; background: linear-gradient(145deg, #9e75d1, #5c448f); border-color: #dbc6ff; }
.command-art { background: radial-gradient(circle at 50% 50%, #6f86cd, #172a63 68%); border-color: #f0c96c; }
.command-card > small { color: #d7d7ed; }
.command-card > b { color: #3f2a11; background: linear-gradient(145deg, #ffe7a5, #d9a64e); border-radius: 999px; }
.command-card:disabled { filter: saturate(.48) brightness(.72); opacity: .72; }
.command-card.clarity-window { border-color: #9df5d8; }
.command-card.hot-window { border-color: #ff9c78; }

.pile {
  color: #3b345b;
  background: rgba(255, 244, 218, .83);
  border-color: rgba(167, 119, 74, .42);
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(38, 27, 70, .12);
}

.player-zone {
  border: 1px solid rgba(244, 209, 129, .7);
  border-radius: 23px;
  color: #292748;
  background:
    radial-gradient(circle at 15% 0, rgba(255, 255, 255, .72), transparent 26%),
    linear-gradient(165deg, rgba(255, 246, 222, .96), rgba(224, 213, 238, .94) 58%, rgba(200, 190, 228, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 16px 34px rgba(10, 15, 52, .28);
  clip-path: none;
}
.player-zone::before {
  left: 7%;
  right: 7%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e9bd5d, #efb5d2, transparent);
  opacity: .92;
}
.hand-bar small { color: #786b92; }
.hand-bar h2 { color: #2f356a; }
.hand-bar > p { color: #6b5a77; }
.end-turn-button {
  color: #fff1cc;
  border: 1px solid #d8aa52;
  border-radius: 12px;
  background: linear-gradient(145deg, #315a9a, #2d2e72);
  box-shadow: 0 4px 0 #18244e, inset 0 1px rgba(255, 255, 255, .15);
  clip-path: none;
}
.end-turn-button small { color: #d6d4e9; }

.game-card {
  --frame: #173d7d;
  --trim: #e8bd62;
  --sheet: #fff2cd;
  --sheet-shadow: #e8d4ab;
  --art-focus: 68% 48%;
  border: 2px solid var(--trim);
  border-radius: 17px;
  background:
    radial-gradient(circle at 14% 7%, rgba(255, 255, 255, .76), transparent 22%),
    linear-gradient(165deg, var(--sheet), var(--sheet-shadow));
  box-shadow: inset 0 0 0 4px var(--frame), inset 0 0 0 5px rgba(255, 255, 255, .26), 0 10px 19px rgba(22, 20, 64, .28);
  clip-path: none;
}
.game-card::before {
  border-color: color-mix(in srgb, var(--trim) 66%, transparent);
  border-radius: 11px;
  clip-path: none;
}
.game-card::after { color: var(--trim); text-shadow: 0 0 6px rgba(255, 214, 113, .5); }
.game-card:hover:not(:disabled) {
  box-shadow: inset 0 0 0 4px var(--frame), inset 0 0 0 5px rgba(255, 255, 255, .38), 0 20px 28px rgba(20, 19, 64, .4), 0 0 18px rgba(255, 217, 126, .24);
}
.card-kind { color: var(--frame); }
.card-kind i { background: var(--frame); border-color: var(--trim); }
.card-cost {
  color: #392812;
  background: linear-gradient(145deg, #ffe8a8, #d9a850);
  border-color: #fff3c4;
  box-shadow: 0 2px 0 #895f25, 0 0 10px rgba(255, 216, 123, .28);
}
.card-art {
  background-image:
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--art-glow) 45%, transparent) 0 3px, transparent 4px),
    linear-gradient(145deg, color-mix(in srgb, var(--art-a) 62%, transparent), color-mix(in srgb, var(--art-b) 48%, transparent)),
    url("assets/art/moon-post-route.jpg");
  background-size: auto, auto, 335%;
  background-position: center, center, var(--art-focus);
  background-repeat: no-repeat;
  background-blend-mode: screen, color, normal;
  border-color: color-mix(in srgb, var(--trim) 82%, #413361);
  border-radius: 11px 11px 6px 6px;
  box-shadow: inset 0 -18px 27px rgba(17, 18, 65, .3), 0 2px 0 rgba(255, 255, 255, .54);
}
.card-art::before { border-color: rgba(255, 237, 185, .38); border-radius: 8px 8px 4px 4px; }
.card-art::after { box-shadow: -5px 2px 0 -1px rgba(255, 235, 176, .88); }
.card-art__sigil {
  background: radial-gradient(circle at 35% 27%, color-mix(in srgb, var(--art-glow) 62%, #fff), color-mix(in srgb, var(--frame) 86%, #11102e) 67%);
  border-color: color-mix(in srgb, var(--trim) 88%, #fff);
}
.game-card > strong { color: #2e3157; }
.game-card > p { color: #5d5870; }
.game-card > small { color: #564a62; border-color: var(--accent); border-radius: 0 999px 999px 0; }

.game-card.behavior { --frame: #214c8b; --trim: #dfc27e; --art-focus: 72% 38%; }
.game-card.filter { --frame: #1d5c88; --trim: #8edbe6; --sheet: #eef7e7; --sheet-shadow: #cfe3da; --art-focus: 24% 27%; }
.game-card.boundary { --frame: #1e6267; --trim: #9bd8b9; --sheet: #edf3dc; --sheet-shadow: #cfdfc7; --art-focus: 91% 46%; }
.game-card.action { --frame: #243f80; --trim: #edbd5e; --sheet: #fff0c7; --sheet-shadow: #e8c99d; --art-focus: 53% 72%; }
.game-card.feedback { --frame: #53448c; --trim: #cab5ff; --sheet: #f5edff; --sheet-shadow: #d4c7ee; --art-focus: 62% 20%; }
.game-card.pollution {
  --frame: #3d183f;
  --trim: #dc6b9b;
  --sheet: #632143;
  --sheet-shadow: #2f1738;
  --art-focus: 59% 17%;
  border-radius: 14px;
}
.game-card.pollution .card-art {
  background-blend-mode: screen, multiply, luminosity;
  border-radius: 8px;
}
.game-card.pollution.temptation {
  --frame: #5e2a58;
  --trim: #f0c363;
  --sheet: #f5d99c;
  --sheet-shadow: #c96b91;
  --art-focus: 76% 51%;
}

.game-card[data-card-id="question"] { --art-focus: 56% 55%; }
.game-card[data-card-id="source_check"] { --art-focus: 13% 20%; }
.game-card[data-card-id="draft60"] { --art-focus: 48% 76%; }
.game-card[data-card-id="single_task"] { --art-focus: 82% 69%; }
.game-card[data-card-id="pause"] { --art-focus: 62% 17%; }
.game-card[data-card-id="close_tabs"] { --art-focus: 94% 42%; }
.game-card[data-card-id="cross_validate"] { --art-focus: 28% 54%; }
.game-card[data-card-id="narrow_circle"] { --art-focus: 47% 20%; }
.game-card[data-card-id="ship_rough"] { --art-focus: 57% 78%; }
.game-card[data-card-id="public_test"] { --art-focus: 86% 55%; }
.game-card[data-card-id="clear_notifications"] { --art-focus: 92% 30%; }
.game-card[data-card-id="write_anxiety"] { --art-focus: 75% 45%; }
.game-card[data-card-id="learn_one_more"] { --art-focus: 65% 18%; }
.game-card[data-card-id="algorithm_pull"] { --art-focus: 57% 13%; }
.game-card[data-card-id="comparison"] { --art-focus: 73% 24%; }
.game-card[data-card-id="fake_progress"] { --art-focus: 31% 23%; }
.game-card[data-card-id="wait_ready"] { --art-focus: 94% 53%; }
.game-card[data-card-id="validation"] { --art-focus: 49% 50%; }
.game-card[data-card-id="exposed_problem"] { --art-focus: 64% 45%; }
.game-card[data-card-id="rejection"] { --art-focus: 79% 36%; }
.game-card[data-card-id="silence"] { --art-focus: 19% 12%; }

.start-layer {
  background: linear-gradient(90deg, rgba(6, 14, 49, .12), rgba(7, 11, 42, .35) 58%, rgba(11, 10, 39, .22));
  backdrop-filter: none;
}
.mission-card {
  width: min(590px, calc(100% - 18px));
  min-height: 138px;
  padding: 20px 178px 19px 23px;
  color: #2d2d58;
  border: 2px solid #e8bd63;
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 7%, rgba(255, 255, 255, .88), transparent 24%),
    linear-gradient(145deg, rgba(255, 248, 222, .97), rgba(226, 211, 235, .96));
  box-shadow: inset 0 0 0 4px rgba(60, 65, 128, .13), 0 24px 65px rgba(8, 10, 40, .46);
  clip-path: none;
}
.mission-card > small { color: #7a5180; }
.mission-card h2 { color: #2e356d; }
.mission-card p { color: #665d76; }
.mission-cameo {
  position: absolute;
  right: 13px;
  top: -29px;
  width: 150px;
  height: 157px;
  overflow: hidden;
  border: 3px solid #f0c86f;
  border-radius: 48% 48% 18px 18px;
  background-image:
    linear-gradient(180deg, transparent 54%, rgba(20, 24, 70, .78)),
    url("assets/art/moon-post-route.jpg");
  background-size: cover, 285%;
  background-position: center, 88% 47%;
  box-shadow: 0 0 0 5px rgba(255, 242, 195, .24), 0 10px 26px rgba(42, 29, 85, .35);
}
.mission-cameo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  color: #fff0c5;
  font: 900 8px/1 var(--mono);
  letter-spacing: .12em;
  text-align: center;
}
.start-button {
  color: #3d2a10;
  border: 1px solid #fff0b8;
  border-radius: 999px;
  background: linear-gradient(145deg, #ffe6a4, #dba64e);
  box-shadow: 0 4px 0 #916325, 0 7px 16px rgba(87, 52, 17, .18);
  clip-path: none;
}

.modal-layer {
  background: rgba(10, 14, 55, .74);
  backdrop-filter: blur(12px) saturate(1.08);
}
.reward-panel,
.report-panel,
.help-panel {
  color: #2d2c56;
  border: 2px solid #e7bc62;
  border-radius: 23px;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, .72), transparent 24%),
    linear-gradient(145deg, #fff5d8, #dfd5eb);
  box-shadow: inset 0 0 0 4px rgba(70, 68, 133, .11), 0 24px 65px rgba(7, 10, 41, .48);
  clip-path: none;
}
.reward-panel > small,
.report-panel > small,
.help-panel > small { color: #7b4c7a; }
.reward-panel h2,
.report-panel h2,
.help-panel h2 { color: #30366d; }
.reward-panel > p,
.report-panel > p,
.help-panel > p { color: #655e77; }
.reward-actions { background: linear-gradient(transparent, rgba(228, 217, 237, .96) 42%); }
.secondary-action { color: #fff1cf; background: #375b97; border-color: #e3bd6f; border-radius: 999px; }
.text-action { color: #584d72; background: rgba(255, 255, 255, .34); border-color: rgba(94, 77, 128, .28); border-radius: 999px; }
.report-stats div { background: rgba(255, 255, 255, .42); border-color: #d8a953; border-radius: 12px; }
.report-stats small { color: #756e89; }
.report-stats b { color: #34376d; }
.help-panel b { color: #704b82; }
.cognition-key > div { background: rgba(255, 255, 255, .4); border-color: rgba(94, 77, 128, .18); border-radius: 11px; }
.cognition-key dt { color: #704b82; }
.cognition-key dd { color: #655e77; }
.help-panel > p.cognition-flow { border-top-color: rgba(94, 77, 128, .2); }
.close-button { color: #5e5475; border-color: rgba(91, 73, 125, .3); border-radius: 50%; }

.shot-settlement-layer {
  background:
    radial-gradient(circle at 50% 46%, rgba(194, 157, 248, .24), transparent 33%),
    rgba(9, 13, 52, .78);
  backdrop-filter: blur(11px) saturate(1.12);
}
.shot-settlement-panel {
  border: 2px solid #e6be69;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 228, 157, .12), transparent 20%),
    linear-gradient(145deg, rgba(31, 55, 116, .97), rgba(69, 48, 113, .97));
  box-shadow: inset 0 0 0 4px rgba(255, 236, 182, .09), 0 26px 75px rgba(5, 8, 34, .66);
  clip-path: none;
}
.settlement-impact small,
.settlement-result > small { color: #d7d3ea; }
.settlement-impact strong { color: #ffe39b; }
.settlement-impact span { color: #fff0c8; background: rgba(255, 206, 109, .12); border-color: rgba(255, 217, 137, .4); border-radius: 999px; }
.settlement-card-back {
  border-color: #f0cd78;
  border-radius: 17px;
  background:
    linear-gradient(35deg, transparent 49%, rgba(255, 228, 159, .24) 50% 51%, transparent 52%),
    radial-gradient(circle at 50% 43%, rgba(255, 238, 190, .24), transparent 21%),
    linear-gradient(145deg, #6d5bb0, #26366e);
  box-shadow: inset 0 0 0 5px #3d397b, 0 0 34px rgba(201, 177, 255, .52);
  clip-path: none;
}
.settlement-result > strong { color: #fff0d2; }
.settlement-result > p { color: #eee5ff; background: rgba(188, 159, 230, .15); border-color: #d2b4ff; border-radius: 0 12px 12px 0; }
.settlement-pollution span { border-radius: 999px; }

.toast {
  color: #384049;
  border-color: #86cbb6;
  border-radius: 999px;
  background: #d8f5e8;
  box-shadow: 0 10px 27px rgba(15, 24, 63, .28);
}
.toast.bad { color: #fff0f5; background: #8c3760; border-color: #ef91b6; }

@keyframes worldStarTwinkle {
  0%, 100% { opacity: .45; transform: scale(.82) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(18deg); }
}
@keyframes postalLetterArc {
  0%, 8% { opacity: 0; transform: translate(-28px, 24px) rotate(-12deg) scale(.72); }
  18% { opacity: .92; }
  52% { opacity: .9; transform: translate(34vw, -24px) rotate(3deg) scale(.9); }
  86% { opacity: .82; }
  100% { opacity: 0; transform: translate(70vw, 18px) rotate(12deg) scale(.68); }
}
@keyframes cloudVeilFloat {
  0%, 100% { transform: translateX(-1.2%); }
  50% { transform: translateX(1.2%); }
}
@keyframes postalSignal {
  0% { left: 2%; opacity: 0; transform: translateY(12px) scale(.7); }
  18% { opacity: 1; }
  55% { transform: translateY(-9px) scale(1); }
  100% { left: 96%; opacity: 0; transform: translateY(8px) scale(.7); }
}

/* Motion ---------------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbitA { to { transform: scaleX(.48) rotate(380deg); } }
@keyframes orbitB { to { transform: scaleY(.48) rotate(338deg); } }
@keyframes watch { 50% { transform: scale(1.08); box-shadow: 0 0 32px rgba(89, 216, 255, .62), 0 0 0 10px rgba(89, 216, 255, .04); } }
@keyframes pupil { 0%, 25% { transform: translateX(-3px); } 35%, 68% { transform: translateX(3px); } 78%, 100% { transform: translateX(0); } }
@keyframes opponentRecoil { 35% { transform: translateY(-4px) scale(.94); filter: brightness(1.5); } }
@keyframes signalDrop { 0% { top: -20%; opacity: 0; } 20% { opacity: 1; } 100% { top: 104%; opacity: 0; } }
@keyframes targetGlow { 50% { filter: brightness(1.1); } }
@keyframes hintPulse { 50% { transform: translateY(-2px); } }
@keyframes enemyIntentPulse {
  0% { box-shadow: 0 0 0 rgba(255, 63, 130, 0); }
  38% { box-shadow: 0 0 0 4px rgba(255, 63, 130, .42), 0 0 34px rgba(255, 63, 130, .32); transform: translateY(2px); }
  100% { box-shadow: 0 0 0 rgba(255, 63, 130, 0); transform: translateY(0); }
}
@keyframes coachCardPulse { 50% { transform: translateY(-8px) scale(1.025); filter: brightness(1.08); } }
@keyframes coachCardPulseMobile { 50% { transform: translateY(-3px) scale(1.01); filter: brightness(1.08); } }
@keyframes rewardArrivalPulse { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-10px); filter: brightness(1.16); } }
@keyframes feedbackOriginPulse { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-9px); filter: brightness(1.18); } }
@keyframes settlementLayerIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes settlementImpact { 0% { opacity: 0; transform: scale(.75); } 55% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes settlementBackFlip { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes settlementFrontFlip { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
@keyframes settlementResultIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes inputCorrupt { 0% { filter: none; } 45% { filter: contrast(1.6) hue-rotate(280deg); transform: skewX(-5deg) scale(.96); } 100% { filter: saturate(1.7) hue-rotate(292deg); transform: scale(.9); opacity: .15; } }
@keyframes programPulse { 45% { transform: scale(1.08); box-shadow: 0 0 22px rgba(255, 185, 87, .75); } }
@keyframes commandReady { 50% { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 0 23px rgba(255, 185, 87, .7); } }
@keyframes pileReceive { 45% { transform: scale(1.18) rotate(-3deg); background: #ffdf92; } }
@keyframes pipBreak { 45% { transform: translateY(3px) rotate(18deg) scale(.7); background: var(--pollution); } 100% { opacity: .13; transform: skewX(-16deg); } }
@keyframes pollutionToPile { 0% { transform: translate(0, 0) rotate(0) scale(1); } 38% { transform: translate(0, 20px) rotate(-7deg) scale(.9); background: #8c1f4b; } 100% { left: var(--tx); top: var(--ty); transform: rotate(24deg) scale(.22); opacity: .15; background: #5c1232; } }
@keyframes feedbackReturn { 0% { left: 50%; top: 12%; transform: translate(-50%, -100%) rotate(7deg) scale(.3); opacity: 0; } 25% { opacity: 1; } 100% { left: var(--tx); top: var(--ty); transform: rotate(-4deg) scale(.28); opacity: .2; } }
@keyframes programMigrate { to { left: var(--tx); top: var(--ty); transform: rotate(-12deg) scale(.3); opacity: .2; } }
@keyframes cardResolve { to { left: var(--tx); top: var(--ty); transform: rotate(5deg) scale(.28); opacity: .18; } }
@keyframes floatNumber { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.08); } }

/* Compact desktop ------------------------------------------------------- */

@media (max-width: 1060px) and (min-width: 681px) {
  .hud { grid-template-columns: 135px 1fr 88px; gap: 7px; padding-inline: 7px; }
  .hud-resources section { min-width: 68px; padding-inline: 6px; }
  .attention-meter { max-width: 210px; }
  .opponent-zone { grid-template-columns: 84px 140px minmax(360px, 1fr) 120px; gap: 8px; padding-inline: 9px; }
  .algorithm-aperture { width: 68px; height: 68px; }
  .opponent-copy p { display: none; }
  .battlefield { grid-template-columns: minmax(0, 1fr) 135px; gap: 6px; }
  .battlefield.has-programs { grid-template-columns: 92px minmax(0, 1fr) 135px; }
  .piles { right: 150px; }
  .lane-heading p { display: none; }
  .game-card { min-width: 132px; width: 132px; }
  .hand { justify-content: flex-start; padding-inline: 20px; }
}

/* Mobile battle table --------------------------------------------------- */

@media (max-width: 680px) {
  .game-shell {
    width: 100%;
    grid-template-rows: 44px 132px minmax(188px, 1fr) 286px;
    gap: 6px;
    padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  }
  .game-shell::after { top: 80px; bottom: 220px; width: 82vw; }

  .hud { grid-template-columns: 65px minmax(0, 1fr) 59px; gap: 4px; padding: 2px 5px; }
  .run-mark { gap: 4px; }
  .run-glyph { width: 24px; height: 24px; }
  .run-mark small { display: none; }
  .run-mark strong { font-size: 12px; }
  .hud-resources { gap: 3px; justify-content: stretch; }
  .hud-resources section { min-width: 0; min-height: 34px; padding: 3px 5px; gap: 4px; }
  .hud-label { font-size: 6px; }
  .resource-dot { width: 5px; height: 5px; }
  .hud-resources b { font-size: 13px; }
  .attention-meter { flex: 1.8; }
  .attention-pips { min-width: 38px; gap: 1px; }
  .attention-pips i { height: 6px; }
  .energy-meter,
  .time-meter { flex: .7; }
  .energy-meter .hud-label,
  .time-meter .hud-label { font-size: 0; }
  .energy-meter .hud-label::after { content: "能"; font-size: 6px; }
  .time-meter .hud-label::after { content: "时"; font-size: 6px; }
  .goal-meter { display: flex !important; flex: .9; }
  .goal-meter .hud-label { font-size: 0; }
  .goal-meter .hud-label::after { content: "准备"; font-size: 6px; }
  .goal-meter .goal-track { display: none; }
  .goal-meter b { font-size: 11px; }
  .hud-tools { gap: 3px; }
  .icon-button { min-width: 27px; width: 27px; height: 29px; padding: 0; }
  .icon-button span { display: none; }

  .opponent-zone {
    grid-template-columns: 62px minmax(0, 1fr) 75px;
    grid-template-rows: 1fr 31px;
    gap: 3px 7px;
    padding: 6px 8px 6px 10px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .opponent-portrait { grid-column: 1; grid-row: 1; }
  .algorithm-aperture { width: 56px; height: 56px; }
  .algorithm-eye { width: 26px; height: 26px; }
  .opponent-status { bottom: -4px; max-width: 58px; overflow: hidden; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
  .opponent-copy { grid-column: 2; grid-row: 1; }
  .opponent-copy small { font-size: 5px; }
  .opponent-copy h1 { font-size: 19px; }
  .opponent-copy p { display: none; }
  .intent-card { grid-column: 2 / 4; grid-row: 1 / 3; margin-left: 0; grid-template-rows: 20px 1fr 23px; }
  .opponent-copy + .intent-card { margin-left: 0; }
  .opponent-copy { display: none; }
  .intent-card { grid-column: 2 / 4; }
  .intent-card > header { padding: 3px 6px; font-size: 6px; }
  .intent-main { grid-template-columns: 25px 1fr; gap: 6px; padding: 4px 7px 2px; }
  .intent-glyph { width: 23px; height: 23px; }
  .intent-main strong { font-size: 12px; }
  .intent-main p { font-size: 7px; }
  .encounter-dilemma { gap: 3px; margin-top: 3px; padding-top: 3px; }
  .encounter-dilemma > span { padding: 1px 3px; font-size: 6px; }
  .dilemma-rule { font-size: 7px; line-height: 1.2; white-space: normal; }
  .intent-effects { gap: 3px; padding: 3px 6px; }
  .intent-effects span { padding: 1px 3px; font-size: 7px; }
  .pull-meter { grid-column: 1 / 4; grid-row: 2; grid-template-columns: 84px 1fr; align-items: center; gap: 5px; padding: 0 2px; }
  .pull-meter > span { font-size: 6px; }
  .pull-meter b { font-size: 12px; }
  .pull-track { height: 6px; }

  .battlefield { display: block; padding: 5px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
  .feed-beam { width: 60%; }
  .program-rack { display: none; }
  .program-rack.has-programs {
    position: absolute; left: 139px; right: 156px; bottom: 5px; z-index: 4;
    height: 30px; padding: 2px; display: grid; grid-template-columns: 31px 1fr; gap: 2px;
    background: rgba(247, 225, 171, .93); border: 1px solid #8c6b23;
  }
  .program-rack.has-programs > header { align-items: center; padding: 0; border: 0; }
  .program-rack.has-programs > header span { font-size: 6px; }
  .program-rack.has-programs > header small { display: none; }
  .program-rack.has-programs .program-slots { height: 100%; display: flex; gap: 2px; padding: 0; }
  .program-rack.has-programs .program-slot.empty { display: none; }
  .program-rack.has-programs .program-slot.filled { min-width: 0; flex: 1; grid-template-columns: 16px 1fr; padding: 2px; }
  .program-rack.has-programs .program-slot > span { width: 14px; height: 14px; font-size: 6px; }
  .program-rack.has-programs .program-slot small { font-size: 5px; }
  .lane-wrap { height: 100%; grid-template-rows: 30px minmax(0, 1fr); padding-bottom: 50px; }
  .lane-heading { padding-inline: 3px; }
  .lane-heading small { font-size: 5px; }
  .lane-heading strong { font-size: 12px; }
  .lane-heading p { max-width: 148px; padding: 3px 5px; font-size: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .input-lane { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr); gap: 2px; }
  .lane-arrow { width: 10px; height: 10px; font-size: 10px; }
  .lane-stage { grid-template-rows: 27px minmax(0, 1fr); padding: 3px; }
  .lane-stage > header { grid-template-columns: 18px 1fr; gap: 3px; }
  .lane-stage > header > b { width: 17px; height: 17px; font-size: 6px; }
  .lane-stage > header strong { font-size: 7px; }
  .lane-stage > header small { font-size: 5px; }
  .input-card { gap: 3px; padding: 5px; }
  .input-card::before { padding: 1px 3px; font-size: 5px; }
  .input-card strong { font-size: 9px; white-space: normal; }
  .input-card p { display: -webkit-box; overflow: hidden; font-size: 6px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .input-card footer { gap: 2px; }
  .input-card footer span { padding: 1px 2px; font-size: 5px; }
  .shot-bay { position: absolute; right: 5px; bottom: 5px; width: 148px; height: 48px; display: block; padding: 2px; background: transparent; border: 0; }
  .shot-bay > header { display: none; }
  .command-card { width: 100%; height: 48px; min-height: 0; margin: 0; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 15px 1fr; align-items: center; justify-items: start; gap: 0 4px; padding: 4px 5px; }
  .command-cost { left: 3px; top: 12px; width: 20px; height: 20px; }
  .feedback-promise { right: 2px; top: 2px; width: 16px; height: 22px; gap: 0; }
  .feedback-promise i { font-size: 8px; }
  .feedback-promise small { display: none; }
  .command-art { display: none; }
  .command-card strong { grid-column: 2; grid-row: 1; max-width: calc(100% - 16px); font-size: 9px; }
  .command-card > small { display: none; }
  .command-card > b { grid-column: 2; grid-row: 2; max-width: calc(100% - 3px); padding: 0; overflow: hidden; color: #604313; background: transparent; font-size: 6px; line-height: 1.05; text-align: left; white-space: normal; }
  .piles { left: 7px; right: auto; bottom: 7px; gap: 2px; }
  .pile { min-width: 42px; height: 28px; grid-template-columns: 11px 1fr auto; padding: 2px 3px; }
  .pile small { font-size: 5px; }
  .pile b { font-size: 7px; }

  .player-zone { grid-template-rows: 47px minmax(0, 1fr); padding: 5px 6px 6px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
  .hand-bar { grid-template-columns: 72px 1fr 143px; gap: 4px; padding: 0 2px; }
  .hand-bar > div { display: grid; gap: 0; }
  .hand-bar small { font-size: 5px; }
  .hand-bar h2 { font-size: 16px; }
  .hand-bar > p { display: -webkit-box; overflow: hidden; font-size: 7px; line-height: 1.15; text-align: left; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .end-turn-button { min-width: 0; min-height: 36px; padding: 4px 7px; }
  .end-turn-button strong { font-size: 9px; }
  .end-turn-button small { max-width: 128px; display: -webkit-box; overflow: hidden; font-size: 7px; line-height: 1.05; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .hand { justify-content: flex-start; gap: 6px; padding: 2px 6px 2px; scroll-snap-type: x proximity; }
  .game-card { width: 124px; min-width: 124px; height: 220px; grid-template-rows: 18px 58px 28px 1fr 17px; gap: 4px; padding: 8px; scroll-snap-align: start; }
  .game-card:nth-child(n) { transform: none; }
  .game-card:hover:not(:disabled) { transform: none; }
  .game-card.opening-suggested:not(:disabled) { animation-name: coachCardPulseMobile; }
  .game-card.selected { transform: translateY(-9px) scale(1.03) !important; }
  .card-kind { padding-right: 27px; font-size: 7.5px; }
  .card-kind i { width: 11px; height: 11px; }
  .card-cost { right: 4px; top: 4px; min-width: 27px; height: 25px; padding-inline: 3px; }
  .card-cost b { font-size: 9px; }
  .card-art { height: 58px; }
  .game-card > strong { font-size: 12px; }
  .game-card > p { font-size: 9px; line-height: 1.38; }
  .game-card > small { padding: 3px 5px; font-size: 7px; }

  .start-layer { padding: 8px; padding-bottom: 198px; align-items: end; }
  .mission-card { width: calc(100% - 12px); padding: 12px 13px; }
  .mission-card h2 { font-size: 23px; }
  .mission-card p { margin-bottom: 9px; font-size: 9px; }
  .start-button { min-height: 38px; padding: 7px 14px; font-size: 11px; }
  .toast { bottom: 294px; font-size: 8px; }

  .shot-settlement-layer { padding: 9px; }
  .shot-settlement-panel {
    width: min(360px, 100%); max-height: calc(100dvh - 18px);
    grid-template-columns: 1fr; grid-template-rows: auto 220px auto;
    gap: 8px; padding: 12px 13px; overflow: hidden;
  }
  .settlement-impact { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 4px 8px; }
  .settlement-impact small { grid-column: 1 / 3; }
  .settlement-impact strong { font-size: 24px; }
  .settlement-impact span { padding: 3px 5px; font-size: 7px; }
  .settlement-flip { width: 132px; height: 220px; }
  .settlement-card-front .game-card { width: 132px; min-width: 132px; height: 220px; }
  .settlement-card-back b { font-size: 20px; }
  .settlement-card-back small { font-size: 6px; }
  .settlement-result { gap: 5px; text-align: center; }
  .settlement-result > strong { font-size: 15px; }
  .settlement-result > p { padding: 4px 6px; font-size: 7px; }
  .settlement-pollution { justify-content: center; gap: 3px; }
  .settlement-pollution span { padding: 3px 5px; font-size: 7px; }

  .reward-panel,
  .report-panel,
  .help-panel { max-height: calc(100dvh - 18px); padding: 17px 13px; }
  .reward-panel h2,
  .report-panel h2,
  .help-panel h2 { font-size: 23px; }
  .cognition-key { gap: 4px; margin: 9px 0 8px; }
  .cognition-key > div { grid-template-columns: 82px minmax(0, 1fr); gap: 6px; padding: 5px 7px; }
  .cognition-key dt { font-size: 8px; }
  .cognition-key dd { font-size: 8px; line-height: 1.28; }
  .help-panel > p.cognition-flow { padding-top: 7px; font-size: 9px; }
  .reward-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  #reward-choices { display: flex; max-height: none; margin-right: -13px; padding: 2px 13px 9px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  #reward-choices .game-card { flex: 0 0 126px; width: 126px; min-width: 126px; scroll-snap-align: start; }
  .reward-choices .game-card { width: 100%; height: 220px; padding: 8px; }
  .reward-choices .game-card .card-art { height: 58px; }
  .report-stats { grid-template-columns: repeat(2, 1fr); }

  .game-shell {
    background-position: center, center, 78% center;
    box-shadow: inset 0 0 70px rgba(5, 8, 38, .5);
  }
  .world-star-b,
  .world-star-c,
  .winged-letter { display: none; }
  .world-star-a { left: 4%; top: 23%; font-size: 9px; }
  .cloud-veil { bottom: 27%; opacity: .24; }
  .hud { border-radius: 12px; }
  .run-glyph { width: 25px; height: 20px; border-width: 1px; }
  .run-glyph::before,
  .run-glyph::after { top: 3px; width: 8px; height: 12px; }
  .hud-resources section { border-radius: 8px; }
  .opponent-zone { border-radius: 14px; }
  .opponent-zone::after { right: 7px; top: 6px; font-size: 7px; }
  .intent-card { border-width: 1px; border-radius: 11px; }
  .intent-effects span { background: rgba(255, 255, 255, .42); }
  .battlefield { border-radius: 15px; }
  .feed-beam { left: 6%; right: 6%; top: 53%; opacity: .5; }
  .lane-stage { border-radius: 10px; }
  .lane-stage::after { bottom: -3px; height: 5px; }
  .input-card { border-radius: 8px; }
  .program-rack.has-programs {
    color: #fff0cd;
    background: linear-gradient(155deg, rgba(63, 43, 80, .94), rgba(35, 47, 99, .95));
    border-color: #d6aa55;
    border-radius: 9px;
  }
  .shot-bay { width: 154px; }
  .command-card {
    grid-template-columns: 24px 29px minmax(0, 1fr);
    border-radius: 11px;
  }
  .command-art {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    display: block;
    align-self: center;
  }
  .command-art .command-orbit { inset: 4px; }
  .command-art .command-shot { left: 4px; top: 13px; width: 18px; height: 2px; }
  .command-art .command-shot::after { top: -3px; width: 6px; height: 6px; border-width: 2px 2px 0 0; }
  .command-art .command-star { right: 3px; top: 2px; font-size: 7px; }
  .command-card strong { grid-column: 3; max-width: calc(100% - 15px); }
  .command-card > b { grid-column: 3; max-width: 100%; color: #ffe7a8; background: transparent; }
  .player-zone { border-radius: 15px; }
  .end-turn-button { border-radius: 9px; }
  .game-card { border-radius: 14px; }
  .game-card::before { border-radius: 9px; }
  .card-art { background-size: auto, auto, 390%; }
  .mission-card {
    min-height: 128px;
    padding: 14px 102px 14px 15px;
    border-radius: 16px;
  }
  .mission-cameo {
    right: 8px;
    top: -12px;
    width: 86px;
    height: 119px;
    border-width: 2px;
    border-radius: 46% 46% 12px 12px;
    background-size: cover, 300%;
  }
  .mission-cameo span { bottom: 5px; font-size: 6px; }
  .shot-settlement-panel,
  .reward-panel,
  .report-panel,
  .help-panel { border-radius: 17px; }
  .settlement-card-back { border-radius: 14px; }
}

@media (max-width: 365px) {
  .game-shell { grid-template-rows: 42px 125px minmax(178px, 1fr) 278px; gap: 4px; }
  .hud { grid-template-columns: 58px minmax(0, 1fr) 55px; }
  .attention-pips { display: none; }
  .intent-effects span:nth-child(n + 3) { display: none; }
  .lane-heading p { display: none; }
  .game-card { width: 116px; min-width: 116px; height: 218px; padding-inline: 7px; }
  .hand-bar { grid-template-columns: 64px 1fr 132px; }
}

@media (max-height: 740px) and (min-width: 681px) {
  .game-shell { grid-template-rows: 48px 126px minmax(215px, 1fr) 235px; gap: 6px; }
  .algorithm-aperture { width: 65px; height: 65px; }
  .game-card { height: 170px; grid-template-rows: 18px 48px auto 1fr auto; }
  .card-art { height: 48px; }
  .player-zone { grid-template-rows: 40px 1fr; }
  .toast { bottom: 245px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}