/* foundation.css v0.0.3 — KB Play 基底
 * 借鑑 Bootstrap 5 spacing/radius/shadow 系統
 * 女性向(醫美/美容/生活風格)
 * mobile-first
 */

/* === Reset === */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,picture,svg{max-width:100%;display:block;height:auto}
input,button,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
button{border:0;background:none;cursor:pointer;font:inherit;color:inherit;padding:0}

/* === 設計變數(借 Bootstrap 5)=== */
:root{
  /* Color palette 玫瑰金 / 米白 / 砂咖啡 */
  --c-rose-50:#FDF6F2;
  --c-rose-100:#FBEEE6;
  --c-rose-200:#F5DAC8;
  --c-rose-300:#EFC1A2;
  --c-rose-400:#E59E72;
  --c-rose-500:#D87A4A;
  --c-rose-600:#B85F35;
  --c-rose-700:#7A3A1E;
  --c-blush:#F4CDC0;
  --c-champagne:#E8C9A4;
  --c-cream:#FCF8F4;
  --c-bg:#FFFDFB;
  --c-text:#2C1E15;
  --c-text-soft:#544339;
  --c-text-muted:#857064;
  --c-line:#EFE2D8;
  --c-line-soft:#F5EBE3;

  /* Spacing(Bootstrap 5 rem 系統)*/
  --sp-1:0.25rem;
  --sp-2:0.5rem;
  --sp-3:1rem;
  --sp-4:1.5rem;
  --sp-5:2rem;
  --sp-6:3rem;
  --sp-7:4rem;

  /* Radius */
  --r-sm:0.5rem;
  --r-md:0.75rem;
  --r-lg:1rem;
  --r-xl:1.5rem;
  --r-2xl:2rem;
  --r-pill:9999px;

  /* Shadow(柔和女性向)*/
  --sh-sm:0 1px 2px rgba(143,90,60,0.06),0 1px 1px rgba(143,90,60,0.04);
  --sh-md:0 4px 8px -2px rgba(143,90,60,0.08),0 2px 4px -2px rgba(143,90,60,0.05);
  --sh-lg:0 12px 24px -8px rgba(143,90,60,0.12),0 4px 8px -2px rgba(143,90,60,0.06);
  --sh-xl:0 24px 48px -12px rgba(143,90,60,0.16),0 8px 16px -4px rgba(143,90,60,0.08);

  /* Font */
  --f-sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Cormorant Garamond","Times New Roman",serif;

  /* Layout */
  --header-h:56px;
  --safe-bottom:env(safe-area-inset-bottom);
}

body{
  font-family:var(--f-sans);
  color:var(--c-text);
  background:var(--c-bg);
  padding-top:var(--header-h);
  font-size:15px;
  letter-spacing:0.01em;
}

/* === Container === */
.container{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:0 var(--sp-3);
}
@media (min-width:768px){
  .container{max-width:680px;padding:0 var(--sp-4)}
  body{font-size:16px}
}

/* === Typography === */
h1,h2,h3{font-weight:700;letter-spacing:-0.01em;line-height:1.25}

/* === Header === */
.kb-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:rgba(255,253,251,0.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-line-soft);
  z-index:700;
}
.kb-header-inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  max-width:680px;margin:0 auto;
  padding:0 var(--sp-3);
}
.kb-logo{
  display:inline-flex;align-items:center;gap:var(--sp-2);
}
.kb-logo-text{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:1.35rem;
  color:var(--c-rose-700);
  letter-spacing:0.04em;
}
.kb-burger{
  width:42px;height:42px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--r-md);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease;
}
.kb-burger:active{background:var(--c-rose-100)}
.kb-burger-bar{
  width:22px;height:2px;
  background:var(--c-rose-700);
  border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
}
.kb-burger[aria-expanded="true"] .kb-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kb-burger[aria-expanded="true"] .kb-burger-bar:nth-child(2){opacity:0}
.kb-burger[aria-expanded="true"] .kb-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* === Drawer === */
.kb-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(82vw,340px);
  background:#fff;
  box-shadow:var(--sh-xl);
  z-index:900;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.kb-drawer[aria-hidden="false"]{transform:translateX(0)}
