/* ===== RUBBLE SNAP · 深色版 =====
   想改配色只动下面这几个变量 */
:root{
  --bg:#0A0B0D;          /* 深邃底色 */
  --bg2:#14171C;         /* 渐层第二色 */
  --ink:#EDE9E0;         /* 主文字（浅） */
  --dim:#8B8781;         /* 次要文字 */
  --gold:#C99A5F;        /* 暖赭金 · 强调色 */
  --green:#2F4F43;       /* 复古墨绿 */
  --line:rgba(237,233,224,.12);
  --card:rgba(255,255,255,.035);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{
  background:var(--bg);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 深邃场景：暗角 + 舞台聚光 + 地平反光 + 连续渐变（无白色雾块） */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 100% at 50% 42%, transparent 42%, rgba(0,0,0,.58) 100%),
    radial-gradient(72% 52% at 50% 44%, rgba(201,154,95,.075) 0%, rgba(201,154,95,.028) 42%, transparent 74%),
    radial-gradient(130% 58% at 50% 106%, rgba(168,190,205,.05) 0%, transparent 58%),
    linear-gradient(180deg, #0E1014 0%, #0B0D10 34%, #08090B 66%, #050607 100%);
}
/* 颗粒噪点（极轻，只去塑料感） */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.55'/></svg>");
}
main,.modal{position:relative;z-index:2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.hidden{display:none !important}

/* ---------- 登录页 ---------- */
#view-enter{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
.enter{padding:40px 24px;animation:fadeUp 1.1s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.enter-stamp{width:min(300px,62vw);margin:0 auto 30px;display:block;filter:drop-shadow(0 0 40px rgba(201,154,95,.18))}
.s-out{fill:none;stroke:var(--ink);stroke-width:2;opacity:.9}
.s-in{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.45}
.s-dash{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:2 7;opacity:.7;
  transform-origin:150px 150px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.s-arc{font-size:17px;letter-spacing:.34em;fill:var(--ink);font-weight:700;opacity:.8}
.s-cn{font-size:44px;font-weight:800;text-anchor:middle;fill:var(--ink);letter-spacing:.06em}
.enter-slogan{
  font-size:clamp(34px,7.4vw,78px);font-weight:900;letter-spacing:.1em;line-height:1;
  text-shadow:0 0 60px rgba(201,154,95,.25);
}
.enter-sub{margin-top:16px;font-size:13px;letter-spacing:.55em;color:var(--dim)}
.enter-btn{
  display:inline-block;margin-top:52px;padding:14px 46px;
  border:1px solid var(--line);border-radius:2px;font-size:12px;letter-spacing:.42em;color:var(--dim);
  transition:.35s;
}
.enter-btn:hover{color:var(--bg);background:var(--gold);border-color:var(--gold);letter-spacing:.5em}

/* ---------- 顶栏 ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 30px;border-bottom:1px solid var(--line);
  background:rgba(10,11,13,.6);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20;
}
.top-brand{font-weight:800;letter-spacing:.26em;font-size:13px}
.top-nav{display:flex;gap:24px;font-size:12px;letter-spacing:.18em;color:var(--dim)}
.top-nav a:hover,.top-nav a.on{color:var(--gold)}

/* ---------- 选角页 ---------- */
.sel{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 12px 0;min-height:calc(100vh - 62px)}
.sel-mid{position:relative;display:flex;flex-direction:column;align-items:center;flex:1;max-width:980px}
.sel-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.big-arc{
  position:absolute;width:min(760px,96vw);height:auto;left:50%;top:50%;
  transform:translate(-50%,-54%);pointer-events:none;opacity:.14;
  animation:arcs 46s linear infinite;
}
@keyframes arcs{to{transform:translate(-50%,-54%) rotate(360deg)}}
.big-arc text{font-size:44px;font-weight:900;letter-spacing:.3em;fill:var(--ink)}
.sel-halo{
  position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(201,154,95,.16) 0%,rgba(201,154,95,.05) 38%,transparent 68%);
  filter:blur(6px);animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* 3D 环形转台（WebGL 实时渲染） */
#stage3d{
  position:relative;z-index:2;display:block;
  width:100%;height:min(600px,62vh);
  cursor:grab;touch-action:pan-y;
  border-radius:20px;
}
#stage3d:active{cursor:grabbing}
.load-hint{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:11px;letter-spacing:.3em;color:var(--gold);
  background:rgba(10,11,13,.55);border:1px solid var(--line);
  padding:6px 16px;border-radius:100px;animation:pulse 2s ease-in-out infinite;
}
.drag-hint{
  position:absolute;bottom:2px;left:0;right:0;text-align:center;
  font-size:10px;letter-spacing:.3em;color:var(--dim);opacity:.6;
}
.arrow{
  background:none;border:none;color:var(--dim);font-size:56px;line-height:1;cursor:pointer;
  padding:0 12px;transition:.25s;flex-shrink:0;
}
.arrow:hover{color:var(--gold);transform:scale(1.18)}
.sel-side{
  position:absolute;top:38%;font-size:12px;letter-spacing:.2em;color:var(--dim);
  opacity:.32;white-space:nowrap;transition:.3s;pointer-events:none;
}
.sel-side.prev{left:-4px;transform:rotate(-90deg);transform-origin:left center}
.sel-side.next{right:-4px;transform:rotate(90deg);transform-origin:right center}
@media(max-width:1100px){.sel-side{display:none}}

.sel-plate{text-align:center;margin-top:-16px;max-width:620px}
.plate-no{font-size:11px;letter-spacing:.4em;color:var(--gold)}
.plate-name{font-size:clamp(24px,3.6vw,38px);margin:10px 0 12px;letter-spacing:.1em;font-weight:800}
.plate-meta{display:flex;align-items:baseline;justify-content:center;gap:14px;font-size:20px;font-weight:700}
.plate-meta em{font-size:11px;letter-spacing:.18em;color:var(--dim);font-style:normal;font-weight:400}
.plate-meta em.out{color:#C4644F}
.plate-desc{margin:16px auto 22px;font-size:13px;line-height:2.05;color:var(--dim);max-width:520px}
.btn-gold{
  background:var(--gold);color:#12130F;border:none;padding:15px 46px;cursor:pointer;
  font-size:13px;letter-spacing:.3em;border-radius:2px;font-weight:700;transition:.25s;
}
.btn-gold:hover{box-shadow:0 0 36px rgba(201,154,95,.45);transform:translateY(-2px)}
.dots{display:flex;gap:9px;justify-content:center;margin:26px 0 6px}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(237,233,224,.2);cursor:pointer;transition:.25s}
.dot.active{background:var(--gold);box-shadow:0 0 12px rgba(201,154,95,.8)}
.sel-foot{text-align:center;padding:6px 0 34px}
.sel-foot a{font-size:12px;letter-spacing:.34em;color:var(--dim)}
.sel-foot a:hover{color:var(--gold)}

/* ---------- 商城 ---------- */
.shop{padding:44px 30px 90px;max-width:1240px;margin:0 auto}
.shop-title{font-size:12px;letter-spacing:.5em;color:var(--dim);font-weight:600;margin-bottom:22px}
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.cat{
  border:1px solid var(--line);padding:9px 20px;border-radius:100px;cursor:pointer;
  font-size:12px;letter-spacing:.2em;color:var(--dim);background:none;transition:.25s;
}
.cat:hover{color:var(--ink);border-color:rgba(237,233,224,.35)}
.cat.on{background:var(--gold);color:#12130F;border-color:var(--gold);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:.3s;cursor:pointer;
}
.card:hover{transform:translateY(-6px);border-color:rgba(201,154,95,.5);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.card-img{height:250px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02);overflow:hidden}
.card-img img{max-height:230px;object-fit:contain}
.card-body{padding:16px 18px 20px}
.card-no{font-size:10px;letter-spacing:.34em;color:var(--gold)}
.card-name{font-size:15px;margin:8px 0 6px;letter-spacing:.06em}
.card-price{font-size:16px;font-weight:800}
.card-sold{font-size:10px;letter-spacing:.2em;color:#C4644F;margin-left:8px;font-weight:400}

/* ---------- 关于 ---------- */
.about{max-width:720px;margin:0 auto;padding:70px 24px 100px}
.about-title{font-size:40px;letter-spacing:.2em;text-align:center}
.about-en{text-align:center;font-size:12px;letter-spacing:.3em;color:var(--dim);margin:14px 0 44px}
.about-body p{font-size:14px;line-height:2.25;margin-bottom:16px;color:#B9B4AC}
.about-body b{color:var(--gold)}
.sec-title{text-align:center;font-size:11px;letter-spacing:.44em;color:var(--dim);margin:46px 0 22px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:rgba(4,5,6,.82);display:flex;align-items:center;justify-content:center;z-index:99}
.modal-card{
  background:#121417;border:1px solid var(--line);padding:38px 34px;max-width:400px;width:90%;
  position:relative;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:24px;cursor:pointer;color:var(--dim)}
.modal-card h3{font-size:20px;letter-spacing:.08em}
.modal-sub{font-size:11px;color:var(--dim);margin:8px 0 22px;letter-spacing:.1em}
.ch{
  display:block;border:1px solid var(--line);padding:13px;text-align:center;margin-bottom:9px;
  font-size:12px;letter-spacing:.18em;transition:.25s;
}
.ch:hover{background:var(--gold);color:#12130F;border-color:var(--gold)}
.modal-foot{font-size:10px;color:var(--dim);margin-top:16px;line-height:1.9}

/* 拖拽提示：桌面/手机各一套文案 */
.h-mob{display:none}

/* WebGL 不可用时的实拍图兜底 */
.webgl-fallback{
  position:relative;z-index:2;max-height:min(60vh,520px);width:auto;margin:0 auto;object-fit:contain;
}

/* =========================================================
   移动端适配
   断点：≤820px（手机 / 竖屏平板）
   ========================================================= */
@media (max-width:820px){
  html{-webkit-text-size-adjust:100%}
  *{-webkit-tap-highlight-color:transparent}

  /* iOS 视口高度：dvh 处理地址栏收缩 */
  @supports (min-height:100dvh){
    #view-enter{min-height:100dvh}
    .sel{min-height:calc(100dvh - 54px)}
  }

  /* ---------- 顶栏 ---------- */
  .top{
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
    gap:10px;
  }
  .top-brand{font-size:11px;letter-spacing:.18em}
  .top-nav{gap:16px;font-size:11px;letter-spacing:.12em}

  /* ---------- 登录页 ---------- */
  .enter{padding:32px 20px}
  .enter-stamp{width:min(240px,58vw);margin-bottom:22px}
  .enter-slogan{letter-spacing:.06em}
  .enter-sub{font-size:11px;letter-spacing:.4em;margin-top:12px}
  .enter-btn{margin-top:34px;padding:14px 40px;letter-spacing:.34em}

  /* ---------- 选角页 ---------- */
  .sel{position:relative;flex-direction:column;gap:0;padding:8px 0 0;min-height:calc(100vh - 54px)}
  .sel-mid{width:100%;max-width:none}

  .sel-stage{width:100%;overflow:clip}
  @supports not (overflow:clip){.sel-stage{overflow:hidden}}
  #stage3d{
    height:min(42vh,340px);
    min-height:240px;
    touch-action:pan-y;              /* 横滑归 JS，纵向仍可滚页面 */
  }
  .sel-halo{width:min(400px,88vw);height:min(400px,88vw)}
  .big-arc{width:min(460px,86vw)}
  .big-arc text{font-size:52px}

  /* 箭头 → 由 JS 移入舞台内，悬浮在两侧（触控友好） */
  .arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    font-size:26px;line-height:1;
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(18,20,23,.55);border:1px solid var(--line);
    backdrop-filter:blur(6px);z-index:12;
  }
  .arrow.left{left:10px}
  .arrow.right{right:10px}
  .arrow:hover{transform:translateY(-50%);color:var(--gold)}

  .drag-hint{font-size:9px;letter-spacing:.18em;bottom:-2px}
  .h-desk{display:none}
  .h-mob{display:inline}
  .load-hint{font-size:10px;padding:5px 12px}

  /* ---------- 铭牌 ---------- */
  .sel-plate{margin-top:2px;padding:0 22px;max-width:none}
  .plate-no{font-size:10px;letter-spacing:.32em}
  .plate-name{font-size:24px;margin:8px 0 10px}
  .plate-meta{font-size:18px;gap:10px}
  .plate-desc{
    margin:12px auto 18px;font-size:12.5px;line-height:1.95;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .btn-gold{
    width:100%;max-width:340px;padding:15px 0;
    font-size:13px;letter-spacing:.26em;
  }
  .dots{margin:18px 0 4px;gap:10px}
  .dot{width:8px;height:8px}
  .sel-foot{padding:2px 0 calc(28px + env(safe-area-inset-bottom))}

  /* ---------- 商城 ---------- */
  .shop{padding:24px 16px calc(60px + env(safe-area-inset-bottom))}
  .shop-title{margin-bottom:16px;letter-spacing:.4em}
  .cats{gap:8px;margin-bottom:20px}
  .cat{padding:8px 15px;font-size:11px;letter-spacing:.14em}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-img{height:158px}
  .card-img img{max-height:142px}
  .card-body{padding:12px 13px 15px}
  .card-no{font-size:9px;letter-spacing:.24em}
  .card-name{font-size:13.5px;margin:7px 0 5px}
  .card-price{font-size:15px}
  .card-sold{font-size:9px;margin-left:6px}

  /* ---------- 关于 ---------- */
  .about{padding:36px 20px calc(60px + env(safe-area-inset-bottom))}
  .about-title{font-size:30px}
  .about-en{font-size:11px;letter-spacing:.22em;margin:10px 0 30px}
  .about-body p{font-size:13px;line-height:2.05}
  .sec-title{margin:34px 0 16px;letter-spacing:.34em}

  /* ---------- 弹窗 ---------- */
  .modal{align-items:flex-end}
  .modal-card{
    width:100%;max-width:none;padding:26px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius:12px 12px 0 0;
  }
  .modal-x{font-size:26px;top:8px;right:12px}
  .ch{padding:15px}
}

/* 极窄屏（≤360px）微调 */
@media (max-width:360px){
  .top-brand{font-size:10px;letter-spacing:.12em}
  .top-nav{gap:12px;font-size:10px;letter-spacing:.06em}
  .enter-slogan{font-size:30px}
  .grid{grid-template-columns:1fr}
  .plate-name{font-size:21px}
}

/* 横屏手机（矮高度） */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  #stage3d{height:56vh;min-height:200px}
  .sel{flex-direction:row;min-height:calc(100vh - 48px)}
  .sel-plate{position:absolute;left:14px;bottom:6px;text-align:left;padding:0;width:42%;z-index:8}
  .plate-desc{display:none}
  .btn-gold{padding:11px 22px;max-width:none;width:auto;font-size:11px}
  .dots{margin:10px 0 0;justify-content:flex-start}
  .sel-side{display:none}
}