@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("cinzel-semibold.woff2") format("woff2");
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("cinzel-bold.woff2") format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("outfit-regular.woff2") format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("outfit-medium.woff2") format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("outfit-semibold.woff2") format("woff2");
}
* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { color-scheme: dark; }
body {
margin: 0;
min-height: 100dvh;
color: #F4E9D8;
font-family: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.45;
background: #0A0A0C;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: #0A0A0C url("haze.webp") center/cover no-repeat;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input {
font: inherit;
color: inherit;
background: transparent;
border: 0;
text-decoration: none;
touch-action: manipulation;
}
button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
img { display: block; max-width: 100%; }
a, button, input, abbr { text-decoration: none; }
::selection { background: #9B7BB8; color: #0A0A0C; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #9B7BB8; outline-offset: 2px; }
input {
width: 100%;
min-height: 48px;
padding: 0 14px;
font-size: 16px;
border-radius: 14px;
border: 1px solid #9B7BB8;
background: #0A0A0C;
color: #F4E9D8;
caret-color: #D4AF37;
}
input::placeholder { color: rgba(244,233,216,.45); }
input:-webkit-autofill {
-webkit-text-fill-color: #F4E9D8;
caret-color: #D4AF37;
box-shadow: 0 0 0 1000px #0A0A0C inset;
}
[hidden] { display: none !important; }
body.is-splash, body.is-rite, body.is-sheet { overflow: hidden; }
.rise-brand {
font-family: "Cinzel", Palatino, serif;
font-weight: 700;
color: #D4AF37;
letter-spacing: 0.04em;
font-size: 26px;
}
.rise-id {
margin-top: 4px;
color: #F4E9D8;
font-size: 12px;
letter-spacing: 0.04em;
}
.rise-kicker {
color: #9B7BB8;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
}
.rise-quiet { color: rgba(244,233,216,.82); }
.rise-go, .rise-ghost {
min-height: 48px;
padding: 0 16px;
border-radius: 999px;
font-family: "Cinzel", Palatino, serif;
letter-spacing: 0.03em;
}
.rise-go { background: #D4AF37; color: #0A0A0C; }
.rise-ghost { border: 1px solid #9B7BB8; color: #F4E9D8; background: rgba(10,10,12,.55); }
.rise-splash {
position: fixed;
inset: 0;
z-index: 30;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 28px 22px;
background: #0A0A0C url("haze.webp") center/cover no-repeat;
}
body.is-splash .rise-splash { display: flex; }
.rise-splash-cap {
width: 0;
height: 0;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-bottom: 42px solid #D4AF37;
filter: drop-shadow(0 0 12px rgba(212,175,55,.65));
margin-bottom: 18px;
}
.rise-lead { max-width: 28rem; margin-top: 14px; color: #F4E9D8; }
.rise-splash-line {
width: min(220px, 64%);
height: 2px;
margin-top: 22px;
background: rgba(155,123,184,.35);
position: relative;
overflow: hidden;
}
.rise-splash-line::after {
content: "";
position: absolute;
inset: 0;
background: #D4AF37;
transform-origin: left center;
animation: rise-load 1.5s linear forwards;
}
@keyframes rise-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rise-rite {
position: fixed;
inset: 0;
z-index: 20;
display: none;
flex-direction: column;
gap: 14px;
padding: calc(16px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
overflow: auto;
background: #0A0A0C url("haze.webp") center/cover no-repeat;
}
body.is-rite .rise-rite { display: flex; }
body.is-lilacrite .rise-rite { background-image: url("lilac.webp"); }
body.is-splash .rise-app, body.is-rite .rise-app { visibility: hidden; }
.rise-sandhead {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 6px 0 10px;
background: rgba(10,10,12,.9);
}
.rise-pyramidbar {
width: 120px;
height: 78px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background: rgba(155,123,184,.28);
position: relative;
}
#rise-pyramidfill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: linear-gradient(#F4E9D8, #D4AF37);
}
#rise-skip-rite { min-width: 96px; }
.rise-scene { display: flex; flex-direction: column; gap: 12px; }
.rise-scene h2 {
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
font-size: 32px;
font-weight: 700;
}
.rise-stack { position: relative; min-height: 230px; }
.rise-sun {
position: absolute;
left: 50%;
top: 18px;
width: 140px;
height: auto;
transform: translateX(-50%);
filter: drop-shadow(0 0 16px rgba(212,175,55,.45));
}
.rise-stone {
position: relative;
z-index: 1;
width: 100%;
min-height: 210px;
border-radius: 22px;
color: #F4E9D8;
font-family: "Cinzel", Palatino, serif;
font-size: 22px;
background:
linear-gradient(115deg, transparent 46%, rgba(212,175,55,.7) 47.2%, transparent 48.4%),
linear-gradient(165deg, transparent 63%, rgba(155,123,184,.65) 64%, transparent 65.2%),
radial-gradient(circle at 30% 18%, rgba(244,233,216,.16), transparent 34%),
linear-gradient(180deg, #23232a, #0A0A0C 72%);
box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(212,175,55,.4);
transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s ease;
}
.rise-stone.is-lifted {
transform: translateY(-130%) rotate(-8deg);
opacity: 0;
pointer-events: none;
}
.rise-emblem { width: 84px; height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.rise-emblem-sm { width: 54px; height: auto; object-fit: contain; flex: 0 0 auto; }
.rise-yesno, .rise-form, .rise-choices { display: grid; gap: 8px; }
.rise-mini {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 16px;
border: 1px solid rgba(212,175,55,.45);
background: rgba(10,10,12,.78);
}
.rise-mini-title {
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
margin: 6px 0 2px;
}
.rise-pin {
min-height: 40px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid #D4AF37;
color: #D4AF37;
background: #0A0A0C;
}
.rise-pin[aria-pressed="true"] { background: #D4AF37; color: #0A0A0C; }
.rise-wrap {
width: min(880px, 100%);
margin: 0 auto;
padding: calc(12px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
}
.rise-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.rise-pocket { text-align: right; }
.rise-pocket span {
display: block;
color: #9B7BB8;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.rise-pocket strong {
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
font-size: 24px;
}
.rise-arc {
position: sticky;
top: 0;
z-index: 4;
margin: 6px 0 10px;
background: linear-gradient(180deg, #0A0A0C 0%, #0A0A0C 76%, rgba(10,10,12,0) 100%);
}
.rise-arc-line { width: 100%; height: 150px; display: block; }
.rise-nodes { position: absolute; inset: 8px 0 0; }
.rise-node {
position: absolute;
width: 74px;
min-height: 62px;
padding: 8px 4px 7px;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 3px;
border-radius: 16px;
border: 1px solid rgba(155,123,184,.7);
background: rgba(10,10,12,.82);
color: #F4E9D8;
font-family: "Cinzel", Palatino, serif;
font-size: 10px;
letter-spacing: 0.02em;
}
.rise-node span:last-child { white-space: nowrap; }
.rise-node:nth-child(1) { left: 15%; top: 78%; }
.rise-node:nth-child(2) { left: 36%; top: 46%; }
.rise-node:nth-child(3) { left: 64%; top: 46%; }
.rise-node:nth-child(4) { left: 85%; top: 78%; }
.rise-node img {
width: 22px;
height: 22px;
object-fit: contain;
background: #0A0A0C;
border-radius: 7px;
padding: 2px;
}
.rise-cap {
position: absolute;
left: 50%;
top: -16px;
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 16px solid #F4E9D8;
transform: translateX(-50%);
opacity: 0;
filter: drop-shadow(0 0 6px rgba(212,175,55,.85));
}
.rise-node[aria-current="true"] {
background: #D4AF37;
color: #0A0A0C;
border-color: #D4AF37;
transform: translate(-50%, calc(-50% - 14px));
z-index: 2;
box-shadow: 0 10px 24px rgba(212,175,55,.28);
}
.rise-node[aria-current="true"] .rise-cap { opacity: 1; }
.rise-scrollicon {
width: 22px;
height: 14px;
border: 1.5px solid currentColor;
border-radius: 7px;
position: relative;
display: block;
}
.rise-scrollicon::before, .rise-scrollicon::after {
content: "";
position: absolute;
top: -3px;
bottom: -3px;
width: 5px;
border: 1.5px solid currentColor;
border-radius: 4px;
}
.rise-scrollicon::before { left: -4px; }
.rise-scrollicon::after { right: -4px; }
.rise-hero {
position: relative;
overflow: hidden;
min-height: 210px;
padding: 18px 16px 16px;
margin-bottom: 14px;
border-radius: 22px;
border: 1px solid rgba(212,175,55,.5);
background-position: center;
background-size: cover;
}
.rise-hero-haze {
background-image: linear-gradient(180deg, rgba(10,10,12,.25), rgba(10,10,12,.9)), url("haze.webp");
}
.rise-hero-lilac {
background-image: linear-gradient(180deg, rgba(10,10,12,.2), rgba(10,10,12,.92)), url("lilac.webp");
}
.rise-hero h2, .rise-sheet h3, .rise-boardhead h3, #dawn-result h3 {
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
font-weight: 700;
}
.rise-hero h2 { font-size: 32px; margin: 6px 0 8px; }
.rise-hero .rise-kicker { color: #9B7BB8; }
.rise-hero p { color: #F4E9D8; }
.rise-panel { animation-duration: .4s; animation-timing-function: ease; }
.rise-panel.rise-forward { animation-name: rise-forward; }
.rise-panel.rise-back { animation-name: rise-back; }
@keyframes rise-forward { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes rise-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.rise-baybar, .rise-stepper, .rise-meter, .rise-hud, .rise-stats, .rise-boardhead {
display: flex;
align-items: center;
gap: 8px;
}
.rise-baybar, .rise-stepper { margin-bottom: 10px; }
.rise-baybar .rise-ghost, .rise-stepper .rise-ghost { flex: 1; }
.rise-stepper p, .rise-boardhead h3 { flex: 1; text-align: center; }
.rise-bay {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
scrollbar-width: none;
}
.rise-bay::-webkit-scrollbar { display: none; }
.rise-card { position: relative; flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
.rise-open {
display: block;
width: 100%;
text-align: left;
padding: 14px;
color: #F4E9D8;
background: rgba(10,10,12,.82);
border: 1px solid rgba(212,175,55,.42);
border-radius: 18px;
}
.rise-card.is-kept .rise-open { border-color: #D4AF37; box-shadow: inset 0 0 0 1px rgba(212,175,55,.45); }
.rise-cardtitle {
display: block;
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
font-size: 22px;
font-weight: 700;
margin: 6px 0 8px;
padding-right: 76px;
}
.rise-line { display: block; margin: 0 0 4px; font-size: 14px; line-height: 1.35; }
.rise-glyphs { width: 148px; height: 18px; display: block; margin-bottom: 8px; }
.rise-cardtop { display: flex; min-height: 28px; }
.rise-tag {
display: inline-block;
background: #9B7BB8;
color: #0A0A0C;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
}
.rise-card .rise-pin { position: absolute; top: 12px; right: 12px; z-index: 1; }
.rise-pinline { margin-bottom: 8px; }
.rise-chip {
border: 1px solid rgba(212,175,55,.65);
color: #F4E9D8;
background: rgba(10,10,12,.72);
border-radius: 999px;
min-height: 36px;
padding: 0 12px;
margin: 0 8px 8px 0;
}
.rise-banner {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid #D4AF37;
background: rgba(10,10,12,.72);
color: #F4E9D8;
}
#cartouche-rows { display: grid; gap: 8px; margin: 10px 0; }
.rise-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
align-items: center;
min-height: 52px;
padding: 8px 12px;
border-radius: 14px;
border: 1px solid rgba(212,175,55,.38);
background: rgba(10,10,12,.82);
}
.rise-rank {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: #D4AF37;
color: #0A0A0C;
font-family: "Cinzel", Palatino, serif;
}
.rise-row.is-shut span:nth-child(2) { letter-spacing: 0.16em; color: rgba(244,233,216,.45); text-transform: uppercase; font-size: 12px; }
.rise-pts { color: #9B7BB8; font-family: "Cinzel", Palatino, serif; }
.rise-percent { font-family: "Cinzel", Palatino, serif; color: #D4AF37; font-size: 28px; }
.rise-percent.is-final { text-shadow: 0 0 12px rgba(155,123,184,.8); }
.rise-strikes { display: flex; gap: 8px; margin-left: auto; }
.rise-strikes span {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #D4AF37;
display: block;
}
.rise-strikes span.is-spent { background: #9B7BB8; border-color: #9B7BB8; }
.rise-meter { justify-content: space-between; margin-top: 8px; }
#cartouche-replay, #scarab-start, .rise-choices .rise-go, .rise-choices .rise-ghost { width: 100%; margin-top: 8px; }
.rise-stats, .rise-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rise-stat, .rise-hud p {
background: rgba(10,10,12,.78);
border: 1px solid rgba(155,123,184,.5);
border-radius: 16px;
padding: 10px 8px;
text-align: center;
}
.rise-stat span, .rise-hud span {
display: block;
color: #9B7BB8;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rise-stat strong, .rise-hud strong {
display: block;
margin-top: 4px;
color: #F4E9D8;
font-family: "Cinzel", Palatino, serif;
font-size: 18px;
}
.rise-lane {
position: relative;
height: 132px;
margin: 8px 0 12px;
border-radius: 18px;
overflow: hidden;
touch-action: manipulation;
user-select: none;
background:
linear-gradient(90deg, rgba(155,123,184,.18), rgba(212,175,55,.05) 40%, rgba(212,175,55,.05) 60%, rgba(155,123,184,.18)),
#0A0A0C;
border: 1px solid rgba(212,175,55,.45);
}
.rise-lane.is-miss { animation: rise-shake 180ms linear; }
@keyframes rise-shake {
0%, 100% { transform: none; }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.rise-gate {
position: absolute;
top: 10px;
bottom: 10px;
border-radius: 12px;
background: rgba(212,175,55,.28);
border-left: 2px solid #D4AF37;
border-right: 2px solid #D4AF37;
}
.rise-gate.is-hot { background: rgba(212,175,55,.48); box-shadow: inset 0 0 18px rgba(212,175,55,.45); }
.rise-gate span {
position: absolute;
top: 4px;
left: 0;
right: 0;
text-align: center;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #F4E9D8;
}
.rise-sandword {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244,233,216,.7);
pointer-events: none;
}
.rise-sand-left { left: 10px; }
.rise-sand-right { right: 10px; }
.rise-beetle {
position: absolute;
top: 50%;
left: 50%;
width: 68px;
height: 68px;
object-fit: contain;
transform: translate(-50%, -50%);
pointer-events: none;
filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.rise-beetle.is-idle { animation: rise-idle 2.6s ease-in-out infinite; }
@keyframes rise-idle {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - 6px)); }
}
.rise-float {
position: absolute;
left: 50%;
top: 18%;
transform: translateX(-50%);
margin: 0;
color: #D4AF37;
font-family: "Cinzel", Palatino, serif;
font-size: 22px;
pointer-events: none;
opacity: 0;
}
.rise-float.is-on { animation: rise-pop 700ms ease; }
@keyframes rise-pop {
0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
20% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%) translateY(-16px); }
}
.rise-streak {
font-family: "Cinzel", Palatino, serif;
color: #D4AF37;
font-size: 28px;
margin: 8px 0;
}
.rise-stones { display: flex; gap: 8px; margin-bottom: 8px; }
.rise-stones span {
width: 18px;
height: 28px;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
background: rgba(155,123,184,.35);
}
.rise-stones span.is-lit { background: #D4AF37; }
#dawn-result { margin: 12px 0; }
.rise-legal {
margin-top: 18px;
text-align: center;
color: rgba(244,233,216,.78);
font-size: 13px;
}
.rise-sheet-veil {
position: fixed;
inset: 0;
z-index: 25;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(10,10,12,.72);
}
.rise-sheet {
width: min(520px, 100%);
max-height: min(82dvh, 680px);
overflow: auto;
padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
background: #0A0A0C;
border: 1px solid rgba(212,175,55,.55);
border-radius: 22px 22px 0 0;
}
.rise-sheet h3 { font-size: 26px; margin: 10px 0; }
.rise-facts { display: grid; gap: 10px; margin: 8px 0 14px; }
.rise-facts li {
position: relative;
padding: 10px 12px 10px 36px;
border-radius: 12px;
border: 1px solid rgba(212,175,55,.35);
background: rgba(10,10,12,.9);
color: #F4E9D8;
}
.rise-facts li::before {
content: "";
position: absolute;
left: 12px;
top: 14px;
width: 10px;
height: 10px;
background: #9B7BB8;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.rise-sheet .rise-go, .rise-sheet .rise-ghost { width: 100%; margin-top: 8px; }
@media (min-width: 800px) {
.rise-sheet-veil { align-items: center; }
.rise-sheet { border-radius: 22px; }
.rise-yesno { grid-template-columns: 1fr 1fr; }
.rise-form { grid-template-columns: 1fr auto; }
}
@media (max-width: 360px) {
.rise-node { width: 64px; font-size: 9px; }
.rise-hero h2, .rise-scene h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}