/* "Hold to start game": stone frame (art/start-frame.webp) over a liquid well drawn by hold-start.js */
.screen-setup .setup-bottom{grid-template-columns:1fr auto 1fr}

.hold-start{position:relative;display:block;width:clamp(320px,46vw,640px);aspect-ratio:930/195;padding:0;margin:0 auto;
  background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;touch-action:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,filter .18s ease}
.hold-start:hover{transform:translateY(-2px);filter:brightness(1.07)}
.hold-start:focus-visible{outline:none;filter:drop-shadow(0 0 10px #b78bffaa)}
.hold-start.is-holding{transform:scale(.99)}

/* the well: same hexagon as the window in the frame art */
.hs-well{position:absolute;left:11.6%;top:27.7%;width:77.3%;height:42%;overflow:hidden;
  clip-path:polygon(3.5% 0,96.3% 0,100% 50%,96.3% 100%,3.5% 100%,0 50%);
  background:
    radial-gradient(ellipse 40% 60% at 72% 62%,#4a36b555,transparent 70%),
    radial-gradient(ellipse 35% 55% at 28% 35%,#5a3fc244,transparent 70%),
    radial-gradient(ellipse 30% 45% at 90% 20%,#3a2e9a55,transparent 70%),
    linear-gradient(180deg,#2d2488,#1e1a60 58%,#262078);
  box-shadow:inset 0 0 22px #09062ccc,inset 0 0 0 2px #7b5cff55}
.hs-well::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(200,170,255,.16) 50%,transparent 65%);
  background-size:250% 100%;animation:hs-sheen 3.4s linear infinite}
.hold-start.is-holding .hs-well::after,.hold-start.is-done .hs-well::after{animation:none;opacity:0}
.hs-liquid{position:absolute;inset:0;width:100%;height:100%;display:block}
.hs-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 6px 10px #0009)}

.hs-label{position:absolute;left:11.6%;top:27.7%;width:77.3%;height:42%;display:grid;place-items:center;pointer-events:none}
.hs-label>span{grid-area:1/1;font:800 clamp(17px,2.35vw,33px)/1 "Exo 2","Arial Black",sans-serif;letter-spacing:.01em;
  color:#f1f0ff;text-shadow:0 2px 0 #2a1a6e,0 0 14px #a07cff80;transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
.hs-keep{opacity:0;transform:translateY(4px)}
.hold-start.is-holding .hs-idle,.hold-start.is-done .hs-idle{opacity:0;transform:translateY(-4px)}
.hold-start.is-holding .hs-keep,.hold-start.is-done .hs-keep{opacity:1;transform:none}

.hold-start.is-done{animation:hs-burst .35s ease-out}
.hold-start.is-done .hs-well{filter:brightness(1.35) saturate(1.2)}
.hold-start.is-nudged{animation:hs-nudge .4s ease}

@keyframes hs-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes hs-burst{50%{transform:scale(1.03);filter:brightness(1.25) drop-shadow(0 0 18px #c79bff)}}
@keyframes hs-nudge{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

@media (max-width:760px){
  .hold-start{width:100%}
  .hs-label>span{font-size:clamp(15px,4.6vw,24px)}
}
@media (prefers-reduced-motion:reduce){.hs-well::after{animation:none}}