:root{
  --cream:#f7f2ea;
  --cream-2:#efe7d9;
  --stone:#ded3c2;
  --wood:#8a5a3b;
  --wood-dark:#5f3c26;
  --green:#5f7a5c;
  --green-dark:#3f5a3d;
  --terracotta:#c1704f;
  --brass:#b98a4a;
  --ink:#2c2620;
  --ink-soft:#6b5f52;
  --white:#ffffff;
  --radius:14px;
  --shadow:0 8px 24px rgba(44,38,32,0.14);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  font-family:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overscroll-behavior:none;
}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

/* ============ INTRO ============ */
#intro-screen{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at top left, rgba(95,122,92,0.25), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(184,138,74,0.25), transparent 55%),
    var(--cream);
  padding:24px;
  z-index:50;
}
.intro-card{
  max-width:460px;
  text-align:center;
  background:var(--white);
  border-radius:20px;
  padding:48px 36px;
  box-shadow:var(--shadow);
}
.intro-eyebrow{
  letter-spacing:.14em; text-transform:uppercase; font-size:.75rem;
  color:var(--green-dark); font-weight:600; margin:0 0 10px;
}
.intro-card h1{
  font-size:2.1rem; margin:0 0 12px; color:var(--ink); font-weight:700;
  letter-spacing:-0.01em;
}
.intro-sub{color:var(--ink-soft); line-height:1.5; margin:0 0 28px;}
.btn-primary{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:var(--white); border:none; border-radius:999px;
  padding:14px 30px; font-size:1rem; font-weight:600;
  box-shadow:0 6px 16px rgba(63,90,61,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(63,90,61,0.45);}
.btn-primary:active{transform:translateY(0);}

/* ============ APP SHELL ============ */
#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--cream);
}

#topbar{
  height:56px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px;
  background:var(--white);
  border-bottom:1px solid var(--stone);
  z-index:10;
}
.topbar-left{display:flex; align-items:center; gap:8px;}
.logo-dot{width:10px; height:10px; border-radius:50%; background:var(--terracotta); display:inline-block;}
.logo-text{font-weight:700; font-size:.95rem; color:var(--ink);}
.logo-text em{font-style:normal; color:var(--green-dark); font-weight:600;}
.topbar-right{display:flex; gap:6px;}
.btn-chip{
  background:var(--cream-2); border:1px solid var(--stone); border-radius:999px;
  padding:7px 12px; font-size:.82rem; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:5px;
}
.btn-chip:hover{background:var(--stone);}
.btn-chip:disabled{opacity:.35; cursor:default;}
.btn-chip:disabled:hover{background:var(--cream-2);}

#main-area{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  position:relative;
}

/* Location bar */
#location-bar{
  flex:0 0 auto;
  display:flex; gap:6px; overflow-x:auto;
  padding:10px 12px;
  background:var(--white);
  border-bottom:1px solid var(--stone);
  -webkit-overflow-scrolling:touch;
}
#location-bar::-webkit-scrollbar{display:none;}
.loc-btn{
  flex:0 0 auto;
  border:1px solid var(--stone); background:var(--cream);
  color:var(--ink-soft); border-radius:999px;
  padding:8px 14px; font-size:.82rem; font-weight:600; white-space:nowrap;
}
.loc-btn.active{
  background:var(--green-dark); border-color:var(--green-dark); color:var(--white);
}

/* Viewport */
#viewport-wrap{
  position:relative;
  flex:1 1 auto; min-height:0;
  background:#dfe7db;
}
#viewport{display:block; width:100%; height:100%;}

#camera-modes{
  position:absolute; top:12px; left:12px;
  display:flex; gap:6px; flex-wrap:wrap; max-width:70%;
  z-index:5;
}
.cam-btn{
  background:rgba(255,255,255,0.88); backdrop-filter:blur(6px);
  border:1px solid var(--stone); border-radius:999px;
  padding:6px 12px; font-size:.72rem; font-weight:700; color:var(--ink-soft);
  letter-spacing:.02em;
}
.cam-btn.active{background:var(--terracotta); color:var(--white); border-color:var(--terracotta);}

