/* ── dreidel riddles (shell + HUD come from games.css) ── */
.dq-stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(12px,1.6vw,32px) clamp(12px,1.6vw,32px)}
.dq{position:relative;width:min(1240px,100%);height:100%;max-height:760px;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(16px,1.6vw,32px)}

/* dreidel side */
.dq-wallet{flex:none;display:flex;align-items:center;gap:clamp(10px,.8vw,14px);padding:8px 26px 8px 14px;border-radius:999px;background:#fff;color:var(--ink);text-align:right}
.dq-wallet img{width:clamp(44px,3.4vw,58px);height:auto;display:block}
.dq-wallet small{display:block;font-size:clamp(13px,.85vw,15px);font-weight:600;color:var(--mute);line-height:1.2}
.dq-wallet b{display:block;font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(28px,2.3vw,40px);line-height:1.1;color:var(--blue)}
.dq-wallet.bump{animation:dqBump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes dqBump{40%{scale:1.08}}
.dq-spin{position:relative;border-radius:32px;background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.22),rgba(255,255,255,.04) 70%);border:1.5px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,24px);padding:24px;overflow:hidden}
.dq-top{position:relative;flex:1 1 0;min-height:0;width:100%;display:grid;place-items:center}
.dq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.dq-canvas.grab{cursor:grabbing}
/* the flat picture and its letter are only the fallback for browsers without WebGL */
.dq-top:not(.no3d) img,.dq-top:not(.no3d) .dq-letter{display:none}
.dq-top img{position:absolute;z-index:1;left:14%;bottom:8%;width:72%;height:auto;transform-origin:50% 88%;rotate:-8deg;transition:rotate .4s}
.dq-top.spin img{animation:dqSpin var(--t,2.2s) cubic-bezier(.25,.6,.3,1) forwards}
@keyframes dqSpin{
  0%{rotate:-8deg;scale:1 1;translate:0 0}
  8%{translate:0 -18%}
  12%{translate:0 0}
  20%,40%,60%{scale:-1 1;rotate:6deg}
  30%,50%,70%{scale:1 1;rotate:-6deg}
  78%{scale:-1 1;rotate:10deg}
  86%{scale:1 1;rotate:-14deg}
  93%{rotate:18deg}
  100%{rotate:24deg;scale:1 1}}
