:root{--surface:#F7F6F4;--gold-rim:rgba(215,192,120,0.42);--ease-reveal:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.22,.61,.36,1);--reveal-rim-dur:1.3s;--reveal-ink-dur:1.15s;--reveal-name-dur:.95s;}:root{--reveal-rim-dur:.95s;--reveal-ink-dur:.85s;--reveal-name-dur:.7s;}:root{--rite-night:16,17,26;--rite-ease-soft:cubic-bezier(.33,0,.2,1);}
nav { display: flex; gap: 36px; }
nav a { font-size: 0.65rem; letter-spacing: 0.35em; color: rgb(59, 59, 59); text-decoration: none; transition: color 0.3s; }
nav a:hover { color: rgb(111, 90, 22); }
@keyframes aura { 
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.06); opacity: 1; }
}
.halo { position: absolute; width: 64%; padding-bottom: 64%; border-radius: 50%; border: 1px solid var(--gold-rim); animation: 22s linear 0s infinite normal none running haloSpin; pointer-events: none; }
.halo::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(215, 192, 120, 0.17); }
@keyframes haloSpin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.divination-intro { font-size: 0.7rem; font-weight: 200; letter-spacing: 0.12em; line-height: 2.3; color: var(--ink-muted); text-align: center; max-width: 460px; margin-top: -8px; }
.intro-note { display: block; margin-top: 10px; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-muted); }
.input-panel { width: 100%; max-width: 500px; background: var(--surface); border: 1px solid var(--silver-lt); padding: 36px 44px 32px; position: relative; box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 40px; }
.c-orn { position: absolute; width: 16px; height: 16px; border-color: var(--silver-lt); border-style: solid; }
.c-orn.tl { top: 14px; left: 14px; border-width: 1px 0px 0px 1px; }
.c-orn.tr { top: 14px; right: 14px; border-width: 1px 1px 0px 0px; }
.c-orn.bl { bottom: 14px; left: 14px; border-width: 0px 0px 1px 1px; }
.c-orn.br { bottom: 14px; right: 14px; border-width: 0px 1px 1px 0px; }
.panel-title { font-size: 0.88rem; font-weight: 300; letter-spacing: 0.42em; color: var(--ink-mid); text-align: center; }
.panel-sub { font-size: 0.55rem; letter-spacing: 0.5em; color: var(--ink-muted); display: block; margin-top: 6px; text-align: center; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 0.58rem; letter-spacing: 0.4em; color: var(--ink-muted); }
.opt-note { letter-spacing: 0.15em; color: var(--ink-muted); font-size: 0.9em; }
.field input, .field select { font-family: var(--font); font-size: 0.82rem; letter-spacing: 0.1em; padding: 9px 12px; background: var(--bg); border: 1px solid var(--silver-lt); color: var(--ink); outline: none; appearance: none; }
.field input:focus, .field select:focus { border-color: var(--silver); }
.field input::placeholder { color: var(--ink-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.msg { font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.9; color: var(--ink-muted); text-align: center; margin-top: 8px; min-height: 1.6em; }
.msg.warn { color: rgb(158, 58, 58); }
.next-oracle-note { font-size: 0.54rem; letter-spacing: 0.13em; color: var(--ink-muted); text-align: center; margin-top: 2px; }
.tk-receipt-line { font-size: 0.62rem; letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-mid); text-align: center; margin-top: 14px; }
.btn-go:hover::after { transform: scaleX(1); }
.btn-go:hover span { color: rgb(255, 255, 255); }
.btn-go:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.weather-info { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--ink-muted); text-align: center; margin-top: 6px; min-height: 1.2em; }
.loading { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 20px 0px; }
.loading.on { display: flex; }
.loading-txt { font-size: 0.63rem; letter-spacing: 0.46em; color: var(--ink-muted); }
.rings { position: relative; width: 44px; height: 44px; }
.rings span { position: absolute; inset: 0px; border-radius: 50%; border: 1px solid transparent; }
.rings span:nth-child(1) { border-top-color: var(--silver); animation: 1.2s linear 0s infinite normal none running spin; }
.rings span:nth-child(2) { inset: 8px; border-top-color: var(--ink-muted); animation: 1.9s linear 0s infinite reverse none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.oracle-card { display: none; width: 100%; max-width: 580px; padding: 36px 44px 32px; position: relative; border: 1px solid var(--silver-lt); background: var(--surface); box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 40px; overflow: hidden; }
.oracle-card.anim { animation: cardIn .7s var(--ease) both; }
@keyframes cardIn { 
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0px); }
}
html.sazukari-open { overflow: hidden; }
html.sazukari-open body { overflow: hidden; }
body.sazukari-lock { position: fixed; left: 0px; right: 0px; }
.oracle-card.sazukari-view { padding-block: 76px 96px; padding-inline: max(20px, 50% - 290px); overflow-y: auto; background: var(--surface); box-shadow: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-sizing: border-box; display: block !important; position: fixed !important; inset: 0px !important; z-index: 590 !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0px !important; }
.oracle-card.sazukari-view.anim { animation: auto ease 0s 1 normal none running none; }
@keyframes sazukariCurtainIn { 
  0% { clip-path: inset(0px 0px 100%); opacity: 0.5; }
  55% { opacity: 1; }
  100% { clip-path: inset(0px 0px 0%); opacity: 1; }
}
@keyframes sazukariCurtainOut { 
  0% { clip-path: inset(0px 0px 0%); opacity: 1; }
  100% { clip-path: inset(100% 0px 0px); opacity: 0.35; }
}
.oracle-card.sazukari-view.sazukari-curtain-in { animation: sazukariCurtainIn .7s var(--ease-soft) both; }
.oracle-card.sazukari-view.sazukari-curtain-out { animation: sazukariCurtainOut .48s var(--ease-soft) both; }
@media (prefers-reduced-motion: reduce){.oracle-card.sazukari-view.sazukari-curtain-in, .oracle-card.sazukari-view.sazukari-curtain-out { animation: auto ease 0s 1 normal none running none !important; clip-path: none !important; opacity: 1 !important; }}
::view-transition-group(root) { animation-duration: 0.001s; }
.sazukari-close-btn { display: none; position: fixed; top: 14px; left: 14px; z-index: 592; align-items: center; gap: 6px; padding: 9px 16px 9px 12px; border-radius: 2px; border: 1px solid var(--gold-rim); background: rgba(247, 246, 244, 0.94); color: var(--ink-mid); font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; backdrop-filter: blur(3px); }
html.sazukari-open .sazukari-close-btn { display: inline-flex; }
.sazukari-close-arrow { font-size: 0.92em; }
@media (max-width: 520px){.sazukari-close-btn { top: 10px; left: 10px; padding: 7px 12px 7px 10px; font-size: 0.72rem; }.oracle-card.sazukari-view { padding-block: 64px 80px; }}
.oracle-card.reveal-contour { position: relative; }
.oracle-card.reveal-contour::before { content: ""; position: absolute; inset: 0px; pointer-events: none; z-index: 3; opacity: 0; }
.oracle-card.reveal-contour.reveal-play::before { animation: revealContourRim var(--reveal-rim-dur) var(--ease-soft) forwards; }
@keyframes revealContourRim { 
  0% { opacity: 0; box-shadow: rgba(215, 192, 120, 0) 0px 0px 0px 0px inset, rgba(215, 192, 120, 0) 0px 0px 0px 0px; }
  22% { opacity: 1; box-shadow: 0 0 0 1px var(--gold-rim) inset,0 0 26px 2px rgba(215,192,120,.28); }
  60% { opacity: 1; box-shadow: rgba(215, 192, 120, 0.22) 0px 0px 0px 1px inset, rgba(215, 192, 120, 0.1) 0px 0px 14px 1px; }
  100% { opacity: 0; box-shadow: rgba(215, 192, 120, 0) 0px 0px 0px 1px inset, rgba(215, 192, 120, 0) 0px 0px 0px 0px; }
}
.oracle-card.reveal-contour .rank-letter, .oracle-card.reveal-contour .rank-name-text { opacity: 0; filter: blur(7px); }
.oracle-card.reveal-contour.reveal-play .rank-letter { animation: revealInk var(--reveal-ink-dur) var(--ease-reveal) .12s forwards; }
.oracle-card.reveal-contour.reveal-play .rank-name-text { animation: revealInk var(--reveal-name-dur) var(--ease-reveal) .42s forwards; }
@keyframes revealInk { 
  0% { opacity: 0; filter: blur(7px); letter-spacing: 0.32em; }
  55% { opacity: 0.9; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0px); letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce){.oracle-card.reveal-contour .rank-letter, .oracle-card.reveal-contour .rank-name-text { opacity: 1 !important; filter: none !important; letter-spacing: 0.1em !important; }.oracle-card.reveal-contour::before { display: none !important; }.tier-ring { display: none !important; }}
