/* 帰宅してコソッと 対戦モード（js/vs.js）の画面。本編のパネル（.panel / .eyebrow / button.go / .sndbtn）の見た目に合わせる */
.vs-ovl[hidden], .vs-ovl [hidden] { display: none !important; }
.vs-ovl { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(3, 7, 5, .86); }
.vs-ovl.vs-top { z-index: 70; background: rgba(3, 7, 5, .7); }
.vs-panel { width: min(100%, 400px); max-height: calc(100dvh - 28px); text-align: center; -webkit-user-select: none; user-select: none; }
.vs-h { margin: 0 0 .7em; color: #e8f6e2; font: 19px/1.4 'DotGothic16', monospace; letter-spacing: .08em; text-shadow: 0 2px 0 #14301a; }
.vs-lead, .vs-text { font-size: 13px; line-height: 1.8; text-align: left; color: #cfe9c8; margin: 0 0 .8em; }
.vs-lead { text-align: center; }
.vs-text b { color: #ffd84d; font-weight: normal; }
.vs-field { display: flex; align-items: center; gap: 10px; margin: .4em 0 .2em; text-align: left; }
.vs-field span { flex: none; font-size: 12px; color: #69875f; }
.vs-panel input:not([type=checkbox]) { flex: 1; min-width: 0; width: 100%; padding: .55em .7em; border: 1px solid #2f5d33; background: #081409; color: #e8f6e2;
  font: 16px 'DotGothic16', monospace; -webkit-user-select: text; user-select: text; border-radius: 0; }
.vs-panel input:focus { outline: none; border-color: #9fe89f; }
#vsCode { letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.vs-go { width: 100%; margin: .9em 0 0; }
.vs-go:disabled { opacity: .4; cursor: default; }
.vs-row { display: flex; gap: 8px; align-items: stretch; margin-top: .9em; }
.vs-row .vs-go { margin: 0; padding-left: 1.2em; padding-right: 1.2em; }
.vs-row .sndbtn { flex: none; }
.vs-wide { display: block; width: 100%; margin-top: .9em; padding: 1em; }
.vs-or { margin: 1.2em 0 .5em; font-size: 12px; color: #69875f; }
.vs-join { display: flex; gap: 8px; }
.vs-join .sndbtn { flex: none; padding: .7em 1.4em; font-size: 9px; }
.vs-link { margin: 1em 0 0; padding: 4px; border: 0; background: none; color: #7fd4ff; font: 12px 'DotGothic16', monospace; text-decoration: underline; cursor: pointer; }
.vs-link:focus-visible, .vs-role:focus-visible { outline: 1px solid #ffd84d; outline-offset: 2px; }
.vs-code { display: flex; flex-direction: column; align-items: center; gap: .3em; margin: 0 0 .7em; }
.vs-code span { font-size: 11px; color: #69875f; }
.vs-code b { font: 26px/1.2 'Press Start 2P', monospace; letter-spacing: .12em; color: #ffd84d; text-shadow: 0 3px 0 #5a4408; font-weight: normal;
  -webkit-user-select: all; user-select: all; }
.vs-share { display: flex; justify-content: center; gap: 8px; margin-bottom: .8em; }
.vs-seats, .vs-result { list-style: none; margin: 0; padding: 0; text-align: left; }
.vs-seat, .vs-result li { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; padding: .45em .6em; margin: 0 0 4px;
  border: 1px solid #234a28; background: rgba(0, 0, 0, .25); }
.vs-seat.me, .vs-result li.me { border-color: #5fae64; }
.vs-seat.empty { opacity: .45; }
.vs-seat i, .vs-result i { display: block; width: 10px; height: 10px; }
.vs-seat b, .vs-result b { font-weight: normal; font-size: 13px; color: #e8f6e2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-seat em, .vs-result em { font-style: normal; font-size: 11px; color: #69875f; white-space: nowrap; }
.vs-seat em.ok { color: #9fe89f; } .vs-seat em.away { color: #ffaa30; }
.vs-role { font: 11px 'DotGothic16', monospace; padding: .25em .7em; border: 1px solid #5fae64; background: rgba(95, 174, 100, .15); color: #9fe89f; cursor: pointer; }
.vs-role.seek { border-color: #c04545; background: rgba(192, 69, 69, .2); color: #ff8080; }
.vs-role:disabled { cursor: default; opacity: .95; }
.vs-hint { margin: .6em 0 0; font-size: 11px; line-height: 1.6; color: #69875f; text-align: left; }
.vs-check { display: flex; align-items: center; justify-content: center; gap: 8px; margin: .8em 0 0; font-size: 12px; color: #cfe9c8; cursor: pointer; }
.vs-check input { width: 18px; height: 18px; margin: 0; accent-color: #9fe89f; }
.vs-status { min-height: 1.4em; margin: .9em 0 0; font-size: 12px; line-height: 1.7; color: #ffd84d; white-space: pre-line; }
.vs-status:empty { margin: 0; min-height: 0; }
.vs-status.wait::after { content: "▌"; animation: bl .7s steps(1) infinite; }
.vs-note, .vs-mini { margin: .9em 0 0; font-size: 11px; line-height: 1.6; color: #4d8b52; }
.vs-result-head { margin: 0 0 .7em; font-size: 16px; color: #ffd84d; }
.vs-result li { grid-template-columns: 10px 1fr auto auto; }
.vs-result em.safe { color: #9fe89f; } .vs-result em.caught { color: #ff8080; } .vs-result em.seek { color: #ff8080; }
.vs-result small { font-size: 11px; color: #69875f; }
.vs-toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); z-index: 65; transform: translate(-50%, -6px); max-width: calc(100% - 32px);
  padding: .4em 1em; background: rgba(6, 18, 10, .92); border: 1px solid #2f5d33; color: #cfe9c8; font: 13px 'DotGothic16', monospace;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.vs-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sndbtn.vsbtn { color: #ffd84d; border-color: #8a6a18; }
@media (prefers-reduced-motion: reduce) { .vs-status.wait::after { animation: none; } }