:root {
  --m-bg:#0c141e;
  --m-panel:#14212b;
  --m-ink:#f4ebd5;
  --m-muted:#a7b5b7;
  --m-gold:#ead095;
  --m-line:#dbc18b30;
  --m-teal:#8bd3c9;
  --m-accent:#e7c487;
  color-scheme:dark;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--m-bg);
  color:var(--m-ink)
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button:disabled {
  cursor:not-allowed;
  opacity:.42
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--m-teal);
  outline-offset:4px
}
button {
  color:inherit
}
input,select {
  color:var(--m-ink);
  background:#09151c;
  border:1px solid var(--m-line);
  border-radius:8px;
  padding:12px;
  min-width:0
}
option {
  background:#14212b
}
button {
  border:0
}
p {
  line-height:1.8
}
small {
  line-height:1.6
}
button,summary {
  user-select:none
}
button b {
  font-weight:750
}
[hidden] {
  display:none!important
}
#memoryCanvas {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:none;
  touch-action:none
}
.memory-playing #memoryCanvas {
  display:block
}
.memory-playing {
  overflow:hidden
}
.memory-home {
  max-width:1380px;
  margin:auto;
  padding:0 48px;
  background:radial-gradient(ellipse at 20% 24%,#35616c32,transparent 50%),radial-gradient(ellipse at 75% 10%,#84633d20,transparent 50%)
}
.memory-nav {
  height:104px;
  display:flex;
  align-items:center;
  gap:30px;
  border-bottom:1px solid var(--m-line)
}
.memory-brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13px;
  font-weight:750;
  line-height:1.5
}
.memory-brand>span {
  font-family:serif;
  border:1px solid var(--m-gold);
  color:var(--m-gold);
  padding:4px 8px;
  font-size:24px;
  transform:rotate(-8deg);
  border-radius:5px
}
.memory-brand small {
  display:block;
  font-size:8px;
  font-weight:400;
  letter-spacing:2px;
  color:var(--m-muted)
}
.memory-nav nav {
  display:flex;
  gap:25px;
  margin-left:auto;
  font-size:12px;
  color:var(--m-muted)
}
.nav-active {
  color:var(--m-gold)
}
.quiet-btn {
  background:none;
  border:1px solid var(--m-line);
  border-radius:8px;
  color:var(--m-muted);
  padding:10px 13px;
  font-size:11px
}
.memory-intro {
  display:flex;
  justify-content:space-between;
  padding:29px 0 18px;
  gap:10px
}
.chapter-kicker {
  font-size:10px;
  letter-spacing:2.1px;
  color:var(--m-gold);
  text-transform:uppercase
}
.chapter-kicker i {
  display:inline-block;
  width:5px;
  height:5px;
  background:var(--m-teal);
  border-radius:50%;
  margin-right:10px;
  box-shadow:0 0 12px var(--m-teal)
}
.edition-label {
  font-size:8px;
  letter-spacing:3px;
  color:#7b949c
}
.memory-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  padding-bottom:42px;
  align-items:start
}
.memory-story {
  position:relative;
  min-width:0;
  padding-top:13px
}
.story-index {
  font-size:9px;
  color:var(--m-muted);
  letter-spacing:3px
}
.memory-story h1 {
  font-family:"Songti SC",STSong,serif;
  font-size:88px;
  letter-spacing:-5px;
  line-height:1.16;
  margin:23px 0 15px;
  position:relative;
  font-weight:900
}
.memory-story h1>span {
  display:block;
  margin-left:76px;
  color:var(--m-gold)
}
.memory-story h1>i {
  font-size:54px;
  position:absolute;
  left:280px;
  top:32px;
  font-style:normal;
  font-weight:400;
  color:#8ed4cc
}
.story-tagline {
  font-size:24px;
  font-weight:600;
  letter-spacing:2px;
  margin:23px 0 13px
}
.story-body {
  font-size:12px;
  color:var(--m-muted);
  margin-bottom:24px;
  position:relative;
  z-index:1
}
.story-facts {
  display:flex;
  gap:32px;
  font-size:10px;
  position:relative;
  z-index:1
}
.story-facts span {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--m-muted)
}
.story-facts b {
  font-family:Georgia,serif;
  font-size:25px;
  font-weight:400;
  color:var(--m-gold)
}
.memory-poster-wrap {
  margin-top:-72px;
  position:relative;
  pointer-events:none
}
.memory-poster {
  display:block;
  width:100%;
  height:auto;
  mask-image:linear-gradient(transparent,#000 18%,#000 90%,transparent)
}
.poster-caption {
  position:absolute;
  bottom:15px;
  left:0;
  font-size:10px;
  letter-spacing:3px;
  color:#b2bfb8
}
.memory-preparation {
  border:1px solid #c7b68f4d;
  border-radius:20px;
  background:linear-gradient(145deg,#1f3039ed,#111e2a);
  padding:26px;
  box-shadow:0 25px 70px #0004;
  position:relative;
  overflow:hidden
}
.memory-preparation:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 100% 0,#e9cb8720,transparent 50%)
}
.memory-preparation>* {
  position:relative
}
.preparation-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
  font-weight:700;
  margin-bottom:21px
}
.preparation-top small {
  font-size:9px;
  font-weight:400;
  color:var(--m-muted)
}
.memory-characters {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}
.memory-character-btn {
  background:#0d1b2570;
  border:1px solid #a6b9bf30;
  border-radius:12px;
  padding:12px 6px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  position:relative
}
.memory-character-btn.selected {
  border-color:var(--role-color);
  background:color-mix(in srgb,var(--role-color) 13%,#14212b);
  box-shadow:inset 0 0 0 1px var(--role-color)
}
.memory-character-btn.selected:after {
  content:'✓';
  position:absolute;
  right:8px;
  top:5px;
  font-size:11px;
  color:var(--role-color)
}
.memory-character-btn b {
  font-size:13px
}
.memory-character-btn small {
  font-size:8px;
  color:var(--m-muted)
}
.memory-character-btn .memory-portrait {
  width:75px;
  height:94px
}
.memory-character-detail {
  padding:17px 0 14px;
  min-height:160px
}
.memory-character-title {
  display:flex;
  align-items:baseline;
  gap:10px
}
.memory-character-title b {
  font-size:19px
}
.memory-character-title span {
  font-size:10px;
  color:var(--m-gold)
}
.memory-character-detail p {
  font-size:11px;
  margin:8px 0;
  color:var(--m-muted)
}
.memory-ability-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.memory-ability-pair article {
  background:#07151c77;
  border:1px solid #afc7cc1a;
  border-radius:8px;
  padding:9px
}
.memory-ability-pair b {
  font-size:11px;
  color:var(--m-ink);
  display:block
}
.memory-ability-pair b i {
  font-size:8px;
  font-style:normal;
  border:1px solid #afc7cc55;
  margin-right:7px;
  padding:1px 4px;
  border-radius:3px
}
.memory-ability-pair small {
  display:block;
  font-size:9px;
  color:var(--m-muted);
  margin-top:5px
}
.memory-config-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:4px 0 14px
}
.memory-config-row label {
  display:grid;
  gap:6px;
  font-size:9px;
  color:var(--m-muted)
}
.memory-config-row input,.memory-config-row select {
  width:100%;
  font-size:11px;
  padding:10px
}
.tree-entry {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #dabf8a66;
  border-radius:10px;
  padding:13px 12px;
  background:linear-gradient(100deg,#87724430,#d7b76f08);
  width:100%;
  text-align:left
}
.tree-entry-symbol {
  font-size:29px;
  color:var(--m-gold)
}
.tree-entry b {
  font-size:14px
}
.tree-entry>span:nth-child(2)>small {
  display:block;
  font-size:8px;
  color:#b8bdaf;
  margin-top:4px
}
.tree-entry>strong {
  font-family:Georgia,serif;
  margin-left:auto;
  font-size:27px;
  color:var(--m-gold);
  text-align:center
}
.tree-entry>strong>small {
  display:block;
  font-family:system-ui;
  font-size:7px;
  font-weight:400
}
.tree-entry i {
  font-style:normal;
  color:var(--m-gold)
}
.memory-loadout-summary {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  font-size:8px;
  color:var(--m-muted);
  margin:12px 0 15px
}
.memory-loadout-summary span {
  border:1px solid var(--m-line);
  padding:4px 7px;
  border-radius:4px
}
.memory-primary {
  width:100%;
  background:linear-gradient(125deg,#ebd197,#cba567);
  color:#15232a;
  border:1px solid #fae3b5;
  border-radius:9px;
  min-height:48px;
  padding:13px 17px;
  font-size:13px;
  font-weight:750;
  box-shadow:0 4px 0 #443b2c;
  transition:filter .2s,transform .2s
}
.memory-primary:hover {
  filter:brightness(1.07);
  transform:translateY(-1px)
}
.memory-primary>span {
  float:left
}
.memory-primary>b {
  float:right
}
.memory-primary>small {
  display:block;
  clear:both;
  padding-top:6px;
  font-size:8px;
  font-weight:400;
  opacity:.7
}
.memory-secondary {
  border:1px solid #c5b38666;
  border-radius:7px;
  background:#b7cfcb0b;
  color:var(--m-ink);
  min-height:40px;
  font-size:11px;
  padding:9px 12px
}
.memory-coop-label {
  display:flex;
  align-items:center;
  gap:10px;
  color:#8fa3a7;
  font-size:8px;
  margin:20px 0 11px
}
.memory-coop-label:before,.memory-coop-label:after {
  content:'';
  height:1px;
  background:#c5b38622;
  flex:1
}
.memory-coop-controls {
  display:grid;
  grid-template-columns:1.1fr 1fr auto;
  gap:7px
}
.memory-coop-controls input {
  width:100%;
  font-size:11px;
  padding:9px
}
.memory-save-note {
  font-size:8px;
  color:#8ca3aa;
  line-height:1.7;
  margin:13px 0 0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  padding:30px 0 22px;
  border-top:1px solid var(--m-line)
}
.section-heading span {
  font-size:8px;
  letter-spacing:2px;
  color:var(--m-gold)
}
.section-heading h2 {
  font-family:"Songti SC",serif;
  font-size:28px;
  letter-spacing:1px;
  margin:12px 0 0
}
.section-heading>p {
  font-size:10px;
  color:var(--m-muted);
  margin:0
}
.memory-acts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.memory-act-card {
  border:1px solid var(--act-color);
  border-color:color-mix(in srgb,var(--act-color) 35%,transparent);
  border-radius:12px;
  overflow:hidden;
  position:relative;
  min-height:270px;
  padding:25px 20px 18px;
  isolation:isolate;
  background:radial-gradient(at 90% 25%,color-mix(in srgb,var(--act-color) 15%,#12202b),#111c26 75%)
}
.memory-act-card:after {
  content:'✦';
  font-family:Georgia,serif;
  font-size:150px;
  position:absolute;
  right:-13px;
  top:25px;
  color:var(--act-color);
  opacity:.12;
  z-index:-1
}
.memory-act-card>small {
  font-size:9px;
  letter-spacing:3px;
  color:var(--act-color)
}
.memory-act-card h3 {
  font-size:23px;
  font-family:"Songti SC",serif;
  margin:37px 0 8px
}
.memory-act-card p {
  font-size:10px;
  color:var(--m-muted);
  min-height:55px
}
.memory-act-card footer {
  font-size:9px;
  padding-top:13px;
  border-top:1px solid var(--m-line);
  display:flex;
  justify-content:space-between;
  color:var(--act-color)
}
.memory-guide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin:45px 0;
  padding:36px;
  border:1px solid var(--m-line);
  border-radius:12px;
  background:#a6d4c804
}
.memory-guide>div>span {
  font-size:10px;
  color:var(--m-gold)
}
.memory-guide h2 {
  font-family:"Songti SC",serif;
  font-size:27px;
  line-height:1.6;
  margin:10px 0 0
}
.memory-guide>p {
  font-size:12px;
  color:var(--m-muted);
  margin-top:17px
}
.memory-guide details {
  grid-column:1/-1;
  border-top:1px solid var(--m-line);
  padding-top:16px;
  font-size:11px;
  color:var(--m-muted)
}
summary {
  cursor:pointer
}
.memory-guide details p {
  max-width:1000px;
  font-size:11px
}
.memory-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:9px;
  letter-spacing:1px;
  color:var(--m-muted);
  border-top:1px solid var(--m-line);
  padding:24px 0 35px
}
.memory-overlay {
  position:fixed;
  inset:0;
  z-index:30;
  background:#040a12bf;
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:auto
}
.memory-dialog {
  position:relative;
  background:linear-gradient(135deg,#1e303b,#101d28);
  border:1px solid #bcaa7e66;
  border-radius:18px;
  box-shadow:0 30px 120px #0009;
  color:var(--m-ink);
  max-height:calc(100dvh - 40px);
  overflow:auto
}
.dialog-close {
  position:absolute;
  right:20px;
  top:20px;
  width:34px;
  height:34px;
  border:1px solid var(--m-line);
  border-radius:50%;
  background:#10202b;
  color:var(--m-ink);
  font-size:24px;
  z-index:2
}
.memory-dialog h2 {
  font-family:"Songti SC",serif;
  font-size:30px
}
.lobby-dialog {
  width:650px;
  padding:50px;
  text-align:center
}
.lobby-dialog>p {
  font-size:12px;
  color:var(--m-muted)
}
.room-code {
  font-family:monospace;
  font-size:43px;
  letter-spacing:12px;
  background:#ead09512;
  border:1px dashed #ead09599;
  color:var(--m-gold);
  padding:12px 19px;
  border-radius:9px;
  width:100%;
  margin:16px 0 0
}
.memory-party {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:23px 0
}
.memory-party>div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:100px;
  border:1px solid var(--m-line);
  border-radius:10px;
  padding:10px
}
.memory-party b {
  font-size:13px
}
.memory-party small {
  font-size:9px;
  display:block;
  color:var(--m-muted)
}
.memory-party .memory-portrait {
  height:75px;
  width:60px
}
.tree-dialog {
  width:min(1250px,100%);
  height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.tree-header {
  position:relative;
  display:flex;
  padding:25px 30px 15px;
  gap:20px;
  flex-shrink:0
}
.tree-header h2 {
  margin:7px 0;
  font-size:29px
}
.tree-header p {
  font-size:10px;
  color:var(--m-muted);
  margin:0
}
.tree-wallet {
  margin-left:auto;
  padding-right:50px;
  text-align:center
}
.tree-wallet b {
  display:block;
  font-family:Georgia,serif;
  color:var(--m-gold);
  font-size:40px;
  line-height:1.2
}
.tree-wallet span {
  font-size:8px;
  display:block
}
.tree-wallet small {
  font-size:8px;
  display:block;
  color:var(--m-muted)
}
.tree-character-tabs {
  display:flex;
  padding:0 30px 13px;
  gap:10px;
  border-bottom:1px solid var(--m-line)
}
.tree-character-tabs button {
  border:1px solid #bccfcb33;
  background:transparent;
  border-radius:6px;
  padding:9px 20px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:10px
}
.tree-character-tabs button[aria-selected=true] {
  border-color:var(--m-gold);
  color:var(--m-gold);
  background:#ead09510
}
.tree-character-tabs small {
  color:var(--m-muted);
  font-size:8px
}
.tree-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 305px;
  min-height:0;
  flex:1
}
.tree-map-wrap {
  overflow:auto;
  position:relative;
  padding:18px 16px 10px;
  background:radial-gradient(ellipse,#28404e50,#07121c);
  overscroll-behavior:contain;
  scrollbar-color:#59645b #10202b
}
.tree-branch-labels {
  width:750px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-bottom:12px;
  position:sticky;
  top:-18px;
  z-index:3;
  background:#11202aed;
  border-radius:7px;
  padding:10px 0
}
.tree-branch-labels div {
  text-align:center;
  font-size:10px;
  color:var(--branch-color)
}
.tree-branch-labels small {
  font-size:7px;
  display:block;
  color:#92a7aa;
  margin-top:4px
}
.tree-map {
  width:750px;
  height:1170px;
  position:relative
}
.tree-map svg {
  position:absolute;
  inset:0;
  pointer-events:none;
  width:750px;
  height:1170px
}
.tree-map path {
  stroke:#56636b80;
  stroke-width:1.5;
  fill:none
}
.tree-map path.lit {
  stroke:#d9bb81;
  stroke-width:2;
  filter:drop-shadow(0 0 4px #d9bb8180)
}
.tree-nodes {
  position:absolute;
  inset:0
}
.tree-node {
  position:absolute;
  width:126px;
  min-height:79px;
  background:linear-gradient(140deg,#1f3440,#12202d);
  border:1px solid #5e7078;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px;
  color:#a7b7bc;
  box-shadow:0 6px 18px #0004
}
.tree-node b {
  font-size:10px
}
.tree-node i {
  font-size:20px;
  font-style:normal;
  line-height:1.2
}
.tree-node small {
  font-size:7px;
  letter-spacing:1px
}
.tree-node.unlocked {
  border-color:var(--branch-color);
  color:var(--branch-color);
  background:linear-gradient(140deg,color-mix(in srgb,var(--branch-color) 15%,#1b2d38),#14232b)
}
.tree-node.available {
  border-color:#bdb181;
  color:#ece2c4
}
.tree-node.selected {
  outline:2px solid #f8df9e;
  outline-offset:4px
}
.tree-node.keystone {
  border-radius:28px;
  border-width:2px;
  background:#323b3c
}
.tree-node.locked {
  opacity:.58
}
.tree-node.weapon {
  border-radius:4px 18px 4px 18px
}
.tree-node .node-cost {
  position:absolute;
  right:5px;
  top:3px;
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:0;
  color:var(--m-gold)
}
.tree-inspector {
  overflow:auto;
  border-left:1px solid var(--m-line);
  padding:22px;
  background:#0a172199;
  overscroll-behavior:contain
}
.tree-node-detail>small {
  font-size:8px;
  letter-spacing:1.4px;
  color:var(--m-gold)
}
.tree-node-detail h3 {
  font-size:22px;
  margin:13px 0
}
.tree-node-detail p {
  font-size:11px;
  color:var(--m-muted)
}
.tree-node-detail .node-requirement {
  padding:10px;
  border:1px solid var(--m-line);
  border-radius:7px;
  font-size:9px
}
.tree-node-detail .node-requirement b {
  display:block;
  color:var(--m-gold);
  margin-bottom:4px
}
.tree-inspector>.memory-primary {
  font-size:11px;
  margin:14px 0 0
}
.tree-inspector #treeActionStatus {
  font-size:9px;
  color:var(--m-teal);
  min-height:16px
}
.tree-equipment {
  border-top:1px solid var(--m-line);
  padding:15px 0
}
.tree-equipment summary {
  font-size:11px;
  color:var(--m-gold);
  margin-bottom:12px
}
.tree-equipment label {
  font-size:9px;
  display:grid;
  gap:5px;
  color:var(--m-muted);
  margin-top:12px
}
.tree-equipment select {
  font-size:10px;
  padding:9px;
  width:100%
}
.tree-weapons {
  display:grid;
  gap:6px
}
.tree-weapon {
  border:1px solid var(--m-line);
  border-radius:7px;
  display:flex;
  gap:8px;
  padding:8px;
  background:#14232e;
  align-items:center;
  text-align:left
}
.tree-weapon img {
  height:40px;
  width:40px;
  object-fit:contain
}
.tree-weapon b {
  font-size:10px;
  display:block
}
.tree-weapon small {
  font-size:8px;
  color:var(--m-muted)
}
.tree-weapon.selected {
  border-color:var(--m-gold);
  background:#d9bb8117
}
.tree-inspector>.quiet-btn {
  width:100%;
  font-size:9px
}
.tree-scroll-note {
  font-size:8px;
  color:#82989d
}
.tree-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:13px 25px;
  border-top:1px solid var(--m-line);
  flex-shrink:0
}
.tree-bottom span {
  font-size:8px;
  color:var(--m-muted)
}
.tree-bottom button {
  font-size:11px
}
.memory-hud {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10
}
.memory-hud-top {
  position:absolute;
  left:20px;
  right:20px;
  top:14px;
  display:flex;
  align-items:center;
  gap:20px
}
.memory-stage-mark {
  display:grid;
  grid-template-columns:auto auto;
  column-gap:11px;
  align-items:center;
  background:#07121cd9;
  border:1px solid #a2c1bc55;
  border-radius:10px;
  padding:9px 14px;
  backdrop-filter:blur(10px)
}
.memory-stage-mark>span {
  font-size:8px;
  letter-spacing:2px;
  color:var(--m-gold);
  grid-row:1/3
}
.memory-stage-mark b {
  font-size:15px
}
.memory-stage-mark small {
  font-size:8px;
  color:var(--m-muted)
}
.memory-stage-progress {
  display:flex;
  gap:5px;
  background:#07121ca9;
  border-radius:25px;
  padding:8px 12px;
  margin:auto
}
.memory-stage-progress i {
  display:block;
  width:13px;
  height:5px;
  border-radius:2px;
  background:#677d8444
}
.memory-stage-progress i.cleared {
  background:var(--m-gold)
}
.memory-stage-progress i.current {
  background:#8ad5ca;
  box-shadow:0 0 7px #8ad5caaa
}
.memory-stage-progress i.boss {
  width:8px;
  height:8px;
  transform:rotate(45deg);
  margin:0 6px
}
.memory-hud-tools {
  display:flex;
  gap:8px;
  pointer-events:auto
}
.memory-hud-tools button {
  width:36px;
  height:36px;
  border:1px solid #bdc6b888;
  border-radius:50%;
  background:#0c1d27df;
  font-size:15px
}
.memory-boss-hud {
  position:absolute;
  top:87px;
  left:27%;
  width:46%;
  padding:12px 18px;
  border:1px solid #a486a277;
  background:#101623d9;
  border-radius:9px
}
.memory-boss-hud>div {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:7px
}
.memory-boss-hud b {
  font-size:13px;
  white-space:nowrap
}
.memory-boss-hud small {
  font-size:9px;
  color:#e5b4be
}
.memory-boss-hud span {
  font-size:9px;
  margin-left:auto;
  color:var(--m-muted);
  white-space:nowrap
}
progress {
  appearance:none;
  border:0;
  display:block;
  background:#04101c;
  border-radius:10px;
  overflow:hidden;
  width:100%;
  height:5px
}
progress::-webkit-progress-bar {
  background:#04101c
}
progress::-webkit-progress-value {
  background:var(--m-teal)
}
progress::-moz-progress-bar {
  background:var(--m-teal)
}
.memory-boss-hud progress::-webkit-progress-value {
  background:#e09ac1
}
.memory-vitals {
  position:absolute;
  left:22px;
  bottom:112px;
  background:#07121ce6;
  border:1px solid #9fbaad55;
  border-radius:10px;
  padding:13px;
  min-width:225px;
  max-width:280px;
  backdrop-filter:blur(10px)
}
.memory-vitals>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  margin-bottom:9px
}
.memory-vitals>div:first-child>span {
  font-size:10px;
  color:var(--m-teal)
}
.memory-vitals-meta {
  display:flex;
  gap:10px;
  font-size:9px;
  margin-top:8px;
  color:var(--m-gold)
}
#memorySquad {
  font-size:8px;
  color:#b2c6c6;
  margin-top:7px;
  line-height:1.7
}
.memory-combat-objective {
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  font-size:9px;
  background:#0c1d27cc;
  border:1px solid #a2c1bc33;
  border-radius:15px;
  padding:7px 16px;
  margin:0;
  white-space:nowrap
}
.memory-controls {
  position:fixed;
  inset:0;
  z-index:12;
  pointer-events:none;
  touch-action:none
}
.memory-action-buttons {
  display:flex;
  gap:9px;
  position:absolute;
  bottom:28px;
  right:25px;
  pointer-events:auto
}
.memory-action-buttons button {
  width:65px;
  height:65px;
  border:1px solid #aecac277;
  border-radius:50%;
  background:#10222de8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  position:relative;
  touch-action:none;
  overflow:hidden;
  --cooldown:0
}
.memory-action-buttons button:after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:calc(100% * var(--cooldown));
  background:#02081288;
  pointer-events:none
}
.memory-action-buttons button>* {
  position:relative;
  z-index:1
}
.memory-action-buttons button.held {
  background:#777852;
  transform:scale(.96)
}
.memory-action-buttons button.ready {
  border-color:#ead095
}
.memory-action-buttons kbd {
  font-size:8px;
  color:#adbdba;
  border:0;
  font-family:inherit
}
.memory-action-buttons b {
  font-size:10px
}
.memory-action-buttons small {
  font-size:7px;
  color:var(--m-gold);
  line-height:1
}
.memory-action-buttons .ultimate-action {
  width:76px;
  height:76px;
  margin-top:-10px;
  border:2px solid #e0c089;
  color:#f3dba7;
  background:#38362eeb
}
.memory-stick {
  display:none;
  width:104px;
  height:104px;
  position:absolute;
  left:25px;
  bottom:26px;
  border:1px solid #c8ddd742;
  border-radius:50%;
  background:#10222d65;
  pointer-events:auto;
  touch-action:none;
  box-shadow:inset 0 0 18px #bfe7dd0b
}
.memory-stick>span {
  position:absolute;
  left:32px;
  top:32px;
  width:38px;
  height:38px;
  border:1px solid #b6d6ce77;
  border-radius:50%;
  background:#a9dbcd33
}
.memory-stick small {
  position:absolute;
  bottom:-17px;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  color:#bbccc4
}
.aim-stick {
  left:auto;
  right:200px
}
.intermission-overlay {
  z-index:25
}
.intermission-dialog {
  width:560px;
  text-align:center;
  padding:40px 45px
}
.memory-clear-emblem {
  font-size:75px;
  color:var(--m-gold);
  text-shadow:0 0 50px #ead09566;
  margin:10px
}
.intermission-dialog h2 {
  font-size:27px;
  margin:12px 0
}
.intermission-dialog p {
  font-size:12px;
  color:var(--m-muted)
}
.memory-clear-reward {
  background:#8bd3c915;
  border:1px solid #8bd3c955;
  border-radius:9px;
  color:var(--m-teal);
  padding:15px;
  font-size:13px;
  margin:20px 0
}
.memory-clear-reward small {
  display:block;
  font-size:9px;
  margin-top:5px;
  color:var(--m-muted)
}
.memory-next-stage {
  font-size:11px;
  color:var(--m-gold);
  margin:20px
}
.intermission-dialog>small {
  display:block;
  font-size:8px;
  color:var(--m-muted);
  margin-top:19px
}
.memory-transition {
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse,#203740,#050a13 80%);
  z-index:35;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  pointer-events:none;
  --transition-color:#8bd3c9
}
.memory-transition>span {
  font-size:12px;
  letter-spacing:6px;
  color:var(--transition-color)
}
.memory-transition h2 {
  font-family:"Songti SC",serif;
  font-size:65px;
  letter-spacing:9px;
  margin:25px 0
}
.memory-transition p {
  font-size:14px;
  color:#b0c3c8;
  max-width:600px;
  padding:0 30px
}
.memory-transition>small {
  font-size:9px;
  letter-spacing:4px;
  color:var(--m-gold);
  margin-top:20px
}
.transition-rings {
  position:absolute;
  width:570px;
  height:570px;
  border:1px solid #d9bc7d33;
  border-radius:50%;
  box-shadow:0 0 80px #8bd3c90a,inset 0 0 80px #8bd3c90a;
  animation:memoryGate 4s ease-in-out both
}
.transition-rings:before,.transition-rings:after {
  content:'';
  position:absolute;
  inset:40px;
  border:1px dashed #d9bc7d44;
  border-radius:50%;
  transform:rotate(45deg)
}
.transition-rings:after {
  inset:80px;
  border-style:solid
}
.transition-rule {
  width:160px;
  height:1px;
  background:var(--transition-color);
  margin-top:15px;
  transform-origin:left;
  animation:memoryLine 4s linear both
}
.memory-transition h2,.memory-transition p,.memory-transition>span {
  position:relative;
  animation:memoryWords 1s ease-out both
}
.memory-report {
  width:900px;
  padding:30px 35px
}
.memory-report>header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--m-line);
  padding-bottom:17px
}
.memory-report>header>span:last-child {
  font-size:11px;
  letter-spacing:2px;
  color:var(--m-teal);
  border:1px solid var(--m-teal);
  border-radius:4px;
  padding:6px 10px;
  transform:rotate(-5deg)
}
.memory-report-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin:23px 0
}
.memory-report-heading>div:first-child>span {
  font-size:10px;
  letter-spacing:1px;
  color:var(--m-gold)
}
.memory-report-heading h2 {
  font-size:33px;
  margin:13px 0
}
.memory-report-heading p {
  font-size:11px;
  color:var(--m-muted)
}
#memoryReportPortrait .memory-portrait {
  height:145px;
  width:120px
}
.memory-report-score {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:25px;
  border:1px solid #d8be8155;
  border-radius:12px;
  background:linear-gradient(110deg,#4b493042,#718e7c08)
}
.memory-report-score>div>span {
  font-size:10px;
  color:var(--m-muted);
  display:block
}
.memory-report-score>div>b {
  font-family:Georgia,serif;
  font-size:65px;
  line-height:1.2;
  color:var(--m-gold);
  font-weight:400
}
.memory-report-score dl {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:0
}
.memory-report-score dt {
  font-size:9px;
  color:var(--m-muted)
}
.memory-report-score dd {
  font-size:22px;
  margin:7px 0 0;
  color:var(--m-ink);
  font-family:Georgia,serif
}
.memory-report-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:25px 0;
  gap:10px
}
.memory-report-metrics>div {
  border:1px solid var(--m-line);
  border-radius:9px;
  padding:14px 12px;
  background:#162833
}
.memory-report-metrics small {
  font-size:9px;
  color:var(--m-muted)
}
.memory-report-metrics b {
  font-size:26px;
  display:block;
  margin-top:9px;
  color:var(--m-teal);
  font-family:Georgia,serif
}
.memory-report-team-wrap {
  overflow:auto
}
.memory-report-team {
  width:100%;
  border-collapse:collapse;
  text-align:right;
  font-size:10px;
  min-width:510px
}
.memory-report-team caption {
  text-align:left;
  font-size:14px;
  font-weight:700;
  margin-bottom:12px
}
.memory-report-team th,.memory-report-team td {
  padding:12px;
  border-bottom:1px solid var(--m-line)
}
.memory-report-team th {
  font-size:9px;
  color:var(--m-muted);
  font-weight:400
}
.memory-report-team th:first-child,.memory-report-team td:first-child {
  text-align:left
}
.memory-report-team small {
  display:block;
  font-size:8px;
  color:var(--m-muted)
}
.memory-report-team tr.self {
  background:#8bd3c90b
}
.memory-report footer {
  display:flex;
  gap:10px;
  margin-top:25px
}
.memory-report footer button {
  flex:1
}
.memory-report footer .memory-primary {
  width:auto;
  flex:1.3
}
.pause-dialog {
  padding:45px;
  text-align:center;
  width:480px
}
.pause-dialog p {
  font-size:12px;
  color:var(--m-muted)
}
.pause-dialog .memory-secondary {
  display:block;
  width:100%;
  margin:17px 0
}
.pause-dialog small {
  font-size:9px;
  color:var(--m-muted)
}
.memory-toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  background:#e9d6ab;
  color:#1b3038;
  padding:11px 20px;
  border-radius:7px;
  font-size:12px;
  z-index:60;
  opacity:0;
  transition:.2s;
  pointer-events:none;
  max-width:90%;
  text-align:center
}
.memory-toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.memory-no-script {
  text-align:center;
  padding:40px
}
.memory-portrait {
  display:inline-block;
  position:relative;
  isolation:isolate
}
.memory-portrait>img {
  position:absolute;
  height:88%;
  width:90%;
  object-fit:contain;
  left:5%;
  bottom:0;
  filter:drop-shadow(0 6px 7px #0005)
}
.memory-portrait>svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.memory-portrait:before {
  content:'';
  position:absolute;
  inset:15% 4% 3%;
  border:1px solid color-mix(in srgb,var(--role-color,#e2c68d) 45%,transparent);
  border-radius:50%;
  background:radial-gradient(color-mix(in srgb,var(--role-color,#e2c68d) 15%,transparent),transparent 70%)
}
@keyframes memoryGate {
  0% {
    transform:scale(.5) rotate(-35deg);
    opacity:0
  }
  45% {
    opacity:1
  }
  100% {
    transform:scale(1.5) rotate(35deg);
    opacity:0
  }
}
@keyframes memoryWords {
  from {
    opacity:0;
    transform:translateY(20px);
    filter:blur(5px)
  }
  to {
    opacity:1;
    transform:none;
    filter:none
  }
}
@keyframes memoryLine {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}
@keyframes memoryCount {
  from {
    opacity:0;
    transform:translateY(15px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.memory-report-score,.memory-report-metrics>div {
  animation:memoryCount .6s both
}
.memory-report-metrics>div:nth-child(2) {
  animation-delay:.1s
}
.memory-report-metrics>div:nth-child(3) {
  animation-delay:.2s
}
.memory-report-metrics>div:nth-child(4) {
  animation-delay:.3s
}
@media(min-width:1600px) {
  .memory-home {
    padding:0 70px
  }
  .memory-hero {
    gap:65px
  }
  .memory-story h1 {
    font-size:104px
  }
  .memory-story h1>i {
    left:330px
  }
  .memory-preparation {
    padding:30px
  }
}
@media(max-width:1050px) {
  .memory-home {
    padding:0 25px
  }
  .memory-hero {
    gap:25px
  }
  .memory-story h1 {
    font-size:70px
  }
  .memory-story h1>span {
    margin-left:45px
  }
  .memory-story h1>i {
    left:230px;
    font-size:39px
  }
  .story-tagline {
    font-size:20px
  }
  .story-facts {
    gap:15px
  }
  .memory-preparation {
    padding:18px
  }
  .memory-character-btn .memory-portrait {
    width:62px;
    height:80px
  }
  .preparation-top {
    font-size:14px
  }
  .memory-acts {
    gap:9px
  }
  .memory-act-card {
    padding:20px 14px
  }
  .memory-act-card h3 {
    font-size:21px
  }
  .tree-body {
    grid-template-columns:minmax(0,1fr) 270px
  }
  .tree-inspector {
    padding:18px
  }
  .memory-boss-hud {
    left:23%;
    width:54%
  }
}
@media(max-width:740px) {
  .memory-home {
    padding:0 18px
  }
  .memory-nav {
    height:77px;
    gap:14px
  }
  .memory-brand {
    font-size:11px
  }
  .memory-brand small {
    font-size:6px;
    letter-spacing:1px
  }
  .memory-nav nav {
    gap:13px;
    font-size:9px
  }
  .memory-nav nav>a:nth-child(2) {
    display:none
  }
  .memory-nav>.quiet-btn {
    padding:8px 10px
  }
  .memory-intro {
    padding:22px 0 14px
  }
  .chapter-kicker {
    font-size:8px;
    letter-spacing:1.4px
  }
  .edition-label {
    font-size:6px;
    letter-spacing:1.2px
  }
  .memory-hero {
    grid-template-columns:1fr;
    gap:18px
  }
  .memory-story {
    min-height:390px;
    padding-top:6px
  }
  .story-index {
    font-size:7px
  }
  .memory-story h1 {
    font-size:75px;
    margin:16px 0 15px;
    letter-spacing:-3px;
    width:280px;
    position:relative;
    z-index:1
  }
  .memory-story h1>span {
    margin-left:50px
  }
  .memory-story h1>i {
    left:240px;
    top:25px
  }
  .story-tagline {
    font-size:19px;
    position:relative;
    z-index:1;
    width:45%;
    margin:17px 0 12px;
    letter-spacing:1px
  }
  .story-body {
    font-size:10px;
    width:68%;
    margin-bottom:15px
  }
  .story-facts {
    gap:18px;
    font-size:8px;
    flex-wrap:wrap
  }
  .story-facts b {
    font-size:20px
  }
  .memory-poster-wrap {
    position:absolute;
    right:-15px;
    bottom:-10px;
    width:70%;
    margin:0;
    opacity:.8
  }
  .poster-caption {
    display:none
  }
  .memory-preparation {
    padding:20px;
    border-radius:15px
  }
  .memory-character-btn .memory-portrait {
    width:75px;
    height:90px
  }
  .memory-character-detail {
    min-height:150px
  }
  .memory-character-detail p {
    font-size:11px
  }
  .memory-ability-pair small {
    font-size:9px
  }
  .memory-primary {
    min-height:48px
  }
  .section-heading {
    display:block;
    padding-top:22px
  }
  .section-heading h2 {
    font-size:23px;
    margin:10px 0
  }
  .section-heading>p {
    font-size:9px
  }
  .memory-acts {
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .memory-act-card {
    min-height:240px;
    padding:21px 17px 15px
  }
  .memory-act-card h3 {
    font-size:22px;
    margin-top:27px
  }
  .memory-act-card p {
    font-size:9px;
    min-height:55px
  }
  .memory-act-card footer {
    font-size:8px
  }
  .memory-guide {
    grid-template-columns:1fr;
    padding:25px;
    gap:5px;
    margin:30px 0
  }
  .memory-guide h2 {
    font-size:24px
  }
  .memory-guide>p {
    font-size:11px;
    margin-top:12px
  }
  .memory-guide details {
    margin-top:15px
  }
  .memory-footer {
    font-size:7px;
    letter-spacing:0
  }
  .memory-footer>span {
    display:none
  }
  .memory-overlay {
    padding:10px
  }
  .memory-dialog {
    max-height:calc(100dvh - 20px);
    border-radius:14px
  }
  .lobby-dialog {
    padding:45px 23px 26px
  }
  .lobby-dialog h2 {
    font-size:25px
  }
  .room-code {
    font-size:29px;
    letter-spacing:8px;
    padding:13px
  }
  .memory-party {
    gap:8px
  }
  .memory-party>div {
    display:block
  }
  .memory-party small {
    font-size:8px
  }
  .memory-party .memory-portrait {
    height:75px
  }
  .tree-dialog {
    height:calc(100dvh - 20px)
  }
  .tree-header {
    padding:19px 17px 12px
  }
  .tree-header h2 {
    font-size:24px;
    margin:9px 0
  }
  .tree-header p {
    font-size:8px;
    max-width:210px
  }
  .tree-wallet {
    padding-right:35px
  }
  .tree-wallet b {
    font-size:30px
  }
  .dialog-close {
    right:12px;
    top:13px;
    width:30px;
    height:30px;
    font-size:21px
  }
  .tree-character-tabs {
    padding:0 17px 12px;
    gap:6px
  }
  .tree-character-tabs button {
    padding:8px 10px;
    font-size:10px;
    flex:1;
    justify-content:center
  }
  .tree-character-tabs small {
    font-size:7px
  }
  .tree-body {
    display:flex;
    flex-direction:column;
    overflow:auto;
    min-height:0
  }
  .tree-map-wrap {
    min-height:325px;
    max-height:48dvh;
    flex-shrink:0;
    border-bottom:1px solid var(--m-line)
  }
  .tree-inspector {
    overflow:visible;
    padding:18px;
    border:0
  }
  .tree-node-detail h3 {
    font-size:20px;
    margin:10px 0
  }
  .tree-node-detail p {
    font-size:10px
  }
  .tree-weapons {
    grid-template-columns:1fr 1fr
  }
  .tree-weapon {
    padding:7px;
    gap:5px
  }
  .tree-weapon b {
    font-size:9px
  }
  .tree-weapon small {
    font-size:7px
  }
  .tree-weapon img {
    width:32px;
    height:32px
  }
  .tree-bottom {
    padding:11px 16px;
    gap:10px
  }
  .tree-bottom span {
    font-size:7px
  }
  .tree-bottom button {
    font-size:10px
  }
  .memory-hud-top {
    left:10px;
    right:10px;
    top:max(9px,env(safe-area-inset-top));
    gap:8px
  }
  .memory-stage-mark {
    padding:7px 10px;
    column-gap:8px
  }
  .memory-stage-mark>span {
    font-size:6px;
    letter-spacing:1px
  }
  .memory-stage-mark b {
    font-size:12px
  }
  .memory-stage-mark small {
    font-size:7px
  }
  .memory-stage-progress {
    gap:3px;
    padding:7px 8px
  }
  .memory-stage-progress i {
    width:7px;
    height:4px
  }
  .memory-stage-progress i.boss {
    height:6px;
    width:6px;
    margin:0 2px
  }
  .memory-hud-tools {
    gap:5px
  }
  .memory-hud-tools button {
    width:30px;
    height:30px;
    font-size:12px
  }
  .memory-vitals {
    left:12px;
    bottom:169px;
    min-width:185px;
    max-width:215px;
    padding:10px
  }
  .memory-vitals>div:first-child {
    font-size:10px
  }
  .memory-vitals>div:first-child>span {
    font-size:9px
  }
  .memory-vitals-meta {
    font-size:8px;
    gap:8px
  }
  .memory-combat-objective {
    font-size:7px;
    bottom:9px;
    padding:6px 10px;
    max-width:94%;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .memory-boss-hud {
    left:10%;
    top:72px;
    width:80%;
    padding:8px 12px
  }
  .memory-boss-hud b {
    font-size:11px
  }
  .memory-boss-hud small {
    font-size:8px
  }
  .memory-boss-hud span {
    font-size:8px
  }
  .memory-action-buttons {
    bottom:28px;
    right:12px;
    gap:6px;
    align-items:end;
    flex-wrap:wrap;
    width:177px;
    justify-content:end
  }
  .memory-action-buttons button {
    width:48px;
    height:48px
  }
  .memory-action-buttons .ultimate-action {
    width:57px;
    height:57px;
    margin:0
  }
  .memory-action-buttons button[data-memory-action=attack],.memory-action-buttons button[data-memory-action=ranged] {
    width:55px;
    height:55px
  }
  .memory-action-buttons b {
    font-size:8px
  }
  .memory-action-buttons kbd {
    font-size:6px
  }
  .memory-action-buttons small {
    font-size:6px
  }
  .memory-stick {
    display:block;
    width:92px;
    height:92px;
    left:17px;
    bottom:36px
  }
  .memory-stick>span {
    left:28px;
    top:28px;
    width:34px;
    height:34px
  }
  .aim-stick {
    left:auto;
    right:46px;
    bottom:168px;
    width:80px;
    height:80px
  }
  .aim-stick>span {
    left:24px;
    top:24px;
    width:30px;
    height:30px
  }
  .intermission-dialog {
    padding:30px 23px
  }
  .intermission-dialog h2 {
    font-size:23px
  }
  .intermission-dialog p {
    font-size:11px
  }
  .memory-clear-emblem {
    font-size:55px
  }
  .memory-transition h2 {
    font-size:39px;
    letter-spacing:5px
  }
  .memory-transition p {
    font-size:11px
  }
  .transition-rings {
    width:380px;
    height:380px
  }
  .memory-report {
    padding:22px 17px
  }
  .memory-report-heading {
    gap:12px;
    margin:17px 0
  }
  .memory-report-heading h2 {
    font-size:25px
  }
  .memory-report-heading p {
    font-size:10px
  }
  .memory-report-heading>div:first-child>span {
    font-size:9px
  }
  #memoryReportPortrait .memory-portrait {
    height:105px;
    width:85px
  }
  .memory-report-score {
    grid-template-columns:1fr;
    padding:17px
  }
  .memory-report-score>div>b {
    font-size:53px
  }
  .memory-report-score dl {
    justify-content:start;
    gap:33px;
    margin-top:15px
  }
  .memory-report-score dd {
    font-size:21px
  }
  .memory-report-metrics {
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:18px 0
  }
  .memory-report-metrics>div {
    padding:12px
  }
  .memory-report-metrics b {
    font-size:25px
  }
  .memory-report-team {
    font-size:9px
  }
  .memory-report footer {
    flex-wrap:wrap;
    gap:8px
  }
  .memory-report footer .memory-primary {
    flex:1 1 100%;
    order:-1
  }
  .memory-report footer button {
    font-size:11px
  }
  .pause-dialog {
    padding:35px 22px
  }
  .pause-dialog h2 {
    font-size:26px
  }
  .memory-toast {
    font-size:10px;
    padding:10px 15px;
    min-width:200px;
    bottom:17px
  }
}
@media(hover:none) and (min-width:741px) {
  .memory-stick {
    display:block
  }
  .memory-vitals {
    bottom:155px
  }
  .memory-action-buttons {
    right:22px
  }
  .aim-stick {
    right:230px;
    bottom:112px
  }
}
@media(max-height:520px) and (orientation:landscape) {
  .memory-vitals {
    left:12px;
    bottom:100px;
    min-width:170px;
    padding:9px
  }
  .memory-vitals-meta {
    font-size:7px
  }
  .memory-vitals>div:first-child {
    font-size:9px
  }
  .memory-boss-hud {
    top:67px;
    left:30%;
    width:40%
  }
  .memory-stage-progress {
    margin:0 auto
  }
  .memory-action-buttons {
    bottom:16px;
    right:14px;
    width:auto;
    flex-wrap:nowrap;
    gap:6px
  }
  .memory-action-buttons button {
    height:49px;
    width:49px
  }
  .memory-action-buttons button[data-memory-action=attack],.memory-action-buttons button[data-memory-action=ranged] {
    height:49px;
    width:49px
  }
  .memory-action-buttons .ultimate-action {
    height:58px;
    width:58px
  }
  .memory-stick {
    left:20px;
    bottom:17px;
    width:77px;
    height:77px
  }
  .memory-stick>span {
    left:23px;
    top:23px;
    width:29px;
    height:29px
  }
  .aim-stick {
    left:auto;
    right:325px;
    bottom:20px;
    width:68px;
    height:68px
  }
  .aim-stick>span {
    left:19px;
    top:19px;
    width:28px;
    height:28px
  }
  .memory-combat-objective {
    bottom:3px;
    font-size:6px;
    padding:3px 9px
  }
  .tree-body {
    display:grid;
    grid-template-columns:1fr 255px;
    overflow:hidden
  }
  .tree-map-wrap {
    max-height:none;
    height:100%;
    min-height:0
  }
  .tree-inspector {
    overflow:auto
  }
  .memory-hud-top {
    top:8px
  }
  .intermission-dialog {
    padding:25px;
    max-width:650px
  }
  .memory-clear-emblem {
    display:none
  }
  .intermission-dialog h2 {
    font-size:23px;
    margin:9px
  }
  .memory-clear-reward {
    padding:9px;
    margin:10px
  }
  .memory-next-stage {
    margin:11px
  }
  .intermission-dialog>small {
    margin-top:10px
  }
  .memory-transition h2 {
    font-size:37px;
    margin:15px
  }
  .memory-transition p {
    font-size:11px
  }
}
@media(max-width:360px) {
  .memory-nav nav {
    gap:8px;
    font-size:8px
  }
  .memory-brand small {
    display:none
  }
  .memory-intro {
    display:block
  }
  .edition-label {
    display:block;
    margin-top:8px
  }
  .memory-story h1 {
    font-size:69px
  }
  .memory-story h1>i {
    left:218px
  }
  .memory-preparation {
    padding:16px
  }
  .memory-character-btn .memory-portrait {
    height:77px;
    width:62px
  }
  .tree-entry>span:nth-child(2)>small {
    max-width:150px
  }
  .tree-entry>strong {
    font-size:23px
  }
  .memory-stage-progress {
    display:none
  }
  .memory-stage-mark {
    margin-right:auto
  }
  .memory-config-row {
    gap:8px
  }
  .memory-acts {
    gap:8px
  }
  .memory-act-card {
    padding:19px 12px 14px
  }
  .memory-act-card h3 {
    font-size:20px
  }
  .memory-act-card footer {
    font-size:7px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .memory-transition .transition-rule {
    transform:none
  }
}
.boss-guide {
  margin-top:15px;
  text-align:left;
  border:1px solid var(--m-line);
  border-radius:8px;
  padding:11px;
  font-size:10px
}
.boss-guide summary {
  color:var(--m-gold);
  font-size:10px
}
.boss-guide ul {
  padding-left:19px;
  color:var(--m-muted);
  font-size:10px;
  line-height:1.8
}
.memory-clear-reward b {
  font-family:Georgia,serif;
  font-size:22px
}
.tree-weapon-note {
  font-size:9px;
  color:var(--m-muted);
  line-height:1.8;
  margin:10px 0 0
}
.tree-root {
  position:absolute;
  top:0;
  left:325px;
  width:100px;
  height:59px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid #d9bd7b88;
  border-radius:50%;
  background:radial-gradient(#cfaf6d20,#13242d);
  box-shadow:0 0 24px #b7a46a15
}
.tree-root i {
  font-size:23px;
  font-style:normal;
  color:var(--m-gold);
  line-height:1
}
.tree-root b {
  font-size:8px;
  color:#b8c7c3;
  font-weight:500
}

/* Recollection presentation layer. This stylesheet belongs to memory.html only. */
body {
  --memory-scene:#efc57b;
  --memory-scene-2:#8dded3;
  background:radial-gradient(ellipse at 60% -20%,#23404a 0,transparent 55%),#0b131d;
}
body[data-memory-act="0"] { --memory-scene:#ffafbd; --memory-scene-2:#8ce1c3; }
body[data-memory-act="1"] { --memory-scene:#7aeaff; --memory-scene-2:#fc83d8; }
body[data-memory-act="2"] { --memory-scene:#ff8e86; --memory-scene-2:#fff0d9; }
body[data-memory-act="3"] { --memory-scene:#f3d296; --memory-scene-2:#9bf2e4; }
.memory-home { background:radial-gradient(ellipse at 8% 17%,#31535f36,transparent 43%),radial-gradient(ellipse at 87% 8%,#a0794824,transparent 40%); }
.memory-nav { position:relative; }
.memory-nav:after { content:''; position:absolute; left:0; bottom:-1px; width:96px; height:1px; background:linear-gradient(90deg,#f4dca5,transparent); }
.memory-nav a,.memory-footer a { transition:color .18s ease; }
.memory-nav a:hover,.memory-footer a:hover { color:#f7dfaa; }
.memory-preparation {
  border-color:#c3b38766;
  background:radial-gradient(ellipse at 110% -20%,#b89c4d22,transparent 56%),linear-gradient(145deg,#23343edb,#111f2bf2);
  box-shadow:0 28px 72px #0005,inset 0 1px #fff1;
}
.preparation-top { padding-bottom:15px; border-bottom:1px solid #e6d3a11a; }
.preparation-top>span { letter-spacing:1px; }
.memory-character-btn { transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s; min-height:142px; overflow:hidden; }
.memory-character-btn:before { content:''; position:absolute; inset:0; background:radial-gradient(at 50% 25%,color-mix(in srgb,var(--role-color) 14%,transparent),transparent 72%); opacity:.35; pointer-events:none; }
.memory-character-btn:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--role-color) 70%,transparent); }
.memory-character-btn.selected { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--role-color) 60%,transparent),0 8px 24px #0003; }
.memory-character-btn.selected:before { opacity:1; }
.memory-character-btn.selected:after { width:18px; height:18px; top:7px; right:7px; display:grid; place-items:center; background:#091a2380; border:1px solid color-mix(in srgb,var(--role-color) 50%,transparent); border-radius:50%; font-size:10px; }
.memory-ability-pair article { border-top-color:#dfd5ae40; background:linear-gradient(150deg,#07151c99,#14242d55); }
.memory-config-row input,.memory-config-row select { min-height:44px; }
.tree-entry { box-shadow:inset 0 1px #fbe7b01c; transition:border-color .2s,background .2s; }
.tree-entry:hover { border-color:#eed49c; background:linear-gradient(100deg,#9f874244,#d7b76f13); }
.memory-primary { box-shadow:inset 0 1px #fff4,0 8px 24px #0002; transition:filter .18s,transform .18s; }
.memory-primary:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.memory-primary:active:not(:disabled),.memory-secondary:active:not(:disabled) { transform:translateY(1px); }
.memory-secondary,.quiet-btn { min-height:44px; transition:border-color .18s,background .18s; }
.memory-secondary:hover:not(:disabled),.quiet-btn:hover:not(:disabled) { border-color:#dbc28a; background-color:#d7c49412; }
.memory-act-card { background:linear-gradient(145deg,color-mix(in srgb,var(--act-color) 11%,#14212c),#0d1924 78%); box-shadow:inset 0 1px #fff1,0 10px 30px #0002; }
.memory-act-card:before { content:''; position:absolute; width:110px; height:110px; right:-25px; top:22px; border:1px solid color-mix(in srgb,var(--act-color) 32%,transparent); transform:rotate(35deg); border-radius:24px; z-index:-1; }
.memory-act-card:nth-child(1):after { content:'✧'; color:#ff99b8; text-shadow:0 0 45px #fca9ae55; }
.memory-act-card:nth-child(2):after { content:'◎'; color:#7eeaff; text-shadow:20px 0 #f375bd44; }
.memory-act-card:nth-child(3):after { content:''; width:115px; height:115px; border-radius:50%; background:#fff0dc; opacity:.13; right:-26px; top:30px; box-shadow:0 70px 0 -28px #eb344d; }
.memory-act-card:nth-child(3):before { border-radius:0; transform:rotate(-17deg); width:18px; height:100px; right:49px; top:58px; border:0; background:#050b14; opacity:.6; }
.memory-act-card:nth-child(4):after { content:'◇'; color:#f3d296; text-shadow:-25px 18px #ee6e9840,25px 18px #6de7df40; }
.memory-overlay { background:radial-gradient(ellipse at 50% 35%,#17263070,#03070ee6 80%); backdrop-filter:blur(12px); }
.memory-dialog { background:radial-gradient(ellipse at 100% 0,#c6a96013,transparent 60%),linear-gradient(145deg,#20323e,#101c28); border-color:#c9b48470; box-shadow:0 35px 120px #000b,inset 0 1px #fff1; }
.memory-dialog:before { content:''; position:absolute; left:22px; right:22px; top:0; height:1px; background:linear-gradient(90deg,transparent,#f5db9a88,transparent); pointer-events:none; }
.dialog-close { width:44px; height:44px; min-height:44px; border:1px solid #d9c59330; background:#0b192788; z-index:5; }
.tree-dialog { border-radius:17px; }
.tree-header { background:linear-gradient(110deg,#d8bb7810,transparent 62%); border-bottom:1px solid #e7d19e0a; }
.tree-character-tabs button { min-height:44px; border-radius:7px; }
.tree-map-wrap { background-image:radial-gradient(ellipse at 50% 35%,#28414e60,transparent 70%),radial-gradient(circle,#e4d09b20 1px,transparent 1px),linear-gradient(#091722,#0a1722); background-size:auto,27px 27px,auto; }
.tree-branch-labels { background:linear-gradient(110deg,#142835f5,#10202bef); border:1px solid #b5bbac1a; box-shadow:0 8px 20px #07111a80; }
.tree-node { box-shadow:0 6px 20px #0005,inset 0 1px #fff1; transition:border-color .18s,box-shadow .18s,background .18s; }
.tree-node:hover { border-color:#e5d3a3; box-shadow:0 0 0 1px #e5d3a330,0 8px 25px #0006; }
.tree-node.selected { outline-color:#f7dfa4; box-shadow:0 0 24px #d7ba6728,0 8px 25px #0005; }
.tree-node.unlocked { box-shadow:inset 0 1px #fff2,0 0 18px color-mix(in srgb,var(--branch-color) 10%,transparent); }
.tree-weapon { min-height:52px; transition:background .18s,border-color .18s; }
.tree-weapon.selected { box-shadow:inset 2px 0 #f0d49b; }
.tree-inspector { background:linear-gradient(135deg,#07131eab,#142531bb); }
.tree-bottom { background:#0c1a24e8; }
.tree-equipment summary,.boss-guide summary { min-height:30px; padding-top:4px; }
.tree-equipment select { min-height:44px; }
.room-code { background:linear-gradient(110deg,#9c864320,#8ac9bf0b); box-shadow:inset 0 1px #ffe6aa16; }
.memory-party>div { background:radial-gradient(at 50% 0,#8bd3c90a,transparent 80%); border-color:#cbbd8a33; }
.memory-clear-emblem { width:104px; height:104px; margin:5px auto 16px; display:grid; place-items:center; font-size:57px; border:1px solid #d9c38c66; border-radius:50%; outline:1px solid #d9c38c1a; outline-offset:8px; background:radial-gradient(#cdb67422,transparent 70%); }
.memory-clear-reward { border-color:#9adecc55; background:linear-gradient(110deg,#72c8b51d,#8ad5ca09); }
.memory-report-score { background:radial-gradient(at 0 0,#b4a06422,transparent 70%),linear-gradient(115deg,#4b493024,#718e7c08); }
.memory-report-metrics>div { background:linear-gradient(145deg,#1c323e,#132530); border-top-color:#d9c49155; }
.memory-report-team tr.self td:first-child { box-shadow:inset 2px 0 #a0dbd0; }
.memory-report>footer { background:linear-gradient(transparent,#14222b); }
.memory-toast { background:linear-gradient(110deg,#f0dfb7,#dcc493); border:1px solid #fff0d3; box-shadow:0 10px 35px #0005; }

/* A narrow command rail leaves the arena to the characters and the attacks. */
.memory-hud-top { left:max(18px,env(safe-area-inset-left)); right:max(18px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); gap:14px; align-items:start; }
.memory-stage-mark { border-color:color-mix(in srgb,var(--memory-scene) 45%,#1c3440); background:linear-gradient(120deg,#06121ff0,#10222de0); box-shadow:0 4px 20px #0003,inset 2px 0 var(--memory-scene); min-height:44px; padding:7px 12px; }
.memory-stage-mark>span { color:var(--memory-scene); font-size:8px; }
.memory-stage-mark b { font-size:13px; letter-spacing:.4px; }
.memory-stage-mark small { font-size:8px; }
.memory-stage-progress { min-height:28px; align-items:center; margin:8px auto 0; background:#06121fce; border:1px solid #bed0c829; padding:8px 13px; box-shadow:0 3px 14px #0002; }
.memory-stage-progress i.current { background:var(--memory-scene); box-shadow:0 0 8px color-mix(in srgb,var(--memory-scene) 65%,transparent); }
.memory-hud-tools { gap:6px; }
.memory-hud-tools button { height:44px; width:44px; border-radius:11px; background:#081925e8; border-color:#b9d0c94d; box-shadow:inset 0 1px #fff1; }
.memory-hud-tools button:active { background:#354a4b; }
.memory-boss-hud { top:70px; left:50%; transform:translateX(-50%); width:min(470px,48%); padding:9px 13px 10px; background:linear-gradient(110deg,#0a1421f2,#17222eed); border-color:color-mix(in srgb,var(--memory-scene) 55%,#39414c); box-shadow:0 6px 28px #0005; border-radius:8px; }
.memory-boss-hud>div { gap:10px; margin-bottom:7px; }
.memory-boss-hud b { font-size:12px; color:#fff0d7; }
.memory-boss-hud small { font-size:9px; color:#efc2bd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.memory-boss-hud span { font-size:8px; }
.memory-boss-hud progress { height:5px; background:#1f0b18; }
.memory-boss-hud progress::-webkit-progress-value { background:linear-gradient(90deg,#dc4d6a,var(--memory-scene)); }
.memory-boss-hud progress::-moz-progress-bar { background:var(--memory-scene); }
.memory-vitals { bottom:max(24px,env(safe-area-inset-bottom)); left:max(22px,env(safe-area-inset-left)); min-width:218px; max-width:260px; padding:10px 12px; border-radius:9px; background:linear-gradient(110deg,#061421ef,#11232de8); border-color:#92bcab55; box-shadow:0 4px 22px #0004,inset 2px 0 #91dfc4; }
.memory-vitals>div:first-child { font-size:10px; margin-bottom:7px; gap:12px; }
.memory-vitals>div:first-child>b { max-width:160px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.memory-vitals>div:first-child>span { font-size:10px; font-variant-numeric:tabular-nums; }
.memory-vitals progress { height:5px; }
.memory-vitals progress::-webkit-progress-value { background:linear-gradient(90deg,#4db7a1,#b5eed2); }
.memory-vitals-meta { gap:10px; font-size:8px; margin-top:7px; font-variant-numeric:tabular-nums; }
.memory-vitals-meta>span:empty { display:none; }
#memorySquad { font-size:8px; margin-top:4px; }
#memorySquad:empty { display:none; }
.memory-combat-objective { bottom:max(8px,env(safe-area-inset-bottom)); padding:5px 12px; font-size:8px; color:#e0e9df; border-color:#bec8ad2a; background:#07141fd9; letter-spacing:.3px; max-width:calc(100vw - 40px); overflow:hidden; text-overflow:ellipsis; }
.memory-action-buttons { right:max(22px,env(safe-area-inset-right)); bottom:max(22px,env(safe-area-inset-bottom)); gap:8px; align-items:end; }
.memory-action-buttons button { width:60px; height:60px; border-color:#bad8ce80; background:radial-gradient(at 50% 0,#335156,#0b1b28 80%); box-shadow:inset 0 1px #fff2,0 5px 18px #0005; gap:2px; }
.memory-action-buttons button b { font-size:9px; padding:0 5px; text-align:center; line-height:1.25; overflow-wrap:anywhere; max-width:100%; }
.memory-action-buttons button kbd { font-size:8px; letter-spacing:1px; color:#c7dad5; }
.memory-action-buttons button small { font-size:8px; color:#f0d6a0; font-variant-numeric:tabular-nums; }
.memory-action-buttons button:after { background:linear-gradient(transparent,#020812d9 22%); border-top:1px solid #cfddc42b; }
.memory-action-buttons button.ready { border-color:#ead095; }
.memory-action-buttons button.held { transform:scale(.94); background:radial-gradient(at 50% 0,#a58c4e,#394b3f 80%); box-shadow:inset 0 0 0 2px #f4e6b748,0 0 22px #f1d09325; }
.memory-action-buttons button:disabled { opacity:.68; }
.memory-action-buttons .ultimate-action { width:70px; height:70px; margin:0; border-color:#e7c486; background:radial-gradient(at 50% 10%,#8e743b,#302f2a 75%); box-shadow:inset 0 0 0 3px #0a152c88,0 4px 25px #0005; }
.memory-action-buttons .ultimate-action.ready { border-color:#ffe6a4; box-shadow:inset 0 0 0 3px #0a152c88,0 0 20px #f6d17b3b; }
.memory-stick { background:radial-gradient(#72b5aa14,#0a192760); border-color:#c5e3d85c; box-shadow:inset 0 0 0 8px #d6e9ce04,0 3px 22px #0002; }
.memory-stick:before,.memory-stick:after { content:''; position:absolute; background:#e0e9d72a; pointer-events:none; }
.memory-stick:before { width:1px; top:12%; bottom:12%; left:50%; }
.memory-stick:after { height:1px; left:12%; right:12%; top:50%; }
.memory-stick>span { background:radial-gradient(at 40% 30%,#d8efca70,#73b4a75c); border-color:#dcebd9a6; box-shadow:0 2px 8px #0003; z-index:1; }
.memory-stick small { color:#d9e2d8; font-size:8px; text-shadow:0 1px 3px #000; }

/* Four chapter gates: confection glass, club laser, red sea, fractured union. */
.memory-transition { isolation:isolate; background:#060e18; --gate-a:#efacbb; --gate-b:#98e8c7; }
.memory-transition:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,#18303966,transparent 66%),linear-gradient(#06101aa6,transparent 35%,#040912cc 90%); z-index:-1; }
.memory-transition:after { content:''; position:absolute; inset:25px; border:1px solid #e4d4a61e; border-radius:2px; pointer-events:none; }
.transition-world { position:absolute; inset:0; overflow:hidden; z-index:-2; pointer-events:none; }
.transition-scene { display:none; position:absolute; inset:0; }
.transition-scene>i { position:absolute; display:block; font-style:normal; }
.transition-rings { opacity:.4; border-color:#dfc99240; box-shadow:0 0 100px #cbd6b912,inset 0 0 90px #c9d6b50a; }
.memory-transition h2 { text-shadow:0 4px 38px #0009; }
.memory-transition>span,.memory-transition>small,.memory-transition p { text-shadow:0 2px 12px #000; }
.memory-transition>span { font-size:10px; letter-spacing:5px; }
.memory-transition p { color:#e0e8e5; font-size:13px; line-height:1.9; }
.memory-transition .transition-rule { height:2px; background:linear-gradient(90deg,transparent,var(--gate-a),var(--gate-b),transparent); transform-origin:center; animation:memoryGateRule 1.6s cubic-bezier(.2,.8,.2,1) both; }
.memory-transition[data-memory-act="0"] { --gate-a:#ffb5c5; --gate-b:#8fe7c0; }
.memory-transition[data-memory-act="0"] .gate-dessert { display:block; background:radial-gradient(ellipse at 50% 100%,#8a3153,#2b253a 55%,#10131f); }
.gate-dessert .gate-orbit { width:min(68vw,550px); aspect-ratio:1; top:50%; left:50%; translate:-50% -50%; border-radius:50%; border:22px solid #ffc8d329; box-shadow:0 0 0 3px #fff0d43a,inset 0 0 0 12px #aae8c922,0 0 80px #ff8dbd24; background:conic-gradient(from 20deg,#c7ffe011,transparent,#ffd6c32b,transparent,#c7ffe011); animation:memoryDessertOrbit 4s cubic-bezier(.18,.7,.2,1) both; }
.gate-dessert .gate-shard { width:135px; height:135px; background:linear-gradient(135deg,#ffd2de80,#f486bd0a); border:1px solid #ffdce3aa; transform:rotate(27deg); border-radius:28% 3%; top:14%; left:18%; box-shadow:inset 4px 4px 20px #fff4,0 0 40px #f790bc22; }
.gate-dessert .gate-shard.second { width:180px; height:180px; left:auto; right:12%; top:auto; bottom:8%; border-color:#a8f6d2aa; background:linear-gradient(135deg,#a2e8c681,#5dd7ae08); transform:rotate(-24deg); }
.gate-dessert .gate-spark { width:5px; height:5px; top:24%; left:65%; border-radius:50%; background:#fff2d9; box-shadow:-230px 220px #ffc2d0,115px 210px #a5f4d6,-130px -45px #ffe6bf,90px -20px #ffd0e7,-190px 60px #c4f5dc; }
.memory-transition[data-memory-act="1"] { --gate-a:#65efff; --gate-b:#ff78d3; }
.memory-transition[data-memory-act="1"] .gate-neon { display:block; background:radial-gradient(ellipse at 50% 45%,#1c315c,#160d2d 60%,#080b18); }
.gate-neon .gate-orbit { width:min(63vw,490px); aspect-ratio:1; left:50%; top:50%; translate:-50% -50%; border-radius:50%; border:2px solid #86f3ffd9; box-shadow:0 0 0 18px #5bbec114,0 0 0 20px #f889c530,0 0 90px #4aa5d738,inset 0 0 50px #64cfed18; background:repeating-radial-gradient(circle,transparent 0 18px,#82dced0b 19px 20px); animation:memoryNeonGate 3.8s cubic-bezier(.16,.7,.2,1) both; }
.gate-neon .gate-beam { height:160%; width:100px; left:15%; top:-30%; background:linear-gradient(90deg,transparent,#5adff925,transparent); border-right:1px solid #7eeeff80; transform:rotate(27deg); }
.gate-neon .gate-beam.second { left:auto; right:16%; background:linear-gradient(90deg,transparent,#ff65cf20,transparent); border-color:#ff94dd70; transform:rotate(-27deg); }
.gate-neon .gate-floor { left:-50%; right:-50%; height:70%; bottom:-30%; transform:perspective(320px) rotateX(58deg); background:linear-gradient(transparent,#4b80a944),repeating-linear-gradient(90deg,transparent 0 69px,#4ad8ff2b 70px 71px),repeating-linear-gradient(transparent 0 69px,#ef5be52b 70px 71px); mask-image:linear-gradient(transparent,#000 60%); }
.memory-transition[data-memory-act="2"] { --gate-a:#ff605c; --gate-b:#fff0dc; background:#17050c; }
.memory-transition[data-memory-act="2"]:before { background:linear-gradient(90deg,#09070da8,#100710a8 33%,#1007108f 55%,#10071026 82%,#10071035),linear-gradient(#09080b3d,transparent 35%,#130613bf 95%); }
.memory-transition[data-memory-act="2"] h2 { text-shadow:0 2px 5px #10050f,0 0 28px #10050f; }
.memory-transition[data-memory-act="2"] p { background:linear-gradient(90deg,transparent,#210811b8 18%,#210811b8 82%,transparent); padding:7px 30px; border-radius:8px; }
.memory-transition[data-memory-act="2"] .gate-blood .gate-moon { left:77%; top:24%; width:min(44vw,360px); }
.memory-transition[data-memory-act="2"] .gate-blood { display:block; background:linear-gradient(#140d16 0%,#39111c 47%,#df1e35 48%,#8e1026 68%,#270b18 100%); }
.gate-blood .gate-moon { width:min(55vw,430px); aspect-ratio:1; border-radius:50%; background:radial-gradient(at 35% 25%,#fff9e8,#e5c8bc 80%); left:50%; top:48%; translate:-50% -50%; box-shadow:0 0 80px #f3dbbd22,inset -25px -18px 45px #78475818; animation:memoryBloodMoon 3.9s cubic-bezier(.14,.75,.22,1) both; }
.gate-blood .gate-sea { inset:49% -15% -50%; transform:perspective(450px) rotateX(35deg); background:repeating-linear-gradient(176deg,transparent 0 23px,#ff8e7b44 24px 25px,transparent 26px 40px),radial-gradient(ellipse at 50% 0,#ff786355,transparent 40%); mask-image:linear-gradient(transparent,#000 12%,#000 80%,transparent); }
.gate-blood .gate-monolith { width:43px; height:34%; left:20%; top:37%; background:linear-gradient(90deg,#080b13,#1b1420 60%,#e0d4c54d 63%,#0a0913 66%); transform:skewY(-12deg) rotate(-9deg); box-shadow:12px 30px 0 #3a0e1855; }
.gate-blood .gate-monolith.second { left:auto; right:17%; width:27px; height:25%; top:28%; transform:rotate(13deg); }
.gate-blood .gate-sigil { left:50%; top:50%; translate:-50% -50%; width:min(68vw,530px); height:1px; background:linear-gradient(90deg,transparent,#fff3df80,transparent); box-shadow:0 5px #fff3df1a; }
.memory-transition[data-memory-act="2"] .transition-rings { border-radius:0; width:290px; height:290px; border-color:#fff4df26; rotate:45deg; box-shadow:none; opacity:.5; }
.memory-transition[data-memory-act="2"] .transition-rings:before { border-radius:0; border-style:solid; border-color:#fff0dd22; }
.memory-transition[data-memory-act="2"] .transition-rings:after { border:0; }
.memory-transition[data-memory-act="3"] { --gate-a:#ffd09e; --gate-b:#87f8df; }
.memory-transition[data-memory-act="3"] .gate-confluence { display:block; background:#101b27; }
.gate-confluence .gate-pane { inset:0; clip-path:polygon(0 0,65% 0,50% 50%,0 80%); background:radial-gradient(at 10% 0,#b6537c90,#422939 65%,#101925); border-bottom:1px solid #f8d3ab; }
.gate-confluence .gate-pane.second { clip-path:polygon(65% 0,100% 0,100% 90%,50% 50%); background:radial-gradient(at 100% 0,#426f9790,#232a4b 60%,#101925); }
.gate-confluence .gate-pane.third { clip-path:polygon(0 80%,50% 50%,100% 90%,100% 100%,0 100%); background:linear-gradient(#6b1524,#c32436 65%,#4e152c); }
.gate-confluence .gate-fracture { width:1px; height:140%; left:50%; top:50%; transform-origin:top; rotate:59deg; background:linear-gradient(#fff2ca,#e9c47f55,transparent); box-shadow:0 0 18px #fff0bb66; }
.gate-confluence .gate-fracture.second { rotate:-40deg; }
.gate-confluence .gate-fracture.third { rotate:178deg; }
.gate-confluence .gate-orbit { width:450px; height:450px; top:50%; left:50%; translate:-50% -50%; border:1px solid #e3d19a70; border-radius:50%; box-shadow:0 0 0 26px #e8c98408,0 0 0 27px #a0e8d91c,inset 0 0 80px #efd1b41a; animation:memoryConfluenceGate 4s cubic-bezier(.16,.7,.2,1) both; }
@keyframes memoryGateRule { from { transform:scaleX(.05); opacity:0; } to { transform:scaleX(1); opacity:1; } }
@keyframes memoryDessertOrbit { from { opacity:0; transform:rotate(-25deg) scale(.65); } to { opacity:1; transform:rotate(15deg) scale(1.12); } }
@keyframes memoryNeonGate { from { opacity:0; transform:scale(1.4) rotate(-35deg); } 25% { opacity:1; } to { opacity:.75; transform:scale(.95) rotate(15deg); } }
@keyframes memoryBloodMoon { from { opacity:0; transform:translateY(45px) scale(.92); } 30% { opacity:1; } to { opacity:1; transform:translateY(-8px) scale(1.04); } }
@keyframes memoryConfluenceGate { from { opacity:0; transform:scale(.62) rotate(-40deg); } to { opacity:1; transform:scale(1.12) rotate(15deg); } }

@media(max-width:740px) {
  .memory-character-btn { min-height:139px; }
  .preparation-top { font-size:14px; gap:8px; margin-bottom:15px; }
  .preparation-top small { font-size:8px; white-space:nowrap; }
  .memory-nav>.quiet-btn { min-width:44px; min-height:44px; }
  .dialog-close { width:44px; height:44px; min-height:44px; top:10px; right:10px; }
  .tree-wallet { padding-right:43px; }
  .tree-header { padding-top:18px; }
  .tree-character-tabs button { padding:8px; min-height:44px; }
  .tree-equipment summary,.boss-guide summary { min-height:44px; }
  .tree-bottom button { min-height:44px; }
  .memory-hud-top { left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); top:max(9px,env(safe-area-inset-top)); gap:7px; }
  .memory-stage-mark { padding:7px 10px; column-gap:7px; max-width:calc(100% - 103px); margin-right:auto; }
  .memory-stage-mark>span { font-size:7px; letter-spacing:.7px; }
  .memory-stage-mark b { font-size:11px; max-width:174px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .memory-stage-mark small { font-size:7px; }
  .memory-hud-tools { gap:5px; }
  .memory-hud-tools button { width:44px; height:44px; font-size:15px; border-radius:10px; }
  .memory-stage-progress { position:absolute; top:51px; left:50%; transform:translateX(-50%); margin:0; padding:5px 11px; min-height:22px; gap:4px; }
  .memory-stage-progress i { width:10px; height:4px; }
  .memory-stage-progress i.boss { width:6px; height:6px; margin:0 3px; }
  .memory-boss-hud { top:92px; left:50%; width:calc(100% - 24px); padding:8px 11px; }
  .memory-boss-hud>div { gap:8px; margin-bottom:6px; }
  .memory-boss-hud b { font-size:11px; }
  .memory-boss-hud small { font-size:8px; }
  .memory-boss-hud span { font-size:8px; }
  .memory-vitals { left:max(12px,env(safe-area-inset-left)); bottom:calc(156px + env(safe-area-inset-bottom)); min-width:190px; max-width:214px; padding:9px 11px; }
  .memory-vitals>div:first-child { font-size:9px; margin-bottom:6px; gap:9px; }
  .memory-vitals>div:first-child>b { max-width:130px; }
  .memory-vitals>div:first-child>span { font-size:9px; }
  .memory-vitals-meta { font-size:8px; gap:8px; margin-top:6px; }
  #memorySquad { font-size:7px; }
  .memory-combat-objective { bottom:calc(6px + env(safe-area-inset-bottom)); padding:4px 9px; font-size:7px; max-width:calc(100% - 24px); }
  .memory-action-buttons { bottom:calc(30px + env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); width:176px; gap:6px; display:grid; grid-template-columns:repeat(3,1fr); align-items:end; }
  .memory-action-buttons button { width:52px; height:52px; }
  .memory-action-buttons button[data-memory-action=attack],.memory-action-buttons button[data-memory-action=ranged] { width:52px; height:52px; }
  .memory-action-buttons button[data-memory-action=attack] { grid-column:1; grid-row:2; }
  .memory-action-buttons button[data-memory-action=ranged] { grid-column:2; grid-row:2; }
  .memory-action-buttons button[data-memory-action=dash] { grid-column:1; grid-row:1; }
  .memory-action-buttons button[data-memory-action=skill] { grid-column:2; grid-row:1; }
  .memory-action-buttons .ultimate-action { grid-column:3; grid-row:1/3; width:60px; height:60px; align-self:end; }
  .memory-action-buttons button b { font-size:8px; }
  .memory-action-buttons button kbd { font-size:7px; }
  .memory-action-buttons button small { font-size:7px; }
  .memory-stick { display:block; left:max(17px,env(safe-area-inset-left)); bottom:calc(37px + env(safe-area-inset-bottom)); width:94px; height:94px; }
  .memory-stick>span { left:29px; top:29px; width:34px; height:34px; }
  .aim-stick { left:auto; right:max(20px,env(safe-area-inset-right)); bottom:calc(162px + env(safe-area-inset-bottom)); width:82px; height:82px; }
  .aim-stick>span { left:25px; top:25px; width:30px; height:30px; }
  .memory-clear-emblem { width:79px; height:79px; font-size:45px; margin-bottom:18px; }
  .memory-transition:after { inset:14px; }
  .memory-transition>span { font-size:8px; letter-spacing:3px; }
  .memory-transition h2 { font-size:39px; letter-spacing:4px; }
  .memory-transition p { font-size:11px; padding:0 35px; }
  .memory-transition>small { letter-spacing:2px; font-size:8px; }
  .gate-dessert .gate-shard { left:-10%; top:16%; width:105px; height:105px; }
  .gate-dessert .gate-shard.second { width:130px; height:130px; right:-13%; bottom:17%; }
  .gate-neon .gate-orbit { width:82vw; }
  .gate-blood .gate-moon { width:81vw; }
  .memory-transition[data-memory-act="2"] .gate-blood .gate-moon { width:72vw; top:23%; left:80%; }
  .gate-blood .gate-monolith { left:7%; width:28px; height:23%; top:39%; }
  .gate-blood .gate-monolith.second { right:7%; width:20px; top:30%; }
  .gate-confluence .gate-orbit { width:340px; height:340px; }
}
@media(hover:none) and (min-width:741px) and (min-height:521px) {
  .memory-vitals { bottom:154px; }
  .memory-stick { bottom:28px; }
  .aim-stick { right:390px; bottom:28px; }
}
@media(max-height:520px) and (orientation:landscape) {
  .memory-hud-top { top:max(8px,env(safe-area-inset-top)); gap:10px; }
  .memory-stage-mark { min-height:44px; max-width:37%; }
  .memory-stage-mark b { font-size:11px; max-width:170px; }
  .memory-stage-mark small { font-size:7px; }
  .memory-stage-progress { position:static; margin:8px auto 0; transform:none; padding:6px 10px; min-height:26px; gap:4px; }
  .memory-stage-progress i { width:10px; height:4px; }
  .memory-hud-tools button { width:44px; height:44px; }
  .memory-boss-hud { top:59px; width:43%; padding:7px 11px; }
  .memory-boss-hud>div { margin-bottom:5px; gap:8px; }
  .memory-boss-hud b { font-size:10px; }
  .memory-boss-hud small { font-size:8px; }
  .memory-boss-hud span { font-size:7px; }
  .memory-vitals { left:max(112px,calc(env(safe-area-inset-left) + 98px)); bottom:calc(18px + env(safe-area-inset-bottom)); min-width:190px; max-width:208px; padding:8px 10px; }
  .memory-vitals>div:first-child { font-size:9px; margin-bottom:5px; }
  .memory-vitals>div:first-child>b { max-width:124px; }
  .memory-vitals-meta { margin-top:5px; gap:7px; font-size:7px; }
  #memorySquad { font-size:7px; line-height:1.4; margin-top:3px; }
  .memory-action-buttons { display:flex; width:auto; flex-wrap:nowrap; gap:6px; right:max(14px,env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); }
  .memory-action-buttons button,.memory-action-buttons button[data-memory-action=attack],.memory-action-buttons button[data-memory-action=ranged] { width:49px; height:49px; }
  .memory-action-buttons .ultimate-action { width:58px; height:58px; }
  .memory-action-buttons button b { font-size:8px; }
  .memory-action-buttons button kbd { font-size:6px; }
  .memory-action-buttons button small { font-size:7px; }
  .memory-stick { display:block; left:max(20px,env(safe-area-inset-left)); bottom:calc(21px + env(safe-area-inset-bottom)); width:77px; height:77px; }
  .memory-stick>span { left:23px; top:23px; width:29px; height:29px; }
  .aim-stick { left:auto; right:325px; width:68px; height:68px; bottom:calc(24px + env(safe-area-inset-bottom)); }
  .aim-stick>span { left:19px; top:19px; width:28px; height:28px; }
  .memory-stick small { bottom:-14px; font-size:7px; }
  .memory-combat-objective { bottom:2px; padding:2px 9px; font-size:6px; max-width:45%; }
  .memory-clear-emblem { display:none; }
  .memory-transition h2 { margin:13px 0; font-size:35px; }
  .memory-transition>small { margin-top:10px; }
  .memory-transition p { margin:0; }
  .memory-transition:after { inset:12px; }
  .gate-blood .gate-moon { width:260px; }
  .memory-transition[data-memory-act="2"] .gate-blood .gate-moon { width:220px; top:22%; left:78%; }
  .gate-confluence .gate-orbit { width:290px; height:290px; }
  .tree-header { padding:13px 20px 9px; }
  .tree-header h2 { font-size:23px; margin:3px 0; }
  .tree-header p { font-size:8px; }
  .tree-character-tabs { padding-bottom:8px; }
  .tree-wallet b { font-size:30px; }
  .memory-report { width:min(900px,100%); max-height:calc(100dvh - 24px); padding:15px 20px; }
  .memory-report>header { padding-bottom:9px; min-height:30px; }
  .memory-report>header .chapter-kicker { font-size:8px; letter-spacing:1.3px; }
  .memory-report>header>span:last-child { font-size:9px; padding:5px 10px; }
  .memory-report-scroll { scrollbar-width:thin; scrollbar-color:#b7a87860 transparent; }
  .memory-report-heading { margin:9px 0 10px; gap:15px; align-items:center; }
  .memory-report-heading>div:first-child>span { font-size:8px; letter-spacing:.4px; }
  .memory-report-heading h2 { font-size:24px; line-height:1.3; margin:6px 0; }
  .memory-report-heading p { font-size:9px; line-height:1.5; margin:5px 0; }
  #memoryReportPortrait .memory-portrait { width:56px; height:70px; }
  .memory-report-score { grid-template-columns:1fr 1.2fr; padding:10px 14px; gap:16px; }
  .memory-report-score>div>span { font-size:8px; }
  .memory-report-score>div>b { font-size:41px; line-height:1.05; }
  .memory-report-score dl { margin:0; gap:15px; justify-content:space-between; }
  .memory-report-score dt { font-size:8px; }
  .memory-report-score dd { font-size:20px; margin-top:6px; }
  .memory-report-metrics { grid-template-columns:repeat(4,1fr); gap:7px; margin:11px 0; }
  .memory-report-metrics>div { padding:8px 10px; }
  .memory-report-metrics small { font-size:8px; }
  .memory-report-metrics b { font-size:23px; margin-top:5px; }
  .memory-report>footer { margin-top:17px; gap:8px; flex-wrap:nowrap; position:relative; }
  .memory-report>footer:before { content:'向下滚动查看完整战报'; position:absolute; left:50%; top:-13px; transform:translateX(-50%); font-size:7px; color:#bacdc8; letter-spacing:1px; white-space:nowrap; }
  .memory-report>footer button { min-height:44px; font-size:10px; flex:1; }
  .memory-report>footer .memory-primary { order:0; flex:1.3; }
}
@media(max-width:360px) and (orientation:portrait) {
  .memory-stage-progress { display:flex; }
  .memory-stage-mark b { max-width:135px; font-size:10px; }
  .memory-stage-mark small { font-size:6px; }
  .memory-character-btn { min-height:125px; }
  .preparation-top { font-size:12px; }
  .preparation-top small { font-size:7px; }
  .memory-vitals { min-width:178px; max-width:186px; padding:8px; }
  .memory-vitals>div:first-child>b { max-width:110px; }
  .memory-action-buttons { right:10px; width:169px; gap:4px; }
}
@media(max-width:740px) and (max-height:520px) and (orientation:landscape) {
  .memory-vitals { left:106px; min-width:160px; max-width:174px; }
  .aim-stick { right:303px; }
}
@media(max-width:640px) and (max-height:520px) and (orientation:landscape) {
  .memory-vitals { top:62px; bottom:auto; left:12px; min-width:154px; max-width:170px; }
  .memory-boss-hud { left:auto; right:12px; transform:none; width:52%; top:62px; }
  .memory-action-buttons { right:12px; gap:5px; }
  .memory-action-buttons button,.memory-action-buttons button[data-memory-action=attack],.memory-action-buttons button[data-memory-action=ranged] { width:44px; height:48px; }
  .memory-action-buttons .ultimate-action { width:52px; height:56px; }
  .aim-stick { right:282px; }
  .memory-stage-progress { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .memory-character-btn:hover,.memory-primary:hover:not(:disabled) { transform:none; }
  .transition-rings { transform:none; opacity:.3; }
  .memory-transition .transition-rule { transform:none; }
  .gate-dessert .gate-orbit,.gate-neon .gate-orbit,.gate-blood .gate-moon,.gate-confluence .gate-orbit { opacity:1; transform:none; }
}
.memory-report {
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.memory-report>header,.memory-report>footer {
  flex-shrink:0
}
.memory-report-scroll {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding-right:4px
}
.tree-mobile-hint {
  display:none
}
@media(max-width:740px) {
  .tree-mobile-hint {
    display:block;
    font-size:8px;
    margin:0 0 11px;
    color:var(--m-gold)
  }
}

/* Recollection bosses: keep short-window attack instructions readable.
   The arena's measured HUD avoidance uses the resulting real panel bounds. */
.memory-boss-hud>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:10px;
  row-gap:4px;
}
.memory-boss-hud>div>b {
  grid-column:1;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.memory-boss-hud>div>span {
  grid-column:2;
  grid-row:1;
  font-variant-numeric:tabular-nums;
}
.memory-boss-hud>div>small {
  grid-column:1 / -1;
  grid-row:2;
  min-width:0;
  color:#ffdfbf;
  font-size:9px;
  line-height:1.45;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}