@import url('./assets/depth-tokens.css');
/* The native DOM remains the only source of rank, suit, turn and legal cues. */
body.c8-depth-art .game-wrap{padding-bottom:calc(1rem + env(safe-area-inset-bottom));min-width:0}
body.c8-depth-art .c8-bar{flex-wrap:wrap;gap:var(--c8-art-gap)}
body.c8-depth-art .c8-diff{flex-wrap:wrap;max-width:100%}
body.c8-depth-art .c8-diff button{min-width:44px;min-height:var(--c8-art-touch);font-family:inherit}
body.c8-depth-art .c8-bar>.btn{min-height:var(--c8-art-touch)}
body.c8-depth-art .c8-score{flex-wrap:wrap;gap:.35rem .6rem;line-height:1.5;color:var(--c8-art-text)}
body.c8-depth-art .c8-howto,body.c8-depth-art .c8-stats{color:var(--c8-art-text);line-height:1.5;overflow-wrap:anywhere}
body.c8-depth-art #c8-table{background-image:url('./assets/depth-felt-inlay.svg'),radial-gradient(circle at 50% 40%,#1e7a4a,var(--c8-art-felt));background-size:100% 100%,auto;padding:.8rem .5rem 1rem;color:var(--c8-art-felt-ink)}
body.c8-depth-art .c8-ai-label{opacity:1;font-size:.85rem;line-height:1.5}
body.c8-depth-art .c8-ai{min-height:76px}
body.c8-depth-art .c8-fan{height:44px}
body.c8-depth-art .c8-fan .back{width:28px;height:44px;flex:0 0 28px;background:var(--c8-art-back) url('./assets/depth-back.svg') center/100% 100%}
body.c8-depth-art .c8-center{gap:var(--c8-art-gap);flex-wrap:wrap;margin:.6rem 0 1.4rem}
body.c8-depth-art .c8-deck{flex:0 0 64px;background:var(--c8-art-back) url('./assets/depth-back.svg') center/100% 100%;transition:none}
body.c8-depth-art .c8-deck span{bottom:-23px;font-size:.8rem;color:var(--c8-art-felt-ink);white-space:nowrap}
body.c8-depth-art .c8-deck.hint{animation:none;outline:3px solid var(--c8-art-gold);outline-offset:3px}
body.c8-depth-art .c8-deck:active:not(:disabled){transform:none}
body.c8-depth-art .c8-pile{flex:0 0 70px}
body.c8-depth-art :is(#pile,#hand) .card{background:var(--c8-art-stock) url('./assets/depth-cardstock.svg') center/100% 100%;color:var(--c8-art-ink);border-color:var(--c8-art-edge);font-family:inherit;transition:none}
body.c8-depth-art :is(#pile,#hand) .card.red{color:var(--c8-art-red)}
body.c8-depth-art :is(#pile,#hand) .card.eight{background-color:var(--c8-art-wild);border-color:var(--c8-art-gold)}
body.c8-depth-art :is(#pile,#hand) .card.eight::after{font-size:.65rem;bottom:4px;color:var(--c8-art-ink);letter-spacing:.04em}
body.c8-depth-art .c8-suit{font-size:.8rem;color:var(--c8-art-felt-ink)}
body.c8-depth-art .c8-suit b{background:var(--c8-art-stock);color:var(--c8-art-ink)}
body.c8-depth-art .c8-suit b.red{color:var(--c8-art-red)}
body.c8-depth-art .c8-suit.wild b{box-shadow:0 0 0 3px var(--c8-art-gold),0 2px 6px #0004}
body.c8-depth-art #card-grid{margin:.7rem 0 0;min-width:0}
body.c8-depth-art #hand{gap:var(--c8-art-gap);margin:.5rem 0 .25rem;padding:8px;min-height:var(--c8-art-card-h)}
body.c8-depth-art #hand .card,body.c8-depth-art #hand.many .card{width:var(--c8-art-card-w);height:var(--c8-art-card-h);flex:0 0 var(--c8-art-card-w);transform:none;border-width:2px;border-radius:var(--c8-art-radius)}
body.c8-depth-art #hand .card .ck,body.c8-depth-art #hand.many .card .ck{font-size:1rem;left:5px;top:5px}
body.c8-depth-art #hand .card .cs,body.c8-depth-art #hand.many .card .cs{font-size:1.9rem}
body.c8-depth-art #hand .card.playable{border-color:var(--c8-art-blue);box-shadow:0 0 0 2px var(--c8-art-blue),0 2px 4px #182c4722}
body.c8-depth-art #hand .card.dim{opacity:1;border-style:dashed;background-color:var(--c8-art-muted);box-shadow:none}
body.c8-depth-art #hand .card.new{box-shadow:0 0 0 3px var(--c8-art-gold),0 2px 4px #182c4722}
body.c8-depth-art #color-btns{gap:var(--c8-art-gap);padding:8px;margin:.75rem 0;min-width:0}
body.c8-depth-art #color-btns .c8-pick{font-size:.85rem;color:var(--c8-art-text)}
body.c8-depth-art #color-btns .btn{min-height:var(--c8-art-touch);white-space:normal}
body.c8-depth-art .suit-btn{min-height:64px;min-width:68px;background:var(--c8-art-stock);border-color:var(--c8-art-blue);color:var(--c8-art-ink);font-family:inherit;line-height:1.1}
body.c8-depth-art .suit-btn.red{color:var(--c8-art-red)}
body.c8-depth-art .suit-btn small{font-size:.8rem;color:var(--c8-art-text);line-height:1.4}
body.c8-depth-art .suit-btn.best{box-shadow:0 0 0 3px var(--c8-art-gold)}
body.c8-depth-art #status{line-height:1.5;overflow-wrap:anywhere}
body.c8-depth-art :is(#hand .card,.suit-btn,.c8-diff button,.c8-bar>.btn,#color-btns .btn):focus-visible{outline:3px dashed var(--c8-art-focus);outline-offset:5px}
body.c8-depth-art .c8-deck:focus-visible{outline:3px dashed var(--c8-art-felt-ink);outline-offset:5px}
body.c8-depth-art #overlay{overflow:auto;padding-top:calc(1rem + env(safe-area-inset-top));padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
body.c8-depth-art #overlay .panel{margin:auto;max-height:none}
body.c8-depth-art #overlay .btn{min-height:var(--c8-art-touch);white-space:normal}
@media(min-width:451px){body.c8-depth-art{--c8-art-card-w:64px;--c8-art-card-h:96px}}
@media(max-width:450px){body.c8-depth-art .suit-btn{flex:0 0 calc(50% - 6px)}}
@media(prefers-reduced-motion:reduce){
  body.c8-depth-art :is(.card,.c8-deck,.c8-meter i,.c8-say){transition:none!important;animation:none!important}
  body.c8-depth-art :is(.pop,.shake,.pulse,.c8-toast,.c8-confetti){animation:none!important}
}