/* Samdi — brand typeface, self-hosted from fonts/*.woff2. Declared per weight;
   the browser only downloads a weight when text actually renders in it. */
@font-face{font-family:"Samdi";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/Samdi-Light.woff2") format("woff2")}
@font-face{font-family:"Samdi";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Samdi-Regular.woff2") format("woff2")}
@font-face{font-family:"Samdi";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/Samdi-Medium.woff2") format("woff2")}
@font-face{font-family:"Samdi";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/Samdi-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Samdi";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/Samdi-Bold.woff2") format("woff2")}
@font-face{font-family:"Samdi";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/Samdi-Heavy.woff2") format("woff2")}
:root{
  /* TicketKhai palette — light theme, slate + navy (matches ticketkhai.com) */
  --ink:#F9FAFB;         /* page background (slate-50) */
  --panel:#FFFFFF;       /* cards / surfaces */
  --raise:#FFFFFF;       /* elevated (toast) */
  --line:#E2E8F0;        /* hairlines (slate-200) */
  --text:#0F172A;        /* body text (slate-900) */
  --muted:#475569;       /* secondary text (slate-600) */
  --accent:#0F172A;      /* primary / navy (slate-900) */
  --accent-hover:#1E293B;/* navy hover (slate-800) */
  --accent-soft:#0F172A1A;/* translucent navy (focus ring) */
  --red:#B91C1C;         /* alerts (red-700) */
  --shadow:0 4px 6px -1px #eef2f7, 0 2px 4px -2px #eef2f7;
  --radius:16px;         /* cards / stage */
  --radius-btn:10px;     /* buttons */
  --tap:48px;
}
*{box-sizing:border-box}
/* Native form controls don't inherit the page font — opt them in so buttons/
   inputs render in Samdi, not the UA default (Arial). */
button,input,select,textarea{font-family:inherit}
html,body{margin:0;height:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Samdi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:flex;justify-content:center;
}
.app{width:100%;max-width:520px;padding:14px 16px 28px;display:flex;flex-direction:column;gap:18px}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.mark{display:flex;align-items:center;gap:6px}
.mark .logo{height:20px;flex:0 0 auto;color:var(--accent)}
.word{font-weight:400;font-size:22px;color:var(--accent);line-height:1}
.word b{font-weight:600;color:var(--muted)}
.tag{color:var(--muted);font-size:16px}
#installBtn{display:none;background:#fff;border:1px solid var(--line);color:var(--muted);
  font-size:16px;font-weight:500;padding:8px 14px;border-radius:var(--radius-btn);cursor:pointer}
#installBtn:hover{border-color:var(--accent);color:var(--accent)}

/* editor */
.stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;-webkit-touch-callout:none}

.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;text-align:center;padding:24px;color:var(--muted)}
.empty svg{width:44px;height:44px;fill:var(--accent)}
.empty p{margin:0;font-size:16px;line-height:1.55}  /* matches .note */
.stage.has-photo .empty{display:none}

/* frame picker (gallery) — shown when no ?frame= is set */
.gallery[hidden]{display:none}
.gallery-lead{color:var(--muted);font-size:18px;text-align:center;margin:6px 0 12px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.fcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--text)}
.fcard-art{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  background:repeating-conic-gradient(#eef2f7 0% 25%, #ffffff 0% 50%) 50%/22px 22px;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .15s}
.fcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fcard-name{font-size:16px;text-align:center;color:var(--muted);transition:color .15s}
.fcard:hover .fcard-art,.fcard:focus-visible .fcard-art{border-color:var(--accent)}
.fcard:hover .fcard-name,.fcard:focus-visible .fcard-name{color:var(--text)}

/* editor view + back-to-frames link */
#editor{display:flex;flex-direction:column;gap:18px}
#editor[hidden]{display:none}
.changeframe{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  color:var(--muted);text-decoration:none;font-size:16px;padding:2px 0}
.changeframe:hover{color:var(--accent)}
.changeframe svg{width:16px;height:16px;fill:currentColor}

/* controls */
.controls{display:flex;align-items:center;gap:14px}
.zoom{flex:1;display:flex;align-items:center;gap:10px}
.zoom svg{width:18px;height:18px;fill:var(--muted);flex:0 0 auto}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px var(--accent-soft)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}
.iconbtn{width:var(--tap);height:var(--tap);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-btn);color:var(--text);cursor:pointer}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:20px;height:20px;fill:currentColor}

/* actions */
.actions{display:flex;gap:12px;margin-top:2px}
.btn{flex:1;min-height:var(--tap);border-radius:var(--radius-btn);font-size:16px;font-weight:500;
  cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:22px;height:22px;fill:currentColor}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.primary svg{fill:#fff}

.note{color:var(--muted);font-size:16px;line-height:1.55;text-align:center;margin:0}
.note b{color:var(--text);font-weight:600}

/* footer — parent-site link (left) + build version (right) */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--line)}
.foot a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.foot a:hover{color:var(--accent)}
.foot span{color:var(--muted);opacity:.7;font-size:14px}

/* focus + motion */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%) translateY(20px);
  background:var(--raise);border:1px solid var(--line);color:var(--text);padding:11px 16px;border-radius:999px;
  box-shadow:0 10px 30px -10px rgba(15,23,42,.25);
  font-size:16px;opacity:0;pointer-events:none;transition:.22s;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}