.kb-drawer-inner{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.kb-drawer-close{
  width:40px;height:40px;
  border-radius:var(--r-md);
  font-size:1.25rem;
  color:var(--c-text-soft);
  margin-bottom:var(--sp-3);
  margin-left:auto;
  display:block;
  transition:background .2s ease;
}
.kb-drawer-close:active{background:var(--c-rose-100)}
.kb-drawer-nav{display:flex;flex-direction:column}
.kb-drawer-link{
  padding:var(--sp-3) var(--sp-2);
  border-bottom:1px solid var(--c-line-soft);
  color:var(--c-text);
  font-size:0.98rem;
  font-weight:500;
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:52px;
}
.kb-drawer-link:last-of-type{border-bottom:0}
.kb-drawer-link--ext{color:var(--c-text-soft);font-weight:400}
.kb-drawer-link--ext::after{
  content:"↗";margin-left:auto;font-size:0.9rem;color:var(--c-text-muted);
}
.kb-drawer-divider{height:1px;background:var(--c-line);margin:var(--sp-3) 0}
.kb-drawer-meta{
  margin-top:var(--sp-4);
  text-align:center;
  font-size:0.78rem;
  color:var(--c-text-muted);
  font-family:var(--f-serif);
  letter-spacing:0.05em;
}
.kb-drawer-overlay{
  position:fixed;inset:0;
  background:rgba(61,45,36,0.5);
  backdrop-filter:blur(2px);
  z-index:850;
  opacity:0;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
}
.kb-drawer-overlay[hidden]{display:none}
.kb-drawer-overlay.kb-show{opacity:1}

/* === Main === */
main{
  min-height:calc(100vh - var(--header-h) - 280px);
  padding:var(--sp-4) 0 var(--sp-6);
}

/* === Hero === */
.kb-hero{
  text-align:center;
  padding:var(--sp-5) var(--sp-3) var(--sp-4);
  position:relative;
}
.kb-hero::before{
  content:"";display:block;
  width:48px;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-rose-300),transparent);
  margin:0 auto var(--sp-3);
}
.kb-hero-eyebrow{
  font-family:var(--f-serif);
  font-size:0.8rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  margin-bottom:var(--sp-2);
}
.kb-hero-title{
  font-family:var(--f-serif);
  font-size:3rem;
  font-weight:600;
  color:var(--c-rose-700);
  letter-spacing:0.02em;
  line-height:1;
  margin-bottom:var(--sp-2);
}
.kb-hero-subtitle{
  font-size:0.95rem;
  color:var(--c-text-soft);
  margin-bottom:var(--sp-3);
  font-weight:400;
  letter-spacing:0.05em;
}
.kb-hero-badge{
  display:inline-block;
  padding:6px 14px;
  background:linear-gradient(135deg,var(--c-rose-100),var(--c-blush));
  color:var(--c-rose-700);
  border-radius:var(--r-pill);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.08em;
  box-shadow:var(--sh-sm);
}
.kb-hero::after{
  content:"";display:block;
  width:48px;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-rose-300),transparent);
  margin:var(--sp-3) auto 0;
}

/* === Section === */
.kb-section{margin-top:var(--sp-5);margin-bottom:var(--sp-5)}
.kb-section-head{
  text-align:center;
  margin-bottom:var(--sp-4);
}
.kb-section-eyebrow{
  font-family:var(--f-serif);
  font-size:0.78rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--c-rose-500);
  margin-bottom:var(--sp-1);
}
.kb-section-title{
  font-size:1.45rem;
  font-weight:700;
  color:var(--c-text);
  margin-bottom:var(--sp-2);
}
.kb-section-desc{
  font-size:0.88rem;
  color:var(--c-text-soft);
  letter-spacing:0.03em;
}