.tier-ring { position: absolute; left: 50%; top: 46%; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; border: 1px solid transparent; z-index: 2; }
.oracle-card.r-S .tier-ring.ring1 { width: 40px; height: 40px; border-color: rgba(200, 160, 40, 0.7); }
.oracle-card.r-S.reveal-play .tier-ring.ring1 { animation: tierRing 1.4s var(--ease-soft) .25s forwards; }
.oracle-card.r-SS .tier-ring.ring1 { width: 34px; height: 34px; border-color: rgba(200, 160, 20, 0.85); }
.oracle-card.r-SS .tier-ring.ring2 { width: 34px; height: 34px; border-color: rgba(255, 230, 140, 0.7); }
.oracle-card.r-SS.reveal-play .tier-ring.ring1 { animation: tierRing 1.7s var(--ease-soft) .2s forwards; }
.oracle-card.r-SS.reveal-play .tier-ring.ring2 { animation: tierRing 1.7s var(--ease-soft) .55s forwards; }
@keyframes tierRing { 
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(7.5); opacity: 0; }
}
.oracle-card.r-SS .rank-letter { background-size: 220% 100%; }
.oracle-card.r-SS.reveal-play .rank-letter { animation: revealInk 1.15s var(--ease-reveal) .12s forwards, ssShimmer 1.6s var(--ease-soft) .9s 1; }
@keyframes ssShimmer { 
  0% { background-position: 0% 50%; }
  100% { background-position: 180% 50%; }
}
.oracle-card.r-X.reveal-play .rank-letter { animation: revealInk 1.15s var(--ease-reveal) .12s forwards, xFlicker 1.8s ease-in-out .3s 1; }
@keyframes xFlicker { 
  0%, 100% { opacity: 1; }
  8% { opacity: 0.5; }
  14% { opacity: 1; }
  55% { opacity: 1; }
  62% { opacity: 0.6; }
  68% { opacity: 1; }
}
.oracle-card.r-X .tier-ring.ring1 { width: 38px; height: 38px; border-color: rgba(140, 128, 230, 0.65); border-style: dashed; }
.oracle-card.r-X.reveal-play .tier-ring.ring1 { animation: 1.6s ease-in-out 0.3s 1 normal forwards running tierRing; }
.oracle-card.r-S { background: linear-gradient(145deg, rgb(251, 244, 222) 0%, rgb(243, 228, 182) 32%, rgb(233, 208, 142) 64%, rgb(216, 185, 110) 100%); border: 4px solid rgb(198, 161, 54); box-shadow: rgb(176, 138, 44) 0px 0px 0px 1px inset, rgba(216, 184, 106, 0.55) 0px 0px 0px 1px, rgba(216, 184, 106, 0.38) 0px 0px 20px, rgba(196, 158, 90, 0.22) 0px 0px 46px, rgba(120, 90, 20, 0.12) 0px 8px 34px; position: relative; animation: 3.6s ease-in-out 0s infinite normal none running goldFramePulse; }
@keyframes goldFramePulse { 
  0%, 100% { box-shadow: rgb(176, 138, 44) 0px 0px 0px 1px inset, rgba(216, 184, 106, 0.5) 0px 0px 0px 1px, rgba(216, 184, 106, 0.32) 0px 0px 20px, rgba(196, 158, 90, 0.18) 0px 0px 46px, rgba(120, 90, 20, 0.12) 0px 8px 34px; }
  50% { box-shadow: rgb(176, 138, 44) 0px 0px 0px 1px inset, rgba(230, 200, 130, 0.75) 0px 0px 0px 1px, rgba(222, 190, 110, 0.5) 0px 0px 32px, rgba(202, 166, 96, 0.3) 0px 0px 62px, rgba(120, 90, 20, 0.12) 0px 8px 34px; }
}
.oracle-card.r-S.anim { animation: cardInGold .9s var(--ease) both; }
@keyframes cardInGold { 
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  60% { transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.oracle-card.r-A { background: linear-gradient(145deg, rgb(252, 251, 248) 0%, rgb(243, 241, 237) 35%, rgb(229, 226, 220) 68%, rgb(210, 205, 210) 100%); border: 5px solid rgb(200, 200, 220); box-shadow: rgb(142, 142, 168) 0px 0px 0px 2px inset, rgba(220, 220, 235, 0.75) 0px 0px 0px 1px, rgba(180, 180, 210, 0.45) 0px 0px 26px, rgba(160, 160, 200, 0.28) 0px 0px 56px, rgba(0, 0, 0, 0.06) 0px 6px 32px; position: relative; animation: 3.4s ease-in-out 0s infinite normal none running silverFramePulse; }
@keyframes silverFramePulse { 
  0%, 100% { box-shadow: rgb(142, 142, 168) 0px 0px 0px 2px inset, rgba(220, 220, 235, 0.6) 0px 0px 0px 1px, rgba(180, 180, 210, 0.35) 0px 0px 22px, rgba(160, 160, 200, 0.2) 0px 0px 48px, rgba(0, 0, 0, 0.06) 0px 6px 32px; }
  50% { box-shadow: rgb(142, 142, 168) 0px 0px 0px 2px inset, rgba(235, 235, 248, 0.9) 0px 0px 0px 1px, rgba(200, 200, 225, 0.6) 0px 0px 38px, rgba(170, 170, 210, 0.4) 0px 0px 70px, rgba(0, 0, 0, 0.06) 0px 6px 32px; }
}
.oracle-card.r-B { background: linear-gradient(145deg, rgb(254, 252, 245) 0%, rgb(248, 244, 228) 100%); border-color: rgba(190, 170, 100, 0.45); }
.oracle-card.r-C { background: linear-gradient(145deg, rgb(242, 242, 242) 0%, rgb(228, 228, 228) 100%); border-color: rgba(150, 150, 150, 0.4); }
.oracle-card.r-D { background: linear-gradient(145deg, rgb(42, 42, 46) 0%, rgb(30, 30, 34) 50%, rgb(20, 20, 24) 100%); border-color: rgba(100, 100, 120, 0.5); box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 40px; }
.oracle-card.r-X { background: linear-gradient(145deg, rgb(5, 5, 8) 0%, rgb(10, 9, 21) 40%, rgb(18, 15, 34) 100%); border: 5px solid rgb(26, 22, 38); box-shadow: rgb(140, 122, 230) 0px 0px 0px 2px inset, rgba(140, 122, 230, 0.6) 0px 0px 0px 1px, rgba(130, 110, 230, 0.55) 0px 0px 34px, rgba(90, 78, 156, 0.45) 0px 0px 80px, rgba(0, 0, 0, 0.6) 0px 8px 48px; position: relative; animation: 3.8s ease-in-out 0s infinite normal none running darkFramePulse; }
@keyframes darkFramePulse { 
  0%, 100% { box-shadow: rgb(140, 122, 230) 0px 0px 0px 2px inset, rgba(140, 122, 230, 0.5) 0px 0px 0px 1px, rgba(130, 110, 230, 0.4) 0px 0px 30px, rgba(90, 78, 156, 0.32) 0px 0px 74px, rgba(0, 0, 0, 0.55) 0px 8px 48px; }
  50% { box-shadow: rgb(166, 150, 240) 0px 0px 0px 2px inset, rgba(170, 155, 255, 0.85) 0px 0px 0px 1px, rgba(160, 140, 255, 0.7) 0px 0px 56px, rgba(110, 96, 190, 0.55) 0px 0px 110px, rgba(0, 0, 0, 0.6) 0px 8px 48px; }
}
.oracle-card.r-X.anim { animation: cardInX 1s var(--ease) both; }
@keyframes cardInX { 
  0% { opacity: 0; transform: translateY(20px) rotateX(5deg); }
  55% { opacity: 0.85; transform: translateY(-4px) rotateX(-1deg); }
  100% { opacity: 1; transform: translateY(0px) rotateX(0deg); }
}
.oracle-card.r-S::after, .oracle-card.r-X::after { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; }
.oracle-card.r-S::after { background: radial-gradient(circle at 50% 39%, rgb(255, 255, 250) 0%, rgba(255, 247, 205, 0.62) 6%, rgba(255, 238, 170, 0.28) 14%, transparent 38%), repeating-conic-gradient(at 50% 39%, rgba(255, 246, 205, 0.48) 0deg, rgba(255, 246, 205, 0.48) 3deg, transparent 3deg, transparent 9deg, rgba(255, 246, 205, 0.3) 9deg, rgba(255, 246, 205, 0.3) 11deg, transparent 11deg, transparent 19deg); mask-image: radial-gradient(circle at 50% 39%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, transparent 68%); mix-blend-mode: screen; opacity: 1; filter: blur(7px); }
.oracle-card.r-X::after { background: radial-gradient(circle at 50% 39%, rgba(250, 248, 255, 0.55) 0%, rgba(224, 214, 255, 0.3) 6%, rgba(196, 182, 255, 0.12) 14%, transparent 36%), repeating-conic-gradient(at 50% 39%, rgba(228, 218, 255, 0.22) 0deg, rgba(228, 218, 255, 0.22) 3deg, transparent 3deg, transparent 10deg, rgba(228, 218, 255, 0.13) 10deg, rgba(228, 218, 255, 0.13) 12deg, transparent 12deg, transparent 21deg); mask-image: radial-gradient(circle at 50% 39%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 4%, transparent 60%); mix-blend-mode: screen; opacity: 0.65; filter: blur(8px); }
.weather-nuance-bar { text-align: center; padding: 8px 12px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--silver-lt); }
.oracle-card.r-S .weather-nuance-bar { border-color: rgba(218, 180, 60, 0.25); background: rgba(218, 180, 60, 0.04); }
.oracle-card.r-X .weather-nuance-bar { border-color: rgba(140, 128, 230, 0.25); background: rgba(140, 128, 230, 0.04); }
.wn-label { font-size: 0.58rem; letter-spacing: 0.48em; color: var(--ink-muted); text-transform: uppercase; display: block; margin-bottom: 5px; }
.oracle-card.r-X .wn-label { color: rgb(120, 112, 168); }
.wn-text { font-size: 0.82rem; font-weight: 300; letter-spacing: 0.2em; color: var(--ink-mid); display: block; line-height: 1.6; }
.oracle-card.r-S .wn-text { color: rgb(107, 78, 28); }
.oracle-card.r-X .wn-text { color: rgb(184, 178, 216); }
.wn-koyomi-line { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.wn-koyomi-label { font-size: 0.5rem; letter-spacing: 0.3em; color: var(--ink-muted); text-transform: uppercase; margin-right: 0.7em; }
.wn-koyomi-text { font-size: 0.7rem; font-weight: 300; letter-spacing: 0.08em; color: var(--ink-mid); line-height: 1.75; }
.oracle-card.r-S .wn-koyomi-line { border-top-color: rgba(218, 180, 60, 0.3); }
.oracle-card.r-S .wn-koyomi-label, .oracle-card.r-S .wn-koyomi-text { color: rgb(107, 78, 28); }
.oracle-card.r-SS .wn-koyomi-line { border-top-color: rgba(200, 160, 0, 0.35); }
.oracle-card.r-SS .wn-koyomi-label { color: rgb(106, 72, 0); }
.oracle-card.r-SS .wn-koyomi-text { color: rgb(58, 32, 0); }
.oracle-card.r-X .wn-koyomi-line { border-top-color: rgba(140, 128, 230, 0.3); }
.oracle-card.r-X .wn-koyomi-label { color: rgb(120, 112, 168); }
.oracle-card.r-X .wn-koyomi-text { color: rgb(184, 178, 216); }
.oracle-card.r-D .wn-koyomi-line { border-top-color: rgba(100, 100, 120, 0.3); }
.oracle-card.r-D .wn-koyomi-label { color: rgb(96, 96, 112); }
.oracle-card.r-D .wn-koyomi-text { color: rgb(160, 160, 176); }
.oracle-card.r-D .rank-badge { border-color: rgba(100, 100, 120, 0.4); }
.oracle-card.r-D .rank-letter { color: rgb(160, 160, 184); }
.oracle-card.r-D .rank-name-text { color: rgb(128, 128, 144); }
.oracle-card.r-D .oc-main, .oracle-card.r-D .oc-body { color: rgb(192, 192, 204); }
.oracle-card.r-D .oc-sub { color: rgb(128, 128, 144); }
.oracle-card.r-D .oc-hr { background: linear-gradient(90deg, transparent, rgba(120, 120, 140, 0.45), transparent); }
.oracle-card.r-D .lucky-section { border-color: rgba(100, 100, 120, 0.25); }
.oracle-card.r-D .lucky-head { color: rgb(128, 128, 144); }
.oracle-card.r-D .l-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(100, 100, 120, 0.2) rgba(100, 100, 120, 0.2) rgba(100, 100, 120, 0.2) rgba(100, 100, 120, 0.4); }
.oracle-card.r-D .l-cat { color: rgb(96, 96, 112); }
.oracle-card.r-D .l-val { color: rgb(160, 160, 176); }
.oracle-card.r-D .l-effect { color: rgb(160, 160, 176); }
.oracle-card.r-D .le-item { background: rgba(255, 255, 255, 0.03); border-color: rgba(100, 100, 120, 0.3); color: rgb(160, 160, 176); }
.oracle-card.r-D .le-cat { color: rgb(96, 96, 112); }
.oracle-card.r-D .le-bonus { color: rgb(120, 120, 160); background: rgba(100, 100, 160, 0.1); border-color: rgba(100, 100, 160, 0.3); }
.oracle-card.r-D .lucky-action-box { border-color: rgba(100, 100, 120, 0.4); background: rgba(255, 255, 255, 0.03); color: rgb(160, 160, 176); }
.oracle-card.r-D .action-label { color: rgb(96, 96, 112); }
.oracle-card.r-D .rank-score-num { color: rgb(136, 136, 160); }
.oracle-card.r-D .rank-score { color: rgb(96, 96, 112); }
.oracle-card.r-D .weather-nuance-bar { border-color: rgba(100, 100, 120, 0.25); background: rgba(255, 255, 255, 0.02); }
.oracle-card.r-D .wn-text { color: rgb(160, 160, 176); }
.oracle-card.r-D .btn-again { border-color: rgba(100, 100, 120, 0.4); color: rgb(128, 128, 144); }
.oracle-card.r-D .btn-again:hover { border-color: rgba(140, 140, 160, 0.8); color: rgb(192, 192, 204); }
.oracle-card.r-D .oc-greeting, .oracle-card.r-D .weekly-greeting, .oracle-card.r-D .kantei-sub, .oracle-card.r-D .weekly-sub, .oracle-card.r-D .share-note { color: rgb(160, 160, 176); }
.oracle-card.r-SS { background: linear-gradient(145deg, rgb(245, 232, 160) 0%, rgb(237, 208, 112) 15%, rgb(223, 184, 64) 32%, rgb(207, 160, 32) 50%, rgb(192, 144, 16) 68%, rgb(176, 120, 8) 84%, rgb(200, 152, 40) 100%); border: 5px solid rgb(154, 112, 0); box-shadow: rgb(120, 88, 0) 0px 0px 0px 2px inset, rgba(200, 150, 0, 0.35) 0px 0px 30px inset, rgba(200, 160, 20, 0.8) 0px 0px 0px 1px, rgba(190, 140, 0, 0.65) 0px 0px 24px, rgba(180, 130, 0, 0.48) 0px 0px 56px, rgba(160, 110, 0, 0.32) 0px 0px 100px, rgba(100, 70, 0, 0.22) 0px 8px 40px; position: relative; animation: 3s ease-in-out 0s infinite normal none running ssFramePulse; }
@keyframes ssFramePulse { 
  0%, 100% { box-shadow: rgb(120, 88, 0) 0px 0px 0px 2px inset, rgba(180, 130, 0, 0.28) 0px 0px 30px inset, rgba(190, 150, 10, 0.7) 0px 0px 0px 1px, rgba(180, 130, 0, 0.55) 0px 0px 22px, rgba(170, 120, 0, 0.38) 0px 0px 50px, rgba(150, 100, 0, 0.25) 0px 0px 90px, rgba(100, 70, 0, 0.15) 0px 8px 40px; }
  50% { box-shadow: rgb(154, 120, 0) 0px 0px 0px 2px inset, rgba(220, 170, 40, 0.42) 0px 0px 50px inset, rgba(220, 170, 20, 0.95) 0px 0px 0px 1px, rgba(200, 150, 10, 0.72) 0px 0px 40px, rgba(190, 140, 0, 0.56) 0px 0px 80px, rgba(170, 120, 0, 0.4) 0px 0px 140px, rgba(100, 70, 0, 0.18) 0px 8px 40px; }
}
.oracle-card.r-SS.anim { animation: cardInSS 1.1s var(--ease) both; }
@keyframes cardInSS { 
  0% { opacity: 0; transform: translateY(24px) scale(0.96); }
  58% { transform: translateY(-6px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.oracle-card.r-SS::after { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 39%, rgb(255, 255, 255) 0%, rgba(255, 252, 210, 0.85) 5%, rgba(255, 245, 160, 0.5) 11%, rgba(255, 230, 80, 0.2) 20%, transparent 40%), repeating-conic-gradient(at 50% 39%, rgba(255, 255, 200, 0.55) 0deg, rgba(255, 255, 200, 0.55) 2.5deg, transparent 2.5deg, transparent 8deg, rgba(255, 248, 180, 0.38) 8deg, rgba(255, 248, 180, 0.38) 10deg, transparent 10deg, transparent 17deg, rgba(255, 240, 120, 0.28) 17deg, rgba(255, 240, 120, 0.28) 19deg, transparent 19deg, transparent 26deg); mask-image: radial-gradient(circle at 50% 39%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 12%, transparent 70%); mix-blend-mode: screen; opacity: 1; filter: blur(6px); }
.oracle-card.r-SS .rank-badge { border-color: rgba(140, 100, 0, 0.5); background: rgba(180, 130, 0, 0.08); }
.oracle-card.r-SS .rank-letter { background: linear-gradient(135deg, rgb(122, 88, 0) 0%, rgb(196, 144, 0) 18%, rgb(255, 224, 96) 36%, rgb(255, 255, 255) 50%, rgb(255, 224, 96) 64%, rgb(196, 144, 0) 82%, rgb(122, 88, 0) 100%) 0% 0% / 200% 200% text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(255, 220, 0, 0.8) 0px 0px 8px) drop-shadow(rgba(180, 130, 0, 0.5) 0px 2px 4px) drop-shadow(rgba(255, 200, 0, 0.5) 0px 0px 20px); animation: 3s ease-in-out 0s infinite normal none running ssLetterGlow; }
@keyframes ssLetterGlow { 
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(rgba(255, 220, 0, 0.7) 0px 0px 8px) drop-shadow(rgba(180, 130, 0, 0.5) 0px 2px 4px); }
  50% { background-position: 100% 50%; filter: drop-shadow(rgb(255, 240, 80) 0px 0px 16px) drop-shadow(rgba(200, 150, 0, 0.6) 0px 2px 6px) drop-shadow(rgba(255, 220, 0, 0.7) 0px 0px 32px); }
}
.oracle-card.r-SS .rank-name-text { color: rgb(74, 48, 0); }
.oracle-card.r-SS .oc-main, .oracle-card.r-SS .oc-body { color: rgb(46, 26, 0); }
.oracle-card.r-SS .oc-sub { color: rgb(90, 56, 0); }
.oracle-card.r-SS .oc-hr { background: linear-gradient(90deg, transparent, rgba(200, 160, 0, 0.8), rgba(255, 240, 100, 0.6), rgba(200, 160, 0, 0.8), transparent); }
.oracle-card.r-SS .weather-nuance-bar { border-color: rgba(200, 160, 0, 0.3); background: rgba(255, 220, 0, 0.06); }
.oracle-card.r-SS .wn-label { color: rgb(106, 72, 0); }
.oracle-card.r-SS .wn-text { color: rgb(58, 32, 0); }
.oracle-card.r-SS .lucky-section { border-color: rgba(200, 160, 0, 0.3); }
.oracle-card.r-SS .lucky-head { color: rgb(90, 56, 0); }
.oracle-card.r-SS .l-item { background: rgba(255, 220, 0, 0.08); border-color: rgba(200, 160, 0, 0.28) rgba(200, 160, 0, 0.28) rgba(200, 160, 0, 0.28) rgba(200, 160, 0, 0.85); }
.oracle-card.r-SS .l-cat { color: rgb(106, 72, 0); }
.oracle-card.r-SS .l-val { color: rgb(58, 32, 0); }
.oracle-card.r-SS .l-effect { color: rgb(74, 48, 0); }
.oracle-card.r-SS .le-item { border-color: rgba(200, 160, 0, 0.5); background: rgba(255, 220, 0, 0.06); color: rgb(58, 32, 0); }
.oracle-card.r-SS .le-cat { color: rgb(106, 72, 0); }
.oracle-card.r-SS .action-label { color: rgb(106, 72, 0); }
.oracle-card.r-SS .lucky-action-box { border-color: rgba(200, 160, 0, 0.7); background: rgba(255, 220, 0, 0.07); color: rgb(58, 32, 0); }
.oracle-card.r-SS .rank-score-num { color: rgb(90, 56, 0); }
.oracle-card.r-SS .rank-score { color: rgb(122, 80, 0); }
.oracle-card.r-SS .btn-save { border-color: rgba(180, 130, 0, 0.7); color: rgb(74, 48, 0); }
.oracle-card.r-SS .btn-save:hover::after { background: rgba(160, 110, 0, 0.9); }
.oracle-card.r-SS .btn-again { border-color: rgba(180, 130, 0, 0.5); color: rgb(106, 72, 0); }
.oracle-card.r-SS .btn-again:hover { border-color: rgba(200, 150, 0, 0.9); color: rgb(58, 32, 0); }
.oracle-card.r-SS .sp { background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 224, 96) 35%, rgb(255, 192, 0) 70%, rgba(255, 180, 0, 0) 100%); box-shadow: rgba(255, 220, 0, 0.85) 0px 0px 8px 3px; }
.oracle-card.r-S .oc-main, .oracle-card.r-S .oc-body { color: rgb(92, 64, 21); }
.oracle-card.r-S .oc-sub { color: rgb(138, 109, 46); }
.oracle-card.r-S .wn-text { color: rgb(107, 78, 28); }
.oracle-card.r-S .l-val { color: rgb(107, 78, 28); }
.oracle-card.r-S .l-effect { color: rgb(107, 78, 28); }
.oracle-card.r-S .le-item { color: rgb(107, 78, 28); }
.oracle-card.r-S .action-label { color: rgb(138, 109, 46); }
.oracle-card.r-S .lucky-action-box { color: rgb(107, 78, 28); }
.oracle-card.r-S .ocBody { color: rgb(92, 64, 21); }
.oracle-card.r-A .rank-letter { background: linear-gradient(135deg, rgb(128, 96, 0) 0%, rgb(168, 128, 0) 40%, rgb(200, 160, 0) 60%, rgb(128, 96, 0) 100%) text; -webkit-text-fill-color: transparent; }
.oracle-card.r-A .oc-hr { background: linear-gradient(90deg, transparent, rgba(180, 140, 40, 0.5), transparent); }
.rank-badge { text-align: center; padding: 12px 0px 14px; margin-bottom: 14px; border-bottom: 1px solid var(--silver-lt); position: relative; }
.oracle-card.r-S .rank-badge { border-color: rgba(218, 180, 60, 0.3); }
.oracle-card.r-X .rank-badge { border-color: rgba(140, 128, 230, 0.3); }
.rank-letter { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: 0.1em; display: block; line-height: 1.2; }
.oracle-card.r-S .rank-letter { background: linear-gradient(135deg, rgb(156, 122, 30) 0%, rgb(196, 160, 48) 40%, rgb(232, 196, 103) 60%, rgb(156, 122, 30) 100%) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(160, 124, 30, 0.25) 0px 2px 4px); }
.oracle-card.r-A .rank-letter { background: linear-gradient(135deg, rgb(128, 128, 152) 0%, rgb(176, 176, 200) 40%, rgb(216, 216, 232) 60%, rgb(144, 144, 168) 100%) text; -webkit-text-fill-color: transparent; }
.oracle-card.r-B .rank-letter, .oracle-card.r-C .rank-letter, .oracle-card.r-D .rank-letter { color: var(--ink-mid); }
.oracle-card.r-X .rank-letter { background: linear-gradient(135deg, rgb(136, 120, 208) 0%, rgb(176, 160, 240) 40%, rgb(216, 208, 255) 60%, rgb(152, 136, 216) 100%) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(140, 120, 240, 0.5) 0px 2px 8px) drop-shadow(rgba(30, 20, 60, 0.65) 0px 1px 5px); }
.rank-name-text { font-size: 0.75rem; font-weight: 300; letter-spacing: 0.35em; display: block; margin-top: 4px; }
.oracle-card.r-S .rank-name-text { color: rgb(122, 92, 32); }
.oracle-card.r-A .rank-name-text { color: rgb(88, 88, 160); }
.oracle-card.r-B .rank-name-text, .oracle-card.r-C .rank-name-text, .oracle-card.r-D .rank-name-text { color: var(--ink-muted); }
.oracle-card.r-X .rank-name-text { color: rgb(144, 136, 200); text-shadow: rgba(25, 18, 55, 0.7) 0px 1px 6px; }
.ss-serial { text-align: center; font-size: 0.58rem; font-weight: 300; letter-spacing: 0.28em; color: rgb(138, 98, 0); margin: 2px 0px 12px; }
.oc-hr { width: 50px; height: 1px; background: linear-gradient(90deg,transparent,var(--silver),transparent); margin: 11px auto; }
.oracle-card.r-S .oc-hr { background: linear-gradient(90deg, transparent, rgba(218, 180, 60, 0.6), transparent); }
.oracle-card.r-X .oc-hr { background: linear-gradient(90deg, transparent, rgba(140, 128, 230, 0.5), transparent); }
.oc-main { font-size: clamp(0.84rem, 1.5vw, 1.06rem); font-weight: 400; letter-spacing: 0.1em; line-height: 1.9; text-align: center; color: var(--ink); }
.oc-sub { font-size: 0.74rem; font-weight: 200; letter-spacing: 0.18em; line-height: 2; text-align: center; color: var(--ink-muted); }
.oc-greeting, .weekly-greeting { font-size: 0.68rem; font-weight: 200; letter-spacing: 0.14em; line-height: 1.9; text-align: center; color: var(--ink-muted); margin: 0px 0px 10px; }
.weekly-greeting { margin: 0px 0px 12px; }
.oracle-card.r-X .oc-greeting, .oracle-card.r-X .weekly-greeting { color: rgb(142, 134, 188); }
.oc-body { font-size: 1rem; font-weight: 300; letter-spacing: 0.05em; line-height: 2; text-align: center; color: var(--ink-mid); }
.oracle-card.r-X .oc-main, .oracle-card.r-X .oc-body { color: rgb(200, 194, 236); }
.oracle-card.r-X .oc-sub { color: rgb(120, 112, 168); }
.lucky-section { margin-top: 26px; border-top: 1px solid var(--silver-lt); padding-top: 20px; position: relative; }
.oracle-card.r-S .lucky-section { border-color: rgba(218, 180, 60, 0.25); }
.oracle-card.r-X .lucky-section { border-color: rgba(140, 128, 230, 0.25); }
.lucky-head { font-size: 0.62rem; letter-spacing: 0.5em; color: var(--ink-muted); text-transform: uppercase; text-align: center; margin-bottom: 10px; }
.oracle-card.r-X .lucky-head { color: rgb(120, 112, 168); }
.lucky-grid { display: flex; flex-direction: column; gap: 10px; }
.l-item { padding: 10px 14px; background: rgba(0, 0, 0, 0.024); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 2px solid var(--gold-rim); }
.oracle-card.r-S .l-item { background: rgba(218, 180, 60, 0.06); border-color: rgba(218, 180, 60, 0.2) rgba(218, 180, 60, 0.2) rgba(218, 180, 60, 0.2) rgba(218, 180, 60, 0.75); }
.oracle-card.r-A .l-item { background: rgba(160, 160, 210, 0.05); border-color: rgba(160, 160, 210, 0.24) rgba(160, 160, 210, 0.24) rgba(160, 160, 210, 0.24) rgba(160, 160, 210, 0.55); }
.oracle-card.r-X .l-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(140, 128, 230, 0.2) rgba(140, 128, 230, 0.2) rgba(140, 128, 230, 0.2) rgba(140, 128, 230, 0.55); }
.l-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55em; margin-bottom: 5px; }
.l-cat { font-size: 0.58rem; letter-spacing: 0.32em; color: var(--ink-muted); text-transform: uppercase; }
.l-val { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.06em; color: var(--ink-mid); text-align: left; line-height: 1.5; }
.l-effect { font-size: 0.68rem; font-weight: 300; letter-spacing: 0.03em; line-height: 1.85; color: var(--ink-mid); margin: 0px; }
.oracle-card.r-X .l-cat { color: rgb(110, 104, 160); }
.oracle-card.r-X .l-val { color: rgb(184, 178, 216); }
.oracle-card.r-X .l-effect { color: rgb(176, 168, 216); }
.lucky-action-box { margin-top: 12px; padding: 14px 18px; border-left: 3px solid var(--silver); background: rgba(0, 0, 0, 0.02); font-size: 0.76rem; font-weight: 300; letter-spacing: 0.06em; line-height: 1.95; color: var(--ink-mid); }
.oracle-card.r-S .lucky-action-box { border-color: rgba(218, 180, 60, 0.6); background: rgba(218, 180, 60, 0.05); }
.oracle-card.r-A .lucky-action-box { border-color: rgba(160, 160, 210, 0.6); background: rgba(160, 160, 210, 0.05); }
.oracle-card.r-X .lucky-action-box { border-color: rgba(140, 128, 230, 0.6); background: rgba(140, 128, 230, 0.06); color: rgb(184, 178, 216); }
.action-label { font-size: 0.58rem; letter-spacing: 0.42em; color: var(--ink-muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
.oracle-card.r-X .action-label { color: rgb(120, 112, 168); }
.lucky-effects { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.le-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: rgba(0, 0, 0, 0.02); border-left: 2px solid var(--silver-lt); font-size: 0.66rem; font-weight: 300; letter-spacing: 0.05em; line-height: 1.85; color: var(--ink-mid); }
.oracle-card.r-S .le-item { border-color: rgba(218, 180, 60, 0.4); background: rgba(218, 180, 60, 0.04); }
.oracle-card.r-A .le-item { border-color: rgba(160, 160, 210, 0.4); background: rgba(160, 160, 210, 0.04); }
.oracle-card.r-X .le-item { border-color: rgba(140, 128, 230, 0.4); background: rgba(140, 128, 230, 0.05); color: rgb(176, 168, 216); }
.le-cat { font-size: 0.58rem; letter-spacing: 0.34em; color: var(--ink-muted); text-transform: uppercase; white-space: nowrap; padding-top: 2px; min-width: 3em; flex-shrink: 0; }
.oracle-card.r-X .le-cat { color: rgb(120, 112, 168); }
.kantei-section { margin-top: 26px; border-top: 1px solid var(--silver-lt); padding-top: 20px; position: relative; }
.oracle-card.r-S .kantei-section { border-color: rgba(218, 180, 60, 0.25); }
.oracle-card.r-X .kantei-section { border-color: rgba(140, 128, 230, 0.25); }
.kantei-sub { font-size: 0.68rem; font-weight: 200; letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-muted); text-align: center; margin: -4px 0px 12px; }
.oracle-card.r-X .kantei-sub { color: rgb(142, 134, 188); }
.kantei-list { display: flex; flex-direction: column; gap: 6px; }
.kantei-item { border: 1px solid var(--silver-lt); background: rgba(0, 0, 0, 0.016); }
.oracle-card.r-S .kantei-item { border-color: rgba(218, 180, 60, 0.3); background: rgba(218, 180, 60, 0.04); }
.oracle-card.r-A .kantei-item { border-color: rgba(160, 160, 210, 0.3); background: rgba(160, 160, 210, 0.03); }
.oracle-card.r-D .kantei-item { border-color: rgba(100, 100, 120, 0.3); background: rgba(255, 255, 255, 0.02); }
.oracle-card.r-X .kantei-item { border-color: rgba(140, 128, 230, 0.3); background: rgba(140, 128, 230, 0.05); }
.kantei-toggle { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: var(--font); text-align: left; }
.kantei-toggle-label { font-size: 0.64rem; letter-spacing: 0.32em; color: var(--ink-mid); }
.oracle-card.r-X .kantei-toggle-label { color: rgb(192, 184, 232); }
.kantei-toggle-mark { font-size: 0.6rem; color: var(--ink-muted); transition: transform .35s var(--ease); }
.kantei-item.open .kantei-toggle-mark { transform: rotate(45deg); }
.kantei-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.kantei-item.open .kantei-body-wrap { grid-template-rows: 1fr; }
.kantei-body-inner { overflow: hidden; }
.kantei-body { padding: 0px 14px 14px; font-size: 0.8rem; font-weight: 300; letter-spacing: 0.05em; line-height: 2.25; color: var(--ink-mid); }
.oracle-card.r-X .kantei-body { color: rgb(184, 178, 216); }
.oracle-card.r-D .kantei-toggle-label { color: rgb(184, 184, 200); }
.oracle-card.r-D .kantei-body { color: rgb(160, 160, 176); }
.weekly-section { margin-top: 26px; border-top: 1px solid var(--silver-lt); padding-top: 20px; position: relative; }
.oracle-card.r-S .weekly-section { border-color: rgba(218, 180, 60, 0.25); }
.oracle-card.r-X .weekly-section { border-color: rgba(140, 128, 230, 0.25); }
.weekly-sub { font-size: 0.68rem; font-weight: 200; letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-muted); text-align: center; margin: -4px 0px 14px; }
.oracle-card.r-X .weekly-sub { color: rgb(142, 134, 188); }
.weekly-chart-wrap { width: 100%; }
.weekly-chart-wrap svg { width: 100%; height: auto; display: block; }
.weekly-grid-line { stroke: var(--silver-lt); stroke-width: 0.6; stroke-dasharray: 2, 3; }
.weekly-axis-label { font-size: 8px; fill: var(--ink-muted); font-family: var(--font); }
.weekly-score-label { font-size: 8px; fill: var(--ink-mid); font-family: var(--font); }
.weekly-line { fill: none; stroke: var(--ink-mid); stroke-width: 1.4; }
.oracle-card.r-S .weekly-line { stroke: rgb(142, 106, 0); }
.oracle-card.r-X .weekly-line { stroke: rgb(140, 122, 230); }
.weekly-dot { fill: var(--surface); stroke: var(--ink-mid); stroke-width: 1.4; }
.oracle-card.r-S .weekly-dot { stroke: rgb(142, 106, 0); }
.oracle-card.r-X .weekly-dot { stroke: rgb(140, 122, 230); }
.weekly-today-dot { fill: var(--ink-mid); stroke: var(--ink-mid); stroke-width: 1.4; }
.oracle-card.r-S .weekly-today-dot { fill: rgb(142, 106, 0); stroke: rgb(142, 106, 0); }
.oracle-card.r-X .weekly-today-dot { fill: rgb(140, 122, 230); stroke: rgb(140, 122, 230); }
.share-section { margin-top: 26px; border-top: 1px solid var(--silver-lt); padding-top: 20px; position: relative; }
.lucky-section::after, .kantei-section::after, .weekly-section::after, .share-section::after, .result-rite-nav::after { content: ""; position: absolute; top: -3.5px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; border: 1px solid var(--gold-rim); background: var(--surface); }
.oracle-card.r-S .lucky-section::after, .oracle-card.r-S .kantei-section::after, .oracle-card.r-S .weekly-section::after, .oracle-card.r-S .share-section::after { border-color: rgba(218, 180, 60, 0.7); background: rgb(254, 251, 240); }
.oracle-card.r-SS .lucky-section::after, .oracle-card.r-SS .kantei-section::after, .oracle-card.r-SS .weekly-section::after, .oracle-card.r-SS .share-section::after { border-color: rgba(200, 150, 0, 0.8); background: rgb(255, 246, 216); }
.oracle-card.r-X .lucky-section::after, .oracle-card.r-X .kantei-section::after, .oracle-card.r-X .weekly-section::after, .oracle-card.r-X .share-section::after { border-color: rgba(140, 128, 230, 0.6); background: rgb(33, 28, 52); }
.oracle-card.r-D .lucky-section::after, .oracle-card.r-D .kantei-section::after, .oracle-card.r-D .weekly-section::after, .oracle-card.r-D .share-section::after { border-color: rgba(120, 120, 140, 0.5); background: rgb(30, 30, 34); }
.oracle-card.r-S .share-section { border-color: rgba(218, 180, 60, 0.25); }
.oracle-card.r-X .share-section { border-color: rgba(140, 128, 230, 0.25); }
.share-btn-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn-share { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 18px; background: var(--surface); border: 1px solid var(--silver-lt); color: var(--ink-mid); font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.18em; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s; }
.btn-share:hover { border-color: var(--gold-rim); box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset, rgba(215, 192, 120, 0.16) 0px 6px 18px; transform: translateY(-1px); }
.btn-share:active { transform: translateY(0px); }
.share-ico { font-size: 0.8rem; font-weight: 500; line-height: 1; }
.btn-share-x .share-ico { font-weight: 700; }
.btn-share-line .share-ico { color: rgb(6, 199, 85); font-weight: 700; }
.oracle-card.r-D .btn-share { background: rgba(255, 255, 255, 0.03); border-color: rgba(100, 100, 120, 0.35); color: rgb(184, 184, 200); }
.oracle-card.r-X .btn-share { background: rgba(140, 128, 230, 0.05); border-color: rgba(140, 128, 230, 0.3); color: rgb(184, 178, 216); }
.share-note { font-size: 0.54rem; font-weight: 200; letter-spacing: 0.08em; line-height: 1.8; color: var(--ink-muted); text-align: center; margin-top: 8px; min-height: 1.4em; }
.oracle-card.r-X .share-note { color: rgb(142, 134, 188); }
.btn-share-rank .share-ico { font-size: 0.9rem; font-weight: 400; }
.rank-streak-line { font-size: 0.56rem; font-weight: 200; letter-spacing: 0.1em; line-height: 1.8; color: var(--ink-muted); text-align: center; margin: -2px 0px 12px; }
.share-format-toggle { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.format-btn { min-height: 32px; padding: 5px 14px; background: transparent; border: 1px solid var(--silver-lt); color: var(--ink-muted); font-family: var(--font); font-size: 0.56rem; letter-spacing: 0.14em; cursor: pointer; border-radius: 2px; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.format-btn[aria-pressed="true"] { border-color: var(--gold-rim); color: var(--ink); background: var(--surface); }
.oracle-card.r-D .format-btn { border-color: rgba(100, 100, 120, 0.35); color: rgb(144, 144, 168); }
.oracle-card.r-D .format-btn[aria-pressed="true"] { color: rgb(232, 232, 240); background: rgba(255, 255, 255, 0.04); }
.oracle-card.r-X .format-btn { border-color: rgba(140, 128, 230, 0.3); color: rgb(142, 134, 188); }
.oracle-card.r-X .format-btn[aria-pressed="true"] { color: rgb(200, 194, 236); background: rgba(140, 128, 230, 0.06); }
.oracle-card.r-D .rank-streak-line { color: rgb(160, 160, 176); }
.oracle-card.r-X .rank-streak-line { color: rgb(142, 134, 188); }
.oracle-card.r-SS .rank-streak-line, .oracle-card.r-S .rank-streak-line { color: rgb(59, 59, 59); }
.rank-score { display: inline-block; font-size: 0.72rem; font-weight: 300; letter-spacing: 0.15em; color: var(--ink-muted); margin-left: 10px; vertical-align: middle; position: relative; top: -2px; }
.rank-score-num { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-mid); }
.oracle-card.r-S .rank-score-num { color: rgb(139, 105, 20); }
.oracle-card.r-A .rank-score-num { color: rgb(74, 74, 120); }
.oracle-card.r-X .rank-score-num { color: rgb(152, 136, 216); text-shadow: rgba(25, 18, 55, 0.7) 0px 1px 6px; }
.le-bonus { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; font-size: 0.58rem; font-weight: 400; letter-spacing: 0.05em; color: rgb(106, 154, 90); background: rgba(100, 160, 80, 0.1); border: 1px solid rgba(100, 160, 80, 0.3); padding: 2px 7px; border-radius: 2px; white-space: nowrap; }
.oracle-card.r-S .le-bonus { color: rgb(138, 95, 30); background: rgba(196, 158, 90, 0.14); border-color: rgba(196, 158, 90, 0.35); }
.oracle-card.r-A .le-bonus { color: rgb(74, 74, 120); background: rgba(160, 160, 210, 0.1); border-color: rgba(160, 160, 210, 0.3); }
.oracle-card.r-X .le-bonus { color: rgb(152, 136, 216); background: rgba(140, 128, 230, 0.1); border-color: rgba(140, 128, 230, 0.3); }
.btn-save { display: block; width: 100%; min-height: 44px; margin-top: 18px; padding: 12px; border: 1px solid var(--ink); background: transparent; font-family: var(--font); font-size: 0.66rem; letter-spacing: 0.42em; color: var(--ink); cursor: pointer; position: relative; overflow: hidden; transition: color 0.35s; }
.btn-save::after { content: ""; position: absolute; inset: 0px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease); }
.btn-save span { position: relative; z-index: 1; }
.btn-save:hover::after { transform: scaleX(1); }
.btn-save:hover span { color: rgb(255, 255, 255); }
.btn-save:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-save.saved { border-color: rgba(100, 160, 80, 0.6); color: rgb(90, 138, 74); }
.btn-save.saved::after { display: none; }
.oracle-card.r-S .btn-save { border-color: rgba(150, 110, 0, 0.6); color: rgb(106, 74, 0); }
.oracle-card.r-S .btn-save:hover::after { background: rgba(150, 110, 0, 0.9); }
.oracle-card.r-X .btn-save { border-color: rgba(140, 128, 230, 0.5); color: rgb(152, 144, 200); }
.oracle-card.r-X .btn-save:hover::after { background: rgba(140, 128, 230, 0.7); }
.oracle-card.r-D .btn-save { border-color: rgba(120, 120, 140, 0.5); color: rgb(144, 144, 168); }
.oracle-card.r-D .btn-save:hover::after { background: rgba(120, 120, 140, 0.7); }
.save-msg { font-size: 0.58rem; letter-spacing: 0.15em; line-height: 1.8; color: var(--ink-muted); text-align: center; margin-top: 8px; min-height: 1.5em; }
.oracle-card.r-D .save-msg { color: rgb(136, 136, 160); }
.oracle-card.r-X .save-msg { color: rgb(136, 128, 184); }
.save-msg-link { color: rgb(138, 100, 20); text-decoration: underline; text-underline-offset: 2px; }
.save-msg-link:hover { color: rgb(106, 74, 0); }
.oracle-card.r-D .save-msg-link { color: rgb(200, 200, 220); }
.oracle-card.r-D .save-msg-link:hover { color: rgb(232, 232, 244); }
.oracle-card.r-X .save-msg-link { color: rgb(184, 174, 236); }
.oracle-card.r-X .save-msg-link:hover { color: rgb(216, 208, 255); }
.btn-again { display: block; width: 100%; min-height: 44px; margin-top: 12px; padding: 9px; border: 1px solid var(--silver); background: transparent; font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.4em; color: var(--ink-muted); cursor: pointer; transition: border-color 0.3s, color 0.3s; }
.btn-again:hover { border-color: var(--ink); color: var(--ink); }
.oracle-card.r-X .btn-again { border-color: rgba(140, 128, 230, 0.4); color: rgb(152, 144, 200); }
.oracle-card.r-X .btn-again:hover { border-color: rgba(160, 150, 255, 0.8); color: rgb(192, 186, 238); }
.result-rite-nav { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--silver-lt); position: relative; }
.result-rite-nav .rite-nav-title { font-size: 0.56rem; letter-spacing: 0.5em; color: var(--ink-muted); text-transform: uppercase; text-align: center; display: block; margin-bottom: 14px; }
.result-rite-nav .rite-nav-list { display: flex; flex-direction: column; }
.result-rite-nav .rite-nav-list a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.66rem; font-weight: 300; letter-spacing: 0.05em; line-height: 1.7; color: var(--ink-mid); text-decoration: none; padding: 10px 4px; border-bottom: 1px solid var(--silver-lt); transition: color 0.3s; }
.result-rite-nav .rite-nav-list a:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.result-rite-nav .rite-nav-list a:hover { color: rgb(138, 100, 20); }
.result-rite-nav .rite-nav-list a::before { content: "▹"; color: var(--gold-rim); flex: 0 0 auto; }
.oracle-card.r-D .result-rite-nav { border-color: rgba(100, 100, 120, 0.35); }
.oracle-card.r-D .result-rite-nav .rite-nav-title { color: rgb(144, 144, 168); }
.oracle-card.r-D .result-rite-nav .rite-nav-list a { color: rgb(184, 184, 200); border-color: rgba(100, 100, 120, 0.3); }
.oracle-card.r-D .result-rite-nav .rite-nav-list a:hover { color: rgb(224, 224, 238); }
.oracle-card.r-X .result-rite-nav { border-color: rgba(140, 128, 230, 0.3); }
.oracle-card.r-X .result-rite-nav .rite-nav-title { color: rgb(152, 144, 200); }
.oracle-card.r-X .result-rite-nav .rite-nav-list a { color: rgb(184, 178, 216); border-color: rgba(140, 128, 230, 0.25); }
.oracle-card.r-X .result-rite-nav .rite-nav-list a:hover { color: rgb(216, 208, 255); }
.card-watermark { position: absolute; inset: 0px; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-position: center 30%; background-size: 100%; opacity: 0; mask-image: radial-gradient(62% 70% at center 33%, rgb(0, 0, 0) 0%, transparent 74%); }
.oracle-card > :not(.card-watermark) { position: relative; z-index: 1; }
.sparkle-container { position: absolute; inset: 0px; pointer-events: none; overflow: hidden; z-index: 0; }
.sp { position: absolute; width: 8px; height: 8px; opacity: 0; background: currentcolor; clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%); animation: 3s ease-in-out 0s infinite normal none running spTwinkle; }
.sp::before { content: ""; position: absolute; inset: -7px; background: radial-gradient(circle, currentcolor 0%, transparent 72%); opacity: 0.6; }
@keyframes spTwinkle { 
  0% { opacity: 0; transform: translateY(0px) scale(0.3) rotate(0deg); }
  20% { opacity: 1; transform: translateY(-3px) scale(1.05) rotate(40deg); }
  50% { opacity: 0.45; transform: translateY(-7px) scale(0.65) rotate(90deg); }
  80% { opacity: 1; transform: translateY(-11px) scale(1.1) rotate(140deg); }
  100% { opacity: 0; transform: translateY(-15px) scale(0.3) rotate(180deg); }
}
.oracle-card.r-S .sp { color: rgb(240, 194, 57); }
.oracle-card.r-A .sp { color: rgba(180, 180, 220, 0.9); }
.oracle-card.r-X .sp { color: rgba(180, 160, 255, 0.9); }
.fx { position: fixed; inset: 0px; z-index: 600; pointer-events: none; display: none; }
.fx.fire { display: block; }
#fxBurst.fire { animation: burst 1.9s var(--ease) forwards; }
@keyframes burst { 
  0% { background: radial-gradient(50% 50%, rgba(255, 248, 210, 0) 0%, transparent 70%); }
  14% { background: radial-gradient(120% 120%, rgba(255, 248, 210, 0.9) 0%, rgba(252, 232, 140, 0.4) 38%, transparent 68%); }
  55% { background: radial-gradient(120% 120%, rgba(255, 248, 210, 0.18) 0%, transparent 60%); }
  100% { background: radial-gradient(50% 50%, rgba(255, 248, 210, 0) 0%, transparent 70%); }
}
#fxShimmer { overflow: hidden; }
#fxShimmer.fire::before, #fxShimmer.fire::after { content: ""; position: absolute; left: -50%; width: 200%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 238, 140, 0.96), transparent); animation: 1.5s ease-out 0s 1 normal forwards running shimMove; }
#fxShimmer.fire::before { top: 36%; animation-delay: 0.06s; }
#fxShimmer.fire::after { top: 64%; animation-delay: 0.22s; }
@keyframes shimMove { 
  0% { transform: translateX(-30%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}
#fxRift.fire { animation: rift 2.3s var(--ease) forwards; }
@keyframes rift { 
  0% { background: transparent; }
  9% { background: rgba(6, 4, 14, 0.93); }
  28% { background: rgba(6, 4, 14, 0.28); }
  58% { background: rgba(34, 28, 60, 0.07); }
  100% { background: transparent; }
}
#fxRiftShim { overflow: hidden; }
#fxRiftShim.fire::before, #fxRiftShim.fire::after { content: ""; position: absolute; left: -50%; width: 200%; height: 1px; background: linear-gradient(90deg, transparent, rgba(178, 165, 255, 0.98), transparent); animation: 2s ease-out 0s 1 normal forwards running shimMove; }
#fxRiftShim.fire::before { top: 40%; animation-delay: 0.22s; }
#fxRiftShim.fire::after { top: 60%; animation-delay: 0.4s; }
.disclaimer { background: var(--bg-alt); border-top: 1px solid var(--silver-lt); padding: 32px 48px; text-align: center; }
.disclaimer-title { font-size: 0.55rem; letter-spacing: 0.55em; color: var(--ink-muted); text-transform: uppercase; display: block; margin-bottom: 14px; }
.disclaimer-body { font-size: 0.62rem; font-weight: 300; letter-spacing: 0.08em; line-height: 2.2; color: var(--ink-muted); max-width: 680px; margin: 0px auto 12px; }
.disclaimer-note { font-size: 0.55rem; letter-spacing: 0.1em; line-height: 2; color: var(--ink-muted); max-width: 680px; margin: 0px auto; }
footer { padding: 18px 48px; border-top: 1px solid var(--silver-lt); display: flex; align-items: center; justify-content: space-between; background: var(--bg); }
.f-name { font-size: 0.6rem; letter-spacing: 0.4em; color: var(--ink-muted); }
.f-copy { font-size: 0.56rem; letter-spacing: 0.2em; color: var(--ink-muted); }
@media (max-width: 768px){.input-panel { padding: 32px 20px 28px; }.field-row, .field-row3 { grid-template-columns: 1fr; }.oracle-card { padding: 32px 20px 28px; }footer { flex-direction: column; gap: 10px; text-align: center; }.le-item { flex-direction: column; gap: 3px; }.le-cat { white-space: normal; letter-spacing: 0.2em; min-width: auto; padding-top: 0px; font-size: 0.44rem; }.l-val { font-size: 0.72rem; letter-spacing: 0.04em; }}
@media (max-width: 480px){.oracle-card.r-S.reveal-play .tier-ring.ring1 { animation-duration: 1.05s; }.oracle-card.r-SS.reveal-play .tier-ring.ring1 { animation-duration: 1.25s; }.oracle-card.r-SS.reveal-play .tier-ring.ring2 { animation-duration: 1.25s; }.oracle-card.r-X.reveal-play .tier-ring.ring1 { animation-duration: 1.2s; }.oracle-card.r-SS.reveal-play .rank-letter { animation-duration: var(--reveal-ink-dur),1.2s; }.oracle-card.r-X.reveal-play .rank-letter { animation-duration: var(--reveal-ink-dur),1.3s; }.lucky-section, .kantei-section, .weekly-section, .share-section { margin-top: 20px; padding-top: 16px; }}
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 56px; left: 0px; right: 0px; z-index: 380; background: linear-gradient(rgba(247, 246, 244, 0.996) 0%, rgba(233, 232, 228, 0.996) 100%); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(215, 192, 120, 0.42); box-shadow: rgba(60, 50, 20, 0.13) 0px 10px 30px; display: flex; flex-direction: column; gap: 0px; transform: translateY(-110%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; pointer-events: none; }
.mobile-menu.open { transform: translateY(0px); visibility: visible; pointer-events: auto; }
.mobile-menu a { display: block; padding: 17px 28px; font-size: 0.78rem; letter-spacing: 0.42em; color: rgb(42, 42, 42); text-decoration: none; border-bottom: 1px solid rgba(168, 168, 168, 0.32); transition: color 0.2s, background 0.2s; }
.mobile-menu a:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.mobile-menu a:hover, .mobile-menu a:active { color: rgb(111, 90, 22); background: rgba(215, 192, 120, 0.14); }
@media (prefers-reduced-motion: reduce){*, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }}
.rite-veil { position: fixed; inset: 0px; z-index: 640; display: none; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; isolation: isolate; }
.rite-veil.active { display: flex; pointer-events: auto; }
html.m-rite-active #tenkeiPwaBanner { visibility: hidden; }
.rv-bg { position: absolute; inset: 0px; opacity: 0; background-color: rgb(9, 9, 14); transition: opacity .4s var(--rite-ease-soft); }
.rite-veil.p-veil .rv-bg, .rite-veil.p-weave .rv-bg, .rite-veil.p-knot .rv-bg, .rite-veil.p-oracle .rv-bg { opacity: 1; background-color: rgb(9, 9, 14); background-image: radial-gradient(ellipse farthest-corner at 50% 76%,rgba(30,26,20,.97) 0%,rgba(var(--rite-night),.99) 45%,rgb(9,9,14) 100%); }
.rite-veil.p-dawn .rv-bg { opacity: 0; transition: opacity .58s var(--rite-ease-soft); }
.rite-sky { position: absolute; inset: 0px; overflow: hidden; }
.rv-star { position: absolute; border-radius: 50%; background: rgb(244, 239, 221); opacity: 0; box-shadow: rgba(244, 239, 221, 0.55) 0px 0px 3px 1px; }
.rite-veil.p-veil .rv-star, .rite-veil.p-weave .rv-star, .rite-veil.p-knot .rv-star, .rite-veil.p-oracle .rv-star { animation: 4s ease-in-out 0s infinite normal none running riteStarTwinkle; }
.rite-veil.p-dawn .rv-star { opacity: 0; transition: opacity .58s var(--rite-ease-soft); }
@keyframes riteStarTwinkle { 
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.6; }
}
.rv-moon { position: absolute; top: 13%; right: 15%; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(244, 239, 221, 0.95), rgba(244, 239, 221, 0.5) 55%, rgba(244, 239, 221, 0) 78%); box-shadow: inset 9px -3px 0 0 rgba(var(--rite-night),.94); opacity: 0; transform: scale(0.72); }
.rite-veil.p-veil .rv-moon, .rite-veil.p-weave .rv-moon, .rite-veil.p-knot .rv-moon, .rite-veil.p-oracle .rv-moon { opacity: 0.85; transform: scale(1); transition: opacity .85s var(--rite-ease-soft),transform .85s var(--rite-ease-soft); }
.rite-veil.p-dawn .rv-moon { opacity: 0; transform: translateY(-12px) scale(0.85); transition: opacity .58s,transform .58s var(--rite-ease-soft); }
.rv-lantern { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%) scale(0.4); opacity: 0; pointer-events: none; }
.rv-lantern .core { position: absolute; inset: 0px; border-radius: 50%; background: radial-gradient(circle, rgb(255, 233, 176) 0%, rgba(233, 183, 90, 0.7) 45%, rgba(233, 183, 90, 0) 76%); }
.rite-veil.p-veil .rv-lantern, .rite-veil.p-weave .rv-lantern, .rite-veil.p-knot .rv-lantern, .rite-veil.p-oracle .rv-lantern { opacity: 1; transform: translateX(-50%) scale(1); transition: opacity .6s var(--rite-ease-soft),transform .6s var(--rite-ease-soft); }
.rite-veil.p-weave .rv-lantern.near { animation: 3s ease-in-out 0s infinite normal none running riteLanternFlicker; }
@keyframes riteLanternFlicker { 
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}
.rite-veil.p-dawn .rv-lantern { opacity: 0; transition: opacity .58s var(--rite-ease-soft); }
.rite-veil.p-oracle.rank-SS .rv-lantern .core { background: radial-gradient(circle, rgb(255, 243, 200) 0%, rgba(255, 196, 20, 0.85) 45%, rgba(255, 196, 20, 0) 78%); }
.rite-veil.p-oracle.rank-X .rv-lantern .core { background: radial-gradient(circle, rgb(216, 205, 245) 0%, rgba(140, 120, 220, 0.7) 45%, rgba(140, 120, 220, 0) 78%); }
.rite-threads { position: absolute; inset: 0px; pointer-events: none; }
.rv-thread { position: absolute; left: 50%; bottom: 0px; width: 1.6px; border-radius: 2px; opacity: 0; transform-origin: center bottom; background: linear-gradient(to top, rgba(233, 183, 90, 0) 0%, rgba(233, 183, 90, 0.5) 40%, rgba(255, 236, 190, 0.82) 100%); }
.rite-veil.p-weave .rv-thread { opacity: 0.85; animation: riteThreadRise 2.6s var(--rite-ease-soft) infinite; }
.rite-veil.p-knot .rv-thread, .rite-veil.p-oracle .rv-thread { opacity: 0.4; transition: opacity 0.3s; }
.rite-veil.p-dawn .rv-thread { opacity: 0; transition: opacity 0.58s; }
@keyframes riteThreadRise { 
  0% { transform: scaleY(0.72); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.72); }
}
.rite-presence { position: absolute; top: 12%; left: 50%; width: 130px; height: 130px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 225, 170, 0.5) 0%, rgba(255, 225, 170, 0.13) 45%, rgba(255, 225, 170, 0) 72%); mask-image: radial-gradient(circle, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 74%); opacity: 0; filter: blur(2px); }
.rite-veil.p-weave .rite-presence { opacity: 0.55; transition: opacity 2.1s var(--rite-ease-soft); }
.rite-veil.p-knot .rite-presence, .rite-veil.p-oracle .rite-presence { opacity: 0.72; }
.rite-veil.p-oracle .rite-presence { transition: opacity 0.4s; }
.rite-veil.p-dawn .rite-presence { opacity: 0; transition: opacity 0.58s; }
.rite-presence.has-goddess::before { content: ""; position: absolute; inset: 0px; border-radius: 50%; background-image: url("../images/goddess.webp"); background-size: 150%; background-position: center 46%; background-repeat: no-repeat; mix-blend-mode: screen; mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85) 12%, rgba(0, 0, 0, 0) 58%); filter: blur(9px) saturate(0.7); opacity: 0.18; pointer-events: none; }
.rite-veil.p-oracle .rite-presence { animation: ritePresenceOraclePulse .4s var(--rite-ease-soft) 1; }
@keyframes ritePresenceOraclePulse { 
  0% { opacity: 0.72; }
  45% { opacity: 0.76; }
  100% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce){.rite-presence.has-goddess::before, .rite-veil.p-oracle .rite-presence { animation: auto ease 0s 1 normal none running none !important; }}
