/* ══════════════════════════════════════════════════════════════════════
   BUILD 178 · Tikam 戳戳乐 —— 南洋咖啡店的彩纸板:上面奖品海报,下面 5 × 10 共 50 格彩纸
   背景是咖啡店(不跟着板子滚);纸格合着是信封样的彩纸,戳开是撕破的洞 + 里面的奖品。
   美术全是 GPT 画的原创图(public/tikam/*.webp);结果条吸在「随机戳一格」上面,戳哪一格都看得到。
   ══════════════════════════════════════════════════════════════════════ */
#app #tikamview{display:flex;flex-direction:column;min-height:0}
#app .tkwrap{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 12px calc(16px + var(--safeb));
  background:linear-gradient(180deg,rgba(24,12,5,.52) 0%,rgba(16,8,3,.7) 45%,rgba(10,5,2,.9) 100%),url(tikam/bg-kopitiam.webp?v=f8a27bc5) center 18%/cover no-repeat,#140a05}
#app .tkwrap>*{position:relative;z-index:1;flex:0 0 auto}

/* 板子整体 */
#app .tkstage{--gold:#ffd88a;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:stretch;gap:7px;user-select:none;-webkit-user-select:none}

/* 奖品海报:上排 元宝 / 招财猫 / 钱袋,下排六样小奖 */
#app .tkposter{position:relative;padding:14px 17.5% 11px;background:url(tikam/poster.webp?v=70bec1e2) center/100% 100% no-repeat;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
#app .tkpz{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;align-items:end;column-gap:2px;row-gap:3px}
#app .tkpi{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
#app .tkpi[data-id="ingot"]{grid-column:1/3;grid-row:1}
#app .tkpi[data-id="cat"]{grid-column:3/5;grid-row:1}
#app .tkpi[data-id="bag"]{grid-column:5/7;grid-row:1}
#app .tkpi img{display:block;height:26px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(60,20,0,.45));transition:opacity .3s}
#app .tkpi[data-id="ingot"] img,#app .tkpi[data-id="bag"] img{height:38px}
#app .tkpi.jp img{height:54px;filter:drop-shadow(0 0 10px rgba(255,210,90,.75)) drop-shadow(0 2px 2px rgba(60,20,0,.5))}
#app .tkpi b{display:block;margin-top:1px;font-family:var(--num);font-weight:700;font-size:10.5px;line-height:1.1;color:#8a1a12;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,245,220,.8)}
#app .tkpi[data-id="ingot"] b,#app .tkpi[data-id="bag"] b{font-size:12.5px}
#app .tkpi.jp b{font-size:15px;color:#b01c10;text-shadow:0 1px 0 #fff4d0,0 0 8px rgba(255,220,120,.9)}
#app .tkpi.hit img{animation:tkhit 1.3s ease-out}
#app .tkpi.hit b{animation:tkhitb 1.3s ease-out}
@keyframes tkhit{0%{transform:scale(1)}18%{transform:scale(1.5) rotate(-6deg);filter:drop-shadow(0 0 14px #fff2a8) drop-shadow(0 0 6px #ffd45a)}40%{transform:scale(1.28) rotate(4deg)}100%{transform:scale(1)}}
@keyframes tkhitb{0%,100%{color:inherit}15%,60%{color:#e0261a;text-shadow:0 0 10px #fff2a8}}
#app .tkpt-t{position:absolute;left:50%;top:-7px;transform:translateX(-50%);padding:2px 12px 3px;border-radius:99px;font-style:normal;font-family:var(--toon2);font-size:10.5px;letter-spacing:.2em;color:#ffe9b0;
  background:linear-gradient(180deg,#d6372a,#9e1a12);box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);border:1px solid rgba(255,214,120,.6);white-space:nowrap}

/* 板号 / 已戳几格 / 换新板 */
#app .tkmeta{display:flex;align-items:center;gap:8px;padding:0 2px;min-height:30px}
#app .tkno{flex:0 0 auto;padding:4px 10px;border-radius:8px;font-family:var(--toon2);font-size:12px;letter-spacing:.06em;color:#ffe9b0;background:rgba(120,24,14,.82);border:1px solid rgba(255,214,120,.45);box-shadow:0 2px 6px rgba(0,0,0,.4)}
#app .tkcount{flex:1;min-width:0;font-family:var(--toon2);font-size:12.5px;letter-spacing:.04em;color:#f6e6c4;text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .tkcount.hint{color:#ffe08a;animation:tkblink 2.4s ease-in-out infinite}
@keyframes tkblink{0%,100%{opacity:1}50%{opacity:.55}}
#app .tknew{flex:0 0 auto;padding:6px 12px;border-radius:99px;border:1px solid rgba(255,214,120,.6);background:linear-gradient(180deg,rgba(60,26,10,.9),rgba(34,14,5,.92));color:#ffe3a0;font-family:var(--toon2);font-size:12px;letter-spacing:.05em;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.45)}
#app .tknew:disabled{opacity:.45;cursor:default}
#app .tknew:not(:disabled):active{transform:translateY(1px)}

/* 板子(底板图拉满)+ 5 × 10 的格子 */
#app .tkboard{position:relative;padding:5.4% 5.8% 5.8%;background:url(tikam/board.webp?v=fcc734e6) center/100% 100% no-repeat;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
#app .tkgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px 5px}
#app .tkgrid.out{animation:tkout .32s ease-in forwards}
#app .tkgrid.in .tkcell{animation:tkin .42s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d,0) * 22ms)}
@keyframes tkout{to{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes tkin{from{opacity:0;transform:translateY(-10px) scale(.85)}to{opacity:1;transform:none}}

#app .tkcell{--tk:#e0443a;position:relative;display:block;width:100%;aspect-ratio:1.22;padding:0;margin:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;color:inherit}
#app .tkcell::before{content:"";position:absolute;inset:0;background:var(--tab) center/100% 100% no-repeat;filter:drop-shadow(0 2px 2px rgba(40,14,0,.45));transition:transform .12s,filter .12s,opacity .3s}
#app .tkcell.c-red{--tab:url(tikam/tab-red.webp?v=34b60e16);--torn:url(tikam/torn-red.webp?v=63331bf0);--tk:#e0443a}
#app .tkcell.c-yellow{--tab:url(tikam/tab-yellow.webp?v=41bc8014);--torn:url(tikam/torn-yellow.webp?v=6d20d720);--tk:#f3c02d}
#app .tkcell.c-green{--tab:url(tikam/tab-green.webp?v=8ce19182);--torn:url(tikam/torn-green.webp?v=d04e7753);--tk:#2fae5a}
#app .tkcell.c-blue{--tab:url(tikam/tab-blue.webp?v=331813fc);--torn:url(tikam/torn-blue.webp?v=23e08606);--tk:#2f7fd8}
#app .tkcell.c-pink{--tab:url(tikam/tab-pink.webp?v=1666c5dd);--torn:url(tikam/torn-pink.webp?v=9cf71fbc);--tk:#ee6fb0}
#app .tkcell .tkn{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);min-width:17px;padding:2px 3px 1px;border-radius:3px;text-align:center;font-family:var(--num);font-weight:700;font-size:10.5px;line-height:1;color:#3a1606;background:rgba(255,247,226,.92);box-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none;font-variant-numeric:tabular-nums}
@media (hover:hover){#app .tkcell:not(.open):not(:disabled):hover::before{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 5px 5px rgba(40,14,0,.5)) brightness(1.08)}}
#app .tkcell:not(.open):active::before{transform:scale(.94)}
#app .tkcell:focus-visible{outline:2px solid #ffe08a;outline-offset:2px;border-radius:6px}
#app .tkcell.busy::before{animation:tkwig .3s ease-in-out infinite}
@keyframes tkwig{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.04)}75%{transform:rotate(4deg) scale(1.04)}}
#app .tkcell.tear:not(.open)::before{animation:tktear .26s ease-in forwards}
@keyframes tktear{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-5deg);filter:brightness(1.3)}100%{transform:scale(.9) rotate(7deg);filter:brightness(1.6);opacity:.2}}

/* 戳开了:撕破的洞 + 奖品 + 倍数;号码挪到左上角 */
#app .tkcell.open,#app .tkcell:disabled{cursor:default;opacity:1}
#app .tkcell.open::before{background-image:var(--torn);inset:-6% -1% -7%}
#app .tkcell.open .tkn{left:3%;top:3%;bottom:auto;transform:none;min-width:0;font-size:9px;padding:1px 3px;color:#fff3dc;background:rgba(30,10,2,.62);box-shadow:none}
#app .tkcell .tkprize{position:absolute;left:50%;top:44%;height:60%;width:auto;max-width:78%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));pointer-events:none}
#app .tkcell.none .tkprize{height:86%;max-width:86%;top:49%;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#app .tkcell .tkm{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-family:var(--num);font-weight:700;font-size:12.5px;line-height:1;color:#ffe9a8;letter-spacing:-.01em;
  text-shadow:0 0 3px #3a1200,0 1px 0 #3a1200,1px 0 0 #3a1200,-1px 0 0 #3a1200,0 -1px 0 #3a1200;pointer-events:none;font-variant-numeric:tabular-nums}
#app .tkcell.none .tkm{left:6%;right:6%;top:50%;bottom:auto;transform:translateY(-50%) rotate(-8deg);font-family:var(--toon2);font-weight:400;font-size:10.5px;line-height:1;color:#8a2c14;letter-spacing:.02em;text-shadow:0 0 2px rgba(255,248,230,.9);white-space:nowrap}   /* 字印在纸条上(纸条放大,越南文「Cảm ơn」一行也放得下)*/
#app .tkcell.none.pop .tkprize{animation:tkpopn .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes tkpopn{0%{transform:translate(-50%,-50%) scale(.2) rotate(-40deg);opacity:0}100%{transform:translate(-50%,-50%) rotate(-8deg)}}
#app .tkcell.bigp .tkm{color:#fff3b0;font-size:14px}
#app .tkcell.bigp::after{content:"";position:absolute;inset:-3px;border-radius:9px;pointer-events:none;box-shadow:0 0 0 2px rgba(255,214,90,.95),0 0 16px 3px rgba(255,196,60,.65);animation:tkglow 1.6s ease-in-out infinite alternate}
@keyframes tkglow{from{box-shadow:0 0 0 2px rgba(255,214,90,.95),0 0 10px 2px rgba(255,196,60,.45)}to{box-shadow:0 0 0 2px rgba(255,236,150,1),0 0 22px 6px rgba(255,196,60,.8)}}
#app .tkcell.pop .tkprize{animation:tkpop .55s cubic-bezier(.2,1.6,.4,1)}
#app .tkcell.pop .tkm{animation:tkpopm .55s .12s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tkpop{0%{transform:translate(-50%,-50%) scale(.15) rotate(-20deg);opacity:0}60%{transform:translate(-50%,-62%) scale(1.3) rotate(6deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes tkpopm{from{transform:translateY(6px) scale(.6);opacity:0}to{transform:none;opacity:1}}
/* 换板时公开的(没戳的)格子:淡淡的、纸还半盖着 */
#app .tkcell.faint::before{background-image:var(--tab);inset:0;opacity:.38}
#app .tkcell.faint .tkprize{opacity:.78;filter:saturate(.75) drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#app .tkcell.faint .tkm{opacity:.85}
#app .tkcell.faint.bigp::after{animation:none;box-shadow:0 0 0 2px rgba(255,214,90,.7)}
/* 纸屑 */
#app .tkbit{position:absolute;left:50%;top:45%;width:7px;height:5px;margin:-2px 0 0 -3px;background:var(--c,#e33);border-radius:1px;pointer-events:none;z-index:3;animation:tkbit .65s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes tkbit{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* 飘字 */
#app .tkfx{position:absolute;inset:0;pointer-events:none;z-index:4}
#app .tkfloat{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-family:var(--num);font-weight:700;font-size:17px;white-space:nowrap;color:#9dffc2;
  text-shadow:0 2px 0 rgba(0,0,0,.75),0 0 10px rgba(60,255,150,.55);animation:tkfloat 1.35s ease-out forwards}
#app .tkfloat.big{font-size:24px;color:#ffe9a8;text-shadow:0 2px 0 rgba(0,0,0,.75),0 0 16px rgba(255,200,60,.9)}
#app .tkfloat.push{color:#f3ead2}
#app .tkfloat.lose{color:#ffc2c9;font-size:14px}
#app .tkfloat.none{font-family:var(--toon2);font-weight:400;font-size:13px;color:#f1e3c6;text-shadow:0 1px 3px #000}
@keyframes tkfloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-70%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-230%) scale(1)}}

/* 换板那一刻的说明条 */
#app .tkveil{position:absolute;left:7%;right:7%;top:38%;z-index:5;padding:10px 12px;border-radius:12px;text-align:center;pointer-events:none;opacity:0;transform:translateY(-50%) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,1.4,.4,1);
  background:linear-gradient(180deg,rgba(70,22,8,.93),rgba(40,12,4,.93));border:1px solid rgba(255,214,120,.6);box-shadow:0 12px 26px rgba(0,0,0,.55)}
