/* hardhat.css — digital hardhat sticker board */

#hardhat-root { max-width: 720px; margin: 0 auto; padding: 12px 14px 40px; }

.hh-loading { color: var(--text-muted, #6b7280); padding: 28px 6px; text-align: center; }

/* tabs */
.hh-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.hh-tab {
  border: 1px solid var(--border, #e3e6ea); background: var(--surface, #fff);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; cursor: pointer;
  color: var(--text-2, #374151);
}
.hh-tab.is-active { background: var(--gold, #f0a63c); border-color: var(--gold, #f0a63c); color: #1b1b1b; font-weight: 600; }

/* the 3D stage */
.hh-stage {
  width: 100%; max-width: 460px; height: 340px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #eef1f6 0%, #d8dde6 70%, #cdd3dd 100%);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.hh3d-canvas { display: block; width: 100%; height: 100%; }
.hh-hint--center { display: block; text-align: center; margin-top: 6px; }
.hh-thumb {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 30%, #eef1f6 0%, #d8dde6 100%);
}
@media (max-height: 700px) { .hh-stage { height: 280px; } }

/* the 2D fallback board */
.hh-board-wrap { display: flex; justify-content: center; }
.hh-board {
  --hh-scale: 1;
  position: relative; width: 100%; max-width: 420px; aspect-ratio: 220 / 150;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.hh-hat-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.hh-sticker { position: absolute; }
.hh-sticker--live { cursor: grab; }
.hh-sticker--live:active { cursor: grabbing; }
.hh-sticker__face {
  display: flex; align-items: center; justify-content: center;
  width: calc(58px * var(--hh-scale, 1)); height: calc(58px * var(--hh-scale, 1));
  font-size: calc(30px * var(--hh-scale, 1)); line-height: 1;
  background: #fff; border: calc(3px * var(--hh-scale, 1)) solid #ccc; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.hh-sticker.is-selected .hh-sticker__face {
  outline: 3px dashed var(--gold, #f0a63c); outline-offset: 2px;
}
.hh-face-img { max-width: 74%; max-height: 56%; object-fit: contain; }

/* selected-sticker controls */
.hh-ctl { display: flex; gap: 8px; justify-content: center; margin: 10px 0 2px; flex-wrap: wrap; }
.hh-ctl__btn {
  min-width: 44px; height: 40px; border-radius: 8px; border: 1px solid var(--border, #e3e6ea);
  background: var(--surface, #fff); font-size: 17px; cursor: pointer;
}
.hh-ctl__btn--wide { font-size: 13px; padding: 0 12px; }
.hh-ctl__btn:active { background: var(--surface-2, #f2f3f5); }

/* hat colors */
.hh-colors { display: flex; gap: 10px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.hh-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(0, 0, 0, .15);
}
.hh-swatch.is-active { border: 3px solid var(--gold, #f0a63c); box-shadow: 0 0 0 2px #fff inset; }

/* tray */
.hh-tray-head { font-weight: 600; margin: 18px 0 8px; color: var(--text, #111827); }
.hh-hint { font-weight: 400; color: var(--text-muted, #6b7280); font-size: 13px; }
.hh-hint--block { display: block; padding: 8px 0 4px; }
.hh-tray { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 10px; }
.hh-tray__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; min-width: 74px; padding: 4px;
}
.hh-tray__item .hh-sticker__face { --hh-scale: 1; }
.hh-tray__item:active .hh-sticker__face { transform: scale(.92); }
.hh-tray__label { font-size: 11.5px; color: var(--text-2, #374151); text-align: center; max-width: 84px; }

/* legend + saved blip */
.hh-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.hh-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted, #6b7280); }
.hh-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hh-saved {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1b1b1b; color: #fff; border-radius: 999px; padding: 8px 16px;
  font-size: 13px; z-index: 60; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* team wall */
.hh-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.hh-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
  border-radius: 12px; padding: 12px 10px 10px; text-align: center;
}
.hh-card--me { border-color: var(--gold, #f0a63c); box-shadow: 0 0 0 1px var(--gold, #f0a63c); }
.hh-board--mini { --hh-scale: .34; max-width: 100%; pointer-events: none; }
.hh-card__name { font-weight: 600; font-size: 13px; margin-top: 6px; color: var(--text, #111827); }
.hh-card__meta { font-size: 11.5px; color: var(--text-muted, #6b7280); }

/* admin awards */
.hh-admin { display: flex; flex-direction: column; gap: 16px; }
.hh-admin__box {
  background: var(--surface, #fff); border: 1px solid var(--border, #e3e6ea);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.hh-admin__title { font-weight: 700; font-size: 14px; }
.hh-admin__box select, .hh-admin__box input {
  height: 40px; border: 1px solid var(--border, #e3e6ea); border-radius: 8px;
  padding: 0 10px; font-size: 14px; background: #fff;
}
.hh-primary {
  height: 40px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--gold, #f0a63c); color: #1b1b1b; font-weight: 700; font-size: 14px;
}
.hh-recent { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.hh-recent__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; padding: 6px 2px; border-bottom: 1px solid var(--surface-2, #f2f3f5);
}
.hh-revoke {
  border: none; background: none; color: var(--danger-2, #c53030); cursor: pointer;
  font-size: 14px; padding: 4px 8px;
}