/* paint.css - the stage frame used by every painting program, and the picture chooser of Paint Studio (rules start with pt-) */
.pt-stage{position:relative;width:min(100%,1100px);flex:1 1 auto;min-height:0;height:calc(100vh - 96px);max-height:calc(100vh - 96px);border-radius:16px;overflow:hidden;
  background:var(--bg,#15163a);box-shadow:0 0 0 4px #3a3e8a,0 14px 30px rgba(0,0,0,.4);--u:8px;margin:4px 0;color:var(--ink,#f5f4ff)}
.pt-stage .overlay-root{z-index:50}
.pt-root{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column}
.pt-root>*{margin:auto 0;min-height:0}
.pt-root>.st-wrap{margin:0;flex:1 1 auto}

/* ---------- choose something to paint ---------- */
.pt-choose{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 20px;text-align:center;width:100%}
.pt-title{font-size:clamp(2.2rem,5.5vw,3.4rem);font-weight:bold;color:var(--accent,#ffd23f);text-shadow:0 4px 0 #0c0d26}
.pt-sub{margin:0;font-size:clamp(1rem,2.4vw,1.4rem);font-weight:bold;color:var(--ink-dim,#b7b8de)}
.pt-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pt-tab{font:inherit;font-weight:bold;font-size:1.05rem;padding:.5em 1.1em;border-radius:99px;border:3px solid #5a60b8;background:#2b3170;color:#e6e8ff;cursor:pointer}
.pt-tab span{font-size:1.2em}
.pt-tab:hover{background:#3a418a}
.pt-tab.on{background:var(--accent,#ffd23f);border-color:#fff3b0;color:#1a1b3f}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;width:100%;max-width:960px}
.pt-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 10px 12px;border-radius:20px;border:4px solid #3a3e8a;background:var(--panel,#1f2150);color:var(--ink,#f5f4ff);cursor:pointer;transition:transform .12s}
.pt-card:hover{transform:translateY(-4px);border-color:var(--accent,#ffd23f)}
.pt-card .pv{display:block;width:100%;aspect-ratio:480/300;border-radius:12px;overflow:hidden;background:#fff}
.pt-card .pv svg{display:block;width:100%;height:100%}
.pt-card .nm{font-weight:bold;font-size:1.1rem}
.pt-card.blank .pv{display:flex;align-items:center;justify-content:center;font-size:3.2rem}
.pt-card.blank .pv i{font-style:normal}

/* a picture to colour sits on top of the background */
.pt-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.pt-art .r{cursor:pointer;transition:filter .1s;stroke:#2b2540;stroke-width:3;stroke-linejoin:round}
.pt-art .r:hover{filter:brightness(.94)}
.pt-art .ln{fill:none;stroke:#2b2540;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pt-art .r.pop{animation:ptPop .3s ease-out}
@keyframes ptPop{50%{filter:brightness(1.18)}}

@media (max-width:760px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:700px){
  .pt-choose{gap:8px;padding:8px 14px}.pt-title{font-size:1.8rem}.pt-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .pt-card{padding:6px 6px 8px;gap:4px}.pt-card .nm{font-size:1rem}.pt-tab{padding:.35em .9em;font-size:.95rem}
}
@media print{
  .pt-stage,.pt-root{position:static;overflow:visible;height:auto;max-height:none;box-shadow:none;background:#fff;display:block}
  .mode:has(.pt-stage){height:auto;padding:0;display:block;overflow:visible}
}