/* ============================================================
   Mr. Boring — Home (action screen) · 16:9 desktop · 1920×1080
   Paper / sticker / archive control-panel aesthetic
   ============================================================ */

:root{
  --paper:        #ECE4D4;
  --paper-2:      #F1EADB;
  --paper-edge:   #DCD2BD;
  --board:        #E4E5CC;
  --board-2:      #EAEBD4;
  --board-line:   rgba(106,114,74,.34);
  --ink:          #1C1B17;
  --ink-soft:     #2A2823;
  --rust:         #BE3A22;
  --rust-deep:    #A52F19;
  --yellow:       #EFC637;
  --yellow-deep:  #E3B528;
  --tape:         rgba(226,211,169,.74);
  --tape-edge:    rgba(170,150,104,.55);

  --b-blue:   #2A6CD4;
  --b-red:    #D6362A;
  --b-orange: #DF8A2A;
  --b-purple: #7B45D6;
  --b-pink:   #E12882;
  --b-cyan:   #38B2D2;
  --b-black:  #1C1B17;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --font-stamp: "Special Elite", "Courier Prime", monospace;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html,body{ background:#d8ccb7; height:100%; }
body{
  font-family:var(--font-mono);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  height:100%; overflow:hidden;
}
body.is-booting #canvas{
  visibility:hidden;
}

/* ---- paper texture helper ---- */
.paper-grain::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:multiply; opacity:.06; border-radius:inherit;
}

/* ============================================================
   STAGE / CANVAS  (fixed 16:9, letterboxed)
   ============================================================ */
#stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#canvas{
  position:relative;
  width:1680px; height:1080px;
  flex:0 0 1680px;
  transform-origin:center center;
  background:
    radial-gradient(120% 82% at 50% -10%, rgba(255,252,242,.18), transparent 55%),
    radial-gradient(90% 70% at 50% 100%, rgba(91,66,36,.06), transparent 65%),
    url("assets/page-chaos-bg.jpg") center/cover no-repeat;
  box-shadow:0 30px 80px rgba(60,48,30,.4);
  overflow:hidden;
}
#canvas::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255,252,242,.24), transparent 55%),
    linear-gradient(180deg, rgba(255,249,240,.10) 0%, rgba(248,240,226,.05) 36%, rgba(214,194,160,.08) 100%),
    radial-gradient(100% 90% at 50% 55%, transparent 62%, rgba(70,52,28,.08) 100%); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:absolute; top:30px; left:48px; right:48px; height:54px;
  display:flex; align-items:center; gap:22px; z-index:30;
}
.brand{ position:relative; display:flex; align-items:center; gap:12px; }
.brand-crown{ position:absolute; left:172px; top:-27px; width:52px; color:var(--ink); transform:rotate(4deg); pointer-events:none; }
.brand .logo{ font-family:var(--font-display); font-size:30px; letter-spacing:-.5px; color:var(--ink); }
.brand .logo sup{ font-size:13px; top:-1.1em; font-family:var(--font-mono); }
.tag-still{ font-family:var(--font-mono); font-weight:700; font-size:13px;
  background:var(--yellow); color:var(--ink); padding:4px 10px; transform:rotate(-3deg);
  box-shadow:1.5px 1.5px 0 rgba(0,0,0,.25); }
.tag-ver{ font-family:var(--font-mono); font-weight:700; font-size:13px;
  background:var(--ink); color:#F1EADB; padding:4px 9px; transform:rotate(2deg); }
.nav{ flex:1; display:flex; justify-content:center; gap:34px; }
.nav a{ font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.5px;
  color:var(--ink-soft); text-decoration:none; position:relative; white-space:nowrap; }
.nav a{ cursor:pointer; }
.nav a.active{ color:var(--rust); }
.nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2.5px; background:var(--rust); }
.socials{ display:flex; align-items:center; gap:14px; }
.socials .ic{ width:24px; height:24px; color:var(--ink); display:flex; align-items:center; justify-content:center; }
.live{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-weight:700; font-size:17px; margin-left:6px; }
.live .badge{ display:inline-flex; align-items:center; gap:6px; background:var(--rust); color:#fff;
  font-size:13px; font-weight:700; padding:4px 10px; border-radius:3px; }
.live .badge .blip{ width:8px; height:8px; border-radius:50%; background:#fff; animation:blink 1.4s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.22; } }

/* hairline under bar */
.bar-rule{ position:absolute; top:96px; left:48px; right:48px; height:2px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 20px); opacity:.32; z-index:20; }

/* ============================================================
   LEFT — IDENTITY
   ============================================================ */
.identity{ position:absolute; left:36px; top:116px; width:352px;
  display:flex; flex-direction:column; gap:12px; z-index:15; }
.sticker-jury{ align-self:flex-start; font-family:var(--font-stamp); font-weight:400; font-size:13px;
  line-height:1.25; text-transform:uppercase; letter-spacing:.5px; background:var(--yellow); color:var(--ink);
  padding:8px 12px; transform:rotate(-2.5deg); border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  box-shadow:0 0 0 3px #FCEFB4, 2px 3px 6px rgba(120,90,10,.3); }
.crown{ position:absolute; right:64px; top:-4px; width:50px; color:var(--ink); transform:rotate(4deg); }
.arrow-curve{ position:absolute; right:-6px; top:96px; width:62px; color:var(--ink); transform:rotate(10deg); }
.display-title{ font-family:var(--font-display); font-size:80px; line-height:.82; letter-spacing:-3px;
  color:var(--ink); margin:4px 0 4px; }
.black-strip{ align-self:flex-start; position:relative; white-space:nowrap; background:var(--ink); color:#F1EADB;
  font-family:var(--font-mono); font-weight:700; font-size:17px; line-height:1.3; padding:9px 13px; transform:rotate(-1deg); }
.red-arrow-1{ position:absolute; right:-58px; top:8px; width:52px; color:var(--rust); }

.scrap{ position:relative; align-self:stretch; background:var(--paper-2); color:var(--ink-soft);
  font-family:var(--font-mono); font-size:15px; line-height:1.5; padding:12px 14px;
  border:1px solid var(--paper-edge); box-shadow:1.5px 2.5px 5px rgba(60,48,30,.16); }
.scrap u{ text-decoration:underline; text-underline-offset:2px; }
.scrap.tilt-a{ transform:rotate(-.8deg); }
.scrap.tilt-b{ transform:rotate(.7deg); }
.scrap .star{ position:absolute; top:9px; right:11px; width:18px; color:var(--ink); opacity:.5; }
.scrap.hi{ background:var(--yellow); border-color:var(--yellow-deep); box-shadow:1.5px 2.5px 5px rgba(120,90,10,.22); }
.scrap.hi .smiley{ position:absolute; top:10px; right:12px; width:20px; color:var(--ink); }
.tape{ position:absolute; width:54px; height:19px; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); box-shadow:0 1px 2px rgba(0,0,0,.08); }

.meta-line{ display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:15px; line-height:1.35; color:var(--ink-soft); }
.meta-line .gi{ width:26px; height:26px; flex:0 0 26px; color:var(--ink); }
.you-mark{ background:var(--rust); color:#fff; padding:0 4px; }

.id-bottom{ display:none; }
.stop-sign{ width:108px; height:108px; flex:0 0 108px; background:var(--rust);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:#fff; transform:rotate(-5deg); box-shadow:2px 3px 6px rgba(0,0,0,.25); }
.stop-sign .big{ font-family:var(--font-display); font-size:22px; line-height:1; }
.stop-sign .small{ font-family:var(--font-mono); font-weight:700; font-size:9.5px; line-height:1.15; margin-top:3px; padding:0 8px; }
.black-tag{ position:relative; background:var(--ink); color:#F1EADB; font-family:var(--font-mono); font-weight:700;
  font-size:13px; line-height:1.3; letter-spacing:.4px; padding:9px 12px; transform:rotate(1.5deg); }
.red-arrow-2{ position:absolute; right:-50px; top:10px; width:46px; color:var(--rust); }

/* ============================================================
   CENTER — BOARD
   ============================================================ */
.board-wrap{ position:absolute; left:392px; top:112px; width:934px; z-index:10; }
.board{ position:relative; background:var(--board);
  background-image:
    linear-gradient(rgba(238,240,220,.58), rgba(238,240,220,.58)),
    radial-gradient(130% 100% at 30% 0%, rgba(255,255,255,.10), transparent 70%),
    url("assets/board-paper-green-texture-v2.png");
  background-size:auto, cover;
  background-position:center, center;
  border:2px solid rgba(90,96,60,.55); border-radius:3px;
  padding:30px 16px 18px 34px;
  box-shadow:0 12px 30px rgba(60,55,25,.2), inset 0 0 0 1px rgba(255,255,255,.28);
  transform:rotate(-.3deg); }
.board-tape{ position:absolute; width:72px; height:24px; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); z-index:6; }

/* tape labels — sit on the TOP EDGE of the board, never over cells */
.tape-label{ position:absolute; z-index:14; font-family:var(--font-mono); font-weight:700; font-size:14px;
  letter-spacing:.5px; text-transform:uppercase; padding:7px 12px; line-height:1.2; white-space:nowrap; }
.tape-label.tan{ background:var(--tape); color:var(--ink); border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); }
.tape-label.yel{ background:var(--yellow); color:var(--ink); box-shadow:1.5px 2.5px 0 rgba(0,0,0,.2); }
.tl-claim{ top:-16px; left:44px; transform:rotate(-1.5deg); display:flex; align-items:center; gap:7px; }
.tl-claim .cursor{ width:17px; }
.tl-dont{ top:-26px; right:30px; transform:rotate(3deg); text-align:center; }
.ink-splat{ position:absolute; top:-2px; right:-14px; width:30px; color:var(--ink); z-index:13; }

