/* Legacy 3D — inside the buildings: the game's own screens big in the middle of the screen, and the conversation card
   when you talk to someone (their name and job, what they say, what you can ask for). */
.w3-panel.center { left: 50%; top: 50%; right: auto; bottom: auto; width: min(1100px, calc(100vw - 40px)); height: min(900px, calc(100vh - 40px)); transform: translate(-50%, -47%) scale(.96); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2, .9, .25, 1), opacity .22s ease; box-shadow: 0 0 0 100vmax rgb(4 6 12 / .55), 0 40px 120px -20px rgb(0 0 0 / .8); border-radius: 28px; }
.w3-panel.center.on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.w3-panel.center > header { padding: 14px 20px; background: linear-gradient(90deg, #10141f, #1a2236); }
.w3-panel.center > header b { font-size: 20px; }
.w3-panel.center > header i { font-size: 26px; }
@media (max-width: 640px) { .w3-panel.center { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 20px; } }

/* talking to someone */
.modal-wrap:has(.w3talk) { align-items: center; background: rgb(6 8 14 / .35); backdrop-filter: none; }
.modal.w3talk { max-width: min(760px, 94vw); background: linear-gradient(180deg, #161c2c, #0d111b); color: #f4f6fb; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 100px -20px rgb(0 0 0 / .85); }
.modal.w3talk .modal-head { display: none; }
.modal.w3talk .modal-body { padding: 20px 22px 18px; gap: 0; }
.modal.w3talk .tk-who { display: flex; align-items: center; gap: 14px; }
.modal.w3talk .tk-who > i { font-style: normal; flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; font-size: 30px; border-radius: 18px; background: linear-gradient(135deg, #ffd23f, #ff8a3a); box-shadow: 0 10px 24px -10px rgb(255 160 40 / .8); }
.modal.w3talk .tk-who b { display: block; font: 700 21px var(--f-display, inherit); letter-spacing: .01em; }
.modal.w3talk .tk-who small { display: block; margin-top: 2px; opacity: .62; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.modal.w3talk .tk-say { margin: 14px 0 16px; padding: 14px 16px; min-height: 54px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .06); font-size: 17px; line-height: 1.5; position: relative; }
.modal.w3talk .tk-say::before { content: ''; position: absolute; left: 22px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: rgb(255 255 255 / .06); }
.modal.w3talk .tk-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.modal.w3talk .tk-opts .btn { width: 100%; padding: 12px 15px; border-radius: 15px; text-align: left; display: grid; gap: 2px; background: rgb(255 255 255 / .08); color: #fff; border: 1px solid rgb(255 255 255 / .14); font-size: 15px; box-shadow: none; cursor: pointer; transition: background .15s, transform .15s; }
.modal.w3talk .tk-opts .btn:hover:not(:disabled) { background: rgb(255 210 63 / .18); border-color: rgb(255 210 63 / .55); transform: translateY(-1px); }
.modal.w3talk .tk-opts .btn small { font-size: 11px; opacity: .62; font-weight: 700; }
.modal.w3talk .tk-opts .btn:disabled { opacity: .42; cursor: default; }
.modal.w3talk .tk-opts .btn.bye { grid-column: 1 / -1; text-align: center; background: transparent; opacity: .78; }