/* Kaos Protocol page */
.page-kaos { --accent: #ff4d5e; --brass: #e0b25b; --common: #b8c0cc; --rare: #4ea1ff; --epic: #b36bff; --legendary: #ffb23e; background:
  radial-gradient(1100px 600px at 85% -10%, rgba(255,77,94,.08), transparent 60%),
  radial-gradient(900px 600px at -10% 45%, rgba(224,178,91,.06), transparent 60%), #08070a; }
.page-kaos .grad { background: linear-gradient(92deg, #ff4d5e, #ff8a3d 55%, #e0b25b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-kaos .stat b { text-shadow: 0 0 24px rgba(255,77,94,.45); }
.page-kaos .hero .shade { background:
  linear-gradient(90deg, rgba(8,7,10,.92) 0%, rgba(8,7,10,.55) 40%, rgba(8,7,10,0) 70%),
  linear-gradient(0deg, #08070a 0%, rgba(8,7,10,0) 35%); }
.q-common { color: var(--common); } .q-rare { color: var(--rare); } .q-epic { color: var(--epic); } .q-legendary { color: var(--legendary); }

/* Hitmarker */
.hitmarker { position: fixed; z-index: 95; width: 28px; height: 28px; pointer-events: none; transform: translate(-50%, -50%); }
.hitmarker::before, .hitmarker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 3px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.8); }
.hitmarker::before { transform: translate(-50%, -50%) rotate(45deg); }
.hitmarker::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hitmarker.kill::before, .hitmarker.kill::after { background: var(--accent); }
.hitmarker { animation: hit .35s ease-out forwards; }
@keyframes hit { from { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }

/* ---------- Tier ladder + grindstone ---------- */
.ladder4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ladder4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ladder4 { grid-template-columns: 1fr; } }
.tier { --tc: var(--common); padding: 18px; display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--tc); }
.tier .lvl { font: 10px var(--font-pixel); letter-spacing: .14em; color: var(--tc); }
.tier h3 { font-size: 22px; text-transform: uppercase; }
.tier .cost { font-size: 13px; color: var(--muted); }
.guns { display: flex; flex-wrap: wrap; gap: 5px; }
.guns button { padding: 4px 8px; font: 500 12px var(--font-display); letter-spacing: .03em; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.guns button:hover { border-color: var(--tc); }
.guns button[aria-pressed="true"] { background: var(--tc); color: #08070a; border-color: var(--tc); }

.grind { display: grid; grid-template-columns: auto auto auto auto auto; gap: clamp(10px, 2vw, 20px); align-items: center; justify-content: center; padding: clamp(20px, 4vw, 36px); margin-top: 20px; }
@media (max-width: 720px) { .grind { grid-template-columns: 1fr 1fr; } .grind .op { display: none; } }
.slot-mc { width: 84px; height: 84px; display: grid; place-items: center; background: #8b8b8b; box-shadow: inset 3px 3px 0 #373737, inset -3px -3px 0 #fff; position: relative; }
.slot-mc img { width: 60px; height: 60px; }
.slot-mc .lbl { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font: 9px var(--font-pixel); color: var(--muted); letter-spacing: .1em; white-space: nowrap; }
.slot-mc .gun-name { font: 700 12px var(--font-display); color: #202020; text-align: center; line-height: 1.1; padding: 4px; }
.slot-mc.out.glint img { animation: glint 1.6s linear infinite; filter: drop-shadow(0 0 8px #b36bff); }
@keyframes glint { 50% { filter: drop-shadow(0 0 14px #d9a6ff) brightness(1.3); } }
.grind .op { font: 700 28px var(--font-display); color: var(--muted); }
.grind-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; margin-top: 26px; }
.grind-msg { font-size: 14px; color: var(--muted); min-height: 1.4em; text-align: center; grid-column: 1 / -1; }
.gem { display: grid; place-items: center; width: 60px; height: 60px; }
.gem i { width: 34px; height: 34px; background: linear-gradient(135deg, #b9fff5, #3fd6c8 50%, #1a8f86); transform: rotate(45deg); box-shadow: inset -4px -4px 0 rgba(0,0,0,.25); }
.gem.block i { width: 48px; height: 48px; transform: none; background:
  linear-gradient(90deg, rgba(0,0,0,.12) 50%, transparent 50%) 0 0 / 12px 12px, linear-gradient(135deg, #b9fff5, #3fd6c8 50%, #1a8f86); box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 4px 4px 0 rgba(255,255,255,.3); }
.gem.none i { background: #555; opacity: .4; }

/* ---------- Quality builder ---------- */
.qb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
@media (max-width: 900px) { .qb { grid-template-columns: 1fr; } }
.qb-parts { padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px; align-content: start; }
.part-row { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: center; }
.part-row img { width: 56px; height: 56px; background: rgba(0,0,0,.35); padding: 6px; border: 2px solid var(--pc, var(--line)); transition: border-color .3s, box-shadow .3s; box-shadow: 0 0 18px -6px var(--pc, transparent); }
.part-row b { display: block; font: 600 15px var(--font-display); margin-bottom: 6px; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.grades button { padding: 7px 2px; font: 9px var(--font-pixel); letter-spacing: .06em; background: rgba(0,0,0,.3); border: 1px solid var(--line); color: var(--gc); cursor: pointer; transition: all .2s; }
.grades button[aria-pressed="true"] { background: var(--gc); color: #08070a; border-color: var(--gc); }
.qb-out { padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; align-content: start; }
.tooltip-mc { background: rgba(16,0,16,.94); border: 2px solid #2a0a5a; outline: 2px solid rgba(80,0,255,.35); padding: 12px 14px; font: 15px/1.5 var(--font-display); max-width: 360px; }
.tooltip-mc .nm { font-weight: 700; font-size: 17px; }
.tooltip-mc .dim { color: #a8a8a8; font-size: 13px; }
.bars { display: grid; gap: 10px; }
.sbar { display: grid; grid-template-columns: 120px 1fr 56px; gap: 12px; align-items: center; font-size: 14px; }
.sbar .tr { position: relative; height: 10px; background: rgba(255,255,255,.05); }
.sbar .tr i { position: absolute; inset: 0 auto 0 0; background: var(--bc, var(--accent)); transition: width .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.sbar .tr::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc(100% / 1.3); width: 1px; background: rgba(255,255,255,.35); }
.sbar b { font: 600 14px var(--font-display); text-align: right; }
.sbar small { display: block; font-size: 11px; color: var(--muted); }
@media (max-width: 480px) { .sbar { grid-template-columns: 92px 1fr 48px; font-size: 12px; } }

/* ---------- Jam range ---------- */
.range { position: relative; overflow: hidden; padding: 0; }
.range .bg { position: absolute; inset: 0; background: url(../assets/img/kaos/jam.jpg) center / cover; filter: brightness(.38) saturate(.9); }
.range .inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(20px, 4vw, 44px); }
@media (max-width: 900px) { .range .inner { grid-template-columns: 1fr; } }
.gun-state { display: grid; gap: 14px; align-content: start; }
.gun-types { display: flex; flex-wrap: wrap; gap: 6px; }
.gun-types button { padding: 6px 10px; font: 600 12px var(--font-display); letter-spacing: .06em; background: rgba(8,7,10,.7); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.gun-types button[aria-pressed="true"] { color: #08070a; background: var(--brass); border-color: var(--brass); }
.gauge { display: grid; gap: 6px; }
.gauge .row { display: flex; justify-content: space-between; font: 10px var(--font-pixel); letter-spacing: .12em; color: var(--muted); }
.gauge .row b { font: 600 15px var(--font-display); color: var(--text); letter-spacing: .04em; }
.gauge .tr { height: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); position: relative; overflow: hidden; }
.gauge .tr i { position: absolute; inset: 0 auto 0 0; transition: width .2s, background .3s; }
.big-jam { font: 700 clamp(46px, 7vw, 72px)/1 var(--font-display); color: var(--text); }
.big-jam small { font: 10px var(--font-pixel); letter-spacing: .14em; color: var(--muted); display: block; margin-top: 8px; }
.range-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.range-btns button { padding: 12px 8px; background: rgba(8,7,10,.78); border: 1px solid var(--line); color: var(--text); font: 600 14px var(--font-display); letter-spacing: .04em; cursor: pointer; display: grid; justify-items: center; gap: 4px; transition: border-color .2s, transform .1s; }
.range-btns button:hover { border-color: var(--accent); }
.range-btns button:active { transform: scale(.97); }
.range-btns button img { width: 28px; height: 28px; }
.range-btns button small { font: 9px var(--font-pixel); color: var(--muted); letter-spacing: .06em; }
.range-btns button.fire { background: rgba(255,77,94,.22); border-color: rgba(255,77,94,.6); }
.range-btns button:disabled { opacity: .35; cursor: not-allowed; }
.feed { font: 13px/1.6 ui-monospace, Menlo, monospace; background: rgba(0,0,0,.6); border: 1px solid var(--line); padding: 10px 12px; height: 120px; overflow: hidden; display: flex; flex-direction: column-reverse; }
.feed div { color: #cfd6e0; }
.feed .bad { color: #ff7a86; } .feed .good { color: #8dffb0; } .feed .warn { color: var(--brass); }
.toggle { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--font-display); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 42px; height: 22px; background: rgba(255,255,255,.12); border: 1px solid var(--line); position: relative; cursor: pointer; transition: background .2s; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; transition: left .2s; }
.toggle input:checked { background: var(--accent); }
.toggle input:checked::after { left: 22px; }
.jammed-flash { animation: jamflash .5s steps(2) 2; }
@keyframes jamflash { 50% { box-shadow: inset 0 0 0 3px var(--accent); } }

/* ---------- Workshop blocks ---------- */
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.blockcard { padding: 0; overflow: hidden; }
.blockcard canvas { display: block; width: 100%; aspect-ratio: 1.2; cursor: grab; touch-action: pan-y; background: radial-gradient(circle at 50% 60%, rgba(224,178,91,.14), transparent 60%); }
.blockcard div { padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.blockcard h3 { font-size: 18px; margin-bottom: 6px; }
.blockcard p { margin: 0; font-size: 13px; color: var(--muted); }

.loot-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.loot-table th, .loot-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--line); }
.loot-table th:first-child, .loot-table td:first-child { text-align: left; }
.loot-table th { font: 10px var(--font-pixel); letter-spacing: .12em; font-weight: 400; }
.loot-table td { font-variant-numeric: tabular-nums; }
.loot-table tr:hover td { background: rgba(255,255,255,.03); }
.table-wrap { overflow-x: auto; }

/* ---------- Noise rings ---------- */
.noise-viz { position: relative; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto; display: grid; place-items: center; }
.noise-viz .ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed var(--brass); transition: width .6s cubic-bezier(.2,.7,.2,1), height .6s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.noise-viz .ring.loud { width: 100%; height: 100%; }
.noise-viz .ring.quiet { width: 25%; height: 25%; border-style: solid; border-color: #8dffb0; }
.noise-viz .dot { width: 12px; height: 12px; background: #2ef2ff; box-shadow: 0 0 12px #2ef2ff; z-index: 2; }
.noise-viz .z { position: absolute; width: 8px; height: 8px; background: #6fae2c; transition: background .4s; }
.noise-viz .z.hears { background: #ffb547; }
.noise-viz .cap { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font: 10px var(--font-pixel); letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.noise-trade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.noise-trade .nt { padding: 10px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: border-color .3s, background .3s; }
.noise-trade .nt span { display: block; font: 10px var(--font-pixel); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.noise-trade .nt b { font: 700 18px var(--font-display); color: #fff; white-space: nowrap; transition: color .3s; }
.noise-trade.on .nt.quiet { border-color: #8dffb0; background: rgba(141,255,176,.08); }
.noise-trade.on .nt.quiet b { color: #8dffb0; }
.noise-trade.on .nt.cost { border-color: var(--accent); background: rgba(255,77,94,.08); }
.noise-trade.on .nt.cost b { color: var(--accent); }
.noise-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 520px) { .noise-trade { grid-template-columns: 1fr; } }

/* ---------- Starter kit ---------- */
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kit-item { padding: 14px; display: grid; gap: 8px; justify-items: start; background: var(--panel); border: 1px solid var(--line); }
.kit-item .ic { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0,0,0,.35); font: 700 18px var(--font-display); color: var(--muted); }
.kit-item .ic img { width: 36px; height: 36px; }
.kit-item b { font: 600 14px var(--font-display); }
.kit-item .dur { width: 100%; height: 4px; background: #222; }
.kit-item .dur i { display: block; height: 100%; }
.kit-item small { font-size: 12px; color: var(--muted); }

/* ---------- TaCZ credit ---------- */
.tacz-credit { padding-block: clamp(36px, 5vw, 56px) 0; }
.tacz-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(20px, 3vw, 32px); border-color: rgba(224,178,91,.35); background: linear-gradient(100deg, rgba(224,178,91,.08), rgba(255,77,94,.04) 60%, transparent), var(--panel); }
@media (max-width: 860px) { .tacz-card { grid-template-columns: 1fr; } }
.tacz-badge { display: grid; place-items: center; width: 116px; height: 116px; border: 1px solid rgba(224,178,91,.5); background: rgba(0,0,0,.35); box-shadow: inset 0 0 28px rgba(224,178,91,.12); text-align: center; }
.tacz-badge span { font: 9px var(--font-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); align-self: end; }
.tacz-badge b { font: 700 34px var(--font-display); letter-spacing: .04em; color: var(--brass); align-self: start; text-shadow: 0 0 18px rgba(224,178,91,.4); }
.tacz-copy { display: grid; gap: 10px; }
.tacz-copy h2 { margin: 0; font-size: clamp(24px, 3.2vw, 36px); }
.tacz-copy p { margin: 0; color: var(--muted); }
.tacz-copy a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.tacz-copy b { color: var(--text); }
.tacz-small { font-size: 14px; }
.tacz-btn { white-space: nowrap; justify-self: start; }
.eyebrow-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }