:root{
  --bg:#fff9f8;
  --bg2:#fff2f6;
  --bg3:#f9f2ff;
  --panel:rgba(255,255,255,.78);
  --panel-strong:rgba(255,255,255,.92);
  --text:#4b3558;
  --muted:#8d7697;
  --line:rgba(149,114,156,.16);
  --line-strong:rgba(149,114,156,.28);
  --pink:#f4bfd0;
  --rose:#ec9fbc;
  --lavender:#cdbbf8;
  --pearl:#fff5ef;
  --gold:#d5a96d;
  --shadow:0 18px 40px rgba(121,83,131,.12);
  --shadow-lg:0 30px 70px rgba(121,83,131,.16);
  --radius:28px;
  --radius-sm:20px;
  --max:1180px;
  --card-width:180px;
  --app-height:100svh;
  --ui-scale:1;
  --bottom-nav-height:96px;
  --bottom-tabs-actual-height:96px;
  --guide-bottom-shift:-8px;
}

*{box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  height:auto;
  margin:0;
  padding:0;
  -webkit-text-size-adjust:100%;
  color:var(--text);
  font-family:"Avenir Next","Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(244,191,208,.55), transparent 0 26%),
    radial-gradient(circle at 88% 12%, rgba(205,187,248,.5), transparent 0 24%),
    radial-gradient(circle at 50% 72%, rgba(255,225,233,.8), transparent 0 30%),
    linear-gradient(180deg, #fffafb 0%, #fff4f7 38%, #faf2ff 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  overflow-y:auto;
}

body.is-board-active{
  height:calc(var(--app-height) - 0px);
  overflow:hidden;
}

body.is-fullscreen-tab{
  height:var(--app-height);
  padding-top:env(safe-area-inset-top);
  box-sizing:border-box;
  overflow:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

body::before{
  background:
    radial-gradient(2px 2px at 12% 24%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 26% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px at 74% 16%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 82% 28%, rgba(255,255,255,.92), transparent 60%),
    radial-gradient(2px 2px at 68% 64%, rgba(255,255,255,.88), transparent 60%),
    radial-gradient(2px 2px at 34% 72%, rgba(255,255,255,.84), transparent 60%);
  opacity:.9;
}

body::after{
  background:
    linear-gradient(125deg, rgba(255,255,255,.22), transparent 22%),
    linear-gradient(300deg, rgba(205,187,248,.12), transparent 30%);
}

.topbar{
  display:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.logo{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:26px;
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 22%),
    linear-gradient(145deg, #ed9fbd, #cdbbf8 65%, #f8d9e5);
  box-shadow:0 10px 24px rgba(205,187,248,.36);
}

.brandText{min-width:0}
.title{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(1.1rem, 1rem + .8vw, 1.6rem);
  font-weight:700;
  letter-spacing:.04em;
}

.sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.wrap{
  width:100%;
  margin:0;
  padding:env(safe-area-inset-top) 0 calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  min-height:100vh;
  display:block;
  overflow:visible;
}

body.is-fullscreen-tab .wrap{
  height:calc(var(--app-height) - env(safe-area-inset-top));
  min-height:calc(var(--app-height) - env(safe-area-inset-top));
  padding-top:0;
  padding-bottom:0;
  overflow:hidden;
}

.tabPanel{
  display:none;
  min-height:calc(100vh - var(--bottom-nav-height));
  overflow:visible;
}

.tabPanel.is-active{
  display:block;
}

.tabPanel:not([data-tab-panel="board"]){
  width:min(var(--max), calc(100% - 20px));
  margin:16px auto 0;
}

.card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.62);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68)),
    var(--panel);
  box-shadow:var(--shadow);
}

.tabPanel[data-tab-panel="home"] .card{
  min-height:0;
  height:100%;
  overflow:hidden;
}

.tabPanel[data-tab-panel="home"]{
  height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  min-height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  overflow:hidden;
}

.tabPanel[data-tab-panel="home"].is-active{
  display:flex;
  flex-direction:column;
}

.tabPanel[data-tab-panel="setup"] .card{
  height:auto;
  overflow:visible;
  padding-top:0;
}

.tabPanel[data-tab-panel="board"] {
  padding:0;
  height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  min-height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  overflow:hidden;
  width:100%;
  margin:0;
}

