/* === Poker Card Deck (Design Work page) === */
.dw-page{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a3a1a 0%,#0d1f0d 40%,#050f05 100%)}
.dw-page::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='.3' fill='%23ffffff' fill-opacity='.02'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}
.dw-page::after{content:'';position:absolute;inset:0;border:.15rem solid rgba(80,50,20,.25);border-radius:0;pointer-events:none;box-shadow:inset 0 0 3rem rgba(0,0,0,.6),inset 0 0 1rem rgba(0,0,0,.4);margin:.3rem}

/* Deck container */
.poker-deck{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1200px}

/* Poker card */
.poker-card{position:absolute;width:1.8rem;height:2.6rem;border-radius:.12rem;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 .08rem .25rem rgba(0,0,0,.45),0 .02rem .06rem rgba(0,0,0,.3);transition:box-shadow .35s ease;will-change:transform;background:#ede4d3}
.poker-card::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");z-index:2;pointer-events:none;border-radius:.12rem}
/* Paper border highlight */
.poker-card::after{content:'';position:absolute;inset:.04rem;border-radius:.1rem;border:1px solid rgba(0,0,0,.06);pointer-events:none;z-index:1}

/* Card: white border inner frame */
.poker-card-inner{margin:.06rem;border:2px solid #fff;border-radius:.08rem;flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}

/* Card image area */
.poker-card-img{flex:1;background-size:cover;background-position:center;position:relative;min-height:0}
.poker-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.15) 100%)}

/* Card bottom text area */
.poker-card-footer{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,#f5f0e0 100%);padding:.08rem .1rem .1rem;text-align:center;border-top:1px solid rgba(0,0,0,.06);position:relative;z-index:1}
.poker-card-footer::before{content:'';position:absolute;top:0;left:.2rem;right:.2rem;height:1px;background:rgba(255,255,255,.6)}
.poker-card-footer .poker-card-cat{font-size:.09rem;color:rgba(0,0,0,.35);letter-spacing:.06rem;text-transform:uppercase;margin-bottom:.02rem;font-family:Georgia,serif}
.poker-card-footer .poker-card-title{font-size:.09rem;color:rgba(0,0,0,.7);font-weight:600;letter-spacing:.01rem;font-family:Georgia,'Times New Roman',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Corner suits (small decorations) */
.poker-card-corner{position:absolute;z-index:3;font-size:.1rem;color:rgba(0,0,0,.25);font-family:Georgia,serif;pointer-events:none}
.poker-card-corner-tl{top:.1rem;left:.1rem}
.poker-card-corner-br{bottom:.1rem;right:.1rem;transform:rotate(180deg)}

/* Card hover effect: the GSAP handles transforms, this is for shadow */
.poker-card:hover{box-shadow:0 .15rem .4rem rgba(0,0,0,.55),0 .04rem .1rem rgba(0,0,0,.35)}

/* Hover overlay */
.poker-hint{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.25);font-size:.12rem;font-family:Georgia,serif;letter-spacing:.04rem;z-index:5;pointer-events:none;transition:opacity .3s}
.poker-hint.hidden{opacity:0}

/* Deck "felt" texture overlay */
.poker-felt{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 70% 50% at 50% 50%,transparent 30%,rgba(0,0,0,.3) 100%)}

/* Responsive */
@media(max-width:640px){
    .poker-card{width:1.4rem;height:2.1rem}
    .poker-card-footer{padding:.05rem .08rem .06rem}
    .poker-card-footer .poker-card-title{font-size:.07rem}
    .poker-card-footer .poker-card-cat{font-size:.07rem}
    .dw-page::after{border-width:.08rem;margin:.15rem}
}

