/* virus — Computer Virus（Windows 95 の机） */
.sc-virus { background: #2a7fe0; --f: 12px; font-family: var(--f-sans); }
.sc-virus .vr-wall { position: absolute; inset: -3%; background: #2a7fe0 url(/assets/world/virus/wall.webp) center 58% / cover; will-change: transform; }
.sc-virus .vr-face img { filter: drop-shadow(0 calc(1.2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 40, .4)); }
.sc-virus .vr-face .vr-sl { position: absolute; left: 0; top: 0; filter: hue-rotate(150deg) saturate(1.8); opacity: 0; will-change: transform; }
.sc-virus .vr-face .vr-sl:nth-of-type(3) { filter: hue-rotate(-70deg) saturate(2); }
.sc-virus .vr-face .vr-sl:nth-of-type(4) { filter: invert(1); }

/* RGB にずれた帯 */
.sc-virus .vr-strips { position: absolute; inset: 0; pointer-events: none; }
.sc-virus .vr-strip { position: absolute; left: 0; right: 0; height: 1.6%; opacity: 0; mix-blend-mode: screen; background: linear-gradient(90deg, #f0f 0 30%, transparent 30% 36%, #0ff 36% 70%, transparent 70% 74%, #ff0 74%); animation: vr-strip 2.4s steps(1) infinite; }
.sc-virus .vr-strip.on { opacity: .55; }
.sc-virus .vr-strip:nth-child(1) { top: 18%; } .sc-virus .vr-strip:nth-child(2) { top: 63%; height: .7%; animation-delay: -.5s; }
.sc-virus .vr-strip:nth-child(3) { top: 39%; height: 2.6%; animation-delay: -1.1s; } .sc-virus .vr-strip:nth-child(4) { top: 81%; animation-delay: -1.7s; }
.sc-virus .vr-strip:nth-child(5) { top: 8%; height: .6%; animation-delay: -.9s; } .sc-virus .vr-strip:nth-child(6) { top: 52%; height: 3.4%; animation-delay: -2s; }
.sc-virus .vr-strip:nth-child(7) { top: 71%; height: 1%; animation-delay: -.2s; } .sc-virus .vr-strip:nth-child(8) { top: 28%; height: 4%; animation-delay: -1.4s; }
.sc-virus .vr-strip:nth-child(9) { top: 90%; height: 2%; animation-delay: -.7s; }
@keyframes vr-strip { 0% { transform: translateX(-6%); } 20% { transform: translateX(9%) scaleY(.4); } 40% { transform: translateX(-14%); opacity: 0; } 60% { transform: translateX(4%) scaleY(1.8); } 80% { transform: translateX(-3%); opacity: 0; } }

/* 机のアイコン */
.sc-virus .vr-icons { position: absolute; left: 14px; top: 84px; display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: calc(var(--f) * 1.1) calc(var(--f) * 1.4); font-size: var(--f); }
.sc-virus .vr-icon { display: block; width: 6.6em; text-align: center; text-decoration: none; color: #fff; font: 400 .92em/1.15 var(--f-sans); cursor: pointer; }
.sc-virus .vr-art { display: block; width: 3.1em; height: 3.1em; margin: 0 auto .3em; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35)); transition: transform .15s; }
.sc-virus .vr-art svg { width: 100%; height: 100%; display: block; }
.sc-virus .vr-icon em { font-style: normal; padding: 1px 3px; text-shadow: 1px 1px 0 #000; }
.sc-virus .vr-icon.sel em, .sc-virus .vr-icon:hover em, .sc-virus .vr-icon:focus-visible em { background: #000080; text-shadow: none; outline: 1px dotted #fff; }
.sc-virus .vr-icon:hover .vr-art { transform: translateY(-3px) rotate(-6deg) scale(1.12); }
.sc-virus .vr-go em { text-decoration: underline; }
.sc-virus .vr-go .vr-art { animation: vr-bob 1.6s ease-in-out infinite alternate; }
.sc-virus .vr-go:nth-child(2) .vr-art { animation-delay: -.4s; } .sc-virus .vr-go:nth-child(3) .vr-art { animation-delay: -.8s; } .sc-virus .vr-go:nth-child(4) .vr-art { animation-delay: -1.2s; }
@keyframes vr-bob { to { transform: translateY(-4px); } }

/* 窓 */
.sc-virus .vr-wins, .sc-virus .vr-curs { position: absolute; inset: 0; }
.sc-virus .vr-curs { pointer-events: none; }
.sc-virus .vr-win, .scene-virus .vr-ov .vr-win {
  position: absolute; translate: -50% -50%; font-size: var(--f); color: #000; background: #c0c0c0; padding: .25em;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf, .35em .45em 0 rgba(0, 0, 0, .28);
  transform: scale(.55); opacity: 0; visibility: hidden; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), opacity .06s, visibility 0s .16s;
  user-select: none; -webkit-user-select: none;
}
.sc-virus .vr-win.on { transform: none; opacity: 1; visibility: visible; transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), opacity .06s; }
.sc-virus .vr-win.shake { animation: vr-shake .3s; }
@keyframes vr-shake { 20% { transform: translateX(-.5em) rotate(-1.5deg); } 50% { transform: translateX(.5em) rotate(1.5deg); } 80% { transform: translateX(-.25em); } }
.sc-virus .vr-tb, .scene-virus .vr-ov .vr-tb { display: flex; align-items: center; gap: .18em; height: 1.75em; padding: 0 .2em 0 .45em; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; }
.sc-virus .vr-tb b, .scene-virus .vr-ov .vr-tb b { flex: 1; min-width: 0; font: 700 1em/1 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-virus .vr-c, .scene-virus .vr-ov .vr-c {
  flex: none; width: 1.3em; height: 1.2em; display: grid; place-items: center; background: #c0c0c0; color: #000; font: 700 .8em/1 var(--f-sans); font-style: normal; cursor: pointer;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080;
}
.sc-virus .vr-x { margin-left: .15em; }
.sc-virus .vr-c:active, .sc-virus .vr-btn:active { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff; }
.sc-virus .vr-body, .scene-virus .vr-ov .vr-body { display: flex; align-items: center; gap: .9em; padding: 1em 1em .7em; }
.sc-virus .vr-body p, .scene-virus .vr-ov .vr-body p { margin: 0; font: 400 1em/1.35 var(--f-sans); }
.sc-virus .vr-ico, .scene-virus .vr-ov .vr-ico { flex: none; width: 2.6em; height: 2.6em; }
.sc-virus .vr-ico svg, .scene-virus .vr-ov .vr-ico svg { width: 100%; height: 100%; display: block; }
.sc-virus .vr-btns, .scene-virus .vr-ov .vr-btns { display: flex; justify-content: center; gap: .6em; padding: 0 .8em .8em; }
.sc-virus .vr-btn, .scene-virus .vr-ov .vr-btn {
  min-width: 5.6em; padding: .34em .9em .3em; background: #c0c0c0; color: #000; font: 400 1em/1.1 var(--f-sans); white-space: nowrap;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
}
.sc-virus .vr-btn:hover { outline: 1px dotted #000; outline-offset: -5px; }
.sc-virus .vr-big { font-size: calc(var(--f) * 1.32); }
.sc-virus .vr-big .vr-btn { font-weight: 700; padding: .5em 1.4em; }
.sc-virus .vr-menu { padding: .2em .5em; font: 400 1em/1.2 var(--f-sans); word-spacing: .6em; }
.sc-virus .vr-menu u { text-decoration: underline; }

.sc-virus .vr-load { padding: .9em 1em 1em; }
.sc-virus .vr-load p { margin: 0 0 .6em; font: 400 1em/1.3 var(--f-sans); }
.sc-virus .vr-load p:last-child { margin: .6em 0 0; }
.sc-virus .vr-bar { display: flex; gap: .16em; height: 1.7em; padding: .2em; background: #c0c0c0; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.sc-virus .vr-bar i { flex: 1; background: #000080; opacity: 0; }

.sc-virus .vr-paint { display: flex; gap: .3em; padding: 0 .2em; }
.sc-virus .vr-tools { flex: none; width: 3.5em; display: grid; grid-template-columns: 1fr 1fr; gap: .1em; align-content: start; }
.sc-virus .vr-tools i { height: 1.65em; background: #c0c0c0; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff; position: relative; }
.sc-virus .vr-tools i.dn { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff; background: #dcdcdc; }
.sc-virus .vr-tools i::after { content: ''; position: absolute; inset: 28%; border: 2px solid #000; }
.sc-virus .vr-tools i.t0::after { border-width: 0 0 2px 0; rotate: -45deg; } .sc-virus .vr-tools i.t2::after { border-radius: 50%; } .sc-virus .vr-tools i.t3::after { border: 0; background: #000; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sc-virus .vr-canvas { flex: 1; background: #fff; box-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000; padding: .3em; }
.sc-virus .vr-canvas svg { width: 100%; display: block; }
.sc-virus .vr-aaa { font: 400 26px var(--f-marker); fill: #1d49cf; }
.sc-virus .vr-pal { display: grid; grid-template-columns: repeat(10, 1fr); gap: .1em; padding: .35em .2em .15em 4em; }
.sc-virus .vr-pal i { height: 1.05em; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.sc-virus .vr-note { height: 11.5em; margin: 0 .15em .15em; padding: .4em .5em; background: #fff; box-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000; font: 700 1.05em/1.32 var(--f-mono); overflow: hidden; word-break: break-all; }

.sc-virus .vr-blue { background: #0000aa; color: #fff; padding: 1.2em 1.4em; box-shadow: .35em .45em 0 rgba(0, 0, 0, .3); font: 700 .8em/1.4 var(--f-mono); }
.sc-virus .vr-blue p { margin: 0 0 .7em; }
.sc-virus .vr-bsod p { margin: 0 0 1.1em; }
.sc-virus .vr-blue p:last-child { margin: 0; }
.sc-virus .vr-blue .h, .sc-virus .vr-bsod .h { text-align: center; }
.sc-virus .vr-blue .h span, .sc-virus .vr-bsod .h span { background: #c0c0c0; color: #0000aa; }
.sc-virus .vr-blink { animation: vr-blink 1s steps(1) infinite; }
@keyframes vr-blink { 50% { opacity: 0; } }

/* カーソル */
.sc-virus .vr-cur, .scene-virus .vr-ov .vr-cur { position: absolute; width: 1.7em; font-size: var(--f); opacity: 0; animation: vr-wander 7s ease-in-out infinite alternate; }
.sc-virus .vr-cur.on, .scene-virus .vr-ov .vr-cur.on { opacity: 1; }
.sc-virus .vr-cur b, .scene-virus .vr-ov .vr-cur b { display: block; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .3)); }
.sc-virus .vr-cur svg, .scene-virus .vr-ov .vr-cur svg { width: 100%; display: block; }
@keyframes vr-wander { 0% { transform: translate(0, 0); } 30% { transform: translate(2.2em, -1.4em); } 55% { transform: translate(-1.6em, 1.8em); } 80% { transform: translate(3em, 2.4em); } 100% { transform: translate(-2.4em, -2em); } }

/* タスクバー */
.sc-virus .vr-task {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500; height: 2.9em; font-size: var(--f);
  display: flex; align-items: center; gap: .35em; padding: .3em .4em 0; background: #c0c0c0; box-shadow: inset 0 2px 0 #fff, 0 -1px 0 #dfdfdf; color: #000;
}
@media (max-width: 860px) { .sc-virus .vr-task { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } }
.sc-virus .vr-start, .sc-virus .vr-tk { height: 2.15em; display: flex; align-items: center; gap: .4em; padding: 0 .7em; background: #c0c0c0; color: #000; font: 400 1em/1 var(--f-sans); white-space: nowrap; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080; }
.sc-virus .vr-start b { font-weight: 700; font-size: 1.1em; }
.sc-virus .vr-start svg { width: 1.5em; height: 1.5em; }
.sc-virus .vr-poster { background: #dcdcdc; box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff; font-weight: 700; }
.sc-virus .vr-poster b { background: #000080; color: #fff; padding: .15em .35em; font-size: .8em; letter-spacing: .08em; }
.sc-virus .vr-poster:hover { background: #fff; }
.sc-virus .vr-cnt { min-width: 8em; }
.sc-virus .vr-clock { margin-left: auto; height: 2.15em; display: flex; align-items: center; padding: 0 .9em; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; }
.sc-virus:not(.wide) .vr-opt { display: none; }
.sc-virus:not(.wide) .vr-cnt { min-width: 0; }

/* ブルースクリーン */
.sc-virus .vr-bsod { position: absolute; inset: 0; z-index: 600; background: #0000aa; color: #fff; display: grid; place-items: center; visibility: hidden; padding: 0 7vw; font: 700 calc(max(13px, 2.9 * var(--u)))/1.5 var(--f-mono); }
.sc-virus .vr-bsod > div { max-width: 34em; }

/* 境目にはみ出す窓 */
.scene-virus .vr-ov { position: absolute; left: 0; right: 0; top: 0; font-family: var(--f-sans); --f: clamp(11px, 1.2vw, 14px); }
.scene-virus .vr-ov .vr-win { transform: none; opacity: 1; visibility: visible; }
.scene-virus .vr-ov .vr-win:nth-child(1) { left: 22%; top: -34px; rotate: -4deg; }
.scene-virus .vr-ov .vr-win:nth-child(2) { left: 74%; top: -62px; rotate: 3deg; }
.scene-virus .vr-ov .vr-cur:nth-of-type(1) { left: 48%; top: -70px; } .scene-virus .vr-ov .vr-cur:nth-of-type(2) { left: 88%; top: -20px; font-size: calc(var(--f) * 1.4); }

@media (max-width: 860px) {
  .sc-virus .vr-icons { top: 66px; left: 8px; grid-template-rows: repeat(2, auto); grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); right: 8px; gap: 8px 0; }
  .sc-virus .vr-icon { width: auto; }
  .sc-virus .vr-icon:nth-child(n+6) { display: none; }
}