.tabPanel[data-tab-panel="board"].is-active{
  display:flex;
  flex-direction:column;
}

.tabPanel[data-tab-panel="board"] .card{
  height:100%;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

body.is-fullscreen-tab .tabPanel[data-tab-panel="home"],
body.is-fullscreen-tab .tabPanel[data-tab-panel="board"]{
  width:100%;
  margin:0;
}

body.is-fullscreen-tab .tabPanel[data-tab-panel="home"]{
  height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  min-height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}

body.is-fullscreen-tab .tabPanel[data-tab-panel="board"]{
  height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  min-height:calc(var(--app-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(244,191,208,.26), transparent 24%),
    radial-gradient(circle at left bottom, rgba(205,187,248,.22), transparent 26%);
  pointer-events:none;
}

.panel{padding:24px}

.boardHeader{
  flex-shrink:0;
  padding:12px;
  background:rgba(255,255,255,.52);
  border-bottom:1px solid rgba(236,159,188,.12);
  display:flex;
  flex-direction:column;
  gap:8px;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
}

.boardSpreadPicker{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.boardSpreadField{
  flex:1;
  min-width:0;
}

.boardSpreadField select{
  width:100%;
}

.boardPanel{
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  gap:8px;
  padding:0;
  flex:1;
  overflow:hidden;
}

.boardViewport{
  position:relative;
  min-height:0;
  overflow:auto;
  display:grid;
  place-items:stretch;
  align-self:stretch;
  justify-self:stretch;
  border-radius:0;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:0;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
}

.boardCanvas{
  min-width:100%;
  min-height:100%;
  display:grid;
  place-items:center;
}

.zoomControl{
  padding:8px;
  background:rgba(255,255,255,.68);
  border-radius:10px;
  border:1px solid rgba(236,159,188,.12);
}

.appInfo{
  background:linear-gradient(135deg, rgba(243,191,209,.08), rgba(205,187,248,.08));
}

.cardInfoBox{
  position:relative;
  left:auto;
  bottom:auto;
  transform:none;
  width:min(720px, 100%);
  max-width:100%;
  padding:12px 14px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,245,249,.68));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(18px) saturate(1.05);
  font-size:13px;
  line-height:1.8;
  color:var(--text);
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 12px 30px rgba(121,83,131,.12);
  z-index:1100;
  pointer-events:none;
  opacity:.98;
}

.boardGuideArea{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:1100;
  display:flex;
  justify-content:center;
  padding:12px 12px 16px;
  pointer-events:none;
  border-top:1px solid rgba(236,159,188,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,248,251,.58));
}

.boardGuideBar{
  display:grid;
  gap:7px;
}

.boardGuideBarTop,
.boardGuideBarHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.boardGuideBarKicker{
  color:var(--rose);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.boardGuideBarTitle{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
}

.boardGuideBarCount{
  color:var(--muted);
  font-size:.82em;
  font-weight:600;
}

.boardGuideBarCardName{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

.boardGuideBarBadge{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  color:#6f5a8b;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.boardGuideBarText{
  color:rgba(75,53,88,.92);
  font-size:12px;
  line-height:1.6;
}

.boardGuideBarMeta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.boardGuideMini{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:rgba(75,53,88,.84);
  font-size:10px;
  font-weight:600;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr);
  gap:clamp(12px, 2vw, 20px);
  align-items:center;
  min-height:0;
  height:100%;
}

.heroCopy{
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow,
.sectionKicker{
  display:inline-block;
  margin-bottom:10px;
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero h1{
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(1.9rem, 1.25rem + 2.1vw, 3.2rem);
  line-height:1.18;
  letter-spacing:.03em;
}

.heroLead,
.sectionText{
  margin:clamp(10px, 1.8vh, 14px) 0 0;
  color:var(--muted);
  line-height:1.7;
  font-size:clamp(13px, 1.55vh, 14px);
}

.heroMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:clamp(12px, 2vh, 22px);
}

.heroChip,
.pill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(236,159,188,.24);
  background:rgba(255,255,255,.62);
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  white-space:nowrap;
}

.heroVisual{
  position:relative;
  min-height:0;
  height:100%;
  display:grid;
  place-items:center;
}

.orb{
  position:absolute;
  border-radius:999px;
  filter:blur(10px);
}

.orbA{
  width:180px;
  height:180px;
  background:rgba(244,191,208,.42);
  top:10px;
  right:16px;
}

.orbB{
  width:140px;
  height:140px;
  background:rgba(205,187,248,.4);
  left:30px;
  bottom:18px;
}

.mockCard{
  position:relative;
  width:min(240px, 70%);
  aspect-ratio:3/5;
  border-radius:30px;
  padding:12px;
  background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,246,249,.92));
  box-shadow:var(--shadow-lg);
  transform:rotate(8deg);
}