.col-nums,.row-nums{ position:absolute; font-family:var(--font-mono); font-size:10px; color:rgba(60,60,40,.62); letter-spacing:.3px; }
.col-nums{ top:13px; left:34px; right:16px; display:flex; justify-content:space-between; }
.row-nums{ top:30px; bottom:18px; left:8px; display:flex; flex-direction:column; justify-content:space-between; }

.grid{ position:relative; display:grid; grid-template-columns:repeat(20,1fr); grid-template-rows:repeat(15,39px); gap:0;
  background-image:
    linear-gradient(to right, var(--board-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--board-line) 1px, transparent 1px);
  background-size:calc(100%/20) 39px;
  box-shadow:inset 0 0 0 1px rgba(124,132,88,.18); }

.blk{ position:relative; margin:1.5px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden; font-family:var(--font-mono); font-weight:700; border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.13); }
body.ready .blk{ animation:pop .5s cubic-bezier(.2,1.3,.4,1) backwards; }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.blk .name{ font-size:16px; line-height:1.05; }
.blk .dim{ font-size:12px; font-weight:400; opacity:.85; margin-top:2px; }
.blk.sm .name{ font-size:12px; }
.blk.tiny{ font-size:12px; }
.blk--blue{ background:var(--b-blue); } .blk--red{ background:var(--b-red); } .blk--orange{ background:var(--b-orange); }
.blk--purple{ background:var(--b-purple); } .blk--pink{ background:var(--b-pink); } .blk--cyan{ background:var(--b-cyan); } .blk--black{ background:var(--b-black); }
.blk--label{ background:var(--ink); border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.3); align-self:center; padding:0 5px; }
.blk--label .name{ font-size:11px; font-weight:400; white-space:nowrap; }

/* the yellow "EVERY CELL" stickers — hang OFF the board's bottom-left edge */
.every-cell{ position:absolute; left:-10px; bottom:-34px; z-index:16; display:flex; flex-direction:column; gap:7px; align-items:flex-start; }
.every-cell .hl{ font-family:var(--font-mono); font-weight:700; font-size:16px; letter-spacing:.4px; white-space:nowrap;
  background:var(--yellow); color:var(--ink); padding:7px 11px; transform:rotate(-1.5deg); box-shadow:1.5px 2.5px 0 rgba(0,0,0,.2); }
