/* Native play tools: a four-step guide, a reversible sticker board and a local Tamer badge. */
.playkit{max-width:960px;padding-bottom:calc(var(--sb) + 40px)}
.pk-head{max-width:760px;margin:0 auto 14px}.pk-head .top-row{margin-bottom:24px}.pk-head .kid-h1{text-align:center;font-size:clamp(2rem,6vw,3rem);margin:0}.pk-eyebrow{color:var(--gold);font:900 .78rem var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0 0 6px}.pk-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(242,193,78,.35);border-radius:50%;color:var(--gold)}.pk-mark .ic{width:23px;height:23px}
.pk-intro,.pk-tool-intro{max-width:620px;text-align:center;margin:8px auto 24px;color:var(--moon-soft);font:700 1.08rem/1.5 var(--sans)}
.pk-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px auto 0}
.pk-tool{appearance:none;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0;min-height:290px;padding:26px 20px;border-radius:24px;border:1px solid rgba(198,194,230,.25);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(16,19,51,.8));color:var(--moon);font-family:var(--sans);cursor:pointer;box-shadow:0 18px 40px -28px #000}
.pk-tool-icon{display:grid;place-items:center;width:82px;height:82px;border-radius:28px;background:#cfbdf4;color:#2c2754;box-shadow:inset 0 -5px 0 rgba(26,20,65,.15),inset 0 3px 0 rgba(255,255,255,.35)}.pk-tool-icon .ic{width:38px;height:38px}.pk-tool.seals .pk-tool-icon{background:#ffd985}.pk-tool.tamer .pk-tool-icon{background:#f1b7c9}
.pk-tool-title{font:600 1.5rem/1.15 var(--serif)}.pk-tool-copy{color:var(--moon-soft);font:700 .94rem/1.45 var(--sans)}.pk-tool-action{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:auto;font:900 .94rem var(--sans);color:var(--gold)}.pk-tool-action .ic{width:18px;height:18px}
.pk-note{max-width:620px;text-align:center;font:700 .9rem/1.55 var(--sans);color:var(--moon-soft);margin:26px auto 0}.pk-footer{max-width:620px;margin:26px auto 0;text-align:center;color:var(--gold);font:600 1.1rem/1.4 var(--serif)}.pk-footer p{margin:6px 0}.pk-status{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:600px;margin:40px auto;text-align:center;font:700 1.15rem var(--sans);color:var(--moon-soft)}.pk-status .big{width:48px;height:48px;color:var(--gold)}
.pk-steps{display:flex;justify-content:center;gap:16px;margin:28px auto}.pk-step-dot{appearance:none;display:grid;place-items:center;min-width:64px;min-height:64px;border:1px solid rgba(198,194,230,.35);border-radius:50%;background:rgba(255,255,255,.05);font:600 1.5rem var(--serif);color:var(--moon-soft);cursor:pointer}.pk-step-dot[aria-current="step"]{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);box-shadow:0 8px 28px -16px var(--gold)}
.pk-guide-page{position:relative;max-width:680px;min-height:330px;margin:auto;padding:34px 30px;border-radius:28px;border:1px solid rgba(198,194,230,.25);background:linear-gradient(145deg,#333879,#191e4c);overflow:hidden;text-align:center;isolation:isolate}.pk-guide-number{position:absolute;top:-8px;right:12px;z-index:-1;font:600 15rem/1 var(--serif);color:rgba(245,241,255,.045)}.pk-guide-page h2{font:600 clamp(1.7rem,5vw,2.3rem)/1.15 var(--serif);margin:15px 0 16px}.pk-guide-copy{max-width:450px;margin:0 auto;color:var(--moon-soft);font:800 1.2rem/1.5 var(--sans)}.pk-guide-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:32px auto 0;max-width:450px}.pk-guide-actions .kbig{padding:.8rem 1.6rem;min-height:64px;font-size:1.1rem}.pk-guide-actions button:disabled{opacity:.3;cursor:default}
.pk-seal-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:620px;margin:0 auto 28px}.pk-seal-choice{appearance:none;display:grid;place-items:center;min-width:0;min-height:90px;padding:8px;background:transparent;border:2px solid transparent;border-radius:22px;color:var(--moon);cursor:pointer}.pk-seal-choice[aria-pressed="true"]{border-color:var(--gold);background:rgba(242,193,78,.1)}
.pk-seal{--seal:#f4cb77;--seal-ink:#473015;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;max-width:116px;aspect-ratio:1;border:4px double var(--seal-ink);outline:5px solid var(--seal);outline-offset:-1px;border-radius:50%;background:var(--seal);color:var(--seal-ink);box-shadow:inset 0 0 0 6px rgba(255,255,255,.25),0 7px 16px -11px #000;transform:rotate(-4deg);pointer-events:none;padding:9px;font-family:var(--sans)}
.pk-seal-star{font-size:1.2rem;line-height:1;margin-bottom:4px}.pk-seal-text{max-width:90px;text-align:center;font:1000 clamp(.72rem,2.4vw,1.02rem)/1.05 var(--sans);overflow-wrap:normal}.seal-1{--seal:#ccb4ed;--seal-ink:#3b225a;transform:rotate(5deg)}.seal-2{--seal:#edb6c5;--seal-ink:#612d40;transform:rotate(-7deg)}.seal-3{--seal:#a8d6da;--seal-ink:#234b55;transform:rotate(7deg)}.seal-4{--seal:#f2bc89;--seal-ink:#653719;transform:rotate(-3deg)}.seal-5{--seal:#c5dab2;--seal-ink:#304c25;transform:rotate(3deg)}.seal-6{--seal:#adcaf3;--seal-ink:#273e64;transform:rotate(-5deg)}.seal-7{--seal:#d5c0e1;--seal-ink:#4e335a;transform:rotate(6deg)}
.pk-board-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:720px;margin:20px auto 12px}.pk-board-heading h2{font:600 1.45rem var(--serif);margin:0}.pk-board-heading > span{font:800 .85rem var(--sans);color:var(--moon-soft)}
.pk-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;max-width:720px;padding:24px;border:1px solid #eee2cb;border-radius:28px;margin:auto;background:radial-gradient(circle,#b6ad9c 1px,transparent 1.3px) 0 0/18px 18px,#fbf5e9;box-shadow:0 20px 40px -28px #000}.pk-board-slot{appearance:none;display:grid;place-items:center;min-width:0;min-height:64px;aspect-ratio:1;border:1px dashed #b8ad95;border-radius:20px;padding:10px;background:rgba(255,255,255,.2);cursor:pointer}.pk-board-slot.filled{border-color:transparent;background:transparent}.pk-board-slot .pk-seal{max-width:132px}.pk-slot-plus{color:#aaa18e;font:400 2.2rem var(--sans)}
.pk-edit-actions{display:flex;justify-content:center;align-items:center;gap:12px;margin:24px auto 0}.pk-edit-actions .kback{font-size:.95rem}.pk-edit-actions button:disabled{opacity:.3;cursor:default}
.pk-badge{position:relative;max-width:400px;min-height:370px;display:flex;flex-direction:column;align-items:center;padding:26px 24px 30px;margin:26px auto 30px;border:6px double #c6ab68;border-radius:30px;background:radial-gradient(circle at 12% 9%,#fdf0cb 0,transparent 50%),#fbf5e9;color:#29234b;box-shadow:0 18px 42px -24px #000}.pk-badge-brand{font:900 .75rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#77704d}.pk-badge h2{font:600 2rem var(--serif);margin:8px 0 18px}.pk-badge-friend{width:140px;max-width:45vw;display:grid;place-items:center}.pk-badge-friend .tile{border-radius:12px}.pk-badge-empty{display:grid;place-items:center;width:140px;aspect-ratio:.716;border-radius:20px;background:#e3d7ec;border:1px solid #cbbbce;color:#867095}.pk-badge-empty .ic{width:52px;height:52px}.pk-badge-name{max-width:240px;font:900 1rem var(--sans);margin:16px auto 0;text-align:center}.pk-badge-seal{position:absolute;bottom:66px;right:17px;width:100px;max-width:27vw;filter:drop-shadow(0 5px 3px rgba(42,28,10,.12))}.pk-badge-seal .pk-seal-text{font-size:.82rem}
.pk-field-label{display:flex;flex-direction:column;gap:10px;max-width:480px;margin:0 auto 22px;font:800 1rem var(--sans);color:var(--moon-soft)}.pk-select{width:100%;min-height:64px;padding:12px 16px;border:1px solid rgba(198,194,230,.35);border-radius:16px;background:#252b61;color:var(--moon);font:800 1rem var(--sans)}.pk-seal-heading{font:600 1.4rem var(--serif);text-align:center;margin:25px auto 15px}
.playkit button:focus-visible,.pk-select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
@media(max-width:680px){.pk-tools{grid-template-columns:1fr}.pk-tool{min-height:0;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;row-gap:7px;text-align:left;justify-items:start;padding:22px}.pk-tool-icon{grid-column:1;grid-row:1/4;width:72px;height:72px;border-radius:23px}.pk-tool-title{grid-column:2;font-size:1.35rem}.pk-tool-copy,.pk-tool-action{grid-column:2}.pk-seal-picker{gap:8px}.pk-seal-choice{padding:6px;border-radius:17px}.pk-board{gap:9px;padding:17px}.pk-board-slot{padding:7px;border-radius:15px}}
@media(max-width:420px){.pk-seal-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.pk-seal-choice{min-height:78px;padding:5px}.pk-seal{border-width:3px;padding:7px;outline-width:3px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}.pk-seal-star{font-size:.9rem;margin-bottom:3px}.pk-seal-text{font-size:.72rem}.pk-board{grid-template-columns:repeat(3,minmax(0,1fr))}.pk-guide-page{padding:28px 20px}.pk-steps{gap:12px}.pk-guide-actions{gap:9px}.pk-guide-actions .kbig{padding:.8rem 1rem;font-size:1rem}.pk-guide-actions .kback{padding:0 12px;font-size:.95rem}.pk-badge-seal{right:12px}}

/* Fit the guide's existing step controls on short landscape screens. */
@media (orientation: landscape) and (max-height: 560px) {
  .playkit:has(> .pk-guide-page) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-bottom: calc(var(--sb) + 12px);
  }
  .playkit:has(> .pk-guide-page) .pk-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    margin: 0;
  }
  .playkit:has(> .pk-guide-page) .pk-head .top-row { grid-row: span 2; margin: 0; }
  .playkit:has(> .pk-guide-page) .pk-head .kback {
    min-width: 0;
    min-height: 44px;
    gap: 6px;
    padding: 4px 8px;
    font-size: .85rem;
    white-space: nowrap;
  }
  .playkit:has(> .pk-guide-page) .pk-head .kback .ic { width: 18px; height: 18px; }
  .playkit:has(> .pk-guide-page) .pk-head .pk-mark { display: none; }
  .playkit:has(> .pk-guide-page) .pk-head > .pk-eyebrow { margin: 0; text-align: start; }
  .playkit:has(> .pk-guide-page) .pk-head .kid-h1 {
    grid-column: 2;
    font-size: 1.25rem;
    text-align: start;
  }
  .playkit:has(> .pk-guide-page) .pk-steps { gap: 4px; margin: 0; }
  .playkit:has(> .pk-guide-page) .pk-step-dot { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
  .playkit > :is(.pk-guide-page, .pk-guide-page ~ .pk-note, .pk-guide-page ~ .pk-footer) { grid-column: 1 / -1; }
  .pk-guide-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
  }
  .pk-guide-page h2 { margin: 0; font-size: 1.45rem; }
  .pk-guide-page .pk-eyebrow { margin: 0; }
  .pk-guide-copy { max-width: 58ch; font-size: 1rem; line-height: 1.35; }
  .pk-guide-actions { gap: 8px; width: 100%; margin: 0 auto; }
  .pk-guide-page :is(.kback, .kbig) { min-height: 44px; padding: 6px 10px; font-size: .92rem; }
  .pk-guide-page:has(> [data-pk-focus="choose-seal"]) { grid-template-columns: minmax(0, 1fr) auto; }
  .pk-guide-page:has(> [data-pk-focus="choose-seal"]) > :is(.pk-eyebrow, h2, .pk-guide-copy) { grid-column: 1 / -1; }
  .pk-guide-page > [data-pk-focus="choose-seal"] { margin-top: 0 !important; }
  .playkit > .pk-guide-page ~ :is(.pk-note, .pk-footer) { margin-top: 0; }
}