/* The player site. Builds on style.css (colours, buttons, cards, tables). */
body.play main.playmain { max-width: 1200px; margin: 0 auto; padding: 26px 34px; }
body.play main.playmain.wide { max-width: none; }

.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 22px; background: var(--panel); border-bottom: 1px solid var(--line); }
.tabs .where { color: var(--muted); margin-right: 14px; font-size: 14px; }
.tabs a { color: var(--text); padding: 7px 14px; border-radius: 8px; }
.tabs a:hover { background: var(--panel2); text-decoration: none; }
.tabs a.active { background: var(--gold); color: #000; font-weight: 600; }

.notice { border-color: var(--warn); }
.quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }

.shophead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.shophead p { margin-top: 0; max-width: 700px; }
.balance { background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 999px; padding: 6px 16px; font-size: 16px; }
.shopbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0; }
.shopbar input { max-width: 300px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chip2 { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
.chip2:hover { border-color: var(--gold-dim); }
.chip2.on { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; }

.itemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.item[hidden] { display: none; }
.item:hover { border-color: var(--gold-dim); }
.item.dim { opacity: .65; }
.item h3 { margin: 4px 0 0; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.itemtop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.catbadge { color: var(--muted); font-size: 12px; }
.kit { list-style: none; margin: 6px 0; padding: 0; font-size: 14px; color: var(--muted); max-height: 150px; overflow-y: auto; }
.kit li::before { content: "• "; color: var(--gold-dim); }
.kit b { color: var(--gold); }
.itemfoot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.price { font-size: 22px; font-weight: 700; color: var(--gold); }
.buyform { display: flex; gap: 8px; align-items: center; }
.buyform select { width: auto; padding: 6px 8px; }
.buyform button:disabled, .buyform select:disabled { opacity: .5; cursor: not-allowed; }

.pname { background: rgba(0, 0, 0, .7); }
@media (max-width: 700px) { body.play main.playmain { padding: 16px; } .tabs { padding: 8px 12px; } }