:root {
  --system-telop-height: 28px;
  /* Gold — 深みのある琥珀金（落ち着いたトーン） */
  --gold: #7e5c0a;
  --gold-bright: #9e7408;
  --gold-dim: #5e4408;
  --gold-bg: rgba(126, 92, 10, 0.10);
  --gold-border: rgba(126, 92, 10, 0.30);

  /* Backgrounds — 羊皮紙は背景のみ、カードは白系で浮かせる */
  --bg-darkest: #c8b688;
  --bg-dark:    #d4c298;
  --bg-panel:   #fffdf6;
  --bg-body:    #d0be90;
  --bg-page:    #fffdf6;

  /* Borders */
  --border:       rgba(100, 72, 8, 0.14);
  --border-light: rgba(100, 72, 8, 0.22);

  /* Text */
  --text-primary:   #1e1004;
  --text-secondary: #3e2408;
  --text-dim:       #6a4818;
  --text-muted:     #8a6428;
  --text-main:      #241305;

  /* Shared UI alias (legacy-compatible) */
  --accent:         #8d620a;
  --card-bg:        rgba(255, 253, 246, 0.97);

  /* Status */
  --red:    #9e1414;
  --green:  #145428;
  --blue:   #1a3494;
  --purple: #5a1eaa;

  /* Design v2: 数値・ステータス用フォント */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* === Segment / Tab unification token ===
     セグメント／タブ／サブタブの選択状態を統一するためのトークン。
     非選択＝くすんだパーチメント不透明、選択中＝warm gold 不透明＋off-white 文字。
     NOTE: .skill-badge.active と .goal-item.current は意味的に「選択中」ではなく
     スキル種別ラベル／進行ステート表示のため、このトークン体系の対象外。 */
  --seg-bg:                  linear-gradient(180deg, #fbeec5 0%, #e8d29c 100%);
  --seg-bg-flat:             #f1dfaf;
  --seg-color:               #7a5e2a;
  --seg-border:              rgba(126, 92, 10, 0.22);
  --seg-shadow:              inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(120,80,10,0.08);
  --seg-hover-bg:            linear-gradient(180deg, #fff5d2 0%, #f1dca0 100%);
  --seg-hover-color:         #5e4408;
  --seg-hover-border:        rgba(126, 92, 10, 0.35);
  --seg-active-bg:           linear-gradient(180deg, #d9a83e 0%, #b8852e 100%);
  --seg-active-color:        #fffdf6;
  --seg-active-border:       #a07020;
  --seg-active-shadow:       inset 0 1px 0 rgba(255,235,160,0.55),
                             inset 0 -1px 0 rgba(80,50,8,0.18),
                             0 2px 6px rgba(154,114,16,0.32);
  --seg-underline-active-bg: rgba(255,253,246,0.85);
  --seg-transition:          background 0.18s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease;
}


* { box-sizing:border-box; }
body { margin:0; color:var(--text-primary); background:#f7f0df; font-family:"Noto Sans JP", sans-serif; }
button,input { font:inherit; }
a { color:var(--gold-dim); }
.auth-box {
  background: rgba(253, 246, 228, 0.96);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  padding: 24px;
  width: min(340px, 90vw);
  margin: 0 auto;
  backdrop-filter: blur(6px);
  box-shadow:
    0 6px 32px rgba(120,80,10,0.18),
    0 1px 0 rgba(255,220,100,0.6) inset,
    0 0 0 1px rgba(154,114,16,0.12);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg-darkest);
  border-radius: 6px;
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-tab.active {
  background: var(--gold-bg);
  color: var(--gold-bright);
  border: 1px solid var(--gold-border);
  box-shadow: 0 1px 4px rgba(154,114,16,0.15);
}

.auth-tab:hover:not(.active) { color: var(--text-primary); }

.auth-err {
  color: var(--red);
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
}

/* ══════════════════════════════════════
   共通コンポーネント
══════════════════════════════════════ */

/* ─── 入力 ─── */
.g-input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: #fffcf4;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  color: var(--text-primary);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 3px rgba(120,80,10,0.08);
}

.g-input:focus {
  border-color: var(--gold-bright);
  box-shadow: inset 0 1px 3px rgba(120,80,10,0.08), 0 0 0 3px rgba(154,114,16,0.12);
}
.g-input::placeholder { color: var(--text-muted); }

.g-select { cursor: pointer; }
.g-num    { width: 80px; display: inline-block; margin-bottom: 0; }

/* ─── ボタン ─── */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: linear-gradient(180deg, #fdf4da 0%, #ecdab0 100%);
  color: var(--text-secondary);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  width: 100%;
  margin-top: 4px;
  box-shadow:
    0 2px 6px rgba(120,80,10,0.14),
    0 1px 0 rgba(255,230,130,0.7) inset,
    0 -1px 0 rgba(120,80,10,0.12) inset;
  position: relative;
  overflow: hidden;
}

.g-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,220,80,0.15) 50%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.g-btn:hover:not(:disabled):not(.disabled) {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, #fff8e8 0%, #f0dcb0 100%);
  color: var(--gold-bright);
  box-shadow:
    0 3px 10px rgba(120,80,10,0.2),
    0 1px 0 rgba(255,230,130,0.8) inset,
    0 -1px 0 rgba(120,80,10,0.15) inset;
}

.g-btn:hover:not(:disabled):not(.disabled)::before {
  opacity: 1;
  animation: shimmer 1.5s infinite;
}

.g-btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
  box-shadow:
    0 1px 3px rgba(120,80,10,0.14),
    0 -1px 0 rgba(255,230,130,0.4) inset;
}

.g-btn.primary {
  background: linear-gradient(180deg, rgba(196,144,10,0.22) 0%, rgba(154,114,16,0.18) 100%);
  border-color: var(--gold-border);
  color: var(--gold-bright);
  font-weight: 600;
  box-shadow:
    0 2px 10px rgba(154,114,16,0.2),
    0 1px 0 rgba(255,220,80,0.5) inset,
    0 -1px 0 rgba(120,80,10,0.15) inset;
}

.g-btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(196,144,10,0.32) 0%, rgba(154,114,16,0.24) 100%);
  border-color: var(--gold-bright);
  box-shadow:
    0 3px 14px rgba(154,114,16,0.28),
    0 1px 0 rgba(255,220,80,0.6) inset;
}

