:root{
  --bg-deep:#100e16;
  --bg-panel:#17151f;
  --bg-panel-2:#1e1b28;
  --bg-card:#1b1824;
  --line:#2c283a;
  --text-main:#e9e4f2;
  --text-dim:#9a92ae;
  --accent:#c9a876;
  --accent-dim:#8a7657;
  --rose:#b98a8a;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'EB Garamond', serif;
  background:var(--bg-deep);
  color:var(--text-main);
  height:100vh;
  overflow:hidden;
}

.app{ display:flex; height:100vh; }

/* ---------- LEFT CONTROL PANEL ---------- */
.controls{
  width:460px;
  min-width:460px;
  background:
    radial-gradient(circle at 20% 10%, rgba(201,168,118,0.05) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(185,138,138,0.04) 0, transparent 45%),
    var(--bg-panel);
  border-right:1px solid var(--line);
  overflow-y:auto;
  padding:13px 13px 36px 13px;
}
.controls::-webkit-scrollbar{width:8px;}
.controls::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px;}

.app-title{ font-family:'Playfair Display', serif; font-size:22px; letter-spacing:0.03em; margin:0 0 2px 0; }
.kofi-link{
  display:inline-block; font-size:12px; color:var(--accent); text-decoration:none;
  margin:0 0 11px 0; border-bottom:1px dotted var(--accent-dim);
}
.kofi-link:hover{ color:var(--rose); border-bottom-color:var(--rose); }
.app-sub{ font-size:13px; color:var(--text-dim); margin:0 0 11px 0; font-style:italic; }

.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:10px 10px 8px;
  margin-bottom:8px;
}

.card-title{
  font-family:'Playfair Display', serif;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--accent);
  margin:0 0 7px 0;
}

.card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 7px; }
.card-grid > .full{ grid-column:1/-1; }
.card-grid > .check-row{ grid-column:1/-1; margin-bottom:1px; }
.card-grid > .subblock{ grid-column:1/-1; }

label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:3px; letter-spacing:0.02em; }
.field{margin:0;}

select, textarea, input[type="text"], input[type="number"]{
  width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text-main);
  border-radius:2px;
  padding:5px 6px;
  font-family:inherit;
  font-size:14px;
  outline:none;
}
select:focus, textarea:focus, input:focus{ border-color:var(--accent-dim); }

textarea{
  min-height:280px;
  resize:vertical;
  white-space:pre;
  line-height:1.5;
  font-family:'Courier Prime', monospace;
  font-size:13px;
}

.row{display:flex; gap:6px;}
.row > .field{flex:1;}

.color-pair{ display:block; }
.clr-field{ width:100%; }
.clr-field button{ border-radius:2px !important; }
.clr-picker{ border-radius:2px !important; }
.clr-swatches button{ border-radius:2px !important; }
.hex-input{width:100%;}

.check-row{ display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none; }
.check-row input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.check-row label{ margin:0; color:var(--text-main); font-size:13px; cursor:pointer; }

.subblock{ display:none; border-left:2px solid var(--line); padding:1px 0 1px 7px; margin:1px 0 2px 2px; }
.subblock.open{ display:grid; grid-template-columns:1fr 1fr; gap:6px 7px; }
.subblock.open > .full{ grid-column:1/-1; }

.angle-wrap{display:flex; align-items:center; gap:6px;}
input[type="range"]{ flex:1; accent-color:var(--accent); }
.angle-val{ font-size:12px; color:var(--text-dim); width:38px; text-align:right; font-variant-numeric:tabular-nums; }

.radio-group{display:flex; gap:5px; flex-wrap:wrap;}
.radio-btn{
  flex:1 1 28%; text-align:center; padding:5px 0;
  border:1px solid var(--line); border-radius:2px;
  font-size:12px; color:var(--text-dim); cursor:pointer;
  background:var(--bg-panel-2); transition:all .12s ease;
}
.radio-btn.active{ border-color:var(--accent-dim); color:var(--accent); background:rgba(201,168,118,0.08); }

