.nt-body { min-height: 100%; background: linear-gradient(165deg, #fff5f5 0%, #fffdf8 45%, #fff 100%); }
.nt-shell { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.nt-card { width: min(100%, 26rem); background: #fff; border-radius: 1.5rem; padding: 1.25rem 1.15rem 1.5rem; box-shadow: 0 20px 50px rgba(196, 30, 58, 0.12); border: 2px solid rgba(196, 30, 58, 0.08); }
.nt-header { text-align: center; margin-bottom: 1rem; }
.nt-logo { height: 2.75rem; width: auto; margin: 0 auto 0.65rem; display: block; }
.nt-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C41E3A; margin: 0 0 0.35rem; }
.nt-title { font-size: 1.35rem; font-weight: 800; color: #1F2937; margin: 0 0 0.25rem; line-height: 1.2; }
.nt-subtitle { font-size: 1rem; font-weight: 700; color: #374151; margin: 0; }
.nt-step-stage { position: relative; min-height: 14rem; }
.nt-step { animation: nt-fade-in 0.35s ease both; }
.nt-step.hidden { display: none; }
.nt-h2 { font-size: 1.15rem; font-weight: 800; color: #1F2937; margin: 0 0 0.35rem; text-align: center; }
.nt-help { font-size: 0.9rem; color: #6B7280; text-align: center; margin: 0 0 1rem; line-height: 1.45; }
.nt-parent-note { background: linear-gradient(180deg, #fff7ed, #fff); border: 1px solid #fed7aa; border-radius: 1rem; padding: 1rem 1rem 0.9rem; margin-bottom: 1rem; text-align: left; }
.nt-lang-switch { display: flex; gap: 0.5rem; margin-bottom: 0.85rem; }
.nt-lang-btn { flex: 1; border: 2px solid #fecaca; border-radius: 999px; background: #fff; color: #374151; font-size: 0.88rem; font-weight: 800; padding: 0.55rem 0.75rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.nt-lang-btn.is-active { background: linear-gradient(135deg, #C41E3A, #E11D48); color: #fff; border-color: #C41E3A; }
.nt-parent-note-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C41E3A; margin: 0 0 0.5rem; }
.nt-parent-note-lead { font-size: 0.92rem; line-height: 1.5; color: #374151; margin: 0 0 0.65rem; }
.nt-parent-note-body { font-size: 0.88rem; line-height: 1.45; color: #6B7280; margin: 0; }
.nt-age-grid { display: grid; gap: 0.65rem; }
.nt-age-card { border: 2px solid #fecaca; border-radius: 1rem; padding: 0.95rem 1rem; background: linear-gradient(135deg, #fff7ed, #fff); text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.nt-age-card:active { transform: scale(0.98); }
.nt-age-card.is-selected, .nt-age-card:hover { border-color: #C41E3A; box-shadow: 0 8px 24px rgba(196, 30, 58, 0.12); }
.nt-age-label { display: block; font-size: 1rem; font-weight: 800; color: #1F2937; }
.nt-age-puzzle { display: block; font-size: 0.82rem; font-weight: 700; color: #C41E3A; margin-top: 0.2rem; }
.nt-form input { width: 100%; border: 2px solid #e5e7eb; border-radius: 0.85rem; padding: 0.85rem 0.9rem; font-size: 1rem; margin-bottom: 0.65rem; }
.nt-form input:focus { outline: none; border-color: #C41E3A; box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.12); }
.nt-error { color: #dc2626; font-size: 0.85rem; font-weight: 700; text-align: center; margin-bottom: 0.5rem; }
.nt-terms { font-size: 0.78rem; color: #6B7280; text-align: center; margin: 0 0 0.85rem; line-height: 1.4; }
.nt-btn { display: block; width: 100%; border: none; border-radius: 999px; font-weight: 800; padding: 0.9rem 1rem; cursor: pointer; text-align: center; text-decoration: none; font-size: 1rem; transition: transform 0.12s; }
.nt-btn:active { transform: scale(0.98); }
.nt-btn-primary { background: linear-gradient(135deg, #C41E3A, #E11D48); color: #fff; box-shadow: 0 10px 24px rgba(196, 30, 58, 0.22); }
.nt-btn-secondary { background: #fff; color: #C41E3A; border: 2px solid #fecaca; margin-top: 0.65rem; }
.nt-btn-link { background: transparent; color: #4DB6E5; margin-top: 0.5rem; box-shadow: none; }
.nt-play-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.65rem; }
.nt-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #C41E3A; background: #fff1f2; padding: 0.35rem 0.6rem; border-radius: 999px; }
.nt-timer { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; font-weight: 800; color: #1F2937; }
.nt-play-help { margin-bottom: 0.75rem; }
.nt-puzzle-root { width: 100%; aspect-ratio: 1; max-width: 100%; margin: 0 auto; touch-action: manipulation; }
.nt-puzzle-grid { display: grid; gap: 3px; width: 100%; height: 100%; background: #1F2937; border-radius: 0.85rem; padding: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.nt-puzzle-piece { position: relative; border: none; border-radius: 0.35rem; overflow: hidden; cursor: pointer; padding: 0; background-color: #374151; background-repeat: no-repeat; min-height: 0; transition: transform 0.12s, box-shadow 0.12s; -webkit-tap-highlight-color: transparent; }
.nt-puzzle-piece.is-selected { box-shadow: 0 0 0 3px #F59E0A, 0 0 0 5px rgba(245, 158, 10, 0.35); transform: scale(1.02); z-index: 1; }
.nt-puzzle-piece.is-solved-flash { animation: nt-flash 0.45s ease; }
.nt-result-title { text-align: center; font-size: 1.25rem; font-weight: 800; color: #1F2937; margin: 0 0 1rem; }
.nt-result-time-box, .nt-result-offer-box { text-align: center; border-radius: 1rem; padding: 0.85rem; margin-bottom: 0.75rem; }
.nt-result-time-box { background: linear-gradient(180deg, #fff7ed, #fff); border: 1px solid #fed7aa; }
.nt-result-offer-box { background: linear-gradient(135deg, #1f2937, #374151); color: #fff; }
.nt-result-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.35rem; opacity: 0.85; }
.nt-result-time { font-size: 2rem; font-weight: 800; margin: 0; line-height: 1.1; color: #C41E3A; }
.nt-result-puzzle { font-size: 0.85rem; font-weight: 700; margin: 0.35rem 0 0; color: #6B7280; }
.nt-result-offer { font-size: 1.75rem; font-weight: 800; margin: 0; }
.nt-loading { text-align: center; color: #6B7280; font-weight: 700; font-size: 0.9rem; }
.nt-step-success .nt-win-offer { text-align: center; font-size: 1.15rem; font-weight: 800; color: #C41E3A; margin: 0 0 0.85rem; }
.nt-success-times { text-align: center; border-radius: 1rem; padding: 0.75rem 0.85rem; margin: 0 0 0.85rem; background: linear-gradient(180deg, #fff7ed, #fff); border: 1px solid #fed7aa; }
.nt-session-time { font-size: 0.95rem; font-weight: 800; color: #1F2937; margin: 0 0 0.35rem; }
.nt-result-best { font-size: 0.85rem; font-weight: 700; color: #374151; margin: 0.45rem 0 0; }
.nt-success-image-wrap { margin: 0 0 0.85rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 28px rgba(196, 30, 58, 0.18); border: 2px solid #fecaca; }
.nt-success-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.nt-success-image.hidden { display: none; }
.nt-code-box { border: 2px dashed #C41E3A; border-radius: 1rem; padding: 0.85rem; margin-bottom: 0.75rem; text-align: center; background: #fff7ed; }
.nt-code-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; margin: 0 0 0.25rem; }
.nt-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.08em; margin: 0; word-break: break-all; color: #1F2937; }
.nt-best { text-align: center; font-size: 0.85rem; color: #374151; font-weight: 700; margin-bottom: 0.65rem; }
.nt-share-capture { position: fixed; left: -9999px; top: 0; width: 320px; pointer-events: none; z-index: -1; }
.nt-voucher-capture { position: fixed; left: -9999px; top: 0; width: 320px; pointer-events: none; z-index: -1; }
.nt-voucher-inner { background: linear-gradient(165deg, #fff5f5, #fffdf8); border: 3px solid #C41E3A; border-radius: 1.25rem; padding: 1.15rem; text-align: center; color: #1F2937; }
.nt-voucher-logo { height: 2.25rem; width: auto; margin: 0 auto 0.5rem; display: block; }
.nt-voucher-eyebrow { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #C41E3A; margin: 0 0 0.25rem; }
.nt-voucher-title { font-size: 0.95rem; font-weight: 800; margin: 0 0 0.65rem; }
.nt-voucher-puzzle-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; margin: 0 0 0.55rem; border: 2px solid #fecaca; }
.nt-voucher-time { font-size: 0.9rem; font-weight: 800; margin: 0 0 0.5rem; color: #374151; }
.nt-voucher-reward-box { background: linear-gradient(135deg, #1f2937, #374151); border-radius: 0.85rem; padding: 0.65rem 0.75rem; margin: 0 0 0.65rem; }
.nt-voucher-reward { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0; }
.nt-voucher-code-box { border: 2px dashed #C41E3A; border-radius: 0.85rem; padding: 0.65rem; margin: 0 0 0.55rem; background: #fff7ed; }
.nt-voucher-code-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6B7280; margin: 0 0 0.2rem; }
.nt-voucher-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; margin: 0; word-break: break-all; }
.nt-voucher-valid { font-size: 0.72rem; color: #6B7280; margin: 0; line-height: 1.35; }
.nt-voucher-preview { position: fixed; inset: 0; z-index: 100000; background: rgba(17, 24, 39, 0.72); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.nt-voucher-preview-card { background: #fff; border-radius: 1rem; padding: 1rem; max-width: 22rem; width: 100%; text-align: center; }
.nt-voucher-preview-card img { display: block; width: 100%; height: auto; border-radius: 0.65rem; margin: 0.65rem 0; }
.nt-voucher-preview-actions { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.nt-voucher-preview-actions .nt-btn { flex: 1; margin-top: 0; width: auto; }
.nt-voucher-preview-tip { font-size: 0.85rem; color: #374151; margin: 0 0 0.35rem; line-height: 1.4; }
.nt-share-inner { background: linear-gradient(165deg, #fff5f5, #fffdf8); border: 3px solid #C41E3A; border-radius: 1.25rem; padding: 1.25rem; text-align: center; color: #1F2937; }
.nt-share-eyebrow { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; color: #C41E3A; margin: 0 0 0.35rem; }
.nt-share-title { font-size: 0.95rem; font-weight: 800; margin: 0 0 0.65rem; }
.nt-share-puzzle-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; margin: 0 0 0.65rem; }
.nt-share-complete { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.5rem; }
.nt-share-time, .nt-share-offer { font-size: 1rem; font-weight: 800; margin: 0.25rem 0; }
@keyframes nt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nt-flash { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }