@import url('../guia-torneos/style.css');
:root{--gold:#d9bc7c;--soft:#a8a99c;--line:#4b402d;--ink:#f0e3c1;--bg:#101612;--surface:#181e18}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% 0,#25251b 0,#111813 47%,#0c120f 100%);color:var(--ink);min-height:100vh}main{max-width:1150px;margin:auto;padding:45px 28px 70px}.intro{margin-bottom:32px}.eyebrow,.overline{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.17em;font-size:10px;font-weight:700;color:#c5a667}.intro h1{font-size:clamp(34px,4.5vw,52px);line-height:1.08;margin:10px 0 12px;color:#f3dfad}.intro p{margin:0;color:#b4b5a7;line-height:1.5;font-size:14px}.workspace{display:grid;grid-template-columns:minmax(300px, .86fr) minmax(0,1.14fr);gap:22px;align-items:start}.panel{border:1px solid var(--line);border-radius:10px;background:linear-gradient(155deg,#1b211a,#141b16);box-shadow:0 18px 45px #0003;overflow:hidden}.controls{padding:26px}.panel-heading{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid #3a392a}.panel-heading h2{font-size:23px;margin:3px 0 0;color:#f0dfb7}.roman{display:grid;place-items:center;border:1px solid #8d7447;color:#ddc288;border-radius:50%;width:35px;height:35px;font-size:14px;flex:none}.group{margin-top:23px}.group-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-family:Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d6d0be}.group-heading small{font-size:10px;letter-spacing:.02em;color:#888e80;font-weight:400}.levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.level{min-height:38px;border:1px solid #505443;border-radius:5px;background:#171d17;color:#a7ac9c;cursor:pointer;font-size:12px;font-weight:700;transition:background .15s,border-color .15s,color .15s}.level:hover{border-color:#b49a68;color:#f5e5bb}.level[aria-pressed=true]{background:linear-gradient(#9b773e,#73552b);border-color:#dfc27d;color:#fff5d3;box-shadow:inset 0 1px #f6dda33b}.level:focus-visible,input:focus-visible{outline:2px solid #f0d28c;outline-offset:2px}.leadership{display:block;margin-top:27px;padding-top:23px;border-top:1px solid #39392a;font-family:Arial,sans-serif;font-weight:700;font-size:12px;color:#ded5bf}.leadership input{display:block;width:100%;margin-top:9px;padding:12px 13px;border:1px solid #6b5c3b;border-radius:5px;background:#0e1511;color:#f3dfad;font-size:18px;font-variant-numeric:tabular-nums}.results .panel-heading{padding:26px 25px 20px}.result-count{margin-left:auto;color:#bba778;font-size:12px;white-space:nowrap}.result-head,.result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.result-head{padding:14px 25px 10px;color:#989f90;font:700 10px Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase}.result-row{margin:0 25px;border-top:1px solid #323c30;padding:11px 0}.troop{display:flex;align-items:center;gap:11px;min-width:0}.type-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid #4c4933;border-radius:6px;background:#22281d;font-size:16px}.troop-name{font-size:14px;color:#ece6d6;overflow-wrap:anywhere}.troop-meta{display:block;color:#9b9f90;margin-top:2px;font:10px Arial,sans-serif;letter-spacing:.05em}.quantity{color:#e4c785;font:bold 15px Arial,sans-serif;font-variant-numeric:tabular-nums}.empty{margin:0;padding:25px;color:#afb1a3;font-size:14px;line-height:1.5}.results{min-height:200px}footer{display:flex;justify-content:center;gap:12px;align-items:center;padding:22px;border-top:1px solid #353a2d;color:#999e90;font:12px Arial,sans-serif}footer [data-sgs-version]{color:#c5a667}@media(max-width:760px){main{padding:30px 16px 45px}.intro{margin-bottom:23px}.intro h1{font-size:35px}.workspace{grid-template-columns:1fr;gap:15px}.controls{padding:20px}.results .panel-heading{padding:21px 20px 17px}.result-head{padding-left:20px;padding-right:20px}.result-row{margin-left:20px;margin-right:20px}.levels{gap:5px}.level{min-height:40px}.group{margin-top:20px}}
/* Compact, metallic troop groups; calculation and other SGS sections are unchanged. */
.intro h1,.panel-heading h2{font-family:Georgia,serif;font-weight:400;color:var(--bright)}.intro h1{font-size:clamp(34px,5vw,54px);line-height:1.12;letter-spacing:-.8px}
main{max-width:1220px}.workspace{grid-template-columns:minmax(290px,.72fr) minmax(0,1.55fr);gap:18px}.controls{padding:20px}.controls .panel-heading{padding-bottom:14px}.controls .group{margin-top:15px}.controls .leadership{margin-top:18px;padding-top:16px}.panel-heading h2{font-size:23px;margin:0}.controls-toggle{display:none}.results{position:relative;border:1px solid #9c7c43;background:linear-gradient(145deg,#191c18,#0d130f 60%,#1e1b14);box-shadow:inset 0 0 0 2px #332a1b,inset 0 0 0 3px #c6a05a66,0 14px 35px #0005}.results:before,.results:after{content:'◆';position:absolute;z-index:1;color:#cba764;font-size:13px;line-height:1;top:4px;text-shadow:0 0 4px #d9b36c}.results:before{left:5px}.results:after{right:5px}.results .panel-heading{padding:17px 18px 12px}.result-head{padding:8px 18px 5px}.result-count{font-size:11px}#resultRows{padding:0 12px 12px}.troop-group{display:flex;min-width:0;margin:4px 0;border:1px solid var(--metal-edge);border-radius:7px;overflow:hidden;background:linear-gradient(110deg,var(--metal-bg),#111712 58%,#121611);box-shadow:inset 0 1px 1px #ffffff18,0 2px 5px #0008}.rank-9{--metal-edge:#60843a;--metal-bg:#15361b;--metal-hi:#699a31;--metal-mid:#245c12;--metal-dark:#102d10}.rank-8{--metal-edge:#777a77;--metal-bg:#303332;--metal-hi:#a0a3a2;--metal-mid:#565958;--metal-dark:#252a29}.rank-7{--metal-edge:#a9853d;--metal-bg:#3a2c0e;--metal-hi:#caa544;--metal-mid:#846015;--metal-dark:#382c10}.rank-6{--metal-edge:#a25048;--metal-bg:#381c1a;--metal-hi:#cb6e5c;--metal-mid:#862b22;--metal-dark:#401915}.rank-5{--metal-edge:#ad6b34;--metal-bg:#3e2917;--metal-hi:#e29b4f;--metal-mid:#a5561d;--metal-dark:#4a2713}.rank-4{--metal-edge:#8c689e;--metal-bg:#302039;--metal-hi:#b18cc8;--metal-mid:#683b7e;--metal-dark:#30183e}.rank-plate{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 68px;font:bold 23px Georgia,serif;color:#f3e3bb;text-shadow:0 2px 3px #000,0 0 8px #ffdc7b55;border-right:1px solid var(--metal-edge);background:linear-gradient(135deg,#ffffff44,transparent 22%,transparent 70%,#ffffff12),linear-gradient(110deg,var(--metal-hi),var(--metal-mid) 32%,var(--metal-dark) 75%,var(--metal-mid));box-shadow:inset 0 1px 3px #fff5,inset 0 -5px 10px #0006}.rank-plate svg{width:36px;height:36px;filter:drop-shadow(0 2px 2px #000)}.troop-list{min-width:0;flex:1;padding:0 10px}.result-row{display:grid;grid-template-columns:27px minmax(0,1fr) auto;gap:8px;min-height:29px;margin:0;padding:2px 0;border-top:1px solid #ffffff1b}.result-row:first-child{border-top:0}.type-icon{display:grid;place-items:center;width:27px;height:24px;border:0;border-radius:0;background:none;font-size:16px}.troop-name{font:14px Georgia,serif;color:#f0e8d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quantity{font:bold 15px Georgia,serif;color:#ebd08c;font-variant-numeric:tabular-nums;white-space:nowrap}.controls-toggle:focus-visible{outline:2px solid #f0d28c;outline-offset:2px}@media(max-width:760px){main{padding:25px 12px 42px}.workspace{grid-template-columns:1fr;gap:12px}.controls{padding:15px}.controls-toggle{display:block;margin-left:auto;border:1px solid #8d7447;border-radius:5px;background:#25291d;color:#e4cd97;padding:8px 10px;white-space:nowrap;font:12px Arial,sans-serif;cursor:pointer}.controls .panel-heading{padding-bottom:10px}.controls:has(#controlBody[hidden]) .panel-heading{padding-bottom:0;border:0}.results .panel-heading{padding:14px 15px 10px}.result-head{padding:7px 15px 4px}#resultRows{padding:0 7px 8px}.rank-plate{flex-basis:48px;font-size:18px}.rank-plate svg{width:29px;height:29px}.troop-list{padding:0 6px}.result-row{grid-template-columns:23px minmax(0,1fr) auto;gap:5px;min-height:27px}.type-icon{width:23px;height:22px;font-size:14px}.troop-name{font-size:clamp(11px,3.2vw,13px)}.quantity{font-size:13px}.levels{gap:5px}.level{min-height:40px}}
/* Keep long translated troop names and compact controls readable on narrow screens. */
.panel-heading>div{min-width:0}.controls-toggle{flex-shrink:0}@media(max-width:760px){.troop-name{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.15}.controls .panel-heading h2{overflow-wrap:anywhere}.result-count{white-space:normal;text-align:right;max-width:115px}}
@media(max-width:760px){.intro h1{overflow-wrap:anywhere}}

/* The selector uses the same metal palette as the troop plates. */
.levels .level {
  background: linear-gradient(145deg, #ffffff12, transparent 42%),
    linear-gradient(160deg, var(--metal-bg), #101510 85%);
  border-color: color-mix(in srgb, var(--metal-edge) 65%, #171b17);
  color: #c9c9bc;
  box-shadow: inset 0 1px 0 #ffffff13;
}
.levels .level:hover {
  border-color: var(--metal-hi);
  color: #fff5dd;
}
.levels .level[aria-pressed="true"] {
  background: linear-gradient(145deg, #ffffff40, transparent 40%),
    linear-gradient(165deg, var(--metal-mid), var(--metal-dark) 80%);
  border-color: var(--metal-hi);
  color: #fff5dd;
  box-shadow: inset 0 1px 0 #ffffff64, inset 0 -2px 0 #0006,
    0 1px 4px #0008;
}
.leadership input {
  border-color: transparent;
  background: linear-gradient(#101611, #0d130f) padding-box,
    linear-gradient(145deg, #dbbb76, #725026 53%, #a88246) border-box;
  box-shadow: inset 0 1px 3px #0008;
}