.every-cell .thanks{ font-family:var(--font-mono); font-weight:700; font-size:12px; white-space:nowrap;
  background:var(--ink); color:#F1EADB; padding:5px 10px; transform:rotate(1deg); align-self:center; }

/* ============================================================
   RIGHT — RAIL
   ============================================================ */
.rail{ position:absolute; left:1340px; top:112px; width:302px; height:calc(1080px - 112px - 24px); display:flex; flex-direction:column; gap:13px; z-index:15; }
.card{ position:relative; background:var(--paper-2); border:1px solid var(--paper-edge); border-radius:4px;
  padding:16px 18px; box-shadow:0 5px 14px rgba(60,48,30,.18); }
.card.tilt{ transform:rotate(-.5deg); }
.label-mono{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#8a7e66; }
.raised{ padding-bottom:18px; }
.raised .amount{ font-family:var(--font-display); font-size:58px; line-height:.9; color:var(--rust); margin:6px 0 2px; }
.barcode{ position:absolute; top:16px; right:16px; width:66px; height:34px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
.raised .of{ font-family:var(--font-mono); font-size:15px; color:var(--ink-soft); display:flex; justify-content:space-between; white-space:nowrap; margin-top:6px; }
.raised .of b{ font-weight:700; }
.progress{ height:10px; background:#D9CFB8; border-radius:5px; margin-top:9px; overflow:hidden; border:1px solid rgba(150,130,90,.4); }
.progress > i{ display:block; height:100%; width:25%; background:var(--rust); border-radius:5px; }
.from-badge{ position:absolute; right:-12px; bottom:-16px; width:64px; height:64px; border-radius:50%;
  background:var(--yellow); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; line-height:1; transform:rotate(-8deg); box-shadow:2px 2px 0 rgba(0,0,0,.2); z-index:5; }
.from-badge .t{ font-size:9px; letter-spacing:.5px; }
.from-badge .v{ font-size:20px; margin-top:2px; }

.goal-card{
  position:relative;
  overflow:hidden;
  min-height:226px;
  isolation:isolate;
}
.goal-card.paper-grain::before{
  z-index:1;
  opacity:.08;
}
.goal-card > *{
  position:relative;
  z-index:2;
}
.goal-card .head{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0;
  position:absolute;
  left:12px;
  top:12px;
  width:calc(100% - 24px);
  padding:6px 10px 5px;
  background:rgba(248,244,234,.72);
  border:1px solid rgba(132,117,94,.22);
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  box-shadow:0 2px 8px rgba(54,44,29,.05);
  backdrop-filter:blur(3px);
}
.goal-card .goal-line{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  line-height:1.1;
  letter-spacing:.8px;
  color:rgba(118,105,83,.96);
  position:static;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  background:none;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.goal-card .gbody{
  position:absolute;
  left:14px;
  right:14px;
  top:62px;
  bottom:12px;
  display:grid;
  grid-template-columns:136px minmax(0,1fr);
  gap:12px;
  align-items:start;
  z-index:0;
}
.goal-card image-slot{
  width:100%;
  height:136px;
  aspect-ratio:1 / 1;
  min-width:0;
  min-height:0;
  align-self:start;
  border-radius:14px 6px 15px 7px / 7px 15px 6px 14px;
  box-shadow:0 8px 18px rgba(40,28,17,.18);
  transition:transform .2s ease, filter .2s ease;
}
.goal-card .gnote{
  margin:0;
  align-self:start;
  overflow:hidden;
  color:rgba(31,25,20,.92);
  font-family:var(--font-stamp);
  font-size:13px;
  font-weight:400;
  line-height:1.4;
  text-align:left;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:7;
  line-clamp:7;
  text-overflow:ellipsis;
}
.goal-card[data-goal-interactive="true"]{
  cursor:pointer;
}
.goal-card[data-goal-interactive="true"] image-slot{
  cursor:pointer;
}
.goal-card[data-goal-interactive="true"]:hover image-slot,
.goal-card image-slot[data-has-image="true"]:hover{
  transform:scale(1.018);
  filter:saturate(1.03) contrast(1.02);
}

.goal-detail-sheet{
  width:min(640px, calc(100vw - 36px));
}
.goal-detail-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.goal-detail-image-frame{
  background:#fff8eb;
  border:1px solid rgba(40,38,32,.16);
  border-radius:14px 5px 15px 6px / 6px 15px 5px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  padding:10px;
}
.goal-detail-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px 4px 11px 5px / 5px 11px 4px 10px;
  background:#ece4d4;
}
.goal-detail-copy{
  margin:0;
  font-family:var(--font-mono);
  font-size:18px;
  line-height:1.5;
  color:var(--ink-soft);
}

.cta{ display:flex; align-items:center; justify-content:space-between; background:var(--rust); color:#fff;
  font-family:var(--font-display); font-size:26px; padding:17px 22px; border:none; border-radius:4px; cursor:pointer;
  box-shadow:0 6px 0 var(--rust-deep), 0 10px 18px rgba(120,30,10,.3); transform:rotate(-.5deg);
  transition:transform .12s, box-shadow .12s; }
.cta:hover{ transform:rotate(-.5deg) translateY(2px); box-shadow:0 4px 0 var(--rust-deep), 0 6px 14px rgba(120,30,10,.3); }
.cta .arr{ font-size:28px; }
.cta:disabled{
  cursor:not-allowed;
  opacity:.58;
  box-shadow:0 3px 0 rgba(104,40,28,.44), 0 5px 10px rgba(60,28,20,.14);
}
.cta:disabled:hover{
  transform:rotate(-.5deg);
  box-shadow:0 3px 0 rgba(104,40,28,.44), 0 5px 10px rgba(60,28,20,.14);
}

.activity{ flex:1 1 auto; min-height:0; padding:12px 16px; overflow:hidden; }
.activity.layout-item{ bottom:24px !important; height:auto !important; }
.activity .ahead{ display:flex; align-items:center; justify-content:space-between; border-bottom:1.5px solid var(--ink); padding-bottom:7px; margin-bottom:8px; }
.activity .ahead .t{ font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.8px; }
.activity .ahead .lv{ font-family:var(--font-mono); font-weight:700; font-size:11px; color:var(--rust); display:flex; align-items:center; gap:5px; }
.activity .ahead .lv .blip{ width:7px; height:7px; border-radius:50%; background:var(--rust); animation:blink 1.4s steps(1) infinite; }
.activity .activity-window{
  display:flex;
  flex-direction:column;
  gap:0;
}
.arow{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:13px; padding:4px 0; color:var(--ink-soft); }
.arow--purchase{ color:var(--ink); font-weight:700; }
.arow .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.arow .txt{ flex:1; min-width:0; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arow .txt b,
.arow .txt strong{ color:var(--ink); font-weight:800; }
.arow .time{ font-size:12px; color:#9a8e76; white-space:nowrap; }

/* ============================================================
   BOTTOM SCATTER BAND
   ============================================================ */
.scatter > *{ position:absolute; z-index:12; }

.smiley-badge{ left:1248px; top:950px; width:60px; height:60px; border-radius:50%; background:var(--yellow); color:var(--ink);
  transform:rotate(-10deg); display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-mono); font-weight:700; font-size:10px; line-height:1.15; box-shadow:0 0 0 3px #FCEFB4, 2.5px 3px 6px rgba(120,90,10,.3); z-index:18; }

.receipt{ left:416px; top:792px; width:178px; background:#F3EEE2; padding:11px 13px;
  box-shadow:0 5px 12px rgba(60,48,30,.2); transform:rotate(-2deg);
  clip-path:polygon(0 0,100% 0,100% 97%,92% 100%,84% 97%,76% 100%,68% 97%,60% 100%,52% 97%,44% 100%,36% 97%,28% 100%,20% 97%,12% 100%,0 97%); }
.receipt h4{ font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.8px; border-bottom:1px dashed #b9ad92; padding-bottom:7px; margin-bottom:8px; }
.receipt .ri{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px; padding:3px 0; color:var(--ink-soft); }
.receipt .ri .rd{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.receipt .total{ font-family:var(--font-mono); font-weight:700; font-size:12.5px; letter-spacing:.5px; border-top:1px dashed #b9ad92; margin-top:8px; padding-top:8px; }

.attention{ left:612px; top:792px; width:164px; background:var(--b-blue); color:#fff; transform:rotate(-2deg);
  font-family:var(--font-mono); font-weight:700; font-size:14px; line-height:1.3; padding:12px 14px; box-shadow:2.5px 3px 0 rgba(0,0,0,.2); }

.question{ left:416px; top:904px; width:188px; background:var(--yellow); color:var(--ink); transform:rotate(1.2deg);
  font-family:var(--font-mono); font-size:13px; line-height:1.4; padding:11px 13px; box-shadow:2.5px 3px 0 rgba(0,0,0,.18); }
.question b{ font-weight:700; }
.question .qm{ position:absolute; right:12px; bottom:6px; font-family:var(--font-display); font-size:34px; color:var(--rust); }

.access-pass{ left:798px; top:790px; width:196px; background:#F3EEE2; padding:11px 13px; transform:rotate(-.6deg);
  border:1px solid var(--paper-edge); box-shadow:0 5px 12px rgba(60,48,30,.18); }
.access-pass .ah{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:1px; color:#8a7e66; }
.access-pass .no{ font-family:var(--font-display); font-size:24px; margin-top:6px; }
.access-pass .sub{ font-family:var(--font-mono); font-size:11px; color:#9a8e76; }
.access-pass .row{ display:flex; align-items:center; gap:12px; margin-top:11px; }
.qr{ width:70px; height:70px; flex:0 0 70px; }
.stamp{ font-family:var(--font-stamp); font-weight:700; font-size:14px; line-height:1.1; color:var(--rust);
  border:2px solid var(--rust); padding:6px 8px; transform:rotate(-9deg); text-align:center; border-radius:3px; opacity:.85; }
.face-ic{ width:28px; color:var(--ink); }

.proof-archive{ left:626px; top:902px; width:224px; background:var(--paper-2); padding:11px 13px; transform:rotate(-.8deg);
  border:1px solid var(--paper-edge); box-shadow:0 4px 10px rgba(60,48,30,.16); }
.proof-archive h4{ font-family:var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.5px; }
.proof-archive p{ font-family:var(--font-mono); font-size:14px; line-height:1.4; color:var(--ink-soft); margin-top:4px; }
.proof-archive .pa{ position:absolute; right:8px; bottom:10px; width:46px; color:var(--ink); }

.hazard{ left:450px; top:1004px; width:500px;
  background:repeating-linear-gradient(45deg, var(--ink) 0 16px, var(--yellow) 16px 32px); padding:3px;
  transform:rotate(-1deg); box-shadow:2.5px 3px 9px rgba(0,0,0,.24); }
.hazard .inner{ background:var(--paper-2); padding:10px 14px; display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.3px; color:var(--ink); }
.hazard .warn{ width:30px; flex:0 0 30px; color:var(--ink); }

/* ============================================================
   HERO VIDEO (reserved bottom-right) — clip/frame slot
   ============================================================ */
.hero-video{ position:absolute; right:48px; bottom:30px; width:470px; height:262px; z-index:14; }
.hero-video .frame{ position:absolute; inset:0; background:#1c1b17;
  border:2px solid var(--ink); border-radius:6px; box-shadow:0 12px 30px rgba(60,48,30,.3);
  transform:rotate(.5deg); overflow:hidden; }
.hero-video .frame::after{ content:""; position:absolute; inset:8px; border:1.5px dashed rgba(241,234,219,.34); border-radius:4px; pointer-events:none; z-index:4; }
.hero-video image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.hero-video .hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; z-index:1; }
.hero-player{ position:absolute; inset:0; z-index:1; }
.hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  display:block;
  z-index:0;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.hero-source{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  opacity:.001;
  pointer-events:none;
  z-index:0;
}
.hero-sound{
  position:absolute;
  left:12px;
  bottom:12px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(28,27,23,.86);
  color:#F1EADB;
  border:1.5px solid rgba(241,234,219,.32);
  border-radius:9px 7px 10px 6px / 6px 10px 7px 9px;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
  cursor:pointer;
  z-index:7;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.hero-sound:hover{
  transform:translateY(-1px);
  background:rgba(28,27,23,.92);
  border-color:rgba(241,234,219,.46);
}
.hero-sound:focus-visible{
  outline:2px solid rgba(239,198,55,.95);
  outline-offset:2px;
}
.hero-sound[data-muted="false"]{
  background:rgba(190,58,34,.92);
  border-color:rgba(255,234,219,.54);
}
.hero-sound-icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-sound-icon--on{ display:none; }
.hero-sound[data-muted="false"] .hero-sound-icon--on{ display:block; }
.hero-sound[data-muted="false"] .hero-sound-icon--off{ display:none; }
.hero-tape{ position:absolute; width:92px; height:26px; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); z-index:6; }
.hv-tag{ position:absolute; top:-14px; left:26px; z-index:7; font-family:var(--font-stamp); font-size:12px;
  letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; background:var(--rust); color:#fff;
  padding:6px 12px; transform:rotate(-2deg); box-shadow:1.5px 2px 0 rgba(0,0,0,.2); }
.hv-live{ position:absolute; top:14px; right:14px; z-index:7; display:flex; align-items:center; gap:6px;
  font-family:var(--font-stamp); font-size:11px; letter-spacing:.5px; color:#fff; background:rgba(0,0,0,.45);
  padding:4px 9px; border-radius:3px; }
.hv-live i{ width:7px; height:7px; border-radius:50%; background:var(--rust); animation:blink 1.4s steps(1) infinite; }
.hv-cap{ position:absolute; right:18px; bottom:12px; z-index:7; font-family:var(--font-mono); font-size:11px;
  color:rgba(241,234,219,.7); transform:rotate(-1deg); }

/* ============================================================
   EXTRA CHAOS — doodles, stains, loose tape
   ============================================================ */
.chaos{ position:absolute; z-index:11; pointer-events:none; }
.stain{ border-radius:50%; background:radial-gradient(circle, transparent 52%, rgba(120,90,40,.16) 54%, transparent 60%); }
.doodle{ color:var(--ink); }
.doodle.rust{ color:var(--rust); }
.loose-tape{ position:absolute; z-index:11; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.mini-sticker{ position:absolute; z-index:13; font-family:var(--font-stamp); font-weight:400; font-size:12.5px;
  padding:7px 12px; line-height:1.05; letter-spacing:.3px; text-transform:uppercase; white-space:nowrap;
  border-radius:13px 6px 12px 7px / 7px 12px 6px 13px;
  box-shadow:0 0 0 3px #F2EBDB, 2px 4px 7px rgba(40,28,12,.3);
  overflow:hidden; isolation:isolate; }
.mini-sticker::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.mini-sticker::after{ content:""; position:absolute; right:0; bottom:0; width:16px; height:16px;
  background:linear-gradient(135deg, transparent 46%, rgba(255,255,255,.5) 47%, rgba(0,0,0,.16) 60%, transparent 72%); }
.mini-sticker.yel{ background:var(--yellow); color:var(--ink); box-shadow:0 0 0 3px #FCEFB4, 2px 4px 7px rgba(120,90,10,.32); }
.mini-sticker.ink{ background:var(--ink); color:#F1EADB; box-shadow:0 0 0 3px #4a463c, 2px 4px 7px rgba(0,0,0,.35); }
.mini-sticker.rust{ background:var(--rust); color:#fff; box-shadow:0 0 0 3px #e89079, 2px 4px 7px rgba(120,30,10,.32); }

/* ============================================================
   CRAFT / SKETCH PASS — worn type · hand-drawn edges · asymmetry
   ============================================================ */

/* worn typewriter on every stamped / label / sticker bit */
.label-mono, .activity .ahead .t, .activity .ahead .lv,
.receipt h4, .receipt .total, .receipt .ri,
.proof-archive h4, .access-pass .ah, .access-pass .no, .access-pass .sub,
.tape-label, .mini-sticker, .sticker-jury, .black-tag, .black-strip,
.tag-still, .tag-ver, .live .badge, .from-badge, .smiley-badge,
.hazard .inner, .stop-sign .small, .every-cell .hl, .every-cell .thanks,
.attention, .question, .raised .of, .col-nums, .row-nums{
  font-family:var(--font-stamp);
}
.label-mono{ letter-spacing:.4px; }
.tag-still, .tag-ver{ padding:3px 9px; }

/* hand-drawn irregular edges + double stroke on cards */
.card{
  border:1.6px solid rgba(40,38,32,.5);
  border-radius:17px 6px 19px 8px / 8px 19px 6px 17px;
}
.card::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid rgba(40,38,32,.24);
  border-radius:8px 19px 6px 17px / 19px 8px 17px 6px;
}
/* per-card asymmetry (rotation + nudge) */
.card.raised{ transform:rotate(-1deg); }
.card.goal-card{ transform:rotate(.8deg); margin-left:6px; }
.card.activity{ transform:rotate(-.5deg); margin-left:-5px; }
.cta{ border-radius:15px 7px 17px 6px / 6px 17px 7px 15px; }

/* loose paper bits — sketch edges + stronger tilt */
.access-pass, .proof-archive{
  border:1.6px solid rgba(40,38,32,.48);
  border-radius:16px 6px 18px 7px / 7px 18px 6px 16px;
}
.access-pass::after, .proof-archive::after{
  content:""; position:absolute; inset:4px; pointer-events:none;
  border:1px solid rgba(40,38,32,.2);
  border-radius:7px 18px 6px 16px / 18px 7px 16px 6px;
}
.access-pass{ transform:rotate(-1.3deg); }
.proof-archive{ transform:rotate(1deg); }
.attention{ border:2px solid rgba(0,0,0,.22); border-radius:14px 5px 16px 6px / 6px 16px 5px 14px; transform:rotate(-2.4deg); }
.question{ border-radius:6px 15px 5px 14px / 14px 6px 13px 6px; transform:rotate(1.7deg); }
.receipt{ transform:rotate(-1.7deg); }

/* board — hand-drawn frame */
.board{ border-radius:15px 8px 13px 9px / 9px 13px 8px 15px; }

/* progress + barcode tiny skew */
.progress{ border-radius:6px 3px 6px 3px / 3px 6px 3px 6px; transform:rotate(-.5deg); }
.barcode{ transform:rotate(1.6deg); }

/* scrap notes — worn edges + more varied tilt */
.scrap{ border-radius:8px 3px 9px 4px / 4px 9px 3px 8px; }
.scrap.tilt-a{ transform:rotate(-1.4deg); }
.scrap.tilt-b{ transform:rotate(1.3deg); }

/* ============================================================
   BACKGROUND DECO — ink blots · coffee rings · specks
   ============================================================ */
.bg-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.bg-deco > *{ position:absolute; }
.coffee{ border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 66%, rgba(105,68,32,.10) 67%, rgba(120,78,38,.20) 80%, rgba(105,68,32,.07) 88%, transparent 92%);
  box-shadow:inset 0 0 14px rgba(105,68,32,.06); }
.coffee::after{ content:""; position:absolute; inset:14%; border-radius:50%;
  border:1.5px solid rgba(120,78,38,.10); }
.blot{ color:rgba(38,32,22,.11); }
.blot.rust{ color:rgba(170,47,25,.13); }
.speck{ background:rgba(40,34,22,.5); border-radius:50%; }
.bg-deco .scrawl{ color:rgba(38,32,22,.16); }

/* ============================================================
   NEW CRAFT OBJECTS — postage · post-it · ticket · paperclip
   ============================================================ */
.postage{ position:absolute; z-index:13; width:78px; height:92px; background:#EFE7D6; padding:6px;
  box-shadow:1.5px 2.5px 5px rgba(60,48,30,.2);
  -webkit-mask:radial-gradient(circle 4px at center, transparent 92%, #000 0) -7px -7px / 14px 14px round;
          mask:radial-gradient(circle 4px at center, transparent 92%, #000 0) -7px -7px / 14px 14px round; }
.postage .pin{ width:100%; height:100%; border:1.5px dashed rgba(40,35,25,.4); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; color:var(--ink); text-align:center; }
.postage .pin .v{ font-family:var(--font-display); font-size:17px; color:var(--rust); }
.postage .pin .l{ font-family:var(--font-stamp); font-size:8px; letter-spacing:.4px; line-height:1.1; }
.postage .pin svg{ width:28px; color:var(--ink); }

.postit{ position:absolute; z-index:13; width:174px; min-height:176px; background:#F2D85E; padding:16px 15px 18px;
  box-shadow:2px 4px 9px rgba(60,48,30,.22); font-family:var(--font-stamp); color:var(--ink);
  border-radius:2px 2px 16px 2px; }
.postit::before{ content:""; position:absolute; top:0; left:24px; right:24px; height:22px; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); transform:translateY(-50%) rotate(-1.5deg); }
.postit h5{ font-size:13px; letter-spacing:.5px; margin-bottom:8px; text-transform:uppercase; }
.postit ul{ list-style:none; font-size:13px; line-height:1.55; }
.postit li{ position:relative; padding-left:18px; margin-bottom:3px; }
.postit li::before{ content:"✗"; position:absolute; left:0; color:var(--rust); }
.postit li.done{ text-decoration:line-through; opacity:.55; }

.ticket{ position:absolute; z-index:13; width:178px; background:var(--rust); color:#fff; padding:11px 14px;
  box-shadow:2px 3px 8px rgba(60,20,10,.28);
  -webkit-mask:radial-gradient(circle 6px at left center, transparent 92%, #000 0),
               radial-gradient(circle 6px at right center, transparent 92%, #000 0);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.ticket .tnum{ font-family:var(--font-stamp); font-size:10px; letter-spacing:1px; opacity:.85; }
.ticket .tbig{ font-family:var(--font-display); font-size:22px; line-height:1; margin:3px 0; }
.ticket .tsub{ font-family:var(--font-stamp); font-size:10px; letter-spacing:.5px; border-top:1px dashed rgba(255,255,255,.5); margin-top:6px; padding-top:6px; }

.paperclip{ position:absolute; z-index:14; width:26px; color:rgba(70,72,78,.85); pointer-events:none;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.25)); }

.pushpin{ position:absolute; z-index:19; width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff7a5c, var(--rust) 60%, var(--rust-deep));
  box-shadow:1.5px 3px 4px rgba(0,0,0,.3), inset -2px -2px 3px rgba(0,0,0,.25); }
.pushpin::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.6); transform:translate(-60%,-60%); }

/* ============================================================
   v3 — hero moved to left column · episodes card · sketch stickers
   ============================================================ */

/* hero video, inline in the left identity column */
.hero-video.hero-inline{ position:relative; right:auto; bottom:auto; width:100%; height:206px; margin:2px 0 6px; z-index:15; }
.hero-inline .hv-tag{ top:10px; left:10px; transform:rotate(-2deg); }

/* episodes / season-progress card (under Current goal) */
.episodes .ehead{ display:flex; align-items:center; justify-content:space-between; }
.episodes .ep-count{ font-family:var(--font-display); font-size:18px; color:var(--rust); white-space:nowrap; }
.episodes .ep-name{ font-family:var(--font-mono); font-weight:700; font-size:15px; margin-top:8px; color:var(--ink); }
.episodes .ep-track{ display:flex; gap:5px; margin-top:11px; }
.episodes .ep-track i{ flex:1; height:11px; border-radius:3px 2px 3px 2px / 2px 3px 2px 3px;
  background:#D9CFB8; border:1px solid rgba(150,130,90,.45); }
.episodes .ep-track i.on{ background:var(--rust); border-color:var(--rust-deep); }
.episodes .ep-foot{ font-family:var(--font-mono); font-size:12px; color:#9a8e76; margin-top:9px; }

/* sticky note dropped onto the board */
.map-note{ position:absolute; z-index:8; width:196px; background:var(--yellow); color:var(--ink);
  font-family:"Permanent Marker","Special Elite",cursive; font-size:20px; line-height:1.16; padding:13px 15px 15px;
  transform:rotate(-4deg); box-shadow:0 0 0 3px #FCEFB4, 3px 5px 10px rgba(120,90,10,.32);
  border-radius:14px 6px 13px 7px / 7px 13px 6px 14px; }
.map-note::before{ content:""; position:absolute; top:-10px; left:30px; width:60px; height:19px; background:var(--tape);
  border-left:1px dashed var(--tape-edge); border-right:1px dashed var(--tape-edge); transform:rotate(-5deg); }

/* left stickers: varied sizes + sketchy marker face */
.mini-sticker.lg{ font-size:18px; padding:10px 16px; }
.mini-sticker.sm{ font-size:11px; padding:5px 9px; }
.mini-sticker.sketch{ font-family:"Permanent Marker","Special Elite",cursive; letter-spacing:0; }

.scatter-band{
  position:absolute;
  left:378px;
  top:770px;
  width:918px;
  height:270px;
  pointer-events:none;
  z-index:9;
}
.scatter-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(233,224,203,0) 0%, rgba(233,224,203,.22) 18%, rgba(233,224,203,.7) 100%);
  border-radius:28px;
}

/* ============================================================
   MOBILE ARTBOARD
   ============================================================ */
html.mobile-mode, body.mobile-mode{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
body.mobile-mode{
  overscroll-behavior-y:contain;
}
html.desktop-mobile-preview,
body.desktop-mobile-preview{
  height:100%;
  overflow:hidden;
}
html.mobile-mode #stage,
body.mobile-mode #stage{
  position:relative;
  inset:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:visible;
  width:100%;
  min-height:auto;
  padding:0 0 24px;
}
html.desktop-mobile-preview #stage,
body.desktop-mobile-preview #stage{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:100%;
  padding:0 340px 0 0;
}
#canvas.mobile-layout{
  width:430px;
  height:1820px;
  flex:0 0 430px;
  overflow:visible;
  box-shadow:0 18px 40px rgba(60,48,30,.28);
}
#canvas.mobile-layout .topbar{
  top:14px;
  left:20px;
  right:20px;
  height:auto;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
}
#canvas.mobile-layout .brand{
  position:relative;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  max-width:250px;
}
#canvas.mobile-layout .brand-crown{
  left:96px;
  top:-18px;
  width:30px;
}
#canvas.mobile-layout .brand .logo{
  font-size:25px !important;
  letter-spacing:-.4px;
}
#canvas.mobile-layout .tag-still,
#canvas.mobile-layout .tag-ver{
  font-size:11px;
  padding:3px 8px;
}
#canvas.mobile-layout .nav{
  display:flex;
  order:3;
  flex:1 1 100%;
  justify-content:flex-start;
  gap:8px;
  overflow-x:auto;
  padding:0 2px 2px;
  margin-top:-2px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#canvas.mobile-layout .nav::-webkit-scrollbar{
  display:none;
}
#canvas.mobile-layout .nav a{
  flex:0 0 auto;
  font-size:0;
  line-height:1;
  padding:5px 7px;
  background:rgba(241,234,219,.92);
  border:1px solid rgba(46,44,38,.18);
  border-radius:9px 4px 10px 5px / 5px 10px 4px 9px;
  box-shadow:1px 2px 0 rgba(0,0,0,.12);
  white-space:nowrap;
}
#canvas.mobile-layout .nav a::before{
  content:attr(data-short);
  display:block;
  font-size:10px;
  line-height:1;
}
#canvas.mobile-layout .nav a::after{
  display:none;
}
#canvas.mobile-layout .nav a.active{
  background:var(--rust);
  color:#fff7ea;
}
#canvas.mobile-layout .socials{
  margin-left:auto;
  gap:10px;
}
#canvas.mobile-layout .socials .ic{
  width:20px;
  height:20px;
}
#canvas.mobile-layout .live{
  margin-left:0;
  font-size:14px;
  gap:6px;
}
#canvas.mobile-layout .live .badge{
  font-size:11px;
  padding:4px 8px;
}
#canvas.mobile-layout .bar-rule{
  top:82px;
  left:20px;
  right:20px;
}
#canvas.mobile-layout .board-wrap{
  left:20px;
  top:110px;
  width:390px;
}
#canvas.mobile-layout .board{
  padding:24px 12px 14px 28px;
}
#canvas.mobile-layout .col-nums,
#canvas.mobile-layout .row-nums{
  font-size:8px;
}
#canvas.mobile-layout .col-nums{
  top:10px;
  left:28px;
  right:12px;
}
#canvas.mobile-layout .row-nums{
  top:24px;
  bottom:14px;
  left:6px;
}
#canvas.mobile-layout .grid{
  grid-template-rows:repeat(15,16px);
  background-size:calc(100%/20) 16px;
}
#canvas.mobile-layout .blk{
  margin:1px;
}
#canvas.mobile-layout .blk .name{
  font-size:9px;
}
#canvas.mobile-layout .blk .dim{
  font-size:7px;
  margin-top:1px;
}
#canvas.mobile-layout .blk.sm .name,
#canvas.mobile-layout .blk.tiny{
  font-size:7px;
}
#canvas.mobile-layout .tape-label{
  font-size:10px;
  padding:5px 8px;
}
#canvas.mobile-layout .tl-claim{
  top:-12px;
  left:18px;
  gap:5px;
}
#canvas.mobile-layout .tl-claim .cursor{
  width:13px;
}
#canvas.mobile-layout .tl-dont{
  top:-18px;
  right:16px;
}
#canvas.mobile-layout .map-note{
  width:156px;
  font-size:16px;
  padding:10px 12px 12px;
}
#canvas.mobile-layout .every-cell{
  left:-2px;
  bottom:-28px;
}
#canvas.mobile-layout .every-cell .hl{
  font-size:12px;
  padding:6px 8px;
}
#canvas.mobile-layout .every-cell .thanks{
  font-size:10px;
  padding:4px 8px;
}
#canvas.mobile-layout .rail{
  left:20px;
  top:470px;
  width:390px;
  gap:12px;
}
#canvas.mobile-layout .card{
  padding:14px 16px;
}
#canvas.mobile-layout .raised .amount{
  font-size:48px;
}
#canvas.mobile-layout .goal-card .goal-line{
  font-size:14px;
  letter-spacing:.8px;
}
#canvas.mobile-layout .goal-card{
  min-height:250px;
}
#canvas.mobile-layout .goal-card .head{
  left:10px;
  top:10px;
  width:calc(100% - 20px);
  padding:4px 8px 3px;
}
#canvas.mobile-layout .goal-card .gbody{
  left:10px;
  right:10px;
  top:48px;
  bottom:12px;
  grid-template-columns:140px minmax(0,1fr);
  gap:12px;
}
#canvas.mobile-layout .goal-card image-slot{
  height:140px;
}
#canvas.mobile-layout .goal-card .gnote{
  font-family:var(--font-stamp);
  font-size:15.5px;
  font-weight:400;
  line-height:1.4;
  -webkit-line-clamp:8;
  line-clamp:8;
}
#canvas.mobile-layout .episodes .ep-name{
  font-size:14px;
}
#canvas.mobile-layout .cta{
  font-size:23px;
  padding:15px 18px;
}
#canvas.mobile-layout .activity{
  min-height:194px;
  max-height:194px;
  padding:10px 12px 12px;
}
#canvas.mobile-layout .activity .arow{
  font-size:11px;
  padding:3px 0;
}
#canvas.mobile-layout .activity .time{
  font-size:11px;
}
#canvas.mobile-layout .identity{
  left:20px;
  top:1190px;
  width:390px;
  gap:10px;
}
#canvas.mobile-layout .hero-video.hero-inline{
  height:220px;
}
#canvas.mobile-layout .hero-sound{
  width:42px;
  height:42px;
  left:10px;
  bottom:10px;
}
#canvas.mobile-layout .black-strip{
  font-size:15px;
}
#canvas.mobile-layout .scrap{
  font-size:14px;
  line-height:1.45;
}
#canvas.mobile-layout .meta-line{
  font-size:14px;
}
#canvas.mobile-layout .scatter-band{
  display:none !important;
}
#canvas.mobile-layout [data-layout-id="activityCard"]{
  height:194px !important;
}
#canvas.mobile-layout [data-layout-id="heroPanel"]{
  top:136px !important;
}
#canvas.mobile-layout [data-layout-id="activityCard"] .tape{
  right:22px !important;
}
#canvas.mobile-layout [data-layout-id="sticker1"]{
  left:18px !important;
  top:1122px !important;
  transform:rotate(-6deg) scale(.77) !important;
}
#canvas.mobile-layout [data-layout-id="sticker2"]{
  left:176px !important;
  top:1138px !important;
  transform:rotate(2deg) scale(.76) !important;
}
#canvas.mobile-layout [data-layout-id="ticket1"]{
  left:176px !important;
  top:1050px !important;
  transform:rotate(-5deg) scale(.78) !important;
}
#canvas.mobile-layout [data-layout-id="scatterItem1"]{
  left:319px !important;
  top:1058px !important;
  transform:rotate(-8deg) scale(.9) !important;
}
#canvas.mobile-layout [data-layout-id="mapNote"]{
  left:220px !important;
  top:1186px !important;
  transform:rotate(1.8deg) scale(1) !important;
}
#canvas.mobile-layout [data-layout-id="sticker9"]{
  left:180px !important;
  top:982px !important;
  transform:rotate(5deg) scale(.72) !important;
}
#canvas.mobile-layout [data-layout-id="sticker13"]{
  left:288px !important;
  top:984px !important;
  transform:rotate(-6deg) scale(.88) !important;
}
#canvas.mobile-layout .purchase-hit-layer{
  touch-action:manipulation;
  grid-template-rows:repeat(15,16px);
}
#canvas.mobile-layout .purchase-cell{
  margin:0;
  border-width:2px;
}

