.zp-app{--zp-green:#1b4332;--zp-green-2:#2d6a4f;--zp-yellow:#e9c46a;--zp-paper:#fcfbf9;--zp-ink:#2b2d42;--zp-muted:#6c757d;--zp-line:#e6e1d6;--zp-soft:#f4f1ea;font-family:"Baloo 2",system-ui,sans-serif;color:var(--zp-ink);max-width:1000px;margin:0 auto;padding:24px 16px;background:var(--zp-paper);border-radius:18px;box-sizing:border-box}.zp-app *{box-sizing:border-box}.zp-guest-notice{display:none;margin:0 0 12px;padding:10px 14px;border:1px solid #ead9a1;border-radius:12px;background:#fff8df;color:#67511e;font-size:13px;line-height:1.45}.zp-guest-notice.is-visible{display:block}.zp-guest-notice a{color:var(--zp-green);font-weight:700;text-decoration:underline;text-underline-offset:2px}.zp-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;margin-bottom:14px;background:#fff;border:1px solid var(--zp-line);border-radius:14px;box-shadow:0 12px 28px rgba(27,67,50,.08)}.zp-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px}.zp-header-actions .zp-button{min-height:34px;padding:6px 10px;font-size:11px}.zp-brand{display:flex;align-items:center;gap:9px;min-width:0}.zp-brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--zp-green);color:#fff;font-size:18px}.zp-brand strong{display:block;color:var(--zp-green);font-size:19px;line-height:1}.zp-brand small{display:block;margin-top:3px;color:var(--zp-muted);font-size:10px}.zp-status{display:flex;align-items:center;gap:13px;padding:8px 14px;border:1px solid #b7e4c7;border-radius:999px;background:#f0fff7;color:var(--zp-muted);font-size:12px}.zp-status b{color:var(--zp-green);font-size:15px}.zp-status span[data-zp-stage]{color:var(--zp-green)}.zp-status span[data-zp-timer-wrap]{color:var(--zp-green)}.zp-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid var(--zp-line);border-radius:10px;background:#fff;color:var(--zp-ink);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.16s ease}.zp-button:hover{border-color:var(--zp-green-2);transform:translateY(-1px)}.zp-button-primary{background:var(--zp-green);border-color:var(--zp-green);color:#fff}.zp-button-primary:hover{background:var(--zp-green-2)}.zp-button-outline{border-color:#8ed7b1;color:var(--zp-green)}.zp-intro{padding:24px 26px;margin-bottom:12px;border-radius:22px;background:linear-gradient(135deg,var(--zp-green),#245d47);color:#fff;box-shadow:0 16px 32px rgba(27,67,50,.16)}.zp-kicker{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--zp-yellow);color:var(--zp-green);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.zp-intro h1{margin:10px 0 4px;color:#fff;font-size:clamp(24px,4vw,37px);line-height:1.05}.zp-intro p{max-width:650px;margin:0;color:#d8f3dc;font-size:14px;line-height:1.45}.zp-card{padding:18px;background:#fff;border:1px solid var(--zp-line);border-radius:18px;box-shadow:0 18px 40px rgba(27,67,50,.09)}.zp-card-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:14px}.zp-card-top strong{color:var(--zp-green);font-size:12px;letter-spacing:.06em;text-transform:uppercase}.zp-card-top h2{margin:4px 0 0;color:var(--zp-green);font-size:25px;line-height:1.1}.zp-card-top p{margin:4px 0 0;color:var(--zp-muted);font-size:12px}.zp-metrics{display:flex;gap:10px}.zp-metrics span{min-width:76px;padding:9px 10px;border:1px solid #b7e4c7;border-radius:12px;background:#f0fff7;color:var(--zp-muted);font-size:11px;text-align:center}.zp-metrics b{display:block;color:var(--zp-green);font-size:17px}.zp-board-wrap{position:relative;width:min(100%,590px);margin:0 auto}.zp-tip-preview{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:16px;background:rgba(27,67,50,.72);backdrop-filter:blur(3px)}.zp-tip-preview[hidden]{display:none}.zp-tip-card{width:min(92%,520px);padding:12px;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 16px 32px rgba(0,0,0,.22);text-align:center}.zp-tip-label{display:block;margin-bottom:8px;color:var(--zp-green);font-size:12px;font-weight:800}.zp-tip-card img{display:block;width:100%;max-height:calc(100% - 28px);aspect-ratio:1;object-fit:cover;border-radius:8px}.zp-board{display:grid;width:100%;aspect-ratio:1;overflow:hidden;border:1px solid rgba(27,67,50,.3);background:#ece7df;box-shadow:0 12px 24px rgba(43,45,66,.14)}.zp-tile{min-width:0;min-height:0;padding:0;border:1px solid rgba(255,255,255,.78);border-radius:0;background-repeat:no-repeat;cursor:pointer;transition:filter .15s,transform .15s}.zp-tile:hover{z-index:2;filter:brightness(1.05);transform:scale(1.006)}.zp-tile.is-selected{z-index:4;border-color:var(--zp-yellow);box-shadow:inset 0 0 0 3px var(--zp-yellow);transform:scale(.985)}.zp-complete{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(27,67,50,.55);backdrop-filter:blur(2px)}.zp-complete[hidden]{display:none}.zp-complete-card{width:min(94%,520px);padding:22px 18px;text-align:center;color:#fff;background:rgba(27,67,50,.95);border:1px solid rgba(255,255,255,.68);box-shadow:0 16px 32px rgba(0,0,0,.25)}.zp-trophy{display:block;color:var(--zp-yellow);font-size:28px}.zp-label{display:block;margin:2px 0 9px;color:#b7e4c7;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.zp-complete-card img{display:block;width:100%;max-height:150px;margin:0 auto 10px;object-fit:cover;opacity:.88}.zp-quote{font-size:clamp(17px,3vw,26px);font-style:italic;font-weight:700;line-height:1.16}.zp-author{margin-top:5px;color:var(--zp-yellow);font-size:12px;font-weight:700}.zp-final-message{margin-top:7px;color:var(--zp-yellow);font-size:14px;font-weight:800}.zp-complete-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.zp-complete-stats span{padding:7px;border:1px solid rgba(255,255,255,.18);border-radius:9px;color:#d8f3dc;font-size:10px}.zp-complete-stats b{display:block;color:#fff;font-size:16px}.zp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.zp-actions .zp-button{flex:1;min-width:130px;font-size:12px}.zp-unlock-panel{margin:13px 0 4px;padding:12px;border:1px solid rgba(233,196,106,.65);background:rgba(255,255,255,.08);text-align:left}.zp-unlock-panel[hidden]{display:none}.zp-unlock-panel strong{display:block;color:var(--zp-yellow);font-size:14px}.zp-unlock-panel p{margin:4px 0 10px;color:#d8f3dc;font-size:12px;line-height:1.4}.zp-unlock-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}.zp-unlock-actions label{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:700}.zp-unlock-actions select{min-height:34px;padding:5px 8px;border:1px solid var(--zp-yellow);border-radius:8px;background:#fff;color:var(--zp-green);font-family:inherit;font-weight:700}.zp-unlock-actions a{color:#fff;text-decoration:underline;text-decoration-color:var(--zp-yellow);font-size:12px;font-weight:700}.zp-unlock-actions span{color:#d8f3dc;font-size:11px}.zp-highscore{margin-top:22px;padding:18px;background:#fff;border:1px solid var(--zp-line);border-radius:16px}.zp-highscore h2{margin:0 0 10px;color:var(--zp-green);font-size:22px}.zp-highscore table{width:100%;border-collapse:collapse;font-size:12px}.zp-highscore th,.zp-highscore td{padding:8px;text-align:left;border-bottom:1px solid var(--zp-line)}.zp-highscore th{color:var(--zp-green)}@media(max-width:650px){.zp-app{padding:14px 10px}.zp-header{flex-wrap:wrap;padding:10px}.zp-header-actions{width:100%;justify-content:stretch}.zp-header-actions .zp-button{flex:1;min-width:0}.zp-status{order:3;width:100%;justify-content:center;gap:8px;padding-inline:8px}.zp-intro{padding:19px 17px}.zp-intro h1{font-size:26px}.zp-card{padding:10px}.zp-card-top{align-items:flex-start;flex-direction:column}.zp-metrics{width:100%}.zp-metrics span{flex:1;min-width:0;padding-inline:5px}.zp-complete{padding:10px;overflow:auto;align-items:start}.zp-complete-card{padding:16px 12px;max-height:100%;overflow:auto}.zp-complete-card img{max-height:105px}.zp-quote{font-size:clamp(16px,5vw,21px)}.zp-complete-stats{margin:10px 0}.zp-actions{flex-direction:column}.zp-actions .zp-button{width:100%}}
