MediaWiki:KuranokaFX.css：修订间差异

2026年10月21日 (三) 18:58的版本

/* ================================================================
   KURANOKA / STORMBREAK XIII — LOST CONNECTION
   Append to the END of existing Kuranoka Stormbreak XII CSS.
   Keep the original storm styles. Scope: html.kk-stormbreak-v4 only.
   ================================================================ */

/* Gray out the page as a collection of existing site-root nodes,
   NOT the body element (the colored Canvas layers are body siblings). */
html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {
  filter: grayscale(var(--kk-sb-gray, 1)) brightness(var(--kk-sb-dim, .72)) contrast(1.06);
  transition: filter .7s ease;
}

/* The interruption is a deliberate, click-to-continue scene, not a timer. */
html.kk-stormbreak-v4 #kk-sb-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482950 !important;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box;
  color: #e8eff7;
  background:
    radial-gradient(ellipse 72% 75% at 50% 47%, rgba(17,30,49,.92), rgba(1,4,12,.985) 82%),
    #02050a;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
  isolation: isolate;
}
html.kk-stormbreak-v4 #kk-sb-gate[hidden] {display:none !important;}
html.kk-stormbreak-v4 #kk-sb-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .19;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(182,210,229,.16) 0 1px, transparent 1px 7px);
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
html.kk-stormbreak-v4 .kk-sb-gate-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  box-sizing: border-box;
  padding: clamp(22px,5vw,48px);
  border: 1px solid rgba(175,208,231,.23);
  border-radius: 4px;
  background: rgba(2,8,19,.55);
  box-shadow: 0 0 100px rgba(30,83,110,.16), inset 0 0 1px rgba(236,249,255,.25);
}
html.kk-stormbreak-v4 .kk-sb-gate-icon {
  display: block;
  margin-bottom: 22px;
  font-size: 23px;
  letter-spacing: .24em;
  color: #a2e8f2;
}
html.kk-stormbreak-v4 .kk-sb-gate-code {
  font: 500 12px/1.8 ui-monospace, 'Consolas', monospace;
  color: #7fa4b5;
  letter-spacing: .21em;
}
html.kk-stormbreak-v4 #kk-sb-gate h2 {
  margin: 12px 0 23px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #f0f7fa !important;
  font: 750 clamp(25px,5.6vw,42px)/1.13 ui-monospace, 'Consolas', monospace !important;
  letter-spacing: .07em;
  overflow-wrap: anywhere;
}
html.kk-stormbreak-v4 #kk-sb-gate p {
  margin: 0 auto 10px !important;
  color: #d4e0e9 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
html.kk-stormbreak-v4 #kk-sb-gate .kk-sb-gate-sub {
  margin: 14px auto 27px !important;
  color: #9daebb !important;
  font-size: 12px !important;
}
html.kk-stormbreak-v4 .kk-sb-gate-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
html.kk-stormbreak-v4 #kk-sb-gate button {
  border-radius: 3px !important;
  padding: 12px 19px !important;
  min-height: 44px;
  border: 1px solid rgba(169,214,232,.5) !important;
  background: rgba(34,82,100,.27) !important;
  color: #e3f8ff !important;
  font: 500 14px/1.3 system-ui, sans-serif !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
html.kk-stormbreak-v4 #kk-sb-gate button:hover,
html.kk-stormbreak-v4 #kk-sb-gate button:focus-visible {
  background: rgba(70,139,162,.43) !important;
  border-color: #d6f8ff !important;
  outline: 2px solid #7ecbe1;
  outline-offset: 3px;
}
html.kk-stormbreak-v4 #kk-sb-gate .kk-sb-skip {
  color: #a2b0bc !important;
  background: transparent !important;
  border-color: rgba(153,169,185,.18) !important;
}

/* Chapter III: quieter suspended rain and weak colored atmospheric residue. */
html.kk-stormbreak-v4 #kk13-aftermath {
  position: fixed !important;
  inset: 0 !important;
  z-index: 414 !important;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  visibility: hidden;
  contain: strict;
  user-select: none;
}

/* Drifting, freely draggable shards. Only their clipped polygons intercept
   pointer events; the rest of the wiki is still scrollable/selectable. */
html.kk-stormbreak-v4 #kk-sb-peeks {
  position: fixed !important;
  inset: 0 !important;
  z-index: 416 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden;
  pointer-events: none !important;
  visibility: hidden;
  user-select: none;
  contain: strict;
}
html.kk-stormbreak-v4 .kk-sb-peek {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto !important;
  touch-action: none;
  cursor: grab;
  user-select: none !important;
  background:
    linear-gradient(126deg, rgba(193,229,244,.39), rgba(14,37,53,.65) 36%, rgba(69,111,144,.47) 74%, rgba(225,239,250,.46)),
    rgba(26,43,62,.43);
  box-shadow: inset 0 0 2px 1px rgba(204,236,255,.64), inset 0 0 36px rgba(60,125,151,.34);
  will-change: transform;
}
html.kk-stormbreak-v4 .kk-sb-peek:nth-child(4n) {
  background:
    linear-gradient(130deg, rgba(242,191,210,.35), rgba(65,11,26,.72) 43%, rgba(149,43,67,.45)),
    rgba(49,12,23,.5);
}
html.kk-stormbreak-v4 .kk-sb-peek-grabbed {cursor: grabbing;}
html.kk-stormbreak-v4 .kk-sb-peek-mirror {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: none !important;
  user-select: none !important;
}
html.kk-stormbreak-v4 .kk-sb-peek-clone,
html.kk-stormbreak-v4 .kk-sb-peek-clone * {
  pointer-events: none !important;
  user-select: none !important;
  text-decoration-color: currentColor;
}
/* This is the genuine template black curtain: don't reveal the DOM behind
   it globally; reveal an accurate local copy *inside shard windows only*. */
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .heimu,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .heimu *,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .blackout,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .blackout *,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .spoiler,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .spoiler * {
  color: #f4fbff !important;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #f4fbff !important;
}
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone {
  background: transparent !important;
  max-width: none !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width:680px) {
  html.kk-stormbreak-v4 #kk-sb-gate {padding: 15px !important;}
  html.kk-stormbreak-v4 .kk-sb-gate-actions {flex-direction:column;}
  html.kk-stormbreak-v4 .kk-sb-gate-actions button {width:100%;}
}
@media (prefers-reduced-motion:reduce) {
  html.kk-stormbreak-v4 #kk-sb-gate,
  html.kk-stormbreak-v4 #kk13-aftermath,
  html.kk-stormbreak-v4 #kk-sb-peeks {display:none !important;}
  html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {filter:none !important;}
}
@media print {
  html.kk-stormbreak-v4 #kk-sb-gate,
  html.kk-stormbreak-v4 #kk13-aftermath,
  html.kk-stormbreak-v4 #kk-sb-peeks {display:none !important;}
  html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {filter:none !important;}
}