/* ============================================================
   LAYOUT EDIT MODE
   ============================================================ */
.layout-editor-ui{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:auto;
}
.layout-toggle{
  border:1.5px solid rgba(28,27,23,.72);
  background:#111;
  color:#f5ecdc;
  font-family:var(--font-stamp);
  font-size:14px;
  letter-spacing:.4px;
  padding:10px 14px;
  border-radius:10px 4px 11px 5px / 5px 11px 4px 10px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.layout-toggle:hover{ transform:translateY(1px); }
.layout-toggle--secondary{
  background:#f5ecdc;
  color:var(--ink);
}
.layout-editor{
  width:320px;
  max-height:calc(100vh - 84px);
  overflow:auto;
  background:rgba(247,240,228,.96);
  border:1.5px solid rgba(42,40,35,.38);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  border-radius:16px 7px 18px 8px / 8px 18px 7px 16px;
  padding:14px;
  display:none;
  backdrop-filter:blur(6px);
}
body.layout-edit .layout-editor{ display:block; }
body.layout-edit{ user-select:none; -webkit-user-select:none; }
.layout-editor h3{
  font-family:var(--font-display);
  font-size:22px;
  line-height:1;
  margin-bottom:4px;
}
.layout-editor__sub{
  font-family:var(--font-stamp);
  font-size:12px;
  color:#6f6758;
  margin-bottom:12px;
}
.layout-editor__field,
.layout-editor__grid{
  margin-bottom:10px;
}
.layout-editor__label{
  display:block;
  font-family:var(--font-stamp);
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#716654;
  margin-bottom:4px;
}
.layout-editor select,
.layout-editor input,
.layout-editor textarea{
  width:100%;
  border:1px solid rgba(46,44,38,.3);
  background:#fffaf0;
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:14px;
  padding:9px 10px;
  border-radius:10px 5px 11px 6px / 6px 11px 5px 10px;
}
.layout-editor textarea{
  min-height:164px;
  resize:vertical;
  line-height:1.35;
}
.layout-editor__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.layout-editor__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin:12px 0 10px;
}
.layout-editor__actions button{
  border:1px solid rgba(46,44,38,.24);
  background:#f8f1e3;
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:13px;
  padding:10px 10px;
  border-radius:10px 5px 11px 6px / 6px 11px 5px 10px;
  cursor:pointer;
}
.layout-editor__actions button[data-variant="primary"]{
  background:var(--rust);
  color:#fff;
  border-color:var(--rust-deep);
}
.layout-editor__hint,
.layout-editor__status{
  font-family:var(--font-stamp);
  font-size:11px;
  line-height:1.35;
  color:#6d675b;
}
.layout-editor__status{
  min-height:16px;
  color:var(--rust-deep);
  margin-top:8px;
}
body.layout-edit .layout-item{
  cursor:grab !important;
  outline:2px dashed rgba(190,58,34,.28);
  outline-offset:4px;
  touch-action:none;
  pointer-events:auto;
}
body.layout-edit .layout-item *{
  pointer-events:none !important;
}
body.layout-edit .layout-item:hover{
  outline-color:rgba(190,58,34,.55);
}
body.layout-edit .layout-item.is-selected{
  outline:3px solid rgba(42,108,212,.72);
  outline-offset:5px;
  box-shadow:0 0 0 6px rgba(42,108,212,.15);
}
body.layout-edit .layout-item.is-dragging{
  cursor:grabbing !important;
}
body.layout-edit .layout-item[contenteditable="true"]{
  cursor:text !important;
  outline:3px solid rgba(239,198,55,.92);
  outline-offset:5px;
  box-shadow:0 0 0 7px rgba(239,198,55,.18);
}
body.layout-edit .layout-item[contenteditable="true"],
body.layout-edit .layout-item[contenteditable="true"] *{
  pointer-events:auto !important;
}
.layout-item[data-font-override]{
  font-family:var(--layout-font-override) !important;
}
.layout-item[data-font-override] *{
  font-family:var(--layout-font-override) !important;
}

