* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans TC", sans-serif; background: #0b1220; color: #edf4ff; }
body { margin: 0; min-width: 320px; background: linear-gradient(160deg, #111d34, #090e18 60%); }
button, input { font: inherit; }
button { min-height: 46px; border: 1px solid #35496b; border-radius: 12px; background: #1a2a47; color: #f5f8ff; padding: .65rem .8rem; touch-action: manipulation; }
button:not(:disabled):active { transform: translateY(1px); background: #29466f; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible { outline: 3px solid #6da7ff; outline-offset: 2px; }
.app-shell { display: flex; flex-direction: column; width: min(100%, 680px); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); }
.topbar { order: 0; }
.scene-card { order: 1; }
.status-card { order: 2; }
.card[aria-labelledby="quick-actions-title"] { order: 3; }
.card[aria-labelledby="movement-title"] { order: 4; }
.command-card { order: 1; }
.connection-card { order: 6; }
.connection-card[hidden] { display: none; }
.game-only[hidden] { display: none; }
.login-form[hidden], .command-form[hidden], .transcript[hidden] { display: none; }
.scene-card { border-color: #3f6594; background: linear-gradient(145deg, rgba(25, 49, 82, .98), rgba(14, 26, 46, .96)); }
.command-card .transcript { min-height: 30vh; max-height: 48vh; }
.game-ready .command-card { order: 5; }
.game-ready .command-card .transcript { min-height: 24vh; max-height: 42vh; }
.topbar, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.topbar { padding: .5rem 0 1rem; }
h1, h2, p { margin: 0; } h1 { font-size: 1.35rem; } h2 { font-size: 1rem; }
.eyebrow { color: #8eacd6; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.card { margin-top: .8rem; padding: 1rem; border: 1px solid #253856; border-radius: 16px; background: rgba(17, 29, 52, .92); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.badge { display: inline-flex; align-items: center; min-height: 30px; padding: .35rem .6rem; border-radius: 999px; font-size: .78rem; white-space: nowrap; }
.badge-idle { color: #b6c3d9; background: #25334a; } .badge-ready { color: #bdf4d0; background: #164d35; } .badge-error { color: #ffd0d0; background: #5c2630; }
.scene-actions { display: flex; align-items: center; gap: .35rem; }
.scene-actions button:first-child { min-height: 38px; padding: .4rem .7rem; background: #28578a; border-color: #5e9dde; }
.summary { margin-top: .9rem; color: #f0f5ff; line-height: 1.75; white-space: pre-wrap; min-height: 5rem; }
.login-status { margin-top: .75rem; color: #c7d8f2; line-height: 1.55; }
.login-form { display: grid; gap: .55rem; margin-top: 1rem; }
.login-form label { color: #a9bddc; font-size: .82rem; }
.login-form input { min-height: 48px; border: 1px solid #35496b; border-radius: 12px; background: #0a1120; color: #fff; padding: 0 .8rem; }
.login-form button { margin-top: .3rem; background: #28578a; border-color: #5e9dde; }
.status-character { margin-top: .8rem; color: #e8f1ff; font-weight: 650; }
.vitals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .8rem; }
.vital { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .75rem; border-radius: 12px; background: #0a1120; border: 1px solid #263c5d; }
.vital span { color: #9db1d2; font-size: .75rem; letter-spacing: .08em; }
.vital strong { font-size: .9rem; }
.vital-hp { border-color: #713e4b; } .vital-mp { border-color: #315783; }
.room-exits, .room-contents { margin-top: .85rem; padding: .7rem .8rem; border-radius: 10px; background: rgba(5, 12, 24, .55); color: #cbe1ff; line-height: 1.55; }
.room-contents { color: #c8f0d5; }
.raw-output { margin-top: .8rem; max-height: 18rem; overflow: auto; padding: .8rem; border-radius: 10px; background: #070b13; color: #b8c7dd; white-space: pre-wrap; font-size: .78rem; line-height: 1.5; }
.text-button { min-height: 34px; padding: .35rem .6rem; background: transparent; }
.endpoint-form, .command-form { display: flex; gap: .5rem; margin-top: .8rem; }
.endpoint-form input, .command-form input { min-width: 0; flex: 1; min-height: 46px; border: 1px solid #35496b; border-radius: 12px; background: #0a1120; color: #fff; padding: 0 .8rem; }
.endpoint-form button { min-width: 76px; } .command-form button { min-width: 72px; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .8rem; }
.action-grid button, .direction-pad button { min-height: 52px; }
.direction-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 330px; margin: .8rem auto 0; }
.direction-pad button:nth-child(1) { grid-column: 2; } .direction-pad button:nth-child(2) { grid-column: 1; grid-row: 2; } .direction-pad button:nth-child(3) { grid-column: 2; grid-row: 2; } .direction-pad button:nth-child(4) { grid-column: 3; grid-row: 2; } .direction-pad button:nth-child(5) { grid-column: 2; grid-row: 3; }
.muted { margin-top: .7rem; color: #8e9eb7; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.transcript { margin-top: .8rem; max-height: 18rem; overflow: auto; border-radius: 10px; background: #070b13; padding: .75rem; font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.log-line { padding: .12rem 0; overflow-wrap: anywhere; } .log-server { color: #d9e7ff; } .log-client { color: #91d7ff; } .log-system { color: #8e9eb7; font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 560px) { .action-grid { grid-template-columns: repeat(3, 1fr); } }