.rite-knot { position: absolute; top: 24%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%) scale(0.227); border-radius: 50%; opacity: 0; pointer-events: none; }
.rv-ring { position: absolute; inset: 0px; border-radius: 50%; border: 1px solid rgba(255, 236, 190, 0.75); }
.rite-veil.p-knot .rite-knot { opacity: 1; animation: riteKnotClose .4s var(--rite-ease-soft) forwards; }
@keyframes riteKnotClose { 
  0% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.rite-veil.p-oracle .rite-knot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rite-veil.p-oracle.rank-SS .rv-ring { border-color: rgba(255, 208, 60, 0.9); box-shadow: rgba(255, 196, 0, 0.55) 0px 0px 30px 10px; animation: riteBloom .5s var(--rite-ease-soft) both; }
.rite-veil.p-oracle.rank-S .rv-ring { border-color: rgba(218, 180, 60, 0.85); box-shadow: rgba(218, 180, 60, 0.4) 0px 0px 22px 6px; animation: riteBloom .5s var(--rite-ease-soft) both; }
.rite-veil.p-oracle.rank-A .rv-ring { border-color: rgba(120, 120, 190, 0.8); box-shadow: rgba(88, 88, 160, 0.35) 0px 0px 18px 5px; animation: riteBloom .5s var(--rite-ease-soft) both; }
.rite-veil.p-oracle.rank-B .rv-ring, .rite-veil.p-oracle.rank-C .rv-ring, .rite-veil.p-oracle.rank-D .rv-ring { border-color: rgba(224, 214, 190, 0.7); box-shadow: rgba(224, 214, 190, 0.25) 0px 0px 14px 3px; animation: riteBloom .5s var(--rite-ease-soft) both; }
.rite-veil.p-oracle.rank-X .rv-ring { border-color: rgba(150, 138, 230, 0.85); box-shadow: rgba(120, 108, 210, 0.4) 0px 0px 20px 6px; animation: riteBloomDim .5s var(--rite-ease-soft) both; }
@keyframes riteBloom { 
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes riteBloomDim { 
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.rite-veil.p-dawn .rite-knot { opacity: 0; transition: opacity 0.58s; }
.rite-veil.p-oracle.rank-SS .rv-bg::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(120% 65% at 50% 100%, rgba(255, 196, 60, 0.55) 0%, rgba(255, 170, 40, 0.22) 38%, rgba(255, 170, 40, 0) 70%); opacity: 0; animation: riteSSDawnWarm 1.4s var(--rite-ease-soft) forwards; mix-blend-mode: screen; }
@keyframes riteSSDawnWarm { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.rite-veil.p-oracle.rank-S .rv-ring::after { content: ""; position: absolute; top: -3px; left: 19px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, rgb(255, 250, 234) 0%, rgb(255, 233, 174) 45%, rgba(255, 225, 140, 0) 78%); box-shadow: rgba(255, 225, 140, 0.85) 0px 0px 7px 2px; transform-origin: 3px 25px; opacity: 0; animation: 1s linear 0s 1 normal none running riteSRingSweep; }
@keyframes riteSRingSweep { 
  0% { opacity: 0; transform: rotate(0deg); }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg); }
}
.rite-veil.p-oracle.rank-A .rite-knot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%) scale(0.55); border-radius: 50%; background: radial-gradient(circle, rgba(160, 160, 220, 0) 30%, rgba(140, 138, 205, 0.16) 45%, rgba(120, 120, 190, 0.22) 58%, rgba(160, 160, 220, 0.08) 68%, rgba(160, 160, 220, 0) 76%); opacity: 0; pointer-events: none; animation: riteAHalo .8s var(--rite-ease-soft) both; }
@keyframes riteAHalo { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  45% { opacity: 1; }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}
.rite-veil.p-oracle.rank-B .rv-star, .rite-veil.p-oracle.rank-C .rv-star, .rite-veil.p-oracle.rank-D .rv-star { animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: 0s !important; }
@keyframes riteBCDStarWaken { 
  0% { opacity: 0.14; }
  42% { opacity: 0.5; }
  100% { opacity: 0.14; }
}
.rite-veil.p-oracle.rank-X .rv-bg::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(120% 90%, rgba(6, 5, 10, 0) 30%, rgba(6, 5, 10, 0.55) 100%); opacity: 0; animation: riteXDeepen 1.2s var(--rite-ease-soft) forwards; }
@keyframes riteXDeepen { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.rite-veil.p-oracle.rank-X .rite-sky::after { content: ""; position: absolute; top: -6%; left: 63%; width: 2px; height: 34%; background: linear-gradient(rgba(150, 138, 230, 0) 0%, rgba(150, 138, 230, 0.7) 45%, rgba(180, 168, 255, 0.9) 72%, rgba(150, 138, 230, 0) 100%); opacity: 0; transform: translateY(-30%); animation: riteXStreakFall 1.2s var(--rite-ease-soft) forwards; pointer-events: none; }
@keyframes riteXStreakFall { 
  0% { opacity: 0; transform: translateY(-30%); }
  12% { opacity: 0.85; }
  78% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(230%); }
}
.rite-veil.p-oracle.rank-X .rv-star { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){.rv-bg::after, .rv-ring::after, .rite-knot::before, .rite-sky::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }}
#riteSparkleLayer { position: absolute; inset: 0px; pointer-events: none; overflow: hidden; }
.rite-word { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); width: 82%; max-width: 420px; text-align: center; font-family: var(--font); font-size: 0.82rem; letter-spacing: 0.14em; color: rgb(252, 239, 217); opacity: 0; transition: opacity .5s var(--rite-ease-soft); margin: 0px; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 8px; }
.rite-word.show { opacity: 0.92; }
.rite-skip { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); z-index: 641; background: transparent; color: rgba(252, 239, 217, 0.7); border: 1px solid rgba(252, 239, 217, 0.32); border-radius: 20px; padding: 10px 22px; font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.3em; opacity: 0; pointer-events: none; transition: opacity 0.4s, border-color 0.2s, color 0.2s; cursor: pointer; min-height: 44px; min-width: 44px; }
.rite-skip.show { opacity: 1; pointer-events: auto; }
.rite-skip:hover { border-color: rgba(252, 239, 217, 0.7); color: rgb(252, 239, 217); }
.rite-skip:focus-visible { outline: 2px solid var(--gold-rim); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){.rv-star, .rv-lantern, .rv-thread, .rv-moon, .rite-presence { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }}
@media (max-width: 480px){.rite-presence { width: 100px; height: 100px; }.rv-moon { width: 24px; height: 24px; }}
.rank-score-num { font-variant-numeric: tabular-nums; }
.rite-score-thread { position: relative; display: block; width: 64px; height: 2px; margin: 6px auto 0px; background: rgba(180, 180, 180, 0.25); border-radius: 2px; overflow: hidden; }
.rite-score-thread .fill { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 0%; background: linear-gradient(90deg,rgba(215,192,120,.4),var(--gold-rim)); border-radius: 2px; }
.oracle-card.r-SS .rite-score-thread .fill { background: linear-gradient(90deg, rgba(255, 208, 60, 0.6), rgb(255, 192, 0)); }
.oracle-card.r-X .rite-score-thread .fill { background: linear-gradient(90deg, rgba(140, 128, 230, 0.5), rgba(140, 128, 230, 0.85)); }
.oracle-card.r-D .rite-score-thread { background: rgba(120, 120, 140, 0.25); }
@keyframes riteScorePulse { 
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.rank-score-num.rite-score-pulse { display: inline-block; animation: riteScorePulse .24s var(--ease-soft,ease-out) 1; }
.m-ink-fade { opacity: 0; transition: opacity .5s var(--ease-soft,ease-out); }
.m-ink-fade.m-ink-done { opacity: 1; }
nav a { white-space: nowrap; }
@media (max-width: 899px){nav { display: none; }}
@media (min-width: 900px){.hamburger { display: none !important; }header { padding: 14px 20px; }nav { display: flex; flex-wrap: nowrap; gap: 14px; }nav a, nav .nav-drop-btn { letter-spacing: 0.1em; font-size: 0.585rem; }}
@media (min-width: 1200px){header { padding: 15px 32px; }nav { gap: 20px; }nav a, nav .nav-drop-btn { letter-spacing: 0.18em; font-size: 0.61rem; }}
@media (min-width: 1440px){header { padding: 15px 48px; }nav { gap: 28px; }nav a, nav .nav-drop-btn { letter-spacing: 0.26em; font-size: 0.64rem; }}
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 0.5em; margin: 0px; padding: 0px; background: none; border: 0px; border-radius: 0px; cursor: pointer; appearance: none; font-family: inherit; font-weight: inherit; line-height: inherit; font-size: 0.62rem; letter-spacing: 0.3em; color: rgb(59, 59, 59); white-space: nowrap; }
.nav-drop-btn:hover, .nav-drop.open > .nav-drop-btn { color: rgb(111, 90, 22); }
.nav-drop-caret { position: relative; display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; font-size: 0px; line-height: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-drop-caret::before { content: ""; position: absolute; left: 1px; top: 0px; width: 5px; height: 5px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); opacity: 0.72; }
.nav-drop.open > .nav-drop-btn .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-panel { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%) translateY(-7px); min-width: 212px; max-width: calc(-32px + 100vw); padding: 2px 0px 0px; z-index: 12; background: linear-gradient(rgb(247, 246, 244) 0%, rgb(237, 236, 232) 100%); border: 1px solid rgba(215, 192, 120, 0.42); box-shadow: rgba(60, 50, 20, 0.16) 0px 14px 34px, rgba(255, 255, 255, 0.72) 0px 1px 0px inset; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.26s, transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), visibility linear 0.26s; }
.nav-drop.open > .nav-drop-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0px); transition-delay: 0s; }
.nav-drop-panel::before { content: ""; position: absolute; left: 0px; right: 0px; top: -16px; height: 16px; }
.nav-drop-panel a { display: block; padding: 11px 22px; font-size: 0.6rem; letter-spacing: 0.26em; line-height: 1.5; color: rgb(42, 42, 42); text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(168, 168, 168, 0.26); transition: color 0.2s, background 0.2s; }
.nav-drop-panel a:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.nav-drop-panel a:hover, .nav-drop-panel a:focus-visible { color: rgb(111, 90, 22); background: rgba(215, 192, 120, 0.13); }
.nav-drop-note { margin: 0px; padding: 10px 22px 12px; font-size: 0.55rem; letter-spacing: 0.13em; line-height: 1.85; color: rgb(79, 79, 79); border-top: 1px solid rgba(215, 192, 120, 0.42); background: rgba(215, 192, 120, 0.05); }
.mobile-menu { max-height: calc(-56px + 100vh); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu a { position: relative; }
.mm-group { display: block; padding: 16px 28px 9px; font-size: 0.6rem; letter-spacing: 0.42em; color: rgb(111, 90, 22); border-top: 1px solid rgba(215, 192, 120, 0.42); border-bottom: 1px solid rgba(168, 168, 168, 0.24); background: rgba(215, 192, 120, 0.07); }
.mobile-menu .mm-group ~ a { padding-left: 46px; color: rgb(59, 59, 59); }
.mobile-menu .mm-group ~ a::before { content: ""; position: absolute; left: 28px; top: 50%; width: 9px; height: 1px; background: rgba(215, 192, 120, 0.75); transform: translateY(-50%); }
.mm-note { margin: 0px; padding: 12px 28px 13px; font-size: 0.62rem; letter-spacing: 0.13em; line-height: 1.8; color: rgb(79, 79, 79); background: rgba(215, 192, 120, 0.05); border-bottom: 1px solid rgba(168, 168, 168, 0.32); }
.mobile-menu .mm-note ~ a { padding-left: 28px; color: rgb(42, 42, 42); }
.mobile-menu .mm-note ~ a::before { content: none; }
footer { flex-wrap: wrap; }
footer > .f-copy:first-child { text-align: center; font-size: 0.58rem; letter-spacing: 0.24em; line-height: 2; color: var(--ink-mid); }
footer > .f-copy:first-child a { color: inherit; }
footer > .f-copy:first-child a:hover { color: rgb(111, 90, 22); }
@media (min-width: 769px){footer > .f-copy:first-child { flex: 0 0 100%; padding-bottom: 13px; margin-bottom: 5px; border-bottom: 1px solid var(--gold-rim); }}
@media (prefers-reduced-motion: reduce){.nav-drop-panel, .nav-drop-caret { transition: none; }}
.kantei-summary-theme { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--gold-deep); margin: 0px 0px 8px; }
.kantei-summary-line { font-size: 0.78rem; font-weight: 300; letter-spacing: 0.04em; line-height: 2; color: var(--ink-mid); margin: 0px; }
.kantei-summary-link, .weekly-summary-link { display: inline-block; margin-top: 12px; font-size: 0.64rem; letter-spacing: 0.1em; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-rim); padding-bottom: 2px; }
.kantei-summary-link:hover, .kantei-summary-link:focus-visible, .weekly-summary-link:hover, .weekly-summary-link:focus-visible { color: var(--ink); }
.hx-night-invite { background: rgb(20, 22, 27); border: 1px solid rgba(215, 192, 120, 0.32); border-radius: 0px; padding: 24px; margin-top: 20px; max-height: 120px; text-align: center; }
.hx-night-invite p { color: rgb(233, 230, 222); font-size: 0.9375rem; margin: 0px 0px 10px; }
.hx-night-invite a { color: rgb(215, 192, 120); text-decoration: none; letter-spacing: 0.05em; }
.hx-night-invite a:hover, .hx-night-invite a:focus-visible { text-decoration: underline; }
.oc-scene-band { position: relative; overflow: hidden; height: 150px; margin: -36px -44px 22px; background-size: cover; background-position: center 42%; background-repeat: no-repeat; background-color: var(--bg-alt); }
.oc-scene-band::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,0) 52%, var(--surface) 100%); }
.oracle-card.r-S .oc-scene-band::after, .oracle-card.r-SS .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 46%, rgb(251, 244, 222) 100%); }
.oracle-card.r-A .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 48%, rgb(252, 251, 248) 100%); }
.oracle-card.r-B .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(254, 252, 245) 100%); }
.oracle-card.r-C .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(242, 242, 242) 100%); }
.oracle-card.r-D .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgb(42, 42, 46) 100%); }
.oracle-card.r-X .oc-scene-band::after { background: linear-gradient(rgba(0, 0, 0, 0) 36%, rgb(5, 5, 8) 100%); }
@media (max-width: 520px){.oc-scene-band { height: 112px; margin: -32px -20px 18px; }}
.oc-scene-band::before { content: ""; position: absolute; inset: 0px; pointer-events: none; opacity: 0; z-index: 1; }
.oracle-card.r-SS.reveal-play .oc-scene-band::before { background: radial-gradient(120% 90% at 50% 30%, rgba(255, 214, 120, 0.85) 0%, rgba(255, 190, 60, 0.4) 30%, rgba(255, 180, 40, 0) 68%); mix-blend-mode: screen; animation: sceneBandDawnSweep 1.7s var(--ease-soft,ease-out) .5s 1 both; }
.oracle-card.r-S.reveal-play .oc-scene-band::before { background: radial-gradient(110% 85% at 50% 30%, rgba(255, 236, 190, 0.65) 0%, rgba(230, 196, 110, 0.28) 34%, rgba(230, 196, 110, 0) 66%); mix-blend-mode: screen; animation: sceneBandDawnSweep 1.5s var(--ease-soft,ease-out) .5s 1 both; }
.oracle-card.r-X.reveal-play .oc-scene-band::before { background: radial-gradient(110% 85% at 50% 30%, rgba(170, 150, 240, 0.55) 0%, rgba(120, 105, 210, 0.26) 34%, rgba(120, 105, 210, 0) 66%); mix-blend-mode: screen; animation: sceneBandDawnSweep 1.5s var(--ease-soft,ease-out) .5s 1 both; }
@keyframes sceneBandDawnSweep { 
  0% { opacity: 0; }
  38% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){.oracle-card.r-SS .oc-scene-band::before, .oracle-card.r-S .oc-scene-band::before, .oracle-card.r-X .oc-scene-band::before { display: none !important; }}
