/* -- JVDS Site Nav -- */

@import url('/assets/fonts/fonts.css');

:root {
  --sea: #0a1628;
  --sea-mid: #132240;
  --sea-light: #1a3355;
  --gold: #d4a843;
  --gold-bright: #f0c850;
  --gold-dim: rgba(212,168,67,0.15);
  --parchment: #e8d5b0;
  --parchment-dim: #b8a580;
  --rust: #8b4513;
  --crimson: #8b1a1a;
  --wood-light: #a0784c;
  --plank: #2a1f14;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--sea); color:var(--parchment); font-family:'IM Fell English SC',serif; overflow:hidden; height:100vh; }

#app {
  display:grid;
  grid-template-columns:360px 1fr;
  grid-template-rows:56px auto 1fr;
  height:100vh;
}
.lumo-builder-bar{grid-column:1/-1;grid-row:2}
#sidebar{grid-column:1;grid-row:3}
#viewport{grid-column:2;grid-row:3}

/* --- HEADER --- */
header {
  grid-column:1/-1;
  background:linear-gradient(180deg,var(--sea-mid),var(--sea));
  border-bottom:2px solid var(--gold);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
header h1 {
  font-family:'Pirata One',cursive;
  font-size:22px; color:var(--gold);
  text-shadow:0 0 20px rgba(212,168,67,0.25);
  letter-spacing:2px;
}
.hdr-btns { display:flex; gap:6px; flex-wrap:wrap; }
.hdr-btns button {
  background:rgba(212,168,67,0.08);
  border:1px solid var(--gold);
  color:var(--gold); padding:5px 13px;
  font-family:'IM Fell English SC',serif;
  font-size:11px; cursor:pointer;
  transition:all .25s; letter-spacing:1px; border-radius:3px;
}
.hdr-btns button:hover { background:var(--gold); color:var(--sea); }

/* --- SIDEBAR --- */
#sidebar {
  background:linear-gradient(160deg,var(--sea-mid),var(--sea));
  border-right:1px solid rgba(212,168,67,0.15);
  display:flex; flex-direction:column; overflow:hidden;
}
.prog { padding:12px 14px 8px; border-bottom:1px solid rgba(212,168,67,0.12); }
.prog-label { font-size:10px; color:var(--gold); letter-spacing:2px; text-transform:uppercase; }
.prog-bar { width:100%; height:5px; background:rgba(212,168,67,0.1); border-radius:3px; margin-top:6px; }
.prog-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:3px; transition:width .4s; }
.prog-count { font-family:'Courier Prime',monospace; font-size:10px; color:var(--parchment-dim); margin-top:4px; }

.step-list { flex:1; overflow-y:auto; padding:6px; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.step-list::-webkit-scrollbar { width:4px; }
.step-list::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }

.si { padding:8px 10px; margin-bottom:3px; border-radius:5px; cursor:pointer; display:flex; align-items:center; gap:9px; border:1px solid transparent; transition:all .25s; }
.si:hover { background:rgba(212,168,67,0.05); }
.si.active { background:rgba(212,168,67,0.1); border-color:var(--gold); }
.si.done { opacity:.6; }
.si.done .sn { background:var(--gold); color:var(--sea); }
.sn { width:24px; height:24px; border-radius:50%; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Courier Prime',monospace; font-size:10px; flex-shrink:0; color:var(--gold); transition:all .25s; }
.sl { font-size:12px; color:var(--parchment); line-height:1.25; }
.si.active .sl { color:var(--gold-bright); }

/* Controls */
.cpanel { padding:12px; border-top:1px solid rgba(212,168,67,0.12); background:rgba(0,0,0,0.12); overflow-y:auto; max-height:45vh; }
.cpanel::-webkit-scrollbar { width:4px; }
.cpanel::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }
.ct { font-size:12px; color:var(--gold); margin-bottom:8px; letter-spacing:1px; }
.cg { margin-bottom:10px; }
.cg label { display:block; font-size:10px; color:var(--parchment-dim); margin-bottom:3px; letter-spacing:1px; }
.cg input[type="range"] { width:100%; -webkit-appearance:none; height:3px; background:rgba(212,168,67,0.2); border-radius:2px; outline:none; }
.cg input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; background:var(--gold); border-radius:50%; cursor:pointer; }
.cg .rv { font-family:'Courier Prime',monospace; font-size:10px; color:var(--gold-bright); float:right; margin-top:-14px; }
.cg select { width:100%; padding:5px 7px; background:rgba(0,0,0,0.3); border:1px solid rgba(212,168,67,0.25); color:var(--parchment); font-family:'IM Fell English SC',serif; font-size:11px; border-radius:3px; outline:none; }
.cg select option { background:var(--sea); }
input[type="color"] { width:100%; height:28px; border:1px solid rgba(212,168,67,0.25); background:transparent; cursor:pointer; border-radius:3px; }
.cg input[type="checkbox"] { accent-color:var(--gold); }

