:root{--cream: #f7eedb;--ink: #3a2414;--brown: #6b4426;--orange: #e0873a;--purple: #5a3f7a;--blue: #3f62a8;--green: #5f8f34;--red: #b6463a;--gold: #f2c443;--f-display: MpFontDisplay, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;--f-body: MpFontBody, "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#8c7650;font-family:var(--f-body);color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none}#app{position:fixed;inset:0}#app canvas{position:absolute;left:0;top:0;display:block}#c2{pointer-events:none}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.hidden{display:none!important}.felt{background:#5a3f7a;border-radius:16px;box-shadow:0 4px #28140a73,0 8px 18px #00000040;position:relative;color:var(--cream)}.felt:after{content:"";position:absolute;inset:5px;border:2px dashed rgba(255,240,210,.55);border-radius:12px;pointer-events:none}.btn{font-family:var(--f-display);min-height:48px;min-width:48px;padding:6px 16px;border:0;border-radius:14px;cursor:pointer;color:#fff8ea;font-size:18px;letter-spacing:.5px;background:var(--orange);box-shadow:inset 0 -4px #00000038,0 3px #28140a73;position:relative;text-shadow:0 2px 0 rgba(0,0,0,.25);display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:after{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,245,225,.55);border-radius:10px;pointer-events:none}.btn:active{transform:translateY(2px);box-shadow:inset 0 -2px #00000038,0 1px #28140a73}.btn.blue{background:var(--blue)}.btn.green{background:var(--green)}.btn.purple{background:var(--purple)}.btn.red{background:var(--red)}.btn.brown{background:var(--brown)}.btn[disabled],.btn.off{filter:grayscale(.7) brightness(.85)}.btn small{font-size:13px;opacity:.9}.coin{width:18px;height:18px;background:url(assets/ui/coin.png) center/contain no-repeat;display:inline-block;flex:none}.heart{width:18px;height:18px;background:url(assets/ui/heart.png) center/contain no-repeat;display:inline-block;flex:none}.badge{width:26px;height:26px;background-image:url(assets/traits.png);background-size:400% 300%;display:inline-block;flex:none;border-radius:50%}.langs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.langs button{font-family:var(--f-body);min-height:48px;min-width:64px;padding:4px 14px;border-radius:24px;border:2px dashed rgba(255,240,210,.6);background:#3a24148c;color:#fff3dc;font-size:16px;cursor:pointer}.langs button.on{background:var(--gold);color:var(--ink);border-color:#fff8e0;font-weight:700}#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:radial-gradient(ellipse at center,#28180a0d,#28180a73)}#title h1{font-family:var(--f-display);margin:0;font-size:clamp(40px,9vmin,84px);color:#fff4dc;text-align:center;line-height:1.05;text-shadow:0 4px 0 #b4572a,0 7px 0 #6b3418,0 12px 18px rgba(0,0,0,.4);letter-spacing:2px}#title .sub{font-size:clamp(15px,2.6vmin,20px);color:#fff4dc;text-shadow:0 2px 4px rgba(0,0,0,.6);text-align:center;max-width:520px}#title .menu{display:flex;flex-direction:column;gap:10px;width:min(340px,92vw);padding:18px 16px;background:#5a3f7aeb}#title .menu .btn{width:100%;font-size:20px}#title .row{display:flex;gap:8px}#title .row>*{flex:1}#title input{font-family:var(--f-display);font-size:20px;min-height:48px;border-radius:12px;border:2px dashed #e9d3a8;background:#fff6e4;color:var(--ink);text-align:center;text-transform:uppercase;letter-spacing:3px;width:100%;min-width:0;padding:0 8px}#title .hello{color:#fff4dc;font-size:16px;text-shadow:0 2px 3px rgba(0,0,0,.6);min-height:20px}#title .loadbar{width:min(260px,70vw);height:10px;border-radius:6px;background:#0000004d;overflow:hidden}#title .loadbar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,#f2c443 0 8px,#e0a030 8px 16px);background-size:22px 22px;animation:stripes .6s linear infinite;transition:width .2s}@keyframes stripes{to{background-position:22px 0}}.modal-bg{position:fixed;inset:0;background:#1e12088c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:30}.modal{width:min(420px,100%);max-height:calc(100% - 32px);overflow:auto;padding:22px 18px 18px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center}.modal h2{font-family:var(--f-display);margin:0;font-size:28px;color:#fff4dc}.modal p{margin:0;line-height:1.5;font-size:15px}.modal .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.modal .btns .btn{flex:1 1 120px}.code{font-family:var(--f-display);font-size:44px;letter-spacing:8px;color:var(--gold);text-shadow:0 3px 0 #6b3418}.seats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.seat{background:#fff5e124;border-radius:12px;padding:8px;display:flex;align-items:center;gap:8px;min-height:56px;border:2px dashed rgba(255,240,210,.35);text-align:left;font-size:15px;overflow:hidden}.seat img{width:40px;height:44px;flex:none}.seat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat.me{background:#f2c4434d}#hud{position:fixed;inset:0;pointer-events:none}#hud>*{pointer-events:auto}#topbar{position:absolute;left:16px;right:16px;top:10px;height:52px;display:flex;align-items:center;gap:8px;pointer-events:none}#topbar>*{pointer-events:auto}.chip{height:44px;border-radius:22px;background:#3a2414d1;color:#fff4dc;display:flex;align-items:center;gap:6px;padding:0 12px;font-family:var(--f-display);font-size:18px;box-shadow:0 3px #0000004d;white-space:nowrap}#phase{flex:1;justify-content:center;min-width:0;overflow:hidden}#phase .t{color:var(--gold);min-width:2.2em;text-align:right}#phase .ph{overflow:hidden;text-overflow:ellipsis}#menuBtn{width:48px;height:48px;padding:0;font-size:22px}#rtt{position:absolute;right:16px;top:64px;font-size:11px;color:#fff4dc;background:#0000004d;padding:1px 6px;border-radius:6px;pointer-events:none}#players{position:absolute;display:flex;gap:6px;pointer-events:none}#players>*{pointer-events:auto}.pl{display:flex;align-items:center;gap:6px;background:#3a2414c7;border-radius:12px;padding:3px 8px 3px 3px;color:#fff4dc;min-width:0;position:relative;border:2px solid transparent}.pl img{width:36px;height:40px;flex:none;border-radius:8px;background:#fff0d22e}.pl .nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pl .hp{font-family:var(--f-display);font-size:16px;display:flex;align-items:center;gap:3px}.pl .bar{height:5px;border-radius:3px;background:#00000059;overflow:hidden;margin-top:2px}.pl .bar i{display:block;height:100%;background:#e5534b}.pl .info{min-width:0;flex:1}.pl.me{border-color:var(--gold)}.pl.vs{box-shadow:0 0 0 3px #e5534b}.pl.dead{filter:grayscale(1) brightness(.7)}.pl .tag{position:absolute;right:4px;top:-7px;font-size:10px;background:var(--blue);border-radius:6px;padding:0 4px;color:#fff}#syn{position:absolute;display:flex;gap:4px;pointer-events:none}#syn>*{pointer-events:auto}.sy{display:flex;align-items:center;gap:4px;background:#3a2414b8;color:#fff4dc;border-radius:16px;padding:2px 8px 2px 2px;font-size:13px;white-space:nowrap;min-height:32px;cursor:pointer}.sy.on{background:#e0873af2}.sy.on2{background:#f2c443f2;color:var(--ink)}.sy.off{opacity:.7}.sy .n{font-family:var(--f-display)}#shop{position:absolute;left:0;right:0;bottom:0;padding:8px 16px 12px;display:flex;gap:8px;background:linear-gradient(to top,#3a2414e6,#3a241499 80%,#3a241400)}#shop .ctl{display:flex;gap:8px}#shop .ctl .btn{font-size:17px;padding:4px 14px;min-height:48px;min-width:64px}#status{position:absolute;display:flex;gap:8px;pointer-events:none;align-items:stretch}#status>*{pointer-events:auto}#status .st{position:relative;background:#3a2414d9;border-radius:14px;box-shadow:0 3px #0000004d;padding:6px 12px 9px;color:#fff4dc;display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1 1 0}#status .st:after{content:"";position:absolute;inset:4px;border:2px dashed rgba(255,240,210,.45);border-radius:10px;pointer-events:none}#status .st-l{font-size:13px;opacity:.85;letter-spacing:2px;white-space:nowrap}#status .st-v{font-family:var(--f-display);font-size:28px;line-height:1.15;display:flex;align-items:center;gap:6px;white-space:nowrap}#status .st-v .coin,#status .st-v .heart{width:24px;height:24px}#status .bar{height:8px;border-radius:4px;background:#00000073;overflow:hidden;margin-top:4px}#status .bar i{display:block;height:100%;background:#6fc0ff;transition:width .25s}#status .st-hp .bar i{background:#e0604f}#status .st-lvl{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px}#status .st-lvl .col{display:flex;flex-direction:column}#status .st-lvl .bar{width:72px}#status .st-gold{flex:0 0 auto}#status .st-gold .st-v{color:var(--gold)}#status .st-inc{font-family:var(--f-body);font-size:12px;color:#ffe9a8;opacity:.9;margin-top:1px;white-space:nowrap}#status #xpBtn{min-height:48px;min-width:58px;font-size:15px;padding:2px 10px}#status .st-ob.cap .st-v{color:#ff8a7a}#status.wide{align-items:center;justify-content:flex-end}#status.wide .st{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;padding:3px 10px;border-radius:12px}#status.wide .st-l{font-size:12px;letter-spacing:1px}#status.wide .st-v{font-size:21px}#status.wide .st-v .coin,#status.wide .st-v .heart{width:20px;height:20px}#status.wide .st-lvl .col{flex-direction:row;align-items:center;gap:7px}#status.wide .st-lvl .bar{width:44px;height:6px;margin-top:0}#status.wide .st-hp .bar{width:130px;height:10px;margin-top:0;flex:0 0 auto}#status.wide .st-inc{font-size:11px;margin-top:0}#status.wide #xpBtn{min-height:48px;min-width:56px;padding:0 10px;font-size:14px}.compact #status.wide .st{padding:2px 8px;gap:6px}.compact #status.wide .st-l{font-size:10px}.compact #status.wide .st-v{font-size:18px}.compact #status.wide .st-v .coin,.compact #status.wide .st-v .heart{width:17px;height:17px}.compact #status.wide .st-lvl .bar{width:36px}.compact #status.wide .st-hp .bar{width:84px;height:8px}.compact #status.wide .st-inc{font-size:10px}.compact #status.wide #xpBtn{min-width:52px;font-size:13px}.compact #players{gap:4px}.compact #players .pl{padding:2px 6px 2px 2px;border-radius:9px}.compact #players .pl img{width:24px;height:27px}.compact #players .pl .nm{font-size:11px}.compact #players .pl .hp{font-size:13px}.compact #players .pl .bar{height:4px;margin-top:1px}.compact #syn .sy{font-size:11px;padding:1px 6px}#topbar.wide{right:auto;height:48px}#topbar.wide #phase{flex:0 1 auto;max-width:300px}.compact #topbar.wide #phase{max-width:175px}#status .st-ob.cap{box-shadow:0 3px #0000004d,0 0 0 2px #ff6e5a8c}#status .st-ob.pulse{animation:obPulse .55s ease}@keyframes obPulse{0%,to{transform:scale(1)}40%{transform:scale(1.12)}}@media(max-width:460px){#status{gap:6px}#status .st{padding:5px 9px 8px}#status .st-l{font-size:11px;letter-spacing:1px}#status .st-v{font-size:23px}#status .st-v .coin,#status .st-v .heart{width:20px;height:20px}#status .st-lvl .bar{width:52px}#status .st-inc{font-size:10px}}#cards{display:flex;gap:6px;flex:1;min-width:0}.card{flex:1 1 0;min-width:0;border-radius:12px;background:#fff3dd;color:var(--ink);position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;overflow:hidden;box-shadow:0 3px #00000059;border:3px solid #9a9a9a;padding-bottom:4px}.card.empty{background:#fff3dd26;box-shadow:none;border-style:dashed;border-color:#fff0d24d;cursor:default}.card.c1{border-color:#a8a8a8}.card.c2{border-color:#5aa83a}.card.c3{border-color:#3f7fd8}.card.c4{border-color:#a24ad8}.card.c5{border-color:#f0b020}.card.c1 .cbg{background:#d9d4cc}.card.c2 .cbg{background:#bfe0a0}.card.c3 .cbg{background:#b4d0f4}.card.c4 .cbg{background:#dcbcf0}.card.c5 .cbg{background:#f8dc90}.card .cbg{position:absolute;left:0;right:0;top:0;height:70%}.card img{position:relative;height:70%;max-width:100%;object-fit:contain;margin-top:2px;flex:none}.card .nm{position:relative;flex:1;display:flex;align-items:center;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 3px}.card .meta{position:absolute;left:2px;top:calc(70% - 21px);flex-direction:row;display:flex;align-items:center;gap:2px;font-family:var(--f-display);font-size:15px}.card .meta .badge{width:20px;height:20px}.card .cost{position:absolute;right:4px;top:3px;display:flex;align-items:center;gap:2px;font-family:var(--f-display);font-size:15px;background:#fffc;border-radius:10px;padding:0 4px 0 2px}.card.poor{filter:grayscale(.6) brightness(.85)}.card.hot{animation:hot 1s ease-in-out infinite}@keyframes hot{50%{box-shadow:0 0 0 3px #ffe27a,0 0 14px #ffd040}}#sellZone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:22px;color:#fff;background:#b6463aeb;border-radius:14px 14px 0 0;gap:8px;pointer-events:none}#sellZone.over{background:#dc4632}#fightBtn{position:absolute}#toast{position:fixed;left:50%;top:32%;transform:translate(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:40}#toast div{background:#3a2414e6;color:#fff4dc;padding:8px 16px;border-radius:14px;font-size:16px;animation:toast 1.8s forwards;white-space:nowrap}@keyframes toast{0%{opacity:0;transform:translateY(8px)}10%{opacity:1;transform:none}80%{opacity:1}to{opacity:0;transform:translateY(-10px)}}#banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none;text-align:center;z-index:20}#banner .big{font-family:var(--f-display);font-size:clamp(44px,10vmin,80px);color:#fff4dc;text-shadow:0 4px 0 #6b3418,0 8px 16px rgba(0,0,0,.5);white-space:nowrap}#banner .small{font-family:var(--f-display);font-size:22px;color:#fff4dc;text-shadow:0 2px 4px rgba(0,0,0,.7)}#banner.show{animation:pop .35s ease-out}@keyframes pop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}#info{position:absolute;width:min(300px,calc(100% - 32px));padding:14px;z-index:15;text-align:left;font-size:14px}#info .hd{display:flex;align-items:center;gap:8px}#info .hd img{width:56px;height:62px}#info h3{margin:0;font-family:var(--f-display);font-size:20px}#info .stars{color:var(--gold);font-size:16px;letter-spacing:1px}#info .tr{display:flex;gap:6px;margin-top:2px;font-size:13px;align-items:center;flex-wrap:wrap}#info .tr span{display:inline-flex;align-items:center;gap:3px}#info .tr .badge{width:22px;height:22px}#info .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 8px;margin:8px 0;font-size:13px}#info .ab{background:#0003;border-radius:8px;padding:6px 8px;font-size:13px;line-height:1.4}#info .sellb{margin-top:8px;width:100%}.results{display:flex;flex-direction:column;gap:6px}.results .pl{background:#fff5e124}.results .pl .pl-place{font-family:var(--f-display);font-size:22px;width:30px;text-align:center;color:var(--gold)}.syndesc{font-size:13px;text-align:left;display:flex;flex-direction:column;gap:6px}.syndesc div{display:flex;align-items:center;gap:8px}@media(max-width:560px){#players .pl .nm{display:none}#players .pl{padding-right:6px}#players .pl img{width:30px;height:34px}.chip{padding:0 10px;font-size:16px}#rtt{inset:auto auto 180px 16px}}
