.card{width:100px;height:150px;border-radius:12px;background-color:var(--card-bg);border:3px solid rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;position:relative;box-shadow:var(--shadow-md);transition:transform .2s ease,box-shadow .2s ease}.card--clickable{cursor:pointer}.card--clickable:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.card--red{background-color:var(--color-red);color:#fff}.card--yellow{background-color:var(--color-yellow);color:#000}.card--green{background-color:var(--color-green);color:#fff}.card--blue{background-color:var(--color-blue);color:#fff}.card--wild{background:linear-gradient(135deg,var(--color-red) 0%,var(--color-yellow) 25%,var(--color-green) 50%,var(--color-blue) 75%,var(--color-red) 100%);color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.card__value{padding:.5rem;text-align:center}.card--disabled{opacity:.5;cursor:not-allowed}.card--disabled:hover{transform:none;box-shadow:var(--shadow-md)}@media (max-width: 1023px){.card{width:90px;height:135px;font-size:1.35rem}}@media (max-width: 767px){.card{width:80px;height:120px;font-size:1.2rem;border-width:2px}.card--clickable{min-height:44px;min-width:44px}.card--clickable:hover{transform:translateY(-4px)}.card__value{padding:.375rem}}@media (max-width: 479px){.card{width:70px;height:105px;font-size:1rem;border-radius:8px}}.animated-card{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);transition:transform var(--duration, .5s) cubic-bezier(.4,0,.2,1),box-shadow var(--duration, .5s) ease}.animated-card--flying{transform:translate(calc(-50% + var(--end-x, 0px)),calc(-50% + var(--end-y, 0px))) scale(1.05);box-shadow:0 12px 24px #00000080}.setup{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.setup__container{background:#fff;border-radius:16px;padding:48px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:90%}.setup__title{font-size:36px;font-weight:700;text-align:center;margin:0 0 40px;color:#333}.setup__section{margin-bottom:32px}.setup__label{display:block;font-size:16px;font-weight:600;margin-bottom:12px;color:#555}.setup__player-count,.setup__human-position{display:flex;gap:8px;flex-wrap:wrap}.setup__button{padding:12px 20px;font-size:14px;font-weight:600;border:2px solid #ddd;background:#fff;border-radius:8px;cursor:pointer;transition:all .2s;color:#666}.setup__button:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.setup__button--selected{background:#667eea;border-color:#667eea;color:#fff}.setup__button--selected:hover{background:#5568d3;border-color:#5568d3}.setup__start-button{width:100%;padding:16px;font-size:18px;font-weight:700;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:16px}.setup__start-button:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.setup__start-button:active{transform:translateY(0)}@media (max-width: 1023px){.setup__container{padding:36px;max-width:450px}.setup__title{font-size:32px}}@media (max-width: 767px){.setup__container{padding:24px;width:95%}.setup__title{font-size:28px;margin-bottom:24px}.setup__section{margin-bottom:24px}.setup__label{font-size:14px}.setup__button{padding:10px 16px;font-size:13px;min-height:44px}.setup__start-button{padding:14px;font-size:16px;min-height:50px}}@media (max-width: 479px){.setup__container{padding:20px}.setup__title{font-size:24px}.setup__player-count,.setup__human-position{gap:6px}.setup__button{padding:8px 12px;font-size:12px}}.color-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.color-picker-modal{background:var(--surface-dark);border-radius:1rem;padding:2rem;box-shadow:0 1rem 3rem #00000080;text-align:center;min-width:400px}.color-picker-modal h2{margin:0 0 1.5rem;color:var(--text-light);font-size:1.8rem}.color-picker-buttons{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.color-button{padding:2rem;border:none;border-radius:.5rem;font-size:1.2rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.color-button:hover{transform:scale(1.05);box-shadow:0 .5rem 1rem #0000004d}.color-button:active{transform:scale(.98)}.color-button--red{background:linear-gradient(135deg,#e74c3c,#c0392b)}.color-button--yellow{background:linear-gradient(135deg,#f1c40f,#f39c12)}.color-button--green{background:linear-gradient(135deg,#2ecc71,#27ae60)}.color-button--blue{background:linear-gradient(135deg,#3498db,#2980b9)}@media (max-width: 1023px){.color-picker-modal{min-width:350px;padding:1.75rem}.color-picker-modal h2{font-size:1.6rem}.color-button{padding:1.75rem;font-size:1.1rem}}@media (max-width: 767px){.color-picker-modal{min-width:0;width:90%;max-width:320px;padding:1.5rem}.color-picker-modal h2{font-size:1.4rem;margin-bottom:1.25rem}.color-picker-buttons{gap:.75rem}.color-button{padding:1.5rem;font-size:1rem;min-height:60px}}@media (max-width: 479px){.color-picker-modal{width:95%;padding:1.25rem}.color-picker-modal h2{font-size:1.2rem}.color-button{padding:1.25rem;font-size:.9rem}}:root{--color-red: #e74c3c;--color-yellow: #f39c12;--color-green: #27ae60;--color-blue: #3498db;--color-wild: #2c3e50;--bg-color: #0f3d1f;--text-color: #ffffff;--card-bg: #ffffff;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--table-green: #0f3d1f;--text-light: #ffffff;--red: #e74c3c;--yellow: #f39c12;--green: #27ae60;--blue: #3498db;--surface-dark: #1a4d2e;--surface-light: rgba(255, 255, 255, .1);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .4)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);min-height:100vh;display:flex;justify-content:center;align-items:center}#root{width:100%}.app{padding:2rem;text-align:center}h1{margin-bottom:2rem;font-size:2.5rem}.card-showcase{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;padding:2rem}.game-board{display:flex;flex-direction:column;height:100vh;width:100vw;padding:1rem;box-sizing:border-box;background:var(--table-green)}.game-board__header{display:flex;justify-content:center;gap:2rem;padding:.5rem}.game-board__direction{font-size:1rem;font-weight:700;color:var(--text-light);padding:.5rem 1rem;background:#0003;border-radius:8px}.game-board__active-color{font-size:1rem;font-weight:700;color:var(--text-light);padding:.5rem 1rem;background:#0003;border-radius:8px;display:flex;align-items:center;gap:.5rem}.color-indicator{display:inline-block;width:24px;height:24px;border-radius:50%;border:2px solid white;text-indent:-9999px}.color-indicator--red{background:var(--red)}.color-indicator--yellow{background:var(--yellow)}.color-indicator--green{background:var(--green)}.color-indicator--blue{background:var(--blue)}.game-board__opponents{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;padding:1rem;min-height:100px}.game-board__center{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem}.game-board__human-hand{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#0000001a;border-radius:12px 12px 0 0}.game-board__human-info{display:flex;justify-content:center}.player-area{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--surface-light);border-radius:8px;min-width:150px;transition:all .3s ease;border:2px solid transparent}.player-area--active{background:#fff3;border-color:var(--yellow);box-shadow:0 0 20px #f39c1299}.player-area__info{display:flex;flex-direction:column;align-items:center;gap:.25rem}.player-area__name{font-weight:700;font-size:1rem;color:var(--text-light)}.player-area__card-count{font-size:.875rem;color:#fffc}.player-area__uno-badge{background:var(--red);color:#fff;padding:.25rem .75rem;border-radius:12px;font-weight:700;font-size:.875rem;margin-top:.25rem;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.player-area__current-indicator{font-size:1.5rem;color:var(--yellow)}.deck{display:flex;justify-content:center;align-items:center}.deck__piles{display:flex;gap:4rem;align-items:center}.deck__draw-pile{position:relative;cursor:default;transition:transform .2s ease}.deck__draw-pile--clickable{cursor:pointer}.deck__draw-pile--clickable:hover{transform:translateY(-8px)}.deck__draw-pile-stack{position:relative}.deck__pending-draw{position:absolute;top:-1rem;right:-1rem;background:var(--red);color:#fff;font-weight:700;font-size:1.25rem;padding:.5rem .75rem;border-radius:50%;min-width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;animation:bounce .5s ease infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.deck__discard-pile{min-width:120px;min-height:170px;display:flex;align-items:center;justify-content:center}.deck__discard-empty{color:#ffffff80;font-style:italic}.card--back{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border:3px solid #444}.card--back:before{content:"UNO";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);font-size:2rem;font-weight:700;color:#fff3}.hand{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:1rem;min-height:180px}.hand__card{transition:transform .2s ease}.hand__card:hover{transform:translateY(-12px)}@media (max-width: 1023px){.game-board{padding:.5rem}.game-board__header{gap:1rem;padding:.25rem;flex-wrap:wrap}.game-board__direction,.game-board__active-color{font-size:.875rem;padding:.375rem .75rem}.color-indicator{width:20px;height:20px}.game-board__opponents{gap:1rem;padding:.5rem;min-height:80px}.game-board__center{padding:1rem}.deck__piles{gap:2rem}.player-area{min-width:120px;padding:.75rem}.player-area__name{font-size:.875rem}.player-area__card-count{font-size:.75rem}}@media (max-width: 767px){.game-board{padding:.25rem}.game-board__header{gap:.5rem;padding:.25rem;font-size:.75rem}.game-board__direction,.game-board__active-color{font-size:.75rem;padding:.25rem .5rem}.color-indicator{width:16px;height:16px}.game-board__opponents{flex-direction:column;align-items:center;gap:.5rem;padding:.5rem;min-height:auto}.game-board__center{padding:.5rem;flex:0 0 auto}.deck__piles{gap:1.5rem}.deck__pending-draw{top:-.75rem;right:-.75rem;font-size:1rem;padding:.375rem .5rem;min-width:2rem;height:2rem}.player-area{min-width:100%;max-width:300px;padding:.5rem;flex-direction:row;justify-content:space-between}.player-area__info{flex-direction:row;gap:.5rem}.player-area__name{font-size:.875rem}.player-area__card-count{font-size:.75rem}.player-area__current-indicator{font-size:1.25rem}.game-board__human-hand{padding:.5rem;gap:.5rem}.hand{padding:.5rem;min-height:140px;gap:-.5rem;overflow-x:auto;justify-content:flex-start}.hand__card{flex-shrink:0}.hand__card:hover{transform:translateY(-8px)}}@media (max-width: 479px){.game-board__header{font-size:.625rem}.game-board__direction,.game-board__active-color{font-size:.625rem;padding:.25rem .375rem}.deck__piles{gap:1rem}.hand{gap:-1rem}}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.game-over-modal{background:var(--surface-dark);border-radius:1rem;padding:3rem;box-shadow:0 1rem 3rem #00000080;text-align:center;min-width:400px;max-width:500px}.game-over__title{margin:0 0 2rem;color:var(--text-light);font-size:2.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-over__content{margin-bottom:2rem}.game-over__winner,.game-over__stats{margin-bottom:1rem;font-size:1.3rem;color:var(--text-light)}.game-over__label{font-weight:400;opacity:.8;margin-right:.5rem}.game-over__value{font-weight:700;font-size:1.5rem}.game-over__actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.game-over__button{padding:1rem 2rem;border:none;border-radius:.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;min-width:140px}.game-over__button:hover{transform:scale(1.05);box-shadow:0 .5rem 1rem #0000004d}.game-over__button:active{transform:scale(.98)}.game-over__button--primary{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.game-over__button--secondary{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media (max-width: 1023px){.game-over-modal{padding:2.5rem;min-width:350px;max-width:450px}.game-over__title{font-size:2.2rem}.game-over__winner,.game-over__stats{font-size:1.2rem}.game-over__value{font-size:1.4rem}}@media (max-width: 767px){.game-over-modal{padding:2rem;min-width:0;width:90%;max-width:340px}.game-over__title{font-size:2rem;margin-bottom:1.5rem}.game-over__content{margin-bottom:1.5rem}.game-over__winner,.game-over__stats{font-size:1.1rem;margin-bottom:.75rem}.game-over__value{font-size:1.3rem}.game-over__actions{flex-direction:column;gap:.75rem}.game-over__button{padding:.875rem 1.5rem;font-size:1rem;width:100%;min-height:50px}}@media (max-width: 479px){.game-over-modal{padding:1.5rem;width:95%}.game-over__title{font-size:1.75rem}.game-over__winner,.game-over__stats{font-size:1rem}.game-over__value{font-size:1.2rem}}