*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#050b1f;color:#fff;font-family:"Noto Sans Thai","Sarabun",system-ui,sans-serif;overflow:hidden}
.stage{position:relative;width:100%;height:100%;min-height:320px}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}

.title{position:absolute;top:max(14px,env(safe-area-inset-top));left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 2px 12px #000a}
.title h1{font-size:clamp(20px,4.5vw,34px);font-weight:700;color:#ffe9a8}
.title p{font-size:clamp(12px,2.4vw,15px);opacity:.8;margin-top:2px}
.hint{position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;
  background:#0d1a3acc;font-size:14px;pointer-events:none;white-space:nowrap;border:1px solid #ffffff22}
.sheet small{opacity:.6}
.chars{display:flex;gap:12px;justify-content:center}
.chars button{flex:1;max-width:150px;padding:8px 6px;border-radius:14px;border:2px solid transparent;
  background:#ffffff10;color:#fff;font:inherit;font-size:14px;cursor:pointer;text-align:center}
.chars button[aria-checked=true]{border-color:#ffd96b;background:#ffffff22}
.chars canvas{position:static;width:80px;height:120px;margin:0 auto 4px}
.row{display:flex;gap:10px;margin-top:16px}
.row .go{margin-top:0;flex:1}
.back{border:1px solid #ffffff44;background:none;color:#fff;border-radius:12px;padding:0 16px;font:inherit;cursor:pointer}

.fab{white-space:nowrap;position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
  border:0;border-radius:999px;padding:14px 26px;font:inherit;font-weight:600;font-size:16px;cursor:pointer;
  color:#3a1d00;background:linear-gradient(#ffd96b,#ffb23d);box-shadow:0 6px 22px #ffb23d66}
.fab:active{transform:translateX(-50%) scale(.97)}

.sheet,.card{position:absolute;background:#0d1a3ae8;backdrop-filter:blur(8px);border:1px solid #ffffff22;
  border-radius:18px;box-shadow:0 12px 40px #000a}
.sheet{left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(440px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:18px}
.sheet h2{font-size:18px;margin-bottom:12px;color:#ffe9a8}
.sheet label{display:block;font-size:13px;opacity:.9;margin-top:10px}
.sheet input,.sheet textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border-radius:10px;
  border:1px solid #ffffff33;background:#00000044;color:#fff;font:inherit;font-size:16px;resize:none}
.go{width:100%;margin-top:16px;padding:13px;border:0;border-radius:12px;font:inherit;font-weight:700;font-size:16px;
  cursor:pointer;color:#3a1d00;background:linear-gradient(#ffd96b,#ffb23d)}
.x{position:absolute;top:8px;right:10px;border:0;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:.7}

.styles{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.styles::-webkit-scrollbar{display:none}
.styles button{flex:0 0 auto;width:72px;padding:6px 4px 4px;border-radius:12px;border:2px solid transparent;
  background:#ffffff10;color:#fff;font:inherit;font-size:11px;cursor:pointer;text-align:center}
.styles button[aria-checked=true]{border-color:#ffd96b;background:#ffffff22}
.styles canvas{position:static;width:56px;height:46px;margin:0 auto 2px}

.card{left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,calc(100% - 40px));padding:18px 20px}
.card .who{font-size:13px;color:#ffd96b;margin-bottom:6px}
.card .txt{font-size:17px;line-height:1.5;word-break:break-word}
[hidden]{display:none!important}
.snd{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;width:40px;height:40px;border-radius:50%;
  border:1px solid #ffffff33;background:#0d1a3acc;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.snd.fx{top:calc(max(10px,env(safe-area-inset-top)) + 48px)}
.tip{position:absolute;transform:translate(-50%,-100%);max-width:250px;padding:10px 14px;border-radius:12px;pointer-events:none;
  background:#0d1a3aee;border:1px solid #ffffff33;font-size:14px;line-height:1.45;word-break:break-word;box-shadow:0 8px 24px #0008}
.tip .who{font-size:12px;color:#ffd96b;margin-bottom:3px}
.counter{margin-top:clamp(6px,1.6vh,14px)}
.counter .cl{font-size:clamp(13px,2.6vw,17px);font-weight:600;color:#fff;opacity:.92}
.counter .cn{font-size:clamp(40px,10vw,84px);font-weight:800;line-height:1.05;color:#fff;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(120,170,255,.55),0 3px 14px #000c}
.kprev{position:relative;margin:4px 0 10px;border-radius:14px;background:radial-gradient(ellipse at 50% 85%,#1d3a72 0%,#0b1630 70%);border:1px solid #ffffff1f;overflow:hidden}
.kprev canvas{position:static;display:block;width:100%;height:clamp(150px,30vh,210px);cursor:grab;touch-action:pan-y}
.kprev canvas:active{cursor:grabbing}
.kprev canvas:focus-visible{outline:2px solid #ffd96b;outline-offset:-2px}
.kname{position:absolute;left:12px;top:10px;font-weight:700;color:#ffe9a8;pointer-events:none}
.khint{position:absolute;right:10px;bottom:8px;font-size:12px;opacity:.7;pointer-events:none}
#kModel{display:block;width:100%;height:clamp(190px,34vh,260px);background:transparent;--poster-color:transparent;--progress-bar-color:#ffd96b}
@media (min-width:900px) and (min-height:560px){        /* desktop: wide card, big 3D viewer on the left, form on the right */
  .sheet{width:min(940px,94vw)}
  #step2:not([hidden]){display:grid;grid-template-columns:1.15fr 1fr;column-gap:20px;align-items:start}
  #step2 > .kprev{grid-column:1;grid-row:1 / span 6;margin:0;height:100%;min-height:440px}
  #step2 > :not(.kprev){grid-column:2}
  #step2 .kprev canvas,#step2 #kModel{height:100%;min-height:440px}
  #step2 .styles{flex-wrap:wrap;overflow:visible}
}
.kpos{position:absolute;right:12px;top:12px;font-size:12px;font-weight:600;color:#ffe9a8;background:#0007;padding:2px 8px;border-radius:999px;pointer-events:none}
.kstep{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid #ffffff33;
  background:#0d1a3acc;color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.kstep.prev{left:8px}.kstep.next{right:8px}
.kstep:hover{background:#1d3366}
.stylehead{font-size:13px;opacity:.92;margin:2px 0 6px}
.scount{color:#ffd96b;font-weight:600}
.stylewrap{position:relative}
.stylewrap::before,.stylewrap::after{content:'';position:absolute;top:0;bottom:4px;width:34px;pointer-events:none;transition:opacity .2s;z-index:1}
.stylewrap::before{left:0;background:linear-gradient(90deg,#0d1a3a,#0d1a3a00)}
.stylewrap::after{right:0;background:linear-gradient(270deg,#0d1a3a,#0d1a3a00)}
.stylewrap.at-start::before,.stylewrap.at-end::after{opacity:0}
.snav{position:absolute;top:50%;transform:translateY(-60%);width:28px;height:28px;border-radius:50%;border:1px solid #ffffff44;
  background:#1d3366;color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:2;transition:opacity .2s}
.snav.prev{left:-6px}.snav.next{right:-6px}
.stylewrap.at-start .snav.prev,.stylewrap.at-end .snav.next{opacity:0;pointer-events:none}
@media (min-width:900px) and (min-height:560px){
  .stylewrap::before,.stylewrap::after,.snav{display:none}
}
.modes{display:flex;gap:6px;margin:2px 0 10px}
.modes button{flex:1;padding:9px 6px;border-radius:12px;border:2px solid transparent;background:#ffffff10;color:#fff;font:inherit;font-size:14px;cursor:pointer}
.modes button[aria-checked=true]{border-color:#ffd96b;background:#ffffff22;font-weight:600}
.gcount{display:flex;align-items:center;justify-content:center;gap:10px;margin:-2px 0 8px;font-size:14px}
.gcount button{width:32px;height:32px;border-radius:50%;border:1px solid #ffffff44;background:#ffffff14;color:#fff;font-size:18px;cursor:pointer}
.gcount b{min-width:1.2em;text-align:center;font-size:18px;color:#ffd96b}
.chars{flex-wrap:wrap}
.chars .slot{flex:0 1 auto;min-width:64px;max-width:110px}
.chars[data-n="4"] .slot,.chars[data-n="5"] .slot,.chars[data-n="6"] .slot{min-width:56px;padding:6px 4px;font-size:12px}
.chars[data-n="2"] canvas,.chars[data-n="3"] canvas{width:56px;height:84px}
.chars[data-n="4"] canvas,.chars[data-n="5"] canvas,.chars[data-n="6"] canvas{width:40px;height:60px}
.slothint{font-size:12px;opacity:.7;text-align:center;margin:6px 0 0}
.note{font-size:12px;opacity:.65;margin:4px 0 0}
.sheet label.share{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;opacity:.95;cursor:pointer}
.sheet label.share input{display:inline-block;width:18px;height:18px;margin:0;accent-color:#ffd96b}
.card .report{margin-top:12px;border:1px solid #ffffff33;background:none;color:#ffb3b3;border-radius:10px;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer}
.card .report:disabled{opacity:.7;cursor:default}
.snd.shot{top:calc(max(10px,env(safe-area-inset-top)) + 96px)}