/* === Game cards === */
.kb-games{
  display:grid;
  grid-template-columns:repeat(2,1fr);  /* 手機:一行兩欄 */
  gap:var(--sp-3);
}
/* iPad(中間平衡):一行四欄,grid 突破窄容器置中 */
@media (min-width:768px) and (max-width:1199px){
  .kb-games{
    grid-template-columns:repeat(4,1fr);
    gap:var(--sp-4);
    width:min(92vw,920px);
    margin-left:50%;
    transform:translateX(-50%);
  }
}
/* 桌機:一行六欄,grid 突破窄容器置中 */
@media (min-width:1200px){
  .kb-games{
    grid-template-columns:repeat(6,1fr);
    gap:var(--sp-4);
    width:min(92vw,1360px);
    margin-left:50%;
    transform:translateX(-50%);
  }
}

.kb-card{
  display:block;
  background:#fff;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-md);
  border:1px solid rgba(0,0,0,0.05);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color:transparent;
  position:relative;
  min-height:auto;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}
.kb-card:active{transform:translateY(2px) scale(0.98);box-shadow:var(--sh-sm)}
@media (hover:hover){
  .kb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
}
.kb-card-thumb{
  aspect-ratio:4/5;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.kb-card-thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,0.25),transparent 60%);
  pointer-events:none;
}
.kb-card-icon{
  width:44px;height:44px;
  color:#fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  position:relative;z-index:1;
}
.kb-card-body{
  padding:var(--sp-3) var(--sp-3) var(--sp-4);
  text-align:center;
}
.kb-card-title{
  font-size:0.98rem;
  font-weight:700;
  color:var(--c-text);
  letter-spacing:-0.01em;
  margin-bottom:var(--sp-1);
}
.kb-card-desc{
  font-size:0.75rem;
  color:var(--c-text-soft);
  margin-bottom:var(--sp-2);
  letter-spacing:0.02em;
}
.kb-card-status{
  display:inline-block;
  font-size:0.7rem;
  color:var(--c-rose-600);
  font-weight:500;
  padding:3px 10px;
  background:var(--c-rose-100);
  border-radius:var(--r-pill);
  letter-spacing:0.05em;
}
.kb-card--soon{opacity:0.92}
.kb-card--soon .kb-card-thumb{filter:saturate(0.85)}

/* === Footer === */
.kb-footer{
  margin-top:var(--sp-6);
  padding:var(--sp-4) 0 calc(var(--sp-5) + var(--safe-bottom));
  border-top:1px solid var(--c-line-soft);
  background:var(--c-cream);
  color:var(--c-text-soft);
  font-size:0.82rem;
}
.kb-footer-inner{max-width:560px;margin:0 auto;padding:0 var(--sp-3)}
.kb-disclaimer{
  line-height:1.85;
  margin-bottom:var(--sp-3);
  letter-spacing:0.02em;
}
.kb-footer-meta{
  display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  font-size:0.76rem;
}
.kb-tag{
  background:linear-gradient(135deg,var(--c-rose-200),var(--c-blush));
  color:var(--c-rose-700);
  padding:3px 10px;
  border-radius:var(--r-pill);
  font-weight:500;
  letter-spacing:0.05em;
}
.kb-footer-link{color:var(--c-rose-700);text-decoration:underline;text-underline-offset:3px}
.kb-footer-brand{margin-left:auto;font-family:var(--f-serif);letter-spacing:0.05em}

