/* Title screen: one coherent seaside scene and readable, tightly framed faces. */
body[data-mode=lobby] #world,body[data-mode=select] #world{visibility:hidden}
#lobby{position:fixed;inset:0;isolation:isolate}
.hero-stage,body[data-mode=select] .hero-stage{position:absolute;inset:0;pointer-events:none;z-index:-2;opacity:1}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.hero-stage canvas:active{cursor:grabbing}
#lobby:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#092b35f2 0%,#123943d6 24%,#163e4770 43%,transparent 66%),linear-gradient(0deg,#092a35b8,transparent 28%,transparent 80%,#143f4b44)}
.vignette{display:none}.hero-orbit{display:none}
/* Keep the start-page settings at the right edge of the existing header. */
.lobby-top>.lobby-menu{margin-left:auto}
.lobby-top{top:4%;left:5%;right:5%}.brand-symbol{color:#efda9b;border-color:#ddc68b;background:#19414b80}.brand small{color:#b6c9ca}.quiet{color:#f2ecd7}.build-label{color:#bfd0cf}.build-label em{color:#a9c1c4}
.lobby-copy{left:7%;top:24%;width:350px}.lobby-copy h1{font-size:clamp(40px,3.7vw,64px);line-height:1.35;letter-spacing:4px;margin:20px 0 24px;text-shadow:0 2px 12px #13333a60}.lobby-copy h1 strong{color:#f0d694}.lobby-copy .intro{font-size:14px;color:#cee0dd;line-height:1.9;margin-bottom:30px;letter-spacing:1px}.eyebrow{color:#dfce9f}
.selected-hero{width:286px;background:#143b44d9;border-color:#8da8a1;box-shadow:none;padding:8px}.selected-hero img{width:52px;height:52px;border-color:#acb9a1;object-fit:cover}.selection-label{width:286px;color:#abc7c6}.selected-hero small{color:#bfcebf}.lobby-copy .start-button{width:286px;background:linear-gradient(115deg,#e2cb91,#b59859);box-shadow:inset 0 0 0 3px #c5aa70,0 6px 18px #062a3555;color:#23373b;letter-spacing:4px}.start-note{width:286px;color:#bed0ce}
.hero-caption,body[data-mode=select] .hero-caption{top:auto;bottom:19%;right:8%;text-align:right;color:#f9eecf}.hero-caption>span{color:#fff0bc;font-size:11px}.hero-caption b{font-size:34px;margin:8px 0}.hero-caption small{font-size:12px;color:#e0e9dc}.hero-caption:after{content:'拖动鱼人区域 · 旋转查看';display:block;font-size:10px;color:#d3dfda;margin-top:12px}
.lobby-bottom{left:5%;right:5%;bottom:4%;border-color:#abc5bd55;padding-top:17px}.lobby-bottom>div:first-child b{color:#e7ce90}.lobby-bottom span{color:#d7e1d9}.lobby-bottom small{color:#a9c4c4}.prototype-mark{color:#b3c9c6!important}
.choose-heading{left:7%;top:20%;width:340px}.choose-heading h1{font-size:38px;line-height:1.45;color:#fff0cc;margin:16px 0}.choose-heading p{font-size:14px;color:#cbdfda;line-height:1.8}.choose-heading>small{font-size:11px;color:#b2c8c6}.back-button{color:#c1d9d4;font-size:13px;margin-bottom:24px}.choose-heading .start-button{width:286px}.choose-heading .eyebrow{letter-spacing:2px;font-size:10px}
body[data-mode=select] .hero-caption{bottom:26%;right:8%}
#hero-roster{left:7%;right:7%;bottom:4%;gap:12px}.roster-card{height:137px;display:flex;align-items:center;background:#153941ed;border-color:#789f9c;padding:8px;box-shadow:0 5px 10px #08252e55}.roster-card img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:1;mix-blend-mode:normal;border:0}.roster-card>div{left:0;right:0;bottom:0;padding:22px 10px 8px;background:linear-gradient(transparent,#0c2935ed 45%);text-align:center}.roster-card b{font:20px 'Microsoft YaHei',sans-serif;letter-spacing:3px}.roster-card small{display:none}.roster-card.selected{border:2px solid #f0d698;box-shadow:0 0 0 1px #335e64;transform:translateY(-5px)}.roster-card.selected b{color:#f9e1a6}.hero-number{font-size:10px;color:#d7e8dd;text-shadow:0 1px 3px #000}.roster-card i{background:#15333a;padding:2px 5px}
/* Card text never passes through a glow, scale, brightness filter or sheen layer. */
#draw-dialog{left:154px;right:244px;max-width:960px;bottom:calc(var(--console) + 18px)}
.pick-header{margin-bottom:9px;height:27px}.pick-header h2{font-size:19px;color:#fff3d4}
.draw-candidates{gap:14px;perspective:none;align-items:stretch}
.choice-card{max-width:310px;height:440px;min-height:0;border-radius:4px;background:#142630;box-shadow:inset 0 0 0 3px #101b24,0 6px 12px #0007;transition:transform .16s ease,border-color .16s ease;filter:none!important;text-shadow:none;transform:none;overflow:hidden}
.choice-card.tier-purple{background:#292335}.choice-card.tier-gold{background:#302b20}
.choice-card:hover,.choice-card:focus-visible{transform:translateY(-7px);filter:none;border-color:var(--card-color);box-shadow:inset 0 0 0 2px var(--card-line),0 7px 14px #0008;outline:none}
.choice-card:after{inset:3px;border-color:#ffffff0c;border-radius:1px}
.card-topline{padding:9px 13px;font-size:12px;background:#0003;gap:10px;align-items:center;flex-shrink:0}.card-topline>span{background:#92bccc20;border:1px solid #a3c7dd40;padding:1px 6px;font-size:11px;color:#d6e8f0}.card-topline>b{font:600 14px 'Microsoft YaHei',sans-serif;opacity:1;color:var(--card-color)}
.card-title-row{display:flex;gap:12px;padding:12px 14px 10px;align-items:center}.card-title-row .card-art{position:relative;overflow:hidden;flex:0 0 52px;height:52px;margin:0;border:1px solid var(--card-line);background:#0a131b}.card-art img{width:50px;height:50px;border:none;box-shadow:none}.choice-card h3{margin:0 0 6px;font:600 22px 'Microsoft YaHei',sans-serif;letter-spacing:1px;text-align:left;color:#fff0cd}.card-title-row>div>small{color:#c0c2bd;font-size:11px}.card-title-row .card-sheen{inset:-30px -80px;z-index:1;background:linear-gradient(110deg,transparent 41%,#ffffff45 49%,transparent 57%)}
.card-copy{padding:0 14px;gap:10px}.card-section small{font-size:11px;letter-spacing:0;color:#a8c1cd;margin-bottom:4px}.card-section p{font-size:13px;line-height:1.6;color:#e9e9df;margin:0}.card-gain p{font-size:15px;font-weight:600;line-height:1.55;color:#f3dfa3;min-height:44px}.card-section.card-bond{padding-top:8px;margin-top:auto}.card-bond small{font-size:11px;color:var(--card-color)}.card-bond p{font-size:12px;line-height:1.55;color:#e0daca}
.card-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 5px;margin:10px 13px 0;flex-shrink:0}.card-members>div{display:flex;align-items:center;gap:4px;min-width:0;border:1px solid #66788440;background:#070e1633;padding:3px}.card-members img{width:25px;height:25px;object-fit:contain;filter:grayscale(.9);opacity:.6}.card-members span{font-size:10px;line-height:1.35;color:#bac5c5;overflow-wrap:anywhere}.card-members small{display:block;font-size:9px;color:#83989d;margin-top:2px}.card-members .owned{border-color:#88aa6a70;background:#8daa4820}.card-members .owned img,.card-members .candidate img{filter:none;opacity:1}.card-members .owned small{color:#b9d88d}.card-members .candidate{border-color:#d1bb6a;background:#bdaa5420}.card-members .candidate small{color:#efd591}
.card-collection{margin-top:10px;padding:8px 13px;font-size:11px;background:#050b10a6;align-items:center}.card-collection>span{color:#c4d0d1}.card-collection>b{color:#e8d7a9;font-size:11px}
#draw-dialog .draw-footer{margin-top:11px}#draw-dialog .draw-footer button{padding:8px 18px;font-size:12px;letter-spacing:1px}
#draw-dialog .choice-card.chosen{filter:none;animation:cardCollect .26s ease-in forwards}#draw-dialog.choosing .choice-card:not(.chosen){transform:translateY(8px);filter:none}
@keyframes cardCollect{0%{transform:translateY(-7px);opacity:1;border-color:#fff5ca}55%{transform:translateY(-15px);opacity:1;border-color:#fff5ca}100%{transform:translateY(20px);opacity:0}}
@media(max-height:800px){.choice-card{height:408px}.card-title-row{padding:9px 12px 7px}.card-title-row .card-art{height:45px;flex-basis:45px}.card-art img{width:43px;height:43px}.card-copy{gap:7px}.card-gain p{font-size:14px;min-height:40px}.card-section p{font-size:12px}.card-bond p{font-size:11px}.card-members{margin-top:7px;gap:4px}.card-members img{width:23px;height:23px}.card-collection{margin-top:7px}.lobby-copy{top:23%}.lobby-copy .intro{margin-bottom:18px}.choose-heading{top:17%}.choose-heading h1{font-size:32px}.roster-card{height:120px}}
@media(max-width:1300px){#draw-dialog{left:100px;right:100px}.choice-card{max-width:300px}.lobby-copy{left:6%;width:320px}.lobby-copy h1{font-size:43px}.hero-caption{right:7%}.choose-heading{left:6%;width:300px}.hero-caption small{font-size:11px}#hero-roster{left:6%;right:6%;gap:9px}}
@media(max-width:1000px){#draw-dialog{left:48px;right:48px}.draw-candidates{gap:10px}.card-topline{padding:8px 10px}.card-topline>b{font-size:12px}.card-title-row{padding:10px;gap:8px}.choice-card h3{font-size:18px}.card-copy{padding:0 11px}.card-members{margin-left:10px;margin-right:10px}.card-members>div{flex-direction:column;text-align:center}.card-members img{width:25px;height:25px}.card-members span{font-size:10px}.card-members small{font-size:8px}.choice-card{height:468px}.card-section p{font-size:12px}.card-gain p{font-size:14px}.lobby-copy{width:280px}.lobby-copy h1{font-size:37px}.hero-caption{bottom:18%}.hero-caption small{display:none}.choose-heading{width:270px}.choose-heading h1{font-size:30px}.choose-heading p{font-size:12px}.choose-heading .start-button{width:250px}.roster-card{height:108px;padding:3px}.roster-card b{font-size:17px}}
@media(max-width:1000px) and (max-height:800px){.choice-card{height:408px}.card-members{grid-template-columns:repeat(3,1fr)}.card-members>div{flex-direction:row;text-align:left;padding:2px}.card-members img{width:20px;height:20px}.card-members span{font-size:9px}.card-members small{font-size:8px}.card-bond p{font-size:10px}}
#hero-roster{left:50%;right:auto;transform:translateX(-50%);width:min(1020px,86vw)}
.roster-card{height:148px;display:block;padding:5px 5px 31px}.roster-card>div{padding:6px 6px 7px;background:#102c35}.roster-card img{object-fit:cover;object-position:50% 58%}.choose-heading h1{max-width:330px;font-size:35px}.choose-heading h1 br{display:block}
@media(max-height:800px){.roster-card{height:126px}.choose-heading h1{font-size:30px}}
.lobby-copy{width:430px;top:19%}.lobby-copy h1{font-size:clamp(40px,4vw,62px);margin:20px 0}.lobby-copy .intro{font-size:13px;line-height:1.9;margin-bottom:22px;letter-spacing:.4px}.intro p{margin:0 0 12px}.lobby-copy .eyebrow{font-size:10px;letter-spacing:2px}.lobby-copy .start-note{font-size:10px}.hero-caption>span{letter-spacing:3px}
@media(max-width:1300px){.lobby-copy{width:360px;top:19%}.lobby-copy h1{font-size:44px}.lobby-copy .intro{font-size:12px}}
@media(max-height:800px){.lobby-copy{top:17%}.lobby-copy h1{font-size:40px;margin:15px 0}.lobby-copy .intro{font-size:12px;line-height:1.7;margin-bottom:15px}.intro p{margin-bottom:9px}}
.choice-card{height:auto;min-height:440px}.card-collection{flex-shrink:0}.card-copy{flex-shrink:0}
@media(max-height:800px){.choice-card{height:auto;min-height:408px}}