:root{--g:#3B2D63;--gd:#241C42;--cream:#F4E6C4;--y:#C98E10;--yl:#e3ab2e;--ink:#221A3A;--hw:86px;--hh:120px;--pw:58px;--ph:81px;--dw:44px;--dh:62px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Trebuchet MS",Verdana,sans-serif;color:var(--cream);min-height:100vh;background-color:var(--g);
background-image:radial-gradient(ellipse at 50% 40%,#ffffff14,#0000 60%,#00000055),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F4E6C4' opacity='.05'%3E%3Cpath d='M30 20a10 10 0 1 0 7 17 8 8 0 1 1-7-17z'/%3E%3Ccircle cx='90' cy='30' r='2'/%3E%3Ccircle cx='70' cy='90' r='1.5'/%3E%3Cpath d='M20 110V90a8 8 0 0 1 16 0v20z'/%3E%3C/g%3E%3C/svg%3E")}
header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--gd);border-bottom:3px solid #171230;flex-wrap:wrap}
.key{display:inline-block;background:linear-gradient(#f8eed6,#dccfae);color:var(--g);font:bold 16px/1 "Courier New",monospace;letter-spacing:2px;padding:9px 26px;border-radius:8px;box-shadow:0 4px 0 #9a8a6e,0 6px 8px #0008;user-select:none;text-decoration:none}
.title{font-size:20px;letter-spacing:1px;color:var(--yl)}header .sp{flex:1}.tag{font:12px "Courier New",monospace;opacity:.85}
button{font:bold 15px "Trebuchet MS",sans-serif;background:linear-gradient(#f8eed6,#dccfae);color:var(--g);border:0;border-radius:9px;padding:8px 14px;min-height:44px;box-shadow:0 4px 0 #9a8a6e;cursor:pointer;margin:3px;touch-action:manipulation;line-height:1.15}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #9a8a6e}button:disabled{opacity:.35;cursor:default;transform:none}
button.ic{width:44px;padding:0;font-size:20px;border-radius:50%}button.ic.on{background:linear-gradient(#f0c35e,var(--y))}
button.gold{background:linear-gradient(#f0c35e,var(--y));color:#221A3A;box-shadow:0 4px 0 #7d5808}
button.big{font-size:17px;padding:10px 22px;min-height:52px}
button .en,.bi .en{display:block;font-weight:normal;font-size:.72em;opacity:.8}
.mt{display:block}.en{display:block;font-weight:normal;font-size:.8em;opacity:.8}
h2 .en{font-size:.6em}
main{display:grid;grid-template-columns:1fr 300px;gap:12px;padding:12px;max-width:1300px;margin:auto}
@media(max-width:900px){main{grid-template-columns:1fr}}
.panel{background:#0000002e;border:1px solid #F4E6C422;border-radius:12px;padding:10px;margin-bottom:10px}
#table{background:radial-gradient(ellipse at center,#ffffff10,#0000 70%);border-radius:24px;border:2px solid #F4E6C41a;padding:10px;box-shadow:inset 0 0 40px #0006}
.card{width:var(--pw);height:var(--ph);border-radius:7px;position:relative;box-shadow:0 2px 5px #0008;user-select:none;flex:none;background:#F4E6C4;overflow:hidden;transform-origin:0 0}
.card img{width:100%;height:100%;display:block;pointer-events:none}
.hand .card{width:var(--hw);height:var(--hh);border-radius:9px;cursor:pointer;transition:transform .18s,box-shadow .18s}
.hand .card:hover{transform:translateY(-5px)}.hand.off .card{cursor:default;transform:none;filter:saturate(.85)}
.hand .card.sel{transform:translateY(-14px);box-shadow:0 0 0 4px var(--yl),0 12px 22px #000a}
.hand{display:flex;gap:8px;justify-content:center;min-height:calc(var(--hh) + 20px);padding-top:14px}
.badge{position:absolute;top:4px;right:4px;background:var(--y);color:var(--ink);border-radius:10px;font:bold 11px sans-serif;padding:2px 6px;box-shadow:0 1px 3px #0008}
.badge.warn{background:#C4502B;color:#fff}
.card.opens{box-shadow:0 0 0 3px var(--y),0 0 14px #C98E10aa}
.doors{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dg{text-align:center;background:#00000026;border-radius:10px;padding:5px 6px}.dg .nm{font-size:11px;font-weight:bold;margin-bottom:4px;white-space:nowrap}.dg .ds{display:flex;gap:4px}
.dslot{width:var(--dw);height:var(--dh);border-radius:6px;border:2px dashed #F4E6C433;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.9}
.dslot .card{width:var(--dw);height:var(--dh);border-radius:5px}
.centre{display:flex;gap:18px;justify-content:center;align-items:center;margin:12px 0 6px}
.slot{width:var(--pw);height:var(--ph);border-radius:8px;border:2px dashed #F4E6C433;position:relative}
.slot .card{position:absolute;inset:0}.slot .stack{position:absolute;inset:0;transform:translate(3px,3px);box-shadow:0 2px 4px #0006}
#disc{cursor:pointer}
.pile{text-align:center}.lbl{font-size:11px;margin-top:4px;opacity:.9;line-height:1.2}
.info{font-size:13px;line-height:1.35;background:#00000030;border-radius:10px;padding:6px 10px;min-width:120px}.info b{color:var(--yl)}
.pathbox{background:#00000024;border-radius:14px;padding:6px 8px 10px;margin:6px 0}
.plbl{font-size:12px;opacity:.85;margin-bottom:4px;display:flex;justify-content:space-between;gap:8px}
.path{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:flex-end;min-height:calc(var(--ph) + 6px);padding-left:4px}
.path .card.used{margin-left:calc(var(--pw) * -0.62);filter:brightness(.62) saturate(.7)}.path .card.used:first-child{margin-left:0}
.path .card.used+.card:not(.used){margin-left:10px}
.path .card.elig{box-shadow:0 0 0 2px var(--yl),0 3px 8px #000a}
.path .empty{font-size:13px;opacity:.7;align-self:center;padding:10px}
.path .div{width:3px;align-self:stretch;background:var(--y);border-radius:2px;opacity:.7}
#prompt{text-align:center;font-size:17px;font-weight:bold;margin:6px auto;padding:8px 14px;max-width:660px;min-height:48px;background:#0000003a;border-radius:12px;border-left:5px solid var(--y)}
#prompt .en{font-size:13px}#prompt .hint{font-size:13px;font-weight:normal;margin-top:4px;opacity:.9}#prompt .hint .en{font-size:12px}
#prompt .warn{color:#ffd29a}
.toast{text-align:center;font-size:13px;min-height:18px;opacity:0;transition:opacity .4s}.toast.on{opacity:1}
#actions{text-align:center;min-height:56px}
#stats h4{margin:0 0 6px;color:var(--yl)}.st{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid #ffffff12;font-size:14px}.st .en{display:inline;font-size:11px;margin-left:4px}.st .mt{display:inline}
.bar{height:6px;background:#ffffff18;border-radius:3px;margin-top:4px}.bar i{display:block;height:100%;background:var(--y);border-radius:3px;transition:width .6s}
.small{font-size:12px;opacity:.85}.mtnote{text-align:center}
#log{height:240px;overflow:auto;font:12px/1.35 "Courier New",monospace;margin-top:4px}#log div{border-bottom:1px solid #ffffff12;padding:2px 0}
.row{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}.row.l{justify-content:flex-start}
.row input,.row select{font:14px sans-serif;padding:8px;border-radius:8px;border:2px solid #3B2D6355;min-height:40px;background:#fff;width:110px}
.chk{display:flex;align-items:center;gap:6px;font-weight:bold}.chk input{width:22px;height:22px;min-height:0}
.ov{position:fixed;inset:0;background:#140f2acc;display:flex;align-items:center;justify-content:center;z-index:40;padding:12px;backdrop-filter:blur(3px)}
.ov .box{background:var(--cream);color:var(--ink);border-radius:16px;padding:16px 18px;max-width:640px;width:100%;text-align:center;box-shadow:0 20px 50px #000a;max-height:94vh;overflow:auto;animation:pop .3s ease-out}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.ov h2{margin:8px 0 6px;color:var(--g)}.ov p{margin:6px 0}.ov .key{box-shadow:0 3px 0 #9a8a6e}
.ov button{background:#fff8e6;box-shadow:0 4px 0 #b9ab85}.ov button.gold{background:linear-gradient(#f0c35e,var(--y));box-shadow:0 4px 0 #7d5808}.btns{margin-top:12px}
.ov .card{width:96px;height:134px;border-radius:9px;display:inline-block;vertical-align:top}
.cards{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0;align-items:center}.cards figure{margin:0;font-size:12px;font-weight:bold;color:var(--g);position:relative}
.arrow{font-size:28px;color:var(--g)}
.lvls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.lv{border:3px solid transparent;border-radius:12px;padding:4px;background:#3B2D6312;cursor:pointer;font-size:13px;font-weight:bold;color:var(--g);min-height:0;box-shadow:none;margin:0}
.lv img{width:100%;border-radius:8px;display:block;margin-bottom:4px}.lv.on{border-color:var(--y);background:#C98E1022}
.lv .en{font-size:11px}
@media(max-width:520px){.lvls{grid-template-columns:repeat(2,1fr)}.lv img{max-height:120px;object-fit:cover;object-position:top}}
.opt{display:block;width:100%;text-align:left;padding:12px 14px;margin:8px 0;font-size:16px}.opt small{display:block;font-weight:normal;font-size:12px;margin-top:4px;opacity:.85}
.warnbox{background:#C4502B22;border-left:4px solid #C4502B;padding:6px 10px;border-radius:8px;text-align:left;font-size:14px;margin:6px 0}
.ord{cursor:pointer;position:relative}.ord .num{position:absolute;top:-8px;left:-8px;width:28px;height:28px;border-radius:50%;background:var(--y);color:var(--ink);font-weight:bold;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0008;z-index:2}
.pick{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:6px 0}.pick button{min-width:44px;font-size:14px}.pick button.on{background:var(--g)!important;color:var(--cream);box-shadow:0 4px 0 #171230!important}
.dots{margin-top:8px}.dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3B2D6344;margin:0 3px}.dots i.on{background:var(--g)}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.res div{background:#3B2D6314;border-radius:10px;padding:8px}.res b{display:block;font-size:24px;color:var(--g)}.res .en{font-size:11px}
.disc-grid .card{width:58px;height:81px}
.banner{position:fixed;left:50%;top:42%;z-index:70;font:900 54px/1.05 "Trebuchet MS",sans-serif;color:var(--y);letter-spacing:2px;text-shadow:0 4px 0 #221A3A,0 0 30px #000;pointer-events:none;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.banner .en{font-size:.42em;color:var(--cream);letter-spacing:1px;opacity:1;font-weight:bold}
.banner.go{animation:ban 1.5s cubic-bezier(.2,.8,.3,1) both}@keyframes ban{0%{transform:translate(-50%,-50%) scale(.2) rotate(-8deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.12) rotate(2deg);opacity:1}75%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.banner.bad{color:#e9e2c9}.shake{animation:shake .5s}@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.flipin img{animation:flip .45s cubic-bezier(.3,.7,.3,1) both}@keyframes flip{0%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
.glow{animation:glow 1s ease-in-out 2}@keyframes glow{50%{box-shadow:0 0 0 4px var(--cream),0 0 26px var(--yl)}}
.ghost{position:fixed;z-index:60;margin:0;transform-origin:0 0;pointer-events:none;box-shadow:0 10px 22px #000a}
.conf{position:fixed;top:-12px;width:10px;height:14px;z-index:80;pointer-events:none;border-radius:2px}
.hidden{display:none!important}
dialog{background:var(--cream);color:var(--ink);border-radius:12px;border:0;max-width:520px;width:95%}dialog label{display:block;margin:6px 0}dialog input[type=number]{width:70px}
body.public .pto{display:none!important}
table.agg{border-collapse:collapse;font-size:11px;margin-top:6px;width:100%}table.agg td,table.agg th{border:1px solid #ffffff22;padding:2px 4px;text-align:right}
@media(max-width:600px){:root{--hw:62px;--hh:87px;--pw:44px;--ph:62px;--dw:30px;--dh:42px}
 main{padding:6px}#table{padding:6px;border-radius:16px}.centre{gap:10px;margin:8px 0 4px}#prompt{font-size:15px;padding:6px 10px}.key{padding:8px 14px}.title{display:none}.pt-l{display:none}
 .hand{gap:5px}.doors{gap:5px}.dg{padding:4px}.dg .nm{font-size:9px}.dg .ds{gap:3px}.banner{font-size:36px}.info{font-size:12px;min-width:0}.ov .card{width:72px;height:100px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wm,.wm img{display:inline-block;height:30px;width:auto;line-height:0}