:root{--parch:#f4e6c3;--parch2:#ead6a4;--paper:#fff8e6;--ink:#3b2a1a;--mustard:#d9a21b;--teal:#1f7a75;--rust:#b5452a;--dark:#2a1e12;--safe-b:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
html{scroll-padding-bottom:110px;scroll-padding-top:70px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Work Sans',system-ui,sans-serif;color:var(--ink);background:var(--parch);min-height:100vh;
background-image:radial-gradient(circle at 20% 10%,#fff6dc 0,transparent 40%),radial-gradient(circle at 80% 60%,#e6cc92 0,transparent 45%),repeating-linear-gradient(0deg,transparent 0 38px,rgba(59,42,26,.05) 38px 39px),repeating-linear-gradient(90deg,transparent 0 38px,rgba(59,42,26,.05) 38px 39px);background-attachment:fixed}
h1,h2,h3,.logo,.btn,.rye{font-family:'Rye',Georgia,serif;font-weight:400;letter-spacing:.3px}
a{color:var(--teal)}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:rgba(244,230,195,.94);border-bottom:3px solid var(--dark);backdrop-filter:blur(4px)}
.logo{font-size:21px;color:var(--rust);text-decoration:none;white-space:nowrap}.xm{display:inline-block;transition:.3s}.logo:hover .xm{transform:rotate(90deg)}
main{max-width:560px;margin:0 auto;padding:16px 16px calc(96px + var(--safe-b))}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;align-items:flex-end;background:var(--dark);padding:8px 0 calc(8px + var(--safe-b));border-top:3px solid var(--mustard)}
.tabs a{color:var(--parch);text-decoration:none;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;max-width:96px;opacity:.75}
.tabs a span{font-size:22px}.tabs a.on{opacity:1;color:var(--mustard)}
.postTab .bigx{width:54px;height:54px;margin-top:-30px;border-radius:50%;background:var(--rust);border:3px solid var(--mustard);display:grid;place-items:center;font-size:26px!important;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.4);transition:.2s}
.postTab:hover .bigx,.postTab.on .bigx{transform:rotate(90deg)}
h1{font-size:30px;margin:6px 0 4px;color:var(--dark);line-height:1.1}h2{font-size:22px;margin:22px 0 10px;color:var(--dark)}
.sub{font-family:'Special Elite',monospace;margin:0 0 14px;color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:16px;padding:12px 18px;border-radius:10px;border:3px solid var(--dark);text-decoration:none;color:var(--dark);background:var(--mustard);box-shadow:4px 4px 0 var(--dark);transition:.15s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translate(-1px,-2px);box-shadow:6px 6px 0 var(--dark)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dark)}
.btn.teal{background:var(--teal);color:var(--paper)}.btn.rust{background:var(--rust);color:#fff}.btn.ghost{background:var(--paper)}.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.mini{font:600 13px 'Work Sans';background:var(--teal);color:#fff;border:2px solid var(--dark);border-radius:8px;padding:6px 10px;cursor:pointer}
.linkbtn{background:none;border:0;color:var(--rust);font:600 13px 'Work Sans';text-decoration:underline;cursor:pointer;padding:4px 0}
.panel{background:var(--paper);border:3px solid var(--dark);border-radius:14px;padding:16px;margin:14px 0;box-shadow:4px 4px 0 rgba(42,30,18,.25)}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 0}
input,select,textarea{width:100%;padding:11px;border-radius:8px;border:3px solid var(--dark);font:16px 'Work Sans';background:var(--parch);color:var(--ink);margin-top:4px}
textarea{min-height:84px;resize:vertical}
.row{display:flex;gap:10px}.row>*{flex:1}
.hint{font-size:13px;opacity:.8;margin:4px 0 0}
.filters{display:flex;gap:8px;margin-bottom:12px}.filters select{margin:0;padding:9px;font-size:14px}
.board{display:grid;gap:16px}
.card{display:flex;gap:12px;background:var(--parch);padding:16px 14px 12px;box-shadow:3px 4px 0 rgba(0,0,0,.3);position:relative;text-decoration:none;color:inherit;border:2px solid #c8ad74;transition:.2s}
.card:nth-child(odd){transform:rotate(-.8deg)}.card:nth-child(even){transform:rotate(.7deg)}.card:hover{transform:rotate(0) scale(1.02)}
.card:before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--rust);box-shadow:1px 2px 0 #000}
.thumb{width:76px;height:76px;flex:none;border-radius:8px;border:2px solid var(--dark);background:var(--parch2) center/cover;display:grid;place-items:center;font-size:32px}
.card .w{font-family:'Rye';color:var(--rust);font-size:12px;letter-spacing:2px}
.card h3{font:700 16px 'Work Sans';margin:2px 0 6px;line-height:1.25}
.meta{font-family:'Special Elite';font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px}
.pill{display:inline-block;font:700 11px 'Work Sans';padding:2px 7px;border-radius:20px;border:2px solid var(--dark);background:var(--paper);text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}
.pill.ex{background:var(--dark);color:var(--parch)}.pill.open{background:#cde8c4}.pill.claimed{background:var(--mustard)}.pill.done{background:var(--teal);color:#fff}
.boardwrap{background:#8a5a34;background-image:radial-gradient(#9b6a40 1px,transparent 1px);background-size:6px 6px;border:6px solid #5b3a1f;border-radius:12px;padding:20px 14px}
.empty{text-align:center;color:var(--parch);font-family:'Special Elite';padding:20px}
.hero-img{width:100%;max-height:320px;object-fit:cover;border:3px solid var(--dark);border-radius:12px;display:block;background:var(--parch2)}
.noimg{height:150px;display:grid;place-items:center;font-size:60px;background:var(--parch2);border:3px dashed var(--dark);border-radius:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;margin-top:10px}.kv b{font-weight:700}
.find{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:2px dashed #c8ad74}.find:first-child{border-top:0}
.find img{width:92px;height:92px;object-fit:cover;border-radius:8px;border:2px solid var(--dark);flex:none}
.find .price{font-family:'Rye';color:var(--rust);font-size:18px}
.find.chosen{background:#fff1c7;margin:0 -16px;padding:12px 16px;border-left:6px solid var(--mustard)}
.notice{background:#fde8d8;border:3px solid var(--rust);border-radius:10px;padding:12px;font-size:14px;line-height:1.45;margin:10px 0}
.notice b{color:var(--rust)}.notice.teal{background:#dff0ec;border-color:var(--teal)}.notice.teal b{color:var(--teal)}
.steps{list-style:none;padding:0;margin:10px 0}
.steps li{display:flex;gap:10px;padding:10px 0;border-top:2px dashed #c8ad74;font-size:14px;line-height:1.4}.steps li:first-child{border-top:0}
.dot{width:30px;height:30px;flex:none;border-radius:50%;border:3px solid var(--dark);display:grid;place-items:center;font-family:'Rye';background:var(--paper)}
.steps li.done .dot{background:var(--teal);color:#fff}.steps li.now .dot{background:var(--mustard);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.steps .act{margin-top:8px}
.pp{word-break:break-all;font-weight:700;font-size:15px;background:var(--parch);padding:8px;border-radius:8px;border:2px dashed var(--dark);display:block;margin:6px 0}
.prof{display:flex;gap:14px;align-items:center}
.avatar{width:68px;height:68px;border-radius:50%;background:var(--teal);color:var(--paper);border:3px solid var(--dark);display:grid;place-items:center;font:28px 'Rye';flex:none}
.xpbar{height:16px;border:3px solid var(--dark);border-radius:20px;background:var(--parch);overflow:hidden;margin:6px 0 2px}.xpbar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--mustard) 0 10px,#e7b738 10px 20px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin-top:12px}
.stats div{background:var(--parch);border:2px solid var(--dark);border-radius:10px;padding:8px 4px;font-size:12px}.stats b{display:block;font:20px 'Rye';color:var(--rust)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
.badge{text-align:center}.badge svg{width:100%;max-width:96px;filter:drop-shadow(2px 3px 0 rgba(42,30,18,.35));transition:.3s}
.badge:hover svg{transform:rotate(12deg) scale(1.06)}.badge svg.locked{opacity:.55;filter:grayscale(1)}
.badge h3{font-size:13px;margin:4px 0 2px;line-height:1.15}.badge p{margin:0;font-size:11px;line-height:1.3}
.prog{font-family:'Special Elite';font-size:11px;color:var(--teal)}
.stars{display:flex;gap:4px;font-size:30px}.stars button{background:none;border:0;cursor:pointer;font-size:30px;color:#bba77a;padding:0}.stars button.on{color:var(--mustard);text-shadow:1px 1px 0 var(--dark)}
.list a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed #c8ad74;text-decoration:none;color:var(--ink);font-size:14px}.list a:first-child{border-top:0}
#modal{position:fixed;inset:0;background:rgba(42,30,18,.6);z-index:50;display:grid;place-items:center;padding:16px}
#modal .panel{width:100%;max-width:440px;max-height:90vh;overflow:auto;margin:0}
.award{text-align:center}.award svg{width:150px;animation:pop .6s cubic-bezier(.3,1.6,.6,1)}@keyframes pop{from{transform:scale(.2) rotate(-90deg)}}
#toast{position:fixed;left:50%;bottom:calc(92px + var(--safe-b));transform:translateX(-50%) translateY(30px);background:var(--dark);color:var(--parch);padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
.welcome{text-align:center;padding:10px 0}.welcome svg{width:150px}
.terms h2{font-size:18px}.terms p,.terms li{line-height:1.5;font-size:15px}
.draft{background:var(--mustard);border:3px dashed var(--dark);padding:10px;border-radius:10px;font-weight:700;text-align:center}
.preview{max-width:100%;max-height:180px;border-radius:8px;border:2px solid var(--dark);margin-top:8px;display:block}
.chk{display:flex;gap:8px;align-items:flex-start;font-weight:400}.chk input{width:auto;margin-top:3px}
.ios-tip{font-size:14px}

.sfeed{display:grid;gap:4px}.sight{margin:8px 0}.sightTop{display:flex;gap:12px}.sight h3{font:700 16px 'Work Sans';margin:2px 0 6px;line-height:1.25}
.sight .w{color:var(--teal);font-size:12px;letter-spacing:2px}.snote{font-size:14px;margin:10px 0 0;line-height:1.45}
.sfoot{margin-top:10px;padding-top:8px;border-top:1px dashed #c8ad74}.sact{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.seg{display:flex;border:3px solid var(--dark);border-radius:12px;overflow:hidden;margin-bottom:10px}.seg a{flex:1;text-align:center;padding:10px 6px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px;background:var(--paper)}
.seg a.on{background:var(--dark);color:var(--mustard)}
.stats{grid-template-columns:repeat(3,1fr)}

/* ---------- wide / desktop layout ---------- */
.rail{display:none}
@media(min-width:1024px){
  .shell{display:grid;grid-template-columns:250px minmax(0,1fr) 320px;gap:26px;max-width:1380px;margin:0 auto;padding:0 26px;align-items:start}
  main{max-width:none;margin:0;padding:22px 0 60px}
  .rail{display:block;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:22px 2px 20px;scrollbar-width:thin}
  .tabs{display:none}#toast{bottom:28px}
  .top{padding-left:max(26px,calc((100vw - 1380px)/2 + 26px));padding-right:max(26px,calc((100vw - 1380px)/2 + 26px))}
  .logo{font-size:24px}
  .rnav{padding:8px;display:flex;flex-direction:column;gap:2px;margin-top:0}
  .rnav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700;transition:.15s}
  .rnav a span{width:24px;text-align:center;font-size:18px}.rnav a:hover{background:var(--parch);transform:translateX(3px)}
  .rnav a.on{background:var(--dark);color:var(--mustard)}
  .rcard{padding:14px}.rh{font-size:17px;margin:0 0 8px}.lvl{margin:12px 0 2px;font-size:15px}
  .avatar.sm{width:44px;height:44px;font-size:20px}
  .bprog{list-style:none;padding:0;margin:0;display:grid;gap:8px}
  .bprog li{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;font-size:13px;font-weight:600}
  .bi{width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;border:2px solid var(--dark);display:grid;place-items:center;font-size:14px}
  .bn{position:relative;padding-bottom:6px}.bn i{position:absolute;left:0;bottom:0;height:4px;background:var(--mustard);border-radius:3px;max-width:100%}
  .bn:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(59,42,26,.12);border-radius:3px;z-index:-1}
  .bc{font-family:'Special Elite';font-size:12px;color:var(--teal)}
  .rhead{display:flex;justify-content:space-between;align-items:baseline}
  .mini-feed{display:grid;gap:10px}
  .msight{display:flex;gap:10px;padding-top:10px;border-top:1px dashed #c8ad74;transition:.15s}.msight:first-child{border-top:0;padding-top:0}
  .msight:hover{transform:translateX(-2px)}
  .thumb.sm{width:52px;height:52px;font-size:22px;border-radius:8px}
  .mtxt{min-width:0;flex:1}.mtxt b{font-size:14px;line-height:1.25;display:block}.mtxt .hint{font-size:12px;margin-top:2px}
  .mact{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}.mact .mini{font-size:12px;padding:4px 8px}
  .bow{text-align:center;position:relative;overflow:hidden}.bow svg{width:110px;margin-top:14px}.bow h3{margin:4px 0}
  .stamp{display:table;margin:0 auto;background:var(--rust);color:#fff;font:13px 'Rye';padding:4px 14px;border-radius:6px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--dark);letter-spacing:.5px}
  .bow svg{margin-top:8px}
  /* center content gets more room */
  .board{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .boardwrap{padding:26px 20px}
  .sfeed{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sfeed .sight{margin:0}
  main h1{font-size:36px}
  .hero-img{max-height:420px}
  main > form.panel, main > .panel, .terms{max-width:760px}
}
@media(min-width:1024px) and (max-width:1180px){ .shell{grid-template-columns:220px minmax(0,1fr) 280px;gap:18px} .board,.sfeed{grid-template-columns:1fr} }

/* shipping estimator */
.shipest{margin:14px 0 4px;background:var(--parch);border:3px dashed var(--dark);border-radius:12px;padding:10px 12px}
.shipest summary{font:18px 'Rye';color:var(--teal);cursor:pointer;list-style-position:outside}
.shipest select,.shipest input{background:var(--paper)}
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.sizes button{background:var(--paper);border:3px solid var(--dark);border-radius:10px;padding:8px 4px;cursor:pointer;font:600 14px 'Work Sans';color:var(--ink);text-align:center;box-shadow:2px 2px 0 var(--dark);-webkit-tap-highlight-color:transparent}
.sizes button small{display:block;font-weight:400;font-size:11px;opacity:.8;margin-top:2px;line-height:1.2}
.sizes button.on{background:var(--teal);color:var(--paper);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--dark)}
.serow{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--dark);border-radius:10px;padding:8px 10px;margin:6px 0}
.serow>div:first-child{flex:1;min-width:0}.serow small{display:block;font-size:12px;opacity:.8}
.seprice{font:17px 'Rye';color:var(--rust);white-space:nowrap}
input.flash{animation:flash .9s}@keyframes flash{0%,60%{background:#cde8c4}100%{background:var(--parch)}}
@media (max-width:420px){.sizes{grid-template-columns:repeat(2,1fr)}.serow{display:grid;grid-template-columns:1fr auto;gap:6px 10px}.serow>div:first-child{grid-column:1/-1}.seprice{align-self:center}}
.shipest [hidden]{display:none!important}
.seprice small{display:block;font:600 10px 'Work Sans';color:var(--ink);opacity:.7;text-align:right;text-transform:uppercase;letter-spacing:.4px}
.seretail{flex-basis:100%;font-size:11px;opacity:.7}
.serow{flex-wrap:wrap}
.setip{background:#dff0ec;border:2px solid var(--teal);border-radius:8px;padding:8px 10px;font-size:13px;font-weight:600;margin:8px 0 4px}
.shipupd{background:#fff3cf;border-color:var(--mustard);font-size:14px;line-height:1.45}
@media (max-width:420px){.seretail{grid-column:1/-1}.seprice small{text-align:left}#shipUpdF{flex-wrap:wrap}}

.arep .kv{margin:8px 0}.alog{list-style:none;padding:0;margin:0}.alog li{padding:8px 0;border-bottom:1px dashed #c8ad74;font-size:14px}.alog code{font-size:12px}