#walk-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(44,38,32,0.82); color:var(--white); font-size:.78rem;
  padding:8px 14px; border-radius:999px; z-index:5; white-space:nowrap;
}

#object-panel{
  position:absolute; bottom:66px; left:50%; transform:translateX(-50%);
  background:var(--white); border-radius:14px; padding:8px 12px;
  box-shadow:var(--shadow); z-index:6; text-align:center; max-width:90%;
}
#object-name{
  margin:0 0 6px; font-size:.8rem; font-weight:700; color:var(--ink);
  letter-spacing:.02em;
}
#object-panel .swatch-row{justify-content:center; margin-bottom:0;}
#object-panel .swatch{width:26px; height:26px;}

#object-toolbar{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; background:var(--white); border-radius:14px;
  padding:6px; box-shadow:var(--shadow); z-index:6;
}
.tool-btn{
  width:40px; height:40px; border:none; border-radius:10px; background:var(--cream-2);
  font-size:1.05rem; color:var(--ink);
}
.tool-btn.active{background:var(--green-dark); color:var(--white);}
.tool-btn.danger:hover{background:#d9534f; color:var(--white);}

#toast{
  position:absolute; top:12px; right:12px;
  background:var(--ink); color:var(--white); font-size:.82rem;
  padding:9px 16px; border-radius:10px; z-index:20; max-width:260px;
  box-shadow:var(--shadow);
}

/* ============ DESIGN PANEL ============ */
#design-panel{
  flex:0 0 auto;
  background:var(--white);
  border-top:1px solid var(--stone);
  display:flex; flex-direction:column;
  max-height:42vh;
}
#panel-tabs{
  display:flex; overflow-x:auto; gap:2px; padding:8px 10px 0;
  -webkit-overflow-scrolling:touch;
}
.tab-btn{
  flex:0 0 auto;
  background:none; border:none; border-bottom:2px solid transparent;
  padding:8px 12px 10px; font-size:.8rem; font-weight:600; color:var(--ink-soft);
}
.tab-btn.active{color:var(--green-dark); border-bottom-color:var(--terracotta);}

#panel-body{
  flex:1 1 auto; overflow-y:auto; padding:12px 14px 4px;
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.panel-label{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); font-weight:700; margin:10px 0 6px;
}
.panel-label:first-child{margin-top:0;}

.swatch-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--stone); flex:0 0 auto;
}
.swatch.selected{box-shadow:0 0 0 2px var(--ink);}

.item-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;
}
.item-card{
  background:var(--cream); border:1px solid var(--stone); border-radius:12px;
  padding:10px 6px; text-align:center; font-size:.72rem; font-weight:600; color:var(--ink);
}
.item-card .ic-emoji{display:block; font-size:1.4rem; margin-bottom:4px;}
.item-card:active{background:var(--stone);}

.btn-tour{
  margin:10px 14px 12px; align-self:stretch; width:calc(100% - 28px);
  font-size:.88rem; padding:12px;
}

/* ============ DESKTOP LAYOUT ============ */
@media (min-width:900px){
  #main-area{flex-direction:row;}

  #location-bar{
    flex:0 0 auto; flex-direction:row;
  }

  #viewport-wrap{order:2; flex:1 1 auto;}

  #design-panel{
    order:1;
    flex:0 0 300px; max-height:none; height:100%;
    border-top:none; border-right:1px solid var(--stone);
    display:flex; flex-direction:column;
  }
  #location-bar{
    order:0; width:100%;
  }
  #main-area{flex-wrap:wrap;}

  /* rebuild grid: location bar full width top, then sidebar + viewport */
  #main-area{
    display:grid;
    grid-template-columns:300px 1fr;
    grid-template-rows:auto 1fr;
  }
  #location-bar{grid-column:1 / span 2; grid-row:1;}
  #design-panel{grid-column:1; grid-row:2; border-right:1px solid var(--stone);}
  #viewport-wrap{grid-column:2; grid-row:2;}

  #panel-tabs{flex-wrap:wrap;}
  .btn-tour{position:sticky; bottom:0;}
}