/* Chronicle Loom mobile prototype v3 — mobile shell only. */
:root {
  --cl-bg: #08191d;
  --cl-surface: #10282c;
  --cl-surface-2: #17363a;
  --cl-border: #284447;
  --cl-ink: #f1e8de;
  --cl-muted: #b7c3c2;
  --cl-gold: #d8a73d;
  --cl-cyan: #53d7c8;
  --cl-coral: #ff6f6a;
}

.prototype-v3 {
  min-height: 100%;
  padding: 0 0 96px;
  color: var(--cl-ink);
  background:
    radial-gradient(circle at 70% -10%, rgba(27,90,91,.42), transparent 35%),
    linear-gradient(180deg, #08262a 0, var(--cl-bg) 44%, #061519 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.prototype-v3 * { box-sizing: border-box; }
.prototype-v3 h1,.prototype-v3 h2,.prototype-v3 h3,.prototype-v3 .serif {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--cl-ink);
}

.v3-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 88px;
  padding: 14px 10px 8px;
  border-bottom: 1px solid rgba(216,167,61,.34);
  background: rgba(8,25,29,.96);
  backdrop-filter: blur(18px);
}
.v3-topbar button,.v3-bottom button {
  appearance: none; border: 0; background: transparent; color: var(--cl-muted);
  display: grid; place-items: center; align-content: center; gap: 5px;
  min-width: 0; font: 700 11px/1 system-ui; letter-spacing: .08em; text-transform: uppercase;
}
.v3-topbar button.active,.v3-bottom button.active { color: var(--cl-gold); }
.v3-topbar i,.v3-bottom i { font-size: 21px; }

/* The taskbar is position:fixed at 72px tall, 8px above the safe area. Content
   must reserve that much room or its final rows sit behind the bar with no
   scroll range left to reveal them. */
