/* Le Menu d'Amour 公共页面样式。
   与 App 同一视觉基调（勃艮第红 / 古金 / 象牙白），但优先保证可读性与无障碍对比度。 */

:root {
  --bg: #12070a;
  --surface: #1e0b10;
  --burgundy: #400d1d;
  --gold: #d9b26a;
  --gold-muted: #a9834a;
  --text: #f4ede3;
  --muted: #c9b7a6;
  --danger: #d2694f;
  --radius: 16px;
  --max-width: 46rem;
}


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Helvetica Neue",
    Arial, sans-serif;
  line-height: 1.65;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

a {
  color: var(--gold);
}

h1 {
  font-size: 1.85rem;
  line-height: 1.25;
  margin: 1.5rem 0 0.5rem;
}

h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
  color: var(--gold);
}

p,
li {
  color: var(--text);
}

.intro {
  color: var(--muted);
}

ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}

li + li {
  margin-top: 0.35rem;
}

/* ---- 语言切换 ---- */
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid rgba(217, 178, 106, 0.25);
  position: sticky;
  top: 0;
  z-index: 10;
}

.lang-button {
  background: transparent;
  border: 1px solid var(--gold-muted);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.lang-button.active {
  background: var(--gold);
  color: var(--bg);
}

/* ---- 站点结构 ---- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(217, 178, 106, 0.25);
}

.brand {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--text);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.92rem;
}

.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(217, 178, 106, 0.25);
  color: var(--muted);
  font-size: 0.85rem;
}

.draft-notice {
  color: var(--danger);
  font-weight: 600;
}

.missing {
  color: var(--danger);
}

.note {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---- 按钮 ---- */
button {
  font: inherit;
}

button.danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
}

button[data-role="cancel-delete"],
button[data-role="retry"] {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-muted);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  margin-left: 0.5rem;
}