#app .tkveil.on{opacity:1;transform:translateY(-50%) scale(1)}
#app .tkveil b{display:block;font-family:var(--toon);font-size:17px;letter-spacing:.06em;color:#ffe08a;text-shadow:0 2px 0 rgba(0,0,0,.6)}
#app .tkveil i{display:block;margin-top:3px;font-style:normal;font-size:11.5px;line-height:1.4;color:#f3e3c3}

/* 头奖 / 自动 */
#app .tkstage.jp .tkboard{animation:tkjp 1.6s ease-out}
@keyframes tkjp{0%,100%{filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}12%,45%{filter:drop-shadow(0 0 26px rgba(255,214,90,1)) drop-shadow(0 0 60px rgba(255,170,40,.8))}30%,65%{filter:drop-shadow(0 0 12px rgba(255,214,90,.7))}}
#app .tkstage.auto .tkcell:not(.open){cursor:default}

/* 结果条:吸在「随机戳一格」上面(板子很长,戳上面的格子也看得到结果) */
#app .tkresslot:empty{display:none}
#app .tkwrap>.resdock{position:sticky;bottom:calc(74px + var(--safeb));z-index:7;width:100%;max-width:420px}
#app .tkwrap>.resdock .resbig{flex-wrap:nowrap;padding:6px 12px;background:linear-gradient(90deg,rgba(40,16,6,.96),rgba(22,9,3,.95));box-shadow:0 8px 22px rgba(0,0,0,.6)}
#app .tkwrap>.resdock .resbig i{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#app .tkwrap>.resdock .resbig b,#app .tkwrap>.resdock .resbig em{flex:0 0 auto}
#app .tkwrap>.resdock .resbig span{display:none}   /* 一行就好(押多少 / 拿回多少在注单里):少盖一点板子 */
#app .tkwrap>.resdock .resbig.win{background:linear-gradient(90deg,rgba(26,70,40,.96),rgba(22,9,3,.95) 70%)}
#app .tkwrap>.resdock .resbig.lose{background:linear-gradient(90deg,rgba(80,20,28,.95),rgba(22,9,3,.95) 70%)}

