:root { color-scheme: dark; font-family: Inter, sans-serif; background: #090b0d; color: #e8edf3; }
* { box-sizing: border-box; }
body { margin: 0; background: #090b0d; }
.shell { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
header { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-bottom: 1px solid #30404c; padding-bottom: 22px; }
.eyebrow, .mode, .game-meta, dt, .status-row span { font: 500 11px "IBM Plex Mono", monospace; letter-spacing: 0; }
.eyebrow { color: #62d8ff; } h1 { margin: 6px 0 0; font-size: 30px; } .header-right { display: flex; align-items: center; gap: 16px; }.mode { color: #ffc247; }
button { border: 1px solid #4a6273; background: #101821; color: #e8edf3; padding: 10px 14px; font: 600 13px Inter, sans-serif; cursor: pointer; } button:hover { background: #162432; } button:disabled { opacity: .6; cursor: wait; }
.status-row { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #30404c; }.status-row > div { padding: 17px 14px; border-right: 1px solid #30404c; }.status-row > div:first-child { padding-left: 0; }.status-row > div:last-child { border: 0; }.status-row span { display: block; color: #8895a1; margin-bottom: 6px; }.status-row strong { font: 500 13px "IBM Plex Mono", monospace; }
.notice { color: #98a5b1; font: 500 12px "IBM Plex Mono", monospace; margin: 20px 0; }.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }.game-card { min-height: 280px; border: 1px solid #364854; background: #0d1115; padding: 18px; }.game-meta { display: flex; justify-content: space-between; color: #85f1bc; }.game-meta time { color: #8c99a5; } h2 { margin: 16px 0 5px; font-size: 22px; } p { margin: 0; color: #95a3ae; font-size: 13px; }.probability { display: grid; grid-template-columns: 1fr auto; margin: 28px 0 18px; align-items: end; }.probability span { color: #9aa9b5; font: 500 11px "IBM Plex Mono", monospace; grid-column: 1 / -1; }.probability strong { margin-top: 4px; font-size: 18px; }.probability b { font: 700 30px "IBM Plex Mono", monospace; color: #57e389; } dl { margin: 0; border-top: 1px solid #293943; } dl div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #1f2b32; } dt { color: #8e9eaa; } dd { margin: 0; font: 500 12px "IBM Plex Mono", monospace; }.empty { margin-top: 64px; color: #e9aa57; font: 500 13px "IBM Plex Mono", monospace; }
@media (max-width: 720px) { .shell { padding: 22px 16px 40px; } header { align-items: start; flex-direction: column; } .header-right { width: 100%; justify-content: space-between; }.status-row { grid-template-columns: 1fr 1fr; }.status-row > div:nth-child(2) { border-right: 0; }.status-row > div:nth-child(n+3) { border-top: 1px solid #30404c; }.status-row > div:nth-child(3) { padding-left: 0; } }