/* ================= The Diamond Empire ================= */
.theme-empire { --silver: #d6dee4; --deep: #00070c; }
.theme-empire .eyebrow { color: var(--teal); }
.crown { width: 64px; height: 40px; color: var(--silver); margin: 0 auto 10px; display: block; filter: drop-shadow(0 0 10px rgba(214, 222, 228, 0.7)); }
.site-footer { padding-bottom: 96px; }

/* ---------- Map ---------- */
.map-wrap {
  position: relative; margin-top: 30px; height: clamp(420px, 60vw, 620px); border-radius: 28px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, #06303a 0%, #010a10 60%, #000 100%); border: 1px solid rgba(79, 216, 230, 0.25);
}
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.map-tip {
  position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, calc(-100% - 16px)); width: max-content; max-width: 240px;
  padding: 10px 14px; border-radius: 12px; background: rgba(0, 10, 16, 0.92); border: 1px solid var(--teal); box-shadow: 0 0 30px rgba(79,216,230,0.35);
}
.map-tip b { display: block; font-family: 'Cinzel', serif; color: var(--teal); }
.map-tip span { font-size: 13px; color: var(--ink-soft); }
.map-legend { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 14px 30px; background: linear-gradient(rgba(0,0,0,0.85), transparent); }
.map-legend button {
  padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(79,216,230,0.35); background: rgba(0,10,16,0.7); cursor: pointer; font-size: 13px;
  font-family: 'Cinzel', serif; transition: 0.2s;
}
.map-legend button:hover, .map-legend button.hot { background: var(--teal); color: #000; }

/* ---------- Throne room ---------- */
.throne { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .throne { grid-template-columns: 1fr; } }
.decree {
  position: relative; padding: 34px; border-radius: 18px;
  background: linear-gradient(160deg, #0c1a1f, #050b0e); border: 1px solid rgba(214, 222, 228,0.45);
  box-shadow: inset 0 0 0 6px rgba(214, 222, 228,0.06), 0 30px 60px rgba(0,0,0,0.5);
}
.decree h2 { font-family: 'Cinzel', serif; color: var(--silver); }
.decree-text { font-size: 18px; color: var(--ink-soft); }
.signature { font-size: 34px; color: var(--silver); margin: 20px 0 0; }
.seal {
  position: absolute; right: 26px; bottom: 22px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Cinzel', serif; font-weight: 900; color: #1e2428; background: radial-gradient(circle at 40% 35%, #f4f7f9, #8e9aa2);
  box-shadow: 0 0 0 4px rgba(184,146,58,0.4), 0 8px 20px rgba(0,0,0,0.5); transform: rotate(-12deg);
}
.crests { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.crest { perspective: 900px; border: 0; background: none; padding: 0; cursor: pointer; height: 200px; color: inherit; }
.crest-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.crest.flipped .crest-inner { transform: rotateY(180deg); }
.crest-face {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; text-align: center; backface-visibility: hidden;
  clip-path: polygon(50% 0, 100% 12%, 100% 58%, 50% 100%, 0 58%, 0 12%);
  background: linear-gradient(160deg, #0f3b45, #041419); border: 1px solid var(--teal);
}
.crest-face.back { transform: rotateY(180deg); background: linear-gradient(160deg, #2a3034, #0e1113); font-size: 14px; color: #e9eef1; padding: 24px 26px 40px; }
.crest-face .emblem { font-size: 34px; }
.crest-face b { font-family: 'Cinzel', serif; font-size: 18px; color: var(--silver); }

/* ---------- Palace (website embed) ---------- */
.palace { margin-top: 30px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(79,216,230,0.3); background: #0b1418; box-shadow: 0 30px 70px rgba(0,0,0,0.6); }
.palace-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #101c21; border-bottom: 1px solid rgba(255,255,255,0.08); }
.palace-dots { display: flex; gap: 6px; }
.palace-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.palace-dots i:nth-child(2) { background: #febc2e; } .palace-dots i:nth-child(3) { background: #28c840; }
.palace-url { flex: 1; min-width: 0; padding: 7px 14px; border-radius: 999px; background: #050a0c; font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palace-url::before { content: '🔒 '; }
.device-toggle { display: flex; gap: 4px; }
.device-toggle button { border: 1px solid transparent; background: none; border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: 15px; }
.device-toggle button[aria-checked='true'] { border-color: var(--teal); background: rgba(79,216,230,0.12); }
.palace-open { padding: 7px 12px; font-size: 13px; }
.palace-rooms { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; background: #0b1418; }
.palace-rooms button {
  flex: none; padding: 7px 14px; border-radius: 10px 10px 0 0; border: 1px solid rgba(79,216,230,0.2); border-bottom: 0; background: #07181d; cursor: pointer; font-family: 'Cinzel', serif; font-size: 13px;
}
.palace-rooms button[aria-selected='true'] { background: var(--teal); color: #000; }
.palace-frame { background: repeating-linear-gradient(45deg, #071015 0 12px, #091419 12px 24px); padding: 0; display: flex; justify-content: center; }
.palace-viewport { width: 100%; transition: width 0.5s cubic-bezier(.2,.8,.2,1); background: #000; }
.palace-viewport iframe { display: block; width: 100%; height: min(78svh, 760px); border: 0; background: #000; }
@media (max-width: 700px) { .device-toggle { display: none; } }

/* ---------- Guild (services) ---------- */
.guild { margin-top: 30px; }
.guild-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.guild-tabs button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(79,216,230,0.3);
  background: rgba(0,10,16,0.6); cursor: pointer; font-family: 'Cinzel', serif; font-size: 14px;
}
.guild-tabs button[aria-selected='true'] { background: var(--teal); color: #000; }
.guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.service {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.85), rgba(2, 10, 14, 0.9)); border: 1px solid rgba(79,216,230,0.25);
  animation: storein 0.45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes storein { from { opacity: 0; transform: translateY(20px); } }
.service h3 { font-family: 'Cinzel', serif; font-size: 20px; margin: 0; }
.service .price { font-size: 26px; font-weight: 700; color: var(--silver); }
.service .price small { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
.tiers { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.5); align-self: flex-start; }
.tiers button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.tiers button[aria-pressed='true'] { background: var(--silver); color: #000; }
.service ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; max-height: 180px; overflow: auto; }
.service .more { font-size: 13px; color: var(--teal); background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.service .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.service .actions .btn { padding: 9px 14px; font-size: 14px; }
.service.in-quote { border-color: var(--silver); box-shadow: 0 0 30px rgba(214, 222, 228,0.25); }
.quote-bar {
  position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 45; width: min(640px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px;
  background: rgba(10, 13, 15, 0.92); border: 1px solid var(--silver); box-shadow: 0 10px 40px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.quote-bar #quote-range { color: var(--silver); }
.quote-actions { display: flex; gap: 8px; }
.quote-actions .btn { padding: 8px 14px; font-size: 14px; }

/* ---------- Market (boutiques) ---------- */
.market { margin-top: 30px; }
.boutique-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 800px) { .boutique-row { grid-template-columns: repeat(2, 1fr); } }
.b-door {
  position: relative; height: 170px; border: 0; cursor: pointer; padding: 0 12px 16px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center;
  border-radius: 90px 90px 12px 12px; background: linear-gradient(#0e2a31, #03090c); border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
  overflow: hidden; transition: transform 0.3s, box-shadow 0.3s;
}
.b-door::before { /* arched window glow */
  content: ''; position: absolute; top: 14px; left: 18%; right: 18%; height: 58%; border-radius: 80px 80px 6px 6px;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--a) 55%, transparent), transparent 70%); opacity: 0.45; transition: opacity 0.3s;
  border: 1px solid color-mix(in srgb, var(--a) 40%, transparent);
}
.b-door:hover, .b-door[aria-selected='true'] { transform: translateY(-4px); box-shadow: 0 0 40px color-mix(in srgb, var(--a) 40%, transparent); }
.b-door:hover::before, .b-door[aria-selected='true']::before { opacity: 1; }
.b-door .kind { position: relative; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a); }
.b-door .name { position: relative; font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px; }
.boutique { border-radius: 22px; padding: 26px; background: rgba(0, 10, 14, 0.75); border: 1px solid color-mix(in srgb, var(--a, #4fd8e6) 35%, transparent); min-height: 400px; }
.boutique-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.boutique-head h3 { font-family: 'Cinzel', serif; font-size: 30px; margin: 0 0 6px; color: var(--a); }
.boutique-head p { margin: 0; color: var(--ink-soft); max-width: 560px; }
.boutique-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.boutique-tools input { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); background: #000; color: #fff; font: inherit; font-size: 14px; width: 220px; }
.boutique-tools .btn { padding: 9px 14px; font-size: 14px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.product {
  position: relative; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 8px;
  animation: storein 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.product .case {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 30px rgba(0,0,0,0.45); transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s;
}
.product .case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s; }
.product .case img.alt { opacity: 0; }
.product:hover .case { transform: translateY(-6px) rotateX(4deg); box-shadow: 0 26px 40px rgba(0,0,0,0.55), 0 0 0 2px var(--a); }
.product:hover .case img.alt { opacity: 1; }
.product .pedestal { height: 10px; margin: -4px 12px 0; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--a) 60%, transparent), transparent 70%); }
.product .t { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product .p { font-weight: 700; color: var(--a); }
.product .p s { color: var(--ink-soft); font-weight: 400; margin-left: 6px; font-size: 13px; }
.product .tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--a); color: #000; }
.products-empty, .products-loading { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--ink-soft); }
.shimmer { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(100deg, #0a1a1f 30%, #12303a 50%, #0a1a1f 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -100% 0; } }
.load-more { display: flex; justify-content: center; margin-top: 22px; }

.quickview { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 760px) { .quickview { grid-template-columns: 1fr; } }
.qv-main { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; }
.qv-main img { width: 100%; height: 100%; object-fit: contain; }
.qv-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.qv-thumbs button { flex: none; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: #fff; }
.qv-thumbs button.on { border-color: var(--teal); }
.qv-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qv-info h3 { font-family: 'Cinzel', serif; font-size: 24px; margin: 0 0 8px; }
.qv-price { font-size: 26px; font-weight: 700; color: var(--silver); margin-bottom: 14px; }
.qv-opt { margin-bottom: 12px; }
.qv-opt p { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.qv-opt .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qv-opt .chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: none; cursor: pointer; font-size: 13px; }
.qv-opt .chips button[aria-pressed='true'] { background: var(--teal); color: #000; border-color: var(--teal); }
.qv-opt .chips button:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.qv-desc { font-size: 14px; color: var(--ink-soft); max-height: 180px; overflow: auto; margin: 12px 0; }

/* Customs atelier */
.atelier { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; margin-bottom: 26px; padding: 22px; border-radius: 18px; background: rgba(214, 222, 228,0.06); border: 1px dashed rgba(214, 222, 228,0.5); }
@media (max-width: 800px) { .atelier { grid-template-columns: 1fr; } }
.atelier-stage { position: relative; aspect-ratio: 1; max-height: 420px; margin: 0 auto; width: 100%; max-width: 420px; border-radius: 16px; overflow: hidden; background: #fff; }
.atelier-stage img { width: 100%; height: 100%; object-fit: contain; }
.atelier-text {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 60%; text-align: center; pointer-events: none;
  font-size: clamp(16px, 4vw, 30px); line-height: 1.1; font-weight: 700; word-break: break-word; text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.atelier-controls { display: flex; flex-direction: column; gap: 14px; }
.atelier-controls label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: grid; gap: 6px; }
.atelier-controls input[type='text'], .atelier-controls select { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: #000; color: #fff; font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); cursor: pointer; }
.swatches button[aria-pressed='true'] { outline: 2px solid var(--silver); outline-offset: 2px; }
.atelier-picks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.atelier-picks button { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #fff; cursor: pointer; }
.atelier-picks button[aria-pressed='true'] { border-color: var(--silver); }
.atelier-picks img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Innovation Quarter (apps) ---------- */
.quarter { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 30px; }
@media (max-width: 860px) { .quarter { grid-template-columns: 1fr; justify-items: center; } }
.phone {
  position: relative; width: 320px; max-width: 100%; height: 640px; border-radius: 46px; padding: 14px; background: #0a0a0c;
  box-shadow: 0 0 0 2px #2c2c33, 0 0 0 9px #111, 0 40px 80px rgba(0,0,0,0.7), 0 0 80px color-mix(in srgb, var(--app, #4fd8e6) 30%, transparent);
  display: flex; flex-direction: column; transition: box-shadow 0.5s;
}
.phone-notch { position: absolute; top: 18px; left: 50%; width: 100px; height: 26px; margin-left: -50px; border-radius: 20px; background: #000; z-index: 3; }
.phone-app { position: relative; flex: 1; border-radius: 34px 34px 16px 16px; overflow: hidden auto; padding: 54px 18px 18px; background: linear-gradient(170deg, color-mix(in srgb, var(--app, #4fd8e6) 22%, #06080a), #030405 65%); scrollbar-width: none; }
.phone-app.launch { animation: launch 0.45s cubic-bezier(.2,.8,.2,1); }
@keyframes launch { from { transform: scale(0.4); opacity: 0; border-radius: 40px; } }
.phone-dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px 8px 4px; }
.app-icon {
  aspect-ratio: 1; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 22px; position: relative;
  background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); box-shadow: 0 6px 14px rgba(0,0,0,0.5); transition: transform 0.2s;
}
.app-icon:hover { transform: translateY(-4px) scale(1.06); }
.app-icon[aria-selected='true'] { box-shadow: 0 0 0 2px #fff, 0 0 20px var(--c); }
.app-icon .soon { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #dfe6ea; border: 2px solid #0a0a0c; }
.app-title { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; margin: 0; }
.app-tag { font-size: 13px; color: var(--app); margin: 2px 0 16px; }
.app-card { padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; font-size: 14px; }
.app-card b { display: block; margin-bottom: 2px; }
.app-btn { display: block; width: 100%; padding: 12px; border-radius: 12px; border: 0; background: var(--app); color: #000; font-weight: 700; cursor: pointer; margin: 8px 0; font-size: 15px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { text-align: center; padding: 12px 4px; border-radius: 12px; background: rgba(255,255,255,0.06); }
.stat b { display: block; font-size: 24px; color: var(--app); font-family: 'Cinzel', serif; }
.stat span { font-size: 11px; color: var(--ink-soft); }
.seg { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.seg button { flex: 1; padding: 7px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: none; cursor: pointer; font-size: 12px; }
.seg button[aria-pressed='true'] { background: var(--app); color: #000; border-color: var(--app); }
.ring-wrap { display: grid; place-items: center; margin: 10px 0; }
.ring-wrap svg { width: 150px; height: 150px; }
.ring-wrap circle { fill: none; stroke-width: 12; }
.gem-counter { text-align: center; margin: 10px 0 14px; }
.gem-counter button { font-size: 64px; border: 0; background: none; cursor: pointer; transition: transform 0.12s; filter: drop-shadow(0 0 20px var(--app)); }
.gem-counter button:active { transform: scale(0.85) rotate(-10deg); }
.gem-counter b { display: block; font-size: 28px; font-family: 'Cinzel', serif; }
.chip-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-pick button { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: none; cursor: pointer; font-size: 12px; }
.chip-pick button[aria-pressed='true'] { background: var(--app); color: #000; }
.match { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,0.06); margin-bottom: 8px; text-decoration: none; font-size: 13px; }
.match img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.match .pct { margin-left: auto; font-weight: 700; color: var(--app); }
.steps { display: flex; gap: 6px; margin-bottom: 10px; }
.steps button { flex: 1; padding: 8px 2px; border-radius: 10px; border: 0; background: rgba(255,255,255,0.08); cursor: pointer; font-size: 11px; }
.steps button[aria-pressed='true'] { background: var(--app); color: #000; }
.app-info .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,0.08); }
.app-info .status i { width: 8px; height: 8px; border-radius: 50%; background: #dfe6ea; }
.app-info .status.live i { background: #3ee08f; box-shadow: 0 0 10px #3ee08f; }
.app-info h3 { font-family: 'Cinzel', serif; font-size: clamp(28px, 4vw, 40px); margin: 14px 0 6px; color: var(--app); }
.app-info .tag { font-size: 18px; margin: 0 0 14px; }
.app-info .about { color: var(--ink-soft); }
.app-info ul { padding-left: 18px; color: var(--ink-soft); }
.hub-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 24px 28px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(34,230,240,0.15), rgba(0,0,0,0.6)); border: 1px solid rgba(34,230,240,0.4);
}
.hub-banner h3 { font-family: 'Cinzel', serif; }

/* ---------- Library ---------- */
.shelf-filters { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 26px 0 20px; }
.shelf-filters button { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(214, 222, 228,0.4); background: none; cursor: pointer; font-family: 'Cinzel', serif; font-size: 13px; }
.shelf-filters button[aria-selected='true'] { background: var(--silver); color: #000; }
.bookcase {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 4px; padding: 26px 26px 0; border-radius: 16px;
  background: linear-gradient(#2a1a0c, #140c05); box-shadow: inset 0 0 40px rgba(0,0,0,0.7);
  background-image: linear-gradient(transparent calc(100% - 16px), #4a2f16 calc(100% - 16px)); background-size: 100% 226px;
}
.book {
  position: relative; width: 46px; height: var(--h, 190px); margin-bottom: 16px; border-radius: 4px 4px 2px 2px; text-decoration: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent 20%, transparent 80%, rgba(0,0,0,0.35)), var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 2px 0 4px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.book span {
  writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: #f6ecd8;
  max-height: calc(100% - 26px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book::before, .book::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--silver); opacity: 0.8; }
.book::before { top: 10px; } .book::after { bottom: 10px; }
.book:hover, .book:focus-visible { transform: translateY(-18px) rotate(-3deg); z-index: 2; }
.book.dim { opacity: 0.25; }
.book-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 260px; padding: 10px 14px; border-radius: 10px; background: #101416; border: 1px solid var(--silver); font-size: 14px; }

/* ---------- Courtyard banners ---------- */
.banners { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 34px; padding-top: 20px; border-top: 6px solid #3a2f14; }
.banner {
  position: relative; width: 108px; height: 170px; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 20px;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 45%, #000));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); transform-origin: top center; animation: wave 4s ease-in-out infinite; animation-delay: var(--d);
  transition: filter 0.2s;
}
.banner:hover { filter: brightness(1.25); animation-duration: 1.2s; }
.banner .icon { width: 30px; height: 30px; background: #fff; }
.banner span { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; text-align: center; padding: 0 6px; color: #fff; }
@keyframes wave { 50% { transform: skewX(4deg) rotate(1.5deg); } }

/* ---------- Treasury vault ---------- */
.vault-wrap { margin: 30px auto 10px; display: grid; justify-items: center; }
.vault {
  position: relative; width: 240px; height: 240px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #5a6a70, #1b2427 70%); box-shadow: 0 0 0 10px #10181b, 0 0 0 12px var(--silver), 0 30px 60px rgba(0,0,0,0.6), 0 0 60px rgba(79,216,230,0.25);
  transition: transform 1s cubic-bezier(.3,.1,.2,1), opacity 0.6s;
}
.vault-wheel { position: absolute; inset: 40px; border-radius: 50%; border: 8px solid var(--silver); transition: transform 1.2s cubic-bezier(.3,.1,.2,1); }
.vault-wheel i { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 8px; margin-left: -4px; background: var(--silver); border-radius: 4px; }
.vault-wheel i:nth-child(2) { transform: rotate(60deg); } .vault-wheel i:nth-child(3) { transform: rotate(120deg); }
.vault-gem { position: relative; font-size: 46px; filter: drop-shadow(0 0 16px var(--teal)); }
.vault:hover .vault-wheel { transform: rotate(60deg); }
.vault.spin .vault-wheel { transform: rotate(540deg); }
.vault.open { transform: perspective(900px) rotateY(-70deg) scale(0.6); opacity: 0; pointer-events: none; position: absolute; }
.vault-inside { width: min(760px, 100%); animation: storein 0.6s cubic-bezier(.2,.8,.2,1); }
.vault-inside iframe { width: 100%; height: min(80svh, 900px); border: 0; border-radius: 18px; background: #000; box-shadow: 0 0 0 2px var(--silver), 0 0 60px rgba(214, 222, 228,0.25); }
@media (max-width: 700px) {
  .map-wrap { height: auto; }
  #map-canvas { position: relative; display: block; height: 380px; }
  .map-legend { position: static; background: none; padding: 12px; }
}
@media (max-width: 520px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .boutique { padding: 18px 14px; }
  .boutique-tools input { width: 100%; }
  .guild-grid { grid-template-columns: 1fr; }
  .decree { padding: 24px 20px 90px; }
  .crest { height: 170px; }
}

/* ---------- Innovation Quarter: one device per property ---------- */
.quarter { display: block; margin-top: 30px; }
.app-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
@media (max-width: 760px) { .app-tiles { grid-template-columns: repeat(5, 72px); overflow-x: auto; scrollbar-width: none; } .app-tile .name, .app-tile .state { display: none; } }
.app-tile {
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); transition: 0.25s;
}
.app-tile .app-icon { width: 54px; box-shadow: 0 6px 14px rgba(0,0,0,0.5); }
.app-tile .name { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; }
.app-tile .state { font-size: 11px; color: var(--ink-soft); }
.app-tile:hover { transform: translateY(-3px); }
.app-tile[aria-selected='true'] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.quarter-stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.quarter-stage[data-app='esports'] { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 900px) { .quarter-stage, .quarter-stage[data-app='esports'] { grid-template-columns: 1fr; } }
.device { display: grid; justify-items: center; }
.device.launch { animation: launch 0.5s cubic-bezier(.2,.8,.2,1); }

/* Laptop (website) */
.dev-laptop { width: 100%; }
.dev-laptop .lid { position: relative; width: 100%; padding: 14px 14px 18px; border-radius: 18px 18px 6px 6px; background: #16181c; box-shadow: 0 0 0 2px #2a2d33, 0 30px 60px rgba(0,0,0,0.6), 0 0 60px color-mix(in srgb, var(--app) 25%, transparent); }
.dev-laptop .cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #333; }
.dev-laptop .lscreen { border-radius: 6px; overflow: hidden; background: #000; }
.mini-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #0f1114; font-size: 12px; color: var(--ink-soft); }
.mini-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mini-bar i:nth-child(2) { background: #febc2e; }
.mini-bar i:nth-child(3) { background: #28c840; }
.mini-bar span { margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: #000; }
.dev-laptop iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: #000; }
.dev-laptop .base { width: 112%; height: 16px; margin-top: -2px; border-radius: 0 0 20px 20px; background: linear-gradient(#3a3d44, #1c1e22); box-shadow: 0 16px 30px rgba(0,0,0,0.6); }
.dev-laptop .stat-row { width: 100%; margin-top: 22px; }

/* Social phone (DiamondVerse) */
.phone-app.social { padding: 46px 12px 12px; background: linear-gradient(180deg, #1a0f2e, #07050c 40%); }
.soc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: 'Cinzel', serif; }
.gem-chip { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(181,123,255,0.2); color: #fff; cursor: pointer; font-weight: 700; transition: transform 0.1s; }
.gem-chip:active { transform: scale(0.9); }
.stories { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 6px; scrollbar-width: none; }
.story { flex: none; display: grid; justify-items: center; gap: 4px; border: 0; background: none; cursor: pointer; }
.story span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #1d1430; box-shadow: 0 0 0 2px #0b0710, 0 0 0 4px #b57bff; }
.story small { font-size: 10px; color: var(--ink-soft); }
.post { padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.05); margin-bottom: 8px; font-size: 13px; }
.post header { display: flex; align-items: center; gap: 8px; }
.post .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: #b57bff; color: #000; }
.post p { margin: 8px 0; color: var(--ink-soft); }
.live-tag { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #ff3b5c; }
.like { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: 0; }
.like.on { color: #ff2da0; }

/* Kitchen tablet (Savor) */
.dev-tablet { width: 100%; }
.tablet { width: 100%; padding: 16px; border-radius: 28px; background: #121214; box-shadow: 0 0 0 2px #2a2a30, 0 30px 60px rgba(0,0,0,0.6), 0 0 60px rgba(255,159,67,0.2); }
.tablet-screen { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 14px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; padding: 16px; background: linear-gradient(160deg, #2a1708, #0d0804 60%); }
@media (max-width: 560px) { .tablet-screen { grid-template-columns: 1fr; aspect-ratio: auto; } }
.t-head { margin: 0 0 10px; font-family: 'Caveat', cursive; font-size: 26px; color: #ffb877; }
.t-head small { font-family: 'Lora', serif; font-size: 11px; color: var(--ink-soft); }
.pantry, .recs { overflow: auto; scrollbar-width: none; }
.scan { position: relative; overflow: hidden; width: 100%; margin-bottom: 12px; padding: 12px; border-radius: 12px; border: 1px dashed #ff9f43; background: rgba(255,159,67,0.08); color: #ffb877; cursor: pointer; font-weight: 700; }
.scan-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; opacity: 0; }
.scan.scanning .scan-line { opacity: 1; animation: scanline 0.9s ease-in-out; }
@keyframes scanline { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }
.dev-tablet .chip-pick button[aria-pressed='true'] { background: #ff9f43; color: #000; }
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec { position: relative; isolation: isolate; border-radius: 12px; overflow: hidden; text-decoration: none; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; font-size: 12px; font-weight: 700; }
.rec img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: brightness(0.6); transition: transform 0.4s; }
.rec:hover img { transform: scale(1.08); }
.rec b { align-self: flex-start; margin-top: 4px; padding: 3px 7px; border-radius: 999px; font-size: 10px; background: #ff9f43; color: #000; opacity: calc(0.35 + var(--p) / 150); }

/* Phone + watch (Evolve) */
.dev-duo { display: flex; align-items: flex-end; justify-content: center; gap: 22px; }
.phone-app.fit { background: linear-gradient(180deg, #06231a, #030605 55%); text-align: center; }
.fit-hello { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 18px; }
.fit-ring { position: relative; display: grid; place-items: center; margin: 4px 0 10px; }
.fit-ring > div { position: absolute; display: grid; }
.fit-ring b { font-size: 40px; font-family: 'Cinzel', serif; color: #3ee08f; line-height: 1; }
.fit-ring span { font-size: 11px; color: var(--ink-soft); }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 90px; align-items: end; margin: 8px 0 12px; }
.bar { display: grid; gap: 4px; height: 100%; align-content: end; font-size: 10px; color: var(--ink-soft); }
.bar i { display: block; height: calc(8px + var(--h) * 60px); border-radius: 6px; background: rgba(62,224,143,0.25); transition: height 0.4s; }
.bar.today i { background: #3ee08f; }
.bar.today span { color: #3ee08f; font-weight: 700; }
.reset { border: 0; background: none; color: var(--ink-soft); font-size: 12px; cursor: pointer; text-decoration: underline; }
.dev-duo .app-btn { background: #3ee08f; }
.watch { width: 130px; padding: 10px; border-radius: 34px; background: #111; box-shadow: 0 0 0 3px #2a2a30, 0 20px 40px rgba(0,0,0,0.6); position: relative; margin-bottom: 120px; }
.watch::before, .watch::after { content: ''; position: absolute; left: 22px; right: 22px; height: 80px; background: #1d3a2e; z-index: -1; }
.watch::before { bottom: 100%; border-radius: 14px 14px 0 0; }
.watch::after { top: 100%; border-radius: 0 0 14px 14px; }
.watch-face { position: relative; aspect-ratio: 0.85; border-radius: 26px; background: #000; display: grid; place-items: center; }
.watch-face b { position: absolute; font-size: 16px; color: #3ee08f; }
@media (max-width: 560px) { .watch { display: none; } }

/* TV (Sports IQ) */
.dev-tv { width: 100%; }
.tv { width: 100%; padding: 12px; border-radius: 14px; background: #0c0c0e; box-shadow: 0 0 0 2px #26262c, 0 30px 60px rgba(0,0,0,0.6), 0 0 60px rgba(255,216,79,0.18); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1f2a44, #05070d 75%); }
.tv-bug { position: absolute; top: 12px; left: 12px; padding: 3px 8px; border-radius: 4px; background: #ff3b5c; font-size: 11px; font-weight: 700; z-index: 2; }
.tv-ch { position: absolute; top: 12px; right: 14px; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #7dffb0; z-index: 2; }
.tv-body { position: absolute; inset: 0 0 34px; display: grid; place-content: center; text-align: center; padding: 20px 40px; }
.tv-body .big { font-size: clamp(40px, 7vw, 64px); }
.tv-body h4 { font-family: 'Cinzel', serif; font-size: clamp(20px, 3vw, 30px); margin: 6px 0; color: #dfe6ea; }
.tv-body p { margin: 0; color: var(--ink-soft); }
.tv-body.static { animation: tvstatic 0.35s steps(4); }
@keyframes tvstatic { 0% { filter: contrast(3) brightness(2) blur(2px); opacity: 0.4; } 100% { filter: none; opacity: 1; } }
.tv-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; overflow: hidden; background: #dfe6ea; color: #000; font-size: 13px; display: flex; align-items: center; }
.tv-ticker > div { display: flex; gap: 40px; white-space: nowrap; animation: marquee 30s linear infinite; padding-left: 20px; }
.tv-stand { width: 30%; height: 14px; margin-top: 4px; border-radius: 0 0 10px 10px; background: linear-gradient(#2a2a30, #111); }
.remote { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px; border-radius: 16px; background: #141418; border: 1px solid #2a2a30; }
.remote button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid #333; background: #1d1d22; cursor: pointer; font-size: 13px; }
.remote button span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #333; font-size: 11px; }
.remote button[aria-pressed='true'] { border-color: #dfe6ea; color: #dfe6ea; }
.remote button[aria-pressed='true'] span { background: #dfe6ea; color: #000; }
.app-info .status + .status { margin-left: 6px; }

/* ---------- Services catalog ---------- */
.svc-search { display: flex; justify-content: center; margin-bottom: 16px; }
.svc-search input { width: min(460px, 100%); padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(79,216,230,0.35); background: #000; color: #fff; font: inherit; }
.guild-tabs button small { opacity: 0.6; }
.svc-cat { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.svc-tag { margin: 0; color: var(--ink-soft); font-size: 15px; }
.svc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svc-meta .price { font-size: 22px; }
.svc-meta span:last-child { font-size: 13px; color: var(--ink-soft); }
.tier-panel { display: grid; gap: 10px; }
.service li.sub { list-style: none; margin-left: -18px; color: #fff; font-weight: 700; }

/* ---------- Blog reading room ---------- */
.reading-room {
  --lx: 30%; --ly: 20%;
  position: relative; margin-top: 26px; padding: 22px; border-radius: 26px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 2px, transparent 2px 140px),
    linear-gradient(#2b1a0f, #140b05);
  border: 1px solid rgba(214, 222, 228,0.3); box-shadow: inset 0 0 120px rgba(0,0,0,0.8);
  transition: filter 0.6s;
}
.reading-room::before { /* warm lamp pool */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: soft-light;
  background: radial-gradient(520px circle at var(--lx) var(--ly), rgba(255, 196, 110, 0.75), transparent 65%);
  transition: opacity 0.6s;
}
.reading-room::after { /* floating dust */
  content: ''; position: absolute; inset: -50% 0 0; pointer-events: none; z-index: 3; opacity: 0.5;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #ffe9c2, transparent), radial-gradient(1px 1px at 60% 70%, #ffe9c2, transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, #ffe9c2, transparent), radial-gradient(1px 1px at 35% 85%, #ffe9c2, transparent),
    radial-gradient(1px 1px at 90% 55%, #ffe9c2, transparent);
  background-size: 300px 300px; animation: dust 18s linear infinite;
}
@keyframes dust { to { transform: translateY(33%); } }
.reading-room.lamp-off { filter: brightness(0.55) saturate(0.8); }
.reading-room.lamp-off::before { opacity: 0; }
.rr-toolbar { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rr-toolbar .shelf-filters { margin: 0; justify-content: flex-start; }
.rr-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rr-tools input { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(214, 222, 228,0.4); background: rgba(0,0,0,0.6); color: #fff; font: inherit; font-size: 14px; width: 190px; }
.rr-tools .btn { padding: 8px 14px; font-size: 14px; }
.lamp-switch { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(214, 222, 228,0.5); background: rgba(214, 222, 228,0.15); cursor: pointer; font-size: 18px; }
.lamp-switch[aria-pressed='false'] { filter: grayscale(1); opacity: 0.6; }
.rr-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .rr-body { grid-template-columns: 1fr; } }
.reading-room .bookcase { background: none; box-shadow: none; padding: 0; display: grid; gap: 10px; perspective: 1200px; }
.shelf-row { position: relative; padding: 18px 16px 0; border-radius: 10px; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.15)); box-shadow: inset 0 10px 20px rgba(0,0,0,0.6); }
.shelf-row::after { content: ''; display: block; height: 16px; margin: 0 -16px; border-radius: 0 0 10px 10px; background: linear-gradient(#6b4423, #3d2412); box-shadow: 0 8px 14px rgba(0,0,0,0.5); }
.shelf-label { position: absolute; top: 6px; right: 12px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); opacity: 0.8; }
.shelf-books { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; min-height: 150px; padding-top: 12px; transform-style: preserve-3d; }
.book3d {
  position: relative; width: 42px; height: calc(var(--h) * 0.8); padding: 0; border: 0; cursor: pointer; color: inherit; background: none;
  transform-style: preserve-3d; transform-origin: bottom center; transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.book3d .spine {
  position: absolute; inset: 0; border-radius: 3px 3px 1px 1px; display: grid; place-items: center;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent 22%, transparent 78%, rgba(0,0,0,0.4)), var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.book3d .spine::before, .book3d .spine::after { content: ''; position: absolute; left: 5px; right: 5px; height: 2px; background: var(--silver); opacity: 0.8; }
.book3d .spine::before { top: 9px; } .book3d .spine::after { bottom: 9px; }
.book3d .spine span {
  writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700; color: #f6ecd8;
  max-height: calc(100% - 26px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book3d:hover, .book3d:focus-visible { transform: translateY(-14px) rotateY(-18deg) translateZ(14px); }
.book3d.out { transform: translateY(-26px) translateZ(40px) rotateY(-30deg); filter: drop-shadow(0 0 14px rgba(255,196,110,0.6)); }
.shelf-empty { color: var(--ink-soft); text-align: center; padding: 30px; }

.reading-desk {
  position: sticky; top: 90px; z-index: 4; min-height: 420px; border-radius: 18px; padding: 18px;
  background: linear-gradient(#4a2d17, #2a180b); box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.5);
  display: grid; place-items: center; perspective: 1400px;
}
@media (max-width: 900px) { .reading-desk { position: relative; top: 0; } }
.desk-idle { text-align: center; color: #e9d9bd; }
.desk-idle .desk-icon { font-size: 60px; display: block; filter: drop-shadow(0 0 20px rgba(255,196,110,0.6)); }
.desk-idle .hand { font-size: 30px; margin: 8px 0 0; color: var(--silver); }
.desk-idle p:last-child { font-size: 14px; opacity: 0.75; }
.open-book {
  display: grid; grid-template-columns: 1fr 1.25fr; width: 100%; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 50px rgba(0,0,0,0.6), 0 0 0 6px var(--c); transform-style: preserve-3d;
}
.open-book .page { background: #fbf5ec; color: #2b1d12; min-height: 380px; }
.open-book .page.left { position: relative; transform-origin: right center; animation: pageopen 0.8s cubic-bezier(.2,.8,.2,1); }
.open-book .page.left::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, rgba(0,0,0,0.25)); }
.open-book .page.left img { width: 100%; height: 100%; object-fit: cover; display: block; }
.open-book .page.right { padding: 22px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(90deg, rgba(0,0,0,0.12), transparent 12%), #fbf5ec; animation: fadein 0.6s 0.2s both; }
@keyframes pageopen { from { transform: rotateY(-120deg); opacity: 0.4; } }
@keyframes fadein { from { opacity: 0; transform: translateX(10px); } }
.pg-shelf { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6a3a; }
.open-book h3 { font-family: 'Cinzel', serif; font-size: 22px; line-height: 1.25; margin: 0; color: #2b1d12; }
.pg-text { margin: 0; font-size: 15px; line-height: 1.6; flex: 1; }
.open-book .btn { align-self: flex-start; background: #2b1d12; color: #f6ecd8; }
.pg-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: #8a6a3a; }
.pg-nav .btn { background: none; color: #2b1d12; border-color: #d8c3a2; padding: 6px 12px; font-size: 13px; }
@media (max-width: 560px) { .open-book { grid-template-columns: 1fr; } .open-book .page.left { min-height: 200px; max-height: 220px; } }

/* 3D depth */
.guild-grid .service:hover { transform: translateZ(50px); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.service { transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s; }
.products .product:hover { transform: translateZ(50px); }
.product { transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.crests .crest { transform: translateZ(30px); }
.crests .crest:hover { transform: translateZ(80px); }
.boutique-row .b-door:hover, .boutique-row .b-door[aria-selected='true'] { transform: translateY(-4px) translateZ(50px); }
.bookcase .shelf-row { transform: translateZ(10px); }
.banners .banner:hover { transform: translateZ(60px) skewX(3deg); }
.app-tiles .app-tile:hover, .app-tiles .app-tile[aria-selected='true'] { transform: translateY(-3px) translateZ(40px); }

/* ---------- The 3D boutique building ---------- */
.galleria { display: none; position: relative; margin-top: 30px; height: clamp(560px, 82vh, 880px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(214,222,228,0.35); background: #03060a; }
#shop.has-3d .galleria { display: block; }
#shop.has-3d .market { display: none; }
#shop.has-3d.show-list .market { display: block; margin-top: 26px; }
#shop.has-3d .market .boutique-row { display: none; }
.galleria canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.g-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 250px; padding: 10px 14px; border-radius: 10px; background: rgba(6,9,11,0.94); border: 1px solid rgba(214,222,228,0.45); }
.g-tip b { display: block; font-family: 'Cinzel', serif; font-size: 15px; color: #f4f7f9; line-height: 1.25; }
.g-tip span { font-size: 13px; color: var(--ink-soft); }
.galleria-enter {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 4; font-family: 'Cinzel', serif; font-size: 17px; padding: 15px 28px;
  border-radius: 2px; color: #0c0f11; background: linear-gradient(180deg, #ffffff, #aab5bc 55%, #6f7b83); box-shadow: 0 0 40px rgba(159,233,242,0.35);
}
.galleria-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; flex-direction: column; justify-content: space-between; padding: 14px; gap: 10px; }
.galleria-hud.inside { display: flex; }
.galleria-hud button, .galleria-hud a, .galleria-hud input, .galleria-hud .b-door { pointer-events: auto; }
.g-hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.g-tabs .boutique-row { display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: 8px; margin: 0; }
.g-tabs .b-door { height: auto; padding: 8px 12px; border-radius: 12px; justify-content: center; background: rgba(6,9,11,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g-tabs .b-door::before { display: none; }
.g-tabs .b-door[aria-selected='true'] { border-color: var(--a); background: color-mix(in srgb, var(--a) 22%, rgba(6,9,11,0.85)); }
.g-tabs .b-door .name { font-size: 13px; }
.g-tabs .b-door .kind { font-size: 9px; }
.g-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.g-hud-right .btn, .g-turn .btn { padding: 8px 14px; font-size: 13px; background: rgba(6,9,11,0.75); color: #eef2f5; border: 1px solid rgba(214,222,228,0.35); }
.g-turn { display: flex; gap: 6px; }
.g-bay {
  align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; max-width: 980px; padding: 12px 16px;
  border-radius: 16px; background: rgba(6,9,11,0.86); border: 1px solid color-mix(in srgb, var(--a, #d6dee4) 50%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.g-bay[hidden] { display: none; }
.g-bay-title p { margin: 0; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--a); }
.g-bay-title h3 { margin: 0; font-family: 'Cinzel', serif; font-size: 18px; }
.g-bay input { pointer-events: auto; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: #000; color: #fff; font: inherit; font-size: 14px; width: 200px; }
.g-shelf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.g-shelf .btn, .g-bay-actions .btn { padding: 8px 12px; font-size: 13px; }
.g-shelf .btn:disabled { opacity: 0.35; cursor: default; }
.g-bay-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.g-bay-actions .btn:not(.ghost) { background: var(--a); color: #000; }
.g-hint { align-self: center; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); font-size: 12px; color: var(--ink-soft); }
.g-bay:not([hidden]) ~ .g-hint { display: none; }
.modal-panel.atelier-modal { width: min(900px, 96vw); }
.modal-panel.atelier-modal .atelier { margin: 0; }
@media (max-width: 800px) {
  .galleria { height: 660px; }
  .g-hud-top { flex-direction: column-reverse; align-items: stretch; }
  .galleria { height: 720px; }
  .g-tabs .boutique-row { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .g-tabs .b-door { flex: none; padding: 7px 10px; }
  .g-tabs .b-door .kind, .g-bay-title p { display: none; }
  .g-bay-title h3 { font-size: 15px; }
  .g-bay input { padding: 7px 12px; }
  .g-hud-right { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .g-turn { display: none; }
  .g-bay { gap: 8px; padding: 10px; }
  .g-bay input { width: 100%; }
  .g-hint { display: none; }
}
#shop.has-3d.show-list .market { opacity: 1; transform: none; }

/* ---------- Library in black: black lacquer shelves, silver trim, a cool silver lamp ---------- */
.reading-room {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 140px),
    linear-gradient(#0d0d10, #030304);
  border-color: rgba(214,222,228,0.35); box-shadow: inset 0 0 120px rgba(0,0,0,0.9);
}
.reading-room::before { background: radial-gradient(520px circle at var(--lx) var(--ly), rgba(233, 240, 244, 0.5), transparent 65%); }
.reading-room::after { opacity: 0.35; }
.shelf-row { background: linear-gradient(rgba(255,255,255,0.03), rgba(0,0,0,0.3)); box-shadow: inset 0 10px 24px rgba(0,0,0,0.85); }
.shelf-row::after { background: linear-gradient(#1c1c20, #070708); box-shadow: 0 1px 0 rgba(214,222,228,0.35) inset, 0 8px 14px rgba(0,0,0,0.6); }
.reading-desk { background: linear-gradient(#141417, #060607); border: 1px solid rgba(214,222,228,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px rgba(0,0,0,0.6); }
.desk-idle { color: #e9eef1; }
.desk-idle .desk-icon { filter: drop-shadow(0 0 20px rgba(214,222,228,0.5)); }
.open-book .btn { background: #0d0d10; color: #f4f7f9; }

/* ---------- Headquarters lobby ---------- */
.hq { position: relative; margin-top: 30px; height: clamp(560px, 82vh, 860px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(214,222,228,0.35); background: #050607; }
.hq canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.hq-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 260px; padding: 10px 14px; border-radius: 10px; background: rgba(6,8,9,0.94); border: 1px solid rgba(214,222,228,0.45); }
.hq-tip b { display: block; font-family: 'Cinzel', serif; color: #f4f7f9; font-size: 15px; }
.hq-tip span { font-size: 13px; color: rgba(255,255,255,0.72); }
.hq-views { position: absolute; top: 14px; right: 14px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hq-views .btn { padding: 8px 14px; font-size: 13px; background: rgba(6,8,9,0.72); color: #eef2f5; border: 1px solid rgba(214,222,228,0.35); font-family: 'Cinzel', serif; }
.hq-views .btn[aria-pressed='true'] { background: linear-gradient(180deg, #ffffff, #aab5bc 60%, #6f7b83); color: #0c0f11; }
.hq-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap; }
.hq-directory { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hq.no-3d { height: auto; padding: 20px; }
.hq.no-3d .hq-directory { position: static; width: auto; height: auto; clip: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.hq.no-3d .hq-views, .hq.no-3d .hq-hint { display: none; }
.hq-directory button { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(214,222,228,0.3); cursor: pointer; color: inherit; font-family: 'Cinzel', serif; }
.hq-directory b { color: var(--teal); }

/* The concierge's speech card */
.hq-concierge {
  position: absolute; left: 16px; bottom: 56px; z-index: 4; width: min(420px, calc(100% - 32px)); padding: 16px 18px;
  border-radius: 16px; background: rgba(6,8,9,0.88); border: 1px solid rgba(214,222,228,0.45); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: hq-in 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes hq-in { from { opacity: 0; transform: translateY(12px); } }
.hq-c-head { display: flex; align-items: center; gap: 10px; }
.hq-c-head b { font-family: 'Cinzel', serif; color: #f4f7f9; font-size: 15px; flex: 1; }
.hq-c-badge { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #ffffff, #aab5bc); }
.hq-c-x { background: none; border: 0; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 16px; }
.hq-c-text { margin: 10px 0 12px; font-size: 16px; line-height: 1.5; color: #f4f7f9; min-height: 3em; }
.hq-c-options { display: flex; flex-wrap: wrap; gap: 8px; }
.hq-c-options .btn { padding: 8px 14px; font-size: 13px; background: linear-gradient(180deg, #ffffff, #aab5bc 60%, #6f7b83); color: #0c0f11; border-radius: 999px; }
.hq-c-options .btn.ghost { background: transparent; color: #eef2f5; border: 1px solid rgba(214,222,228,0.45); }

/* Elevator panel */
.hq-lift {
  position: absolute; right: 16px; top: 64px; z-index: 5; width: min(320px, calc(100% - 32px)); padding: 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(40,44,48,0.95), rgba(12,14,16,0.96)); border: 1px solid #aab5bc; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.hq-lift-display { margin: 0 auto 10px; width: 90px; padding: 6px 0; text-align: center; border-radius: 8px; background: #050506; color: #4fd8e6; font-family: 'Cinzel', serif; font-size: 34px; font-weight: 700; text-shadow: 0 0 12px #4fd8e6; border: 1px solid rgba(79,216,230,0.4); }
.hq-lift-display.ding { animation: ding 0.9s ease; }
@keyframes ding { 30% { color: #fff; text-shadow: 0 0 24px #fff; } }
.hq-lift-title { margin: 0 0 8px; text-align: center; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #aab5bc; }
.hq-lift-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hq-lift-buttons button { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; cursor: pointer; text-align: left; background: rgba(255,255,255,0.05); border: 1px solid rgba(214,222,228,0.25); color: #eef2f5; font-size: 12px; }
.hq-lift-buttons b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #ffffff, #8e9aa2); color: #0c0f11; font-family: 'Cinzel', serif; box-shadow: 0 0 0 2px #2a3034; }
.hq-lift-buttons button:hover b, .hq-lift-buttons button:focus-visible b { box-shadow: 0 0 0 2px #4fd8e6, 0 0 14px #4fd8e6; }
.hq-lift-close { width: 100%; margin-top: 10px; padding: 8px; font-size: 13px; color: #eef2f5; background: transparent; }

/* Floor plaques at the top of every section */
.floor-plaque {
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto 26px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: linear-gradient(180deg, rgba(20,24,27,0.9), rgba(6,8,9,0.9)); border: 1px solid rgba(214,222,228,0.4);
}
.fp-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: 'Cinzel', serif; font-weight: 700; color: #0c0f11; background: radial-gradient(circle at 40% 35%, #ffffff, #8e9aa2); }
.fp-name { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #e9eef1; }
.fp-lobby { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(214,222,228,0.35); background: none; color: #e9eef1; cursor: pointer; font-size: 12px; }
.fp-lobby:hover { background: #e9eef1; color: #0c0f11; }
[data-theme='day'] .floor-plaque { background: #fff; border-color: rgba(42,22,34,0.12); box-shadow: 0 8px 20px rgba(42,22,34,0.08); }
[data-theme='day'] .fp-name, [data-theme='day'] .fp-lobby { color: #2a1622; }
[data-theme='day'] .hq { border: 6px solid #fff; box-shadow: 0 18px 44px rgba(42,22,34,0.09), 0 0 0 1px rgba(42,22,34,0.1); }

@media (max-width: 760px) {
  .hq { height: 680px; }
  .hq-views { left: 10px; right: 10px; justify-content: center; }
  .hq-views .btn { padding: 7px 10px; font-size: 12px; }
  .hq-concierge { left: 10px; right: 10px; width: auto; bottom: 10px; }
  .hq-lift { left: 10px; right: 10px; width: auto; top: 56px; }
  .hq-hint { display: none; }
  .fp-name { font-size: 11px; }
}