/* Opening-only presentation. Existing game controls, IDs and state remain authoritative. Repeated IDs deliberately outrank legacy body:has(#app) theme rules without !important. */ #start#start{ --op-panel:rgba(9,29,40,.95);--op-text:#fff6df;--op-muted:#c3d1d0;--op-edge:#698080; --op-accent:#f7d57c;--op-button:#112f35;--op-overlay:linear-gradient(180deg,rgba(5,19,44,.67),rgba(5,22,40,.42) 50%,rgba(4,17,29,.94)); background:#102a36;animation:none;isolation:isolate;overflow-x:hidden;scroll-behavior:smooth; } #start#start[data-theme="light"]{ --op-panel:rgba(255,250,235,.96);--op-text:#183d35;--op-muted:#4c6359;--op-edge:#b7ae8b; --op-accent:#145443;--op-button:#fff8e6;--op-overlay:linear-gradient(180deg,rgba(255,233,186,.05),rgba(255,224,169,.04) 50%,rgba(65,57,33,.72)); background:#d0af78; } #start#start#start::before{content:"";position:fixed;inset:0;z-index:-2;background-image:var(--op-overlay),var(--op-scene);background-size:cover;background-position:center;pointer-events:none} #start#start#start::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 35%,#ffd38620,transparent 50%);animation:opening-light 12s ease-in-out infinite alternate} @keyframes opening-light{to{opacity:.35}} #start#start .wrap{width:100%;max-width:none;margin:0 auto;height:auto;min-height:100%;padding:0 40px 32px;display:flex;flex-direction:column;gap:0} #start#start .opening-header{order:0;position:relative;display:flex;align-items:center;gap:22px;min-height:76px;padding:6px 24px;margin:0 -40px;background:var(--op-panel);border-bottom:1px solid var(--op-edge);color:var(--op-text);box-shadow:0 3px 20px #0002} #start#start .opening-brand{flex:none;display:block;width:142px} #start#start .opening-brand img{display:block;width:100%;height:auto} #start#start .about-actions{position:static;display:flex;flex:1;justify-content:center;flex-wrap:wrap;gap:4px;background:none;border:0;padding:0;box-shadow:none;min-width:0} #start#start .about-actions .about-btn{color:var(--op-text);background:none;border:0;border-radius:6px;font-size:13px;min-height:44px;padding:12px 10px;display:flex;align-items:center;text-decoration:none} #start#start .about-actions .about-btn:hover{background:color-mix(in srgb,var(--op-accent) 12%,transparent)} #start#start .about-actions .mobile-only{display:none} #start#start .start-theme-btn{position:static;display:flex;order:3;flex:none;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;border:1px solid var(--op-edge);border-radius:50%;background:transparent;color:var(--op-text);box-shadow:none;font-size:21px;cursor:pointer} #start#start .start-topband{order:1;display:flex;flex-direction:column;max-width:none;width:100%;margin:0} #start#start .release-note{order:-1;margin:0 -40px;padding:10px 32px;display:block;border:0;border-bottom:1px solid var(--op-edge);border-radius:0;background:var(--op-panel);color:var(--op-text)} #start#start .release-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--op-text);font-size:12px} #start#start .rl-ver{display:flex;align-items:center;flex-wrap:wrap;gap:5px} #start#start .rl-news{position:static;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:var(--op-text);font-size:12px;white-space:normal} #start#start .rl-check,#start#start .forum-link{color:var(--op-text);background:transparent;border:1px solid var(--op-edge);min-height:32px;display:inline-flex;align-items:center;padding:5px 12px;font-size:12px} #start#start .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:100%;height:auto;min-height:300px;padding:35px 0 25px;margin:0;text-align:center} #start#start .hero h1{margin:0;width:min(460px,65vw);height:auto;flex:none} #start#start .hero .brand-logo{width:100%;max-width:none;height:auto;max-height:none;object-fit:contain;filter:drop-shadow(0 5px 18px #0005)} #start#start .opening-tagline{margin:12px 0 0;color:#fff8e9;font-size:16px;font-weight:700;letter-spacing:.12em;text-shadow:0 2px 8px #000,0 1px 3px #000} #start#start[data-theme="light"] .opening-tagline{color:#183d35;text-shadow:0 1px 5px #fff,0 1px 12px #fff} #start#start .opening-lobby{order:2;width:min(960px,100%);align-self:center;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin:0 auto 52px;align-items:start} #start#start .opening-surface{padding:24px;border:1px solid var(--op-edge);border-radius:16px;background:var(--op-panel);color:var(--op-text);box-shadow:0 12px 32px #0003;min-width:0} #start#start .opening-eyebrow{color:var(--op-accent);font:700 10px var(--mono);letter-spacing:.18em;margin:0 0 6px} #start#start .opening-surface h2{font-size:22px;letter-spacing:.06em;margin:0 0 18px;color:var(--op-text)} #start#start .opening-welcome{font-size:14px;line-height:1.8;color:var(--op-muted);margin:0 0 20px} #start#start .opening-new{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border:1px solid var(--op-accent);border-radius:8px;padding:12px 18px;color:var(--op-button);background:var(--op-accent);font-size:16px;font-weight:800;text-decoration:none;transition:transform .2s,box-shadow .2s} #start#start .opening-new:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003} #start#start .opening-footnote{font-size:12px;line-height:1.6;margin:12px 0 0;color:var(--op-muted)} #start#start .opening-cloud:not(:has(#cloud-bar:not([style*="display:none"]):not([style*="display: none"]),#cloud-careers:not([style*="display:none"]):not([style*="display: none"]))){display:none} #start#start .opening-lobby:not(:has(.opening-cloud #cloud-bar:not([style*="display:none"]):not([style*="display: none"]))){grid-template-columns:minmax(0,560px);justify-content:center} #start#start .continue-banner,#start#start .cloud-bar{background:none;border:0;padding:0;margin:0;box-shadow:none;gap:16px} #start#start .continue-banner{flex-direction:column;align-items:stretch;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--op-edge)} #start#start .continue-text,#start#start .cloud-text{color:var(--op-text);font-size:14px;line-height:1.7} #start#start .continue-text b,#start#start .cloud-text b{color:var(--op-text);font-size:15px;white-space:normal} #start#start .continue-text span,#start#start .cloud-text span{color:var(--op-muted);font:13px/1.7 var(--sans)} #start#start .continue-actions,#start#start .cloud-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%} #start#start .continue-actions .btn,#start#start .cloud-actions .btn{flex:1 1 180px;width:auto;min-height:44px;padding:10px 14px} #start#start .opening-lobby .btn,#start#start .opening-lobby .cloud-fold{border-color:var(--op-edge);background:transparent;color:var(--op-text);border-radius:8px;min-height:44px} #start#start .opening-lobby .btn.main,#start#start #cloud-login{background:var(--op-accent);border-color:var(--op-accent);color:var(--op-button)} #start#start .cloud-text{flex-basis:200px} #start#start .cloud-panel{border-top-color:var(--op-edge);width:100%;display:flex;flex-wrap:wrap;gap:8px} #start#start .cloud-panel .btn{width:auto;flex:1 1 140px} #start#start .cloud-priv,#start#start .cloud-hint-link,#start#start .cloud-resume-info b{color:var(--op-accent)} #start#start .cloud-career{background:var(--op-panel);color:var(--op-text);border-color:var(--op-edge)} #start#start .opening-chapter{order:3;text-align:center;scroll-margin-top:24px;padding:28px 0 22px;color:#fff7e5;text-shadow:0 2px 8px #0009} #start#start .opening-chapter span{font-size:12px;letter-spacing:.3em} #start#start .opening-chapter h2{font-size:26px;margin:8px 0} #start#start .opening-chapter p{font-size:14px;margin:0} #start#start .start-panel{order:4;width:min(1180px,100%);align-self:center;background:var(--op-panel);border:1px solid var(--op-edge);border-radius:16px;margin:0 0 24px;overflow:hidden;flex:none} #start#start .start-formcol{padding:28px;min-width:0} #start#start .start-side{background:transparent} #start#start .start-disclaimer{order:5;width:min(1180px,100%);align-self:center;margin:0;padding:18px 20px;background:var(--op-panel);color:var(--op-muted);border:1px solid var(--op-edge);border-radius:12px;white-space:normal;flex-wrap:wrap;font-size:11px} #start#start .start-disclaimer b{color:var(--op-muted)} #start#start :is(button,a,input,summary):focus-visible{outline:3px solid var(--op-accent);outline-offset:4px} @media(min-width:1600px){#start#start .hero{min-height:365px}#start#start .opening-lobby{margin-bottom:90px}} @media(max-width:1099px){ #start#start .wrap{padding:0 24px 24px;max-width:100%;height:auto;min-height:100%;display:flex;overflow:visible} #start#start .opening-header{margin:0 -24px;padding:8px 24px;min-height:64px;justify-content:space-between} #start#start .opening-brand{width:110px;margin:auto} #start#start .mobile-menu-btn{display:flex;position:static;min-height:44px;padding:9px 12px;background:transparent;color:var(--op-text);border:1px solid var(--op-edge);box-shadow:none;font-size:13px;flex:none} #start#start .about-actions{display:none;position:absolute;top:100%;left:16px;right:auto;width:260px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 90px);overflow-y:auto;background:var(--op-panel);border:1px solid var(--op-edge);padding:8px;box-shadow:0 12px 25px #0005;z-index:60;flex-direction:column;flex-wrap:nowrap} #start#start .about-actions.open{display:flex} #start#start .about-actions .mobile-only{display:flex} #start#start .release-note{margin:0 -24px;padding:8px 24px} #start#start .hero{min-height:270px;padding:25px 0} #start#start .hero h1{width:min(420px,70vw)} #start#start .start-panel{display:block} #start#start .start-formcol{padding:24px} #start#start .opening-lobby{margin-bottom:24px} #start#start .opening-header{z-index:10} } @media(max-width:699px){ #start#start .wrap{padding:0 16px 24px} #start#start .opening-header{margin:0 -16px;padding:8px 16px} #start#start .opening-brand{display:none} #start#start .release-note{margin:0 -16px;padding:8px 16px} #start#start .release-line{gap:6px;font-size:11px;letter-spacing:0} #start#start .rl-news{font-size:11px;flex-wrap:wrap;gap:4px} #start#start .rl-check,#start#start .forum-link{min-height:36px;font-size:11px;padding:6px 10px} #start#start .hero{min-height:230px;padding:28px 0 22px} #start#start .hero h1{width:min(350px,86vw)} #start#start .opening-tagline{font-size:12px;letter-spacing:.04em;margin-top:12px} #start#start .opening-lobby{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:22px} #start#start .opening-surface{padding:20px;border-radius:12px} #start#start .opening-surface h2{font-size:20px;margin-bottom:14px} #start#start .opening-new{font-size:15px} #start#start .start-formcol{padding:20px 16px} #start#start .start-panel,#start#start #wizard{height:auto;max-height:none;overflow:visible;min-height:0;flex:none} #start#start .wiz-step{height:auto;max-height:none;overflow:visible;flex:none} #start#start .opening-chapter{padding-top:18px} #start#start .opening-chapter h2{font-size:23px} #start#start .start-disclaimer{display:block;padding:16px} #start#start .start-disclaimer span{display:block;margin:6px 0 0;padding:0;border:0} #start#start#start::before{background-position:58% center} } @media(max-height:750px) and (min-width:700px){#start#start .hero{min-height:220px;padding:18px 0}#start#start .hero h1{width:330px}#start#start .opening-lobby{margin-bottom:24px}} @media(prefers-reduced-motion:reduce){#start#start{scroll-behavior:auto}#start#start#start::after,#start#start .brand-logo{animation:none}#start#start .opening-new{transition:none}} /* Reset decorative geometry inherited from the previous opening screen. */ #start#start#start::before{inset:0;width:auto;height:auto;transform:none;z-index:-2;background-image:var(--op-overlay),var(--op-scene);background-size:cover;background-position:center} #start#start#start::after{inset:0;width:auto;height:auto;transform:none;z-index:-1;background:radial-gradient(ellipse at 75% 35%,#ffd38620,transparent 50%)} #start#start .rl-ver{order:0;align-self:auto;margin:0;padding:0;background:none;border:0;border-radius:0;color:var(--op-text);white-space:normal} #start#start .rl-ver b{color:var(--op-text)} #start#start .rl-news{order:0;align-self:auto;margin:0;background:none;color:var(--op-text);border:0;overflow:visible} #start#start .rl-news .release-forum-btn{color:var(--op-button);background:var(--op-accent);border-color:var(--op-accent);min-height:36px} #start#start .cloud-bar,#start#start .continue-banner{background:none} #start#start .cloud-text b,#start#start .continue-text b{color:var(--op-text)} #start#start .cloud-text span,#start#start .continue-text span{color:var(--op-muted)} #start#start .hero{background:none} @media(max-width:699px){#start#start#start::before{background-position:58% center}} /* Full-width navigation is a direct child of #start, independent of the content wrap. */ #start#start > .opening-header{width:100%;max-width:none;margin:0;box-sizing:border-box;min-height:60px;padding:6px 24px;gap:18px;z-index:10} #start#start > .opening-header .opening-brand{width:122px} #start#start .about-actions .about-btn{gap:7px;padding:8px 10px;min-height:40px;white-space:nowrap} #start#start .opening-nav-icon{display:block;width:18px;height:18px;flex:none;color:var(--op-accent)} #start#start > .release-note{width:100%;max-width:none;margin:0;box-sizing:border-box;padding:3px 24px;min-height:36px;position:relative;z-index:2} #start#start > .release-note .release-line{min-height:30px;font-size:11px;gap:4px 16px} #start#start > .release-note .rl-news{font-size:11px;gap:6px} #start#start > .release-note :is(.rl-check,.release-forum-btn){min-height:28px;padding:3px 10px;font-size:11px;line-height:1.3} @media(max-width:1099px){ #start#start > .opening-header{padding:6px 20px;min-height:56px} #start#start > .release-note{padding:3px 20px} #start#start .about-actions .about-btn{min-height:44px;padding:10px 12px} } @media(max-width:699px){ #start#start > .opening-header{padding:6px 16px} #start#start > .release-note{padding:3px 16px} #start#start > .release-note .release-line{justify-content:flex-start;column-gap:14px;row-gap:2px} #start#start > .release-note :is(.rl-check,.release-forum-btn){min-height:32px;padding:5px 9px} #start#start > .release-note .rl-ver{font-size:11px} } #start#start .opening-news-short{display:none} @media(max-width:699px){ #start#start .opening-version-label,#start#start .opening-news-label{display:none} #start#start .opening-news-short{display:inline} #start#start > .release-note .release-line{justify-content:space-between;column-gap:6px} #start#start > .release-note .rl-ver{gap:3px;flex-wrap:nowrap} #start#start > .release-note .rl-news{gap:3px;flex-wrap:nowrap;white-space:nowrap} } /* Keep the full-width navigation outside the content's scrollbar. */ #start#start#start{display:flex;flex-direction:column;overflow:hidden} #start#start#start > .opening-header{order:0;flex:0 0 auto;width:100%;margin:0} #start#start#start > .release-note{order:1;flex:0 0 auto;width:100%;margin:0} #start#start#start > .wrap{order:2;flex:1 1 0;min-height:0;height:auto;max-height:none;max-width:none;width:100%;margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--op-edge) var(--op-panel)} #start#start#start > .wrap::-webkit-scrollbar{width:8px} #start#start#start > .wrap::-webkit-scrollbar-track{background:var(--op-panel)} #start#start#start > .wrap::-webkit-scrollbar-thumb{background:var(--op-edge);border-radius:8px} @media(prefers-reduced-motion:reduce){#start#start#start > .wrap{scroll-behavior:auto}} /* Version tools replace the duplicate navigation logo. */ #start#start#start > .opening-header > .rl-ver{order:0;flex:0 0 auto;display:flex;align-items:center;gap:6px;margin:0;font-size:12px} #start#start#start > .opening-header > .about-actions{order:1} #start#start#start > .opening-header > .start-theme-btn{order:2} #start#start#start > .opening-header .rl-check{min-height:32px;padding:5px 10px;font-size:11px;white-space:nowrap} #start#start#start > .release-note .release-line{justify-content:center} #start#start#start > .release-note .rl-news{margin:0;justify-content:center} #start#start#start .rl-check[hidden]{display:none} @media(max-width:1099px){ #start#start#start > .opening-header{gap:10px} #start#start#start > .opening-header > .rl-ver{flex:1 1 auto;min-width:0} #start#start#start > .opening-header > .mobile-menu-btn{order:3;margin:0} #start#start#start > .opening-header > .about-actions{left:auto;right:16px} } @media(max-width:699px){ #start#start#start > .opening-header{gap:7px;padding:6px 12px} #start#start#start > .opening-header > .rl-ver{gap:2px;font-size:11px} #start#start#start > .opening-header .rl-check{padding:5px 7px;margin-left:3px;font-size:10.5px} #start#start#start > .opening-header > .start-theme-btn{width:36px;height:36px;min-height:36px;font-size:19px} #start#start#start > .opening-header > .mobile-menu-btn{font-size:12px;min-height:40px;padding:7px 10px} } /* Single navigation row; announcements join the navigation links. */ #start#start#start > .opening-header{gap:12px} #start#start#start .opening-header .about-actions{justify-content:flex-end;gap:0;min-width:0} #start#start#start .opening-header .release-note{order:2;flex:0 0 auto;width:auto;max-width:none;min-height:0;margin:0 0 0 10px;padding:0 0 0 12px;border:0;border-left:1px solid var(--op-edge);border-radius:0;background:none;box-shadow:none} #start#start#start .opening-header .release-line{display:flex;min-height:0;gap:0} #start#start#start .opening-header .rl-news{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;font-size:11px;white-space:nowrap} #start#start#start .opening-header .release-forum-btn{min-height:30px;padding:4px 8px;font-size:11px} #start#start#start .opening-header .opening-news-label{display:none} #start#start#start .opening-header .opening-news-short{display:inline} #start#start#start > .opening-header > .start-theme-btn{width:auto;min-width:44px;gap:6px;padding:8px 12px;border-radius:9px;font-size:17px;white-space:nowrap} #start#start#start .opening-theme-label{font-size:12px;font-weight:700} @media(min-width:1100px) and (max-width:1399px){ #start#start#start .opening-header .about-btn{font-size:12px;padding:8px 6px;gap:5px} #start#start#start > .opening-header > .rl-ver{font-size:11px;gap:3px} #start#start#start > .opening-header .opening-version-label{display:none} } @media(max-width:1099px){ #start#start#start .opening-header .about-actions{justify-content:flex-start;align-items:stretch} #start#start#start .opening-header .release-note{margin:6px 0 0;padding:10px 8px 4px;border-left:0;border-top:1px solid var(--op-edge);order:3} #start#start#start .opening-header .about-btn.mobile-only[href*="line.me"]{display:none} #start#start#start > .opening-header > .start-theme-btn{padding:6px 8px;gap:4px} #start#start#start .opening-theme-label{font-size:11px} } @media(max-width:360px){ #start#start#start > .opening-header{gap:5px;padding-left:10px;padding-right:10px} #start#start#start > .opening-header > .mobile-menu-btn{font-size:11px;padding:7px 8px} #start#start#start > .opening-header .rl-check{padding:5px;font-size:10px} #start#start#start > .opening-header > .start-theme-btn{gap:3px;padding:6px} } /* 背景只由下方場景變數指定，保持原圖清晰，不套模糊濾鏡。 */ #start#start#start{--op-overlay:linear-gradient(180deg,rgba(4,13,33,.24),rgba(4,15,29,.18) 55%,rgba(4,14,25,.70))} #start#start#start[data-theme="light"]{--op-overlay:linear-gradient(180deg,rgba(255,235,199,.02),transparent 55%,rgba(53,37,23,.48))} #start#start#start::before{background-image:var(--op-overlay),var(--op-scene);inset:0;filter:none} #start#start#start::after{background:none;animation:none} /* Latest announcement follows version tools on the left, away from theme controls. */ #start#start#start > .opening-header > .rl-ver{order:0} #start#start#start > .opening-header > .release-note{order:1;flex:1 1 280px;min-width:0;margin:0;padding:0 12px;border-left:1px solid var(--op-edge)} #start#start#start > .opening-header > .about-actions{order:2;flex:0 0 auto} #start#start#start > .opening-header > .start-theme-btn{order:3} #start#start#start .opening-header .release-line{display:flex;align-items:baseline;justify-content:flex-start;gap:0;flex-wrap:nowrap;font-family:var(--sans);font-size:12px;letter-spacing:0;line-height:1.7} #start#start#start .opening-news-kicker{flex:none;font-weight:700;color:var(--op-accent)} #start#start#start .opening-header .rl-news{display:block;white-space:normal;min-width:0;font-size:12px;line-height:1.7} #start#start#start .opening-header .release-forum-btn{display:inline;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;color:var(--op-accent);font-size:12px;line-height:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;box-shadow:none} #start#start#start .opening-header .release-forum-btn:hover{background:none;transform:none;color:var(--op-text)} @media(max-width:1399px) and (min-width:1100px){ #start#start#start > .opening-header{gap:8px;padding-left:18px;padding-right:18px} #start#start#start .opening-header .release-line,#start#start#start .opening-header .rl-news,#start#start#start .opening-header .release-forum-btn{font-size:11px} } @media(max-width:1099px){ #start#start#start > .opening-header > .rl-ver{flex:1 1 auto} #start#start#start > .opening-header > .mobile-menu-btn{order:4} #start#start#start .opening-header .about-actions .release-note{padding:12px 10px;margin:6px 0 0;min-width:0;border-left:0;border-top:1px solid var(--op-edge)} #start#start#start .opening-header .about-actions .release-line{display:block} #start#start#start .opening-header .about-actions .opening-news-kicker{display:block;margin-bottom:4px} } @media(min-width:1280px){ #start#start#start .opening-header .release-line,#start#start#start .opening-header .rl-news,#start#start#start .opening-header .release-forum-btn{font-size:12px} } /* 無校舍、樹木或場名的半寫實球場；觀眾席、燈塔與記分板採同構圖傍晚／夜景。v3／v4 原圖保留備用。 基底維持夜景，與既有預設深色一致，避免首訪白載另一張圖。 */ #start#start#start{--op-scene:url('../src/img/opening-field-night-v5.webp')} #start#start#start[data-theme="light"]{--op-scene:url('../src/img/opening-field-sunset-v5.webp')} @media(max-width:699px){#start#start#start::before{background-position:58% center}} /* Translucent card faces and an interactive character-creation stage. */ #start#start#start{--op-card:rgba(9,29,40,.74)} #start#start#start[data-theme="light"]{--op-card:rgba(255,250,235,.76)} #start#start#start .opening-surface,#start#start#start .start-panel{background:var(--op-card);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} #start#start#start .opening-new{width:100%;font-family:inherit;text-align:left;cursor:pointer} #start#start#start .opening-stage{order:2;flex:none;width:100%;perspective:1400px} #start#start#start .opening-lobby{transform-origin:center center;margin-top:0} #start#start#start .opening-creation{display:flex;flex-direction:column;width:min(1180px,100%);margin:0 auto 24px;transform-origin:center center;scroll-margin-top:20px;outline:none} #start#start#start .opening-creation[hidden],#start#start#start .opening-lobby[hidden]{display:none} #start#start#start .opening-creation .opening-chapter{order:1;padding:10px 0 20px} #start#start#start .opening-creation .start-panel{order:2;transform-origin:center center} #start#start#start .opening-back{order:0;align-self:flex-start;min-height:44px;padding:8px 14px;border:1px solid var(--op-edge);border-radius:8px;background:var(--op-card);color:var(--op-text);font:700 13px var(--sans);cursor:pointer;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} #start#start#start .opening-back:hover{border-color:var(--op-accent);color:var(--op-accent)} #start#start#start .opening-creation .start-panel #wizard{background:rgba(8,24,38,.22)} #start#start#start[data-theme="light"] .opening-creation .start-panel #wizard{background:rgba(255,255,255,.28)} #start#start#start .opening-tagline{font-size:18px;letter-spacing:.06em} @media(max-width:699px){ #start#start#start .opening-tagline{font-size:14px;letter-spacing:.02em} #start#start#start .opening-creation .opening-chapter{padding:14px 0 20px} } @media(max-width:1099px){ #start#start#start .opening-creation .wiz-progress{flex-direction:column;align-items:stretch;gap:4px} #start#start#start .opening-creation .wiz-dots{width:100%;flex:none} #start#start#start .opening-creation #wizard .wiz-dot{white-space:nowrap;min-height:44px;line-height:1.3;padding:10px 2px} #start#start#start .opening-creation .wiz-label{align-self:flex-end;white-space:normal;text-align:right;font-size:11px;line-height:1.5} } /* Explicit, user-triggered half-turns stay opaque so the flip reads clearly. */ #start#start#start .opening-lobby,#start#start#start .opening-creation,#start#start#start .opening-creation .start-panel{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-origin:center center} /* Character creation is its own quiet view; the hero remains on the opening face. */ #start#start#start.is-creating .hero{display:none} #start#start#start.is-creating .opening-stage{padding-top:20px} #start#start#start[data-theme="light"]{--op-card:rgba(255,249,234,.60)} #start#start#start[data-theme="light"] .opening-surface,#start#start#start[data-theme="light"] .start-panel{border-color:rgba(74,91,74,.24);box-shadow:0 6px 22px rgba(27,45,33,.12);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)} #start#start#start[data-theme="light"] .opening-creation .start-panel #wizard{background:rgba(255,255,255,.1);border-color:rgba(74,91,74,.18);box-shadow:none} #start#start#start[data-theme="light"] .opening-back{border-color:rgba(74,91,74,.25);background:rgba(255,249,234,.48)} /* Copyright is quiet text, not another card. */ #start#start#start .start-disclaimer{display:block;width:min(1320px,100%);margin:22px auto 18px;padding:0 10px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#eeeadd;font:400 11px/1.85 var(--sans);text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.85)} #start#start#start .start-disclaimer b{display:inline;margin:0 10px 0 0;color:inherit;font-size:11px;font-weight:600;letter-spacing:.12em} #start#start#start .start-disclaimer span{display:inline;margin:0;padding:0;border:0} #start#start#start .start-disclaimer span+span::before{content:" · ";padding:0 5px;opacity:.65} @media(max-width:699px){ #start#start#start.is-creating .opening-stage{padding-top:16px} #start#start#start .start-disclaimer{margin-top:14px;padding:0 4px;font-size:10px;line-height:1.9;text-align:left} } /* Two balanced summary cards; expanded cloud content uses the row beneath. */ #start#start#start .opening-lobby{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} #start#start#start .opening-journey,#start#start#start .opening-cloud{display:flex;flex-direction:column;min-height:270px} #start#start#start .opening-journey .opening-new{margin-top:auto} #start#start#start .opening-cloud #cloud-bar{flex:1;align-content:space-between} #start#start#start .opening-cloud #cloud-bar:has(#cloud-login){flex-direction:column;align-items:stretch;justify-content:space-between} #start#start#start .opening-cloud #cloud-bar:has(#cloud-login) .cloud-text{flex:0 0 auto} #start#start#start .opening-cloud .cloud-actions{margin-top:auto} #start#start#start .opening-cloud #cloud-login{min-height:52px} #start#start#start .opening-cloud-details{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0} #start#start#start .opening-cloud-details[hidden]{display:none} #start#start#start .opening-cloud-details:has(>.cloud-panel:only-child){grid-template-columns:minmax(0,1fr)} #start#start#start .opening-cloud-details>.cloud-panel{margin:0;padding:20px;min-width:0;width:100%;border:1px solid var(--op-edge);border-radius:12px;background:var(--op-card);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:var(--op-text);align-content:start} #start#start#start .opening-cloud-details .cloud-resume-info{flex:1 1 230px;min-width:0} #start#start#start .opening-cloud-details .cloud-resume-info b{color:var(--op-accent);font-size:16px} #start#start#start .opening-cloud-details .cloud-resume-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(400px,100%);gap:10px;flex:1 1 300px;margin:0} #start#start#start .opening-cloud-details .btn{min-height:44px;flex:1 1 160px;min-width:0;width:auto;padding:10px 14px;font-size:13px;border-radius:8px;border-color:var(--op-edge);background:transparent;color:var(--op-text);white-space:normal} #start#start#start .opening-cloud-details .btn.main{background:var(--op-accent);border-color:var(--op-accent);color:var(--op-button)} #start#start#start .opening-cloud-details .btn.cloud-danger{color:#ffb4a4;border-color:#af7669;background:rgba(84,28,22,.14)} #start#start#start[data-theme="light"] .opening-cloud-details .btn.cloud-danger{color:#943d2d;border-color:#be9182;background:rgba(151,63,38,.04)} #start#start#start .opening-cloud-details .cloud-priv{margin:0;flex-basis:100%;color:var(--op-muted)} #start#start#start #cloud-careers{grid-column:1/-1;min-width:0;margin:0} #start#start#start #cloud-careers .cloud-careers-t{min-height:44px;color:var(--op-text);padding:9px 14px;border-color:var(--op-edge)} #start#start#start #cloud-careers .cloud-career-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px} #start#start#start #cloud-careers .cloud-career{min-width:0;background:var(--op-card);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);padding:16px} #start#start#start #cloud-careers .cc-facts{grid-template-columns:minmax(0,1fr)} #start#start#start #cloud-careers .cc-acts{margin-top:auto;padding-top:5px} @media(max-width:899px){#start#start#start #cloud-careers .cloud-career-list{grid-template-columns:minmax(0,1fr)}} @media(max-width:699px){ #start#start#start .opening-lobby{grid-template-columns:minmax(0,1fr)} #start#start#start .opening-journey,#start#start#start .opening-cloud{min-height:240px} #start#start#start .opening-cloud-details{grid-template-columns:minmax(0,1fr)} #start#start#start .opening-cloud-details>.cloud-panel{padding:16px} #start#start#start #cloud-careers .cloud-career{padding:16px} } #start#start#start .opening-cloud:not(:has(#cloud-bar:not([style*="display:none"]):not([style*="display: none"]),#cloud-careers:not([style*="display:none"]):not([style*="display: none"]))){display:none} #start#start#start .opening-lobby:not(:has(.opening-cloud #cloud-bar:not([style*="display:none"]):not([style*="display: none"]))){grid-template-columns:minmax(0,560px);justify-content:center} #start#start#start .opening-cloud #cloud-bar,#start#start#start .opening-cloud #cloud-msg{width:100%;margin:0;padding:0} #start#start#start #cloud-careers{width:100%} #start#start#start .opening-cloud #cloud-gsi:empty{display:none} @media(min-width:700px){#start#start#start .opening-cloud #cloud-bar:has(#cloud-login) .cloud-actions{margin-bottom:31px}} /* ---------- 2026-10-23 收尾（Claude）：續玩順序、導航 icon ---------- */ /* 有存檔時「繼續這段生涯」要在「開始新的棒球人生」上面，開新生涯退成次要樣式——回鍋玩家的主要動作是續玩， 而且「開始新的」走到底會蓋掉舊存檔，不該是那顆最醒目的綠色大鈕。.opening-journey 是 flex column，用 order 排： h2(0) → 續玩(1) → 歡迎文(2) → 開始新的(3) → 註腳(4)。沒有存檔時 #continue-banner 是 display:none，順序不受影響。 */ #start#start#start .opening-journey>h2{order:0} #start#start#start .opening-journey>#continue-banner{order:1;margin-top:4px} #start#start#start .opening-journey>.opening-welcome{order:2} #start#start#start .opening-journey>.opening-new{order:3} #start#start#start .opening-journey>.opening-footnote{order:4} #start#start#start .opening-journey:has(#continue-banner[style*="flex"]) .opening-new{background:transparent;color:var(--op-text);border-color:var(--op-edge);box-shadow:none} #start#start#start .opening-journey:has(#continue-banner[style*="flex"]) .continue-banner .btn.main{min-height:52px;font-size:15px} /* 版本膠囊、檢查更新鈕、公告都有 icon（使用者 2026-10-23 要求跟導覽項目一致）。 */ #start#start#start > .opening-header > .rl-ver > .opening-nav-icon,#start#start#start .opening-news-kicker > .opening-nav-icon{width:15px;height:15px;display:inline-block;vertical-align:-3px;margin-right:4px} #start#start#start .opening-header .rl-check{display:inline-flex;align-items:center;gap:4px} #start#start#start .opening-header .rl-check > .opening-nav-icon{width:13px;height:13px;color:currentColor} #start#start#start .opening-news-kicker{display:inline-flex;align-items:center;gap:0} @media(max-width:1099px){ #start#start#start .opening-header .about-actions .opening-news-kicker{display:flex} } /* ---------- 2026-10-24 創角畫面改版、續玩卡、作品聲明（Claude） ---------- 規則全部掛在 #start#start#start 底下，壓過 style.css／ui.css 那幾層舊的精靈樣式（含 body:has(#app[data-theme]) 的淺色覆寫）， 顏色一律走 --op-*，深淺主題自動跟著開場切換。 */ #start#start#start{--cr-line:color-mix(in srgb,var(--op-edge) 60%,transparent);--cr-soft:color-mix(in srgb,var(--op-accent) 13%,transparent);--cr-field:color-mix(in srgb,var(--op-panel) 62%,transparent)} /* 標題與輸入框 */ #start#start#start .opening-creation .feature-tags{display:none} #start#start#start .opening-creation .section-title{color:var(--op-text);font-size:17px;letter-spacing:.06em} #start#start#start .opening-creation .field>label{color:var(--op-muted);font:800 12.5px var(--sans);letter-spacing:.06em} #start#start#start .opening-creation #in-name{min-height:48px;border-radius:12px;background:var(--cr-field);border:1px solid var(--op-edge);color:var(--op-text);font-size:16px} #start#start#start .opening-creation #in-name:focus,#start#start#start .opening-creation .seed-row:focus-within{border-color:var(--op-accent);box-shadow:0 0 0 3px var(--cr-soft)} #start#start#start .opening-creation .dice-btn{width:48px;height:48px;border-radius:12px;background:var(--cr-field);border-color:var(--op-edge)} #start#start#start .opening-creation .dice-btn:hover{border-color:var(--op-accent)} #start#start#start .opening-creation .seed-row{border-radius:12px;background:var(--cr-field);border-color:var(--op-edge)} #start#start#start .opening-creation .seed-row input{color:var(--op-accent);font-weight:700} #start#start#start .opening-creation .seed-row a{color:var(--op-accent);font-weight:700} #start#start#start .opening-creation .info-btn{background:var(--cr-soft);color:var(--op-accent)} /* 精靈外框 */ #start#start#start .opening-creation .start-panel{border-radius:20px} #start#start#start .opening-creation .start-panel #wizard{border:1px solid var(--cr-line);border-radius:16px;background:color-mix(in srgb,var(--op-panel) 35%,transparent);padding:16px 20px 12px} /* 步驟條：號碼圈＋短標籤，做完的打勾、可點回去 */ #start#start#start .opening-creation .wiz-progress{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0 0 12px} #start#start#start .opening-creation .wiz-dots{display:flex;align-items:center;gap:0;width:100%} #start#start#start .opening-creation #wizard .wiz-dot{flex:1 1 0;display:flex;align-items:center;gap:9px;min-width:0;width:auto;height:auto;min-height:36px;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--op-muted);font:700 14px var(--sans);white-space:nowrap;cursor:pointer;clip-path:none} #start#start#start .opening-creation #wizard .wiz-dot:last-child{flex:0 0 auto} #start#start#start .opening-creation #wizard .wiz-dot::after{content:"";flex:1;height:2px;min-width:16px;margin:0 10px 0 2px;border-radius:2px;background:var(--cr-line)} #start#start#start .opening-creation #wizard .wiz-dot:last-child::after{content:none} #start#start#start .opening-creation #wizard .wiz-dot.done::after{background:var(--op-accent)} #start#start#start .opening-creation #wizard .wiz-dot i{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--op-edge);font:800 13px var(--mono);font-style:normal;color:var(--op-muted);transition:background .2s,border-color .2s,color .2s} #start#start#start .opening-creation #wizard .wiz-dot.on{color:var(--op-text)} #start#start#start .opening-creation #wizard .wiz-dot.on i{background:var(--op-accent);border-color:var(--op-accent);color:var(--op-button);box-shadow:0 0 0 5px var(--cr-soft)} #start#start#start .opening-creation #wizard .wiz-dot.done{color:var(--op-text)} #start#start#start .opening-creation #wizard .wiz-dot.done i{background:var(--cr-soft);border-color:var(--op-accent);color:var(--op-accent);font-size:0} #start#start#start .opening-creation #wizard .wiz-dot.done i::before{content:"✓";font:900 14px var(--sans)} @media(hover:hover){#start#start#start .opening-creation #wizard .wiz-dot:hover:not(.on) i{border-color:var(--op-accent)}} #start#start#start .opening-creation .wiz-step{row-gap:16px;padding-top:4px} #start#start#start .opening-creation .wiz-step>:is(.field,.wiz-note){margin:0} #start#start#start .opening-creation .wiz-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding-top:12px;border-top:1px solid var(--cr-line);font:inherit;color:var(--op-text);text-align:left;white-space:normal;align-self:stretch} #start#start#start .opening-creation .wiz-label b{font-size:17px;font-weight:800;letter-spacing:.04em;color:var(--op-text)} #start#start#start .opening-creation .wiz-label small{flex:none;font:700 12px var(--sans);color:var(--op-muted)} /* 選項按鈕：圓角卡片，選中＝主色描邊＋淡底＋右上角勾 */ #start#start#start .opening-creation .seg button{border-radius:12px;border:1px solid var(--cr-line);background:var(--cr-field);color:var(--op-text);font-weight:700;box-shadow:none;clip-path:none;transition:border-color .15s,background .15s,transform .15s} #start#start#start .opening-creation .seg button small{color:var(--op-muted)} @media(hover:hover){#start#start#start .opening-creation .seg button:hover:not(.on):not(:disabled){border-color:color-mix(in srgb,var(--op-accent) 65%,transparent);transform:translateY(-1px)}} #start#start#start .opening-creation .seg button.on{border-color:var(--op-accent);background:var(--cr-soft);color:var(--op-accent);box-shadow:inset 0 0 0 1px var(--op-accent)} #start#start#start .opening-creation .seg button.on small{color:var(--op-text);opacity:.8} #start#start#start .opening-creation .seg button.on::after{content:"✓";position:absolute;top:5px;right:6px;width:16px;height:16px;border-radius:50%;background:var(--op-accent);color:var(--op-button);font:900 10px/16px var(--sans);text-align:center} #start#start#start .opening-creation .hand-preview{border-radius:12px;border:1px solid var(--cr-line);background:var(--cr-field);color:var(--op-muted)} #start#start#start .opening-creation .hand-preview b{color:var(--op-accent)} #start#start#start .opening-creation .wiz-note{color:var(--op-muted)} /* 上一步／下一步／進入遊戲：膠囊按鈕，主要動作用主色 */ #start#start#start .opening-creation .wiz-nav{border-top:1px solid var(--cr-line);gap:10px} #start#start#start .opening-creation .wiz-nav .btn{clip-path:none;border-radius:999px;min-height:48px;font:800 15px var(--sans);text-align:center;letter-spacing:.04em} #start#start#start .opening-creation #wiz-prev{flex:none;padding:0 24px;background:transparent;border:1px solid var(--op-edge);color:var(--op-text);box-shadow:none} #start#start#start .opening-creation #wiz-prev:hover{border-color:var(--op-accent);color:var(--op-accent)} #start#start#start .opening-creation :is(#wiz-next,#btn-start){background:var(--op-accent);border:1px solid var(--op-accent);color:var(--op-button);box-shadow:0 8px 20px color-mix(in srgb,var(--op-accent) 26%,transparent)} #start#start#start .opening-creation :is(#wiz-next,#btn-start):hover{filter:brightness(1.06);transform:translateY(-1px)} #start#start#start .opening-creation #wiz-next::after{content:" →"} #start#start#start .opening-creation #btn-start::before{content:"▶ ";font-size:.8em} /* 桌機角色檔案預覽 */ #start#start#start .opening-creation .start-side{background:linear-gradient(180deg,var(--cr-soft),transparent 46%);border-right:1px solid var(--cr-line)} #start#start#start .opening-creation .cp-kicker{color:var(--op-accent);font:800 11.5px var(--sans);letter-spacing:.16em;text-align:center} #start#start#start .opening-creation .cp-avatar{border:3px solid var(--op-accent);box-shadow:0 0 0 6px var(--cr-soft);margin-top:10px} #start#start#start .opening-creation .cp-name{color:var(--op-text);margin-top:4px} #start#start#start .opening-creation .cp-sub{color:var(--op-muted)} #start#start#start .opening-creation .cp-rows{gap:8px;border-top:1px dashed var(--cr-line)} #start#start#start .opening-creation .cp-row{padding:9px 12px;border-radius:12px;border:1px solid var(--cr-line);background:var(--cr-field)} #start#start#start .opening-creation .cp-row span{color:var(--op-muted)} #start#start#start .opening-creation .cp-row b{color:var(--op-text)} #start#start#start .opening-creation .cp-row small{color:var(--op-muted)} #start#start#start .opening-creation .cp-seedrow{border-top-color:var(--cr-line);color:var(--op-muted)} #start#start#start .opening-creation .cp-seedrow b{color:var(--op-accent)} #start#start#start .opening-creation .cp-note{color:var(--op-muted)} #start#start#start .opening-creation .cp-badge{background:var(--op-accent);color:var(--op-button)} #start#start#start .opening-back{border-radius:999px;padding:8px 16px} /* 手機／平板：精靈攤平、按鈕列固定在畫面底部、標頭收緊 */ @media(max-width:1099px){ #start#start#start .opening-creation .start-panel,#start#start#start .opening-creation .start-formcol,#start#start#start .opening-creation #wizard{overflow:visible} /* 精靈攤平成表單欄的直接子項（display:contents），步驟條才能排到姓名欄位上面： 手機第 1 步就是姓名與種子，步驟條放在它們下面會像「標題下面什麼都沒有」。 */ #start#start#start .opening-creation .start-formcol{display:flex;flex-direction:column} #start#start#start .opening-creation .start-panel #wizard{display:contents} #start#start#start .opening-creation .wiz-progress{order:-1;margin-bottom:16px} #start#start#start .opening-creation .wiz-step{order:1;display:flex;flex-direction:column;row-gap:16px;padding:0} #start#start#start .opening-creation .wiz-nav{order:2} #start#start#start .opening-creation .start-formcol>.field{margin:0 0 14px} #start#start#start .opening-creation .opening-chapter{padding:8px 0 14px} #start#start#start .opening-creation .opening-chapter h2{font-size:21px;margin:4px 0} #start#start#start .opening-creation .opening-chapter p{font-size:13px} #start#start#start .opening-back{min-height:40px;padding:6px 14px;font-size:12.5px} /* 步驟條：號碼在上、標籤在下，連接線畫在兩顆號碼之間 */ #start#start#start .opening-creation .wiz-dots{align-items:flex-start} #start#start#start .opening-creation #wizard .wiz-dot,#start#start#start .opening-creation #wizard .wiz-dot:last-child{flex:1 1 0;position:relative;flex-direction:column;gap:5px;min-height:52px;padding:0;font-size:12px;line-height:1.2} #start#start#start .opening-creation #wizard .wiz-dot::after{position:absolute;top:13px;left:calc(50% + 19px);right:calc(-50% + 19px);min-width:0;margin:0} #start#start#start .opening-creation .wiz-label{padding-top:10px} #start#start#start .opening-creation .wiz-label b{font-size:16px} #start#start#start .opening-creation #seg-hand{grid-template-columns:repeat(2,minmax(0,1fr))} #start#start#start .opening-creation .wiz-step .seg button{min-height:48px} #start#start#start .opening-creation .wiz-nav{position:sticky;bottom:10px;z-index:6;margin:16px 0 0;padding:10px;border:1px solid var(--cr-line);border-radius:999px;background:var(--op-panel);box-shadow:0 10px 28px rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} #start#start#start .opening-creation #wiz-prev{padding:0 18px} } /* 續玩卡：有存檔時是這張卡片的主角 */ #start#start#start .opening-journey>#continue-banner{gap:14px;margin:0 0 18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--op-accent) 50%,transparent);border-radius:14px;background:var(--cr-soft)} #start#start#start .opening-journey .continue-text{display:flex;flex-direction:column;gap:4px} #start#start#start .opening-journey .continue-text b{font:800 12px var(--sans);letter-spacing:.1em;color:var(--op-accent)} #start#start#start .opening-journey .continue-text span{font:800 18px/1.5 var(--sans);color:var(--op-text)} #start#start#start .opening-journey .continue-actions{flex-direction:column;align-items:stretch;gap:4px} #start#start#start .opening-journey #btn-continue{flex:none;min-height:54px;clip-path:none;border-radius:12px;font:800 16px var(--sans);box-shadow:0 8px 22px color-mix(in srgb,var(--op-accent) 30%,transparent)} #start#start#start .opening-journey #btn-discard-save{flex:none;align-self:center;width:auto;min-height:36px;padding:4px 10px;background:none;border:0;box-shadow:none;clip-path:none;color:var(--op-muted);font:600 12.5px var(--sans);text-decoration:underline;text-underline-offset:3px} #start#start#start .opening-journey #btn-discard-save:hover{color:var(--op-text)} #start#start#start .opening-journey:has(#continue-banner[style*="flex"]) .opening-welcome{margin-bottom:12px;font-size:13px} #start#start#start .opening-new{border-radius:12px} /* 作品聲明：加一層半透明底，字放大一點，任何背景都讀得到 */ #start#start#start .start-disclaimer{width:auto;max-width:min(1180px,calc(100% - 20px));align-self:center;margin:22px auto 18px;padding:10px 22px;border-radius:999px;background-color:rgba(4,14,24,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#f1ece0;font-size:12px;text-shadow:none} #start#start#start .start-disclaimer b{font-size:12px;color:var(--op-accent)} #start#start#start[data-theme="light"] .start-disclaimer{background-color:rgba(255,249,234,.84);color:#2c4a40} @media(max-width:699px){ #start#start#start .start-disclaimer{width:100%;max-width:none;margin:14px 0 18px;padding:14px 16px;border-radius:14px;font-size:12px;line-height:1.7;text-align:left} #start#start#start .start-disclaimer b{display:block;margin:0 0 6px} #start#start#start .start-disclaimer span{display:block;position:relative;padding-left:14px;margin-top:4px} #start#start#start .start-disclaimer span+span::before{content:none} #start#start#start .start-disclaimer span::after{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--op-accent)} } /* 細修：種子欄淺色不要白底、淺色章節標題換深字、手機最後一步按鈕不折行、桌機返回鈕跟章節標題同一列 */ #start#start#start .opening-creation .seed-row input{background:transparent;box-shadow:none} #start#start#start[data-theme="light"] .opening-creation .opening-chapter{color:#183d35;text-shadow:0 1px 6px #fff,0 0 14px #fff8} #start#start#start .opening-creation .wiz-nav .btn{white-space:nowrap} #start#start#start[data-theme="light"] .opening-journey:has(#continue-banner[style*="flex"]) .opening-new{border-color:color-mix(in srgb,var(--op-text) 32%,transparent)} @media(min-width:1100px){ #start#start#start .opening-creation{position:relative} #start#start#start .opening-creation .opening-back{position:absolute;left:0;top:10px;z-index:2} #start#start#start .opening-creation .opening-chapter{padding:6px 0 18px} } @media(max-width:1099px){ #start#start#start .opening-creation .wiz-nav .btn{font-size:14.5px;padding:0 14px} #start#start#start .opening-creation #wiz-prev{padding:0 16px} } /* 選中的勾移到按鈕右上角外緣，不壓到選項文字；淺色主題的描邊加深一階 */ #start#start#start .opening-creation .seg button{overflow:visible} #start#start#start .opening-creation .seg button.on::after{top:-7px;right:-7px;width:18px;height:18px;font-size:11px;line-height:18px;box-shadow:0 0 0 2px var(--op-panel)} #start#start#start[data-theme="light"] .opening-creation{--op-edge:#958d6c} @media(max-width:1099px){ #start#start#start .opening-creation #seg-arm{grid-template-columns:repeat(2,minmax(0,1fr))} } #start#start#start[data-theme="light"] .opening-creation{--cr-line:color-mix(in srgb,#958d6c 55%,transparent)} #start#start#start .start-disclaimer{white-space:normal;border-radius:16px;box-sizing:border-box} /* ---------- 2026-10-24 登入雲端帳號時的開場（Claude） ---------- 雲端上有存檔時，登入卡就是主角：存檔摘要＋一鍵「接續這段生涯」，卡片排到最前面，「開始新的棒球人生」退成次要。 帳號與資料、最近生涯這兩個展開區統一成圓角卡片與膠囊按鈕。 */ #start#start#start .opening-lobby:has(#cloud-resume-go) .opening-cloud{order:-1} #start#start#start .opening-lobby:has(#cloud-resume-go) .opening-new{background:transparent;color:var(--op-text);border-color:var(--op-edge);box-shadow:none} #start#start#start[data-theme="light"] .opening-lobby:has(#cloud-resume-go) .opening-new{border-color:color-mix(in srgb,var(--op-text) 32%,transparent)} #start#start#start .opening-cloud #cloud-bar:not(:has(#cloud-login)){flex-wrap:wrap;align-items:center;align-content:flex-start;gap:14px 12px} #start#start#start .opening-cloud .cloud-face{width:46px;height:46px;border:2px solid var(--op-accent);background:var(--cr-soft);color:var(--op-accent);opacity:1;font-size:20px} #start#start#start .opening-cloud #cloud-bar:not(:has(#cloud-login)) .cloud-text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px} #start#start#start .opening-cloud .cloud-text b{font-size:16px} #start#start#start .opening-cloud .cloud-text span{font-size:12.5px;line-height:1.6} #start#start#start .opening-cloud .cloud-hint-link{color:var(--op-accent);background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer} #start#start#start .opening-cloud .cloud-save{flex:1 1 100%;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--op-accent) 50%,transparent);border-radius:14px;background:var(--cr-soft)} #start#start#start .opening-cloud .cloud-save-k{font:800 12px var(--sans);letter-spacing:.1em;color:var(--op-accent)} #start#start#start .opening-cloud .cloud-save>b{font:800 18px/1.4 var(--sans);color:var(--op-text)} #start#start#start .opening-cloud .cloud-save .cc-facts{margin:2px 0 0} #start#start#start .opening-cloud .cloud-save .cc-fact :is(dt,.v2-ic){color:var(--op-muted)} #start#start#start .opening-cloud .cloud-save .cc-fact dd{color:var(--op-text);font-size:12.5px} #start#start#start .opening-cloud #cloud-bar:not(:has(#cloud-login)) .cloud-actions{flex:1 1 100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0} #start#start#start .opening-cloud #cloud-bar:not(:has(#cloud-login)) .cloud-actions :is(.btn,.cloud-fold){flex:none;width:100%;margin:0;clip-path:none} #start#start#start .opening-cloud #cloud-resume-go{min-height:54px;border-radius:12px;background:var(--op-accent);border:1px solid var(--op-accent);color:var(--op-button);font:800 16px var(--sans);text-align:center;box-shadow:0 8px 22px color-mix(in srgb,var(--op-accent) 30%,transparent)} #start#start#start .opening-cloud #cloud-resume-go::after{content:" →"} #start#start#start .opening-cloud #cloud-login{border-radius:12px;clip-path:none;text-align:center;font-weight:800} #start#start#start .opening-lobby .cloud-fold{justify-content:center;min-height:42px;padding:8px 16px;border:1px solid var(--op-edge);border-style:solid;border-radius:999px;background:transparent;color:var(--op-text);font:700 13px var(--sans)} #start#start#start .opening-lobby .cloud-fold::before{color:var(--op-accent)} #start#start#start .opening-lobby .cloud-fold:hover{border-color:var(--op-accent);color:var(--op-accent)} /* 有存檔時「帳號與資料」退成一行小連結式的次要按鈕，不跟接續搶 */ #start#start#start .opening-cloud .cloud-save~.cloud-actions #cloud-more{width:auto;align-self:center;min-height:36px;border:0;padding:4px 10px;color:var(--op-muted);font-size:12.5px} #start#start#start .opening-cloud .cloud-save~.cloud-actions #cloud-more:hover{color:var(--op-text)} /* 展開區：帳號與資料 */ #start#start#start .opening-cloud-details>.cloud-panel{border-radius:16px;border-color:var(--cr-line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch} #start#start#start .opening-cloud-details .btn{clip-path:none;border-radius:12px;min-height:46px;text-align:center;font-weight:700;margin:0;border-color:var(--cr-line)} #start#start#start .opening-cloud-details .btn:hover{border-color:var(--op-accent)} #start#start#start .opening-cloud-details .btn.cloud-danger:hover{border-color:currentColor} #start#start#start .opening-cloud-details .cloud-priv{grid-column:1/-1;justify-self:center;font-size:12px} /* 最近生涯 */ #start#start#start #cloud-careers .cloud-careers-t{width:auto;margin:0 auto;display:flex} #start#start#start #cloud-careers .cloud-career{border-radius:16px;border-color:var(--cr-line)} #start#start#start #cloud-careers .cc-head b{color:var(--op-text);font-size:16px} #start#start#start #cloud-careers .cc-fact :is(dt,.v2-ic){color:var(--op-muted)} #start#start#start #cloud-careers .cc-fact dd{color:var(--op-text)} #start#start#start #cloud-careers .btn{clip-path:none;border-radius:999px;min-height:42px;text-align:center;margin:0;border-color:var(--cr-line);background:transparent;color:var(--op-text);font-weight:700} #start#start#start #cloud-careers .btn:hover{border-color:var(--op-accent);color:var(--op-accent)} #start#start#start #cloud-careers .btn.cc-seed{border-color:color-mix(in srgb,var(--op-accent) 55%,transparent);color:var(--op-accent);background:var(--cr-soft)} @media(max-width:699px){ #start#start#start .opening-cloud-details>.cloud-panel{grid-template-columns:minmax(0,1fr)} #start#start#start .opening-cloud .cloud-face{width:40px;height:40px} } #start#start#start .opening-cloud-details #cloud-logout{grid-column:1/-1} #start#start#start[data-theme="light"]{--cr-line:color-mix(in srgb,#8d8566 55%,transparent)} #start#start#start .opening-cloud-details .btn{border:1px solid var(--cr-line)} #start#start#start .opening-cloud-details .btn.cloud-danger{border-color:color-mix(in srgb,currentColor 55%,transparent)} #start#start#start #cloud-careers .cloud-careers-t{background:var(--op-card);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-color:var(--cr-line)} #start#start#start .opening-lobby .cloud-fold{border-color:var(--cr-line)}