.mockCardInner{
  width:100%;
  height:100%;
  border-radius:24px;
  border:1px solid rgba(236,159,188,.18);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(180deg, #f6e6ef 0%, #ecdff8 100%);
  display:grid;
  place-items:center;
  position:relative;
}

.mockMoon{
  font-size:42px;
  color:#b18ad2;
  text-shadow:0 8px 20px rgba(177,138,210,.24);
}

.mockLine{
  position:absolute;
  bottom:22px;
  left:0;
  right:0;
  text-align:center;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  color:#8a6a99;
  font-size:14px;
  letter-spacing:.08em;
}

.mockStars::before,
.mockStars::after{
  content:"✦";
  position:absolute;
  color:#d5a96d;
  font-size:18px;
}

.mockStars::before{
  top:34px;
  left:34px;
}

.mockStars::after{
  top:64px;
  right:34px;
}

.sectionLead{
  margin-bottom:16px;
}

.sectionLead.compact{
  margin-bottom:0;
}

h2{
  margin:0;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(1.15rem, 1rem + .4vw, 1.55rem);
  letter-spacing:.05em;
}

.h2row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field.full{margin-top:14px}

#spread,
#topic,
#scenario,
#question,
#spreadMeta,
.ritualIntro,
.spreadChooser,
.deckStatusPanel,
.themeEditor,
.settingsNote,
.settingsActions,
.grid.settingsGrid{
  width:100%;
}

#spread{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  clip-path:inset(50%);
  border:0;
}

.spreadMeta{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(236,159,188,.12);
}

.ritualIntro{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,246,250,.76));
  border:1px solid rgba(236,159,188,.14);
  box-shadow:0 16px 30px rgba(121,83,131,.08);
}

.ritualIntroHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.ritualIntroKicker{
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ritualIntroTitle{
  margin:6px 0 0;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.1rem;
  line-height:1.4;
  letter-spacing:.04em;
}

.ritualIntroBadge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(244,191,208,.24);
  border:1px solid rgba(236,159,188,.18);
  color:#7c5870;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
}

.ritualSteps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.ritualStep{
  display:flex;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(236,159,188,.12);
}

.ritualStepNum{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(243,191,209,.92), rgba(205,187,248,.88));
  color:#5a3c67;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.ritualStepBody{
  min-width:0;
}

.ritualStepTitle{
  font-weight:800;
  font-size:13px;
  line-height:1.4;
}

.ritualStepText{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.65;
}

.questionPresetButtons{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

.questionPreset{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  width:100%;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(236,159,188,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,248,251,.7));
  color:var(--text);
  box-shadow:0 10px 20px rgba(190,152,204,.08);
}

.questionPreset:hover{
  transform:translateY(-1px);
  border-color:rgba(236,159,188,.26);
}

.questionPresetLabel{
  color:var(--rose);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.questionPresetText{
  color:var(--text);
  font-size:12px;
  line-height:1.6;
}

.spreadChooser{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,246,250,.7));
  border:1px solid rgba(236,159,188,.14);
  box-shadow:0 16px 30px rgba(121,83,131,.08);
}

.tabPanel[data-tab-panel="setup"] .card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.spreadChooserHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.spreadChooserNote{
  max-width:320px;
  text-align:right;
}

.spreadCards{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.spreadCardsEmpty{
  grid-column:1 / -1;
}

.spreadCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  width:100%;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(236,159,188,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,248,252,.76));
  color:var(--text);
  box-shadow:0 14px 26px rgba(190,152,204,.08);
}

