/* ---------------------------------------------------------------------------
   MENUS: title, pause, death, perk draft, how-to, account, lobby.

   One family with the Locker and the Armory: rounded dark panels lifted off
   the island by a soft shadow, one amber accent that means "act", and the
   notched clip-paths retired (they read as a debug overlay next to the new
   screens). Loaded after war.css so it wins on source order.
--------------------------------------------------------------------------- */
@keyframes mnShine { 0%, 70% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes mnIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }

/* --- buttons ------------------------------------------------------------------ */
.btn {
  clip-path: none;
  border-radius: 12px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 232, 200, .16);
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .2s;
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .10); border-color: rgba(255, 176, 58, .6); color: #ffe2b0; transform: translateY(-1px); }
.btn.primary {
  border: 0;
  color: #1a0f04;
  background: linear-gradient(180deg, #ffc15a, #ff8a1f);
  box-shadow: 0 6px 22px rgba(255, 138, 31, .3), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffcb70, #ff9430); color: #1a0f04; box-shadow: 0 8px 30px rgba(255, 138, 31, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.danger { background: rgba(255, 63, 52, .06); }
.btn kbd { border-radius: 4px; }

/* --- panels ------------------------------------------------------------------ */
.pa-panel, .de-panel, .ht-inner, .ac-inner {
  clip-path: none;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 20, 27, .97), rgba(12, 9, 14, .98));
  border: 1px solid rgba(255, 232, 200, .10);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: mnIn .22s ease-out;
}
#pause, #dead { background: rgba(7, 5, 8, .78); backdrop-filter: blur(6px); }

