/* 字体改为非阻塞加载，见 index.html 的 media="print" onload 技巧 */

/* ===== Palette ===== */
:root{
    --bg:        #0a0810;
    --bg-2:      #0e0b16;
    --ink:       #e9e5db;
    --muted:     #9c97a8;
    --muted-2:   #6b6678;
    --gold:      #c9a96a;
    --gold-2:    #e6cd9a;
    --silver:    #cfd2dc;
    --line:      rgba(255,255,255,0.08);
    --line-soft: rgba(255,255,255,0.05);
    --panel:     rgba(18,16,26,0.55);
    --panel-2:   rgba(12,10,18,0.45);
    --glow:      rgba(201,169,106,0.10);
    --ease:      cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }

::selection{ background:rgba(201,169,106,0.25); color:var(--gold-2); }

body{
    background:
        radial-gradient(900px 620px at 88% -8%, rgba(201,169,106,0.06), transparent 60%),
        radial-gradient(780px 560px at 4% 102%, rgba(124,58,237,0.05), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, #08060e 100%);
    color:var(--ink);
    font-family:'Inter','Noto Serif SC',sans-serif;
    font-weight:300;
    letter-spacing:.01em;
    min-height:100vh;
    overflow:hidden;
}

#starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ===== Type ===== */
.font-display{ font-family:'Cinzel',serif; }
.font-code{ font-family:'Fira Code',monospace; }
.font-art{ font-family:'Ma Shan Zheng',cursive; }
.font-serif{ font-family:'Cormorant Garamond','Noto Serif SC',serif; }

.gold-text{
    background:linear-gradient(180deg, var(--gold-2), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-muted{ color:var(--muted); }
.text-muted-2{ color:var(--muted-2); }
.text-gold{ color:var(--gold-2); }

/* ===== Panels & lines ===== */
.topbar{ border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }

.panel{
    background:linear-gradient(160deg, rgba(22,20,32,0.62), rgba(12,10,18,0.5));
    backdrop-filter:blur(18px) saturate(120%);
    border:1px solid var(--line);
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 70px rgba(0,0,0,0.55);
    position:relative;
}
.divider{ width:1px; height:18px; background:var(--line); }
.hairline{ height:1px; background:var(--line); }

/* ===== Buttons ===== */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border-radius:999px; padding:.6rem 1.2rem; font-size:.8rem; font-weight:400;
    letter-spacing:.05em; cursor:pointer; border:1px solid transparent;
    transition:all .4s var(--ease); color:var(--ink); background:transparent;
}
.btn-ghost{
    background:rgba(255,255,255,0.025);
    border-color:rgba(255,255,255,0.12);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2); background:rgba(201,169,106,0.07); }
.btn-solid{
    background:linear-gradient(135deg, var(--gold-2), var(--gold));
    color:#171106; font-weight:500; border-color:rgba(230,205,154,0.5);
}
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(201,169,106,0.28); }
.btn:disabled{ opacity:.35; pointer-events:none; }

/* ===== Fields ===== */
.field{
    width:100%; background:rgba(0,0,0,0.32); color:var(--ink);
    border:1px solid var(--line); border-radius:10px; padding:.62rem .75rem;
    font-family:'Fira Code',monospace; font-size:.78rem; line-height:1.6;
    transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s;
}
.field::placeholder{ color:var(--muted-2); }
.field:focus{ outline:none; border-color:var(--gold); background:rgba(0,0,0,0.42); box-shadow:0 0 0 3px rgba(201,169,106,0.10); }

/* ===== Tabs ===== */
.tab{
    flex:1; padding:.42rem; font-size:.76rem; letter-spacing:.04em;
    border-radius:9px; border:1px solid var(--line); color:var(--muted);
    transition:all .35s var(--ease);
}
.tab:hover{ color:var(--ink); border-color:rgba(255,255,255,0.18); }
.tab-active{ color:var(--gold-2); border-color:rgba(201,169,106,0.45); background:rgba(201,169,106,0.06); }

/* ===== Canvas frame ===== */
.canvas-frame{
    position:relative; padding:10px; background:#060509;
    border:1px solid rgba(201,169,106,0.22);
    box-shadow:0 36px 90px rgba(0,0,0,0.62), 0 0 46px rgba(201,169,106,0.07);
}
.canvas-frame::after{
    content:""; position:absolute; inset:10px; pointer-events:none;
    box-shadow:inset 0 0 120px rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.04);
}
.canvas-container{ cursor:pointer; }