/* 下面的按钮 / 奖品表 */
#app .tkchips{width:100%;max-width:440px}
#app .tkbar{width:100%;max-width:440px}
#app .tkgo.stop{background:linear-gradient(180deg,#ff8a8a,#c73a4a);color:#fff}
#app #tkAuto{display:grid;grid-template-columns:auto repeat(5,1fr);gap:5px;width:100%;max-width:440px}
#app #tkAuto .apre{min-width:0;padding:8px 2px}
#app .tkpt{width:100%;max-width:440px}
#app .tktbl{width:100%;border-collapse:collapse;font-size:12.5px}
#app .tktbl th{font-weight:400;font-size:10.5px;letter-spacing:.08em;color:var(--dim);text-align:right;padding:6px 4px 4px}
#app .tktbl td{padding:4px;border-top:1px solid rgba(255,255,255,.06);text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--muted)}
#app .tktbl td:first-child{text-align:left;display:flex;align-items:center;gap:8px;font-family:inherit;color:var(--ink)}
#app .tktbl td img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#app .tktbl tr.jp td{color:#ffe08a}
#app .tktbl tr.jp td:first-child span{font-weight:700}
#app .tknote{margin:8px 2px 2px;font-size:11.5px;line-height:1.5;color:var(--dim)}
#app .tkwrap .scfair{text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* 大厅门 / 列表卡 */
#app .cart-tk .ac3door{width:100%;height:100%;object-fit:cover}
#app .tkcard .thumb .ac3door{aspect-ratio:4/3}

@media (max-width:360px){
  #app .tkposter{padding:12px 16.5% 9px}
  #app .tkpi img{height:22px}#app .tkpi[data-id="ingot"] img,#app .tkpi[data-id="bag"] img{height:32px}#app .tkpi.jp img{height:46px}
  #app .tkpi b{font-size:9.5px}#app .tkpi.jp b{font-size:13px}
  #app .tkgrid{gap:4px}
  #app .tkcell .tkm{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  #app .tkcell.pop .tkprize,#app .tkcell.pop .tkm,#app .tkgrid.in .tkcell,#app .tkgrid.out,#app .tkpi.hit img,#app .tkpi.hit b,#app .tkcell.bigp::after,#app .tkcount.hint,#app .tkstage.jp .tkboard{animation:none}
  #app .tkfloat{animation-duration:.01s}
}