.snav { display:flex; gap:6px; padding:10px 12px; border-top:1px solid rgba(212,168,67,0.12); }
.snav button { flex:1; padding:7px; font-family:'IM Fell English SC',serif; font-size:12px; cursor:pointer; border-radius:3px; transition:all .25s; letter-spacing:1px; }
.bp { background:transparent; border:1px solid var(--gold); color:var(--gold); }
.bn { background:var(--gold); border:1px solid var(--gold); color:var(--sea); font-weight:700; }
.bp:hover { background:rgba(212,168,67,0.12); }
.bn:hover { background:var(--gold-bright); }
.bp:disabled,.bn:disabled { opacity:.3; cursor:default; }

/* --- VIEWPORT --- */
#viewport { position:relative; background:radial-gradient(ellipse at 50% 60%,#132a48 0%,var(--sea) 70%); overflow:hidden; }
#viewport canvas { display:block; }
.toast { position:absolute; top:14px; left:50%; transform:translateX(-50%); background:rgba(10,22,40,0.92); border:1px solid var(--gold); padding:8px 22px; font-family:'Pirata One',cursive; font-size:14px; color:var(--gold-bright); border-radius:5px; pointer-events:none; opacity:0; transition:opacity .35s; z-index:10; white-space:nowrap; }
.toast.show { opacity:1; }
.dims { position:absolute; top:12px; right:12px; background:rgba(10,22,40,0.85); border:1px solid rgba(212,168,67,0.25); border-radius:5px; padding:7px 12px; font-family:'Courier Prime',monospace; font-size:10px; color:var(--parchment-dim); z-index:5; }
.dims span { color:var(--gold-bright); }
.vhint { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:10px; color:rgba(212,168,67,0.4); letter-spacing:2px; pointer-events:none; animation:fadeH 4s ease infinite; }
@keyframes fadeH { 0%,100%{opacity:.25} 50%{opacity:.6} }

/* --- MODAL --- */
.mo { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; align-items:center; justify-content:center; }
.mo.open { display:flex; }
.md { background:linear-gradient(145deg,var(--sea-mid),var(--sea)); border:1px solid var(--gold); border-radius:8px; padding:24px; width:380px; max-width:90vw; }
.md h2 { font-family:'Pirata One',cursive; font-size:18px; color:var(--gold); margin-bottom:14px; }
.md input[type="text"] { width:100%; padding:7px 10px; background:rgba(0,0,0,0.3); border:1px solid rgba(212,168,67,0.25); color:var(--parchment); font-family:'IM Fell English SC',serif; font-size:13px; border-radius:3px; outline:none; margin-bottom:12px; }
.saves-list { max-height:160px; overflow-y:auto; margin-bottom:12px; }
.se { display:flex; justify-content:space-between; align-items:center; padding:7px 8px; border-bottom:1px solid rgba(212,168,67,0.08); cursor:pointer; transition:background .2s; }
.se:hover { background:rgba(212,168,67,0.06); }
.se .sname { font-size:12px; color:var(--parchment); }
.se .sdate { font-family:'Courier Prime',monospace; font-size:9px; color:var(--parchment-dim); }
.se .dbtn { background:none; border:none; color:var(--crimson); cursor:pointer; font-size:13px; padding:2px 5px; }
.mb { display:flex; gap:6px; justify-content:flex-end; }
.mb button { padding:6px 16px; font-family:'IM Fell English SC',serif; font-size:12px; cursor:pointer; border-radius:3px; transition:all .25s; }
.mbs { background:var(--gold); border:1px solid var(--gold); color:var(--sea); }
.mbc { background:transparent; border:1px solid rgba(212,168,67,0.35); color:var(--parchment-dim); }

/* Water plane shimmer */
@keyframes waterShimmer {
  0%{opacity:.12} 50%{opacity:.22} 100%{opacity:.12}
}

