/* Trap cards (src/run/hud/traps-ui.js). Under the pause menu (.overlay is z 40), above the HUD; the HUD row stays clear so
   the pause button keeps working. Portrait: cards stacked; landscape: side by side. No scrolling, tap-first. */
.trap-ov{position:fixed; inset:0; z-index:22; pointer-events:none; display:flex; align-items:center; justify-content:center;
  padding:calc(58px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--paper) 62%, transparent) 0%, color-mix(in srgb, var(--paper) 30%, transparent) 75%);
  animation:trap-in .36s ease-out both;   /* the wash and the cards fade in together, no movement (Calm too); 2026-11-12 */
  --t-easy:var(--r2); --t-med:var(--r1); --t-hard:var(--r3);
}
.trap-ov[hidden]{display:none}
.trap-ov.out{animation:trap-out .36s ease-in both}
@keyframes trap-in{from{opacity:0}to{opacity:1}}
@keyframes trap-out{from{opacity:1}to{opacity:0}}
/* A loss (2026-11-12, confirm play test: a lost battle and a trap timing out read as "nothing happened"): the cards dim and
   sink a little as they fade, over 0.9 s; no text, no flash, no shake. Calm mode: the plain fade (the class is not set). */
.trap-ov.out.lost{animation:trap-out .9s ease-in both}
.trap-ov.out.lost .trap-panel{animation:wr-lost .9s ease-in both}
@keyframes wr-lost{0%{transform:none; filter:none}35%{transform:translateY(4px); filter:saturate(.35) brightness(.9)}100%{transform:translateY(40px) scale(.94); filter:saturate(.35) brightness(.9)}}
@media (prefers-reduced-motion: reduce){ .trap-ov.out.lost, .trap-ov.out.lost .trap-panel{animation:trap-out .36s ease-in both} .trap-ov.out.lost .trap-panel{animation:none} }