/* --- title ------------------------------------------------------------------- */
#title {
  background:
    radial-gradient(70% 60% at 28% 40%, rgba(255, 106, 31, .20), transparent 70%),
    linear-gradient(90deg, rgba(8, 6, 9, .72), rgba(8, 6, 9, .35) 60%, rgba(8, 6, 9, .55));
}
.title-card {
  clip-path: none;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(22, 16, 24, .88), rgba(10, 7, 12, .93));
  border: 1px solid rgba(255, 232, 200, .12);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: mnIn .5s ease-out;
}
.title-logo { text-shadow: 0 5px 0 rgba(0, 0, 0, .45), 0 0 40px rgba(255, 63, 52, .18); }
#start {
  position: relative;
  overflow: hidden;
  clip-path: none;
  border-radius: 14px;
  padding: 17px 26px;
  font-size: 21px;
  background: linear-gradient(180deg, #ff7a2a, #e0441a);
  box-shadow: 0 5px 0 #86270b, 0 14px 40px rgba(255, 90, 30, .35);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
#start::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: mnShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
#start svg { transition: transform .2s; }
#start:hover svg { transform: translateX(4px); }
.title-secondary .btn { padding: 12px 12px; }
.lo-crate { width: 30px; height: 24px; object-fit: contain; margin: -4px 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.lo-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.title-handle input { border-radius: 10px; }
#coop-code, #coop-host, #coop-join, #board-refresh { border-radius: 10px; }

/* the loadout strip */
.title-loadout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 8px;
  width: 100%;
  margin: 16px 0 6px;
  padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.title-loadout:empty { display: none; }
.tl-slot, .tl-crates {
  position: relative;
  display: grid; align-content: end;
  min-height: 92px;
  padding: 8px 10px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 50% 100%, color-mix(in srgb, var(--c, #ffb03a) 26%, transparent), transparent 70%),
    rgba(255, 255, 255, .03);
  border: 1px solid color-mix(in srgb, var(--c, #ffb03a) 28%, rgba(255, 255, 255, .05));
  transition: transform .15s, border-color .15s;
}
.title-loadout:hover .tl-slot, .title-loadout:hover .tl-crates { border-color: color-mix(in srgb, var(--c, #ffb03a) 55%, transparent); }
.tl-slot img { position: absolute; left: 8px; right: 8px; top: 4px; width: calc(100% - 16px); height: 54px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.tl-outfit img { left: auto; right: 6px; top: 6px; width: 54px; height: 78px; }
.tl-slot em, .tl-crates em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.tl-slot b { position: relative; font-size: 12.5px; font-weight: 600; color: #fff4e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-slot em { position: relative; color: var(--c); }
.tl-outfit { padding-right: 60px; }
.tl-crates { --c: #ff6a1f; grid-template-columns: 64px 1fr; align-items: center; align-content: center; gap: 8px; }
.tl-crates img { width: 64px; height: 50px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.tl-crates span { display: flex; flex-direction: column; }
.tl-crates b { font-family: var(--display); font-size: 15px; font-weight: 400; color: #fff4e2; }
.title-loadout.has-crates .tl-crates { border-color: rgba(255, 106, 31, .6); box-shadow: 0 0 26px rgba(255, 106, 31, .22); }
.title-loadout.has-crates .tl-crates img { animation: lkFloat 2.6s ease-in-out infinite; }
.title-loadout.has-crates .tl-crates b { color: #ffb070; }
.title-loadout:not(.has-crates) .tl-crates { opacity: .6; }
@media (max-width: 620px) {
  .title-loadout { grid-template-columns: 1fr 1fr; }
  .tl-crates { grid-column: 1 / -1; min-height: 64px; }
}

/* --- pause ------------------------------------------------------------------- */
.pa-panel { width: min(560px, 94vw); padding: 26px 26px 22px; }
.pa-title { font-size: 26px; letter-spacing: .06em; color: #fff4e2; }
.pa-tabs { gap: 6px; border-bottom: 0; margin-bottom: 18px; }
.pa-tabs button {
  border: 0; border-radius: 999px; padding: 8px 16px;
  font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
.pa-tabs button.on { color: #1a1206; background: var(--amber); border: 0; }
.pa-row { padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; background: rgba(255, 255, 255, .025); }
.pa-row:hover { background: rgba(255, 255, 255, .05); }
.pa-select { border-radius: 8px; }
.pa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-btns #pause-resume { grid-column: 1 / -1; padding: 14px; font-size: 13px; }

/* --- death ------------------------------------------------------------------- */
.de-panel { width: min(620px, 94vw); border-color: rgba(255, 63, 52, .3); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 80px rgba(255, 63, 52, .12); }
.de-stats li { border-top: 0; padding: 12px 8px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.de-stats b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.de-crates {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 14px;
  border: 1px solid rgba(255, 176, 58, .35); border-left-width: 1px; border-radius: 14px;
  background: radial-gradient(90% 100% at 50% 0%, rgba(255, 176, 58, .16), rgba(255, 176, 58, .03));
}
.dc-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dc-crate { display: flex; flex-direction: column; align-items: center; min-width: 90px; animation: lkRise .4s ease-out backwards; }
.dc-crate:nth-child(2) { animation-delay: .1s; } .dc-crate:nth-child(3) { animation-delay: .2s; }
.dc-crate img { width: 64px; height: 50px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px color-mix(in srgb, var(--c) 45%, transparent)); animation: lkFloat 2.8s ease-in-out infinite; }
.dc-crate b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--c); }
.dc-crate em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.dc-text { font-family: var(--mono); font-size: 12px; color: var(--gold); }
#dead-locker { border-color: rgba(255, 176, 58, .5); color: #ffd79a; }

/* --- perk draft ------------------------------------------------------------------ */
.dr-cards button {
  clip-path: none;
  border-radius: 16px;
  border-top-width: 1px;
  background: linear-gradient(180deg, #221c26, #120e15);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 3px 0 var(--amber);
}
.dr-cards li[data-rarity="rare"] button { box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 3px 0 var(--blue), 0 0 26px rgba(90, 169, 255, .12); }
.dr-cards li[data-rarity="epic"] button { box-shadow: 0 14px 36px rgba(0, 0, 0, .45), inset 0 3px 0 #d67bff, 0 0 30px rgba(199, 107, 255, .16); }
.dr-cards button:hover { background: linear-gradient(180deg, #2b222e, #17121b); }