/* Capt. Whiskers' Spades 1.0.0 (SCDO Laboratory) */
*{box-sizing:border-box}
html,body{margin:0;background:#0e2436;color:#fff4dc;font:15px/1.4 system-ui,-apple-system,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
html{--top:36px}#game{height:calc(100vh - var(--top));height:calc(100dvh - var(--top));min-height:540px;display:flex;flex-direction:column;align-items:stretch;padding:6px 8px 8px;gap:5px;max-width:560px;margin:0 auto;position:relative;overflow:hidden}
#hd .r1{display:flex;align-items:center;gap:6px}
#hd h1{font:700 17px/1.2 Georgia,serif;color:#ffd166;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:inline-flex;border:1px solid #3a6386;border-radius:9px;overflow:hidden;flex:none}
.seg button{background:#16324b;border:0;padding:4px 8px;font-size:13px}
.seg button[aria-pressed=true]{background:#ffd166;color:#1d1d1f;font-weight:700}
.ib{background:#16324b;border:1px solid #3a6386;border-radius:9px;width:34px;height:30px;padding:0;flex:none}
.langdd{flex:none;margin:0}.langdd select,#langsel{appearance:none;-webkit-appearance:none;background:#16324b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffd166'/%3E%3C/svg%3E") no-repeat right 8px center;border:1px solid #3a6386;border-radius:9px;color:#fff4dc;padding:4px 22px 4px 8px;font:13px/1.2 inherit;max-width:118px}
#sc{display:flex;gap:6px;margin-top:5px;font-size:13px}
#sc .tm{flex:1;background:#16324b;border-radius:9px;padding:4px 8px;display:flex;justify-content:space-between;gap:4px}
#sc .tm b{color:#ffd166;font-size:16px}#sc .tg{flex:none;align-self:center;color:#9fd3ff;font-size:12px}
#tbl{position:relative;flex:1 1 auto;min-height:250px;border-radius:22px;background:radial-gradient(ellipse at center,#2f6b4f 0%,#1c4a37 60%,#143426 100%);border:6px solid #6b4423;box-shadow:inset 0 0 0 2px #a8743f,0 4px 12px #0008}
.seat{position:absolute;text-align:center;font-size:12px;line-height:1.25}
#s2{top:6px;left:50%;transform:translateX(-50%)}#s1{left:4px;top:42%;transform:translateY(-50%)}#s3{right:4px;top:42%;transform:translateY(-50%)}
.seat.me{position:static;display:flex;align-items:center;justify-content:center;gap:8px}.seat.me .av{width:30px;height:30px;margin:0}.seat.me br{display:none}
.av{width:44px;height:44px;margin:0 auto 2px;border-radius:50%;background:#123049;border:2px solid #ffd166;display:block}
.seat.turn .av{box-shadow:0 0 0 3px #9fd3ff,0 0 14px #9fd3ff}
.nm{font-weight:700;white-space:nowrap}.tag{display:inline-block;font-size:9.5px;background:#9fd3ff;color:#0e2436;border-radius:6px;padding:0 4px;font-weight:700}
.bt{display:inline-block;margin-top:2px;background:#0e2436cc;border-radius:8px;padding:1px 7px;font-weight:700;color:#ffd166}
.bt.nil{color:#ff9fb2}
#trk{position:absolute;left:50%;top:50%;width:170px;height:190px;transform:translate(-50%,-46%)}
.slot{position:absolute;width:56px;height:80px}
#t0{left:57px;bottom:0}#t2{left:57px;top:0}#t1{left:0;top:55px}#t3{right:0;top:55px}
.card{width:56px;height:80px;border-radius:7px;background:#fffdf6;color:#1d1d1f;border:1px solid #9a8d70;position:relative;font:700 17px/1 Georgia,serif;box-shadow:0 2px 4px #0006;user-select:none}
.card .r{position:absolute;left:4px;top:4px;text-align:center}.card .r i{display:block;font-style:normal;font-size:15px}
.card .big{position:absolute;right:5px;bottom:4px;font-size:28px}
.card.red{color:#c8102e}
.card.back{background:repeating-linear-gradient(45deg,#7a2b2b 0 6px,#8e3838 6px 12px);border:2px solid #fff4dc}
.card.back::after{content:"🐾";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px}
.slot .card{transition:transform .45s ease,opacity .45s ease}
.slot .card.in0{transform:translateY(120px);opacity:0}.slot .card.in2{transform:translateY(-120px);opacity:0}.slot .card.in1{transform:translateX(-120px);opacity:0}.slot .card.in3{transform:translateX(120px);opacity:0}
.slot .card.win{box-shadow:0 0 0 3px #ffd166,0 0 16px #ffd166}
#trk.sw0 .card{transform:translateY(160px) scale(.5);opacity:0}#trk.sw2 .card{transform:translateY(-160px) scale(.5);opacity:0}#trk.sw1 .card{transform:translateX(-160px) scale(.5);opacity:0}#trk.sw3 .card{transform:translateX(160px) scale(.5);opacity:0}
#st{text-align:center;font-size:14px;min-height:20px;color:#cfe6ff}
#fair{text-align:center}#fairb{background:none;border:1px solid #3d8a5a;color:#9fe6b4;border-radius:12px;font-size:12px;padding:2px 10px}
#hand{position:relative;height:104px;margin:0 2px;flex:none}
#hand .card{position:absolute;bottom:0;transition:transform .2s}
#hand .card.up{transform:translateY(-18px);box-shadow:0 0 0 3px #ffd166}
#hand .card.no{filter:brightness(.55)}
#hand .card.hint{box-shadow:0 0 0 3px #9fe6b4,0 0 14px #9fe6b4}
.ov{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.ov[hidden]{display:none}
.box{background:#123049;border:2px solid #ffd166;border-radius:16px;padding:14px;max-width:420px;width:100%;max-height:92vh;overflow:auto;font-size:16px;line-height:1.5}
.box h2{font:700 20px Georgia,serif;color:#ffd166;margin:0 0 8px}
.box .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{background:#ffd166;color:#1d1d1f;border:0;border-radius:10px;padding:9px 14px;font-weight:700;font-size:16px}
.btn.s{background:#16324b;color:#fff4dc;border:1px solid #3a6386}
.bg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.bg button{background:#16324b;border:1px solid #3a6386;border-radius:9px;padding:8px 0;font-weight:700;font-size:16px}
.bg button.sug{border-color:#9fe6b4;box-shadow:0 0 0 2px #9fe6b4}
.bg button.n0{grid-column:span 2;color:#ff9fb2}
table.ss{width:100%;border-collapse:collapse;font-size:14px}table.ss td,table.ss th{border-bottom:1px solid #3a6386;padding:3px 4px;text-align:right}table.ss td:first-child,table.ss th:first-child{text-align:left}
.mono{font:12px/1.35 ui-monospace,Menlo,monospace;word-break:break-all;background:#0e2436;padding:6px;border-radius:8px}
.tcat{float:left;width:64px;height:64px;margin:0 10px 4px 0}
.ok{color:#9fe6b4;font-weight:700}.bad{color:#ff9fb2;font-weight:700}
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:#ffd166;color:#1d1d1f;font-weight:700;border-radius:12px;padding:8px 16px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:30}
#toast.on{opacity:1}
#below{max-width:560px;margin:0 auto;padding:4px 12px 30px;text-align:center;font-size:13px}
.pill{display:inline-block;background:#16324b;border-radius:12px;padding:4px 12px;color:#ffd166;font-weight:700}.note{color:#cfe6ff}
#wal{background:#16324b;border-radius:12px;padding:8px;margin:8px 0}
footer a,#below a{color:#9fd3ff}
@media (min-width:700px){#game{max-width:640px}.card{width:66px;height:94px}.slot{width:66px;height:94px}#trk{width:200px;height:220px}#t0,#t2{left:67px}#t1,#t3{top:63px}#hand{height:120px}#tbl{min-height:360px}}