*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0b1420;color:#eaf2ff}
.app-header{display:flex;align-items:center;gap:.75rem;padding:1rem}
.logo{height:40px}
.card{background:#111a28;border:1px solid #1e2a3a;border-radius:12px;padding:1rem;margin:1rem}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.hole{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid #2d3a4f;position:relative;user-select:none;cursor:pointer;background:linear-gradient(#162133,#0c1422)}
.hole .label{position:absolute;bottom:6px;font-size:.8rem;opacity:.85}
.hole.locked{opacity:.6}
.hole.locked::after{content:'🔒';position:absolute;top:6px;right:8px;font-size:1.1rem}
.hint{opacity:.8;font-size:.9rem}
.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal .modal-content{background:#0f1928;border:1px solid #253147;border-radius:16px;max-width:420px;width:100%;padding:1.25rem;position:relative}
.modal .close{position:absolute;top:10px;right:14px;background:transparent;color:#eaf2ff;border:none;font-size:1.5rem;cursor:pointer}
.features{margin:.25rem 0 1rem 1.25rem}
.cta-row{display:flex;gap:.75rem}
button{background:#2b8cff;border:none;border-radius:10px;padding:.7rem 1rem;color:white;font-weight:600;cursor:pointer}
button.linkish{background:transparent;border:1px solid #2b8cff;color:#cfe5ff}
button:disabled{opacity:.6;cursor:not-allowed}
.game-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
#gameCanvas{width:100%;height:auto;background:#0a0f18;border:1px solid #253147;border-radius:12px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#111a28;color:#eaf2ff;border:1px solid #2a3a52;padding:.6rem 1rem;border-radius:10px}