/* === Cookie banner === */
.kb-cookie{
  position:fixed;
  bottom:calc(var(--sp-3) + var(--safe-bottom));
  left:var(--sp-3);right:var(--sp-3);
  max-width:560px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);
  padding:var(--sp-3);
  z-index:1000;
}
.kb-cookie-text{font-size:0.82rem;margin-bottom:var(--sp-2);color:var(--c-text);line-height:1.6}
.kb-cookie-actions{display:flex;gap:var(--sp-2)}
.kb-btn{
  flex:1;
  padding:0.65rem var(--sp-3);
  border-radius:var(--r-md);
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.05em;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .15s ease;
}
.kb-btn:active{transform:translateY(1px)}
.kb-btn-primary{background:linear-gradient(135deg,var(--c-rose-600),var(--c-rose-700));color:#fff;box-shadow:var(--sh-sm)}
.kb-btn-ghost{background:transparent;color:var(--c-rose-700);border:1px solid var(--c-rose-200)}

/* === Privacy page === */
.kb-privacy{padding:var(--sp-2) 0}
.kb-privacy-title{
  font-family:var(--f-serif);
  font-size:2rem;
  color:var(--c-rose-700);
  margin-bottom:var(--sp-3);
  text-align:center;
  font-weight:600;
}
.kb-privacy-intro{
  color:var(--c-text-soft);
  margin-bottom:var(--sp-5);
  padding:var(--sp-3) var(--sp-4);
  background:linear-gradient(135deg,var(--c-rose-50),var(--c-cream));
  border-radius:var(--r-lg);
  font-size:0.88rem;
  line-height:1.8;
  border:1px solid var(--c-line-soft);
}
.kb-privacy-section{margin-bottom:var(--sp-5)}
.kb-privacy-section h2{
  font-size:1.1rem;
  color:var(--c-rose-700);
  margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-1);
  border-bottom:2px solid var(--c-blush);
}
.kb-privacy-section h3{
  font-size:0.95rem;
  color:var(--c-text);
  margin-top:var(--sp-3);
  margin-bottom:var(--sp-1);
  font-weight:600;
}
.kb-privacy-section p{
  margin-bottom:var(--sp-2);
  font-size:0.9rem;
  line-height:1.8;
}
.kb-privacy-section ul{
  margin:var(--sp-2) 0 var(--sp-3) var(--sp-4);
  font-size:0.9rem;
  line-height:1.9;
}
.kb-privacy-section li{margin-bottom:0.2rem}
.kb-privacy-section strong{color:var(--c-rose-700)}
.kb-privacy-meta{
  text-align:center;
  font-size:0.78rem;
  color:var(--c-text-muted);
  margin-top:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid var(--c-line-soft);
  font-family:var(--f-serif);
  letter-spacing:0.05em;
}

/* === A11y === */
:focus-visible{outline:2px solid var(--c-rose-400);outline-offset:2px;border-radius:var(--r-sm)}
button{min-height:44px;min-width:44px}
.kb-drawer-link{min-height:48px}

/* === KB Logo 視覺體系（套 5/26 規格報告）=== */
:root{
  --f-display:"Cinzel","Trajan Pro","Times New Roman",serif; /* Trajan 開源替代 */
  --c-logo-black:#0a0a0a; /* KB Logo 純黑(報告 §九)*/
}

/* === Logo 字標(套主標 HS 0.9 + Tracking 510 法則)=== */
.kb-logo-text{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(0.86rem,3.2vw,1.08rem); /* KEYBEAUTY PLAY 13字,header 窄條需縮小 */
  color:var(--c-logo-black);
  letter-spacing:0.14em; /* nav 條收緊字距(hero 保留 0.31em 呼吸) */
  text-transform:uppercase;
  transform:scaleX(0.9); /* 主標 HS 0.9 */
  transform-origin:left center;
  display:inline-block;
  white-space:nowrap;
}

