@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("manropeext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Manrope;
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("manrope.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Syne;
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url("syneext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: Syne;
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url("syne.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--night: #0A0A0F;
--nav: #07070C;
--green: #39FF14;
--pink: #FF2D95;
--purple: #7B2FBE;
--ink: #F4F7F8;
--muted: rgba(244, 247, 248, .68);
--bar: calc(64px + env(safe-area-inset-top));
}
* { box-sizing: border-box; text-decoration: none; }
*::spelling-error, *::grammar-error { text-decoration: none; }
html, body { margin: 0; padding: 0; }
html { background: var(--night); }
body {
min-height: 100dvh;
color: var(--ink);
background: var(--night);
font-family: Manrope, sans-serif;
font-size: 16px;
line-height: 1.45;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: rgba(57, 255, 20, .28); color: white; }
.wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wash img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wash .glow { opacity: .55; }
.wash .haze { opacity: .34; mix-blend-mode: screen; }
.top, .shell, #splash, #gate { position: relative; z-index: 1; }
.top {
position: sticky;
top: 0;
z-index: 5;
min-height: var(--bar);
padding: env(safe-area-inset-top) 12px 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--nav);
border-bottom: 1px solid var(--purple);
box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
background: transparent;
border: 0;
padding: 6px 4px;
text-align: left;
min-width: 0;
}
.logo {
width: 42px;
height: 42px;
object-fit: contain;
filter: drop-shadow(0 0 6px var(--green)) drop-shadow(0 0 14px var(--pink));
}
.brandtext { display: flex; flex-direction: column; min-width: 0; }
.brandtext strong {
font-family: Syne, Manrope, sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: .02em;
white-space: nowrap;
}
.brandtext small { color: var(--muted); font-size: 11px; }
.streak { display: flex; gap: 4px; align-items: flex-end; flex: none; }
.streak i {
width: 7px;
height: 18px;
background: rgba(255, 255, 255, .14);
clip-path: polygon(55% 0, 80% 0, 48% 34%, 86% 34%, 30% 68%, 62% 68%, 22% 100%, 8% 100%, 42% 64%, 16% 64%, 46% 30%, 18% 30%);
}
.streak i.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.shell { display: flex; align-items: stretch; min-height: calc(100dvh - var(--bar)); }
.rail {
width: 76px;
flex: none;
position: sticky;
top: var(--bar);
height: calc(100dvh - var(--bar));
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
background: rgba(7, 7, 12, .94);
border-right: 1px solid var(--purple);
}
.navbtn {
position: relative;
flex: 1;
max-height: 118px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid transparent;
border-radius: 16px;
background: transparent;
color: var(--muted);
padding: 8px 4px;
overflow: hidden;
}
.navbtn img { width: 26px; height: 26px; object-fit: contain; }
.navbtn span { font-size: 11px; font-weight: 700; }
.navbtn.active {
color: var(--green);
background: rgba(57, 255, 20, .06);
border-color: rgba(57, 255, 20, .28);
text-shadow: 0 0 10px rgba(57, 255, 20, .45);
}
.crack {
display: none;
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 12px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'><path d='M7 0 L10 14 L3 24 L11 40 L4 54 L10 70 L3 84 L8 100' stroke='%2339FF14' stroke-width='2.2' fill='none' stroke-linecap='square'/></svg>") center / 100% 100% no-repeat;
filter: drop-shadow(0 0 5px #39FF14);
}
.navbtn.active .crack { display: block; }
.bars {
width: 22px;
height: 22px;
background:
linear-gradient(var(--green), var(--green)) 0 3px / 100% 2px no-repeat,
linear-gradient(var(--pink), var(--pink)) 0 10px / 74% 2px no-repeat,
linear-gradient(var(--purple), var(--purple)) 0 17px / 46% 2px no-repeat;
}
.main { flex: 1; min-width: 0; padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
.wrap { max-width: 880px; }
.viewhead h2 {
margin: 0 0 6px;
font-family: Syne, Manrope, sans-serif;
font-size: 28px;
font-weight: 800;
line-height: 1.05;
}
.kicker { margin: 0 0 4px; color: var(--pink); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.daynote { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; }
.chip, .go, .wide, .opt, .choice, .pin, .ahead, .yes, .no {
border-radius: 999px;
border: 1px solid rgba(123, 47, 190, .85);
background: rgba(10, 10, 15, .72);
padding: 8px 14px;
}
.chip.on, .pin.on, .go, .yes, .ahead {
background: var(--green);
color: var(--night);
border-color: var(--green);
font-weight: 700;
}
.cards, .boards, .options, .choices { display: grid; gap: 12px; }
.card, .bcard, .panel, .qcard, .opt, .choice {
border: 1px solid var(--purple);
border-radius: 18px;
background: rgba(10, 10, 15, .82);
box-shadow: inset 0 0 0 1px rgba(255, 45, 149, .14);
}
.card, .bcard, .panel, .qcard { padding: 14px; }
.cardtop, .row, .hud, .split { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tag {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
border-radius: 999px;
padding: 4px 8px;
border: 1px solid var(--green);
color: var(--green);
}
.tag.basket { color: var(--pink); border-color: var(--pink); }
.card p, .bcard p { margin: 10px 0 0; }
.bcard { width: 100%; text-align: left; color: inherit; }
.bcard b { display: block; font-family: Syne, Manrope, sans-serif; font-size: 18px; }
.bcard small, .meta { color: var(--muted); font-size: 13px; }
.empty { color: var(--muted); }
.rows { display: grid; gap: 8px; margin: 12px 0; }
.row {
border: 1px solid rgba(123, 47, 190, .7);
border-radius: 14px;
padding: 10px 12px;
background: rgba(7, 7, 12, .72);
}
.row.open { border-color: rgba(57, 255, 20, .7); box-shadow: 0 0 16px rgba(57, 255, 20, .12); }
.pct { font-family: Syne, Manrope, sans-serif; color: var(--green); min-width: 48px; }
.lives { display: flex; gap: 6px; }
.life { width: 14px; height: 18px; background: var(--pink); clip-path: polygon(50% 0, 78% 28%, 40% 48%, 70% 70%, 20% 100%, 34% 62%, 8% 46%, 42% 30%); }
.life.dead { background: rgba(255, 255, 255, .16); filter: none; }
.ask { font-family: Syne, Manrope, sans-serif; font-size: 22px; margin: 8px 0; }
form { display: flex; gap: 8px; }
input {
flex: 1;
min-width: 0;
background: var(--night);
border: 1px solid var(--purple);
border-radius: 14px;
padding: 12px 12px;
caret-color: var(--green);
}
input:-webkit-autofill {
-webkit-text-fill-color: var(--ink);
box-shadow: 0 0 0 1000px #0A0A0F inset;
}
.note { min-height: 1.2em; color: var(--pink); font-size: 14px; }
.big {
font-family: Syne, Manrope, sans-serif;
font-size: 64px;
line-height: .9;
margin: 8px 0;
color: var(--green);
text-shadow: 0 0 18px rgba(57, 255, 20, .35);
}
.wide { width: 100%; border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.ghost { background: transparent; color: var(--ink); }
.opt, .choice { text-align: left; padding: 12px 14px; border-radius: 16px; }
.opt.good, .choice.good { border-color: var(--green); color: var(--green); }
.opt.bad, .choice.bad { border-color: var(--pink); color: var(--pink); }
.hud { margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: Syne, Manrope, sans-serif; font-size: 22px; }
.stat span { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ahead { margin-top: 14px; }
.panel .logo { width: 72px; height: 72px; }
.lane {
position: relative;
cursor: pointer;
height: 108px;
margin: 8px 0 14px;
border-radius: 22px;
border: 1px solid var(--purple);
background: rgba(7, 7, 12, .88);
overflow: hidden;
touch-action: none;
user-select: none;
}
.line {
position: absolute;
left: 10px;
right: 10px;
top: 50%;
height: 4px;
transform: translateY(-50%);
border-radius: 999px;
background: linear-gradient(90deg, var(--purple), var(--green), var(--pink));
box-shadow: 0 0 12px rgba(57, 255, 20, .45);
}
.slit {
position: absolute;
top: 10px;
bottom: 10px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 248, 220, .05), rgba(255, 236, 190, .38), rgba(255, 248, 220, .05));
border-left: 2px solid rgba(255, 236, 190, .95);
border-right: 2px solid rgba(255, 236, 190, .95);
box-shadow: inset 0 0 22px rgba(57, 255, 20, .28), 0 0 16px rgba(255, 45, 149, .22);
}
.pip {
position: absolute;
top: 50%;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
object-fit: contain;
filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 10px var(--pink));
pointer-events: none;
}
.lane.hit { border-color: var(--green); }
.lane.miss { border-color: var(--pink); }
.pop {
position: absolute;
left: 50%;
top: 12px;
transform: translateX(-50%);
font-family: Syne, Manrope, sans-serif;
pointer-events: none;
animation: rise .55s ease forwards;
}
.pop.good { color: var(--green); }
.pop.bad { color: var(--pink); }
@keyframes rise {
to { opacity: 0; transform: translateX(-50%) translateY(-18px); }
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
#splash, #gate {
position: fixed;
inset: 0;
z-index: 20;
}
#splash {
z-index: 30;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #0A0A0F url("glow.webp") center / cover;
}
#splash img {
width: 140px;
height: 140px;
object-fit: contain;
filter: drop-shadow(0 0 10px var(--green)) drop-shadow(0 0 22px var(--pink));
}
#splash p {
margin: 0;
font-family: Syne, Manrope, sans-serif;
font-weight: 800;
font-size: 28px;
}
#splash.out { opacity: 0; transition: opacity .25s linear; pointer-events: none; }
#gate {
z-index: 20;
display: grid;
grid-template-columns: 54px 1fr;
overflow: auto;
background:
linear-gradient(200deg, rgba(10, 10, 15, .2), rgba(10, 10, 15, .9)),
url("haze.webp") center / cover;
}
.spine {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
align-items: center;
position: sticky;
top: 0;
height: 100dvh;
border-right: 1px solid rgba(123, 47, 190, .8);
background: rgba(7, 7, 12, .72);
}
.spine i {
width: 10px;
height: 42px;
background: rgba(255, 255, 255, .16);
clip-path: polygon(60% 0, 90% 0, 40% 28%, 100% 28%, 20% 58%, 70% 58%, 10% 100%, 0 100%, 48% 54%, 8% 54%, 52% 24%, 12% 24%);
}
.spine i.on { background: var(--green); box-shadow: 0 0 10px var(--green); }
.gbody {
padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
justify-content: center;
max-width: 760px;
}
.gbody h2 {
margin: 0 0 8px;
font-family: Syne, Manrope, sans-serif;
font-size: clamp(28px, 7vw, 52px);
line-height: .95;
font-weight: 800;
}
.lead { margin: 0 0 16px; color: var(--muted); }
.pair { display: grid; gap: 12px; }
.secret { max-height: 0; overflow: hidden; }
.flip.open .secret { max-height: 90px; margin-top: 8px; }
.flip { text-align: left; color: inherit; min-height: 132px; }
.hundred {
font-family: Syne, Manrope, sans-serif;
font-size: 72px;
line-height: .8;
color: transparent;
-webkit-text-stroke: 1px var(--pink);
margin: 0 0 8px;
}
.slab {
padding: 18px;
border-radius: 22px;
border: 1px solid var(--purple);
background: rgba(10, 10, 15, .78);
box-shadow: 0 0 32px rgba(123, 47, 190, .25);
}
.slab.shake { animation: shake .35s linear; }
.yesno { display: flex; gap: 10px; margin-top: 14px; }
.yes, .no { flex: 1; padding: 14px; font-family: Syne, Manrope, sans-serif; font-size: 20px; }
.no { color: var(--pink); border-color: var(--pink); background: transparent; }
@keyframes shake {
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
@media (min-width: 880px) {
.rail { width: 212px; padding-left: 12px; padding-right: 12px; }
.navbtn {
flex: 0 0 auto;
max-height: none;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
padding: 16px 12px 16px 18px;
}
.navbtn span { font-size: 16px; }
.cards, .boards { grid-template-columns: 1fr 1fr; }
.pair { grid-template-columns: 1fr 1fr; }
.gbody { padding-left: 36px; }
.brandtext strong { font-size: 18px; }
}
@media (max-width: 420px) {
.logo { width: 34px; height: 34px; }
.brandtext strong { font-size: 12.5px; letter-spacing: 0; }
.streak { gap: 3px; }
}
@media (max-width: 360px) {
.brandtext small { display: none; }
}