.trap-panel{pointer-events:auto; width:min(440px, 100%); max-height:100%; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; border-radius:22px}
/* The frame takes focus when the cards open (no chip is lit, so nothing reads as a hint): no ring, a very soft one for keyboard users. */
.trap-panel:focus{outline:none}
.trap-panel:focus-visible{outline:2px solid color-mix(in srgb, var(--ink) 18%, transparent); outline-offset:6px}
.trap-head{display:flex; align-items:center; gap:10px; align-self:center; padding:4px 14px 4px 6px; border-radius:999px; background:var(--panel); border:1px solid var(--panel-line); box-shadow:0 4px 14px rgba(0,0,0,.12)}
.trap-ring{width:42px; height:42px; flex:none; transform:rotate(-90deg)}
.trap-ring circle{fill:none; stroke-width:5}
.trap-ring .bg{stroke:color-mix(in srgb, var(--ink) 14%, transparent)}
.trap-ring .fg{stroke:var(--you); stroke-linecap:round}
.trap-ring .bubble{fill:color-mix(in srgb, var(--r5) 30%, transparent); stroke:var(--r5); stroke-width:2}
.trap-ring .shine{fill:#fff; stroke:none; opacity:.9}
.trap-title{display:flex; flex-direction:column; line-height:1.1}
.trap-title b{font:700 19px/1.1 var(--font-display); color:var(--ink)}
.trap-title span{font:700 12px/1.2 var(--font-body); color:var(--muted)}

.trap-cards{display:flex; flex-direction:column; gap:8px; min-height:0}
.trap-card{--tc:var(--t-easy); position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"tag formula" "chips chips"; align-items:center; gap:6px 10px;
  padding:8px 10px 10px; border-radius:18px; background:var(--panel); border:2px solid color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow:0 5px 16px rgba(0,0,0,.14); transition:opacity .25s, filter .25s}
.trap-card.t1{--tc:var(--t-med)}
.trap-card.t2{--tc:var(--t-hard)}
.trap-tag{grid-area:tag; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; padding:4px 8px; border-radius:12px; background:var(--tc); color:#fff}
.trap-tag .nm{font:800 13px/1 var(--font-body); letter-spacing:.04em; text-transform:uppercase}
.trap-reward{display:flex; align-items:center; gap:3px; font:700 13px/1 var(--font-display)}
.trap-reward svg{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.trap-formula{grid-area:formula; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; font:700 clamp(26px, 7.4vw, 36px)/1.15 var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums}
.trap-formula::after{content:" = ?"; color:var(--muted); font-weight:600}
.trap-chips{grid-area:chips; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.trap-chip{position:relative; min-height:54px; min-width:0; padding:0 4px; border-radius:14px; border:2px solid var(--card-edge); border-bottom-width:5px;
  background:var(--card); color:var(--ball-ink); cursor:pointer; touch-action:none; overflow:hidden;
  font:700 26px/1 var(--font-display); font-variant-numeric:tabular-nums; transition:transform .08s}
/* (touch-action none: a tap whose finger slides a little still ends on the chip instead of turning into a page pan;
   a tap is press + release on the same chip, traps-ui.js) */
.trap-chip .v{display:block; white-space:nowrap}
.trap-chip:active, .trap-chip.down{transform:translateY(2px); border-bottom-width:3px}
/* Paused, or the page is in the background: the trap's clock stands still, so the problems are hidden (frame stays). */
.trap-ov.blank .trap-formula, .trap-ov.blank .trap-chip .v, .trap-ov.blank .trap-chip .key{visibility:hidden}
.trap-ov.blank .trap-chip{cursor:default}
.trap-chip:focus-visible{outline:3px solid var(--you); outline-offset:2px}
.trap-chip .key{position:absolute; right:5px; top:3px; font:800 10px/1 var(--font-body); font-style:normal; color:var(--muted); display:none}
@media (hover:hover) and (pointer:fine){ .trap-chip .key{display:block} .trap-chip:hover{border-color:var(--tc)} }

.trap-card.locked{opacity:.38; filter:saturate(.3)}
.trap-card.locked .trap-chip{cursor:default}
.trap-card.locked .trap-chip.picked .v{text-decoration:line-through; text-decoration-thickness:3px}
.trap-card.won{border-color:var(--tc); box-shadow:0 0 0 4px color-mix(in srgb, var(--tc) 35%, transparent), 0 5px 16px rgba(0,0,0,.14)}
.trap-card.shake{animation:trap-shake .42s ease-in-out}
.trap-card.pop{animation:trap-pop .35s ease-out}
@keyframes trap-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}45%{transform:translateX(8px)}70%{transform:translateX(-5px)}88%{transform:translateX(2px)}}
@keyframes trap-pop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
.calm .trap-card.shake, .calm .trap-card.pop{animation:none}

/* Short phones (portrait under ~700 px): tighter cards */
@media (orientation:portrait) and (max-height:700px){
  .trap-card{padding:6px 8px 8px; gap:4px 8px}
  .trap-chip{min-height:48px; font-size:23px}
  .trap-formula{font-size:clamp(22px, 6.6vw, 30px)}
}
/* Landscape: three cards side by side, tag above the formula */
@media (orientation:landscape){
  .trap-ov{padding-top:calc(52px + env(safe-area-inset-top, 0px))}
  .trap-panel{width:min(820px, 100%); gap:6px}
  .trap-head{padding:2px 12px 2px 4px}
  .trap-ring{width:36px; height:36px}
  .trap-title b{font-size:17px}
  .trap-cards{flex-direction:row; gap:8px}
  .trap-card{flex:1 1 0; min-width:0; grid-template-columns:1fr; grid-template-areas:"tag" "formula" "chips"; justify-items:stretch; padding:7px 8px 8px; gap:6px}
  .trap-tag{flex-direction:row; justify-content:center; gap:8px; padding:3px 8px}
  .trap-formula{font-size:clamp(22px, 3.6vw, 32px)}
  .trap-chips{gap:6px}
  .trap-chip{min-height:50px; font-size:24px}
}
@media (orientation:landscape) and (max-height:420px){
  .trap-ov{padding-top:calc(46px + env(safe-area-inset-top, 0px)); padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .trap-chip{min-height:46px; font-size:22px}
}