.v3-content { padding: 22px 26px calc(72px + 8px + 18px + env(safe-area-inset-bottom, 0px)); }
.v3-eyebrow { color: #9ad9db; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.v3-title-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin: 4px 0 20px; }
.v3-title-row h1 { margin:0; font-size: 29px; line-height:1.05; font-weight:500; }
.v3-icon-button { width:42px; height:42px; border:1px solid var(--cl-border); border-radius:14px; color:var(--cl-gold); background:var(--cl-surface-2); }
.v3-section-title { margin: 24px 0 12px; font: 500 18px/1.1 Georgia,serif; color:var(--cl-ink); }
.v3-section-label { margin: 18px 0 8px; color:#aee0e1; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.v3-card,.v3-list,.v3-map,.v3-panel {
  border:1px solid var(--cl-border); border-radius:16px; background:rgba(16,40,44,.9);
}
.v3-list { overflow:hidden; }
.v3-row {
  width:100%; min-height:72px; padding:12px 14px; border:0; border-bottom:1px solid var(--cl-border);
  background:transparent; color:var(--cl-ink); display:grid; grid-template-columns:46px 1fr auto;
  align-items:center; gap:12px; text-align:left;
}
.v3-row:last-child { border-bottom:0; }
.v3-row-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--cl-gold); background:#1d4549; font-size:18px; }
.v3-row strong { display:block; font-size:14px; line-height:1.25; }
.v3-row small { display:block; margin-top:3px; color:#bcd0cf; font-size:10.5px; line-height:1.3; }
.v3-row .chev { color:#b9c7c5; }

.v3-primary,.v3-secondary {
  min-height:48px; border-radius:12px; padding:0 18px; font-weight:800;
}
.v3-primary { border:1px solid #eac052; color:#101d1e; background:linear-gradient(180deg,#f0c34d,#d9a62e); }
.v3-secondary { border:1px solid var(--cl-cyan); color:var(--cl-cyan); background:transparent; }
.v3-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin: 14px 0 20px; }

.v3-chapters { display:grid; gap:12px; }
.v3-chapter { overflow:hidden; border:1px solid var(--cl-border); border-radius:16px; background:var(--cl-surface); }
.v3-chapter-head { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:14px; }
.v3-roman { width:40px;height:40px;border:1px solid #8d8245;border-radius:9px;display:grid;place-items:center;color:var(--cl-gold);font-family:Georgia,serif; }
.v3-chapter-name { font:500 15px Georgia,serif; }
.v3-chapter-meta { color:#99d7d8;font-size:9px;letter-spacing:.1em;text-transform:uppercase; }
.v3-scene { min-height:44px;padding:10px 14px 10px 60px;border-top:1px solid var(--cl-border);display:flex;align-items:center;gap:10px; }
.v3-scene b { color:var(--cl-gold);font-size:9px; }
.v3-scene span { flex:1;font-size:13px; }
.v3-scene em { color:#b9d6d4;font-size:9px;font-style:normal; }
.v3-quick-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px; }

.v3-map { position:relative; height:338px; overflow:hidden; background-color:#0b2c30; background-image:linear-gradient(rgba(83,215,200,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(83,215,200,.08) 1px,transparent 1px);background-size:32px 32px; }
.v3-map::after { content:"";position:absolute;inset:70px 50px 58px;border:1px solid rgba(216,167,61,.35);border-radius:45% 48% 40% 52%;background:rgba(39,72,49,.28);transform:rotate(-4deg); }
.v3-pin { position:absolute;z-index:2;display:grid;place-items:center;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--cl-cyan);box-shadow:0 0 0 3px #10282c; }
.v3-pin::after { content:"";width:5px;height:5px;border-radius:50%;background:#08191d; }
.v3-pin.p1{left:48%;top:52%;background:var(--cl-gold)}.v3-pin.p2{left:27%;top:31%;background:var(--cl-coral)}.v3-pin.p3{left:68%;top:25%}.v3-pin.p4{left:61%;top:59%}.v3-pin.p5{left:55%;top:74%;background:var(--cl-gold)}
.v3-map-label{position:absolute;z-index:3;padding:4px 6px;border-radius:4px;background:#06191c;color:#fff;font-size:8px;}.v3-map-label.l1{left:37%;top:48%}.v3-map-label.l2{left:19%;top:24%}.v3-map-label.l3{left:61%;top:18%}.v3-map-label.l4{left:52%;top:53%}.v3-map-label.l5{left:44%;top:68%}
.v3-map-chips{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;justify-content:space-between}.v3-chip{padding:7px 11px;border-radius:999px;background:#16474b;color:#aef3ea;font-size:9px;}
.v3-selected { margin-top:12px;padding:16px; }
.v3-selected h3 { margin:8px 0;color:var(--cl-ink);font-size:18px; }.v3-selected p{margin:8px 0;color:#b9d5d4;font-size:12px;line-height:1.55}.v3-selected .tag{display:inline-block;padding:5px 10px;border-radius:999px;background:#145055;color:var(--cl-cyan);font-size:10px}

.v3-social-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 18px; }.v3-social-tabs button{height:36px;border:1px solid var(--cl-border);border-radius:999px;background:var(--cl-surface);color:var(--cl-ink);font-size:11px}.v3-social-tabs button:first-child{background:var(--cl-gold);color:#102022}
.v3-feed { display:grid;gap:12px; }.v3-feed-card{padding:15px}.v3-feed-head{display:flex;align-items:center;gap:10px}.v3-avatar{width:36px;height:36px;border:1px solid #7b7742;border-radius:50%;display:grid;place-items:center;color:var(--cl-gold);font-family:Georgia,serif}.v3-feed-card p{color:#c0d5d4;font-size:11px;line-height:1.45}.v3-highlight{padding:12px;border-radius:12px;background:#173d41;color:var(--cl-ink)}

.v3-profile-hero { text-align:center;padding:4px 0 16px;border-bottom:1px solid var(--cl-border); }.v3-profile-avatar{width:82px;height:82px;margin:auto;border:2px solid var(--cl-gold);border-radius:50%;display:grid;place-items:center;background:#59736b;font:32px Georgia,serif}.v3-profile-hero h2{margin:12px 0 2px;color:var(--cl-gold);font-size:22px;font-weight:500}.v3-profile-hero p{margin:0;color:#b9d9d7;font-size:11px}.v3-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}.v3-stat{border-right:1px solid var(--cl-border);text-align:center}.v3-stat:last-child{border:0}.v3-stat b{display:block;color:var(--cl-cyan);font:18px Georgia,serif}.v3-stat span{font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.v3-signout{width:100%;margin-top:12px;height:46px;border:1px solid var(--cl-coral);border-radius:12px;background:rgba(255,111,106,.08);color:var(--cl-coral)}

.v3-bottom { position:fixed;z-index:45;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));height:72px;border:1px solid var(--cl-border);border-radius:24px;background:rgba(8,25,29,.97);display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 -10px 30px rgba(0,0,0,.3); }
.v3-bottom button.active i { width:44px;height:38px;border-radius:14px;display:grid;place-items:center;background:var(--cl-cyan);color:#082024; }

/*
 * The legacy shell uses transformed, full-height screens as its slide router.
 * A transformed ancestor becomes the containing block for position:fixed,
 * which made the prototype taskbar scroll away with the screen. Prototype
 * screens keep their opacity/pointer-event state, but do not use the legacy
 * transform containing block; the taskbar is therefore fixed to the phone
 * viewport and remains visible while the content scrolls.
 */
body.prototype-v3-mode .screen.prototype-screen { transform:none !important; }
body.prototype-v3-mode #scrWriter { visibility:hidden !important; pointer-events:none !important; }

/* The original writer screen remains in the DOM for its handlers and bridge,
 * but it is never part of the prototype's rendered surface. */
body.prototype-v3-mode #scrWriter > * { visibility:hidden !important; }

/* The legacy feature snapshot is retained as an implementation bridge only.
 * It must never become a second visual layer over the v3 prototype. */
body.prototype-v3-mode #mobile-feature-view,
body.prototype-v3-mode #mobile-feature-view.is-open { display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* Official live panels injected into the feature surface. */
#mobile-feature-view { background:var(--cl-bg)!important; }
#mobile-feature-view .feature-header { background:linear-gradient(135deg,#063b3f,#115b5d)!important;border-bottom:1px solid rgba(216,167,61,.4)!important; }
#mobile-feature-view .feature-title { color:var(--cl-ink)!important;font-family:Georgia,serif!important; }
#mobile-feature-view .feature-content { padding:16px 14px 100px!important;background:linear-gradient(180deg,#08262a,var(--cl-bg))!important; }
#mobile-feature-view .feature-content .panel,#mobile-feature-view .feature-content .card,#mobile-feature-view .feature-content .workspace-section { border:1px solid var(--cl-border)!important;border-radius:16px!important;background:rgba(16,40,44,.96)!important;color:var(--cl-ink)!important;box-shadow:none!important; }
#mobile-feature-view input,#mobile-feature-view textarea,#mobile-feature-view select { width:100%!important;max-width:100%!important;border:1px solid var(--cl-border)!important;border-radius:12px!important;background:#071b20!important;color:var(--cl-ink)!important; }
#mobile-feature-view button { min-height:42px;border-radius:11px; }

@media (min-width: 700px) { .prototype-v3 .v3-content { max-width:560px;margin:auto; } }

/* Home follows the July 16 editorial prototype while keeping the shell mobile-only. */
.v3-home-screen {
  background: linear-gradient(180deg,#064044 0,#08282c 35%,#06191d 100%);
}
.v3-brand {
  position: relative;
  padding: 34px 26px 22px;
  border-bottom: 1px solid rgba(83,215,200,.16);
  background:
    radial-gradient(circle at 82% 12%,rgba(24,103,102,.45),transparent 35%),
    linear-gradient(135deg,#073b3f,#07474a 66%,#0a3438);
}
.v3-brand-lockup { display:flex;align-items:center;gap:17px;padding-right:148px; }
.v3-brand-lockup img { width:82px;height:82px;object-fit:cover;border-radius:13px; }
.v3-brand-lockup strong { display:block;color:var(--cl-ink);font:500 38px/.85 Georgia,serif;letter-spacing:-.035em; }
.v3-brand-actions { position:absolute;right:26px;top:57px;display:flex;gap:10px; }
.v3-brand-actions button {
  min-width:52px;height:52px;padding:0 15px;border:1px solid rgba(216,167,61,.75);border-radius:12px;
  color:var(--cl-ink);background:#0a252b;font-weight:700;font-size:13px;
}
.v3-brand-actions button:first-child { padding:0;width:52px; }
.v3-brand-actions i { color:var(--cl-gold);font-size:20px; }
.v3-brand p { max-width:440px;margin:18px 0 0;color:#d5dcda;font-size:13px;line-height:1.5; }
.v3-home-content { padding:24px 22px calc(72px + 8px + 18px + env(safe-area-inset-bottom, 0px)); }
.v3-home-new,.v3-home-login {
  width:100%;min-height:64px;border-radius:13px;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:15px;
}
.v3-home-new { border:1px solid #f3c252;color:#102022;background:linear-gradient(180deg,#f3bf3e,#dfa52e);box-shadow:0 10px 22px rgba(216,167,61,.12); }
.v3-home-login { margin-top:12px;border:1px solid var(--cl-cyan);color:var(--cl-cyan);background:rgba(4,31,35,.72); }
.v3-home-heading { display:flex;align-items:center;justify-content:space-between;margin:26px 1px 14px; }
.v3-home-heading h1 { margin:0;font-size:25px;font-weight:500; }
.v3-home-heading button { border:0;background:transparent;color:var(--cl-cyan);font-weight:700; }
.v3-world-carousel { display:flex;gap:12px;overflow-x:auto;padding:1px 1px 10px;scroll-snap-type:x mandatory;scrollbar-width:none; }
.v3-world-carousel::-webkit-scrollbar { display:none; }
.v3-world-card {
  flex:0 0 315px;min-height:226px;padding:14px;border:1px solid var(--cl-border);border-radius:14px;
  color:var(--cl-ink);background:linear-gradient(145deg,rgba(30,54,51,.98),rgba(8,31,34,.98));
  display:grid;grid-template-columns:84px 1fr;gap:14px;text-align:left;scroll-snap-align:start;
}
.v3-world-card.featured { border-color:var(--cl-gold); }
.v3-cover { width:84px;height:148px;border:1px solid rgba(216,167,61,.7);border-radius:10px;background-size:cover;background-position:center; }
.v3-cover.valmoria { background:linear-gradient(180deg,rgba(6,40,44,.15),rgba(6,25,29,.55)),url('assets/logo.webp') center/cover; }
.v3-cover.drakoris { background:linear-gradient(150deg,#41505e,#0d2630 55%,#10171f); }
.v3-world-copy { min-width:0;display:flex;flex-direction:column; }
.v3-world-copy>small { align-self:flex-start;padding:4px 9px;border:1px solid var(--cl-gold);border-radius:999px;color:var(--cl-gold);font-size:9px;letter-spacing:.09em;text-transform:uppercase; }
.v3-world-copy>strong { margin-top:8px;font:500 22px Georgia,serif; }
.v3-world-copy>em { color:var(--cl-muted);font-size:11px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.v3-world-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto; }
.v3-world-metrics b { text-align:center;font:700 17px system-ui; }
.v3-world-metrics b i { display:block;margin-bottom:4px;color:#ddd5c4;font-size:16px; }
.v3-world-metrics small { display:block;color:var(--cl-muted);font-size:8px;font-weight:500;text-transform:uppercase; }
.v3-progress { height:4px;margin-top:12px;border-radius:999px;background:#234347;overflow:hidden; }
.v3-progress i { display:block;height:100%;background:var(--cl-cyan); }
.v3-goal { display:flex;justify-content:space-between;margin-top:8px;color:var(--cl-muted);font-size:10px; }
.v3-goal b { color:var(--cl-cyan); }
.v3-home-stats { display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;padding:16px 5px;border:1px solid var(--cl-border);border-radius:14px;background:rgba(16,40,44,.9); }
.v3-home-stats>div { display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--cl-border); }
.v3-home-stats>div:last-child { border:0; }
.v3-home-stats i { color:#ddd5c4;font-size:20px; }.v3-home-stats b{margin-top:5px;font-size:20px}.v3-home-stats span{color:var(--cl-muted);font-size:9px;text-transform:uppercase}.v3-home-stats small{display:block;text-align:center;text-transform:none}
.v3-creative { margin-top:14px;padding:13px 16px;border:1px solid var(--cl-border);border-radius:14px;background:rgba(16,40,44,.92); }
.v3-creative header { display:flex;align-items:center;gap:11px;padding-bottom:10px;border-bottom:1px solid var(--cl-border); }
.v3-creative header>span { width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--cl-cyan);border-radius:10px;color:var(--cl-gold); }
.v3-creative h2,.v3-creative p { margin:0; }.v3-creative h2{font-size:18px}.v3-creative p{color:var(--cl-muted);font-size:10px}
.v3-creative>button { width:100%;min-height:53px;padding:8px 2px;border:0;border-bottom:1px solid var(--cl-border);background:transparent;color:var(--cl-ink);display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;text-align:left; }
.v3-creative>button:last-child { border:0; }.v3-creative>button>i:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#174146;color:#ddd5c4}.v3-creative b,.v3-creative small{display:block}.v3-creative b{font-size:12px}.v3-creative small{margin-top:3px;color:var(--cl-muted);font-size:9px}

@media (max-width: 410px) {
  .v3-brand { padding-left:20px;padding-right:20px; }
  .v3-brand-lockup { padding-right:122px;gap:12px; }
  .v3-brand-lockup img { width:62px;height:62px; }
  .v3-brand-lockup strong { font-size:31px; }
  .v3-brand-actions { right:20px;top:46px; }
  .v3-brand-actions button { min-width:45px;height:45px;padding:0 10px;font-size:0; }
  .v3-brand-actions button:first-child { width:45px; }
  .v3-brand-actions button:last-child i { font-size:20px; }
  .v3-home-content { padding-left:20px;padding-right:20px; }
  .v3-world-card { flex-basis:300px; }
}