2225 lines
48 KiB
CSS
2225 lines
48 KiB
CSS
:root {
|
|
--bg: #eef2f8;
|
|
--surface: #ffffff;
|
|
--surface-soft: #f5f8ff;
|
|
--text: #1a2236;
|
|
--muted: #5e6b86;
|
|
--border: #d7dff1;
|
|
|
|
--n-red: #ff3157;
|
|
--n-blue: #2563ff;
|
|
--n-yellow: #ffbf1f;
|
|
--n-green: #00b66a;
|
|
--btn-primary-end: #ff7b2f;
|
|
--btn-secondary-start: #56a4ff;
|
|
--btn-secondary-end: #336bff;
|
|
--link-btn-start: #2b82ff;
|
|
--link-btn-end: #3657ff;
|
|
--ghost-fg: #2047aa;
|
|
--ghost-bg: rgba(255, 255, 255, 0.92);
|
|
|
|
--shadow: 0 14px 34px rgba(16, 30, 56, 0.12);
|
|
}
|
|
|
|
body[data-theme="minimal"] {
|
|
--bg: #eef2f8;
|
|
--surface: #ffffff;
|
|
--surface-soft: #f5f8ff;
|
|
--text: #1a2236;
|
|
--muted: #5e6b86;
|
|
--border: #d7dff1;
|
|
--n-red: #ff3157;
|
|
--n-blue: #2563ff;
|
|
--n-yellow: #ffbf1f;
|
|
--n-green: #00b66a;
|
|
--btn-primary-end: #ff7b2f;
|
|
--btn-secondary-start: #56a4ff;
|
|
--btn-secondary-end: #336bff;
|
|
--link-btn-start: #2b82ff;
|
|
--link-btn-end: #3657ff;
|
|
--ghost-fg: #2047aa;
|
|
--ghost-bg: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
body[data-theme="dopamine"] {
|
|
--bg: #fff5e8;
|
|
--surface: #fffefa;
|
|
--surface-soft: #fff5f0;
|
|
--text: #2a1730;
|
|
--muted: #6a4e73;
|
|
--border: #ffd4b2;
|
|
--n-red: #ff4d6d;
|
|
--n-blue: #4f6dff;
|
|
--n-yellow: #ffb627;
|
|
--n-green: #00bf8f;
|
|
--btn-primary-end: #ff7a2f;
|
|
--btn-secondary-start: #6e9dff;
|
|
--btn-secondary-end: #4f6dff;
|
|
--link-btn-start: #5d86ff;
|
|
--link-btn-end: #4f6dff;
|
|
--ghost-fg: #3d49c9;
|
|
--ghost-bg: rgba(255, 252, 246, 0.92);
|
|
}
|
|
|
|
body[data-theme="midnight"] {
|
|
--bg: #0f1328;
|
|
--surface: #161c36;
|
|
--surface-soft: #1d2547;
|
|
--text: #ebf0ff;
|
|
--muted: #aab6dc;
|
|
--border: #2b3b75;
|
|
--n-red: #ff5d7e;
|
|
--n-blue: #4d84ff;
|
|
--n-yellow: #ffd166;
|
|
--n-green: #3ee4a6;
|
|
--btn-primary-end: #ff7f50;
|
|
--btn-secondary-start: #67a4ff;
|
|
--btn-secondary-end: #4d84ff;
|
|
--link-btn-start: #5e98ff;
|
|
--link-btn-end: #4d84ff;
|
|
--ghost-fg: #b8ccff;
|
|
--ghost-bg: rgba(19, 28, 54, 0.88);
|
|
--shadow: 0 16px 42px rgba(3, 8, 24, 0.45);
|
|
}
|
|
|
|
body[data-theme="mint"] {
|
|
--bg: #eef8f3;
|
|
--surface: #ffffff;
|
|
--surface-soft: #f1fcf6;
|
|
--text: #1b2d2a;
|
|
--muted: #58716e;
|
|
--border: #c6e6dd;
|
|
--n-red: #ff6f61;
|
|
--n-blue: #2f7cff;
|
|
--n-yellow: #ffcb57;
|
|
--n-green: #18b77e;
|
|
--btn-primary-end: #ff9552;
|
|
--btn-secondary-start: #67b0ff;
|
|
--btn-secondary-end: #2f7cff;
|
|
--link-btn-start: #4f96ff;
|
|
--link-btn-end: #2f7cff;
|
|
--ghost-fg: #1f5f6a;
|
|
--ghost-bg: rgba(248, 255, 251, 0.94);
|
|
}
|
|
|
|
body[data-theme="sunset"] {
|
|
--bg: #fff1ea;
|
|
--surface: #fffaf5;
|
|
--surface-soft: #fff3ea;
|
|
--text: #311f24;
|
|
--muted: #7a5760;
|
|
--border: #f0c4ba;
|
|
--n-red: #ff5a5f;
|
|
--n-blue: #4d7dff;
|
|
--n-yellow: #ffba49;
|
|
--n-green: #1fb785;
|
|
--btn-primary-end: #ff9445;
|
|
--btn-secondary-start: #6da8ff;
|
|
--btn-secondary-end: #4d7dff;
|
|
--link-btn-start: #5a93ff;
|
|
--link-btn-end: #4d7dff;
|
|
--ghost-fg: #6a3f50;
|
|
--ghost-bg: rgba(255, 248, 241, 0.93);
|
|
}
|
|
|
|
body[data-theme="aurora"] {
|
|
--bg: #eef7ff;
|
|
--surface: #f8fcff;
|
|
--surface-soft: #edf8ff;
|
|
--text: #17263f;
|
|
--muted: #4e6688;
|
|
--border: #b6d7f7;
|
|
--n-red: #ff5f7a;
|
|
--n-blue: #2a8cff;
|
|
--n-yellow: #ffcb5e;
|
|
--n-green: #00c99a;
|
|
--btn-primary-end: #3ea7ff;
|
|
--btn-secondary-start: #42d5d0;
|
|
--btn-secondary-end: #2a8cff;
|
|
--link-btn-start: #2bb6ff;
|
|
--link-btn-end: #2a8cff;
|
|
--ghost-fg: #235a9d;
|
|
--ghost-bg: rgba(245, 251, 255, 0.94);
|
|
}
|
|
|
|
body[data-theme="graphite"] {
|
|
--bg: #1b1f28;
|
|
--surface: #242a34;
|
|
--surface-soft: #2a313d;
|
|
--text: #edf3ff;
|
|
--muted: #a8b3c6;
|
|
--border: #3c4759;
|
|
--n-red: #ff6d6d;
|
|
--n-blue: #74a6ff;
|
|
--n-yellow: #f8c66d;
|
|
--n-green: #4bd8a0;
|
|
--btn-primary-end: #4c7bff;
|
|
--btn-secondary-start: #56b3ff;
|
|
--btn-secondary-end: #3f66db;
|
|
--link-btn-start: #69a8ff;
|
|
--link-btn-end: #3f66db;
|
|
--ghost-fg: #d6e3ff;
|
|
--ghost-bg: rgba(36, 42, 52, 0.92);
|
|
--shadow: 0 16px 42px rgba(7, 11, 18, 0.5);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
color: var(--text);
|
|
font-family: "SF Pro Display", "Avenir Next", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
|
background:
|
|
radial-gradient(circle at 5% -5%, rgba(37, 99, 255, 0.11) 0, transparent 30%),
|
|
radial-gradient(circle at 95% 0%, rgba(255, 49, 87, 0.08) 0, transparent 26%),
|
|
radial-gradient(circle at 50% 120%, rgba(255, 191, 31, 0.08) 0, transparent 34%),
|
|
var(--bg);
|
|
}
|
|
|
|
body[data-theme="dopamine"] {
|
|
background:
|
|
radial-gradient(circle at 10% -10%, rgba(255, 77, 109, 0.23) 0, transparent 34%),
|
|
radial-gradient(circle at 92% 4%, rgba(79, 109, 255, 0.23) 0, transparent 30%),
|
|
radial-gradient(circle at 50% 115%, rgba(255, 182, 39, 0.22) 0, transparent 38%),
|
|
var(--bg);
|
|
}
|
|
|
|
body[data-theme="midnight"] {
|
|
background:
|
|
radial-gradient(circle at 8% -8%, rgba(77, 132, 255, 0.2) 0, transparent 30%),
|
|
radial-gradient(circle at 86% 0%, rgba(255, 93, 126, 0.2) 0, transparent 28%),
|
|
radial-gradient(circle at 50% 120%, rgba(62, 228, 166, 0.18) 0, transparent 34%),
|
|
linear-gradient(180deg, #0b1126, #121a35 55%, #0b1126);
|
|
}
|
|
|
|
body[data-theme="mint"] {
|
|
background:
|
|
radial-gradient(circle at 9% -8%, rgba(24, 183, 126, 0.15) 0, transparent 34%),
|
|
radial-gradient(circle at 93% 5%, rgba(47, 124, 255, 0.14) 0, transparent 32%),
|
|
radial-gradient(circle at 50% 120%, rgba(255, 203, 87, 0.13) 0, transparent 34%),
|
|
var(--bg);
|
|
}
|
|
|
|
body[data-theme="sunset"] {
|
|
background:
|
|
radial-gradient(circle at 12% -8%, rgba(255, 90, 95, 0.2) 0, transparent 34%),
|
|
radial-gradient(circle at 90% 4%, rgba(77, 125, 255, 0.16) 0, transparent 30%),
|
|
radial-gradient(circle at 50% 120%, rgba(255, 186, 73, 0.18) 0, transparent 36%),
|
|
var(--bg);
|
|
}
|
|
|
|
body[data-theme="aurora"] {
|
|
background:
|
|
radial-gradient(circle at 10% -8%, rgba(0, 201, 154, 0.2) 0, transparent 34%),
|
|
radial-gradient(circle at 92% 2%, rgba(42, 140, 255, 0.18) 0, transparent 30%),
|
|
radial-gradient(circle at 50% 120%, rgba(255, 95, 122, 0.16) 0, transparent 34%),
|
|
var(--bg);
|
|
}
|
|
|
|
body[data-theme="graphite"] {
|
|
background:
|
|
radial-gradient(circle at 12% -8%, rgba(116, 166, 255, 0.24) 0, transparent 32%),
|
|
radial-gradient(circle at 88% 0%, rgba(255, 109, 109, 0.22) 0, transparent 30%),
|
|
radial-gradient(circle at 50% 120%, rgba(75, 216, 160, 0.2) 0, transparent 36%),
|
|
linear-gradient(180deg, #181c24 0%, #1f2530 52%, #171b23 100%);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0 0 0.55rem;
|
|
line-height: 1.25;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select,
|
|
button {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
border: 2px solid var(--border);
|
|
background: #fff;
|
|
color: var(--text);
|
|
padding: 0.68rem 0.8rem;
|
|
font: inherit;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 92px;
|
|
resize: vertical;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--n-blue);
|
|
box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.15);
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: linear-gradient(135deg, var(--n-red) 0%, var(--btn-primary-end) 100%);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
letter-spacing: 0.2px;
|
|
cursor: pointer;
|
|
box-shadow: 0 10px 18px rgba(255, 94, 77, 0.25);
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
button:disabled {
|
|
background: #c0cbdf;
|
|
box-shadow: none;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.secondary-btn {
|
|
background: linear-gradient(135deg, var(--btn-secondary-start) 0%, var(--btn-secondary-end) 100%);
|
|
box-shadow: 0 8px 16px rgba(34, 88, 255, 0.24);
|
|
}
|
|
|
|
.ghost-btn {
|
|
background: var(--ghost-bg);
|
|
color: var(--ghost-fg);
|
|
border: 2px solid rgba(143, 175, 244, 0.72);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.helper-text {
|
|
margin-top: 0.55rem;
|
|
color: var(--muted);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.link-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.55rem 0.95rem;
|
|
border-radius: 999px;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, var(--link-btn-start) 0%, var(--link-btn-end) 100%);
|
|
font-weight: 700;
|
|
box-shadow: 0 8px 16px rgba(45, 95, 255, 0.26);
|
|
white-space: nowrap;
|
|
width: auto;
|
|
}
|
|
|
|
.link-btn.disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.user-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
padding: 0.35rem 0.58rem;
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
border: 2px solid var(--border);
|
|
}
|
|
|
|
.user-badge i {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: var(--avatar-color, var(--n-blue));
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.user-badge.has-avatar i {
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid rgba(141, 173, 238, 0.58);
|
|
background-image: var(--avatar-url, none);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.status-banner {
|
|
display: none;
|
|
max-width: 1180px;
|
|
margin: 0.5rem auto 1.2rem;
|
|
padding: 0.8rem 1rem;
|
|
color: #f1f5ff;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, rgba(35, 74, 149, 0.78), rgba(28, 120, 167, 0.76));
|
|
border: 1px solid rgba(182, 214, 255, 0.5);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.status-banner:not(:empty) {
|
|
display: block;
|
|
}
|
|
|
|
.lobby-topbar,
|
|
.room-topbar {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.brand-block h1,
|
|
.room-title h1 {
|
|
font-size: 2.15rem;
|
|
font-weight: 900;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.brand-block p,
|
|
.room-title p,
|
|
.header-note {
|
|
color: var(--muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.top-actions,
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.top-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.top-actions > *,
|
|
.header-actions > * {
|
|
width: auto;
|
|
}
|
|
|
|
.header-actions button {
|
|
min-width: 112px;
|
|
padding: 0.62rem 0.95rem;
|
|
}
|
|
|
|
.lobby-grid {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem 1rem;
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1.2fr 1fr 1fr;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.card-select-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.45rem;
|
|
margin: 0.55rem 0 0.6rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.card-select-item {
|
|
width: 100%;
|
|
padding: 0.32rem;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(139, 173, 236, 0.6);
|
|
background: rgba(240, 247, 255, 0.88);
|
|
box-shadow: none;
|
|
display: grid;
|
|
gap: 0.24rem;
|
|
text-align: left;
|
|
color: #1f2f52;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card-select-item .thumb {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 8px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid rgba(164, 190, 239, 0.52);
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card-select-item .title {
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card-select-item.active {
|
|
border-color: rgba(57, 111, 224, 0.96);
|
|
box-shadow: 0 8px 16px rgba(58, 109, 218, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.selected-card-detail {
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(139, 173, 236, 0.6);
|
|
background: rgba(246, 250, 255, 0.92);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.45rem;
|
|
padding: 0.52rem;
|
|
margin-bottom: 0.62rem;
|
|
}
|
|
|
|
.selected-card-cover {
|
|
border-radius: 10px;
|
|
min-height: 112px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid rgba(164, 190, 239, 0.55);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.selected-card-meta h3 {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.22rem;
|
|
}
|
|
|
|
.selected-card-meta p {
|
|
margin-bottom: 0.34rem;
|
|
font-size: 0.87rem;
|
|
color: #324567;
|
|
}
|
|
|
|
.tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.28rem;
|
|
}
|
|
|
|
.tag-row span {
|
|
font-size: 0.74rem;
|
|
padding: 0.14rem 0.42rem;
|
|
border-radius: 999px;
|
|
background: rgba(57, 111, 224, 0.12);
|
|
color: #2852a0;
|
|
border: 1px solid rgba(104, 147, 233, 0.4);
|
|
}
|
|
|
|
.tag-row.feature span {
|
|
background: rgba(255, 132, 74, 0.15);
|
|
color: #8a411f;
|
|
border-color: rgba(255, 143, 90, 0.45);
|
|
}
|
|
|
|
.plaza-grid {
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem 1rem;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.card,
|
|
.panel {
|
|
background: rgba(255, 255, 255, 0.86);
|
|
border: 1px solid rgba(160, 183, 235, 0.54);
|
|
border-radius: 20px;
|
|
padding: 1rem;
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.card form button,
|
|
.composer-card form button,
|
|
.plaza-create form button {
|
|
width: 100%;
|
|
}
|
|
|
|
.color-row {
|
|
display: flex;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type="color"] {
|
|
width: 58px;
|
|
min-width: 58px;
|
|
height: 42px;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="color"]::-webkit-color-swatch {
|
|
border: none;
|
|
}
|
|
|
|
.color-preview {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
border: 2px solid var(--border);
|
|
background: var(--n-blue);
|
|
}
|
|
|
|
.card h2,
|
|
.panel h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.compact-list,
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-list li,
|
|
ul li {
|
|
background: rgba(248, 251, 255, 0.76);
|
|
border: 1px solid rgba(174, 194, 238, 0.65);
|
|
border-radius: 10px;
|
|
margin-bottom: 0.45rem;
|
|
padding: 0.4rem 0.55rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
body.lobby-page {
|
|
background:
|
|
linear-gradient(120deg, rgba(10, 20, 38, 0.28), rgba(6, 48, 74, 0.2)),
|
|
radial-gradient(circle at 18% 0%, rgba(255, 69, 106, 0.22), transparent 34%),
|
|
radial-gradient(circle at 85% 4%, rgba(37, 99, 255, 0.24), transparent 32%),
|
|
radial-gradient(circle at 50% 110%, rgba(255, 191, 31, 0.22), transparent 36%),
|
|
#eef2f8;
|
|
}
|
|
|
|
body.lobby-page .brand-block h1 {
|
|
font-size: 2.45rem;
|
|
}
|
|
|
|
body.lobby-page .brand-block p {
|
|
color: #415070;
|
|
font-weight: 600;
|
|
}
|
|
|
|
body.lobby-page .card {
|
|
background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 255, 0.85));
|
|
border-color: rgba(147, 178, 239, 0.52);
|
|
}
|
|
|
|
body[data-theme="midnight"] .card,
|
|
body[data-theme="midnight"] .panel,
|
|
body[data-theme="midnight"] .meta-block,
|
|
body[data-theme="midnight"] .invite-panel,
|
|
body[data-theme="graphite"] .card,
|
|
body[data-theme="graphite"] .panel,
|
|
body[data-theme="graphite"] .meta-block,
|
|
body[data-theme="graphite"] .invite-panel,
|
|
body[data-theme="graphite"] .auth-card,
|
|
body[data-theme="midnight"] .auth-card {
|
|
background: linear-gradient(155deg, rgba(21, 30, 58, 0.92), rgba(15, 22, 45, 0.9));
|
|
border-color: rgba(82, 116, 208, 0.52);
|
|
}
|
|
|
|
body[data-theme="midnight"] input,
|
|
body[data-theme="midnight"] textarea,
|
|
body[data-theme="midnight"] select,
|
|
body[data-theme="graphite"] input,
|
|
body[data-theme="graphite"] textarea,
|
|
body[data-theme="graphite"] select {
|
|
background: rgba(17, 25, 49, 0.88);
|
|
color: #ebf0ff;
|
|
border-color: rgba(86, 119, 207, 0.65);
|
|
}
|
|
|
|
body[data-theme="midnight"] ul li,
|
|
body[data-theme="midnight"] .compact-list li,
|
|
body[data-theme="graphite"] ul li,
|
|
body[data-theme="graphite"] .compact-list li,
|
|
body[data-theme="graphite"] .msg,
|
|
body[data-theme="midnight"] .msg {
|
|
background: rgba(22, 33, 66, 0.72);
|
|
border-color: rgba(94, 127, 218, 0.5);
|
|
color: #ebf0ff;
|
|
}
|
|
|
|
body[data-theme="midnight"] .helper-text,
|
|
body[data-theme="midnight"] .brand-block p,
|
|
body[data-theme="midnight"] .room-title p,
|
|
body[data-theme="graphite"] .helper-text,
|
|
body[data-theme="graphite"] .brand-block p,
|
|
body[data-theme="graphite"] .room-title p,
|
|
body[data-theme="graphite"] .header-note,
|
|
body[data-theme="midnight"] .header-note {
|
|
color: #b9c8f2;
|
|
}
|
|
|
|
.compact-list a {
|
|
text-decoration: none;
|
|
color: var(--n-blue);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.game-card {
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
border: 2px solid var(--border);
|
|
background: #fff;
|
|
min-width: 0;
|
|
}
|
|
|
|
.game-card-cover {
|
|
height: 160px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game-card-body {
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
.game-card-body > button {
|
|
margin-top: 0.45rem;
|
|
}
|
|
|
|
.card-actions-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem;
|
|
margin-top: 0.55rem;
|
|
}
|
|
|
|
.card-actions-row > * {
|
|
width: auto;
|
|
}
|
|
|
|
.game-card-sub {
|
|
color: var(--muted);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.card-pack-detail {
|
|
margin-top: 0.45rem;
|
|
border-radius: 10px;
|
|
border: 1px dashed rgba(127, 160, 228, 0.52);
|
|
background: rgba(246, 250, 255, 0.75);
|
|
padding: 0.35rem 0.5rem;
|
|
}
|
|
|
|
.card-pack-detail summary {
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
color: #2f4a86;
|
|
}
|
|
|
|
.card-pack-detail p {
|
|
margin: 0.36rem 0 0;
|
|
font-size: 0.8rem;
|
|
color: #304768;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.card-guide,
|
|
.assist-panel {
|
|
margin-bottom: 0.9rem;
|
|
padding: 0.75rem;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(157, 186, 241, 0.5);
|
|
background: rgba(245, 250, 255, 0.8);
|
|
}
|
|
|
|
.card-guide h3,
|
|
.assist-panel h3 {
|
|
margin: 0 0 0.45rem;
|
|
font-size: 1.04rem;
|
|
}
|
|
|
|
.guide-list {
|
|
margin: 0;
|
|
padding-left: 1.15rem;
|
|
display: grid;
|
|
gap: 0.24rem;
|
|
color: #2c3b5c;
|
|
font-size: 0.88rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.assist-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.assist-panel textarea {
|
|
min-height: 84px;
|
|
}
|
|
|
|
.advanced-pack {
|
|
margin: 0.7rem 0;
|
|
padding: 0.58rem;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(157, 186, 241, 0.48);
|
|
background: rgba(242, 248, 255, 0.85);
|
|
}
|
|
|
|
.advanced-pack summary {
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
color: #2a4587;
|
|
margin-bottom: 0.48rem;
|
|
}
|
|
|
|
.advanced-pack[open] summary {
|
|
margin-bottom: 0.62rem;
|
|
}
|
|
|
|
body.card-editor-page {
|
|
background:
|
|
radial-gradient(circle at 10% 0%, rgba(255, 104, 72, 0.22), transparent 30%),
|
|
radial-gradient(circle at 90% 0%, rgba(45, 105, 255, 0.25), transparent 34%),
|
|
linear-gradient(180deg, #eef3ff 0%, #e8eefb 100%);
|
|
}
|
|
|
|
.card-editor-shell {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem 1rem;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
|
|
gap: 0.95rem;
|
|
}
|
|
|
|
.editor-form-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.editor-form-grid {
|
|
display: grid;
|
|
gap: 0.42rem;
|
|
}
|
|
|
|
.editor-form-grid h2 {
|
|
margin-top: 0.7rem;
|
|
margin-bottom: 0.15rem;
|
|
font-size: 1.15rem;
|
|
color: #233d78;
|
|
}
|
|
|
|
.editor-form-grid .code-input {
|
|
min-height: 150px;
|
|
font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
|
|
font-size: 0.84rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.json-help {
|
|
margin: 0.08rem 0 0.46rem;
|
|
font-size: 0.84rem;
|
|
color: #3a4e73;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.json-help code {
|
|
background: rgba(38, 90, 208, 0.1);
|
|
padding: 0.08rem 0.28rem;
|
|
border-radius: 6px;
|
|
color: #21418f;
|
|
}
|
|
|
|
.editor-guide-card {
|
|
align-self: start;
|
|
position: sticky;
|
|
top: 0.9rem;
|
|
max-height: calc(100vh - 1.8rem);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.assist-loading {
|
|
margin-top: 0.55rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
padding: 0.42rem 0.58rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(90, 131, 220, 0.35);
|
|
background: rgba(52, 104, 214, 0.1);
|
|
color: #2a4b94;
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.assist-loading[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.assist-spinner {
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(58, 96, 178, 0.3);
|
|
border-top-color: #3b63c8;
|
|
animation: assist-spin 900ms linear infinite;
|
|
}
|
|
|
|
.assist-dots {
|
|
display: inline-flex;
|
|
gap: 3px;
|
|
align-items: center;
|
|
}
|
|
|
|
.assist-dots i {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #3b63c8;
|
|
display: block;
|
|
animation: assist-dot-bounce 1s infinite ease-in-out;
|
|
}
|
|
|
|
.assist-dots i:nth-child(2) {
|
|
animation-delay: 120ms;
|
|
}
|
|
|
|
.assist-dots i:nth-child(3) {
|
|
animation-delay: 240ms;
|
|
}
|
|
|
|
@keyframes assist-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes assist-dot-bounce {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0.8);
|
|
opacity: 0.45;
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.auth-page {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.auth-card {
|
|
width: min(420px, calc(100% - 2rem));
|
|
margin: 2rem auto;
|
|
background: #fff;
|
|
border: 2px solid var(--border);
|
|
border-radius: 18px;
|
|
padding: 1.1rem;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.auth-links {
|
|
margin-top: 0.65rem;
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.auth-links a {
|
|
color: var(--n-blue);
|
|
}
|
|
|
|
body.admin-page {
|
|
background:
|
|
radial-gradient(circle at 8% 0%, rgba(37, 99, 255, 0.16), transparent 28%),
|
|
radial-gradient(circle at 92% 0%, rgba(255, 76, 97, 0.16), transparent 26%),
|
|
linear-gradient(180deg, #ecf2ff 0%, #e7eefb 100%);
|
|
}
|
|
|
|
.admin-grid {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem 1rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.admin-panel h2 {
|
|
margin-bottom: 0.55rem;
|
|
}
|
|
|
|
.table-wrap {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.admin-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 880px;
|
|
}
|
|
|
|
.admin-table th,
|
|
.admin-table td {
|
|
text-align: left;
|
|
padding: 0.5rem 0.55rem;
|
|
border-bottom: 1px solid rgba(171, 189, 228, 0.42);
|
|
vertical-align: top;
|
|
}
|
|
|
|
.admin-table th {
|
|
font-size: 0.85rem;
|
|
color: #425176;
|
|
}
|
|
|
|
.admin-table td {
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.admin-table td button {
|
|
width: auto;
|
|
}
|
|
|
|
.admin-table td select {
|
|
min-width: 110px;
|
|
}
|
|
|
|
body.room-page {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
font-size: 13px;
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(255, 73, 0, 0.3) 0, transparent 30%),
|
|
radial-gradient(circle at 86% 10%, rgba(0, 131, 255, 0.35) 0, transparent 30%),
|
|
radial-gradient(circle at 50% 100%, rgba(255, 213, 0, 0.25) 0, transparent 35%),
|
|
linear-gradient(135deg, rgba(14, 25, 54, 0.9), rgba(9, 34, 57, 0.92)),
|
|
var(--room-bg-image);
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
body.room-page::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(7, 14, 28, 0.45), rgba(9, 12, 22, 0.6));
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.room-topbar-immersive,
|
|
.room-shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.room-topbar-immersive {
|
|
max-width: none;
|
|
width: 100%;
|
|
padding: 0.44rem 0.72rem;
|
|
}
|
|
|
|
.room-topbar-immersive .room-title h1,
|
|
.room-topbar-immersive .room-title p {
|
|
color: #f4f8ff;
|
|
}
|
|
|
|
.room-topbar-immersive .room-title p {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.room-topbar-immersive .header-actions {
|
|
align-self: center;
|
|
}
|
|
|
|
.room-topbar-immersive .back-home-link {
|
|
background: linear-gradient(135deg, #2c8cff 0%, #0055ff 100%);
|
|
}
|
|
|
|
.room-topbar-immersive .ghost-btn {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 2px solid rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.room-shell {
|
|
width: 100%;
|
|
height: calc(100vh - 68px);
|
|
padding: 0 0.62rem 0.58rem;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.78fr) minmax(520px, 1.1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.story-stage,
|
|
.command-stage {
|
|
min-height: 0;
|
|
border: 2px solid rgba(179, 206, 255, 0.45);
|
|
background: linear-gradient(165deg, rgba(18, 30, 56, 0.72), rgba(12, 44, 68, 0.62));
|
|
backdrop-filter: blur(8px);
|
|
padding: 0.58rem;
|
|
}
|
|
|
|
.story-stage {
|
|
display: grid;
|
|
grid-template-rows: minmax(170px, 26vh) minmax(0, 1fr);
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.scene-hero {
|
|
position: relative;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
border: 2px solid rgba(157, 198, 255, 0.7);
|
|
min-height: 184px;
|
|
}
|
|
|
|
.immersive-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: var(--scene-bg-image);
|
|
background-size: cover;
|
|
background-position: center;
|
|
filter: blur(1px) saturate(1.4);
|
|
transform: scale(1.05);
|
|
z-index: 0;
|
|
}
|
|
|
|
.immersive-hero .scene-overlay {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.scene-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0.8rem;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(11, 18, 34, 0.78) 0%,
|
|
rgba(11, 18, 34, 0.58) 36%,
|
|
rgba(11, 18, 34, 0.22) 60%,
|
|
rgba(20, 27, 40, 0.88) 100%
|
|
);
|
|
color: #fff;
|
|
}
|
|
|
|
.scene-overlay h2 {
|
|
font-size: 1.52rem;
|
|
color: #f7fbff;
|
|
text-shadow: 0 2px 10px rgba(6, 11, 24, 0.58);
|
|
}
|
|
|
|
.scene-overlay p {
|
|
display: inline-block;
|
|
color: #f6fbff;
|
|
margin-bottom: 0.45rem;
|
|
padding: 0.22rem 0.48rem;
|
|
border-radius: 8px;
|
|
background: rgba(8, 15, 30, 0.46);
|
|
border: 1px solid rgba(178, 205, 255, 0.22);
|
|
text-shadow: 0 2px 8px rgba(6, 11, 24, 0.5);
|
|
}
|
|
|
|
.hero-status-track {
|
|
display: grid;
|
|
gap: 0.25rem;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.hero-status-list {
|
|
display: grid;
|
|
gap: 0.38rem;
|
|
margin-top: 0.12rem;
|
|
padding-top: 0.22rem;
|
|
border-top: 1px solid rgba(175, 202, 255, 0.28);
|
|
}
|
|
|
|
.hero-status-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hero-status-bar-bg {
|
|
width: 100%;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.28);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-status-bar {
|
|
height: 100%;
|
|
width: 0;
|
|
border-radius: 999px;
|
|
background: var(--hero-status-color, #ffb500);
|
|
box-shadow: 0 0 18px color-mix(in srgb, var(--hero-status-color, #ffb500) 64%, transparent);
|
|
}
|
|
|
|
.story-major-block {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.story-major-block h3 {
|
|
font-size: 1.22rem;
|
|
font-weight: 900;
|
|
color: #f5f8ff;
|
|
}
|
|
|
|
.story-major {
|
|
height: 100%;
|
|
min-height: 0;
|
|
max-height: none;
|
|
font-size: 1.04rem;
|
|
line-height: 1.56;
|
|
}
|
|
|
|
.command-stage {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.quick-panel h2,
|
|
.chat-panel h3,
|
|
.meta-panel h3 {
|
|
margin-bottom: 0.42rem;
|
|
color: #f5f8ff;
|
|
}
|
|
|
|
.quick-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.48rem;
|
|
margin-bottom: 0.45rem;
|
|
}
|
|
|
|
.choice-chip {
|
|
width: auto !important;
|
|
flex: 0 0 auto;
|
|
padding: 0.52rem 0.78rem;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #ffd65f, #ff8f00);
|
|
color: #1a1f2e;
|
|
border: 2px solid rgba(255, 255, 255, 0.35);
|
|
box-shadow: 0 8px 16px rgba(255, 143, 0, 0.25);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.choice-chip:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.quick-hint {
|
|
color: #dce8ff;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.chat-panel form {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
}
|
|
|
|
.chat-panel input {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.meta-panel {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding-right: 0.1rem;
|
|
}
|
|
|
|
.meta-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.42rem;
|
|
}
|
|
|
|
.meta-block {
|
|
border: 2px solid rgba(171, 200, 255, 0.33);
|
|
border-radius: 12px;
|
|
background: rgba(12, 24, 48, 0.4);
|
|
padding: 0.38rem;
|
|
}
|
|
|
|
.meta-block h3 {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.meta-block-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.35rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.meta-block-head h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.list-collapsible {
|
|
transition: max-height 0.2s ease;
|
|
}
|
|
|
|
.list-collapsible.is-collapsed {
|
|
max-height: 220px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.log {
|
|
border: 2px solid rgba(182, 207, 255, 0.48);
|
|
border-radius: 14px;
|
|
background: rgba(7, 16, 36, 0.43);
|
|
padding: 0.62rem;
|
|
min-height: 180px;
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log.small {
|
|
min-height: 92px;
|
|
max-height: 140px;
|
|
}
|
|
|
|
.msg {
|
|
padding: 0.45rem 0.56rem;
|
|
margin-bottom: 0.44rem;
|
|
border-radius: 10px;
|
|
line-height: 1.45;
|
|
font-size: 0.92rem;
|
|
color: #f4f7ff;
|
|
background: rgba(26, 43, 78, 0.62);
|
|
border: 2px solid rgba(170, 199, 255, 0.38);
|
|
}
|
|
|
|
.msg.system {
|
|
border-color: rgba(128, 191, 255, 0.55);
|
|
background: rgba(47, 101, 165, 0.45);
|
|
}
|
|
|
|
.msg.ai {
|
|
border-color: rgba(121, 236, 180, 0.5);
|
|
background: rgba(24, 118, 92, 0.48);
|
|
}
|
|
|
|
.msg.npc {
|
|
border-color: rgba(255, 224, 143, 0.56);
|
|
background: rgba(130, 90, 16, 0.46);
|
|
}
|
|
|
|
.msg.action {
|
|
border-color: rgba(255, 184, 205, 0.56);
|
|
background: rgba(134, 44, 72, 0.45);
|
|
}
|
|
|
|
.msg.chat {
|
|
border-color: rgba(193, 203, 231, 0.46);
|
|
background: rgba(38, 57, 96, 0.5);
|
|
}
|
|
|
|
.msg.private {
|
|
border-color: rgba(255, 199, 126, 0.58);
|
|
background: rgba(131, 84, 24, 0.47);
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
gap: 0.28rem;
|
|
padding: 0.45rem;
|
|
border: 2px solid rgba(171, 200, 255, 0.4);
|
|
border-radius: 12px;
|
|
background: rgba(15, 29, 58, 0.5);
|
|
color: #f3f7ff;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
body.room-page .meta-panel li {
|
|
color: #f0f6ff;
|
|
background: rgba(14, 31, 58, 0.52);
|
|
border-color: rgba(174, 205, 255, 0.36);
|
|
}
|
|
|
|
.ending-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(17, 26, 42, 0.78);
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.ending-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.invite-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1200;
|
|
background: rgba(7, 14, 30, 0.62);
|
|
backdrop-filter: blur(8px);
|
|
padding: 1rem;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.invite-panel {
|
|
width: min(920px, 100%);
|
|
border-radius: 22px;
|
|
border: 2px solid rgba(165, 196, 255, 0.6);
|
|
background:
|
|
radial-gradient(circle at 12% 0%, rgba(255, 89, 116, 0.17), transparent 35%),
|
|
radial-gradient(circle at 88% 10%, rgba(32, 109, 255, 0.19), transparent 35%),
|
|
linear-gradient(160deg, rgba(23, 38, 71, 0.92), rgba(12, 26, 56, 0.9));
|
|
box-shadow: 0 24px 52px rgba(6, 14, 31, 0.5);
|
|
color: #f3f7ff;
|
|
padding: 1rem;
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.invite-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.invite-header h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.invite-tip {
|
|
color: rgba(230, 240, 255, 0.92);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.invite-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.invite-card {
|
|
border-radius: 16px;
|
|
border: 2px solid rgba(183, 210, 255, 0.46);
|
|
background: rgba(8, 22, 52, 0.56);
|
|
padding: 0.7rem;
|
|
display: grid;
|
|
gap: 0.56rem;
|
|
}
|
|
|
|
.invite-card h3 {
|
|
margin: 0;
|
|
color: #f8fbff;
|
|
}
|
|
|
|
.invite-link {
|
|
margin: 0;
|
|
font-size: 0.84rem;
|
|
line-height: 1.45;
|
|
color: #d5e5ff;
|
|
word-break: break-all;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(156, 188, 247, 0.45);
|
|
background: rgba(10, 24, 52, 0.52);
|
|
padding: 0.48rem 0.55rem;
|
|
}
|
|
|
|
.invite-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.42rem;
|
|
}
|
|
|
|
.invite-actions button,
|
|
.invite-actions .link-btn {
|
|
width: auto;
|
|
flex: 1 1 140px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.invite-qr {
|
|
width: min(220px, 100%);
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 14px;
|
|
object-fit: cover;
|
|
border: 2px solid rgba(177, 207, 255, 0.56);
|
|
background: #fff;
|
|
}
|
|
|
|
.ending-card {
|
|
width: min(640px, 100%);
|
|
background: #fff;
|
|
border: 3px solid #ff4f63;
|
|
border-radius: 20px;
|
|
padding: 1.2rem;
|
|
box-shadow: 0 18px 40px rgba(6, 14, 29, 0.35);
|
|
text-align: center;
|
|
}
|
|
|
|
.ending-card h2 {
|
|
color: var(--n-red);
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.ending-card p {
|
|
color: #334055;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.player-host::after {
|
|
content: " 房主";
|
|
color: var(--n-red);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.player-row {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.player-profile {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.42rem;
|
|
}
|
|
|
|
.player-profile img {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(181, 205, 255, 0.52);
|
|
}
|
|
|
|
.player-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.player-ops {
|
|
display: flex;
|
|
gap: 0.34rem;
|
|
}
|
|
|
|
.ghost-btn.slim {
|
|
width: auto;
|
|
padding: 0.18rem 0.5rem;
|
|
font-size: 0.78rem;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.player-offline {
|
|
opacity: 0.66;
|
|
}
|
|
|
|
.badge {
|
|
margin-left: 0.36rem;
|
|
font-size: 0.75rem;
|
|
padding: 0.05rem 0.34rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.badge.ready {
|
|
background: #d5ffe9;
|
|
color: #11663f;
|
|
}
|
|
|
|
.badge.danger {
|
|
background: #ffe4e7;
|
|
color: #9f1f2f;
|
|
}
|
|
|
|
/* ===== Theme Overrides (Strong Visual Separation) ===== */
|
|
|
|
/* Minimal: flat, restrained, almost monochrome */
|
|
body[data-theme="minimal"] {
|
|
background: #f5f6f8 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .card,
|
|
body[data-theme="minimal"] .panel,
|
|
body[data-theme="minimal"] .meta-block,
|
|
body[data-theme="minimal"] .auth-card,
|
|
body[data-theme="minimal"] .invite-panel {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d9dde4 !important;
|
|
box-shadow: none !important;
|
|
backdrop-filter: none !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .status-banner {
|
|
background: #ffffff !important;
|
|
color: #111827 !important;
|
|
border: 1px solid #cfd6df !important;
|
|
box-shadow: none !important;
|
|
backdrop-filter: none !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .scene-hero,
|
|
body[data-theme="minimal"] .log,
|
|
body[data-theme="minimal"] .status-grid,
|
|
body[data-theme="minimal"] .invite-card,
|
|
body[data-theme="minimal"] .selected-card-detail,
|
|
body[data-theme="minimal"] .card-guide,
|
|
body[data-theme="minimal"] .assist-panel {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d9dde4 !important;
|
|
box-shadow: none !important;
|
|
color: #1c212b !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .msg,
|
|
body[data-theme="minimal"] ul li,
|
|
body[data-theme="minimal"] .compact-list li {
|
|
background: #fafbfc !important;
|
|
border: 1px solid #e1e4ea !important;
|
|
color: #1f2633 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] button,
|
|
body[data-theme="minimal"] .link-btn,
|
|
body[data-theme="minimal"] .choice-chip {
|
|
background: #1f2937 !important;
|
|
border: 1px solid #1f2937 !important;
|
|
box-shadow: none !important;
|
|
color: #ffffff !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .ghost-btn {
|
|
background: #ffffff !important;
|
|
color: #1f2937 !important;
|
|
border: 1px solid #cfd6e2 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .room-topbar-immersive .room-title h1,
|
|
body[data-theme="minimal"] .room-topbar-immersive .room-title p,
|
|
body[data-theme="minimal"] .quick-panel h2,
|
|
body[data-theme="minimal"] .chat-panel h3,
|
|
body[data-theme="minimal"] .meta-panel h3,
|
|
body[data-theme="minimal"] .story-major-block h3 {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"] .scene-overlay {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(248, 250, 252, 0.96) 58%) !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"].room-page {
|
|
background: #f3f4f6 !important;
|
|
}
|
|
|
|
body[data-theme="minimal"].room-page::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Dopamine: bold saturated blocks and playful contrast */
|
|
body[data-theme="dopamine"] {
|
|
background:
|
|
linear-gradient(135deg, #ff006e 0%, #ffbe0b 28%, #00bbf9 62%, #8338ec 100%) !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .card,
|
|
body[data-theme="dopamine"] .panel,
|
|
body[data-theme="dopamine"] .meta-block,
|
|
body[data-theme="dopamine"] .auth-card,
|
|
body[data-theme="dopamine"] .invite-panel {
|
|
background: rgba(255, 255, 255, 0.92) !important;
|
|
border: 3px solid #111827 !important;
|
|
box-shadow: 10px 10px 0 rgba(17, 24, 39, 0.25) !important;
|
|
border-radius: 20px !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .quick-panel h2,
|
|
body[data-theme="dopamine"] .chat-panel h3,
|
|
body[data-theme="dopamine"] .meta-panel h3,
|
|
body[data-theme="dopamine"] .story-major-block h3,
|
|
body[data-theme="dopamine"] .helper-text,
|
|
body[data-theme="dopamine"] .header-note {
|
|
color: #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .quick-hint,
|
|
body[data-theme="dopamine"] .room-title p {
|
|
color: #2d1a66 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page .quick-panel h2,
|
|
body[data-theme="dopamine"].room-page .chat-panel h3,
|
|
body[data-theme="dopamine"].room-page .meta-panel h3,
|
|
body[data-theme="dopamine"].room-page .story-major-block h3,
|
|
body[data-theme="dopamine"].room-page .quick-hint {
|
|
color: #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page .chat-panel label,
|
|
body[data-theme="dopamine"].room-page .quick-panel label {
|
|
color: #26164f !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page #choices-title,
|
|
body[data-theme="dopamine"].room-page #clues-title,
|
|
body[data-theme="dopamine"].room-page #inventory-title {
|
|
color: #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page .quick-panel h2,
|
|
body[data-theme="dopamine"].room-page .chat-panel h3,
|
|
body[data-theme="dopamine"].room-page .meta-panel h3,
|
|
body[data-theme="dopamine"].room-page .meta-block h3,
|
|
body[data-theme="dopamine"].room-page #choices-title {
|
|
display: inline-block;
|
|
padding: 0.08rem 0.46rem;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
border: 1px solid rgba(31, 17, 71, 0.28);
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page .meta-block-head h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .status-grid {
|
|
background: #ffffff !important;
|
|
border-color: #1f1147 !important;
|
|
color: #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .room-topbar-immersive .room-title h1,
|
|
body[data-theme="dopamine"] .room-topbar-immersive .room-title p {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] button {
|
|
background: linear-gradient(135deg, #ff0054 0%, #ff7b00 55%, #ffd60a 100%) !important;
|
|
border: 2px solid #1f1147 !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 8px 0 #1f1147 !important;
|
|
text-transform: none;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .secondary-btn,
|
|
body[data-theme="dopamine"] .link-btn {
|
|
background: linear-gradient(135deg, #00bbf9 0%, #3a86ff 45%, #8338ec 100%) !important;
|
|
border: 2px solid #1f1147 !important;
|
|
box-shadow: 0 8px 0 #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .ghost-btn,
|
|
body[data-theme="dopamine"] .choice-chip {
|
|
background: #ffffff !important;
|
|
color: #1f1147 !important;
|
|
border: 2px solid #1f1147 !important;
|
|
box-shadow: 0 6px 0 #1f1147 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .msg.system {
|
|
background: #00bbf9 !important;
|
|
border-color: #1f1147 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .msg.ai {
|
|
background: #06d6a0 !important;
|
|
border-color: #1f1147 !important;
|
|
color: #102a1f !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .msg.npc {
|
|
background: #ffbe0b !important;
|
|
border-color: #1f1147 !important;
|
|
color: #3c2d00 !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .msg.chat {
|
|
background: #ffd6ff !important;
|
|
border-color: #1f1147 !important;
|
|
color: #3b184f !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"] .scene-overlay {
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(31, 17, 71, 0.9) 58%) !important;
|
|
}
|
|
|
|
body[data-theme="dopamine"].room-page .status-grid,
|
|
body[data-theme="dopamine"].room-page .log,
|
|
body[data-theme="dopamine"].room-page .meta-block,
|
|
body[data-theme="dopamine"].room-page .msg,
|
|
body[data-theme="dopamine"].room-page .choice-chip {
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Midnight: deep dark + neon edges */
|
|
body[data-theme="midnight"] {
|
|
background:
|
|
radial-gradient(circle at 15% -8%, rgba(72, 125, 255, 0.38), transparent 32%),
|
|
radial-gradient(circle at 86% 0%, rgba(255, 83, 136, 0.3), transparent 28%),
|
|
linear-gradient(180deg, #070b1a 0%, #0b1228 55%, #070b1a 100%) !important;
|
|
}
|
|
|
|
body[data-theme="midnight"] .card,
|
|
body[data-theme="midnight"] .panel,
|
|
body[data-theme="midnight"] .meta-block,
|
|
body[data-theme="midnight"] .auth-card,
|
|
body[data-theme="midnight"] .invite-panel {
|
|
border: 1px solid rgba(112, 151, 255, 0.55) !important;
|
|
box-shadow: 0 0 0 1px rgba(72, 125, 255, 0.22), 0 16px 48px rgba(4, 8, 24, 0.55) !important;
|
|
}
|
|
|
|
body[data-theme="midnight"] button,
|
|
body[data-theme="midnight"] .link-btn {
|
|
background: linear-gradient(135deg, #3f6fff 0%, #5a3dff 100%) !important;
|
|
border: 1px solid rgba(161, 187, 255, 0.6) !important;
|
|
box-shadow: 0 0 16px rgba(87, 131, 255, 0.45) !important;
|
|
}
|
|
|
|
body[data-theme="midnight"] .secondary-btn {
|
|
background: linear-gradient(135deg, #00c2ff 0%, #4d84ff 100%) !important;
|
|
}
|
|
|
|
body[data-theme="midnight"] .choice-chip {
|
|
background: linear-gradient(135deg, #00d1ff 0%, #3f6fff 100%) !important;
|
|
border-color: rgba(176, 206, 255, 0.65) !important;
|
|
}
|
|
|
|
/* Mint: airy, calm, high readability */
|
|
body[data-theme="mint"] {
|
|
background:
|
|
radial-gradient(circle at 12% -10%, rgba(24, 183, 126, 0.22), transparent 34%),
|
|
radial-gradient(circle at 90% 2%, rgba(47, 124, 255, 0.2), transparent 28%),
|
|
linear-gradient(180deg, #edf8f3 0%, #e7f6f0 55%, #edf8f3 100%) !important;
|
|
}
|
|
|
|
body[data-theme="mint"] .card,
|
|
body[data-theme="mint"] .panel,
|
|
body[data-theme="mint"] .meta-block,
|
|
body[data-theme="mint"] .auth-card {
|
|
background: rgba(255, 255, 255, 0.92) !important;
|
|
border: 1px solid #b9dfd2 !important;
|
|
box-shadow: 0 10px 28px rgba(41, 114, 96, 0.12) !important;
|
|
}
|
|
|
|
body[data-theme="mint"] button {
|
|
background: linear-gradient(135deg, #18b77e 0%, #2f7cff 100%) !important;
|
|
}
|
|
|
|
body[data-theme="mint"] .ghost-btn {
|
|
background: #f6fffb !important;
|
|
color: #17695c !important;
|
|
border-color: #9fd5c6 !important;
|
|
}
|
|
|
|
/* Sunset: warm cinematic, soft contrast */
|
|
body[data-theme="sunset"] {
|
|
background:
|
|
radial-gradient(circle at 18% -8%, rgba(255, 111, 97, 0.28), transparent 33%),
|
|
radial-gradient(circle at 88% 0%, rgba(255, 186, 73, 0.26), transparent 28%),
|
|
linear-gradient(180deg, #fff1ea 0%, #ffe8da 58%, #ffe3d1 100%) !important;
|
|
}
|
|
|
|
body[data-theme="sunset"] .card,
|
|
body[data-theme="sunset"] .panel,
|
|
body[data-theme="sunset"] .meta-block,
|
|
body[data-theme="sunset"] .auth-card,
|
|
body[data-theme="sunset"] .invite-panel {
|
|
background: rgba(255, 250, 243, 0.92) !important;
|
|
border: 1px solid #eab8a8 !important;
|
|
box-shadow: 0 12px 30px rgba(137, 73, 62, 0.15) !important;
|
|
}
|
|
|
|
body[data-theme="sunset"] button {
|
|
background: linear-gradient(135deg, #ff5a5f 0%, #ff9445 100%) !important;
|
|
}
|
|
|
|
body[data-theme="sunset"] .secondary-btn,
|
|
body[data-theme="sunset"] .link-btn {
|
|
background: linear-gradient(135deg, #4d7dff 0%, #6d90ff 100%) !important;
|
|
}
|
|
|
|
/* Aurora: cool gradient, bright glass panels */
|
|
body[data-theme="aurora"] {
|
|
background:
|
|
radial-gradient(circle at 14% -10%, rgba(0, 201, 154, 0.26), transparent 34%),
|
|
radial-gradient(circle at 88% 2%, rgba(42, 140, 255, 0.25), transparent 30%),
|
|
linear-gradient(180deg, #eef7ff 0%, #e5f2ff 58%, #edf7ff 100%) !important;
|
|
}
|
|
|
|
body[data-theme="aurora"] .card,
|
|
body[data-theme="aurora"] .panel,
|
|
body[data-theme="aurora"] .meta-block,
|
|
body[data-theme="aurora"] .auth-card,
|
|
body[data-theme="aurora"] .invite-panel {
|
|
background: rgba(250, 253, 255, 0.94) !important;
|
|
border: 1px solid #9dc8ec !important;
|
|
box-shadow: 0 12px 30px rgba(28, 110, 173, 0.14) !important;
|
|
}
|
|
|
|
body[data-theme="aurora"] button {
|
|
background: linear-gradient(135deg, #00c99a 0%, #2a8cff 100%) !important;
|
|
}
|
|
|
|
body[data-theme="aurora"] .secondary-btn,
|
|
body[data-theme="aurora"] .link-btn {
|
|
background: linear-gradient(135deg, #2bb6ff 0%, #2a8cff 100%) !important;
|
|
}
|
|
|
|
/* Graphite: muted industrial dark */
|
|
body[data-theme="graphite"] {
|
|
background:
|
|
radial-gradient(circle at 12% -8%, rgba(116, 166, 255, 0.3), transparent 34%),
|
|
radial-gradient(circle at 90% 0%, rgba(255, 109, 109, 0.24), transparent 30%),
|
|
linear-gradient(180deg, #141820 0%, #1d232d 58%, #12161d 100%) !important;
|
|
}
|
|
|
|
body[data-theme="graphite"] .card,
|
|
body[data-theme="graphite"] .panel,
|
|
body[data-theme="graphite"] .meta-block,
|
|
body[data-theme="graphite"] .auth-card,
|
|
body[data-theme="graphite"] .invite-panel {
|
|
border: 1px solid rgba(129, 149, 181, 0.52) !important;
|
|
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35) !important;
|
|
}
|
|
|
|
body[data-theme="graphite"] button,
|
|
body[data-theme="graphite"] .link-btn {
|
|
background: linear-gradient(135deg, #5a87ff 0%, #3f66db 100%) !important;
|
|
border: 1px solid rgba(163, 187, 236, 0.5) !important;
|
|
}
|
|
|
|
body[data-theme="graphite"] .secondary-btn {
|
|
background: linear-gradient(135deg, #56b3ff 0%, #3f66db 100%) !important;
|
|
}
|
|
|
|
body[data-theme="graphite"] .ghost-btn {
|
|
background: rgba(42, 49, 61, 0.9) !important;
|
|
color: #d6e3ff !important;
|
|
border-color: rgba(117, 139, 176, 0.6) !important;
|
|
}
|
|
|
|
/* ===== Room Theme Contrast Guardrails ===== */
|
|
/* Light-background themes in room view: force high-contrast titles/labels */
|
|
body[data-theme="mint"].room-page .quick-panel h2,
|
|
body[data-theme="mint"].room-page .chat-panel h3,
|
|
body[data-theme="mint"].room-page .meta-panel h3,
|
|
body[data-theme="mint"].room-page .meta-block h3,
|
|
body[data-theme="mint"].room-page .story-major-block h3,
|
|
body[data-theme="aurora"].room-page .quick-panel h2,
|
|
body[data-theme="aurora"].room-page .chat-panel h3,
|
|
body[data-theme="aurora"].room-page .meta-panel h3,
|
|
body[data-theme="aurora"].room-page .meta-block h3,
|
|
body[data-theme="aurora"].room-page .story-major-block h3,
|
|
body[data-theme="sunset"].room-page .quick-panel h2,
|
|
body[data-theme="sunset"].room-page .chat-panel h3,
|
|
body[data-theme="sunset"].room-page .meta-panel h3,
|
|
body[data-theme="sunset"].room-page .meta-block h3,
|
|
body[data-theme="sunset"].room-page .story-major-block h3 {
|
|
color: #1f2937 !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
body[data-theme="mint"].room-page .quick-panel label,
|
|
body[data-theme="mint"].room-page .chat-panel label,
|
|
body[data-theme="aurora"].room-page .quick-panel label,
|
|
body[data-theme="aurora"].room-page .chat-panel label,
|
|
body[data-theme="sunset"].room-page .quick-panel label,
|
|
body[data-theme="sunset"].room-page .chat-panel label {
|
|
color: #334155 !important;
|
|
}
|
|
|
|
body[data-theme="mint"].room-page .quick-hint,
|
|
body[data-theme="aurora"].room-page .quick-hint,
|
|
body[data-theme="sunset"].room-page .quick-hint {
|
|
color: #475569 !important;
|
|
}
|
|
|
|
body[data-theme="mint"].room-page #choices-title,
|
|
body[data-theme="mint"].room-page #clues-title,
|
|
body[data-theme="mint"].room-page #inventory-title,
|
|
body[data-theme="aurora"].room-page #choices-title,
|
|
body[data-theme="aurora"].room-page #clues-title,
|
|
body[data-theme="aurora"].room-page #inventory-title,
|
|
body[data-theme="sunset"].room-page #choices-title,
|
|
body[data-theme="sunset"].room-page #clues-title,
|
|
body[data-theme="sunset"].room-page #inventory-title {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
body[data-theme="mint"].room-page .status-grid,
|
|
body[data-theme="aurora"].room-page .status-grid,
|
|
body[data-theme="sunset"].room-page .status-grid {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
body[data-theme="mint"].room-page .meta-panel li,
|
|
body[data-theme="aurora"].room-page .meta-panel li,
|
|
body[data-theme="sunset"].room-page .meta-panel li {
|
|
color: #1f2937 !important;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.lobby-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.plaza-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card-editor-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.editor-guide-card {
|
|
position: static;
|
|
max-height: none;
|
|
}
|
|
|
|
.room-shell {
|
|
grid-template-columns: 1fr;
|
|
height: calc(100vh - 96px);
|
|
}
|
|
|
|
.story-stage {
|
|
grid-template-rows: 220px minmax(0, 1fr);
|
|
}
|
|
|
|
.command-stage {
|
|
grid-template-rows: auto auto auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.meta-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card-select-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.invite-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
body.room-page {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.lobby-topbar,
|
|
.room-topbar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.top-actions,
|
|
.header-actions {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lobby-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card-select-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.room-shell {
|
|
padding: 0 0.58rem 0.62rem;
|
|
gap: 0.65rem;
|
|
height: auto;
|
|
min-height: calc(100vh - 96px);
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.room-topbar-immersive {
|
|
padding: 0.62rem;
|
|
}
|
|
|
|
.story-stage {
|
|
grid-template-rows: auto minmax(230px, auto);
|
|
}
|
|
|
|
.scene-hero {
|
|
min-height: 240px;
|
|
max-height: 56vh;
|
|
}
|
|
|
|
.scene-overlay {
|
|
max-height: calc(56vh - 12px);
|
|
overflow-y: auto;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.scene-overlay h2 {
|
|
font-size: 1.16rem;
|
|
}
|
|
|
|
.scene-overlay p {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.36rem;
|
|
}
|
|
|
|
.hero-status-list {
|
|
max-height: 26vh;
|
|
overflow-y: auto;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.command-stage {
|
|
grid-template-rows: auto auto auto;
|
|
overflow: visible;
|
|
gap: 0.58rem;
|
|
}
|
|
|
|
.quick-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.42rem;
|
|
}
|
|
|
|
.choice-chip {
|
|
width: 100% !important;
|
|
text-align: center;
|
|
padding: 0.48rem 0.52rem;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.log {
|
|
max-height: none;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.log.small {
|
|
max-height: none;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.meta-panel {
|
|
overflow: visible;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.meta-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.44rem;
|
|
}
|
|
|
|
.meta-block {
|
|
padding: 0.42rem;
|
|
}
|
|
|
|
.header-actions button,
|
|
.header-actions .link-btn {
|
|
min-height: 38px;
|
|
padding: 0.45rem 0.66rem;
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.header-actions > * {
|
|
flex: 1 1 calc(50% - 0.35rem);
|
|
justify-content: center;
|
|
}
|
|
|
|
.ending-card {
|
|
padding: 0.9rem 0.75rem;
|
|
}
|
|
|
|
.ending-card h2 {
|
|
font-size: 1.45rem;
|
|
}
|
|
|
|
.invite-modal {
|
|
padding: 0.65rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.invite-panel {
|
|
border-radius: 16px;
|
|
padding: 0.72rem;
|
|
gap: 0.56rem;
|
|
max-height: min(92vh, 760px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.invite-actions button,
|
|
.invite-actions .link-btn {
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.invite-qr {
|
|
width: min(190px, 100%);
|
|
}
|
|
}
|