/* Revenue Tetris experiment — sticky sizing, board and media queries */

.rev-body{background:#f2f0e9}
.rev-body *{box-sizing:border-box}

/* --mdr-header is kept in sync with the real header height by revenue-tetris.js */
.rev-chart-col{position:sticky;top:var(--mdr-header,69px);height:calc(100vh - var(--mdr-header,69px))}

.tetris-hud{width:min(440px,86%);display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.65);background:#1b2fd6;color:#fff}
.tetris-hud>div{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:10px 12px}
.tetris-hud>div+div{border-left:1px solid rgba(255,255,255,.65)}
.tetris-hud span{font:700 9px/1.3 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#e8ff2e}
.tetris-hud b{font:700 24px/1 'Oswald',sans-serif;text-transform:uppercase}
.tetris-shell{--board-w:min(25vh,260px);position:relative;flex-shrink:0;width:var(--board-w);height:calc(var(--board-w) * 2);border:2px solid #fff;background:#1225b4;box-shadow:10px 10px 0 #e8ff2e;transition:height 1s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
.tetris-shell.expanded{height:calc(var(--board-w) * 2.8);box-shadow:10px 10px 0 #ff674d}
.tetris-inner{position:absolute;inset:0;overflow:hidden}
.tetris-world{position:absolute;left:0;right:0;bottom:0;height:calc(var(--board-w) * 2.8);background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:10% calc(100% / 28)}
.tetris-baseline{position:absolute;left:0;right:0;bottom:calc(20 * 100% / 28);height:0;border-top:2px dashed #e8ff2e;z-index:8;opacity:.8}
.tetris-baseline span{position:absolute;right:4px;bottom:5px;padding:3px 5px;background:#1225b4;color:#e8ff2e;font:700 7px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;white-space:nowrap}
/* Growth tag sits OUTSIDE the board, left of the shell, bracketing the new rows */
.tetris-growth-marker{position:absolute;top:0;bottom:calc(20 * (var(--board-w) * 2.8) / 28);right:calc(100% + 30px);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;text-align:right;white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .3s .6s ease,transform .4s .6s ease}
.expanded .tetris-growth-marker{opacity:1;transform:none}
.tetris-growth-marker::before{content:"";position:absolute;right:-18px;top:0;bottom:0;width:8px;border:2px solid #ff674d;border-right:0}
.tetris-growth-marker b{background:#ff674d;color:#0e0e14;border:2px solid #0e0e14;box-shadow:4px 4px 0 #0e0e14;padding:6px 10px 5px;font:700 20px/1 'Oswald',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.tetris-growth-marker span{font:700 8px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#e8ff2e}
.tetris-newspace{position:absolute;left:0;right:0;top:0;height:calc(8 * 100% / 28);z-index:1;pointer-events:none;opacity:0;transition:opacity .5s .45s ease;background:repeating-linear-gradient(-45deg,rgba(232,255,46,.16) 0 6px,transparent 6px 15px)}
.tetris-shell.expanded .tetris-newspace{opacity:1;animation:newspace-slide 16s linear infinite}
.t-piece{position:absolute;inset:0;opacity:0;transform:translateY(-110vh) rotate(var(--tilt,0deg));z-index:2;pointer-events:none;--pf:drop-shadow(1px 0 #1225b4) drop-shadow(-1px 0 #1225b4) drop-shadow(0 1px #1225b4) drop-shadow(0 -1px #1225b4);filter:var(--pf)}
.t-piece.landed{opacity:1;animation:tetris-drop var(--speed,.58s) cubic-bezier(.18,.72,.2,1.14) both;animation-delay:var(--delay,0ms)}
.t-cell{position:absolute;width:10%;height:calc(100% / 28);left:calc(var(--x) * 10%);bottom:calc(var(--y) * 100% / 28);background:var(--piece-color);border:1px solid rgba(14,14,20,.78)}
.t-cell::after{content:"";position:absolute;inset:2px;border-top:1px solid rgba(255,255,255,.48);border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(14,14,20,.2);border-bottom:1px solid rgba(14,14,20,.28)}
.t-cell.fee-cell{transition:background .2s ease,outline-color .2s ease;transition-delay:0ms}
.fees-on .t-cell.fee-cell{background:#ff674d;outline:2px solid #0e0e14;outline-offset:-3px;transition-delay:var(--fee-delay,0ms);animation:fee-mark .34s steps(2,end) both;animation-delay:var(--fee-delay,0ms)}
.fees-on .t-cell.fee-cell::before{content:"";position:absolute;left:50%;top:50%;width:clamp(3px,.45vw,6px);height:clamp(3px,.45vw,6px);border-radius:50%;background:#0e0e14;transform:translate(-50%,-50%);z-index:3}
.t-piece.opportunity{--piece-color:#e8ff2e!important;z-index:5}
.t-piece.opportunity .t-cell{border-color:#0e0e14}
.tetris-flash{position:absolute;inset:0;background:#e8ff2e;opacity:0;z-index:5;pointer-events:none}
.tetris-flash.hit{animation:board-flash .28s steps(2,end)}
.tetris-flash.sweep{background:linear-gradient(to top,transparent 30%,rgba(232,255,46,.45) 46%,#e8ff2e 50%,rgba(232,255,46,.45) 54%,transparent 70%);background-size:100% 300%;background-repeat:no-repeat;animation:board-sweep .9s ease-out both}
.tetris-inner.shake{animation:board-shake .32s steps(6,end)}
.tetris-stamp{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);z-index:9;background:#e8ff2e;color:#0e0e14;border:2px solid #0e0e14;box-shadow:6px 6px 0 #0e0e14;padding:12px 16px 11px;text-align:center;white-space:nowrap;opacity:0;pointer-events:none}
.tetris-stamp b{display:block;font:700 30px/1 'Oswald',sans-serif;text-transform:uppercase}
.tetris-stamp span{display:block;margin-top:6px;font:700 8px/1.3 'IBM Plex Mono',monospace;letter-spacing:.12em}
.tetris-stamp.on{animation:stamp-in 1.7s cubic-bezier(.2,.8,.2,1) both}
.tetris-hud [data-active-layer].tick{animation:hud-tick .35s steps(2,end)}
.tetris-scan{position:absolute;left:0;right:0;height:3px;top:-3px;background:#e8ff2e;box-shadow:0 0 12px #e8ff2e;opacity:0;z-index:6;pointer-events:none}
.tetris-scan.active{opacity:.85;animation:scan 1.15s linear infinite}
.rev-legend{max-height:340px;opacity:1;overflow:hidden;transition:max-height .5s ease,opacity .3s ease}
.rev-chart-col:has(.tetris-shell.expanded){gap:8px!important}
.rev-chart-col:has(.tetris-shell.expanded) .rev-legend{max-height:0;opacity:0}
.deep-dive-step{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:72px 5vw;border-top:1px solid #0e0e14;background:#0e0e14;color:#fff}
.deep-dive-label{font:700 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#e8ff2e;text-transform:uppercase}
.deep-dive-step h2{margin:28px 0 22px;max-width:680px;font:700 clamp(52px,6vw,94px)/.9 'Oswald',sans-serif;text-transform:uppercase;text-wrap:pretty}
.deep-dive-step p{margin:0;max-width:560px;font-size:18px;line-height:1.55;text-wrap:pretty}
.deep-dive-step a{align-self:flex-start;display:inline-flex;align-items:center;justify-content:space-between;gap:34px;margin-top:38px;min-width:min(100%,390px);padding:19px 22px;background:#e8ff2e;color:#0e0e14;border:1px solid #e8ff2e;font:700 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;transition:background .15s,color .15s}
.deep-dive-step a:hover{background:#0e0e14;color:#e8ff2e;opacity:1}
.deep-dive-step small{margin-top:14px;font:600 9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#8f9bff;text-transform:uppercase}
@keyframes tetris-drop{0%{opacity:1;transform:translateY(-110vh) rotate(var(--tilt,0deg));filter:var(--pf,none)}70%{transform:translateY(10px) rotate(0);filter:var(--pf,none)}78%{transform:translateY(2px) rotate(0);filter:var(--pf,none) brightness(2.1)}86%{transform:translateY(-6px) rotate(0);filter:var(--pf,none) brightness(1.3)}100%{opacity:1;transform:translateY(0) rotate(0);filter:var(--pf,none)}}
@keyframes board-flash{0%,100%{opacity:0}50%{opacity:.22}}
@keyframes scan{to{top:100%}}
@keyframes newspace-slide{to{background-position:210px 0}}
@keyframes fee-mark{0%{filter:brightness(2.2);transform:scale(.72)}100%{filter:none;transform:none}}
@keyframes board-sweep{0%{opacity:1;background-position:0 130%}100%{opacity:0;background-position:0 -30%}}
@keyframes board-shake{0%,100%{transform:none}20%{transform:translate(1px,3px)}40%{transform:translate(-2px,1px)}60%{transform:translate(2px,2px)}80%{transform:translate(-1px,2px)}}
@keyframes stamp-in{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-5deg)}9%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-46%) scale(1) rotate(-2deg)}}
@keyframes hud-tick{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}

@media(max-width:860px){
  .rev-grid{grid-template-columns:1fr!important}
  .rev-steps{border-right:0!important}
  .rev-steps>div{min-height:56vh!important}
  .rev-chart-col{order:-1;z-index:10;height:auto;flex-direction:row!important;flex-wrap:wrap;justify-content:center!important;gap:8px!important;padding:8px 4vw!important;border-bottom:1px solid #0e0e14}
  .tetris-hud{width:100%;order:0}
  .tetris-hud>div{padding:6px 9px}
  .tetris-hud b{font-size:18px}
  .tetris-shell{--board-w:min(36vw,158px);box-shadow:5px 5px 0 #e8ff2e;order:1;z-index:3}
  .tetris-shell.expanded{box-shadow:5px 5px 0 #ff674d}
  /* Stamp overflows the small board frame and centers over the whole sticky panel */
  .tetris-stamp{padding:9px 12px 8px;box-shadow:4px 4px 0 #0e0e14}
  .tetris-stamp b{font-size:22px}
  .tetris-growth-marker{right:calc(100% + 18px);gap:3px}
  .tetris-growth-marker::before{right:-11px;width:5px}
  .tetris-growth-marker b{padding:4px 6px 3px;font-size:12px;box-shadow:3px 3px 0 #0e0e14}
  .tetris-growth-marker span{font-size:6px}
  .rev-legend{min-width:0!important;flex:1;gap:0!important}
  .rev-legend>div{padding:5px 2px!important;font-size:9px!important}
  .deep-dive-step{min-height:72vh;padding:64px 5vw}
  .deep-dive-step h2{font-size:clamp(48px,15vw,72px)}
}

@media(prefers-reduced-motion:reduce){.t-piece.landed{animation:none;opacity:1;transform:none}.fees-on .t-cell.fee-cell{animation:none;transition:none}.tetris-scan{display:none}.tetris-shell{transition:none}.tetris-inner.shake{animation:none}.tetris-flash.sweep{animation:none;opacity:0}.tetris-shell.expanded .tetris-newspace{animation:none}.tetris-stamp.on{animation:stamp-reduced 1.7s ease both}@keyframes stamp-reduced{0%,78%{opacity:1}100%{opacity:0}}}