button.ghost{
  width:100%; padding:5px 0; border-radius:2px;
  border:1px solid var(--accent-dim); background:transparent; color:var(--accent);
  font-family:'EB Garamond', serif; font-size:13px; letter-spacing:0.04em;
  cursor:pointer; transition:all .12s ease; margin-top:1px;
}
button.ghost:hover{ background:rgba(201,168,118,0.1); }

.hint{font-size:11px; color:var(--text-dim); margin-top:5px; line-height:1.45;}
.hint code{ background:var(--bg-panel-2); padding:1px 4px; border-radius:2px; color:var(--rose); }

.preset-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.preset-btn{
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  cursor:pointer; background:var(--bg-panel-2); padding:0;
  transition:transform .12s ease, border-color .12s ease;
}
.preset-btn:hover{ transform:translateY(-2px); border-color:var(--accent-dim); }
.preset-swatch{ height:24px; width:100%; }
.preset-label{ display:block; font-size:8.5px; padding:2px 1px 3px; color:var(--text-dim); letter-spacing:0.01em; text-transform:uppercase; text-align:center; }

/* ---------- RIGHT RENDER PANE ---------- */
.stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background: radial-gradient(circle at 50% 0%, rgba(201,168,118,0.05), transparent 55%), var(--bg-deep);
  position:relative;
}
.canvas-wrap{
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  border-radius:2px; overflow:hidden; line-height:0;
}
#poemCanvas{ display:block; max-height:calc(100vh - 40px); max-width:94vw; height:auto; width:auto; }

.download-btn{
  position:fixed; top:18px; right:22px; z-index:50;
  padding:9px 20px; border-radius:2px;
  border:2px solid #1a1610;
  background:var(--accent); color:#1a1610;
  font-family:'Playfair Display', serif; font-size:14px; letter-spacing:0.03em;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 8px 24px -6px rgba(0,0,0,0.65);
}
.download-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px -6px rgba(201,168,118,0.55); }

/* ---------- MOBILE APP HEADER (hidden on desktop) ---------- */
.app-header{
  display:none; align-items:center; justify-content:center;
  padding:10px 14px; background:var(--bg-panel); border-bottom:1px solid var(--line);
  font-family:'Playfair Display', serif; font-size:17px; letter-spacing:0.02em;
  position:sticky; top:0; z-index:70;
}

/* ---------- RESPONSIVE / MOBILE LAYOUT ---------- */
/* Width alone misses some real phones (e.g. larger-screen Android devices can
   report a CSS width above 860px while still being unmistakably phone-shaped
   in portrait). Catching (orientation: portrait) with a higher width ceiling
   alongside the plain width check is more reliable than either alone. */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1024px){
  .app{ flex-direction:column; height:100vh; overflow:hidden; }
  .app-header{ display:flex; }
  .controls{
    order:2; width:100%; min-width:0; max-height:56vh;
    border-right:none; border-top:1px solid var(--line);
  }
  .controls .app-title, .controls .app-sub{ display:none; }
  .stage{ order:1; flex:0 0 auto; height:44vh; gap:8px; padding-top:6px; }
  #poemCanvas{ max-height:calc(44vh - 30px); max-width:92vw; }
  .download-btn{ top:auto; bottom:14px; right:14px; padding:8px 16px; font-size:13px; }

  /* Canonical desktop reference is ~2560x1440; canonical mobile is ~1080x1920,
     which typically carries higher effective density. Rather than detecting
     DPI directly (unreliable across devices), just nudge base sizes up a
     little here — enough to help readability/tappability, not enough to lose
     the compact feel. */
  label{ font-size:14px; }
  select, textarea, input[type="text"], input[type="number"]{ font-size:16px; }
  .card-title{ font-size:13.5px; }
  .hint{ font-size:13px; }
  button.ghost{ font-size:15px; }
  .radio-btn{ font-size:14px; }
  .check-row label{ font-size:15px; }
  .preset-label{ font-size:10.5px; }
}