.spreadCard:hover{
  transform:translateY(-1px);
  border-color:rgba(236,159,188,.28);
  box-shadow:0 18px 30px rgba(190,152,204,.12);
}

.spreadCard.is-active{
  border-color:rgba(236,159,188,.42);
  background:linear-gradient(180deg, rgba(244,191,208,.32), rgba(205,187,248,.2));
  box-shadow:0 18px 34px rgba(190,152,204,.14);
}

.spreadCardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.spreadCardCount{
  color:var(--rose);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.spreadCardTag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.64);
  color:#7d5b8b;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.spreadCardName{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.35;
}

.spreadCardText{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.spreadCardTips{
  color:#7c687f;
  font-size:11px;
  line-height:1.55;
}

.label{
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

select,
textarea{
  width:100%;
  appearance:none;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(236,159,188,.16);
  background:var(--panel-strong);
  color:var(--text);
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

select:focus,
textarea:focus{
  border-color:rgba(236,159,188,.48);
  box-shadow:0 0 0 4px rgba(244,191,208,.22);
  transform:translateY(-1px);
}

textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.75;
}

.row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
}

.btn{
  appearance:none;
  border:1px solid rgba(236,159,188,.18);
  border-radius:999px;
  padding:12px 16px;
  background:rgba(255,255,255,.7);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 12px 24px rgba(190,152,204,.1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(236,159,188,.32);
  box-shadow:0 18px 28px rgba(190,152,204,.12);
}

.btn:active{transform:translateY(1px)}

.btn.primary{
  background:linear-gradient(135deg, #f3bfd1, #cdbbf8 90%);
  color:#5a3c67;
}

.btnLarge{
  padding:14px 22px;
}

.topActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.settingsActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.deckStatusPanel{
  margin-top:18px;
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,246,250,.72));
  border:1px solid rgba(236,159,188,.18);
  box-shadow:0 16px 30px rgba(121,83,131,.08);
}

.deckStatusHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.deckStatusTitle{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
}

.deckStatusSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.deckSourceBadge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(244,191,208,.34);
  border:1px solid rgba(236,159,188,.22);
  color:#7b516d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}

.deckStatusGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}

.deckStatusItem{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.72);
}

.deckStatusLabel{
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.deckStatusValue{
  margin-top:6px;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:.03em;
}

.deckStatusNote{
  margin-top:12px;
}

.settingsNote{
  margin-top:16px;
}

.themeEditor{
  margin-top:10px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,246,250,.74));
  border:1px solid rgba(236,159,188,.16);
  box-shadow:0 16px 30px rgba(121,83,131,.08);
}

.themeEditorHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.themeEditorTitle{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.03em;
}

.themeEditorStatus{
  margin-top:4px;
}

.themeEditorActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.themeEditorGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.themeEditorItem{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(236,159,188,.12);
}

.themeEditorItem.wide{
  grid-column:1 / -1;
}

.themeEditorLabelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.themeEditorLabel{
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.themeEditorValue{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.themeEditorControl{
  width:100%;
}

.themeEditorControl[type="range"]{
  padding:0;
  height:28px;
  background:transparent;
  box-shadow:none;
}

.themeEditorControl[type="color"]{
  padding:4px;
  height:46px;
  min-height:46px;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
}

.themeEditorHint{
  margin-top:-2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.themeDockToggle{
  position:fixed;
  right:14px;
  bottom:calc(var(--bottom-tabs-actual-height) + env(safe-area-inset-bottom) + 14px);
  z-index:1201;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(236,159,188,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,241,247,.82));
  color:#7d5b8b;
  box-shadow:0 12px 28px rgba(121,83,131,.12);
  font-weight:800;
  letter-spacing:.08em;
}

.themeDock{
  position:fixed;
  inset:0;
  z-index:1200;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}

.themeDock.is-open{
  pointer-events:auto;
  opacity:1;
}

.themeDockScrim{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(40,18,44,.16);
  backdrop-filter:blur(2px);
  opacity:0;
}

.themeDock.is-open .themeDockScrim{
  opacity:1;
}

.themeDockSheet{
  position:absolute;
  right:12px;
  bottom:calc(var(--bottom-tabs-actual-height) + env(safe-area-inset-bottom) + 68px);
  width:min(720px, calc(100vw - 24px));
  max-height:min(78vh, 760px);
  overflow:auto;
  transform:translateY(18px) scale(.98);
  transition:transform .18s ease;
  box-shadow:0 24px 60px rgba(121,83,131,.18);
}

.themeDock.is-open .themeDockSheet{
  transform:translateY(0) scale(1);
}

.boardActions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  gap:6px;
  margin:0;
}

.boardActions #btnDraw{
  grid-column:1 / -1;
  min-height:48px;
  font-size:14px;
  letter-spacing:.06em;
}

