* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; font-family: -apple-system, sans-serif; }
body { min-height: 100vh; background: #eaf3ff; color: #123658; }
.surface { width: 100%; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { max-width: 520px; padding: 24px; border-radius: 16px; background: #ffffffed; box-shadow: 0 8px 30px #12365820; }
h1 { font-size: 24px; margin: 0 0 16px; }
p { line-height: 1.7; }
a { color: #075bbb; }
.click-surface { display: grid; grid-template-rows: 80% 20%; width: 100%; height: 100vh; height: 100dvh; color: #123658;
  text-decoration: none; background-color: #dcecff;
  background-image: linear-gradient(#93b5da55 1px, transparent 1px), linear-gradient(90deg, #93b5da55 1px, transparent 1px);
  background-size: calc(100vw / 8) calc(100vh / 18); touch-action: manipulation; }
.secondary { background: #d7f7e2; }
#status { white-space: pre-line; }

.click-region { display: grid; place-items: center; min-height: 0; padding: 12px 24px;
  text-decoration: none; color: inherit; text-align: center; touch-action: manipulation; }
.ad-region { background: #ffd891d9; border-bottom: 2px solid #d18b22; }
.other-region { background: #dcecff80; }
.click-region h1 { font-size: 20px; margin-bottom: 8px; }
.click-region p { margin: 8px 0; }

.other-region .card { padding: 8px 12px; }
.other-region h1 { font-size: 16px; margin: 0; }
.other-region p { font-size: 12px; line-height: 1.3; margin: 4px 0; }