/* TigerCut 3D box viewer – styles
   Everything is scoped under .tb so it will not touch the rest of your site. */

.tb {
  --tb-bg: rgba(255,255,255,.86);
  --tb-fg: #16181b;
  --tb-dim: #5d6168;
  --tb-line: rgba(0,0,0,.14);
  --tb-hover: rgba(0,0,0,.07);
  --tb-accent: #ffe600;         /* brand yellow: active buttons */
  --tb-accent-fg: #111;
  position: relative;
  width: 100%;
  height: 640px;                /* change this (or set your own height in CSS) */
  max-height: 92vh;
  overflow: hidden;
  border-radius: 14px;
  box-sizing: border-box;
  font-family: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  color: var(--tb-fg);
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% 38%, #f3f4f6 0%, #d3d6db 62%, #b7bbc2 100%);
}
.tb--grey { background: radial-gradient(ellipse at 50% 38%, #b4b8bf 0%, #8f939b 65%, #6f737b 100%); }
.tb--dark { background: radial-gradient(ellipse at 50% 38%, #34363c 0%, #1b1c20 65%, #0d0e10 100%); }
.tb--transparent { background: transparent; }

/* dark UI chrome (buttons) */
.tb--ui-dark {
  --tb-bg: rgba(24,25,28,.84);
  --tb-fg: #f1f2f4;
  --tb-dim: #a4a8b0;
  --tb-line: rgba(255,255,255,.16);
  --tb-hover: rgba(255,255,255,.09);
}

.tb__stage { position: absolute; inset: 0; }
.tb__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.tb__stage canvas:active { cursor: grabbing; }

.tb__chip {
  background: var(--tb-bg);
  border: 1px solid var(--tb-line);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.tb__hint {
  position: absolute; top: 12px; right: 12px;
  font-size: 14px; color: var(--tb-dim); padding: 7px 12px; pointer-events: none;
}
.tb__dock {
  position: absolute; left: 0; right: 0; bottom: 12px; padding: 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
}
.tb__dock > * { pointer-events: auto; }
.tb__row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.tb__group { display: flex; align-items: center; gap: 2px; padding: 4px; }
.tb__label { font-size: 14px; color: var(--tb-dim); padding: 0 8px 0 10px; font-weight: 500; }

.tb button {
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--tb-fg); background: transparent;
  border: 0; border-radius: 7px; padding: 0 13px; min-height: 38px;
  cursor: pointer; white-space: nowrap; margin: 0; line-height: 1;
}
.tb button:hover { background: var(--tb-hover); }
.tb button[aria-pressed="true"], .tb button[aria-checked="true"] {
  background: var(--tb-accent); color: var(--tb-accent-fg);
}
.tb button:focus-visible { outline: 2px solid var(--tb-fg); outline-offset: 1px; }

.tb__views { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tb__views::-webkit-scrollbar, .tb__opts::-webkit-scrollbar { display: none; }

.tb__fallback { display: none; position: absolute; inset: 0; padding: 16px; overflow: auto; text-align: center; }
.tb__fallback img { height: 60%; max-width: 24%; object-fit: contain; margin: 0 4px; }

@media (max-width: 720px) {
  .tb { height: 560px; }
  .tb__hint { display: none; }
  .tb button { padding: 0 10px; min-height: 40px; }
  .tb__dock { bottom: 10px; padding: 0 10px; gap: 8px; }
  .tb__views { justify-content: flex-start; }
  .tb__opts { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .tb__opts > .tb__group { flex: 0 0 auto; }
}