@font-face {
font-family: Outfit;
src: url("outfit.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: Syne;
src: url("syne.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { spellcheck: false; }
body {
min-height: 100vh;
color: #fff;
font-family: Outfit, sans-serif;
background: #0E0E12 url("neon-field.png") center / cover fixed;
-webkit-text-size-adjust: 100%;
}
body.is-lock { overflow: hidden; }
button, a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; display: block; -webkit-user-drag: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; }
::selection { background: #7B2FBE; color: #fff; }
[hidden] { display: none !important; }
h1, h2, strong { font-family: Syne, sans-serif; font-weight: 700; }
#splash, #onboard, .sheet, .menu {
position: fixed;
inset: 0;
z-index: 30;
}
#splash {
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #0E0E12 url("empire-blur.png") center / cover;
}
#splash img { width: 148px; height: 148px; object-fit: contain; }
#splash h1 { margin: 8px 0 0; color: #FFD700; font-size: 40px; letter-spacing: .02em; }
#splash p { margin: 6px 0 0; color: #00E5FF; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
.splash-bar { width: 168px; height: 3px; margin-top: 22px; background: rgba(255, 215, 0, .28); }
.splash-bar i { display: block; height: 100%; width: 0; background: #00E5FF; animation: fill 1.5s linear forwards; }
@keyframes fill { to { width: 100%; } }
#onboard {
display: flex;
flex-direction: column;
background: #0E0E12 url("neon-field.png") center / cover;
}
.scene { display: none; flex: 1; padding: 32px 20px 8px; align-items: center; text-align: center; }
.scene.is-on { display: flex; flex-direction: column; gap: 14px; }
.kicker { margin: 0; color: #FFD700; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; }
.scene h1, .sheet-card h2 { margin: 0; font-size: 34px; color: #fff; }
.lead { margin: 0; font-size: 22px; max-width: 280px; }
.ring {
width: min(78vw, 320px);
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid rgba(255, 215, 0, .6);
box-shadow: 0 0 24px rgba(123, 47, 190, .5), inset 0 0 20px rgba(0, 229, 255, .16);
position: relative;
transform: rotate(var(--turn, 0deg));
touch-action: none;
}
.ring.is-ready { box-shadow: 0 0 0 3px #00E5FF, 0 0 18px rgba(0, 229, 255, .75); }
.ring img {
position: absolute;
left: 50%;
top: 50%;
width: 34%;
transform: translate(-50%, -50%);
object-fit: contain;
}
.ring b {
position: absolute;
font-family: Syne, sans-serif;
color: #FFD700;
font-size: 16px;
}
.ring b:nth-of-type(1) { top: 16px; left: 50%; transform: translateX(-50%); }
.ring b:nth-of-type(2) { right: 14px; top: 50%; transform: translateY(-50%); }
.ring b:nth-of-type(3) { bottom: 16px; left: 50%; transform: translateX(-50%); }
.ring b:nth-of-type(4) { left: 14px; top: 50%; transform: translateY(-50%); }
.seal {
width: min(72vw, 250px);
height: 270px;
border: 0;
background: #7B2FBE;
color: #FFD700;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
font-family: Syne, sans-serif;
font-size: 32px;
}
.seal.is-open {
background: #0E0E12;
color: #00E5FF;
filter: drop-shadow(1px 0 0 #00E5FF) drop-shadow(-1px 0 0 #00E5FF) drop-shadow(0 1px 0 #00E5FF) drop-shadow(0 -1px 0 #00E5FF) drop-shadow(0 0 10px rgba(0, 229, 255, .8));
}
.ob-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); }
.dots { display: flex; gap: 8px; }
.dots i, .pips i { width: 10px; height: 10px; background: rgba(255, 215, 0, .28); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dots i.is-on, .pips i.is-on { background: #00E5FF; }
.act, .ghost, .cut {
min-height: 52px;
padding: 12px 18px;
border-radius: 14px;
border: 2px solid #FFD700;
background: #7B2FBE;
color: #fff;
font-family: Syne, sans-serif;
font-size: 18px;
}
.ghost {
background: #0E0E12;
color: #00E5FF;
border-color: #00E5FF;
}
.act:disabled, .ghost:disabled, .cut:disabled { opacity: .45; }
.is-shake { animation: shake .35s linear; }
@keyframes shake {
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-4px); }
}
#app {
width: min(440px, 100%);
min-height: 100vh;
margin: 0 auto;
position: relative;
background: rgba(14, 14, 18, .72);
}
.top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
position: sticky;
top: 0;
z-index: 5;
background: linear-gradient(#0E0E12, rgba(14, 14, 18, .94) 72%, rgba(14, 14, 18, 0));
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand strong { display: block; color: #FFD700; font-size: 13px; white-space: nowrap; }
.brand small { color: #00E5FF; letter-spacing: .08em; text-transform: uppercase; font-size: 8px; white-space: nowrap; }
.day-btn {
width: 78px;
height: 66px;
border-radius: 16px;
border: 3px solid #FFD700;
background: #7B2FBE;
color: #fff;
font-family: Syne, sans-serif;
font-size: 22px;
box-shadow: 0 0 18px rgba(255, 215, 0, .85), 0 0 36px rgba(123, 47, 190, .5);
}
.burger {
width: 46px;
height: 46px;
justify-self: end;
border: 0;
background: transparent;
display: grid;
gap: 5px;
align-content: center;
justify-items: center;
}
.burger span { width: 22px; height: 2px; background: #fff; }
.ticker {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0;
padding: 0 16px 8px;
}
.ticker b { color: #FFD700; font-size: 28px; }
.ticker span { color: #00E5FF; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.loop-window { overflow: hidden; padding: 4px 0 12px; }
.loop-track { display: flex; width: max-content; animation: drift 22s linear infinite; }
.loop-set { display: flex; gap: 12px; padding-right: 12px; }
.loop-window.is-hold .loop-track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.loop-card {
width: 112px;
height: 132px;
flex: 0 0 auto;
border: 0;
background: rgba(14, 14, 18, .88);
color: #FFD700;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: Syne, sans-serif;
}
.loop-card img { width: 48px; height: 48px; object-fit: contain; }
.loop-card.is-on {
color: #00E5FF;
filter: drop-shadow(1px 0 0 #00E5FF) drop-shadow(-1px 0 0 #00E5FF) drop-shadow(0 1px 0 #00E5FF) drop-shadow(0 -1px 0 #00E5FF);
}
#main { padding: 4px 16px 108px; display: grid; gap: 12px; }
.view-head h2 { margin: 0; font-size: 28px; }
.view-head p, .note, .slot, .chip, .news p, .opt { margin: 0; }
.view-head p, .note { color: rgba(255, 255, 255, .78); }
.news, .board, .qcard, .panel {
position: relative;
padding: 14px 14px 14px 16px;
background: rgba(14, 14, 18, .86);
clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.news.is-pin, .board.is-done {
filter: drop-shadow(1px 0 0 #00E5FF) drop-shadow(-1px 0 0 #00E5FF) drop-shadow(0 1px 0 #00E5FF) drop-shadow(0 -1px 0 #00E5FF);
}
.news { display: grid; gap: 8px; }
.news h3 { margin: 0; font-size: 18px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tag {
color: #FFD700;
border: 1px solid #FFD700;
padding: 2px 8px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.pin, .opt, .chip, .mini {
border: 1px solid rgba(255, 215, 0, .7);
background: transparent;
color: #FFD700;
min-height: 36px;
padding: 6px 10px;
border-radius: 12px;
}
.pin.is-on, .opt.is-ok, .chip.is-got { border-color: #00E5FF; color: #00E5FF; }
.opt.is-bad, .chip.is-miss { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .55); }
.board, .qcard { width: 100%; text-align: left; color: #fff; display: grid; gap: 8px; }
.meter { height: 4px; background: rgba(255, 215, 0, .25); }
.meter span { display: block; height: 100%; background: #00E5FF; }
.slots, .choices, .opts { display: grid; gap: 8px; }
.slot {
min-height: 42px;
padding: 8px 10px;
background: rgba(123, 47, 190, .28);
display: flex;
justify-content: space-between;
align-items: center;
}
.slot b { color: #FFD700; }
.reel {
width: min(100%, 320px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.cell {
aspect-ratio: 1;
background: rgba(14, 14, 18, .9);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
display: grid;
place-items: center;
}
.cell img { width: 68%; height: 68%; object-fit: contain; }
.cell.is-hot { filter: drop-shadow(0 0 8px #00E5FF); }
.stats { display: flex; justify-content: space-between; color: #FFD700; font-family: Syne, sans-serif; }
.score { font-family: Syne, sans-serif; font-size: 42px; color: #FFD700; margin: 0; }
.dock {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: min(440px, 100%);
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #0E0E12;
border-top: 1px solid rgba(255, 215, 0, .35);
padding-bottom: env(safe-area-inset-bottom);
z-index: 6;
}
.dock button {
border: 0;
border-top: 3px solid transparent;
background: transparent;
color: #FFD700;
padding: 8px 0 10px;
display: grid;
justify-items: center;
gap: 2px;
font-size: 12px;
}
.dock button.is-on { border-top-color: #00E5FF; color: #00E5FF; }
.dock img { width: 26px; height: 26px; object-fit: contain; }
.backdrop { position: absolute; inset: 0; border: 0; background: rgba(14, 14, 18, .62); }
.sheet-card, .menu-card {
position: relative;
z-index: 1;
margin: auto 16px;
padding: 18px;
background: #0E0E12 url("empire-blur.png") center / cover;
display: grid;
gap: 12px;
clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.sheet, .menu { display: grid; }
.menu-card { width: min(280px, calc(100% - 32px)); margin-left: auto; margin-right: 0; align-content: start; }
.menu-card img { width: 72px; }
.menu-card strong { color: #FFD700; font-size: 24px; }
.menu-card button { text-align: left; }
.menu-card small, #day-note { color: rgba(255, 255, 255, .75); }
.pips { display: flex; gap: 8px; }
.cut { border-radius: 0; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); }
@media (max-width: 340px) {
.day-btn { width: 72px; height: 62px; font-size: 16px; }
.brand small { display: none; }
}
@media (min-width: 800px) {
#app { box-shadow: 0 0 0 1px rgba(255, 215, 0, .28); }
}
@media (prefers-reduced-motion: reduce) {
.splash-bar i, .loop-track, .is-shake { animation: none; }
.loop-window { overflow-x: auto; }
}