.daily main { position: relative; max-width: none; padding: 0; text-align: center; }   /* no z-index: a stacking context here would stop the hand art from blending into the sky */
.daily { background: #0c0f2b; }

/* ---- night sky behind everything after the intro: faint navy -> purple, sparse gold dot stars (a few twinkle) ---- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none;
       background: linear-gradient(180deg, #0b0e2a 0%, #15133a 52%, #261a4a 100%); }
.sky .star { position: absolute; border-radius: 50%; background: #e6c46f; opacity: var(--o1, .4); }
.sky .star.tw { animation: twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: var(--o1, .3); } 50% { opacity: var(--o2, .85); } }

/* ---- stage: a full-viewport-height column; everything inside moves with transform/opacity only ---- */
.stage { position: relative; width: min(100%, calc(100vh * .62)); width: min(100%, calc(100dvh * .62));
         height: 100vh; height: 100dvh; min-height: 480px; margin: 0 auto; overflow: hidden;
         background: radial-gradient(ellipse at 50% 56%, rgba(96, 62, 160, .16) 0%, rgba(96, 62, 160, 0) 70%);
         -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.stage.is-fan { touch-action: none; }
.stage-head { position: absolute; top: 14px; left: 0; right: 0; z-index: 5; pointer-events: none; }
.page-title { margin: 0; font-size: 1rem; font-weight: 500; color: #c9a96e; }
.today { margin: 2px 0 0; opacity: .7; font-size: .85rem; }
.hint { position: absolute; left: 16px; right: 16px; top: 0; margin: 0; z-index: 4; color: #c9a96e; font-size: 1.05rem;
        line-height: 1.5; pointer-events: none; }
.hint small { display: block; margin-top: 4px; opacity: .65; font-size: .82rem; }
.deck-shadow { position: absolute; left: 50%; top: 0; height: 22px; pointer-events: none;
               background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 70%); }

/* fan: flat (no perspective, no rotateY) so every card has the same size; isolation keeps card z-indexes inside the fan */
.fan { position: absolute; inset: 0; outline: none; isolation: isolate; }
/* gold flash from the deck at the end of the shuffle */
.deck-flash { position: absolute; left: 50%; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform: scale(.5);
              background: radial-gradient(circle, rgba(255, 238, 170, .95) 0%, rgba(240, 196, 90, .5) 30%, rgba(240, 196, 90, 0) 68%); }
.fan:focus-visible { outline: 2px solid rgba(201, 169, 110, .6); outline-offset: -2px; }
.fcard { position: absolute; left: 50%; top: 0; pointer-events: none; }
.fcard-lift, .fcard-in, .fglow, .fdim { position: absolute; inset: 0; }
/* each card edge shows as a thin (~0.6px on screen) gold line below it: cards are 1px apart in the stack, --k is the stack zoom */
.fcard-in { box-shadow: 0 calc(.6px / var(--k, 1)) 0 0 rgba(217, 164, 65, .75), 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .16); }
.fglow { border-radius: calc(var(--u) * 4.5); opacity: 0;
         box-shadow: 0 0 calc(var(--u) * 7) calc(var(--u) * 1.5) rgba(240, 214, 150, .95), 0 0 calc(var(--u) * 16) calc(var(--u) * 3) rgba(201, 169, 110, .55); }
.fdim { background: rgba(10, 6, 24, .5); opacity: 0; }

/* card back = static/brand/card_back.webp shown whole (2:3 like the art), rounded; sized by --u (= card width / 100) */
.cardback { --u: 1px; position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; border-radius: calc(var(--u) * 4.5);
            background: #0d0f1e url("../brand/card_back.webp") center / 100% 100% no-repeat; }

/* ---- reveal card ---- */
.reveal { position: absolute; left: 50%; top: 0; }
.reveal.is-tilt { touch-action: none; }
.float, .tilt, .spin { position: absolute; inset: 0; }
.tilt, .spin { transform-style: preserve-3d; }
.face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: calc(var(--u) * 4.5);
        backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; }
/* while the card turns, the back is visible from both sides and the front is hidden; the front only appears in the last half turn (JS) */
.face.back { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); backface-visibility: visible; -webkit-backface-visibility: visible; }
.front { transform: rotateY(180deg); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); visibility: hidden; }
.front .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
                      font-size: 1.4rem; color: #c9a96e; text-align: center; background: #2a2145; }
