/* Uno : cartes dessinées en CSS, table et couleur en cours. Le reste du style vient de shared.css */
.ucard{--uw:64px;--cc:#F4E7CF;position:relative;width:var(--uw);height:calc(var(--uw) * 1.5);flex:none;display:flex;align-items:center;justify-content:center;padding:0;border-radius:calc(var(--uw) * .14);border:3px solid #F4E7CF;box-shadow:0 3px 0 #1A100A;background:var(--cc);font-family:'Source Sans 3',sans-serif;font-weight:800;overflow:hidden;user-select:none}
.ucard::before{content:'';position:absolute;inset:13% 9%;border-radius:50%;background:#F4E7CF;transform:rotate(-22deg)}
.ucard span{position:relative;font-size:calc(var(--uw) * .42);line-height:1}
.ucard span.w{font-size:calc(var(--uw) * .19);letter-spacing:.02em;text-transform:uppercase}
.ucard.wild{background:conic-gradient(#D8452F 0 25%,#F2C525 0 50%,#3FA34D 0 75%,#2F6FD8 0)}
button.ucard{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.ucard:disabled{cursor:default}
button.ucard.off:disabled,button.ucard.off{filter:grayscale(.7) brightness(.7);opacity:.6}
button.ucard.ok{box-shadow:0 3px 0 #1A100A,0 0 0 3px #F2C525}
button.ucard.ok:active{transform:translateY(2px)}
.ucard.back{background:repeating-linear-gradient(45deg,#2B1B12 0 8px,#5B3A29 8px 16px);border-color:#C9B393}
.ucard.back::before{inset:24% 16%;transform:none;background:#F2C525}
.ucard.back span{color:#2B1B12;font-size:calc(var(--uw) * .2);letter-spacing:.06em}
button.ucard.back:disabled{filter:grayscale(.5) brightness(.8);opacity:.7}
.utable{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;--uw:96px}
.udisc{padding:6px;border-radius:18px;box-shadow:0 4px 0 #1A100A;transition:background .2s}
.udisc .ucard{--uw:96px}
.uhand{overflow-x:auto;justify-content:flex-start;padding:6px 4px;gap:8px}
.uhand .ucard{--uw:62px}
@media(min-width:900px){.gm .uhand .ucard{--uw:93px}}
.uhand::-webkit-scrollbar{height:6px}
.uno-call{min-height:48px;min-width:110px;font-size:18px}
.uno-call:disabled{opacity:.5}
.ucolbtn{width:84px;height:84px;border-radius:50%;border:3px solid #F4E7CF;box-shadow:0 4px 0 #1A100A;cursor:pointer;margin:6px}
.udot{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid #F4E7CF;margin-right:8px;vertical-align:middle}
.gm.uno .side .rr span{display:block;font-size:15px;margin-top:2px}

/* Table façon « autour du jeu » : adversaires en arc, dos des cartes, pioche et défausse au centre */
.utable{position:relative;flex:1 1 0;min-height:260px;--uw:96px}
.ucenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
.ucenter > .ucard.back{position:absolute;right:calc(100% + 28px);top:50%;transform:translateY(-50%)}
.ucenter > .upen{position:absolute;left:calc(100% + 28px);top:50%;transform:translateY(-50%)}
.ucenter .ucard{--uw:96px}
.ucard.back{background:repeating-linear-gradient(45deg,#2B1B12 0 8px,#5B3A29 8px 16px);border-color:#C9B393;justify-content:center}
.ucard.back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.ucard.back span{display:none}
.ucard.back.nofig span{display:block;position:relative;color:#2B1B12;background:#F2C525;padding:2px 6px;border-radius:999px;font-size:calc(var(--uw) * .18)}
.ucard.back::before{display:none}
.ucard.back.nofig::before{display:block;inset:24% 16%;transform:none;background:#F2C525}
.useat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 8px 8px;border-radius:16px;border:2px solid transparent;min-width:96px;transition:border-color .2s,opacity .2s}
.utot{font-family:'Bitter',serif;font-weight:800;font-size:13px;color:#F4E7CF;background:rgba(43,27,18,.8);padding:1px 8px;border-radius:10px;white-space:nowrap}
.useat.on{border-color:#F2C525;background:rgba(242,197,37,.12);box-shadow:0 0 0 4px rgba(242,197,37,.18)}
.useat.gone{opacity:.4}
.uname{background:#2F6FD8;color:#fff;padding:2px 10px;border-radius:10px;font-family:'Source Sans 3',sans-serif;font-weight:800;font-size:14px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 0 #1A100A}
.uhead{position:relative;display:flex;align-items:center;gap:6px}
.uhead .ucount{background:#F2C525;color:#2B1B12;border-radius:12px;min-width:26px;height:26px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-family:'Bitter',serif;font-weight:800;font-size:15px;box-shadow:0 2px 0 #A87A3C}
.uhead .tmr{position:static}
.ufan{display:flex;justify-content:center;padding-left:6px}
.ufan .ucard{--uw:30px;margin-left:-16px;box-shadow:0 2px 0 #1A100A}
.ufan .ucard:first-child{margin-left:0}
.ufan .ucard.back{transform:none}
.useat .bdg{font-size:12px}
@media(max-width:899px){
  .useat{min-width:70px;padding:4px 5px 6px;gap:3px}
  .useat .uname{font-size:12px;max-width:100px}
  .ufan .ucard{--uw:22px;margin-left:-12px}
  .ucenter{gap:14px}
  .ucenter .ucard,.utable .ucenter .udisc .ucard{--uw:78px}
}

.ucard.back.nofig img{display:none}
.ufan .ucard span{display:none}

/* Beaucoup d'adversaires : seats plus petits pour éviter les chevauchements */
.utable.dense .useat{min-width:80px;gap:2px;padding:4px 6px}
.utable.dense .uname{font-size:12px;padding:1px 8px}
.utable.dense .uhead .ucount{min-width:22px;height:22px;font-size:13px}
.utable.dense .ufan .ucard{--uw:24px;margin-left:-14px}

/* ---------- Animations et effets (modifiables : durées et images-clés dans uno.js, styles ici) ---------- */
.gm.uno .bd{position:relative}
.ucenter{z-index:1}
.udir{position:absolute;left:50%;top:50%;width:min(50%,330px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.4;pointer-events:none;z-index:0}
.useat.on{animation:uhalo 1.6s ease-in-out infinite}
@keyframes uhalo{0%,100%{box-shadow:0 0 0 4px rgba(242,197,37,.18)}50%{box-shadow:0 0 0 10px rgba(242,197,37,.04)}}
.uclk{font-family:'Bitter',serif;font-weight:800;color:#F2C525;font-size:14px;white-space:nowrap}
.upop{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;font-family:'Bitter',serif;font-weight:800;font-size:clamp(40px,8vw,72px);line-height:1;color:#F4E7CF;text-shadow:0 5px 0 #1A100A;white-space:nowrap}
.upop svg{color:#D8452F;filter:drop-shadow(0 5px 0 #1A100A)}
.umini{display:inline-block;width:.9em;height:.9em;border-radius:50%;border:.07em solid #F4E7CF;box-shadow:0 .07em 0 #1A100A}
.ughost{position:fixed;z-index:300;pointer-events:none}
.ureaction{position:absolute;z-index:6;font-size:40px;line-height:1;pointer-events:none;filter:drop-shadow(0 3px 0 #1A100A)}
.ureact-bar{display:inline-flex;gap:4px;margin-left:6px;flex-wrap:wrap;max-width:230px}
.ureact-bar .btn{min-width:0;padding:4px 6px}
.uconf{position:fixed;top:0;width:9px;height:14px;z-index:200;pointer-events:none;border-radius:2px}
@media (prefers-reduced-motion: reduce){.udir,.useat.on{animation:none}}
/* UNO ! et Contre Uno ! au centre de la table, sous la défausse ; le contre a une barre qui se vide en 1 s */
.ucalls{position:absolute;left:50%;top:calc(50% + 96px);transform:translateX(-50%);display:flex;gap:12px;align-items:center;z-index:2;white-space:nowrap}
.ucontre{position:relative;overflow:hidden}
.ucbar{position:absolute;left:0;bottom:0;height:5px;width:100%;background:#F2C525;transform-origin:left center;animation-name:ushrink;animation-timing-function:linear;animation-fill-mode:forwards}
@keyframes ushrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* Cartes avec image (cartes/CarteUno*.svg) : l'image remplace le dessin CSS ; sans fichier, le dessin CSS revient */
.ucard.fig{background:none;border:0;padding:0}
.ucard.fig::before{display:none}
.ucard.fig span{display:none}
img.uface{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;border-radius:inherit}
.ucard:not(.fig) img.uface{display:none}

/* Logos de jeu, pile de pénalité, choix de la couleur sur le rond */
.udisc{position:relative}
.ulogofly{position:fixed;z-index:300;pointer-events:none}
.upen{display:none;min-width:54px;height:54px;padding:0 8px;border-radius:14px;align-items:center;justify-content:center;background:#D8452F;color:#FBF6EA;border:3px solid #F4E7CF;box-shadow:0 3px 0 #1A100A;font-family:'Bitter',serif;font-weight:800;font-size:20px}
.upen.on{display:inline-flex}
.ucolpick{display:flex;justify-content:center;padding:14px}
.ucolwheel{position:relative;width:240px;height:240px;border-radius:50%;border:4px solid #F4E7CF;box-shadow:0 6px 0 #1A100A;overflow:hidden}
.uq{position:absolute;width:50%;height:50%;border:0;padding:0;background:transparent;cursor:pointer}
.uq:hover,.uq:focus-visible{background:rgba(255,255,255,.22)}
.uq-r{left:0;top:0}
.uq-g{left:50%;top:0}
.uq-b{left:50%;top:50%}
.uq-y{left:0;top:50%}
.uqfly{position:fixed;z-index:310;pointer-events:none}
.uqfly.qf-r{border-radius:100% 0 0 0}
.uqfly.qf-g{border-radius:0 100% 0 0}
.uqfly.qf-b{border-radius:0 0 100% 0}
.uqfly.qf-y{border-radius:0 0 0 100%}

/* Choix de la couleur sur la carte en jeu : rond x1,5 */
.ucolwheel.pile{width:calc(var(--uw) * 1.5);height:calc(var(--uw) * 1.5);border-width:3px}
@media(max-width:899px){.utable .ucolwheel.pile{width:117px;height:117px}}