.oc-gauge { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 0px; max-width: 360px; }
.oc-gauge-label { font-size: 0.54rem; font-weight: 300; letter-spacing: 0.3em; color: var(--ink-muted); white-space: nowrap; flex-shrink: 0; }
.oracle-card.r-S .oc-gauge-label, .oracle-card.r-SS .oc-gauge-label { color: rgb(138, 109, 46); }
.oracle-card.r-A .oc-gauge-label { color: rgb(88, 88, 160); }
.oracle-card.r-X .oc-gauge-label { color: rgb(120, 112, 168); }
.oracle-card.r-D .oc-gauge-label { color: rgb(128, 128, 144); }
.oracle-card.r-X .oc-gauge { display: none; }
.rite-score-thread { position: relative; display: block; width: min(58vw, 230px); height: 3px; margin: 0px; background: rgba(180, 180, 180, 0.28); border-radius: 2px; overflow: visible; }
.rite-score-thread .mark { position: absolute; top: 50%; left: 0%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold-rim); pointer-events: none; }
.oracle-card.r-SS .rite-score-thread .mark { background: rgb(255, 192, 0); }
.oracle-card.r-X .rite-score-thread .mark { background: rgba(140, 128, 230, 0.9); }
.oracle-card.r-D .rite-score-thread .mark { background: rgba(160, 160, 180, 0.85); }
.oc-threshold { position: relative; overflow: hidden; height: 52px; max-width: 580px; margin: 16px auto 20px; background: linear-gradient(90deg, transparent, rgba(120, 100, 40, 0.06) 22%, rgba(120, 100, 40, 0.1) 50%, rgba(120, 100, 40, 0.06) 78%, transparent); border-top: 1px solid var(--gold-rim); border-bottom: 1px solid var(--gold-rim); }
.oc-threshold canvas.hx-sky { opacity: 0.32 !important; mix-blend-mode: multiply; }
@media (max-width: 520px){.oc-threshold { height: 40px; margin: 14px auto 16px; }}
.oc-presence-nook { position: relative; min-height: calc(1.788 * min(30vw, 260px)); margin-top: 10px; }
.hx-presence { position: absolute; z-index: 0; pointer-events: none; user-select: none; background-repeat: no-repeat; background-position: center center; background-size: contain; width: min(30vw, 260px); aspect-ratio: 620 / 1108; filter: grayscale(38%) sepia(4%) saturate(88%); mix-blend-mode: multiply; right: clamp(0px, 2vw, 24px); bottom: 0px; opacity: 0.35 !important; }
.hx-presence--v1-02-full { background-image: url("../images/presence/presence_v1_02_full.webp"); }
@media (max-width: 640px){.hx-presence { width: min(42vw, 190px); }.oc-presence-nook { min-height: calc(1.788 * min(42vw, 190px)); }}
.megumi-section { margin-top: 26px; border-top: 1px solid var(--silver-lt); padding-top: 20px; text-align: center; }
.oracle-card.r-X .megumi-section { border-top-color: rgba(140, 128, 230, 0.28); }
.megumi-intro { font-size: 0.68rem; letter-spacing: 0.03em; line-height: 1.9; color: var(--ink-mid); margin: 0px auto 18px; max-width: 26em; }
.megumi-deck { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0px 0px 6px; }
.megumi-card { position: relative; width: 64px; height: 96px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; padding: 0px; margin: 0px; cursor: pointer; -webkit-tap-highlight-color: transparent; perspective: 640px; }
.megumi-card:focus-visible { outline: 2px solid var(--gold-rim); outline-offset: 4px; }
.megumi-card-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s var(--ease-soft); transform-style: preserve-3d; }
.megumi-card.flipped .megumi-card-inner { transform: rotateY(180deg); }
.megumi-card-face { position: absolute; inset: 0px; backface-visibility: hidden; border: 1px solid var(--gold-rim); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.megumi-card-back { background: var(--surface); box-shadow: rgba(215, 192, 120, 0.14) 0px 0px 0px 1px inset; }
.megumi-card-mark { display: block; width: 13px; height: 13px; border: 1px solid var(--gold-rim); transform: rotate(45deg); }
.megumi-card-front { background: linear-gradient(150deg, rgb(243, 231, 196), rgb(216, 190, 124) 62%, rgb(201, 162, 39)); transform: rotateY(180deg); box-shadow: rgba(160, 118, 30, 0.26) 0px 2px 16px; }
.megumi-card-front::after { content: ""; display: block; width: 13px; height: 13px; border: 1px solid rgba(111, 90, 22, 0.55); background: rgba(255, 255, 255, 0.22); transform: rotate(45deg); }
.megumi-card.megumi-card-dim { opacity: 0.36; pointer-events: none; }
.megumi-card.megumi-card-chosen .megumi-card-front { box-shadow: rgba(160, 118, 30, 0.34) 0px 3px 22px; }
@media (prefers-reduced-motion: reduce){.megumi-card-inner { transition: none; }}
.megumi-skip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 14px; margin-top: 2px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.megumi-skip:hover { color: var(--ink-mid); }
.megumi-skip:focus-visible { outline: 2px solid var(--gold-rim); outline-offset: 3px; }
.megumi-reveal { margin-top: 18px; padding: 18px 22px; text-align: left; background: rgba(215, 192, 120, 0.07); border: 1px solid var(--gold-rim); position: relative; overflow: hidden; }
.megumi-reveal-card { position: relative; z-index: 1; }
.megumi-reveal-label { display: block; font-size: 0.56rem; letter-spacing: 0.4em; color: var(--gold-deep); text-transform: uppercase; margin-bottom: 8px; }
.oracle-card.r-X .megumi-reveal-label { color: rgb(142, 134, 188); }
.megumi-reveal-name { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); margin: 0px 0px 8px; }
.megumi-reveal-effect { font-size: 0.72rem; line-height: 1.9; letter-spacing: 0.02em; color: var(--ink-mid); margin: 0px; }
.megumi-reveal.megumi-bloom::before { content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(at 50% 20%, rgba(215, 192, 120, 0.32), transparent 62%); animation: megumiBloom 1.1s var(--ease-soft) both; pointer-events: none; }
@keyframes megumiBloom { 
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){.megumi-reveal.megumi-bloom::before { animation: auto ease 0s 1 normal none running none; display: none; }}
@media (max-width: 520px){.megumi-card { width: 56px; height: 84px; }.megumi-deck { gap: 8px; }}
.oracle-card.r-D .megumi-section { border-top-color: rgba(100, 100, 120, 0.25); }
.oracle-card.r-D .megumi-intro { color: rgb(160, 160, 176); }
.oracle-card.r-D .megumi-skip { color: rgb(128, 128, 144); }
.oracle-card.r-D .megumi-skip:hover { color: rgb(192, 192, 204); }
.oracle-card.r-D .megumi-reveal { background: rgba(255, 255, 255, 0.03); border-color: rgba(100, 100, 120, 0.3); }
.oracle-card.r-D .megumi-reveal-label { color: rgb(128, 128, 144); }
.oracle-card.r-D .megumi-reveal-name { color: rgb(192, 192, 204); }
.oracle-card.r-D .megumi-reveal-effect { color: rgb(160, 160, 176); }
.oracle-card.r-X .megumi-intro { color: rgb(176, 168, 216); }
.oracle-card.r-X .megumi-skip { color: rgb(142, 134, 188); }
.oracle-card.r-X .megumi-skip:hover { color: rgb(192, 184, 232); }
.oracle-card.r-X .megumi-reveal { background: rgba(140, 128, 230, 0.06); border-color: rgba(140, 128, 230, 0.3); }
.oracle-card.r-X .megumi-reveal-name { color: rgb(220, 214, 240); }
.oracle-card.r-X .megumi-reveal-effect { color: rgb(176, 168, 216); }
@media (min-width: 1000px){a#navSignupLink { background: var(--ink,#191919); color: rgb(247, 246, 244); border: 1px solid var(--ink,#191919); border-radius: 4px; padding: 6px 12px; white-space: nowrap; }a#navSignupLink:hover { opacity: 0.82; color: rgb(247, 246, 244); }a#navAuthLink { padding: 6px 2px; white-space: nowrap; border-bottom: 1px solid var(--silver,#A8A8A8); }body.night a#navSignupLink, html[data-koku="yoru"] a#navSignupLink { background: var(--night-gold,#C9A84C); color: var(--night-bg,#14161B); border-color: var(--night-gold,#C9A84C); }body.night a#navSignupLink:hover, html[data-koku="yoru"] a#navSignupLink:hover { color: var(--night-bg,#14161B); }body.night a#navAuthLink, html[data-koku="yoru"] a#navAuthLink { color: var(--night-ink,#E9E6DE); border-bottom-color: var(--night-gold,#C9A84C); }}
@media (min-width: 900px) and (max-width: 999.98px){a#navSignupLink { border-bottom: 2px solid rgba(160, 130, 40, 0.75); font-weight: 600; }body.night a#navSignupLink, html[data-koku="yoru"] a#navSignupLink { border-bottom-color: var(--night-gold,#C9A84C); }}
#mobileMenu a#mmSignupLink { display: block; margin: 12px 16px 6px; padding: 13px 12px; text-align: center; background: var(--ink,#191919); color: rgb(247, 246, 244); border: 1px solid var(--ink,#191919); border-radius: 4px; }
#mobileMenu a#mmAuthLink { display: block; margin: 0px 16px 10px; padding: 12px; text-align: center; border: 1px solid var(--silver,#A8A8A8); border-radius: 4px; }
body.night #mobileMenu a#mmSignupLink, html[data-koku="yoru"] #mobileMenu a#mmSignupLink { background: var(--night-gold,#C9A84C); color: var(--night-bg,#14161B); border-color: var(--night-gold,#C9A84C); }
body.night #mobileMenu a#mmAuthLink, html[data-koku="yoru"] #mobileMenu a#mmAuthLink { color: var(--night-ink,#E9E6DE); border-color: var(--night-gold,#C9A84C); }
.oracle-card.r-D .rank-letter { color: rgb(154, 154, 176); }
.oracle-card.r-D .rank-name-text { color: rgb(166, 166, 186); }
.oracle-card.r-D .rank-score-num { color: rgb(148, 148, 172); }
.oracle-card.r-D .rank-score, .oracle-card.r-D .oc-gauge-label, .oracle-card.r-D .oc-sub, .oracle-card.r-D .lucky-head, .oracle-card.r-D .wn-label, .oracle-card.r-D .wn-koyomi-label, .oracle-card.r-D .action-label, .oracle-card.r-D .l-cat, .oracle-card.r-D .le-cat, .oracle-card.r-D .btn-again, .oracle-card.r-D .save-msg, .oracle-card.r-D .rank-streak-line, .oracle-card.r-D .megumi-skip, .oracle-card.r-D .megumi-reveal-label, .oracle-card.r-D .result-rite-nav .rite-nav-title { color: rgb(166, 166, 186); }
.oracle-card.r-D .oc-share-note, .oracle-card.r-D .record-hook, .oracle-card.r-D .next-oracle-note, .oracle-card.r-D .almanac-invite, .oracle-card.r-D .share-note, .oracle-card.r-D .trial-peek-lock { color: rgb(176, 176, 192); }
.oracle-card.r-D .almanac-invite a, .oracle-card.r-D .kantei-summary-theme, .oracle-card.r-D .kantei-summary-link, .oracle-card.r-D .weekly-summary-link { color: rgb(214, 196, 142); border-bottom-color: rgba(214, 196, 142, 0.45); }
.oracle-card.r-D .kantei-summary-link:hover, .oracle-card.r-D .kantei-summary-link:focus-visible, .oracle-card.r-D .weekly-summary-link:hover, .oracle-card.r-D .weekly-summary-link:focus-visible { color: rgb(240, 228, 192); }
.oracle-card.r-D .kantei-summary-line { color: rgb(192, 192, 204); }
.oracle-card.r-D .weekly-axis-label, .oracle-card.r-D .weekly-score-label { fill: rgb(166, 166, 186); }
.oracle-card.r-D .format-btn, .oracle-card.r-D .btn-save, .oracle-card.r-D .btn-save.saved, .oracle-card.r-D .btn-save.saved span { color: rgb(174, 174, 192); }
.oracle-card.r-X .rank-score, .oracle-card.r-X .oc-gauge-label, .oracle-card.r-X .oc-sub, .oracle-card.r-X .lucky-head, .oracle-card.r-X .wn-label, .oracle-card.r-X .wn-koyomi-label, .oracle-card.r-X .action-label, .oracle-card.r-X .l-cat, .oracle-card.r-X .le-cat, .oracle-card.r-X .kantei-sub, .oracle-card.r-X .weekly-sub, .oracle-card.r-X .oc-greeting, .oracle-card.r-X .weekly-greeting, .oracle-card.r-X .share-note, .oracle-card.r-X .rank-streak-line, .oracle-card.r-X .save-msg, .oracle-card.r-X .megumi-skip, .oracle-card.r-X .megumi-reveal-label, .oracle-card.r-X .result-rite-nav .rite-nav-title, .oracle-card.r-X .format-btn, .oracle-card.r-X .btn-save, .oracle-card.r-X .btn-save.saved, .oracle-card.r-X .btn-save.saved span, .oracle-card.r-X .btn-again { color: rgb(173, 165, 216); }
.oracle-card.r-X .oc-share-note, .oracle-card.r-X .record-hook, .oracle-card.r-X .next-oracle-note, .oracle-card.r-X .almanac-invite, .oracle-card.r-X .trial-peek-lock { color: rgb(184, 176, 220); }
.oracle-card.r-X .almanac-invite a, .oracle-card.r-X .kantei-summary-theme, .oracle-card.r-X .kantei-summary-link, .oracle-card.r-X .weekly-summary-link { color: rgb(207, 198, 242); border-bottom-color: rgba(207, 198, 242, 0.45); }
.oracle-card.r-X .kantei-summary-link:hover, .oracle-card.r-X .kantei-summary-link:focus-visible, .oracle-card.r-X .weekly-summary-link:hover, .oracle-card.r-X .weekly-summary-link:focus-visible { color: rgb(237, 232, 255); }
.oracle-card.r-X .kantei-summary-line { color: rgb(200, 194, 236); }
.oracle-card.r-X .l-val { color: rgb(204, 198, 234); }
.oracle-card.r-X .l-effect { color: rgb(198, 192, 228); }
.oracle-card.r-X .megumi-intro { color: rgb(196, 190, 230); }
.oracle-card.r-X .weekly-axis-label, .oracle-card.r-X .weekly-score-label { fill: rgb(184, 176, 220); }
.oracle-card.r-SS .oc-gauge-label { color: rgb(74, 50, 0); }
.oracle-card.r-SS .oc-greeting, .oracle-card.r-SS .weekly-sub, .oracle-card.r-SS .weekly-greeting, .oracle-card.r-SS .kantei-sub, .oracle-card.r-SS .share-note, .oracle-card.r-SS .save-msg, .oracle-card.r-SS .rank-streak-line, .oracle-card.r-SS .lucky-head, .oracle-card.r-SS .format-btn, .oracle-card.r-SS .btn-again, .oracle-card.r-SS .oc-share-note, .oracle-card.r-SS .record-hook, .oracle-card.r-SS .next-oracle-note, .oracle-card.r-SS .almanac-invite, .oracle-card.r-SS .trial-peek-lock, .oracle-card.r-SS .megumi-skip, .oracle-card.r-SS .megumi-reveal-label, .oracle-card.r-SS .result-rite-nav .rite-nav-title { color: rgb(58, 42, 8); }
.oracle-card.r-SS .result-rite-nav .rite-nav-list a, .oracle-card.r-SS .save-msg-link, .oracle-card.r-SS .almanac-invite a { color: rgb(30, 22, 8); }
.oracle-card.r-SS .result-rite-nav .rite-nav-list a:hover, .oracle-card.r-SS .save-msg-link:hover { color: rgb(0, 0, 0); }
.oracle-card.r-SS .btn-save.saved, .oracle-card.r-SS .btn-save.saved span { color: rgb(30, 42, 8); }
.oracle-card.r-SS .weekly-axis-label, .oracle-card.r-SS .weekly-score-label { fill: rgb(58, 42, 8); }
.oracle-card.r-S .weekly-axis-label, .oracle-card.r-S .weekly-score-label { fill: rgb(74, 74, 74); }
.oracle-card.r-S .rank-score-num { color: rgb(110, 80, 16); }
.oracle-card.r-S .oc-gauge-label, .oracle-card.r-S .oc-sub, .oracle-card.r-S .action-label, .oracle-card.r-S .l-cat, .oracle-card.r-S .le-cat, .oracle-card.r-S .wn-label, .oracle-card.r-S .wn-koyomi-label { color: rgb(106, 78, 20); }
.oracle-card.r-S .lucky-head, .oracle-card.r-S .format-btn, .oracle-card.r-S .btn-again, .oracle-card.r-S .save-msg, .oracle-card.r-S .share-note, .oracle-card.r-S .rank-streak-line, .oracle-card.r-S .record-hook, .oracle-card.r-S .next-oracle-note, .oracle-card.r-S .almanac-invite, .oracle-card.r-S .trial-peek-lock, .oracle-card.r-S .oc-share-note, .oracle-card.r-S .oc-greeting, .oracle-card.r-S .weekly-sub, .oracle-card.r-S .weekly-greeting, .oracle-card.r-S .kantei-sub, .oracle-card.r-S .megumi-skip, .oracle-card.r-S .megumi-reveal-label, .oracle-card.r-S .result-rite-nav .rite-nav-title { color: rgb(74, 74, 74); }
.oracle-card.r-S .save-msg-link, .oracle-card.r-S .result-rite-nav .rite-nav-list a.rite-nav-next, .oracle-card.r-S .almanac-invite a { color: rgb(110, 80, 16); }
.oracle-card.r-S .btn-save.saved, .oracle-card.r-S .btn-save.saved span { color: rgb(46, 82, 34); }
.btn-save.saved, .btn-save.saved span { color: rgb(62, 106, 48); }
.save-msg-link { color: var(--gold-deep,#6E5311); }
.result-rite-nav .rite-nav-list a:hover, .result-rite-nav .rite-nav-list a:focus-visible { color: var(--gold-deep,#6E5311); }