.resource{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.resource .rname{ color:var(--dim); }
.resource .rname.deficit{ color:var(--red); }
.resource .rval{ color:var(--text); font-weight:600; }
.resource .rrates{ display:inline-flex; flex-direction:column; margin-left:6px; vertical-align:middle; }
.resource .rrate{ color:var(--green); font-size:9px; line-height:1.3; }
.resource .rrate.bonus{ color:var(--amber); }
.resource .rright{ text-align:right; }
.resource .rsafe{ display:inline-block; margin-top:2px; color:var(--dim); font-size:9px; }


.navbtn{ display:block; width:100%; text-align:left; background:none; border:1px solid transparent; color:var(--dim); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px; padding:9px 10px; margin-bottom:4px; cursor:pointer; border-radius:2px; text-transform:uppercase; }
.navbtn:hover{ color:var(--text); border-color:var(--line); }
.navbtn.active{ color:var(--amber); border-color:var(--rust); background:rgba(255,157,63,0.08); }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px 16px; position:relative; overflow:hidden; min-height:160px; }
.card::before{ content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--rust); }
.card.ready::before{ background:var(--amber); }
.card.locked{ opacity:0.45; }
.card h3{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:1px; margin-bottom:6px; color:var(--sand); }
.card .lvl{ color:var(--amber); font-size:11px; margin-bottom:10px; }
.card .desc{ color:var(--dim); font-size:11px; line-height:1.5; margin-bottom:12px; }
.cost-row{ display:flex; gap:10px; flex-wrap:wrap; font-size:10px; color:var(--dim); margin-bottom:10px; }
.cost-row span.short{ color:var(--red); }
.lockmsg{ font-size:10.5px; color:var(--rust); }