/* Stats overlay */
.ship-stats{position:absolute;top:12px;left:12px;background:rgba(10,22,40,0.88);border:1px solid rgba(212,168,67,0.25);border-radius:5px;padding:7px 11px;z-index:5;font-family:'Courier Prime',monospace;font-size:10px;color:var(--parchment-dim);min-width:140px}
.ship-stats .stat-title{font-size:9px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;border-bottom:1px solid rgba(212,168,67,0.15);padding-bottom:3px}
.ship-stats .stat-row{display:flex;align-items:center;gap:5px;margin:3px 0}
.ship-stats .stat-lbl{width:52px;flex-shrink:0;font-size:9px}
.ship-stats .stat-track{flex:1;height:4px;background:rgba(212,168,67,0.1);border-radius:2px;overflow:hidden}
.ship-stats .stat-fill{height:100%;border-radius:2px;transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.ship-stats .stat-val{min-width:18px;text-align:right;color:var(--gold-bright);font-size:9px}

/* --- MOBILE --- */
@media (max-width: 860px) {
  body { overflow:auto; height:auto; min-height:100vh; }
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 100vh;
  }
  header {
    grid-column: 1;
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
    height: auto;
  }
  header h1 {
    font-size: 15px;
    letter-spacing: 1.5px;
    flex: 1 1 100%;
    text-align: center;
  }
  .hdr-btns {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 6px;
  }
  .hdr-btns button {
    font-size: 11px;
    padding: 8px 10px;
    flex: 1 1 auto;
    min-width: 70px;
  }
  #viewport {
    order: 1;
    height: 55vh;
    min-height: 320px;
  }
  #sidebar {
    order: 2;
    border-right: none;
    border-top: 1px solid rgba(212,168,67,0.2);
    max-height: none;
    overflow: visible;
  }
  .step-list { max-height: none; overflow-y: visible; }
  .cpanel { padding: 14px; max-height: none; overflow-y: visible; }
  .snav {
    position: sticky;
    bottom: 0;
    background: var(--sea);
    padding: 10px;
    border-top: 1px solid rgba(212,168,67,0.2);
  }
  .snav button { font-size: 13px; padding: 12px 8px; }
  .vhint { font-size: 9px; }
  .dims { font-size: 9px; padding: 5px 9px; }
  .md { width: 92vw; max-width: 92vw; max-height: 85vh; overflow-y: auto; }
}
@media (max-width: 480px) {
  header h1 { font-size: 13px; }
  .hdr-btns button { font-size: 10px; padding: 7px 6px; }
  #viewport { height: 50vh; min-height: 280px; }
}

/* -- MOBILE RESPONSIVE PATCH ---------------------------- */
@media(max-width:480px){
  #viewport canvas{width:100% !important;height:100% !important;}
  #sidebar{font-size:.82rem;}
  .step-list{font-size:.8rem;}
}
/* ------------------------------------------------------- */


/* -- SITE NAV BAR ------------------------------------------ */
@media(max-width:1024px){.jvds-nav-links{display:none!important;}.jvds-nav-toggle{display:block!important;}}
@media(min-width:1025px){.jvds-mobile-nav{display:none!important;}}
/* ---------------------------------------------------------- */

/* -- 3D BUILDER MOBILE PATCH ------------------------------- */
@media(max-width:480px){
  /* Sliders: bigger touch targets */
  input[type=range]{height:28px;cursor:pointer;}
  /* Labels and values */
  .ctrl-label,.control-label,.prop-label,.clabel{font-size:.72rem;}
  .ctrl-val,.control-value,.prop-val,.cval{font-size:.72rem;min-width:38px;}
  /* Section headers */
  .section-title,.ctrl-section-title,.group-title{font-size:.68rem;padding:6px 10px;}
  /* Step nav buttons */
  .step-nav button,.snav button,.nav-btn{padding:12px 8px;font-size:.78rem;flex:1;}
  /* Step list items */
  .step-item,.step-li{padding:8px 10px;font-size:.75rem;}
  /* Export/save buttons */
  .export-btn,.save-btn,.hb button{padding:8px 10px;font-size:.7rem;}
  /* Progress bar */
  .prog-label,.progress-label{font-size:.6rem;}
  /* Viewport height adjustment */
  #viewport{min-height:280px !important;height:50vw !important;max-height:400px !important;}
}
@media(max-width:360px){
  #viewport{min-height:240px !important;height:45vw !important;}
  input[type=range]{height:32px;}
}
/* ----------------------------------------------------------- */


/* -- SITE FOOTER -- */
.jv-site-footer{background:rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.1);padding:14px;text-align:center;font-size:.72rem;}
.jv-site-footer a{color:rgba(255,255,255,.45);text-decoration:none;margin:0 8px;transition:color .15s;}
.jv-site-footer a:hover{color:rgba(255,255,255,.85);}
.pcard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(6px)}
.pcard-overlay.show{display:flex}
.pcard-box{background:linear-gradient(145deg,var(--sea-mid),var(--sea));border:1px solid var(--gold);border-radius:16px;padding:20px;max-width:380px;width:90%;box-shadow:0 0 60px rgba(212,168,67,.15)}
.pcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pcard-title{font-family:'Pirata One',cursive;font-size:1rem;color:var(--gold)}
.pcard-close{background:none;border:none;color:var(--parchment-dim);font-size:1.1rem;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s}
.pcard-close:hover{color:#fff}
#pcardImg{display:block;width:100%;border-radius:8px;margin-bottom:10px;border:1px solid rgba(212,168,67,.2)}
.pcard-dl{display:block;width:100%;padding:9px;background:var(--gold);color:var(--sea);border:none;border-radius:8px;font-family:'Pirata One',cursive;font-size:.95rem;cursor:pointer;transition:filter .15s}
.pcard-dl:hover{filter:brightness(1.12)}
.preset-row{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.preset-btn{background:rgba(212,168,67,.08);border:1px solid rgba(212,168,67,.25);color:var(--gold);font-family:'IM Fell English SC',serif;font-size:10px;padding:4px 8px;border-radius:3px;cursor:pointer;transition:all .15s;letter-spacing:.5px}
.preset-btn:hover{background:var(--gold);color:var(--sea)}