:root{--gold:#e8c46a;--gold2:#a8842f;--ink:#f3e6c4;--bg:#0c0504;--line:#6b4a24}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Tahoma","Leelawadee UI",sans-serif;font-size:14px}
[hidden]{display:none!important}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px 16px 24px}
.note{max-width:1040px;width:100%;font-size:13px;color:#d8c49a;background:#1d0e0a;border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin-bottom:10px}
.win{position:relative;width:100%;max-width:1040px;background:linear-gradient(#3a1d14,#24110c);border:2px solid var(--gold2);border-radius:6px;box-shadow:0 0 0 1px #000,0 8px 30px #000a;overflow:hidden}
.title{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:40px;background:linear-gradient(#4a2416,#2a130c);border-bottom:1px solid var(--gold2);color:var(--gold);font-weight:bold;font-size:18px;letter-spacing:1px}
.title small{font-size:13px;color:#c9a35a;font-weight:normal}
.title .x{position:absolute;right:10px;top:7px;width:24px;height:24px;border:1px solid var(--gold2);border-radius:3px;display:grid;place-items:center;font-size:13px;background:#3a1a10}
.body{display:grid;grid-template-columns:1fr 280px}
@media (max-width:760px){.body{grid-template-columns:1fr}}
.stage{position:relative;overflow:hidden;height:560px;background:#150403}
.cam{position:absolute;inset:0;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:50% 55%}
.sky{position:absolute;inset:0;background:radial-gradient(circle at 22% 20%,#ff7a4a 0 34px,#ff3a1a55 36px,#0000 110px),linear-gradient(#1a0505,#3a0c06 62%,#150403);transition:filter .5s}
.stage.red .sky{filter:hue-rotate(-10deg) saturate(2.4) brightness(1.5)}
.stage.dark .sky{filter:brightness(.35)}
.ground{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(#2a0805,#0a0201);border-top:1px solid #5a1a0a}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#back{z-index:1}#front{z-index:3}
/* pack: two halves so the slash can cut it */
.pack{position:absolute;left:70%;top:50%;width:150px;height:210px;margin:-150px 0 0 -75px;z-index:2;cursor:pointer;animation:float 3s ease-in-out infinite}
.half{position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,#7a0d05,#3a0402 60%,#7a0d05);border:3px solid #d9a441;box-shadow:inset 0 0 30px #000a;transition:transform .9s cubic-bezier(.2,.7,.3,1),opacity .9s}
.half.a{clip-path:polygon(0 0,100% 0,100% 30%,0 62%)}
.half.b{clip-path:polygon(0 62%,100% 30%,100% 100%,0 100%)}
.seal{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:3px double #e8c46a;text-align:center;font-size:52px;line-height:80px;color:#ffd77a;font-family:"KaiTi","STKaiti","Microsoft JhengHei",serif;text-shadow:0 0 10px #ff4000;background:radial-gradient(#a01a08,#4a0603)}
.plabel{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#ffe2a0;font-weight:bold;letter-spacing:2px;font-size:15px}
@keyframes float{50%{transform:translateY(-8px)}}
.pack.shake{animation:pshake .07s linear infinite}
@keyframes pshake{0%{transform:translate(-2px,1px) rotate(-1deg)}50%{transform:translate(2px,-1px) rotate(1deg)}100%{transform:translate(0,2px)}}
.pack.cut{animation:none}
.pack.cut .a{transform:translate(-50px,-90px) rotate(-18deg);opacity:0}
.pack.cut .b{transform:translate(40px,110px) rotate(14deg);opacity:0}
.pack.gone{display:none}
/* cut-in band */
.band{position:absolute;left:-10%;right:-10%;top:50%;height:200px;margin-top:-100px;transform:skewY(-8deg) scaleY(0);background:linear-gradient(90deg,#000 0,#2a0402 30%,#2a0402 70%,#000);border-top:3px solid var(--c,#ff5020);border-bottom:3px solid var(--c,#ff5020);z-index:5;overflow:hidden;pointer-events:none}
.band.on{animation:bandin 1.5s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes bandin{0%{transform:skewY(-8deg) scaleY(0)}10%{transform:skewY(-8deg) scaleY(1)}88%{transform:skewY(-8deg) scaleY(1);opacity:1}100%{transform:skewY(-8deg) scaleY(0);opacity:0}}
.band .lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 9px,#ffffff14 9px 11px)}
.band canvas{transform:skewY(8deg)}
.say{position:absolute;right:12%;top:50%;transform:translateY(-50%) skewY(8deg);font-size:28px;font-weight:900;color:#fff;text-shadow:0 0 10px var(--c,#ff5020),0 3px 0 #000;white-space:nowrap;opacity:0;text-align:right}
.band.on .say{animation:say 1.5s ease-out forwards}
@keyframes say{0%,15%{opacity:0;transform:translateY(-50%) skewY(8deg) translateX(60px)}28%,88%{opacity:1;transform:translateY(-50%) skewY(8deg)}100%{opacity:0}}
.say small{display:block;font-size:15px;color:#ffd9a0;letter-spacing:3px}
.brush{position:absolute;left:0;right:0;top:16%;text-align:center;font-size:100px;font-weight:900;color:#1a0000;-webkit-text-stroke:2px #ffcf60;text-shadow:0 0 18px #ff3000,0 0 40px #ff3000;letter-spacing:10px;font-family:"KaiTi","STKaiti","Microsoft JhengHei",serif;clip-path:inset(0 100% 0 0);z-index:6;pointer-events:none;opacity:0}
.brush.on{animation:brush 2.4s ease-out forwards}
@keyframes brush{0%{opacity:1;clip-path:inset(0 100% 0 0)}40%{clip-path:inset(0 0 0 0)}85%{opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.brush small{display:block;font-size:22px;color:#ffe9b0;-webkit-text-stroke:0;letter-spacing:3px;font-family:Tahoma,sans-serif}
.shake{animation:shake .45s linear}
@keyframes shake{20%{transform:translate(-10px,6px)}40%{transform:translate(9px,-7px)}60%{transform:translate(-6px,-3px)}80%{transform:translate(4px,4px)}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:7}
.flash.on{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.bars{position:absolute;left:0;right:0;height:0;background:#000;z-index:4;transition:height .35s}
.bars.t{top:0}.bars.b{bottom:0}
.stage.cine .bars{height:44px}
.bar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:8;transition:opacity .3s}
.stage.go .bar,.stage.go .hint{opacity:0;pointer-events:none}
.btn{min-width:150px;height:40px;border:1px solid var(--gold);border-radius:4px;background:linear-gradient(#8a3a1a,#5a1e0c);color:#ffe9b0;font-weight:bold;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:inset 0 1px 0 #ffffff33}
.btn:hover{filter:brightness(1.15)}
.btn.ten{background:linear-gradient(#b8861f,#7a5210)}
.btn small{display:block;font-weight:normal;font-size:11px;color:#ffe0a0}
.skip{position:absolute;right:10px;top:52px;display:none;min-width:0;height:28px;padding:0 12px;font-size:12px;z-index:9}
.pts{position:absolute;left:10px;top:52px;background:#000a;border:1px solid var(--line);border-radius:4px;padding:4px 10px;font-size:13px;color:var(--gold);z-index:8}
.hint{position:absolute;left:40%;right:0;top:calc(50% + 70px);text-align:center;color:#d9b77a;font-size:12.5px;z-index:2;transition:opacity .3s}
.side{border-left:1px solid var(--gold2);background:#1c0d09;padding:10px;display:flex;flex-direction:column;gap:8px}
@media (max-width:760px){.side{border-left:0;border-top:1px solid var(--gold2)}}
.side h3{margin:0;font-size:14px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:4px}
.rate{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;font-size:12.5px;padding:2px 0}
.ic{width:34px;height:34px;border:1px solid #000;border-radius:3px;background-color:#0a0503;background-position:center;background-size:contain;background-repeat:no-repeat;box-shadow:0 0 0 1px var(--c,#555)}
.rate .p{font-weight:bold;color:var(--c)}
.tier{font-size:11.5px;margin-top:4px;color:var(--c);font-weight:bold}
.rules{font-size:12px;color:#cbb58a;line-height:1.55}
.test{display:flex;flex-wrap:wrap;gap:4px}
.test button{font-family:inherit;font-size:11.5px;background:#2b1a12;color:#d9c08a;border:1px dashed #7a5a30;border-radius:3px;padding:3px 6px;cursor:pointer}
.test button.sel{border-style:solid;border-color:#e8c46a;color:#fff}
.res{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;z-index:8;background:#000a}
.res.on{display:flex}
.cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:620px}
.card{width:104px;height:140px;perspective:600px;opacity:0;transform:translateY(40px) scale(.6)}
.card.in0{transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s;opacity:1;transform:none}
.card .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.card.open .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;border:2px solid var(--c)}
.card .b{background:linear-gradient(135deg,#7a0d05,#3a0402 60%,#7a0d05);display:grid;place-items:center;color:#ffd77a;font-size:34px;font-family:"KaiTi",serif;box-shadow:0 0 14px var(--c)}
.card .f{transform:rotateY(180deg);background:radial-gradient(circle at 50% 35%,var(--c2),#140805 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;text-align:center;font-size:11.5px;box-shadow:0 0 18px var(--c)}
.card .f .ic{width:46px;height:46px}
.card .f .t{font-size:10.5px;color:var(--c);font-weight:bold}
.card.L .f{animation:lglow .8s ease-in-out infinite alternate}
@keyframes lglow{to{box-shadow:0 0 34px #ffb020,0 0 60px #ff3000}}
.bc{position:absolute;left:0;right:0;top:46px;height:30px;overflow:hidden;background:linear-gradient(90deg,#0000,#8a1a00cc 20%,#8a1a00cc 80%,#0000);display:none;color:#ffe9a0;font-weight:bold;font-size:13.5px;line-height:30px;white-space:nowrap;z-index:9}
.bc.on{display:block}
.bc span{display:inline-block;padding-left:100%;animation:mq 9s linear forwards}
@keyframes mq{to{transform:translateX(-100%)}}
.log{font-size:12px;color:#cbb58a;max-height:120px;overflow:auto;border-top:1px solid var(--line);padding-top:4px}

#gx-main{width:100%;max-width:1040px}
.gx-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.gx-top a{color:var(--gold)}
.gx-top img{height:38px;display:block}
#gx-tabs{display:flex;gap:6px;flex-wrap:wrap}
#gx-tabs button{background:#3a1a10;color:var(--ink);border:1px solid var(--gold2);border-radius:4px;padding:6px 14px;font:inherit;cursor:pointer}
#gx-tabs button.on{background:var(--gold2);color:#1d0e0a;font-weight:700}
#gx-char{background:#1d0e0a;color:var(--ink);border:1px solid var(--gold2);border-radius:4px;padding:5px;font:inherit;max-width:220px}
#gx-off{max-width:1040px;width:100%;text-align:center;font-size:20px;color:var(--gold);padding:60px 16px}
#gx-msg{max-width:1040px;width:100%;color:#ffb3a0;background:#3a0d08;border:1px solid #8f1010;border-radius:6px;padding:8px 12px;margin-bottom:10px}