.btn{ background:var(--rust); color:#fff1e0; border:none; padding:8px 12px; font-size:11px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border-radius:2px; font-family:'IBM Plex Mono',monospace; width:100%; transition:background .15s; }
.btn:hover:not(:disabled){ background:var(--amber); color:#2b1400; }
.btn:disabled{ opacity:0.35; cursor:not-allowed; }
.btn.ghost{ background:#3a2418; }

.mission{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px 16px; margin-bottom:12px; }
.mission.done{ border-color:var(--rust); }
.mission.locked{ opacity:0.4; }
.mission h3{ font-family:'Oswald',sans-serif; font-size:13px; margin-bottom:6px; display:flex; justify-content:space-between; color:var(--sand); }
.mission .tag{ font-size:10px; color:var(--amber); }
.mission .obj{ color:var(--dim); font-size:11px; margin-bottom:8px; }
.barwrap{ background:#0f0a06; height:6px; border-radius:3px; overflow:hidden; margin-top:6px;}
.barfill{ height:100%; background:var(--amber); transition:width .3s; }
.eta{ font-size:10.5px; color:var(--dim); margin-top:6px; margin-bottom:12px; }

.stat{ margin-bottom:14px; }
.stat .slabel{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-bottom:5px; }
.stat .slabel b{ color:var(--text); }
.stat .slabel b.deficit{ color:var(--red); }
.statbar{ background:#0f0a06; height:8px; border-radius:4px; overflow:hidden; }
.statfill{ height:100%; }

.log{ font-size:10.5px; color:var(--dim); line-height:1.7; }
.log .entry{ border-bottom:1px dashed var(--line); padding:5px 0; }
.log .entry b{ color:var(--amber); }
.log .entry.warn b{ color:var(--red); }

.crystalbar{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,#2a1b10,#1c120b); border:1px solid var(--rust); border-radius:3px; padding:9px 12px; margin-bottom:14px; }
.crystalbar .cval{ color:var(--amber); font-weight:700; font-size:14px; }
.crystalbar .clabel{ color:var(--dim); font-size:10px; letter-spacing:1px; }

.pack{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; }
.pack.best::before{ content:'MIGLIOR VALORE'; position:absolute; top:-1px; right:-1px; background:var(--amber); color:#2b1400; font-size:9px; font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:0 3px 0 3px; }
.pack .pamount{ font-family:'Oswald',sans-serif; font-size:20px; color:var(--amber); }
.pack .pbonus{ font-size:10px; color:var(--green); }
.pack .pprice{ font-size:15px; font-weight:600; margin-top:4px; }
.note{ font-size:10.5px; color:var(--dim); line-height:1.6; margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); }

.unit-card{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px; }
.unit-card h3{ font-family:'Oswald',sans-serif; font-size:14px; color:var(--sand); margin-bottom:4px; }
.unit-card .role{ font-size:10px; color:var(--amber); margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.statsrow{ display:flex; gap:14px; font-size:10.5px; color:var(--dim); margin-bottom:8px; }
.statsrow b{ color:var(--text); }
.owned{ font-size:11px; color:var(--green); margin-bottom:10px; }

.battlegrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.armybox{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px; }
.armybox h3{ font-family:'Oswald',sans-serif; font-size:14px; color:var(--sand); margin-bottom:12px; }
.unitrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:12px; }
.unitrow input{ width:70px; background:#0f0a06; border:1px solid var(--line); color:var(--text); padding:5px 7px; font-family:'IBM Plex Mono',monospace; border-radius:2px; }
.battle-result{ background:var(--panel); border:1px solid var(--rust); border-radius:3px; padding:16px; margin-top:18px; }
.battle-result h3{ font-family:'Oswald',sans-serif; color:var(--amber); margin-bottom:10px; }
.roundlog{ font-size:10.5px; color:var(--dim); line-height:1.8; max-height:200px; overflow-y:auto; }
.winner-tag{ font-family:'Oswald',sans-serif; font-size:16px; padding:8px 0; }
.winner-tag.p1{ color:var(--green); }
.winner-tag.p2{ color:var(--red); }
.winner-tag.draw{ color:var(--dim); }

.savebox{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:16px; margin-top:16px; }
.savebox textarea{ width:100%; height:80px; background:#0f0a06; border:1px solid var(--line); color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:10px; padding:8px; border-radius:2px; margin-bottom:8px; resize:vertical; }

.field{ width:100%; background:#0f0a06; border:1px solid var(--line); color:var(--text); padding:9px 10px; font-family:'IBM Plex Mono',monospace; font-size:13px; border-radius:2px; margin-bottom:8px; }
.field:focus{ outline:none; border-color:var(--rust); }
.field-row{ display:flex; gap:8px; }
.field-row .field{ margin-bottom:0; }
.field-row .btn{ width:auto; flex-shrink:0; white-space:nowrap; }

.account-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px; margin-bottom:20px; }

.colony-card{ background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px 16px; position:relative; overflow:hidden; }
.colony-card::before{ content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--rust); }
.colony-card.active::before{ background:var(--amber); }
.colony-card h3{ font-family:'Oswald',sans-serif; font-size:15px; letter-spacing:0.5px; margin-bottom:8px; color:var(--sand); }
.colony-card .kv{ display:flex; justify-content:space-between; font-size:11px; color:var(--dim); padding:3px 0; border-bottom:1px dashed var(--line); }
.colony-card .kv b{ color:var(--text); font-weight:500; }
.colony-card .kv:last-of-type{ border-bottom:none; margin-bottom:10px; }
.colony-card .badge-active{ display:inline-block; font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:#2b1400; background:var(--amber); padding:2px 7px; border-radius:2px; margin-bottom:10px; }
.colony-card .card-actions{ display:flex; gap:8px; }
.colony-card .card-actions .btn{ width:auto; flex:1; }
.colony-card .rename-toggle{ background:none; border:none; color:var(--dim); font-size:10.5px; cursor:pointer; padding:0; margin-bottom:10px; text-decoration:underline; text-underline-offset:2px; font-family:'IBM Plex Mono',monospace; }
.colony-card .rename-toggle:hover{ color:var(--amber); }
.colony-card .rename-box{ margin-bottom:10px; }
.colony-card .rename-cost{ font-size:10px; color:var(--dim); margin-top:6px; }
.colony-card .rename-cost b{ color:var(--amber); }

.msg-inline{ font-size:11px; margin-top:8px; }
.msg-inline.ok{ color:var(--green); }
.msg-inline.err{ color:var(--red); }

.comfort-toggle{ background:none; border:none; color:var(--dim); font-size:10.5px; cursor:pointer; padding:0; margin-top:10px; text-decoration:underline; text-underline-offset:2px; font-family:'IBM Plex Mono',monospace; letter-spacing:0; text-transform:none; }
.comfort-toggle:hover{ color:var(--amber); }
/* Nota: display va messo SOLO nella regola :not([hidden]) — se lo mettiamo
   incondizionatamente qui sovrascrive lo "display:none" che il browser
   applica di default agli elementi con l'attributo hidden, e il pannello
   non si richiuderebbe mai. */
.comfort-list{ margin-top:8px; flex-direction:column; gap:8px; }
.comfort-list:not([hidden]){ display:flex; }
.comfort-item .name{ font-size:11px; color:var(--text); margin-bottom:4px; }
.comfort-item .name .lvl-tag{ color:var(--dim); }
.comfort-item .maxed{ font-size:10.5px; color:var(--green); }
.comfort-item button{ display:block; width:100%; text-align:left; background:#2a1b10; border:1px solid var(--line); color:var(--dim); padding:6px 8px; font-size:10px; letter-spacing:0; text-transform:none; cursor:pointer; border-radius:2px; font-family:'IBM Plex Mono',monospace; white-space:normal; line-height:1.4; }
.comfort-item button:hover:not(:disabled){ border-color:var(--rust); color:var(--amber); }
.comfort-item button:disabled{ opacity:0.35; cursor:not-allowed; }