.g-btn.sm {
  width: auto;
  padding: 5px 10px;
  font-size: 11px;
  margin-top: 0;
}

.g-btn:disabled,
.g-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Design v2: ボタンカラーバリエーション */
.g-btn.danger {
  border-color: rgba(185,28,28,0.35);
  color: #b91c1c;
  background: linear-gradient(180deg, #fff5f5 0%, #fce8e8 100%);
}
.g-btn.danger:hover:not(:disabled) {
  border-color: #b91c1c;
  background: linear-gradient(180deg, #fee2e2 0%, #fcd4d4 100%);
  color: #991b1b;
  box-shadow: 0 2px 12px rgba(185,28,28,0.18);
}

.g-btn.success {
  border-color: rgba(22,101,52,0.35);
  color: #166534;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}
.g-btn.success:hover:not(:disabled) {
  border-color: #166534;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  color: #14532d;
  box-shadow: 0 2px 12px rgba(22,101,52,0.18);
}

.g-btn.info {
  border-color: rgba(30,64,175,0.35);
  color: #1e40af;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
.g-btn.info:hover:not(:disabled) {
  border-color: #1e40af;
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e3a8a;
  box-shadow: 0 2px 12px rgba(30,64,175,0.18);
}

/* Design v2: フォーカスリング */
.g-btn:focus-visible,
.tab-btn:focus-visible,
.auth-tab:focus-visible,
.g-input:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.eex-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,10,0,0.72);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s ease;
  backdrop-filter: blur(3px);
  padding: 12px;
}
.eex-modal {
  background: var(--bg-panel);
  border: 2px solid var(--gold-border);
  border-radius: 12px;
  padding: 24px 20px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.eex-modal-sm {max-width:420px;text-align:center;}
.site-footer {padding:28px 20px;text-align:center;font-size:12px;line-height:2;}
.site-footer a {color:var(--text-secondary);margin:0 4px;}
.site-footer .footer-sep {color:var(--gold-border);}
.demo-entry { margin-top: 20px; text-align: center; }
.demo-sep { color: #888; font-size: 0.85rem; margin-bottom: 10px; position: relative; }
.demo-sep::before, .demo-sep::after { content: ""; display: inline-block; width: 40px; height: 1px; background: #ccc; vertical-align: middle; margin: 0 8px; }
.demo-btn { background: #f5f0e8; color: #5a4a2f; border: 1.5px solid #c9b890; width: 100%; font-size: 0.95rem; }
.demo-btn:hover { background: #ede8d8; }
.demo-note { font-size: 0.75rem; color: #999; margin-top: 6px; }
.sys-telop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  background: #7e1a00; color: #fff8e0;
  height: 28px; overflow: hidden;
  display: flex; align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.sys-telop.hidden { display: none; }
.sys-telop.telop-static {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sys-telop-text {
  white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  display: inline-block;
}
.sys-telop-text.scrolling {
  animation: telop-scroll 30s linear infinite;
  padding-left: 100vw;
}

/* ═══ メンテナンス画面 ════════════════════════════════════════════════════════ */
.sys-maintenance {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #1a1206 0%, #2e1f08 100%);
  display: flex; align-items: center; justify-content: center;
}
.sys-maintenance.hidden { display: none; }
.sys-maint-inner {
  text-align: center; padding: 40px 32px;
  max-width: 480px; width: 90%;
}
.sys-maint-icon {
  font-size: 64px; display: block; margin-bottom: 16px;
  animation: spin-slow 4s linear infinite;
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sys-maint-title {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-size: 28px; color: #c9a84c; margin-bottom: 16px; letter-spacing: 2px;
}
.sys-maint-msg {
  font-size: 16px; color: #e8d8a0; margin-bottom: 12px; line-height: 1.7;
}
.sys-maint-sub {
  font-size: 13px; color: #8a7040;
}
.sys-maint-bypass-btn {
  margin-top: 24px;
  padding: 8px 16px;
  background: transparent;
  color: #8a7040;
  border: 1px solid #5a4520;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}
.sys-maint-bypass-btn:hover {
  opacity: 1;
  color: #c9a84c;
}
.sys-maint-footer {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-size: 12px;
  color: #8a7040;
  padding: 0 12px;
  line-height: 1.8;
}
.sys-maint-footer a {
  color: #c9a84c;
  text-decoration: none;
  margin: 0 4px;
}
.sys-maint-footer a:hover {
  text-decoration: underline;
  color: #e8d8a0;
}
.sys-maint-footer-sep {
  color: #5a4520;
  margin: 0 2px;
}

/* lp-page は title-screen の長尺ランディング版。flex-center を解除して縦スクロール可に。 */
.title-screen.lp-page {
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  padding-bottom: 24px;
  /* LP 限定：羊皮紙 → 薄ピンクのグラデーション背景に差し替え */
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255, 200, 215, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #ffe9ef 0%, #ffd4de 35%, #ffd9e2 65%, #ffe4ec 100%);
  background-attachment: fixed;
}
/* iOS Safari 等で background-attachment: fixed が部分対応なので SP は scroll にフォールバック */
@media (max-width: 720px) {
  .title-screen.lp-page { background-attachment: scroll; }
}
.title-screen.lp-page .particle-canvas {
  position: fixed;
  inset: 0;
}

.lp-page .lp-section {
  position: relative;
  z-index: 1;
  width: min(1080px, 92vw);
  margin: 0 auto;
  padding: 56px 0 12px;
  text-align: center;
  animation: fadeIn 0.8s ease;
}

.lp-h2 {
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.lp-h2-left { text-align: left; }
.lp-h2-sub {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 28px;
}

/* ─── Hero（背景画像版・1stビュー） ─── */
.lp-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.lp-page .lp-hero.lp-hero-bg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #c4aa70;
  background-image: url('../illust/背景.png');
  background-size: cover;
  /* タイトル「REFTRIA」が左寄りに描かれているため、狭い PC で右端が
     切れてもタイトルが残るよう、左基準で固定する */
  background-position: left center;
  background-repeat: no-repeat;
}

/* 左下アンカー：catch と CTA を縦積みでまとめて左下に固定。
   タイトル「REFTRIA」は背景画像内の上部にあるので、絶対に重ならない */
.lp-hero-left-anchor {
  position: absolute;
  left: 4%;
  bottom: clamp(24px, 6vh, 56px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: min(480px, 50vw);
  width: auto;
}

/* キャッチコピー枠 */
.lp-hero-catch {
  width: 100%;
  background: rgba(255, 253, 246, 0.94);
  border: 1px solid var(--gold-border);
  border-radius: 10px;
  padding: 14px 22px;
  box-shadow: 0 6px 22px rgba(60, 40, 10, 0.28);
  backdrop-filter: blur(4px);
  animation: fadeIn 1.2s ease;
}
.lp-hero-catch-text {
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
}

/* 大型CTA */
.lp-hero-cta-wrap {
  animation: fadeIn 1.4s ease;
}
.lp-hero-cta-big {
  width: auto !important;
  padding: 18px 34px !important;
  font-size: clamp(15px, 1.8vw, 19px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  margin: 0 !important;
  white-space: normal;
  line-height: 1.4;
  /* 羊皮紙背景に同化しないよう、深紅基調＋白文字で強コントラスト */
  background: linear-gradient(180deg, #b32d2d 0%, #7a1a1a 100%) !important;
  border: 2px solid #fff3d6 !important;
  color: #fff8e6 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow:
    0 10px 30px rgba(60, 10, 10, 0.55),
    0 0 0 4px rgba(255, 243, 214, 0.35),
    0 1px 0 rgba(255, 220, 180, 0.6) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  animation: lpCtaPulse 2.4s ease-in-out infinite;
}
.lp-hero-cta-big:hover {
  background: linear-gradient(180deg, #c93636 0%, #8e1f1f 100%) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(60, 10, 10, 0.65),
    0 0 0 5px rgba(255, 243, 214, 0.45),
    0 1px 0 rgba(255, 220, 180, 0.6) inset;
}
@keyframes lpCtaPulse {
  0%, 100% { box-shadow:
    0 10px 30px rgba(60, 10, 10, 0.55),
    0 0 0 4px rgba(255, 243, 214, 0.35),
    0 1px 0 rgba(255, 220, 180, 0.6) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset; }
  50% { box-shadow:
    0 12px 36px rgba(80, 20, 20, 0.7),
    0 0 0 7px rgba(255, 243, 214, 0.5),
    0 1px 0 rgba(255, 220, 180, 0.7) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset; }
}

.lp-hero-inner {
  width: min(1100px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  padding: 24px 0;
  position: relative;
  z-index: 1;
}
.lp-hero-right { animation: fadeIn 1s ease; }
.lp-hero-right .auth-box {
  margin: 0;
  background: rgba(253, 246, 228, 0.94);
  backdrop-filter: blur(8px);
  box-shadow:
    0 10px 40px rgba(60, 40, 10, 0.32),
    0 1px 0 rgba(255,220,100,0.6) inset,
    0 0 0 1px rgba(154,114,16,0.18);
}
.lp-auth-header {
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-border);
}
.lp-btn-lg {
  width: auto !important;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing: 0.05em;
}

/* ─── 新規登録モーダル ─── */
.lp-reg-title {
  font-family: 'Cinzel', 'Noto Sans JP', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 8px;
}
.lp-reg-lead {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 14px;
}
.lp-reg-cancel {
  width: auto !important;
  padding: 6px 18px !important;
  font-size: 12px !important;
}

/* ─── アプリ内ブラウザ向けGoogle連携案内 ─── */
.google-iab-wrap {
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  text-align: center;
}
.google-iab-button {
  min-width: 220px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #c9cdd3;
  border-radius: 4px;
  background: #fff;
  color: #3c4043;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 500 14px/1.2 'Noto Sans JP', sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}
.google-iab-button:hover,
.google-iab-button:focus-visible {
  background: #f7f9fc;
  border-color: #9aa5b1;
  outline: 2px solid rgba(66, 133, 244, 0.24);
  outline-offset: 2px;
}
.google-iab-mark {
  color: #4285f4;
  font: 700 18px/1 Arial, sans-serif;
}
.google-iab-note {
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 6px;
  background: #fff4d6;
  color: #77581d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}
.google-browser-guide {
  width: min(360px, calc(100vw - 28px));
  max-width: 360px;
  text-align: center;
}
.google-browser-guide-icon {
  margin-bottom: 6px;
  font-size: 32px;
  line-height: 1;
}
.google-browser-guide-steps {
  margin: 0 0 12px;
  padding: 12px 12px 12px 34px;
  border: 1px solid #dfcfaa;
  border-radius: 8px;
  background: #fffaf0;
  color: #4e412e;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}
.google-browser-guide-steps li + li { margin-top: 5px; }
.google-browser-guide-note {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
}
.google-browser-guide-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.google-browser-guide-actions .g-btn {
  width: auto;
  margin: 0;
  padding: 9px 16px;
}
.google-browser-copy-status {
  min-height: 18px;
  margin-top: 8px;
  color: #477447;
  font-size: 11px;
  line-height: 1.5;
}

/* Lower LP: parchment folios, brass rules and the login-bonus binding. */
.lp-bg-band { background-size:cover; background-position:center; background-repeat:no-repeat; padding:36px 28px 44px; }
.lp-bg-leafia.lp-background-ready { background-image:linear-gradient(#f4eddbb8,#f4eddbeb),url('../images/landing/leafia.webp'); }
.lp-bg-herblen.lp-background-ready { background-image:linear-gradient(#f4eddbbf,#f4eddbeb),url('../images/landing/herblen.webp'); }
.lp-bg-maris.lp-background-ready { background-image:linear-gradient(#f4eddbbf,#f4eddbeb),url('../images/landing/maris.webp'); }
.lp-page .lp-section { position:relative; width:100%; max-width:1040px; margin:0 auto 32px; padding:32px; background:#fffdf6; color:#3e2b17; border:1px solid #ac8237; border-radius:5px; box-shadow:0 0 0 3px #fffdf640,0 5px 20px #49311912; text-align:left; }
.lp-page .lp-section:last-child { margin-bottom:0; }
.lp-page .lp-h2 { display:flex; align-items:center; gap:15px; margin:0 0 28px; padding:0 0 17px; border-bottom:3px double #d9c9a3; color:#493119; font:700 23px/1.6 'Noto Sans JP',sans-serif; letter-spacing:.035em; }
.lp-page .lp-h2::before { content:""; flex:none; width:6px; height:6px; transform:rotate(45deg); background:#ac8237; }
.lp-page .lp-h2::after { display:none; }
.lp-page .lp-flow>.lp-h2,.lp-page .lp-features>.lp-h2,.lp-page .lp-news>.lp-h2 { position:relative; margin:-32px -32px 28px; padding:22px 30px; border-bottom:3px double #b69350; border-radius:4px 4px 0 0; color:#fff5d9; background:repeating-linear-gradient(125deg,transparent 0 3px,#ffffff03 3px 4px),linear-gradient(115deg,#503820,#332315); }
.lp-page .lp-flow>.lp-h2::before,.lp-page .lp-features>.lp-h2::before,.lp-page .lp-news>.lp-h2::before { background:#d7b77d; }
.lp-page .lp-flow>.lp-h2::after,.lp-page .lp-features>.lp-h2::after,.lp-page .lp-news>.lp-h2::after { content:""; display:block; position:absolute; inset:6px; border:1px solid #bf9b584d; border-radius:2px; pointer-events:none; }

/* Mira introduces the page as a note in the margin, without floating bubbles. */
.lp-flow-guide { display:flex; align-items:center; gap:24px; width:100%; max-width:none; margin:0 0 28px; padding:0 0 24px; border-bottom:1px solid #d9c9a3; }
.lp-flow-guide-img { flex:none; width:92px; height:92px; overflow:hidden; padding:4px; border:1px solid #ac8237; border-radius:3px; background:#f4eddb; box-shadow:inset 0 0 0 2px #fffdf6; }
.lp-flow-guide-img img { display:block; width:100%; height:100%; object-fit:cover; }
.lp-flow-guide-balloon { flex:1; min-width:0; text-align:left; }
.lp-flow-guide-name { margin:0 0 9px; color:#765627; font-size:13px; font-weight:600; }
.lp-flow-guide-role { font-size:11px; font-weight:400; color:#786448; }
.lp-flow-guide-text { margin:0; color:#3e2b17; font-size:14px; line-height:1.95; }
.lp-flow-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.lp-flow-step { position:relative; padding:0 20px; text-align:left; }
.lp-flow-step:first-child { padding-left:0; }
.lp-flow-step:last-child { padding-right:0; }
.lp-flow-step+.lp-flow-step { border-left:1px solid #d9c9a3; }
.lp-flow-num { margin:0 0 12px; color:#987130; font:400 38px/1.1 'Cinzel',serif; }
.lp-flow-title { margin-bottom:9px; color:#493119; font-size:15px; font-weight:700; }
.lp-flow-text { color:#69563b; font-size:12px; line-height:1.9; }

/* Three ways of playing share one ruled page. */
.lp-pillars-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.lp-pillar-card { display:grid; grid-template-columns:58px 1fr; align-content:start; align-items:center; gap:13px; padding:4px 24px; }
.lp-pillar-card:first-child { padding-left:0; }
.lp-pillar-card:last-child { padding-right:0; }
.lp-pillar-card+.lp-pillar-card { border-left:1px solid #d9c9a3; }
.lp-pillar-icon { width:58px; height:58px; padding:7px; border:1px solid #c6ac79; border-radius:2px; background:#f4eddb; box-shadow:inset 0 0 0 3px #fffdf6; }
.lp-pillar-icon svg { display:block; width:100%; height:100%; }
.lp-pillar-title { margin:0; color:#493119; font-size:20px; font-weight:700; letter-spacing:.04em; }
.lp-pillar-text { grid-column:1/-1; margin:3px 0 0; color:#69563b; font-size:13px; line-height:1.95; }

/* World map: a framed map and its description on the same spread. */
.lp-world-inner { display:grid; grid-template-columns:1.18fr 1fr; gap:32px; align-items:center; }
.lp-world-img { position:relative; padding:7px; border:1px solid #ac8237; background:#f4eddb; box-shadow:inset 0 0 0 3px #fffdf6; }
.lp-world-img img { display:block; width:100%; height:auto; border:1px solid #d9c9a3; }
.lp-page .lp-world .lp-h2 { margin-bottom:20px; }
.lp-world-text p { margin:0; color:#69563b; font-size:13px; line-height:2; }

/* Feature index: no nested cards, just chapter numbers and rules. */
.lp-features-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; counter-reset:feature; }
.lp-feature { position:relative; padding:25px 25px 25px 66px; counter-increment:feature; border-top:1px solid #d9c9a3; }
.lp-feature:nth-child(-n+2) { border-top:0; padding-top:4px; }
.lp-feature:nth-child(even) { border-left:1px solid #d9c9a3; }
.lp-feature::before { content:counter(feature,decimal-leading-zero); position:absolute; top:25px; left:15px; color:#987130; font:400 24px/1.3 'Cinzel',serif; }
.lp-feature:nth-child(-n+2)::before { top:4px; }
.lp-feature h3 { margin:0 0 10px; color:#493119; font-size:16px; line-height:1.7; }
.lp-feature p { margin:0; color:#69563b; font-size:13px; line-height:1.95; }

/* Calls to action retain the game's red sign-up button, framed in brass. */
.lp-page .lp-cta-mid { padding:23px 30px; background:#f4eddb; border-top:3px double #ac8237; border-bottom:3px double #ac8237; }
.lp-cta-mid-inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.lp-cta-mid-text { color:#493119; font-size:17px; font-weight:600; line-height:1.8; }
.lp-cta-mid-btn { flex:none; margin:0!important; }
.lp-page .lp-cta-bottom { padding:36px; text-align:center; background:#f4eddb; box-shadow:inset 0 0 0 6px #f4eddb,inset 0 0 0 7px #d9c9a3; }
.lp-page .lp-cta-bottom .lp-h2 { display:block; padding:0; margin-bottom:24px; border:0; }
.lp-cta-bottom .lp-h2::before { display:none; }
.lp-cta-bottom-btn { display:inline-flex!important; margin:0 auto!important; }

/* Screenshots are printed plates; reserve the image space before lazy loading. */
.lp-shots-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) .8fr; gap:20px; align-items:start; }
.lp-shot { margin:0; padding:0; }
.lp-shot img { display:block; width:100%; height:auto; padding:5px; border:1px solid #bda477; background:#f4eddb; }
.lp-shot figcaption { margin-top:12px; padding-left:12px; border-left:2px solid #ac8237; color:#69563b; font-size:12px; line-height:1.9; }
.lp-shot figcaption strong { display:block; margin-bottom:3px; color:#493119; font-size:14px; font-weight:600; }

/* Live counts, news and community close the page like a town register. */
.lp-page .lp-stats { display:grid; grid-template-columns:1fr 1.7fr; align-items:center; gap:24px; padding:30px 32px; background:#f4eddb; border-top:3px double #ac8237; border-bottom:3px double #ac8237; }
.lp-page .lp-stats .lp-h2 { margin:0; padding:0; border:0; font-size:21px; }
.lp-stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.lp-stat { padding:5px 22px; border-left:1px solid #c6ac79; text-align:center; }
.lp-stat-num { margin-bottom:9px; color:#493119; font:400 clamp(30px,4vw,42px)/1.1 'Cinzel',serif; font-variant-numeric:tabular-nums; }
.lp-stat-label { color:#786448; font-size:12px; }
.lp-news-list { list-style:none; padding:0; margin:0; }
.lp-news-list li { margin:0; border-bottom:1px solid #d9c9a3; }
.lp-news-link { position:relative; display:grid; grid-template-columns:100px minmax(0,1fr); gap:20px; align-items:baseline; padding:19px 24px 19px 4px; color:#3e2b17; text-decoration:none; transition:background .15s; }
.lp-news-link::after { content:""; position:absolute; right:8px; top:50%; width:6px; height:6px; border-right:1px solid #987130; border-top:1px solid #987130; transform:translateY(-50%) rotate(45deg); }
.lp-news-link:hover { background:#f4eddb; }
.lp-news-date { color:#786448; font:400 13px/1.8 'Cinzel',serif; }
.lp-news-text { min-width:0; font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.lp-news-empty,.lp-news-loading { padding:24px 12px; color:#786448; font-size:13px; text-align:center; }
.lp-news-more { margin-top:19px; text-align:right; }
.lp-news-more-link { display:inline-block; padding:10px 16px; border:1px solid #bfa474; border-radius:3px; background:#fffdf6; box-shadow:inset 0 0 0 3px #fffdf6,inset 0 0 0 4px #d9c9a3; color:#62451f; font-size:12px; line-height:1.7; text-decoration:none; }
.lp-news-more-link:hover { background:#f4eddb; color:#3e2b17; }
.lp-community-text { margin:-10px 0 26px; color:#69563b; font-size:13px; line-height:1.9; }
.lp-community-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.lp-community-col { display:flex; flex-direction:column; align-items:flex-start; gap:13px; min-width:0; }
.lp-community-col+.lp-community-col { border-left:1px solid #d9c9a3; padding-left:26px; }
.lp-community-sub { color:#786448; font-size:12px; line-height:1.8; }
.lp-community-link { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:12px 18px; color:#493119; border:1px solid #bfa474; border-radius:3px; background:#fffdf6; box-shadow:inset 0 0 0 3px #fffdf6,inset 0 0 0 4px #d9c9a3; text-decoration:none; font-size:13px; overflow-wrap:anywhere; }
.lp-community-link:hover { background:#f4eddb; }
.lp-x-icon { display:block; width:20px; height:20px; object-fit:contain; flex:none; filter:brightness(0); }
.lp-pochiga-banner { display:block; width:min(100%,240px); overflow:hidden; border:1px solid #d9c9a3; border-radius:3px; }
.lp-pochiga-banner img { display:block; width:100%; height:auto; }
.auth-pochiga-banner { display:block; border:1px solid #d9c9a3; border-radius:3px; overflow:hidden; }
.auth-pochiga-banner img { display:block; width:100%; height:auto; }
.lp-footer { padding:27px max(20px,calc((100% - 1040px)/2)) 30px; border-top:3px double #ac8237; background:#eee3c9; color:#786448; font-size:11px; line-height:2.4; text-align:center; }
.lp-footer a { display:inline-block; padding:3px 8px; color:#69563b; text-decoration:none; text-underline-offset:4px; }
.lp-footer a:hover { text-decoration:underline; }
.lp-footer .footer-sep { color:#bbaa85; }

@media (max-width:860px) {
  .lp-bg-band { padding:30px 22px; }
  .lp-page .lp-section { padding:26px; }
  .lp-page .lp-flow>.lp-h2,.lp-page .lp-features>.lp-h2,.lp-page .lp-news>.lp-h2 { margin:-26px -26px 25px; padding:20px 24px; }
  .lp-page .lp-h2 { font-size:21px; }
  .lp-flow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .lp-flow-step:nth-child(3) { border-left:0; padding-left:0; }
  .lp-pillar-card { padding:3px 16px; grid-template-columns:1fr; }
  .lp-world-inner { grid-template-columns:1fr; gap:25px; }
  .lp-feature { padding-left:50px; padding-right:18px; }
  .lp-feature::before { left:8px; }
  .lp-page .lp-stats { grid-template-columns:1fr; gap:23px; }
  .lp-stat:first-child { border-left:0; }
  .lp-community-col+.lp-community-col { padding-left:20px; }
  .lp-community-link { padding:12px; font-size:12px; }
  .lp-cta-mid-inner { flex-direction:column; gap:18px; text-align:center; }
}
@media (max-width:600px) {
  .lp-bg-band { padding:25px 18px; }
  .lp-page .lp-section { padding:22px; margin-bottom:25px; }
  .lp-page .lp-h2 { margin-bottom:23px; font-size:19px; gap:10px; }
  .lp-page .lp-flow>.lp-h2,.lp-page .lp-features>.lp-h2,.lp-page .lp-news>.lp-h2 { margin:-22px -22px 22px; padding:20px; }
  .lp-flow-guide { align-items:flex-start; gap:16px; padding-bottom:20px; margin-bottom:23px; }
  .lp-flow-guide-img { width:65px; height:65px; padding:3px; }
  .lp-flow-guide-name { margin-bottom:7px; font-size:12px; }
  .lp-flow-guide-role { display:block; margin-top:3px; font-size:10px; }
  .lp-flow-guide-text { font-size:12px; line-height:1.9; }
  .lp-flow-steps { grid-template-columns:minmax(0,1fr); gap:0; }
  .lp-flow-step { display:grid; grid-template-columns:34px minmax(0,1fr); column-gap:14px; padding:18px 0!important; border-left:0!important; border-bottom:1px solid #d9c9a3; }
  .lp-flow-step:first-child { padding-top:0!important; }
  .lp-flow-step:last-child { padding-bottom:0!important; border-bottom:0; }
  .lp-flow-num { grid-row:1/3; margin:0; font-size:30px; }
  .lp-flow-title { font-size:14px; margin-bottom:6px; }
  .lp-flow-text { font-size:12px; }
  .lp-pillars-grid { grid-template-columns:1fr; }
  .lp-pillar-card { grid-template-columns:48px minmax(0,1fr); padding:20px 0; gap:12px 15px; }
  .lp-pillar-card:first-child { padding-top:0; }
  .lp-pillar-card:last-child { padding-bottom:0; }
  .lp-pillar-card+.lp-pillar-card { border-left:0; border-top:1px solid #d9c9a3; }
  .lp-pillar-icon { width:48px; height:48px; }
  .lp-pillar-title { font-size:18px; }
  .lp-pillar-text { font-size:12px; }
  .lp-world-inner { gap:23px; }
  .lp-world-text p { font-size:12px; }
  .lp-features-grid { grid-template-columns:1fr; }
  .lp-feature { padding:20px 0 20px 42px!important; border-left:0!important; border-top:1px solid #d9c9a3!important; }
  .lp-feature:first-child { border-top:0!important; padding-top:0!important; }
  .lp-feature:last-child { padding-bottom:0!important; }
  .lp-feature::before { top:20px!important; left:0; font-size:23px; }
  .lp-feature:first-child::before { top:0!important; }
  .lp-feature h3 { font-size:15px; }
  .lp-feature p { font-size:12px; }
  .lp-shots-grid { grid-template-columns:1fr; gap:25px; }
  .lp-shot figcaption { font-size:12px; }
  .lp-page .lp-stats { padding:24px 20px; }
  .lp-page .lp-stats .lp-h2 { margin:0; font-size:19px; }
  .lp-stat { padding:2px 10px; }
  .lp-stat-num { font-size:32px; }
  .lp-stat-label { font-size:11px; }
  .lp-news-link { grid-template-columns:1fr; gap:5px; padding:17px 21px 17px 0; }
  .lp-news-date { font-size:12px; }
  .lp-news-text { font-size:13px; }
  .lp-news-more-link { width:100%; text-align:center; padding:12px 8px; }
  .lp-community-grid { grid-template-columns:1fr; gap:24px; }
  .lp-community-col+.lp-community-col { border-left:0; border-top:1px solid #d9c9a3; padding:22px 0 0; }
  .lp-community-link { width:100%; font-size:12px; padding:12px; }
  .lp-community-link span { min-width:0; }
  .lp-page .lp-cta-bottom { padding:30px 21px; }
  .lp-page .lp-section .lp-hero-cta-big { width:100%!important; padding:14px 10px!important; font-size:13px!important; white-space:normal; }
  .lp-cta-mid-text { font-size:15px; }
  .lp-footer { padding:22px 16px; }
}

/* Public LP: existing parchment and brass, with the original Mira illustration. */
.reftria-landing .lp-page { background:#f7f0df; padding-bottom:0; }
.reftria-landing .particle-canvas { display:none; }
.lp-masthead { max-width:1200px; margin:auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--gold-border); }
.lp-brand { font:700 32px/1.1 "Cinzel",serif; letter-spacing:.04em; text-decoration:none; color:#785310; }
.lp-brand span { display:block; font:500 11px/1.8 "Noto Sans JP",sans-serif; letter-spacing:.32em; text-align:center; }
.lp-login-link { color:#554424; font-size:14px; text-underline-offset:5px; padding:12px; }
.lp-mira-hero { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; max-width:1200px; margin:auto; min-height:580px; padding:36px 46px 0; overflow:hidden; isolation:isolate; }
.lp-mira-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(247,240,223,.35),#f7f0df 72%),linear-gradient(0deg,#f7f0df,transparent 45%),url('../images/landing/hero-town.webp') left center/cover; opacity:.65; }
.lp-mira-art { align-self:end; text-align:center; line-height:0; }
.lp-mira-art img { display:block; width:min(100%,480px); height:auto; margin:auto; }
.lp-mira-copy { padding:16px 0 50px 28px; }
.lp-game-type { font-size:12px; color:#65502a; letter-spacing:.04em; margin:0 0 22px; }
.lp-mira-copy h1 { font-size:clamp(32px,3.6vw,48px); line-height:1.6; letter-spacing:.03em; color:#322713; margin:0 0 20px; }
.lp-mira-copy h1 .lp-copy-accent { color:#8e342b; }
.lp-copy-phrase { display:inline-block; white-space:nowrap; }
.lp-mira-lead { font-size:16px; line-height:2; color:#554424; margin:0 0 30px; }
.reftria-landing .lp-hero-cta-big { animation:none; letter-spacing:.04em; padding:17px 30px!important; font-size:17px!important; border:1px solid #661e1a!important; border-radius:6px; box-shadow:0 4px 0 #64221d,0 9px 18px rgba(100,34,29,.13); }
.reftria-landing .lp-hero-cta-big:active { transform:translateY(2px); box-shadow:0 2px 0 #64221d; }
.lp-login-section {
  --entry-paper:#fffdf6; --entry-ink:#3e2b17; --entry-muted:#786448;
  --entry-line:#d9c9a3; --entry-soft:#f4eddb; --entry-metal:#ac8237; --entry-deep:#493119;
  padding:38px 28px 42px; border-top:1px solid var(--entry-line); background:#efe5cb; scroll-margin-top:18px;
}
.lp-login-section .lp-auth-ledger { width:min(100%,1040px); margin:auto; padding:0; overflow:hidden; border:1px solid var(--entry-metal); border-radius:8px; background:var(--entry-paper); color:var(--entry-ink); backdrop-filter:none; box-shadow:0 8px 24px #49311912,0 0 0 3px #b8975326; }
.lp-auth-cover { position:relative; display:flex; align-items:center; gap:22px; padding:23px 30px; color:#fff5d9; background:repeating-linear-gradient(125deg,transparent 0 3px,#ffffff03 3px 4px),linear-gradient(115deg,#503820,#332315); border-bottom:3px double #b69350; }
.lp-auth-cover::after { content:""; position:absolute; inset:7px; border:1px solid #bf9b584d; border-radius:3px; pointer-events:none; }
.lp-auth-emblem { width:66px; padding-right:23px; flex:none; border-right:1px solid #c2a26866; color:#e6c88d; line-height:0; }
.lp-auth-emblem svg { width:42px; height:42px; }
.lp-auth-cover h2 { margin:0; color:inherit; font-size:22px; font-weight:700; letter-spacing:.055em; line-height:1.5; }
.lp-auth-cover p { margin:6px 0 0; color:#ddc89f; font-size:12px; line-height:1.7; }
.lp-auth-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:28px 34px 30px; gap:38px; }
.lp-auth-password { min-width:0; }
.reftria-landing .lp-auth-password .lp-input-label { margin:0 0 7px; color:var(--entry-muted); font-size:12px; font-weight:500; letter-spacing:.04em; }
.reftria-landing .lp-auth-password .g-input { width:100%; height:46px; margin:0 0 18px; padding:10px 13px; border:1px solid #bbaa85; border-radius:3px; color:var(--entry-ink); background:#fffefb; box-shadow:inset 0 2px 3px #49311906; font-size:16px; transition:border-color .15s,box-shadow .15s; }
.reftria-landing .lp-auth-password .g-input::placeholder { font-size:13px; color:#78694f; }
.reftria-landing .lp-auth-password .g-input:focus { outline:2px solid #ac8237; outline-offset:2px; border-color:#ac8237; box-shadow:none; }
.reftria-landing .lp-auth-ledger .g-btn { min-height:48px; border-radius:3px; font-size:14px; transition:background .15s,border-color .15s,transform .15s; }
.reftria-landing .lp-auth-ledger .g-btn::before { display:none; }
.reftria-landing .lp-auth-ledger .lp-auth-submit { position:relative; width:100%; margin:2px 0 0; padding:12px 36px; color:#fff5d9; background:var(--entry-deep); border:1px solid var(--entry-metal); border-bottom-width:2px; box-shadow:inset 0 0 0 3px var(--entry-deep),inset 0 0 0 4px #b3935280,0 2px 0 #49311918; letter-spacing:.1em; font-weight:600; }
.reftria-landing .lp-auth-ledger .lp-auth-submit::after { content:""; position:absolute; right:19px; top:50%; width:7px; height:7px; border-top:1px solid #e6c88d; border-right:1px solid #e6c88d; transform:translateY(-50%) rotate(45deg); }
.reftria-landing .lp-auth-ledger .lp-auth-submit:hover:not(:disabled) { background:#5b3e20; border-color:#bb9148; box-shadow:inset 0 0 0 3px #5b3e20,inset 0 0 0 4px #c6a76e99,0 2px 0 #49311918; }
.reftria-landing .lp-auth-ledger .g-btn:disabled { opacity:.65; cursor:wait; transform:none; }
.lp-auth-password .auth-err { font-size:12px; line-height:1.7; margin:8px 0 0; min-height:0; }
.lp-auth-password .auth-err:empty { display:none; }
.lp-auth-forgot { display:block; width:fit-content; margin:13px 0 0 auto; padding:6px 0; color:#76562a; font-size:12px; line-height:1.7; text-underline-offset:4px; }
.lp-auth-forgot:hover { color:#3e2b17; }
.lp-auth-alternatives { min-width:0; padding-left:38px; border-left:1px solid var(--entry-line); }
.lp-auth-alternatives h3 { display:flex; align-items:center; gap:10px; margin:0 0 17px; color:var(--entry-ink); font-size:14px; font-weight:600; line-height:1.7; }
.lp-auth-alternatives h3::before { content:""; width:5px; height:5px; background:var(--entry-metal); transform:rotate(45deg); flex:none; }
.lp-google-button { display:flex; align-items:center; justify-content:center; min-height:48px; padding:6px 0; }
.lp-google-button .g-btn { width:100%; background:#fff; color:#3e2b17; border:1px solid #c8bea9; box-shadow:none; }
.lp-auth-ledger .lp-auth-trial { margin:26px 0 0; padding:23px 0 0; border-top:1px solid var(--entry-line); }
.lp-auth-trial h3 { margin-bottom:4px; }
.reftria-landing .lp-auth-trial .demo-note { margin:0 0 15px 15px; color:var(--entry-muted); font-size:11px; text-align:left; }
.reftria-landing .lp-auth-ledger .lp-trial-button { width:100%; margin:0; padding:12px 10px; color:#62451f; background:var(--entry-paper); border:1px solid #bfa474; border-bottom-width:2px; box-shadow:inset 0 0 0 3px var(--entry-paper),inset 0 0 0 4px var(--entry-line); font-weight:600; }
.reftria-landing .lp-auth-ledger .lp-trial-button:hover:not(:disabled) { background:var(--entry-soft); border-color:var(--entry-metal); box-shadow:inset 0 0 0 3px var(--entry-soft),inset 0 0 0 4px #c6aa79; }
.lp-auth-ledger .auth-pochiga { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0; padding:15px 34px; background:var(--entry-soft); border-top:1px solid var(--entry-line); }
.lp-auth-ledger .auth-pochiga-banner { width:210px; flex:none; margin:0; }
.lp-auth-ledger .auth-pochiga-lead { margin:0; color:#786448; font-size:11px; font-weight:400; line-height:1.8; text-align:left; }
.reftria-landing .lp-bg-band { background-color:#eee3c9; }
.reftria-landing img { max-width:100%; }
.reftria-landing .lp-world-img img,.reftria-landing .lp-shot img,.reftria-landing .lp-flow-guide-img img { height:auto; }
.reftria-landing .demo-note,.reftria-landing .demo-sep { color:#665334; }
.reftria-landing .g-input::placeholder { color:#766746; }
.reftria-landing .eex-overlay { padding:20px; overflow:auto; align-items:flex-start; }
.reftria-landing .eex-modal { margin:auto; max-height:calc(100dvh - 40px); overflow-y:auto; padding:28px; background:#fffdf6; color:#3e2b17; border:1px solid #ac8237; border-radius:5px; box-shadow:0 0 0 4px #fffdf640,0 12px 45px #20140766; }
.reftria-landing .eex-modal .lp-reg-title { margin:-28px -28px 20px; padding:22px 20px; color:#fff5d9; background:linear-gradient(110deg,#503820,#392715); border-bottom:3px double #c2a266; font-size:20px; }
.reftria-landing .eex-modal .lp-reg-lead { color:#786448; }
.reftria-landing .eex-modal .g-input { min-height:46px; font-size:16px; background:#fffefb; border-color:#c7b78f; border-radius:3px; box-shadow:inset 0 2px 3px #49311906; }
.reftria-landing .eex-modal .g-input:focus { border-color:#ac8237; box-shadow:0 0 0 3px #ac823721; }
.reftria-landing .eex-modal .g-btn { min-height:44px; border-radius:3px; }
.reftria-landing .eex-modal .g-btn::before { display:none; }
.reftria-landing .eex-modal .lp-reg-cancel { color:#62451f; background:#fffdf6; border-color:#bfa474; box-shadow:inset 0 0 0 3px #fffdf6,inset 0 0 0 4px #d9c9a3; }
.reftria-landing .eex-modal .lp-reg-cancel:hover:not(:disabled) { background:#f4eddb; }
.reftria-landing .g-btn:focus-visible,.reftria-landing a:focus-visible { outline:3px solid #286052; outline-offset:4px; }
.reftria-landing .auth-err { overflow-wrap:anywhere; }
.reftria-landing .eex-modal .g-btn.primary { color:#fff5d9; background:#493119; border-color:#ac8237; box-shadow:inset 0 0 0 3px #493119,inset 0 0 0 4px #a18444; }
.reftria-landing .eex-modal .g-btn.primary:hover:not(:disabled) { background:#5d4021; box-shadow:inset 0 0 0 3px #5d4021,inset 0 0 0 4px #c2a266; }
.reftria-landing .lp-input-label { display:block; text-align:left; font-size:12px; color:#594629; margin:10px 0 5px; }
.reftria-landing.has-system-telop { padding-top:28px; }
@keyframes telop-scroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@media (max-width:860px) {
  .lp-masthead { padding:16px 20px; }
  .lp-brand { font-size:27px; }
  .lp-mira-hero { padding:24px 20px 0; min-height:0; grid-template-columns:46% 54%; }
  .lp-mira-copy { padding:16px 0 38px 12px; }
  .lp-mira-copy h1 { font-size:30px; }
  .lp-mira-lead { font-size:14px; }
  .lp-game-type { font-size:11px; line-height:1.8; margin-bottom:12px; }
  .reftria-landing .lp-hero-cta-big { padding:14px 16px!important; font-size:15px!important; }
  .lp-auth-body { gap:24px; padding:25px; }
  .lp-auth-alternatives { padding-left:24px; }
}
@media (max-width:680px) {
  .lp-login-section { padding:26px 18px 30px; }
  .lp-auth-cover { padding:22px; gap:17px; }
  .lp-auth-cover h2 { font-size:19px; }
  .lp-auth-cover p { font-size:11px; }
  .lp-auth-emblem { width:52px; padding-right:17px; }
  .lp-auth-emblem svg { width:34px; height:34px; }
  .lp-auth-body { grid-template-columns:minmax(0,1fr); gap:22px; padding:23px; }
  .lp-auth-alternatives { padding:22px 0 0; border-left:0; border-top:3px double var(--entry-line); }
  .lp-auth-ledger .auth-pochiga { padding:17px 23px; flex-direction:column; gap:11px; }
  .lp-auth-ledger .auth-pochiga-lead { text-align:center; }
}
@media (max-width:520px) {
  .lp-masthead { padding:12px 18px; }
  .lp-mira-hero { grid-template-columns:44% 56%; padding:20px 16px 24px; }
  .lp-mira-art { align-self:center; grid-column:1; grid-row:2/5; margin-left:-12px; }
  .lp-mira-art img { width:100%; max-width:none; }
  .lp-mira-copy { display:contents; }
  .lp-game-type { grid-column:1/-1; text-align:center; margin:0 0 14px; }
  .lp-mira-copy h1 { grid-column:2; grid-row:2; font-size:clamp(22px,6vw,31px); margin:0 0 12px; line-height:1.6; letter-spacing:0; }
  .lp-mira-lead { grid-column:2; grid-row:3; font-size:12px; margin:0 0 14px; line-height:1.9; }
  .lp-mira-copy .lp-hero-cta-big { grid-column:1/-1; grid-row:5; width:100%!important; max-width:360px; justify-self:center; margin:12px 0 0!important; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .sys-telop-text.scrolling { padding-left:0; white-space:normal; }
}