.front .plate .ch { opacity: 0; }
/* holographic glint: a narrow diagonal band of pale gold-white that slides with the tilt (screen blend, so it never tints the blue art) */
.sheen { position: absolute; left: -60%; top: -60%; width: 220%; height: 220%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
         background: linear-gradient(115deg, rgba(255, 244, 220, 0) 45.5%, rgba(255, 244, 220, 1) 50%, rgba(255, 244, 220, 0) 54.5%); }

.glow { position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; margin-left: -56%; margin-top: -56%;
        border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(.3);
        background: radial-gradient(circle, rgba(246, 230, 190, .9) 0%, rgba(232, 207, 154, .5) 28%, rgba(201, 169, 110, 0) 68%); }
.rays { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; transform: scale(.3);
        background: repeating-conic-gradient(from 0deg, rgba(248, 230, 175, .95) 0deg 3deg, rgba(248, 230, 175, 0) 3deg 12deg);
        -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 66%); mask-image: radial-gradient(circle, #000 14%, transparent 66%); }

/* hand slot (static/hand.webp) or soft golden light from below */
.hand-wrap { position: absolute; left: 50%; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.hand-wrap[hidden] { display: none; }
/* hand_cutout.webp is transparent around the hands; only the lower edge (the sleeves) fades out softly */
.hand { position: absolute; left: 0; top: 0; transform: translateX(-50%); max-width: none; display: block; aspect-ratio: 840 / 482;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
.hand-glow { position: absolute; left: 0; top: 0; transform: translateX(-50%); border-radius: 50%;
             background: radial-gradient(ellipse at 50% 40%, rgba(232, 207, 154, .7) 0%, rgba(201, 169, 110, .28) 45%, rgba(201, 169, 110, 0) 72%); }

/* controls */
.ctl-main { position: absolute; left: 0; right: 0; top: 0; z-index: 6; }
.ctl-main[hidden], .btn[hidden] { display: none; }
.ctl-skip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6; }
.ctl-skip[hidden] { display: none; }
.btn { font: inherit; cursor: pointer; padding: 11px 28px; border-radius: 999px; border: 1px solid #c9a96e;
       background: #c9a96e; color: #1b1530; font-weight: 700; letter-spacing: .06em; }
.btn:focus-visible { outline: 2px solid #f1e9d8; outline-offset: 3px; }
.btn.ghost { background: transparent; color: #c9a96e; font-weight: 400; padding: 6px 14px; border-color: transparent;
             font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0; }

/* ---- result: everything centered ---- */
.result { max-width: 520px; margin: 0 auto; padding: 6px 16px 56px; text-align: center; font-family: "Gowun Dodum", "Malgun Gothic", sans-serif; }
.result[hidden] { display: none; }
.card-name { margin: 0 0 8px; color: #c9a96e; letter-spacing: .1em; }
.headline { margin: 0 0 24px; font-family: "Gowun Batang", "Batang", serif; font-weight: 700; font-size: 26px; line-height: 1.35;
            word-break: keep-all; text-wrap: balance; }
.reading { max-width: 20em; margin: 0 auto 14px; font-size: 17px; line-height: 1.85; word-break: keep-all; text-wrap: balance; }
.action { margin: 28px 0; padding: 16px 18px; border: 1px solid #c9a96e; border-radius: 10px; background: rgba(201, 169, 110, .1); }
.action-label { display: inline-block; margin-bottom: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
                color: #1b1530; background: #c9a96e; padding: 2px 10px; border-radius: 999px; }
.action p { margin: 0 auto; max-width: 20em; line-height: 1.85; font-size: 17px; word-break: keep-all; text-wrap: balance; }
.question { margin: 36px 0 28px; padding-top: 24px; border-top: 1px solid rgba(201, 169, 110, .4);
            font-size: 1.3rem; line-height: 1.5; color: #e8cf9a; word-break: keep-all; text-wrap: balance; }
.links { margin: 0; }

/* sequential fade-in (opacity + transform only) */
.fade { opacity: 0; transform: translateY(8px); }
.fade.show { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* ---- intro: static/brand/intro.webp as a full-height backdrop; title in the empty sky above the moon ---- */
/* fixed to the viewport: full width, full dynamic height; the page itself cannot scroll while it is open */
.intro { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 30; text-align: center; overflow: hidden;
         background: #0b0d1c; touch-action: none; overscroll-behavior: none; }
html.intro-open, html.intro-open body { overflow: hidden; height: 100%; overscroll-behavior: none; }
.intro[hidden] { display: none; }
/* anchored to the top so the moon stays below the title on wide columns; 14px spare on every side for the parallax shift */
.intro-bg, .intro-side { background: #0b0d1c url("../brand/intro.webp") center top / cover no-repeat; }
.intro-bg { position: absolute; inset: -14px; }
/* the picture sits in a column that follows the stage rule exactly: the whole width on a phone, a centred column of the stage's width on a
   wider screen; beside the column the same picture lies big, blurred and dark (so the sides never look empty) */
.intro-col { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; overflow: hidden; background: #0b0d1c;
             width: min(100%, calc(100vh * .62)); width: min(100%, calc(100dvh * .62)); }
.intro-side { display: none; position: absolute; inset: -60px; background-position: center 62%; filter: blur(30px) brightness(.78) saturate(1.15); }
@media (min-aspect-ratio: 62/100) { .intro-side { display: block; } }
.intro-title { position: absolute; left: 0; right: 0; top: 5.5%; margin: 0; font-family: "Gowun Batang", "Batang", serif; font-weight: 700;
               font-size: min(21vw, 84px); line-height: 1.05; letter-spacing: .06em; color: #f3e3b0;
               text-shadow: 0 2px 14px rgba(4, 6, 20, .72), 0 0 30px rgba(4, 6, 20, .55), 0 0 22px rgba(212, 175, 55, .22); }
.intro-title-text { position: relative; display: inline-block; }
.intro-sub { position: absolute; left: 0; right: 0; top: calc(5.5% + min(21vw, 84px) + 12px); margin: 0;
             font-family: "Gowun Batang", "Batang", serif; font-size: min(5vw, 20px); color: #ecdba8; letter-spacing: .04em;
             text-shadow: 0 1px 10px rgba(4, 6, 20, .85), 0 0 22px rgba(4, 6, 20, .6); }
.intro-btn { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); white-space: nowrap; font-size: 1.05rem;
             padding: 14px 34px; box-shadow: 0 6px 22px rgba(0, 0, 0, .5); z-index: 3; }
/* gold dust in front of the picture: tiny crisp motes and a few large soft ones, all rising slowly and flickering */
.dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dust .p { position: absolute; border-radius: 50%; will-change: transform, opacity; }
.dust .p b { position: absolute; inset: 0; border-radius: 50%; display: block; }
.dust .p.s b { background: radial-gradient(circle, #fffbe0 0%, rgba(255, 230, 140, 1) 30%, rgba(255, 200, 80, .75) 55%, rgba(255, 190, 70, 0) 76%);
               box-shadow: 0 0 6px 1px rgba(255, 214, 110, .55); }
.dust .p.l b { background: radial-gradient(circle, rgba(255, 236, 170, .85) 0%, rgba(255, 206, 100, .45) 42%, rgba(255, 190, 80, 0) 72%); }

/* lights painted over the intro picture (sized and placed from JS to match the lantern, the ground and the moon) */
.intro-bg i { position: absolute; display: block; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.moon-halo { opacity: .6; background: radial-gradient(circle, rgba(255, 228, 150, .75) 0%, rgba(255, 214, 120, .42) 34%, rgba(255, 210, 110, 0) 68%); }
.lantern-ground { opacity: .7; background: radial-gradient(ellipse at 50% 50%, rgba(255, 196, 96, .62) 0%, rgba(255, 176, 70, .28) 42%, rgba(255, 176, 70, 0) 72%); }
.lantern-glow { opacity: .85; }
.lantern-glow b { position: absolute; inset: 0; display: block; border-radius: 50%;
                  background: radial-gradient(circle, rgba(255, 244, 190, 1) 0%, rgba(255, 206, 100, .75) 16%, rgba(255, 170, 60, .34) 44%, rgba(255, 160, 50, 0) 72%); }

/* reduced motion: only decorative loops go (dust, twinkle; the idle sway is switched off in JS); drawing, tilt-by-hand and the reading still work */
@media (prefers-reduced-motion: reduce) {
  .sky .star.tw { animation: none; }
  .dust { display: none; }
}




/* ---- quoted phrases never break across lines (JS wraps them in .q and removes the rule again for ones wider than the line) ---- */
.q { white-space: nowrap; }
.q.wrap { white-space: normal; }

/* ---- English page: Cormorant Garamond for headlines / card names, EB Garamond for everything else ---- */
.lang-en { font-family: "EB Garamond", "Georgia", serif; }
.lang-en .page-title { font-size: 1.15rem; letter-spacing: .04em; }
.lang-en .today { font-size: .95rem; opacity: .75; }
.lang-en .hint { font-size: 1.2rem; }
.lang-en .hint small { font-size: .95rem; }
.lang-en .btn { letter-spacing: .04em; font-size: 1.05rem; }
.lang-en .btn.ghost { font-size: 1rem; }
.lang-en .intro-title { font-family: "Cormorant Garamond", "Georgia", serif; font-size: min(26vw, 104px); letter-spacing: .08em; }
.lang-en .intro-sub { font-family: "Cormorant Garamond", "Georgia", serif; font-size: min(5.4vw, 21px); font-weight: 600;
                      top: calc(5.5% + min(26vw, 104px) + 6px); letter-spacing: .03em; }
.lang-en .plate { font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 700; letter-spacing: .02em; }
.lang-en .result { font-family: "EB Garamond", "Georgia", serif; }
.lang-en .card-name { font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; }
.lang-en .headline { font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 700; font-size: 32px; line-height: 1.18; }
.lang-en .reading { max-width: 24em; font-size: 19.5px; line-height: 1.7; }
.lang-en .action p { max-width: 24em; font-size: 19.5px; line-height: 1.7; }
.lang-en .action-label { font-size: .9rem; letter-spacing: .06em; }
.lang-en .question { font-family: "Cormorant Garamond", "Georgia", serif; font-weight: 600; font-size: 1.6rem; line-height: 1.3; }
.lang-en .links { font-size: 1.1rem; }



/* ---- question screen (between the intro and the shuffle) ---- */
.ask { position: absolute; inset: 0; z-index: 25; overflow-y: auto; padding: 78px 20px 28px; display: flex; justify-content: center; align-items: flex-start; }
.ask[hidden] { display: none; }
.ask-inner { width: 100%; max-width: 420px; text-align: center; }
.ask-title { margin: 8px 0 18px; font-family: "Gowun Batang", "Batang", serif; font-weight: 700; font-size: 28px; line-height: 1.3; color: #f3e3b0; }
.ask-text { box-sizing: border-box; display: block; width: 100%; min-height: 128px; resize: none; padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.6;
            color: #f1e9d8; background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 169, 110, .55); border-radius: 14px; outline: none;
            user-select: text; -webkit-user-select: text; }
.ask-text:focus { border-color: #e8cf9a; box-shadow: 0 0 0 3px rgba(201, 169, 110, .22); }
.ask-text::placeholder { color: rgba(241, 233, 216, .42); }
.ask-count { margin: 6px 4px 0; text-align: right; font-size: .82rem; opacity: .65; }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 26px; }
.chip { font: inherit; font-size: .98rem; cursor: pointer; padding: 9px 18px; color: #e8cf9a; background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(201, 169, 110, .6); border-radius: 999px; }
.chip[aria-checked="true"] { color: #1b1530; background: #c9a96e; font-weight: 700; }
.chip:focus-visible { outline: 2px solid #f1e9d8; outline-offset: 2px; }
.ask-note { margin: 16px 0 0; font-size: .8rem; line-height: 1.5; opacity: .62; }
/* while the question screen is open, the card table underneath stays out of sight */
.stage.asking .fan, .stage.asking .hint, .stage.asking .deck-shadow, .stage.asking .ctl-main, .stage.asking .ctl-skip { visibility: hidden; }

/* ---- result: three layouts (plain = the card's own reading; ark = Arc's answer; crisis = a caring message) ---- */
.ark, .ark-note, .basic { display: none; }
.result.mode-pending .ark, .result.mode-ark .ark, .result.mode-crisis .ark { display: block; }
.result.mode-note .ark-note { display: block; }
.result.mode-ark .basic { display: block; }
.result.mode-pending #rHeadline, .result.mode-pending #rReading, .result.mode-pending .action, .result.mode-pending #rQuestion,
.result.mode-pending .links, .result.mode-pending .ark-title, .result.mode-pending .ark-text { display: none; }
.result.mode-ark #rHeadline, .result.mode-ark #rReading, .result.mode-ark #rQuestion, .result.mode-ark .ark-wait { display: none; }
.result.mode-crisis .card-name, .result.mode-crisis #rHeadline, .result.mode-crisis #rReading, .result.mode-crisis .action,
.result.mode-crisis #rQuestion, .result.mode-crisis .ark-wait { display: none; }
.ark-wait { margin: 30px 0 14px; color: #e8cf9a; font-size: 1.1rem; animation: arkpulse 1.6s ease-in-out infinite; }
@keyframes arkpulse { 50% { opacity: .35; } }
.ark-title { margin: 4px 0 12px; font-family: "Gowun Batang", "Batang", serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; color: #c9a96e; }
.ark-text { max-width: 22em; margin: 0 auto 14px; font-size: 18px; line-height: 1.85; word-break: keep-all; text-wrap: balance; white-space: pre-line; }
.ark-note { margin: 4px 0 16px; font-size: .95rem; color: #e8cf9a; }
.basic { margin: 6px auto 22px; max-width: 24em; padding: 10px 16px; text-align: center; border: 1px solid rgba(201, 169, 110, .35); border-radius: 12px; }
.basic summary { cursor: pointer; color: #c9a96e; list-style: none; }
.basic summary::-webkit-details-marker { display: none; }
.basic summary::after { content: " \25BE"; }
.basic[open] summary::after { content: " \25B4"; }
.basic h3 { margin: 14px 0 8px; font-family: "Gowun Batang", "Batang", serif; font-size: 1.1rem; word-break: keep-all; text-wrap: balance; }
.basic p { margin: 0 auto 8px; font-size: 16px; line-height: 1.8; word-break: keep-all; text-wrap: balance; }

.lang-en .ask-title { font-family: "Cormorant Garamond", "Georgia", serif; font-size: 32px; }
.lang-en .ask-text, .lang-en .chip { font-family: "EB Garamond", "Georgia", serif; }
.lang-en .ask-text { font-size: 19px; }
.lang-en .chip { font-size: 1.05rem; }
.lang-en .ark-title { font-family: "Cormorant Garamond", "Georgia", serif; font-size: 1.3rem; }
.lang-en .ark-text { max-width: 24em; font-size: 20px; line-height: 1.7; }
.lang-en .basic h3 { font-family: "Cormorant Garamond", "Georgia", serif; font-size: 1.3rem; }
.lang-en .basic p { font-size: 18px; line-height: 1.65; }
.lang-en .ark-wait, .lang-en .ark-note { font-size: 1.15rem; }

/* "AI-generated" label right under Arc's answer: only shown with an AI answer */
.ai-label { display: none; margin: -4px 0 16px; font-size: .86rem; letter-spacing: .04em; color: #c9a96e; opacity: .85; }
.result.mode-ark .ai-label { display: block; }
.lang-en .ai-label { font-size: .9rem; }
/* crisis shown straight from the question screen: no card, no table */
.stage.crisis-only .stage-head, .stage.crisis-only .fan, .stage.crisis-only .hint, .stage.crisis-only .deck-shadow, .stage.crisis-only .ctl-main,
.stage.crisis-only .ctl-skip, .stage.crisis-only .hand-wrap, .stage.crisis-only .reveal { display: none; }
.stage.crisis-only { height: 72px; min-height: 0; }

/* ---- speaker button: small, top right, on every screen ---- */
.sound-btn { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 90; width: 36px; height: 36px; padding: 0;
             display: grid; place-items: center; cursor: pointer; color: #e8cf9a; background: rgba(12, 12, 30, .5); border: 1px solid rgba(201, 169, 110, .5);
             border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.sound-btn:focus-visible { outline: 2px solid #f1e9d8; outline-offset: 2px; }
.sound-btn .slash { display: none; }
.sound-btn.off { color: rgba(232, 207, 154, .6); }
.sound-btn.off .waves { display: none; }
.sound-btn.off .slash { display: block; }
/* tall enough that the page can scroll until the card name is at the top, whatever the reading length */
.result:not(.mode-crisis) { min-height: 100vh; min-height: 100dvh; }

/* ---- choice screen (pick a topic / tell a worry), topic list, worry-screen status ---- */
.choice { display: block; width: 100%; box-sizing: border-box; font: inherit; cursor: pointer; text-align: center; border-radius: 20px; }
.choice b { display: block; font-family: "Gowun Batang", "Batang", serif; font-weight: 700; }
.choice span { display: block; margin-top: 8px; }
.choice-art { display: block; }
/* the main button is dark so the gold artwork reads; it stays the big, glowing one */
.choice-main { padding: 20px 20px 24px; color: #f3e3b0; border: 1.5px solid #c9a96e;
               background: linear-gradient(180deg, rgba(62, 47, 112, .9), rgba(30, 24, 64, .92)); box-shadow: 0 0 0 1px rgba(232, 207, 154, .16), 0 10px 36px rgba(201, 169, 110, .26); }
.choice-main .choice-art { height: 112px; width: auto; margin: 0 auto 12px; }
.choice-main b { font-size: 30px; }
.choice-main span { font-size: 1rem; opacity: .85; color: #e8cf9a; }
/* worry button as a list row: picture (72px) | title + text, left-aligned | gold arrow; same width as the main button */
.choice-sub { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 12px 16px; text-align: left; color: #e8cf9a;
              background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 169, 110, .6); }
.choice-sub .choice-art { flex: none; width: 72px; height: auto; opacity: 1; filter: drop-shadow(0 0 6px rgba(232, 190, 100, .22)); }
.choice-sub .choice-text { flex: 1; min-width: 0; display: block; margin: 0; text-align: left; }
.choice-sub::after { content: "\203A"; flex: none; margin-left: auto; font-size: 30px; line-height: 1; color: #c9a96e; }
.choice-sub b { font-size: 19px; text-align: left; }
.choice-sub .choice-text span { font-size: .88rem; opacity: .7; margin-top: 4px; }
.choose { padding-top: 124px; }
.choose .ask-title { margin: 8px 0 30px; }
.choose-emblem { display: block; width: 124px; height: 124px; margin: clamp(36px, 10vh, 96px) auto 0; opacity: .25; pointer-events: none; }
.choice:focus-visible, .ptopic:focus-visible, .nav-back:focus-visible { outline: 2px solid #f1e9d8; outline-offset: 3px; }
.ptopics { display: grid; gap: 12px; margin-bottom: 8px; }
.ptopic { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; font: inherit; cursor: pointer; text-align: left; padding: 14px 18px 14px 16px; color: #f1e9d8;
          background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 169, 110, .6); border-radius: 16px; }
.ptopic-text { flex: 1; display: block; min-width: 0; }
.ptopic-icon { position: relative; flex: none; width: 40px; height: 40px; }
.ptopic-icon img { position: relative; display: block; width: 40px; height: 40px; transition: transform .18s ease; }
/* press glow: a soft golden halo behind the icon (opacity/transform only) */
.ptopic-icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
                       background: radial-gradient(circle, rgba(255, 214, 120, .85) 0%, rgba(255, 200, 100, .35) 40%, rgba(255, 200, 100, 0) 70%); opacity: 0; transition: opacity .18s ease; }
.ptopic:active .ptopic-icon::before, .ptopic.lit .ptopic-icon::before { opacity: 1; }
.ptopic:active .ptopic-icon img, .ptopic.lit .ptopic-icon img { transform: scale(1.12); }
.ptopic b { display: block; font-family: "Gowun Batang", "Batang", serif; font-size: 20px; color: #e8cf9a; }
.ptopic-text span { display: block; margin-top: 4px; font-size: .95rem; opacity: .85; word-break: keep-all; }
.ptopic:active { background: rgba(201, 169, 110, .22); }
.nav-back { display: block; margin: 18px auto 0; font: inherit; font-size: .95rem; cursor: pointer; color: #c9a96e; background: none; border: 0; padding: 8px 12px; }
.nav-back-top { margin: 0 0 0 -12px; }
.ask-status { margin: 0 0 14px; text-align: center; color: #e8cf9a; font-size: 1rem; min-height: 1.4em; }
.ask-status.checking { animation: arkpulse 1.6s ease-in-out infinite; }
.ask-rest { margin: 0 0 20px; padding: 18px 16px; text-align: center; border: 1px solid rgba(201, 169, 110, .6); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.ask-rest[hidden] { display: none; }
.ask-rest p { margin: 0 0 14px; font-size: 1.08rem; line-height: 1.6; word-break: keep-all; }
.ask.is-off .ask-title, .ask.is-off .ask-text, .ask.is-off .ask-count, .ask.is-off .topics, .ask.is-off .ask-go, .ask.is-off .ask-note { opacity: .38; pointer-events: none; }
.lang-en .choice b, .lang-en .ptopic b { font-family: "Cormorant Garamond", "Georgia", serif; }
.lang-en .choice-main b { font-size: 34px; }
.lang-en .ptopic-text span, .lang-en .choice span { font-size: 1.05rem; }
.lang-en .ptopic, .lang-en .nav-back, .lang-en .ask-status, .lang-en .ask-rest p { font-family: "EB Garamond", "Georgia", serif; }