extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0;}
:root { /* Sunset Sky Palette - extracted from aerial cloudscape */ --sky-apricot: #F2C5A0; --sky-apricot-light: #F8DCC5; --sky-apricot-dark: #E5A878; --sky-rose: #D4A8B5; --sky-rose-light: #E5C5CE; --sky-rose-dark: #8B5A6B; --sky-mauve: #C5A0B0; --sky-blue-light: #B8D4E3; --sky-blue-pale: #D4E5EF; --sky-slate: #5A7A90; --sky-slate-light: #7A98AD; --sky-slate-dark: #455D6E; --sky-gray: #94A8B8; --sky-gray-light: #B5C5D0; --sky-cloud: #E8EFF4; --sky-white: #F5F8FA;
/* Semantic aliases */ --color-bg: var(--sky-cloud); --color-bg-card: var(--sky-white); --color-text: var(--sky-slate-dark); --color-text-muted: var(--sky-gray); --color-text-light: var(--sky-gray-light); --color-primary: var(--sky-apricot-dark); --color-primary-hover: var(--sky-apricot); --color-primary-light: var(--sky-apricot-light); --color-secondary: var(--sky-rose); --color-secondary-hover: var(--sky-rose-light); --color-accent: var(--sky-slate); --color-accent-hover: var(--sky-slate-light); --color-border: var(--sky-blue-pale); --color-link: var(--sky-slate); --color-link-hover: var(--sky-apricot-dark);
/* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Nunito', 'Varela Round', 'Quicksand', sans-serif;
font-family: var(--font-body); line-height: 1.6; color: var(--color-text);}
body { background: linear-gradient(180deg, var(--sky-blue-pale) 0%, var(--sky-cloud) 30%, var(--sky-white) 100%); min-height: 100vh; overflow-x: hidden;}
/* Animated clouds background */.clouds-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden;}
.cloud { position: absolute; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 239, 244, 0.7) 100%); border-radius: 50%; filter: blur(1px); opacity: 0.6;}
.cloud::before,.cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%;}
/* Cloud shapes - varied sizes from small to large */.cloud-1 { width: 120px; height: 35px; top: 8%; animation: drift-1 60s linear infinite; opacity: 0.5;}.cloud-1::before { width: 55px; height: 45px; top: -25px; left: 15px;}.cloud-1::after { width: 65px; height: 40px; top: -20px; right: 10px;}
.cloud-2 { width: 320px; height: 90px; top: 20%; animation: drift-2 130s linear infinite; animation-delay: -20s; opacity: 0.55;}.cloud-2::before { width: 160px; height: 120px; top: -70px; left: 40px;}.cloud-2::after { width: 140px; height: 85px; top: -40px; right: 40px;}
.cloud-3 { width: 90px; height: 28px; top: 38%; animation: drift-3 50s linear infinite; animation-delay: -15s; opacity: 0.4;}.cloud-3::before { width: 45px; height: 38px; top: -22px; left: 12px;}.cloud-3::after { width: 50px; height: 32px; top: -16px; right: 8px;}
.cloud-4 { width: 400px; height: 110px; top: 55%; animation: drift-1 150s linear infinite; animation-delay: -70s; opacity: 0.4;}.cloud-4::before { width: 200px; height: 140px; top: -80px; left: 60px;}.cloud-4::after { width: 170px; height: 100px; top: -50px; right: 50px;}
.cloud-5 { width: 180px; height: 50px; top: 75%; animation: drift-2 85s linear infinite; animation-delay: -40s; opacity: 0.35;}.cloud-5::before { width: 85px; height: 65px; top: -38px; left: 25px;}.cloud-5::after { width: 95px; height: 55px; top: -28px; right: 15px;}
/* Drift animations - clouds move at different speeds and paths */@keyframes drift-1 { 0% { left: -300px; } 100% { left: 100vw; }}
@keyframes drift-2 { 0% { left: 100vw; } 100% { left: -350px; }}
@keyframes drift-3 { 0% { left: -250px; } 100% { left: 100vw; }}
/* Ensure main content is above clouds */.page-content { position: relative; z-index: 1;}
/* Cloud-like card styling */.cloud-card { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 248, 250, 0.9) 50%, rgba(232, 239, 244, 0.85) 100% ); border: none; border-radius: 2rem 2.5rem 2rem 2.2rem; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4), 0 8px 32px rgba(90, 122, 144, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); position: relative;}
.cloud-card::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.6) 0%, rgba(212, 229, 239, 0.3) 50%, rgba(255, 255, 255, 0.4) 100% ); filter: blur(4px); z-index: -1;}
a { color: inherit; text-decoration: none;}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em;}
button { font-family: var(--font-heading); font-weight: 600;}
/* Floating cloud effect - subtle rotation for natural off-kilter look */.games-list .game-item:nth-child(odd),.archive-grid .archive-card:nth-child(odd),.waiting-games-grid .game-item-compact:nth-child(odd) { transform: rotate(0.5deg);}
.games-list .game-item:nth-child(even),.archive-grid .archive-card:nth-child(even),.waiting-games-grid .game-item-compact:nth-child(even) { transform: rotate(-0.5deg);}
.games-list .game-item:nth-child(3n),.archive-grid .archive-card:nth-child(3n),.waiting-games-grid .game-item-compact:nth-child(3n) { transform: rotate(1deg);}
.games-list .game-item:nth-child(4n),.archive-grid .archive-card:nth-child(4n),.waiting-games-grid .game-item-compact:nth-child(4n) { transform: rotate(-1deg);}
.games-list .game-item:nth-child(5n),.archive-grid .archive-card:nth-child(5n),.waiting-games-grid .game-item-compact:nth-child(5n) { transform: rotate(0.25deg);}
/* Modal styles */.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(90, 122, 144, 0.3); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease-out;}
.modal-content { max-width: 650px; width: 100%; max-height: 90vh; overflow: visible; animation: slideIn 0.3s ease-out; display: flex; flex-direction: column;}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);}
.modal-header h2 { margin: 0; color: var(--color-text); font-size: 1.5rem;}
.modal-close { background: none; border: none; font-size: 1.5rem; color: var(--color-text-muted); cursor: pointer; padding: 0.25rem 0.5rem; transition: color 0.2s;}
.modal-close:hover { color: var(--color-text);}
.modal-body { margin-bottom: 1.5rem; color: var(--color-text); line-height: 1.8;}
.modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--color-border);}
.modal-footer button { padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; transition: all 0.2s; font-weight: 500;}
.modal-footer .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); color: white; box-shadow: 0 2px 8px rgba(242, 197, 160, 0.3);}
.modal-footer .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242, 197, 160, 0.4);}
.modal-footer .btn-secondary { background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border);}
.modal-footer .btn-secondary:hover { background: var(--color-border);}
.modal-progress { text-align: center; margin-bottom: 1rem; color: var(--color-text-muted); font-size: 0.875rem;}
/* Footer styles */.site-footer { position: relative; margin-top: 4rem; padding: 2rem 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; z-index: 1;}
.site-footer a { color: var(--color-link); text-decoration: none; transition: color 0.2s;}
.site-footer a:hover { color: var(--color-link-hover); text-decoration: underline;}
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap;}
.footer-links button,.footer-links a { background: none; border: none; cursor: pointer; color: var(--color-link); font-size: 0.9rem; padding: 0.5rem 1rem; transition: all 0.2s;}
.footer-links button:hover,.footer-links a:hover { color: var(--color-link-hover);}
.footer-credit { margin-top: 0.5rem;}
/* Tenuki board container */.tenuki-board { margin: 1.5rem auto; display: flex; justify-content: center;}
.tenuki-board canvas { border-radius: 0.5rem; box-shadow: 0 2px 8px rgba(90, 122, 144, 0.15);}
/* Animations */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
@keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}