:root { --accent: #1fb6ff; --accent2: #ff4f8b; --ink: #23324a; --muted: #7a8aa0; --panel: rgba(255, 255, 255, 0.82); --line: rgba(35, 50, 74, 0.1); --shadow: 0 8px 30px rgba(31, 120, 190, 0.18); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; } /* 画面の部品の大きさ（ui-scale.js：ウィンドウの大きさ × メニューの「文字の大きさ」）。3D の画面（#app）は拡大・縮小しない */ body > :not(#app):not(#flash):not(#space-fade) { zoom: var(--ui-zoom, 1); } body { font-family: 'M PLUS Rounded 1c', system-ui, sans-serif; background: #eef9ff; color: var(--ink); -webkit-font-smoothing: antialiased; } button, input { font: inherit; color: inherit; } .hidden { display: none !important; } kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 1px; border-radius: 6px; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; font-family: inherit; font-weight: 700; font-size: 11px; line-height: 1.6; text-align: center; color: var(--ink); } #app canvas { display: block; } .label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .label-layer * { pointer-events: none; } /* ---------- ロゴ ---------- */ .logo { margin: 0; font-weight: 800; letter-spacing: .12em; background: linear-gradient(90deg, #ff7a59, #ff4fa3 25%, #7c5cff 50%, #2bb3ff 75%, #3ccf6e); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- ログイン ---------- */ #login { position: fixed; inset: 0; display: grid; justify-items: center; align-items: start; overflow-y: auto; padding: max(16px, 8vh) 16px 16px; /* タブ切替で高さが変わってもカードが上下に動かないよう上寄せ */ background: radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(220,242,255,.6)); backdrop-filter: blur(3px); z-index: 10; } .card { width: min(640px, 100%); padding: 28px 28px 24px; border-radius: 28px; background: var(--panel); backdrop-filter: blur(16px); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.8); text-align: center; animation: pop .5s cubic-bezier(.2,1.4,.4,1); } .logo-img { margin: 0; line-height: 0; } .logo-img img { width: min(380px, 85%); height: auto; } .tagline { margin: 8px 0 18px; color: var(--muted); font-weight: 700; } .login-body { display: flex; gap: 20px; align-items: center; text-align: left; } #preview { width: 220px; height: 220px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff, #d8f1ff); box-shadow: inset 0 0 0 3px #fff, 0 6px 20px rgba(31,182,255,.2); } .fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .fields label { font-size: 12px; font-weight: 800; color: var(--muted); margin-top: 6px; } .fields input { padding: 10px 14px; border-radius: 14px; border: 2px solid #d6ecfa; background: #fff; outline: none; font-weight: 700; } .fields input:focus { border-color: var(--accent); } .type-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .type-btn { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border-radius: 12px; border: 2px solid transparent; background: #f1f8fd; cursor: pointer; font-weight: 700; font-size: 13px; transition: transform .15s; } .type-btn:hover { transform: translateY(-2px); } .type-btn.active { border-color: var(--accent); background: #fff; } .color-list { display: flex; flex-wrap: wrap; gap: 8px; } .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .15s; } .swatch:hover { transform: scale(1.12); } .swatch.active { box-shadow: 0 0 0 3px var(--accent); } .primary { margin-top: 20px; width: 100%; padding: 14px; border: 0; border-radius: 18px; cursor: pointer; background: linear-gradient(90deg, #2bb3ff, #7c5cff); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .2em; box-shadow: 0 6px 18px rgba(43,179,255,.4); transition: transform .15s, box-shadow .15s; } .primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(43,179,255,.5); } @media (max-width: 600px) { .login-body { flex-direction: column; } #preview { width: 160px; height: 160px; } .logo-img img { width: min(280px, 90%); } } /* ---------- HUD 共通 ---------- */ #hud > * { position: fixed; z-index: 5; } .pill { --c: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); border: 2px solid var(--c); } .pill.ghost { border-color: transparent; color: var(--muted); } #topbar { top: 16px; left: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } #topbar .logo-small { height: 36px; width: auto; margin-right: 4px; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 2px 8px rgba(0,0,0,.15)); } #minimap { width: 180px; height: 180px; border-radius: 50%; flex: none; box-shadow: var(--shadow), 0 0 0 4px #fff; } #teleport { /* 上のボタンの列のすぐ下（列が 2 段になったときは、main.js の placeTeleport で下げる） */ top: 84px; left: 16px; display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: 14px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); } .nav-title { font-size: 9px; font-weight: 800; color: var(--muted); letter-spacing: .2em; padding: 0 5px 2px; } #teleport button { --c: var(--accent); display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 5px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 700; font-size: 11px; text-align: left; transition: background .15s, transform .15s; } #teleport button:hover { background: #fff; transform: translateX(3px); } #teleport .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; } #chat { left: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); } #chat-log { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px 4px; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent, #000 25%); } .log-row { align-self: flex-start; max-width: 100%; padding: 5px 12px; border-radius: 14px; background: rgba(255,255,255,.88); font-size: 13px; box-shadow: 0 2px 8px rgba(31,120,190,.1); word-break: break-word; } .log-row b { margin-right: 8px; color: var(--accent); } .log-row.me b { color: var(--accent2); } .log-row.bot b { color: #9a7cff; } .log-row.system { background: rgba(35,50,74,.55); color: #fff; font-size: 12px; font-weight: 700; } #chat-form { display: flex; gap: 6px; margin-top: 6px; } #chat-form input { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 2px solid transparent; background: rgba(255,255,255,.92); box-shadow: var(--shadow); outline: none; font-weight: 700; } #chat-form input:focus { border-color: var(--accent); } /* チャットの届く範囲（全体／この部屋だけ） */ #chat-scope { align-self: center; flex: none; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); font-size: 12px; font-weight: 800; white-space: nowrap; color: #2b6cb0; } #chat-scope.room { background: #fff4d6; color: #8a5a00; } /* 出展成果（PC の画面）：数字のタイル・横に長い表 */ .ed-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 14px; } .ed-tile { background: #f4f7fb; border: 1px solid #e3e8f0; border-radius: 10px; padding: 8px 10px; } .ed-tile small { display: block; color: #6b7a90; font-size: 11px; } .ed-tile b { font-size: 18px; } .ed-scroll { overflow-x: auto; } .ed-scroll th, .ed-scroll td { white-space: nowrap; } /* スマホ：チャット欄がせまいので、届く範囲は入力欄の上の 1 行に出す（入力欄の幅を取らない） */ body.touch #chat-form { flex-wrap: wrap; } body.touch #chat-scope { flex: 0 0 auto; margin-right: 100%; padding: 3px 9px; font-size: 11px; } .log-row.room b::before { content: '🔒 '; } #chat-form button { padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; } #emotes { bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } #emotes button { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; box-shadow: var(--shadow); font-size: 24px; transition: transform .15s; } #emotes button:hover { transform: translateY(-4px) scale(1.06); } #emotes kbd { position: absolute; right: -4px; bottom: -4px; } /* 展示会の会議室：どの打ち合わせ（部屋）に入るか選ぶ（担当者。会議室が 2 つ以上のブース） */ #meet-pick { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10, 16, 28, .45); } #meet-pick .mp-card { display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.3); } #meet-pick button { border: 0; border-radius: 12px; padding: 10px 14px; text-align: left; font: inherit; font-weight: 800; cursor: pointer; background: linear-gradient(90deg, #1fb6ff, #7c5cff); color: #fff; } #meet-pick button.sub { background: #eef2f6; color: #53627a; text-align: center; } /* 読み込み直して前の場所へ戻る間は、ログイン画面を見せない（index.html の先頭で付ける） */ html.resuming #login { visibility: hidden !important; } #help { transform: scale(0.75); transform-origin: right bottom; /* 操作の案内は、縦・横とも 0.75 倍の大きさで出す */ right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 18px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: 12px; } .help-title { font-weight: 800; color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } .help-title:hover { color: var(--ink); } .help-title .help-toggle { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 8px; background: #eef2f6; color: var(--ink); } #help ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; } #help.collapsed ul { display: none; } #banner { --c: var(--accent); top: 22%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; opacity: 0; } #banner small { display: block; font-weight: 800; letter-spacing: .4em; color: var(--c); font-size: 13px; } #banner strong { display: inline-block; margin-top: 6px; padding: 10px 28px; border-radius: 999px; background: #fff; font-size: 28px; font-weight: 800; box-shadow: var(--shadow); border: 3px solid var(--c); } #banner.show { animation: banner 2.8s ease forwards; } #lock-hint { top: 64%; left: 50%; transform: translateX(-50%); pointer-events: none; text-align: center; padding: 10px 20px; border-radius: 999px; background: rgba(35,50,74,.7); color: #fff; font-weight: 800; font-size: 14px; backdrop-filter: blur(6px); animation: pop .3s ease; } #lock-hint small { display: block; font-size: 11px; font-weight: 700; opacity: .8; } body.locked #lock-hint, body.freelook #lock-hint { display: none; } body.locked #chat-form input::placeholder { color: var(--muted); } #flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; } #flash.on { animation: flash 1.8s ease; } /* ---------- 3D ラベル ---------- */ .district-label { --c: var(--accent); display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; border: 3px solid var(--c); font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.08); } .district-label .icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); font-size: 15px; } .name-tag { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: opacity .2s; } .name-tag.me { background: var(--accent); color: #fff; } .name-tag .badge { margin-left: 5px; padding: 0 5px; border-radius: 6px; background: #efeaff; color: #7c5cff; font-size: 9px; vertical-align: 1px; } .bubble { position: relative; max-width: 220px; padding: 8px 14px; border-radius: 16px; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; word-break: break-word; box-shadow: 0 6px 18px rgba(31,120,190,.18); border: 2px solid #d6ecfa; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s, transform .25s; } .bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; } .bubble.show { opacity: 1; transform: none; } .heart { font-size: 22px; animation: floatUp 1.5s ease-out forwards; } /* ---------- アニメーション ---------- */ @keyframes pop { from { opacity: 0; transform: scale(.9); } } @keyframes floatUp { to { transform: translateY(-70px) scale(1.3); opacity: 0; } } @keyframes flash { 0% { opacity: 0; } 40% { opacity: .85; } 100% { opacity: 0; } } @keyframes banner { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%); } } @media (max-height: 900px) { #chat-log { max-height: max(60px, calc(100vh - 460px)); } } @media (max-width: 760px) { #teleport, #help { display: none; } #minimap { width: 120px; height: 120px; } #emotes { bottom: auto; top: 300px; left: auto; right: 16px; transform: none; flex-direction: column; } } /* ---------- ボイスチャット ---------- */ #vc { width: 100%; padding: 10px; border-radius: 18px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .vc-head { font-weight: 800; color: var(--muted); text-align: center; } .vc-join { padding: 9px 8px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 13px; background: linear-gradient(90deg, #2ecc71, #1fb6ff); color: #fff; box-shadow: 0 4px 12px rgba(46,204,113,.35); } .vc-controls { display: none; gap: 6px; } .vc-controls button { border: 0; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 12px; padding: 8px 8px; } #vc-mute { flex: 1; display: flex; align-items: center; gap: 4px; background: #e6f9ee; color: #1e8f4f; } #vc-mute.muted { background: #ffe9ee; color: #d6385e; } #vc-mute:disabled { cursor: default; opacity: .8; } #vc-mute kbd { margin-left: auto; } #vc-leave { background: #eef2f6; color: var(--muted); } .vc-range { display: none; text-align: center; color: #1e8f4f; font-weight: 700; font-size: 11px; } #vc.active .vc-join { display: none; } #vc.active .vc-controls { display: flex; } #vc.active .vc-range { display: block; } .vc-asmr { display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 12px; padding: 7px 8px; background: #eef2f6; color: var(--muted); } /* 通知の設定（メニューの中） */ .push-settings { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .push-settings .vs-sub { margin: 0; font-size: 11px; color: var(--muted); } .push-settings .ps-state { font-weight: 700; padding: 6px 8px; border-radius: 8px; background: #edf2f7; } .push-settings .ps-state.on { background: #e6fffa; color: #2c7a7b; } .push-settings .ps-btns { display: flex; gap: 6px; flex-wrap: wrap; } .push-settings button { border: 1px solid #cbd5e0; background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-weight: 700; cursor: pointer; } .push-settings button.go { background: #3182ce; border-color: #3182ce; color: #fff; } .push-settings button:disabled { opacity: .5; cursor: default; } .push-settings label { display: flex; align-items: center; gap: 6px; } .push-settings .ps-msg { color: #2b6cb0; } /* ボイスの設定（メニューの中）：マイク・ASMR の左右のメーター・入力ゲイン・音質・モニター・聴くときの音量 */ .voice-settings { display: flex; flex-direction: column; gap: 6px; font-size: 12px; } #vc .voice-settings { display: none; } /* メニューに移すまでは出さない */ .voice-settings h4 { margin: 6px 0 0; font-size: 12px; color: #553c9a; } .voice-settings .vs-sub { margin: 0; font-size: 11px; color: var(--muted); } .voice-settings label { display: flex; align-items: center; gap: 8px; font-weight: 700; } .voice-settings label:has(#ap-ns-normal), .voice-settings label:has(#ap-ns-asmr) { flex-wrap: wrap; } .voice-settings select { flex: 1; min-width: 0; font-size: 12px; border-radius: 6px; border: 1px solid #d6bcfa; padding: 3px 4px; } .voice-settings input[type=range] { flex: 1; min-width: 0; accent-color: #805ad5; } .voice-settings b { min-width: 40px; text-align: right; } .voice-settings .ap-chk { font-weight: 600; } .voice-settings .vs-scale { display: flex; justify-content: space-between; margin: -4px 40px 0 74px; font-size: 9px; color: var(--muted); } .ap-meter { display: flex; align-items: center; gap: 6px; font-weight: 800; } .ap-meter > div { flex: 1; height: 8px; border-radius: 4px; background: #e9d8fd; overflow: hidden; } .ap-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #48bb78, #ecc94b 75%, #f56565); transition: width .05s; } .ap-meter.clip span { color: #e53e3e; } .ap-st { font-weight: 700; } .ap-st.warn { color: #c53030; } .ap-hear { font-weight: 800; } .ap-retry { display: none; border: 0; border-radius: 10px; padding: 6px; font-weight: 800; cursor: pointer; background: linear-gradient(90deg, #b06ab3, #4568dc); color: #fff; } #vc.asmr-near:not(.asmr-hear) .ap-retry { display: block; } .name-tag.asmr::after { content: '🎧ASMR'; margin-left: 4px; font-size: 9px; font-weight: 800; color: #fff; background: #805ad5; border-radius: 6px; padding: 0 4px; } .vc-asmr.on { background: linear-gradient(90deg, #b06ab3, #4568dc); color: #fff; box-shadow: 0 3px 10px rgba(120,90,200,.35); } /* 名札の VC 表示 */ .name-tag.vc::before { content: '🔊'; margin-right: 4px; font-size: 10px; } .name-tag.vc.muted::before { content: '🔇'; } .name-tag.vc.far::before { opacity: .35; } .name-tag.speaking { box-shadow: 0 0 0 3px #2ecc71, 0 0 14px rgba(46,204,113,.7); } @media (max-width: 760px) { #right-col { width: 160px; } #world-panel .astro { flex-direction: column; } } /* ---------- 右カラム：ワールドタイム / ミニマップ / VC ---------- */ #right-col { top: 16px; right: 16px; width: 200px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; /* 画面の高さに収まらないとき（ASMR の設定を開いたときなど）は、右カラムだけスクロールする */ max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; } #right-col > * { flex-shrink: 0; } #world-panel { width: 100%; padding: 10px 12px; border-radius: 18px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; } .clock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } #clock-time { font-size: 24px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.1; } #clock-period { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; } #world-panel .sub { font-size: 11px; font-weight: 700; color: var(--muted); } #world-panel .place { display: flex; align-items: center; justify-content: space-between; gap: 4px; } #locate { border: 0; border-radius: 8px; padding: 2px 6px; background: #eef6fc; cursor: pointer; font-size: 10px; font-weight: 800; color: var(--accent); white-space: nowrap; } #world-panel .astro { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .skin-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5px; padding: 3px; border-radius: 11px; background: #eef2f6; } .skin-switch button { border: 0; border-radius: 8px; padding: 5px 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--muted); } .skin-switch button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(31,120,190,.18); } /* リアルワールド生成中の表示 */ #skin-loading { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 30; display: none; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(20, 28, 40, 0.8); color: #fff; font-weight: 800; font-size: 14px; backdrop-filter: blur(8px); } #skin-loading.show { display: flex; } #skin-loading .spinner { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- ロゴ以外を非表示（U キー） ---------- */ #hud > *, #topbar > *, .label-layer { transition: opacity .25s; } body.ui-hidden #hud > *:not(#topbar):not(#ui-hint):not(#elevator):not(#office-chip):not(#npc-talk):not(#office-modal):not(#depart-chip):not(#depart-modal):not(#guide-chip):not(#guide-talk):not(#tenant-chip):not(#tenant-modal):not(#expo-chip):not(#expo-modal):not(#tv-chip):not(#hand-prompt):not(#ib-hold-chip):not(#home-edit-btn):not(#home-panel):not(#home-hold):not(#touch-actions):not(#joy):not(#sg-hud):not(#right-col), /* エレベーターの階選択・スマホの操作（スティック・ボタン）・NPC との会話や近くの物を使うボタンとその画面は、非表示中も出す */ body.ui-hidden #topbar > *:not(.logo-small), body.ui-hidden .label-layer { opacity: 0 !important; pointer-events: none !important; } #ui-hint { top: 60px; left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 28, 40, 0.7); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; } #ui-hint.show { opacity: 1; } /* ---------- アカウント ---------- */ .auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 auto 14px; max-width: 360px; border-radius: 14px; background: #eef2f6; } .auth-tabs button { border: 0; border-radius: 10px; padding: 8px 0; background: transparent; cursor: pointer; font-weight: 800; color: var(--muted); } .auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(31,120,190,.18); } .auth-panel { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 0 auto; text-align: left; } .auth-panel input { padding: 11px 14px; border-radius: 14px; border: 2px solid #d6ecfa; background: #fff; outline: none; font-weight: 700; } .auth-panel input:focus { border-color: var(--accent); } .auth-panel .primary { margin-top: 6px; } .auth-error { min-height: 1.2em; color: #d6385e; font-size: 12px; font-weight: 800; } .auth-link { border: 0; background: none; padding: 2px 0; color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: underline; align-self: center; } .auth-info { min-height: 0; color: #1e8f4f; font-size: 12px; font-weight: 800; line-height: 1.6; } .pw-note { margin: 0 0 4px; font-size: 12px; font-weight: 800; line-height: 1.6; color: var(--ink); } .account-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; padding: 8px 12px; border-radius: 12px; background: #eef6fc; font-size: 13px; font-weight: 700; text-align: left; } .account-bar b { word-break: break-all; } .account-bar { flex-wrap: wrap; } .account-bar button { border: 0; border-radius: 10px; padding: 6px 12px; background: #fff; color: var(--muted); font-weight: 800; cursor: pointer; flex: none; } .custom-avatar .custom-row { display: flex; gap: 6px; flex-wrap: wrap; } .custom-avatar button { border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 800; font-size: 12px; background: linear-gradient(90deg, #2bb3ff, #7c5cff); color: #fff; } .custom-avatar #avatar-remove { background: #eef2f6; color: var(--muted); } .avatar-status { min-height: 1.2em; font-size: 11px; font-weight: 700; color: var(--muted); } .avatar-status.error { color: #d6385e; } .guest-note { margin: 6px 0 0; font-size: 11px; font-weight: 700; color: var(--muted); } /* 建物に出入りするときの暗転 */ #space-fade { position: fixed; inset: 0; z-index: 25; background: #0b0f16; opacity: 0; pointer-events: none; transition: opacity .3s ease; } #space-fade.on { opacity: 1; } /* ---------- 視点切替（F キー） ---------- */ #view-toast { top: 40%; left: 50%; transform: translate(-50%, -50%); padding: 8px 18px; border-radius: 999px; background: rgba(20, 28, 40, 0.72); color: #fff; font-weight: 800; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .25s; } #view-toast.show { opacity: 1; } #crosshair { top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; display: none; } body.first-person #crosshair { display: block; } body.first-person #lock-hint { top: 58%; } /* お店のスタッフ */ .name-tag .badge.staff { background: #fff1e0; color: #d9731a; } .admin-link { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--accent); text-decoration: none; white-space: nowrap; } .admin-link:hover { text-decoration: underline; } /* ---------- エレベーターの階選択 ---------- */ #elevator { left: 50%; bottom: 130px; transform: translateX(-50%); padding: 6px 16px; border-radius: 16px; background: var(--panel); backdrop-filter: blur(12px); box-shadow: var(--shadow); text-align: center; min-width: 220px; } #elevator .ev-head { font-weight: 800; font-size: 13px; line-height: 18px; } #elevator .ev-now { margin-left: 6px; font-size: 12px; color: var(--muted); } #elevator .ev-floors { display: flex; gap: 6px 10px; justify-content: center; flex-wrap: wrap; max-height: 46vh; overflow-y: auto; margin: 4px 0 0; } #elevator button { min-width: 64px; height: 32px; padding: 0 16px; border-radius: 16px; white-space: nowrap; border: 2px solid #c9a25a; background: #23272e; color: #ffb13b; font-family: inherit; font-weight: 800; font-size: 17px; cursor: pointer; transition: transform .15s, box-shadow .15s; } /* 行き先が多いとき（100 階建てのオフィスビルで、たくさんの階に入れる人）：横に広げて、ボタンを小さく */ #elevator.many { width: min(760px, calc(100vw - 32px)); box-sizing: border-box; } #elevator.many .ev-floors { max-height: 40vh; gap: 5px 6px; } #elevator.many button { min-width: 54px; height: 28px; padding: 0 10px; font-size: 14px; } #elevator button:hover:not(:disabled) { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255, 177, 59, 0.3); } #elevator button.current { background: #ffb13b; color: #23272e; cursor: default; } #elevator small { display: none; } /* 案内の一文は出さない（階選択を低く・小さくするため） */ /* ---------- 表示モード（デスクトップ / VR） ---------- */ .mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin-top: 5px; padding: 3px; border-radius: 11px; background: #eef2f6; } .mode-switch button { border: 0; border-radius: 8px; padding: 5px 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--muted); } .mode-switch button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(31,120,190,.18); } .mode-switch button.unsupported { opacity: .5; } /* ===================================================================== スマホ・タブレット（タッチ操作） body.touch は touch.js が付ける ===================================================================== */ body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } body.touch input { -webkit-user-select: text; user-select: text; } body.touch #app canvas { touch-action: none; } body.touch #help, body.touch #lock-hint, body.touch kbd { display: none !important; } /* 上：ロゴ・エリア名（左）と メニュー・ミニマップ（右） */ body.touch #topbar { top: calc(8px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); gap: 6px; max-width: calc(100vw - 150px); } body.touch #topbar .logo-small { height: 26px; } body.touch .pill { font-size: 11px; padding: 4px 10px; border-width: 2px; } body.touch #topbar { flex-wrap: nowrap; } body.touch #area { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; display: inline-block; } /* スマホの縦画面：文字やボタンが見切れないように ・場所の名前は省略せず、入りきらなければ 2 行に折り返す ・1 行で出していた案内（展示会のブース・アイテムを持っているとき・案内人・中継など）も、画面の幅で折り返す */ @media (orientation: portrait) { body.touch #topbar { flex-wrap: wrap; align-items: center; } body.touch #area { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; line-height: 1.35; } body.touch #expo-chip, body.touch #ib-hold-chip, body.touch #guide-chip, body.touch #tv-chip, body.touch #office-chip { white-space: normal; max-width: calc(100vw - 24px); box-sizing: border-box; text-align: center; flex-wrap: wrap; justify-content: center; } body.touch #elevator { max-width: calc(100vw - 24px); box-sizing: border-box; } html body.touch #chat { top: calc(78px + env(safe-area-inset-top)); } /* 2 行になった場所の名前の下から */ body.touch #elevator button { white-space: normal; height: auto; min-height: 30px; } } /* 幅の狭いスマホでは人数表示はメニューの中へ */ @media (max-width: 560px) { body.touch #topbar #online { display: none; } } body.touch #right-col { top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: auto; flex-direction: row; align-items: flex-start; gap: 8px; } body.touch #minimap { width: 84px; height: 84px; box-shadow: var(--shadow), 0 0 0 3px #fff; } #menu-btn { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: 22px; font-weight: 800; color: var(--ink); cursor: pointer; } #menu-btn.on { background: var(--accent); color: #fff; } /* ☰ メニュー（時計・スキン・表示モード・VC・ワープ） */ #m-menu { top: calc(8px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: min(300px, calc(100vw - 20px)); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; padding: 12px; border-radius: 20px; z-index: 12 !important; background: rgba(245, 250, 255, 0.95); backdrop-filter: blur(14px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } #m-menu .m-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; } #m-menu .m-close { width: 36px; height: 36px; border: 0; border-radius: 12px; background: #eef2f6; font-size: 20px; cursor: pointer; } #m-menu #world-panel, #m-menu #vc { box-shadow: none; background: #fff; } #m-menu #teleport { display: flex; position: static; transform: none; box-shadow: none; background: #fff; } #m-menu #teleport button { font-size: 14px; padding: 9px 10px; } #m-menu .m-tools { display: flex; gap: 8px; } #m-menu .m-tools button { flex: 1; padding: 10px 8px; border: 0; border-radius: 12px; background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; } /* チャット：ログは左上に小さく。入力欄は 💬 を押したときだけ（キーボードに隠れないよう上に出す） */ body.touch #chat { top: calc(44px + env(safe-area-inset-top)); bottom: auto; left: calc(10px + env(safe-area-inset-left)); width: min(320px, 62vw); } body.touch #chat-log { max-height: 22vh; font-size: 11px; } body.touch #chat-form { display: none; } body.touch.chat-open #chat-form { display: flex; } /* 左下：移動スティック */ #joy { left: calc(22px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%; touch-action: none; background: rgba(255, 255, 255, 0.28); border: 2px solid rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); box-shadow: 0 6px 20px rgba(31, 120, 190, 0.18); } #joy .knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(31, 120, 190, 0.35); pointer-events: none; } #joy.on .knob { background: var(--accent); } /* 右下：操作ボタン */ #touch-actions { right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 54px); gap: 10px; } #touch-actions button { width: 54px; height: 54px; border: 0; border-radius: 50%; touch-action: none; cursor: pointer; background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow); font-size: 22px; line-height: 1; } #touch-actions button.on { background: var(--accent); color: #fff; } /* エモート：😊 を押すと操作ボタンの上に出る */ body.touch #emotes { display: none; top: auto; left: auto; transform: none; flex-direction: row; right: calc(16px + env(safe-area-inset-right)); bottom: calc(150px + env(safe-area-inset-bottom)); } body.touch.emotes-open #emotes { display: flex; } /* エレベーターの階選択は、スティックとボタンに重ならない高さに */ body.touch #elevator { bottom: auto; top: 36%; } body.touch #banner strong { font-size: 22px; } /* ログイン画面（スマホ） */ @media (max-width: 600px) { #login { padding-top: max(12px, env(safe-area-inset-top)); } .card { padding: 18px 16px 16px; border-radius: 22px; } .tagline { margin: 4px 0 12px; font-size: 13px; } } /* 縦向きのときの「横向きにしてください」 */ #rotate-hint { display: none; inset: 0; z-index: 40 !important; padding: 24px; text-align: center; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(11, 15, 22, 0.88); color: #fff; backdrop-filter: blur(6px); } @media (orientation: portrait) { body.touch #rotate-hint:not(.dismissed) { display: flex; } } #rotate-hint .rot-icon { font-size: 64px; animation: rot-phone 2.2s ease-in-out infinite; } @keyframes rot-phone { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } #rotate-hint b { font-size: 18px; } #rotate-hint p { margin: 0; font-size: 13px; line-height: 1.7; opacity: .85; } #rotate-hint button { margin-top: 10px; padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 800; font-size: 13px; } /* 横向き（高さの低い画面）では、操作部品を少し小さくして景色を広く */ @media (max-height: 500px) { body.touch #joy { width: 108px; height: 108px; left: calc(18px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); } body.touch #touch-actions { grid-template-columns: repeat(3, 48px); gap: 8px; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); } body.touch #touch-actions button { width: 48px; height: 48px; font-size: 20px; } body.touch #minimap { width: 72px; height: 72px; } body.touch #menu-btn { width: 40px; height: 40px; font-size: 20px; } body.touch #chat { width: min(300px, 40vw); } body.touch #chat-log { max-height: 30vh; } body.touch #emotes { bottom: calc(126px + env(safe-area-inset-bottom)); } body.touch #elevator { top: 18%; } } /* 自分のアバター（VRM / GLB）を使っている間は、プリセットのタイプ・カラーは選べない */ .type-list.locked, .color-list.locked { opacity: .4; filter: grayscale(.6); pointer-events: none; } .type-list.locked button, .color-list.locked button { cursor: not-allowed; } .preset-lock { margin: 6px 0 0; font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.5; } /* スマホ：UI を隠している間も移動・ジャンプなどの操作はそのまま使える。チャット欄は隠れるのでチャットボタンだけ隠す（位置はそのまま） */ body.ui-hidden #touch-actions button[data-act=chat] { visibility: hidden; } body.touch #emotes, body.touch.emotes-open #emotes { display: none; } /* 下段は「ダッシュ・飛ぶ」の 2 つ。飛ぶボタンは親指で押しやすい右下の角に */ #touch-actions button[data-act=run] { grid-column: 2; } /* ---------- メニュー（視点の感度など） ---------- */ #pc-menu-btn { cursor: pointer; font-family: inherit; color: var(--ink); border-color: transparent; } #pc-menu-btn:hover { border-color: var(--accent); } #settings-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30 !important; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px 18px; border-radius: 22px; background: rgba(250, 253, 255, 0.97); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(31, 120, 190, 0.28); } /* 見出し（☰ メニュー と × ボタン）は、下へスクロールしても上に残す（いつでも閉じられるように） */ #settings-panel .sp-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; position: sticky; top: -16px; z-index: 2; margin: -16px -18px 4px; padding: 14px 18px 10px; background: rgb(250, 253, 255); border-radius: 22px 22px 0 0; box-shadow: 0 1px 0 rgba(31, 120, 190, 0.12); } #settings-panel .sp-close { width: 36px; height: 36px; border: 0; border-radius: 12px; background: #eef2f6; font-size: 20px; cursor: pointer; } #settings-panel h3 { margin: 12px 0 2px; font-size: 14px; } #settings-panel .sp-sub { margin: 0 0 10px; font-size: 11px; color: var(--muted); } #settings-panel .sp-info { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 12px; background: #f3f6fa; font-size: 13px; font-weight: 800; } #settings-panel .sp-info span { width: 86px; color: var(--muted); font-size: 12px; } #settings-panel .sp-info code { flex: 1; font-size: 16px; font-family: ui-monospace, Consolas, monospace; letter-spacing: .5px; user-select: all; } #settings-panel .sp-info button { border: 0; border-radius: 9px; padding: 5px 10px; background: #e2e9f2; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; } #settings-panel .sp-wmc a { color: #1f6fd6; font-weight: 800; } #settings-panel .sp-row { display: grid; grid-template-columns: 1fr 64px; grid-template-areas: 'label label' 'range num'; gap: 4px 10px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #fff; } #settings-panel .sp-row.current { box-shadow: 0 0 0 2px var(--accent); } #settings-panel .sp-row.current .sp-label::after { content: '（この端末）'; color: var(--accent); font-size: 11px; margin-left: 4px; } #settings-panel .sp-label { grid-area: label; font-weight: 800; font-size: 13px; } #settings-panel input[type=range] { grid-area: range; width: 100%; accent-color: var(--accent); } #settings-panel input[type=number] { grid-area: num; width: 100%; padding: 6px 6px; border: 2px solid var(--line); border-radius: 10px; font-weight: 800; font-size: 15px; text-align: center; box-sizing: border-box; } #settings-panel .sp-actions { display: flex; justify-content: flex-end; } #settings-panel .sp-reset { border: 0; border-radius: 10px; padding: 8px 12px; background: #eef2f6; font-weight: 800; font-size: 12px; cursor: pointer; } #settings-panel .sp-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; } #settings-panel .sp-status { margin: 4px 0 0; min-height: 1em; font-size: 11px; font-weight: 800; color: #1e8f4f; } #settings-panel .sp-status.error { color: #d6385e; } body.touch #settings-panel input[type=number] { -webkit-user-select: text; user-select: text; } #m-menu .m-tools { flex-wrap: wrap; } #m-menu .m-tools button { min-width: 40%; } /* 縦向きの案内：横向き（全画面）に戻すボタンと、縦のまま遊ぶボタン */ #rotate-hint .rot-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; } #rotate-hint .rot-actions button { margin-top: 0; } #rotate-hint .rot-landscape { background: var(--accent); } #rotate-hint .rot-help { margin-top: 6px; font-size: 11px; opacity: .7; } #rotate-hint .rot-help.flash { animation: rot-flash 1.2s ease 2; opacity: 1; font-weight: 800; } @keyframes rot-flash { 0%, 100% { color: #fff; } 50% { color: #ffd166; } } /* 「パソコン版サイト」表示（アプリ内ブラウザなど）でパソコンの幅で組まれたスマホ：画面部品を拡大して元の大きさに見せる */ body.ui-zoomed #hud > *, body.ui-zoomed #login { zoom: var(--ui-zoom); } /* 画面いっぱいの部品は、拡大後にちょうど画面の大きさになるように */ body.ui-zoomed #login, body.ui-zoomed #rotate-hint { inset: auto; left: 0; top: 0; width: var(--ui-vw); height: var(--ui-vh); box-sizing: border-box; } body.ui-zoomed #chat { width: min(320px, calc(var(--ui-vw) * 0.62)); } body.ui-zoomed #m-menu { width: min(300px, calc(var(--ui-vw) - 20px)); max-height: calc(var(--ui-vh) - 16px); } body.ui-zoomed #settings-panel { width: min(420px, calc(var(--ui-vw) - 24px)); max-height: calc(var(--ui-vh) - 24px); } body.ui-zoomed #topbar { max-width: calc(var(--ui-vw) - 150px); } /* パソコンの幅で組まれていても、ログイン画面はスマホ用の並び（縦 1 列）にする */ body.ui-zoomed .login-body { flex-direction: column; } body.ui-zoomed #preview { width: 160px; height: 160px; } body.ui-zoomed .logo-img img { width: min(280px, 90%); } body.ui-zoomed .card { padding: 18px 16px 16px; border-radius: 22px; } body.ui-zoomed .tagline { margin: 4px 0 12px; font-size: 13px; } body.ui-zoomed #topbar #online { display: none; } /* 感度：マウス／タッチのグループと、三人称／一人称の行 */ #settings-panel .sp-group { padding: 8px 10px 2px; margin-bottom: 10px; border-radius: 16px; background: #eef4fa; } #settings-panel .sp-group h4 { margin: 2px 2px 6px; font-size: 13px; } #settings-panel .sp-group.current { box-shadow: 0 0 0 2px var(--accent); } #settings-panel .sp-group.current h4::after { content: '（この端末）'; color: var(--accent); font-size: 11px; margin-left: 4px; } #settings-panel .sp-row.current { box-shadow: none; } #settings-panel .sp-group.current .sp-row.now .sp-label::after { content: '← 今の視点'; color: #1e8f4f; font-size: 11px; margin-left: 6px; } /* ---------- モーションキャプチャー ---------- */ #mocap-btn { cursor: pointer; font-family: inherit; color: var(--ink); border-color: transparent; } #mocap-btn.on { background: #ffe9ee; color: #d6385e; border-color: #ff8fab; } #touch-actions button[data-act=mocap].on { background: #ff5c8a; color: #fff; } /* VTube Studio 連携のパネル（モーションキャプチャーのプレビューと同じ場所。どちらか片方だけが出る） */ #mocap-btn.vts.on { background: #efe9ff; color: #6a3fd6; border-color: #b59cff; } #motion-source { cursor: pointer; font-family: inherit; font-weight: 800; color: var(--ink); border-color: transparent; padding-right: 8px; max-width: 250px; } .motion-panel { left: 16px; bottom: 300px; width: 200px; padding: 8px; border-radius: 16px; pointer-events: auto; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; font-size: 11px; } .motion-panel.hidden { display: none; } .motion-panel { overflow-y: auto; } /* 見出しをクリックすると、説明を閉じて見出しだけにする */ .motion-panel .vp-title { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .motion-panel .vp-title::after { content: '非表示'; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: #eef2f6; color: var(--ink); } .motion-panel.collapsed .vp-title::after { content: '表示'; } .motion-panel.collapsed > *:not(.vp-title) { display: none; } .motion-panel.collapsed { width: auto; min-width: 150px; } .motion-panel .vp-title { font-weight: 800; font-size: 12px; } .motion-panel .vp-status { font-weight: 800; color: #1e8f4f; } .motion-panel .vp-status.error { color: #d6385e; } .motion-panel .vp-hint { color: var(--muted); line-height: 1.5; } .motion-panel .vp-row { display: flex; align-items: center; gap: 5px; font-weight: 800; } .motion-panel .vp-port { width: 70px; border: 1px solid #cfd8e3; border-radius: 8px; padding: 3px 6px; font: inherit; } .motion-panel .vp-link { font-weight: 800; color: #1f6fd6; text-decoration: underline; } .motion-panel .ap-video { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1a1f28; } .motion-panel .ap-video .mp-view { position: relative; width: 100%; height: 100%; transform: scaleX(-1); /* 鏡のように左右反転 */ } .motion-panel .ap-video video, .motion-panel .ap-video canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .motion-panel .vp-switch, #mocap-preview .mp-switch { border: 0; border-radius: 10px; padding: 5px 4px; background: #eef2f6; font-weight: 800; font-size: 11px; cursor: pointer; } /* スマホ：高精度モーキャプのパネルは、簡易のプレビューと同じ右上に小さく出す（説明文は省く） */ body.touch #ai-panel { left: auto; right: calc(10px + env(safe-area-inset-right)); top: calc(100px + env(safe-area-inset-top)); bottom: auto; width: 132px; padding: 6px; gap: 3px; } body.touch #ai-panel .vp-hint, body.touch #ai-panel .vp-title { display: none; } @media (max-height: 500px) { body.touch #ai-panel { top: calc(88px + env(safe-area-inset-top)); width: 116px; } } .motion-panel .vp-ep { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 9px; background: #f3f6fa; } .motion-panel .vp-ep span { color: var(--muted); font-weight: 800; } .motion-panel .vp-ep b { font-size: 14px; font-family: ui-monospace, Consolas, monospace; user-select: all; } .motion-panel .vp-off { border: 0; border-radius: 10px; padding: 6px 4px; background: #efe9ff; color: #6a3fd6; font-weight: 800; font-size: 11px; cursor: pointer; } #mocap-preview { left: 16px; bottom: 300px; width: 176px; padding: 6px; border-radius: 16px; background: var(--panel); backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; font-size: 11px; } #mocap-preview .mp-video { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #1a1f28; } #mocap-preview .mp-view { position: relative; width: 100%; height: 100%; transform: scaleX(-1); /* 鏡のように左右反転 */ } #mocap-preview .mp-view video, #mocap-preview .mp-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #mocap-preview .mp-actions { display: flex; gap: 4px; } #mocap-preview .mp-actions button { flex: 1; border: 0; border-radius: 10px; padding: 6px 4px; background: #eef2f6; font-weight: 800; font-size: 11px; cursor: pointer; } #mocap-preview .mp-status { font-weight: 800; color: #1e8f4f; text-align: center; } #mocap-preview .mp-status.error { color: #d6385e; } body.touch #mocap-preview { left: auto; right: calc(10px + env(safe-area-inset-right)); top: calc(100px + env(safe-area-inset-top)); bottom: auto; width: 128px; } @media (max-height: 500px) { body.touch #mocap-preview { top: calc(88px + env(safe-area-inset-top)); width: 112px; } } #mocap-preview select { width: 100%; border: 0; border-radius: 8px; padding: 4px; background: #eef2f6; font: inherit; font-size: 11px; font-weight: 700; } #mocap-preview .mp-rate-row { display: flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; } #mocap-preview .mp-rate-row select { flex: 1; } #mocap-preview > .mp-off { border: 0; border-radius: 10px; padding: 6px 4px; background: #ffe9ee; color: #d6385e; font-weight: 800; font-size: 11px; cursor: pointer; } #mocap-preview.no-video .mp-video { display: none; } body.touch #mocap-preview .mp-rate-row, body.touch #mocap-preview .mp-cam { font-size: 10px; } #mocap-preview .mp-video { cursor: crosshair; } #mocap-preview .mp-hint { font-size: 10px; color: #6b7785; text-align: center; line-height: 1.3; } body.touch #mocap-preview .mp-hint { display: none; } #mocap-preview .mp-body { background: #e8f4ff !important; color: #1769aa; } /* ---------- オンライン展示会 ---------- */ .name-tag .badge.expo { background: #1e2a44; color: #6fd3ff; } #expo-modal { position: fixed; inset: 0; z-index: 60; background: rgba(10, 16, 30, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; } #expo-modal.hidden { display: none; } #expo-modal .xm-box { position: relative; width: min(720px, 100%); max-height: min(86vh, 100%); overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 22px 22px 18px; color: var(--ink); } #expo-modal .xm-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef2f6; font-size: 16px; cursor: pointer; } #expo-modal h2 { margin: 0 40px 10px 0; font-size: 20px; } #expo-modal h2 small { font-size: 13px; color: #6b7785; } #expo-modal h3 { margin: 18px 0 8px; font-size: 15px; color: #1e2a44; } #expo-modal label { display: block; margin: 10px 0; font-weight: 700; font-size: 13px; } #expo-modal input, #expo-modal select, #expo-modal textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #d5dbe3; border-radius: 10px; font: inherit; font-size: 14px; box-sizing: border-box; } #expo-modal button, #expo-modal a.btn { border: 0; border-radius: 10px; padding: 8px 12px; background: #eef2f6; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--ink); text-decoration: none; white-space: nowrap; } #expo-modal button.primary { background: #1e2a44; color: #fff; } #expo-modal button:disabled { opacity: .45; cursor: default; } .xm-note { color: #6b7785; font-size: 12px; } .xm-err { color: #d6385e; font-weight: 700; } .xm-msg { min-height: 1.2em; font-size: 13px; } .xm-search { margin-bottom: 10px; } .xm-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; } .xm-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #f5f7fa; margin-bottom: 6px; } .xm-row img, .xm-noimg { width: 48px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; } .xm-name { flex: 1; min-width: 0; } .xm-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xm-name small { color: #6b7785; font-size: 12px; } .xm-dot { width: 10px; height: 10px; border-radius: 50%; background: #c9ced6; flex: none; } .xm-dot.on, .xm-on { color: #1e8f4f; } .xm-dot.on { background: #2ecc71; } .xm-on { font-weight: 800; } .xm-off { color: #8a94a3; } .xm-head { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: linear-gradient(120deg, #fff, var(--c)); margin-bottom: 8px; } .xm-head img { width: 96px; height: 64px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; } .xm-head h2 { margin: 0 !important; } .xm-tag { font-weight: 800; color: #1e2a44; } .xm-desc { line-height: 1.7; font-size: 14px; } .xm-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .xm-prod { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: #f5f7fa; font-size: 13px; } .xm-prod img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; } .xm-prod p { margin: 4px 0; color: #4a5566; } .xm-price { margin-left: 6px; color: #d6385e; font-weight: 800; } .xm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; } .xm-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; margin: 8px 0; } .xm-slot.free { background: #e6f7ec !important; color: #1e8f4f !important; } .xm-slot.picked { background: #1e2a44 !important; color: #fff !important; } .xm-slot.booked, .xm-slot.past, .xm-slot.closed { background: #f1f1f1 !important; color: #b0b6bf !important; text-decoration: line-through; } #expo-chip { position: absolute; left: 50%; bottom: 82px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 16px; background: var(--panel); backdrop-filter: blur(12px); box-shadow: var(--shadow); font-size: 13px; max-width: calc(100vw - 32px); white-space: nowrap; pointer-events: auto; } #expo-chip.hidden { display: none; } #expo-chip b { overflow: hidden; text-overflow: ellipsis; max-width: 260px; } #expo-chip .xc-label { padding: 2px 8px; border-radius: 8px; background: #1e2a44; color: #6fd3ff; font-weight: 800; } #expo-chip button { border: 0; border-radius: 10px; padding: 6px 10px; background: #eef2f6; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; } #expo-chip button.primary { background: #1e2a44; color: #fff; } body.touch #expo-chip { bottom: calc(150px + env(safe-area-inset-bottom)); font-size: 11px; } body.touch #expo-chip b { max-width: 130px; } #expo-toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100vw - 32px)); pointer-events: none; } #expo-toasts .xt { pointer-events: auto; display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 14px; border-radius: 14px; background: #1e2a44; color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.25); } #expo-toasts .xt button { border: 0; border-radius: 10px; padding: 6px 12px; background: #6fd3ff; color: #1e2a44; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; } #expo-modal .xm-row > button, #expo-modal .xm-actions > button, #expo-modal .xm-actions > a { flex: none; width: auto; } #expo-modal .xm-name { min-width: 140px; } #expo-modal .xm-slot { width: auto; } /* ログイン画面の .primary（大きなボタン）の見た目を、展示会の画面では打ち消す */ #expo-modal .primary, #expo-chip .primary { margin-top: 0; width: auto; padding: 8px 12px; border-radius: 10px; font-size: 13px; letter-spacing: 0; box-shadow: none; background: #1e2a44; transform: none; } #expo-chip .primary { padding: 6px 10px; font-size: 12px; } #expo-modal .xm-box.wide { width: auto; max-width: 96vw; } /* 販売サイトのポップアップ（iframe） */ #expo-modal .xm-box.shop { width: min(1100px, 100%); height: min(90vh, 100%); max-height: none; display: flex; flex-direction: column; padding: 14px 14px 8px; overflow: hidden; } #expo-modal .xm-box.shop .xm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } #expo-modal .xm-shop-head { display: flex; align-items: center; gap: 10px; margin: 0 40px 8px 0; flex-wrap: wrap; } #expo-modal .xm-shop-head b { font-size: 16px; } #expo-modal .xm-shop-head small { color: #6a7486; flex: 1; } #expo-modal .xm-shop { flex: 1; width: 100%; min-height: 0; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; } #expo-modal .xm-box.shop .xm-note { margin: 6px 0 0; } #expo-modal .xm-mapwrap { display: flex; justify-content: center; } #expo-modal .xm-map { display: block; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.12); touch-action: manipulation; } #expo-modal .xm-maptip { margin: 10px 0 0; text-align: center; font-weight: 800; font-size: 13px; color: #1e2a44; min-height: 1.4em; } #expo-modal .xm-flyer { display: flex; justify-content: center; } #expo-modal .xm-flyer img { max-width: min(760px, 88vw); max-height: 70vh; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); } /* メニュー：画質（低・中・高・最高） */ #settings-panel .sp-quality { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #settings-panel .sp-quality button { border: 2px solid #d6ecfa; border-radius: 12px; padding: 8px 4px; background: #fff; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); } #settings-panel .sp-quality button b { font-size: 15px; } #settings-panel .sp-quality button span { font-size: 10px; color: var(--muted); line-height: 1.25; } #settings-panel .sp-quality button.active { border-color: var(--accent); background: #e8f6ff; box-shadow: 0 2px 8px rgba(31,120,190,.18); } /* ---------- アイテムボックス ---------- */ #itembox-btn { cursor: pointer; } #itembox-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30 !important; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 0 18px 16px; border-radius: 22px; background: rgba(250, 253, 255, 0.97); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(31, 120, 190, 0.28); pointer-events: auto; color: #24415c; } #itembox-panel.hidden { display: none; } #itembox-panel .ib-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; background: rgba(250, 253, 255, 0.97); font-size: 16px; } #itembox-panel .ib-close { border: 0; background: #e8f3fb; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; } #itembox-panel h3 { margin: 14px 0 6px; font-size: 13px; color: #3a7fb5; } #itembox-panel .ib-sub { margin: 4px 0; font-size: 12px; line-height: 1.6; color: #5b7690; } #itembox-panel .ib-empty { margin: 4px 0; font-size: 12px; color: #8aa0b4; } #itembox-panel .ib-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 12px; background: #f0f7fc; } #itembox-panel .ib-item.holding { background: #dff3e6; } #itembox-panel .ib-icon { font-size: 20px; width: 26px; text-align: center; } #itembox-panel .ib-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; } #itembox-panel .ib-name small { color: #7d93a8; font-size: 11px; } #itembox-panel .ib-item button, #itembox-panel .ib-upbtn { border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; background: #38a8ef; color: #fff; cursor: pointer; white-space: nowrap; } #itembox-panel .ib-item button[data-drop] { background: #5cbf7a; } #itembox-panel .ib-item button[data-take] { background: #8a9fb3; } #itembox-panel .ib-item .ib-del { background: #e3edf5; color: #24415c; padding: 5px 8px; } #itembox-panel .ib-upload { display: flex; gap: 8px; margin-top: 10px; } #itembox-panel .ib-upname { flex: 1; min-width: 0; border: 2px solid #d5e6f3; border-radius: 12px; padding: 6px 10px; font-size: 12px; } #itembox-panel .ib-status { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: #2f8f55; } #itembox-panel .ib-status.error { color: #d2483f; } body.ui-zoomed #itembox-panel { width: min(460px, calc(var(--ui-vw) - 24px)); max-height: calc(var(--ui-vh) - 24px); } /* ---------- サバゲー（フィールドにいる間の表示） ---------- */ #sg-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; } #sg-hud.hidden { display: none; } #sg-hud > * { position: absolute; } #sg-hud .sg-top { top: 104px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 6px 8px 6px 14px; border-radius: 999px; background: rgba(20, 30, 24, 0.82); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: auto; } #sg-hud .sg-score b { font-size: 16px; } #sg-hud .sg-board-btn { border: 0; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; background: #f2c230; color: #222; cursor: pointer; } #sg-hud .sg-feed { top: 148px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; align-items: center; } #sg-hud .sg-feed > div { padding: 3px 12px; border-radius: 999px; background: rgba(20, 30, 24, 0.7); color: #fff; font-size: 12px; white-space: nowrap; } #sg-hud .sg-cross { left: 50%; top: 50%; width: 0; height: 0; } #sg-hud .sg-cross i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; } #sg-hud .sg-cross i:nth-child(1) { left: -1px; top: -16px; width: 2px; height: 10px; } #sg-hud .sg-cross i:nth-child(2) { left: -1px; top: 6px; width: 2px; height: 10px; } #sg-hud .sg-cross i:nth-child(3) { top: -1px; left: -16px; height: 2px; width: 10px; } #sg-hud .sg-cross i:nth-child(4) { top: -1px; left: 6px; height: 2px; width: 10px; } #sg-hud .sg-flash { inset: 0; opacity: 0; } #sg-hud .sg-flash.on { animation: sg-flash .35s ease-out; } #sg-hud .sg-flash.bad { box-shadow: inset 0 0 120px 30px rgba(230, 40, 40, 0.75); } #sg-hud .sg-flash.good { box-shadow: inset 0 0 60px 6px rgba(255, 240, 150, 0.5); } @keyframes sg-flash { from { opacity: 1; } to { opacity: 0; } } #sg-hud .sg-dead { left: 50%; top: 38%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 34px; border-radius: 18px; background: rgba(120, 20, 20, 0.85); color: #fff; } #sg-hud .sg-dead.hidden { display: none; } #sg-hud .sg-dead b { font-size: 28px; } #sg-hud .sg-status { left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(20, 30, 24, 0.82); color: #fff; font-size: 13px; white-space: nowrap; } #sg-hud .sg-team { padding: 2px 10px; border-radius: 999px; font-weight: 700; } #sg-hud .sg-hp { width: 120px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; } #sg-hud .sg-hp i { display: block; height: 100%; background: #5fd67a; transition: width .15s; } #sg-hud.protected .sg-status { box-shadow: 0 0 0 3px #7fd6ff; } #sg-hud .sg-fire { display: none; right: calc(22px + env(safe-area-inset-right)); bottom: 46%; width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; background: rgba(230, 80, 60, 0.85); font-size: 30px; pointer-events: auto; touch-action: none; } body.touch #sg-hud .sg-fire { display: block; } #sg-hud .sg-board { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 0 18px 16px; border-radius: 22px; background: rgba(250, 253, 255, 0.97); color: #24415c; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); pointer-events: auto; } #sg-hud .sg-board.hidden { display: none; } #sg-hud .sg-board-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 8px; background: rgba(250, 253, 255, 0.97); font-size: 16px; } #sg-hud .sg-board-close { border: 0; background: #e8f3fb; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; } #sg-hud .sg-board-sub { margin: 6px 0; font-size: 12px; line-height: 1.6; color: #5b7690; } #sg-hud .sg-board table { width: 100%; border-collapse: collapse; font-size: 13px; } #sg-hud .sg-board th, #sg-hud .sg-board td { padding: 5px 6px; text-align: left; border-bottom: 1px solid #e2edf5; } #sg-hud .sg-board td i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } #sg-hud .sg-board tr.me { background: #fff6d6; font-weight: 700; } #sg-hud .sg-admin { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #f0f7fc; } #sg-hud .sg-admin.hidden { display: none; } #sg-hud .sg-admin h4 { margin: 0 0 8px; font-size: 13px; color: #3a7fb5; } #sg-hud .sg-name { width: 100%; box-sizing: border-box; border: 2px solid #d5e6f3; border-radius: 12px; padding: 6px 10px; font-size: 13px; } #sg-hud .sg-modes, #sg-hud .sg-admin-actions { display: flex; gap: 8px; margin-top: 8px; } #sg-hud .sg-admin button { flex: 1; border: 0; border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 700; background: #d5e6f3; color: #24415c; cursor: pointer; } #sg-hud .sg-modes button.active, #sg-hud .sg-save { background: #38a8ef; color: #fff; } #sg-hud .sg-admin-note { margin: 8px 0 0; font-size: 11px; color: #5b7690; } body.in-sabage #crosshair { display: none !important; } body.touch #sg-hud .sg-top { top: calc(44px + env(safe-area-inset-top)); font-size: 11px; } body.touch #sg-hud .sg-feed { top: calc(84px + env(safe-area-inset-top)); } body.touch #sg-hud .sg-status { bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 11px; } body.touch #sg-hud .sg-hp { width: 70px; } /* サバゲー：スコープ（右クリックの間。まわりを黒くして、十字の線を出す） */ #sg-hud .sg-scope { inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent min(34vh, 34vw), rgba(0, 0, 0, 0.55) calc(min(34vh, 34vw) + 2px), #000 calc(min(34vh, 34vw) + 14px)); } #sg-hud .sg-scope.hidden { display: none; } #sg-hud .sg-scope i { position: absolute; background: rgba(10, 10, 10, 0.85); } #sg-hud .sg-scope i:nth-child(1) { left: 50%; top: calc(50% - min(34vh, 34vw)); width: 1px; height: calc(min(34vh, 34vw) * 2); } #sg-hud .sg-scope i:nth-child(2) { top: 50%; left: calc(50% - min(34vh, 34vw)); height: 1px; width: calc(min(34vh, 34vw) * 2); } #sg-hud.scoped:not([data-scope="iron"]) .sg-cross { display: none; } #sg-hud .sg-scope-btn { display: none; right: calc(110px + env(safe-area-inset-right)); bottom: 46%; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: rgba(40, 60, 90, 0.85); font-size: 22px; pointer-events: auto; touch-action: none; } #sg-hud .sg-scope-btn.active { background: rgba(60, 150, 230, 0.95); } body.touch #sg-hud .sg-scope-btn { display: block; } #sg-hud .sg-crouch-btn { display: none; right: calc(110px + env(safe-area-inset-right)); bottom: calc(46% - 66px); width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: rgba(40, 60, 90, 0.85); font-size: 22px; pointer-events: auto; touch-action: none; } #sg-hud .sg-crouch-btn.active { background: rgba(60, 150, 230, 0.95); } body.touch #sg-hud .sg-crouch-btn { display: block; } /* サバゲー：UI を非表示（U キー）にしても、照準（画面の中央の印）・スコープ・当たったときの光・「ヒット！」の表示・スマホの操作ボタンは残す */ body.ui-hidden #sg-hud > *:not(.sg-banner):not(.sg-status):not(.sg-cross):not(.sg-scope):not(.sg-flash):not(.sg-dead):not(.sg-fire):not(.sg-scope-btn):not(.sg-crouch-btn):not(.sg-swap-btn):not(.sg-load) { opacity: 0 !important; pointer-events: none !important; } /* サバゲー：スコープの種類ごとの見え方（ドット・ホロは、まわりを黒くしない） */ #sg-hud .sg-scope b, #sg-hud .sg-scope u { position: absolute; left: 50%; top: 50%; display: none; } #sg-hud .sg-scope[data-type="dot"], #sg-hud .sg-scope[data-type="holo"] { background: radial-gradient(circle at 50% 50%, transparent 0, transparent min(42vh, 42vw), rgba(0, 0, 0, 0.35) calc(min(42vh, 42vw) + 3px), rgba(0, 0, 0, 0.6) calc(min(42vh, 42vw) + 40px)); } #sg-hud .sg-scope[data-type="dot"] i, #sg-hud .sg-scope[data-type="holo"] i, #sg-hud .sg-scope[data-type="acog"] i { display: none; } #sg-hud .sg-scope[data-type="dot"] b { display: block; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ff2a1e; box-shadow: 0 0 8px 2px rgba(255, 60, 40, 0.8); } #sg-hud .sg-scope[data-type="holo"] b { display: block; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #ff2a1e; box-shadow: 0 0 6px 1px rgba(255, 60, 40, 0.8); } #sg-hud .sg-scope[data-type="holo"] u { display: block; width: 74px; height: 74px; margin: -38px 0 0 -38px; border: 2px solid rgba(255, 50, 30, 0.9); border-radius: 50%; box-shadow: 0 0 6px rgba(255, 60, 40, 0.6); } #sg-hud .sg-scope[data-type="acog"] { background: radial-gradient(circle at 50% 50%, transparent 0, transparent min(38vh, 38vw), rgba(0, 0, 0, 0.6) calc(min(38vh, 38vw) + 2px), #000 calc(min(38vh, 38vw) + 12px)); } #sg-hud .sg-scope[data-type="acog"] b { display: block; width: 0; height: 0; margin: 0 0 0 -11px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 18px solid #ff2a1e; filter: drop-shadow(0 0 4px rgba(255, 60, 40, 0.8)); clip-path: polygon(50% 0, 100% 100%, 78% 100%, 50% 38%, 22% 100%, 0 100%); } #sg-hud .sg-scope[data-type="acog"] u { display: block; width: 2px; height: min(30vh, 30vw); margin: 20px 0 0 -1px; background: rgba(10, 10, 10, 0.85); } #sg-hud .sg-scope[data-type="sniper"] b { display: block; width: calc(min(34vh, 34vw) * 2); height: 9px; margin: -4.5px 0 0 calc(min(34vh, 34vw) * -1); background: radial-gradient(circle, rgba(10, 10, 10, 0.9) 0, rgba(10, 10, 10, 0.9) 2.5px, transparent 3px) center / calc(min(34vh, 34vw) / 4) 9px repeat-x; } /* サバゲー：装備を選ぶ画面 */ #sg-hud .sg-load-btn { border: 0; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; background: #5cbf7a; color: #fff; cursor: pointer; } #sg-hud .sg-load { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 0 18px 16px; border-radius: 22px; background: rgba(250, 253, 255, 0.97); color: #24415c; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); pointer-events: auto; } #sg-hud .sg-load.hidden { display: none; } #sg-hud .sg-load h4 { margin: 14px 0 6px; font-size: 13px; color: #3a7fb5; } #sg-hud .sg-w { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; align-items: center; padding: 8px 10px; margin: 4px 0; border-radius: 12px; background: #f0f7fc; cursor: pointer; border: 2px solid transparent; } #sg-hud .sg-w.on { border-color: #38a8ef; background: #e3f3fd; } #sg-hud .sg-w input { grid-row: 1 / span 3; } #sg-hud .sg-w-name b { font-size: 14px; } #sg-hud .sg-w-name small { margin-left: 8px; font-size: 11px; color: #5b7690; } #sg-hud .sg-w-note { font-size: 11px; line-height: 1.5; color: #5b7690; } #sg-hud .sg-w-stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 6px; align-items: center; font-size: 10px; color: #5b7690; } #sg-hud .sg-w-stats em { font-style: normal; } #sg-hud .sg-bar { display: block; height: 6px; border-radius: 999px; background: #d5e6f3; overflow: hidden; } #sg-hud .sg-bar i { display: block; height: 100%; background: #38a8ef; } #sg-hud .sg-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } #sg-hud .sg-s { display: grid; grid-template-columns: 20px 1fr; gap: 0 6px; padding: 7px 9px; border-radius: 12px; background: #f0f7fc; cursor: pointer; border: 2px solid transparent; font-size: 12px; } #sg-hud .sg-s.on { border-color: #38a8ef; background: #e3f3fd; } #sg-hud .sg-s input { grid-row: 1 / span 2; } #sg-hud .sg-s small { font-size: 10px; line-height: 1.4; color: #5b7690; } #sg-hud .sg-swap-btn { display: none; right: calc(110px + env(safe-area-inset-right)); bottom: calc(46% + 66px); width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: rgba(40, 60, 90, 0.85); font-size: 22px; pointer-events: auto; touch-action: none; } body.touch #sg-hud .sg-swap-btn { display: block; } body.ui-zoomed #sg-hud .sg-load { width: min(560px, calc(var(--ui-vw) - 24px)); max-height: calc(var(--ui-vh) - 24px); } /* サバゲー：受付の画面（受付の前にいる間だけ出る） */ #sg-hud .sg-recept { left: 16px; top: 50%; transform: translateY(-50%); width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 140px); overflow-y: auto; padding: 0 16px 14px; border-radius: 20px; background: rgba(250, 253, 255, 0.97); color: #24415c; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); pointer-events: auto; } #sg-hud .sg-recept.hidden { display: none; } #sg-hud .sg-recept h4 { margin: 12px 0 6px; font-size: 12px; color: #3a7fb5; } #sg-hud .sg-ev { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin: 4px 0; border-radius: 12px; background: #f0f7fc; font-size: 12px; } #sg-hud .sg-ev.now { background: #fff3cf; } #sg-hud .sg-ev small { font-size: 10px; color: #8a6a12; font-weight: 700; } #sg-hud .sg-ev b { font-size: 15px; } #sg-hud .sg-ev span { color: #5b7690; } #sg-hud .sg-ev p { margin: 2px 0 0; font-size: 11px; color: #5b7690; } #sg-hud .sg-ev-act { display: flex; gap: 6px; margin-top: 4px; } #sg-hud .sg-ev-act button { border: 0; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; background: #38a8ef; color: #fff; cursor: pointer; } #sg-hud .sg-ev-act button[data-del] { background: #8a9fb3; } #sg-hud .sg-recept-me { margin: 8px 0; font-size: 12px; line-height: 1.6; } #sg-hud .sg-entry-btn { width: 100%; border: 0; border-radius: 999px; padding: 10px 14px; font-size: 14px; font-weight: 800; background: #e0483f; color: #fff; cursor: pointer; } #sg-hud .sg-entry-btn.off { background: #8a9fb3; font-size: 12px; } #sg-hud .sg-entry-btn kbd { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.3); font-size: 11px; } #sg-hud .sg-admin2 { margin-top: 12px; padding: 4px 12px 10px; border-radius: 14px; background: #f0f7fc; } #sg-hud .sg-admin2 input { width: 100%; box-sizing: border-box; margin-bottom: 6px; border: 2px solid #d5e6f3; border-radius: 12px; padding: 6px 10px; font-size: 12px; } #sg-hud .sg-admin2 button { flex: 1; border: 0; border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 700; background: #d5e6f3; color: #24415c; cursor: pointer; } #sg-hud .sg-admin2 .sg-modes button.active, #sg-hud .sg-admin2 .sg-save { background: #38a8ef; color: #fff; } body.touch #sg-hud .sg-recept { top: calc(80px + env(safe-area-inset-top)); transform: none; max-height: calc(100dvh - 170px); } /* サバゲー：画面下の、銃の枠（押すと持ち替え） */ #sg-hud .sg-slot { display: flex; align-items: center; gap: 6px; border: 2px solid transparent; border-radius: 999px; padding: 3px 10px 3px 4px; background: rgba(255, 255, 255, 0.12); color: #cfd8e0; font-size: 12px; cursor: pointer; pointer-events: auto; } #sg-hud .sg-slot.on { background: rgba(255, 255, 255, 0.95); color: #1b2a22; border-color: #f2c230; } #sg-hud .sg-slot i { display: inline-block; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-style: normal; font-size: 11px; text-align: center; } #sg-hud .sg-slot b { font-weight: 700; } #sg-hud .sg-slot span { opacity: 0.85; } #sg-hud .sg-slot:not(.on) b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* サバゲー：受付の、開催日時の入力と、終わったイベントの記録 */ #sg-hud .sg-ev-atl { display: block; margin-bottom: 6px; font-size: 11px; color: #5b7690; } #sg-hud .sg-rec { margin: 4px 0; padding: 6px 10px; border-radius: 12px; background: #f0f7fc; font-size: 12px; } #sg-hud .sg-rec summary { display: flex; flex-direction: column; gap: 1px; cursor: pointer; list-style: none; } #sg-hud .sg-rec summary::-webkit-details-marker { display: none; } #sg-hud .sg-rec summary b { font-size: 13px; } #sg-hud .sg-rec summary b::before { content: '▸ '; color: #3a7fb5; } #sg-hud .sg-rec[open] summary b::before { content: '▾ '; } #sg-hud .sg-rec summary span { color: #5b7690; font-size: 11px; } #sg-hud .sg-rec table { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 11px; } #sg-hud .sg-rec th, #sg-hud .sg-rec td { padding: 3px 4px; text-align: left; border-bottom: 1px solid #dbe8f2; } #sg-hud .sg-rec td i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } #sg-hud .sg-rec p { margin: 6px 0 0; color: #8aa0b4; font-size: 11px; } #sg-hud .sg-dead { top: 24%; padding: 12px 26px; background: rgba(120, 20, 20, 0.72); text-align: center; font-size: 12px; line-height: 1.7; } #sg-hud .sg-dead b { font-size: 22px; } #sg-hud .sg-dead .sg-back { font-size: 14px; color: #ffe27a; } #sg-hud .sg-recept-wait { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: #fff3cf; font-size: 12px; line-height: 1.6; } #sg-hud .sg-admin2 .sg-admin-actions { flex-wrap: wrap; } #sg-hud .sg-god-btn { width: 100%; margin-top: 8px; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 800; background: #5b6ee0; color: #fff; cursor: pointer; } #sg-hud .sg-recept-god { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: #5b7690; } #sg-hud .sg-dead.watch { background: rgba(40, 50, 110, 0.72); } /* UI を非表示（U キー）にしても、ミニマップは出したままにする（右側の列のうち、ミニマップ以外だけを隠す） */ body.ui-hidden #right-col > *:not(#minimap):not(#world-panel) { opacity: 0 !important; pointer-events: none !important; } /* サバゲー：「神の視点」の表示（操作の案内）は、UI を非表示にしたら隠す（「ヒット！」の表示は残す） */ body.ui-hidden #sg-hud .sg-dead.godview { opacity: 0 !important; pointer-events: none !important; } /* ---------- 大きな地図（ミニマップをクリックすると出る） ---------- */ #minimap { pointer-events: auto; cursor: pointer; } #map-pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(10, 20, 30, 0.35); } #map-pop.hidden { display: none; } #map-pop .mp-box { position: relative; width: min(82vh, 92vw); height: min(82vh, 92vw); } #map-pop canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), 0 0 0 6px #fff; } #map-pop .mp-close { position: absolute; top: 4%; right: 4%; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } #map-pop .mp-name { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font-size: 14px; font-weight: 800; color: #24415c; white-space: nowrap; } /* ---------- 中継中の印 ---------- */ #tv-chip { position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 40; padding: 5px 16px; border-radius: 999px; background: rgba(20, 24, 30, 0.82); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; } #tv-chip.cast { background: rgba(190, 30, 30, 0.9); } #tv-chip.hidden { display: none; } /* ---------- 定点カメラ（管理センターの PC） ---------- */ .cc-wrap canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #05080c; border-radius: 10px; } .cc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .cc-bar button { padding: 6px 12px; border: 2px solid #c9d6e4; border-radius: 10px; background: #fff; font-weight: 800; cursor: pointer; line-height: 1.2; } .cc-bar button small { display: block; font-size: 11px; font-weight: 600; color: #6b7d90; } .cc-bar button.on { border-color: #e23b3b; background: #fff1f1; } .cc-bar label { margin-left: auto; font-size: 13px; font-weight: 700; cursor: pointer; } /* サバゲー：大きな知らせ（順位・試合終了） */ #sg-hud .sg-banner { position: fixed; left: 50%; top: 26%; transform: translateX(-50%); z-index: 45; padding: 16px 34px; border-radius: 18px; background: rgba(12, 18, 26, 0.86); color: #fff; text-align: center; pointer-events: none; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4); max-width: 90vw; } #sg-hud .sg-banner.hidden { display: none; } #sg-hud .sg-banner b { display: block; font-size: 30px; font-weight: 900; color: #ffd166; } #sg-hud .sg-banner span { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; } /* UI を非表示にしても、体力ゲージ（HP）は出したままにする（チーム名・銃の切り替えは隠す） */ body.ui-hidden #sg-hud .sg-status > *:not(.sg-hp):not(.sg-hpnum) { display: none !important; } #sg-hud .sg-bo.hidden { display: none; } #sg-hud .sg-bo { margin-top: 6px; } /* アイテムボックス：持っている間の「削除（しまう）」ボタン */ #ib-hold-chip { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 30; padding: 8px 18px; border: 0; border-radius: 999px; background: rgba(40, 46, 56, 0.88); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; pointer-events: auto; white-space: nowrap; } #ib-hold-chip.hidden { display: none; } #ib-hold-chip:hover { background: rgba(200, 50, 50, 0.92); } /* エモート：⚙ ボタンと、選ぶ画面（5 つまで） */ #emotes .em-set { width: 38px; height: 38px; font-size: 17px; align-self: center; background: rgba(255, 255, 255, 0.85); } #emote-pick { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 35; width: min(420px, 92vw); padding: 14px 16px; border-radius: 18px; background: rgba(250, 253, 255, 0.97); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); pointer-events: auto; } #emote-pick.hidden { display: none; } #emote-pick .ep-head { display: flex; align-items: center; gap: 10px; font-size: 15px; } #emote-pick .ep-head span { color: var(--muted); font-weight: 800; font-size: 13px; } #emote-pick .ep-close { margin-left: auto; border: 0; width: 30px; height: 30px; border-radius: 50%; background: #e8f3fb; font-size: 17px; cursor: pointer; } #emote-pick .ep-note { margin: 6px 0 10px; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.5; } #emote-pick .ep-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #emote-pick .ep-list button { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid #d6e4f0; border-radius: 12px; background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; } #emote-pick .ep-list button span { font-size: 20px; } #emote-pick .ep-list button.on { border-color: var(--accent); background: #eef8ff; } #emote-pick .ep-list kbd { margin-left: auto; } body.ui-hidden #emote-pick { display: none; } /* UI を非表示（U キー）にしても、時刻だけは出したままにする：時計のパネルは、枠と時刻以外の中身を消して、時刻の数字だけを残す（位置は変えない） */ body.ui-hidden #world-panel { background: transparent !important; box-shadow: none !important; border-color: transparent !important; backdrop-filter: none !important; pointer-events: none !important; } body.ui-hidden #world-panel > *:not(.clock-row), body.ui-hidden #world-panel #clock-period { opacity: 0 !important; pointer-events: none !important; } body.ui-hidden #clock-time { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6); } /* ---------- 布団（座る・寝転ぶ）の操作パネル ---------- */ #bed-panel { left: 50%; bottom: 96px; transform: translateX(-50%); padding: 8px 10px; border-radius: 14px; background: rgba(36, 16, 30, 0.82); color: #fff; font-size: 13px; text-align: center; max-width: calc(100vw - 32px); } #bed-panel.hidden { display: none; } #bed-panel .bp-title { font-weight: 800; margin-bottom: 4px; } #bed-panel .bp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; } #bed-panel button { border: 1px solid rgba(255, 182, 213, .5); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; } #bed-panel button.on { background: #ff6fb4; border-color: #ff6fb4; } #bed-panel .bp-hint { font-size: 11px; opacity: .75; margin-top: 2px; } @media (pointer: coarse) { #bed-panel .bp-hint { display: none; } } /* ---------- 手をつなぐ（12 階） ---------- */ #hand-prompt { left: 50%; bottom: 200px; transform: translateX(-50%); padding: 8px 12px; border-radius: 14px; background: rgba(36, 16, 30, 0.82); color: #fff; font-size: 13px; text-align: center; max-width: calc(100vw - 32px); } #hand-prompt.hidden { display: none; } #hand-prompt .hp-row { display: flex; justify-content: center; gap: 8px; margin-top: 6px; } #hand-prompt button { border: 1px solid rgba(255, 182, 213, .6); background: #ff6fb4; color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800; cursor: pointer; } #hand-prompt button[data-act=no] { background: rgba(255, 255, 255, .1); }