.game-container,.game-container *,.game-container *::before,.game-container *::after{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none}.game-container{position:relative;display:grid;grid-template-rows:auto minmax(0, 1fr) 57%;grid-template-areas:"jokbo-rank" "jokbo" "cards";width:95%;max-width:min(600px,50vh);aspect-ratio:1/2;margin:0 auto 100px;container-type:inline-size}#jokbo-rank{grid-area:jokbo-rank;display:flex;justify-content:center;align-items:center;padding:15px 10px 10px 10px;width:100%;text-align:center}#jokbo-rank>span.rank-item,#jokbo-rank>.rank-item-wrapper{flex:1 1 0;box-sizing:border-box}#jokbo-rank .rank-item{padding:2px 3px;color:#fff;font-size:clamp(9px,4cqw,1rem);min-width:0;text-align:center;border-left:1px solid #fff;font-weight:bold;cursor:pointer;display:flex;justify-content:center;align-items:center;box-sizing:border-box}#jokbo-rank>span.rank-item:first-child{border-left:none}.rank-item-wrapper>.rank-item{width:100%;box-sizing:border-box}.rank-item-wrapper>.rank-item:first-child{border-left:none}.rank-item.active{background-color:red;color:#fff;border-radius:0}#jokbo-rank>span.rank-item:first-child.active{border-top-left-radius:5px;border-bottom-left-radius:5px}#jokbo-rank>.rank-item-wrapper:last-child>.rank-item.active{border-top-right-radius:5px;border-bottom-right-radius:5px}@media(max-width: 600px){.rank-item.active{height:100%;display:flex;justify-content:center;align-items:center}}.rank-item-wrapper{position:relative}.rank-item-wrapper>.rank-item::after{content:"▾";font-size:.62em;margin-left:2px;opacity:.75}.sub-rank-items{position:absolute;top:100%;left:0;display:none;flex-direction:column;background-color:#212529;z-index:10;min-width:100%;border:1px solid #495057;border-radius:0 0 5px 5px;overflow:hidden}@media(hover: hover){.rank-item-wrapper:hover .sub-rank-items{display:flex}}.rank-item-wrapper.is-open .sub-rank-items{display:flex}.sub-rank-items .rank-item{border:none;padding:2px 4px;background-color:#212529}.sub-rank-items .rank-item:hover{color:red !important}#jokbo-display{grid-area:jokbo;display:flex;justify-content:space-around;align-items:center;position:relative;gap:1px}.selected-card-slot{flex:1;background-color:#444;border:1px dashed #666;border-radius:5px;display:flex;justify-content:center;align-items:center;position:relative;width:100%;aspect-ratio:7/10;cursor:grab;touch-action:none}.selected-card-slot:active{cursor:grabbing}.card-image-container{width:99%;height:99%;display:flex;justify-content:center;align-items:center}.selected-card-slot img{max-width:100%;max-height:100%;border-radius:5px;width:auto;height:100%}#jokbo-name-overlay{position:absolute;top:6%;left:50%;transform:translateX(-50%);color:#fff;font-size:2.5rem;text-align:center;pointer-events:none;visibility:hidden;width:100%;font-weight:bold}#jokbo-detail-overlay{position:absolute;top:auto;bottom:6px;left:0;right:0;transform:none;width:auto;padding:0 8px;font-size:clamp(11px,3.6cqw,1rem);line-height:1.28;color:#d3d3d3;text-align:center;pointer-events:none;visibility:hidden}#reveal-hint{position:absolute;top:auto;bottom:6px;left:0;right:0;transform:none;width:auto;padding:0 8px;color:rgba(255,255,255,.72);font-size:clamp(11px,3.6cqw,1rem);line-height:1.28;text-align:center;pointer-events:none;visibility:hidden}.game-container.show-hint .back-card-overlay{animation:pocker-breathe 2.4s ease-in-out infinite}@keyframes pocker-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.card-image-container.is-pop{animation:pocker-pop .34s cubic-bezier(0.2, 1.4, 0.4, 1)}@keyframes pocker-pop{0%{transform:scale(0.82)}60%{transform:scale(1.06)}100%{transform:scale(1)}}@media(prefers-reduced-motion: reduce){.game-container.show-hint .back-card-overlay,.card-image-container.is-pop{animation:none}}#cards{grid-area:cards;background-color:#343a40;padding:8px;overflow:hidden;z-index:1;border-radius:8px;display:grid;grid-template-columns:repeat(13, minmax(0, 1fr));grid-template-rows:repeat(4, minmax(0, 1fr));gap:4px 2px}.card-container{position:relative;container-type:inline-size}.card-img{height:100%;min-height:0;cursor:pointer;border-radius:4px;background:linear-gradient(158deg, #fff 0%, #fbf8f1 55%, #ece5d6 100%);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.22);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:.3em 0;color:var(--ink);font-size:clamp(9px,52cqw,16px);font-weight:bold;line-height:1;transition:transform .12s ease,box-shadow .12s ease;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.card-img.spade{--suit: "♠";--ink: #14171a}.card-img.heart{--suit: "♥";--ink: #d0021b}.card-img.diamond{--suit: "♦";--ink: #d0021b}.card-img.club{--suit: "♣";--ink: #14171a}.pc-idx{display:flex;flex-direction:column;align-items:center;gap:.1em}.pc-idx::after{content:var(--suit);font-size:.74em}.pc-idx--b{transform:rotate(180deg);font-size:.9em;opacity:.42}.pc-pip::before{content:var(--suit);font-size:min(2.2em,95cqw);line-height:1}.card-img.selected{background:linear-gradient(158deg, #d32f2f 0%, #8e1313 100%);color:#fff;box-shadow:0 0 0 2px #ffd54f,0 5px 10px rgba(0,0,0,.55);transform:translateY(-2px)}.card-img.selected .pc-idx--b{opacity:.72}.jokbo-win{display:inline-block;margin-top:4px;font-size:.78em;font-weight:700;color:#ffd166}#jokbo-name-overlay{box-sizing:border-box;padding:0 44px;line-height:1.2;font-size:min(2.5rem,9cqw)}.jokbo-share{position:absolute;top:0;right:4px;width:40px;height:1.2em;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:rgba(0,0,0,0);color:rgba(255,255,255,.55);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.jokbo-share svg{width:24px;height:24px}.jokbo-share:hover,.jokbo-share:focus-visible{color:#ffd166}