/* Menu d'équipement (page d'accueil). En jeu, les mêmes styles viennent de game.css. */
#loadout { text-align: left; }
#loadout h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
#loadout h3 small { color: #94a3b8; font-weight: 500; font-size: 12px; margin-left: 6px; }
.lo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-bottom: 6px; }
.lo-row button { text-align: left; padding: 8px 10px; border-radius: 10px; border: 2px solid #1e293b; background: #1e293b; color: #f8fafc; cursor: pointer; }
.lo-row button b { display: block; font-size: 13px; }
.lo-row button small { color: #94a3b8; font-size: 11px; }
.lo-row button:hover:not(:disabled) { border-color: #475569; }
.lo-row button.sel { border-color: #fbbf24; background: #422006; }
.lo-row button:disabled { opacity: .35; cursor: not-allowed; }
.lo-title { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin: 8px 0 4px; }
.lo-att { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; font-size: 12px; color: #cbd5e1; }
.lo-att > span { min-width: 140px; font-weight: 700; }
.lo-att i { color: #475569; font-style: normal; margin: 0 2px; }
.lo-att button { padding: 3px 8px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 11px; cursor: pointer; }
.lo-att button.sel { border-color: #fbbf24; background: #422006; }
.lo-att button:disabled { opacity: .3; cursor: not-allowed; }
#lo-note { margin: 4px 0 0; min-height: 16px; font-size: 12px; color: #fbbf24; }

.lo-att-w { background: rgba(30, 41, 59, .5); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.lo-att-w > p { margin: 0 0 2px; font-weight: 800; font-size: 13px; }
.lo-att-w .lo-att > span { min-width: 110px; font-weight: 600; color: #94a3b8; }

/* ===== Équipement v2 : tuiles, aperçu 3D, stats, accessoires, modale ===== */
.lx { color: #f1f5f9; text-align: left; }
.lx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lx-tile { position: relative; text-align: left; padding: 10px 12px; border-radius: 12px; background: rgba(30, 41, 59, .85); border: 2px solid transparent; color: inherit; cursor: pointer; min-width: 0; }
.lx-tile:hover { border-color: #475569; }
.lx-tile.sel { border-color: #fbbf24; background: rgba(66, 32, 6, .85); }
.lx-tile small { display: block; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.lx-tile kbd { font: 700 10px system-ui; background: #334155; border-radius: 4px; padding: 0 4px; color: #e2e8f0; }
.lx-tile b { display: block; font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-tile span { display: block; font-size: 11px; color: #a5b4fc; }
.lx-tile .lx-chg { position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 10px; color: #fbbf24; opacity: 0; transition: opacity .15s; }
.lx-tile:hover .lx-chg, .lx-tile.sel .lx-chg { opacity: 1; }
.lx-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lx-view { position: relative; min-height: 280px; border-radius: 14px; background: radial-gradient(ellipse at 50% 60%, #334155 0%, #0f172a 75%); overflow: hidden; cursor: grab; touch-action: none; }
.lx-view canvas { display: block; width: 100% !important; height: 100% !important; position: absolute; inset: 0; }
.lx-name { position: absolute; left: 12px; top: 10px; font-weight: 900; font-size: 18px; z-index: 1; text-shadow: 0 2px 6px #000; pointer-events: none; }
.lx-hint { position: absolute; right: 10px; bottom: 6px; margin: 0; font-size: 10px; color: #64748b; z-index: 1; pointer-events: none; }
.lx-stat { display: grid; grid-template-columns: 76px 1fr 54px; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.lx-stat span { color: #94a3b8; }
.lx-stat > div { height: 6px; border-radius: 3px; background: #1e293b; overflow: hidden; }
.lx-stat i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fde047); border-radius: 3px; transition: width .25s; }
.lx-stat b { text-align: right; font-size: 12px; }
.lx-sub { margin: 12px 0 6px; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.lx-sub span { text-transform: none; font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.lx-atts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.lx-att { text-align: left; padding: 6px 9px; border-radius: 10px; background: #1e293b; border: 1px dashed #475569; color: inherit; cursor: pointer; }
.lx-att.on { border: 1px solid #a78bfa; background: rgba(76, 29, 149, .45); }
.lx-att:hover { border-color: #fbbf24; }
.lx-att small { display: block; font-size: 10px; color: #94a3b8; text-transform: uppercase; }
.lx-att b { font-size: 12px; }
.lx-empty { font-size: 12px; color: #64748b; }
.lx-streaks { display: grid; gap: 6px; }
.lx-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.lx-seg > span { width: 64px; color: #94a3b8; font-weight: 700; }
.lx-seg button { padding: 5px 10px; border-radius: 999px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; cursor: pointer; font-size: 12px; }
.lx-seg button.sel { background: #422006; border-color: #fbbf24; color: #fde68a; }
.lx-note { min-height: 16px; margin: 8px 0 0; font-size: 12px; color: #fbbf24; }
.lx-modal { position: fixed; inset: 0; z-index: 200; background: rgba(2, 6, 23, .7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lx-modal.hidden { display: none; }
.lx-dialog { width: min(640px, 100%); max-height: 85vh; overflow: auto; background: #0f172a; border: 1px solid #334155; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); color: #f1f5f9; }
.lx-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #1e293b; position: sticky; top: 0; background: #0f172a; font-size: 16px; }
.lx-x { background: none; border: 0; color: #94a3b8; font-size: 18px; cursor: pointer; }
.lx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 14px; }
.lx-opt { text-align: left; padding: 10px 12px; border-radius: 12px; background: #1e293b; border: 2px solid transparent; color: inherit; cursor: pointer; }
.lx-opt:hover:not(:disabled) { border-color: #475569; }
.lx-opt.sel { border-color: #fbbf24; background: #422006; }
.lx-opt:disabled { opacity: .4; cursor: not-allowed; }
.lx-opt b { display: block; font-size: 14px; }
.lx-opt small { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.lx-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lx-fx em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.lx-fx em.up { background: rgba(22, 101, 52, .6); color: #86efac; }
.lx-fx em.down { background: rgba(127, 29, 29, .6); color: #fca5a5; }
@media (max-width: 640px) {
  .lx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-main { grid-template-columns: 1fr; }
}

/* ===== Réglages joueur ===== */
.st { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; text-align: left; color: #e2e8f0; }
.st section { background: rgba(30, 41, 59, .6); border-radius: 14px; padding: 12px 14px; }
.st h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #fbbf24; display: flex; align-items: center; }
.st-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.st-row input[type=range] { width: 130px; accent-color: #fbbf24; }
.st-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #fbbf24; }
.st-row input[type=color] { width: 36px; height: 24px; border: 0; background: none; padding: 0; }
.st-row output { min-width: 46px; text-align: right; font-size: 12px; color: #94a3b8; }
.st-seg { display: flex; gap: 4px; grid-column: 2 / 4; }
.st-seg button { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; cursor: pointer; }
.st-seg button.sel { border-color: #fbbf24; background: #422006; }
.st-cross { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke-linecap: round; background: #334155; border-radius: 4px; }
.st-keys .st-row { grid-template-columns: 1fr auto; }
.st-key { min-width: 120px; padding: 4px 10px; border-radius: 8px; background: #0f172a; border: 1px solid #475569; color: #f8fafc; font: 600 12px system-ui; cursor: pointer; }
.st-key:hover { border-color: #fbbf24; }
.st-key.wait { border-color: #fbbf24; color: #fde68a; animation: stblink 1s infinite; }
@keyframes stblink { 50% { opacity: .55; } }
.st-link { margin-left: auto; background: none; border: 0; color: #94a3b8; font-size: 11px; text-transform: none; cursor: pointer; text-decoration: underline; }
.st-note { font-size: 11px; color: #64748b; margin: 8px 0 0; }

.lx-opt.prem { background: linear-gradient(135deg, #1e293b, #3b2a07); }
.lx-opt.prem b { color: #fde68a; }

.lx-seg button:disabled { opacity: .4; cursor: not-allowed; }