/* play.css — the empty canvas of play.friendly-apps.de and the CreationalCanvasWizard (PLAN-1103-play-canvas P4/P5, 1018c-Q988 a).
   Nothing is drawn until an input: html and body are transparent, the browser's surface shows. The wizard takes its colours from
   bgsense.js (play.js sets --pw-bg, --pw-fg, --pw-line on <html>); without it the system colours Canvas / CanvasText.
   It grows out of the input spot (--pw-ox/--pw-oy, open-from-trigger); reduced motion: no growth.
   version: 0.1.0 · created 2026-11-04 by Pascal Ehlig, ITS · edited 2026-11-04 by Pascal Ehlig, ITS */
:root{color-scheme:light dark;background:transparent}
html,body{margin:0;padding:0;height:100%;background:transparent;overflow:hidden}
body{font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.play-canvas{position:fixed;inset:0;touch-action:manipulation;outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.play-canvas:focus-visible{outline:2px dashed var(--pw-line,CanvasText);outline-offset:-6px}
.play-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the input spot: a ring that fades (only after an input) */
@keyframes pw-ring{from{opacity:.55;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.pw-ring{position:fixed;width:44px;height:44px;border-radius:50%;border:2px solid var(--pw-fg,CanvasText);pointer-events:none;
  animation:pw-ring .5s ease-out forwards}
/* the wizard */
@keyframes pw-grow{from{opacity:0;transform:scale(.08)}to{opacity:1;transform:none}}
.pw{position:fixed;z-index:10;box-sizing:border-box;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;
  padding:14px 14px 12px;border-radius:16px;background:var(--pw-bg,Canvas);color:var(--pw-fg,CanvasText);
  border:1px solid var(--pw-line,GrayText);box-shadow:0 10px 30px rgba(0,0,0,.22);transform-origin:var(--pw-ox,0) var(--pw-oy,0);
  animation:pw-grow .24s cubic-bezier(.2,.8,.2,1)}
.pw.pw-opening{pointer-events:none}
.pw-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.pw-title{flex:1;margin:0;font-size:1.05rem;font-weight:650}
.pw-x{flex:none;width:44px;height:44px;margin:-8px -8px -8px 0;border:0;border-radius:12px;background:transparent;color:inherit;font-size:1.2rem;cursor:pointer}
.pw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.pw-chip,.pw-act{box-sizing:border-box;min-height:44px;width:100%;border:1px solid var(--pw-line,GrayText);border-radius:12px;background:transparent;
  color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.pw-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;font-size:.88rem}
.pw-chip b{font-size:1.4rem;font-weight:400;line-height:1}
.pw-chip:hover,.pw-act:hover,.pw-x:hover{background:var(--pw-hover,rgba(127,127,127,.14))}
.pw-chip:focus-visible,.pw-act:focus-visible,.pw-x:focus-visible{outline:2px solid var(--pw-fg,CanvasText);outline-offset:2px}
.pw-sub{margin:10px 0 0;font-size:.8rem;opacity:.75}
.pw-made{margin:0 0 10px}
.pw-acts{display:grid;gap:8px}
.pw-act{display:flex;align-items:center;justify-content:center;padding:10px 12px;text-align:center}
.pw-act.pw-go{background:var(--pw-fg,CanvasText);color:var(--pw-bg,Canvas);border-color:transparent;font-weight:600}
/* a draft left in place */
.pw-draft{position:fixed;z-index:5;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%);padding:6px 10px;border-radius:12px;
  border:1px dashed var(--pw-line,GrayText);color:var(--pw-fg,CanvasText);background:transparent;font:inherit;font-size:.85rem;min-height:44px;
  box-sizing:border-box;text-decoration:none;cursor:pointer}
.pw-draft b{font-size:1.2rem;font-weight:400}
@media (pointer:coarse){.pw-grid{gap:10px}.pw-chip{min-height:64px}}
@media (prefers-reduced-motion:reduce){.pw,.pw-ring{animation:none}}