/* === Hero 大字標(套 KB Logo 體系)=== */
.kb-hero-title{
  font-family:var(--f-display);
  font-size:3rem;
  font-weight:600;
  color:var(--c-logo-black); /* 純黑取代玫瑰金 */
  letter-spacing:0.31em; /* 主標字距 */
  line-height:1.05;
  margin-bottom:var(--sp-3);
  margin-left:0.31em; /* 補償字距造成的右偏 */
  text-transform:uppercase;
  transform:scaleX(0.9); /* HS 0.9 */
  transform-origin:center;
  display:inline-block;
}
.kb-hero-subtitle{
  font-family:var(--f-display);
  font-size:0.78rem; /* 主標的 ~26%,呼應主副 2.25:1 比例 */
  font-weight:400;
  color:var(--c-logo-black);
  letter-spacing:0.27em; /* 副標 Tracking 270 */
  text-transform:uppercase;
  margin-top:0;
  margin-bottom:var(--sp-3);
  transform:scaleX(0.8); /* HS 0.8 */
  transform-origin:center;
  display:inline-block;
}
.kb-hero-eyebrow{
  display:none; /* 對齊 KB Logo 體系,不用 eyebrow */
}
.kb-hero-badge{
  font-family:var(--f-sans);
  background:transparent;
  color:var(--c-text-soft);
  box-shadow:none;
  border:1px solid var(--c-line);
  letter-spacing:0.12em;
  font-size:0.72rem;
  padding:5px 14px;
  margin-top:var(--sp-3);
}

/* === Section title 維持 NotoSansTC(內容層) === */
.kb-section-title{font-family:var(--f-sans)}
.kb-section-eyebrow{
  font-family:var(--f-display);
  color:var(--c-logo-black);
  letter-spacing:0.31em;
  font-weight:500;
}

/* === 中文副標額外行(報告 §4.6 混合版概念)=== */
.kb-hero-zh{
  font-family:var(--f-sans);
  font-size:0.85rem;
  color:var(--c-text-soft);
  letter-spacing:0.3em;
  margin-top:0;
  margin-bottom:var(--sp-3);
  font-weight:500;
}

/* === 上下對稱裝飾線(維持女性向氣質)=== */
.kb-hero::before,.kb-hero::after{
  width:80px;
  background:linear-gradient(90deg,transparent,var(--c-logo-black),transparent);
  opacity:0.4;
}

/* === Footer brand 也用 Cinzel === */
.kb-footer-brand{font-family:var(--f-display);letter-spacing:0.15em;color:var(--c-logo-black)}

/* === KB Logo RWD 比例化系統(對齊 5/26 報告四大法則)===
   - 容器寬 W = clamp(手機適配)
   - 主副齊寬於 W
   - 主標高 = W × 0.090 (對應 70/780 = 0.090)
   - 副標高 = W × 0.042 (對應 33/780 = 0.042)
   - Gap = 主標高 × 1/5
   - 主副體積比 2.12:1 自動成立
*/
:root{
  /* 手機 Logo 容器寬:手機螢幕 ~85% 寬,但最大 320px(不超出視覺重心)*/
  --logo-w:clamp(240px,72vw,320px);

  /* 從 W 反算所有比例(對齊 KB Logo PSD 數字)*/
  --logo-main-fs:calc(var(--logo-w) * 0.060);   /* 70/780 主標 cap-height */
  --logo-sub-fs:calc(var(--logo-w) * 0.048);    /* 33/780 副標 cap-height */
  --logo-zh-fs:calc(var(--logo-w) * 0.036);     /* 中文略小,維持女性向細緻 */
  --logo-gap:calc(var(--logo-main-fs) * 0.20);  /* Gap = 主標高 × 1/5 */
}

/* === Logo 容器(置中、固定寬度系統)=== */
.kb-hero{
  width:100%;
  max-width:none;
  padding:var(--sp-5) 0 var(--sp-4);
}
.kb-hero::before,.kb-hero::after{
  width:var(--logo-w);
  max-width:60%;
}

/* === 主標 KB PLAY === */
.kb-hero-title{
  width:var(--logo-w);
  margin:0 auto var(--logo-gap);
  font-family:var(--f-display);
  font-size:var(--logo-main-fs);
  font-weight:500;
  color:var(--c-logo-black);
  letter-spacing:0.31em;     /* Tracking 510 ≈ 31% em */
  text-transform:uppercase;
  line-height:1;
  text-align:center;
  /* transform scaleX 移除 — 改用 font-stretch 模擬(部分字體有)
     或保留 transform 但容器寬度由 W 控制 */
  display:block;
}