.boardActions .btn{
  padding:10px 8px;
  font-size:12px;
  text-align:center;
  white-space:nowrap;
}

.muted{
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
}

.spreadBoard{
  display:grid;
  grid-template-columns:repeat(var(--spread-cols, 4), var(--board-card-width, var(--card-width)));
  grid-auto-rows:calc(var(--board-card-width, var(--card-width)) * 5 / 3);
  gap:var(--board-gap, 4px);
  padding:var(--board-padding, 4px);
  border-radius:0;
  background:transparent;
  border:none;
  width:max-content;
  max-width:none;
  overflow:visible;
  align-content:center;
  justify-content:center;
  user-select:none;
  will-change:transform;
  margin:auto;
}

.spreadBoard:active{
  cursor:grabbing;
}

.spreadSlot{
  min-width:0;
  min-height:0;
  aspect-ratio:3 / 5;
  width:var(--board-card-width, var(--card-width));
  height:auto;
}

.spreadSlotPlaceholder{
  height:100%;
  min-height:0;
  padding:8px 6px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  background:rgba(255,255,255,.62);
  border:1px dashed rgba(180,143,215,.4);
  text-align:center;
  overflow:hidden;
}

.spreadSlotNo{
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c18aa4;
  font-weight:600;
}

.spreadSlotLabel{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  color:#6b5272;
  line-height:1.3;
  font-size:11px;
  font-weight:500;
}

.spreadSlotHint{
  font-size:8px;
  line-height:1.4;
  color:#8d7a98;
}

.cardTile{
  appearance:none;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  perspective:1200px;
  text-align:left;
  aspect-ratio:3 / 5;
  max-width:100%;
}

.cardTile:hover{
  transform:translateY(-2px);
}

.cardTile:focus-visible{
  outline:0;
}

.cardTile:focus-visible .cardFlipInner{
  box-shadow:0 0 0 4px rgba(205,187,248,.34);
}

.cardFlipInner{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  transform-style:preserve-3d;
  transition:transform .55s ease;
}

.cardTile.is-flipped .cardFlipInner{
  transform:rotateY(180deg);
}

.cardFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 16px 30px rgba(121,83,131,.08);
}

.cardFaceBack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.94), transparent 18%),
    linear-gradient(180deg, #f7e8f0 0%, #ebdff9 100%);
  color:#8f6aa0;
}

.cardFaceBack::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:10px;
  border:1px solid rgba(181,138,210,.24);
}

.cardBackMark{
  position:relative;
  font-size:26px;
  color:#b48fd7;
  text-shadow:0 8px 16px rgba(180,143,215,.24);
}

.cardBackPos{
  position:relative;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  color:#745f82;
  text-align:center;
}

.cardBackHint{
  position:relative;
  font-size:7px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#b47b95;
}

.cardFaceFront{
  background:rgba(255,255,255,.62);
  transform:rotateY(180deg);
}

.cardThumb{
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  background:linear-gradient(180deg, #f8e4ee, #ece3fb);
  box-shadow:none;
}

.cardThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cardThumb .fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:24px;
  color:var(--rose);
}

.boardCardOverlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
  background:linear-gradient(180deg, transparent, rgba(67,42,79,.88));
  color:#fff8fc;
}

.boardCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
}

.boardCardPos{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
}

.boardCardBadge{
  display:inline-flex;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  font-size:8px;
  font-weight:600;
}

.boardCardName{
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  text-shadow:0 1px 8px rgba(0,0,0,.28);
  word-break:break-word;
}

.resultText{
  margin:0;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(236,159,188,.16);
  background:rgba(255,255,255,.72);
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.9;
  font-size:13px;
}

