:root{
  --bg:#fff6e9;
  --card:#fffdf8;
  --card-strong:#fff8e8;
  --text:#2f2a24;
  --muted:#746f68;
  --line:#eadfcf;
  --accent:#1EA2CA;
  --accent-dark:#127b99;
  --stone:#b9ad9a;
  --soft:#f6ead8;
  --danger:#a33;
  --owner:#e8f8fb;
  --orphan:#fff0d8;
  --sun:#ffd166;
  --coral:#ff8d7a;
  --leaf:#89c77b;
  --lavender:#b9a7ff;
  --rose:#ffd6df;
  --shadow:0 18px 54px rgba(83,61,38,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 7% 6%,rgba(255,141,122,.26) 0 7px,transparent 8px),
    radial-gradient(circle at 88% 10%,rgba(30,162,202,.16) 0 9px,transparent 10px),
    radial-gradient(circle at 18% 82%,rgba(137,199,123,.18) 0 10px,transparent 11px),
    radial-gradient(circle at 82% 78%,rgba(185,167,255,.16) 0 8px,transparent 9px),
    linear-gradient(135deg,#fff9ef 0%,#f8efe2 45%,#edf7f9 100%);
  background-attachment:fixed;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.42;
  background-image:
    radial-gradient(ellipse at center,rgba(126,111,91,.09) 0 48%,transparent 50%),
    radial-gradient(ellipse at center,rgba(30,162,202,.07) 0 45%,transparent 47%),
    radial-gradient(ellipse at center,rgba(255,141,122,.075) 0 42%,transparent 45%);
  background-size:92px 58px,118px 74px,152px 86px;
  background-position:10px 20px,54px 96px,14px 170px;
}
a{color:inherit}
.topbar{
  position:sticky;
  top:0;
  z-index:900;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  background:rgba(255,251,244,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(234,223,207,.92);
  box-shadow:0 8px 24px rgba(66,49,33,.055);
}
.brand{
  font-weight:900;
  letter-spacing:-.045em;
  color:var(--text);
  text-decoration:none;
  font-size:15px;
  line-height:1.05;
  display:flex;
  align-items:center;
  gap:6px;
}
.brand:before{
  content:"🪨";
  font-size:17px;
  filter:saturate(1.15);
}
nav{display:flex;gap:4px;align-items:center;justify-content:flex-end}
nav button{
  font-size:12px;
  background:rgba(255,255,255,.62);
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  padding:7px 8px;
  min-height:34px;
  border-radius:999px;
  transition:transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
nav button:hover,nav button.is-active{background:#fff;color:var(--text);box-shadow:0 7px 18px rgba(83,61,38,.07)}
nav button:active,button:active{transform:translateY(1px) scale(.985)}
main{max-width:780px;margin:auto;padding:10px}.page{display:none}.page.is-active{display:block}
.hero,.panel,.profile{
  position:relative;
  background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(fff,248,232,.93));
  background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(255,248,232,.93));
  border:1px solid rgba(234,223,207,.98);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero:before,.panel:before,.profile:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.46;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,209,102,.24) 0 6px,transparent 7px),
    radial-gradient(circle at 88% 22%,rgba(30,162,202,.16) 0 5px,transparent 6px),
    radial-gradient(circle at 78% 82%,rgba(255,141,122,.14) 0 7px,transparent 8px);
}
.hero{padding:17px 14px 15px;margin:10px 0 12px;border-top:4px solid rgba(30,162,202,.55)}
.hero:after{
  content:"";
  position:absolute;
  right:-24px;
  top:34px;
  width:104px;
  height:74px;
  border-radius:58% 42% 46% 54% / 54% 48% 52% 46%;
  background:
    radial-gradient(circle at 30% 36%,rgba(255,255,255,.55) 0 8px,transparent 9px),
    linear-gradient(135deg,#76c8dd,#1EA2CA 58%,#157e9f);
  box-shadow:inset -12px -12px 24px rgba(34,79,88,.12),0 12px 28px rgba(30,162,202,.16);
  opacity:.92;
  pointer-events:none;
}
.eyebrow{font-size:10.5px;color:#7a6250;text-transform:uppercase;letter-spacing:.11em;line-height:1.45;margin:0 0 8px;white-space:nowrap;font-weight:850;position:relative;z-index:1}.eyebrow span:first-child{color:#a35e2d}.eyebrow span:last-child{color:#63742e}.hero h1{font-size:clamp(30px,8vw,54px);line-height:.96;margin:6px 74px 14px 0;letter-spacing:-.07em;position:relative;z-index:1}.homecopy{position:relative;z-index:1;font-size:17px;line-height:1.5;background:linear-gradient(135deg,#fff0d8,#eef8f9);border:1px solid rgba(234,223,207,.88);border-left:5px solid var(--coral);border-radius:20px;padding:13px 14px;margin-top:14px;color:#34312d;font-weight:690;box-shadow:0 8px 22px rgba(83,61,38,.055)}
.codebox{position:relative;z-index:1;padding:0;margin:0}h1,h2,h3{letter-spacing:-.045em}h2{font-size:24px;margin:2px 0 10px}h3{font-size:19px;margin:16px 0 8px}.panel,.profile{padding:15px;margin:12px 0}.compact-copy h1{font-size:32px;line-height:1;margin:4px 0 16px}.compact-copy p{font-size:16px;line-height:1.62}.compact-copy h2{margin-top:24px;border-left:5px solid rgba(30,162,202,.45);padding-left:10px}.sr-only{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.codebox input{font-size:23px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;padding:16px;border-radius:22px;background:#fff;border:2px solid rgba(234,223,207,.95);box-shadow:inset 0 2px 0 rgba(255,255,255,.95),0 10px 24px rgba(83,61,38,.07)}.codebox button{width:100%;margin-top:8px}.codebox small{display:block;margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--muted)}.codebox small a{font-weight:850;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--accent-dark)}
label{display:block;font-weight:780;margin:12px 0 6px}input,textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:13px;font:inherit;background:#fff;color:var(--text)}input[type=file]{padding:10px;background:#fff}input[type=checkbox]{width:auto;margin-right:8px}input:focus,textarea:focus{outline:3px solid rgba(30,162,202,.20);border-color:var(--accent)}
button{border:0;border-radius:16px;padding:13px 16px;background:var(--accent);color:#fff;font-weight:850;cursor:pointer;min-height:46px;box-shadow:0 10px 22px rgba(30,162,202,.20);transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}button:hover{filter:brightness(.98);box-shadow:0 12px 26px rgba(30,162,202,.26)}button:disabled{opacity:.6;cursor:not-allowed}.secondary{background:#fff3dc;color:#242321;box-shadow:0 8px 18px rgba(83,61,38,.07);border:1px solid rgba(234,223,207,.95)}.danger{background:#f7e1dd;color:var(--danger);box-shadow:0 8px 18px rgba(163,51,51,.08)}.wide{width:100%;margin-top:10px}.message{position:relative;z-index:1;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#fff4df,#edf8fb);border:1px solid rgba(234,223,207,.85);margin-top:10px}.muted,small{color:var(--muted);line-height:1.42}.tiny{font-size:12px}.actions,.mini-actions{display:flex;gap:8px;flex-wrap:wrap}.mini-actions button{flex:1 1 180px}.actions.two>*{flex:1 1 210px}
.profile-head{display:flex;gap:13px;align-items:center}.stone-img{width:92px;height:92px;border-radius:42% 58% 52% 48% / 50% 44% 56% 50%;background:linear-gradient(145deg,#f7d6aa,#b9ad9a 55%,#8f8575);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;flex:0 0 auto;box-shadow:inset -10px -12px 24px rgba(62,47,32,.14),0 10px 24px rgba(83,61,38,.12);border:2px solid rgba(255,255,255,.72)}.stone-img img{width:100%;height:100%;object-fit:cover}.badge{display:inline-block;border-radius:999px;background:var(--orphan);padding:7px 10px;font-size:12px;font-weight:900;border:1px solid rgba(234,223,207,.9)}.badge.owner{background:var(--owner);color:#16677a;border-color:rgba(30,162,202,.2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0}.stats div{background:linear-gradient(180deg,#fff8eb,#f6ead8);border:1px solid rgba(234,223,207,.85);border-radius:18px;padding:10px;min-width:0}.stats strong{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats span{font-size:11px;color:var(--muted)}.flags{font-size:15px;letter-spacing:1px;background:#fff7e8;border:1px solid rgba(234,223,207,.85);border-radius:18px;padding:9px 11px;margin:-4px 0 10px;line-height:1.4}.flag-pill{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 7px;margin:2px;font-size:13px;letter-spacing:0}#map,#pickMap,#createMap{width:100%;aspect-ratio:1/1;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#ddd;box-shadow:0 10px 26px rgba(83,61,38,.08)}#createMap,#pickMap{cursor:crosshair}.profile-actions{margin-top:10px}.log{display:grid;gap:5px}.logitem{border-left:4px solid var(--leaf);background:rgba(255,253,248,.92);border:1px solid rgba(234,223,207,.82);border-radius:14px;padding:8px 10px}.logitem:nth-child(3n+2){border-left-color:var(--coral)}.logitem:nth-child(3n+3){border-left-color:var(--accent)}.logitem-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.logitem p{margin:5px 0 0;line-height:1.34}.logitem button{min-height:auto;padding:7px 9px;border-radius:10px;font-size:12px}.log-actions{display:flex;gap:5px;flex:0 0 auto}.suggestions{border:1px solid var(--line);background:#fff;border-radius:16px;overflow:hidden;margin-top:-2px;box-shadow:0 8px 18px rgba(83,61,38,.06)}.suggestions button{display:block;width:100%;text-align:left;background:#fff;color:var(--text);border-radius:0;border-bottom:1px solid var(--line);font-weight:650;box-shadow:none}.suggestions button:last-child{border-bottom:0}.match-list{display:grid;gap:8px;margin:10px 0}.match-card{display:grid;grid-template-columns:66px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:18px;padding:8px;text-align:left;color:var(--text);width:100%;box-shadow:0 7px 18px rgba(83,61,38,.06)}.match-card img,.match-card .placeholder{width:66px;height:66px;border-radius:42% 58% 52% 48% / 50% 44% 56% 50%;object-fit:cover;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:28px}.match-card small{display:block}.seo-copy p{font-size:16px;line-height:1.58}footer{max-width:780px;margin:auto;padding:20px 12px 42px;display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px}footer a{text-decoration-thickness:1px;text-underline-offset:3px}
@media(max-width:610px){main{padding:7px}.topbar{padding:7px 8px}.brand{max-width:148px;font-size:13px}.brand:before{font-size:15px}nav{gap:2px}.topbar nav button{font-size:11px;padding:6px 5px;min-height:30px}.hero{padding:14px 12px}.hero:after{width:82px;height:58px;right:-18px;top:42px}.eyebrow{font-size:9px;letter-spacing:.055em}.hero h1{margin:7px 50px 12px 0}.profile-head{align-items:flex-start}.stats{grid-template-columns:repeat(2,1fr)}.actions.two>*{flex-basis:100%}.match-card{grid-template-columns:56px 1fr}.match-card img,.match-card .placeholder{width:56px;height:56px}.match-card .select{grid-column:1/-1;width:100%}.homecopy{font-size:16px;padding:11px 12px}.panel,.profile{padding:12px;border-radius:24px}.logitem{padding:7px 9px}.logitem p{font-size:14px}.log-actions button{font-size:11px;padding:6px 7px}.codebox input{font-size:21px;padding:14px}.compact-copy h1{font-size:28px}.compact-copy p{font-size:15.5px}}