/* === 副標 Mini Games · By Keybeauty === */
.kb-hero-subtitle{
  width:var(--logo-w);
  margin:0 auto var(--logo-gap);
  font-family:var(--f-display);
  font-size:var(--logo-sub-fs);
  font-weight:400;
  color:var(--c-logo-black);
  letter-spacing:0.27em;     /* Tracking 270 = 27% em */
  text-transform:uppercase;
  line-height:1;
  text-align:center;
  display:block;
}

/* === 中文補語(維持齊寬,字體切 NotoSansTC)=== */
.kb-hero-zh{
  width:var(--logo-w);
  margin:0 auto var(--sp-3);
  font-family:var(--f-sans);
  font-size:var(--logo-zh-fs);
  font-weight:500;
  color:var(--c-text-soft);
  letter-spacing:0.4em;     /* 中文字距大(對應報告 4.6.5 ②)*/
  text-align:center;
  line-height:1.4;
  display:block;
}

/* === Badge 不參與比例,維持女性向裝飾 === */
.kb-hero-badge{
  display:inline-block;
  margin-top:var(--sp-3);
}

/* === 桌機微調(只放大容器,比例不變)=== */
@media (min-width:768px){
  :root{
    --logo-w:clamp(320px,40vw,420px);
  }
}

/* === 超小手機(iPhone SE 320px)兜底 === */
@media (max-width:359px){
  :root{
    --logo-w:240px;
  }
}

/* === Card 右上角分類彩帶 === */
.kb-card { position: relative; }
.kb-ribbon {
  position: absolute;
  top: 11px;
  right: -30px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #E5484D, #B01E28);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 34px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(143,90,60,0.25);
  z-index: 3;
  pointer-events: none;
}

