*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;background:#f7f7f5;color:#1f2937;min-height:100vh}
.hidden{display:none!important}
.page{width:min(680px,100%);margin:0 auto;padding:20px 16px 24px}
.hero{text-align:center;padding:12px 0 14px}
.eyebrow{display:inline-block;padding:4px 10px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
h1{font-size:27px;color:#064e3b}
.sub{margin-top:8px;color:#6b7280;font-size:14px}
.modes{display:grid;gap:10px;margin-top:16px}
.mode-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;transition:.15s ease;box-shadow:0 8px 24px rgba(16,185,129,.08)}
.mode-card:hover{transform:translateY(-1px)}
.mode-card .emoji{font-size:26px}
.mode-card b{display:block;font-size:15px;color:#111827}
.mode-card small{display:block;margin-top:2px;color:#6b7280;font-size:12.5px}
.tips{margin-top:16px;background:#ecfdf5;border-radius:16px;padding:14px 16px 14px 30px}
.tips h2{font-size:15px;margin-bottom:8px}
.tips li{font-size:13px;color:#065f46;line-height:1.8}
.foot{text-align:center;margin-top:18px}
.foot a{color:#6b7280;text-decoration:none;font-size:13px}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.game-head strong{font-size:15px;color:#064e3b}
.ghost{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:7px 12px;color:#4b5563;cursor:pointer;font-family:inherit;font-size:13px}
.meta{display:flex;justify-content:space-between;margin:10px 0 12px;font-size:13px;color:#4b5563}
.board-wrap{display:grid;place-items:center}
canvas{width:min(100%,640px);height:auto;border-radius:18px;background:#f8e2b8;box-shadow:0 18px 45px rgba(16,185,129,.14);touch-action:manipulation;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:99}
.modal-card{background:#fff;border-radius:18px;max-width:330px;width:100%;padding:26px 22px;text-align:center}
.emoji{font-size:42px}
.modal-card h2{margin:8px 0 6px;color:#111827}
.modal-card p{color:#6b7280;font-size:14px}
.actions{display:grid;gap:8px;margin-top:16px}
.actions button{height:46px;border-radius:12px;border:0;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.primary{background:#10b981;color:#fff}
.actions button:not(.primary){background:#f3f4f6;color:#374151}

/* ---------- Pro / License ---------- */
.pro-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
}
.pro-badge.pro { background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; cursor: default; }
.pro-badge.btn { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.grade-card.locked { opacity: .55; position: relative; }
.grade-card.locked::after { content: "🔒"; position: absolute; top: 8px; right: 10px; font-size: 14px; }
.lock-badge { font-size: 11px; background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: middle; }
#licenseModal { position: fixed; inset: 0; z-index: 999; display: none; }
#licenseModal.open { display: block; }
.lic-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.lic-dialog {
  position: relative; max-width: 380px; margin: 12vh auto; background: #fff;
  border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); text-align: center;
}
.lic-dialog h3 { margin: 0 0 6px; font-size: 20px; }
.lic-sub { color: #6b7280; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.lic-input {
  width: 100%; box-sizing: border-box; padding: 12px; border: 2px solid #e5e7eb;
  border-radius: 10px; font-size: 15px; text-align: center; letter-spacing: 1px; text-transform: uppercase;
}
.lic-input:focus { outline: none; border-color: #f59e0b; }
.lic-error { color: #dc2626; font-size: 13px; margin: 8px 0 0; }
.lic-go {
  width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 10px;
  background: #f59e0b; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
.lic-go:disabled { opacity: .6; }
.lic-buy { font-size: 13px; color: #374151; margin: 14px 0 4px; }
.lic-buy a { color: #d97706; font-weight: 600; }
.lic-note { font-size: 11px; color: #9ca3af; margin: 0; }
.lic-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 22px; color: #9ca3af; cursor: pointer; line-height: 1;
}
.print-watermark {
  position: fixed; top: 45%; left: 50%; transform: translate(-50%,-50%) rotate(-30deg);
  font-size: 34px; font-weight: 800; color: rgba(0,0,0,.08); pointer-events: none;
  white-space: nowrap; z-index: 50;
}
@media print { .print-watermark { position: fixed; display: block !important; } }