/* TopLords V14 — navy / gold fantasy strategy redesign. CSS only, keep application behavior unchanged. */
:root{color-scheme:dark;--bg:#081424;--surface:#132238;--inner:#1c3049;--edge:#38516b;--txt:#f5f1e9;--muted:#afc0d0;--accent:#e9ad3b;--gold:#ffd374;--warn:#fbd68b;--deep:#101d30;--cyan:#91c7df;font-family:system-ui,-apple-system,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:22px}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 5% 0%,#203b5b 0%,transparent 36%),radial-gradient(ellipse at 95% 16%,#203852 0%,transparent 37%),linear-gradient(145deg,#081421,#0d1a2b 55%,#091523);color:var(--txt);line-height:1.55;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.16;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 79px,#7da1c0 80px,transparent 81px),repeating-linear-gradient(0deg,transparent 0,transparent 79px,#7da1c0 80px,transparent 81px)}.ambient{pointer-events:none;position:absolute;border-radius:50%;filter:blur(85px);opacity:.16;z-index:-1}.ambient-left{width:360px;height:350px;top:340px;left:-170px;background:#3d85c6}.ambient-right{width:350px;height:300px;right:-170px;top:630px;background:#b7772d}.shell{max-width:1480px;margin:0 auto;padding-left:clamp(16px,2.5vw,34px);padding-right:clamp(16px,2.5vw,34px)}
/* masthead */
.top{min-height:100px;display:flex;gap:20px;align-items:center;justify-content:space-between}.brand-lockup{display:flex;align-items:center;gap:14px}.brand-emblem{display:grid;place-items:center;width:58px;height:62px;flex:none;font-size:33px;color:#ffe6a3;text-shadow:0 2px 5px #000;background:linear-gradient(150deg,#364e69,#101f33);border:2px solid #c38a31;clip-path:polygon(50% 0%,93% 16%,88% 70%,50% 100%,12% 70%,7% 16%);filter:drop-shadow(0 5px 3px #0007)}.brand-words{display:flex;flex-direction:column}.eyebrow,.section-kicker,.banner-kicker{font-size:10px;font-weight:800;letter-spacing:.19em;color:#f5c26e}.brand-name,.footer-brand{font-size:clamp(24px,2.7vw,35px);line-height:1.05;letter-spacing:.08em;font-weight:1000;color:#f4f7fa;text-shadow:0 2px 0 #233950}.brand-name span,.footer-brand span{color:#ffcb50;text-shadow:0 2px 0 #ad6a18,0 3px 8px #0006}.brand-caption{font-size:11px;letter-spacing:.09em;color:#c5d1dc;margin-top:5px}.site-nav{display:flex;gap:5px;align-items:center;padding:5px;border:1px solid #4a6076;background:#0a182a9e;border-radius:12px}.site-nav a{color:#d3e0e8;text-decoration:none;font-size:13px;font-weight:750;padding:10px 14px;border-radius:8px;transition:background .2s,color .2s}.site-nav a:hover,.site-nav a:focus-visible{color:#ffd780;background:#263c55}
/* hero banner */
.hero-banner{position:relative;display:flex;overflow:hidden;min-height:345px;margin-top:1px;margin-bottom:25px;border-top:1px solid #97703c;border-bottom:1px solid #81623a;background:radial-gradient(ellipse at 85% 25%,#3c608180 0%,transparent 49%),linear-gradient(112deg,#101f33 0%,#1b3451 62%,#112136 100%);box-shadow:inset 0 0 0 1px #fff1,0 13px 35px #0004}.hero-banner:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0,transparent 85px,#d4b77d08 86px,transparent 88px),radial-gradient(circle at 72% 100%,#d59e3628,transparent 32%);pointer-events:none}.hero-banner:after{content:"✧";position:absolute;right:29%;top:25px;color:#ffcc7740;font-size:38px}.banner-content{z-index:2;position:relative;max-width:700px;padding:44px 0 36px 23px}.banner-kicker{display:block;color:#ffe29b;font-size:11px}.hero-banner h1{font-size:clamp(27px,3.4vw,47px);line-height:1.26;margin:15px 0 13px;letter-spacing:.035em;text-shadow:0 3px 9px #0009}.hero-banner h1 span{display:block;color:#ffd16c}.hero-banner p{max-width:550px;color:#cfdae5;font-size:14px;margin:0;line-height:1.85}.banner-actions{display:flex;gap:11px;flex-wrap:wrap;margin:23px 0}.cta-primary,.cta-ghost{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:45px;text-decoration:none;font-size:13px;font-weight:850;padding:11px 20px;border-radius:6px}.cta-primary{color:#402607;background:linear-gradient(#ffe29a,#eaaa39);border:1px solid #f3ce82;box-shadow:inset 0 1px #fff8,0 5px 18px #0c121db0}.cta-primary:hover{filter:brightness(1.08)}.cta-ghost{color:#e4eaf2;background:#11243a7d;border:1px solid #6c8498}.cta-ghost:hover{border-color:#f6c36b;color:#ffe2ac}.banner-facts{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#d5e0e8}.banner-facts span{display:flex;gap:7px;align-items:baseline;padding-right:14px;border-right:1px solid #58718c}.banner-facts span:last-child{border:0}.banner-facts b{color:#ffcb67;font-size:17px;font-variant-numeric:tabular-nums}.banner-showcase{position:absolute;right:15px;bottom:0;height:100%;width:39%;min-width:310px;pointer-events:none}.banner-showcase:before{content:"";position:absolute;left:16%;top:12%;width:73%;aspect-ratio:1;border:1px solid #e9b34a55;border-radius:50%;box-shadow:0 0 0 24px #ddab2e0d,0 0 45px #cc98311c;background:radial-gradient(circle,#dda53e2c,transparent 66%)}.banner-showcase img{position:absolute;object-fit:cover;object-position:top;width:160px;height:230px;border:3px solid #b78c4d;border-radius:12px 12px 3px 3px;box-shadow:0 12px 25px #030a15c9,0 0 0 4px #1c314a}.banner-showcase .showcase-main{width:205px;height:280px;right:26%;bottom:-20px;z-index:3;transform:rotate(-2deg);border-color:#ffd37b}.banner-showcase .showcase-back{right:59%;bottom:5px;transform:rotate(-11deg);z-index:2}.banner-showcase .showcase-side{right:1%;bottom:1px;transform:rotate(10deg);z-index:1}.showcase-spark{position:absolute;color:#ffd67a;font-size:28px;text-shadow:0 0 10px #ff9c28}.s1{top:20%;left:18%}.s2{right:12%;top:11%}
/* primary panel grid */
.layout{display:grid;grid-template-columns:minmax(245px,.89fr) minmax(340px,1.43fr) minmax(295px,1.08fr);gap:18px;align-items:start;padding-bottom:25px}.panel{position:relative;min-width:0;overflow:hidden;border:1px solid #44607b;border-radius:11px;padding:19px;background:linear-gradient(155deg,#223854 0%,#122338 20%,#111f31 100%);box-shadow:inset 0 1px #ffffff13,0 14px 28px #0004}.panel:before,.panel:after{content:"";position:absolute;pointer-events:none;width:13px;height:13px;opacity:.9}.panel:before{top:5px;left:5px;border-top:2px solid #ad7a32;border-left:2px solid #ad7a32}.panel:after{bottom:5px;right:5px;border-right:2px solid #ad7a32;border-bottom:2px solid #ad7a32}.full{grid-column:1/-1}.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 17px;padding-bottom:14px;border-bottom:1px solid #b58a4354}.heading h2{font-size:21px;line-height:1.2;margin:4px 0 0;font-weight:850;color:#fff4dc;letter-spacing:.03em}.heading-note{font-size:11px;color:#e7c78e;white-space:nowrap;border:1px solid #8d734b;background:#d29a3120;padding:5px 9px;border-radius:5px}.muted{font-size:13px;color:var(--muted)}.small{font-size:12px}.notice{color:#ffe29d;font-size:13px}
/* inputs and controls */
button,.button{border-radius:7px;padding:11px 15px;min-height:42px;border:1px solid #efc16c;background:linear-gradient(#ffdc86,#d99526);color:#302007;font-size:13px;font-family:inherit;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-align:center;box-shadow:inset 0 1px #fff8,0 3px 9px #0003;transition:transform .15s,filter .15s,border-color .15s}button:hover,.button:hover{filter:brightness(1.075);transform:translateY(-1px)}button:disabled{opacity:.48;cursor:not-allowed;transform:none}.secondary{color:#dce7ef;background:linear-gradient(#2d445c,#1b3046);border-color:#657e93;box-shadow:inset 0 1px #ffffff17}.danger{color:#ffe4df;background:linear-gradient(#753742,#4b2532);border-color:#ae6d6f}.wide{width:100%}input,select{appearance:auto;display:block;width:100%;min-width:0;min-height:41px;color:#f2f5f8;background:#101e30;border:1px solid #4b637a;border-radius:6px;padding:9px 11px;font:inherit;font-size:13px;transition:border .2s,box-shadow .2s}input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #ffce70;outline-offset:2px}input:read-only{background:#253447;color:#acbccd;opacity:1;cursor:default}input:disabled,select:disabled{opacity:.58;cursor:default}input[type=checkbox]{width:18px;height:18px;min-height:auto;accent-color:#f5bd55;flex-shrink:0}label{color:#c2d1e0}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field>label{font-size:12px;color:#c9d5e2}.checkline{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#153247;border:1px solid #52758a;border-radius:7px;margin:13px 0 0;font-size:13px;color:#d9f0ed;cursor:pointer}.actions{display:flex;gap:11px;flex-wrap:wrap}
/* roster */
.roster-controls{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px}.roster-controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#c3d3e2}.roster-controls select{font-size:12px}.hero-list{display:grid;gap:9px;margin:0 0 15px}.hero-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:75px;cursor:pointer;border:1px solid #3d5870;background:linear-gradient(100deg,#1e344d,#17283d);border-radius:8px;padding:8px 10px;color:#f3f6f9;text-align:left;box-shadow:none;transform:none}.hero-item:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:transparent;border-radius:5px}.hero-item:hover{background:linear-gradient(100deg,#2e4660,#1b314b);border-color:#bb985c;transform:none}.hero-item.active{border-color:#e4b456;background:linear-gradient(100deg,#3c4250,#263952);box-shadow:inset 0 0 0 1px #b48a42,0 0 16px #d6a75020}.hero-item.active:before{background:#ffd16e}.avatar,.portrait-large,.position-portrait,.rank-portrait{position:relative;flex-shrink:0;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#3d5269,#182941)}.avatar{width:57px;height:57px;border:2px solid #8c744c;border-radius:7px;font-size:25px}.hero-item.active .avatar{border-color:#ffd077}.avatar img,.portrait-large img,.position-portrait img,.rank-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 17%}.portrait-missing:after{content:"⚔";position:absolute;inset:0;display:grid;place-items:center;font-size:26px;background:#253b50}.hero-meta{display:flex;flex-direction:column;min-width:0}.hero-meta strong{font-size:15px;color:#fff1d4;line-height:1.5}.hero-meta small{font-size:11px;color:#b5c8da;line-height:1.5}.roster-empty{padding:15px;color:#c7d5df;border:1px dashed #667d92;border-radius:7px;font-size:13px}
/* hero editor */
.editor-portrait-line{display:flex;align-items:center;gap:16px;background:linear-gradient(105deg,#2a3f55,#172b41);padding:14px;border:1px solid #536b82;border-radius:9px;margin-bottom:14px}.portrait-large{height:100px;width:100px;border-radius:9px;border:2px solid #e2b66b;box-shadow:0 3px 15px #0008;font-size:34px}.editor-portrait-line strong{font-size:21px;color:#ffe1a0}.editor-portrait-line .muted{margin-top:5px}.completion{border:1px solid #97723d;background:#3c311f80;padding:12px 14px;border-radius:7px;margin-bottom:15px;font-size:13px;color:#ffe7b7}.completion.complete{border-color:#47866e;background:#17392f8c;color:#b7efcb}.completion p{margin:5px 0 0;font-size:12px;color:#d1dce6;line-height:1.7}h3{font-size:16px;color:#ffdb9b;margin:24px 0 12px;padding:0 0 6px;border-bottom:1px solid #5b63804f}.skill{position:relative;margin:12px 0;padding:15px;background:linear-gradient(140deg,#1c2e45,#172639);border:1px solid #4c6681;border-radius:9px}.skill:before{content:"";position:absolute;top:0;left:16px;right:16px;height:2px;background:linear-gradient(90deg,transparent,#e7ad4f7a,transparent)}.skill-title{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:0 0 10px}.skill-title strong{font-size:14px;color:#fff2d3}.tag{display:inline-flex;align-items:center;padding:4px 9px;font-size:11px;font-weight:750;border-radius:4px;color:#ffdc97;background:#795c2938;border:1px solid #97723e}.skill .fields{margin-top:10px}.skill-preview{margin:0 0 13px;padding:13px;background:#0c1b2c;border:1px solid #35546c;border-left:3px solid #d6a24e;border-radius:6px;color:#dfe9f4;font-size:13px;line-height:1.85}.editable-value{color:#ffd584;font-weight:850}.unknown{color:#f5b68b;font-weight:750}.skill-toggle{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:12px;border-radius:7px;background:#1d3b41;border:1px solid #538c77;cursor:pointer}.skill-toggle input{width:19px;height:19px;min-height:19px;accent-color:#f8c36a}.skill-toggle span{display:flex;flex-direction:column;gap:3px}.skill-toggle strong{font-size:13px;color:#e9f6e9}.skill-toggle small{font-size:12px;color:#b4dbcf}.skill-off{opacity:.83;background:#1a2634}.skill-off .skill-preview{border-style:dashed;opacity:.76}.disabled-note{color:#ffcc7c}.help{font-size:12px;color:#aebfce;line-height:1.7;margin:10px 0}
/* formation */
.rowlabel{text-align:center;font-size:12px;color:#e6d4b9;font-weight:800;letter-spacing:.06em;margin:16px 0 10px}.slots{display:grid;gap:10px}.front{grid-template-columns:repeat(2,minmax(0,1fr))}.back{grid-template-columns:repeat(3,minmax(0,1fr))}.slot{position:relative;min-width:0;text-align:center;padding:10px 7px;background:linear-gradient(155deg,#263b54,#14273e);border:1px solid #58728b;border-radius:8px}.slot:before{content:"";position:absolute;left:10px;right:10px;top:0;height:2px;background:#ba8d4d6b}.slot>span:first-child{color:#e1bf85;font-size:11px;font-weight:800}.position-portrait{width:70px;height:70px;border:2px solid #b59057;border-radius:9px;margin:9px auto 6px;font-size:26px}.slot select{font-size:11px;padding:7px 4px;min-height:35px;margin-top:7px}.result{border-top:1px solid #9874465c;margin-top:19px;padding-top:15px}.statline{padding:9px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #3a5267;font-size:13px}.statline strong{color:#ffe0a1;font-variant-numeric:tabular-nums}
/* optimizer */
.optimizer-panel{background:linear-gradient(115deg,#1b3450,#14283d 45%,#15263b);border-color:#96784b}.optimizer-panel .heading h2{font-size:24px}.optimizer-controls{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:7px 0 10px}.optimizer-controls label{display:grid;gap:7px;color:#c7d4df;font-size:12px;max-width:180px}.optimizer-controls input{width:156px}.optimizer-controls button{min-height:45px;font-size:14px;padding:11px 21px}.analysis-explainer{margin:4px 0 16px}.rank-list{display:grid;gap:16px;margin-top:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.rank-card{position:relative;background:linear-gradient(145deg,#1b3048,#132337);border:1px solid #49647f;border-radius:9px;padding:17px;min-width:0}.rank-card:first-child{border-color:#e5b85f;box-shadow:inset 0 0 0 1px #e5b85f55,0 0 22px #ffce6018}.rank-card:first-child:before{content:"BEST TEAM";display:block;width:max-content;background:linear-gradient(#ffe6a5,#db9c31);color:#3c280b;font-size:10px;font-weight:950;letter-spacing:.14em;padding:5px 9px;margin:-17px 0 15px -17px;border-radius:8px 0 5px 0}.rank-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.rank-head strong{font-size:15px;color:#ffefd1}.badge-score{font-size:17px;color:#ffd26d;font-variant-numeric:tabular-nums;white-space:nowrap}.rank-portrait-formation{display:grid;gap:12px;margin:13px 0;padding:14px 10px;border:1px solid #526c83;border-radius:7px;background:#0e2032bb}.rank-portrait-row{display:flex;justify-content:center;align-items:start;gap:9px;flex-wrap:wrap}.rank-row-label{width:100%;text-align:center;color:#d1bd9e;font-size:11px;font-weight:800}.rank-portrait-member{display:flex;align-items:center;flex-direction:column;gap:4px;min-width:56px;max-width:83px}.rank-portrait{width:54px;height:54px;border:2px solid #aa8d5d;border-radius:7px;font-size:24px}.rank-portrait-member small{font-size:11px;color:#eff3f8;text-align:center}.rank-line{color:#cbd7e4;font-size:12px;line-height:1.8}.rank-stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.rank-stats span{color:#f1d6a6;background:#a77b3422;border:1px solid #806a464a;border-radius:4px;padding:5px 7px;font-size:11px}.rank-warning{border:1px solid #967844;background:#3b311b87;color:#ffe3aa;border-radius:7px;padding:14px;font-size:13px}.rank-warning p{margin:7px 0 0;color:#e7d8bc}.rank-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.rank-details{margin-top:15px;color:#b5c7d8;font-size:13px}.rank-details summary{cursor:pointer;color:#f9d8a0}.rank-details ul{padding-left:20px;line-height:1.8}
/* data/footer */
.data-panel{background:linear-gradient(130deg,#182c42,#101f30)}.data-panel .actions{margin-bottom:12px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:5px;padding-bottom:35px;border-top:1px solid #63758a55}.footer-brand{font-size:18px}.footer-brand small{font-size:10px;color:#8eabba}.site-footer p{max-width:760px;margin:0;color:#93a9bd;font-size:11px}.site-footer a{color:#f6ca78;font-size:12px;text-decoration:none}.site-footer a:hover{text-decoration:underline}
/* responsive */
@media(max-width:1280px){.layout{grid-template-columns:minmax(230px,.85fr) minmax(330px,1.25fr)}.teams{grid-column:1/-1}.hero-banner .banner-content{max-width:620px}.rank-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.hero-banner{min-height:330px}.banner-content{max-width:540px;padding-left:9px}.banner-showcase{right:-75px;opacity:.55}.banner-showcase .showcase-main{right:35%}.hero-banner:before{background:linear-gradient(90deg,#13263bf2 0%,#13263b9e 68%,transparent 100%)}.layout{gap:13px}}
@media(max-width:700px){.top{padding-top:17px;padding-bottom:14px;align-items:flex-start;flex-direction:column}.site-nav{width:100%;justify-content:space-around}.site-nav a{flex:1;text-align:center;padding:10px 3px}.hero-banner{min-height:310px;margin-bottom:16px}.banner-content{padding:28px 0 26px;max-width:100%}.hero-banner h1{font-size:clamp(25px,7vw,35px);max-width:520px}.hero-banner p{max-width:450px}.banner-showcase{right:-160px;opacity:.2}.banner-facts{gap:7px}.banner-facts span{padding-right:8px}.layout{grid-template-columns:1fr}.teams{grid-column:auto}.panel{padding:16px}.roster-controls{grid-template-columns:1fr 1fr}.hero-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-item{padding:7px;min-height:70px}.avatar{height:48px;width:48px}.hero-meta strong{font-size:13px}.hero-meta small{font-size:10px}.rank-list{grid-template-columns:1fr}.site-footer{align-items:flex-start}}
@media(max-width:450px){.brand-emblem{width:47px;height:52px;font-size:27px}.brand-name{font-size:26px}.brand-caption{font-size:10px}.eyebrow{font-size:9px}.hero-banner h1{font-size:28px}.hero-banner .banner-content{padding-top:25px}.banner-facts b{font-size:14px}.hero-list{grid-template-columns:1fr 1fr;gap:7px}.hero-item{gap:7px;padding:6px}.hero-item .avatar{height:43px;width:43px}.hero-meta strong{font-size:12px}.heading h2{font-size:19px}.fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.field>label{font-size:11px}.portrait-large{height:77px;width:77px}.editor-portrait-line strong{font-size:18px}.slot{padding:7px 3px}.slot select{font-size:10px}.position-portrait{height:49px;width:49px}.rank-portrait{width:47px;height:47px}.rank-portrait-member{min-width:49px}.rank-card{padding:12px}.banner-actions{gap:8px}.cta-primary,.cta-ghost{padding:10px 12px}.roster-controls{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}