/* Components: chrome, kampung stage, kopitiam, derma, peti, saya. */
  /* ---------- chrome ---------- */
  /* header and tabs stick as one block: no hardcoded offset to drift out of sync */
  .chrome{position:sticky;top:0;z-index:40}
  .topbar{background:var(--panel);border-bottom:1px solid var(--hair)}
  .topbar .in{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px}
  .brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
  .brand .sigil{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:linear-gradient(150deg,var(--gold-lt),var(--leaf));
    display:grid;place-items:center;font-family:var(--display);font-weight:800;color:#fff;font-size:20px;box-shadow:var(--shadow)}
  .brand b{font-family:var(--display);font-size:23px;font-weight:800;line-height:1;display:block;letter-spacing:-.01em}
  .brand span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .purse{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .stat-chip{display:flex;align-items:center;gap:7px;background:var(--sunk);border:1px solid var(--hair);border-radius:22px;padding:6px 14px}
  .stat-chip i{width:16px;height:16px;border-radius:4px;transform:rotate(45deg);display:block}
  .stat-chip i.cry{background:linear-gradient(140deg,#8FD4F0,#3F8FD0)}
  .stat-chip i.coin{background:linear-gradient(140deg,var(--gold-lt),var(--gold));border-radius:50%;transform:none}
  .stat-chip b{font-family:var(--display);font-size:17px;font-weight:700}
  .stat-chip em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

  nav.tabs{background:var(--bg);border-bottom:1px solid var(--hair)}
  nav.tabs .in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;gap:4px;overflow-x:auto}
  nav.tabs button{flex:1 1 auto;min-width:max-content;justify-content:center;text-align:center}
  nav.tabs button{
    background:none;border:0;padding:13px 18px;font-family:var(--display);font-size:16.5px;font-weight:700;
    color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;
  }
  nav.tabs button:hover{color:var(--ink)}
  nav.tabs button[aria-current="true"]{color:var(--leaf-dk);border-bottom-color:var(--gold)}

  main{max-width:1180px;margin:0 auto;padding:26px 22px 70px;display:flex;flex-direction:column;gap:22px}

  .card{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
  .card>h3{font-size:20px}
  .sub{font-size:14px;color:var(--muted);line-height:1.5}
  .label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  /* ---------- home stage ---------- */
  .stage{border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--panel)}
  .scene{position:relative;width:100%;aspect-ratio:16/8;min-height:280px;background-size:cover;background-position:center 58%;overflow:hidden;isolation:isolate}
  /* isolate: roamers carry z-index up to ~98 for depth sorting. Without its own
     stacking context they compete with .chrome (z-index 40) and paint over the
     sticky header when the page is scrolled. */
  @media (max-width:740px){ .scene{aspect-ratio:4/3;min-height:0} }
  /* ---------- phone ---------- */
  @media (max-width:620px){
    .composer .row{flex-direction:column;align-items:stretch;gap:10px}
    .composer-actions{width:100%}
    .composer-actions .btn{flex:1;justify-content:center;text-align:center}
    .kindpick{width:100%}
    .kindpick button{flex:1}
    main{padding:16px 14px 56px;gap:16px}
    .topbar .in{padding:10px 14px;gap:10px}
    nav.tabs .in{padding:0 8px}
    nav.tabs button{padding:12px 10px;font-size:15px}
    .card{padding:15px;border-radius:13px}
    .track{padding:16px 15px}
    .hero-spirit{gap:12px}
    .hero-spirit .port{width:112px;height:112px;flex:0 0 112px}
    .brand b{font-size:19px}
    .stat-chip{padding:5px 10px 5px 7px}
    .stat-chip em{display:none}
    .signin{padding:22px}
  }
  .scene::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(20,30,15,.34));pointer-events:none}
  .roamer{position:absolute;will-change:transform;transform-origin:bottom center}
  .roamer img{width:100%;height:auto;filter:drop-shadow(0 2px 0 rgba(20,30,10,.30))}
  .scene-tag{
    position:absolute;left:16px;top:14px;z-index:5;display:flex;align-items:center;gap:9px;
    background:rgba(18,26,14,.62);backdrop-filter:blur(6px);border-radius:22px;padding:7px 15px;color:#F4F1E8;
  }
  .scene-tag b{font-family:var(--display);font-size:16px}
  .scene-tag span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

  .track{padding:20px 22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair)}
  .track .head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  .track .head .btn{flex:0 0 auto;padding:11px 30px}
  .track-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
  .track-next h3{font-size:20px;margin-bottom:5px;font-weight:700;color:var(--muted)}
  .track-next h3 span{color:var(--ink)}
  .track-next .sub{max-width:66ch}
  @media (max-width:620px){
    .track .head{flex-direction:column;align-items:stretch;gap:12px}
    .track .head .btn{width:100%}
  }
  .track .head b{font-family:var(--display);font-size:26px}
  .track .head span{font-size:14px;color:var(--muted)}
  .rail{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .rail .seg{position:relative;height:12px;background:var(--sunk);border:1px solid var(--hair);border-radius:6px;overflow:hidden}
  .rail .seg i{
    position:absolute;inset:0;
    background-image:linear-gradient(90deg,var(--leaf),var(--gold));
    background-size:500% 100%;            /* the gradient spans all five segments */
    background-position:var(--gp) 0;      /* this segment's slice of that sweep */
    clip-path:inset(0 calc(100% - var(--f)) 0 0 round 6px);  /* round the leading edge of a part-filled segment */
    transition:clip-path .5s cubic-bezier(.3,.9,.3,1);
  }
  @media (prefers-reduced-motion:reduce){ .rail .seg i{transition:none} }
  .pins{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  @media (max-width:620px){ .pin b{font-size:12px} .pin span{font-size:9.5px} }
  .pin{display:flex;flex-direction:column;gap:3px;padding-top:6px;text-align:center;align-items:center}
  .pin b{font-family:var(--display);font-size:14px;line-height:1.2}
  .pin span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
  .pin.on span{color:var(--gold)}
  .pin.now b{color:var(--leaf-dk)}

  .cols{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px}
  .cols-left{grid-template-columns:1.4fr 1fr}
  .cols-right{grid-template-columns:1fr 1.6fr}
  .cols-two{grid-template-columns:1fr 1fr}
  .cols-one{grid-template-columns:1fr}
  /* every side-by-side layout stacks on a phone. These must be classes, not inline
     styles on the element — an inline style outranks any media query. */
  @media (max-width:880px){
    .cols, .cols-left, .cols-right, .cols-two{grid-template-columns:1fr}
  }

  .hero-spirit{display:flex;gap:16px;align-items:center}
  .hero-spirit .port{width:144px;height:144px;flex:0 0 144px;background:var(--sunk);border:1px solid var(--hair);border-radius:14px;display:grid;place-items:center;padding:6px}
  .hero-spirit .port img{max-width:100%;max-height:100%;object-fit:contain}
  .hero-spirit .meta b{font-family:var(--display);font-size:22px;display:block;line-height:1.15}
  .hero-spirit .meta .sub{margin-top:3px}

  .tiers{display:flex;gap:4px;margin-top:7px}
  .tiers i{width:26px;height:6px;border-radius:3px;background:var(--hair)}
  .tiers i.on{background:var(--gold)}

  .gl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:inline-block;margin-right:5px}
  .rar{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:2px 8px;border-radius:20px;display:inline-block}
  .rar.common{color:#fff;background:var(--r-common)}
  .rar.rare{color:#fff;background:var(--r-rare)}
  .rar.epic{color:#fff;background:var(--r-epic)}
  .rar.starter{color:#fff;background:var(--muted)}

  .list{display:flex;flex-direction:column}
  .li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
  .li:first-child{border-top:0;padding-top:0}
  .li .thumb{width:46px;height:46px;flex:0 0 46px;background:var(--sunk);border-radius:10px;display:grid;place-items:center;padding:3px;border:1px solid var(--hair)}
  .li .thumb img{max-width:100%;max-height:100%;object-fit:contain}
  .li .m{flex:1;min-width:0}
  .li .m b{font-family:var(--display);font-size:16px;display:block;line-height:1.2}
  .li .m span{font-size:13px;color:var(--muted)}

  .btn{border:1px solid var(--hair2);background:var(--panel);border-radius:10px;padding:9px 16px;font-weight:500;font-size:14.5px;white-space:nowrap}
  .btn:hover{background:var(--sunk)}
  .btn.primary{background:var(--leaf);border-color:var(--leaf-dk);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;padding:11px 20px}
  .btn.primary:hover{background:var(--leaf-dk)}
  .btn.gold{background:linear-gradient(160deg,var(--gold-lt),var(--gold));border-color:var(--gold);color:#3A2A06;font-family:var(--display);font-weight:700;font-size:16px;padding:11px 20px}
  .btn.wide{width:100%;text-align:center}
  .btn:disabled{opacity:.42;cursor:not-allowed}
  .btn.on{background:var(--leaf);border-color:var(--leaf-dk);color:#fff}

  /* ---------- feed ---------- */
  .feed-head{gap:4px;padding:15px 18px}
  .feed-head h3{font-size:18px}
  .composer textarea{
    width:100%;min-height:86px;resize:vertical;border:1px solid var(--hair);border-radius:12px;padding:12px 14px;
    font-family:var(--body);font-size:15.5px;background:var(--sunk);color:var(--ink);line-height:1.5;
  }
  .composer textarea::placeholder{color:var(--muted)}
  .composer .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  /* two kinds, as a segmented toggle rather than a row of loose tags */
  .kindpick{display:inline-flex;background:var(--sunk);border-radius:11px;padding:3px;gap:3px}
  .kindpick button{background:none;border:0;border-radius:8px;padding:7px 18px;font-size:13.5px;
    font-weight:500;color:var(--muted);font-family:var(--body)}
  .kindpick button[aria-pressed="true"]{background:var(--panel);color:var(--ink);
    box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .composer-actions{display:flex;gap:8px;align-items:center}
  .btn.attach{cursor:pointer;display:inline-flex;align-items:center}
  /* collapsed state: one slim row that opens into the full composer */
  .composer.collapsed{flex-direction:row;align-items:center;gap:12px;width:100%;
    text-align:left;cursor:pointer;padding:12px 15px;border-radius:14px}
  .composer.collapsed:hover{background:var(--sunk)}
  .composer.collapsed .av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--sunk);
    border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
  .composer.collapsed .av img{width:112%;max-width:none;transform:translateY(6%)}
  .composer.collapsed .prompt{flex:1;min-width:0;color:var(--muted);font-size:15px;
    background:var(--sunk);border-radius:20px;padding:10px 16px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .composer.collapsed:hover .prompt{background:var(--panel)}
  .composer .who{display:flex;gap:12px;align-items:center}
  .composer .who .av{width:50px;height:50px;flex:0 0 50px;border-radius:50%;background:var(--sunk);
    border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
  .composer .who .av img{width:112%;max-width:none;transform:translateY(6%)}
  .composer .who b{font-family:var(--display);font-size:17px}
  .feed-main{display:flex;flex-direction:column;gap:18px}

  /* attached media */
  .post-media{width:100%;max-height:460px;object-fit:cover;border-radius:12px;
    border:1px solid var(--hair);display:block;background:var(--sunk)}
  .draft-media{position:relative}
  .draft-media .post-media{max-height:240px}
  .draft-media .btn{position:absolute;top:8px;right:8px;padding:6px 12px;font-size:13px}

  /* comments */
  .thread{border-top:1px solid var(--hair);padding-top:12px;display:flex;flex-direction:column;gap:12px}
  .cmt b{font-family:var(--display);font-size:14.5px;margin-right:8px}
  .cmt span{font-family:var(--mono);font-size:10px;color:var(--muted)}
  .cmt p{font-size:14.5px;line-height:1.5;margin-top:2px}
  .cmt-add{display:flex;gap:8px}
  .cmt-add input{flex:1;min-width:0;border:1px solid var(--hair);border-radius:10px;padding:9px 12px;
    font-family:var(--body);font-size:14.5px;background:var(--sunk);color:var(--ink)}
  .cmt-add input::placeholder{color:var(--muted)}

  .post{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:17px 19px;display:flex;flex-direction:column;gap:12px}
  .post .who{display:flex;gap:12px;align-items:center}
  .post .av{width:50px;height:50px;flex:0 0 50px;border-radius:50%;background:var(--sunk);border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden}
  .post .av img{width:112%;max-width:none;height:auto;transform:translateY(6%)}
  .post .who .n b{font-family:var(--display);font-size:16.5px;display:block;line-height:1.2}
  .post .who .n span{font-size:12.5px;color:var(--muted)}
  .post .body{font-size:15.5px;line-height:1.55;white-space:pre-wrap}
  .post .chip{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;background:var(--sunk);border-radius:20px;padding:4px 11px;color:var(--muted)}
  .post .chip.wellness{background:color-mix(in oklab,var(--leaf) 20%,var(--panel));color:var(--leaf-dk)}
  .post .acts{display:flex;gap:6px;border-top:1px solid var(--hair);padding-top:10px}
  .post .acts button{flex:1;background:none;border:0;border-radius:9px;padding:8px;font-size:14px;color:var(--muted);font-weight:500;font-family:var(--body)}
  .post .acts button:hover{background:var(--sunk)}
  .post .acts button.liked{color:var(--rose);font-weight:700}
  .post .tally{display:flex;gap:14px;font-size:13px;color:var(--muted)}


  /* ---------- give ---------- */
  .pickrow{display:flex;flex-direction:column;gap:8px}
  .pickrow button{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--panel);
    border:1px solid var(--hair);border-radius:13px;padding:13px 15px}
  .pickrow button[aria-pressed="true"]{border-color:var(--leaf);background:color-mix(in oklab,var(--leaf) 8%,var(--panel))}
  .pickrow .dot{width:17px;height:17px;flex:0 0 17px;border-radius:50%;border:2px solid var(--hair2);margin-top:3px}
  .pickrow button[aria-pressed="true"] .dot{border-color:var(--leaf);background:var(--leaf);box-shadow:inset 0 0 0 3px var(--panel)}
  .pickrow .c b{font-family:var(--display);font-size:17px;display:block}
  .pickrow .c span{font-size:13.5px;color:var(--muted);line-height:1.45}
  .amts{display:flex;gap:8px;flex-wrap:wrap}
  .amts button{background:var(--sunk);border:1px solid transparent;border-radius:12px;padding:11px 20px;
    font-family:var(--display);font-size:19px;font-weight:700}
  .amts button[aria-pressed="true"]{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 14%,var(--panel))}

  /* ---------- shop ---------- */
  .crates{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:880px){ .crates{grid-template-columns:1fr} }
  .crate{background:var(--panel);border:1px solid var(--hair);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:13px;align-items:center;text-align:center}
  .crate.t2{border-color:color-mix(in oklab,var(--r-rare) 40%,var(--hair))}
  .crate.t3{border-color:color-mix(in oklab,var(--gold) 55%,var(--hair))}
  .crate .lid{width:100%;aspect-ratio:1.4;border-radius:14px;display:grid;place-items:center;
    position:relative;overflow:hidden;background:var(--sunk)}
  .crate.t1 .lid{background:radial-gradient(circle at 50% 62%,#3C4650,var(--sunk) 72%)}
  .crate.t2 .lid{background:radial-gradient(circle at 50% 62%,#2C4370,var(--sunk) 72%)}
  .crate.t3 .lid{background:radial-gradient(circle at 50% 62%,#6A4E12,var(--sunk) 72%)}
  .crate .lid img{width:74%;height:auto;image-rendering:pixelated;
    filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));transition:transform .25s ease}
  .crate:hover .lid img{transform:translateY(-3px) scale(1.04)}
  @media (prefers-reduced-motion:reduce){ .crate .lid img,.crate:hover .lid img{transition:none;transform:none} }
  .crate h4{font-family:var(--display);font-size:21px}
  .odds{width:100%;display:flex;flex-direction:column;gap:5px}
  .odds .o{display:flex;justify-content:space-between;font-size:13px}
  .odds .o span:last-child{font-family:var(--mono)}

  .modal{position:fixed;inset:0;z-index:80;background:rgba(16,22,12,.66);display:grid;place-items:center;padding:22px}
  .modal .sheet{background:var(--panel);border:1px solid var(--hair);border-radius:20px;padding:28px;max-width:400px;width:100%;
    display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
  .modal .sheet img{width:220px;max-width:60vw;height:auto}
  .modal .sheet img.map-shot{width:100%;max-width:none}
  .modal .sheet h3{font-size:26px}
  .pop{animation:pop .45s cubic-bezier(.2,1.5,.4,1) both}
  @keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
  .spin{animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .pop,.spin{animation:none} }

  /* ---------- self ---------- */
  .grid-coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
  .cell{background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:7px;align-items:center;text-align:center}
  .cell.eq{border-color:var(--leaf);background:color-mix(in oklab,var(--leaf) 7%,var(--panel))}
  .cell .fr{width:100%;aspect-ratio:1;background:var(--sunk);border-radius:10px;display:grid;place-items:center;padding:5px}
  .cell .fr img{max-width:100%;max-height:100%;object-fit:contain}
  .cell.locked .fr img{filter:grayscale(1) brightness(.5) opacity(.42)}
  .cell b{font-family:var(--display);font-size:14.5px;line-height:1.15}
  .cell .tier{font-family:var(--mono);font-size:10px;color:var(--muted)}
  .moods{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
  @media (max-width:620px){ .moods{grid-template-columns:repeat(3,1fr)} }
  .moods button{background:var(--sunk);border:2px solid transparent;border-radius:12px;padding:7px}
  .moods button img{width:100%;height:auto}
  .moods button[aria-pressed="true"]{border-color:var(--gold);background:var(--panel)}

  .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px}
  .kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .kv dd{margin:2px 0 0;font-family:var(--display);font-size:25px;font-weight:700}

  .note{background:var(--sunk);border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.5;color:var(--muted)}
  .note b{color:var(--ink);font-weight:500}

  /* An empty toast is only ~24px tall, so translateY(150%) left 14px of it on
     screen — a pale bar in dark mode. Offset by its own height PLUS a fixed
     distance, and fade it out, so idle state is invisible at any content size. */
  .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,calc(100% + 40px));
    z-index:90;background:var(--ink);color:var(--bg);opacity:0;pointer-events:none;
    border-radius:12px;padding:12px 20px;font-size:14.5px;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
    transition:transform .3s cubic-bezier(.2,.9,.3,1), opacity .2s ease;max-width:min(90vw,460px)}
  .toast.up{transform:translate(-50%,0);opacity:1;pointer-events:auto}
  @media (prefers-reduced-motion:reduce){ .toast{transition:none} }

  footer{max-width:1180px;margin:0 auto;padding:0 22px 50px}
  footer p{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);line-height:1.9}

  /* ---------- sign in ---------- */
  body.signed-out .chrome, body.signed-out main, body.signed-out footer{display:none}
  #gate:empty{display:none}
  #gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:24px;overflow-y:auto}
  .signin{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--hair);
    border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:10px}
  .signin-brand{display:flex;align-items:center;gap:11px;margin-bottom:10px}
  .signin-brand .sigil{width:40px;height:40px;flex:0 0 40px;border-radius:11px;
    background:linear-gradient(150deg,var(--gold-lt),var(--leaf));display:grid;place-items:center;
    font-family:var(--display);font-weight:800;color:#fff;font-size:20px;box-shadow:var(--shadow)}
  .signin-brand b{font-family:var(--display);font-size:22px;font-weight:800;line-height:1;display:block}
  .signin-brand span span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted)}
  .signin h1{font-size:24px}
  .signin label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);margin-top:6px}
  .signin input{width:100%;border:1px solid var(--hair);border-radius:11px;padding:11px 13px;
    font-family:var(--body);font-size:16px;background:var(--sunk);color:var(--ink)}
  .signin input:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
  .signin-error{min-height:18px;font-size:13.5px;color:#C4607A;font-weight:500}
  .signin .btn{margin-top:2px}
  .signin-demo{margin-top:10px;padding-top:12px;border-top:1px solid var(--hair);
    font-size:12px;line-height:1.6;color:var(--muted)}
  .signin-demo code{font-family:var(--mono);color:var(--ink);background:var(--sunk);
    padding:1px 6px;border-radius:5px}

  /* ---------- give ---------- */
  .give-top .kv{gap:18px}
  .give-top dd{font-size:28px}

  .maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .map{
    position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:14px;
    aspect-ratio:4/3;padding:0;background-size:cover;background-position:center 58%;
    image-rendering:pixelated;text-align:left;cursor:pointer;
    filter:grayscale(.55) brightness(.62);transition:filter .25s ease,transform .25s ease;
  }
  .map.on{filter:none;border-color:color-mix(in oklab,var(--gold) 45%,var(--hair))}
  .map:hover{transform:translateY(-2px);filter:grayscale(.15) brightness(.9)}
  .map.on:hover{filter:brightness(1.06)}
  /* the plate the text sits on: translucent so the map reads through it */
  .map-body{
    position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;gap:5px;
    padding:10px 11px 11px;
    background:linear-gradient(transparent,rgba(12,18,10,.52) 26%,rgba(12,18,10,.86));
    backdrop-filter:blur(2px);
  }
  .map-body b{font-family:var(--display);font-size:15px;color:#F4F1E8;line-height:1.15}
  .map-body .goal{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:rgba(244,241,232,.72)}
  .map-body .meter{height:4px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
  .map-body .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--gold))}
  .map-body .state{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:rgba(244,241,232,.85)}
  .map.on .map-body .state{color:var(--gold-lt)}
  @media (prefers-reduced-motion:reduce){ .map,.map:hover{transition:none;transform:none} }

  .map-shot{width:100%;height:auto;border-radius:12px;border:1px solid var(--hair);image-rendering:pixelated}