{"id":13,"date":"2026-07-27T07:45:13","date_gmt":"2026-07-27T07:45:13","guid":{"rendered":"https:\/\/gachanews.com\/?page_id=13"},"modified":"2026-07-27T07:45:13","modified_gmt":"2026-07-27T07:45:13","slug":"13-2","status":"publish","type":"page","link":"https:\/\/gachanews.com\/?page_id=13","title":{"rendered":""},"content":{"rendered":"<p><?php\n\/**\n * Template Name: Hand Fortune Reader\n * Description: A multi-step, mystical \"palm reading\" experience.\n *\n * FLOW:\n *   1. Visitor uploads a photo of their hand.\n *   2. Visitor picks a focus area: Love, Career, Wealth, Health, or General.\n *   3. A scanning animation plays over the photo.\n *   4. A fortune is drawn at random from that category's pool (20 each,\n *      100 total), styled with an \"ancient tradition\" framing device.\n *   5. Visitor can copy \/ share the reading, save it to a personal\n *      reading journal (stored in their own browser via localStorage \u2014\n *      nothing is sent to any server), or start over.\n *\n * No AI, no image analysis, no backend calls. Everything is pre-written\n * text chosen at random in the browser. Entertainment only.\n *\n * INSTALL:\n * 1. Upload this file into your active theme's folder, e.g.\n *    \/wp-content\/themes\/your-theme\/page-fortune.php\n * 2. WP Admin > Pages > Add New > set Template to &#8220;Hand Fortune Reader&#8221;.<br \/>\n * 3. Publish.<br \/>\n *\/<br \/>\nget_header(); ?><\/p>\n<style>\n\/* ============================================================\n   FORTUNE PAGE \u2014 isolated styles\n   ============================================================ *\/\n.fp-wrap, .fp-wrap * { box-sizing: border-box; }\n.fp-wrap {\n  --ink: #f3ecdf;\n  --ink-dim: #c9bfae;\n  --ink-faint: rgba(201,191,174,0.55);\n  --night-1: #0b0716;\n  --night-2: #1a0f2e;\n  --night-3: #2a1a45;\n  --gold: #d4af37;\n  --gold-soft: #e9cf7a;\n  --rose: #c65b7c;\n  --line: rgba(212,175,55,0.28);\n  --panel: rgba(255,255,255,0.03);<\/p>\n<p>  position: relative;\n  min-height: 100vh;\n  margin: 0;\n  padding: 0;\n  background:\n    radial-gradient(ellipse at 20% 10%, rgba(198,91,124,0.18), transparent 55%),\n    radial-gradient(ellipse at 80% 85%, rgba(212,175,55,0.12), transparent 50%),\n    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);\n  color: var(--ink);\n  font-family: 'Jost', 'Segoe UI', sans-serif;\n  overflow-x: hidden;\n}<\/p>\n<p>.fp-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }\n.fp-star {\n  position: absolute; width: 2px; height: 2px;\n  background: var(--gold-soft); border-radius: 50%; opacity: 0.6;\n  animation: fp-twinkle 3.5s ease-in-out infinite;\n}\n@keyframes fp-twinkle {\n  0%, 100% { opacity: 0.15; transform: scale(1); }\n  50% { opacity: 0.9; transform: scale(1.6); }\n}<\/p>\n<p>.fp-container {\n  position: relative; z-index: 2;\n  max-width: 680px; margin: 0 auto;\n  padding: 64px 24px 96px;\n  text-align: center;\n}<\/p>\n<p>.fp-eyebrow {\n  display: inline-block; font-family: 'Cinzel', serif;\n  font-size: 12px; letter-spacing: 0.35em; text-transform: uppercase;\n  color: var(--gold); margin-bottom: 18px;\n}<\/p>\n<p>.fp-title {\n  font-family: 'Cormorant Garamond', 'Georgia', serif;\n  font-weight: 600; font-size: clamp(34px, 6.5vw, 54px);\n  line-height: 1.08; margin: 0 0 14px;\n  background: linear-gradient(180deg, var(--ink) 0%, var(--gold-soft) 100%);\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent;\n}<\/p>\n<p>.fp-subtitle {\n  font-size: 16px; color: var(--ink-dim);\n  max-width: 460px; margin: 0 auto 40px; line-height: 1.6;\n}<\/p>\n<p>\/* ---------- Step indicator ---------- *\/\n.fp-steps {\n  display: flex; justify-content: center; gap: 28px;\n  margin-bottom: 36px; flex-wrap: wrap;\n}\n.fp-step {\n  display: flex; align-items: center; gap: 8px;\n  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;\n  color: var(--ink-faint); transition: color .3s ease;\n}\n.fp-step-dot {\n  width: 7px; height: 7px; border-radius: 50%;\n  background: var(--ink-faint); transition: background .3s ease, box-shadow .3s ease;\n}\n.fp-step.fp-active { color: var(--gold-soft); }\n.fp-step.fp-active .fp-step-dot {\n  background: var(--gold); box-shadow: 0 0 10px rgba(212,175,55,0.7);\n}\n.fp-step.fp-done { color: var(--ink-dim); }\n.fp-step.fp-done .fp-step-dot { background: var(--rose); }<\/p>\n<p>\/* ---------- Card ---------- *\/\n.fp-card {\n  position: relative;\n  border: 1px solid var(--line);\n  border-radius: 18px;\n  padding: 44px 32px;\n  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));\n  backdrop-filter: blur(6px);\n  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);\n  min-height: 380px;\n}<\/p>\n<p>.fp-stage { display: none; }\n.fp-stage.fp-visible { display: block; animation: fp-fadein .5s ease; }\n@keyframes fp-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }<\/p>\n<p>\/* ---------- Stage 1: upload ---------- *\/\n.fp-drop {\n  position: relative; width: 220px; height: 220px; margin: 0 auto 28px;\n  border-radius: 50%; border: 1.5px dashed var(--line);\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease;\n  overflow: hidden;\n  background: radial-gradient(circle at center, rgba(212,175,55,0.06), transparent 70%);\n}\n.fp-drop:hover, .fp-drop.fp-drag { border-color: var(--gold); box-shadow: 0 0 40px rgba(212,175,55,0.18); }\n.fp-drop input[type=file] {\n  position: absolute; inset: 0; opacity: 0; cursor: pointer;\n  z-index: 5; \/* always on top so taps reach the input, not decoration *\/\n  -webkit-tap-highlight-color: transparent;\n}\n.fp-drop-icon { pointer-events: none; }\n.fp-drop-icon svg { width: 62px; height: 62px; }\n.fp-drop-text {\n  position: absolute; bottom: 18px; left: 0; right: 0;\n  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);\n  pointer-events: none; \/* text sits visually on top but must not catch taps *\/\n}\n.fp-preview { width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; }<\/p>\n<p>.fp-hint {\n  max-width: 340px; margin: 0 auto 20px; font-size: 12.5px;\n  color: var(--rose); line-height: 1.5;\n}<\/p>\n<p>.fp-scan-overlay { position: absolute; inset: 0; display: none; pointer-events: none; }\n.fp-scan-overlay svg { width: 100%; height: 100%; }\n.fp-scan-line {\n  fill: none; stroke: var(--gold-soft); stroke-width: 1.4; stroke-linecap: round;\n  stroke-dasharray: 260; stroke-dashoffset: 260;\n  filter: drop-shadow(0 0 4px rgba(233,207,122,0.9));\n  animation: fp-draw 1.6s ease forwards;\n}\n.fp-scan-line:nth-child(2) { animation-delay: .15s; }\n.fp-scan-line:nth-child(3) { animation-delay: .35s; }\n.fp-scan-line:nth-child(4) { animation-delay: .55s; }\n@keyframes fp-draw { to { stroke-dashoffset: 0; } }\n.fp-scan-sweep {\n  position: absolute; left: 0; right: 0; height: 40%;\n  background: linear-gradient(180deg, transparent, rgba(233,207,122,0.35), transparent);\n  animation: fp-sweep 1.8s ease-in-out infinite;\n}\n@keyframes fp-sweep { 0% { top: -40%; } 100% { top: 100%; } }<\/p>\n<p>\/* ---------- Stage 2: category ---------- *\/\n.fp-cats {\n  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;\n  max-width: 460px; margin: 0 auto 8px;\n}\n.fp-cat {\n  display: flex; align-items: center; gap: 8px;\n  border: 1px solid var(--line); border-radius: 999px;\n  padding: 12px 20px; cursor: pointer; background: transparent;\n  color: var(--ink-dim); font-size: 13px; letter-spacing: 0.04em;\n  transition: all .2s ease;\n}\n.fp-cat svg { width: 16px; height: 16px; flex-shrink: 0; }\n.fp-cat:hover { border-color: var(--gold); color: var(--ink); }\n.fp-cat.fp-cat-selected {\n  border-color: var(--gold); background: rgba(212,175,55,0.12);\n  color: var(--gold-soft);\n}<\/p>\n<p>\/* ---------- Buttons ---------- *\/\n.fp-btn {\n  appearance: none; border: 1px solid var(--gold); background: transparent;\n  color: var(--gold-soft); font-family: 'Cinzel', serif; font-size: 13px;\n  letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 34px;\n  border-radius: 999px; cursor: pointer;\n  transition: background .25s ease, color .25s ease, transform .15s ease;\n}\n.fp-btn:hover:not(:disabled) { background: var(--gold); color: var(--night-1); }\n.fp-btn:active:not(:disabled) { transform: scale(0.97); }\n.fp-btn:disabled { opacity: 0.4; cursor: not-allowed; }<\/p>\n<p>.fp-btn-ghost {\n  border-color: var(--line); color: var(--ink-dim); font-family: 'Jost', sans-serif;\n  letter-spacing: 0.06em; text-transform: none; padding: 12px 22px; font-size: 13px;\n}\n.fp-btn-ghost:hover:not(:disabled) { background: transparent; color: var(--gold-soft); border-color: var(--gold); }<\/p>\n<p>.fp-actions-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }<\/p>\n<p>\/* ---------- Status ---------- *\/\n.fp-status {\n  margin-top: 18px; min-height: 20px; font-size: 13px;\n  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);\n}\n.fp-status .fp-dots span { animation: fp-blink 1.2s infinite; opacity: 0; }\n.fp-status .fp-dots span:nth-child(2) { animation-delay: .2s; }\n.fp-status .fp-dots span:nth-child(3) { animation-delay: .4s; }\n@keyframes fp-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }<\/p>\n<p>\/* ---------- Stage 4: result ---------- *\/\n.fp-result-eyebrow {\n  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.3em;\n  text-transform: uppercase; color: var(--rose); margin-bottom: 16px;\n}\n.fp-result-cat {\n  display: inline-block; font-size: 11px; letter-spacing: 0.1em;\n  text-transform: uppercase; color: var(--gold); border: 1px solid var(--line);\n  border-radius: 999px; padding: 5px 14px; margin-bottom: 22px;\n}\n.fp-result-text {\n  font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 2.6vw, 22px);\n  line-height: 1.65; font-style: italic; color: var(--ink);\n  max-width: 560px; margin: 0 auto 20px; text-align: left;\n  opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s ease;\n}\n.fp-result-text.fp-in { opacity: 1; transform: translateY(0); }\n.fp-result-mark {\n  font-size: 13px; color: var(--ink-faint); max-width: 440px; margin: 0 auto 30px;\n  line-height: 1.6; opacity: 0; transition: opacity 1s ease .3s;\n}\n.fp-result-mark.fp-in { opacity: 1; }\n.fp-result-mark b { color: var(--gold-soft); font-weight: 500; }<\/p>\n<p>.fp-share-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 28px; }\n.fp-share-btn {\n  width: 38px; height: 38px; border-radius: 50%;\n  border: 1px solid var(--line); background: transparent;\n  display: flex; align-items: center; justify-content: center; cursor: pointer;\n  transition: border-color .2s ease, transform .15s ease;\n}\n.fp-share-btn:hover { border-color: var(--gold); transform: translateY(-2px); }\n.fp-share-btn svg { width: 16px; height: 16px; stroke: var(--gold-soft); }\n.fp-copied-tag {\n  font-size: 11px; color: var(--gold-soft); letter-spacing: 0.06em;\n  text-transform: uppercase; opacity: 0; transition: opacity .3s ease;\n  margin-top: -18px; margin-bottom: 20px;\n}\n.fp-copied-tag.fp-show { opacity: 1; }<\/p>\n<p>\/* ---------- Journal ---------- *\/\n.fp-journal-toggle {\n  background: none; border: none; color: var(--ink-faint); font-size: 12px;\n  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline;\n  text-underline-offset: 4px; cursor: pointer; margin-top: 8px;\n}\n.fp-journal-toggle:hover { color: var(--gold); }\n.fp-journal {\n  display: none; text-align: left; margin-top: 28px; padding-top: 24px;\n  border-top: 1px solid var(--line);\n}\n.fp-journal.fp-visible { display: block; }\n.fp-journal-title {\n  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em;\n  text-transform: uppercase; color: var(--gold); margin-bottom: 14px; text-align: center;\n}\n.fp-journal-empty { text-align: center; color: var(--ink-faint); font-size: 13px; padding: 10px 0; }\n.fp-journal-item {\n  border-left: 2px solid var(--line); padding: 4px 0 4px 14px; margin-bottom: 14px;\n}\n.fp-journal-item-meta {\n  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;\n  color: var(--ink-faint); margin-bottom: 4px;\n}\n.fp-journal-item-meta span { color: var(--rose); }\n.fp-journal-item-text { font-size: 14px; color: var(--ink-dim); line-height: 1.5; font-style: italic; }\n.fp-journal-clear {\n  display: block; margin: 16px auto 0; background: none; border: none;\n  color: var(--ink-faint); font-size: 11px; letter-spacing: 0.06em;\n  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;\n}\n.fp-journal-clear:hover { color: var(--rose); }<\/p>\n<p>\/* ---------- Sound toggle ---------- *\/\n.fp-sound-toggle {\n  position: absolute; top: 18px; right: 18px;\n  width: 34px; height: 34px; border-radius: 50%;\n  border: 1px solid var(--line); background: rgba(255,255,255,0.02);\n  display: flex; align-items: center; justify-content: center; cursor: pointer;\n}\n.fp-sound-toggle svg { width: 15px; height: 15px; stroke: var(--gold-soft); }\n.fp-sound-toggle.fp-muted svg { stroke: var(--ink-faint); }<\/p>\n<p>.fp-footer-note { margin-top: 40px; font-size: 11.5px; color: var(--ink-faint); }<\/p>\n<p>@media (prefers-reduced-motion: reduce) {\n  .fp-star, .fp-scan-line, .fp-scan-sweep, .fp-status .fp-dots span { animation: none !important; }\n}\n@media (max-width: 480px) {\n  .fp-card { padding: 34px 20px; }\n  .fp-steps { gap: 16px; }\n}\n<\/style>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@500;600&#038;family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&#038;family=Jost:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n<div class=\"fp-wrap\">\n<div class=\"fp-stars\" id=\"fpStars\"><\/div>\n<div class=\"fp-container\">\n<div class=\"fp-eyebrow\">A Reading, Just For You<\/div>\n<h1 class=\"fp-title\">What Does Your<br \/>Hand Reveal?<\/h1>\n<p class=\"fp-subtitle\">Upload a photo of your open palm, choose what you&#8217;d like insight on, and let the reading unfold.<\/p>\n<div class=\"fp-steps\" id=\"fpSteps\">\n<div class=\"fp-step fp-active\" data-step=\"1\"><span class=\"fp-step-dot\"><\/span>Offer the Hand<\/div>\n<div class=\"fp-step\" data-step=\"2\"><span class=\"fp-step-dot\"><\/span>Choose the Path<\/div>\n<div class=\"fp-step\" data-step=\"3\"><span class=\"fp-step-dot\"><\/span>The Reading<\/div>\n<div class=\"fp-step\" data-step=\"4\"><span class=\"fp-step-dot\"><\/span>Your Fortune<\/div>\n<\/p><\/div>\n<div class=\"fp-card\">\n      <button class=\"fp-sound-toggle\" id=\"fpSoundToggle\" title=\"Toggle sound\" aria-label=\"Toggle sound\"><br \/>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 5 6 9H2v6h4l5 4V5z\"\/><path id=\"fpSoundWave\" d=\"M15.5 8.5a5 5 0 0 1 0 7\"\/><\/svg><br \/>\n      <\/button><\/p>\n<p>      <!-- ================= STAGE 1: UPLOAD ================= --><\/p>\n<div class=\"fp-stage fp-visible\" id=\"fpStage1\">\n        <label class=\"fp-drop\" id=\"fpDrop\"><br \/>\n          <input type=\"file\" id=\"fpFile\" accept=\"image\/*\" \/><br \/>\n          <img id=\"fpPreview\" class=\"fp-preview\" alt=\"Your uploaded hand photo\" \/><br \/>\n          <span class=\"fp-drop-icon\" id=\"fpIcon\"><br \/>\n            <svg viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n              <path d=\"M20 30V16a4 4 0 0 1 8 0v10\" stroke=\"#d4af37\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n              <path d=\"M28 26V12a4 4 0 0 1 8 0v14\" stroke=\"#d4af37\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n              <path d=\"M36 26V14a4 4 0 0 1 8 0v18\" stroke=\"#d4af37\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n              <path d=\"M20 30v6c0 9 6 16 14 16h2c8 0 14-7 14-15V26\" stroke=\"#d4af37\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n              <path d=\"M20 30l-3 2c-2 1.4-2.4 4-1 5.8L22 46\" stroke=\"#d4af37\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg><br \/>\n          <\/span><br \/>\n          <span class=\"fp-drop-text\" id=\"fpDropText\">Tap to upload your hand<\/span><br \/>\n        <\/label><\/p>\n<p class=\"fp-hint\" id=\"fpHint\" style=\"display:none;\">\n<div>\n          <button class=\"fp-btn\" id=\"fpNextToCat\" disabled>Continue<\/button>\n        <\/div>\n<\/p><\/div>\n<p>      <!-- ================= STAGE 2: CATEGORY ================= --><\/p>\n<div class=\"fp-stage\" id=\"fpStage2\">\n<p style=\"color:var(--ink-dim); font-size:14px; margin-bottom:22px;\">What would you like this reading to focus on?<\/p>\n<div class=\"fp-cats\" id=\"fpCats\">\n          <button class=\"fp-cat\" data-cat=\"love\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M12 21s-7-4.35-9.5-8.5C.7 8.6 3 5 6.5 5c1.9 0 3.4 1 5.5 3 2.1-2 3.6-3 5.5-3C21 5 23.3 8.6 21.5 12.5 19 16.65 12 21 12 21z\"\/><\/svg>Love<\/button><br \/>\n          <button class=\"fp-cat\" data-cat=\"career\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"7\" width=\"18\" height=\"13\" rx=\"2\"\/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"\/><\/svg>Career<\/button><br \/>\n          <button class=\"fp-cat\" data-cat=\"wealth\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v10M9.5 9.5c0-1.4 1.2-2 2.5-2s2.5.7 2.5 2c0 2.5-5 1.5-5 4 0 1.3 1.2 2 2.5 2s2.5-.6 2.5-2\"\/><\/svg>Wealth<\/button><br \/>\n          <button class=\"fp-cat\" data-cat=\"health\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M4 12h4l2-6 4 12 2-6h4\"\/><\/svg>Health<\/button><br \/>\n          <button class=\"fp-cat\" data-cat=\"general\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M12 2l2.4 6.9L21 11l-6.6 2.1L12 20l-2.4-6.9L3 11l6.6-2.1z\"\/><\/svg>General<\/button>\n        <\/div>\n<div class=\"fp-actions-row\">\n          <button class=\"fp-btn fp-btn-ghost\" id=\"fpBackToUpload\">Back<\/button><br \/>\n          <button class=\"fp-btn\" id=\"fpReveal\" disabled>Reveal My Fortune<\/button>\n        <\/div>\n<div class=\"fp-status\" id=\"fpStatus\" style=\"opacity:0;\">\n          Reading the lines of your palm<span class=\"fp-dots\"><span>.<\/span><span>.<\/span><span>.<\/span><\/span>\n        <\/div>\n<p>        <span class=\"fp-scan-overlay\" id=\"fpScanOverlayHolder\"><\/span>\n      <\/div>\n<p>      <!-- ================= STAGE 3: SCANNING (overlays photo) ================= --><br \/>\n      <!-- The scan visual reuses the uploaded photo, shown large during the reading --><\/p>\n<div class=\"fp-stage\" id=\"fpStage3\">\n<div class=\"fp-drop\" style=\"cursor:default;\">\n          <img id=\"fpPreviewScan\" class=\"fp-preview\" style=\"display:block;\" alt=\"Scanning your hand\" \/><br \/>\n          <span class=\"fp-scan-overlay\" id=\"fpScanOverlay\" style=\"display:block;\"><br \/>\n            <svg viewBox=\"0 0 220 220\">\n              <path class=\"fp-scan-line\" d=\"M60 150 C 80 140, 90 120, 75 95 C 65 78, 70 60, 90 55\" \/>\n              <path class=\"fp-scan-line\" d=\"M55 130 C 90 128, 120 118, 150 100\" \/>\n              <path class=\"fp-scan-line\" d=\"M70 165 C 100 160, 135 150, 160 125\" \/>\n              <path class=\"fp-scan-line\" d=\"M110 60 C 108 90, 112 120, 120 150\" \/>\n            <\/svg><br \/>\n            <span class=\"fp-scan-sweep\"><\/span><br \/>\n          <\/span>\n        <\/div>\n<div class=\"fp-status\" style=\"opacity:1;\">\n          Consulting the old methods<span class=\"fp-dots\"><span>.<\/span><span>.<\/span><span>.<\/span><\/span>\n        <\/div>\n<\/p><\/div>\n<p>      <!-- ================= STAGE 4: RESULT ================= --><\/p>\n<div class=\"fp-stage\" id=\"fpStage4\">\n<div class=\"fp-result-eyebrow\">Your Fortune<\/div>\n<div class=\"fp-result-cat\" id=\"fpResultCat\">General<\/div>\n<p class=\"fp-result-text\" id=\"fpResultText\">\n<p class=\"fp-result-mark\" id=\"fpResultMark\">\n<div class=\"fp-share-row\">\n          <button class=\"fp-share-btn\" id=\"fpCopyBtn\" title=\"Copy reading\" aria-label=\"Copy reading\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"\/><path d=\"M5 15V5a2 2 0 0 1 2-2h10\"\/><\/svg><br \/>\n          <\/button><br \/>\n          <a class=\"fp-share-btn\" id=\"fpWhatsappBtn\" href=\"#\" target=\"_blank\" rel=\"noopener\" title=\"Share on WhatsApp\" aria-label=\"Share on WhatsApp\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg><br \/>\n          <\/a><br \/>\n          <a class=\"fp-share-btn\" id=\"fpTwitterBtn\" href=\"#\" target=\"_blank\" rel=\"noopener\" title=\"Share on X\" aria-label=\"Share on X\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4l16 16M20 4L4 20\"\/><\/svg><br \/>\n          <\/a><br \/>\n          <a class=\"fp-share-btn\" id=\"fpFacebookBtn\" href=\"#\" target=\"_blank\" rel=\"noopener\" title=\"Share on Facebook\" aria-label=\"Share on Facebook\"><br \/>\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 9h3V6h-3a4 4 0 0 0-4 4v2H8v3h2v6h3v-6h3l1-3h-4v-2a1 1 0 0 1 1-1z\"\/><\/svg><br \/>\n          <\/a>\n        <\/div>\n<div class=\"fp-copied-tag\" id=\"fpCopiedTag\">Copied to clipboard<\/div>\n<div class=\"fp-actions-row\">\n          <button class=\"fp-btn fp-btn-ghost\" id=\"fpAnotherCat\">Try Another Focus<\/button><br \/>\n          <button class=\"fp-btn\" id=\"fpReset\">Read Another Hand<\/button>\n        <\/div>\n<p>        <button class=\"fp-journal-toggle\" id=\"fpJournalToggle\">View Your Reading Journal<\/button><\/p>\n<div class=\"fp-journal\" id=\"fpJournal\">\n<div class=\"fp-journal-title\">Your Reading Journal<\/div>\n<div id=\"fpJournalList\"><\/div>\n<p>          <button class=\"fp-journal-clear\" id=\"fpJournalClear\">Clear journal<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"fp-footer-note\">For entertainment purposes only. Your photo is used only to display a preview in your browser and is never uploaded or stored on any server. Your reading journal is saved only on this device, in this browser.<\/p>\n<\/p><\/div>\n<\/div>\n<p><script>\n(function () {\n  \/\/ ============================================================\n  \/\/ Starfield background\n  \/\/ ============================================================\n  var starsEl = document.getElementById('fpStars');\n  var STAR_COUNT = 70;\n  for (var i = 0; i < STAR_COUNT; i++) {\n    var s = document.createElement('div');\n    s.className = 'fp-star';\n    s.style.left = (Math.random() * 100) + '%';\n    s.style.top = (Math.random() * 100) + '%';\n    s.style.animationDuration = (2.5 + Math.random() * 3) + 's';\n    s.style.animationDelay = (Math.random() * 4) + 's';\n    starsEl.appendChild(s);\n  }\n\n  \/\/ ============================================================\n  \/\/ Fortune pools \u2014 20 per category, ancient-tradition framing\n  \/\/ ============================================================\n  var FORTUNES = {\n    love: [\n      \"The palmists of old Egypt believed a heart line like yours marks someone who loves slowly, but never halfway.\",\n      \"In the Roma tradition, a hand shaped like yours was read as a sign that an honest conversation will bring two people closer this season.\",\n      \"Ancient Persian diviners believed a line like yours foretold a reunion \u2014 with a person you assumed had moved on.\",\n      \"Old Chinese Mian Xiang readers held that hands like yours belong to those who are loved more quietly than they realize.\",\n      \"In classical Greek chiromancy, a curved heart line like yours marked someone whose affection deepens with time, not fades.\",\n      \"The temple readers of ancient Thebes believed a hand like yours meant a small gesture from someone close would soon mean more than either of you expects.\",\n      \"Old Celtic tradition read a line like yours as belonging to someone who will soon stop waiting and simply say what they feel.\",\n      \"Ancient Vedic texts describe a palm like yours as marked for a bond that forms through shared work, not chance meetings.\",\n      \"In old Slavic folk belief, a hand shaped like yours signals an apology is coming \u2014 accept it plainly, without testing it.\",\n      \"The Babylonian court diviners believed a line like yours meant loyalty already given to you is stronger than you've credited it for.\",\n      \"Old Japanese tradition holds that hands like yours belong to people who mistake familiarity for boredom \u2014 look again at what's steady in your life.\",\n      \"In ancient Andean belief, a palm like yours marked someone about to be pursued by a person they once dismissed too quickly.\",\n      \"The wandering fortune-tellers of medieval Europe believed a line like yours meant your next chapter in love starts with friendship first.\",\n      \"Old Arabian astrologer-palmists believed a hand like yours signals distance closing \u2014 literal or otherwise \u2014 with someone important.\",\n      \"In ancient Korean tradition, a hand shaped like yours belongs to someone who will be chosen, not just choose, sooner than expected.\",\n      \"The Phoenician sailors, reading hands before voyages, believed a line like yours meant what's meant for you waits closer to home than you think.\",\n      \"Old Welsh tradition held that hands like yours belong to natural confidants \u2014 someone is about to trust you with something important.\",\n      \"Ancient Nordic tradition read a palm like yours as marking a bond tested by distance that comes back stronger for it.\",\n      \"The court diviners of ancient Byzantium believed a line like yours foretold renewed warmth in a relationship that had gone quiet.\",\n      \"In old Hebrew mystical writing on the hand, a palm like yours marks someone whose patience in love is about to be rewarded.\"\n    ],\n    career: [\n      \"Ancient Chinese scholars who studied the palm believed a line like yours marks someone whose reputation grows through consistency, not noise.\",\n      \"In old Roman tradition, a hand shaped like yours belonged to a builder \u2014 a project you've been quietly shaping is closer to recognition than you think.\",\n      \"The Egyptian priesthood, who kept the earliest palmistry records, read a line like yours as belonging to someone about to be trusted with more responsibility.\",\n      \"Old Persian court advisors believed hands like yours signal an offer arriving from a direction you weren't watching.\",\n      \"In classical Vedic tradition, a line like yours marks someone who finds their true calling after leaving the wrong one \u2014 the leaving is close.\",\n      \"Ancient Mesopotamian tablets on hand-reading describe a palm like yours as marked for steady advancement, not sudden leaps.\",\n      \"The Ottoman court palmists believed a hand like yours meant a mentor or ally is about to notice work you thought was going unseen.\",\n      \"Old Tibetan tradition read a line like yours as belonging to someone who leads a room without needing to raise their voice in it.\",\n      \"In ancient Carthaginian trading culture, a palm like yours marked a negotiator \u2014 a deal or agreement tilts in your favor soon.\",\n      \"The Etruscan seers believed a hand shaped like yours belongs to someone whose current effort outlives the immediate reward for it.\",\n      \"Old Nordic tradition held that a line like yours signals a difficult colleague or rival becomes, unexpectedly, an ally.\",\n      \"Ancient Scythian belief read hands like yours as marked for protection on any new path taken before the season turns.\",\n      \"In old Aztec calendar-linked divination, a palm like yours enters a favorable cycle for recognition and new opportunity.\",\n      \"The medieval guild diviners of Europe believed a hand like yours marks a craftsperson \u2014 mastery in your work is closer than the doubt suggests.\",\n      \"Old Zulu divination tradition read a line like yours as belonging to someone whose reputation moves ahead of them, quietly, into rooms they haven't entered yet.\",\n      \"In ancient Sumerian belief, the earliest recorded hand-reading tradition, a palm like yours marks someone built for founding things, not just maintaining them.\",\n      \"The Byzantine court believed a hand shaped like yours signals a renewed alliance \u2014 professional, not personal \u2014 under improved terms.\",\n      \"Old West African divination traditions read hands like yours as belonging to someone remembered by more than their immediate circle.\",\n      \"In ancient Greek belief, a line like yours marks someone whose patience with a slow process is about to be repaid all at once.\",\n      \"The Silk Road diviners believed a hand like yours signals opportunity arriving from somewhere unfamiliar \u2014 say yes before you overthink it.\"\n    ],\n    wealth: [\n      \"Ancient Babylonian diviners read the fate line as a river of fortune; yours bends favorably in the coming season.\",\n      \"In old Chinese tradition, a hand shaped like yours marks someone who gathers slowly and steadily \u2014 and it is about to show.\",\n      \"The Phoenician traders, who also read palms before setting sail, believed a line like yours meant a good deal is closer than it appears.\",\n      \"Old Vedic texts describe a mount beneath the ring finger like yours as a sign of unexpected, well-timed gain.\",\n      \"Ancient Egyptian scribes associated with the treasury believed a hand like yours belongs to someone who manages resources wisely under pressure.\",\n      \"In old Persian tradition, a palm like yours signals that money moves toward you when you stop watching it so closely.\",\n      \"The Roman augurs, who read many signs including hands, believed a line like yours marked a return on something invested long ago.\",\n      \"Old Korean fortune tradition read hands like yours as belonging to the patient \u2014 wealth arrives later, but arrives whole.\",\n      \"In ancient Mongol tradition, a hand shaped like yours signals a long journey \u2014 financial or literal \u2014 that ends better than it began.\",\n      \"The Aztec calendar diviners believed a palm like yours enters a cycle favorable for growth, particularly around something you've already started.\",\n      \"Old Celtic tradition held that a line like yours belongs to someone whose earlier caution is about to be rewarded.\",\n      \"Ancient Carthaginian merchant culture read hands like yours as marked for a fair and timely exchange.\",\n      \"In old Arabian tradition, a hand shaped like yours signals a small risk taken soon proves worth far more than it costs.\",\n      \"The Ottoman court astrologer-palmists believed a line like yours meant stability arriving after a stretch of uncertainty.\",\n      \"Old Slavic tradition read a palm like yours as belonging to someone about to settle an old debt \u2014 in either direction.\",\n      \"In ancient Sumerian belief, a hand like yours marks a keeper of resources \u2014 what you hold onto now serves you well later.\",\n      \"The Etruscan seers believed a line like yours signals a quiet, unglamorous plan finally beginning to pay off.\",\n      \"Old Nordic tradition held that hands like yours belong to those who build wealth through what they make, not what they chase.\",\n      \"In classical Greek belief, a palm like yours marks someone entering a period where effort and reward finally align.\",\n      \"The Andean coca-leaf and palm readers believed a hand like yours means the earth still owes you a harvest \u2014 it's coming.\"\n    ],\n    health: [\n      \"Ancient Ayurvedic hand-reading traditions believed a steady, even palm like yours signals a body returning to balance.\",\n      \"Old Chinese medicine, which linked the hand to the body's meridians, read a line like yours as a sign that rest is close and needed.\",\n      \"In classical Greek belief, hands like yours mark someone whose strength returns quickly once they finally stop pushing through it.\",\n      \"The Tibetan tradition of hand-reading believed a palm like yours signals calm entering a body that has been carrying tension for too long.\",\n      \"Old Persian physicians who also read palms believed a line like yours meant a nagging worry about your health resolves itself soon, and simply.\",\n      \"Ancient Egyptian healers believed a hand shaped like yours belongs to someone whose energy returns once a small habit finally changes.\",\n      \"In old Vedic tradition, a mount at the base of your palm like this was read as marking renewed vitality after a slow season.\",\n      \"The Andean healing tradition, paired with palm reading, believed a hand like yours signals the body is asking for less noise, not more effort.\",\n      \"Old Korean tradition read a palm like yours as belonging to someone who heals faster once they stop minimizing what they're feeling.\",\n      \"In ancient Mesopotamian medical-divination texts, a line like yours was read as a sign that a long-postponed check-in with yourself is overdue but timely.\",\n      \"The Roma healing tradition believed hands like yours mark someone whose sleep is about to improve, once one small change is made.\",\n      \"Old Welsh folk healers believed a palm shaped like yours signals a season of steadier energy just ahead.\",\n      \"In ancient Nordic tradition, a hand like yours was read as belonging to someone whose body responds well to movement taken outdoors.\",\n      \"The Zulu healing and divination tradition believed a line like yours means an old ache finally begins to ease.\",\n      \"Old Japanese tradition held that a palm like yours belongs to someone who recovers strength through rest they've been avoiding taking.\",\n      \"In classical Vedic belief, a hand shaped like yours signals that consistency, not intensity, is what your body is asking for right now.\",\n      \"The ancient Aztec healing tradition read a line like yours as a sign that balance returns once one source of stress is finally addressed.\",\n      \"Old Celtic tradition believed hands like yours mark someone who heals best in familiar company, not solitude.\",\n      \"In ancient Byzantine medical writing, a palm like yours was read as a sign of resilience \u2014 you recover better than you give yourself credit for.\",\n      \"The Silk Road healers, who read hands alongside herbs, believed a line like yours signals a small, overdue change in routine brings noticeable relief.\"\n    ],\n    general: [\n      \"The palmists of old Egypt read the hand as a map of the Nile's flood \u2014 your lines suggest a season of abundance is rising.\",\n      \"In the hand-reading traditions of ancient India, a deep, unbroken life line like yours was taken as a sign of unusual endurance ahead.\",\n      \"Old Chinese fortune-tellers held that a hand with your shape favors the patient \u2014 success arrives late for you, but it arrives whole.\",\n      \"Babylonian diviners read the fate line as a river; yours bends sharply soon, meaning a change of course serves you well.\",\n      \"In the Roma tradition, a strong heart line like this one was said to mark someone who loves few, but loves completely.\",\n      \"The Greeks who studied chiromancy believed a hand such as yours belonged to a builder \u2014 what you make will outlast you.\",\n      \"Ancient healers believed the mount beneath your thumb governs willpower, and yours marks a person about to be tested and to pass.\",\n      \"In old Persian tradition, a hand like yours was read as a sign that a stranger will soon become important to your story.\",\n      \"The medieval European palmists believed a clear head line meant clarity was coming to a decision you've been circling for weeks.\",\n      \"Ancient Vedic texts describe your hand's shape as the mark of someone who finds fortune later in life, not sooner \u2014 patience is your ally.\",\n      \"Old seers of the Silk Road believed travelers with a hand like yours were destined to find something valuable far from home.\",\n      \"In Chinese Mian Xiang tradition, the shape of your palm suggests someone others trust with secrets \u2014 guard that gift well.\",\n      \"Ancient Celtic diviners read knotted lines as ancestral protection; yours suggests someone from your family's past still watches over you.\",\n      \"The oracles of old Anatolia believed a hand like this belonged to someone who repairs what others give up on.\",\n      \"In classical Roman tradition, this line pattern marked a person who wins not by force, but by simply outlasting rivals.\",\n      \"Ancient Nordic rune-readers, when they turned to palms, saw in shapes like yours a sign of buried talent about to surface.\",\n      \"The temple readers of old Thebes believed a hand like yours foretold recognition \u2014 but only after quiet, unglamorous work.\",\n      \"Old Japanese tradition holds that a palm shaped like yours belongs to someone who leads without needing to be seen leading.\",\n      \"In ancient Mesopotamian belief, the crossing lines near your wrist were read as a sign that an old debt \u2014 good or bad \u2014 is about to be settled.\",\n      \"The palmists of the Ottoman court believed a hand like yours marked someone who finds their true calling only after abandoning the wrong one.\"\n    ]\n  };\n\n  \/\/ Secondary \"ancient marking\" notes shown under the main fortune,\n  \/\/ to add texture. One is picked at random regardless of category.\n  var MARKS = [\n    \"The elders would name this the <b>Mark of the Rising Path<\/b> \u2014 a sign that momentum is building beneath the surface.\",\n    \"This is what old readers called the <b>Mark of the Quiet Turn<\/b> \u2014 change arriving without announcing itself first.\",\n    \"Traditional readers named this the <b>Mark of the Long Root<\/b> \u2014 something planted long ago is finally ready to grow.\",\n    \"This pattern was once called the <b>Mark of the Open Hand<\/b> \u2014 a sign of something being offered to you, if you accept it.\",\n    \"Old tradition names this the <b>Mark of the Second Wind<\/b> \u2014 energy returning after a long, quiet stretch.\",\n    \"This is known in older texts as the <b>Mark of the Steady Flame<\/b> \u2014 small, consistent effort finally catching light.\",\n    \"Traditional palmists called this the <b>Mark of the Returning Tide<\/b> \u2014 something once lost circles back around.\",\n    \"This was once named the <b>Mark of the Hidden Door<\/b> \u2014 an option you haven't considered yet is closer than it seems.\"\n  ];<\/p>\n<p>  \/\/ ============================================================\n  \/\/ Reading composer \u2014 snippet pools\n  \/\/\n  \/\/ Rather than one short line, a full reading is assembled from\n  \/\/ several thematic snippets picked at random and stitched into a\n  \/\/ single flowing passage of roughly 100 words. This keeps every\n  \/\/ reading long, varied, and different each time, without ever\n  \/\/ inventing a specific dollar figure, a number of children, or a\n  \/\/ lifespan \u2014 predictions like that are too easy to take literally\n  \/\/ and could genuinely upset someone, so those themes are kept at\n  \/\/ the level of tone and timing instead of fabricated statistics.\n  \/\/ ============================================================<\/p>\n<p>  \/\/ Behaviour \/ personality \u2014 works under any category.\n  var PERSONALITY_SNIPPETS = [\n    \"Those who study hands like yours describe a person who thinks longer than they speak, and means more than they say.\",\n    \"Old readers describe a temperament like yours as steady under pressure, even when the people around you assume otherwise.\",\n    \"This shape of hand is traditionally linked to someone who notices details others miss, and quietly acts on them.\",\n    \"Readers of this pattern describe someone fiercely loyal to a small circle, rather than agreeable to everyone.\",\n    \"This is the hand of someone who doubts themselves more than they let on, and is stronger for it than they realize.\",\n    \"Traditional readers see in a hand like yours a stubborn streak paired with real generosity \u2014 a rare, useful combination.\",\n    \"This shape is read as belonging to someone who prefers to be underestimated, and uses that quietly to their advantage.\",\n    \"Old tradition describes this pattern as marking someone who carries others' worries more easily than their own.\"\n  ];<\/p>\n<p>  \/\/ \"Why doesn't the universe give it instantly\" \u2014 the patience theme.\n  var PATIENCE_SNIPPETS = [\n    \"Old readers would say the universe rarely hands anything over instantly, not out of cruelty, but because what arrives too easily is rarely kept.\",\n    \"Tradition holds that timing is its own kind of protection \u2014 what feels delayed is often being quietly prepared, not withheld.\",\n    \"The elders believed good things are paced deliberately, so that when they arrive, you are actually ready to hold onto them.\",\n    \"Old wisdom says nothing worth keeping arrives before its season \u2014 the waiting is not punishment, it is preparation happening where you can't see it.\",\n    \"Ancient teaching holds that delay is not denial; it is the universe making sure the timing won't work against you later.\",\n    \"Tradition says what is meant for you is never truly late \u2014 it simply waits for the version of you who can carry it well.\"\n  ];<\/p>\n<p>  \/\/ Category-specific qualitative themes \u2014 deliberately no numbers,\n  \/\/ amounts, counts, or ages anywhere in these.\n  var THEME_SNIPPETS = {\n    love: [\n      \"In matters of the heart, your path favors depth over speed \u2014 the right connection will feel earned, not sudden, and steadier for it.\",\n      \"Where love is concerned, tradition reads your hand as one that loves fully once trust is built, and rarely lets it go once it is.\",\n      \"Your hand suggests warmth that grows through consistency \u2014 small, repeated gestures matter more for you than grand ones.\",\n      \"Old readers would say your heart opens slowly and closes rarely \u2014 a quality that eventually draws the right person closer, not away.\"\n    ],\n    career: [\n      \"In work, your hand favors mastery over speed \u2014 recognition comes from consistency others can rely on, more than any single bold move.\",\n      \"Tradition reads ambition in your hand paired with patience, a combination that tends to outlast louder, faster competitors.\",\n      \"Your path favors building quietly before being seen \u2014 by the time recognition catches up, the foundation is already solid.\",\n      \"Old readers describe this hand as one suited to leading by example, not by title \u2014 influence grows before any position does.\"\n    ],\n    wealth: [\n      \"In matters of prosperity, your hand favors steady accumulation over sudden windfalls \u2014 what you build tends to actually stay built.\",\n      \"Tradition reads resourcefulness in a hand like yours \u2014 you tend to do more with what you have than others expect.\",\n      \"Old readers describe this shape as one that values security over spectacle \u2014 modest, well-placed decisions serve you better than big risks.\",\n      \"Your path favors patience with money \u2014 what feels slow now compounds into something more solid than it currently appears.\"\n    ],\n    health: [\n      \"In matters of the body, tradition reads your hand as one that heals well once you finally stop overriding what it's asking for.\",\n      \"Old readers describe this pattern as belonging to someone whose energy returns fastest through rest, not through pushing harder.\",\n      \"Your hand favors consistency over intensity \u2014 steady, ordinary habits will serve your body better than any single big change.\",\n      \"Tradition reads resilience in a hand like yours \u2014 recovery tends to come faster for you than you usually give yourself credit for.\"\n    ],\n    general: [\n      \"Across the whole of your life, tradition reads a pattern of steady accumulation \u2014 of skill, of trust, of quiet reputation \u2014 over sudden leaps.\",\n      \"Old readers describe your path as one that rewards patience specifically, in a way it doesn't always reward those who rush.\",\n      \"Your hand suggests a life built in layers \u2014 each stage depends a little on the one before it, more than most people's do.\",\n      \"Tradition reads in this shape someone whose best chapters tend to arrive later than expected, and land more solidly for the wait.\"\n    ]\n  };<\/p>\n<p>  \/\/ Closing wellness note, appended to every reading. Framed as\n  \/\/ long-standing wisdom about caring for the body \u2014 not a\n  \/\/ diagnosis, just a gentle, universal reminder.\n  var WELLNESS_CLOSINGS = [\n    \"One thing every old tradition agreed on without exception: treat the body gently \u2014 steer clear of smoking and drinking, and the rest of what's coming will find you in better shape to enjoy it.\",\n    \"The oldest readers, across every culture, shared one piece of practical advice alongside their fortunes \u2014 avoid tobacco and alcohol, and let your body carry you fully into what's ahead.\",\n    \"Whatever else the hand reveals, the elders were consistent on this: a body kept free of smoking and heavy drinking meets good fortune in far better condition.\",\n    \"Every tradition, however different its methods, ended with the same practical note \u2014 skip the cigarettes and the drinking, and you'll be steadier for whatever comes next.\",\n    \"If the old readers agreed on nothing else, they agreed on this: don't smoke, go easy on alcohol, and the fortune ahead will land on a stronger foundation.\"\n  ];<\/p>\n<p>  var CAT_LABELS = { love: 'Love', career: 'Career', wealth: 'Wealth', health: 'Health', general: 'General' };<\/p>\n<p>  \/\/ ============================================================\n  \/\/ Elements\n  \/\/ ============================================================\n  var stage1 = document.getElementById('fpStage1');\n  var stage2 = document.getElementById('fpStage2');\n  var stage3 = document.getElementById('fpStage3');\n  var stage4 = document.getElementById('fpStage4');\n  var steps  = document.querySelectorAll('#fpSteps .fp-step');<\/p>\n<p>  var fileInput  = document.getElementById('fpFile');\n  var dropZone   = document.getElementById('fpDrop');\n  var preview    = document.getElementById('fpPreview');\n  var previewScan = document.getElementById('fpPreviewScan');\n  var icon       = document.getElementById('fpIcon');\n  var dropText   = document.getElementById('fpDropText');\n  var nextToCat  = document.getElementById('fpNextToCat');<\/p>\n<p>  var catButtons = document.querySelectorAll('.fp-cat');\n  var backToUpload = document.getElementById('fpBackToUpload');\n  var revealBtn  = document.getElementById('fpReveal');<\/p>\n<p>  var resultCatEl  = document.getElementById('fpResultCat');\n  var resultTextEl = document.getElementById('fpResultText');\n  var resultMarkEl = document.getElementById('fpResultMark');\n  var anotherCatBtn = document.getElementById('fpAnotherCat');\n  var resetBtn = document.getElementById('fpReset');<\/p>\n<p>  var copyBtn = document.getElementById('fpCopyBtn');\n  var copiedTag = document.getElementById('fpCopiedTag');\n  var whatsappBtn = document.getElementById('fpWhatsappBtn');\n  var twitterBtn = document.getElementById('fpTwitterBtn');\n  var facebookBtn = document.getElementById('fpFacebookBtn');<\/p>\n<p>  var journalToggle = document.getElementById('fpJournalToggle');\n  var journalPanel = document.getElementById('fpJournal');\n  var journalList = document.getElementById('fpJournalList');\n  var journalClear = document.getElementById('fpJournalClear');<\/p>\n<p>  var soundToggle = document.getElementById('fpSoundToggle');<\/p>\n<p>  var hintEl = document.getElementById('fpHint');<\/p>\n<p>  \/\/ ============================================================\n  \/\/ Lightweight \"is this a hand?\" heuristic\n  \/\/\n  \/\/ This is NOT real image recognition \u2014 there's no AI model behind\n  \/\/ it, no photo is sent anywhere, and it can absolutely be wrong\n  \/\/ (gloves, henna, unusual lighting, very light or dark skin tones\n  \/\/ can all throw it off in either direction). It samples pixel\n  \/\/ colors on-device and estimates what fraction fall in a broad\n  \/\/ skin-tone range, purely to nudge people who've clearly uploaded\n  \/\/ something else (a landscape, a screenshot, a pet photo). It\n  \/\/ never blocks \u2014 only suggests.\n  \/\/ ============================================================\n  function checkLooksLikeHand(imgEl) {\n    try {\n      var w = 60, h = 60;\n      var canvas = document.createElement('canvas');\n      canvas.width = w; canvas.height = h;\n      var ctx = canvas.getContext('2d');\n      ctx.drawImage(imgEl, 0, 0, w, h);\n      var data = ctx.getImageData(0, 0, w, h).data;\n      var skinLike = 0, total = 0;<\/p>\n<p>      for (var i = 0; i < data.length; i += 4) {\n        var r = data[i], g = data[i + 1], b = data[i + 2];\n        total++;\n        \/\/ Broad, permissive skin-tone range across many skin tones.\n        var max = Math.max(r, g, b), min = Math.min(r, g, b);\n        var isSkinLike =\n          r > 40 && g > 20 && b > 10 &&\n          (max - min) > 12 &&\n          r >= g && g >= b - 25 &&\n          r - b > 10;\n        if (isSkinLike) skinLike++;\n      }<\/p>\n<p>      var ratio = total ? skinLike \/ total : 0;\n      return ratio; \/\/ 0..1\n    } catch (e) {\n      \/\/ Canvas can throw on some cross-origin or unusual images \u2014\n      \/\/ fail silently and just skip the hint rather than block anyone.\n      return 1;\n    }\n  }<\/p>\n<p>  function runHandHeuristic(imgEl) {\n    \/\/ Wait for the image to actually have pixel data.\n    var run = function () {\n      var ratio = checkLooksLikeHand(imgEl);\n      if (ratio < 0.12) {\n        hintEl.textContent = \"This doesn't look much like a hand photo \u2014 for the best reading, try a clear, well-lit photo of your open palm.\";\n        hintEl.style.display = 'block';\n      } else {\n        hintEl.style.display = 'none';\n      }\n    };\n    if (imgEl.complete &#038;&#038; imgEl.naturalWidth) run();\n    else imgEl.onload = run;\n  }\n\n\n  var selectedCat = null;\n  var currentReading = null;\n  var soundOn = true;\n\n  \/\/ ============================================================\n  \/\/ Step indicator helper\n  \/\/ ============================================================\n  function setStep(n) {\n    steps.forEach(function (el) {\n      var s = parseInt(el.getAttribute('data-step'), 10);\n      el.classList.remove('fp-active', 'fp-done');\n      if (s === n) el.classList.add('fp-active');\n      else if (s < n) el.classList.add('fp-done');\n    });\n  }\n\n  function showStage(el) {\n    [stage1, stage2, stage3, stage4].forEach(function (s) { s.classList.remove('fp-visible'); });\n    el.classList.add('fp-visible');\n  }\n\n  \/\/ ============================================================\n  \/\/ Stage 1 \u2014 upload\n  \/\/ ============================================================\n  fileInput.addEventListener('change', function (e) {\n    var file = e.target.files &#038;&#038; e.target.files[0];\n    if (!file) return;\n\n    try {\n      var url = URL.createObjectURL(file);\n      preview.src = url;\n      preview.style.display = 'block';\n      previewScan.src = url;\n      icon.style.display = 'none';\n      dropText.style.display = 'none';\n      runHandHeuristic(preview);\n    } catch (err) {\n      console.error('Fortune page: could not preview file', err);\n    }\n\n    hasPhoto = true;\n    nextToCat.disabled = false;\n  });\n\n  dropZone.addEventListener('dragover', function (e) { e.preventDefault(); dropZone.classList.add('fp-drag'); });\n  dropZone.addEventListener('dragleave', function () { dropZone.classList.remove('fp-drag'); });\n  dropZone.addEventListener('drop', function (e) {\n    e.preventDefault();\n    dropZone.classList.remove('fp-drag');\n    if (e.dataTransfer &#038;&#038; e.dataTransfer.files &#038;&#038; e.dataTransfer.files.length) {\n      fileInput.files = e.dataTransfer.files;\n      fileInput.dispatchEvent(new Event('change'));\n    }\n  });\n\n  nextToCat.addEventListener('click', function () {\n    if (!hasPhoto) return;\n    setStep(2);\n    showStage(stage2);\n  });\n\n  \/\/ ============================================================\n  \/\/ Stage 2 \u2014 category select\n  \/\/ ============================================================\n  catButtons.forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      catButtons.forEach(function (b) { b.classList.remove('fp-cat-selected'); });\n      btn.classList.add('fp-cat-selected');\n      selectedCat = btn.getAttribute('data-cat');\n      revealBtn.disabled = false;\n    });\n  });\n\n  backToUpload.addEventListener('click', function () {\n    setStep(1);\n    showStage(stage1);\n  });\n\n  function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }\n\n  function pickAvoiding(arr, recentList, maxTries) {\n    if (arr.length <= 1) return arr[0];\n    var tries = maxTries || 15;\n    var choice;\n    for (var i = 0; i < tries; i++) {\n      choice = pick(arr);\n      if (recentList.indexOf(choice) === -1) return choice;\n    }\n    return choice; \/\/ pool exhausted (small pool) \u2014 accept anyway\n  }\n\n  function rememberRecent(recentList, value, cap) {\n    recentList.push(value);\n    if (recentList.length > cap) recentList.shift();\n  }<\/p>\n<p>  \/\/ Per-device memory of recently used pieces, so a group passing the\n  \/\/ same phone around back-to-back never sees the exact same reading,\n  \/\/ and even the individual pieces (opening line, personality note,\n  \/\/ etc.) rotate rather than clustering together for several people\n  \/\/ in a row. Reset only when the page is reloaded.\n  var recentOpenings = {};     \/\/ per category\n  var recentFullReadings = []; \/\/ last several complete readings, any category\n  var RECENT_CAP = 8;<\/p>\n<p>  function composeReading(cat) {\n    if (!recentOpenings[cat]) recentOpenings[cat] = [];<\/p>\n<p>    var opening, personality, patience, theme, wellness, full;\n    var attempts = 0;<\/p>\n<p>    do {\n      opening     = pickAvoiding(FORTUNES[cat] || FORTUNES.general, recentOpenings[cat], 10);\n      personality = pick(PERSONALITY_SNIPPETS);\n      patience    = pick(PATIENCE_SNIPPETS);\n      theme       = pick((THEME_SNIPPETS[cat] || THEME_SNIPPETS.general));\n      wellness    = pick(WELLNESS_CLOSINGS);\n      full = [opening, personality, patience, theme, wellness].join(' ');\n      attempts++;\n    } while (recentFullReadings.indexOf(full) !== -1 && attempts < 12);\n\n    rememberRecent(recentOpenings[cat], opening, RECENT_CAP);\n    rememberRecent(recentFullReadings, full, RECENT_CAP);\n\n    \/\/ Joined into one flowing passage, roughly 100 words.\n    return full;\n  }\n\n  revealBtn.addEventListener('click', function () {\n    if (!selectedCat) return;\n    setStep(3);\n    showStage(stage3);\n    playChime('start');\n\n    setTimeout(function () {\n      var text = composeReading(selectedCat);\n      var mark = pick(MARKS);\n\n      currentReading = { category: selectedCat, text: text, mark: mark, date: new Date().toISOString() };\n\n      resultCatEl.textContent = CAT_LABELS[selectedCat] || 'General';\n      resultTextEl.textContent = text;\n      resultMarkEl.innerHTML = mark;\n\n      setStep(4);\n      showStage(stage4);\n      playChime('reveal');\n\n      requestAnimationFrame(function () {\n        resultTextEl.classList.add('fp-in');\n        resultMarkEl.classList.add('fp-in');\n      });\n\n      saveToJournal(currentReading);\n      updateShareLinks(currentReading);\n    }, 2600);\n  });\n\n  \/\/ ============================================================\n  \/\/ Stage 4 \u2014 result actions\n  \/\/ ============================================================\n  anotherCatBtn.addEventListener('click', function () {\n    catButtons.forEach(function (b) { b.classList.remove('fp-cat-selected'); });\n    selectedCat = null;\n    revealBtn.disabled = true;\n    setStep(2);\n    showStage(stage2);\n  });\n\n  resetBtn.addEventListener('click', function () {\n    fileInput.value = '';\n    preview.src = '';\n    preview.style.display = 'none';\n    previewScan.src = '';\n    icon.style.display = '';\n    dropText.style.display = '';\n    hintEl.style.display = 'none';\n    hasPhoto = false;\n    nextToCat.disabled = true;\n\n    catButtons.forEach(function (b) { b.classList.remove('fp-cat-selected'); });\n    selectedCat = null;\n    revealBtn.disabled = true;\n\n    resultTextEl.classList.remove('fp-in');\n    resultMarkEl.classList.remove('fp-in');\n\n    setStep(1);\n    showStage(stage1);\n  });\n\n  \/\/ ============================================================\n  \/\/ Sharing\n  \/\/ ============================================================\n  function readingShareText(reading) {\n    return '\"' + reading.text + '\" \u2014 a hand reading from ' + (document.title || window.location.hostname);\n  }\n\n  function updateShareLinks(reading) {\n    var text = readingShareText(reading);\n    var url = window.location.href;\n    whatsappBtn.href = 'https:\/\/wa.me\/?text=' + encodeURIComponent(text + ' ' + url);\n    twitterBtn.href = 'https:\/\/twitter.com\/intent\/tweet?text=' + encodeURIComponent(text) + '&#038;url=' + encodeURIComponent(url);\n    facebookBtn.href = 'https:\/\/www.facebook.com\/sharer\/sharer.php?u=' + encodeURIComponent(url) + '&#038;quote=' + encodeURIComponent(text);\n  }\n\n  copyBtn.addEventListener('click', function () {\n    if (!currentReading) return;\n    var text = readingShareText(currentReading);\n    var done = function () {\n      copiedTag.classList.add('fp-show');\n      setTimeout(function () { copiedTag.classList.remove('fp-show'); }, 1800);\n    };\n    if (navigator.clipboard &#038;&#038; navigator.clipboard.writeText) {\n      navigator.clipboard.writeText(text).then(done).catch(function () { fallbackCopy(text, done); });\n    } else {\n      fallbackCopy(text, done);\n    }\n  });\n\n  function fallbackCopy(text, cb) {\n    var ta = document.createElement('textarea');\n    ta.value = text;\n    ta.style.position = 'fixed';\n    ta.style.opacity = '0';\n    document.body.appendChild(ta);\n    ta.select();\n    try { document.execCommand('copy'); } catch (e) {}\n    document.body.removeChild(ta);\n    cb();\n  }\n\n  \/\/ ============================================================\n  \/\/ Reading journal (saved locally in this browser only)\n  \/\/ ============================================================\n  var JOURNAL_KEY = 'fp_reading_journal';\n\n  function loadJournal() {\n    try {\n      var raw = window.localStorage.getItem(JOURNAL_KEY);\n      return raw ? JSON.parse(raw) : [];\n    } catch (e) {\n      return [];\n    }\n  }\n\n  function saveToJournal(reading) {\n    try {\n      var list = loadJournal();\n      list.unshift(reading);\n      if (list.length > 12) list = list.slice(0, 12);\n      window.localStorage.setItem(JOURNAL_KEY, JSON.stringify(list));\n      renderJournal();\n    } catch (e) {\n      console.error('Fortune page: could not save journal entry', e);\n    }\n  }<\/p>\n<p>  function renderJournal() {\n    var list = loadJournal();\n    if (!list.length) {\n      journalList.innerHTML = '<\/p>\n<div class=\"fp-journal-empty\">No readings saved yet \u2014 your journal fills up as you go.<\/div>\n<p>';\n      return;\n    }\n    var html = '';\n    list.forEach(function (r) {\n      var d = new Date(r.date);\n      var dateStr = isNaN(d) ? '' : d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });\n      html += '<\/p>\n<div class=\"fp-journal-item\">' +\n        '<\/p>\n<div class=\"fp-journal-item-meta\"><span>' + (CAT_LABELS[r.category] || 'General') + '<\/span> \u00b7 ' + dateStr + '<\/div>\n<p>' +\n        '<\/p>\n<div class=\"fp-journal-item-text\">' + escapeHtml(r.text) + '<\/div>\n<p>' +\n      '<\/p><\/div>\n<p>';\n    });\n    journalList.innerHTML = html;\n  }<\/p>\n<p>  function escapeHtml(str) {\n    var div = document.createElement('div');\n    div.textContent = str;\n    return div.innerHTML;\n  }<\/p>\n<p>  journalToggle.addEventListener('click', function () {\n    journalPanel.classList.toggle('fp-visible');\n    if (journalPanel.classList.contains('fp-visible')) renderJournal();\n  });<\/p>\n<p>  journalClear.addEventListener('click', function () {\n    try { window.localStorage.removeItem(JOURNAL_KEY); } catch (e) {}\n    renderJournal();\n  });<\/p>\n<p>  \/\/ ============================================================\n  \/\/ Ambient sound \u2014 synthesized chimes via Web Audio API\n  \/\/ (no external audio files to host)\n  \/\/ ============================================================\n  var audioCtx = null;\n  function getAudioCtx() {\n    if (!audioCtx) {\n      var AC = window.AudioContext || window.webkitAudioContext;\n      if (AC) audioCtx = new AC();\n    }\n    return audioCtx;\n  }<\/p>\n<p>  function playChime(type) {\n    if (!soundOn) return;\n    var ctx = getAudioCtx();\n    if (!ctx) return;\n    if (ctx.state === 'suspended') ctx.resume();<\/p>\n<p>    var notes = type === 'reveal' ? [660, 880, 1320] : [440, 550];\n    var t = ctx.currentTime;<\/p>\n<p>    notes.forEach(function (freq, idx) {\n      var osc = ctx.createOscillator();\n      var gain = ctx.createGain();\n      osc.type = 'sine';\n      osc.frequency.value = freq;\n      var start = t + idx * 0.12;\n      gain.gain.setValueAtTime(0, start);\n      gain.gain.linearRampToValueAtTime(0.06, start + 0.03);\n      gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.9);\n      osc.connect(gain).connect(ctx.destination);\n      osc.start(start);\n      osc.stop(start + 1);\n    });\n  }<\/p>\n<p>  soundToggle.addEventListener('click', function () {\n    soundOn = !soundOn;\n    soundToggle.classList.toggle('fp-muted', !soundOn);\n    if (soundOn) playChime('start');\n  });<\/p>\n<p>  \/\/ ============================================================\n  \/\/ Init\n  \/\/ ============================================================\n  setStep(1);\n  showStage(stage1);\n  renderJournal();\n})();\n<\/script><\/p>\n<p><?php get_footer(); ?><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Reading, Just For You What Does YourHand Reveal? Upload a photo of your open palm, choose what you&#8217;d like insight on, and let the reading unfold. Offer the Hand Choose the Path The Reading Your Fortune Tap to upload your hand Continue What would you like this reading to focus on? Love Career Wealth &#8230; <a title=\"\" class=\"read-more\" href=\"https:\/\/gachanews.com\/?page_id=13\" aria-label=\"Read more about \">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gachanews.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":1,"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/gachanews.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/gachanews.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}