/* === Disabled card(未開發遊戲)=== */
.kb-card--disabled { opacity: 0.6; pointer-events: none; cursor: default; }
.kb-card--disabled .kb-card-thumb img { filter: grayscale(0.3); }
.kb-ribbon--gray { background: linear-gradient(135deg, #B0A8A2, #8A7A72) !important; }

/* === 遊戲搜尋框 === */
.kb-search { max-width: 480px; margin: 0 auto 1.5rem; }
.kb-search input {
  width: 100%; padding: 0.8rem 1.2rem;
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  font-size: 0.95rem; background: #fff; color: var(--c-text);
  -webkit-appearance: none;
}
.kb-search input:focus { outline: none; border-color: var(--c-rose-400); box-shadow: 0 0 0 3px rgba(229,158,114,0.12); }
.kb-search input::placeholder { color: var(--c-text-muted); }
.kb-search-empty { text-align: center; color: var(--c-text-soft); font-size: 0.9rem; margin-top: 1rem; }


/* === KEYBEAUTY PLAY 字標:逐字母尺寸還原 KB Logo VS 法則(2026-06-01) ===
   K=1.00(large cap 定錨) / B=0.95(small cap 拉高) / 其餘+PLAY=0.85(small cap 矮,從屬)
   用 font-size 同時縮高縮寬,比純 VS 更貼近 Trajan small caps 真實字寬 */
.lc-k{font-size:1em}
.lc-b{font-size:0.95em}
.lc-s{font-size:0.85em}
.lc-sp{display:inline-block;width:0.9em}
.kb-hero-title span,.kb-logo-text span{vertical-align:baseline;line-height:1}


/* === Header 橫向 nav:web 桃機顯示,平板/手機用 burger(2026-06-01)=== */
.kb-nav{display:none}
.kb-nav-link{
  font-family:var(--f-serif);
  font-size:1rem;
  color:var(--c-text);
  text-decoration:none;
  letter-spacing:0.02em;
  white-space:nowrap;
  transition:color .2s ease;
}
.kb-nav-link:hover{color:var(--c-rose-700)}
.kb-nav-link--ext{color:var(--c-text-soft);font-weight:400}
@media (min-width:1200px){
  .kb-header-inner{max-width:1080px}
  .kb-nav{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto}
  .kb-search-toggle{margin-left:var(--sp-3)}
  .kb-burger{display:none}   /* 桃機隱藏漢堡，改用橫向 nav */
}


/* === Footer 四欄專業版(2026-06-01):品牌/小遊戲/診所/探索 + 底部聲明 === */
.kb-footer-inner{max-width:1080px;margin:0 auto;padding:0 var(--sp-4)}
.kb-footer-cols{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:768px){
  .kb-footer-cols{grid-template-columns:repeat(2,1fr);gap:var(--sp-5) var(--sp-4)}
}
@media (min-width:1200px){
  .kb-footer-cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-4)}
}
.kb-footer-col{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.kb-footer-h{
  font-family:var(--f-serif);font-size:0.95rem;font-weight:600;
  color:var(--c-logo-black);margin:0 0 var(--sp-1);letter-spacing:0.05em;
}
.kb-footer-col a{
  font-size:0.88rem;color:var(--c-text-soft);text-decoration:none;
  letter-spacing:0.02em;transition:color .2s ease;line-height:1.4;
}
.kb-footer-col a:hover{color:var(--c-rose-700)}
.kb-footer-logo{
  font-family:var(--f-display);font-size:1.05rem;color:var(--c-logo-black);
  text-transform:uppercase;letter-spacing:0.13em;
  transform:scaleX(0.9);transform-origin:left center;display:inline-block;
  white-space:nowrap;margin-bottom:var(--sp-1);
}
.kb-footer-logo span{vertical-align:baseline;line-height:1}
.kb-footer-tagline{font-family:var(--f-serif);font-size:0.9rem;color:var(--c-text);margin:0}
.kb-footer-note{font-size:0.8rem;color:var(--c-text-soft);margin:0}
.kb-footer-bottom{
  border-top:1px solid var(--c-line-soft);margin-top:var(--sp-5);
  padding-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);
}
@media (min-width:1200px){
  .kb-footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}
}
.kb-disclaimer{line-height:1.75;letter-spacing:0.02em;margin:0;font-size:0.8rem;max-width:46em}
.kb-footer-legal{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin:0;font-size:0.76rem}
.kb-footer-brand{font-family:var(--f-display);letter-spacing:0.1em;color:var(--c-logo-black)}


/* === Hero lead 引導句(整併 section-desc,2026-06-01) === */
.kb-hero-lead{font-family:var(--f-serif);font-size:0.98rem;color:var(--c-text-soft);letter-spacing:0.03em;margin-top:var(--sp-2);line-height:1.5}
@media (min-width:768px){.kb-hero-lead{font-size:1.05rem}}


/* === 全站整合搜尋(A 方案,2026-06-01) === */
.kb-search-toggle{
  display:none;
  width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:var(--r-md);color:var(--c-text);background:none;border:0;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.kb-search-toggle:hover{color:var(--c-rose-700);background:var(--c-rose-100)}
@media (min-width:1200px){ .kb-search-toggle{display:inline-flex} }
.kb-header-search{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:690;
  display:flex;justify-content:center;
  padding:var(--sp-3) var(--sp-4);
  background:rgba(255,253,251,0.98);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--c-line-soft);
}
.kb-header-search[hidden]{display:none}
.kb-header-search .kb-search-input{width:100%;max-width:480px}
.kb-drawer-search{margin-bottom:var(--sp-3)}
.kb-search-input{
  width:100%;box-sizing:border-box;
  padding:var(--sp-3) var(--sp-4);
  font-size:1rem;font-family:var(--f-serif);
  color:var(--c-text);
  background:var(--c-cream);
  border:1px solid var(--c-line);
  border-radius:var(--r-pill);
  outline:none;transition:border-color .2s ease,box-shadow .2s ease;
}
.kb-search-input:focus{border-color:var(--c-rose-400,var(--c-rose-700));box-shadow:0 0 0 3px var(--c-rose-100)}
.kb-search-input::placeholder{color:var(--c-text-soft)}