.google-button {
  margin: 1rem 0;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- 语言块显隐：默认全部显示（无 JS 时也能读到内容） ---- */
html[data-lang="en-US"] [data-lang-block]:not([data-lang-block="en-US"]),
html[data-lang="ja-JP"] [data-lang-block]:not([data-lang-block="ja-JP"]),
html[data-lang="ko-KR"] [data-lang-block]:not([data-lang-block="ko-KR"]),
html[data-lang="es-ES"] [data-lang-block]:not([data-lang-block="es-ES"]),
html[data-lang="pt-BR"] [data-lang-block]:not([data-lang-block="pt-BR"]),
html[data-lang="fr-FR"] [data-lang-block]:not([data-lang-block="fr-FR"]),
html[data-lang="de-DE"] [data-lang-block]:not([data-lang-block="de-DE"]),
html[data-lang="zh-Hans"] [data-lang-block]:not([data-lang-block="zh-Hans"]),
html[data-lang="zh-Hant"] [data-lang-block]:not([data-lang-block="zh-Hant"]) {
  display: none;
}

@media (hover: hover) {
  .site-nav a:hover,
  .lang-button:hover {
    text-decoration: underline;
  }
}

/* 官网与游戏共用餐厅视觉；不依赖外部字体或固定高度卡面。 */
:root { --bg:#100c0b; --surface:#1c1413; --burgundy:#4b1722; --gold:#d7b879; --gold-muted:#9f8553; --text:#f1e8d6; --muted:#b7a99a; --danger:#eea28b; --max-width:74rem; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { background:radial-gradient(ellipse at 80% 0%,#3c1c1d55,transparent 55%),var(--bg); font-size:16px; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button,input,select { min-height:44px; }
a { text-underline-offset:4px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
h1,h2,h3,.brand { font-family:Georgia,"Times New Roman","Noto Serif",serif; font-weight:400; }
h1 { font-size:clamp(2.1rem,4.5vw,4.6rem); letter-spacing:-.035em; line-height:1.18; }
h2 { font-size:clamp(1.7rem,3vw,2.8rem); letter-spacing:-.025em; }
h3 { font-size:1.2rem; }
.wrap { padding:0 2rem 3rem; }
main { overflow-wrap:anywhere; }
main > h1,main > .intro,main > section:not(.hero,.menu-section,.how-section,.last-invitation) { max-width:50rem; margin-left:auto; margin-right:auto; }
main > section { padding-block:.6rem; }
.lang-switch { position:static; background:#100c0b; padding:.45rem max(1rem,env(safe-area-inset-right)); gap:.1rem; border-bottom:1px solid #d7b87920; }
.lang-button { min-height:44px; border:0; color:var(--muted); border-radius:0; font-size:.74rem; padding:.2rem .65rem; }
.lang-button.active { color:var(--gold); background:transparent; box-shadow:inset 0 -1px var(--gold); }
.site-header { padding:1.5rem 0; align-items:center; border-color:#d7b87930; }
.brand { font-size:1.55rem; letter-spacing:-.02em; }
.site-nav { gap:.5rem 1.3rem; font-size:.75rem; }
.site-nav a { text-decoration:none; min-height:44px; display:inline-flex; align-items:center; color:var(--muted); }
.eyebrow { color:var(--gold); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase; font-weight:500; }
.hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:4rem; padding:5.5rem 0 5rem; }
.hero .intro { max-width:30rem; margin:1.7rem 0 2.1rem; line-height:1.9; }
.hero h1 { margin:1.2rem 0; white-space:normal; }
.primary,.secondary,.start-link { display:inline-flex; align-items:center; justify-content:center; gap:1.5rem; padding:.85rem 1.7rem; min-height:50px; border:1px solid var(--gold); border-radius:3px; font-size:.9rem; text-decoration:none; font-weight:600; transition:background .2s,transform .2s; }
.primary,.start-link { color:#21160f; background:var(--gold); }
.secondary { color:var(--gold); background:transparent; }
.primary:hover:not(:disabled),.start-link:hover { background:#ecd29c; transform:translateY(-1px); }
.hero-note,.art-caption { margin-top:1.3rem; color:var(--muted); font-size:.7rem; letter-spacing:.08em; }
.hero-art { position:relative; min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; }
.hero-art:before { content:""; position:absolute; inset:-3rem -1rem; background:linear-gradient(0deg,var(--bg),transparent 55%,var(--bg)),url('/assets/welcome-background.webp') center 42%/cover; opacity:.63; z-index:-2; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent); }
.hero-card { width:240px; min-height:340px; background:linear-gradient(#481728df,#230d15ef),url('/assets/card-back.webp') center/cover; border:1px solid #b18b52; outline:1px solid #a5824d66; outline-offset:-12px; box-shadow:0 25px 70px #000a; transform:rotate(8deg); color:var(--gold); display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; text-align:center; font-family:Georgia,serif; padding:2rem; }
.hero-card>span { font-size:2rem; line-height:1.25; }
.hero-card b { font-size:3.3rem; font-weight:400; }
.hero-card small { font-size:.49rem; letter-spacing:.18em; }
.art-caption { margin-top:3rem; font-size:.55rem; }
.menu-section { border-block:1px solid #d7b87930; padding:3.5rem 0 !important; text-align:center; }
.menu-section h2 { margin:1rem 0; }.menu-section>.intro { max-width:35rem; margin:0 auto 2rem; }
.landing-courses { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #d7b87930; margin-top:2rem; }
.landing-courses article { padding:2rem .8rem; border-right:1px solid #d7b87930; background:#1c121240; }
.landing-courses article:last-child { border-right:0; }.landing-courses article>span:last-child { font-size:1.6rem; color:var(--gold); }
.course-number { font-family:Georgia,serif; color:var(--gold-muted); font-size:.78rem; letter-spacing:.1em; }
.free-note { color:var(--muted); font-size:.8rem; margin:1.5rem 0 0; }
.how-section { display:grid; grid-template-columns:1fr 1fr; gap:5rem; padding:4rem 0 !important; border-bottom:1px solid #d7b87930; }
.how-section h2 { margin:1rem 0; }.how-section ol { margin:0; padding-left:2rem; }.how-section li { padding:.9rem .8rem; border-bottom:1px solid #d7b87920; }.how-section li::marker { color:var(--gold); font-family:Georgia,serif; }
.safety { font-size:.8rem; color:var(--muted); line-height:1.8; max-width:36rem; }
.last-invitation { text-align:center; padding:4rem 0 !important; }.last-invitation h2 { margin:1rem 0 2rem; }
.text-button { border:0; color:var(--muted); background:transparent; text-decoration:underline; text-underline-offset:4px; font-size:.8rem; padding:.5rem 0; }
.site-footer { font-size:.72rem; border-color:#d7b87930; margin-top:1rem; }.draft-notice { font-weight:400; }.site-footer p { color:var(--muted); }
[hidden] { display:none !important; }.ad-area { margin:3rem auto; padding:1.5rem; max-width:60rem; min-height:100px; border-top:1px solid #d7b87930; color:var(--muted); text-align:center; }.ad-area small { font-size:.65rem; display:block; margin-bottom:.7rem; }
/* 游戏：手机单列、平板限宽；横屏允许自然滚动。 */
.play-body { min-height:100svh; }.game-shell { max-width:70rem; margin:auto; padding:env(safe-area-inset-top) max(1.2rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1.2rem,env(safe-area-inset-left)); }
.game-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #d7b87930; gap:1rem; }.game-header .brand { font-size:1.6rem; }.brand span { display:block; font-family:Arial,sans-serif; font-size:.5rem; color:var(--gold-muted); letter-spacing:.2em; margin-top:.2rem; }
.icon-button { color:var(--gold); border:1px solid #d7b87940; background:transparent; width:46px; height:46px; font-size:1.5rem; border-radius:50%; flex-shrink:0; }
.game-main { max-width:48rem; margin:auto; text-align:center; padding:2.7rem 0 3rem; min-height:calc(100svh - 180px); }
.game-main>h1 { font-size:clamp(1.8rem,4vw,2.8rem); margin:1rem auto 1.5rem; outline:none; max-width:44rem; }
.game-main>.intro { max-width:33rem; margin:0 auto 2rem; }.panel { max-width:35rem; padding:2.5rem !important; margin:1.7rem auto; border:1px solid #d7b87930; background:linear-gradient(140deg,#341b2080,#15100e); border-radius:4px; }.panel .primary,.panel .secondary { margin:.6rem .25rem; }.ornament { font-size:2.8rem; color:var(--gold); margin:.3rem 0 1rem; }.google-login { display:flex; justify-content:center; margin:2rem auto; min-height:44px; }.google-login>div { max-width:100%; }.welcome-panel .note { margin-top:2rem; }.note { font-size:.76rem; color:var(--muted); }.game-main .safety { margin:1.5rem auto; }
.seat-form { display:flex; flex-direction:column; text-align:left; }.seat-form p { color:var(--muted); font-size:.85rem; }.seat-form label,.settings-panel label { display:block; font-size:.8rem; color:var(--gold); }.seat-form input,select { display:block; width:100%; border:1px solid #d7b87950; border-radius:2px; background:#0f0b0b; color:var(--text); padding:.8rem 1rem; font:inherit; margin:.5rem 0 1rem; }.ampersand { text-align:center; font-family:Georgia,serif; font-style:italic; color:var(--gold); font-size:1.8rem; }.seat-form .primary { margin:1.2rem 0 0; }
.course-grid { border:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2rem 0; }.course-choice { position:relative; display:grid; grid-template-columns:1fr auto; padding:1.5rem; border:1px solid #d7b87940; background:#1d1413; text-align:left; gap:1rem; cursor:pointer; border-radius:4px; }.course-choice.selected { border-color:var(--gold); background:linear-gradient(130deg,#4a2028,#231617); }.course-choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }.course-choice:has(input:focus-visible) { outline:2px solid var(--gold); outline-offset:4px; }.course-name { grid-row:2; font-family:Georgia,serif; font-size:1.25rem; }.course-dot { grid-column:2; grid-row:1/3; align-self:center; color:var(--gold); font-size:1.5rem; }.round-meta { display:flex; justify-content:space-between; gap:1rem; max-width:29rem; margin:0 auto 1rem; font-size:.75rem; color:var(--muted); }
.playing-card { display:block; width:100%; max-width:29rem; margin:0 auto; border:1px solid var(--gold-muted); border-radius:10px; padding:2.5rem 2rem; box-shadow:0 20px 50px #0005; }.card-back { min-height:400px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.8rem; color:var(--gold); background:linear-gradient(#491925c9,#240d15eb),url('/assets/card-back.webp') center/cover; outline:1px solid #d7b87950; outline-offset:-13px; }.card-back-brand { font-family:Georgia,serif; font-size:2.5rem; line-height:1.2; }.card-back-star { font-size:3.5rem; }.flip-prompt { font-size:.8rem; }.revealed { background:#f1e6cf; color:#321b1b; animation:card-reveal .3s ease-out; }.revealed .eyebrow { color:#76532b; }.revealed .ornament { font-size:1.8rem; color:#8e683c; }.revealed h2 { color:#45202b; font-size:1.75rem; margin:1rem 0 1.5rem; }.card-instruction { color:#321b1b; white-space:pre-wrap; font-size:1.08rem; line-height:1.95; text-align:start; margin:0; }.card-illustration { width:100%; max-height:220px; object-fit:contain; margin:1rem 0; }.card-rule { color:#997444; margin-top:2rem; font-size:.8rem; }.game-actions { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:1.5rem auto; max-width:32rem; }.game-actions .primary { flex:1 1 100%; }.game-actions .secondary { flex:1; min-width:120px; font-size:.8rem; }
.settings-panel { text-align:left; }.settings-links { display:flex; flex-direction:column; align-items:flex-start; margin:1.3rem 0; }.settings-links a { display:flex; align-items:center; min-height:44px; }.account-id { font-size:.8rem; color:var(--muted); }.feedback { padding:1rem; border:1px solid #bf6b56; background:#572b2233; border-radius:4px; font-size:.9rem; }.feedback.error { color:#ffc4af; }.loading-note { color:var(--gold); font-size:.8rem; }.game-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1.2rem; padding:1.2rem 0; border-top:1px solid #d7b87930; color:var(--muted); font-size:.65rem; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes card-reveal { from { opacity:.5; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:700px) { .wrap { padding-inline:1.2rem; }.site-header { align-items:flex-start; gap:.5rem; }.site-header .brand { font-size:1.5rem; }.site-nav { gap:.3rem 1rem; }.hero { grid-template-columns:1fr; gap:2rem; padding:3rem 0; }.hero h1 { font-size:clamp(2.7rem,9vw,4rem); }.hero .intro { font-size:.95rem; }.hero-art { min-height:330px; }.hero-card { width:200px; min-height:280px; }.hero-card>span { font-size:1.7rem; }.hero-card b { font-size:2.5rem; }.hero-art:before { inset:-1rem 0; }.art-caption { margin-top:2rem; }.landing-courses { grid-template-columns:1fr 1fr; }.landing-courses article:nth-child(2) { border-right:0; }.landing-courses article:nth-child(-n+2) { border-bottom:1px solid #d7b87930; }.how-section { grid-template-columns:1fr; gap:1.5rem; padding:3rem 0 !important; }.menu-section { padding:3rem 0 !important; }.panel { padding:1.5rem !important; }.game-header { min-height:84px; }.game-header .brand { font-size:1.35rem; }.game-main { padding-top:2rem; }.game-main>h1 { font-size:1.9rem; }.course-grid { gap:.75rem; }.course-choice { padding:1.2rem; }.course-name { font-size:1.08rem; }.playing-card { padding:2rem 1.5rem; }.card-back { min-height:370px; }.game-actions .secondary { padding:.8rem 1rem; } }
@media (max-width:370px) { .course-grid { grid-template-columns:1fr; }.game-shell { padding-inline:1rem; }.lang-button { padding-inline:.4rem; }.card-instruction { font-size:1rem; } }
@media (orientation:landscape) and (max-height:600px) { .hero { padding-top:2rem; }.game-main { min-height:auto; padding-top:1.3rem; }.card-back { min-height:280px; }.game-main>h1 { margin-bottom:1rem; }.playing-card { max-width:36rem; }.card-back-brand { font-size:2rem; }.game-header { min-height:74px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none !important; transition:none !important; } }
/* 只在有足够宽高的视口预留局内广告；保留区域贯穿本局，不随广告响应移动按钮。 */
.round-layout { display:flex; flex-direction:column; }
.round-layout>* { order:1; }
.round-layout>.round-ad-top { order:0; margin-block:150px; }
.round-layout>.round-ad-bottom { order:2; margin-block:150px; }
.round-ad-reserve { flex:none; height:180px; width:100%; overflow:hidden; }
.round-ad { height:180px; padding:12px 0; border:1px solid #d7b87930; color:var(--muted); text-align:center; }
.round-ad-tools { height:100px; display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-content:center; gap:0 .5rem; }
.round-ad-tools button:last-child { grid-column:1 / -1; }
.round-ad-tools small { font-size:.7rem; }
.round-ad-tools button { min-height:44px; font-size:.75rem; }
.round-ad-slot { width:320px; height:50px; margin:0 auto; overflow:hidden; }
.round-guide { max-width:35rem; margin:2rem auto; border-block:1px solid #d7b87930; padding:1.5rem; }
.round-guide h2 { font-size:1.4rem; }
@media (max-width:359px), (max-height:699px) { .round-ad-reserve { visibility:hidden; } }