#kota-dialogue { box-sizing: border-box; position: fixed; z-index: 15; top: 0; left: 0; visibility: hidden; width: min(400px, calc(100vw - 28px)); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 12px 16px; border: 2px solid #c4a55f; border-radius: 12px; background: #183a35fa; color: #fff9e5; box-shadow: 0 8px 26px #0004; }
#kota-dialogue .kota-place { font-size: 15px; font-weight: 800; color: #d6f0fc; padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid #749697; letter-spacing: .08em; }
#kota-dialogue strong { display: block; margin-bottom: 8px; color: #f2d68f; font-size: 13px; letter-spacing: .15em; }
#kota-line { font-size: clamp(16px, 1.5vw, 20px); font-weight: 650; line-height: 1.5; }
#kota-question { margin-top: 8px; font-size: 19px; font-weight: 800; line-height: 1.5; color: #ff9797; }
#kota-dialogue .actions { flex-wrap: wrap; margin: 10px 0 0; }
#kota-dialogue button { min-height: 46px; min-width: 76px; color: #fff9e5; border-color: #c8d8c5; font-weight: 700; }
#kota-dialogue #kota-yes { background: #f0d191; color: #163c36; border-color: #f0d191; }
#kota-location { position: fixed; z-index: 12; top: 120px; left: 30px; padding: 14px 22px; border: 3px solid #bdeaff; border-left: 7px solid #bdeaff; border-radius: 8px; color: #fff; background: #12394ff5; box-shadow: 0 5px 18px #0003; font-size: 29px; font-weight: 850; letter-spacing: .06em; pointer-events: none; }
#kota-guide { box-sizing: border-box; position: fixed; z-index: 14; top: 50dvh; left: 50%; transform: translateX(-50%); visibility: hidden; width: 380px; max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); margin: 0; padding: 12px 18px; border: 2px solid #dbb153; border-radius: 12px; background: rgb(255 244 216 / 65%); color: #183a35; box-shadow: 0 5px 24px #0003; font-size: 15px; line-height: 1.5; text-align: center; white-space: pre-line; word-break: normal; overflow-wrap: normal; text-wrap: pretty; pointer-events: none; }
#kota-guide::first-line { font-size: 18px; font-weight: 800; }
#kota-fade { position: fixed; inset: 0; z-index: 30; background: #07111b; opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
#kota-fade.active { opacity: 1; }
body.kota-event-active #pv-toggle { display: none; }
@media (max-width: 780px) { #kota-location { top: 157px; left: 14px; padding: 9px 14px; font-size: 24px; } #kota-dialogue { padding: 10px 14px; } body.kota-event-active aside .hint, body.kota-event-active aside #status { display: none; } }
@media (max-height: 600px) { #kota-location { top: 110px; font-size: 22px; padding: 9px 14px; } #kota-dialogue { width: min(400px, 50vw); padding: 10px 14px; } body.kota-event-active aside { width: 36vw; padding: 10px; } body.kota-event-active aside h1, body.kota-event-active aside > p { display: none; } }


/* Compact head-anchored bubble: retain readable choices without covering the face. */
#kota-dialogue { padding: 8px 14px; }
#kota-dialogue .kota-place { display: inline-block; margin: 0 12px 4px 0; padding: 0; border: 0; font-size: 13px; }
#kota-dialogue strong { display: inline-block; margin: 0 0 4px; }
#kota-line { font-size: 18px; line-height: 1.3; }
#kota-question { font-size: 17px; line-height: 1.3; margin-top: 6px; }
#kota-dialogue .actions { margin-top: 6px; }
#kota-dialogue button { min-height: 44px; }
#kota-dialogue [hidden] { display: none; }
@media (max-width: 780px) { #kota-dialogue { width: min(250px, calc(100vw - 16px)); } }


@media (max-width: 1023px) { #kota-guide { width: 340px; padding: 10px 16px; font-size: 14px; } #kota-guide::first-line { font-size: 17px; } }
@media (max-width: 600px), (max-height: 500px) { #kota-guide { width: 300px; padding: 8px 12px; font-size: 13px; } #kota-guide::first-line { font-size: 15px; } }
@media (max-height: 500px) { #kota-guide { width: 260px; } }