/* Free tools: Kundli match, Find your rashi, Love luck today (and their tiles on other pages). */

/* ---------- hero with the tool in it ---------- */
.tool-hero { grid-template-columns: 1fr; align-items: start; gap: 14px; padding: 2px 0 26px; }
.tool-hero .ph-copy { gap: 8px; padding: 0; }
.tool-hero h1 { font-size: clamp(2.5rem, 1.7rem + 3.8vw, 4.6rem); }
.tool-hero .lead { max-width: 34rem; }
.tool-kicker { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px;
  background: rgba(255, 250, 247, .88); font-weight: 700; font-size: .84rem; color: var(--plum); box-shadow: var(--shadow-soft); }
.tool-kicker svg { width: 16px; height: 15px; }
.tool-steps, .tool-mithu { display: none; }

.tool-card { position: relative; display: grid; gap: 14px; padding: 14px; border-radius: 28px; background: var(--card);
  box-shadow: 0 26px 50px -26px rgba(65, 33, 62, .6); }
.persons { display: grid; gap: 10px; position: relative; }
.person { min-width: 0; margin: 0; border: 0; padding: 12px; border-radius: 20px; background: var(--milk); display: grid; gap: 8px; }
.p-title { font: 800 1.2rem/1 var(--display); color: var(--plum); }
.p-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.p-head .seg { max-width: 220px; justify-self: end; width: 100%; }
.vs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -6px rgba(122, 38, 60, .5); }
.vs svg { width: 24px; height: 22px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: grid; place-items: center; min-height: 40px; padding: 0 6px; border-radius: 11px; font-weight: 700; color: var(--plum-2); cursor: pointer; transition: background .15s ease; }
.seg input:checked + label { background: var(--plum); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--sindoor); outline-offset: 1px; }

.field { display: grid; gap: 6px; min-width: 0; }
.flabel { font-weight: 700; font-size: .92rem; color: var(--plum); }
.flabel small { font-weight: 600; color: var(--plum-2); margin-left: 4px; }
.inp, .dob select {
  width: 100%; min-width: 0; min-height: 48px; border: 0; border-radius: 14px; background: #fff; color: var(--plum);
  box-shadow: inset 0 0 0 2px var(--line); padding: 0 12px; font: 600 1rem/1.2 var(--text);
}
.inp::placeholder { color: #A8919F; font-weight: 500; }
.dob { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; gap: 6px; }
.dob select { appearance: none; -webkit-appearance: none; padding: 0 22px 0 10px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C42F40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center / 10px no-repeat; }
.dob select:invalid, .dob select option[value=""] { color: #A8919F; }
.inp:focus, .dob select:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--sindoor); }
.is-err .dob select { box-shadow: inset 0 0 0 2.5px #E0404F; background-color: #FFF4F4; }
.f-err { font-size: .85rem; font-weight: 700; color: var(--sindoor-deep); }
.time-toggle summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--sindoor-deep); padding: 4px 0; }
.time-toggle summary::-webkit-details-marker { display: none; }
.time-toggle summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FFE3DA; font-weight: 800; }
.time-toggle[open] summary::before { content: "–"; }
.time-toggle summary small { font-weight: 600; color: var(--plum-2); }
.time-toggle .inp { margin-top: 8px; }

