32 lines
2.4 KiB
CSS
32 lines
2.4 KiB
CSS
:root{font-family:system-ui,-apple-system,"PingFang SC",sans-serif;color:#3c4d5b;background:#f1e7e5;font-synthesis:none}
|
|
*{box-sizing:border-box}
|
|
body{margin:0}
|
|
main{max-width:900px;margin:auto;padding:16px 28px 20px}
|
|
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
|
|
.back{color:#526575;text-decoration:none;font-size:13px}
|
|
.badge{font-size:11px;letter-spacing:.08em;color:#7d5864;border:1px solid #d6bac2;border-radius:20px;padding:7px 12px}
|
|
.intro{text-align:center;margin:10px 0 12px}
|
|
.eyebrow{font-size:10px;letter-spacing:.24em;color:#8b6873}
|
|
h1{font-size:28px;letter-spacing:.15em;margin:7px 0 10px;font-weight:650}
|
|
.intro>p:last-child{font-size:13px;margin:0;color:#65717b}
|
|
.status{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:620px;margin:auto;font-size:12px;color:#65717b}
|
|
.status strong{font-size:24px;color:#3c4d5b;margin-left:6px}
|
|
#progress{font-size:11px}
|
|
.board-wrap{width:100%;height:clamp(400px,calc(100svh - 310px),740px);min-height:380px}
|
|
canvas{width:100%;height:100%;display:block;touch-action:manipulation}
|
|
.message{margin:4px 0 18px;text-align:center;font-size:13px;min-height:36px;line-height:1.6}
|
|
.controls{display:flex;justify-content:center;gap:14px}
|
|
button{font:24px system-ui;color:#526575;background:#fffaf5;border:1px solid #dfd4cf;border-radius:18px;min-width:74px;min-height:66px;padding:6px 12px;cursor:pointer;box-shadow:0 3px 0 #d7c8c5}
|
|
button span{display:block;font-size:11px}
|
|
button:hover{background:#fff}
|
|
button:active{transform:translateY(2px);box-shadow:0 1px 0 #d7c8c5}
|
|
button:disabled{opacity:.4;cursor:default}
|
|
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #98708a;outline-offset:4px}
|
|
footer{text-align:center;margin:18px auto 0;max-width:560px;font-size:11px;color:#6b757e;line-height:1.7}
|
|
h1 small{font-size:13px;letter-spacing:.1em;font-weight:500;vertical-align:middle;border-left:1px solid #c9b0b8;margin-left:5px;padding-left:12px;color:#8b6873}
|
|
footer label{display:inline-flex;align-items:center;gap:7px;margin:0 8px;font-size:12px;color:#526575;cursor:pointer}
|
|
footer p{margin:8px 0 0}
|
|
input{accent-color:#8b6873}
|
|
@media(max-width:540px){main{padding:16px 14px 20px}.intro{margin:12px 0}h1{font-size:28px}.board-wrap{height:380px;min-height:0}.controls{gap:9px}button{min-width:57px;min-height:60px;padding:5px 9px}.message{font-size:12px;margin-bottom:12px}footer{margin-top:22px}}
|
|
@media(prefers-reduced-motion:reduce){button:active{transform:none}}
|