.hand-zone{position:absolute;left:32%;width:36%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:3px}.near-hand{top:85%;height:11%}.far-hand{top:2.1%;height:9%}.hand-label{border:1px solid #ffffff77;border-radius:9px;padding:3px 7px;background:#10291eef;color:#b0ffcc;font-size:12px;white-space:nowrap}.hand-label.blue{background:#122344ef;color:#c0d9ff}.hand-row{display:flex;justify-content:flex-start;gap:3px;max-width:100%;overflow-x:auto;padding:2px 3px 6px;scrollbar-width:thin}.held-card{border:0;padding:0;background:none;flex:0 0 35px;width:35px;height:49px}.far-hand .held-card{width:29px;height:41px;flex-basis:29px}.far-hand .hand-row{transform:rotate(180deg)}
.game-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:5/7;width:100%;border-radius:9px;border:2px solid #161616;box-shadow:0 3px 0 #121212,0 8px 16px #0005;font-family:Arial,Helvetica,sans-serif;text-align:center;padding:12px;color:#111;background:#fff;overflow:hidden}.game-card.battle{color:#fff;background:#080808;border-color:#888}.game-card.six{color:#111;background:#99969d;border-color:#454349}.card-kind{font-size:12px;font-weight:800;letter-spacing:1px}.card-number{font-size:64px;font-weight:900;line-height:1.1;white-space:nowrap}.card-number.pair-number{font-size:26px;white-space:normal;max-width:110px;line-height:1.4}.card-caption{font-size:14px;font-weight:700;line-height:1.25}.card-instruction{font-size:14px;line-height:1.25}.mini-card{height:100%;padding:2px;gap:0;border-radius:3px;border-width:1px;box-shadow:0 2px 2px #0007}.mini-card .card-kind,.mini-card .card-caption,.mini-card .card-instruction{display:none}.mini-card .card-number{font-size:22px}.mini-card .pair-number{font-size:10px}.mini-card:has(.pair-number){min-width:35px}.held-card .game-card[title]{cursor:pointer}
#deck-counts{position:absolute;left:12%;top:34.5%;width:20%;height:18%;pointer-events:none;z-index:4;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start}.deck-count{font-size:12px;font-weight:800;color:white;background:#101010dc;padding:2px 6px;border-radius:8px;box-shadow:0 1px 4px #0008}.blue-turn #deck-counts{left:72%;top:37%}
#card-hand{max-width:650px;width:calc(100% - 24px);max-height:88dvh}#card-hand .dialog-inner{padding:22px}#hand-close{border:0;background:transparent;color:white;font-size:28px}#hand-title{font-size:23px;margin:0}#hand-help{font-size:14px;line-height:1.4}#hand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;max-height:58dvh;overflow-y:auto;padding:3px 5px 10px}.hand-item{max-width:175px}.hand-item .game-card{min-height:190px}.card-use{width:100%;min-height:40px;font-size:14px;font-weight:700;margin-top:9px;border-radius:8px;border:1px solid #ffe194aa;background:#ffe194;color:#10211b}.card-use:disabled{background:#ffffff0c;border-color:#ffffff22;color:#b1bcb6;cursor:default}.card-use:focus-visible,.held-card:focus-visible{outline:3px solid #ffe194}
#battle-cards{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:15px}.battle-card-side>span{font-size:13px;font-weight:bold;color:#abffc3}.battle-card-side.blue>span{color:#a9cbff}.battle-card-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:5px;min-height:40px}.battle-card-row .mini-card{width:30px;height:42px}.battle-card-row small{font-size:12px;color:#b6c5bd}.removed-die{opacity:.15}.canceled-die{position:fixed!important;z-index:22;animation:cancelSlide .7s ease-in-out both;pointer-events:none}.cancel-x{position:absolute;inset:0;display:grid;place-items:center;color:#ff344b;font-size:65px;line-height:1;font-weight:900;text-shadow:0 1px 4px #fff;animation:crossIn .15s .65s both}#canceled-dice{position:fixed;inset:0;z-index:22;pointer-events:none}
@keyframes cancelSlide{0%{transform:translate(0,0) scale(1)}100%{transform:translate(var(--cancel-x),var(--cancel-y)) scale(.5)}}@keyframes crossIn{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
#six-options{display:flex;gap:10px;justify-content:center;overflow-x:auto;padding:8px}#six-options .six-option{width:95px;min-width:95px;padding:0;background:none;border:0}#six-options .game-card{gap:5px;padding:8px}#six-options .card-number{font-size:40px}#six-options .card-instruction{display:none}#six-options .card-kind{font-size:10px}#six-options .card-caption{font-size:12px}.six-option:disabled{opacity:.5}#end-screen .end-panel{max-height:85dvh;overflow-y:auto}
#card-flight{position:fixed;inset:0;z-index:21;pointer-events:none;perspective:1100px}.flying-card{position:fixed;width:170px;height:238px;perspective:1000px;animation:cardJourney 2.4s both}.flying-inner{position:absolute;inset:0;transform-style:preserve-3d;animation:cardFlip 2.4s both}.flying-inner .game-card,.card-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.deal-face{transform:rotateY(180deg);animation:cardFlash 2.4s both}.card-back{border:2px solid #1b1b1b;border-radius:9px;display:grid;place-items:center;background:white;color:#ef202f;font-size:115px;font-weight:900}.card-back.battle{background:#080808;color:white;font-size:65px}.card-back.six{background:#99969d;color:#111;font-size:100px}
@keyframes cardJourney{0%{left:var(--from-x);top:var(--from-y);transform:translate(-50%,-50%) scale(.22)}35%,67%{left:50%;top:45%;transform:translate(-50%,-50%) scale(1)}100%{left:var(--to-x);top:var(--to-y);transform:translate(-50%,-50%) scale(.21)}}
@keyframes cardFlip{0%,8%{transform:rotateY(0)}36%,100%{transform:rotateY(180deg)}}@keyframes cardFlash{0%,36%,65%,100%{box-shadow:0 6px 25px #0006}45%,53%{box-shadow:0 0 0 5px #fff8,0 0 40px #fff,0 0 75px #ffdf88}}
@media(max-height:720px){#battle-cards{gap:20px;margin-top:8px}.battle-card-row .mini-card{width:25px;height:34px}#battle-dice{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.flying-card{animation-duration:.01s}.flying-inner{animation-duration:.01s}.deal-face{animation:none}.canceled-die{animation-duration:.01s}.cancel-x{animation-duration:.01s;animation-delay:0s}}

.canceled-die.blue{background:linear-gradient(135deg,#447fe8,#2049b3);box-shadow:0 5px 0 #122d72,0 9px 14px #0005}

.flying-card,.flying-inner,.deal-face{animation-delay:var(--deal-offset,0ms)}.canceled-static{position:relative;opacity:.45}.rest-x{position:absolute;inset:0;display:grid;place-items:center;font-size:60px;color:#ff374b;font-weight:900;text-shadow:0 1px 3px #fff}