/* 首页视觉独立于对局：石墨蓝、雾银、浅香槟，技能卡组作为唯一主视觉。 */
body.home-visible { --home-bg:#0d1420; --home-line:#ffffff12; background:radial-gradient(ellipse at 32% 50%,#24345458,transparent 58%),radial-gradient(ellipse at 80% 15%,#31334424,transparent 50%),var(--home-bg); }
body.home-visible::before { content:''; position:fixed; inset:0; background-image:radial-gradient(#a2b6d917 .65px,transparent .65px); background-size:6px 6px; mask-image:linear-gradient(120deg,#0006,transparent 65%); pointer-events:none; }
.modern-brand { display:flex; gap:13px; align-items:center; font:650 23px/1.2 'Microsoft YaHei','PingFang SC',sans-serif; letter-spacing:2px; color:#eaf0fa; }
.brand-mark { display:flex; align-items:center; justify-content:center; position:relative; width:35px; height:35px; border:1px solid #cfdae44d; border-radius:9px; font:500 21px/1 Georgia,serif; color:#e8d5b5; letter-spacing:-6px; padding-right:6px; }.brand-mark>span { font-size:16px; transform:translateY(4px); }
.modern-brand .brand-sub { margin-left:0; font:10px/1.2 'Segoe UI',sans-serif; letter-spacing:2px; color:#7c8ca3; }
body.home-visible header { max-width:1320px; min-height:94px; border-color:var(--home-line); padding:24px 40px; position:relative; z-index:2; }
body.home-visible .roominfo { color:#71829b; }
body.home-visible .header-btns button { background:transparent; border-color:#ffffff0e; color:#a5b4c9; border-radius:7px; }
body.home-visible .header-link { color:#a5b4c9; }
body.home-visible main { max-width:1320px; padding:35px 40px 28px; position:relative; }
.home-layout.panel { grid-template-columns:minmax(0,1.18fr) minmax(370px,.9fr); gap:70px; min-height:680px; align-items:center; padding:0; }
.home-editorial { padding:12px 0 0; }
.home-kicker { display:flex; align-items:center; gap:10px; color:#8d9eb8; font:10px/1.4 'Segoe UI',sans-serif; letter-spacing:2.5px; margin-bottom:25px; }.home-kicker span { width:5px; height:5px; background:#dbc9ab; border-radius:50%; }.home-kicker i { font-style:normal; color:#48556b; }
.home-editorial h1 { font:650 clamp(44px,4.5vw,62px)/1.35 'Microsoft YaHei','PingFang SC',sans-serif; letter-spacing:-2px; margin-bottom:22px; color:#eef2fa; }
.home-editorial h1 em { color:#a3b8dd; background:linear-gradient(110deg,#edf1f8,#8fa8d0); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-style:normal; }
.home-editorial .hero-copy { font-size:13px; line-height:1.95; color:#8f9fb8; max-width:430px; }
.home-showcase { position:relative; height:310px; margin:12px -15px 14px; perspective:1000px; isolation:isolate; }
.showcase-halo { position:absolute; width:360px; height:190px; left:50%; top:50%; transform:translate(-50%,-25%); background:radial-gradient(ellipse,#d8b57426,#628adb19 45%,transparent 70%); filter:blur(20px); z-index:-1; }
.showcase-orbit { position:absolute; width:400px; height:130px; left:50%; top:68%; transform:translate(-50%,-50%) rotate(-9deg); border:1px solid #a5bcdf17; border-radius:50%; z-index:-1; }.showcase-orbit::after { content:''; position:absolute; inset:-20px 25px; border:1px solid #a5bcdf0b; border-radius:50%; }
.showcase-cards { height:100%; position:relative; transform:rotateX(var(--pitch,0deg)) rotateY(var(--yaw,0deg)); transform-style:preserve-3d; transition:transform .35s ease; }
.showcase-card { position:absolute; width:166px; height:226px; left:50%; top:36px; transform-origin:50% 95%; }
.showcase-card--left { margin-left:-184px; top:44px; transform:rotate(-17deg); z-index:1; }.showcase-card--center { margin-left:-83px; top:20px; z-index:3; }.showcase-card--right { margin-left:18px; top:44px; transform:rotate(17deg); z-index:2; }
.showcase-float { position:relative; width:100%; height:100%; padding:9px; border-radius:13px; border:1px solid #a6b5cc45; background:linear-gradient(150deg,#263245,#121c2d 65%); box-shadow:0 20px 30px #0005,0 2px 2px #ffffff08 inset; overflow:hidden; }
.showcase-card--center .showcase-float { border-color:#d4ba8370; background:linear-gradient(150deg,#3e3c37,#1b2532 55%); box-shadow:0 28px 40px #0007,0 0 30px #dab97a0b; }
.showcase-top { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 7px; color:#98aac7; font:9px/1.2 'Segoe UI','Microsoft YaHei',sans-serif; letter-spacing:1.5px; }.showcase-top b { display:grid; place-items:center; border:1px solid #c5cbd33b; border-radius:50%; width:20px; height:20px; font:12px/1 Consolas,monospace; color:#e6d8bf; }
.showcase-art { height:143px; border-radius:6px; background:#06151c; overflow:hidden; }.showcase-art svg { width:100%; height:100%; display:block; }
.showcase-bottom { display:flex; align-items:center; justify-content:space-between; padding:9px 4px 0; }.showcase-bottom strong { font-size:13px; font-weight:600; letter-spacing:2px; color:#e7eaf0; }.showcase-bottom span { color:#8896ad; font-size:9px; letter-spacing:1px; }
.showcase-float::after { content:''; position:absolute; inset:-50% -100%; pointer-events:none; background:linear-gradient(115deg,transparent 42%,#ffffff0e 48%,#ffffff1c 49%,#ffffff06 52%,transparent 57%); transform:translateX(-45%); }
.showcase-caption { position:absolute; left:0; right:0; bottom:1px; text-align:center; color:#61758e; font-size:10px; letter-spacing:6px; }
.home-footnote { display:flex; align-items:center; gap:15px; padding-top:18px; border-top:1px solid #ffffff0c; color:#76879f; font-size:11px; }.home-footnote i { width:2px; height:2px; border-radius:50%; background:#566880; }.home-footnote a { margin-left:auto; color:#a8b9d1; text-decoration:none; font-size:11px; }
.home-launcher { position:relative; border:1px solid #8197b527; border-radius:20px; background:linear-gradient(145deg,#1b253580,#141d2edb); padding:30px; box-shadow:0 25px 70px #0002,inset 0 1px #ffffff04; backdrop-filter:blur(18px); }
.home-launcher::before { content:''; position:absolute; top:-1px; left:20%; right:20%; height:1px; background:linear-gradient(90deg,transparent,#abbcd478,transparent); }
.launcher-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; }.launcher-tag { color:#8f9eb7; font-size:10px; letter-spacing:2px; }.launcher-symbol { color:#7891b3; font-size:20px; line-height:1; }
.home-launcher h2 { color:#e9eef8; font-size:23px; font-weight:600; letter-spacing:.2px; }.home-launcher>.sub { font-size:12px; color:#8394ae; margin-bottom:24px; }
.entry-tabs { display:flex; border-bottom:1px solid #ffffff12; gap:22px; margin-bottom:24px; }
.entry-tabs button { position:relative; background:none; border:0; border-radius:0; padding:0 0 13px; min-height:35px; font-size:12px; color:#7e90aa; white-space:nowrap; transition:color .2s; }
.entry-tabs button:hover:not(:disabled) { transform:none; background:none; color:#e0e8f5; }
.entry-tabs button.on { color:#e6d5b8; }.entry-tabs button.on::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#cfb995; }
.home-launcher .field-label { font-size:11px; color:#a1afc3; margin:18px 0 8px; }.home-launcher input,.home-launcher select { background:#101927aa; border-color:#8097b22b; color:#d7e1f1; border-radius:9px; font-size:12px; min-height:47px; padding:12px 14px; }
.home-launcher input::placeholder { color:#556a87; }.home-launcher input:focus,.home-launcher select:focus { border-color:#a8b8d1; }.home-launcher select option { background:#172334; }
.home-entry-panel { min-height:193px; padding-top:1px; }.entry-description { color:#677d9b; font-size:11px; margin:14px 0 22px; line-height:1.6; }
.home-launcher .launch-action { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:48px; border:1px solid #dfceb1; border-radius:9px; background:linear-gradient(115deg,#eadac0,#cbb693); box-shadow:0 4px 18px #cfb78a13; color:#1c2431; font-size:13px; font-weight:600; padding:12px 17px; }
.home-launcher .launch-action:hover:not(:disabled) { background:linear-gradient(115deg,#f4e6ce,#dcc7a3); border-color:#f4e6ce; box-shadow:0 6px 25px #cfb78a25; transform:translateY(-1px); }.launch-action span { font-size:17px; }
.entry-room-note { display:flex; align-items:center; gap:15px; min-height:132px; }.entry-room-note>span { display:grid; place-items:center; width:42px; height:42px; flex:none; border:1px solid #ffffff12; border-radius:10px; color:#d6c19f; font-size:20px; }.entry-room-note strong { font-size:13px; font-weight:500; color:#bac8dc; }.entry-room-note p { font-size:11px; color:#6f829e; margin-top:7px; }
.home-launcher .err { margin-top:6px; min-height:19px; font-size:11px; }.offline-entry { display:flex; justify-content:space-between; color:#8fa1bd; font-size:11px; text-decoration:none; padding:11px 0 0; }.offline-entry:hover { color:#dce6f4; }
.home-launcher .quick-rules { margin-top:23px; padding-top:15px; border-color:#ffffff0d; }.home-launcher .quick-rules summary { color:#7c8ea8; font-size:11px; }.home-launcher .quick-rules p { font-size:11px; color:#93a4bf; }.home-launcher .seg { gap:7px; }.home-launcher .seg button { border-color:#8197b527; background:#ffffff02; color:#8699b5; font-size:12px; }.home-launcher .seg button.on { background:#c8b6910c; border-color:#c8b69170; color:#e2d2b4; }.home-launcher .seg button small { color:#657b98; font-size:10px; }.home-launcher .difficulty-note { font-size:11px; color:#7186a3; }.home-launcher #btn-online { font-size:12px; border-color:#ffffff12; color:#8fa1bd; }
body.home-motion .showcase-float { animation:home-float 7s ease-in-out infinite; }body.home-motion .showcase-card--left .showcase-float { animation-delay:-2s; }body.home-motion .showcase-card--right .showcase-float { animation-delay:-4s; }
body.home-motion .showcase-float::after { animation:home-sheen 10s ease-in-out infinite; }body.home-motion .showcase-card--right .showcase-float::after { animation-delay:3s; }
body.home-motion .showcase-halo { animation:home-breathe 8s ease-in-out infinite; }
body.home-motion .home-editorial,body.home-motion .home-launcher { animation:home-enter .65s both; }body.home-motion .home-launcher { animation-delay:.12s; }
body.home-motion .home-entry-panel:not(.hidden) { animation:home-tab .2s ease-out; }
@keyframes home-float { 0%,100% { transform:translateY(0); }50% { transform:translateY(-8px); } }
@keyframes home-sheen { 0%,55%,100% { transform:translateX(-45%); }75%,90% { transform:translateX(45%); } }
@keyframes home-breathe { 0%,100% { opacity:.6; }50% { opacity:1; } }
@keyframes home-enter { from { opacity:0; transform:translateY(12px); }to { opacity:1; transform:none; } }
@keyframes home-tab { from { opacity:0; transform:translateY(4px); }to { opacity:1; transform:none; } }
html[data-motion=reduced] .showcase-cards { transform:none; }body:not(.home-motion) .showcase-cards { transform:none; }
@media(min-width:1600px) { body.home-visible main { padding-top:55px; }.home-layout.panel { min-height:720px; } }
@media(max-width:1100px) { .home-layout.panel { gap:35px; grid-template-columns:minmax(0,1fr) minmax(350px,.9fr); }.home-showcase { margin-left:-25px; margin-right:-25px; }.showcase-card { scale:.92; }.home-footnote { gap:10px; font-size:10px; }.home-footnote a { font-size:10px; }.home-launcher { padding:26px; } }
@media(max-width:820px) { body.home-visible header { padding:20px 24px; }.modern-brand .brand-sub { display:none; }body.home-visible main { padding:25px 24px; }.home-layout.panel { grid-template-columns:1fr; gap:30px; max-width:560px; min-height:0; }.home-editorial { padding:8px 0 0; }.home-editorial h1 { font-size:46px; }.home-showcase { height:280px; margin-top:-2px; margin-bottom:8px; }.home-editorial .hero-copy { font-size:12px; }.home-footnote { font-size:11px; }.home-launcher { padding:28px; }.home-kicker { margin-bottom:17px; } }
@media(max-width:480px) { body.home-visible header { padding:14px 16px; min-height:73px; gap:8px; }.modern-brand { font-size:21px; gap:9px; }.brand-mark { width:30px; height:30px; }.home-visible .roominfo { display:none; }body.home-visible .header-btns { gap:2px; }body.home-visible .header-btns button { font-size:10px; padding:6px; min-height:33px; }body.home-visible .header-link { font-size:10px; padding:5px; }body.home-visible main { padding:21px 16px; }.home-editorial { padding:0 5px; }.home-editorial h1 { font-size:38px; letter-spacing:-1px; margin-bottom:14px; }.home-kicker { font-size:8px; letter-spacing:2px; }.home-showcase { height:242px; margin:0 -5px; }.showcase-card { scale:.77; top:14px; }.showcase-card--left { margin-left:-159px; top:32px; }.showcase-card--center { top:12px; }.showcase-card--right { margin-left:-7px; top:32px; }.showcase-orbit { width:300px; height:90px; }.showcase-halo { width:280px; }.showcase-caption { bottom:4px; font-size:9px; }.home-footnote { gap:8px; font-size:10px; padding-top:12px; }.home-footnote a { font-size:10px; }.home-layout.panel { gap:25px; }.home-launcher { padding:23px 20px; border-radius:16px; }.home-launcher h2 { font-size:22px; }.entry-tabs { gap:23px; }.entry-tabs button { font-size:12px; }.home-entry-panel { min-height:193px; }.home-launcher .menu-opt { gap:14px; } }
@media(prefers-reduced-motion:reduce) { .showcase-cards { transform:none!important; }.home-showcase *,.home-launcher,.home-editorial { animation:none!important;transition:none!important; } }
@media(max-width:480px) { .home-showcase { height:292px; }.home-launcher input,.home-launcher select { font-size:16px; }.home-launcher input::placeholder { font-size:12px; } }
@media(max-width:380px) { .showcase-cards { scale:.82; transform-origin:50% 60%; }.home-showcase { height:275px; }.home-footnote { flex-wrap:wrap; row-gap:6px; }.home-footnote a { margin-left:0; }.entry-tabs { gap:18px; } }

.deck-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin:-6px 0 15px; position:relative; z-index:4; }
.deck-controls button { min-height:30px; padding:3px 9px; border-color:#8197b522; border-radius:6px; background:transparent; color:#92a5c1; font-size:12px; }
.deck-controls .deck-position { font:10px Consolas,monospace; color:#788da9; letter-spacing:1px; min-width:52px; text-align:center; }
.deck-controls [data-deck-pause] { font-size:10px; border:0; color:#8194af; }
.showcase-card { backface-visibility:hidden; }
@media(max-width:480px) { .deck-controls { margin-top:2px; margin-bottom:14px; } }

/* 连续卡轮：可见区域是完整圆周的顶部，下半部分渐隐到景深中。 */
.wheel-scene { --wheel-radius:1100px; --wheel-card-scale:1; height:330px; overflow:hidden; isolation:isolate; }
.wheel-scene .showcase-cards { mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.skill-wheel { position:absolute; left:50%; top:calc(var(--wheel-radius) + 125px); width:0; height:0; transform-origin:0 0; will-change:transform; }
.wheel-spoke { position:absolute; left:0; top:0; width:0; height:0; transform:rotate(var(--card-angle)); transform-origin:0 0; }
.wheel-spoke .showcase-card { left:0; top:0; margin:0; scale:1; transform-origin:50% 50%; transform:translate(-50%,-50%) translateY(calc(-1 * var(--wheel-radius))) scale(var(--wheel-card-scale)); }
body.home-motion .wheel-scene .showcase-float,body.home-motion .wheel-scene .showcase-float::after { animation:none; }
.wheel-spoke .showcase-float { border-color:#94a9c338; background:linear-gradient(150deg,#253347,#111b2a 65%); box-shadow:0 18px 36px #0006; }
.wheel-spoke[data-current] .showcase-float { border-color:#d5bc8780; background:linear-gradient(150deg,#3b3b37,#182332 65%); }
.wheel-depth { position:absolute; left:0; right:0; bottom:0; height:165px; z-index:10; pointer-events:none; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:linear-gradient(180deg,transparent,#0e1623b3 65%,#0e1623); mask-image:linear-gradient(180deg,transparent,#000 70%); }
.wheel-scene .showcase-caption { z-index:11; bottom:6px; }.wheel-scene .showcase-orbit { top:75%; width:85%; opacity:.45; }.wheel-scene .showcase-halo { top:58%; width:85%; }
@media(max-width:1100px) { .wheel-scene { --wheel-radius:900px; --wheel-card-scale:.9; } }
@media(max-width:820px) { .wheel-scene { --wheel-radius:950px; --wheel-card-scale:.92; height:300px; } }
@media(max-width:480px) { .wheel-scene { --wheel-radius:720px; --wheel-card-scale:.74; height:290px; }.wheel-depth { height:130px; }.wheel-scene .showcase-cards { scale:1; } }
@media(max-width:380px) { .wheel-scene { --wheel-radius:630px; --wheel-card-scale:.66; height:280px; }.wheel-scene .showcase-cards { scale:1; } }

.wheel-spoke .showcase-float { transition:border-color .6s; }
.deck-controls .deck-position { min-width:105px; font-size:10px; letter-spacing:.3px; }