/* === 麵包屑(2026-06-01) === */
.kb-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.45em;
  font-size:0.82rem;color:var(--c-text-soft);
  margin:0 auto var(--sp-3);padding-top:var(--sp-3);max-width:var(--logo-w,680px);
}
@media (min-width:1200px){ .kb-breadcrumb{max-width:1080px} }
.kb-breadcrumb a{color:var(--c-text-soft);text-decoration:none;transition:color .2s ease}
.kb-breadcrumb a:hover{color:var(--c-rose-700)}
.kb-breadcrumb [aria-current="page"]{color:var(--c-text);font-weight:500}
.kb-breadcrumb-sep{color:var(--c-line);font-size:0.9em}


/* === 「誰也在玩」社會認同牆(通用器官,2026-06-01) === */
.kb-wall{padding:var(--sp-5) 0 var(--sp-6);border-top:1px solid var(--c-line-soft)}
.kb-wall-inner{max-width:560px;margin:0 auto;padding:0 var(--sp-4)}
@media (min-width:1200px){.kb-wall-inner{max-width:720px}}
.kb-wall-title{font-family:var(--f-serif);font-size:1.1rem;color:var(--c-logo-black);text-align:center;margin:0 0 var(--sp-4);letter-spacing:0.03em}
.kb-wall-title span{color:var(--c-rose-700);font-weight:600}
.kb-wall-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.kb-wall-item{display:flex;gap:var(--sp-3);align-items:flex-start}
.kb-wall-ava{flex:0 0 auto;width:38px;height:38px;border-radius:50%;color:#fff;font-size:1rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm,0 1px 3px rgba(0,0,0,.1))}
.kb-wall-body{flex:1;min-width:0}
.kb-wall-meta{margin:0 0 2px;font-size:0.82rem;color:var(--c-text-soft);display:flex;align-items:center;gap:0.5em;flex-wrap:wrap}
.kb-wall-meta b{color:var(--c-text);font-weight:600}
.kb-wall-tag{background:linear-gradient(135deg,var(--c-rose-200),var(--c-blush));color:var(--c-rose-700);padding:1px 8px;border-radius:var(--r-pill);font-size:0.72rem}
.kb-wall-time{color:var(--c-line);font-size:0.74rem}
.kb-wall-item .kb-wall-msg{margin:0;font-size:0.9rem;color:var(--c-text);line-height:1.5;word-break:break-word}
.kb-wall-empty{text-align:center;color:var(--c-text-soft);font-size:0.9rem;padding:var(--sp-4) 0}
.kb-wall-box{background:var(--c-cream);border:1px solid var(--c-line-soft);border-radius:var(--r-xl);padding:var(--sp-4)}
.kb-wall-prompt{margin:0 0 var(--sp-3);font-family:var(--f-serif);font-size:0.95rem;color:var(--c-text);text-align:center}
.kb-wall-input{width:100%;box-sizing:border-box;padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);font-size:0.92rem;font-family:var(--f-serif);color:var(--c-text);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);outline:none}
.kb-wall-input:focus{border-color:var(--c-rose-400,var(--c-rose-700));box-shadow:0 0 0 3px var(--c-rose-100)}
.kb-wall-textarea{min-height:64px;resize:vertical}
.kb-wall-send{width:100%;padding:var(--sp-2) var(--sp-3);font-size:0.95rem;font-family:var(--f-serif);color:#fff;background:#D87A4A;border:0;border-radius:var(--r-pill);cursor:pointer;transition:background .2s ease}
.kb-wall-send:hover{background:#C66A3C}
.kb-wall-send:disabled{opacity:0.5;cursor:default}
.kb-wall-thanks{text-align:center;color:var(--c-rose-700);font-size:0.88rem;margin:var(--sp-2) 0 0}