44 lines
3.0 KiB
CSS
44 lines
3.0 KiB
CSS
body { margin: 0; min-height: 100vh; background: #080d16; color: #e5e7eb; font-family: Inter, system-ui, sans-serif; }
|
|
.ttt-shell { max-width: 760px; margin: 0 auto; padding: 16px; }
|
|
.ttt-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
|
|
.ttt-header h2 { margin: 0; font-size: 32px; }
|
|
.ttt-header p:not(.ttt-kicker) { margin: 4px 0 0; color: #94a3b8; font-size: 13px; }
|
|
.ttt-kicker { margin: 0 0 4px; color: #38bdf8; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
|
|
.ttt-header button,
|
|
.ttt-lobby button { border: 1px solid #475569; border-radius: 0; padding: 8px 10px; background: #111827; color: #e5e7eb; cursor: pointer; }
|
|
.ttt-header button:hover,
|
|
.ttt-lobby button:hover { background: #1e293b; }
|
|
.ttt-game { display: flex; flex-direction: column; align-items: center; }
|
|
.ttt-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; width: min(100%, 520px); margin-bottom: 10px; color: #94a3b8; font-size: 12px; }
|
|
.ttt-match strong { color: #e5e7eb; text-align: center; }
|
|
.ttt-match span:last-child { text-align: right; }
|
|
.ttt-frame { border: 8px solid #1e293b; background: #0f172a; padding: 8px; }
|
|
.ttt-board { display: grid; grid-template-columns: repeat(3, 110px); gap: 2px; background: #334155; }
|
|
.ttt-cell { width: 110px; height: 110px; border: 0; border-radius: 0; background: #111827; color: #e5e7eb; font-size: 58px; font-weight: 700; cursor: pointer; }
|
|
.ttt-cell:hover:not(:disabled) { background: #1e293b; }
|
|
.ttt-cell.mark-x { color: #38bdf8; }
|
|
.ttt-cell.mark-o { color: #fb7185; }
|
|
.ttt-cell:disabled { cursor: default; }
|
|
.ttt-status { min-height: 18px; margin: 8px 0 24px; color: #94a3b8; font-size: 13px; text-align: center; }
|
|
.ttt-lobby { box-sizing: border-box; width: min(100%, 520px); margin: 0 auto; padding: 12px; border: 1px solid #334155; background: #0c1420; }
|
|
.ttt-lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
.ttt-lobby h3 { margin: 0; font-size: 18px; }
|
|
.ttt-challenges { margin-top: 10px; }
|
|
.ttt-challenge { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: 1px solid #1e293b; }
|
|
.ttt-challenge span { color: #cbd5e1; font-size: 13px; }
|
|
.ttt-empty { color: #94a3b8; font-size: 13px; }
|
|
.ttt-confetti { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
|
|
.ttt-confetti i { position: absolute; top: -18px; width: 10px; height: 16px; animation: ttt-confetti-fall 1.2s linear forwards; }
|
|
@keyframes ttt-confetti-fall {
|
|
from { transform: translateY(-5vh) rotate(0deg); }
|
|
to { transform: translateY(110vh) rotate(720deg); }
|
|
}
|
|
@media (max-width: 440px) {
|
|
.ttt-shell { padding: 8px; }
|
|
.ttt-header { align-items: flex-start; flex-direction: column; }
|
|
.ttt-board { grid-template-columns: repeat(3, 82px); }
|
|
.ttt-cell { width: 82px; height: 82px; font-size: 44px; }
|
|
.ttt-match { grid-template-columns: 1fr; gap: 4px; text-align: center; }
|
|
.ttt-match span:last-child { text-align: center; }
|
|
}
|