.btn-big { min-height: 56px; width: 100%; font-size: 1.1rem; }
.btn-big svg { width: 22px; height: 20px; }
.btn-big svg use { fill: #fff; }
.btn-wa { background: linear-gradient(180deg, #2BCB63, #18A04B); box-shadow: 0 8px 18px -8px rgba(31, 168, 85, .7), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-wa:hover { box-shadow: 0 12px 22px -10px rgba(31, 168, 85, .75), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-wa svg { width: 24px; height: 24px; }
.btn-soft { background: #fff; color: var(--plum); box-shadow: inset 0 0 0 2px var(--line); }
.btn-soft:hover { box-shadow: inset 0 0 0 2px #F0A9A3; }
.tool-note { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center; font-size: .84rem; font-weight: 600; color: var(--plum-2); }
.tool-note svg { width: 14px; height: 14px; flex: none; }

/* ---------- results ---------- */
.result-sec { padding: 26px 0 40px; background: var(--milk); scroll-margin-top: 8px; }
.res-grid { display: grid; gap: 18px; align-items: start; }
.score-card { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 22px 16px 18px; border-radius: 30px;
  background: linear-gradient(180deg, #FFE1D8, #FFF3EC); box-shadow: var(--shadow-soft); }
.score-names { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font: 800 1.45rem/1.1 var(--display); color: var(--plum); }
.score-names svg { width: 26px; height: 24px; }
.ring { --p: .5; position: relative; width: min(210px, 62vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 0deg, #FF7E8E 0, var(--sindoor-deep) calc(var(--p) * 360deg), #F7D5CF 0); }
.ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #FFFBF9; box-shadow: inset 0 4px 12px rgba(122, 38, 60, .1); }
.ring > div { position: relative; display: grid; justify-items: center; }
.ring b { font: 800 4.4rem/.9 var(--brand); color: var(--plum); }
.ring small { font-weight: 700; color: var(--plum-2); font-size: .95rem; }
.score-band { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); color: var(--sindoor-deep); }
.score-band:focus { outline: none; }
.band-rare .score-band { color: #B7791F; }
.mithu-says { display: flex; align-items: center; gap: 12px; max-width: 30rem; padding: 12px 14px; border-radius: 18px; background: #fff; text-align: left; font-weight: 600; color: var(--plum); }
.mithu-says img { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.range-note { max-width: 30rem; font-size: .9rem; color: var(--plum-2); }
.range-note .link-btn { font-size: .9rem; color: var(--sindoor-deep); font-weight: 700; }
.share-box { display: grid; gap: 10px; width: 100%; max-width: 28rem; margin-top: 4px; }
.share-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-2 .btn { padding-inline: .6em; }
.copied { min-height: 1.2em; font-size: .85rem; font-weight: 600; color: var(--plum-2); word-break: break-all; }
.copied:empty { display: none; }

.res-detail { display: grid; gap: 12px; min-width: 0; }
.res-h { font-size: 1.45rem; margin-top: 8px; }
.moons { display: grid; gap: 10px; }
.moon-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); text-align: left; }
.moon-card img { width: 64px; height: 64px; object-fit: contain; }
.moon-card span { display: block; font-size: .8rem; font-weight: 700; color: var(--haldi-ink); }
.moon-card b { display: block; font: 800 1.25rem/1.1 var(--display); }
.moon-card small { display: block; font-size: .86rem; color: var(--plum-2); font-weight: 600; }

.kootas, .doshas { display: grid; gap: 8px; }
.kootas li { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: #fff; }
.k-top { display: flex; align-items: baseline; gap: 8px; }
.k-top b { font: 700 1.02rem/1.2 var(--display); }
.k-top small { font-size: .8rem; font-weight: 600; color: var(--plum-2); }
.k-pts { margin-left: auto; font: 800 1.1rem/1 var(--display); color: var(--plum); white-space: nowrap; }
.k-pts i { font-style: normal; font-size: .85rem; color: var(--plum-2); }
.k-bar { height: 8px; border-radius: 99px; background: #F7E1DC; overflow: hidden; }
.k-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF8E9A, var(--sindoor-deep)); }
.k-good .k-bar i { background: linear-gradient(90deg, #7ED38C, #2F9E52); }
.k-mid .k-bar i { background: linear-gradient(90deg, #FFD27A, #D69A1F); }
.kootas p { font-size: .9rem; color: var(--plum-2); }
.doshas li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; }
.doshas b { font: 700 1.02rem/1.2 var(--display); }
.doshas p { font-size: .9rem; color: var(--plum-2); }
.d-pill { justify-self: start; padding: 4px 10px; border-radius: 99px; font-size: .76rem; font-weight: 800; letter-spacing: .02em; }
.d-none .d-pill { background: #E3F4E5; color: #2F7D43; }
.d-cancel .d-pill { background: #FFF1D6; color: #8A5A0B; }
.d-yes .d-pill { background: #FFE1E1; color: var(--sindoor-deep); }

.app-cta { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-top: 8px; padding: 16px; border-radius: 24px;
  background: linear-gradient(180deg, #7A3E6A, #3A1D37); color: #FFEFE8; }
.app-cta img { width: 76px; }
.app-cta b { display: block; font: 800 1.15rem/1.15 var(--display); color: #fff; }
.app-cta p { font-size: .9rem; color: #F2D8E2; margin: 4px 0 10px; }

/* Find your rashi */
.rashi-card .kicker { font-size: .9rem; }
.glyph { display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft);
  font: 400 4rem/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; color: var(--sindoor-deep); }
.rashi-card .score-band { font-family: var(--brand); font-size: clamp(2.8rem, 2rem + 3vw, 3.6rem); line-height: .9; }
.rashi-en { font-weight: 700; color: var(--plum-2); }
.nak-big { width: 100%; max-width: 26rem; }
.trait-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.trait-chips li { padding: 7px 14px; border-radius: 99px; background: #fff; color: var(--sindoor-deep); font-weight: 800; font-size: .92rem; box-shadow: var(--shadow-soft); }
.pick-time { display: grid; gap: 8px; width: 100%; max-width: 28rem; padding: 12px; border-radius: 18px; background: #FFF1D6; text-align: left; }
.pick-time p { font-size: .9rem; color: var(--plum); }
.pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.pick { display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px #F3DDB0; }
.pick small { font-size: .78rem; font-weight: 700; color: #8A5A0B; }
.pick b { font: 800 1.05rem/1.1 var(--display); }
.pick span { font-size: .82rem; color: var(--plum-2); font-weight: 600; }
.pick.on { background: var(--plum); box-shadow: none; }
.pick.on small, .pick.on b, .pick.on span { color: #fff; }
.nak-hook { font-size: 1.02rem; color: var(--plum); }
.nak-ideas { display: grid; gap: 8px; }
.nak-ideas li { position: relative; padding: 12px 14px 12px 40px; border-radius: 16px; background: #fff; color: var(--plum-2); font-size: .95rem; }
.nak-ideas li::before { content: ""; position: absolute; left: 14px; top: 17px; width: 14px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 58'%3E%3Cpath fill='%23EE5670' d='M32 57C29 54 3 38 1.3 20.6 0 9 8 1 18 1c6.2 0 11 3.3 14 8.4C35 4.3 39.8 1 46 1c10 0 18 8 16.7 19.6C61 38 35 54 32 57Z'/%3E%3C/svg%3E") no-repeat center / contain; }
.nak-facts { display: grid; gap: 1px; margin: 0; border-radius: 16px; overflow: hidden; background: var(--line); }
.nak-facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 10px; padding: 10px 14px; background: #fff; }
.nak-facts dt { font-weight: 700; font-size: .86rem; }
.nak-facts dd { margin: 0; font-size: .88rem; color: var(--plum-2); }
.next-tools { display: grid; gap: 10px; margin-top: 4px; }
.next-tool { display: grid; grid-template-columns: 52px 1fr 24px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: #fff; box-shadow: var(--shadow-soft); text-decoration: none; }
.next-tool img { width: 52px; height: 52px; object-fit: contain; }
.next-tool b { display: block; font: 800 1.05rem/1.15 var(--display); }
.next-tool small { display: block; font-size: .85rem; color: var(--plum-2); }
.next-tool::after, .tt-go::after { content: ""; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sindoor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* Love luck today */
.luck-hero .ph-copy { gap: 10px; }
.crowned { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 10px 16px; border-radius: 18px; background: rgba(255, 250, 247, .92);
  box-shadow: var(--shadow-soft); font-weight: 600; color: var(--plum); }
.crown-ic { font-size: 1.4rem; line-height: 1; }
.crowned b { color: #9A6412; }
.luck-moon { font-size: .92rem; font-weight: 600; color: var(--plum); }
.pick-card { gap: 10px; }
.rashi-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rashi-pick button { display: grid; justify-items: center; gap: 0; min-height: 52px; padding: 6px 4px; border: 0; border-radius: 14px;
  background: var(--milk); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; font-size: .86rem; color: var(--plum); cursor: pointer; }
.rashi-pick button i, .glyph-sm { font-style: normal; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; }
.rashi-pick button i { font-size: 1.25rem; line-height: 1.2; color: var(--sindoor-deep); }
.rashi-pick button[aria-pressed="true"] { background: var(--plum); color: #fff; box-shadow: none; }
.rashi-pick button[aria-pressed="true"] i { color: #FFD27A; }
.luck-sec { padding-top: 24px; }
.my-luck { margin-bottom: 18px; scroll-margin-top: 10px; }
.my-luck-card { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 20px 16px; border-radius: 28px; background: linear-gradient(180deg, #FFE1D8, #FFF3EC); box-shadow: var(--shadow-soft); }
.my-luck-card .luck-head { justify-content: center; text-align: left; }
.my-luck-card .luck-head b { font-size: 1.8rem; }
.my-luck-card .hearts svg { width: 38px; height: 34px; }
.my-line { font-size: 1.08rem; font-weight: 600; max-width: 30rem; }
.luck-all-title { margin: 0 0 12px; }
.luck-grid { display: grid; gap: 10px; }
.luck-card { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-soft); }
.luck-card p { font-size: .92rem; color: var(--plum-2); }
.luck-tap { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.luck-tap:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.luck-head { display: flex; align-items: center; gap: 10px; }
.luck-head div > span { display: block; font-size: .8rem; font-weight: 700; color: var(--haldi-ink); }
.luck-head b { display: block; font: 800 1.2rem/1.05 var(--display); }
.luck-head small { display: block; font-size: .82rem; color: var(--plum-2); font-weight: 600; }
.glyph-sm { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #FFE9E2; font-size: 1.45rem; color: var(--sindoor-deep); }
.crown-pill { margin-left: auto; padding: 5px 10px; border-radius: 99px; background: #B7791F; color: #fff; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.hearts { display: inline-flex; gap: 4px; }
.hearts svg { width: 24px; height: 22px; }
.hearts .off { opacity: .22; filter: grayscale(1); }
.caution { justify-self: start; padding: 6px 10px; border-radius: 12px; background: #FFF1D6; color: #8A5A0B !important; font-weight: 700; font-size: .84rem !important; }
.luck-card.is-crowned { box-shadow: inset 0 0 0 2.5px #E7B24A, var(--shadow-soft); background: linear-gradient(180deg, #FFF8E6, #fff); }
.luck-card.is-mine { box-shadow: inset 0 0 0 2.5px var(--plum), var(--shadow-soft); }
.luck-how { margin-top: 16px; font-size: .86rem; color: var(--plum-2); max-width: 46rem; }

/* explainer + the 12 rashis */
.explain-grid { display: grid; gap: 22px; align-items: center; }
.explain-grid .sec-head { margin-bottom: 0; }
.koota-table { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.koota-table li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k n" "s n"; gap: 0 8px; align-items: center; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); }
.koota-table b { grid-area: k; }
.koota-table span { grid-area: s; }
.koota-table i { grid-area: n; }
.koota-table b { font: 800 1rem/1.1 var(--display); }
.koota-table span { color: var(--plum-2); font-size: .82rem; line-height: 1.3; }
.koota-table i { font-style: normal; font: 800 1.2rem/1 var(--display); color: var(--sindoor-deep); }
.rashi-wheel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rashi-wheel span { display: grid; justify-items: center; gap: 0; padding: 8px 4px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft); text-align: center; }
.rashi-wheel i { font-style: normal; font: 400 1.6rem/1.1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif; color: var(--sindoor-deep); }
.rashi-wheel b { font: 800 .98rem/1.1 var(--display); }
.rashi-wheel small { font-size: .78rem; color: var(--plum-2); font-weight: 600; }

/* ---------- tiles (home, astrology, tests, the tools themselves) ---------- */
.tools-sec { padding: 40px 0 44px; background: var(--milk); }
.tools-sec .sec-head { margin-bottom: 22px; }
.tools-grid { display: grid; gap: 12px; }
.tool-tile { display: grid; grid-template-columns: 72px 1fr; grid-template-areas: "art copy" "art go"; gap: 4px 14px; align-items: center;
  padding: 16px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-soft); text-decoration: none; color: var(--plum);
  transition: transform .15s ease, box-shadow .15s ease; }
.tool-tile img { grid-area: art; width: 72px; height: 72px; object-fit: contain; }
.tt-copy { grid-area: copy; display: grid; gap: 2px; }
.tt-copy b { font: 800 1.25rem/1.1 var(--display); }
.tt-copy span { font-size: .9rem; color: var(--plum-2); }
.tt-go { grid-area: go; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: var(--sindoor-deep); }
.tile-match { background: linear-gradient(180deg, #FFE7DF, #fff); box-shadow: inset 0 0 0 2px #F7C6BB, var(--shadow-soft); }
.page-match .more-sec .tile-match, .page-luck .more-sec .tile-luck, .page-rashi .more-sec .tile-rashi { display: none; }
.more-sec .sec-head { margin-bottom: 22px; }

/* home: a pill under the Play badge */
.hero-tool { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: rgba(255, 250, 247, .94);
  box-shadow: var(--shadow-soft); text-decoration: none; font-weight: 800; color: var(--plum); }
.hero-tool img { width: 34px; height: 34px; object-fit: contain; }
.hero-tool span { padding: 3px 9px; border-radius: 99px; background: var(--sindoor); color: #fff; font-size: .78rem; letter-spacing: .03em; }

/* the tools are for sharing: no app dock over the share buttons (the pages have their own app cards) */
.page-match .dock, .page-luck .dock, .page-rashi .dock { display: none !important; }

/* the hot nav link */
.nav-hot svg { display: none; }

@media (hover: hover) {
  .tool-tile:hover, .next-tool:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(122, 38, 60, .6); }
}

@media (min-width: 700px) {
  .tools-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-tile { grid-template-columns: 1fr; grid-template-areas: "art" "copy" "go"; justify-items: start; gap: 10px; padding: 22px; }
  .tool-tile img { width: 96px; height: 96px; }
  .moons { grid-template-columns: 1fr 1fr; }
  .luck-grid { grid-template-columns: repeat(2, 1fr); }
  .rashi-pick { grid-template-columns: repeat(4, 1fr); }
  .rashi-wheel { grid-template-columns: repeat(4, 1fr); }
  .next-tools { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .tool-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; padding: 0 0 calc(var(--vh1, 1svh) * 4); }
  .tool-hero .ph-copy { gap: 14px; align-content: center; position: relative; }
  .tool-steps { display: grid; gap: 8px; margin-top: 6px; }
  .tool-steps li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--plum); }
  .tool-steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--plum); color: #fff; font-size: .9rem; }
  .tool-mithu { display: block; width: auto; height: min(calc(var(--vh1, 1svh) * 30), 280px); margin-top: 6px; filter: drop-shadow(0 14px 18px rgba(160, 50, 60, .25)); }
  .tool-card { padding: 18px; gap: 16px; }
  .persons { grid-template-columns: 1fr 1fr; gap: 14px; }
  .vs { display: none; }
  .tool-card-one { max-width: 520px; justify-self: center; width: 100%; }
  .res-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
  .score-card { position: sticky; top: 16px; padding: 28px 22px 22px; }
  .result-sec { padding: 48px 0 64px; }
  .explain-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .koota-table { grid-template-columns: 1fr; }
  .koota-table li { grid-template-columns: 8rem 1fr auto; grid-template-areas: "k s n"; padding: 12px 16px; }
  .koota-table span { font-size: .92rem; }
  .luck-grid { grid-template-columns: repeat(3, 1fr); }
  .luck-hero .pick-card { max-width: 520px; justify-self: center; width: 100%; }
  .my-luck-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 28px; padding: 26px 30px; }
  .my-luck-card > .luck-head { grid-column: 1; grid-row: 1 / span 2; }
  .my-luck-card .share-box { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; align-items: start; max-width: none; }
  .my-luck-card .share-box .share-2 { grid-column: 2; grid-row: 1; }
  .nav-hot { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 250, 247, .8); }
  .nav-hot svg { display: block; width: 16px; height: 15px; }
  .tools-sec { padding: 64px 0; }
  .tool-tile { padding: 28px; gap: 12px; }
  .tool-tile img { width: 128px; height: 128px; }
  .tt-copy b { font-size: 1.55rem; }
  .tt-copy span { font-size: 1rem; }
  .tt-go { font-size: 1rem; }
}
@media (min-width: 1200px) {
  .luck-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- shared-result pages (match/<score>.html, moon-sign/<key>.html) ---------- */
.shared { min-height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #F47A85 0, #FCC49F 340px, var(--milk) 620px); }
.shared-top { display: flex; justify-content: center; padding: 14px 16px 6px; }
.shared-main { flex: 1; width: min(560px, 100% - 24px); margin: 0 auto; padding: 8px 0 28px; display: grid; gap: 14px; align-content: start; }
.shared-main .score-card { background: var(--card); box-shadow: 0 26px 50px -26px rgba(65, 33, 62, .6); }
.shared-main .score-band { font-family: var(--brand); font-size: clamp(2.4rem, 1.8rem + 3vw, 3.2rem); line-height: .95; }
.nak-sticker { width: 150px; height: 150px; object-fit: contain; }
.shared-foot { padding: 18px 16px 26px; text-align: center; font-size: .82rem; color: var(--plum-2); }
.shared-foot a { color: var(--plum-2); }