@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Syne:wght@600&display=swap");*,:after,:before{margin:0;padding:0;box-sizing:border-box}:root{--font-dm-sans:"DM Sans",sans-serif;--font-syne:"Syne",sans-serif;--bg:#F0F0F0;--text-muted:#9a9a9a}body,html{background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.page,body,html{min-height:100vh}.page{display:flex;flex-direction:column;align-items:center;padding:40px 24px 48px;gap:32px}.logo{font-family:var(--font-syne);font-size:22px;font-weight:600;color:#4E5360;letter-spacing:-.01em;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid{display:grid;grid-template-columns:repeat(3,200px);grid-gap:18px;gap:18px;max-width:640px}@media (max-width:680px){.grid{grid-template-columns:repeat(2,1fr);max-width:420px;gap:14px}}@media (max-width:480px){.grid{grid-template-columns:1fr;max-width:240px;gap:14px}}.card{display:block;background:#ffffff;border-radius:18px;box-shadow:4px 6px 16px rgba(0,0,0,.08);cursor:pointer;text-decoration:none;position:relative;transition:transform .25s ease,box-shadow .25s ease;animation:cardReveal .35s ease both}.card:hover{transform:translateY(-4px) scale(1.03);box-shadow:6px 10px 24px rgba(0,0,0,.12)}.card:first-child{animation-delay:0s}.card:nth-child(2){animation-delay:.04s}.card:nth-child(3){animation-delay:.08s}.card:nth-child(4){animation-delay:.12s}.card:nth-child(5){animation-delay:.16s}.card:nth-child(6){animation-delay:.2s}.card:nth-child(7){animation-delay:.24s}.card:nth-child(8){animation-delay:.28s}.card:nth-child(9){animation-delay:.32s}.card:nth-child(10){animation-delay:.36s}.card:nth-child(11){animation-delay:.4s}.card:nth-child(12){animation-delay:.44s}.card:nth-child(13){animation-delay:.48s}.card:nth-child(14){animation-delay:.52s}.card:nth-child(15){animation-delay:.56s}.card:nth-child(16){animation-delay:.6s}.card:nth-child(17){animation-delay:.64s}.card:nth-child(18){animation-delay:.68s}.card-inner{margin:8px;border-radius:12px;overflow:hidden;transition:opacity .2s ease}.card.played .card-inner{opacity:.45}.icon-area{height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;gap:12px;padding:16px 16px 18px;overflow:hidden;position:relative}.text-area{text-align:center;padding:0 8px}.game-name{font-size:16px;font-weight:700;letter-spacing:-.02em;color:#ffffff;margin-bottom:2px}.game-name,.hook{font-family:var(--font-dm-sans)}.hook{color:rgba(255,255,255,.75);line-height:1.4}.badge,.hook{font-size:11px}.badge{position:absolute;top:-10px;right:-6px;background:#ffffff;border:2px solid #4e5360;border-radius:20px;padding:5px 11px;font-family:var(--font-syne);font-weight:600;color:#4E5360;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:10;-webkit-user-select:none;-moz-user-select:none;user-select:none}.footer{font-family:var(--font-dm-sans);font-size:12px;color:var(--text-muted);margin-top:auto}@keyframes cardReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scrollMap{0%{transform:translateX(0)}to{transform:translateX(-101px)}}@keyframes dotPulse{0%,to{r:3.5;opacity:.8}50%{r:5;opacity:1}}