/* Hexchess 3 configurator: the boards as rendered, cut like a trailer, and the
   pieces in your colours. Black stage, the campaign's type (Cinzel titles, Jost
   labels; tokens from hexchess3.css) and the site tokens from site.css (--ink,
   --muted, --sans). */
.hx3c{--c-bg:#020008;--c-panel:#0b0a10;--c-line:#ffffff17;--c-gold:var(--hx3-gold,#d99f5f);--c-gold-hi:var(--hx3-gold-hi,#f6d4a2);--c-ivory:var(--hx3-ivory,#f3ede3);--c-label:var(--hx3-label,var(--sans));--c-title:var(--hx3-title,Georgia,serif);position:relative;color:var(--ink);font-family:var(--sans)}
:where(.hx3c) button{font:inherit;color:inherit;cursor:pointer}
.hx3c :focus-visible{outline:1px solid var(--c-gold);outline-offset:3px}

/* sets */
.hx3c-sets{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:16px;border-bottom:1px solid var(--c-line)}
.hx3c-sets::-webkit-scrollbar{display:none}
.hx3c-sets button{flex:none;padding:11px 18px 10px;border:0;border-radius:2px;background:none;font-family:var(--c-title);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:#a49d92;position:relative;transition:color .25s}
.hx3c-sets button:after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--c-gold),transparent);opacity:0;transform:scaleX(.4);transition:opacity .3s,transform .4s}
.hx3c-sets button:hover{color:var(--c-ivory)}
.hx3c-sets button[aria-selected=true]{color:var(--c-ivory)}
.hx3c-sets button[aria-selected=true]:after{opacity:1;transform:none}

.hx3c-body{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:34px;padding-top:28px}
.hx3c-stage{min-width:0;display:flex;flex-direction:column;gap:14px}