/* === Detail Page === */
.dw-detail{position:fixed;top:0;left:0;width:100%;height:100%;z-index:150;background:#000;overflow-y:auto;animation:dwFadeIn .4s ease}
@keyframes dwFadeIn{from{opacity:0}to{opacity:1}}
.dw-detail-back{position:fixed;top:.3rem;left:.5rem;z-index:160;display:flex;align-items:center;gap:.08rem;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.14rem;padding:.08rem .2rem;border-radius:.2rem;cursor:pointer;transition:all .35s}
.dw-detail-back:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3)}
.dw-detail-back svg{width:.16rem;height:.16rem;fill:none;stroke:currentColor;stroke-width:2}
.dw-detail-hero{width:100%;height:55vh;position:relative;display:flex;align-items:center;justify-content:center}
.dw-detail-hero-bg{position:absolute;inset:0;z-index:0}
.dw-detail-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);z-index:1}
.dw-detail-hero-content{position:relative;z-index:2;text-align:center;padding:0 .5rem}
.dw-detail-hero-title{font-size:.6rem;font-weight:700;color:#fff;letter-spacing:.04rem;line-height:1.15}
.dw-detail-hero-cat{font-size:.14rem;color:rgba(255,255,255,.5);letter-spacing:.08rem;text-transform:uppercase;margin-top:.12rem}
.dw-detail-body{max-width:9rem;margin:0 auto;padding:.6rem .5rem}
.dw-detail-desc{font-size:.16rem;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:.5rem}
.dw-detail-media{display:flex;flex-direction:column;align-items:center;margin-bottom:.5rem}
.dw-detail-media-item{width:100%;overflow:hidden}
.dw-detail-media-item img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.dw-detail-media-item video{width:100%;display:block}
.dw-media-lightbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;animation:dwFadeIn .25s ease}
.dw-media-lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}
.dw-media-lightbox-close{position:absolute;top:.3rem;right:.4rem;z-index:301;width:.44rem;height:.44rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);color:#fff;font-size:.24rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;line-height:1}
.dw-media-lightbox-close:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}
.dw-detail-meta{display:flex;gap:.6rem;padding-top:.4rem;border-top:1px solid rgba(255,255,255,.08);justify-content:space-between}
.dw-detail-meta-item{flex:1}
.dw-detail-meta-item:nth-child(1){text-align:left}
.dw-detail-meta-item:nth-child(2){text-align:center}
.dw-detail-meta-item:nth-child(3){text-align:right}
.dw-detail-meta-label{font-size:.11rem;color:rgba(255,255,255,.35);letter-spacing:.03rem;text-transform:uppercase;margin-bottom:.06rem}
.dw-detail-meta-value{font-size:.16rem;color:rgba(255,255,255,.35);font-weight:400;font-family:'Segoe Script','Brush Script MT','Apple Chancery',cursive}