.resultStage{
  margin-top:14px;
}

.resultViewControl{
  min-width:min(320px, 100%);
  display:grid;
  gap:10px;
  justify-items:stretch;
}

.resultViewControlHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.resultViewControlKicker{
  color:var(--rose);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.resultViewControlTitle{
  color:#6c4b7a;
  font-size:12px;
  font-weight:700;
}

.resultViewToggle{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(236,159,188,.2);
  background:rgba(255,255,255,.64);
  box-shadow:0 10px 24px rgba(190,152,204,.08);
}

.resultModeButton{
  min-height:46px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:rgba(255,255,255,.88);
  color:#7d5c89;
  font-weight:800;
  letter-spacing:.04em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.resultModeButton.is-active{
  background:linear-gradient(135deg, rgba(244,191,208,.92), rgba(205,187,248,.82));
  color:#533a61;
  border-color:rgba(236,159,188,.26);
  box-shadow:0 10px 22px rgba(190,152,204,.16);
}

.resultModeButton:active{
  transform:translateY(1px);
}

.resultViewHint{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  padding:0 2px;
}

.resultHtml{
  margin-top:14px;
  line-height:1.85;
  font-size:14px;
}

.resultHtml h3{
  margin:18px 0 10px;
  color:#b47b95;
  font-family:"Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.05rem;
}

.resultHtml .sec{
  margin:10px 0;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(236,159,188,.12);
}

.resultHtml ul{
  margin:10px 0;
  padding-left:20px;
}

.resultHtml li{
  margin:6px 0;
}

hr.sep{
  border:0;
  border-top:1px solid rgba(236,159,188,.16);
  margin:18px 0;
}

.foot{
  padding:2px 4px 0;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  color:#8d7697;
}

.bottomTabs{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:0;
  min-height:var(--bottom-nav-height);
  padding:calc(10px * var(--ui-scale)) calc(10px * var(--ui-scale)) calc(10px * var(--ui-scale) + max(env(safe-area-inset-bottom), 8px));
  background:rgba(255,248,251,.96);
  backdrop-filter:blur(26px);
  border-top:1px solid rgba(236,159,188,.16);
  box-shadow:0 -8px 26px rgba(121,83,131,.08);
}

.bottomTab{
  appearance:none;
  border:0;
  border-radius:18px;
  min-height:44px;
  padding:8px 6px 7px;
  background:transparent;
  color:#8f739a;
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.bottomTabIcon{
  font-size:15px;
  line-height:1;
}

.bottomTabLabel{
  font-size:11px;
  line-height:1.1;
}

.bottomTab.is-active{
  background:linear-gradient(180deg, rgba(243,191,209,.78), rgba(205,187,248,.72));
  color:#5a3c67;
}

.bottomTab:active{
  transform:translateY(1px);
}

@media (max-width: 980px){
  .tabPanel[data-tab-panel="home"]{
    width:min(var(--max), calc(100% - 16px));
    margin:8px auto 0;
  }

  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(150px, 34vw);
    gap:12px;
  }

  .hero h1{
    font-size:clamp(1.7rem, 4.9vw, 2.4rem);
  }

  .heroLead{
    font-size:13px;
  }

  .mockCard{
    width:min(180px, 88%);
  }

  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .row{
    flex-direction:column;
    align-items:stretch;
  }

  .settingsActions .btn{
    flex:1 1 140px;
  }

  .deckStatusHead{
    flex-direction:column;
  }

  .deckStatusGrid{
    grid-template-columns:1fr;
  }

  .boardHeader{
    padding:10px 10px 8px;
  }

  .boardActions{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px;
  }

  .boardActions #btnDraw{
    min-height:46px;
    font-size:13px;
  }

  .boardActions .btn{
    min-width:0;
    padding:10px 4px;
    font-size:11px;
    letter-spacing:0;
  }

  .boardSpreadPicker{
    flex-direction:column;
    align-items:stretch;
  }

  .ritualIntroHead,
  .spreadChooserHead{
    flex-direction:column;
  }

  .ritualSteps,
  .questionPresetButtons{
    grid-template-columns:1fr;
  }

  .spreadChooserNote{
    max-width:none;
    text-align:left;
  }
}

@media (max-width: 560px){
  :root{
    --card-width:clamp(138px, calc(150px * var(--ui-scale)), 170px);
    --bottom-nav-height:clamp(86px, calc(96px * var(--ui-scale)), 104px);
  }

  .wrap{
    padding-top:env(safe-area-inset-top);
    padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }

  body.is-fullscreen-tab .wrap{
    height:calc(var(--app-height) - env(safe-area-inset-top));
    min-height:calc(var(--app-height) - env(safe-area-inset-top));
    padding-top:0;
    padding-bottom:0;
  }

  .tabPanel[data-tab-panel="home"]{
    width:calc(100% - 12px);
    margin-top:6px;
  }

  .tabPanel[data-tab-panel="home"] .card{
    border-radius:24px;
  }

  .panel{
    padding:18px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .ritualIntro{
    padding:14px;
  }

  .ritualSteps{
    grid-template-columns:1fr;
  }

  .questionPresetButtons,
  .spreadCards{
    grid-template-columns:1fr;
  }

  .spreadChooser,
  .spreadMeta{
    padding:14px;
  }

  .questionPreset,
  .spreadCard{
    padding:12px;
  }

  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(120px, 34vw);
    gap:10px;
  }

  .hero h1{
    font-size:clamp(1.45rem, 6vw, 1.9rem);
    line-height:1.14;
  }

  .heroLead{
    font-size:12px;
    line-height:1.6;
  }

  .heroMeta{
    gap:6px;
    margin-top:10px;
  }

  .heroChip{
    padding:6px 9px;
    font-size:10px;
  }

  .heroVisual{
    align-self:stretch;
  }

  .mockCard{
    width:min(138px, 92%);
    border-radius:22px;
    padding:8px;
  }

  .mockCardInner{
    border-radius:18px;
  }

  .mockMoon{
    font-size:30px;
  }

  .mockLine{
    bottom:14px;
    font-size:10px;
  }

  .orbA{
    width:100px;
    height:100px;
    top:6px;
    right:6px;
  }

  .orbB{
    width:84px;
    height:84px;
    left:8px;
    bottom:8px;
  }

  #btnStartReading{
    margin-top:14px !important;
    padding:12px 16px;
  }

  .bottomTabs{
    padding:calc(8px * var(--ui-scale)) calc(8px * var(--ui-scale)) calc(8px * var(--ui-scale) + max(env(safe-area-inset-bottom), 8px));
  }

  .bottomTab{
    min-height:42px;
    padding:7px 3px 6px;
  }

  .bottomTabIcon{
    font-size:14px;
  }

  .bottomTabLabel{
    font-size:10px;
  }

  .boardHeader{
    padding:8px 8px 6px;
  }

  .boardActions{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:4px;
  }

  .boardActions #btnDraw{
    min-height:44px;
    font-size:12px;
  }

  .boardActions .btn{
    padding:9px 2px;
    font-size:10px;
    border-radius:16px;
  }

  .themeEditor{
    padding:14px;
  }

  .themeEditorHead{
    flex-direction:column;
  }

  .themeEditorActions{
    justify-content:flex-start;
  }

  .themeEditorGrid{
    grid-template-columns:1fr;
  }

  .themeDockToggle{
    right:10px;
    bottom:calc(var(--bottom-tabs-actual-height) + env(safe-area-inset-bottom) + 10px);
    min-height:40px;
    padding:9px 12px;
  }

  .themeDockSheet{
    right:6px;
    left:6px;
    width:auto;
    bottom:calc(var(--bottom-tabs-actual-height) + env(safe-area-inset-bottom) + 58px);
    max-height:calc(100vh - var(--bottom-tabs-actual-height) - env(safe-area-inset-bottom) - 70px);
    border-radius:24px;
  }

  .boardCardOverlay{
    padding:8px;
    gap:4px;
  }

  .resultViewControl{
    min-width:0;
    width:100%;
  }

  .resultViewToggle{
    grid-template-columns:1fr;
  }

  .resultModeButton{
    width:100%;
  }

  .boardPanel{
    padding-bottom:0;
  }

  .cardInfoBox{
    width:min(720px, 100%);
    padding:12px 14px;
    min-height:82px;
    border-radius:18px;
  }

  .boardGuideArea{
    padding:0 8px 8px;
  }

  .boardGuideBarTitle{
    font-size:.94rem;
  }

  .boardGuideBarCardName{
    font-size:13px;
  }

  .boardGuideBarText{
    font-size:11px;
    line-height:1.55;
  }

  .boardCardTop{
    gap:4px;
  }

  .boardCardPos{
    font-size:8px;
  }

  .boardCardBadge{
    font-size:7px;
    padding:2px 5px;
  }

  .boardCardName{
    font-size:10px;
    line-height:1.3;
  }

  .cardFaceBack{
    gap:6px;
  }

  .cardBackMark{
    font-size:24px;
  }

  .cardBackPos{
    font-size:9px;
  }

  .cardBackHint{
    font-size:7px;
  }

  .spreadSlotPlaceholder{
    padding:8px 6px;
    gap:4px;
  }

  .spreadSlotNo{
    font-size:9px;
  }

  .spreadSlotLabel{
    font-size:13px;
  }

  .spreadSlotHint{
    font-size:10px;
  }
}

