:root {
  /* Kolory marki z szablonu Power Kids: zieleń, drewno, złote litery, niebieski pas. */
  --ink:#3a2414; --brand:#2e7d32; --brand-dark:#1f5e24; --cream:#fdf4dd;
  --muted:#7a6450; --gold:#f6b928; --gold-dark:#c98a12; --blue:#1f6fc2; --line:#efe4cf; --paper:#fff;
  font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; border:0; }
button:disabled { cursor:default; opacity:.55; }
a { color:inherit; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid var(--brand); outline-offset:4px; }
input,textarea,select { color:var(--ink); }
::selection { background:var(--gold); }
h1,h2,p { margin-top:0; }
.app-shell { width:min(1200px,100%); margin:auto; padding:0 20px; }
.site-header { height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-size:16px; font-weight:1000; line-height:.94; letter-spacing:-.8px; }
.brand-kids { display:block; font-size:20px; letter-spacing:1.4px; }
.brand-mark { width:36px; height:42px; display:grid; place-items:center; border-radius:11px; background:var(--brand); color:var(--gold); font-size:47px; line-height:1; transform:rotate(-8deg); }
.brand-dot { color:var(--brand); font-size:17px; vertical-align:top; letter-spacing:0; }
.site-header--logo { justify-content:center; height:96px; }
.site-logo { display:block; line-height:0; border-radius:50%; }
.site-logo img { display:block; height:76px; width:auto; }
.header-label { display:none; font-size:10px; font-weight:bold; letter-spacing:2.2px; color:var(--muted); }
.header-note { display:flex; align-items:center; gap:8px; font-size:10px; }
.online-dot { width:6px; height:6px; background:#74a333; border-radius:50%; box-shadow:0 0 0 4px #f0f7e8; }
.workspace { display:flex; flex-direction:column; align-items:center; margin:25px auto 8px; }
.scene-topline { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.8px; margin:0 0 16px; }
.character-panel { width:100%; text-align:center; position:relative; }
.speech-bubble { position:relative; display:flex; align-items:center; justify-content:center; width:max-content; min-height:90px; max-width:min(100%,650px); overflow-wrap:anywhere; margin:0 auto; padding:17px 22px; background:var(--cream); border:1px solid #f0dfb5; border-radius:23px; font-size:clamp(21px,3.5vw,30px); line-height:1.3; letter-spacing:0; font-weight:800; z-index:3; text-wrap:balance; }
.speech-bubble::after { content:""; position:absolute; width:15px; height:15px; background:var(--cream); bottom:-8px; left:calc(50% - 8px); border-right:1px solid #f0dfb5; border-bottom:1px solid #f0dfb5; transform:rotate(45deg); border-radius:0 0 4px; }
.speech-bubble:focus { outline:none; }
.speech-bubble.changed { animation:bubble-in .35s ease-out; }
.character-stage { position:relative; margin:3px auto 0; width:min(100%,680px); height:clamp(275px,38vh,390px); isolation:isolate; }
.mascot { position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%; aspect-ratio:1; width:auto; max-width:none; z-index:1; }
.mascot svg,.mascot canvas { width:100%; height:100%; display:block; }
.name-tag { position:absolute; left:calc(50% - 145px); bottom:24px; padding:8px 12px; border:1px solid #efe2c8; border-radius:12px; background:#fff; text-align:left; color:var(--brand); font-size:14px; font-weight:900; transform:rotate(-8deg); box-shadow:0 5px 15px #36305208; z-index:2; }
.name-tag span { display:block; font-size:8px; font-weight:400; color:var(--muted); margin-top:3px; }
.scene-star { position:absolute; z-index:2; animation:float 4s ease-in-out infinite; }
.star-one { left:calc(50% - 125px); top:25%; font-size:34px; color:var(--gold); }
.star-two { left:calc(50% + 107px); top:52%; font-size:26px; color:var(--blue); animation-delay:-2s; }
.scene-orbit { position:absolute; left:calc(50% + 105px); top:18%; width:15px; height:15px; border:3px solid #8bc34a; border-radius:50%; animation:float 5s ease-in-out infinite; }
.conversation { width:min(100%,820px); min-width:0; z-index:4; }
.step-page { animation:page-in .35s ease-out both; }
.answer-shell { display:flex; align-items:center; gap:12px; background:#fff; border:1.5px solid #dad9e0; border-radius:24px; padding:10px; box-shadow:0 8px 32px #22203e08; transition:border-color .2s,box-shadow .2s; min-width:0; }
.answer-shell:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px #2e7d321a,0 8px 32px #22203e08; }
.answer-shell:has([aria-invalid=true]) { border-color:#ce4261; }
.answer-field { flex:1; min-width:0; padding:4px 5px 4px 8px; }
.field-label { display:block; color:var(--muted); font-size:11px; font-weight:700; margin:0 0 5px; text-align:left; }
.text-input,.guest-input { display:block; border:0; border-radius:0; width:100%; min-width:0; padding:2px 0; background:transparent; font-size:20px; line-height:1.4; min-height:32px; outline:none; }
.text-input::placeholder,.guest-input::placeholder { color:#aaa6b3; }
.text-input[type=date],.text-input[type=time] { appearance:none; -webkit-appearance:none; text-align:left; }
.guest-input { font-size:17px; min-height:52px; max-height:170px; resize:vertical; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:900; border-radius:17px; min-height:57px; padding:15px 19px; font-size:14px; transition:transform .2s,background .2s,box-shadow .2s; flex-shrink:0; }
.primary-button { background:var(--gold); color:var(--ink); box-shadow:0 3px 0 var(--gold-dark); }
.primary-button:hover { background:#ffc83d; transform:translateY(-2px); box-shadow:0 5px 0 var(--gold-dark); }
.primary-button:active { transform:translateY(1px); box-shadow:0 1px 0 var(--gold-dark); }
.button-arrow { font-size:22px; font-family:Arial,sans-serif; line-height:1; }
.answer-details { display:flex; align-items:start; gap:10px; padding:13px 4px 0; color:var(--muted); }
.back-button { min-height:34px; padding:5px 8px 5px 0; flex-shrink:0; font-size:11px; color:var(--muted); background:transparent; }
.back-button:hover { color:var(--brand); }
.input-hint { font:11px/1.6 Arial,sans-serif; color:var(--muted); margin:8px 0 0; }
.answer-details .input-hint { flex:1; margin:7px 0 0; }
.question-count { font-size:10px; flex-shrink:0; margin-top:9px; color:#9995a3; }
.input-error { font:12px/1.5 Arial,sans-serif; color:#b3314e; margin:0 0 8px; }
.input-error:empty { display:none; }
.guest-count { white-space:nowrap; padding-left:10px; }
.welcome-copy { flex:1; min-width:0; padding:7px 5px 7px 10px; }
.welcome-copy .field-label { color:var(--ink); font-size:14px; margin-bottom:5px; }
.welcome-copy p { font:12px/1.5 Arial,sans-serif; margin:0; color:var(--muted); }
.party-options { min-width:0; border:0; margin:0; padding:0; }
.party-options legend { padding:0; margin-bottom:10px; }
.party-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.time-range { display:flex; align-items:flex-end; gap:12px; }
.time-range>div { flex:1; min-width:0; }
.time-range .text-input { font-size:19px; }
.time-dash { font-size:22px; color:var(--muted); padding-bottom:4px; }
.party-option { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1.5px solid var(--line); border-radius:13px; min-height:74px; padding:10px 5px; cursor:pointer; transition:background .2s,border-color .2s; }
.party-option input { position:absolute; opacity:0; width:1px; height:1px; }
.party-option:has(input:checked) { border-color:var(--brand); background:var(--cream); color:var(--brand); }
.party-option:has(input:focus-visible) { outline:3px solid var(--brand); outline-offset:2px; }
.party-icon { font-size:23px; line-height:1; }
.party-title { font-size:11px; font-weight:800; white-space:nowrap; }
.choice-shell { flex-wrap:wrap; }
.choice-shell .answer-field { flex-basis:100%; padding:6px; }
.choice-shell>.primary-button { margin:0 0 3px auto; min-height:47px; padding:10px 20px; }
.tip-box { border-radius:13px; padding:12px 16px; background:var(--cream); color:var(--muted); font:11px/1.65 Arial,sans-serif; margin-top:5px; }
.tip-box strong { color:var(--brand); }
.privacy-note { color:var(--muted); font:10px/1.6 Arial,sans-serif; margin:6px 0 14px; text-align:center; }
.motion-toggle { background:transparent; color:var(--muted); padding:8px 0; font:10px Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; }
.scene-changing .speech-bubble,.scene-changing .conversation { opacity:0; transform:translateY(-8px); transition:opacity .18s,transform .18s; }
.scene-changing { pointer-events:none; }
.assembly { text-align:center; max-width:560px; margin:auto; }
.assembly h2 { font-size:20px; letter-spacing:-.4px; margin:0 0 10px; }
.assembly-icon { display:none; }
.loading-bar { height:5px; background:var(--cream); border-radius:9px; overflow:hidden; margin:16px 0 0; }
.loading-bar::after { content:""; display:block; height:100%; background:var(--brand); border-radius:9px; animation:load 4.5s ease-out forwards; }
.loading-message { color:var(--muted); font-size:11px; margin:12px 0 20px; }
.review-mode.workspace { display:block; margin:35px auto; }
.review-mode .character-panel { display:none; }
.review-mode .conversation { width:100%; }
.review-page { display:flex; flex-direction:column; gap:0; }
.review-copy { display:contents; }
.eyebrow { color:var(--brand); font-size:9px; letter-spacing:1.6px; font-weight:800; margin:0 0 15px; }
.review-copy h1 { font-size:40px; line-height:1.12; letter-spacing:-.3px; margin:0 0 15px; }
.accent { color:var(--brand); }
.intro-copy { font:14px/1.7 Arial,sans-serif; color:var(--muted); max-width:410px; margin:0 0 23px; }
.guest-select { background:white; border:1.5px solid var(--line); border-radius:13px; width:100%; min-width:0; padding:14px; font-size:15px; margin:4px 0 18px; }
.summary-list { margin:10px 0 15px; border-top:1px solid var(--line); }
.summary-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.summary-row dt { min-width:78px; color:var(--muted); font-size:10px; }
.summary-row dd { margin:0; flex:1; overflow-wrap:anywhere; font-weight:700; }
.edit-button { background:transparent; color:var(--brand); padding:8px 0 8px 6px; font-size:11px; white-space:nowrap; }
.edit-button:hover { text-decoration:underline; }
.preview-wrap { background:var(--cream); border-radius:24px; padding:20px; order:1; margin:4px 0 20px; align-self:stretch; }
.preview-topline { display:flex; justify-content:space-between; gap:10px; font-size:9px; color:var(--brand); letter-spacing:1px; margin-bottom:18px; }
.preview-card { width:100%; max-width:390px; margin:auto; transform:rotate(1.5deg); filter:drop-shadow(0 10px 15px #50387920); }
.preview-card svg { width:100%; height:auto; display:block; border-radius:12px; }
.review-copy .summary-list,.review-copy .tip-box,.review-copy .download-actions,.review-copy>.input-hint,.review-copy .restart-button,.review-copy .download-file { order:2; }
.download-actions { display:grid; gap:12px; margin:20px 0 6px; }
.download-actions button { font-size:12px; min-height:50px; }
.download-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.secondary-button { background:white; color:var(--ink); border:1px solid var(--line); }
.secondary-button:hover { background:var(--cream); }
.restart-button { background:none; color:var(--muted); text-decoration:underline; text-underline-offset:3px; font-size:11px; text-align:left; padding:14px 0; margin-top:8px; }
.download-file { display:block; color:var(--brand); font:12px/1.6 Arial,sans-serif; padding:10px 0; overflow-wrap:anywhere; }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--ink); color:white; border-radius:14px; padding:15px 21px; width:max-content; max-width:calc(100% - 32px); box-shadow:0 4px 24px #25263230; font:13px/1.5 Arial,sans-serif; transition:opacity .25s,transform .25s; z-index:20; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:15; }
.confetti i { position:absolute; top:-20px; width:9px; height:15px; border-radius:2px; animation:confetti-fall var(--duration) ease-in forwards; animation-delay:var(--delay); left:var(--left); background:var(--color); }
.skip-link { position:fixed; top:-80px; left:20px; padding:15px; background:var(--gold); z-index:30; border-radius:10px; }
.skip-link:focus { top:10px; }
#print-area { display:none; }
@keyframes float { 50% { translate:0 -9px; rotate:8deg; } }
@keyframes bubble-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes page-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes confetti-fall { to { transform:translate(var(--drift),110vh) rotate(740deg); } }
@keyframes load { from { width:0; } to { width:100%; } }
.motion-paused *,.mascot.paused * { animation-play-state:paused!important; }
.motion-paused .step-page,.motion-paused .speech-bubble,.motion-paused .loading-bar::after { animation:none!important; }
.motion-paused .loading-bar::after { width:100%; }
.motion-paused * { transition:none!important; }
.motion-paused .confetti { display:none; }
@media(min-width:720px) {
  .app-shell { padding:0 32px; }
  .site-header { height:88px; }
  .site-header--logo { height:108px; }
  .site-logo img { height:88px; }
  .header-label { display:block; }
  .header-note { font-size:12px; }
  .workspace { margin-top:27px; }
  .speech-bubble { padding:20px 35px; min-height:112px; }
  .character-stage { height:clamp(330px,43vh,440px); }
  .name-tag { left:calc(50% - 190px); bottom:46px; padding:12px 16px; font-size:17px; }
  .name-tag span { font-size:9px; }
  .star-one { left:calc(50% - 205px); top:22%; font-size:48px; }
  .star-two { left:calc(50% + 175px); font-size:32px; }
  .scene-orbit { left:calc(50% + 167px); top:19%; width:19px; height:19px; }
  .answer-shell { border-radius:28px; padding:12px; gap:24px; }
  .answer-field { padding-left:13px; }
  .primary-button { min-height:62px; padding:18px 29px; font-size:16px; }
  .text-input { font-size:23px; }
  .welcome-copy { padding-left:16px; }
  .welcome-copy .field-label { font-size:17px; }
  .welcome-copy p { font-size:13px; }
  .choice-shell { flex-wrap:nowrap; }
  .choice-shell .answer-field { flex-basis:auto; }
  .choice-shell>.primary-button { margin:0; padding:18px 29px; min-height:62px; }
  .party-option { flex-direction:row; gap:8px; min-height:61px; }
  .party-title { font-size:13px; }
  .party-options legend { margin-bottom:8px; }
  .review-mode.workspace { max-width:1000px; margin:45px auto; }
  .review-page { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:start; }
  .review-copy { display:block; }
  .review-copy h1 { font-size:47px; }
  .preview-wrap { padding:25px; order:0; position:sticky; top:24px; align-self:start; }
}
@media(max-width:370px) {
  .app-shell { padding:0 15px; }
  .header-note { font-size:9px; }
  .speech-bubble { font-size:20px; padding:14px 16px; }
  .character-stage { height:260px; }
  .primary-button { padding:14px 15px; gap:8px; font-size:13px; }
  .welcome-answer { flex-wrap:wrap; }
  .welcome-answer>.primary-button { margin:0 0 4px auto; }
  .welcome-copy { flex-basis:100%; }
  .text-input { font-size:18px; }
  .name-tag { left:calc(50% - 133px); }
  .download-row { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .loading-bar::after { width:100%; }
  .confetti { display:none; }
}
@media print {
  /* A4 bez marginesów przeglądarki (brak nagłówków/stopek); marginesy bezpieczne liczymy sami. */
  @page { size:A4 portrait; margin:0; }
  html,body { margin:0!important; padding:0!important; background:white!important; }
  .app-shell,.confetti,.toast,.skip-link { display:none!important; }
  #print-area { display:block; }
  /* Jedna kartka = 4 zaproszenia 95 × 134,3 mm (proporcje 600:848), odstęp 8 mm, ok. 6 mm od krawędzi. */
  .print-sheet { position:relative; width:210mm; height:296mm; overflow:hidden; box-sizing:border-box; display:grid; grid-template-columns:repeat(2,95mm); grid-template-rows:repeat(2,134.3mm); gap:8mm; justify-content:center; align-content:center; break-after:page; page-break-after:always; break-inside:avoid; }
  .print-sheet:last-child { break-after:auto; page-break-after:auto; }
  /* Linie cięcia w środku odstępów. */
  .print-sheet::before,.print-sheet::after { content:''; position:absolute; z-index:0; }
  .print-sheet::before { left:50%; top:6mm; bottom:6mm; border-left:0.2mm dashed #b5b5b5; }
  .print-sheet::after { top:50%; left:6mm; right:6mm; border-top:0.2mm dashed #b5b5b5; }
  .print-card { position:relative; z-index:1; width:95mm; height:134.3mm; overflow:hidden; }
  .print-card svg { display:block; width:95mm; height:134.3mm; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}