/* The Traps (/trading/traps/): reuses ../trading.css; this file adds page layout only. Text stays crisp: no text-shadow, no blur on text. */
html,body.tp-body{overflow:auto;height:auto;min-height:100%}
#tbg{position:fixed;inset:0;z-index:0;background:#04060a url(../art/floor-m.webp?v=20261020s3) center/cover no-repeat;opacity:.5}
@media (min-aspect-ratio:1/1){#tbg{background-image:url(../art/floor.webp?v=20261020s3)}}
#tshade{position:fixed;inset:0;z-index:1;background:linear-gradient(rgba(3,4,7,.6),rgba(3,4,7,.86) 38%,rgba(3,4,7,.94))}
.tp-body #hud{z-index:8}
.htitle{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8d8a82}
#tp{position:relative;z-index:5;max-width:1100px;margin:0 auto;padding:calc(66px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(76px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
#tp h1{font:500 clamp(46px,11vw,76px)/1 var(--serif);letter-spacing:.03em;margin:4px 0 6px;text-align:center;color:#f4efe5}
#tp .kick{text-align:center}
#tp .sub{font:italic 21px/1.35 var(--serif);color:#d9d2c2;margin:4px auto 6px;max-width:34em;text-align:center}
.tp-how{text-align:center;font-size:13.5px;color:#b8b2a5;margin:6px 0 14px}
.tp-bar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.tp-bar button,.tp-bar a{appearance:none;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid rgba(79,209,139,.55);background:rgba(14,44,30,.7);color:#e9f7ee;font:600 13px/1 var(--sans);letter-spacing:.06em;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tp-bar a{border-color:rgba(242,194,107,.5);background:rgba(48,36,12,.7);color:#f6e6c2}
.tp-bar button:focus-visible,.tp-bar a:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* the grid of flip cards: both faces share one grid cell, so a card is as tall as its longest face */
.traps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:620px){.traps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:940px){.traps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.traps>li{-webkit-perspective:1400px;perspective:1400px;display:flex}
.trap{display:grid;width:100%;cursor:pointer;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);transition:-webkit-transform .6s cubic-bezier(.3,.7,.2,1);transition:transform .6s cubic-bezier(.3,.7,.2,1);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.trap.flip{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
.face{grid-area:1/1;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:18px;border:1px solid rgba(236,232,222,.18);background:#0b0e13;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:rotateY(0deg) translateZ(1px);transform:rotateY(0deg) translateZ(1px)}
.face.back{background:#0c1a13;border-color:rgba(79,209,139,.45);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px)}
.f-top{display:flex;align-items:baseline;gap:10px}
.f-n{flex:none;font:600 11px/1 var(--sans);letter-spacing:.2em;color:var(--r)}
.back .f-n{color:var(--g)}
.f-name{font:500 25px/1.1 var(--serif);color:#f6f1e7;margin:0}
.f-line{font-size:14.5px;line-height:1.45;color:#ddd7ca;margin:0}
.f-voice{margin:2px 0 0;padding:9px 12px;border-left:2px solid rgba(255,95,87,.65);background:rgba(255,95,87,.07);border-radius:0 10px 10px 0;font:italic 500 19px/1.3 var(--serif);color:#f3e6e0}
.f-lbl{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin:2px 0 0}
.f-move{font:500 19px/1.3 var(--serif);color:#f2fbf5;margin:0}
.f-how{margin:0;padding-left:18px;font-size:14px;line-height:1.45;color:#d6e4db}
.f-how li{margin:0 0 4px}
.f-foot{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px}
.f-tap{appearance:none;border:1px solid rgba(255,95,87,.45);background:rgba(255,95,87,.08);color:#ffd9d4;border-radius:999px;min-height:40px;padding:8px 14px;font:600 12.5px/1 var(--sans);letter-spacing:.05em;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.f-tap:focus-visible,.f-prac:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.back .f-tap{border-color:rgba(236,232,222,.25);background:rgba(236,232,222,.05);color:#d8d3c6}
.f-prac{display:inline-flex;align-items:center;min-height:40px;font-size:13px;color:#9fe6bd;text-decoration:underline;text-decoration-color:rgba(159,230,189,.4);text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.trap{transition:none}}

/* sections below the grid */
.tp-sec{margin:34px auto 0;max-width:680px}
.tp-sec h2{font:500 34px/1.1 var(--serif);text-align:center;margin:0 0 4px;color:#f4efe5}
.tp-sec .sec-sub{text-align:center;font:italic 19px/1.35 var(--serif);color:#cfc8b8;margin:0 0 14px}
.reset{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:r}
.reset li{counter-increment:r;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:start;padding:13px 14px;border-radius:16px;border:1px solid rgba(242,194,107,.3);background:#0e0d0a}
.reset li::before{content:counter(r);grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 15px/1 var(--sans);color:#1a1408;background:var(--amber)}
.reset b{font:500 21px/1.15 var(--serif);color:#f8eed6}
.reset span{font-size:14.5px;line-height:1.45;color:#d9d2c2}
.glance{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.4;border:1px solid rgba(236,232,222,.14);border-radius:14px;overflow:hidden;background:#0a0c10}
.glance th,.glance td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(236,232,222,.08)}
.glance tr:last-child td{border-bottom:0}
.glance th{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#a8a296;background:#0d1015}
.glance td:first-child{font:500 18px/1.2 var(--serif);color:#f6f1e7;width:38%}
.glance td:last-child{color:#d6e4db}
.tp-end{text-align:center;margin:26px 0 0}
.tp-end p{font:italic 500 22px/1.35 var(--serif);color:#f4efe5;margin:0 0 10px}
.tp-end .lnks{justify-content:center}
.tp-end .lnks a{font-size:14px;color:#bdb7aa;text-decoration:underline;text-decoration-color:rgba(189,183,170,.35);text-underline-offset:4px;padding:10px 0;min-height:44px;display:inline-flex;align-items:center}

/* sources: small and collapsed, same pattern as the rest of the site */
.srcq{max-width:680px;margin:34px auto 10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;line-height:1.45;color:#8a8478}
.srcq summary{cursor:pointer;font-size:12px;color:#8a8478;letter-spacing:.04em;list-style:none;padding:6px 0}
.srcq summary::-webkit-details-marker{display:none}
.srcq summary::after{content:" +";opacity:.7}
.srcq details[open] summary::after{content:" \2212"}
.srcq ol{margin:6px 0 10px;padding-left:18px;font-size:11.5px;color:#8a8478}
.srcq li{margin:0 0 5px;overflow-wrap:anywhere}
.srcq a{color:#a9a294}
@media (max-width:420px){.f-name{font-size:23px}.f-voice,.f-move{font-size:18px}.glance td:first-child{font-size:16px;width:36%}.glance{font-size:13.5px}}
@media print{#tbg,#tshade,#foot{display:none}.trap{-webkit-transform:none!important;transform:none!important}.face{-webkit-backface-visibility:visible;backface-visibility:visible;position:static;-webkit-transform:none!important;transform:none!important}.trap{display:block}}
/* front face: center the trap so the extra height (set by the taller back face) splits evenly */
.face.front{justify-content:center}
.face.front .f-foot{margin-top:4px}
/* belt and braces for WebKit: swap face visibility at the half-turn (90deg), so the hidden face never shows even if backface culling fails */
.face.front{visibility:visible;transition:visibility 0s linear .28s}
.face.back{visibility:hidden;transition:visibility 0s linear .28s}
.trap.flip .face.front{visibility:hidden}
.trap.flip .face.back{visibility:visible}
@media (prefers-reduced-motion:reduce){.face.front,.face.back{transition:none}}
/* v2: a mini-chart on each red front, showing the trap happening. Lines are crisp: no filters, no glow. */
.f-art{margin:2px 0 0;padding:8px 8px 4px;border-radius:12px;background:#07090d;border:1px solid rgba(236,232,222,.08)}
.f-art svg{display:block;width:100%;height:auto;overflow:visible}
.f-art text{font-family:var(--sans);letter-spacing:.03em}
.f-art .ga{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
 .tp-js .trap:not(.seen) .f-art .ga{opacity:0}
 .tp-js .trap:not(.seen) .f-art .gl{stroke-dasharray:1 1;stroke-dashoffset:1}
 .tp-js .trap.seen .f-art .ga{animation:tpIn .5s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
 .tp-js .trap.seen .f-art .gl{stroke-dasharray:1 1;animation:tpDraw 1s ease-out var(--d,0s) both}
}
@keyframes tpIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes tpDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* WebKit sizes inline SVG oddly inside grid/flex: pin the aspect ratio */
.f-art{min-width:0}
.f-art svg{width:100%;height:auto;aspect-ratio:300/120;max-width:100%}
/* both faces fill the one shared row (WebKit: no percentage heights here, they loop) */
.trap{grid-template-rows:auto;grid-template-columns:minmax(0,1fr);align-items:stretch}
.face{align-self:stretch}