@media (max-height: 780px){
  .tabPanel[data-tab-panel="home"]{
    margin-top:6px;
  }

  .tabPanel[data-tab-panel="home"] .panel{
    padding:18px;
  }

  .hero h1{
    font-size:clamp(1.5rem, 4.5vh, 2.1rem);
  }

  .heroLead{
    margin-top:8px;
    font-size:12px;
    line-height:1.55;
  }

  .heroMeta{
    margin-top:10px;
    gap:6px;
  }

  .heroChip{
    padding:5px 9px;
    font-size:10px;
  }

  .mockCard{
    width:min(150px, 90%);
  }

  .orbA{
    width:96px;
    height:96px;
  }

  .orbB{
    width:76px;
    height:76px;
  }

  #btnStartReading{
    margin-top:12px !important;
  }
}

@media (prefers-reduced-motion: no-preference){
  .card,
  .btn,
  .cardTile{
    animation:fadeUp .5s ease both;
  }

  .card:nth-of-type(2){animation-delay:.05s}
  .card:nth-of-type(3){animation-delay:.1s}
  .card:nth-of-type(4){animation-delay:.15s}
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ===== CARD UI IMPROVEMENTS ===== */

.cardFlipInner{
  transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

.cardFaceBack::after{
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='20' cy='20' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='50' cy='30' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='80' cy='25' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='30' cy='50' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='70' cy='55' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='25' cy='75' r='2' fill='rgba(205,187,248,.4)'/%3E%3Ccircle cx='75' cy='80' r='2' fill='rgba(205,187,248,.4)'/%3E%3C/svg%3E");
  opacity: 0.18;
  pointer-events: none;
}

@keyframes cardShimmer{
  from{ background-position: -200% center; }
  to{ background-position: 200% center; }
}

.cardTile:hover .cardFaceBack{
  background: linear-gradient(100deg, #f7e8f0 0%, #ecdff9 45%, #f5e4f0 55%, #ecdff9 100%);
  background-size: 200% 100%;
  animation: cardShimmer 1.4s ease;
}

.cardFaceFront.is-reversed .cardThumb{
  transform: rotate(180deg);
}

.cardBackNum{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(181,138,210,.22);
  border: 1px solid rgba(181,138,210,.3);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #a07bc0;
}

@keyframes cardRevealSettle{
  0%{ box-shadow: 0 0 0 4px rgba(205,187,248,.0); }
  40%{ box-shadow: 0 0 0 6px rgba(205,187,248,.38); }
  100%{ box-shadow: 0 0 0 0px rgba(205,187,248,.0); }
}

.cardFaceFront.just-revealed{
  animation: cardRevealSettle .7s ease forwards;
}

/* ===== HISTORY TAB ===== */

.historyList{
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.historyItem{
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(236,159,188,.14);
  display: grid;
  gap: 6px;
}

.historyItemHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.historyDate{
  font-size: 11px;
}

.historySpread{
  font-family: "Iowan Old Style","Palatino Linotype","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

.historyQuestion,
.historyCards{
  font-size: 12px;
}

.historyActions{
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.historyEmpty{
  padding: 28px 0;
  text-align: center;
}