:root{
  --paper:#f2dfb2;
  --surface:#fff1cc;
  --line:#7b5138;
  --ink:#2d1c14;
  --muted:#806a55;
  --gold:#c99b43;
  --gold-soft:#ead39a;
  --wood:#55765f;
  --pixel-red:#963b2f;
  --pixel-red-dark:#4b2019;
  --pixel-cream:#f7e8bd;
  --pixel-hi:#fff7dc;
  --pixel-shadow:#6c422e;
  --shadow:5px 5px 0 rgba(73,42,28,.20);
}

html,body{
  background-color:#dcc591;
  background-image:
    linear-gradient(rgba(82,48,31,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(82,48,31,.055) 1px,transparent 1px);
  background-size:8px 8px;
}

body::before{
  position:fixed;
  inset:0;
  z-index:-1;
  content:"";
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(#6b432e .7px,transparent .7px);
  background-size:5px 5px;
}

.shell{
  background:#f3e2b8;
  border-right:2px solid var(--pixel-shadow);
  border-left:2px solid var(--pixel-shadow);
  box-shadow:8px 0 0 rgba(70,39,25,.12),-8px 0 0 rgba(255,246,218,.35);
}

.topbar,.top{
  color:#fff6dc;
  background:var(--pixel-red);
  border:2px solid var(--pixel-red-dark);
  border-top-color:#c97858;
  border-left-color:#c97858;
  border-radius:0;
  box-shadow:inset -2px -2px 0 #65261f,inset 2px 2px 0 #b95a47;
  backdrop-filter:none;
}

.topbar{height:58px;padding:0 12px}
.top{height:56px}
.top b{color:#fff6dc}
.top .bk{
  width:28px;
  height:28px;
  padding:0;
  color:#3a2117;
  background:#ead39a;
  border:2px outset #f7e7ba;
  font-size:18px;
  line-height:20px;
}
.top .bk:active{border-style:inset;transform:translate(1px,1px)}
.campaign-logo img,.top-brand img{filter:none}
.campaign-divider{background:rgba(255,246,220,.42)}
.campaign-brand strong{color:#f6d88b;text-shadow:1px 1px 0 #57251c}
.lang{
  color:#3a2117;
  background:#ead39a;
  border:2px outset #f7e7ba;
  border-radius:0;
  box-shadow:none;
}

.content{padding-top:18px}
.refbar,.card,.couple-entry,.flowbox,.lockcard,.opt,.pcard,.comp,.buy,.invite,.loadcard{
  border:2px solid var(--pixel-shadow);
  border-top-color:#d7b978;
  border-left-color:#d7b978;
  border-radius:1px;
  background-color:var(--surface);
  box-shadow:var(--shadow),inset 1px 1px 0 var(--pixel-hi);
}

.refbar{background:#ead39a}
.hero .kicker,.hero .kick,.rhead-kick{
  color:#fff4d0;
  background:var(--pixel-red);
  border:1px solid var(--pixel-red-dark);
  border-radius:1px;
  padding:5px 9px;
  text-shadow:1px 1px 0 #57251c;
}
.hero .kick,.rhead-kick{display:inline-block}
.hero h1,.rhead h1{color:#2c1b12;text-shadow:1px 1px 0 rgba(255,248,222,.72)}
.moon{
  border-radius:0;
  clip-path:none;
  box-shadow:none;
  outline:0;
}

.field input,.field select{
  border:2px inset #d8bd80;
  border-radius:0;
  background:#fff6db;
  color:var(--ink);
  box-shadow:inset 2px 2px 0 rgba(83,49,30,.12);
}
.field input:focus,.field select:focus{outline:2px solid #9c3d31;outline-offset:0}

.cta,.share-row button,.share-btn,.reroll-btn,.fmt-toggle button,.copy-btn,.buy,.rel-chip,.gender-choice,.pbtn,.sheet .go,.sheet .cancel{
  border:2px outset #eedca9;
  border-radius:0;
  box-shadow:2px 2px 0 rgba(74,42,27,.25);
}
.cta:active,.share-row button:active,.share-btn:active,.reroll-btn:active,.fmt-toggle button:active,.copy-btn:active,.rel-chip:active,.gender-choice:active,.pbtn:active,.sheet .go:active,.sheet .cancel:active{
  border-style:inset;
  box-shadow:none;
  transform:translate(1px,1px);
}
.cta.gold,.pbtn,.paybar .pbtn,.sheet .go{
  color:#fff6dc;
  background:var(--pixel-red);
  border-color:#c56d52 #57241c #57241c #c56d52;
  text-shadow:1px 1px 0 #57241c;
}
.cta{border-radius:0}
.identity-row>input{border-radius:0;border-right:0}
.gender-choices{border:0}
.gender-choice{border-radius:0;background:#ead39a;color:#694932}
.gender-choice.is-selected{color:#fff6dc;background:var(--pixel-red);border-color:#c56d52 #57241c #57241c #c56d52;text-shadow:1px 1px 0 #57241c}
.time-row{grid-template-columns:minmax(0,1fr) 68px;gap:8px}
.time-row .ampm{width:68px;padding:0 5px}

.igcard{
  border:3px double #e4c986;
  border-radius:2px;
  box-shadow:7px 7px 0 rgba(58,33,23,.34);
}
.thumb,.fmt-toggle button,.share-row button,.share-btn,.reroll-btn{border-radius:0}
.thumb.sel{border-color:var(--pixel-red)}
.thumb .tg,.thumb .ck,.ig-rbadge,.more span,.bchip,.best,.badge{border-radius:1px}
.fmt-toggle button.on{color:#fff6dc;background:var(--pixel-red);border-color:#c56d52 #57241c #57241c #c56d52}

.sec-t,.tray-t,.basis,.flow-t{border-bottom:2px solid var(--pixel-shadow);padding-bottom:7px}
.invite-head,.pair{border-radius:0}
.buy{cursor:pointer}
.buy.pro,.opt.pro{
  color:#fff6dc;
  background:#4a2b23;
  border-color:#8e5b45 #2d1712 #2d1712 #8e5b45;
}
.best,.badge{background:#d4ad55}

.rhead-img,.ilju-strip{
  border:3px double var(--pixel-shadow);
  border-radius:0;
  box-shadow:4px 4px 0 rgba(73,42,28,.22);
}
.basis-row{gap:4px}
.bchip{border:1px solid #6d8060;background:#dfe5c7}
.reading .mark{color:#8f362c;border-bottom:1px dashed #a77a50;padding-bottom:5px}

.paybar{
  background:#e5cf99;
  border-top:3px double var(--pixel-shadow);
  backdrop-filter:none;
  box-shadow:0 -3px 0 rgba(74,42,27,.12);
}
.sheet-mask{background:rgba(39,22,15,.58)}
.sheet{
  background:var(--surface);
  border:3px double var(--pixel-shadow);
  border-radius:0;
  box-shadow:8px 8px 0 rgba(45,25,17,.36);
}
.sheet .prev{border:2px inset #d8bd80;border-radius:0}
.loadmask{background:rgba(39,22,15,.62);backdrop-filter:none}
.loadcard .ink{border-radius:0;border-color:#d9b663;border-top-color:#8f362c}

.footer-brand{margin-bottom:10px}
.footer-logo img{filter:brightness(0) saturate(100%)}
.foot{border-top:3px double var(--pixel-shadow)}

@media (max-width:480px){
  .shell{border-right:0;border-left:0;box-shadow:none}
  .card{padding:16px}
  .row2{gap:8px}
  .top-brand{width:64px}
}