@import url('https://fonts.googleapis.com/css2?family=Bebas+Neve&family=DM+Sans:wght@400;500;700&display=swap');
/* shared card styles */
.card { width:70px; height:98px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; position:relative; overflow:hidden; transition:transform 0.3s, box-shadow 0.3s; cursor:pointer; }
.card:hover { transform:translateY(-8px); box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.card.red { background:linear-gradient(145deg,#ffffff,#f5f0f0); border:2px solid #ccc; color:#c62828; }
.card.black { background:linear-gradient(145deg,#2a2a2a,#1a1a1a); border:2px solid #444; color:#f0f0f0; }
.card .card-value { font-size:1.3rem; font-weight:bold; line-height:1; }
.card .card-suit { font-size:1.1rem; line-height:1; margin-top:2px; }
.card .card-center { font-size:1.4rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.card .card-corner { position:absolute; top:4px; left:6px; font-size:0.7rem; line-height:0.8; }
.card .card-corner.br { bottom:4px; top:auto; left:auto; right:6px; transform:rotate(180deg); }
.card .card-pattern { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2rem; opacity:0.15; }
.card.selected { border-color:#ffd600; box-shadow:0 0 20px rgba(255,214,0,0.6); transform:translateY(-15px); z-index:10; }
.card.played { opacity:0.5; transform:scale(0.9); }
.card.back { background:linear-gradient(135deg,#1a237e,#0d47a1); border:2px solid #ffd600; cursor:pointer; }
.card.back .card-value,.card.back .card-suit,.card.back .card-center,.card.back .card-pattern { display:none; }
.card.back::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border:2px solid rgba(255,214,0,0.3); border-radius:50%; }
/* card back pattern */
.card-back-pattern { position:absolute; top:0; left:0; width:100%; height:100%; background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,214,0,0.05) 3px,rgba(255,214,0,0.05) 6px); }
/* game layout */
.game-layout { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem; width:100%; }
.cpu-area { display:flex; flex-direction:column; align-items:center; }
.cpu-hand { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; min-height:110px; padding:1rem; }
.player-area { display:flex; flex-direction:column; align-items:center; }
.player-hand { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; min-height:110px; padding:1rem; }
.card-area { display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.card-area.played { opacity:0.6; }
.game-table { position:relative; width:100%; }
.table-surface { background:linear-gradient(135deg,#1a472a,#0d2a18); border:3px solid #ffd600; border-radius:16px; padding:2rem; box-shadow:0 0 30px rgba(255,214,0,0.15), inset 0 0 30px rgba(0,0,0,0.3); }
.table-felt { background:linear-gradient(135deg,#2d5a27,#1a3a1a); border-radius:10px; padding:1rem; }
/* CPU info */
.cpu-info { background:linear-gradient(135deg,rgba(139,0,0,0.3),rgba(196,30,58,0.2)); border:1px solid rgba(255,214,0,0.2); border-radius:10px; padding:0.5rem 1rem; margin-bottom:0.5rem; text-align:center; }
.cpu-info .cpu-name { color:#ffd600; font-size:1rem; font-family:'Bebas Neue',sans-serif; }
.cpu-info .cpu-score { color:#fff; font-size:0.8rem; font-family:'DM Sans',sans-serif; }
/* Player info */
.player-info { background:linear-gradient(135deg,rgba(0,168,107,0.3),rgba(0,100,70,0.2)); border:1px solid rgba(0,168,107,0.3); border-radius:10px; padding:0.5rem 1rem; margin-bottom:0.5rem; text-align:center; }
.player-info .player-name { color:#00a86b; font-size:1rem; font-family:'Bebas Neue',sans-serif; }
.player-info .player-score { color:#fff; font-size:0.8rem; font-family:'DM Sans',sans-serif; }
/* Buttons */
.card-btn { padding:0.6rem 1.5rem; border:2px solid; border-radius:10px; cursor:pointer; font-family:'Bebas Neue',sans-serif; font-size:1rem; transition:all 0.2s; background:transparent; }
.card-btn:hover { transform:scale(1.05); }
.card-btn.primary { background:linear-gradient(135deg,#ffd600,#ff6b00); color:#000; border-color:#ffd600; }
.card-btn.secondary { background:rgba(255,214,0,0.1); color:#ffd600; border-color:#ffd600; }
.card-btn.danger { background:rgba(255,45,85,0.2); color:#ff2d55; border-color:#ff2d55; }
.card-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
/* Message */
.game-msg { text-align:center; font-size:1.3rem; color:#ffd600; margin:0.5rem 0; min-height:2rem; font-family:'Bebas Neue',sans-serif; text-shadow:0 0 10px rgba(255,214,0,0.3); }
.game-msg.error { color:#ff2d55; }
.game-msg.success { color:#00a86b; }
/* Deck */
.deck { width:70px; height:98px; border-radius:8px; background:linear-gradient(135deg,#1a237e,#0d47a1); border:2px solid #ffd600; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.deck:hover { transform:translateY(-5px); box-shadow:0 5px 15px rgba(255,214,0,0.3); }
.deck .deck-icon { font-size:1.5rem; }
.deck .deck-count { position:absolute; top:-5px; right:-5px; background:#ffd600; color:#000; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-family:'Bebas Neue',sans-serif; }
/* Discard pile */
.discard-pile { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0.3rem; }
.discard-top { width:60px; height:84px; border-radius:6px; border:2px solid #ffd600; display:flex; align-items:center; justify-content:center; font-size:1rem; background:rgba(255,214,0,0.05); }
/* Animations */
@keyframes dealCard { from { opacity:0; transform:translateY(-30px) scale(0.8); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes flipCard { from { transform:rotateY(0); } to { transform:rotateY(180deg); } }
@keyframes pulseWin { 0%,100% { box-shadow:0 0 20px rgba(255,214,0,0.4); } 50% { box-shadow:0 0 40px rgba(255,214,0,0.8); } }
@keyframes slideIn { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.animate-deal { animation: dealCard 0.4s ease-out forwards; }
.animate-slide-left { animation: slideIn 0.3s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.3s ease-out forwards; }
/* Result display */
.result-display { display:flex; gap:2rem; justify-content:center; margin:1rem 0; }
.result-item { text-align:center; padding:0.8rem 1.5rem; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid #2a2a40; }
.result-item .result-label { color:#666; font-size:0.7rem; font-family:'DM Sans',sans-serif; }
.result-item .result-value { font-size:1.5rem; color:#ffd600; font-family:'Bebas Neue',sans-serif; }
.result-item.win .result-value { color:#00a86b; }
.result-item.lose .result-value { color:#ff2d55; }
/* Responsive */
@media (max-width:600px) { .card { width:55px; height:78px; } .card .card-value { font-size:1rem; } .card .card-suit { font-size:0.9rem; } .card .card-center { font-size:1.1rem; } .deck { width:55px; height:78px; } }