/* NETHERNET — MISSION 00 (js/mission.js), the mailbox and the mock battle menu (js/mail.js, ui.js). */

/* ================= MISSION 00 ================= */
#mission { position: fixed; inset: 0; z-index: 9000; overflow: hidden; background: #05060A; color: var(--fg); font-family: var(--f-body);
  --cy: #3FE0FF; --gold: #FFD25A; animation: ms-in .5s ease-out both; user-select: none; -webkit-user-select: none; }
#mission.out { animation: ms-out .4s ease-in forwards; }
@keyframes ms-in { from { opacity: 0; } }
@keyframes ms-out { to { opacity: 0; } }
body.ms-open { overflow: hidden; }

.ms-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 62% 48%, rgba(26,110,150,.22), transparent 62%), radial-gradient(ellipse at 15% 90%, rgba(63,224,255,.08), transparent 50%); }
.ms-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(63,224,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(63,224,255,.06) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 80%); }
.ms-scan { position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(63,224,255,.06), transparent); animation: ms-scan 6s linear infinite; }
@keyframes ms-scan { to { top: 100%; } }

/* top bar */
.ms-hud { position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  font-size: 11px; letter-spacing: .14em; color: #7FE3F5; border-bottom: 1px solid rgba(63,224,255,.22); background: rgba(5,6,10,.85); }
.ms-hud > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-hud > span i { width: 7px; height: 7px; border-radius: 50%; background: #FF3B5C; box-shadow: 0 0 8px #FF3B5C; animation: ms-blink 1.2s steps(2) infinite; flex: none; }
.ms-n { margin-left: auto; font-style: normal; color: var(--mute); }
.ms-skip { padding: 3px 10px; font-size: 11px; letter-spacing: .06em; background: transparent; border-color: rgba(236,232,223,.3); }
@keyframes ms-blink { 50% { opacity: .2; } }

.ms-stage { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; display: grid; grid-template-columns: minmax(300px, 34vw) minmax(0, 1fr); }

/* Alice and the talk box */
.ms-side { position: relative; min-width: 0; overflow: hidden; }
.ms-alice { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  mask-image: linear-gradient(90deg, #000 72%, transparent), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 99%); }
.ms-alice video, .ms-alice img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 10%; display: block; }
.ms-al-fx { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 55%, rgba(5,6,10,.9)); }
#mission.al-on .ms-alice { opacity: 1; animation: ms-al .9s steps(1) both, ms-alfade .9s ease-out both; }
@keyframes ms-al { 0% { clip-path: inset(48% 0 48% 0); filter: brightness(3) hue-rotate(40deg); } 15% { clip-path: inset(30% 0 52% 0); } 25% { clip-path: inset(0 0 0 0); filter: brightness(1.6); transform: translateX(6px); }
  32% { transform: translateX(-4px); filter: hue-rotate(-30deg); } 40% { transform: none; filter: none; } }
@keyframes ms-alfade { from { opacity: 0; } }

.ms-talk { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 12px 16px 10px; min-height: 148px; display: flex; flex-direction: column;
  background: rgba(6,8,14,.92); border: 1px solid rgba(63,224,255,.42); border-left: 4px solid var(--cy);
  box-shadow: 0 10px 40px rgba(0,0,0,.7), 0 0 30px -12px var(--cy); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.ms-talk.sys { border-color: rgba(143,163,184,.45); border-left-color: #8FA3B8; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.ms-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.ms-name small { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ms-name b { font-size: 16px; font-weight: 900; color: #9FE8FF; letter-spacing: .06em; }
.ms-talk.sys .ms-name b { color: #B8C4D0; font-size: 12px; letter-spacing: .24em; }
.ms-talk.me { border-color: rgba(236,232,223,.35); border-left-color: #ECE8DF; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.ms-talk.me .ms-name b { color: #ECE8DF; }
.ms-talk.me .ms-line { font-style: normal; color: #DAD6CC; }
.ms-name small { font-size: 9.5px; letter-spacing: .14em; color: var(--mute); }
.ms-line { flex: 1; margin: 6px 0 6px; font-size: 16.5px; line-height: 1.7; color: #F1EEE6; min-height: 3.4em; }
.ms-line b, .gd-tx b { color: #FFFFFF; font-weight: 900; }
.kw.k-ORDER { color: #F2B630 !important; font-weight: 900; } .kw.k-GHOST { color: #3CC8E6 !important; font-weight: 900; } .kw.k-ZERO { color: #3FD483 !important; font-weight: 900; }
.kw.k-VIRUS { color: #B593FF !important; font-weight: 900; } .kw.k-CRASH { color: #FF5A5A !important; font-weight: 900; }
.ms-talk.sys .ms-line { color: #C9D2DB; font-size: 15px; }
.ms-caret { display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--cy); animation: ms-blink .7s steps(2) infinite; }
.ms-cta { display: flex; justify-content: flex-end; align-items: center; min-height: 22px; font-size: 11px; letter-spacing: .1em; }
.ms-next { color: var(--mute); animation: ms-nudge 1.4s ease-in-out infinite; }
.ms-tap { color: var(--gold); }
.ms-tap.shake { animation: ms-shake .4s ease-in-out; }
.ms-wait { color: var(--mute); letter-spacing: .4em; }
.ms-done { font-size: 14px; letter-spacing: .04em; padding: 9px 22px; }
@keyframes ms-nudge { 50% { transform: translateX(4px); opacity: .6; } }
@keyframes ms-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* the board: a clear, simplified table beside the talk column */
.ms-board { position: relative; min-width: 0; padding: 18px 20px 16px; transition: opacity .5s, filter .5s; }
#mission.dim .ms-board { opacity: .22; filter: grayscale(.7) blur(1px); }
#mission.busy .ms-board { cursor: progress; }
.ms-table { position: relative; height: 100%; display: grid; gap: 12px;
  grid-template-columns: minmax(118px, 1fr) minmax(0, 2.1fr) minmax(118px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "s1 s2 s3" "s1 mid s3" "me me me"; }
.ms-table.n4 { grid-template-columns: minmax(112px, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(112px, 1fr);
  grid-template-areas: "s1 s2 s3 s4" "s1 mid mid s4" "me me me me"; }
.ms-seat { position: relative; padding: 8px 10px 9px; border-radius: 7px; background: rgba(16,18,27,.88); border: 1px solid var(--line-2); transition: border-color .3s, box-shadow .3s; min-width: 0; }
.ms-seat.s1 { grid-area: s1; align-self: center; }
.ms-seat.s2 { grid-area: s2; justify-self: center; min-width: min(190px, 100%); }
.ms-seat.s3 { grid-area: s3; align-self: center; }
.n4 .ms-seat.s2, .n4 .ms-seat.s3 { justify-self: stretch; align-self: start; }
.n4 .ms-seat.s3 { grid-area: s3; }
.ms-seat.s4 { grid-area: s4; align-self: center; }
.ms-seat.turn { border-color: rgba(236,232,223,.55); }
.mss-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mss-h b { font-size: 14px; letter-spacing: .06em; }
.mss-h small { font-size: 10px; color: var(--mute); white-space: nowrap; }
.mss-r { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11px; color: #B9B5AA; min-width: 0; }
.mss-r svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; }
.mss-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mss-f { display: flex; gap: 4px; margin-top: 7px; min-height: 22px; flex-wrap: wrap; border-radius: 4px; width: fit-content; min-width: 22px; }
.ms-chip { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-style: normal; font-weight: 900; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.ms-chip.k-ORDER { background: #E5A50A; color: #141210; }
.ms-chip.k-GHOST { background: #1AA6C4; color: #0E1315; }
.ms-chip.k-VIRUS { background: #7D4FD8; color: #F4F1EA; }
.ms-chip.pop { animation: ms-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ms-pop { from { transform: scale(2.2); opacity: 0; filter: brightness(2); } }
.ms-seat.holds, .ms-me.holds { border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy), 0 0 22px -4px var(--cy); }
.ms-seat.dead { border-color: #2A2C33; background: rgba(14,15,20,.7); }
.ms-seat.dead > :not(.mss-st) { opacity: .45; filter: grayscale(1); }
.mss-st { position: absolute; top: -11px; right: 8px; z-index: 2; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 1px 7px; border-radius: 2px;
  background: #2A2E38; color: #DAD6CC; white-space: nowrap; }
.mss-st.new { animation: ms-stamp .35s cubic-bezier(.2,1.5,.4,1) both; }
.mss-st.k-crash { background: #FF3B3B; color: #fff; font-size: 12px; transform: rotate(-6deg); box-shadow: 0 0 16px #FF3B3B; }
.mss-st.k-win { background: var(--gold); color: #141210; box-shadow: 0 0 16px var(--gold); }
.mss-st.k-took { background: #E6E2D8; color: #05060A; }
.mss-st.k-intercept { background: #FF5FA2; color: #fff; box-shadow: 0 0 14px #FF5FA2; }
.mss-st.k-scanned { background: #7FE3D0; color: #05060A; box-shadow: 0 0 14px #7FE3D0; }
.mss-st.k-jammed { background: #3A1418; color: #FF8A8A; text-decoration: line-through; }
.msm-h .mss-st { position: static; margin-left: 4px; }
@keyframes ms-stamp { from { transform: scale(1.8); opacity: 0; } }

.ms-mid { grid-area: mid; position: relative; display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 0; }
.ms-deck { position: relative; --mm: min(1.05px, calc((66vw - 160px) / 520), calc((100vh - 400px) / 110)); text-align: center; line-height: 0; }
.ms-deck .cn { box-shadow: 3px 3px 0 #1F232C, 6px 6px 0 #14171E; }
.ms-deck small, .ms-chan > small { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .14em; color: var(--mute); line-height: 1; }
.ms-chan { text-align: center; min-width: 0; }
.ms-chan > small { margin: 0 0 6px; }
.msc-card { position: relative; --mm: min(1.2px, calc((66vw - 160px) / 470), calc((100vh - 400px) / 100)); width: calc(63 * var(--mm)); height: calc(88 * var(--mm)); margin: 0 auto; line-height: 0; }
.msc-card.empty { display: flex; align-items: center; justify-content: center; border: 1px dashed color-mix(in srgb, var(--cy) 30%, transparent); border-radius: 6px; color: var(--dim); font-size: 11px; line-height: 1.2; }
.msc-card.flip .cn { animation: ms-flip .4s ease-out both; }
.msc-card.peek { outline: 2px dashed var(--cy); outline-offset: 4px; border-radius: 4px; }
.msc-only { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; font-weight: 700; line-height: 1.4; padding: 1px 7px; border-radius: 2px; background: var(--cy); color: #05060A; }
.ms-chan.moving .msc-card { animation: ms-move .55s ease-in-out infinite alternate; }
.msc-lbl { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; min-height: 18px; white-space: nowrap; }
.msc-lbl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.msc-lbl span { color: var(--mute); }
.ms-turn { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; font-size: 10px; letter-spacing: .08em; color: var(--dim); white-space: nowrap; }
.ms-turn b { color: var(--fg); margin-right: 4px; }
.ms-turn span { padding: 1px 6px; border-radius: 2px; border: 1px solid #2A2C33; }
.ms-turn span.on { color: #05060A; background: var(--cy); border-color: var(--cy); font-weight: 600; }
@keyframes ms-flip { from { transform: perspective(600px) rotateY(90deg); } }
@keyframes ms-move { to { transform: translateY(-6px); filter: drop-shadow(0 0 10px var(--cy)); } }

.ms-me { grid-area: me; display: flex; align-items: flex-end; gap: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(10,12,19,.88); border: 1px solid var(--line-2); transition: border-color .3s, box-shadow .3s; min-width: 0; }
.ms-id { --mm: min(1px, calc((66vw - 160px) / 560), calc((100vh - 400px) / 140)); position: relative; flex: none; line-height: 0; border-radius: 6px; }
.ms-id small { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .12em; color: var(--mute); line-height: 1; text-align: center; }
.ms-id.flip .cn { animation: ms-flip .45s ease-out both; }
.ms-deck.ms-go, .ms-id.ms-go { cursor: pointer; }
.ms-op { flex: none; width: 168px; align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 6px; background: #ECE8DF; color: #141210; overflow: hidden; }
.mso-h { display: flex; align-items: center; gap: 8px; }
.mso-h svg { width: 26px; height: 26px; flex: none; stroke: currentColor; fill: none; }
.mso-h small { display: block; font-size: 8.5px; letter-spacing: .14em; color: #6D6A62; }
.mso-h b { font-size: 15px; font-weight: 900; }
.mso-s { font-size: 10.5px; line-height: 1.45; overflow: hidden; }
.mso-s > b { display: block; font-size: 11px; margin-bottom: 2px; }
.mso-s p { margin: 0; display: flex; gap: 5px; }
.mso-s p i { flex: none; font-style: normal; font-weight: 900; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: #141210; color: #ECE8DF; font-size: 11px; }
.ms-mine { flex: 1; min-width: 0; }
.msm-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.msm-h b { font-size: 14px; }
.msm-id { font-style: normal; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 1px 7px; border-radius: 2px; }
.msm-id.k-ORDER { background: #E5A50A; color: #141210; } .msm-id.k-GHOST { background: #1AA6C4; color: #0E1315; } .msm-id.k-ZERO { background: #2BAE66; color: #0F1410; }
.msm-h .mss-f { margin: 0; }
.ms-hand { display: flex; gap: 8px; margin-top: 8px; --mm: min(1.22px, calc((66vw - 430px) / 400), calc((100vh - 380px) / 100)); border-radius: 6px; padding: 2px; }
.ms-hc { position: relative; flex: none; cursor: pointer; line-height: 0; border-radius: 6px; transition: transform .2s, filter .2s, opacity .2s; }
.ms-hc:hover { transform: translateY(-4px); }
.ms-hc.fresh { animation: ms-deal .5s cubic-bezier(.2,1.2,.4,1) both; }
.ms-hc.fresh:nth-child(n+2) { animation-delay: .12s; }
.ms-hc.picked { transform: translateY(-14px); filter: drop-shadow(0 0 10px var(--cy)); }
.ms-hc.dim { opacity: .55; }
@keyframes ms-deal { from { transform: translate(-80px, -60px) rotate(-12deg); opacity: 0; } }
.ms-acts { display: flex; flex-direction: column; gap: 8px; flex: none; min-width: 120px; }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; font-size: 14px; position: relative; }
.msb-ic { display: inline-flex; width: 20px; height: 20px; flex: none; }
.msb-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.ms-btn.b-scan { background: #1AA6C4; color: #0E1315; border-color: #1AA6C4; }
.ms-btn.b-jam { background: #1AA6C4; color: #0E1315; border-color: #1AA6C4; }
.ms-btn.b-place { background: var(--cy); color: #fff; border-color: var(--cy); }
.ms-btn.b-no { background: transparent; }

/* what to look at, and what to tap */
.ms-hi { box-shadow: 0 0 0 2px rgba(255,210,90,.9), 0 0 20px -2px rgba(255,210,90,.6); animation: ms-hi 1.4s ease-in-out infinite; }
@keyframes ms-hi { 50% { box-shadow: 0 0 0 2px rgba(255,210,90,.45), 0 0 8px -2px rgba(255,210,90,.3); } }
.ms-go { z-index: 2; box-shadow: 0 0 0 2px var(--cy), 0 0 26px 2px color-mix(in srgb, var(--cy) 65%, transparent); animation: ms-go 1.1s ease-in-out infinite; cursor: pointer; }
.ms-go::after { content: '▼'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); color: var(--cy); font-size: 15px; line-height: 1;
  text-shadow: 0 0 10px var(--cy); animation: ms-bob .8s ease-in-out infinite; pointer-events: none; z-index: 3; }
.ms-btn.ms-go::after, .ms-done.ms-go::after { top: 50%; left: -20px; content: '▶'; transform: translateY(-50%); animation-name: ms-bobx; }
.ms-hc.ms-go::after { top: -22px; }
.ms-go.flash { animation: ms-go 1.1s ease-in-out infinite, ms-flash .45s ease-out; }
@keyframes ms-go { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cy) 55%, transparent), 0 0 10px 0 color-mix(in srgb, var(--cy) 35%, transparent); } }
@keyframes ms-bob { 50% { transform: translate(-50%, -6px); } }
@keyframes ms-bobx { 50% { transform: translate(-6px, -50%); } }
@keyframes ms-flash { 0% { filter: brightness(2.2); } }

/* the win */
.ms-table.won .ms-seat:not(.dead), .ms-table.won .ms-mid { opacity: .6; }
.ms-clear { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; text-align: center; padding: 16px 44px;
  background: linear-gradient(90deg, transparent, rgba(5,6,10,.92) 18%, rgba(5,6,10,.92) 82%, transparent); white-space: nowrap; }
.ms-clear.new { animation: ms-clear .7s cubic-bezier(.2,1.3,.4,1) both; }
.ms-clear::before, .ms-clear::after { content: ''; position: absolute; left: 8%; right: 8%; height: 2px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.ms-clear::before { top: 0; } .ms-clear::after { bottom: 0; }
.ms-clear small { display: block; font-size: 12px; letter-spacing: .4em; color: var(--gold); }
.ms-clear b { display: block; margin-top: 4px; font-size: 40px; font-weight: 900; letter-spacing: .14em; color: #fff; text-shadow: 0 0 18px rgba(255,210,90,.8), -2px 0 rgba(255,62,165,.5), 2px 0 rgba(63,224,255,.5); }
.ch-spider .ms-clear::before, .ch-spider .ms-clear::after { background: var(--cy); box-shadow: 0 0 14px var(--cy); }
.ch-spider .ms-clear small { color: var(--cy); }
.ch-spider .ms-clear b { text-shadow: 0 0 18px color-mix(in srgb, var(--cy) 80%, transparent), -2px 0 rgba(255,62,165,.5), 2px 0 rgba(63,224,255,.5); }
@keyframes ms-clear { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; filter: brightness(2.5); } }

/* command banners over the mission */
#mission .ms-band { z-index: 20; top: 36%; }

/* Spider: her art is turned away; the crop keeps her face and the visor */
.ch-spider .ms-alice video, .ch-spider .ms-alice img { object-position: 30% 22%; }
.ch-spider .ms-name b { color: #FF9CCB; }
.ch-spider .ms-bg { background: radial-gradient(ellipse at 62% 48%, rgba(150,26,90,.22), transparent 62%), radial-gradient(ellipse at 15% 90%, rgba(255,79,160,.08), transparent 50%); }
.ch-spider .ms-grid { background-image: linear-gradient(rgba(255,79,160,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,79,160,.06) 1px, transparent 1px); }
.ch-spider .ms-hud { color: #FF9CCB; border-bottom-color: rgba(255,79,160,.25); }

/* phones held sideways: a narrow column (the bust over the talk box) and a compact table */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .ms-hud { height: 24px; font-size: 9px; padding: 0 10px; gap: 8px; letter-spacing: .1em; }
  .ms-skip { padding: 1px 8px; font-size: 9.5px; }
  .ms-stage { top: 24px; grid-template-columns: 33% minmax(0, 1fr); }
  .ms-alice { bottom: auto; height: 60%; mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .ms-alice video, .ms-alice img { object-position: 54% 6%; }
  .ch-spider .ms-alice video, .ch-spider .ms-alice img { object-position: 30% 18%; }
  .ms-talk { top: 46%; left: 5px; right: 5px; bottom: 5px; min-height: 0; padding: 6px 8px 5px; border-left-width: 3px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .ms-name b { font-size: 12px; } .ms-name small { font-size: 7.5px; letter-spacing: .08em; }
  .ms-talk.sys .ms-name b { font-size: 10px; }
  .ms-line { font-size: 11.5px; line-height: 1.55; margin: 3px 0; min-height: 0; overflow-y: auto; }
  .ms-talk.sys .ms-line { font-size: 11.5px; }
  .ms-cta { font-size: 9px; min-height: 16px; }
  .ms-done { font-size: 12px; padding: 6px 14px; }

  .ms-board { padding: 12px 8px 6px; }
  .ms-table { gap: 6px; grid-template-columns: minmax(70px, .9fr) minmax(0, 2fr) minmax(70px, .9fr); }
  .ms-table.n4 { grid-template-columns: minmax(66px, .9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(66px, .9fr); }
  .ms-seat { padding: 4px 6px 5px; border-radius: 5px; }
  .ms-seat.s2 { min-width: 0; }
  .mss-h b { font-size: 11px; } .mss-h small { font-size: 8px; }
  .mss-r { font-size: 8.5px; margin-top: 1px; gap: 3px; } .mss-r svg { width: 10px; height: 10px; }
  .mss-f { margin-top: 3px; min-height: 15px; gap: 3px; }
  .ms-chip { width: 15px; height: 15px; font-size: 9px; border-radius: 2px; }
  .mss-st { font-size: 8px; top: -9px; padding: 0 5px; } .mss-st.k-crash { font-size: 9px; }
  .ms-mid { gap: 14px; padding-top: 12px; }
  .ms-turn { font-size: 7.5px; gap: 3px; } .ms-turn span { padding: 0 4px; }
  .ms-deck { --mm: .6px; } .ms-deck .cn { box-shadow: 2px 2px 0 #1F232C, 4px 4px 0 #14171E; }
  .ms-deck small, .ms-chan > small { margin-top: 4px; font-size: 8px; }
  .ms-chan > small { margin: 0 0 3px; }
  .msc-card { --mm: .72px; }
  .msc-only { font-size: 7.5px; bottom: 4px; padding: 0 4px; }
  .msc-lbl { margin-top: 5px; font-size: 9px; gap: 4px; min-height: 12px; } .msc-lbl svg { width: 11px; height: 11px; }
  .ms-me { gap: 6px; padding: 5px 7px; border-radius: 6px; }
  .ms-id { --mm: .62px; } .ms-id small { margin-top: 3px; font-size: 7px; }
  .ms-op { width: 86px; padding: 4px 6px; gap: 2px; }
  .mso-h { gap: 4px; } .mso-h svg { width: 16px; height: 16px; } .mso-h small { display: none; } .mso-h b { font-size: 10.5px; }
  .mso-s { font-size: 8px; line-height: 1.3; } .mso-s > b { font-size: 8.5px; margin-bottom: 1px; } .mso-s p { display: none; }
  .msm-h { gap: 5px; } .msm-h b { font-size: 11px; } .msm-id { font-size: 8px; padding: 0 5px; }
  .ms-hand { --mm: .7px; gap: 4px; margin-top: 4px; }
  .ms-hc.picked { transform: translateY(-8px); }
  .ms-acts { min-width: 66px; gap: 5px; }
  .ms-btn { padding: 6px 8px; font-size: 11px; gap: 4px; } .msb-ic { width: 13px; height: 13px; }
  .ms-go::after { font-size: 11px; top: -16px; } .ms-hc.ms-go::after, .ms-id.ms-go::after { display: none; }
  .ms-btn.ms-go::after, .ms-done.ms-go::after { left: -14px; }
  .ms-clear { padding: 8px 22px; } .ms-clear b { font-size: 22px; } .ms-clear small { font-size: 9px; letter-spacing: .3em; }
}
@media (prefers-reduced-motion: reduce) {
  #mission *, #mission { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

/* ================= mailbox ================= */
#sheet .overlay { z-index: 60; }
.mb, .pm { position: relative; padding: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; }
.mb { max-width: 780px !important; height: min(560px, calc(100vh - 32px)); }
.mb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; position: relative; }
.mb-head b { font-size: 18px; font-weight: 900; }
.mb-head small { font-size: 10px; letter-spacing: .14em; color: var(--mute); }
.mb-head .sp { flex: 1; }
.mb-head .gd-x { min-width: 34px; }
.mb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.mb-list { border-right: 1px solid var(--line); overflow-y: auto; }
.mb-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-weight: 500; }
.mb-row:hover:not(:disabled) { border-color: var(--line); background: rgba(255,255,255,.03); }
.mb-row.on { background: rgba(63,224,255,.08); box-shadow: inset 3px 0 0 #3FE0FF; }
.mb-ic { flex: none; font-size: 20px; color: #3FE0FF; line-height: 1; }
.mb-row.new .mb-ic { color: #FFD25A; text-shadow: 0 0 10px rgba(255,210,90,.6); }
.mb-rt { flex: 1; min-width: 0; }
.mb-rt b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-rt small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF3B5C; box-shadow: 0 0 8px #FF3B5C; }
.mb-dot.got { display: none; }
.mb-detail { overflow-y: auto; padding: 18px 22px 22px; }
.mb-empty { padding: 30px 16px; text-align: center; color: var(--dim); font-size: 13px; }
.mb-from { font-size: 10px; letter-spacing: .14em; color: #7FE3F5; }
.mb-mail h3 { margin: 6px 0 2px; font-size: 20px; font-weight: 900; }
.mb-date { font-size: 10.5px; color: var(--mute); }
.mb-mail p { margin: 14px 0 0; font-size: 14px; line-height: 1.85; color: #D8D4CA; }
.mb-mail p b { color: #FFD25A; }
.mb-claim { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px;
  border: 1px solid rgba(229,165,10,.45); border-radius: 6px; background: rgba(229,165,10,.07); }
.mb-gift { display: inline-flex; align-items: center; gap: 8px; }
.mb-gift.got { opacity: .45; }
.mb-chipic { width: 18px; height: 18px; flex: none; background: linear-gradient(135deg, #FFE08A, #E5A50A 55%, #8A5A00); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.mb-gift b { font-size: 20px; color: #FFD25A; }
.mb-gift small { font-size: 11px; color: var(--mute); }
.mb-claim button { min-width: 110px; padding: 9px 16px; }
.mb-plus { position: absolute; right: 18px; top: -4px; font-style: normal; font-size: 20px; font-weight: 600; color: #FFD25A; text-shadow: 0 0 12px rgba(255,210,90,.8); pointer-events: none; animation: mb-plus 1.4s ease-out forwards; }
@keyframes mb-plus { 0% { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

/* the mailbox button: top bar, beside the player */
.lb-top { gap: 10px; }
.lb-mail { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; border-radius: 30px; cursor: pointer;
  background: rgba(14,16,22,.72); border: 1px solid rgba(236,232,223,.16); color: var(--fg); font-weight: 700; font-size: 13px; backdrop-filter: blur(6px); }
.lb-mail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lb-mail:hover:not(:disabled) { border-color: rgba(236,232,223,.4); }
.lb-mail.has-mail { border-color: rgba(255,210,90,.6); box-shadow: 0 0 18px -6px rgba(255,210,90,.8); }
.lb-mail.has-mail svg { color: #FFD25A; animation: mb-bob 1.6s ease-in-out infinite; }
.lb-mailn { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 10.5px; font-weight: 700; background: #FF3B5C; color: #fff; box-shadow: 0 0 12px rgba(255,59,92,.7); }
@keyframes mb-bob { 50% { transform: translateY(-2px); } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .lb-mail { padding: 4px 10px 4px 8px; font-size: 11px; gap: 5px; } .lb-mail svg { width: 14px; height: 14px; }
  .lb-mailn { min-width: 15px; height: 15px; font-size: 9px; }
}

/* ================= mock battle menu ================= */
.pm { max-width: 860px !important; }
.pm-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.pm-opt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 0; overflow: hidden; text-align: left;
  border-radius: 8px; border: 1px solid var(--line-2); background: #10131B; font-weight: 500; transition: transform .2s, box-shadow .2s; --pc: #3FE0FF; }
.pm-opt:hover:not(:disabled) { transform: translateY(-2px); }
.pm-m1 { --pc: #FF4FA0; }
.pm-m2 { --pc: #FFD25A; }
.pm-m2 .pm-art { background-position: 50% 20%; }
.pm-mission { border-color: color-mix(in srgb, var(--pc) 60%, transparent); box-shadow: 0 0 26px -10px var(--pc); }
.pm-mission:hover:not(:disabled) { border-color: var(--pc); box-shadow: 0 0 30px -6px var(--pc); }
.pm-opt.locked { opacity: 1; filter: grayscale(.85) brightness(.7); cursor: not-allowed; }
.pm-art { position: absolute; inset: 0; background-size: cover; background-position: 54% 12%;
  mask-image: linear-gradient(180deg, #000 40%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 92%); }
.pm-m1 .pm-art { background-position: 30% 22%; }
.pm-ic { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 70px; line-height: 1; color: rgba(236,232,223,.16); }
.pm-tx { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 40px 14px 14px; background: linear-gradient(180deg, transparent, rgba(6,8,12,.94) 42%); }
.pm-tx small { font-size: 10px; letter-spacing: .12em; color: color-mix(in srgb, var(--pc) 70%, #fff); }
.pm-tx b { font-size: 18px; font-weight: 900; }
.pm-tx em { font-style: normal; font-size: 12.5px; line-height: 1.5; color: #B9B5AA; }
.pm-tag { align-self: flex-start; margin-top: 6px; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 2px; background: #FFD25A; color: #141210; }
.pm-tag.done { background: transparent; color: color-mix(in srgb, var(--pc) 70%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 50%, transparent); }
.pm-tag.adv { background: var(--pc); color: #fff; }
.pm-tag.lock { background: #2A2C33; color: #C9C5BA; }

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .mb { height: calc(100vh - 16px); }
  .mb-head { padding: 7px 10px; } .mb-head b { font-size: 15px; } .mb-head small { display: none; }
  .mb-head button { padding: 4px 10px; font-size: 12px; }
  .mb-body { grid-template-columns: 38% minmax(0, 1fr); }
  .mb-row { padding: 8px 10px; gap: 8px; } .mb-rt b { font-size: 12px; } .mb-rt small { font-size: 9.5px; }
  .mb-detail { padding: 10px 14px 14px; }
  .mb-mail h3 { font-size: 16px; } .mb-mail p { margin-top: 8px; font-size: 12px; line-height: 1.7; }
  .mb-claim { margin-top: 10px; padding: 8px 10px; } .mb-gift b { font-size: 16px; } .mb-claim button { min-width: 84px; padding: 6px 12px; }
  .pm-opts { gap: 8px; padding: 10px; }
  .pm-opt { min-height: 190px; } .pm-tx { padding: 24px 8px 8px; } .pm-tx b { font-size: 14px; } .pm-tx em { font-size: 10px; } .pm-tx small { font-size: 8px; letter-spacing: .06em; }
  .pm-tag { font-size: 8.5px; padding: 1px 6px; }
}
@media (max-width: 560px) {
  .mb-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .mb-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34%; }
  .pm-opts { grid-template-columns: 1fr; }
}

/* ================= mock battle: the operator's comm window ================= */
#op-coach { position: fixed; z-index: 45; pointer-events: none; }
#op-coach.over { z-index: 76; }   /* above the card-pick window (70) and the scan result (72) */
#op-coach .opc-box { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: auto; border-radius: 6px; overflow: hidden;
  background: rgba(8,10,16,.96); border: 1px solid rgba(63,224,255,.45); border-left: 3px solid #3FE0FF; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 24px -10px #3FE0FF; }
#op-coach .opc-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 64px; min-height: 44px; border-bottom: 1px solid rgba(63,224,255,.18); }
#op-coach .opc-h b { font-size: 14px; font-weight: 900; color: #9FE8FF; letter-spacing: .06em; }
#op-coach .opc-h small { font-size: 9px; letter-spacing: .12em; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#op-coach .opc-min { margin-left: auto; padding: 0 9px; min-height: 0; line-height: 22px; font-size: 16px; background: transparent; border-color: rgba(236,232,223,.2); }
#op-coach .opc-tx { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px 10px; }
#op-coach .coach { margin: 0; border: 0; background: none; padding: 0; font-size: 12.5px; line-height: 1.6; color: #E6E2D8; }
#op-coach .coach .co-h { display: none; }
#op-coach .coach p { margin: 0 0 6px; }
#op-coach .coach ul { margin: 4px 0 0; padding-left: 16px; }
#op-coach .coach li { margin-bottom: 4px; }
#op-coach .coach li b { color: #FFD25A; margin-right: 6px; }
#op-coach .opc-av { position: absolute; left: 8px; top: 6px; z-index: 2; width: 46px; height: 46px; padding: 0; border-radius: 50%; overflow: hidden; pointer-events: auto;
  border: 2px solid #3FE0FF; background: #0B0E16; box-shadow: 0 0 14px -2px #3FE0FF; cursor: pointer; }
#op-coach .opc-av img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 10%; transform: scale(1.9); transform-origin: 54% 18%; display: block; }
#op-coach .opc-dot { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: #2BD67B; border: 2px solid #0B0E16; }
#op-coach.ping .opc-box { animation: opc-ping .5s ease-out; }
@keyframes opc-ping { 0% { box-shadow: 0 0 0 2px #3FE0FF, 0 0 30px #3FE0FF; } }
#op-coach.min .opc-box, #op-coach.empty .opc-box { display: none; }
#op-coach.min.ping .opc-av { animation: opc-bob .6s ease-out; }
@keyframes opc-bob { 30% { transform: translateY(-4px); box-shadow: 0 0 24px #3FE0FF; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #op-coach .opc-av { width: 34px; height: 34px; left: 4px; top: 4px; }
  #op-coach .opc-h { padding: 5px 6px 4px 44px; min-height: 40px; gap: 5px; } #op-coach .opc-h b { font-size: 11.5px; } #op-coach .opc-h small { display: none; }
  #op-coach .opc-tx { padding: 5px 7px 6px; } #op-coach .coach { font-size: 10.5px; line-height: 1.45; } #op-coach .coach ul { padding-left: 12px; }
}

/* the guided mock battle: Alice's window, what she points at, what she wants pressed */
#op-coach.guide .opc-box { border-color: rgba(63,224,255,.6); }
#op-coach .opc-n { margin-left: auto; font-style: normal; font-size: 10px; color: var(--mute); }
#op-coach .gd-tx { margin: 0; font-size: 14px; line-height: 1.7; color: #F1EEE6; }
#op-coach .opc-ft { display: flex; justify-content: flex-end; align-items: center; padding: 6px 10px 10px; min-height: 40px; }
#op-coach .gd-btn { padding: 7px 18px; font-size: 13px; }
#op-coach .gd-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: #FFD25A; }
#op-coach .gd-wait { color: var(--mute); letter-spacing: .4em; }
#op-coach.nudge .opc-box { animation: gd-nudge .4s ease-in-out; }
@keyframes gd-nudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.gd-hi, .tr-hi { outline: 3px solid rgba(255,210,90,.95) !important; outline-offset: -3px; box-shadow: inset 0 0 26px rgba(255,210,90,.28), 0 0 22px rgba(255,210,90,.35) !important; animation: gd-hi 1.4s ease-in-out infinite; }
/* drawn inside the element, so a part at the screen's edge (the status bar, the seats row) is still framed all round */
@keyframes gd-hi { 50% { outline-color: rgba(255,210,90,.6) !important; } }
.gd-go { outline: 3px solid #3FE0FF !important; outline-offset: -3px; box-shadow: inset 0 0 14px rgba(63,224,255,.45), 0 0 22px 2px rgba(63,224,255,.6) !important; animation: gd-go 1s ease-in-out infinite; position: relative; z-index: 3; }
/* on a card the frame is its own top layer: the card's art and shine would cover a plain outline */
.pw-card.gd-go, #mine .hand .cn.gd-go { outline-color: transparent !important; box-shadow: 0 0 22px 2px rgba(63,224,255,.6) !important; }
.pw-card.gd-go::after, #mine .hand .cn.data.gd-go::before { content: ''; position: absolute; inset: 0; border-radius: 6px; z-index: 12; pointer-events: none;
  border: 3px solid #3FE0FF; box-shadow: inset 0 0 14px rgba(63,224,255,.5); animation: gd-go-b 1s ease-in-out infinite; }
@keyframes gd-go-b { 50% { border-color: rgba(63,224,255,.45); box-shadow: inset 0 0 6px rgba(63,224,255,.25); } }
@keyframes gd-go { 50% { outline-color: rgba(63,224,255,.45) !important; box-shadow: inset 0 0 6px rgba(63,224,255,.25), 0 0 8px 0 rgba(63,224,255,.3) !important; } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #op-coach .gd-tx { font-size: 11px; line-height: 1.5; }
  #op-coach .opc-ft { padding: 3px 6px 6px; min-height: 30px; } #op-coach .gd-btn { padding: 4px 12px; font-size: 11px; }
  #op-coach .gd-hint { font-size: 9px; } #op-coach .opc-n { font-size: 8px; }
}

/* ================= the newcomer's tour (js/tour.js) ================= */
#tour { position: fixed; z-index: 70; width: min(360px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 0; pointer-events: auto; transition: left .35s ease, top .35s ease; }
#tour.off { display: none; }
#tour .tr-av { position: relative; z-index: 2; flex: none; width: 58px; height: 58px; margin: 6px -18px 0 0; border-radius: 50%; overflow: hidden; border: 2px solid #3FE0FF; background: #0B0E16; box-shadow: 0 0 16px -2px #3FE0FF; }
#tour .tr-av img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 10%; transform: scale(1.9); transform-origin: 54% 18%; display: block; }
#tour .tr-box { flex: 1; min-width: 0; padding: 9px 12px 10px 26px; border-radius: 6px; background: rgba(8,10,16,.97); border: 1px solid rgba(63,224,255,.55); border-left: 3px solid #3FE0FF;
  box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 26px -10px #3FE0FF; }
#tour .tr-h { display: flex; align-items: baseline; gap: 8px; }
#tour .tr-h b { font-size: 14px; font-weight: 900; color: #9FE8FF; letter-spacing: .06em; }
#tour .tr-h small { font-size: 9px; letter-spacing: .12em; color: var(--mute); }
#tour .tr-skip { margin-left: auto; padding: 1px 7px; min-height: 0; font-size: 10px; font-weight: 600; background: transparent; border-color: rgba(236,232,223,.18); color: var(--mute); }
#tour .tr-tx { margin: 6px 0 8px; font-size: 13.5px; line-height: 1.7; color: #F1EEE6; }
#tour .tr-tx b { color: #fff; font-weight: 900; }
#tour .tr-ft { display: flex; justify-content: flex-end; align-items: center; min-height: 30px; }
#tour .tr-ft button { padding: 6px 16px; font-size: 13px; }
#tour .tr-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: #FFD25A; }
#tour.ping .tr-box { animation: opc-ping .5s ease-out; }
#tour.nudge .tr-box { animation: gd-nudge .4s ease-in-out; }
.tr-hi { border-radius: 6px; }
.tr-go { outline: 3px solid #3FE0FF !important; outline-offset: 4px; box-shadow: 0 0 26px 2px rgba(63,224,255,.65) !important; animation: gd-go 1s ease-in-out infinite; position: relative; z-index: 3; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  #tour { width: min(300px, calc(100vw - 16px)); }
  #tour .tr-av { width: 40px; height: 40px; margin-right: -14px; }
  #tour .tr-box { padding: 6px 9px 7px 20px; }
  #tour .tr-h b { font-size: 12px; } #tour .tr-h small { display: none; }
  #tour .tr-tx { font-size: 11.5px; line-height: 1.5; margin: 4px 0 5px; }
  #tour .tr-ft { min-height: 24px; } #tour .tr-ft button { padding: 4px 12px; font-size: 11px; }
  #tour .tr-hint { font-size: 9.5px; }
}

/* a mail from a character: their face, and a letter signed by hand */
.mb-face { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 1.5px solid #3FE0FF; background: #0B0E16; box-shadow: 0 0 10px -2px #3FE0FF; }
.mb-face img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 10%; transform: scale(1.9); transform-origin: 54% 18%; display: block; }
.mb-face.big { width: 40px; height: 40px; }
.mb-fromrow { display: flex; align-items: center; gap: 10px; }
.mb-row.new .mb-face { border-color: #FFD25A; box-shadow: 0 0 12px -2px #FFD25A; }
.mb-mail p.mb-letter { color: #E6E2D8; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .mb-face { width: 24px; height: 24px; } .mb-face.big { width: 30px; height: 30px; } }

.mb-sign { display: block; margin-top: 14px; text-align: right; font-weight: 900; letter-spacing: .08em; color: #9FE8FF; }
/* the hand framed while Alice points at it: the frame hugs the cards, not the empty row beside them */
#mine .hand.gd-hi { width: fit-content; max-width: 100%; justify-self: start; }

/* ================= the dive into MISSION 02 (js/dive.js) ================= */
#dive { position: fixed; inset: 0; z-index: 9500; overflow: hidden; background: #03040A; color: var(--fg); cursor: pointer; user-select: none; -webkit-user-select: none;
  --cy: #3FE0FF; --rgb: 63,224,255; animation: dv-in .6s ease-out both; }
#dive.out { animation: dv-out .6s ease-in forwards; }
@keyframes dv-in { from { opacity: 0; } }
@keyframes dv-out { to { opacity: 0; } }
.dv-sky { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 22% at 50% 50%, rgba(var(--rgb),.35), transparent 70%), radial-gradient(ellipse at 50% 50%, rgba(20,60,90,.5), transparent 65%); transition: filter 1s; }
.dv-floor, .dv-ceil { position: absolute; left: -80%; right: -80%; height: 75%; overflow: hidden; }
.dv-floor { bottom: 0; transform: perspective(300px) rotateX(64deg); transform-origin: 50% 100%; }
.dv-ceil { top: 0; transform: perspective(300px) rotateX(-64deg); transform-origin: 50% 0; opacity: .5; }
.dv-floor i, .dv-ceil i { position: absolute; inset: -60px 0 0 0; background-image: linear-gradient(rgba(var(--rgb),.55) 2px, transparent 2px), linear-gradient(90deg, rgba(var(--rgb),.4) 2px, transparent 2px);
  background-size: 70px 60px; animation: dv-run 1.4s linear infinite; mask-image: linear-gradient(180deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); }
.dv-ceil i { mask-image: linear-gradient(0deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(0deg, transparent, #000 45%); animation-direction: reverse; }
@keyframes dv-run { to { transform: translateY(60px); } }
.dv-rays { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; transform: translate(-50%, -50%) scale(.2); opacity: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--rgb),.0) 0deg 3deg, rgba(var(--rgb),.22) 3deg 3.6deg, rgba(255,255,255,0) 3.6deg 9deg);
  mask-image: radial-gradient(circle, transparent 4%, #000 30%); -webkit-mask-image: radial-gradient(circle, transparent 4%, #000 30%); transition: opacity .8s, transform 2.6s cubic-bezier(.5,0,.9,.4); }
.dv-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.dv-term { position: absolute; left: 7vw; top: 14vh; font-size: 15px; line-height: 2; letter-spacing: .06em; color: #8FE9FA; transform-origin: 0 0; }
.dv-term p { margin: 0; white-space: nowrap; animation: dv-line .35s steps(12) both; }
.dv-term b.ok { color: #3FD483; } .dv-term b.off { color: #FF8A8A; }
.dv-term b.zero { color: #3FD483; text-shadow: 0 0 12px #3FD483; animation: ms-blink .5s steps(2) infinite; }
@keyframes dv-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dv-alice { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s; }
#dive.al .dv-alice { opacity: 1; }
.dv-art { position: absolute; right: 2vw; bottom: 0; width: min(38vw, 560px); height: 92vh;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent); mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent); -webkit-mask-composite: source-in; }
.dv-art video, .dv-art img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 8%; display: block; }
.dv-art i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 60%, #03040A); }
#dive.al .dv-art { animation: ms-al .9s steps(1) backwards; }   /* not held afterwards, so the dive can move it */
.dv-talk { position: absolute; left: 7vw; bottom: 9vh; width: min(640px, 56vw); padding: 14px 18px 12px; pointer-events: auto;
  background: rgba(6,8,14,.9); border: 1px solid rgba(var(--rgb),.5); border-left: 4px solid var(--cy); box-shadow: 0 0 34px -10px var(--cy);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.dv-h { display: flex; align-items: baseline; gap: 10px; }
.dv-h b { font-size: 17px; font-weight: 900; color: #9FE8FF; letter-spacing: .06em; }
.dv-h small { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .16em; color: var(--mute); }
.dv-h small i { width: 7px; height: 7px; border-radius: 50%; background: #FF3B5C; box-shadow: 0 0 8px #FF3B5C; animation: ms-blink 1s steps(2) infinite; }
.dv-line { margin: 8px 0 6px; min-height: 3.4em; font-size: 18px; line-height: 1.7; color: #F1EEE6; }
.dv-cta { text-align: right; font-size: 11px; letter-spacing: .1em; color: var(--mute); }
/* the dive */
/* the dive: everything on screen is pulled into the middle as the tunnel speeds up (the speed-up is ramped in js/dive.js) */
#dive.go .dv-term { opacity: 0; transform: translate(30vw, 26vh) scale(.25); filter: blur(3px);
  transition: transform .9s cubic-bezier(.45,0,.8,.45), opacity .7s ease-in .15s, filter .9s ease-in; }
#dive.go .dv-alice { opacity: 0; transition: opacity .8s ease-in .1s; }
#dive.go .dv-talk { transform: translate(14vw, -24vh) scale(.3); filter: blur(3px); transition: transform .9s cubic-bezier(.45,0,.8,.45), filter .9s ease-in; }
#dive.go .dv-art { transform: translate(-14vw, -6vh) scale(.45); filter: blur(4px); transition: transform 1s cubic-bezier(.45,0,.8,.45), filter 1s ease-in; }
#dive.go .dv-talk { transform-origin: 100% 0; } #dive.go .dv-art { transform-origin: 0 50%; }
#dive.go .dv-sky { filter: brightness(1.8) saturate(1.4); transition: filter 1.6s ease-in; }
#dive.go .dv-rays { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(25deg); }
.dv-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); text-align: center; opacity: 0; pointer-events: none; }
.dv-word b { display: block; font-family: 'Orbitron', var(--f-display), sans-serif; font-weight: 900; font-size: clamp(56px, 12vw, 150px); letter-spacing: .3em; color: #fff;
  text-shadow: -4px 0 rgba(255,62,165,.7), 4px 0 rgba(var(--rgb),.8), 0 0 40px rgba(var(--rgb),.8); }
.dv-word small { display: block; margin-top: 6px; font-size: 13px; letter-spacing: .4em; color: #9FE8FF; }
#dive.word .dv-word { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .3s, transform 1.1s cubic-bezier(.2,.9,.3,1); }
/* the word rushes past the player into the white flash */
#dive.flash .dv-word { opacity: 0; transform: translate(-50%, -50%) scale(2.6); filter: blur(6px); transition: transform .45s cubic-bezier(.6,0,1,.5), opacity .4s ease-in, filter .4s ease-in; }
.dv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#dive.flash .dv-flash { opacity: 1; transition: opacity .35s cubic-bezier(.5,0,1,.6); }
#dive.out .dv-flash { opacity: 0; transition: opacity .6s ease-out; }
.dv-skip { position: absolute; right: 14px; top: 12px; z-index: 3; padding: 4px 12px; font-size: 11px; letter-spacing: .1em; background: rgba(0,0,0,.4); border-color: rgba(236,232,223,.25); color: var(--mute); }
/* warnings: red lines, a red pulse over everything, a jolt of the screen */
.dv-term p.warn { color: #FF6B7E; text-shadow: 0 0 10px rgba(255,59,92,.6); }
.dv-alarm { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 160px 30px rgba(255,30,60,.55); background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(255,20,50,.22)); }
#dive.alarm .dv-alarm { animation: dv-alarm .9s ease-in-out infinite; }
@keyframes dv-alarm { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
#dive.alarm .dv-sky { filter: hue-rotate(150deg) saturate(1.6); }
#dive.jolt .dv-floor, #dive.jolt .dv-ceil, #dive.jolt .dv-term { animation: dv-jolt .4s steps(2) both; }
@keyframes dv-jolt { 0% { translate: -14px 6px; } 25% { translate: 10px -8px; } 50% { translate: -6px 4px; } 75% { translate: 4px 0; } 100% { translate: 0 0; } }
/* MISSION 00 · the fall: the tunnel turns to face down, the grid streams up past the player */
#dive.fx-fall.go .dv-floor { transform: perspective(300px) rotateX(78deg); transition: transform 1.4s cubic-bezier(.6,0,.9,.5); }
#dive.fx-fall.go .dv-ceil { transform: perspective(300px) rotateX(-78deg); transition: transform 1.4s cubic-bezier(.6,0,.9,.5); opacity: .8; }
#dive.fx-fall.go .dv-word b { animation: dv-shake .12s steps(2) infinite; }
@keyframes dv-shake { 50% { translate: 3px -2px; } }
/* MISSION 01 · Spider's web spreads across the screen, and stays while she talks */
.dv-web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s; }
.dv-web line, .dv-web polygon { fill: none; stroke: rgba(255,120,190,.75); stroke-width: .55; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2px rgba(255,79,160,.9)); }
#dive.alarm .dv-web, #dive.al .dv-web { opacity: 1; }
#dive.alarm .dv-web line, #dive.alarm .dv-web polygon, #dive.al .dv-web line, #dive.al .dv-web polygon { animation: dv-silk 1.1s cubic-bezier(.3,.7,.4,1) var(--d) forwards; }
@keyframes dv-silk { to { stroke-dashoffset: 0; } }
#dive.fx-web .dv-web g { transform-origin: 0 0; animation: dv-sway 5s ease-in-out infinite alternate; }
@keyframes dv-sway { to { transform: rotate(4deg) scale(1.03); } }
#dive.fx-web.go .dv-web { opacity: 0; transform: scale(2.4); transition: opacity 1.4s, transform 1.6s cubic-bezier(.6,0,.9,.5); }
#dive.fx-web .dv-floor i, #dive.fx-web .dv-ceil i { animation-duration: 3.2s; }
#dive.fx-web.alarm .dv-sky { filter: none; }
#dive.fx-web .dv-alarm { box-shadow: inset 0 0 160px 30px rgba(255,40,140,.45); background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(120,0,70,.3)); }
#dive.fx-web .dv-h b { color: #FFA3CF; }
#dive.fx-web .dv-word small { color: #FFA3CF; }
#dive.fx-web .dv-word b { text-shadow: -4px 0 rgba(63,224,255,.6), 4px 0 rgba(255,79,160,.85), 0 0 40px rgba(255,79,160,.8); }
#dive.fx-web .dv-term { color: #FFB8D9; }
#dive .dv-word b { white-space: nowrap; }
#dive.sc-m0 .dv-word b { letter-spacing: .16em; font-size: clamp(44px, 9vw, 120px); }
#dive.sc-m0.alarm.go .dv-word small { color: #FF8A9A; }
/* the rush during the dive: versions (js/dive.js WARP_PICK) */
#dive:not(.wp-A) .dv-rays { display: none; }
.dv-warp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .5s; }
#dive.go .dv-warp { opacity: 1; }
.dv-gates { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; perspective: 600px; }
#dive.go .dv-gates { opacity: 1; }
.dv-gates i { position: absolute; left: 50%; top: 50%; width: 64vmin; height: 40vmin; margin: -20vmin 0 0 -32vmin; opacity: 0;
  border: 2px solid rgba(var(--rgb),.85); box-shadow: 0 0 18px rgba(var(--rgb),.6), inset 0 0 18px rgba(var(--rgb),.35);
  clip-path: polygon(0 12%, 6% 0, 94% 0, 100% 12%, 100% 88%, 94% 100%, 6% 100%, 0 88%); }
.dv-gates i::before { content: ''; position: absolute; left: 50%; top: -2px; width: 18%; height: 4px; transform: translateX(-50%); background: rgba(var(--rgb),1); }
#dive.go .dv-gates i { animation: dv-gate 1.05s cubic-bezier(.55,0,1,.6) infinite; }
.dv-gates i:nth-child(2) { animation-delay: -.15s !important; } .dv-gates i:nth-child(3) { animation-delay: -.3s !important; }
.dv-gates i:nth-child(4) { animation-delay: -.45s !important; } .dv-gates i:nth-child(5) { animation-delay: -.6s !important; }
.dv-gates i:nth-child(6) { animation-delay: -.75s !important; } .dv-gates i:nth-child(7) { animation-delay: -.9s !important; }
@keyframes dv-gate { 0% { transform: scale(.04) rotate(-8deg); opacity: 0; } 20% { opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(3.2) rotate(6deg); opacity: 0; } }
#dive.wp-E .dv-gates i { border-width: 1px; box-shadow: 0 0 12px rgba(var(--rgb),.45); }
/* a real match: shorter, smaller word */
#dive.quick .dv-word b { font-size: clamp(48px, 10vw, 120px); }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .dv-term { left: 5vw; top: 8vh; font-size: 11px; line-height: 1.8; }
  .dv-art { width: 36vw; height: 96vh; right: 0; }
  .dv-talk { left: 4vw; bottom: 5vh; width: 58vw; padding: 9px 12px 8px; }
  .dv-h b { font-size: 13px; } .dv-h small { font-size: 8px; }
  .dv-line { font-size: 13px; line-height: 1.55; margin: 5px 0 4px; min-height: 0; }
  .dv-cta { font-size: 9px; }
  .dv-word small { font-size: 9px; letter-spacing: .25em; }
}
@media (prefers-reduced-motion: reduce) { #dive *, #dive { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; } }