/* the stage: always black, like the trailer */
.hx3c-frame{position:relative;overflow:hidden;border-radius:4px;background:#000;aspect-ratio:16/9;box-shadow:0 30px 80px -30px #000,0 0 0 1px #ffffff0d;isolation:isolate}
/* each image fades in over the last, which holds underneath until it is covered */
.hx3c-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;visibility:hidden;transition:opacity .75s cubic-bezier(.4,0,.2,1),visibility 0s .75s}
.hx3c-pic.on{z-index:1;opacity:1;visibility:visible;transition:opacity .75s cubic-bezier(.4,0,.2,1)}
.hx3c-pic.under{opacity:1;visibility:visible;transition:none}
.hx3c-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 50% 46%,transparent 62%,#0000004d 100%);z-index:2}
@media(prefers-reduced-motion:no-preference){.hx3c-pic.enter{animation:hx3c-enter 1.1s cubic-bezier(.2,.7,.2,1)}}
@keyframes hx3c-enter{from{transform:scale(1.025)}to{transform:none}}
.hx3c-loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .3s}
.hx3c-loading.on{opacity:1}
.hx3c-loading span{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--c-gold),transparent);background-size:200% 100%;animation:hx3c-sweep 1.2s linear infinite}
@keyframes hx3c-sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.hx3c-step{position:absolute;top:50%;z-index:4;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;border:1px solid #ffffff26;border-radius:50%;background:#02000880;color:var(--c-ivory);opacity:0;transition:opacity .3s,background .2s,border-color .2s;backdrop-filter:blur(6px)}
.hx3c-step.prev{left:18px}
.hx3c-step.next{right:18px}
.hx3c-step.next svg{transform:scaleX(-1)}
.hx3c-frame:hover .hx3c-step,.hx3c-frame:focus-within .hx3c-step{opacity:1}
.hx3c-step:hover{background:#020008cc;border-color:#d99f5f99}
.hx3c-caption{position:absolute;left:22px;bottom:18px;z-index:4;margin:0;display:flex;align-items:baseline;gap:14px;font-family:var(--c-label);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#f3ede3cc;pointer-events:none;text-shadow:0 1px 12px #000}
.hx3c-caption b{font-weight:500;color:var(--c-ivory)}
.hx3c-caption span{color:var(--c-gold)}

/* views: a filmstrip */
.hx3c-views{display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;padding:2px 2px 8px;scroll-snap-type:x proximity}
.hx3c-views button{flex:none;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:0;border:0;background:none;font-family:var(--c-label);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#a49d92;transition:color .2s;scroll-snap-align:start}
.hx3c-views button i{display:block;width:128px;aspect-ratio:16/9;border-radius:3px;background:#000 center/cover no-repeat;box-shadow:0 0 0 1px #ffffff14;opacity:.55;transition:opacity .25s,box-shadow .25s,transform .25s}
.hx3c-views button:hover{color:var(--c-ivory)}
.hx3c-views button:hover i{opacity:.9}
.hx3c-views button[aria-current=true]{color:var(--c-gold-hi)}
.hx3c-views button[aria-current=true] i{opacity:1;box-shadow:0 0 0 1px var(--c-gold),0 10px 30px -10px #d99f5f55}
/* wide screens: every view in one row under the stage, labels on up to two lines */
@media(min-width:1001px){.hx3c-views{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible}.hx3c-views button{min-width:0;line-height:1.45;text-align:left}.hx3c-views button i{width:100%}.hx3c-views button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* panel */
.hx3c-panel{display:flex;flex-direction:column;gap:26px;min-width:0}
.hx3c-head .eyebrow{margin-bottom:12px}
.hx3c-head h3{margin:0;font:600 clamp(1.9rem,2.6vw,2.5rem)/1.05 var(--c-title);letter-spacing:.05em;color:var(--c-ivory)}
.hx3c-tagline{margin:12px 0 0;color:#cfc7bb;font-family:var(--hx3-lede,var(--sans));font-style:italic;font-size:1.2rem;line-height:1.45}
.hx3c-label{margin:0 0 12px;font-family:var(--c-label);font-size:.7rem;letter-spacing:.28em;font-weight:500;text-transform:uppercase;color:#a49d92}
.hx3c-label span{color:var(--c-gold)}
.hx3c-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hx3c .look{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;border:0;background:none;text-align:left;min-width:0}
.hx3c .look .art{position:relative;display:block;aspect-ratio:16/10;border-radius:3px;background:#000 center/cover no-repeat;box-shadow:0 0 0 1px #ffffff17;overflow:hidden;transition:box-shadow .25s,transform .25s}
.hx3c .look b{font-weight:400;font-size:.8rem;line-height:1.3;color:#cfc7bb;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hx3c .look:hover .art{transform:translateY(-2px);box-shadow:0 0 0 1px #ffffff40}
.hx3c .look[aria-pressed=true] .art{box-shadow:0 0 0 1px var(--c-gold),0 10px 26px -12px #d99f5f80}
.hx3c .look[aria-pressed=true] b{color:var(--c-gold-hi)}
.hx3c .look small{margin-top:-6px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8d857a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx3c-more{margin-top:12px;padding:6px 0;border:0;background:none;font-family:var(--c-label);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-gold)}
.hx3c-more:hover{color:var(--c-gold-hi)}
/* the panel's pointer down to the pieces, where the colours are */
.hx3c-colour{padding-top:22px;border-top:1px solid var(--c-line)}
.hx3c-colour-note{margin:0 0 16px;color:#cfc7bb;font-size:.9375rem;line-height:1.55}
.hx3c-colour .button{min-height:46px;padding:11px 20px;gap:12px;font-size:.78rem;background:#ffffff0a;color:var(--ink);border-color:#ffffff30;box-shadow:none}
.hx3c .picker{display:none;padding:14px 0 16px}
.hx3c .picker.open{display:block}
.hx3c .chips{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.hx3c .chip{aspect-ratio:1;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26;transition:transform .15s}
.hx3c .chip:hover{transform:scale(1.12)}
.hx3c .chip[aria-pressed=true]{box-shadow:0 0 0 2px var(--c-bg),0 0 0 3.5px var(--c-gold)}
.hx3c .custom{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.875rem;color:var(--muted)}
.hx3c .custom input[type=color]{width:36px;height:28px;padding:0;border:1px solid var(--c-line);border-radius:6px;background:none;cursor:pointer}
.hx3c .custom input[type=text]{width:96px;padding:6px 9px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-panel);color:var(--ink);font:400 .875rem/1 var(--sans);letter-spacing:.04em}
.hx3c-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.hx3c-actions .button{min-height:46px;padding:11px 22px;gap:14px;font-size:.78rem}
.hx3c-reset{padding:10px 6px;border:0;background:none;font-family:var(--c-label);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hx3c-reset:hover{color:var(--ink)}
.hx3c-note{margin:14px 0 0;font-size:.8125rem;color:var(--muted)}

/* the pieces */
/* a black band across the whole page, so the turning pieces sit in the same
   black as their stage instead of fading into the page */
.hx3c-pieces{margin-top:64px;padding:44px 0 52px;background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);scroll-margin-top:72px}
.hx3c-pieces[hidden]{display:none}
.hx3c-pieces-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px;margin-bottom:8px}
.hx3c-pieces-head .eyebrow{margin:0 0 8px}
.hx3c-pieces-head .eyebrow span{color:var(--c-ivory)}
.hx3c-pieces-note{margin:0;color:#cfc7bb;font-family:var(--hx3-lede,var(--sans));font-style:italic;font-size:1.15rem}
.hx3c-kinds{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.hx3c-kinds::-webkit-scrollbar{display:none}
.hx3c-kinds button{flex:none;padding:9px 14px;border:0;background:none;font-family:var(--c-title);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#a49d92;transition:color .2s}
.hx3c-kinds button:hover{color:var(--c-ivory)}
.hx3c-kinds button[aria-selected=true]{color:var(--c-gold-hi)}
.hx3c-tt{position:relative;max-width:780px;margin:0 auto}
.hx3c-tt canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;opacity:0;transition:opacity .6s;cursor:grab;touch-action:pan-y}
.hx3c-tt canvas:active{cursor:grabbing}
.hx3c-tt canvas.ready{opacity:1}
.hx3c-nogl{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 24px;text-align:center;color:var(--muted)}
.hx3c-nogl[hidden]{display:none}
.hx3c-pieces-foot{max-width:780px;margin:34px auto 0;padding-top:26px;border-top:1px solid var(--c-line);text-align:center}
.hx3c-psets{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin:22px 0 4px}
.hx3c-psets button{position:relative;padding:8px 12px;border:0;background:none;font-family:var(--c-label);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:#a49d92;transition:color .2s}
.hx3c-psets button:after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--c-gold);opacity:0;transform:scaleX(.4);transition:opacity .3s,transform .35s}
.hx3c-psets button:hover{color:var(--c-ivory)}
.hx3c-psets button[aria-selected=true]{color:var(--c-gold-hi)}
.hx3c-psets button[aria-selected=true]:after{opacity:1;transform:none}
/* each army's colours right under its half of the stage */
.hx3c-armies{display:grid;grid-template-columns:1fr 1fr;max-width:780px;margin:6px auto 0;text-align:center}
.hx3c-armies .hx3c-label{margin-bottom:12px}
.hx3c-armies .swatches{display:flex;justify-content:center;gap:16px}
.hx3c .army-sw{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:44px;padding:0;border:0;background:none;font-size:.75rem;color:#a49d92;transition:color .2s}
.hx3c .army-sw .sw{width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26,0 0 0 1px #0006;transition:transform .15s,box-shadow .2s}
.hx3c .army-sw:hover{color:var(--c-ivory)}
.hx3c .army-sw:hover .sw{transform:scale(1.08)}
.hx3c .army-sw[aria-expanded=true]{color:var(--c-gold-hi)}
.hx3c .army-sw[aria-expanded=true] .sw{box-shadow:0 0 0 2px #000,0 0 0 3.5px var(--c-gold)}
.hx3c-armies .picker{grid-column:1/-1;width:100%;max-width:560px;margin:22px auto 0;padding:0;border:0;text-align:left}
.hx3c-armies .picker .hx3c-label{margin-bottom:12px;text-align:center}

.hx3c-toast{position:fixed;left:50%;bottom:28px;z-index:20;transform:translate(-50%,20px);padding:12px 20px;border:1px solid var(--c-line);border-radius:10px;background:#141219;font-size:.875rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hx3c-toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:1001px){.hx3c-stage{position:sticky;top:96px;align-self:start}}
@media(max-width:1000px){.hx3c-body{grid-template-columns:1fr}.hx3c-views button i{width:104px}}
@media(max-width:760px){
  .hx3c-sets button{padding:10px 13px 9px;font-size:.82rem}
  .hx3c-step{opacity:1;width:38px;height:38px;margin-top:-19px;background:#02000866}
  .hx3c-step.prev{left:8px}.hx3c-step.next{right:8px}
  .hx3c-caption{left:12px;right:12px;bottom:10px;flex-direction:column;align-items:flex-start;gap:3px;font-size:.62rem;letter-spacing:.24em}
  .hx3c-caption>*{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hx3c-views button i{width:92px}
  .hx3c-looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx3c .chips{grid-template-columns:repeat(6,1fr)}
  .hx3c-pieces{margin-top:44px;padding:32px 0 36px}
  .hx3c-kinds button{padding:8px 10px;font-size:.75rem}
  .hx3c-psets{margin-top:16px}
  .hx3c-psets button{padding:7px 8px;font-size:.6rem;letter-spacing:.18em}
  .hx3c-armies .swatches{gap:10px}
  .hx3c .army-sw .sw{width:30px;height:30px}
}

/* view groups: two-tone, single-colour and resin pieces */
.hx3c-groups{display:flex;gap:2px 22px;flex-wrap:wrap;margin:2px 0 -2px}
.hx3c-groups[hidden]{display:none}
.hx3c-groups button{position:relative;display:flex;align-items:baseline;gap:8px;padding:6px 0 7px;border:0;background:none;font-family:var(--c-label);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#a49d92;transition:color .2s}
.hx3c-groups button small{font-size:.62rem;letter-spacing:.08em;color:#a49d9288}
.hx3c-groups button:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-gold);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .3s,transform .35s}
.hx3c-groups button:hover{color:var(--c-ivory)}
.hx3c-groups button[aria-selected=true]{color:var(--c-gold-hi)}
.hx3c-groups button[aria-selected=true] small{color:var(--c-gold)}
.hx3c-groups button[aria-selected=true]:after{opacity:1;transform:none}
@media(max-width:760px){.hx3c-groups{gap:0 16px}.hx3c-groups button{font-size:.6rem;letter-spacing:.16em}}
@media(max-width:520px){.hx3c-groups{flex-wrap:nowrap}.hx3c-groups .w{display:none}}