| |
| |
| |
| |
| |
|
|
|
|
| * { box-sizing: border-box; }
|
| [hidden] { display: none !important; }
|
|
|
| body {
|
| margin: 0;
|
| background: radial-gradient(1200px 600px at 50% -10%, #161228 0%, #0a0910 60%);
|
| color: var(--ink, #ddd9e8);
|
| font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
| }
|
| #app { max-width: 1500px; margin: 0 auto; padding: .7rem 1.1rem 2.2rem; }
|
|
|
|
|
| .tw-title {
|
| max-width: 560px; margin: 7vh auto; text-align: center; padding: 2.6rem 2.2rem;
|
| border: 1px solid #3e3553; background: #12101aee; border-radius: 16px;
|
| box-shadow: 0 0 50px #00000080, inset 0 0 30px #08060e;
|
| }
|
| .tw-title p { color: #c7bee0; line-height: 1.5; }
|
| .tw-hint { font-size: .74rem; color: #8a83a3; margin-top: 1.2rem; }
|
| .tw-hint code { color: #b8a6db; }
|
|
|
|
|
| .tw-primary {
|
| padding: .7rem 1.8rem; font-size: 1rem; font-weight: 700; color: #1a130a;
|
| background: linear-gradient(180deg, #e0c084, #c79a4f); border: 0; border-radius: 10px;
|
| cursor: pointer; letter-spacing: .03em; box-shadow: 0 6px 18px #00000066;
|
| }
|
| .tw-primary:hover:not(:disabled) { filter: brightness(1.08); }
|
| .tw-primary:disabled { opacity: .45; cursor: not-allowed; }
|
| .tw-secondary {
|
| padding: .6rem 1.3rem; font-weight: 600; color: #d7cdf0; background: #1a1626;
|
| border: 1px solid #3e3553; border-radius: 10px; cursor: pointer;
|
| }
|
| .tw-secondary:hover { border-color: var(--violet, #8669c4); }
|
|
|
|
|
| .tw-panel { max-width: 1180px; margin: 2vh auto; padding: 1.4rem 1.6rem;
|
| border: 1px solid #3e3553; background: #12101aee; border-radius: 14px; }
|
| .tw-setup-actions { display: flex; gap: .8rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
|
|
|
| .tw-alloc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.2rem; }
|
| .tw-alloc-grid .stat-card { text-align: center; padding: .8rem .5rem;
|
| background: var(--card-bg, #12101a); border: 1px solid var(--card-border, #30283f); border-radius: 10px; }
|
| .tw-alloc-grid .stat-card strong { display: block; margin-bottom: .5rem; color: #e2d9f3; }
|
| .stat-stepper { display: flex; align-items: center; justify-content: center; gap: .6rem; }
|
| .stat-stepper button { width: 32px; height: 32px; font-size: 1.2rem; font-weight: 700;
|
| background: #1a1626; color: #e2d9f3; border: 1px solid #3e3553; border-radius: 8px; cursor: pointer; }
|
| .stat-stepper button:hover:not(:disabled) { border-color: var(--violet, #8669c4); }
|
| .stat-stepper button:disabled { opacity: .35; cursor: not-allowed; }
|
| .stat-value { font-size: clamp(.95rem, 2.5vw, 1.3rem); font-weight: 700; min-width: 2ch; }
|
| .alloc-remaining { grid-column: 1 / -1; text-align: center; color: #b8a6db; margin-top: .4rem; }
|
| .alloc-remaining b { color: var(--gold, #e0c084); }
|
|
|
| .tw-diff-row { display: flex; gap: .8rem; justify-content: center; margin: 1.2rem 0; flex-wrap: wrap; }
|
| .diff-btn { padding: .6rem 1.2rem; background: var(--card-bg, #171522); color: #cfc6e6;
|
| border: 1px solid var(--card-border, #30283f); border-radius: 10px; cursor: pointer; }
|
| .diff-btn.selected { border-color: #c79a4f; color: #f0e3c4; background: #1f1830; }
|
| .diff-btn:disabled { opacity: .6; cursor: default; }
|
|
|
| .tw-starter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin-top: 1rem; }
|
| .starter-card { white-space: pre-line; text-align: left; padding: .55rem .6rem; min-height: 84px;
|
| background: var(--card-bg, #12101a); color: #eef3fb; border: 1px solid var(--card-border, #30283f);
|
| border-radius: 8px; cursor: pointer; font-size: .8rem; line-height: 1.18; }
|
| .starter-card:hover { border-color: var(--violet, #8669c4); background: #191522; }
|
| @media (max-width: 900px) { .tw-starter-grid { grid-template-columns: repeat(2, 1fr); } .tw-alloc-grid { grid-template-columns: repeat(2, 1fr); } }
|
|
|
|
|
| .tw-shell { display: flex; align-items: flex-start; gap: 1rem; }
|
| .tw-sidebar { flex: 0 0 300px; max-width: 320px; min-width: 270px;
|
| position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow-y: auto;
|
| background: var(--card-bg, #12101a); border: 1px solid #3e3553; border-radius: 12px; padding: .5rem .7rem; }
|
| .tw-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
|
| .tw-sidebar-head h2 { margin: 0; font-size: clamp(.85rem, 2.5vw, 1.1rem); }
|
| .tw-main { flex: 1; min-width: 0; }
|
| .tw-toggle { padding: .25rem .6rem; font-size: .78rem; color: #cfc6e6; background: #1a1626;
|
| border: 1px solid #3e3553; border-radius: 7px; cursor: pointer; }
|
| .tw-toggle:hover { border-color: var(--violet, #8669c4); }
|
| #show-sidebar { margin-bottom: .5rem; }
|
|
|
|
|
| .tw-stage { position: relative;
|
| width: min(100%, 1250px, calc((100dvh - 300px) * 16 / 9)); margin: 0 auto;
|
| padding-bottom: clamp(3.8rem, 7vh, 4.8rem); }
|
| #stage-narration { position: absolute; z-index: 16; top: 8%; left: 18%; width: 50%; pointer-events: none; }
|
|
|
| .tw-log { margin: .5rem 0; min-height: 2rem; padding: .5rem .8rem;
|
| background: #111019; border-left: 3px solid var(--violet, #8669c4); color: #f1e4b9; font-size: clamp(.72rem, 1.8vw, .85rem); }
|
| .tw-fulllog { margin-top: .4rem; }
|
| .tw-fulllog summary { cursor: pointer; color: #b8a6db; font-size: clamp(.72rem, 1.8vw, .85rem); }
|
|
|
|
|
| .tw-deck { position: absolute; bottom: 0; z-index: 8; padding: .55rem;
|
| border: 1px solid var(--card-border, #30283f); background: var(--deck-bg, #12101ae8);
|
| box-shadow: 0 10px 28px #0009, inset 0 1px #8490a31a; }
|
| .tw-deck-basic { left: 2%; width: 34%; height: 72px;
|
| display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
|
| .tw-deck-right { right: 2%; width: min(59%, 720px); }
|
| .tw-deck-right.tw-deck-open { min-height: clamp(184px, 25vh, 224px); }
|
| .tw-deck-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; height: 72px; }
|
| .tw-deck-title { color: #d9c7ff; font-size: clamp(.6rem, 1.2vw, .78rem); font-weight: 800; letter-spacing: .1em;
|
| text-transform: uppercase; margin-bottom: .35rem; }
|
| .tw-deck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
|
| .tw-deck .tw-back { margin-top: .4rem; width: 100%; text-align: center; min-height: 2rem; }
|
| .tw-empty { color: var(--card-muted, #aaa2bd); font-size: .85rem; padding: .4rem; }
|
| .tw-thinking { right: 2%; width: min(59%, 720px); padding: .7rem; color: #d9c7ff; text-align: center; }
|
| .tw-thinking p { margin: .3rem 0 0; font-size: .8rem; color: var(--card-muted, #aaa2bd); }
|
| .tw-narrating .tw-card { opacity: 0.42; cursor: not-allowed !important; pointer-events: none; }
|
|
|
|
|
| .tw-card { min-height: 0; min-width: 0; padding: .42rem .55rem;
|
| white-space: pre-line; text-align: left; font-weight: 600; line-height: 1.14;
|
| font-size: clamp(.72rem, .82vw, .88rem); color: #eef3fb;
|
| background: var(--card-bg, #12101a); border: 1px solid var(--card-border, #30283f);
|
| border-radius: 0; cursor: pointer; }
|
| .tw-deck-basic .tw-card { height: 100%; }
|
| .tw-card:hover:not(:disabled) { background: #191522; border-color: var(--violet, #8669c4); }
|
| .tw-card:disabled { color: #746d80; background: #0f0d15cc; border-color: #292333; cursor: not-allowed; }
|
|
|
|
|
| .tw-overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
|
| align-items: center; justify-content: center; gap: .7rem; padding: 1rem;
|
| background: #07060bd9; }
|
| .tw-overlay-card { max-width: 92%; max-height: 90%; overflow: auto; padding: 1rem 1.2rem;
|
| background: var(--card-bg, #12101a); border: 1px solid #4a3f63; border-radius: 12px;
|
| box-shadow: 0 12px 40px #000a; text-align: center; }
|
| .tw-overlay .reward-actions, .tw-overlay .level-skill-actions, .tw-overlay .replacement-actions {
|
| display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin-top: .6rem; }
|
| .tw-overlay .reward-footer, .tw-overlay .heal-actions, .tw-overlay .preview-actions {
|
| display: flex; gap: .6rem; align-items: center; justify-content: center; margin-top: .7rem; flex-wrap: wrap; }
|
| .tw-overlay .reward-count { color: #b8a6db; font-size: .85rem; }
|
| .tw-card.primary { background: linear-gradient(180deg, #e0c084, #c79a4f); color: #1a130a; border: 0; font-weight: 700; }
|
| .tw-card.primary:hover:not(:disabled) { filter: brightness(1.08); }
|
| .reward-icon { width: 26px; height: 26px; vertical-align: middle; margin-right: .4rem; image-rendering: pixelated; }
|
|
|
|
|
| .tw-tutorial { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
|
| background: #06050aee; padding: 1rem; }
|
| .tw-tutorial-card { width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column;
|
| background: #12101a; border: 1px solid #4a3f63; border-radius: 14px;
|
| box-shadow: 0 16px 50px #000b; overflow: hidden; }
|
| #tutorial-content { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem; }
|
| .tw-tutorial-nav { flex: 0 0 auto; display: flex; gap: .6rem; align-items: center; justify-content: center;
|
| padding: .7rem 1rem; border-top: 1px solid #2e2840; background: #0e0c17; }
|
| .tw-tutorial-nav .tw-card { min-width: 90px; text-align: center; padding: .45rem .8rem; }
|
| .tw-tutorial-nav .tw-card.primary { background: linear-gradient(180deg,#e0c084,#c79a4f); color:#1a130a; border:0; font-weight:700; }
|
| .tw-tutorial-nav .tw-card:disabled { opacity: .35; cursor: not-allowed; }
|
|
|
|
|
| .tw-heal-preview { margin: .5rem 0 1rem; font-size: 1rem; color: #d9c7ff; }
|
| .tw-heal-preview b { color: #e0c084; }
|
| .tw-heal-gain { color: #9fd7ba; font-size: .9rem; }
|
|
|
|
|
| .tw-title .tw-secondary { display: block; margin: .6rem auto 0; }
|
|
|
|
|
| .tw-loading { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
|
| background: #06050aee; }
|
| .tw-loading-card { display: flex; flex-direction: column; align-items: center; gap: 1rem;
|
| padding: 2rem 2.5rem; border: 1px solid #3e3553; background: #12101a; border-radius: 14px; }
|
| .tw-loading-card span { color: #d9c7ff; letter-spacing: .04em; }
|
| .tw-rune { width: 42px; height: 42px; border: 3px solid #3e3553; border-top-color: #c79a4f;
|
| border-radius: 50%; animation: tw-spin .9s linear infinite; }
|
| .tw-rune-sm { width: 20px; height: 20px; border-width: 2px; margin: 0 auto .4rem; }
|
| @keyframes tw-spin { to { transform: rotate(360deg); } }
|
|
|
|
|
| .tw-mute-btn {
|
| position: fixed; top: .6rem; left: .6rem; z-index: 500;
|
| padding: .25rem .5rem; font-size: .85rem; line-height: 1;
|
| color: #d9c7ff; background: #1a162699; border: 1px solid #3e3553;
|
| border-radius: 7px; cursor: pointer;
|
| }
|
| .tw-mute-btn:hover { border-color: var(--violet, #8669c4); }
|
| .tw-mute-off { opacity: .45; text-decoration: line-through; }
|
|
|
| @media (max-width: 900px) {
|
| .tw-shell { flex-direction: column; }
|
| .tw-sidebar { flex: none; width: 100%; max-width: none; min-width: 0; position: static; max-height: none; }
|
| }
|
|
|
| @media (max-width: 600px) {
|
| #app { padding: .4rem .5rem 1.2rem; }
|
| .tw-title { margin: 2vh auto; padding: 1.4rem 1rem; }
|
| .tw-panel { padding: .8rem .9rem; }
|
| .tw-stage { padding-bottom: clamp(2.4rem, 7vh, 3.8rem); }
|
| .tw-deck-right.tw-deck-open { min-height: clamp(110px, 25vh, 184px); }
|
| .tw-starter-grid { grid-template-columns: repeat(2, 1fr); }
|
| .tw-alloc-grid { grid-template-columns: repeat(2, 1fr); }
|
| }
|
|
|