.dq-letter{position:absolute;z-index:2;top:8%;left:50%;translate:-50% 0;min-width:clamp(96px,8vw,140px);aspect-ratio:1;border-radius:28px;display:grid;place-items:center;
  font-family:Anomalia,Ploni,sans-serif;font-size:clamp(64px,5.6vw,104px);line-height:1;color:var(--blue);background:var(--lc,#fff);scale:0;rotate:-20deg;transition:scale .55s cubic-bezier(.34,1.56,.64,1),rotate .55s cubic-bezier(.34,1.56,.64,1)}
.dq-letter.show{scale:1;rotate:0deg}
.dq-slot{flex:none;display:grid;place-items:center;width:100%;min-height:clamp(72px,6vw,96px)}
.dq-slot>*{grid-area:1/1}
.dq-cat{min-height:1.3em;font-family:Anomalia,Ploni,sans-serif;font-size:clamp(24px,2vw,38px);text-align:center;opacity:0;translate:0 10px;transition:opacity .4s,translate .4s}
.dq-cat.show{opacity:1;translate:none}
.dq-cat small{display:block;font-family:Ploni,sans-serif;font-size:clamp(15px,1vw,18px);color:rgba(255,255,255,.8);margin-bottom:4px}
.dq-go{border:0;cursor:pointer;font-size:clamp(19px,1.3vw,24px);transition:opacity .25s,visibility .25s,transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
.dq-go:disabled{opacity:0;visibility:hidden}
.dq-letters{flex:none;display:flex;gap:clamp(10px,1vw,18px)}
.dq-letters>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.dq-letters i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-family:Anomalia,Ploni,sans-serif;font-size:25px;color:var(--li,var(--blue));background:var(--lc);transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.dq-letters small{font-size:14px;font-weight:600;color:rgba(255,255,255,.75);transition:color .3s}
.dq-letters .on i{scale:1.2}
.dq-letters .on small{color:#fff}

/* question side */
.dq-card{position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px);border-radius:32px;background:#fff;color:var(--ink);padding:clamp(22px,2.2vw,44px);overflow:hidden}
.dq-card .who{display:flex;align-items:flex-start;gap:14px}
.dq-card .who img{width:clamp(56px,4vw,72px);border-radius:50%;flex:none;background:var(--sky)}
.dq-bub{position:relative;flex:1;padding:14px 18px;border-radius:22px;border-start-start-radius:6px;background:var(--soft);font-size:clamp(17px,1.15vw,21px);line-height:1.45;font-weight:600;transition:background .3s}
.dq-bub.ok{background:#e4f9e8}
.dq-bub.no{background:#fff1e8}
.dq-stake{align-self:flex-start;display:flex;align-items:center;gap:8px;height:0;opacity:0;overflow:hidden;font-size:clamp(15px,1vw,18px);font-weight:600;color:var(--mute);transition:opacity .3s}
.dq-stake.show{height:auto;opacity:1}
.dq-stake img{width:26px;height:auto}
.dq-stake b{color:var(--blue);font-weight:700}
.dq-stake.dbl b{color:var(--flame)}
.dq-q{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(28px,2.4vw,46px);line-height:1.15;min-height:2.3em}
.dq-ans{flex:1;min-height:0;max-height:360px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:clamp(10px,.9vw,16px)}
.dq-ans button{position:relative;min-height:clamp(64px,5vw,86px);padding:12px 18px;border-radius:22px;border:2px solid #dfe5f5;background:#fff;font:inherit;font-weight:700;font-size:clamp(18px,1.5vw,27px);line-height:1.25;color:var(--ink);cursor:pointer;text-align:center;
  transition:border-color .25s,background .25s,color .25s,translate .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.dq-ans button:hover{border-color:var(--blue);translate:0 -3px}
.dq-ans button .k{position:absolute;top:8px;right:12px;font-size:13px;font-weight:700;color:var(--mute)}
.dq-ans button.right{background:#22c55e;border-color:#22c55e;color:#fff}
.dq-ans button.right .k{color:#fff}
.dq-ans button.wrong{background:#ffe7dc;border-color:var(--flame);color:#b23300;opacity:.7;pointer-events:none;animation:dqShake .4s}
.dq-ans.done button:not(.right){opacity:.4;pointer-events:none}
@keyframes dqShake{25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
.dq-card .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.dq-progress{display:flex;gap:6px;min-width:0}
.dq-progress i{width:clamp(16px,1.3vw,22px);height:8px;border-radius:4px;background:#e3e8f6}
.dq-progress i.ok{background:#22c55e}.dq-progress i.half{background:var(--sun)}.dq-progress i.now{background:var(--blue)}
.dq-next{flex:none;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.dq-next.show{opacity:1;pointer-events:auto}
.dq-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;text-align:center;padding:30px;transition:opacity .4s,visibility .4s}
.dq-wait.hide{opacity:0;visibility:hidden}
.dq-wait img{width:clamp(150px,13vw,230px);height:auto}
.dq-wait b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(28px,2.2vw,42px)}
.dq-wait p{color:var(--mute);font-size:clamp(17px,1.1vw,20px)}

.dq-hudcoins{display:none!important}

/* flying gelt */
.dq-coin{position:fixed;top:0;left:0;z-index:50;width:34px;height:auto;pointer-events:none}
.dq-prize{width:clamp(96px,8vw,136px);height:auto}

@media (max-width:900px){
  .dq{grid-template-columns:1fr;grid-template-rows:auto 1fr;max-height:none;height:auto}
  .dq-stage{place-items:start center;overflow-y:auto;padding-bottom:16px}
  .dq-spin{padding:10px 14px 14px;gap:8px;border-radius:24px}
  .dq-top{flex:none;height:min(46vw,260px)}
  .dq-wallet{display:none}
  .dq-hudcoins{display:flex!important}
  .dq-progress{flex:1}
  .dq-progress i{flex:1;width:auto;min-width:0}
  .dq-top.no3d .dq-letter{min-width:64px;font-size:46px;border-radius:18px;top:-2px}
  .dq-letters{display:none}
  .dq-card{border-radius:24px;padding:18px;min-height:390px}
  .dq-wait{gap:8px;padding:18px}
  .dq-wait img{width:150px}
  .dq-ans{flex:none;max-height:none}
  .dq-ans button{min-height:64px;padding:10px 12px;font-size:16px}
  .dq-card .who img{width:48px}
  .dq-bub{padding:10px 14px;font-size:15px}
  .dq-q{font-size:24px}
  .dq-slot{min-height:64px}
  .dq-q{min-height:0}
  body.game{overflow:auto}
}