body[data-layout-mode="mobile"] .layout-editor-ui{
  top:10px;
  right:10px;
  gap:8px;
}
body.desktop-mobile-preview .layout-editor-ui{
  top:12px;
  right:14px;
  gap:8px;
}
body[data-layout-mode="mobile"] .layout-toggle{
  font-size:12px;
  padding:8px 10px;
}
body.desktop-mobile-preview .layout-toggle{
  min-width:180px;
  text-align:center;
}
body[data-layout-mode="mobile"] .layout-editor{
  width:240px;
  max-height:calc(100vh - 70px);
  padding:10px;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
}
body[data-layout-mode="mobile"] .layout-editor h3{
  font-size:17px;
}
body[data-layout-mode="mobile"] .layout-editor__sub{
  font-size:10px;
  margin-bottom:8px;
}
body[data-layout-mode="mobile"] .layout-editor__label{
  font-size:10px;
  margin-bottom:3px;
}
body[data-layout-mode="mobile"] .layout-editor select,
body[data-layout-mode="mobile"] .layout-editor input,
body[data-layout-mode="mobile"] .layout-editor textarea{
  font-size:12px;
  padding:7px 8px;
}
body[data-layout-mode="mobile"] .layout-editor textarea{
  min-height:110px;
}
body[data-layout-mode="mobile"] .layout-editor__grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}
body[data-layout-mode="mobile"] .layout-editor__actions{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  margin:10px 0 8px;
}
body[data-layout-mode="mobile"] .layout-editor__actions button{
  font-size:11px;
  padding:8px 7px;
}
body[data-layout-mode="mobile"] .layout-editor__hint,
body[data-layout-mode="mobile"] .layout-editor__status{
  font-size:10px;
}
body.desktop-mobile-preview .layout-editor{
  width:300px;
  max-height:calc(100vh - 76px);
}

