* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #0d1017; overflow: hidden; font-family: system-ui, sans-serif; }
#stage { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }

#overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #1a2233, #0d1017 70%);
}
#overlay.hidden { display: none; }

/* In-game settings (Esc) now reuses the wizard's modal chrome (.wiz-modal / .wiz-card), tabbed into
   Audio / Controls — see the .set-pane + settings additions lower down. The fight runs behind the dim. */

/* Block inventory (I) — same dim-overlay treatment as settings. */
#inventory {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 30;
  background: rgba(8, 11, 18, 0.55);
}
#inventory.hidden { display: none; }
.inv-panel { width: min(90vw, 340px); }
.inv-panel h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: 2px; color: #ffe24a; text-shadow: 0 2px 0 #b8860b; }
.inv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.inv-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd8f5; }
.inv-row.empty { color: #55607a; }
.inv-sw { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.25); flex: 0 0 auto; }
.inv-row .inv-n { margin-left: auto; font-weight: 700; color: #8ea0c8; }
.inv-row.empty .inv-n { color: #55607a; }

/* The join menu is FULLSCREEN (Set 12.7/12.8): a header bar with a small centred title, side-tabs
   (Rooms / Player / Settings) so it can grow, and a New game / Join bar clamped to the bottom while the
   room list fills the space between. */
.panel {
  width: 100vw; height: 100vh; padding: 0; border-radius: 0;
  background: transparent; border: 0; box-shadow: none; color: #e6edff; text-align: left;
  display: flex; flex-direction: column;
}
.menu-head { flex: 0 0 auto; padding: 15px 18px; text-align: center; border-bottom: 1px solid #1d2740; }
.menu-head h1 { display: inline; font-size: 30px; letter-spacing: 3px; color: #ffe24a; text-shadow: 0 2px 0 #b8860b; margin: 0; }
.menu-head .ver { font-size: 11px; color: #5a6478; margin-left: 8px; vertical-align: middle; }
.menu-main { flex: 1; min-height: 0; display: flex; justify-content: center; gap: 24px; padding: 26px 22px; }
.menu-tabs { flex: 0 0 148px; display: flex; flex-direction: column; gap: 6px; }
/* scoped under .menu-tabs so they out-specify `.panel button` (which would otherwise paint them gold) */
.menu-tabs .menu-tab { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #8394ba; font-size: 14px; font-weight: 600; font-family: inherit; letter-spacing: 0; cursor: pointer; text-align: left; }
.menu-tabs .menu-tab .ico { font-size: 16px; }
.menu-tabs .menu-tab:hover { background: #131a28; color: #b9c6e6; }
.menu-tabs .menu-tab.on { background: #18233a; color: #ffcf4a; box-shadow: inset 3px 0 0 #ffcf4a; }
.menu-panes { flex: 1; max-width: 540px; min-height: 0; display: flex; flex-direction: column; }
.menu-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.menu-pane.hidden { display: none; }
.menu-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; justify-content: center; padding: 14px 24px; border-top: 1px solid #1d2740; background: #0c1017; }
.panel .menu-foot .linkish { flex: 0 0 auto; width: auto; margin: 0; padding: 11px 20px; font-size: 13px; }
.panel .menu-foot #play { flex: 0 0 auto; width: auto; margin: 0; padding: 12px 46px; }
.menu-foot #status { flex: 0 0 auto; margin: 0; }
@media (max-width: 560px) {
  .menu-tabs { flex-basis: 50px; }
  .menu-tabs .menu-tab .lb { display: none; }
  .menu-tabs .menu-tab { justify-content: center; padding: 12px 0; }
}
.panel label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 13px; color: #a9b7d8; }
.panel input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a3550; background: #0f1420; color: #e6edff; font-size: 14px; }
.panel input[type="color"] { flex: 0 0 44px; padding: 2px; height: 34px; }
.panel button {
  width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#ffe24a, #f5b800); color: #3a2b00; font-weight: 800; letter-spacing: 1px; font-size: 15px;
}
.panel button:active { transform: translateY(1px); }
.panel .audio { display: flex; gap: 14px; margin: 10px 0; }
/* min-width:0 lets the flex items shrink past the range input's intrinsic width — without
   it two native sliders overrun the panel's right edge. */
.panel .audio label { flex: 1; min-width: 0; margin: 0; font-size: 12px; }
.panel .audio input[type="range"] { flex: 1; min-width: 0; padding: 0; height: 20px; background: transparent; border: 0; accent-color: #ffe24a; }
.panel .help { margin-top: 16px; font-size: 11px; color: #6f7fa6; line-height: 1.6; }

/* Keybinds (Set 12.2): a rebindable action list in the settings overlay. */
/* ---- in-game settings modal: Audio + Controls tabs (Set 12.6, reusing .wiz-* chrome) ---- */
.set-pane { display: flex; flex-direction: column; }
.set-pane.hidden { display: none; }
.set-pane > label { display: flex; align-items: center; gap: 14px; margin: 12px 0; font-size: 14px; color: #a9b7d8; }
.set-pane input[type="range"] { flex: 1; accent-color: #ffcf4a; height: 22px; }
.wiz-foot #sClose { background: linear-gradient(180deg, #ffd95e, #f5b301); color: #23180a; }

.kb-reset { font-size: 11px; letter-spacing: .3px; padding: 4px 10px; background: #151c2b; color: #a9b7d8; border: 1px solid #2f3b58; border-radius: 7px; cursor: pointer; margin-left: 8px; font-family: inherit; }
.kb-reset:hover { color: #ffcf4a; border-color: #ffcf4a; }
.kb-list { display: flex; flex-direction: column; gap: 4px; }
.kb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; }
.kb-row:hover { background: #141d2c; }
.kb-row .kb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kb-row .kb-label { color: #dbe3f5; font-size: 13.5px; font-weight: 600; }
.kb-row .kb-desc { font-size: 11.5px; color: #6f7fa6; }
.kb-row .kb-key { flex: none; min-width: 64px; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #ffe24a; background: #10182c; border: 1px solid #37507f; border-bottom-width: 2px; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.kb-row .kb-key:hover { border-color: #5f7fc0; }
.kb-row.kb-conflict { border-color: #7a2b2680; }
.kb-row.kb-conflict .kb-key { color: #ff6157; border-color: #7a2b26; }
.kb-row .kb-warn { flex-basis: 100%; font-size: 11px; color: #ff8a80; padding-left: 2px; }
.panel .help b { color: #cdd8f5; }
#status { margin-top: 10px; font-size: 12px; min-height: 16px; color: #ff6b6b; }

/* --- room picker in the join panel ------------------------------------- */
/* The game list scrolls within a fixed band so a long roster can't push JOIN GAME off the
   bottom of the panel; the panel itself has a viewport cap as a backstop (below). */
.rooms { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 1; min-height: 0; overflow-y: auto; }
.rooms::-webkit-scrollbar { width: 8px; }
.rooms::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 4px; }
.rooms::-webkit-scrollbar-track { background: transparent; }
.rooms .room {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer; text-align: left;
  background: #0f1420; border: 1px solid #2a3550;
}
.rooms .room:hover { border-color: #4a5b86; }
.rooms .room.on { border-color: #ffe24a; background: #1a2131; }
.rooms .room .rname { font-size: 13px; color: #e6edff; font-weight: 600; }
.rooms .room .rmode { font-size: 11px; color: #8ea0c8; }
.rooms .room .rcount { font-size: 11px; color: #6f7fa6; font-variant-numeric: tabular-nums; }
.rooms .room.full { opacity: .45; cursor: not-allowed; }

/* --- Quake console ------------------------------------------------------
   Drops over the top of the screen. Monospace, because it's a console and the
   scrollback is aligned columns. */
#console {
  position: fixed; left: 0; right: 0; top: 0; height: 45vh; z-index: 30;
  display: flex; flex-direction: column;
  background: rgba(8, 11, 18, .93);
  border-bottom: 2px solid #ffe24a;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#console.hidden { display: none; }
#conlog { flex: 1; overflow-y: auto; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.conrow { min-height: 1.5em; }
#conline { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid #2a3550; }
#conprompt { color: #ffe24a; font-weight: 700; }
#conin { flex: 1; background: transparent; border: 0; outline: 0; color: #e6edff; font: inherit; }

/* --- say bar (T / Y) ---------------------------------------------------- */
#saybar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 29;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(8, 11, 18, .9); border-bottom: 1px solid #2a3550;
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#saybar.hidden { display: none; }
#saylabel { color: #ffe24a; font-weight: 700; }
#sayin { flex: 1; background: transparent; border: 0; outline: 0; color: #e6edff; font: inherit; }

/* --- create-a-game form ------------------------------------------------- */
/* `.panel button` is a class+element selector, so it out-specifies a bare class —
   scope these to .panel too, or the join button's gradient wins and every button
   in the panel shouts equally loudly. */
.panel .linkish {
  width: 100%; margin: 2px 0 0; padding: 7px; border: 1px dashed #2a3550; border-radius: 8px;
  background: transparent; color: #8ea0c8; font-size: 12px; cursor: pointer; font-weight: 600;
  letter-spacing: 0;
}
.panel .linkish:hover { border-color: #ffe24a; color: #ffe24a; }
.panel .linkish:disabled { opacity: .5; cursor: not-allowed; border-style: solid; }
.cmode-blurb { font-size: 12px; color: #6f7fa6; margin: -2px 0 4px; text-align: left; min-height: 14px; }
.cnote { font-size: 11px; color: #556084; text-align: left; margin: 4px 0 2px; }

/* ================= create-a-game WIZARD — an almost-fullscreen modal (Set 12.7) ================= */
.wiz-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(6,9,15,.72); backdrop-filter: blur(3px); }
.wiz-modal.hidden { display: none; }
.wiz-card {
  width: min(94vw, 940px); height: min(90vh, 720px); display: flex; flex-direction: column;
  background: #10151f; border: 1px solid #2a3550; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6); text-align: left;
}
/* top: title + a sectioned coloured progress bar */
.wiz-top { padding: 18px 22px 0; }
.wiz-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; color: #eaf0ff; }
.wiz-bar { display: flex; gap: 6px; margin-top: 12px; }
.wiz-seg { flex: 1; height: 5px; border-radius: 999px; background: #222c42; transition: background .18s, box-shadow .18s; }
.wiz-seg.done { background: #3f7a55; }
.wiz-seg.on { background: #ffcf4a; box-shadow: 0 0 12px rgba(255,207,74,.5); }
/* a step you moved past while it had invalid fields (e.g. no name) flags red */
.wiz-seg.bad { background: #ff5f5f; box-shadow: 0 0 10px rgba(255,95,95,.55); }
.wiz-navitem.bad { color: #ff6a6a; box-shadow: inset 3px 0 0 #ff5f5f; }
.wiz-navitem.bad .ico { filter: none; }

/* body: left icon step-list + main content */
.wiz-body { flex: 1; display: flex; min-height: 0; }
.wiz-nav { flex: 0 0 168px; border-right: 1px solid #202a40; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.wiz-navitem {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: #8394ba; font-size: 14px; font-weight: 600; font-family: inherit;
}
.wiz-navitem .ico { font-size: 17px; filter: grayscale(.4) opacity(.8); }
.wiz-navitem:hover { background: #151c2b; color: #b9c6e6; }
.wiz-navitem.on { background: #1b2740; color: #ffcf4a; border-color: #33406220; box-shadow: inset 3px 0 0 #ffcf4a; }
.wiz-navitem.on .ico { filter: none; }
.wiz-main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; }
@media (max-width: 620px) {
  .wiz-nav { flex-basis: 56px; }
  .wiz-navitem .lb { display: none; }
  .wiz-navitem { justify-content: center; padding: 12px 0; }
}

.wiz-page { display: flex; flex-direction: column; }
.wiz-page.hidden { display: none; }
.wiz-hint { font-size: 13px; color: #7182a6; margin: 0 0 12px; }
/* Scoped to the basics page (step 0) ONLY, so it never clobbers the plugin/options toggles, which are
   also <label>s inside .wiz-main and have their own grid/flex layout. */
.wiz-page[data-page="0"] label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 11px 0; font-size: 14px; color: #a9b7d8; }
.wiz-page[data-page="0"] input, .wiz-page[data-page="0"] select {
  flex: 1; padding: 9px 11px; border-radius: 9px; border: 1px solid #2a3550;
  background: #0f1420; color: #e6edff; font-size: 14px; font-family: inherit;
}
.wiz-page[data-page="0"] input[type="number"] { flex: 0 0 120px; }
.wiz-page[data-page="0"] input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #ffcf4a; cursor: pointer; }
.wiz-page[data-page="0"] .unit { flex: 0 0 auto; color: #6f7fa6; font-size: 12px; }
.wiz-check { cursor: pointer; }

/* plugins step: presets, search + sort, and a GRID row so checkboxes always line up */
.preset-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.preset-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: #61708f; }
.preset { padding: 7px 12px; border-radius: 999px; border: 1px solid #2f3b58; background: #151c2b; color: #b9c6e6; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.preset:hover { border-color: #ffcf4a; color: #ffcf4a; }
.plug-controls { display: flex; gap: 10px; margin-bottom: 10px; }
#cPlugSearch { flex: 1; padding: 9px 12px; border-radius: 9px; border: 1px solid #2a3550; background: #0f1420; color: #e6edff; font-size: 13px; font-family: inherit; }
#cPlugSort { flex: 0 0 auto; padding: 9px 14px; border-radius: 9px; border: 1px solid #2a3550; background: #151c2b; color: #a9b7d8; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
#cPlugSort:hover { border-color: #ffcf4a; color: #ffcf4a; }

.cplugins { display: flex; flex-direction: column; gap: 3px; }
.ctoggle {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; font-size: 14px; color: #b9c6e6; cursor: pointer; border: 1px solid transparent;
}
.ctoggle input { width: 15px; height: 15px; margin: 0; accent-color: #7bd88f; cursor: pointer; }
.ctoggle:hover { background: #151c2b; }
.ctoggle.on { border-color: #2b3a55; background: #141d2c; }
.ctoggle.locked { color: #7182a6; cursor: default; }
.cplug-name { text-align: left; }
.cplug-note { font-size: 11px; color: #556084; text-align: right; }
.cplug-note.why { color: #6f83aa; font-style: italic; }

/* options step */
.coptions { display: flex; flex-direction: column; gap: 12px; }
.copt-plugin { border: 1px solid #222c44; border-radius: 10px; padding: 12px 14px; background: #0e1420; }
.copt-head { font-size: 13px; font-weight: 700; color: #cdd8f5; margin-bottom: 8px; }
.copt-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.copt-label { flex: 0 0 40%; font-size: 13px; color: #9fb0d6; }
.copt-input { flex: 1; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a3550; background: #141a26; color: #e6edff; font-size: 13px; font-family: inherit; }
.copt-multi { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.copt-multi .ctoggle { display: inline-flex; padding: 0; border: 0; }

/* footer: Cancel · error · Back/Next/Create */
.wiz-foot { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid #202a40; background: #0d121c; }
.wiz-foot-r { margin-left: auto; display: flex; gap: 10px; }
.wiz-foot button { padding: 10px 20px; border-radius: 9px; font-size: 13px; font-weight: 700; font-family: inherit; letter-spacing: .3px; cursor: pointer; border: 1px solid transparent; }
.wiz-foot button:active { transform: translateY(1px); }
#cNext, #cCreate { background: linear-gradient(180deg, #ffd95e, #f5b301); color: #23180a; }
.wiz-foot .ghost { background: #151c2b; color: #a9b7d8; border-color: #2a3550; }
.wiz-foot .ghost:hover { border-color: #3a486a; color: #cdd8f5; }
.wiz-foot .hidden { display: none; }
.cerr { color: #ff6b6b; font-size: 12px; text-align: left; }
.rooms .room .rtemp { font-size: 9px; color: #4a5675; letter-spacing: .5px; }

/* ── Macro-widgets DOM overlay (Set 12.5) ──────────────────────────────────────────────────
   Plugin UI (modal + icon-grid) mounted over the game canvas. The root passes mouse events
   THROUGH (pointer-events:none) so gameplay (move/aim/fire) is unaffected everywhere except on
   an actual widget cell (or the modal dim), which re-enable pointer-events. Layout is CSS: flex
   for stacks, grid for the icon-grid. Sits below the settings/wizard modals (z 40) and console. */
.wl-root { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-family: system-ui, sans-serif; color: #e8edfb; user-select: none; -webkit-user-select: none; }
.wl-modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,9,16,.62); pointer-events: auto; }
.wl-panel { background: rgba(17,22,36,.97); border: 1px solid #2f3b58; border-radius: 14px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.wl-title { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 15px; font-weight: 750; margin-bottom: 12px; }
.wl-hint { font: 600 11px ui-monospace, monospace; color: #61708f; }
.wl-vstack { display: flex; flex-direction: column; }
.wl-hstack { display: flex; flex-direction: row; }
.wl-grid { display: grid; gap: 8px; }
/* A text widget (ui.text): a section heading or a slot label inside a modal. A short all-caps caption
   reads as a label without competing with the panel title. */
.wl-text { font: 700 11px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8ea0c8; align-self: center; }
.wl-anchor-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
.wl-anchor-top { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); }
.wl-anchor-top-left { position: absolute; left: 14px; top: 14px; }
.wl-anchor-top-right { position: absolute; right: 14px; top: 14px; }
.wl-anchor-bottom-left { position: absolute; left: 14px; bottom: 14px; }
.wl-anchor-bottom-right { position: absolute; right: 14px; bottom: 14px; }
.wl-cell { width: 46px; height: 46px; border-radius: 8px; background: rgba(20,26,40,.9); border: 1px solid #2a3550; position: relative; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.wl-hot .wl-cell { background: rgba(14,20,32,.85); border-color: #33456b; }
.wl-cell.wl-empty { background: rgba(255,255,255,.02); border-color: #232d45; pointer-events: none; }
/* Inside the modal an empty slot must be a DROP TARGET (drag an item onto it), so it can't pass pointer
   events through like a HUD-mount gap does — the modal dim already blocks the game behind it anyway. */
.wl-modal .wl-cell.wl-empty { pointer-events: auto; }
.wl-cell:not(.wl-empty) { cursor: pointer; }
.wl-cell:not(.wl-empty):hover { border-color: #45d4ff; box-shadow: 0 0 12px rgba(69,212,255,.4) inset; }
/* The held item — the same selection the carousel centres, shown here as a lit cell (Set 12.9). */
.wl-cell.wl-sel { border-color: #ffe24a; box-shadow: 0 0 0 2px rgba(255,226,74,.5), 0 0 12px rgba(255,226,74,.35) inset; }
.wl-icon { width: 34px; height: 34px; image-rendering: pixelated; pointer-events: none; -webkit-user-drag: none; user-drag: none; }
.wl-count { position: absolute; right: 4px; bottom: 2px; font: 700 11px system-ui, sans-serif; color: #e6edff; pointer-events: none; }
/* The drag ghost (Option B): the picked item's icon following the cursor. */
.wl-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) rotate(-7deg); }
.wl-ghost .wl-icon { width: 38px; height: 38px; }
/* While an item is being dragged, hide it in its SOURCE cell so it's not shown twice (Eric). */
.wl-cell.wl-dragging .wl-icon, .wl-cell.wl-dragging .wl-count { visibility: hidden; }

/* The shooter weapon carousel (Set 12.9), as a macro-widget: a strip of weapon chips with the selected one
   slid to dead-centre and lifted. Display-only (pointer-events none) so aim/fire fall through to the game. */
/* No `position` here on purpose: the ui.hud anchor (.wl-anchor-*) supplies position:absolute, which is
   also the positioning context for the children below. Setting position here would override the anchor
   (equal specificity, later rule) and strand the strip at the top. */
.wl-carousel { width: 420px; height: 74px; pointer-events: none; }
.wl-cname { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 800 14px system-ui, sans-serif; color: #ffe24a; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.wl-cview { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; overflow: hidden; }
.wl-ctrack { position: absolute; left: 50%; bottom: 2px; display: flex; gap: 10px; transition: transform .16s ease; }
.wl-cchip { position: relative; width: 44px; height: 44px; border-radius: 8px; background: rgba(20,26,38,.82); border: 1px solid #2a3550; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; transition: transform .16s ease, border-color .16s, background .16s; }
.wl-cchip.wl-sel { background: rgba(255,226,74,.92); border-color: #fff; transform: translateY(-3px) scale(1.12); z-index: 2; }
.wl-cchip .wl-icon { width: 34px; height: 34px; }
.wl-cchip .wl-count { color: #cfe; }
.wl-cchip.wl-sel .wl-count { color: #3a2b00; }
/* The cooldown sweep: darkens the bottom of the selected chip and recedes upward as it recharges. */
.wl-ccool { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(12,16,26,.62); pointer-events: none; transition: height .05s linear; }
/* The trowel's selected-block swatch, top-left of its chip. */
.wl-cswatch { position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border: 1px solid rgba(255,255,255,.5); }
/* The usage/durability bar (Set 19): a track pinned to the bottom edge of a cell or chip, with a fill
   whose width is the fraction of uses left before the item breaks. Sits under the count/cooldown so it
   reads as a base meter; the chip variant hides itself when the held item has no uses. */
.wl-usage { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(0,0,0,.5); overflow: hidden; pointer-events: none; }
.wl-usage-fill { height: 100%; width: 0; background: #7bd88f; border-radius: 2px; transition: width .12s linear; }
.wl-cchip .wl-usage { display: none; }
/* A solid colour swatch filling a cell (Set 19, the block maker's pixel editor + palette). */
.wl-swatch { position: absolute; inset: 4px; border-radius: 5px; }