/* === List Page === */
.dw-list-page{height:100vh;background:#000;padding:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.dw-list-inner{width:100%;max-width:14rem;margin:0 auto;padding:0 .5rem;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.dw-list-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:.16rem;align-content:center;align-items:stretch;width:100%;max-width:12rem}
.dw-list-header{position:absolute;top:1.1rem;left:.5rem;z-index:2;text-align:left}
.dw-list-header-title{font-size:.28rem;font-weight:700;color:#fff;letter-spacing:.02rem}
.dw-list-header-sub{font-size:.11rem;color:rgba(255,255,255,.35);margin-top:.06rem;letter-spacing:.06rem;text-transform:uppercase}
.dw-list-card{display:flex;align-items:stretch;border-radius:.1rem;overflow:hidden;cursor:pointer;transition:transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .45s;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.dw-list-card:hover{transform:translateY(-.02rem);box-shadow:0 .1rem .3rem rgba(0,0,0,.55)}
.dw-list-card-thumb{width:35%;min-height:1.6rem;flex-shrink:0;background-size:cover!important;background-position:center!important;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.dw-list-card:hover .dw-list-card-thumb{transform:scale(1.05)}
.dw-list-card-body{flex:1;padding:.2rem;display:flex;flex-direction:column;justify-content:center}
.dw-list-card-cat{font-size:.11rem;color:rgba(255,255,255,.45);letter-spacing:.04rem;text-transform:uppercase;margin-bottom:.08rem}
.dw-list-card-title{font-size:.18rem;font-weight:700;color:#fff;letter-spacing:.01rem;line-height:1.3}
.dw-list-card-meta{font-size:.11rem;color:rgba(255,255,255,.3);margin-top:.08rem;letter-spacing:.01rem}
.dw-list-card-desc{font-size:.12rem;color:rgba(255,255,255,.5);margin-top:.1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dw-list-pagination{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:.12rem;align-items:center}
.dw-list-page-btn{width:.4rem;height:.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.5);font-size:.14rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.dw-list-page-btn:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
.dw-list-page-btn.active{background:#fff;color:#000;border-color:#fff;font-weight:600}
.dw-list-page-btn.prev,.dw-list-page-btn.next{width:auto;padding:0 .16rem;border-radius:.2rem}

/* === Guard overlay === */
.dw-guard-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center}
.dw-guard-back{position:absolute;top:.3rem;left:.5rem;z-index:1000;display:flex;align-items:center;gap:.08rem;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.14rem;padding:.08rem .2rem;border-radius:.2rem;cursor:pointer;transition:all .35s}
.dw-guard-back:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3)}
.dw-guard-back svg{width:.16rem;height:.16rem;fill:none;stroke:currentColor;stroke-width:2}
.dw-guard-input-wrap{position:absolute;bottom:38%;left:50%;transform:translateX(-50%);width:1.92rem}
.dw-guard-step-indicator{position:absolute;bottom:50%;left:50%;transform:translateX(-50%);display:flex;gap:.12rem;z-index:1001}
.dw-guard-step-dot{width:.32rem;height:.32rem;border-radius:50%;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:.12rem;font-weight:600;color:rgba(255,255,255,.3);transition:all .3s}
.dw-guard-step-dot.active{border-color:#fff;color:#fff;box-shadow:0 0 .12rem rgba(255,255,255,.3)}
.dw-guard-step-dot.done{border-color:rgba(34,197,94,.6);color:#22c55e;background:rgba(34,197,94,.15)}
.dw-guard-step-dot.skip{border-style:dashed;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.15)}
.dw-guard-input{width:100%;padding:.14rem .2rem;border-radius:.13rem;border:none;background:#fff;color:#1a1a1a;font-size:.15rem;text-align:center;outline:none;font-family:inherit;box-sizing:border-box;box-shadow:inset 0 0 0 .05rem #000;animation:dwGuardBreathe 2s ease-in-out infinite}
.dw-guard-input::placeholder{color:rgba(0,0,0,.3)}
.dw-guard-input:focus{box-shadow:inset 0 0 0 .05rem #0f2e1b,0 0 .2rem rgba(26,77,46,.3)}
.dw-guard-input.dw-guard-error-border{box-shadow:inset 0 0 0 .05rem #ef4444,0 0 .2rem rgba(239,68,68,.3)}
.dw-guard-shake{animation:dwGuardShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes dwGuardShake{10%,90%{transform:translateX(-50%) translate3d(-2px,0,0)}20%,80%{transform:translateX(-50%) translate3d(4px,0,0)}30%,50%,70%{transform:translateX(-50%) translate3d(-6px,0,0)}40%,60%{transform:translateX(-50%) translate3d(6px,0,0)}}
@keyframes dwGuardBreathe{0%,100%{box-shadow:inset 0 0 0 .05rem #000}50%{box-shadow:inset 0 0 0 .05rem #1a4d2e}}
.dw-detail-content{font-size:.15rem;color:rgba(255,255,255,.8);line-height:1.8;margin-bottom:.3rem;text-align:left}
.dw-detail-tags{display:flex;flex-wrap:wrap;gap:.08rem;margin-bottom:.24rem}
.dw-detail-tag{padding:.06rem .16rem;border-radius:.16rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:.12rem;letter-spacing:.02rem;transition:all .25s}
.dw-detail-tag:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.dw-detail-like-wrap{display:flex;justify-content:center;margin-bottom:.32rem}
.dw-detail-like-btn{display:flex;align-items:center;gap:.08rem;padding:.1rem .28rem;border-radius:.24rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:.14rem;cursor:pointer;transition:all .3s}
.dw-detail-like-btn:hover{border-color:rgba(237,73,86,.5);color:#ed4956;transform:scale(1.05)}
.dw-detail-like-btn svg{width:.2rem;height:.2rem}
.dw-detail-like-btn.liked{background:rgba(237,73,86,.15);border-color:#ed4956;color:#ed4956}
.dw-detail-like-btn.liked svg{fill:#ed4956;stroke:#ed4956}
.dw-detail-like-count{margin-left:.02rem}