/* ============================================================
   PURCHASE FLOW — approved prototype enhancement
   ============================================================ */
.purchase-hit-layer{
  position:absolute;
  inset:0;
  z-index:7;
  display:grid;
  grid-template-columns:repeat(20,1fr);
  grid-template-rows:repeat(15,39px);
  pointer-events:none;
}
.purchase-hit-layer--mobile{
  z-index:3;
  pointer-events:none;
}
.purchase-touch-cursor{
  pointer-events:none;
  z-index:8;
  margin:0;
  border:2px dashed rgba(190,58,34,.82);
  border-radius:4px;
  background:rgba(239,198,55,.18);
  box-shadow:inset 0 0 0 1px rgba(28,27,23,.16), 0 0 0 4px rgba(239,198,55,.12);
}
.board-stage-open{
  overflow:hidden;
}
.board-stage{
  position:fixed;
  inset:0;
  z-index:9996;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:26px;
}
.board-stage-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(20,18,16,.62);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.board-stage-sheet{
  position:relative;
  z-index:1;
  width:min(96vw, 1640px);
  height:calc(100vh - 52px);
  border:1.5px solid rgba(40,38,32,.58);
  border-radius:20px 8px 22px 9px / 9px 22px 8px 20px;
  box-shadow:0 28px 80px rgba(18,14,12,.42), 0 0 0 5px rgba(236,228,212,.22);
  overflow:auto;
  padding:28px 32px 36px;
  pointer-events:none;
}
.board-stage-close{
  position:sticky;
  top:0;
  margin-left:auto;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1.5px solid rgba(28,27,23,.45);
  background:var(--ink);
  color:#F1EADB;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1;
  border-radius:14px 6px 15px 7px / 7px 15px 6px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  cursor:pointer;
  z-index:3;
  pointer-events:auto;
}
.board-stage-body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:calc(100% - 60px);
  padding:8px 0 22px;
  pointer-events:none;
}
.board-stage-board{
  position:relative !important;
  inset:auto !important;
  width:min(1180px, 100%);
  margin:28px auto 36px;
  zoom:var(--board-stage-scale, 1);
  pointer-events:auto;
  transform:rotate(-.35deg);
}
.purchase-cell{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:0;
  margin:0;
  border:1.5px dashed transparent;
  border-radius:3px;
  background:transparent;
  color:transparent;
  cursor:pointer;
  pointer-events:auto;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.purchase-cell:hover,
.purchase-cell:focus-visible{
  outline:none;
  border-color:rgba(190,58,34,.78);
  background:rgba(239,198,55,.24);
  box-shadow:inset 0 0 0 1px rgba(28,27,23,.18);
}
.purchase-grid--active .purchase-cell{
  animation:purchaseCellBlink .7s steps(1) 2;
}
@keyframes purchaseCellBlink{
  50%{ background:rgba(190,58,34,.18); border-color:rgba(190,58,34,.42); }
}
.purchase-block{
  z-index:4;
  margin:0;
  animation:none !important;
  transform:none !important;
}
.purchase-block .name{
  display:block;
  max-width:100%;
  padding:0 2px;
  line-height:.92;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  text-wrap:balance;
}
.purchase-block .dim{
  max-width:100%;
  text-align:center;
}
.blk[data-claim-ready="true"],
.purchase-block{
  cursor:pointer;
}
.purchase-block--image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
  pointer-events:none;
}
.purchase-block--image .name,
.purchase-block--image .dim{
  position:relative;
  z-index:1;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.purchase-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  padding:22px;
}
.purchase-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(28,27,23,.42);
  cursor:pointer;
}
.purchase-sheet{
  position:relative;
  width:min(468px, calc(100vw - 32px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:var(--paper-2);
  color:var(--ink);
  border:1.6px solid rgba(40,38,32,.58);
  border-radius:17px 7px 19px 8px / 8px 19px 7px 17px;
  box-shadow:0 26px 70px rgba(22,18,12,.36), 0 0 0 5px rgba(236,228,212,.28);
  padding:18px;
  transform:rotate(-.4deg);
}
.purchase-sheet::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(40,38,32,.22);
  border-radius:8px 18px 7px 17px / 18px 8px 17px 7px;
}
.purchase-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  border-bottom:2px solid rgba(28,27,23,.82);
  padding-bottom:12px;
  margin-bottom:14px;
}
.purchase-kicker,
.purchase-label{
  display:block;
  font-family:var(--font-stamp);
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#756b59;
}
.purchase-head strong{
  display:block;
  font-family:var(--font-display);
  font-size:31px;
  line-height:1;
  color:var(--rust);
  margin-top:4px;
}
.purchase-close{
  width:35px;
  height:35px;
  border:1.5px solid rgba(28,27,23,.45);
  background:var(--ink);
  color:#F1EADB;
  font-family:var(--font-display);
  font-size:18px;
  border-radius:10px 4px 11px 5px / 5px 11px 4px 10px;
  cursor:pointer;
}
.purchase-body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.purchase-preview{
  align-self:start;
  width:88px;
  min-height:88px;
  background:var(--rust);
  color:#fff;
  border-radius:14px 5px 15px 6px / 6px 15px 5px 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 2px 3px 0 rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:9px;
  font-family:var(--font-stamp);
  font-size:12px;
  line-height:1.02;
  transform:rotate(-1deg);
  word-break:break-word;
}
.purchase-preview span,
.purchase-crop-preview span{
  position:relative;
  z-index:1;
  display:block;
  max-width:100%;
}
.purchase-options{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.purchase-input{
  width:100%;
  border:1px solid rgba(46,44,38,.3);
  background:#fffaf0;
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:14px;
  padding:10px 11px;
  border-radius:10px 5px 11px 6px / 6px 11px 5px 10px;
}
.purchase-input:focus{
  outline:2px solid rgba(190,58,34,.28);
  outline-offset:1px;
}
.purchase-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.purchase-swatch{
  width:28px;
  height:28px;
  border:2px solid rgba(28,27,23,.42);
  border-radius:9px 4px 10px 5px / 5px 10px 4px 9px;
  cursor:pointer;
  box-shadow:1.5px 2px 0 rgba(0,0,0,.16);
}
.purchase-swatch[data-active="true"]{
  outline:3px solid var(--yellow);
  outline-offset:2px;
}
.purchase-upload{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  margin-top:3px;
  border:1.5px dashed rgba(28,27,23,.38);
  background:rgba(239,198,55,.16);
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:13px;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  cursor:pointer;
}
.purchase-upload input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.purchase-crop{
  display:grid;
  gap:8px;
  padding:9px 10px 10px;
  background:rgba(28,27,23,.04);
  border:1px dashed rgba(28,27,23,.22);
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
}
.purchase-crop[hidden]{
  display:none !important;
}
.purchase-crop--slot{
  margin-top:2px;
}
.purchase-crop-frame{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  min-height:0;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  overflow:hidden;
  background:rgba(255,255,255,.6);
  cursor:grab;
}
.purchase-crop-frame[data-dragging="true"]{
  cursor:grabbing;
}
.purchase-crop-image{
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.purchase-sizes{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin:15px 0 12px;
}
.purchase-size{
  border:1.5px solid rgba(28,27,23,.48);
  background:#F7F0E2;
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:13px;
  line-height:1.1;
  padding:9px 7px;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
}
.purchase-size span:first-child{
  font-family:var(--font-display);
  font-size:18px;
}
.purchase-size[data-active="true"]{
  background:var(--yellow);
  box-shadow:1.5px 2px 0 rgba(0,0,0,.18);
}
.purchase-size:disabled{
  cursor:not-allowed;
  opacity:.42;
  filter:saturate(.55);
}
.purchase-submit{
  position:relative;
  z-index:1;
  width:100%;
  border:0;
  background:var(--rust);
  color:#fff;
  font-family:var(--font-display);
  font-size:21px;
  padding:14px 18px;
  border-radius:15px 7px 17px 6px / 6px 17px 7px 15px;
  box-shadow:0 5px 0 var(--rust-deep), 0 9px 16px rgba(120,30,10,.26);
  cursor:pointer;
}
.purchase-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.purchase-submit--crypto{
  background:#1c1b17;
  box-shadow:0 5px 0 #000, 0 9px 16px rgba(28,27,23,.24);
}
.purchase-actions{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
}
.purchase-secondary{
  width:100%;
  border:1.5px solid rgba(28,27,23,.45);
  background:#F7F0E2;
  color:var(--ink);
  font-family:var(--font-stamp);
  font-size:15px;
  line-height:1.15;
  padding:11px 16px;
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  box-shadow:0 4px 0 rgba(28,27,23,.12);
  cursor:pointer;
}
.purchase-secondary:hover,
.purchase-secondary:focus-visible{
  outline:none;
  background:#F2E7D3;
}
.purchase-secondary--active{
  border-color:var(--rust);
  background:var(--rust);
  color:#fff;
  box-shadow:0 4px 0 var(--rust-deep);
}
.purchase-secondary--active:hover,
.purchase-secondary--active:focus-visible{
  background:var(--rust-deep);
}
.purchase-secondary:disabled{
  border-color:rgba(28,27,23,.18);
  background:#ddd7cb;
  color:rgba(28,27,23,.42);
  box-shadow:none;
  cursor:not-allowed;
}
.purchase-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:9997;
  transform:translateX(-50%) rotate(-1.5deg);
  background:var(--ink);
  color:#F1EADB;
  font-family:var(--font-stamp);
  font-size:15px;
  padding:10px 14px;
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.purchase-info-sheet{
  width:min(590px, calc(100vw - 32px));
}
.purchase-info-body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:210px minmax(0, 1fr);
  gap:16px;
  align-items:stretch;
}
.purchase-info-image{
  width:100%;
  aspect-ratio:1 / 1;
  min-height:0;
  align-self:start;
  background:var(--ink);
  color:#F1EADB;
  border-radius:16px 6px 17px 7px / 7px 17px 6px 16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 2px 3px 0 rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:16px;
  font-family:var(--font-stamp);
  font-size:15px;
  line-height:1.2;
  transform:rotate(-1.2deg);
}
.purchase-info-image--empty{
  background:
    repeating-linear-gradient(-45deg, rgba(241,234,219,.08) 0 8px, transparent 8px 16px),
    var(--ink);
}
.purchase-info-copy{
  display:flex;
  flex-direction:column;
  gap:11px;
  min-width:0;
}
.purchase-info-grid{
  display:grid;
  gap:7px;
}
.purchase-info-row{
  display:grid;
  grid-template-columns:76px minmax(0, 1fr);
  gap:10px;
  align-items:baseline;
  border-bottom:1px dashed rgba(42,40,35,.26);
  padding-bottom:6px;
}
.purchase-info-label{
  font-family:var(--font-stamp);
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#756b59;
}
.purchase-info-value{
  min-width:0;
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.purchase-info-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  background:var(--rust);
  color:#fff;
  text-decoration:none;
  font-family:var(--font-display);
  font-size:16px;
  line-height:1;
  padding:12px 14px;
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  box-shadow:0 4px 0 var(--rust-deep), 0 8px 14px rgba(120,30,10,.22);
  transform:rotate(-1deg);
}
.purchase-info-note{
  margin-top:auto;
  background:rgba(239,198,55,.24);
  border:1px dashed rgba(42,40,35,.28);
  color:var(--ink-soft);
  font-family:var(--font-stamp);
  font-size:13px;
  line-height:1.35;
  padding:10px 11px;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
}
.info-frame-sheet{
  width:min(860px, calc(100vw - 32px));
  max-height:calc(100vh - 36px);
}
.info-frame-head{
  align-items:flex-end;
}
.info-frame-head strong{
  color:var(--ink);
}
.info-frame-body{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
}
.info-frame-lead{
  background:rgba(239,198,55,.2);
  border:1px dashed rgba(42,40,35,.24);
  padding:12px 14px;
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  font-family:var(--font-stamp);
  font-size:17px;
  line-height:1.35;
  color:var(--ink);
}
.info-frame-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.info-frame-card{
  background:#fbf5e7;
  border:1px solid rgba(42,40,35,.14);
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  padding:12px 13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.info-frame-card h3,
.info-frame-card h4{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.info-frame-card p,
.info-frame-card li{
  font-family:var(--font-stamp);
  font-size:15px;
  line-height:1.4;
  color:var(--ink-soft);
}
.info-frame-card ul{
  margin:0;
  padding-left:18px;
}
.info-frame-foot{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:#7b705d;
}
.info-frame-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.goal-frame-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.goal-frame-card{
  display:grid;
  gap:8px;
}
.goal-frame-image{
  width:100%;
  max-height:150px;
  object-fit:contain;
  object-position:left center;
  border:1px dashed rgba(42,40,35,.24);
  border-radius:10px 4px 11px 5px / 5px 11px 4px 10px;
  background:#f6efe2;
}
.goal-frame-top span{
  font-family:var(--font-mono);
  font-size:11px;
  color:#9b8f7a;
  text-transform:uppercase;
}
.goal-frame-progress{
  height:9px;
  margin:10px 0 8px;
  border:1px solid rgba(42,40,35,.14);
  border-radius:999px;
  background:#ded3b7;
  overflow:hidden;
}
.goal-frame-progress i{
  display:block;
  height:100%;
  background:var(--red);
}
.proof-frame-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.proof-frame-pill{
  display:flex;
  align-items:baseline;
  gap:8px;
  max-width:100%;
  padding:7px 10px;
  border:1px solid rgba(42,40,35,.14);
  border-radius:999px;
  background:#fbf5e7;
  color:inherit;
  text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.proof-frame-pill strong{
  font-family:var(--font-mono);
  font-size:12px;
  white-space:nowrap;
}
.proof-frame-pill span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-stamp);
  font-size:13px;
  color:var(--ink-soft);
}
.proof-frame-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.proof-frame-asset{
  display:grid;
  grid-template-columns:116px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  min-width:0;
  padding:10px;
  border:1px solid rgba(42,40,35,.14);
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  background:#fbf5e7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.proof-frame-image{
  width:116px;
  aspect-ratio:1.15;
  object-fit:cover;
  border:1px dashed rgba(42,40,35,.25);
  border-radius:8px 4px 9px 5px / 5px 9px 4px 8px;
  background:#f6efe2;
}
.proof-frame-meta{
  min-width:0;
}
.proof-frame-meta span{
  display:block;
  margin-bottom:5px;
  font-family:var(--font-mono);
  font-size:11px;
  color:#9b8f7a;
  text-transform:uppercase;
}
.proof-frame-meta h3{
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.1;
}
.proof-frame-meta p{
  font-family:var(--font-stamp);
  font-size:15px;
  line-height:1.35;
  color:var(--ink-soft);
}
.proof-frame-empty{
  display:grid;
  gap:4px;
  padding:18px;
  border:1px dashed rgba(42,40,35,.24);
  border-radius:12px 5px 13px 6px / 6px 13px 5px 12px;
  background:#fbf5e7;
}
.proof-frame-empty strong{
  font-family:var(--font-mono);
  font-size:16px;
}
.proof-frame-empty span{
  font-family:var(--font-stamp);
  font-size:15px;
  color:var(--ink-soft);
}
.who-frame-layout{
  display:grid;
  grid-template-columns:minmax(190px, 260px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.who-frame-portrait{
  margin:0;
  align-self:stretch;
  min-height:360px;
  border:1px dashed rgba(42,40,35,.24);
  border-radius:13px 5px 14px 6px / 6px 14px 5px 13px;
  background:#fbf5e7;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.who-frame-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.95) contrast(1.02);
}
.who-frame-copy{
  min-width:0;
  display:grid;
  gap:14px;
}

@media (max-width: 620px){
  .purchase-modal{
    align-items:end;
    padding:12px;
  }
  .purchase-sheet{
    width:100%;
    max-height:86vh;
    padding:15px;
    transform:none;
  }
  .purchase-head strong{
    font-size:25px;
  }
  .purchase-body{
    grid-template-columns:1fr;
    gap:10px;
  }
  .purchase-info-body{
    grid-template-columns:1fr;
  }
  .purchase-preview{
    width:78px;
    min-height:78px;
    justify-self:start;
    font-size:11px;
  }
  .purchase-info-image{
    aspect-ratio:1 / 1;
    min-height:0;
  }
  .goal-detail-sheet{
    width:100%;
  }
  .goal-detail-copy{
    font-size:15px;
    line-height:1.45;
  }
  .purchase-sizes{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .info-frame-sheet{
    width:100%;
  }
  .info-frame-grid{
    grid-template-columns:1fr;
  }
  .info-frame-lead{
    font-size:15px;
  }
  .proof-frame-list{
    grid-template-columns:1fr;
  }
  .proof-frame-asset{
    grid-template-columns:92px minmax(0, 1fr);
  }
  .proof-frame-image{
    width:92px;
  }
  .proof-frame-pill{
    width:100%;
  }
  .who-frame-layout{
    grid-template-columns:1fr;
  }
  .who-frame-portrait{
    min-height:220px;
    max-height:260px;
  }
  .who-frame-image{
    object-fit:contain;
  }
  .board-stage{
    padding:12px;
  }
  .board-stage-sheet{
    width:100%;
    height:calc(100vh - 24px);
    padding:16px;
  }
}