-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
13 lines (13 loc) · 8.89 KB
/
Copy pathstyles.css
File metadata and controls
13 lines (13 loc) · 8.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
:root { color-scheme: dark; font-family: Inter, ui-rounded, system-ui, sans-serif; background: #0d1815; color: #eff9ef; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: radial-gradient(circle at 75% 5%, #1c4c3e 0, transparent 29rem), #0d1815; }
button { font: inherit; } .page-shell { max-width: 1320px; padding: 36px 24px 24px; margin: auto; } header { margin-bottom: 22px; } h1 { font: 800 clamp(2.6rem, 6vw, 5rem)/.9 Georgia, serif; margin: 0; letter-spacing: -.07em; } h1 span { color: #d3fb57; } h2 { margin: 0; font: 700 1.4rem Georgia, serif; }.eyebrow { color: #9cc4ae; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 8px; }.subtitle { color: #bad2c4; margin: 13px 0 0; }
.game-layout { display: grid; grid-template-columns: minmax(520px, 1fr) 360px; gap: 20px; align-items: start; }.game-card,.brain-card { background: rgba(20, 40, 33, .88); border: 1px solid #315747; border-radius: 20px; box-shadow: 0 20px 70px #0005; }.game-card { padding: 16px; }.scorebar { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; text-align: center; margin: 0 4px 13px; }.scorebar small { display: block; color: #9bc5ad; text-transform: uppercase; font-size: .65rem; letter-spacing: .1em; }.scorebar strong { font-size: 1.7rem; }.turn-status { color: #d3fb57; font-weight: 700; }
.board { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); grid-template-rows: repeat(15, minmax(0, 1fr)); border: 4px solid #896d45; background: #896d45; gap: 1px; aspect-ratio: 1; }.square { border: 0; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; position: relative; padding: 0; background: #e8d5a9; color: #4d3d28; cursor: pointer; }.square em { font-style: normal; font-size: clamp(.32rem, 1vw, .65rem); color: #7b653e; font-weight: 800; }.square.TW { background: #d98674; }.square.DW { background: #e7a7a0; }.square.center em { color: #a65050; }.square.occupied { background: #f5e6bf; box-shadow: inset 0 0 0 1px #b99865; }.square b { font-size: clamp(.72rem, 2.1vw, 1.35rem); }.square small { position: absolute; bottom: 2px; right: 3px; font-size: .42rem; }
.rack-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap:wrap; }.rack { display: flex; gap: 4px; flex: 1; }.rack-tile { color: #48371f; background: #f5dfad; border: 2px solid #c4a36b; border-radius: 7px; height: 44px; aspect-ratio: .82; font-weight: 900; cursor: grab; position:relative; }.rack-tile small { position:absolute; right:3px; bottom:2px; font-size:.48rem; }.rack-tile.selected { transform: translateY(-7px); border-color: #d3fb57; outline: 2px solid #79922f; }.rack-tile.exchange-selected { transform:translateY(-5px); border-color:#f4a75d; outline:2px solid #b95c32; }.rack-tile.used { opacity: .32; }.primary,.secondary { border-radius: 9px; padding: 9px 12px; border: 1px solid #55745d; cursor: pointer; white-space: nowrap; }.primary { background: #d3fb57; color: #1b301d; font-weight: 800; }.secondary { background: transparent; color: #d1e7d8; }.primary:disabled,.secondary:disabled { opacity: .4; cursor: default; }.hint { min-height: 1.4em; color: #bad2c4; margin: 13px 3px 2px; font-size: .9rem; }
.brain-card { padding: 18px; }.brain-heading { display: flex; justify-content: space-between; align-items: start; }.pill { background: #315747; color: #c9e1d0; border-radius: 999px; padding: 5px 8px; font-size: .65rem; letter-spacing: .08em; font-weight: 800; }.pill.thinking { background: #d3fb57; color: #18351f; }.fly-stage { position: relative; height: 178px; overflow: hidden; }.floor { position: absolute; bottom: 18px; left: 10%; width: 80%; height: 3px; background: #52725f; }.fly { position: absolute; width: 128px; height: 88px; bottom: 14px; left: 33%; transition: left .7s ease; }.fly.moving { left:calc(33% + 56px); }.fly.thinking { animation: ponder .24s infinite alternate; }.fly.resting .body,.fly.resting .head { animation: breathe 2.8s ease-in-out infinite; }.fly.resting .wing { animation: idle-wing 3.6s ease-in-out infinite; }.body { position: absolute; width: 78px; height: 33px; left: 24px; top: 32px; border-radius: 48% 60% 54% 44%; background: repeating-linear-gradient(90deg,#855437 0 8px,#d18b43 9px 14px); }.head { position: absolute; width: 31px; height: 30px; left: 10px; top: 31px; border-radius: 50%; background: #ca7945; }.eye { position: absolute; width: 12px; height: 14px; top: 35px; border-radius: 50%; background:#de4255; z-index: 2; }.eye.one { left: 6px; }.eye.two { left: 21px; }.wing { position: absolute; width: 72px; height: 42px; left: 42px; top: 7px; border: 2px solid #b5eadb88; border-radius: 70% 25% 70% 30%; background: #9ee4d655; transform-origin: left bottom; }.wing.right { transform: rotate(24deg); }.wing.left { transform: rotate(-21deg); }.thinking .wing { animation: wing .08s infinite alternate; }.leg { position: absolute; height: 35px; width: 2px; top: 56px; background: #d99a4d; transform-origin: top; }.l1{left:47px;transform:rotate(25deg)}.l2{left:68px;transform:rotate(8deg)}.r1{left:79px;transform:rotate(-15deg)}.r2{left:91px;transform:rotate(-28deg)}@keyframes wing { to { transform: rotate(48deg) scaleY(.7); } } @keyframes ponder { to { transform: translateY(-3px) rotate(2deg); } } @keyframes breathe { 50% { transform:translateY(-2px) scaleY(1.035); } } @keyframes idle-wing { 50% { opacity:.7; } }
.neurons { height:220px; margin:10px 0 3px; border:1px solid #345d4c; border-radius:46% 46% 42% 42% / 38% 38% 55% 55%; overflow:hidden; background:radial-gradient(ellipse at center,#254638 0,#132b23 63%,#0d1e19 100%); box-shadow:inset 0 0 28px #0008; }.brain-field { display:block; width:100%; height:100%; }.brain-readout { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin:5px 0 12px; }.brain-readout div { border-top:1px solid #426553; padding-top:8px; }.brain-readout dt { font-size:.62rem; text-transform:uppercase; color:#9cc4ae; }.brain-readout dd { margin:4px 0 0; font-size:.78rem; color:#eff9ef; }.disclaimer { color:#9bb8a6; font-size:.72rem; line-height:1.45; margin:0; } footer { display:flex; align-items:center; gap:12px; margin:16px 2px; color:#9cb8a8; font-size:.78rem; }
@media (max-width: 930px) { .game-layout { grid-template-columns: 1fr; }.brain-card { max-width: 680px; }.fly-stage { height:135px; } } @media (max-width: 560px) { .page-shell { padding:24px 10px; }.game-card{padding:8px;border-radius:12px}.rack-row { flex-wrap:wrap; }.rack { order:3; flex-basis:100%; justify-content:center; }.rack-tile { height:39px; }.brain-readout { grid-template-columns:1fr; }.scorebar { grid-template-columns:1fr 1.5fr 1fr; } }
.board { position:relative; overflow:hidden; }.fly-hand { position:absolute; inset:0; z-index:8; pointer-events:none; }.fly-hand svg { width:100%; height:100%; overflow:visible; }.fly-leg-shadow polygon { fill:#120c0a; opacity:.68; filter:drop-shadow(0 5px 4px #0009); }.fly-leg-chitin polygon { fill:#55291f; stroke:#1b100d; stroke-width:4; stroke-linejoin:round; }.fly-leg-chitin .section-0 { fill:#633225; }.fly-leg-chitin .section-1 { fill:#713728; }.fly-leg-chitin .section-2 { fill:#4e251e; }.fly-arm-bristles { fill:none; stroke:#1a100d; stroke-width:2.5; stroke-linecap:round; }.fly-joint { fill:#321914; stroke:#140b09; stroke-width:5; }.fly-grip ellipse { fill:#45211a; stroke:#170d0a; stroke-width:5; }.fly-grip path { fill:none; stroke:#8a4931; stroke-width:5; stroke-linecap:round; }.fly-grip rect { fill:#f5dfad; stroke:#735637; stroke-width:3; }.fly-grip text { fill:#493718; text-anchor:middle; font:700 25px sans-serif; }
.fly.resting .wing.left { animation:idle-wing 3.6s ease-in-out infinite,idle-flutter-left 11.5s linear infinite; }.fly.resting .wing.right { animation:idle-wing 3.6s ease-in-out infinite,idle-flutter-right 11.5s linear infinite; }.fly.active { animation:active-hover .16s ease-in-out infinite alternate; }.fly.active .wing.left { animation:active-wing-left .075s linear infinite alternate; }.fly.active .wing.right { animation:active-wing-right .067s linear infinite alternate; }
@keyframes idle-flutter-left { 0%,75%,100% { transform:rotate(-21deg); } 76% { transform:rotate(-54deg) scaleY(.68); } 77% { transform:rotate(-2deg) scaleY(.94); } 78% { transform:rotate(-52deg) scaleY(.7); } 79% { transform:rotate(-4deg) scaleY(.92); } 80% { transform:rotate(-49deg) scaleY(.73); } 81% { transform:rotate(-21deg); } } @keyframes idle-flutter-right { 0%,75%,100% { transform:rotate(24deg); } 76% { transform:rotate(59deg) scaleY(.68); } 77% { transform:rotate(5deg) scaleY(.94); } 78% { transform:rotate(57deg) scaleY(.7); } 79% { transform:rotate(7deg) scaleY(.92); } 80% { transform:rotate(54deg) scaleY(.73); } 81% { transform:rotate(24deg); } } @keyframes active-hover { to { transform:translateY(-3px) rotate(1deg); } } @keyframes active-wing-left { to { transform:rotate(-61deg) scaleY(.64); } } @keyframes active-wing-right { to { transform:rotate(68deg) scaleY(.64); } }
.square.DL { background:#98c6db; }.square.TL { background:#5b9ab6; }.square.DW { background:#e7a7a0; }.square.TW { background:#d98674; }