/* range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:2px; background:rgba(255,255,255,0.16); border-radius:2px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--gold-2),var(--gold)); cursor:pointer; box-shadow:0 0 0 4px rgba(201,169,106,0.12); transition:box-shadow .3s; }
input[type=range]::-webkit-slider-thumb:hover{ box-shadow:0 0 0 7px rgba(201,169,106,0.18); }
input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:var(--gold); cursor:pointer; }

/* ===== Scrollbars ===== */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.14); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ===== Loader ===== */
.loader{
    width:28px; height:28px; border-radius:50%;
    border:2px solid rgba(201,169,106,0.18); border-top-color:var(--gold);
    animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== Stat list ===== */
.stat-row{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
.stat-row:last-child{ border-bottom:none; }
.stat-label{ display:flex; align-items:center; gap:.55rem; color:var(--muted); }
.stat-label i{ color:var(--gold); width:14px; text-align:center; font-size:.72rem; }
.stat-val{ font-family:'Fira Code',monospace; color:var(--ink); }

/* ===== Tarot ===== */
.tarot-card{ width:152px; height:248px; perspective:1400px; cursor:pointer; }
.tarot-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform 1.1s var(--ease); }
.tarot-card.flipped .tarot-inner{ transform:rotateY(180deg); }
.tarot-face{
    position:absolute; inset:0; backface-visibility:hidden; border-radius:12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    border:1px solid rgba(201,169,106,0.38);
    box-shadow:0 18px 44px rgba(0,0,0,0.6), 0 0 26px rgba(201,169,106,0.07);
    overflow:hidden;
}
.tarot-back{
    background:
        radial-gradient(circle at 50% 32%, rgba(201,169,106,0.16), transparent 62%),
        repeating-linear-gradient(45deg, rgba(201,169,106,0.05) 0 7px, transparent 7px 15px),
        linear-gradient(165deg,#15101f,#0a0712);
}
.tarot-back::before{
    content:"✦"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:34px; color:rgba(201,169,106,0.5);
}
.tarot-front{ background:linear-gradient(170deg,#16101f,#0a0712); transform:rotateY(180deg); padding:16px 12px; text-align:center; }
.tarot-pos{ font-family:'Cinzel',serif; font-size:9px; letter-spacing:2px; color:var(--muted-2); text-transform:uppercase; }
.tarot-icon{ font-size:46px; filter:drop-shadow(0 0 10px rgba(201,169,106,0.55)); margin:.4rem 0; }
.tarot-name{ font-family:'Cinzel',serif; color:var(--gold-2); font-size:14px; font-weight:600; letter-spacing:.5px; }
.tarot-en{ font-size:9px; letter-spacing:1.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; }
.tarot-key{ font-size:10px; color:var(--silver); margin-top:8px; opacity:.8; }

/* ===== Realm / reading ===== */
.realm-fade{ animation:realmIn 1.1s var(--ease) both; }
@keyframes realmIn{ from{ opacity:0; transform:scale(1.035); } to{ opacity:1; transform:scale(1); } }

.fade-in{ animation:fadeIn 1.3s ease-in both; opacity:0; }
@keyframes fadeIn{ to{ opacity:1; } }

.reading-section{ border-left:1px solid rgba(201,169,106,0.45); padding-left:14px; margin:16px 0; }
.reading-section h4{ font-family:'Cinzel',serif; color:var(--gold-2); font-size:12px; letter-spacing:1.5px; margin-bottom:7px; font-weight:600; }
.reading-body{ font-family:'Cormorant Garamond','Noto Serif SC',serif; font-size:1.02rem; line-height:1.7; color:var(--silver); font-weight:400; }

.dropzone{ border:1px dashed rgba(255,255,255,0.16); transition:all .35s var(--ease); }
.dropzone.drag{ border-color:var(--gold); background:rgba(201,169,106,0.06); }

/* overlay scrim */
.scrim{ background:radial-gradient(1100px 760px at 50% -12%, rgba(124,58,237,0.12), transparent 60%), linear-gradient(180deg, rgba(8,6,14,.92), rgba(10,8,16,.96)); }

/* small uppercase kicker */
.kicker{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted-2); }

/* ===== Tailwind-lite 工具类（去掉 CDN 依赖，布局自托管） ===== */
.flex{ display:flex; }
.flex-col{ flex-direction:column; }
.flex-row{ flex-direction:row; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.flex-1{ flex:1 1 0%; }
.shrink-0{ flex-shrink:0; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.inset-0{ top:0; right:0; bottom:0; left:0; }
.w-full{ width:100%; }
.h-screen{ height:100vh; }
.h-full{ height:100%; }
.h-16{ height:4rem; }
.w-60{ width:15rem; }
.max-w-full{ max-width:100%; }
.max-w-5xl{ max-width:64rem; }
.max-w-md{ max-width:28rem; }
.min-h-0{ min-height:0; }
.aspect-square{ aspect-ratio:1/1; }
.block{ display:block; }
.hidden{ display:none; }
.overflow-hidden{ overflow:hidden; }
.overflow-y-auto{ overflow-y:auto; }
.cursor-pointer{ cursor:pointer; }

.p-4{ padding:1rem; }
.p-5{ padding:1.25rem; }
.p-7{ padding:1.75rem; }
.px-7{ padding-left:1.75rem; padding-right:1.75rem; }
.py-2\.5{ padding-top:.625rem; padding-bottom:.625rem; }
.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-6{ gap:1.5rem; }
.ml-3{ margin-left:.75rem; }
.ml-1\.5{ margin-left:.375rem; }
.mr-1\.5{ margin-right:.375rem; }
.mt-1{ margin-top:.25rem; }
.mt-1\.5{ margin-top:.375rem; }
.mt-2{ margin-top:.5rem; }
.mt-2\.5{ margin-top:.625rem; }
.mt-5{ margin-top:1.25rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-2\.5{ margin-bottom:.625rem; }
.mb-3{ margin-bottom:.75rem; }
.mb-4{ margin-bottom:1rem; }
.mb-5{ margin-bottom:1.25rem; }
.my-8{ margin-top:2rem; margin-bottom:2rem; }
.space-y-5 > * + *{ margin-top:1.25rem; }
.pr-2{ padding-right:.5rem; }
.top-4{ top:1rem; }
.top-6{ top:1.5rem; }
.right-5{ right:1.25rem; }
.right-6{ right:1.5rem; }
.bottom-8{ bottom:2rem; }

.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-xl{ font-size:1.25rem; }
.text-sm{ font-size:.875rem; }
.text-xs{ font-size:.75rem; }
.text-\[11px\]{ font-size:11px; }
.text-\[13px\]{ font-size:13px; }
.font-normal{ font-weight:400; }
.tracking-wide{ letter-spacing:.025em; }
.tracking-\[0\.16em\]{ letter-spacing:.16em; }
.tracking-\[0\.3em\]{ letter-spacing:.3em; }
.tracking-\[0\.2em\]{ letter-spacing:.2em; }
.tracking-\[0\.14em\]{ letter-spacing:.14em; }
.leading-relaxed{ line-height:1.625; }
.break-words{ overflow-wrap:break-word; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-center{ text-align:center; }

.transition-colors{ transition-property:color,background-color,border-color,fill,stroke; }
.transition-all{ transition-property:all; }
.transition-opacity{ transition-property:opacity; }
.duration-300{ transition-duration:.3s; }
.duration-500{ transition-duration:.5s; }

.rounded-xl{ border-radius:.75rem; }
.rounded-2xl{ border-radius:1rem; }
.rounded-sm{ border-radius:.125rem; }

.translate-x-full{ transform:translateX(100%); }
.translate-y-4{ transform:translateY(1rem); }
.opacity-0{ opacity:0; }
.opacity-40{ opacity:.4; }
.pointer-events-none{ pointer-events:none; }
.backdrop-blur-sm{ backdrop-filter:blur(4px); }

.bg-black\/75{ background:rgba(0,0,0,.75); }

.hover\:text-\[\#e6cd9a\]:hover{ color:#e6cd9a; }

@media (min-width:768px){
  .md\:flex-row{ flex-direction:row; }
  .md\:w-1\/3{ width:33.333333%; }
  .md\:w-auto{ width:auto; }
  .md\:h-\[82vh\]{ height:82vh; }
  .md\:aspect-auto{ aspect-ratio:auto; }
  .md\:p-10{ padding:2.5rem; }
  .md\:p-8{ padding:2rem; }
  .md\:p-11{ padding:2.75rem; }
  .md\:gap-9{ gap:2.25rem; }
}
@media (min-width:1024px){
  .lg\:w-1\/4{ width:25%; }
}

/* ===== 补充工具类 ===== */
.gap-5{ gap:1.25rem; }
.mb-1\.5{ margin-bottom:.375rem; }
.mb-3\.5{ margin-bottom:.875rem; }
.mb-7{ margin-bottom:1.75rem; }
.max-h-full{ max-height:100%; }
.max-h-\[42vh\]{ max-height:42vh; }
.text-lg{ font-size:1.125rem; }
.text-4xl{ font-size:2.25rem; line-height:2.5rem; }
.text-5xl{ font-size:3rem; line-height:1; }
.text-\[\#e6cd9a\]{ color:#e6cd9a; }
.tracking-\[0\.1em\]{ letter-spacing:.1em; }
.z-\[60\]{ z-index:60; }
.z-10{ z-index:10; }
.z-20{ z-index:20; }
.z-50{ z-index:50; }
.resize-none{ resize:none; }
.transform{ transform:translateZ(0); }
.animate-pulse{ animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }