/* BoltGlyph: the machine shop. Layout and drawing; colours come from the
   world tokens (--w-*) so light and dark both work. Nuts and bolts are SVG
   sprites built by boltglyph.js. */

.btCard{ overflow: visible; }
.btTop{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.btStats{ display: flex; gap: 14px; font-size: 12px; color: var(--w-dim); }
.btStats b{ display: block; font-family: var(--w-font); font-weight: 400; font-size: 20px; line-height: 1; color: var(--w-accent-text); font-variant-numeric: tabular-nums; }

.btHead{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 8px 0 0; }
.btHeadMid{ text-align: center; }
.btTier{
  display: inline-block; font: 700 10px/1 var(--w-font); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px 4px; border-radius: 999px; color: var(--w-dim); background: var(--w-bg-0);
  border: 1px solid var(--w-line-soft);
}
.btTier.t-h{ color: #ffb547; border-color: rgba(255,181,71,.5); }
.btTier.t-x{ color: #ff6b8a; border-color: rgba(255,107,138,.55); }
.btTier.t-d{ color: var(--w-accent-text); border-color: var(--w-line); }
.btTitle{ font-family: var(--w-font); font-size: clamp(24px, 6.4vw, 32px); line-height: 1.05; margin-top: 4px; color: var(--w-ink); letter-spacing: .02em; }

.btKey{
  -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px;
  color: var(--w-ink); background: none; font: 700 11px/1 var(--w-font); letter-spacing: .06em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease, opacity .2s;
}
.btKey .btRound{
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(180deg, var(--w-bg-3), var(--w-bg-1));
  border: 1px solid var(--w-line);
  box-shadow: inset 0 1px 0 var(--w-edge-hi), 0 6px 0 var(--w-bg-0), 0 10px 18px var(--w-drop);
}
.btKey:active .btRound{ transform: translateY(4px); box-shadow: inset 0 1px 0 var(--w-edge-hi), 0 2px 0 var(--w-bg-0), 0 6px 12px var(--w-drop); }
.btKey[disabled]{ opacity: .4; cursor: default; }
.btKey.small .btRound{ width: 40px; height: 40px; font-size: 17px; box-shadow: inset 0 1px 0 var(--w-edge-hi), 0 4px 0 var(--w-bg-0), 0 8px 14px var(--w-drop); }
.btKey.gold .btRound{ background: linear-gradient(180deg, #ffd860, #ffae1a); color: #3a2300; border-color: #c98200; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 0 #a86a00, 0 10px 18px var(--w-drop); }
.btKey.gold.spent .btRound{ filter: grayscale(.85) brightness(.8); }
.btBadge{
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font: 800 11px/1 system-ui, sans-serif; color: #fff; background: #c81e3a; border: 2px solid var(--w-bg-1);
}
.btKey.spent .btBadge{ background: #6b7280; }
.btKey.nope .btRound, .btBolt.nope{ animation: btNope .32s ease; }
@keyframes btNope{ 0%,100%{ translate: 0 } 25%{ translate: -5px 0 } 50%{ translate: 5px 0 } 75%{ translate: -3px 0 } }
.btKey.hintUndo .btRound{ box-shadow: 0 0 0 3px #ffcc1f, 0 0 22px rgba(255,204,31,.7); animation: btPulse 1s ease-in-out infinite; }

.btMsg{ height: 0; overflow: hidden; opacity: 0; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--w-warn-text); transition: opacity .25s, height .25s; }
.btMsg.show{ height: 20px; opacity: 1; }

/* ---------- the yard ---------- */
.btStage{ position: relative; margin: 6px -6px 6px; padding: 10px 4px 10px; border-radius: 18px;
  background: radial-gradient(120% 80% at 50% 0%, var(--w-glow-soft), transparent 60%), linear-gradient(180deg, var(--w-bg-0), var(--w-bg-1));
  box-shadow: inset 0 1px 0 var(--w-edge-hi), inset 0 0 0 1px var(--w-line-soft);
}
.btYard{
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  row-gap: var(--rowGap, 24px); column-gap: 0; padding-top: calc(var(--nutW, 70px) * .45);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; min-height: 200px;
}
.btBolt{
  position: relative; width: var(--colW, 80px); height: var(--boltH, 120px); cursor: pointer;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.btBolt:focus-visible .btBoltArt{ filter: drop-shadow(0 0 0 2px var(--w-accent)); outline: 2px solid var(--w-accent); outline-offset: 2px; border-radius: 10px; }
.btBoltArt{ position: absolute; left: 50%; bottom: 0; width: var(--nutW, 70px); height: 100%; translate: -50% 0; overflow: visible; }
.btNut{
  position: absolute; left: 50%; width: var(--nutW, 70px); margin-left: calc(var(--nutW, 70px) / -2);
  transition: transform .26s cubic-bezier(.2,1.25,.35,1);
  will-change: transform;
  pointer-events: none;
  backface-visibility: hidden;
}
.btNutArt{ display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.btFly{ position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.btFlying{ position: absolute; transition: none; }
.btBolt.sel{ z-index: 5; }
.btBolt.sel .btBoltArt{ filter: drop-shadow(0 0 10px var(--w-glow)); }

/* a finished bolt gets a cap and a glow */
.btCap{ position: absolute; left: 50%; bottom: calc(var(--boltH) - var(--nutW) * .1); width: calc(var(--nutW) * .26); height: calc(var(--nutW) * .1); translate: -50% 0; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #fff3b0, #ffb820); box-shadow: 0 0 10px rgba(255,200,60,.8); z-index: 9; }
.btBolt.done .btBoltArt{ filter: drop-shadow(0 0 8px rgba(255,210,90,.55)); }
.btBolt.justDone .btNutArt{ animation: btFlash .55s ease; }
@keyframes btFlash{ 0%,100%{ filter: none } 40%{ filter: brightness(1.45) } }
.btYard.won .btBolt.cheer .btNutArt{ animation: btCheer .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes btCheer{ 0%{ transform: none } 40%{ transform: translateY(-10px) } 100%{ transform: none } }

/* hint */
.btBolt.hintFrom .btBoltArt, .btBolt.hintTo .btBoltArt{ filter: drop-shadow(0 0 12px #ffcc1f) drop-shadow(0 0 4px #ffcc1f); }
.btBolt.hintTo::after{
  content: ""; position: absolute; left: 50%; top: calc(var(--nutW) * -.42); translate: -50% 0; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 13px solid #ffcc1f;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); animation: btBob .8s ease-in-out infinite; z-index: 12;
}
.btBolt.hintFrom::after{
  content: "1"; position: absolute; left: 50%; top: calc(var(--nutW) * -.5); translate: -50% 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 800 12px/1 system-ui; color: #3a2300; background: #ffcc1f; z-index: 12; animation: btPulse 1s ease-in-out infinite;
}
.btBolt.hintTo::before{
  content: "2"; position: absolute; left: calc(50% + 16px); top: calc(var(--nutW) * -.55); width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 800 11px/1 system-ui; color: #3a2300; background: #ffcc1f; z-index: 12;
}
@keyframes btBob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(6px) } }
@keyframes btPulse{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.12) } }

/* ---------- action bar ---------- */
.btBar{ display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: 12px 4px 4px; }
.btBarMid{ display: flex; gap: 14px; }
.btMiniRow{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--w-dim); }

/* ---------- level complete ---------- */
.btDone{
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 40%, color-mix(in srgb, var(--w-bg-1) 70%, transparent), color-mix(in srgb, var(--w-bg-0) 92%, transparent));
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s ease;
}
.btDone[hidden]{ display: none; }
.btDone.show{ opacity: 1; }
.btDonePanel{ text-align: center; padding: 22px 20px; transform: translateY(12px) scale(.96); transition: transform .45s cubic-bezier(.2,1.4,.4,1); max-width: 320px; }
.btDone.show .btDonePanel{ transform: none; }
.btDoneKick{ font: 700 11px/1 var(--w-font); letter-spacing: .2em; text-transform: uppercase; color: var(--w-accent-text); }
.btDoneTitle{ font-family: var(--w-font); font-size: 28px; line-height: 1.1; margin: 8px 0 10px; color: var(--w-ink); }
.btStars{ display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; min-height: 0; }
.btStar{ font-size: 46px; line-height: 1; color: var(--w-bg-3); text-shadow: 0 2px 0 rgba(0,0,0,.25); transform: scale(0); animation: btStar .5s cubic-bezier(.3,1.8,.5,1) forwards; animation-delay: var(--d); }
.btStar:nth-child(2){ font-size: 58px; margin-top: -10px; }
.btStar.on{ color: #ffcc1f; text-shadow: 0 0 18px rgba(255,204,31,.6), 0 3px 0 #b07800; }
@keyframes btStar{ to{ transform: scale(1) } }
.btDoneStats{ font-size: 14px; color: var(--w-dim); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.btDoneBtns{ display: grid; gap: 8px; }
.btKeyBig{
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; padding: 14px 18px; border-radius: 16px;
  font: 400 18px/1 var(--w-font); letter-spacing: .04em; color: #fff;
  background: linear-gradient(180deg, #4d8dff, #2563eb); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 0 #1a46b0, 0 12px 22px rgba(0,0,0,.3);
  transition: transform .12s;
}
.btKeyBig:active{ transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #1a46b0, 0 6px 12px rgba(0,0,0,.3); }
.btKeyBig[disabled]{ opacity: .5; cursor: default; }
.btBigRow{ display: flex; gap: 8px; }
.btKeyGhost{
  -webkit-appearance: none; appearance: none; flex: 1; cursor: pointer; padding: 11px 12px; border-radius: 14px;
  font: 400 14px/1 var(--w-font); letter-spacing: .04em; color: var(--w-ink); background: var(--w-bg-2); border: 1px solid var(--w-line);
}

/* ---------- level select ---------- */
.btLevelsDlg .dlg{ max-width: 520px; }
.btLevelSum{ font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.btLevelGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; max-height: 62vh; overflow: auto; padding: 4px 2px 8px; }
.btLv{
  -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 12px; padding: 8px 0 6px; display: grid; gap: 3px; justify-items: center;
  background: var(--card); border: 1px solid var(--line); color: var(--text); box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.btLv b{ font-size: 16px; }
.btLv i{ font-style: normal; font-size: 10px; letter-spacing: 1px; color: #e6a700; min-height: 10px; }
.btLv.t-h{ border-color: rgba(255,181,71,.6); }
.btLv.t-x{ border-color: rgba(255,107,138,.7); box-shadow: 0 3px 0 rgba(255,107,138,.35); }
.btLv.cur{ outline: 2px solid #4d8dff; outline-offset: 1px; }
.btLv.locked{ opacity: .45; cursor: default; box-shadow: none; }

/* help */
.btHelpBox{ margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card) 70%, var(--bg)); border: 1px solid var(--line); }
.btHelpKicker{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.btHelpList{ margin: 0; padding-left: 18px; }
.btHelpList li{ margin: 4px 0; }
.btHelpActions, .btShareActions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 420px){
  .btKey .btRound{ width: 48px; height: 48px; font-size: 20px; }
  .btBarMid{ gap: 10px; }
  .btStage{ margin-left: -10px; margin-right: -10px; }
}
@media (prefers-reduced-motion: reduce){
  .btNut, .btDone, .btDonePanel{ transition: none; }
  .btNut.land, .btStar, .btBolt.hintTo::after, .btBolt.hintFrom::after{ animation: none; transform: none; }
}

/* the world dresses every card button; these are round keys, not slabs */
:root body.gv-world .btCard .btKey{ background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0; color: var(--w-ink); }