/* ゆうしゃクエストIII（yq）— 画面（2026-10-15）。窓は羊皮紙と真鍮の枠（images/yq/ui-frame.webp の9分割）。文字は 14px 以上。スマホ縦が主、PC は中央にまとめる */
:root { --yq-ink: #3b2814; --yq-ink2: #6b4a26; --yq-brass: #b8893a; --yq-brass2: #e6c06a; --yq-teal: #1f5f63; --yq-teal2: #2f8a86; --yq-crimson: #9e2b25; --yq-parch: #f4e7c5; --yq-parch2: #e9d5a4; --yq-night: #14193a; --yq-font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif; --yq-frame-filter: none; }
html, body { margin: 0; height: 100%; background: #0d1020; overscroll-behavior: none; }
body.yq-body { font: 500 15px/1.6 var(--yq-font); color: var(--yq-ink); -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.yq-app { position: fixed; inset: 0; overflow: hidden; background: #0d1020; touch-action: manipulation; }
.yq-app.is-shake { animation: yq-shake .36s; }
@keyframes yq-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-7px,3px); } 40% { transform: translate(6px,-4px); } 60% { transform: translate(-5px,-2px); } 80% { transform: translate(4px,3px); } }
.yq-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.yq-ui { position: absolute; inset: 0; pointer-events: none; }
.yq-ui > *, .yq-ui button, .yq-ui a, .yq-ui input { pointer-events: auto; }
.yq-ui .yq-placename, .yq-ui .yq-goal, .yq-ui .yq-party { pointer-events: none; }
button { font-family: inherit; }

/* ---------- 窓 ---------- */
.yq-win { border: 18px solid transparent; border-image: url(../images/yq/ui-frame.webp) 128 fill / 18px round; filter: var(--yq-frame-filter); color: var(--yq-ink); box-sizing: border-box; }
.yq-win > * { filter: none; }
.yq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 2px solid var(--yq-brass); border-radius: 10px; background: linear-gradient(#fbf3dc, #efdcae); color: var(--yq-ink); font: 700 15px/1.25 var(--yq-font); box-shadow: 0 2px 0 #8a6224; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.yq-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #8a6224; }
.yq-btn[disabled] { opacity: .45; cursor: default; }
.yq-btn--main { background: linear-gradient(#3a8f8a, #1f5f63); color: #fff8e6; border-color: #e6c06a; }
.yq-btn.is-on { background: linear-gradient(#fff6c6, #f0d675); border-color: #9e6a12; }
.yq-btn--main.is-on { background: linear-gradient(#3a8f8a, #1f5f63); }
.yq-btn--back { background: linear-gradient(#f2e2bd, #d9c08a); }
.yq-btn--wide { width: 100%; margin: 6px 0; }
.yq-btn small { display: block; font-size: 14px; font-weight: 500; opacity: .85; }
.yq-ic { display: inline-block; flex: none; background-repeat: no-repeat; vertical-align: middle; }
.yq-info { margin: 6px 0; font-size: 14px; color: var(--yq-ink2); }
.yq-bad { color: var(--yq-crimson); font-style: normal; font-weight: 800; }
.yq-up { color: #1d7a3a; font-style: normal; font-weight: 800; }
.yq-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.yq-big { font-size: 20px; font-weight: 800; margin: 8px 0; }

/* ---------- 地図の上 ---------- */
.yq-hud { position: absolute; left: 8px; right: 8px; top: calc(6px + env(safe-area-inset-top)); max-width: 640px; margin: 0 auto; }
.yq-hud__row { display: flex; align-items: center; gap: 6px; }
.yq-hud__place { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px; background: rgba(36,24,10,.72); color: #fff3d0; font-size: 15px; font-weight: 800; border: 1px solid rgba(230,192,106,.6); }
.yq-hud__place b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yq-hud__gold { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; background: rgba(36,24,10,.72); color: #ffe39a; font-size: 15px; font-weight: 800; border: 1px solid rgba(230,192,106,.6); white-space: nowrap; }
.yq-hud__menu { min-height: 40px; padding: 4px 12px; }
.yq-party { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 5px; }
.yq-pc { padding: 3px 6px; border-radius: 8px; background: rgba(244,231,197,.92); border: 2px solid var(--yq-brass); font-size: 14px; line-height: 1.25; overflow: hidden; }
.yq-pc b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yq-pc span { display: inline-block; margin-right: 6px; font-size: 14px; font-weight: 700; }
.yq-pc.is-low { background: rgba(255,214,160,.95); border-color: #c46a1d; }
.yq-pc.is-dead { background: rgba(170,160,150,.9); color: #4a3a2a; }
.yq-pc.is-poison { box-shadow: inset 0 0 0 2px #8f4fd1; }
.yq-goal { margin-top: 5px; max-width: 100%; padding: 4px 10px; border-radius: 10px; background: rgba(20,25,58,.72); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; width: fit-content; }
.yq-pad { position: absolute; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 156px; height: 156px; }
.yq-pad button { position: absolute; width: 54px; height: 54px; border: 3px solid #7a5520; border-radius: 14px; background: rgba(251,243,220,.86); color: #6b4a1e; font: 800 20px/1 var(--yq-font); box-shadow: 0 3px 0 #7a5520; touch-action: none; }
.yq-pad button.is-on { background: #f0d675; transform: translateY(2px); box-shadow: 0 1px 0 #7a5520; }
.yq-pad .u { left: 51px; top: 0; } .yq-pad .d { left: 51px; bottom: 0; } .yq-pad .l { left: 0; top: 51px; } .yq-pad .r { right: 0; top: 51px; }
.yq-ab { position: absolute; right: 12px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 136px; height: 120px; }
.yq-ab button { position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #7a5520; font: 800 22px/1 var(--yq-font); box-shadow: 0 3px 0 #7a5520; touch-action: none; }
.yq-ab .a { right: 0; top: 0; background: linear-gradient(#3a8f8a, #1f5f63); color: #fff8e6; }
.yq-ab .b { left: 0; bottom: 0; background: linear-gradient(#fbf3dc, #e2c98f); color: #6b4a1e; }
.yq-ui:has(> .yq-talk) .yq-pad, .yq-ui:has(> .yq-talk) .yq-ab, .yq-ui:has(> .yq-choice) .yq-pad, .yq-ui:has(> .yq-choice) .yq-ab { display: none; }
.yq-placename { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); padding: 8px 22px; border-radius: 10px; background: rgba(36,24,10,.78); color: #fff3d0; font-size: 18px; font-weight: 800; border: 2px solid var(--yq-brass2); white-space: nowrap; transition: opacity .6s; }
.yq-placename.is-out { opacity: 0; }
.yq-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 50; }
.yq-fade.is-white { background: #fffbe6; }
.yq-fade.is-on { opacity: 1; }
.yq-flashred { position: absolute; inset: 0; background: rgba(160,40,200,.25); pointer-events: none; z-index: 30; }
.yq-toast { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); padding: 8px 16px; border-radius: 12px; background: rgba(36,24,10,.88); color: #fff3d0; font-size: 15px; font-weight: 700; z-index: 90; max-width: 86%; text-align: center; animation: yq-pop .25s; }
@keyframes yq-pop { from { transform: translate(-50%, 8px); opacity: 0; } }

/* ---------- 会話 ---------- */
.yq-talk { position: absolute; left: 8px; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 680px; margin: 0 auto; min-height: 128px; padding: 6px 10px 18px; z-index: 40; font-size: 17px; line-height: 1.7; cursor: pointer; }
.yq-talk__who { display: inline-block; margin-bottom: 2px; padding: 0 10px; border-radius: 8px; background: var(--yq-teal); color: #fff8e6; font-size: 15px; font-weight: 800; }
.yq-talk__txt { min-height: 3.4em; white-space: pre-wrap; }
.yq-talk__next { position: absolute; right: 30px; bottom: 0; color: var(--yq-crimson); font-size: 15px; animation: yq-blink 1s infinite; }
.yq-talk__log { position: absolute; right: -2px; top: -4px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--yq-ink2); font-size: 20px; }
@keyframes yq-blink { 50% { opacity: .2; } }
.yq-por { position: absolute; left: 10px; bottom: calc(150px + env(safe-area-inset-bottom)); width: min(36vw, 200px); height: min(38vh, 290px); z-index: 39; pointer-events: none; }
.yq-por img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
.yq-choice { position: absolute; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 41; display: flex; flex-direction: column; gap: 6px; min-width: 200px; max-width: 80%; }

/* ---------- 窓（シート） ---------- */
.yq-sheet { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(10,12,26,.55); padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.yq-sheet__in { width: 100%; max-width: 640px; max-height: 100%; display: flex; flex-direction: column; }
.yq-sheet__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.yq-sheet__hd h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 800; color: var(--yq-teal); }
.yq-sheet__x { min-height: 40px; }
.yq-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.yq-sheet__body h3 { margin: 12px 0 4px; font-size: 16px; color: var(--yq-crimson); }
.yq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 8px 0; }
.yq-grid .yq-btn { flex-direction: column; min-height: 64px; }
.yq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.yq-list { display: flex; flex-direction: column; gap: 6px; }
.yq-list--2 { display: grid; grid-template-columns: 1fr 1fr; }
.yq-list .yq-btn { justify-content: flex-start; flex-wrap: wrap; text-align: left; }
.yq-list .yq-btn > span { flex: 1; }
.yq-list .yq-btn > em { font-style: normal; font-weight: 800; color: var(--yq-teal); }
.yq-list .yq-btn > small { flex-basis: 100%; }
.yq-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.yq-tabs .yq-btn { flex: 1; min-width: 70px; }
.yq-mem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.yq-mem img { width: 52px; height: 64px; object-fit: cover; object-position: top; border-radius: 8px; border: 2px solid var(--yq-brass); background: #f8edd0; flex: none; }
.yq-mem b { font-size: 16px; } .yq-mem small, .yq-mem span { display: block; font-size: 14px; }
.yq-party-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.yq-btn--mem { justify-content: flex-start; }
.yq-stat { border-bottom: 1px dashed var(--yq-brass); padding: 6px 0; }
.yq-stat table, .yq-mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.yq-stat th, .yq-mini th { text-align: left; color: var(--yq-ink2); font-weight: 700; padding: 1px 4px; }
.yq-stat td, .yq-mini td { font-weight: 800; padding: 1px 4px; }
.yq-eqslot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.yq-eqslot > b { width: 3em; }
.yq-ordbtn { width: 100%; justify-content: space-between; }
.yq-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.yq-dex__c { padding: 6px; border-radius: 10px; background: rgba(255,250,232,.7); border: 1px solid var(--yq-brass); text-align: center; font-size: 14px; }
.yq-dex__c img { width: 96px; height: 96px; object-fit: contain; }
.yq-dex__c span { display: block; height: 96px; line-height: 96px; font-size: 40px; color: #b9a27a; }
.yq-dex__c b { display: block; } .yq-dex__c small { display: block; text-align: left; font-size: 14px; }
.yq-log { max-height: 60vh; overflow-y: auto; font-size: 15px; }
.yq-log p { margin: 4px 0; }
.yq-name { display: block; margin: 8px 0; }
.yq-name span { display: block; font-size: 14px; color: var(--yq-ink2); }
.yq-name input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 6px 10px; border: 2px solid var(--yq-brass); border-radius: 10px; font: 700 18px var(--yq-font); background: #fffaf0; color: var(--yq-ink); -webkit-user-select: text; user-select: text; }
.yq-make { display: flex; gap: 10px; }
.yq-make__pv { width: 34%; flex: none; }
.yq-make__pv img { width: 100%; max-height: 52vh; object-fit: contain; }
.yq-make__f { flex: 1; min-width: 0; }
.yq-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; }
.yq-jobs .yq-btn { flex-direction: column; }
.yq-tav-hd { display: flex; align-items: center; gap: 10px; }
.yq-tav-hd img { width: 72px; height: 96px; object-fit: cover; object-position: top; border-radius: 10px; border: 2px solid var(--yq-brass); }
.yq-rost { display: flex; align-items: center; gap: 6px; }
.yq-rank { list-style: none; margin: 0; padding: 0; }
.yq-rank li { display: flex; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--yq-brass); font-size: 15px; }
.yq-rank li b { width: 2em; text-align: right; color: var(--yq-crimson); }
.yq-rank li span { flex: 1; } .yq-rank li em { font-style: normal; font-weight: 800; }
.yq-rank li.is-me { background: rgba(240,214,117,.4); }
.yq-daily-hd { display: flex; gap: 10px; align-items: center; }
.yq-daily-hd img { width: 110px; height: 72px; object-fit: cover; border-radius: 8px; border: 2px solid var(--yq-brass); }
.yq-daily-hd b { display: block; font-size: 17px; } .yq-daily-hd small { font-size: 14px; }
.yq-quest { flex-wrap: wrap; }

/* ---------- タイトル・はじまり ---------- */
.yq-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(30px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.yq-title__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; animation: yq-slow 24s ease-in-out infinite alternate; }
@keyframes yq-slow { to { transform: scale(1.06); } }
.yq-title__logo { position: relative; text-align: center; color: #fff6d8; text-shadow: 0 3px 0 #2a1a0a, 0 0 18px rgba(255,210,120,.6); }
.yq-title__logo h1 { margin: 0; font: 800 clamp(30px, 9vw, 54px)/1.1 var(--yq-font); letter-spacing: .04em; }
.yq-title__logo h1 span { display: inline-block; margin-left: .15em; color: #ffd66b; font-family: Georgia, 'Times New Roman', serif; }
.yq-title__logo small { display: block; font-size: 16px; font-weight: 800; letter-spacing: .4em; }
.yq-title__btns { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 380px; }
.yq-title__btns .yq-btn { min-height: 52px; font-size: 17px; flex-direction: column; }
.yq-title__back { color: #fff3d0; text-align: center; font-size: 14px; padding: 8px; }
.yq-title__credit { position: absolute; right: 10px; bottom: 4px; margin: 0; color: rgba(255,243,208,.85); font-size: 14px; }
.yq-newgame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94%, 460px); max-height: 94%; overflow-y: auto; background: none; }
.yq-newgame h2 { margin: 0 0 6px; text-align: center; color: var(--yq-teal); font-size: 20px; }
.yq-looks { display: flex; gap: 8px; }
.yq-looks button { flex: 1; border: 3px solid transparent; border-radius: 12px; background: rgba(255,250,232,.6); padding: 4px; font: 700 15px var(--yq-font); color: var(--yq-ink); }
.yq-looks button.is-on { border-color: var(--yq-teal); background: rgba(240,214,117,.5); }
.yq-looks img { width: 100%; height: min(34vh, 260px); object-fit: contain; display: block; }
.yq-prologue { position: absolute; inset: 0; z-index: 70; background: #05060f; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 20px; transition: opacity .6s; }
.yq-prologue p { margin: 0; color: #f3e6c4; font-size: 18px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 1s, transform 1s; }
.yq-prologue p.is-in { opacity: 1; transform: none; }
.yq-prologue.is-out { opacity: 0; }
.yq-evimg { position: absolute; inset: 0; z-index: 70; background: #05060f; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity .35s; }
.yq-evimg.is-in { opacity: 1; }
.yq-evimg img { max-width: 100%; max-height: 74%; object-fit: contain; animation: yq-kb 8s ease-out forwards; }
@keyframes yq-kb { from { transform: scale(1.08); } to { transform: scale(1); } }
.yq-evimg p { margin: 10px 12px 0; max-width: 620px; font-size: 16px; font-weight: 700; }
.yq-evimg__tap { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); color: #f3e6c4; font-size: 14px; animation: yq-blink 1.4s infinite; }
.yq-wipe { position: absolute; inset: 0; z-index: 80; background: radial-gradient(#3b0d0d, #000); display: flex; align-items: center; justify-content: center; transition: opacity .4s; }
.yq-wipe p { color: #ffdede; font-size: 20px; font-weight: 800; padding: 16px; text-align: center; }
.yq-wipe.is-out { opacity: 0; }
.yq-relight { position: absolute; inset: 0; z-index: 75; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(rgba(20,16,40,.9), #05060f); transition: opacity .5s; }
.yq-relight .yq-ic { filter: grayscale(1) brightness(.6); transition: filter 1.4s, transform 1.4s; }
.yq-relight.is-on .yq-ic { filter: none drop-shadow(0 0 30px #ffd66b); transform: scale(1.2); }
.yq-relight__glow { position: absolute; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,214,107,.9); transition: box-shadow 2s; }
.yq-relight.is-on .yq-relight__glow { box-shadow: 0 0 200px 160px rgba(255,214,107,.55); }
.yq-relight p { color: #fff3d0; font-size: 22px; font-weight: 800; opacity: 0; transition: opacity 1.4s .8s; }
.yq-relight.is-on p { opacity: 1; }
.yq-relight.is-out { opacity: 0; }
.yq-cine { position: absolute; inset: 0; z-index: 45; pointer-events: none; box-shadow: inset 0 70px 0 #000, inset 0 -70px 0 #000; }
.yq-ending { position: absolute; inset: 0; z-index: 80; background: #05060f; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.yq-ending img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; animation: yq-kb 14s ease-out forwards; }
.yq-ending__in { position: relative; margin: 12px; max-width: 600px; }
.yq-ending__in h2 { margin: 0 0 6px; color: var(--yq-crimson); font-size: 22px; text-align: center; }
.yq-ending__in p { margin: 6px 0; font-size: 16px; }
.yq-ending__note { font-size: 14px !important; color: var(--yq-ink2); }
.yq-starfx { position: absolute; inset: 0; z-index: 75; background: radial-gradient(#1d2357, #05060f); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.yq-starfx img { position: relative; height: 50vh; animation: yq-rise 2.4s ease-out; filter: drop-shadow(0 0 22px #fff3b0); }
.yq-starfx p { position: relative; color: #fff3d0; font-size: 18px; font-weight: 800; text-align: center; padding: 0 16px; }
.yq-starfx__ring { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; border: 4px dashed rgba(255,230,140,.7); animation: yq-spin 6s linear infinite; }
@keyframes yq-spin { to { transform: rotate(360deg); } }
@keyframes yq-rise { from { opacity: 0; transform: translateY(30px) scale(.9); } }

/* ---------- 戦闘 ---------- */
.yq-encfx { position: absolute; inset: 0; z-index: 54; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0 10deg, rgba(10,12,30,.95) 10deg 20deg); animation: yq-enc .52s ease-in forwards; }
@keyframes yq-enc { 0% { opacity: 0; transform: scale(.2) rotate(0); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(3) rotate(90deg); } }
.yq-encfx.is-out { animation: yq-encout .4s forwards; }
@keyframes yq-encout { to { opacity: 0; } }
.yq-bt { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; background: #0d1020; transition: opacity .3s; }
.yq-bt.is-out { opacity: 0; }
.yq-bt.is-enter .yq-foe { animation: yq-appear .65s ease-out both; }
.yq-bt__scene { position: relative; flex: 1 1 56%; min-height: 0; overflow: hidden; }
.yq-bt__bg { position: absolute; inset: 0; background-size: cover; background-position: center 60%; }
.yq-bt__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,.3)); }
.yq-bt__foes { position: absolute; left: 0; right: 0; bottom: 4%; top: 92px; display: flex; align-items: center; justify-content: center; gap: 1%; padding: 0 2%; }
.yq-foe { position: relative; flex: 0 0 30%; max-width: 300px; border: 0; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; transition: opacity .5s, filter .5s; }
.yq-bt__foes[data-n="1"] .yq-foe { flex-basis: 58%; max-width: 380px; }
.yq-bt__foes[data-n="2"] .yq-foe { flex-basis: 44%; max-width: 330px; }
.yq-bt__foes[data-n="3"] .yq-foe { flex-basis: 32%; }
.yq-bt__foes[data-n="4"] .yq-foe, .yq-bt__foes[data-n="5"] .yq-foe, .yq-bt__foes[data-n="6"] .yq-foe { flex-basis: 24%; }
.yq-bt__foes.is-boss .yq-foe { flex-basis: 84%; max-width: 520px; }
.yq-foe img { aspect-ratio: 1 / 1; }
.yq-foe img { width: 100%; max-height: 38vh; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.45)); pointer-events: none; }
.yq-foe__n { margin-top: 2px; padding: 1px 8px; border-radius: 8px; background: rgba(36,24,10,.72); color: #fff3d0; font-size: 14px; font-weight: 700; white-space: nowrap; }
.yq-foe__st { position: absolute; top: 4%; right: 8%; color: #fff; font-size: 20px; font-weight: 800; text-shadow: 0 2px 0 #000; }
.yq-foe.is-gone { opacity: 0; pointer-events: none; }
.yq-foe.is-die img { animation: yq-die .5s forwards; }
@keyframes yq-die { to { filter: brightness(3) blur(2px); opacity: 0; transform: scale(1.1); } }
.yq-foe.is-hit img { animation: yq-hit .42s; }
@keyframes yq-hit { 0%, 40%, 80% { filter: brightness(2.6) drop-shadow(0 0 6px #fff); } 20%, 60% { filter: brightness(1); transform: translateX(-6px); } 100% { filter: drop-shadow(0 8px 6px rgba(0,0,0,.45)); } }
.yq-foe.is-lunge img { animation: yq-lunge .42s; }
@keyframes yq-lunge { 40% { transform: scale(1.14) translateY(10px); } }
.yq-foe.is-appear img { animation: yq-appear .6s; }
@keyframes yq-appear { from { opacity: 0; transform: translateY(-30px) scale(.8); filter: brightness(3); } }
.yq-foe.is-reveal img { animation: yq-reveal .9s; }
@keyframes yq-reveal { 50% { filter: drop-shadow(0 0 14px #9fe8ff) brightness(1.3); } }
.yq-bt__foes.is-pick .yq-foe:not(.is-gone) { cursor: pointer; }
.yq-bt__foes.is-pick .yq-foe:not(.is-gone) .yq-foe__n { background: var(--yq-teal); outline: 2px solid var(--yq-brass2); animation: yq-blink 1s infinite; }
.yq-bt__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.yq-bt__party { position: absolute; left: 4px; right: 4px; top: calc(4px + env(safe-area-inset-top)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; max-width: 720px; margin: 0 auto; }
.yq-bp { position: relative; border-width: 10px; border-image-width: 10px; padding: 0 2px; font-size: 14px; line-height: 1.25; transition: transform .2s; }
.yq-bp b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.yq-bp span { display: block; font-size: 14px; font-weight: 700; } .yq-bp em { font-style: normal; margin-left: 4px; font-weight: 800; }
.yq-bp small { display: block; font-size: 14px; color: var(--yq-ink2); white-space: nowrap; overflow: hidden; }
.yq-bp.is-low { background-color: rgba(255,190,120,.6); }
.yq-bp.is-dead { filter: grayscale(1) brightness(.85); }
.yq-bp.is-act { transform: translateY(6px); }
.yq-bp.is-turn { transform: translateY(6px) scale(1.04); box-shadow: 0 0 0 3px #f0d675; border-radius: 8px; }
.yq-bp.is-hurt { animation: yq-hurt .45s; }
@keyframes yq-hurt { 0%, 50% { background: rgba(220,40,30,.55); transform: translateX(-5px); } 25%, 75% { transform: translateX(5px); } }
.yq-num { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font: 800 26px/1 var(--yq-font); color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; animation: yq-num 1.1s forwards; pointer-events: none; z-index: 3; white-space: nowrap; }
.yq-num--crit { color: #ffd23f; font-size: 34px; }
.yq-num--pdmg { color: #ff8a7a; font-size: 22px; top: 40%; }
.yq-num--heal { color: #9dff8a; }
.yq-num--miss { color: #dfe8ff; font-size: 20px; }
@keyframes yq-num { 0% { transform: translate(-50%, 6px) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -8px) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -18px); opacity: 1; } 100% { transform: translate(-50%, -30px); opacity: 0; } }
.yq-bt__panel { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); background: #1a1424; max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.yq-bt__msg { min-height: 104px; max-height: 128px; overflow: hidden; padding: 0 6px; font-size: 16px; line-height: 1.5; }
.yq-bt__msg p { margin: 0; }
.yq-bt__msg p:last-child { font-weight: 800; }
.yq-bt__cmd { padding: 0 4px; max-height: 44vh; overflow-y: auto; }
.yq-bt__cmd[hidden] { display: none; }
.yq-cmd { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.yq-cmd--party { grid-template-columns: 1fr 1fr 1fr; }
.yq-cmd .yq-btn { flex-direction: column; gap: 2px; padding: 4px; font-size: 15px; }
.yq-cmd__who { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.yq-cmd__who img { width: 36px; height: 44px; object-fit: cover; object-position: top; border-radius: 6px; border: 2px solid var(--yq-brass); }
.yq-cmd__who small { color: var(--yq-ink2); font-size: 14px; }
.yq-bt__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; }
.yq-bt__flash.is-on { animation: yq-flash .26s; }
@keyframes yq-flash { 0% { opacity: .75; } 100% { opacity: 0; } }
.yq-bt--view .yq-bt__cmd { display: none; }

/* ---------- すごろく ---------- */
.yq-sg { position: absolute; inset: 0; z-index: 58; display: flex; flex-direction: column; background: radial-gradient(#3b2a52, #120d1e); padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; gap: 6px; }
.yq-sg__board { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; max-width: 560px; width: 100%; margin: 0 auto; }
.yq-sg__c { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid rgba(230,192,106,.7); }
.yq-sg__c i { position: absolute; inset: 0; background-size: 400% 200%; image-rendering: pixelated; }
.yq-sg__c span { position: absolute; left: 3px; top: 1px; color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 0 #000; }
.yq-sg__foe { position: absolute; right: 2px; bottom: 2px; width: 55%; height: 55%; object-fit: contain; }
.yq-sg__me { position: absolute; width: 13%; max-width: 70px; transform: translate(-50%, -70%); transition: left .2s, top .2s; filter: drop-shadow(0 3px 2px rgba(0,0,0,.6)); pointer-events: none; z-index: 2; }
.yq-sg__panel { max-width: 560px; width: 100%; margin: 0 auto; }
.yq-sg__msg { margin: 0; font-size: 18px; font-weight: 800; }
.yq-sg__info { font-size: 14px; }

/* ---------- 観戦（見る側） ---------- */
.yq-wtwait { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); }
.is-wtview .yq-pad, .is-wtview .yq-ab, .is-wtview .yq-hud__menu { display: none; }

/* ---------- 読み込み ---------- */
.yq-load { position: absolute; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center; background: #0d1020; color: #f3e6c4; transition: opacity .4s; }
.yq-load.is-done { opacity: 0; pointer-events: none; }
.yq-load__in { text-align: center; }
.yq-load__in p { font-size: 15px; }
.yq-load__lamp { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; background: radial-gradient(#ffe9a0, #d48a1e 60%, transparent 70%); animation: yq-blink 1.2s infinite; }
.yq-load__bar { width: 200px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.yq-load__bar i { display: block; height: 100%; width: 0; background: #e6c06a; transition: width .2s; }

/* PC: 窓を中央に */
@media (min-width: 900px) {
	.yq-talk { bottom: 24px; }
	.yq-por { left: calc(50% - 470px); bottom: 24px; height: 46vh; width: 250px; }
	.yq-pad, .yq-ab { opacity: .85; }
	.yq-bt__foes { top: 110px; }
}
/* 低い画面 */
@media (max-height: 700px) {
	.yq-pad { transform: scale(.86); transform-origin: left bottom; }
	.yq-ab { transform: scale(.86); transform-origin: right bottom; }
	.yq-bt__msg { min-height: 84px; max-height: 100px; font-size: 15px; }
	.yq-cmd .yq-btn { min-height: 44px; }
	.yq-talk { min-height: 110px; }
	.yq-por { bottom: 128px; height: 30vh; }
	.yq-choice { bottom: 128px; }
}
/* 観戦の入口（共通の watch-cast.js が置く）: このページでは文字を 14px 以上に */
.yq-title .wtc-home, .yq-title .wtc-home b, .yq-title .wtc-home small { font-size: 14px !important; }
.yq-title .wtc-home { min-height: 44px; box-sizing: border-box; }
/* YQFIX1015 観戦の案内の帯（共通の watch-cast.js）が、上の段の場所の名前に重ならないよう、このページでは画面の中ほどに出す */
.yq-body .wtc-hint { position: fixed !important; left: 50% !important; right: auto !important; top: 38% !important; transform: translateX(-50%); width: max-content; max-width: 86vw; font-size: 14px !important; z-index: 95; }
/* 灯台の光の場面: 黒い帯は上下の 9% だけ。十字キー・A・B は帯の上に出さず隠す（場面の間は動かせない） */
.yq-cine { box-shadow: inset 0 9vh 0 #000, inset 0 -9vh 0 #000 !important; z-index: 46; }
.yq-app:has(.yq-cine) .yq-pad, .yq-app:has(.yq-cine) .yq-ab, .yq-app:has(.yq-cine) .yq-hud { visibility: hidden; }
/* YQLOOK1015 姿 A・B を並べて選ぶ（立ち絵の全身・歩く絵・特徴の文） */
.yq-lookpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 8px; }
.yq-lookc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 26px 6px 8px; border: 3px solid #c9ab6b; border-radius: 14px; background: linear-gradient(#fffaf0, #f1e1b8); color: var(--yq-ink); font: 700 14px/1.35 var(--yq-font); cursor: pointer; min-height: 44px; }
.yq-lookc.is-on { border-color: var(--yq-teal); background: linear-gradient(#f2fffb, #cfeee8); box-shadow: 0 0 0 3px rgba(47,138,134,.35); }
.yq-lookc__tag { position: absolute; left: 6px; top: 4px; padding: 0 8px; border-radius: 8px; background: #e6d3a3; font-size: 14px; }
.yq-lookc.is-on .yq-lookc__tag { background: var(--yq-teal); color: #fff8e6; }
.yq-lookc__p { width: 100%; height: clamp(150px, 30vh, 300px); object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); pointer-events: none; }
.yq-lookc__w { width: 64px; height: 80px; image-rendering: pixelated; pointer-events: none; }
.yq-lookc__t { min-height: 2.7em; text-align: center; font-size: 14px; }
.yq-info--h { font-weight: 800; color: var(--yq-crimson); }
.yq-make2 .yq-jobs { margin-bottom: 4px; }
@media (max-height: 700px) { .yq-lookc__p { height: clamp(120px, 24vh, 200px); } .yq-lookc__w { width: 52px; height: 65px; } }