@font-face {
font-family: "Grotesque";
src: url("grotesque.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("figtree.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: #0A0A0A;
color: #FFFFFF;
font-family: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
font-weight: 450;
font-size: 16px;
line-height: 1.35;
text-decoration: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body { position: fixed; inset: 0; width: 100%; }
button, input, a { font: inherit; color: inherit; text-decoration: none; }
button {
cursor: pointer;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
}
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; overflow-wrap: break-word; }
::selection { background: #FFFFFF; color: #0A0A0A; }
::spelling-error, ::grammar-error { color: inherit; background: transparent; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
-webkit-text-fill-color: #FFFFFF;
caret-color: #FFFFFF;
box-shadow: 0 0 0 1000px #2E2E2E inset;
}
.field {
height: 100%;
height: 100dvh;
overflow: hidden;
display: flex;
justify-content: center;
background: #0A0A0A center / cover no-repeat;
position: relative;
}
.field::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.8) 40%, rgba(10, 10, 10, 0.88));
}
.shell {
width: min(640px, 100%);
height: 100%;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.screen {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
gap: clamp(10px, 1.8dvh, 18px);
position: relative;
}
.screen[hidden] { display: none !important; }
#screen-menu, #screen-gate { overflow: auto; overscroll-behavior: contain; }
.eyebrow {
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 12px;
color: #C8C8C8;
}
.mini { width: 16px; height: 16px; object-fit: contain; }
.wordmark, h1, h2, .ignite, .buy, .dock-next {
font-family: "Grotesque", "Avenir Next", sans-serif;
font-weight: 700;
letter-spacing: -0.045em;
}
.wordmark {
font-size: clamp(48px, 13vw, 92px);
line-height: 0.84;
max-width: 100%;
}
#screen-menu { justify-content: flex-end; }
.mast { margin-bottom: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.statusline { color: #C8C8C8; font-size: 15px; max-width: 28em; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.solid, .row, .ghost, .quiet, .icon, .buy, .switch {
border: 0;
background: #2E2E2E;
color: #FFFFFF;
text-align: left;
}
.solid, .row {
width: 100%;
border-radius: 20px;
padding: 15px 16px;
min-height: 64px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
}
.solid { background: #FFFFFF; color: #0A0A0A; }
.solid small { color: #2E2E2E; }
.row small, .fine, .lede, .hint, .readout, .sheet-card p, .tool p, .setting span, .empty {
color: #C8C8C8;
}
.row small, .solid small { font-size: 13px; letter-spacing: 0; font-weight: 450; font-family: "Figtree", sans-serif; }
.solid span, .row span { font-size: 20px; letter-spacing: -0.03em; }
.gate-stage { position: relative; flex: 1; min-height: 220px; display: flex; flex-direction: column; }
.gate-copy { position: relative; z-index: 1; max-width: 16em; }
.gate-copy h1 { font-size: clamp(44px, 12vw, 80px); line-height: 0.88; margin: 12px 0; }
.lede { font-size: clamp(16px, 4vw, 18px); line-height: 1.45; max-width: 28em; }
.gate-orb {
position: absolute;
right: -22%;
bottom: 0;
width: min(74vw, 420px);
aspect-ratio: 1;
border-radius: 50%;
background: #2E2E2E;
display: grid;
place-items: center;
overflow: hidden;
}
.gate-orb img { width: 64%; height: 64%; object-fit: contain; }
.dock { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.rail { display: flex; gap: 16px; padding: 0 4px 4px; }
.rail span { color: #8A8A8A; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.rail span.on { color: #FFFFFF; }
.dock-next, .ignite, .sheet-card .solid { align-items: center; text-align: center; border-radius: 999px; }
.quiet {
background: transparent;
min-height: 44px;
width: 100%;
text-align: center;
color: #C8C8C8;
padding: 8px;
}
.bar {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
padding: 0;
}
.icon:disabled { opacity: 0.35; }
.bar-title strong { display: block; font-family: "Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.04em; font-size: 18px; }
.bar-title span, .bar-reserve span, .fireline span, .meter span, .meter em {
color: #C8C8C8;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-style: normal;
}
.bar-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.bar-reserve { text-align: right; min-width: 0; }
.bar-reserve strong, .fireline strong { font-variant-numeric: tabular-nums; font-family: "Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.04em; }
.meters { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.segments, .pips, .levels { display: flex; gap: 4px; align-items: center; }
.segments i, .pips i, .levels i { display: block; }
.segments i { width: 14px; height: 8px; border-radius: 99px; background: #2E2E2E; }
.segments i.on, .segments.white i.on { background: #FFFFFF; }
.pips i, .levels i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); }
.pips i.on, .levels i.on { background: #FFFFFF; border-color: #FFFFFF; }
#screen-play { overflow: hidden; min-height: 0; }
.board-wrap {
flex: 1 1 0;
min-height: 0;
display: grid;
place-items: center;
overflow: hidden;
container-type: size;
}
.kiln {
width: min(100%, 70vw, 520px);
aspect-ratio: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 28px;
overflow: hidden;
background: rgba(10, 10, 10, 0.35);
}
@supports (width: 1cqh) {
.kiln { width: min(100cqw, 100cqh, 520px); height: min(100cqw, 100cqh, 520px); aspect-ratio: auto; }
}
.column {
position: relative;
overflow: hidden;
height: 100%;
min-width: 0;
background: transparent;
padding: 0;
border-radius: 0;
}
.column + .column { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
.column.turning img { opacity: 0.72; }
.column.staying::after, .column.held::after {
content: "Stay";
position: absolute;
z-index: 2;
top: 8px;
left: 8px;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #FFFFFF;
}
.tile {
position: absolute;
top: 0;
background: #2E2E2E;
border-radius: 22%;
display: grid;
place-items: center;
overflow: hidden;
will-change: transform;
}
.tile img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; user-select: none; }
.tile.spark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.tile.lit { box-shadow: inset 0 0 0 2px #FFFFFF; }
.legend { display: flex; gap: 10px; align-items: center; min-height: 28px; }
.legend img { width: 26px; height: 26px; object-fit: contain; }
.readout, .hint {
min-height: 1.35em;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fireline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #2E2E2E;
border-radius: 18px;
padding: 10px 10px 10px 16px;
}
.fireline strong { font-size: 26px; }
.ghost {
border: 1px solid rgba(255, 255, 255, 0.28);
background: transparent;
border-radius: 999px;
min-height: 44px;
padding: 0 18px;
font-weight: 600;
}
.ignite { min-height: 56px; font-size: 18px; flex: none; }
button:disabled { opacity: 0.42; cursor: default; }
.scroll {
flex: 1;
min-height: 0;
overflow: auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 8px;
}
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #2E2E2E; border-radius: 99px; }
.tool {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
background: #2E2E2E;
border-radius: 22px;
padding: 16px;
}
.tool h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.03em; font-family: "Grotesque", sans-serif; }
.tool p { font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
.buy {
min-width: 92px;
min-height: 44px;
border-radius: 999px;
background: #FFFFFF;
color: #0A0A0A;
text-align: center;
padding: 0 14px;
font-size: 14px;
letter-spacing: -0.03em;
}
.buy:disabled { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.22); }
.entry {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
background: #2E2E2E;
border-radius: 18px;
padding: 12px 14px;
}
.entry .idx { color: #C8C8C8; font-variant-numeric: tabular-nums; font-size: 13px; }
.entry .who strong, .entry .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .who span { color: #C8C8C8; font-size: 13px; }
.entry b { font-variant-numeric: tabular-nums; font-family: "Grotesque", sans-serif; letter-spacing: -0.03em; }
.empty { padding: 12px 2px; }
.field-label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #C8C8C8; }
.namebox {
width: 100%;
background: #2E2E2E;
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
padding: 14px 16px;
font-size: 16px;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
box-shadow: none;
caret-color: #FFFFFF;
-webkit-appearance: none;
appearance: none;
}
.namebox::placeholder { color: #8A8A8A; opacity: 1; }
.namebox:focus { border-color: #FFFFFF; }
.setting {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 64px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.setting strong { display: block; font-weight: 600; }
.switch {
width: 52px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
position: relative;
padding: 0;
flex: none;
}
.switch i {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: #FFFFFF;
top: 3px;
left: 3px;
pointer-events: none;
}
.switch.on { background: #FFFFFF; border-color: #FFFFFF; }
.switch.on i { transform: translateX(20px); background: #0A0A0A; }
.fine { font-size: 14px; line-height: 1.45; }
.sheet {
position: absolute;
inset: 0;
z-index: 5;
background: rgba(10, 10, 10, 0.78);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.sheet[hidden] { display: none !important; }
.sheet-card {
width: min(100%, 460px);
background: #2E2E2E;
border-radius: 28px;
padding: 22px 18px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sheet-card h2 { font-size: clamp(34px, 8vw, 48px); line-height: 0.9; }
.sheet-card .solid { min-height: 54px; margin-top: 6px; }
@media (max-height: 700px) {
.gate-orb { width: min(48vw, 220px); }
.wordmark { font-size: clamp(40px, 11vw, 64px); }
.gate-copy h1 { font-size: clamp(36px, 10vw, 56px); }
.solid, .row { min-height: 56px; padding: 12px 14px; }
#screen-play { gap: 8px; }
.fireline strong { font-size: 22px; }
}
@media (min-width: 840px) {
.sheet { align-items: center; }
.screen { padding-left: 28px; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.column.turning img { opacity: 1; }
}