*{box-sizing:border-box}
:root{--gold:#d8b449;--ink:#090a0d;--panel:#111319;--muted:#9fa4af}
body{background:radial-gradient(circle at 50% 0,rgba(190,145,35,.12),transparent 35%),#07080b;color:#fff;font-family:Inter,sans-serif}
.uno-main{min-height:calc(100vh - 70px);padding:28px 0 60px}
.uno-shell{max-width:1180px}
.uno-head{display:grid;grid-template-columns:170px 1fr auto;gap:20px;align-items:center;margin-bottom:18px}
.uno-head small{color:var(--gold);font-weight:800;letter-spacing:.14em}.uno-head h1{font-family:"Sora";margin:3px 0;font-size:34px}.uno-head p{color:var(--muted);margin:0}
.back-link{color:#d7bd70;text-decoration:none}.connection-badge{border:1px solid #3a3d47;border-radius:99px;padding:8px 12px;color:#a9adb7;font-size:12px}
.connection-badge.online{color:#7de6a4;border-color:#2d7750;background:rgba(39,142,87,.12)}
.uno-panel{display:none;border:1px solid rgba(216,180,73,.22);border-radius:22px;background:linear-gradient(145deg,rgba(19,21,27,.98),rgba(8,9,12,.98));box-shadow:0 25px 70px rgba(0,0,0,.35);padding:28px}.uno-panel.active{display:block}
.lobby-brand{text-align:center}.lobby-brand h2{font:800 30px "Sora";margin:16px 0 6px}.lobby-brand p{color:var(--muted)}
.uno-logo-mark{display:flex;justify-content:center;gap:5px}.uno-logo-mark span{width:60px;height:82px;border:5px solid #fff;border-radius:10px;display:grid;place-items:center;font:900 36px Inter;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.uno-logo-mark span:nth-child(1){background:#db2c32;transform:rotate(-8deg)}.uno-logo-mark span:nth-child(2){background:#e0a619}.uno-logo-mark span:nth-child(3){background:#2879d9;transform:rotate(8deg)}
.lobby-forms{display:grid;grid-template-columns:1fr 70px 1fr;gap:20px;align-items:center;margin-top:28px}.or-divider{text-align:center;color:#777;font-weight:800}
.lobby-box{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;background:rgba(255,255,255,.025)}.lobby-box h3{margin:0 0 18px;font-size:22px}.lobby-box label{display:block;color:#c7c9cf;font-size:13px;font-weight:700;margin:11px 0 7px}
.lobby-box input{width:100%;padding:13px 14px;background:#08090d;border:1px solid #30333c;border-radius:10px;color:#fff;font:700 16px Inter;outline:none}.lobby-box input:focus{border-color:var(--gold)}.room-input{text-transform:uppercase;letter-spacing:.18em}
.uno-btn{border:0;border-radius:10px;padding:12px 18px;font-weight:800;cursor:pointer}.uno-btn.primary{background:linear-gradient(135deg,#e1bd55,#a67b20);color:#0b0b0c}.uno-btn.secondary{background:#20232b;color:#fff;border:1px solid #3a3d46}.lobby-box .uno-btn{width:100%;margin-top:16px}
.status-message{text-align:center;color:#e1bd55;min-height:22px}
.waiting-screen{text-align:center}.room-code-wrap{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(216,180,73,.35);background:rgba(216,180,73,.08);padding:12px 16px;border-radius:13px}.room-code-wrap small{color:#b9a467}.room-code-wrap strong{font-size:28px;letter-spacing:.16em}.room-code-wrap button,.mini-btn{background:#242730;color:#fff;border:1px solid #444852;border-radius:8px;padding:8px 11px;cursor:pointer}
.waiting-players{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}.waiting-player{padding:18px 10px;border:1px solid #30333b;border-radius:13px;background:#0b0d11}.waiting-player .avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto 9px;background:linear-gradient(135deg,#d9b44b,#725014);font-weight:900;color:#111}.waiting-player small{display:block;color:#8f949f;margin-top:4px}.waiting-actions{display:flex;justify-content:center;gap:10px}
.game-top{display:flex;justify-content:space-between;align-items:center}.game-top small,.my-head small{display:block;color:#9b9faa;font-size:10px}.turn-label{border-radius:99px;padding:9px 15px;background:#1e222a;color:#d2d5dc}.turn-label.mine{background:rgba(212,175,55,.16);color:#f1d47a;border:1px solid rgba(212,175,55,.4)}
.opponents{display:flex;justify-content:center;gap:14px;min-height:96px;margin:18px 0}.opponent{min-width:120px;text-align:center;background:#0b0d11;border:1px solid #292c34;border-radius:13px;padding:12px}.opponent.active{border-color:#d4af37;box-shadow:0 0 22px rgba(212,175,55,.13)}.opponent .card-count{font-size:25px;font-weight:900;margin:5px}.opponent small{color:#9095a1}
.table-area{min-height:270px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:30px;position:relative;background:radial-gradient(ellipse at center,rgba(27,116,65,.58),rgba(9,38,24,.78) 58%,rgba(5,15,10,.95));border:7px solid #332817;box-shadow:inset 0 0 0 2px #8b692d,inset 0 0 80px rgba(0,0,0,.65)}
.card-stack,.discard-card,.uno-playing-card{width:104px;height:150px;border-radius:13px;border:6px solid #f4f2eb;display:grid;place-items:center;position:relative;box-shadow:0 10px 25px rgba(0,0,0,.48);font:900 38px Inter}
.card-stack{background:linear-gradient(135deg,#17191f,#020304);color:#d4af37;cursor:pointer}.card-stack:before{content:"DOSMOS";position:absolute;font-size:10px;letter-spacing:.08em;transform:rotate(-35deg)}.card-stack span{border:2px solid #d4af37;border-radius:50%;width:58px;height:76px;display:grid;place-items:center}
.discard-card,.uno-playing-card{color:#fff;overflow:hidden}.discard-card:before,.uno-playing-card:before{content:"";position:absolute;width:145%;height:60%;background:rgba(255,255,255,.18);transform:rotate(-35deg);border-radius:50%}
.discard-card span,.uno-playing-card span{z-index:1}.card-red{background:#d92d34}.card-yellow{background:#e5ad19}.card-green{background:#299652}.card-blue{background:#2876d4}.card-wild{background:conic-gradient(#d92d34 0 25%,#e5ad19 0 50%,#299652 0 75%,#2876d4 0)}
.direction-indicator{position:absolute;left:25px;top:20px;font-size:35px;color:#d9c274}.color-indicator{position:absolute;right:25px;top:22px;width:20px;height:20px;border-radius:50%;border:2px solid #fff}
.game-message{text-align:center;min-height:25px;color:#ebcf75;font-weight:700;padding:13px}
.my-area{margin-top:4px}.my-head{display:flex;align-items:center;justify-content:space-between}.uno-call-btn{border:0;border-radius:999px;padding:9px 18px;background:#d82f35;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 0 20px rgba(216,47,53,.25)}
.my-hand{display:flex;justify-content:center;align-items:flex-end;gap:0;padding:20px 0 5px;min-height:180px;overflow-x:auto}.uno-playing-card{flex:0 0 88px;width:88px;height:128px;margin-left:-18px;cursor:pointer;transition:.16s transform,.16s filter;font-size:30px}.uno-playing-card:first-child{margin-left:0}.uno-playing-card:hover,.uno-playing-card.playable{transform:translateY(-15px);filter:brightness(1.12)}.uno-playing-card.disabled{filter:grayscale(.55) brightness(.65);cursor:not-allowed}
.color-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:grid;place-items:center;z-index:100}.color-dialog{background:#12141a;border:1px solid #454955;border-radius:18px;padding:24px;text-align:center}.color-options{display:grid;grid-template-columns:repeat(4,62px);gap:10px;margin:18px 0}.color-options button{height:62px;border-radius:12px;border:4px solid #fff;cursor:pointer}.color-options button[data-color=red]{background:#d92d34}.color-options button[data-color=yellow]{background:#e5ad19}.color-options button[data-color=green]{background:#299652}.color-options button[data-color=blue]{background:#2876d4}
@media(max-width:760px){.uno-head{grid-template-columns:1fr}.connection-badge{justify-self:start}.lobby-forms{grid-template-columns:1fr}.or-divider{padding:0}.waiting-players{grid-template-columns:repeat(2,1fr)}.uno-panel{padding:17px}.table-area{min-height:230px;gap:20px}.card-stack,.discard-card{width:84px;height:122px}.uno-playing-card{flex-basis:72px;width:72px;height:106px;margin-left:-14px}.opponents{overflow-x:auto;justify-content:flex-start}.uno-head h1{font-size:27px}}

.color-modal[hidden]{display:none!important}
.color-modal{isolation:isolate}.color-dialog{position:relative;z-index:1}


/* =========================
   DOSMOS UNO Sprint 1 Card UI
   ========================= */
:root{
  --uno-card-w:94px;
  --uno-card-h:136px;
  --uno-radius:14px;
  --uno-border:#f7f4ea;
  --uno-shadow:0 14px 28px rgba(0,0,0,.42);
}

.uno-playing-card,
.discard-card,
.card-stack{
  width:var(--uno-card-w);
  height:var(--uno-card-h);
  border-radius:var(--uno-radius);
  border:6px solid var(--uno-border);
  box-shadow:var(--uno-shadow);
  position:relative;
  overflow:hidden;
  transform-origin:50% 100%;
}

.uno-playing-card{
  appearance:none;
  padding:0;
  flex:0 0 var(--uno-card-w);
  display:block;
  color:#fff;
  background:#111;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    margin .18s ease;
}

.uno-playing-card::before,
.discard-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:58%;
  transform:translate(-50%,-50%) rotate(-38deg);
  border-radius:50%;
  background:rgba(255,255,255,.90);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.42),
    0 0 16px rgba(255,255,255,.15);
  z-index:0;
}

.uno-playing-card::after,
.discard-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(255,255,255,.22),transparent 30% 70%,rgba(0,0,0,.18));
  pointer-events:none;
  z-index:4;
}

.uno-card-corner{
  position:absolute;
  left:7px;
  top:5px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-weight:900;
  line-height:.84;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.uno-card-corner.bottom{
  left:auto;
  top:auto;
  right:7px;
  bottom:5px;
  transform:rotate(180deg);
}
.uno-card-corner .corner-main{font-size:17px}
.uno-card-corner .corner-mini{font-size:10px;margin-top:2px}

.uno-card-center{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  font-family:Inter,sans-serif;
  font-weight:1000;
  font-size:43px;
  color:currentColor;
  text-shadow:
    0 2px 0 rgba(0,0,0,.18),
    0 3px 7px rgba(0,0,0,.40);
}
.uno-card-center.small{font-size:34px}
.uno-card-center.reverse{font-size:48px;transform:rotate(-12deg)}
.uno-card-center.skip{font-size:50px}
.uno-card-center.plus{font-size:36px}

.uno-playing-card.card-red,
.discard-card.card-red{background:linear-gradient(145deg,#ff4c51 0%,#d92731 48%,#a00d18 100%)}
.uno-playing-card.card-yellow,
.discard-card.card-yellow{background:linear-gradient(145deg,#ffd94e 0%,#eab316 48%,#b47700 100%);color:#231904}
.uno-playing-card.card-green,
.discard-card.card-green{background:linear-gradient(145deg,#44cf74 0%,#249654 48%,#0d6936 100%)}
.uno-playing-card.card-blue,
.discard-card.card-blue{background:linear-gradient(145deg,#4ca8ff 0%,#2876d4 48%,#114d9a 100%)}

.uno-playing-card.card-wild,
.discard-card.card-wild{
  background:
    conic-gradient(from -45deg,
      #e8333c 0 25%,
      #f0bd23 0 50%,
      #2aa75b 0 75%,
      #2d7fe2 0 100%);
}
.uno-playing-card.card-wild::before,
.discard-card.card-wild::before{
  background:rgba(19,19,22,.96);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
}

.wild-wheel{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  background:conic-gradient(#e8333c 0 25%,#f0bd23 0 50%,#2aa75b 0 75%,#2d7fe2 0);
  border:4px solid #fff;
  box-shadow:0 4px 12px rgba(0,0,0,.42);
}
.wild-wheel::after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#121318;
}
.wild-plus{
  position:absolute;
  z-index:3;
  font-size:23px;
  font-weight:1000;
  color:#fff;
  text-shadow:0 2px 3px #000;
}

.uno-playing-card.playable{
  box-shadow:
    0 0 0 3px rgba(240,201,91,.9),
    0 0 24px rgba(240,201,91,.58),
    var(--uno-shadow);
}
.uno-playing-card.playable:hover,
.uno-playing-card.playable:focus-visible{
  transform:translateY(-24px) scale(1.06) rotate(var(--fan-rotate,0deg));
  z-index:30;
  filter:brightness(1.08) saturate(1.08);
}
.uno-playing-card.disabled{
  filter:saturate(.52) brightness(.72);
  cursor:not-allowed;
}
.uno-playing-card.disabled:hover{
  transform:translateY(-7px) rotate(var(--fan-rotate,0deg));
}

.my-hand{
  align-items:flex-end;
  min-height:190px;
  padding:28px 16px 8px;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:thin;
}
.my-hand .uno-playing-card{
  margin-left:-27px;
  transform:translateY(var(--fan-y,0px)) rotate(var(--fan-rotate,0deg));
}
.my-hand .uno-playing-card:first-child{margin-left:0}

.card-stack{
  background:
    radial-gradient(ellipse at center,rgba(218,46,54,.85) 0 32%,transparent 33%),
    linear-gradient(135deg,#1a1b21,#050608);
  border-color:#f3ead0;
  cursor:pointer;
}
.card-stack::before{
  content:"DOSMOS";
  position:absolute;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%) rotate(-20deg);
  z-index:3;
  width:auto;
  height:auto;
  border:0;
  background:none;
  color:#ffd558;
  font:900 15px/1 "Sora";
  letter-spacing:.08em;
}
.card-stack::after{
  content:"UNO";
  position:absolute;
  left:50%;
  top:57%;
  transform:translate(-50%,-50%) rotate(-20deg);
  z-index:3;
  color:#fff;
  font:1000 25px/1 Inter;
  text-shadow:0 2px 7px #000;
}
.card-stack span{display:none}
.card-stack:hover{transform:translateY(-4px) scale(1.03);filter:brightness(1.08)}

.opponent-cards{
  display:flex;
  justify-content:center;
  margin-top:7px;
}
.opponent-card-back{
  width:25px;
  height:36px;
  border:2px solid #f2ead1;
  border-radius:5px;
  margin-left:-8px;
  background:
    radial-gradient(ellipse at center,#ca2730 0 37%,transparent 38%),
    linear-gradient(135deg,#17191e,#050608);
  box-shadow:0 4px 8px rgba(0,0,0,.34);
  transform:rotate(var(--opp-rot,0deg));
}
.opponent-card-back:first-child{margin-left:0}

.card-play-pop{
  animation:cardPlayPop .36s cubic-bezier(.2,.9,.25,1.2);
}
@keyframes cardPlayPop{
  0%{transform:translateY(30px) scale(.55) rotate(-16deg);opacity:0}
  70%{transform:translateY(-8px) scale(1.08) rotate(4deg);opacity:1}
  100%{transform:none}
}

@media(max-width:760px){
  :root{--uno-card-w:76px;--uno-card-h:112px;--uno-radius:12px}
  .my-hand{justify-content:flex-start;padding-left:18px;padding-right:18px;min-height:155px}
  .my-hand .uno-playing-card{margin-left:-22px}
  .uno-card-center{font-size:35px}
  .uno-card-center.reverse,.uno-card-center.skip{font-size:39px}
  .uno-card-corner .corner-main{font-size:14px}
  .uno-card-corner .corner-mini{font-size:8px}
  .wild-wheel{width:40px;height:40px}
}

/* DOSMOS UNO Sprint 2 Engine UI */
.game-status-center{display:flex;align-items:center;gap:10px}
.round-indicator{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(216,180,73,.32);
  background:rgba(216,180,73,.08);
  color:#e8cf7c;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
}
.game-top-actions{display:flex;gap:8px}
.rematch-btn{
  color:#111;
  background:linear-gradient(135deg,#efd274,#a97918);
  border-color:#d8b449;
  font-weight:900;
}
.uno-call-btn:disabled{
  opacity:.42;
  filter:grayscale(.7);
  cursor:not-allowed;
  box-shadow:none;
}
.uno-call-btn.ready{
  animation:unoReadyPulse 1.2s ease-in-out infinite;
}
@keyframes unoReadyPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 16px rgba(216,47,53,.25)}
  50%{transform:scale(1.06);box-shadow:0 0 30px rgba(216,47,53,.72)}
}
.card-stack:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none!important;
  filter:grayscale(.45);
}
.card-stack.active{
  box-shadow:
    0 0 0 3px rgba(240,201,91,.82),
    0 0 24px rgba(240,201,91,.48),
    var(--uno-shadow);
}
@media(max-width:760px){
  .game-top{align-items:flex-start;gap:10px}
  .game-status-center{flex-direction:column;align-items:flex-start}
  .game-top-actions{flex-direction:column}
}

/* DOSMOS UNO Sprint 3 Multiplayer Stability */
.reconnect-box{
  margin:20px auto 0;
  max-width:520px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  color:#aeb2bd;
}
.reconnect-box:has(button[hidden]){display:none}
.waiting-player small,
.opponent small{
  line-height:1.45;
}
.connection-badge.online::before{
  content:"";
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#55df8a;
  box-shadow:0 0 10px rgba(85,223,138,.65);
}
.connection-badge:not(.online)::before{
  content:"";
  width:7px;
  height:7px;
  display:inline-block;
  margin-right:7px;
  border-radius:50%;
  background:#e2b84c;
}
@media(max-width:760px){
  .reconnect-box{flex-direction:column}
}

/* DOSMOS UNO Sprint 4 Polishing */
.uno-head-tools{display:flex;align-items:center;gap:8px}
.head-tool{
  width:36px;height:36px;border-radius:10px;
  border:1px solid #3a3e48;background:#171920;color:#fff;
  font-weight:900;cursor:pointer;
}
.head-tool:hover{border-color:#d8b449;color:#f1d47a}
.my-actions{display:flex;align-items:center;gap:12px}
.reaction-bar{display:flex;gap:5px}
.reaction-bar button{
  width:34px;height:34px;border-radius:9px;border:1px solid #343842;
  background:#161920;font-size:18px;cursor:pointer;transition:.15s transform,.15s border-color;
}
.reaction-bar button:hover{transform:translateY(-3px) scale(1.08);border-color:#d8b449}

.uno-toast{
  position:fixed;left:50%;top:88px;z-index:240;
  transform:translate(-50%,-18px);opacity:0;pointer-events:none;
  max-width:min(92vw,620px);padding:11px 16px;border-radius:12px;
  background:rgba(17,19,25,.96);border:1px solid #3c414c;color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  font-weight:800;text-align:center;
  transition:.22s ease;
}
.uno-toast.show{opacity:1;transform:translate(-50%,0)}
.uno-toast.success{border-color:#47bd78;color:#86efa9}
.uno-toast.warning{border-color:#d8a63b;color:#ffd979}

.reaction-layer{
  position:fixed;inset:0;z-index:220;pointer-events:none;overflow:hidden;
}
.reaction-pop{
  position:absolute;left:50%;top:48%;
  display:flex;flex-direction:column;align-items:center;
  animation:reactionFly 2.2s ease-out forwards;
}
.reaction-pop strong{
  font-size:64px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.48));
}
.reaction-pop small{
  margin-top:-5px;background:rgba(5,6,8,.82);border:1px solid #444;
  border-radius:999px;padding:5px 9px;color:#fff;font-weight:800;
}
@keyframes reactionFly{
  0%{opacity:0;transform:translate(-50%,40px) scale(.4) rotate(-10deg)}
  20%{opacity:1;transform:translate(-50%,0) scale(1.12) rotate(5deg)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-190px) scale(.85) rotate(-4deg)}
}

.confetti-layer{
  position:fixed;inset:0;z-index:230;pointer-events:none;overflow:hidden;
}
.confetti-layer i{
  position:absolute;top:-20px;width:10px;height:18px;border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{translate:0 -20px;rotate:0deg;opacity:1}
  100%{translate:var(--drift,40px) 105vh;rotate:760deg;opacity:.85}
}

.rules-modal{
  position:fixed;inset:0;z-index:260;display:grid;place-items:center;
  padding:20px;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);
}
.rules-modal[hidden]{display:none!important}
.rules-dialog{
  width:min(650px,96vw);max-height:88vh;overflow:auto;
  background:linear-gradient(145deg,#171921,#0a0b0e);
  border:1px solid rgba(216,180,73,.38);border-radius:18px;padding:22px;
  box-shadow:0 25px 80px rgba(0,0,0,.58);
}
.rules-title{display:flex;align-items:center;justify-content:space-between}
.rules-title h3{margin:0;font:800 24px "Sora"}
.rules-title button{
  width:36px;height:36px;border-radius:9px;border:1px solid #444;
  background:#20232b;color:#fff;font-size:24px;cursor:pointer;
}
.rules-dialog ol{padding-left:23px;color:#d2d5dc;line-height:1.72}
.rules-dialog li{margin-bottom:7px}
.rules-dialog p{color:#e0c56d;font-size:13px}

@media(max-width:760px){
  .uno-head-tools{justify-self:start}
  .my-head{align-items:flex-start;gap:10px}
  .my-actions{flex-direction:column-reverse;align-items:flex-end}
  .reaction-bar{max-width:190px;flex-wrap:wrap;justify-content:flex-end}
  .reaction-pop strong{font-size:52px}
}

/* DOSMOS UNO Sprint 5 Audio */
.audio-dialog{width:min(560px,96vw)}
.audio-setting-row{
  display:grid;
  grid-template-columns:1fr minmax(180px,260px);
  gap:22px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.audio-setting-row:last-of-type{border-bottom:0}
.audio-setting-row b{display:block;font-size:16px}
.audio-setting-row small{display:block;margin-top:4px;color:#9fa4af}
.audio-setting-row input[type=range]{
  width:100%;
  accent-color:#d8b449;
}
@media(max-width:620px){
  .audio-setting-row{grid-template-columns:1fr;gap:10px}
}

/* DOSMOS UNO V2.6 Multi-Card Play */
.multi-play-bar{
  margin:14px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(216,180,73,.34);
  background:linear-gradient(135deg,rgba(216,180,73,.13),rgba(216,180,73,.04));
  border-radius:14px;
  padding:12px 14px;
}
.multi-play-bar[hidden]{display:none!important}
.multi-play-bar small{
  display:block;
  color:#b9a56b;
  font-size:10px;
  letter-spacing:.12em;
}
.multi-play-bar b{font-size:17px;color:#f0d681}
.multi-play-actions{display:flex;gap:8px}

.uno-playing-card.selected{
  transform:translateY(-34px) scale(1.07) rotate(var(--fan-rotate,0deg))!important;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px #e2ba45,
    0 0 32px rgba(226,186,69,.78),
    var(--uno-shadow)!important;
  z-index:40;
  filter:brightness(1.1) saturate(1.12);
}
.selected-check{
  position:absolute;
  right:5px;
  top:5px;
  z-index:9;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111;
  color:#ffe477;
  border:2px solid #ffe477;
  font-size:13px;
  font-weight:1000;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}

@media(max-width:760px){
  .multi-play-bar{
    align-items:flex-start;
    flex-direction:column;
  }
  .multi-play-actions{
    width:100%;
  }
  .multi-play-actions .uno-btn{
    flex:1;
  }
  .uno-playing-card.selected{
    transform:translateY(-26px) scale(1.05) rotate(var(--fan-rotate,0deg))!important;
  }
}

/* DOSMOS UNO V2.7.1 Room Settings */
.room-settings-panel{
  margin:24px auto 6px;
  max-width:900px;
  text-align:left;
  border:1px solid rgba(216,180,73,.25);
  border-radius:17px;
  padding:18px;
  background:linear-gradient(145deg,rgba(216,180,73,.07),rgba(255,255,255,.018));
}
.room-settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:15px;
}
.room-settings-head small{
  color:#bba66b;
  font-weight:900;
  letter-spacing:.13em;
}
.room-settings-head h3{margin:3px 0 0;font-size:20px}
.host-only-label{
  border:1px solid rgba(216,180,73,.34);
  color:#e8ce79;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
}
.room-settings-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.room-settings-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#d4d7de;
  font-size:13px;
  font-weight:700;
}
.room-settings-grid select{
  width:100%;
  padding:11px 12px;
  border:1px solid #343841;
  border-radius:10px;
  color:#fff;
  background:#0b0d11;
  font:700 14px Inter;
}
.setting-toggle{
  grid-column:span 1;
  min-height:66px;
  flex-direction:row!important;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  padding:11px 12px;
  background:rgba(255,255,255,.025);
}
.setting-toggle span{display:block}
.setting-toggle b{display:block}
.setting-toggle small{display:block;color:#8f949f;margin-top:3px;font-weight:500}
.setting-toggle input{
  width:20px;height:20px;
  accent-color:#d8b449;
}
.room-settings-panel:not(.host-editable) select,
.room-settings-panel:not(.host-editable) input{
  opacity:.68;
}
.settings-note{
  margin:13px 0 0;
  color:#b5bac5;
  font-size:12px;
}
.settings-summary{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.settings-summary span{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(216,180,73,.22);
  border-radius:999px;
  padding:6px 9px;
  background:rgba(216,180,73,.055);
  color:#d8ca9c;
  font-size:11px;
  font-weight:800;
}
.game-settings-summary{
  justify-content:center;
  margin:13px 0 4px;
}
@media(max-width:760px){
  .room-settings-grid{grid-template-columns:1fr}
  .setting-toggle{grid-column:auto}
  .room-settings-head{align-items:flex-start}
}

/* DOSMOS UNO V2.7.2 Match Scoring */
.scoreboard-panel{
  margin:14px auto 18px;
  max-width:760px;
  border:1px solid rgba(216,180,73,.22);
  border-radius:15px;
  padding:15px;
  background:linear-gradient(145deg,rgba(216,180,73,.06),rgba(255,255,255,.018));
}
.scoreboard-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.scoreboard-head small{
  color:#bca86c;
  font-weight:900;
  letter-spacing:.13em;
}
.scoreboard-head h3{margin:0;font-size:19px}
.scoreboard{display:grid;gap:7px}
.score-row{
  display:grid;
  grid-template-columns:34px 1fr auto auto;
  gap:9px;
  align-items:center;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.score-row.champion{
  border-color:rgba(216,180,73,.55);
  background:rgba(216,180,73,.10);
  box-shadow:0 0 22px rgba(216,180,73,.12);
}
.score-rank{
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#20232b;
  color:#e8cf7c;
  font-weight:900;
}
.score-name{font-weight:800}
.score-row strong{font-size:19px;color:#f1d77f}
.score-row small{color:#8f949f}
.round-result{
  margin-bottom:10px;
  border-radius:10px;
  padding:10px 12px;
  background:rgba(66,179,108,.10);
  border:1px solid rgba(66,179,108,.30);
  color:#9bf0ba;
  text-align:center;
}
.waiting-scoreboard{margin-top:20px}
@media(max-width:620px){
  .score-row{grid-template-columns:30px 1fr auto}
  .score-row small{display:none}
  .scoreboard-head{align-items:flex-start;flex-direction:column}
}

/* DOSMOS UNO V2.7.3 Turn Timer */
.turn-timer-ring{
  --timer-progress:360deg;
  width:58px;
  height:58px;
  border-radius:50%;
  padding:4px;
  display:grid;
  place-items:center;
  background:
    conic-gradient(
      #d8b449 0 var(--timer-progress),
      rgba(255,255,255,.10) var(--timer-progress) 360deg
    );
  box-shadow:0 0 18px rgba(216,180,73,.20);
  transition:.2s filter,.2s box-shadow;
}
.turn-timer-inner{
  width:100%;
  height:100%;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#101218;
  border:1px solid rgba(255,255,255,.08);
}
.turn-timer-inner strong{
  font-size:20px;
  line-height:1;
  color:#f0d57b;
}
.turn-timer-inner small{
  margin-top:3px;
  font-size:7px;
  letter-spacing:.10em;
  color:#8f949f;
}
.turn-timer-ring.mine{
  box-shadow:
    0 0 0 2px rgba(216,180,73,.18),
    0 0 25px rgba(216,180,73,.38);
}
.turn-timer-ring.warning{
  background:
    conic-gradient(
      #f29f38 0 var(--timer-progress),
      rgba(255,255,255,.10) var(--timer-progress) 360deg
    );
}
.turn-timer-ring.warning .turn-timer-inner strong{color:#ffbc63}
.turn-timer-ring.danger{
  background:
    conic-gradient(
      #e83b43 0 var(--timer-progress),
      rgba(255,255,255,.10) var(--timer-progress) 360deg
    );
  animation:timerDangerPulse .65s ease-in-out infinite;
}
.turn-timer-ring.danger .turn-timer-inner strong{color:#ff7278}
@keyframes timerDangerPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 14px rgba(232,59,67,.25)}
  50%{transform:scale(1.08);box-shadow:0 0 28px rgba(232,59,67,.60)}
}
@media(max-width:760px){
  .game-status-center{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px;
  }
  .turn-timer-ring{
    grid-column:1/-1;
    width:52px;
    height:52px;
  }
}

/* DOSMOS UNO V2.7.4 Match System */
.waiting-player.ready{
  border-color:rgba(69,192,115,.55);
  box-shadow:0 0 20px rgba(69,192,115,.10);
}
.ready-badge{
  display:inline-flex;
  margin-top:8px;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  background:#252831;
  color:#aeb2bd;
}
.waiting-player.ready .ready-badge{
  background:rgba(69,192,115,.15);
  color:#7be3a2;
  border:1px solid rgba(69,192,115,.35);
}
.kick-player-btn{
  margin-top:8px;
  border:1px solid rgba(232,59,67,.35);
  background:rgba(232,59,67,.10);
  color:#ff858b;
  border-radius:8px;
  padding:6px 9px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}
.ready-btn{
  background:linear-gradient(135deg,#2d333e,#171a20);
  color:#fff;
  border:1px solid #404550;
}
.ready-btn.ready{
  background:linear-gradient(135deg,#50c780,#247447);
  color:#07130c;
  border-color:#65dc93;
}
#startGameBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.6);
}
.action-log-panel{
  max-width:820px;
  margin:10px auto 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.018);
}
.action-log-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:9px;
}
.action-log-head small{
  color:#b9a66b;
  font-weight:900;
  letter-spacing:.12em;
}
.action-log-head h3{margin:0;font-size:17px}
.action-log{
  display:grid;
  gap:6px;
  max-height:160px;
  overflow:auto;
}
.action-log-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:9px;
  align-items:start;
  padding:7px 9px;
  border-radius:8px;
  background:rgba(255,255,255,.025);
  border-left:3px solid #49505c;
}
.action-log-row span{
  color:#858b96;
  font-size:11px;
}
.action-log-row p{
  margin:0;
  color:#d4d7de;
  font-size:12px;
  line-height:1.45;
}
.action-log-row.play{border-left-color:#4d8ee8}
.action-log-row.draw{border-left-color:#d5a740}
.action-log-row.uno{border-left-color:#e83b43}
.action-log-row.win{border-left-color:#4ac379}
.action-log-row.warning{border-left-color:#f07345}
.action-log-row.ready{border-left-color:#8c68e8}
.match-summary-dialog{width:min(760px,96vw)}
.match-summary-body{display:grid;gap:10px;margin-top:16px}
.summary-player{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.summary-player.winner{
  border-color:rgba(216,180,73,.48);
  background:rgba(216,180,73,.09);
}
.summary-player b{display:block;font-size:16px}
.summary-player small{display:block;color:#9196a1;margin-top:3px}
.summary-stats{display:flex;gap:12px}
.summary-stats span{
  min-width:55px;
  text-align:center;
}
.summary-stats strong{
  display:block;
  color:#efd57d;
  font-size:18px;
}
.summary-stats small{font-size:10px}
@media(max-width:680px){
  .summary-player{grid-template-columns:1fr}
  .summary-stats{justify-content:space-between}
  .waiting-actions{flex-wrap:wrap}
  .waiting-actions .uno-btn{flex:1 1 120px}
}

/* DOSMOS UNO V2.8.1 — Draw Then Play + Action Lock */
.draw-decision-actions{
  min-height:42px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:-2px auto 10px;
}
.action-lock-badge{
  border:1px solid rgba(216,180,73,.34);
  background:rgba(216,180,73,.09);
  color:#efd57b;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
}
.action-lock-badge[hidden]{display:none!important}
.uno-playing-card.fresh-draw{
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px #49a7ff,
    0 0 34px rgba(73,167,255,.78),
    var(--uno-shadow);
}
.uno-playing-card.fresh-draw::after{
  content:"BARU";
  position:absolute;
  left:50%;
  bottom:5px;
  transform:translateX(-50%);
  z-index:10;
  border-radius:999px;
  padding:3px 7px;
  background:#0a5ea7;
  color:#fff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}
.uno-action-locked .uno-playing-card,
.uno-action-locked .card-stack,
.uno-action-locked .uno-call-btn,
.uno-action-locked #playSelectedBtn{
  pointer-events:none;
}
.uno-action-locked .my-hand{
  opacity:.78;
}
#passAfterDrawBtn{
  border-color:rgba(73,167,255,.42);
  color:#bcdfff;
  background:rgba(73,167,255,.10);
}
@media(max-width:760px){
  .draw-decision-actions{
    flex-wrap:wrap;
    padding:0 10px;
  }
}

/* DOSMOS UNO V2.8.2 — Wild +4 Challenge */
.wild4-challenge-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(7px);
}
.wild4-challenge-modal[hidden]{display:none!important}
.wild4-challenge-dialog{
  width:min(470px,96vw);
  text-align:center;
  border:1px solid rgba(216,180,73,.48);
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(circle at 50% 0,rgba(216,180,73,.13),transparent 40%),
    linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.wild4-challenge-dialog>small{
  display:block;
  margin-top:14px;
  color:#e1c66f;
  letter-spacing:.16em;
  font-weight:900;
}
.wild4-challenge-dialog h3{
  margin:6px 0 8px;
  font:800 27px "Sora";
}
.wild4-challenge-dialog p{
  color:#c7cad2;
  line-height:1.6;
}
.wild4-card-preview{
  width:116px;
  height:164px;
  margin:0 auto;
  position:relative;
  display:grid;
  place-items:center;
  border:7px solid #f5f1e8;
  border-radius:16px;
  background:conic-gradient(#e8333c 0 25%,#f0bd23 0 50%,#2aa75b 0 75%,#2d7fe2 0);
  box-shadow:0 18px 36px rgba(0,0,0,.52);
  transform:rotate(-4deg);
}
.wild4-card-preview::before{
  content:"";
  position:absolute;
  width:125%;
  height:55%;
  border-radius:50%;
  background:#111318;
  transform:rotate(-38deg);
}
.wild4-card-preview strong{
  position:absolute;
  z-index:3;
  font-size:42px;
  color:#fff;
  text-shadow:0 3px 7px #000;
}
.wild4-wheel{
  position:absolute;
  z-index:2;
  width:60px;
  height:60px;
  border-radius:50%;
  background:conic-gradient(#e8333c 0 25%,#f0bd23 0 50%,#2aa75b 0 75%,#2d7fe2 0);
  border:4px solid #fff;
}
.wild4-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.wild4-note{
  margin:13px 0 0!important;
  color:#9fa4af!important;
  font-size:11px;
}
.wild4-challenge-active .uno-playing-card,
.wild4-challenge-active .card-stack,
.wild4-challenge-active .uno-call-btn,
.wild4-challenge-active #playSelectedBtn{
  pointer-events:none;
  filter:brightness(.58);
}
@media(max-width:520px){
  .wild4-actions{grid-template-columns:1fr}
  .wild4-card-preview{width:98px;height:140px}
}

/* DOSMOS UNO V2.8.3 — Host Validation & Anti-Cheat */
.security-panel{
  max-width:860px;
  margin:12px auto 18px;
  border:1px solid rgba(82,170,255,.28);
  border-radius:15px;
  padding:15px;
  background:linear-gradient(145deg,rgba(44,112,181,.10),rgba(255,255,255,.018));
}
.security-panel[hidden]{display:none!important}
.security-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.security-panel-head small{
  color:#7fc2ff;
  font-weight:900;
  letter-spacing:.13em;
}
.security-panel-head h3{margin:2px 0 0;font-size:19px}
.integrity-status{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #3d434e;
  border-radius:11px;
  padding:11px 13px;
  margin-bottom:10px;
  background:rgba(255,255,255,.025);
}
.integrity-status strong{
  min-width:70px;
  font-size:22px;
}
.integrity-status span{color:#adb2bd;font-size:12px}
.integrity-status.ok{
  border-color:rgba(70,195,117,.42);
  background:rgba(70,195,117,.08);
}
.integrity-status.ok strong{color:#79e5a0}
.integrity-status.bad{
  border-color:rgba(232,59,67,.48);
  background:rgba(232,59,67,.09);
}
.integrity-status.bad strong{color:#ff7d83}
.security-audit-log{
  max-height:180px;
  overflow:auto;
  display:grid;
  gap:5px;
}
.security-log-row{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:9px;
  padding:7px 9px;
  border-left:3px solid #5b6370;
  border-radius:7px;
  background:rgba(255,255,255,.022);
}
.security-log-row span{
  color:#818894;
  font-size:10px;
}
.security-log-row p{
  margin:0;
  color:#d1d5dd;
  font-size:11px;
  line-height:1.45;
}
.security-log-row.accept{border-left-color:#4f9cff}
.security-log-row.success{border-left-color:#49c27a}
.security-log-row.reject{border-left-color:#ef8b3d}
.security-log-row.critical{border-left-color:#e83b43;background:rgba(232,59,67,.07)}
@media(max-width:620px){
  .security-panel-head{align-items:flex-start;flex-direction:column}
  .security-log-row{grid-template-columns:58px 1fr}
}

/* DOSMOS UNO V2.8.4.1 — Card Animation */
.flying-card{
  position:fixed;
  z-index:420;
  pointer-events:none;
  opacity:.96;
  border:6px solid #f7f4ea;
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 22px 50px rgba(0,0,0,.50),
    0 0 24px rgba(255,255,255,.12);
  transform:translate(0,0) rotate(0deg) scale(1);
  transition-property:transform,opacity,filter;
  transition-timing-function:cubic-bezier(.22,.86,.26,1);
  will-change:transform,opacity;
}
.flying-card.land{
  opacity:0;
  filter:brightness(1.28);
  transform:scale(.82)!important;
}
.flying-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:58%;
  transform:translate(-50%,-50%) rotate(-38deg);
  border-radius:50%;
  background:rgba(255,255,255,.90);
  z-index:0;
}
.flying-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 35% 70%,rgba(0,0,0,.18));
  z-index:6;
}
.flying-card.card-wild::before{
  background:#111318;
}
.card-back-ghost{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at center,rgba(218,46,54,.85) 0 34%,transparent 35%),
    linear-gradient(135deg,#191b22,#040507);
  color:#fff;
}
.card-back-ghost::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(255,255,255,.18);
  border-radius:9px;
  background:none;
  transform:none;
}
.card-back-ghost span{
  position:relative;
  z-index:3;
  color:#ffd558;
  font:900 11px "Sora";
  letter-spacing:.08em;
}
.card-back-ghost b{
  position:relative;
  z-index:3;
  font:1000 24px Inter;
  transform:rotate(-18deg);
}
.card-animation-busy .uno-playing-card,
.card-animation-busy .card-stack,
.card-animation-busy #playSelectedBtn,
.card-animation-busy .uno-call-btn,
.card-animation-busy #passAfterDrawBtn{
  pointer-events:none!important;
}
.card-animation-busy .game-screen{
  cursor:progress;
}
.animation-status{
  color:#7fc2ff;
  font-size:11px;
  font-weight:800;
  opacity:.85;
}
.discard-card.card-play-pop{
  animation:discardLand .34s cubic-bezier(.2,.9,.25,1.2);
}
@keyframes discardLand{
  0%{transform:scale(.78) rotate(-8deg);filter:brightness(1.35)}
  65%{transform:scale(1.08) rotate(3deg)}
  100%{transform:scale(1) rotate(0)}
}
.my-hand{
  perspective:900px;
}
.uno-playing-card{
  backface-visibility:hidden;
}
@media(max-width:760px){
  .flying-card{
    border-width:5px;
    border-radius:11px;
  }
  .animation-status{
    width:100%;
    text-align:center;
  }
}

/* DOSMOS UNO V2.8.4.2 — Special Card Effects */
.special-effect-overlay{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}
.special-effect-overlay[hidden]{display:none!important}
.special-effect-overlay.active{
  opacity:1;
  animation:effectOverlayFade 1.2s ease forwards;
}
.special-effect-content{
  position:relative;
  z-index:3;
  text-align:center;
  transform:scale(.55) rotate(-8deg);
  animation:specialEffectPop .75s cubic-bezier(.18,.9,.2,1.2) forwards;
}
.special-effect-content h2{
  margin:8px 0 0;
  font:900 clamp(38px,7vw,90px)/1 "Sora";
  letter-spacing:.05em;
  color:#fff;
  text-shadow:
    0 5px 0 rgba(0,0,0,.35),
    0 12px 35px rgba(0,0,0,.55);
}
.special-effect-symbol{
  width:150px;
  height:150px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  font:1000 78px/1 Inter;
  color:#fff;
  border:8px solid rgba(255,255,255,.92);
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    0 0 55px currentColor;
}
.reverse-effect{
  background:radial-gradient(circle,rgba(46,132,230,.48),rgba(5,10,22,.84) 62%);
}
.reverse-effect .special-effect-symbol{
  background:linear-gradient(145deg,#4aa9ff,#1459aa);
  animation:reverseSpin .85s ease-in-out;
}
.skip-effect{
  background:radial-gradient(circle,rgba(231,57,65,.50),rgba(24,6,8,.86) 62%);
}
.skip-effect .special-effect-symbol{
  background:linear-gradient(145deg,#ff5f67,#aa111a);
}
.draw2-effect{
  background:radial-gradient(circle,rgba(236,166,36,.48),rgba(28,15,3,.88) 62%);
}
.draw2-effect .special-effect-symbol{
  background:linear-gradient(145deg,#ffd356,#c77b00);
  color:#231706;
}
.wild-effect,
.wild4-effect{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 26%),
    conic-gradient(
      from 45deg,
      rgba(232,51,60,.55),
      rgba(240,189,35,.55),
      rgba(42,167,91,.55),
      rgba(45,127,226,.55),
      rgba(232,51,60,.55)
    );
}
.wild-effect .special-effect-symbol,
.wild4-effect .special-effect-symbol{
  background:conic-gradient(#e8333c 0 25%,#f0bd23 0 50%,#2aa75b 0 75%,#2d7fe2 0);
  border-color:#fff;
  color:#fff;
}
.chosen-color{
  display:inline-flex;
  margin-top:14px;
  padding:8px 15px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
  font-weight:900;
  letter-spacing:.10em;
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.chosen-color.red{background:#d92d34}
.chosen-color.yellow{background:#e5ad19;color:#251a04}
.chosen-color.green{background:#299652}
.chosen-color.blue{background:#2876d4}

.effect-particles{
  position:absolute;
  inset:0;
  z-index:2;
}
.effect-particles i{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:0;
  animation:effectParticleBurst .8s ease-out var(--delay) forwards;
}
.screen-shake .game-screen{
  animation:screenShake .38s linear;
}
.wild-color-flash .game-screen::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:490;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(232,51,60,.18),rgba(240,189,35,.18),rgba(42,167,91,.18),rgba(45,127,226,.18));
  animation:wildFlash .8s ease forwards;
}
@keyframes effectOverlayFade{
  0%{opacity:0}
  15%,75%{opacity:1}
  100%{opacity:0}
}
@keyframes specialEffectPop{
  0%{transform:scale(.35) rotate(-18deg);opacity:0}
  55%{transform:scale(1.16) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes reverseSpin{
  0%{transform:rotate(-220deg) scale(.5)}
  70%{transform:rotate(28deg) scale(1.12)}
  100%{transform:rotate(0) scale(1)}
}
@keyframes effectParticleBurst{
  0%{transform:translate(0,0) scale(.3);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--x),var(--y)) scale(1.2);opacity:0}
}
@keyframes screenShake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-8px,4px)}
  30%{transform:translate(7px,-4px)}
  45%{transform:translate(-5px,-3px)}
  60%{transform:translate(5px,3px)}
  75%{transform:translate(-3px,2px)}
}
@keyframes wildFlash{
  0%{opacity:0}
  35%{opacity:1}
  100%{opacity:0}
}
@media(max-width:760px){
  .special-effect-symbol{
    width:110px;
    height:110px;
    font-size:56px;
    border-width:6px;
  }
  .special-effect-content h2{
    font-size:42px;
  }
}

/* DOSMOS UNO V3.0 — Public Matchmaking */
.matchmaking-panel{
  margin-bottom:22px;
  border:1px solid rgba(76,156,255,.28);
  border-radius:22px;
  padding:24px;
  background:
    radial-gradient(circle at 90% 0,rgba(50,126,215,.14),transparent 35%),
    linear-gradient(145deg,rgba(19,21,27,.98),rgba(8,9,12,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.matchmaking-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.matchmaking-head small{
  color:#77baff;
  font-weight:900;
  letter-spacing:.14em;
}
.matchmaking-head h2{
  margin:4px 0 6px;
  font:800 28px "Sora";
}
.matchmaking-head p{margin:0;color:#9fa4af}
.matchmaking-status{
  border:1px solid #3c424d;
  border-radius:999px;
  padding:8px 12px;
  color:#a9aeb8;
  font-size:12px;
  white-space:nowrap;
}
.matchmaking-status.online{
  color:#7ce6a3;
  border-color:rgba(76,196,120,.42);
  background:rgba(76,196,120,.08);
}
.quick-match-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:20px;
  align-items:end;
}
.quick-match-box label{
  display:block;
  margin-bottom:7px;
  color:#c9ccd3;
  font-size:13px;
  font-weight:800;
}
.quick-match-box input,
.room-visibility-select{
  width:100%;
  padding:13px 14px;
  border:1px solid #333842;
  border-radius:10px;
  background:#090b0f;
  color:#fff;
  font:700 15px Inter;
}
.quick-match-btn{
  min-width:170px;
  min-height:48px;
  font-size:15px;
}
.public-room-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.public-room-toolbar b{display:block}
.public-room-toolbar span{color:#8f949f;font-size:12px}
.public-room-toolbar strong{color:#79bbff}
.public-room-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.public-room-card{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}
.public-room-main{
  display:flex;
  align-items:center;
  gap:10px;
}
.public-room-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#5caeff,#1d568f);
  color:#07111d;
  font-weight:1000;
}
.public-room-main b{display:block}
.public-room-main small{display:block;color:#8f949f;margin-top:3px}
.public-room-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.public-room-meta span{
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  padding:5px 8px;
  color:#b7bbc4;
  font-size:10px;
}
.public-room-empty{
  text-align:center;
  color:#818792;
  padding:22px 0 8px;
}
.public-room-empty[hidden]{display:none!important}
.visibility-row{margin-top:10px}
.visibility-badge{
  display:inline-flex;
  border:1px solid #3b404a;
  border-radius:999px;
  padding:5px 8px;
  color:#aeb3bd;
  font-size:10px;
  font-weight:900;
}
.visibility-badge.public{
  color:#7cbcff;
  border-color:rgba(76,156,255,.45);
  background:rgba(76,156,255,.09);
}
@media(max-width:760px){
  .matchmaking-panel{padding:17px}
  .matchmaking-head{align-items:flex-start;flex-direction:column}
  .quick-match-box{grid-template-columns:1fr}
  .quick-match-btn{width:100%}
  .public-room-card{grid-template-columns:1fr}
  .public-room-meta{justify-content:flex-start}
  .join-public-room{width:100%}
}

/* DOSMOS UNO V3.1 — Account & Profile Beta */
.profile-button{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #3a3f49;
  border-radius:999px;
  padding:4px 11px 4px 4px;
  background:#14171d;
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.profile-button:hover{border-color:#d8b449}
.profile-mini-avatar{
  width:29px;height:29px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#0b0c0e;
  font-size:11px;
  font-weight:1000;
}
.profile-mini-avatar.gold,.profile-view-avatar.gold{background:linear-gradient(135deg,#f1d77d,#9a6b13)}
.profile-mini-avatar.blue,.profile-view-avatar.blue{background:linear-gradient(135deg,#79c1ff,#2462ae)}
.profile-mini-avatar.red,.profile-view-avatar.red{background:linear-gradient(135deg,#ff858b,#a11822);color:#fff}
.profile-mini-avatar.green,.profile-view-avatar.green{background:linear-gradient(135deg,#7be3a2,#247649)}
.profile-mini-avatar.purple,.profile-view-avatar.purple{background:linear-gradient(135deg,#c59bff,#6937a9);color:#fff}

.profile-modal{
  position:fixed;inset:0;z-index:600;
  display:grid;place-items:center;
  padding:20px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(7px);
}
.profile-modal[hidden]{display:none!important}
.profile-dialog{
  width:min(860px,97vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(216,180,73,.38);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 90% 0,rgba(216,180,73,.11),transparent 32%),
    linear-gradient(145deg,#171920,#090a0d);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
}
.profile-dialog-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px
}
.profile-dialog-head small{color:#d9bf6c;font-weight:900;letter-spacing:.14em}
.profile-dialog-head h2{margin:3px 0 0;font:800 28px "Sora"}
.profile-dialog-head button{
  width:38px;height:38px;border-radius:10px;border:1px solid #414650;
  background:#20232b;color:#fff;font-size:25px;cursor:pointer
}
.profile-overview{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.profile-view-avatar{
  width:92px;height:92px;
  display:grid;place-items:center;
  border-radius:50%;
  border:5px solid rgba(255,255,255,.75);
  font:1000 32px Inter;
  color:#101115;
  box-shadow:0 14px 32px rgba(0,0,0,.38)
}
.profile-overview-main h3{margin:0;font-size:24px}
.profile-overview-main p{margin:5px 0 12px;color:#9fa4af}
.profile-level-row{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.profile-level-row b{color:#f0d57b}
.profile-level-row span{color:#9ea3ad}
.profile-xp-track{
  height:9px;margin-top:7px;border-radius:999px;
  background:#272b33;overflow:hidden
}
.profile-xp-track i{
  display:block;height:100%;width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#b77b12,#f1d77d);
  transition:.3s width
}
.profile-stats{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  margin-top:13px
}
.profile-stats>div{
  text-align:center;padding:12px 7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.022)
}
.profile-stats strong{display:block;font-size:20px;color:#efd47c}
.profile-stats small{display:block;margin-top:4px;color:#8f949f}
.profile-editor,.profile-achievement-section{
  margin-top:18px;padding-top:17px;border-top:1px solid rgba(255,255,255,.08)
}
.profile-editor h3,.profile-achievement-section h3{margin:0 0 12px}
.profile-editor-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:11px
}
.profile-editor-grid label{display:flex;flex-direction:column;gap:6px}
.profile-editor-grid span{font-size:12px;font-weight:800;color:#c9ccd3}
.profile-editor-grid input,.profile-editor-grid select{
  width:100%;padding:12px;border:1px solid #343942;border-radius:10px;
  background:#090b0f;color:#fff;font:700 14px Inter
}
.profile-bio-field{grid-column:1/-1}
.profile-editor .uno-btn{margin-top:13px}
.profile-achievements{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.achievement-card{
  display:flex;gap:10px;align-items:center;padding:11px;
  border:1px solid rgba(255,255,255,.07);border-radius:11px;
  background:rgba(255,255,255,.022)
}
.achievement-card>span{font-size:24px}
.achievement-card b{display:block}
.achievement-card small{display:block;margin-top:3px;color:#8e949f}
.achievement-card.locked{opacity:.48;filter:grayscale(.8)}
.achievement-card.unlocked{
  border-color:rgba(216,180,73,.35);
  background:rgba(216,180,73,.07)
}
.profile-storage-note{
  margin:17px 0 0;text-align:center;color:#8d929c;font-size:11px
}
@media(max-width:760px){
  .profile-button>span:last-child{display:none}
  .profile-stats{grid-template-columns:repeat(3,1fr)}
  .profile-editor-grid,.profile-achievements{grid-template-columns:1fr}
  .profile-bio-field{grid-column:auto}
}
@media(max-width:520px){
  .profile-overview{grid-template-columns:1fr;text-align:center}
  .profile-view-avatar{margin:auto}
  .profile-level-row{flex-direction:column}
}

/* DOSMOS UNO V3.2 — Ranked & MMR */
.profile-button-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
}
.profile-button-text>span{font-size:12px}
.profile-rank-mini{
  margin-top:3px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
}
.rank-bronze{color:#c98f62}
.rank-silver{color:#d5d9df}
.rank-gold{color:#f0c54f}
.rank-platinum{color:#78d9dd}
.rank-diamond{color:#83bfff}
.rank-master{color:#ff7b4c}
.rank-grandmaster{color:#bd91ff}
.rank-legend{color:#ffe271;text-shadow:0 0 10px rgba(255,226,113,.5)}

.profile-rank-section{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin-top:14px;
  padding:17px;
  border:1px solid rgba(111,162,255,.25);
  border-radius:15px;
  background:
    radial-gradient(circle at 0 50%,rgba(72,125,214,.14),transparent 36%),
    rgba(255,255,255,.022);
}
.rank-emblem{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,#252a35,#101217);
  box-shadow:0 15px 30px rgba(0,0,0,.34);
}
.rank-emblem span{
  font-size:43px;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.35));
}
.rank-title-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}
.rank-title-row small{
  color:#83b9ff;
  font-weight:900;
  letter-spacing:.13em;
}
.rank-title-row h3{
  margin:3px 0 0;
  font:800 24px "Sora";
}
.rank-title-row>strong{
  color:#efd57c;
  font-size:19px;
}
.rank-progress-track{
  height:10px;
  margin-top:11px;
  overflow:hidden;
  border-radius:999px;
  background:#282c35;
}
.rank-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#407cd1,#83c1ff);
  transition:.35s width;
}
.rank-progress-info,.rank-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  color:#969ca7;
  font-size:10px;
}
.rank-meta span{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,255,255,.025);
}
@media(max-width:620px){
  .profile-rank-section{grid-template-columns:1fr;text-align:center}
  .rank-emblem{margin:auto}
  .rank-title-row{align-items:center;flex-direction:column}
  .rank-progress-info,.rank-meta{flex-direction:column;align-items:center}
}

/* DOSMOS UNO V3.3 — Smart AI Bot */
.bot-add-btn{
  background:linear-gradient(135deg,#5c8dff,#314d9c);
  color:#fff;
  border:1px solid #76a0ff;
  font-weight:900;
}
.bot-badge{
  display:inline-flex;
  margin-top:7px;
  border-radius:999px;
  padding:5px 8px;
  border:1px solid rgba(102,161,255,.38);
  background:rgba(102,161,255,.10);
  color:#8fbcff;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
}
.remove-bot-btn{
  border-color:rgba(117,159,255,.38);
  background:rgba(76,116,210,.10);
  color:#9dbdff;
}
.waiting-player:has(.bot-badge){
  border-color:rgba(97,149,255,.35);
  background:
    radial-gradient(circle at 50% 0,rgba(85,137,255,.10),transparent 46%),
    #0b0d11;
}
.opponent:has(small:nth-last-child(1)){
  transition:.2s border-color,.2s box-shadow;
}
@media(max-width:760px){
  .bot-add-btn{order:-1}
}

/* DOSMOS UNO V3.4.1 — Daily Mission */
.mission-head-button{position:relative}
.mission-notification{
  position:absolute;
  right:-4px;
  top:-5px;
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#e83b43;
  color:#fff;
  border:2px solid #111318;
  font-size:9px;
  font-weight:1000;
}
.mission-notification[hidden]{display:none!important}
.profile-coin-row{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  border:1px solid rgba(240,197,79,.28);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(240,197,79,.07);
  color:#f0d070;
  font-size:12px;
}
.daily-mission-modal{
  position:fixed;
  inset:0;
  z-index:650;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(8px);
}
.daily-mission-modal[hidden]{display:none!important}
.daily-mission-dialog{
  width:min(850px,97vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(240,197,79,.40);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 90% 0,rgba(240,197,79,.12),transparent 34%),
    linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 32px 95px rgba(0,0,0,.66);
}
.daily-mission-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.daily-mission-head small{
  color:#e1c667;
  font-weight:900;
  letter-spacing:.14em;
}
.daily-mission-head h2{
  margin:4px 0 4px;
  font:800 29px "Sora";
}
.daily-mission-head p{
  margin:0;
  color:#9fa4ae;
  font-size:12px;
}
.daily-mission-head p strong{color:#f0d070}
.daily-mission-head>button{
  width:39px;height:39px;
  border-radius:10px;
  border:1px solid #414650;
  background:#20232b;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.daily-mission-list{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.daily-mission-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.024);
}
.daily-mission-card.complete{
  border-color:rgba(68,191,112,.38);
  background:rgba(68,191,112,.065);
}
.daily-mission-card.claimed{
  opacity:.62;
  filter:saturate(.7);
}
.mission-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:13px;
  background:#22262e;
  font-size:25px;
}
.mission-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.mission-title-row b{display:block}
.mission-title-row small{
  display:block;
  margin-top:3px;
  color:#8f949f;
}
.mission-title-row>span{
  color:#e6cb73;
  font-weight:900;
  white-space:nowrap;
}
.mission-progress-track{
  height:8px;
  margin-top:9px;
  overflow:hidden;
  border-radius:999px;
  background:#272b33;
}
.mission-progress-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#b67c17,#f0d47b);
}
.mission-reward{
  display:flex;
  gap:7px;
  margin-top:8px;
}
.mission-reward span{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:4px 7px;
  color:#b9bec7;
  font-size:10px;
}
.mission-claim-btn{
  min-width:116px;
  padding:10px 11px;
  border:1px solid rgba(68,191,112,.40);
  border-radius:9px;
  background:rgba(68,191,112,.12);
  color:#83e9a7;
  cursor:pointer;
  font-weight:900;
}
.mission-claim-btn:disabled{
  border-color:#3b4049;
  background:#252932;
  color:#858b96;
  cursor:not-allowed;
}
.daily-bonus-card{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:14px;
  align-items:center;
  margin-top:17px;
  padding:16px;
  border:1px solid rgba(240,197,79,.25);
  border-radius:15px;
  background:rgba(240,197,79,.055);
}
.daily-bonus-card>div:first-child{
  display:flex;
  align-items:center;
  gap:11px;
}
.daily-bonus-card>div:first-child>span{font-size:33px}
.daily-bonus-card b{display:block}
.daily-bonus-card small{
  display:block;
  margin-top:3px;
  color:#959aa4;
}
.daily-bonus-reward{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.daily-bonus-reward span{
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,255,255,.05);
  color:#d8dbe1;
  font-size:10px;
}
.daily-bonus-card.ready{
  border-color:rgba(240,197,79,.58);
  box-shadow:0 0 28px rgba(240,197,79,.12);
}
.daily-bonus-card.claimed{
  opacity:.60;
}
.daily-mission-note{
  margin:15px 0 0;
  text-align:center;
  color:#858b95;
  font-size:11px;
}
@media(max-width:720px){
  .daily-mission-card{
    grid-template-columns:auto 1fr;
  }
  .mission-claim-btn{
    grid-column:1/-1;
    width:100%;
  }
  .daily-bonus-card{
    grid-template-columns:1fr;
  }
  .daily-bonus-reward{justify-content:flex-start}
}

/* DOSMOS UNO V3.4.2 — Coin Economy */
.wallet-head-button{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border:1px solid rgba(240,197,79,.34);
  border-radius:999px;
  background:rgba(240,197,79,.08);
  color:#f0d16f;
  cursor:pointer;
  font-weight:900;
}
.wallet-head-button:hover{
  border-color:#e5c55f;
  background:rgba(240,197,79,.14);
}
.wallet-modal{
  position:fixed;
  inset:0;
  z-index:670;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(8px);
}
.wallet-modal[hidden]{display:none!important}
.wallet-dialog{
  width:min(850px,97vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(240,197,79,.38);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(240,197,79,.14),transparent 35%),
    linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 32px 95px rgba(0,0,0,.66);
}
.wallet-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
}
.wallet-head small{
  color:#dfc267;
  font-weight:900;
  letter-spacing:.14em;
}
.wallet-head h2{
  margin:4px 0 0;
  font:800 29px "Sora";
}
.wallet-head>button{
  width:39px;height:39px;
  border-radius:10px;
  border:1px solid #414650;
  background:#20232b;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.wallet-balance-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  margin-top:20px;
  padding:20px;
  border:1px solid rgba(240,197,79,.30);
  border-radius:17px;
  background:linear-gradient(135deg,rgba(240,197,79,.11),rgba(255,255,255,.025));
}
.wallet-balance-card small{
  color:#a79d7d;
  letter-spacing:.10em;
  font-weight:900;
}
.wallet-balance-card>div:first-child>strong{
  display:block;
  margin-top:6px;
  color:#f2d574;
  font-size:38px;
}
.wallet-balance-card p{
  margin:5px 0 0;
  color:#969ca6;
  font-size:12px;
}
.wallet-lifetime{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.wallet-lifetime>div{
  min-width:105px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.wallet-lifetime span{
  display:block;
  color:#9298a3;
  font-size:10px;
}
.wallet-lifetime strong{
  display:block;
  margin-top:4px;
  color:#e7e9ee;
  font-size:18px;
}
.wallet-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:19px;
}
.wallet-toolbar b{display:block}
.wallet-toolbar small{
  display:block;
  margin-top:3px;
  color:#8d939e;
}
.wallet-toolbar select{
  padding:10px 12px;
  border:1px solid #373c46;
  border-radius:9px;
  background:#0c0e12;
  color:#fff;
  font-weight:700;
}
.coin-transaction-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.coin-transaction-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.022);
}
.coin-transaction-row.earn{
  border-left:4px solid #4ac07a;
}
.coin-transaction-row.spend{
  border-left:4px solid #e76565;
}
.coin-transaction-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:22px;
  font-weight:1000;
}
.coin-transaction-row.earn .coin-transaction-icon{
  color:#72e29d;background:rgba(74,192,122,.12);
}
.coin-transaction-row.spend .coin-transaction-icon{
  color:#ff8989;background:rgba(231,101,101,.12);
}
.coin-transaction-main b{display:block}
.coin-transaction-main small{
  display:block;
  margin-top:3px;
  color:#a0a5af;
}
.coin-transaction-main time{
  display:block;
  margin-top:4px;
  color:#747b87;
  font-size:10px;
}
.coin-transaction-value{text-align:right}
.coin-transaction-value strong{
  display:block;
  font-size:18px;
}
.coin-transaction-row.earn .coin-transaction-value strong{color:#75e4a0}
.coin-transaction-row.spend .coin-transaction-value strong{color:#ff8c8c}
.coin-transaction-value small{
  display:block;
  margin-top:3px;
  color:#8a909a;
  font-size:10px;
}
.coin-transaction-empty{
  text-align:center;
  padding:26px 0 8px;
  color:#858b95;
}
.coin-transaction-empty[hidden]{display:none!important}
.coin-reward-info{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.coin-reward-info h3{margin:0 0 10px}
.coin-reward-info>div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.coin-reward-info span{
  padding:11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.coin-reward-info b{display:block}
.coin-reward-info small{
  display:block;
  margin-top:3px;
  color:#8e949e;
}
.wallet-note{
  margin:16px 0 0;
  text-align:center;
  color:#818893;
  font-size:11px;
}
@media(max-width:700px){
  .wallet-balance-card{grid-template-columns:1fr}
  .wallet-toolbar{align-items:flex-start;flex-direction:column}
  .coin-reward-info>div{grid-template-columns:1fr}
}
@media(max-width:520px){
  .wallet-lifetime{grid-template-columns:1fr}
  .coin-transaction-row{
    grid-template-columns:auto 1fr;
  }
  .coin-transaction-value{
    grid-column:1/-1;
    text-align:left;
    padding-left:50px;
  }
}

/* DOSMOS UNO V3.4.3 — Daily Login Streak */
.login-reward-button{position:relative}
.login-reward-notification{
  position:absolute;
  right:-4px;
  top:-5px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f0c44d;
  color:#17120a;
  border:2px solid #111318;
  font-size:10px;
  font-weight:1000;
}
.login-reward-notification[hidden]{display:none!important}
.login-reward-modal{
  position:fixed;
  inset:0;
  z-index:690;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(8px);
}
.login-reward-modal[hidden]{display:none!important}
.login-reward-dialog{
  width:min(900px,97vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(240,197,79,.42);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 80% 0,rgba(240,197,79,.15),transparent 34%),
    linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 32px 95px rgba(0,0,0,.66);
}
.login-reward-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.login-reward-head small{
  color:#e2c76d;
  font-weight:900;
  letter-spacing:.14em;
}
.login-reward-head h2{
  margin:4px 0 5px;
  font:800 29px "Sora";
}
.login-reward-head p{
  margin:0;
  color:#9da2ac;
}
.login-reward-head>button{
  width:39px;height:39px;
  border-radius:10px;
  border:1px solid #414650;
  background:#20232b;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.login-streak-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:19px;
}
.login-streak-stats>div{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.login-streak-stats small{
  display:block;
  color:#9298a2;
  letter-spacing:.10em;
  font-weight:900;
}
.login-streak-stats strong{
  display:block;
  margin-top:5px;
  color:#efd477;
  font-size:22px;
}
.login-reward-calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:9px;
  margin-top:18px;
}
.login-reward-day{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;
  background:rgba(255,255,255,.022);
  text-align:center;
}
.login-reward-day small{
  color:#858c97;
  font-weight:900;
  letter-spacing:.08em;
}
.login-reward-day>span{font-size:28px}
.login-reward-day b{color:#e7ca6c}
.login-reward-day em{
  color:#a5abb5;
  font-size:11px;
  font-style:normal;
}
.login-reward-day i{
  margin-top:3px;
  border-radius:999px;
  padding:4px 7px;
  background:#252a33;
  color:#808792;
  font-size:8px;
  font-style:normal;
  font-weight:1000;
}
.login-reward-day.next{
  border-color:rgba(240,197,79,.58);
  background:rgba(240,197,79,.09);
  box-shadow:0 0 25px rgba(240,197,79,.13);
}
.login-reward-day.next i{
  background:#e6c15e;
  color:#1a1508;
}
.login-reward-day.claimed{
  border-color:rgba(69,193,116,.38);
  background:rgba(69,193,116,.06);
}
.login-reward-day.claimed i{
  background:rgba(69,193,116,.18);
  color:#80e8a5;
}
.login-claim-btn{
  width:100%;
  margin-top:18px;
  min-height:48px;
}
.login-claim-btn:disabled{
  opacity:.48;
  cursor:not-allowed;
}
.login-reward-note{
  margin:14px 0 0;
  text-align:center;
  color:#858b95;
  font-size:11px;
}

/* Reward claim animation */
.reward-claim-overlay{
  position:fixed;
  inset:0;
  z-index:760;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(5px);
  opacity:0;
}
.reward-claim-overlay[hidden]{display:none!important}
.reward-claim-overlay.active{
  opacity:1;
  animation:rewardOverlayFade 1.8s ease forwards;
}
.reward-claim-card{
  position:relative;
  z-index:3;
  width:min(420px,90vw);
  padding:26px;
  border:1px solid rgba(240,197,79,.62);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(240,197,79,.18),transparent 38%),
    linear-gradient(145deg,#1b1d24,#0b0c10);
  text-align:center;
  box-shadow:0 32px 90px rgba(0,0,0,.68);
  transform:scale(.5) rotate(-8deg);
  animation:rewardCardPop .75s cubic-bezier(.18,.9,.2,1.2) forwards;
}
.reward-claim-icon{
  width:95px;
  height:95px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:50%;
  background:linear-gradient(145deg,#f1d779,#9c6e15);
  font-size:46px;
  box-shadow:0 18px 40px rgba(240,197,79,.22);
}
.reward-claim-card small{
  display:block;
  margin-top:14px;
  color:#ddc36b;
  font-weight:900;
  letter-spacing:.14em;
}
.reward-claim-card h2{
  margin:5px 0 5px;
  font:800 27px "Sora";
}
.reward-claim-card p{
  margin:0;
  color:#a3a8b1;
}
.reward-claim-values{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.reward-claim-values span{
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.04);
  color:#f0d575;
  font-weight:900;
}
.reward-claim-burst{
  position:absolute;
  inset:0;
}
.reward-claim-burst i{
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f0c54e;
  opacity:0;
  animation:rewardBurst .9s ease-out var(--delay) forwards;
}
@keyframes rewardOverlayFade{
  0%{opacity:0}
  12%,78%{opacity:1}
  100%{opacity:0}
}
@keyframes rewardCardPop{
  0%{transform:scale(.45) rotate(-12deg);opacity:0}
  58%{transform:scale(1.10) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes rewardBurst{
  0%{transform:rotate(var(--angle)) translateX(0) scale(.3);opacity:0}
  20%{opacity:1}
  100%{transform:rotate(var(--angle)) translateX(var(--distance)) scale(1.1);opacity:0}
}
@media(max-width:760px){
  .login-reward-calendar{
    grid-template-columns:repeat(2,1fr);
  }
  .login-reward-day:last-child{
    grid-column:1/-1;
  }
}

/* DOSMOS UNO V3.5 — Coin Shop, Inventory & Skins */
.shop-modal,.inventory-modal{
  position:fixed;inset:0;z-index:710;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
}
.shop-modal[hidden],.inventory-modal[hidden]{display:none!important}
.shop-dialog,.inventory-dialog{
  width:min(980px,97vw);max-height:92vh;overflow:auto;
  border:1px solid rgba(240,197,79,.38);border-radius:22px;padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(240,197,79,.13),transparent 34%),
    linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 32px 95px rgba(0,0,0,.66);
}
.shop-head,.inventory-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.shop-head small,.inventory-head small{color:#e1c568;font-weight:900;letter-spacing:.14em}
.shop-head h2,.inventory-head h2{margin:4px 0 4px;font:800 29px "Sora"}
.shop-head p{margin:0;color:#9ba1ab}
.shop-head-actions{display:flex;align-items:center;gap:10px}
.shop-head-actions>span{
  border:1px solid rgba(240,197,79,.35);border-radius:999px;
  padding:8px 11px;color:#efd16e;background:rgba(240,197,79,.08);font-weight:900
}
.shop-head button,.inventory-head button{
  width:39px;height:39px;border-radius:10px;border:1px solid #414650;
  background:#20232b;color:#fff;font-size:25px;cursor:pointer
}
.shop-toolbar{display:flex;justify-content:flex-end;margin-top:17px}
.shop-toolbar label{display:flex;align-items:center;gap:9px;color:#c7cad2;font-size:12px;font-weight:800}
.shop-toolbar select{
  padding:10px 12px;border:1px solid #393e48;border-radius:9px;
  background:#0c0e12;color:#fff;font-weight:700
}
.shop-item-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:17px
}
.shop-item-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(255,255,255,.023)
}
.shop-item-card.owned{border-color:rgba(81,166,255,.32)}
.shop-item-card.equipped{
  border-color:rgba(73,194,117,.48);background:rgba(73,194,117,.06);
  box-shadow:0 0 22px rgba(73,194,117,.08)
}
.shop-item-preview{
  width:60px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:12px;background:#22262e;border:1px solid rgba(255,255,255,.08)
}
.shop-item-preview>span{font-size:30px}
.shop-item-preview small{margin-top:4px;color:#888f9a;font-size:8px;font-weight:900}
.shop-item-main b{display:block}
.shop-item-main p{margin:4px 0;color:#9aa0aa;font-size:11px;line-height:1.45}
.shop-item-meta{display:flex;gap:7px;align-items:center}
.shop-item-meta span{color:#edcf6c;font-size:11px;font-weight:900}
.shop-item-meta em{
  border-radius:999px;padding:3px 6px;background:rgba(75,190,115,.13);
  color:#7de4a0;font-size:8px;font-style:normal;font-weight:1000
}
.shop-action-btn{
  min-width:76px;padding:9px 10px;border-radius:9px;
  border:1px solid rgba(240,197,79,.38);background:rgba(240,197,79,.10);
  color:#efd16f;cursor:pointer;font-weight:900
}
.shop-action-btn:disabled{
  border-color:#39404a;background:#272b33;color:#7f8691;cursor:not-allowed
}
.inventory-item-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px
}
.inventory-item-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  background:rgba(255,255,255,.022)
}
.inventory-item-card.equipped{border-color:rgba(73,194,117,.45);background:rgba(73,194,117,.06)}
.inventory-item-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:10px;
  background:#242831;font-size:23px
}
.inventory-item-card b{display:block}
.inventory-item-card small{display:block;margin-top:3px;color:#8f959f;font-size:9px}
.inventory-item-card button{
  padding:7px 9px;border-radius:8px;border:1px solid rgba(81,166,255,.34);
  background:rgba(81,166,255,.09);color:#9fc9ff;cursor:pointer;font-weight:800
}
.inventory-item-card button:disabled{opacity:.45;cursor:not-allowed}
.shop-note{margin:16px 0 0;text-align:center;color:#858b95;font-size:11px}

/* Card skins */
body[data-card-skin="skin-gold"] .uno-playing-card{
  border-color:#f1d77a!important;
  box-shadow:0 0 0 2px rgba(241,215,122,.25),0 16px 34px rgba(0,0,0,.45)!important
}
body[data-card-skin="skin-gold"] .uno-playing-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.28),transparent 35% 65%,rgba(241,215,122,.18))
}
body[data-card-skin="skin-neon"] .uno-playing-card{
  border-color:#70c8ff!important;
  box-shadow:0 0 0 2px rgba(74,188,255,.25),0 0 22px rgba(74,188,255,.25)!important
}
body[data-card-skin="skin-neon"] .uno-playing-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 18px rgba(72,191,255,.24)
}
body[data-card-skin="skin-dragon"] .uno-playing-card{
  border-color:#d39a47!important;
  background-image:radial-gradient(circle at 20% 20%,rgba(255,177,68,.18),transparent 35%)!important
}
body[data-card-skin="skin-dragon"] .uno-playing-card::after{
  content:"🐉";position:absolute;right:5px;bottom:4px;z-index:8;font-size:12px;opacity:.65
}

/* Table themes */
body[data-table-theme="table-neon"] .game-screen{
  background:
    radial-gradient(circle at 50% 25%,rgba(43,137,255,.22),transparent 32%),
    linear-gradient(160deg,#09101f,#04070d)!important
}
body[data-table-theme="table-lava"] .game-screen{
  background:
    radial-gradient(circle at 50% 25%,rgba(227,73,34,.24),transparent 34%),
    linear-gradient(160deg,#1b0907,#070303)!important
}
body[data-table-theme="table-royal"] .game-screen{
  background:
    radial-gradient(circle at 50% 20%,rgba(232,190,70,.20),transparent 34%),
    linear-gradient(160deg,#1d1607,#080603)!important
}

/* Avatar frames */
.frame-gold{box-shadow:0 0 0 3px #e0bd55,0 0 18px rgba(224,189,85,.45)!important}
.frame-ranked{box-shadow:0 0 0 3px #67a7ff,0 0 18px rgba(103,167,255,.45)!important}
.frame-legend{box-shadow:0 0 0 3px #b580ff,0 0 22px rgba(181,128,255,.55)!important}

@media(max-width:760px){
  .shop-item-list{grid-template-columns:1fr}
  .inventory-item-list{grid-template-columns:1fr}
  .shop-item-card{grid-template-columns:auto 1fr}
  .shop-action-btn{grid-column:1/-1;width:100%}
}

/* DOSMOS UNO V3.6 — Chat & Advanced Reactions */
.chat-head-button{position:relative}
.chat-unread-badge{
  position:absolute;
  right:-5px;
  top:-5px;
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#e83b43;
  color:#fff;
  border:2px solid #111318;
  font-size:9px;
  font-weight:1000;
}
.chat-unread-badge[hidden]{display:none!important}
.chat-panel{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:720;
  width:min(390px,calc(100vw - 36px));
  max-height:min(650px,82vh);
  display:grid;
  grid-template-rows:auto auto minmax(180px,1fr) auto;
  border:1px solid rgba(93,157,255,.34);
  border-radius:18px;
  background:linear-gradient(145deg,#171920,#090a0d);
  box-shadow:0 28px 80px rgba(0,0,0,.58);
  overflow:hidden;
}
.chat-panel[hidden]{display:none!important}
.chat-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-panel-head small{
  color:#7eb8ff;
  font-weight:900;
  letter-spacing:.12em;
}
.chat-panel-head h3{margin:2px 0 0;font-size:17px}
.chat-panel-head>div:last-child{display:flex;gap:6px}
.chat-panel-head button{
  width:34px;height:34px;
  border-radius:9px;
  border:1px solid #3a404a;
  background:#20242c;
  color:#fff;
  cursor:pointer;
}
.quick-chat-bar{
  display:flex;
  gap:6px;
  padding:10px 12px;
  overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.quick-chat-bar button{
  flex:0 0 auto;
  border:1px solid rgba(93,157,255,.28);
  border-radius:999px;
  padding:6px 9px;
  background:rgba(93,157,255,.07);
  color:#a9ceff;
  cursor:pointer;
  font-size:10px;
  font-weight:800;
}
.chat-message-list{
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-message{
  max-width:86%;
  align-self:flex-start;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px 12px 12px 4px;
  background:rgba(255,255,255,.035);
}
.chat-message.mine{
  align-self:flex-end;
  border-radius:12px 12px 4px 12px;
  border-color:rgba(79,151,255,.28);
  background:rgba(79,151,255,.09);
}
.chat-message.quick{
  border-color:rgba(240,197,79,.28);
  background:rgba(240,197,79,.07);
}
.chat-message-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-message-head b{font-size:11px;color:#d7dae1}
.chat-message-head time{font-size:8px;color:#777e89}
.chat-message p{
  margin:4px 0 0;
  color:#f0f2f5;
  font-size:12px;
  line-height:1.45;
  word-break:break-word;
}
.chat-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:11px;
  border-top:1px solid rgba(255,255,255,.08);
}
.chat-compose input{
  min-width:0;
  padding:11px 12px;
  border:1px solid #373d47;
  border-radius:10px;
  background:#0a0c10;
  color:#fff;
}
.chat-compose button{
  padding:10px 14px;
  border:1px solid rgba(79,151,255,.40);
  border-radius:10px;
  background:linear-gradient(135deg,#4a96ef,#285ba5);
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
.reaction-bar{
  max-width:330px;
}
@media(max-width:760px){
  .chat-panel{
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
    max-height:78vh;
  }
}

/* DOSMOS UNO V3.7 — Spectator Mode & Room Privacy */
.spectator-entry-box{
  margin-top:18px;
  padding:17px;
  border:1px solid rgba(109,170,255,.25);
  border-radius:15px;
  background:rgba(70,127,214,.055);
}
.spectator-entry-box small{
  color:#83baff;
  font-weight:900;
  letter-spacing:.12em;
}
.spectator-entry-box h3{margin:3px 0 4px}
.spectator-entry-box p{margin:0;color:#9299a4;font-size:12px}
.spectator-entry-form{
  display:grid;
  grid-template-columns:1fr .7fr 1fr auto;
  gap:9px;
  margin-top:13px;
}
.spectator-entry-form input{
  min-width:0;
  padding:11px 12px;
  border:1px solid #373d47;
  border-radius:9px;
  background:#0a0c10;
  color:#fff;
}
.spectator-mode-banner{
  margin:8px auto 10px;
  max-width:760px;
  padding:9px 12px;
  border:1px solid rgba(102,161,255,.36);
  border-radius:999px;
  background:rgba(102,161,255,.09);
  color:#9bc6ff;
  text-align:center;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}
.spectator-mode-banner[hidden]{display:none!important}
.spectator-summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:8px 0;
}
.spectator-summary>span{
  border:1px solid rgba(102,161,255,.26);
  border-radius:999px;
  padding:6px 9px;
  background:rgba(102,161,255,.06);
  color:#a9ceff;
  font-size:10px;
}
.spectator-summary>span[hidden]{display:none!important}
.spectator-list{
  max-width:520px;
  margin:0 auto 10px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.spectator-list-row{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  padding:5px 8px;
  background:rgba(255,255,255,.025);
  color:#b8bdc6;
  font-size:10px;
}
.spectator-hand-placeholder{
  min-height:100px;
  width:100%;
  display:grid;
  place-items:center;
  color:#89b9f3;
  border:1px dashed rgba(102,161,255,.28);
  border-radius:14px;
  background:rgba(102,161,255,.04);
  font-weight:900;
}
.spectator-mode #drawPile,
.spectator-mode #unoCallBtn,
.spectator-mode #playSelectedBtn,
.spectator-mode #passAfterDrawBtn,
.spectator-mode .multi-play-bar{
  pointer-events:none!important;
  opacity:.35!important;
}
.spectator-mode .my-hand .uno-playing-card{display:none!important}
.public-room-actions{
  display:flex;
  gap:7px;
}
.public-room-actions .uno-btn{min-width:92px}
.room-settings-grid input{
  width:100%;
  padding:11px 12px;
  border:1px solid #343841;
  border-radius:10px;
  color:#fff;
  background:#0b0d11;
  font:700 14px Inter;
}
@media(max-width:820px){
  .spectator-entry-form{grid-template-columns:1fr 1fr}
  .spectator-entry-form .uno-btn{grid-column:1/-1}
  .public-room-actions{width:100%}
  .public-room-actions .uno-btn{flex:1}
}
@media(max-width:520px){
  .spectator-entry-form{grid-template-columns:1fr}
  .spectator-entry-form .uno-btn{grid-column:auto}
}

.spectator-list.collapsed{display:none!important}

/* =========================================================
   DOSMOS UNO V4.0 — MOBILE UI REWORK
   Desktop styles remain unchanged above 768px.
   ========================================================= */

:root{
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-nav-height: 68px;
  --mobile-vh: 1vh;
}

.mobile-bottom-nav,
.mobile-sheet-backdrop,
.mobile-more-sheet,
.mobile-game-actions{
  display:none;
}

@media (max-width:768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.uno-mobile-layout{
    padding-bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 14px);
    background:#05070b;
  }

  body.uno-mobile-layout.mobile-sheet-active{
    overflow:hidden;
    touch-action:none;
  }

  /* Header */
  .uno-header{
    min-height:58px;
    padding:calc(7px + var(--mobile-safe-top)) 10px 7px;
    gap:7px;
    position:sticky;
    top:0;
    z-index:180;
    backdrop-filter:blur(16px);
    background:rgba(7,9,13,.94);
  }

  .uno-brand img,
  .uno-logo{
    max-height:34px!important;
    max-width:120px!important;
  }

  .uno-header-tools{
    gap:5px!important;
  }

  .uno-header .profile-button,
  .uno-header .wallet-head-button,
  .uno-header .head-tool:not(#rulesBtn){
    display:none!important;
  }

  .uno-header #rulesBtn,
  .uno-header .sound-btn,
  .uno-header .mute-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }

  /* Main content */
  .uno-container,
  .game-shell,
  .uno-page{
    width:100%!important;
    max-width:none!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .uno-panel,
  .matchmaking-panel,
  .lobby-screen,
  .waiting-screen,
  .game-screen{
    border-radius:14px!important;
    padding:12px!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Lobby and matchmaking become single column */
  .matchmaking-head,
  .room-settings-head,
  .waiting-head,
  .game-topbar{
    align-items:flex-start!important;
  }

  .matchmaking-head h2,
  .profile-dialog-head h2,
  .shop-head h2,
  .daily-mission-head h2,
  .login-reward-head h2,
  .wallet-head h2{
    font-size:22px!important;
  }

  .quick-match-box,
  .spectator-entry-form,
  .room-settings-grid,
  .profile-editor-grid{
    grid-template-columns:1fr!important;
  }

  .public-room-card{
    padding:11px!important;
    gap:10px!important;
  }

  .public-room-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }

  /* Waiting room */
  .waiting-players{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .waiting-player{
    min-width:0!important;
    padding:10px 7px!important;
  }

  .waiting-player .avatar{
    width:42px!important;
    height:42px!important;
  }

  .waiting-actions{
    position:sticky;
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 8px);
    z-index:80;
    padding:8px;
    border-radius:13px;
    background:rgba(8,10,14,.95);
    box-shadow:0 -8px 30px rgba(0,0,0,.42);
  }

  .waiting-actions .uno-btn{
    min-height:48px!important;
    font-size:13px!important;
  }

  /* Game table mobile hierarchy */
  .game-screen{
    min-height:calc(var(--mobile-vh,1vh) * 100 - 76px);
    padding-bottom:14px!important;
  }

  .game-topbar{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:7px!important;
  }

  .game-top-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }

  .game-top-actions .mini-btn{
    min-height:34px!important;
    padding:6px 8px!important;
    font-size:10px!important;
  }

  .game-status-center{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "round timer"
      "turn timer"!important;
    align-items:center!important;
    gap:3px 8px!important;
    padding:8px!important;
    border-radius:12px!important;
  }

  .round-indicator{grid-area:round}
  .turn-label{
    grid-area:turn;
    font-size:12px!important;
    line-height:1.2!important;
  }

  .turn-timer-ring{
    grid-area:timer!important;
    width:48px!important;
    height:48px!important;
  }

  /* Opponents */
  .opponents{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:9px 0!important;
  }

  .opponent{
    min-width:0!important;
    padding:7px 5px!important;
    border-radius:10px!important;
  }

  .opponent .avatar{
    width:34px!important;
    height:34px!important;
    font-size:12px!important;
  }

  .opponent b{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px!important;
  }

  .opponent small{
    font-size:8px!important;
  }

  /* Table center */
  .table-center,
  .game-table-center{
    min-height:210px!important;
    padding:10px 4px!important;
    gap:16px!important;
  }

  .draw-pile,
  .discard-pile,
  .card-stack{
    width:82px!important;
    height:116px!important;
  }

  .discard-card,
  .top-card{
    width:82px!important;
    height:116px!important;
  }

  .active-color-indicator{
    transform:scale(.82);
  }

  /* Hand becomes roomy horizontal scroller */
  .my-hand{
    width:calc(100vw - 16px)!important;
    min-height:170px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    justify-content:flex-start!important;
    align-items:flex-end!important;
    gap:0!important;
    padding:38px 18px 18px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }

  .my-hand::-webkit-scrollbar{display:none}

  .my-hand .uno-playing-card{
    flex:0 0 76px!important;
    width:76px!important;
    height:108px!important;
    margin-left:-18px!important;
    scroll-snap-align:center;
    transform:translateY(var(--fan-y,0px)) rotate(0deg)!important;
    transition:.18s transform,.18s filter,.18s box-shadow!important;
  }

  .my-hand .uno-playing-card:first-child{
    margin-left:0!important;
  }

  .my-hand .uno-playing-card.selected{
    transform:translateY(-26px) scale(1.06)!important;
  }

  .my-hand .uno-playing-card.playable:active{
    transform:translateY(-18px) scale(1.03)!important;
  }

  .uno-playing-card .card-center,
  .uno-playing-card .center-symbol{
    transform:scale(.85);
  }

  /* Large mobile action bar */
  .mobile-game-actions{
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    position:sticky;
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 8px);
    z-index:110;
    width:100%;
    padding:8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(8,10,14,.96);
    box-shadow:0 -10px 35px rgba(0,0,0,.48);
  }

  .mobile-game-actions button{
    min-height:50px;
    border:1px solid rgba(216,180,73,.35);
    border-radius:11px;
    background:linear-gradient(145deg,#2b2415,#151109);
    color:#f1d777;
    font-weight:1000;
    letter-spacing:.05em;
  }

  .mobile-game-actions button:nth-child(2){
    border-color:rgba(93,157,255,.38);
    background:linear-gradient(145deg,#18345c,#0b182c);
    color:#a6ceff;
  }

  .mobile-game-actions button:nth-child(3){
    border-color:rgba(76,193,119,.40);
    background:linear-gradient(145deg,#17452a,#0b2416);
    color:#8ce8ab;
  }

  /* Hide duplicated small controls on mobile */
  #unoCallBtn,
  .uno-call-btn{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .multi-play-bar{
    margin-top:7px!important;
    padding:9px!important;
    gap:8px!important;
  }

  .multi-play-actions{
    width:100%!important;
  }

  .multi-play-actions .uno-btn{
    min-height:42px!important;
  }

  /* Compact secondary sections; open as sheets instead */
  .scoreboard-panel,
  .security-panel,
  .action-log-panel,
  .room-settings-panel{
    display:none;
  }

  .scoreboard-panel.mobile-sheet-open,
  .security-panel.mobile-sheet-open,
  .action-log-panel.mobile-sheet-open,
  .room-settings-panel.mobile-sheet-open{
    display:block!important;
  }

  /* Bottom navigation */
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:550;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    height:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    padding:6px 4px calc(6px + var(--mobile-safe-bottom));
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(7,9,13,.97);
    backdrop-filter:blur(18px);
    box-shadow:0 -12px 35px rgba(0,0,0,.45);
  }

  .mobile-nav-btn{
    min-width:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#89909b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
  }

  .mobile-nav-btn>span{
    font-size:19px;
    line-height:1;
  }

  .mobile-nav-btn small{
    font-size:8px;
    font-weight:800;
  }

  .mobile-nav-btn.active{
    color:#efd473;
    background:rgba(216,180,73,.10);
  }

  /* backdrop + generic sheet behavior */
  .mobile-sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:580;
    display:none;
    background:rgba(0,0,0,.56);
    backdrop-filter:blur(2px);
  }

  body.mobile-sheet-active .mobile-sheet-backdrop{
    display:block;
  }

  .mobile-sheet-target{
    transition:.28s transform,.28s opacity!important;
  }

  /* existing fixed modals become full mobile sheets */
  .mobile-sheet-target.mobile-sheet-open{
    display:block!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    z-index:600!important;
    width:100%!important;
    max-width:none!important;
    height:min(88vh,calc(var(--mobile-vh,1vh) * 88))!important;
    max-height:none!important;
    margin:0!important;
    padding:10px!important;
    border-radius:22px 22px 0 0!important;
    overflow:auto!important;
    background:#0b0d12!important;
    transform:translateY(0)!important;
    opacity:1!important;
    box-shadow:0 -22px 70px rgba(0,0,0,.66)!important;
  }

  .profile-modal.mobile-sheet-open,
  .wallet-modal.mobile-sheet-open,
  .login-reward-modal.mobile-sheet-open,
  .shop-modal.mobile-sheet-open,
  .inventory-modal.mobile-sheet-open,
  .daily-mission-modal.mobile-sheet-open{
    display:flex!important;
    align-items:flex-end!important;
    padding:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }

  .profile-modal.mobile-sheet-open .profile-dialog,
  .wallet-modal.mobile-sheet-open .wallet-dialog,
  .login-reward-modal.mobile-sheet-open .login-reward-dialog,
  .shop-modal.mobile-sheet-open .shop-dialog,
  .inventory-modal.mobile-sheet-open .inventory-dialog,
  .daily-mission-modal.mobile-sheet-open .daily-mission-dialog{
    width:100%!important;
    height:min(88vh,calc(var(--mobile-vh,1vh) * 88))!important;
    max-height:none!important;
    margin:0!important;
    padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important;
    overflow:auto!important;
  }

  .chat-panel.mobile-sheet-open{
    display:grid!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:min(76vh,calc(var(--mobile-vh,1vh) * 76))!important;
    max-height:none!important;
    border-radius:22px 22px 0 0!important;
    z-index:620!important;
  }

  /* More sheet */
  .mobile-more-sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:610;
    display:block;
    padding:10px 12px calc(18px + var(--mobile-safe-bottom));
    border-radius:22px 22px 0 0;
    background:#0b0d12;
    transform:translateY(105%);
    opacity:0;
    pointer-events:none;
    transition:.28s transform,.28s opacity;
  }

  .mobile-more-sheet.mobile-sheet-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .mobile-sheet-handle{
    width:44px;
    height:4px;
    margin:0 auto 12px;
    border-radius:999px;
    background:#3b4049;
  }

  .mobile-sheet-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .mobile-sheet-title small{
    color:#d8bd67;
    font-weight:900;
    letter-spacing:.12em;
  }

  .mobile-sheet-title h3{
    margin:3px 0 0;
  }

  .mobile-sheet-title button{
    width:38px;
    height:38px;
    border:1px solid #3b4049;
    border-radius:10px;
    background:#20242c;
    color:#fff;
    font-size:24px;
  }

  .mobile-more-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:15px;
  }

  .mobile-more-grid button{
    min-height:88px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.03);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:25px;
  }

  .mobile-more-grid button span{
    font-size:11px;
    font-weight:800;
  }

  /* Modal content density */
  .profile-stats{
    grid-template-columns:repeat(3,1fr)!important;
  }

  .profile-rank-section,
  .wallet-balance-card,
  .summary-player{
    grid-template-columns:1fr!important;
  }

  .shop-item-list,
  .inventory-item-list,
  .login-reward-calendar,
  .daily-mission-list{
    grid-template-columns:1fr!important;
  }

  .login-reward-calendar{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
  }

  .daily-mission-card,
  .shop-item-card{
    grid-template-columns:auto 1fr!important;
  }

  .daily-mission-card .mission-claim-btn,
  .shop-item-card .shop-action-btn{
    grid-column:1/-1!important;
    width:100%!important;
    min-height:44px!important;
  }

  /* Mobile spectator */
  .spectator-summary{
    margin:5px 0!important;
  }

  /* Toasts above bottom nav */
  .toast-container,
  #toastContainer{
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 12px)!important;
  }
}

/* Short landscape mode */
@media (max-width:900px) and (orientation:landscape){
  body.uno-mobile-layout{
    --mobile-nav-height:54px;
  }

  .uno-header{
    min-height:46px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .game-screen{
    min-height:calc(var(--mobile-vh,1vh) * 100 - 52px)!important;
  }

  .opponents{
    grid-template-columns:repeat(3,1fr)!important;
    margin:4px 0!important;
  }

  .opponent{
    padding:4px!important;
  }

  .opponent .avatar{
    width:28px!important;
    height:28px!important;
  }

  .table-center,
  .game-table-center{
    min-height:130px!important;
    padding:3px!important;
  }

  .draw-pile,
  .discard-pile,
  .card-stack,
  .discard-card,
  .top-card{
    width:66px!important;
    height:94px!important;
  }

  .my-hand{
    min-height:126px!important;
    padding-top:26px!important;
    padding-bottom:8px!important;
  }

  .my-hand .uno-playing-card{
    width:64px!important;
    height:91px!important;
    flex-basis:64px!important;
  }

  .mobile-game-actions{
    position:fixed!important;
    right:8px!important;
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 6px)!important;
    width:126px!important;
    grid-template-columns:1fr!important;
    padding:6px!important;
  }

  .mobile-game-actions button{
    min-height:34px!important;
    font-size:10px!important;
  }
}

/* DOSMOS UNO V4.1 — Tournament Mode */
.tournament-panel{margin:16px 0;padding:17px;border:1px solid rgba(239,199,84,.30);border-radius:16px;background:radial-gradient(circle at 92% 0,rgba(239,199,84,.10),transparent 32%),rgba(255,255,255,.02)}
.tournament-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.tournament-panel-head small{color:#e3c46a;font-weight:900;letter-spacing:.13em}
.tournament-panel-head h3{margin:3px 0 4px;font-size:21px}
.tournament-panel-head p{margin:0;color:#9298a3;font-size:11px}
.tournament-status{border:1px solid #424852;border-radius:999px;padding:6px 9px;color:#9da3ae;font-size:9px;font-weight:1000}
.tournament-status.active{color:#80e6a3;border-color:rgba(76,195,118,.42);background:rgba(76,195,118,.08)}
.tournament-status.completed{color:#efd06d;border-color:rgba(239,199,84,.44);background:rgba(239,199,84,.08)}
.tournament-setup{margin-top:15px}
.tournament-setup-grid{display:grid;grid-template-columns:1fr 180px;gap:10px}
.tournament-setup label,.tournament-player-inputs label{display:flex;flex-direction:column;gap:6px}
.tournament-setup label span,.tournament-player-inputs label span{color:#c7cad2;font-size:10px;font-weight:800}
.tournament-setup input,.tournament-setup select,.tournament-player-inputs input{width:100%;padding:10px 11px;border:1px solid #363b45;border-radius:9px;background:#0a0c10;color:#fff}
.tournament-player-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:11px 0}
.tournament-bracket{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;margin-top:16px;overflow-x:auto;padding:3px 2px 10px}
.bracket-round{display:flex;flex-direction:column;justify-content:space-around;gap:12px;min-width:220px}
.bracket-round h4{margin:0;color:#d8bb62;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bracket-match{padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0c0e13}
.bracket-match.live{border-color:rgba(232,62,68,.55);box-shadow:0 0 20px rgba(232,62,68,.12)}
.bracket-match.completed{border-color:rgba(75,191,115,.34)}
.bracket-match.selected{outline:2px solid rgba(239,199,84,.38)}
.bracket-match-code{margin-bottom:6px;color:#737a86;font-size:8px;font-weight:900}
.bracket-player{width:100%;display:grid;grid-template-columns:27px 1fr;align-items:center;gap:7px;min-height:37px;margin-top:5px;padding:5px 8px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025);color:#dfe2e7;text-align:left}
.bracket-player span{width:23px;height:23px;display:grid;place-items:center;border-radius:6px;background:#242832;color:#9da4af;font-size:9px}
.bracket-player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.bracket-player.winner{border-color:rgba(75,191,115,.42);background:rgba(75,191,115,.09);color:#80e6a3}
.bracket-match-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.bracket-match-actions span{color:#818894;font-size:8px;font-weight:900}
.bracket-match-actions button{padding:6px 8px;border:1px solid rgba(239,199,84,.38);border-radius:7px;background:rgba(239,199,84,.08);color:#efd06d;font-size:9px;font-weight:900}
.tournament-champion{display:flex;justify-content:center;align-items:center;gap:11px;margin-top:14px;padding:14px;border:1px solid rgba(239,199,84,.43);border-radius:13px;background:rgba(239,199,84,.07)}
.tournament-champion>span{font-size:35px}
.tournament-champion small{display:block;color:#bca85f;font-size:8px;font-weight:900}
.tournament-champion strong{display:block;margin-top:3px;color:#f0d270;font-size:18px}
.tournament-reset{margin-top:10px}
@media(max-width:768px){
 .tournament-panel{padding:13px}
 .tournament-panel-head{flex-direction:column}
 .tournament-setup-grid{grid-template-columns:1fr}
 .tournament-player-inputs{grid-template-columns:repeat(2,1fr)}
 .tournament-bracket{grid-auto-columns:86vw;scroll-snap-type:x mandatory}
 .bracket-round{scroll-snap-align:start}
}

/* DOSMOS UNO V4.2.1 — Add Friend */
.friends-head-button{position:relative}
.friend-unread-badge{
  position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;
  display:grid;place-items:center;border-radius:999px;background:#e83b43;color:#fff;
  border:2px solid #111318;font-size:9px;font-weight:1000
}
.friend-unread-badge[hidden]{display:none!important}
.friends-modal{
  position:fixed;inset:0;z-index:730;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.friends-modal[hidden]{display:none!important}
.friends-dialog{
  width:min(900px,97vw);max-height:92vh;overflow:auto;
  border:1px solid rgba(96,159,255,.36);border-radius:22px;padding:23px;
  background:radial-gradient(circle at 90% 0,rgba(72,133,228,.13),transparent 34%),linear-gradient(145deg,#181a21,#090a0d);
  box-shadow:0 32px 95px rgba(0,0,0,.66)
}
.friends-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.friends-head small,.friend-section-head small{color:#82baff;font-weight:900;letter-spacing:.13em}
.friends-head h2{margin:4px 0 3px;font:800 29px "Sora"}
.friends-head p{margin:0;color:#969ca6;font-size:12px}
.friends-head-actions{display:flex;align-items:center;gap:8px}
.friends-realtime-status{
  border:1px solid #3b414b;border-radius:999px;padding:6px 9px;color:#9299a4;
  font-size:8px;font-weight:1000
}
.friends-realtime-status.online{
  color:#7fe3a2;border-color:rgba(72,190,113,.42);background:rgba(72,190,113,.08)
}
.friends-head-actions>button{
  width:39px;height:39px;border-radius:10px;border:1px solid #414650;
  background:#20232b;color:#fff;font-size:25px;cursor:pointer
}
.friend-search-section,.friend-request-section,.friends-list-section,.blocked-player-section{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)
}
.friend-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.friend-section-head h3{margin:3px 0 0}
.friend-search-section>input{
  width:100%;margin-top:11px;padding:12px 13px;border:1px solid #373d47;
  border-radius:10px;background:#0a0c10;color:#fff;font:700 14px Inter
}
.friend-search-results,.friend-request-list,.friends-list{display:grid;gap:8px;margin-top:10px}
.friend-search-card,.friend-request-card,.friend-list-card{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:11px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:rgba(255,255,255,.023)
}
.friend-list-card.online{border-left:4px solid #48be71}
.friend-list-card.offline{opacity:.64}
.friend-list-card.favorite{border-color:rgba(239,199,84,.35);background:rgba(239,199,84,.05)}
.friend-avatar{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#78b9ff,#2b609d);color:#07111c;font-weight:1000
}
.friend-card-main b{display:block}
.friend-card-main small{display:block;margin-top:3px;color:#8f959f;font-size:10px}
.friend-add-btn,.friend-request-actions button,.friend-list-actions button,.friend-block-btn{
  min-height:34px;border-radius:8px;cursor:pointer;font-weight:900
}
.friend-add-btn{
  min-width:76px;padding:7px 9px;border:1px solid rgba(76,194,117,.38);
  background:rgba(76,194,117,.09);color:#83e5a4
}
.friend-add-btn:disabled{border-color:#3a4049;background:#272b32;color:#7c838e;cursor:not-allowed}
.friend-block-btn{
  width:35px;border:1px solid rgba(229,91,91,.28);background:rgba(229,91,91,.07);color:#ff9696
}
.friend-request-actions,.friend-list-actions{display:flex;gap:6px}
.friend-request-actions button{padding:7px 9px}
.friend-request-actions .accept{border:1px solid rgba(76,194,117,.38);background:rgba(76,194,117,.09);color:#83e5a4}
.friend-request-actions .reject{border:1px solid rgba(229,91,91,.30);background:rgba(229,91,91,.08);color:#ff9696}
.friend-list-actions button{
  width:35px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#c9cdd5
}
.friends-empty{text-align:center;padding:18px 0 5px;color:#828994}
.friends-empty[hidden]{display:none!important}
.blocked-player-section summary{cursor:pointer;color:#b8bdc6;font-weight:800}
.blocked-player-list{display:grid;gap:7px;margin-top:10px}
.blocked-player-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:9px;border:1px solid rgba(255,255,255,.06);border-radius:9px
}
.blocked-player-row button{
  padding:6px 8px;border:1px solid rgba(96,159,255,.30);border-radius:7px;
  background:rgba(96,159,255,.07);color:#9fcaff
}
.friends-note{margin:16px 0 0;text-align:center;color:#818893;font-size:11px}

@media(max-width:768px){
  .friends-modal.mobile-sheet-open{
    display:flex!important;align-items:flex-end!important;padding:0!important;background:transparent!important
  }
  .friends-modal.mobile-sheet-open .friends-dialog{
    width:100%!important;height:min(88vh,calc(var(--mobile-vh,1vh)*88))!important;
    max-height:none!important;margin:0!important;padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important;overflow:auto!important
  }
  .friend-search-card,.friend-request-card,.friend-list-card{
    grid-template-columns:auto 1fr
  }
  .friend-add-btn,.friend-block-btn,.friend-request-actions,.friend-list-actions{
    grid-column:1/-1;width:100%
  }
  .friend-request-actions button,.friend-list-actions button{flex:1}
}

/* DOSMOS UNO V4.2.2 — Friend Request Pro */
.friend-outgoing-section,.friend-notification-section{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)
}
.friend-outgoing-count{
  border:1px solid rgba(102,161,255,.28);
  border-radius:999px;padding:5px 8px;
  background:rgba(102,161,255,.06);
  color:#9fc8ff;font-size:9px;font-weight:900
}
.friend-outgoing-list,.friend-notification-list{display:grid;gap:8px;margin-top:10px}
.friend-outgoing-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:rgba(255,255,255,.023)
}
.friend-outgoing-card>button{
  padding:8px 10px;border:1px solid rgba(230,91,91,.32);
  border-radius:8px;background:rgba(230,91,91,.08);
  color:#ff9999;cursor:pointer;font-weight:900
}
.friend-notification-tools{display:flex;align-items:center;gap:8px}
.friend-notification-tools>span{
  color:#969da8;font-size:9px
}
.friend-notification-row{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:10px;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;background:rgba(255,255,255,.022)
}
.friend-notification-row.unread{
  border-color:rgba(102,161,255,.34);
  background:rgba(102,161,255,.06)
}
.friend-notification-row>span{font-size:22px}
.friend-notification-row b{display:block;font-size:11px}
.friend-notification-row small{display:block;margin-top:3px;color:#808792;font-size:9px}

.friend-accepted-overlay{
  position:fixed;inset:0;z-index:790;
  display:grid;place-items:center;
  background:rgba(0,0,0,.74);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none
}
.friend-accepted-overlay[hidden]{display:none!important}
.friend-accepted-overlay.active{
  opacity:1;
  animation:friendAcceptedFade 1.8s ease forwards
}
.friend-accepted-card{
  width:min(390px,90vw);padding:27px;
  border:1px solid rgba(94,165,255,.56);
  border-radius:22px;
  background:radial-gradient(circle at 50% 0,rgba(94,165,255,.19),transparent 38%),linear-gradient(145deg,#1a1d25,#0a0c10);
  text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.65);
  animation:friendAcceptedPop .65s cubic-bezier(.18,.9,.2,1.2) forwards
}
.friend-accepted-card>span{display:block;font-size:64px}
.friend-accepted-card small{
  display:block;margin-top:10px;color:#8fc2ff;
  font-weight:900;letter-spacing:.14em
}
.friend-accepted-card h2{margin:5px 0 4px;font:800 27px "Sora"}
.friend-accepted-card p{margin:0;color:#a2a8b1}
@keyframes friendAcceptedFade{
  0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}
}
@keyframes friendAcceptedPop{
  0%{transform:scale(.45) rotate(-8deg);opacity:0}
  65%{transform:scale(1.08) rotate(2deg);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@media(max-width:768px){
  .friend-outgoing-card{grid-template-columns:auto 1fr}
  .friend-outgoing-card>button{grid-column:1/-1;width:100%}
  .friend-notification-tools{align-items:flex-end;flex-direction:column}
}

/* DOSMOS UNO V4.2.3 — Invite Friend to Room */
.room-invite-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08)
}
.room-invite-count{
  border:1px solid rgba(76,194,117,.30);
  border-radius:999px;
  padding:5px 8px;
  background:rgba(76,194,117,.07);
  color:#82e3a3;
  font-size:9px
}
.incoming-room-invite-list{display:grid;gap:8px;margin-top:10px}
.room-invite-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:11px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(76,194,117,.30);
  border-radius:12px;
  background:rgba(76,194,117,.055)
}
.room-invite-card time{
  display:block;
  margin-top:4px;
  color:#e2c96e;
  font-size:9px
}
.room-invite-actions{display:flex;gap:6px}
.room-invite-actions button{
  min-height:35px;
  padding:7px 10px;
  border-radius:8px;
  font-weight:900;
  cursor:pointer
}
.room-invite-actions .accept{
  border:1px solid rgba(76,194,117,.40);
  background:rgba(76,194,117,.12);
  color:#82e4a3
}
.room-invite-actions .reject{
  border:1px solid rgba(232,89,89,.32);
  background:rgba(232,89,89,.08);
  color:#ff9999
}
.friend-invite-btn:disabled{
  opacity:.35;
  cursor:not-allowed!important
}

.room-invite-popup{
  position:fixed;
  inset:0;
  z-index:810;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(6px)
}
.room-invite-popup[hidden]{display:none!important}
.room-invite-popup-card{
  position:relative;
  width:min(430px,92vw);
  padding:28px;
  border:1px solid rgba(76,194,117,.50);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(76,194,117,.16),transparent 38%),
    linear-gradient(145deg,#191c23,#0a0c10);
  text-align:center;
  box-shadow:0 34px 100px rgba(0,0,0,.70);
  animation:roomInvitePop .55s cubic-bezier(.18,.9,.2,1.2)
}
.room-invite-popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:1px solid #3d434d;
  border-radius:9px;
  background:#22262e;
  color:#fff;
  font-size:23px;
  cursor:pointer
}
.room-invite-popup-icon{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:50%;
  background:linear-gradient(145deg,#70d59a,#267249);
  font-size:42px;
  box-shadow:0 18px 42px rgba(76,194,117,.22)
}
.room-invite-popup-card small{
  display:block;
  margin-top:14px;
  color:#82e3a3;
  font-weight:900;
  letter-spacing:.14em
}
.room-invite-popup-card h2{
  margin:6px 0 5px;
  font:800 25px "Sora"
}
.room-invite-popup-card p{
  margin:0;
  color:#9ea4ad
}
.room-invite-popup-actions{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:9px;
  margin-top:18px
}
.room-invite-popup-actions button{
  min-height:44px;
  border-radius:10px;
  font-weight:1000;
  cursor:pointer
}
.room-invite-popup-actions .accept{
  border:1px solid rgba(76,194,117,.45);
  background:linear-gradient(135deg,#49bd75,#247247);
  color:#fff
}
.room-invite-popup-actions .reject{
  border:1px solid #444a54;
  background:#242831;
  color:#c1c6cf
}
@keyframes roomInvitePop{
  0%{transform:scale(.55) translateY(35px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@media(max-width:768px){
  .room-invite-card{
    grid-template-columns:auto 1fr
  }
  .room-invite-actions{
    grid-column:1/-1;
    width:100%
  }
  .room-invite-actions button{flex:1}
  .room-invite-popup-actions{grid-template-columns:1fr}
}

/* DOSMOS UNO V4.2.4 — Friend Profile & Activity */
.friend-profile-open{
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer
}
.friend-profile-open:hover b{color:#9fc8ff}

.friend-profile-modal{
  position:fixed;inset:0;z-index:825;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(7px)
}
.friend-profile-modal[hidden]{display:none!important}
.friend-profile-dialog{
  width:min(670px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(92,159,255,.38);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(77,139,236,.16),transparent 35%),
    linear-gradient(145deg,#181b23,#090b0f);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.friend-profile-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px
}
.friend-profile-head small{
  color:#85bbff;font-weight:900;letter-spacing:.13em
}
.friend-profile-head h2{
  margin:4px 0 0;font:800 29px "Sora"
}
.friend-profile-head>button{
  width:39px;height:39px;border:1px solid #414751;border-radius:10px;
  background:#22262e;color:#fff;font-size:25px;cursor:pointer
}
.friend-profile-hero{
  display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:center;
  margin-top:19px;padding:17px;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;background:rgba(255,255,255,.025)
}
.friend-profile-avatar{
  width:92px;height:92px;display:grid;place-items:center;border-radius:27px;
  background:linear-gradient(145deg,#efcf6d,#8b6418);
  color:#171106;font:1000 34px Inter;
  box-shadow:0 18px 40px rgba(0,0,0,.34)
}
.friend-profile-avatar.blue{background:linear-gradient(145deg,#80c1ff,#2d659f);color:#07111c}
.friend-profile-avatar.red{background:linear-gradient(145deg,#ff8989,#9e2f36);color:#1a0708}
.friend-profile-avatar.green{background:linear-gradient(145deg,#7ce0a0,#2b8150);color:#07150c}
.friend-profile-avatar.purple{background:linear-gradient(145deg,#c092ff,#7444b0);color:#10071a}
.friend-profile-status{
  display:inline-flex;align-items:center;
  border:1px solid #414751;border-radius:999px;
  padding:6px 9px;color:#999fa9;font-size:9px;font-weight:1000
}
.friend-profile-status.online,.friend-profile-status.room{
  color:#83e3a4;border-color:rgba(76,194,117,.38);background:rgba(76,194,117,.08)
}
.friend-profile-status.playing{
  color:#9fcaff;border-color:rgba(92,159,255,.40);background:rgba(92,159,255,.08)
}
.friend-profile-status.competition,.friend-profile-status.tournament{
  color:#efd06e;border-color:rgba(239,199,84,.42);background:rgba(239,199,84,.08)
}
.friend-profile-rank-row,.friend-profile-mmr-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px
}
.friend-profile-rank-row strong{font-size:20px;color:#eef0f4}
.friend-profile-rank-row span,.friend-profile-mmr-row span{
  color:#a0a6b0;font-size:11px
}
.friend-profile-hero-main p{
  margin:10px 0 0;color:#a0a6b0;font-size:12px;line-height:1.5
}
.friend-profile-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px
}
.friend-profile-meta>div,.friend-profile-stats>div{
  padding:12px;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.02);text-align:center
}
.friend-profile-meta small,.friend-profile-stats small{
  display:block;color:#858c97;font-size:8px;font-weight:900;letter-spacing:.08em
}
.friend-profile-meta strong{
  display:block;margin-top:5px;color:#dfe2e7;font-size:13px
}
.friend-profile-activity{
  margin-top:11px;padding:13px;border:1px solid rgba(92,159,255,.18);
  border-radius:12px;background:rgba(92,159,255,.045)
}
.friend-profile-activity>small{
  color:#85b9fb;font-size:8px;font-weight:900;letter-spacing:.11em
}
.friend-profile-activity p{
  margin:6px 0 0;color:#c4c8d0;font-size:12px;line-height:1.5
}
.friend-profile-room{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding:9px 10px;border-radius:9px;
  background:rgba(255,255,255,.035)
}
.friend-profile-room span{color:#858c97;font-size:9px;font-weight:900}
.friend-profile-room strong{color:#efd06d;letter-spacing:.12em}
.friend-profile-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px
}
.friend-profile-stats strong{
  display:block;color:#eef0f4;font-size:19px
}
.friend-profile-actions{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px
}
.friend-profile-actions button{
  min-height:43px;border-radius:10px;border:1px solid #404650;
  background:#242831;color:#d9dde4;cursor:pointer;font-weight:900
}
.friend-profile-actions .primary{
  border-color:rgba(76,194,117,.42);
  background:linear-gradient(135deg,#49bd75,#267249);color:#fff
}
.friend-profile-actions .danger-soft{
  border-color:rgba(232,89,89,.28);
  background:rgba(232,89,89,.07);color:#ff9a9a
}
.friend-profile-actions .danger{
  border-color:rgba(232,89,89,.45);
  background:linear-gradient(135deg,#a5373d,#641e23);color:#fff
}
.friend-profile-actions button:disabled{opacity:.38;cursor:not-allowed}

@media(max-width:768px){
  .friend-profile-modal.mobile-sheet-open,
  .friend-profile-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;padding:0!important;
    background:rgba(0,0,0,.58)!important
  }
  .friend-profile-dialog{
    width:100%!important;
    max-height:88vh!important;
    margin:0!important;
    padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important
  }
  .friend-profile-hero{grid-template-columns:1fr;text-align:center}
  .friend-profile-avatar{margin:auto}
  .friend-profile-rank-row,.friend-profile-mmr-row{
    justify-content:center;flex-wrap:wrap
  }
  .friend-profile-meta{grid-template-columns:1fr}
  .friend-profile-stats{grid-template-columns:repeat(2,1fr)}
  .friend-profile-actions{grid-template-columns:1fr}
}

/* DOSMOS UNO V4.2.5 — Private Chat */
.private-conversation-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08)
}
.private-conversation-list{display:grid;gap:8px;margin-top:10px}
.private-conversation-row{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.022);
  color:#fff;
  text-align:left;
  cursor:pointer
}
.private-conversation-row:hover{
  border-color:rgba(91,158,255,.30);
  background:rgba(91,158,255,.05)
}
.private-conversation-main{min-width:0}
.private-conversation-main b{display:block}
.private-conversation-main small{
  display:block;
  margin-top:3px;
  color:#a0a6af;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.private-conversation-main em{
  display:block;
  margin-top:4px;
  color:#7f8792;
  font-size:9px;
  font-style:normal
}
.private-conversation-row>span{
  min-width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:999px;
  background:#e83b43;
  color:#fff;
  font-size:9px;
  font-weight:1000
}

.private-chat-modal{
  position:fixed;
  inset:0;
  z-index:840;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(7px)
}
.private-chat-modal[hidden]{display:none!important}
.private-chat-dialog{
  width:min(560px,96vw);
  height:min(720px,92vh);
  display:grid;
  grid-template-rows:auto auto minmax(180px,1fr) auto auto auto;
  overflow:hidden;
  border:1px solid rgba(91,158,255,.38);
  border-radius:22px;
  background:
    radial-gradient(circle at 85% 0,rgba(71,133,228,.14),transparent 34%),
    linear-gradient(145deg,#181b23,#090b0f);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.private-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,.08)
}
.private-chat-person{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.private-chat-person h2{
  margin:0;
  font:800 19px "Sora"
}
.private-chat-status{
  display:inline-block;
  margin-top:3px;
  color:#8f969f;
  font-size:9px;
  font-weight:900
}
.private-chat-status.online,.private-chat-status.room{
  color:#7fe2a1
}
.private-chat-status.playing{
  color:#9cc8ff
}
.private-chat-status.competition,.private-chat-status.tournament{
  color:#efd06d
}
.private-chat-head-actions{
  display:flex;
  gap:6px
}
.private-chat-head-actions button{
  width:36px;height:36px;
  border:1px solid #3d434d;
  border-radius:9px;
  background:#22262e;
  color:#fff;
  cursor:pointer
}
.private-chat-quick{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.private-chat-quick button{
  flex:0 0 auto;
  padding:6px 9px;
  border:1px solid rgba(91,158,255,.28);
  border-radius:999px;
  background:rgba(91,158,255,.07);
  color:#a8ceff;
  font-size:9px;
  font-weight:800;
  cursor:pointer
}
.private-chat-messages{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding:14px
}
.private-message{
  max-width:82%;
  padding:9px 11px;
  border-radius:13px;
  box-shadow:0 8px 20px rgba(0,0,0,.14)
}
.private-message.mine{
  align-self:flex-end;
  border:1px solid rgba(74,151,239,.34);
  border-radius:13px 13px 4px 13px;
  background:linear-gradient(145deg,#234f86,#163150)
}
.private-message.theirs{
  align-self:flex-start;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px 13px 13px 4px;
  background:#20242c
}
.private-message p{
  margin:0;
  color:#f3f5f7;
  font-size:12px;
  line-height:1.45;
  word-break:break-word
}
.private-message time{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.55);
  text-align:right;
  font-size:8px
}
.private-chat-typing{
  padding:0 14px 7px;
  color:#83b9ff;
  font-size:9px;
  font-style:italic
}
.private-chat-typing[hidden]{display:none!important}
.private-chat-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:11px;
  border-top:1px solid rgba(255,255,255,.08)
}
.private-chat-compose textarea{
  min-width:0;
  max-height:110px;
  resize:none;
  padding:11px 12px;
  border:1px solid #373d47;
  border-radius:10px;
  background:#090b0f;
  color:#fff;
  font:600 12px Inter
}
.private-chat-compose button{
  padding:10px 14px;
  border:1px solid rgba(74,151,239,.40);
  border-radius:10px;
  background:linear-gradient(135deg,#4a96ef,#285ba5);
  color:#fff;
  cursor:pointer;
  font-weight:1000
}
.private-chat-note{
  margin:0;
  padding:0 12px 12px;
  text-align:center;
  color:#7f8792;
  font-size:9px
}
.friend-chat-btn{
  border-color:rgba(91,158,255,.28)!important;
  background:rgba(91,158,255,.07)!important;
  color:#a8ceff!important
}
.friend-profile-actions .chat-primary{
  border-color:rgba(91,158,255,.42);
  background:linear-gradient(135deg,#4a96ef,#285ba5);
  color:#fff
}

@media(max-width:768px){
  .private-chat-modal.mobile-sheet-open,
  .private-chat-modal:not([hidden]){
    display:flex!important;
    align-items:flex-end!important;
    padding:0!important;
    background:rgba(0,0,0,.58)!important
  }
  .private-chat-dialog{
    width:100%!important;
    height:min(88vh,calc(var(--mobile-vh,1vh)*88))!important;
    margin:0!important;
    border-radius:22px 22px 0 0!important
  }
  .private-conversation-row{
    grid-template-columns:auto 1fr auto
  }
}

/* DOSMOS UNO V4.3.1 — Ranked Queue */
.ranked-head-button{position:relative}
.ranked-queue-mini{
  position:absolute;
  right:-7px;
  top:-7px;
  white-space:nowrap;
  border:2px solid #101319;
  border-radius:999px;
  padding:3px 6px;
  background:#d9b743;
  color:#171206;
  font-size:7px;
  font-weight:1000
}
.ranked-queue-mini[hidden]{display:none!important}

.match-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:15px 0
}
.match-mode-card{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:82px;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:#fff;
  text-align:left;
  cursor:pointer
}
.match-mode-card>span{font-size:29px}
.match-mode-card b{display:block}
.match-mode-card small{display:block;margin-top:4px;color:#8f969f;font-size:9px}
.match-mode-card.casual:hover{border-color:rgba(76,194,117,.36)}
.match-mode-card.ranked{
  border-color:rgba(239,199,84,.28);
  background:rgba(239,199,84,.045)
}
.match-mode-card.ranked:hover{border-color:rgba(239,199,84,.50)}
.match-mode-card.tournament:hover{border-color:rgba(183,121,255,.40)}

.ranked-queue-modal{
  position:fixed;inset:0;z-index:850;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.ranked-queue-modal[hidden]{display:none!important}
.ranked-queue-dialog{
  width:min(720px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(239,199,84,.42);
  border-radius:22px;
  padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(239,199,84,.15),transparent 34%),
    linear-gradient(145deg,#191b22,#090a0e);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.ranked-queue-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:15px
}
.ranked-queue-head small{
  color:#e0c267;font-weight:900;letter-spacing:.14em
}
.ranked-queue-head h2{margin:4px 0 4px;font:800 29px "Sora"}
.ranked-queue-head p{margin:0;color:#979da7;font-size:12px}
.ranked-head-actions{display:flex;align-items:center;gap:8px}
.ranked-realtime-status{
  border:1px solid #404650;border-radius:999px;padding:6px 9px;
  color:#8d949e;font-size:8px;font-weight:1000
}
.ranked-realtime-status.online{
  color:#82e3a3;border-color:rgba(76,194,117,.40);background:rgba(76,194,117,.08)
}
.ranked-head-actions>button{
  width:39px;height:39px;border:1px solid #414750;border-radius:10px;
  background:#22262e;color:#fff;font-size:25px;cursor:pointer
}
.ranked-profile-card{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px
}
.ranked-profile-card>div{
  padding:14px;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;background:rgba(255,255,255,.025);text-align:center
}
.ranked-profile-card small{display:block;color:#888f99;font-size:8px;font-weight:900}
.ranked-profile-card strong{display:block;margin-top:5px;color:#efd06d;font-size:17px}
.ranked-idle-panel{margin-top:17px}
.ranked-idle-panel label{
  display:flex;flex-direction:column;gap:7px
}
.ranked-idle-panel label span{color:#bfc4cc;font-size:10px;font-weight:900}
.ranked-idle-panel select{
  padding:12px;border:1px solid #383e47;border-radius:10px;background:#0a0c10;color:#fff;font-weight:800
}
.ranked-rules{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px
}
.ranked-rules span{
  padding:9px;border:1px solid rgba(255,255,255,.06);
  border-radius:9px;background:rgba(255,255,255,.02);color:#a7adb6;font-size:10px
}
.ranked-find-btn{
  width:100%;min-height:48px;margin-top:15px;
  border:1px solid rgba(239,199,84,.48);border-radius:11px;
  background:linear-gradient(135deg,#e0c05d,#8d651b);
  color:#171105;font-weight:1000;letter-spacing:.08em;cursor:pointer
}
.ranked-find-btn:disabled{opacity:.42;cursor:not-allowed}
.ranked-searching-panel{
  margin-top:20px;text-align:center
}
.ranked-searching-panel[hidden]{display:none!important}
.ranked-search-orbit{
  position:relative;width:112px;height:112px;margin:auto;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(239,199,84,.18)
}
.ranked-search-orbit i{
  position:absolute;inset:4px;border-radius:50%;
  border:3px solid transparent;border-top-color:#e2c15d;border-right-color:#a97c24;
  animation:rankedSpin 1.1s linear infinite
}
.ranked-search-orbit span{font-size:43px}
.ranked-searching-panel>small{
  display:block;margin-top:14px;color:#dabe61;font-weight:900;letter-spacing:.13em
}
.ranked-searching-panel>strong{
  display:block;margin-top:4px;font:800 34px "Sora"
}
.ranked-searching-panel>p{margin:4px 0 0;color:#939aa4}
.ranked-search-meta{
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:13px
}
.ranked-search-meta span{
  border:1px solid rgba(255,255,255,.07);border-radius:999px;
  padding:6px 9px;background:rgba(255,255,255,.025);color:#a5abb4;font-size:9px
}
.ranked-cancel-btn{
  margin-top:15px;padding:10px 15px;border:1px solid rgba(232,89,89,.34);
  border-radius:9px;background:rgba(232,89,89,.08);color:#ff9b9b;font-weight:900;cursor:pointer
}
.ranked-note{margin:16px 0 0;text-align:center;color:#7f8690;font-size:9px}
@keyframes rankedSpin{to{transform:rotate(360deg)}}

.ranked-match-found-modal{
  position:fixed;inset:0;z-index:900;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(7px)
}
.ranked-match-found-modal[hidden]{display:none!important}
.ranked-match-found-card{
  width:min(520px,94vw);
  padding:27px;
  border:1px solid rgba(239,199,84,.58);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(239,199,84,.18),transparent 38%),
    linear-gradient(145deg,#1b1d24,#0a0b0f);
  text-align:center;
  box-shadow:0 34px 110px rgba(0,0,0,.72);
  animation:rankedFoundPop .58s cubic-bezier(.18,.9,.2,1.2)
}
.ranked-found-icon{
  width:92px;height:92px;display:grid;place-items:center;margin:auto;
  border-radius:50%;background:linear-gradient(145deg,#e4c45f,#8f671d);
  font-size:44px;box-shadow:0 20px 45px rgba(239,199,84,.23)
}
.ranked-match-found-card>small{
  display:block;margin-top:13px;color:#dfc269;font-weight:900;letter-spacing:.14em
}
.ranked-match-found-card h2{margin:5px 0 12px;font:800 26px "Sora"}
.ranked-found-players{display:grid;gap:8px}
.ranked-found-player{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px;border:1px solid rgba(255,255,255,.08);
  border-radius:11px;background:rgba(255,255,255,.025);text-align:left
}
.ranked-found-player.accepted{
  border-color:rgba(76,194,117,.40);background:rgba(76,194,117,.07)
}
.ranked-found-player b{display:block}
.ranked-found-player small{display:block;margin-top:3px;color:#8f969f;font-size:9px}
.ranked-found-player>span{
  color:#9da4ad;font-size:8px;font-weight:1000
}
.ranked-found-player.accepted>span{color:#7fe1a0}
.ranked-accept-countdown{
  display:flex;justify-content:center;align-items:center;gap:8px;margin-top:15px
}
.ranked-accept-countdown span{color:#939aa4;font-size:10px}
.ranked-accept-countdown strong{color:#efd06d;font:800 28px "Sora"}
.ranked-found-actions{
  display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:14px
}
.ranked-found-actions button{
  min-height:44px;border-radius:10px;font-weight:1000;cursor:pointer
}
.ranked-found-actions .decline{
  border:1px solid #424852;background:#242831;color:#c2c7cf
}
.ranked-found-actions .accept{
  border:1px solid rgba(76,194,117,.44);
  background:linear-gradient(135deg,#4bc178,#267449);color:#fff
}
.ranked-found-actions .accept:disabled{opacity:.48}
@keyframes rankedFoundPop{
  0%{transform:scale(.55) translateY(30px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}

@media(max-width:768px){
  .match-mode-grid{grid-template-columns:1fr}
  .match-mode-card{min-height:68px}
  .ranked-queue-modal.mobile-sheet-open,
  .ranked-queue-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;padding:0!important;background:rgba(0,0,0,.58)!important
  }
  .ranked-queue-dialog{
    width:100%!important;max-height:88vh!important;margin:0!important;
    padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important
  }
  .ranked-profile-card{grid-template-columns:1fr}
  .ranked-rules{grid-template-columns:1fr}
  .ranked-found-actions{grid-template-columns:1fr}
}

/* DOSMOS UNO V4.3.2 — Ranked Season */
.season-head-button{position:relative}

.ranked-season-modal{
  position:fixed;inset:0;z-index:855;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.ranked-season-modal[hidden]{display:none!important}
.ranked-season-dialog{
  width:min(760px,96vw);max-height:92vh;overflow:auto;
  border:1px solid rgba(239,199,84,.45);
  border-radius:22px;padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(239,199,84,.16),transparent 34%),
    linear-gradient(145deg,#191b22,#090a0e);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.ranked-season-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:15px
}
.ranked-season-head small{
  color:#e0c267;font-weight:900;letter-spacing:.14em
}
.ranked-season-head h2{margin:4px 0 4px;font:800 29px "Sora"}
.ranked-season-head p{margin:0;color:#979da7;font-size:12px}
.ranked-season-head>button{
  width:39px;height:39px;border:1px solid #414750;border-radius:10px;
  background:#22262e;color:#fff;font-size:25px;cursor:pointer
}
.ranked-season-countdown{
  display:flex;justify-content:center;align-items:center;gap:9px;
  margin-top:20px;padding:16px;border:1px solid rgba(239,199,84,.18);
  border-radius:15px;background:rgba(239,199,84,.045)
}
.ranked-season-countdown>div{text-align:center}
.ranked-season-countdown strong{
  display:block;min-width:50px;color:#efd06d;font:800 29px "Sora"
}
.ranked-season-countdown small{
  display:block;margin-top:3px;color:#8c939d;font-size:7px;font-weight:900
}
.ranked-season-countdown>span{color:#705d25;font-size:21px}
.ranked-season-progress{
  margin-top:12px;padding:12px;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.02)
}
.ranked-season-progress>div:first-child{
  display:flex;justify-content:space-between;color:#9ca2ab;font-size:9px;font-weight:800
}
.ranked-season-progress-track{
  height:8px;margin-top:8px;border-radius:999px;background:#252a32;overflow:hidden
}
.ranked-season-progress-track i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#9b721f,#efd06d);transition:.4s width
}
.ranked-season-stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px
}
.ranked-season-stats>div{
  padding:12px;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.02);text-align:center
}
.ranked-season-stats strong{
  display:block;color:#eef0f4;font-size:16px
}
.ranked-season-stats small{
  display:block;margin-top:4px;color:#858c96;font-size:8px;font-weight:900
}
.ranked-season-reward{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;
  margin-top:12px;padding:14px;border:1px solid rgba(239,199,84,.30);
  border-radius:13px;background:rgba(239,199,84,.055)
}
.ranked-season-reward-icon{
  width:64px;height:64px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(145deg,#e4c45f,#8d651b);font-size:31px
}
.ranked-season-reward small{color:#bda85c;font-size:8px;font-weight:900;letter-spacing:.1em}
.ranked-season-reward h3{margin:3px 0;color:#efd06d}
.ranked-season-reward p{margin:0;color:#a1a7af;font-size:11px}
.ranked-season-complete-panel{
  margin-top:12px;padding:13px;border:1px solid rgba(76,194,117,.28);
  border-radius:11px;background:rgba(76,194,117,.055);text-align:center
}
.ranked-season-complete-panel[hidden]{display:none!important}
.ranked-season-complete-panel h3{margin:0;color:#82e3a3}
.ranked-season-complete-panel p{margin:5px 0 0;color:#9ca2aa;font-size:10px}
.ranked-season-claim,.ranked-season-next{
  width:100%;min-height:46px;margin-top:12px;border-radius:10px;font-weight:1000;cursor:pointer
}
.ranked-season-claim{
  border:1px solid rgba(239,199,84,.46);
  background:linear-gradient(135deg,#e0c05d,#8d651b);color:#171105
}
.ranked-season-claim:disabled{opacity:.42;cursor:not-allowed}
.ranked-season-next{
  border:1px solid rgba(76,194,117,.42);
  background:linear-gradient(135deg,#4ac177,#267249);color:#fff
}
.ranked-season-next[hidden]{display:none!important}
.ranked-season-history{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)
}
.ranked-season-section-head small{color:#d8bc62;font-size:8px;font-weight:900;letter-spacing:.12em}
.ranked-season-section-head h3{margin:3px 0 0}
.ranked-season-history-list{display:grid;gap:8px;margin-top:10px}
.ranked-season-history-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;background:rgba(255,255,255,.022)
}
.ranked-season-history-row b,.ranked-season-history-row strong{display:block}
.ranked-season-history-row small{display:block;margin-top:3px;color:#858c96;font-size:9px}
.ranked-season-history-row>div:last-child{text-align:right}

.season-complete-modal{
  position:fixed;inset:0;z-index:930;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.season-complete-modal[hidden]{display:none!important}
.season-complete-card{
  width:min(470px,94vw);padding:29px;
  border:1px solid rgba(239,199,84,.60);border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(239,199,84,.20),transparent 38%),
    linear-gradient(145deg,#1b1d24,#0a0b0f);
  text-align:center;box-shadow:0 35px 110px rgba(0,0,0,.74);
  animation:seasonCompletePop .6s cubic-bezier(.18,.9,.2,1.2)
}
.season-complete-icon{
  width:96px;height:96px;display:grid;place-items:center;margin:auto;
  border-radius:50%;background:linear-gradient(145deg,#e5c560,#8c641b);
  font-size:48px;box-shadow:0 22px 50px rgba(239,199,84,.24)
}
.season-complete-card>small{
  display:block;margin-top:14px;color:#d7ba61;font-weight:900;letter-spacing:.14em
}
.season-complete-card h2{margin:5px 0;font:800 28px "Sora"}
.season-complete-card>strong{display:block;color:#efd06d;font-size:22px}
.season-complete-card>p{margin:6px 0 0;color:#9ba1aa}
.season-complete-reward{
  margin-top:13px;padding:10px;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;background:rgba(255,255,255,.025);color:#dce0e6
}
.season-complete-actions{
  display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:15px
}
.season-complete-actions button{
  min-height:43px;border-radius:10px;font-weight:1000;cursor:pointer
}
.season-complete-actions button:first-child{
  border:1px solid #414750;background:#252932;color:#c4c9d1
}
.season-complete-actions button:last-child{
  border:1px solid rgba(239,199,84,.46);
  background:linear-gradient(135deg,#e0c05d,#8d651b);color:#171105
}
@keyframes seasonCompletePop{
  0%{transform:scale(.55) translateY(30px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@media(max-width:768px){
  .ranked-season-modal.mobile-sheet-open,
  .ranked-season-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;padding:0!important;background:rgba(0,0,0,.58)!important
  }
  .ranked-season-dialog{
    width:100%!important;max-height:88vh!important;margin:0!important;
    padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important
  }
  .ranked-season-countdown{gap:5px;padding:12px 7px}
  .ranked-season-countdown strong{min-width:38px;font-size:22px}
  .ranked-season-stats{grid-template-columns:repeat(2,1fr)}
  .ranked-season-reward{grid-template-columns:1fr;text-align:center}
  .ranked-season-reward-icon{margin:auto}
  .season-complete-actions{grid-template-columns:1fr}
}

/* DOSMOS UNO V4.3.3 — Rank Promotion & Demotion */
.promotion-head-button{position:relative}

.rank-promotion-modal{
  position:fixed;inset:0;z-index:860;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.rank-promotion-modal[hidden]{display:none!important}
.rank-promotion-dialog{
  width:min(760px,96vw);max-height:92vh;overflow:auto;
  border:1px solid rgba(117,171,255,.42);
  border-radius:22px;padding:23px;
  background:
    radial-gradient(circle at 85% 0,rgba(83,143,233,.16),transparent 34%),
    linear-gradient(145deg,#191b22,#090a0e);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.rank-promotion-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:15px
}
.rank-promotion-head small{
  color:#88bdff;font-weight:900;letter-spacing:.14em
}
.rank-promotion-head h2{margin:4px 0 4px;font:800 29px "Sora"}
.rank-promotion-head p{margin:0;color:#979da7;font-size:12px}
.rank-promotion-head>button{
  width:39px;height:39px;border:1px solid #414750;border-radius:10px;
  background:#22262e;color:#fff;font-size:25px;cursor:pointer
}
.rank-division-card{
  display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  margin-top:18px;padding:17px;border:1px solid rgba(117,171,255,.18);
  border-radius:15px;background:rgba(117,171,255,.045)
}
.rank-division-current,.rank-division-next{text-align:center}
.rank-division-card small{
  display:block;color:#858c96;font-size:8px;font-weight:900;letter-spacing:.08em
}
.rank-division-card strong{
  display:block;margin-top:6px;color:#eef0f4;font-size:20px
}
.rank-division-card span{
  display:block;margin-top:4px;color:#9ca2ab;font-size:10px
}
.rank-division-arrow{color:#6e9edb;font-size:24px}
.rank-division-progress{
  margin-top:10px;padding:10px;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.02)
}
.rank-division-progress-track{
  height:9px;border-radius:999px;background:#252a32;overflow:hidden
}
.rank-division-progress-track i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#2f6da7,#8ac1ff);transition:.4s width
}
.rank-status-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px
}
.rank-status-grid>div{
  padding:12px;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;background:rgba(255,255,255,.02);text-align:center
}
.rank-status-grid strong{display:block;color:#eef0f4;font-size:17px}
.rank-status-grid small{
  display:block;margin-top:4px;color:#858c96;font-size:8px;font-weight:900
}
.rank-rule-info{display:grid;gap:8px;margin-top:12px}
.rank-rule-info article{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;background:rgba(255,255,255,.022)
}
.rank-rule-info article>span{font-size:25px}
.rank-rule-info b{display:block}
.rank-rule-info small{display:block;margin-top:3px;color:#8f969f;font-size:9px}
.rank-history-section{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)
}
.rank-section-head small{color:#88bdff;font-size:8px;font-weight:900;letter-spacing:.12em}
.rank-section-head h3{margin:3px 0 0}
.rank-history-list{display:grid;gap:8px;margin-top:10px}
.rank-history-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:11px;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;background:rgba(255,255,255,.022)
}
.rank-history-row.promoted{border-left:4px solid #4bc078}
.rank-history-row.demoted{border-left:4px solid #dd5b61}
.rank-history-row.protected{border-left:4px solid #6eaaff}
.rank-history-row.won{border-left:4px solid #d3b44c}
.rank-history-row.lost{border-left:4px solid #8c929c}
.rank-history-row b,.rank-history-row strong{display:block}
.rank-history-row small{display:block;margin-top:3px;color:#858c96;font-size:9px}
.rank-history-row>div:last-child{text-align:right}

.rank-change-modal{
  position:fixed;inset:0;z-index:940;
  display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px)
}
.rank-change-modal[hidden]{display:none!important}
.rank-change-card{
  width:min(500px,94vw);padding:29px;
  border:1px solid rgba(117,171,255,.56);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0,rgba(90,154,244,.19),transparent 38%),
    linear-gradient(145deg,#1b1d24,#0a0b0f);
  text-align:center;
  box-shadow:0 35px 110px rgba(0,0,0,.74);
  animation:rankChangePop .6s cubic-bezier(.18,.9,.2,1.2)
}
.rank-change-card.promoted{
  border-color:rgba(76,194,117,.60);
  background:radial-gradient(circle at 50% 0,rgba(76,194,117,.20),transparent 38%),linear-gradient(145deg,#1b1d24,#0a0b0f)
}
.rank-change-card.demoted{
  border-color:rgba(222,91,97,.60);
  background:radial-gradient(circle at 50% 0,rgba(222,91,97,.18),transparent 38%),linear-gradient(145deg,#1b1d24,#0a0b0f)
}
.rank-change-card.protected{
  border-color:rgba(106,168,255,.62)
}
.rank-change-icon{
  width:94px;height:94px;display:grid;place-items:center;margin:auto;
  border-radius:50%;background:linear-gradient(145deg,#83bfff,#2e679e);
  font-size:46px;box-shadow:0 22px 50px rgba(90,154,244,.24)
}
.rank-change-card>small{
  display:block;margin-top:14px;color:#8ec1ff;font-weight:900;letter-spacing:.14em
}
.rank-change-versus{
  display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px
}
.rank-change-versus strong{font-size:17px}
.rank-change-versus span{color:#6d7783}
.rank-change-mmr{
  margin-top:13px;color:#efd06d;font:800 30px "Sora"
}
.rank-change-card p{margin:7px 0 0;color:#9ca2ab}
.rank-change-card button{
  width:100%;min-height:44px;margin-top:16px;
  border:1px solid rgba(117,171,255,.46);border-radius:10px;
  background:linear-gradient(135deg,#4b95e8,#285d9c);
  color:#fff;font-weight:1000;cursor:pointer
}
@keyframes rankChangePop{
  0%{transform:scale(.55) translateY(30px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@media(max-width:768px){
  .rank-promotion-modal.mobile-sheet-open,
  .rank-promotion-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;padding:0!important;background:rgba(0,0,0,.58)!important
  }
  .rank-promotion-dialog{
    width:100%!important;max-height:88vh!important;margin:0!important;
    padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important
  }
  .rank-division-card{grid-template-columns:1fr}
  .rank-division-arrow{transform:rotate(90deg)}
  .rank-status-grid{grid-template-columns:repeat(2,1fr)}
  .rank-change-versus{flex-direction:column}
}

/* DOSMOS UNO V4.3.4 — Match Mode Tabs & Scroll Lock */
body.match-mode-open{
  overflow:hidden!important;
  touch-action:none;
}
.match-mode-overlay{
  position:fixed;
  inset:0;
  z-index:980;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(9px);
  overflow:hidden;
}
.match-mode-overlay[hidden]{display:none!important}
.match-mode-shell{
  width:min(920px,97vw);
  height:min(760px,94vh);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(239,199,84,.42);
  border-radius:22px;
  background:
    radial-gradient(circle at 90% 0,rgba(239,199,84,.13),transparent 34%),
    linear-gradient(145deg,#181a20,#090a0e);
  box-shadow:0 40px 120px rgba(0,0,0,.76);
}
.match-mode-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.match-mode-header small{
  color:#e0c267;
  font-weight:900;
  letter-spacing:.14em;
}
.match-mode-header h2{
  margin:4px 0 3px;
  font:800 27px "Sora";
}
.match-mode-header p{
  margin:0;
  color:#969da7;
  font-size:11px;
}
.match-mode-header>button{
  width:40px;
  height:40px;
  border:1px solid #414750;
  border-radius:10px;
  background:#22262e;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.match-mode-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.015);
}
.match-mode-tab-btn{
  min-height:44px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#aeb4bd;
  font-weight:900;
  cursor:pointer;
}
.match-mode-tab-btn.active{
  border-color:rgba(239,199,84,.48);
  background:rgba(239,199,84,.10);
  color:#efd06d;
}
.match-mode-tab-panel{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px;
}
.match-mode-tab-panel[hidden]{display:none!important}
.match-tab-intro small{
  color:#8dbfff;
  font-weight:900;
  letter-spacing:.13em;
}
.match-tab-intro h3{
  margin:4px 0 4px;
  font-size:24px;
}
.match-tab-intro p{
  margin:0;
  color:#979da7;
  font-size:12px;
  line-height:1.55;
}
.match-tab-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:17px;
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}
.match-tab-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.match-tab-card label span{
  color:#bfc4cc;
  font-size:9px;
  font-weight:900;
}
.match-tab-card input{
  width:100%;
  min-width:0;
  padding:11px 12px;
  border:1px solid #373d47;
  border-radius:9px;
  background:#090b0f;
  color:#fff;
}
.match-tab-card .uno-btn{
  min-width:150px;
}
.match-tab-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.match-tab-actions button,
.match-tab-public button{
  min-height:40px;
  border:1px solid rgba(91,158,255,.28);
  border-radius:9px;
  background:rgba(91,158,255,.07);
  color:#a8ceff;
  font-weight:900;
  cursor:pointer;
}
.match-tab-public{
  margin-top:14px;
  padding:13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}
.match-tab-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.match-tab-section-head small{
  color:#858c96;
  font-size:8px;
  font-weight:900;
}
.match-tab-section-head h3{
  margin:3px 0 0;
}
.match-tab-public p{
  margin:10px 0 0;
  color:#8e959f;
  font-size:10px;
}
.match-tab-ranked-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:17px;
}
.match-tab-ranked-summary>div{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  text-align:center;
}
.match-tab-ranked-summary small{
  display:block;
  color:#858c96;
  font-size:8px;
  font-weight:900;
}
.match-tab-ranked-summary strong{
  display:block;
  margin-top:5px;
  color:#efd06d;
}
.match-tab-tournament-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin-top:17px;
}
.match-tab-tournament-grid article{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.match-tab-tournament-grid article>span{
  font-size:27px;
}
.match-tab-tournament-grid b{
  display:block;
}
.match-tab-tournament-grid small{
  display:block;
  margin-top:3px;
  color:#8f969f;
  font-size:9px;
}
.match-tab-main-btn{
  width:100%;
  min-height:47px;
  margin-top:16px;
  border-radius:10px;
  font-weight:1000;
  cursor:pointer;
}
.match-tab-main-btn.ranked{
  border:1px solid rgba(239,199,84,.48);
  background:linear-gradient(135deg,#e0c05d,#8d651b);
  color:#171105;
}
.match-tab-main-btn.tournament{
  border:1px solid rgba(183,121,255,.42);
  background:linear-gradient(135deg,#8c58c8,#4a2b70);
  color:#fff;
}

@media(max-width:768px){
  .match-mode-overlay{
    padding:0;
    place-items:end stretch;
  }
  .match-mode-shell{
    width:100%;
    height:calc(var(--mobile-vh,1vh)*100);
    max-height:none;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .match-mode-header{
    padding:calc(13px + var(--mobile-safe-top)) 12px 12px;
  }
  .match-mode-header h2{
    font-size:21px;
  }
  .match-mode-tabs{
    position:sticky;
    top:0;
    z-index:3;
    padding:8px;
  }
  .match-mode-tab-btn{
    min-height:42px;
    font-size:10px;
  }
  .match-mode-tab-panel{
    padding:14px 12px calc(20px + var(--mobile-safe-bottom));
  }
  .match-tab-card{
    grid-template-columns:1fr;
  }
  .match-tab-card .uno-btn{
    width:100%;
  }
  .match-tab-actions{
    grid-template-columns:1fr;
  }
  .match-tab-ranked-summary{
    grid-template-columns:1fr;
  }
  .match-tab-tournament-grid{
    grid-template-columns:1fr;
  }
}

/* V4.3.4.1 — Match tab click/visibility fix */
.match-mode-tab-panel{
  display:none;
}
.match-mode-tab-panel.active{
  display:block!important;
}
.match-mode-tab-panel[hidden]{
  display:none!important;
}
.match-mode-tab-btn{
  position:relative;
  z-index:5;
  pointer-events:auto!important;
  touch-action:manipulation;
}
.match-mode-tabs{
  position:relative;
  z-index:10;
  pointer-events:auto!important;
}

/* V4.3.4.2 — Match mode action button fix */
.match-tab-join-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  min-width:0;
}
.match-tab-join-inline input{
  min-width:0;
  width:100%;
  padding:10px 11px;
  border:1px solid #373d47;
  border-radius:9px;
  background:#090b0f;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.match-tab-actions>button,
.match-tab-join-inline button,
.match-tab-main-btn,
#casualTabQuickBtn{
  pointer-events:auto!important;
  touch-action:manipulation;
  position:relative;
  z-index:4;
}
@media(max-width:768px){
  .match-tab-join-inline{grid-template-columns:1fr}
}

/* DOSMOS UNO V4.3.5 — Dynamic MMR */
.dynamic-mmr-head-button{position:relative}
.dynamic-mmr-modal{
  position:fixed;inset:0;z-index:865;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.84);backdrop-filter:blur(8px)
}
.dynamic-mmr-modal[hidden]{display:none!important}
.dynamic-mmr-dialog{
  width:min(780px,96vw);max-height:92vh;overflow:auto;padding:23px;
  border:1px solid rgba(96,174,255,.45);border-radius:22px;
  background:radial-gradient(circle at 86% 0,rgba(72,143,239,.16),transparent 34%),linear-gradient(145deg,#191b22,#090a0e);
  box-shadow:0 34px 100px rgba(0,0,0,.68)
}
.dynamic-mmr-head{display:flex;justify-content:space-between;gap:15px}
.dynamic-mmr-head small{color:#8ac4ff;font-weight:900;letter-spacing:.14em}
.dynamic-mmr-head h2{margin:4px 0;font:800 29px "Sora"}
.dynamic-mmr-head p{margin:0;color:#969da7;font-size:12px}
.dynamic-mmr-head>button{width:39px;height:39px;border:1px solid #414750;border-radius:10px;background:#22262e;color:#fff;font-size:25px}
.dynamic-mmr-current{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.dynamic-mmr-current>div,.dynamic-mmr-stats>div{
  padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);text-align:center
}
.dynamic-mmr-current small,.dynamic-mmr-stats small{display:block;color:#858c96;font-size:8px;font-weight:900}
.dynamic-mmr-current strong{display:block;margin-top:5px;color:#eef0f4;font-size:18px}
.dynamic-mmr-current span{display:block;margin-top:4px;color:#9ba2ab;font-size:10px}
.dynamic-mmr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.dynamic-mmr-stats strong{display:block;color:#8fc5ff;font-size:20px}
.dynamic-promotion-series{
  margin-top:12px;padding:15px;border:1px solid rgba(239,199,84,.34);border-radius:13px;background:rgba(239,199,84,.06);text-align:center
}
.dynamic-promotion-series[hidden]{display:none!important}
.dynamic-promotion-series small{color:#d9bd63;font-weight:900;letter-spacing:.12em}
.dynamic-promotion-series h3{margin:5px 0;color:#efd06d}
.dynamic-promotion-series strong{font-size:23px}
.dynamic-promotion-series p{margin:5px 0 0;color:#9da3ac;font-size:10px}
.dynamic-mmr-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.dynamic-mmr-rules article{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:11px;
  border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.022)
}
.dynamic-mmr-rules article>span{font-size:25px}
.dynamic-mmr-rules b{display:block}
.dynamic-mmr-rules small{display:block;margin-top:3px;color:#8f969f;font-size:9px}
.dynamic-mmr-history{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.dynamic-mmr-history>div:first-child small{color:#88bdff;font-size:8px;font-weight:900;letter-spacing:.12em}
.dynamic-mmr-history h3{margin:3px 0 0}
.dynamic-mmr-history-list{display:grid;gap:8px;margin-top:10px}
.dynamic-mmr-history-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px;
  border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.022)
}
.dynamic-mmr-history-row.won{border-left:4px solid #4bc078}
.dynamic-mmr-history-row.lost{border-left:4px solid #dd5b61}
.dynamic-mmr-history-row b,.dynamic-mmr-history-row strong{display:block}
.dynamic-mmr-history-row small{display:block;margin-top:3px;color:#858c96;font-size:9px}
.dynamic-mmr-history-row>div:last-child{text-align:right}

.dynamic-mmr-result-modal{
  position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(8px)
}
.dynamic-mmr-result-modal[hidden]{display:none!important}
.dynamic-mmr-result-card{
  width:min(520px,94vw);padding:29px;border:1px solid rgba(96,174,255,.58);border-radius:22px;
  background:radial-gradient(circle at 50% 0,rgba(75,150,244,.20),transparent 38%),linear-gradient(145deg,#1b1d24,#0a0b0f);
  text-align:center;box-shadow:0 35px 110px rgba(0,0,0,.74);animation:dynamicMmrPop .6s cubic-bezier(.18,.9,.2,1.2)
}
.dynamic-result-icon{
  width:94px;height:94px;display:grid;place-items:center;margin:auto;border-radius:50%;
  background:linear-gradient(145deg,#84c5ff,#2e679e);font-size:46px;box-shadow:0 22px 50px rgba(90,154,244,.24)
}
.dynamic-mmr-result-card>small{display:block;margin-top:14px;color:#91c4ff;font-weight:900;letter-spacing:.14em}
.dynamic-result-mmr{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}
.dynamic-result-mmr strong{font-size:18px}.dynamic-result-mmr span{color:#6d7783}
.dynamic-result-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.dynamic-result-breakdown>div{
  display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.022)
}
.dynamic-result-breakdown span{color:#8f969f;font-size:9px}.dynamic-result-breakdown b{font-size:10px}
.dynamic-result-total{margin-top:13px;color:#efd06d;font:800 30px "Sora"}
.dynamic-mmr-result-card p{margin:7px 0 0;color:#9ca2ab}
.dynamic-mmr-result-card button{
  width:100%;min-height:44px;margin-top:16px;border:1px solid rgba(96,174,255,.46);border-radius:10px;
  background:linear-gradient(135deg,#4b95e8,#285d9c);color:#fff;font-weight:1000
}
@keyframes dynamicMmrPop{0%{transform:scale(.55) translateY(30px);opacity:0}100%{transform:scale(1);opacity:1}}
@media(max-width:768px){
  .dynamic-mmr-modal.mobile-sheet-open,.dynamic-mmr-modal:not([hidden]){
    display:flex!important;align-items:flex-end!important;padding:0!important;background:rgba(0,0,0,.58)!important
  }
  .dynamic-mmr-dialog{
    width:100%!important;max-height:88vh!important;margin:0!important;padding:16px 12px calc(18px + var(--mobile-safe-bottom))!important;
    border-radius:22px 22px 0 0!important
  }
  .dynamic-mmr-current,.dynamic-mmr-rules{grid-template-columns:1fr}
  .dynamic-mmr-stats{grid-template-columns:repeat(3,1fr)}
  .dynamic-result-breakdown{grid-template-columns:1fr}
  .dynamic-result-mmr{flex-direction:column}
}

/* DOSMOS UNO V4.3.6 — Ranked AI Fallback */
.ranked-bot-fallback-note{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  margin-top:14px;padding:11px;border:1px solid rgba(126,184,255,.26);
  border-radius:10px;background:rgba(126,184,255,.055)
}
.ranked-bot-fallback-note>span{font-size:25px}
.ranked-bot-fallback-note b{display:block;color:#a9d2ff}
.ranked-bot-fallback-note small{display:block;margin-top:3px;color:#8f969f;font-size:9px}

/* DOSMOS UNO V4.3.6.1 — Natural AI Names + HARD Badge */
.ai-hard-badge{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid rgba(255,92,92,.40);
  border-radius:999px;
  background:rgba(255,92,92,.10);
  color:#ff9a9a;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.05em;
  vertical-align:middle;
}
.ranked-found-player small{
  line-height:1.45;
}

/* DOSMOS UNO V4.3.6.4 — Mobile Header Menu Rework */
.mobile-primary-tools{
  display:contents;
}
.mobile-more-tools-panel{
  display:none;
}
.mobile-more-tools-btn{
  display:none!important;
}

@media(max-width:768px){
  .uno-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    align-items:start!important;
  }

  .uno-head-tools{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    display:block!important;
    overflow:visible!important;
  }

  .mobile-primary-tools{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:center!important;
  }

  .mobile-primary-tools>.head-tool{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
    font-size:15px!important;
    line-height:1!important;
    overflow:visible!important;
  }

  .mobile-more-tools-btn{
    display:flex!important;
    font-size:17px!important;
    letter-spacing:2px!important;
  }

  .mobile-more-tools-panel{
    position:absolute!important;
    top:47px!important;
    right:0!important;
    left:0!important;
    z-index:1200!important;
    display:block!important;
    padding:10px!important;
    border:1px solid rgba(239,199,84,.28)!important;
    border-radius:14px!important;
    background:rgba(10,12,16,.98)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.58)!important;
    backdrop-filter:blur(10px)!important;
  }

  .mobile-more-tools-panel[hidden]{
    display:none!important;
  }

  .mobile-more-tools-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
  }

  .mobile-more-tools-grid>.head-tool,
  .mobile-more-tools-grid>button{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
    font-size:15px!important;
    line-height:1!important;
  }

  .mobile-more-tools-grid .wallet-head-button,
  .mobile-more-tools-grid .profile-head-button,
  .mobile-more-tools-grid .head-tool{
    max-width:none!important;
  }

  .uno-head-tools .head-tool span:not(.friend-unread-badge):not(.ranked-queue-mini):not(.login-reward-notification){
    pointer-events:none!important;
  }

  .friend-unread-badge,
  .ranked-queue-mini,
  .login-reward-notification,
  .mission-badge,
  .notification-badge{
    z-index:3!important;
  }

  body.mobile-tools-open{
    overflow:hidden!important;
  }
}

@media(max-width:390px){
  .mobile-primary-tools{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
  }

  .mobile-primary-tools>.head-tool{
    height:38px!important;
    min-height:38px!important;
    border-radius:9px!important;
    font-size:14px!important;
  }

  .mobile-more-tools-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .mobile-more-tools-grid>.head-tool,
  .mobile-more-tools-grid>button{
    height:40px!important;
    min-height:40px!important;
    font-size:14px!important;
  }
}

/* DOSMOS UNO V4.3.6.5 — Friends UI Rework */
.friends-main-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:17px;
  padding:7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.02)
}
.friends-main-tab{
  min-height:40px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#9097a1;
  font-size:10px;
  font-weight:900;
  cursor:pointer
}
.friends-main-tab.active{
  border-color:rgba(95,161,255,.36);
  background:rgba(95,161,255,.10);
  color:#a8ceff
}
.friends-main-panel{
  display:none;
  margin-top:14px
}
.friends-main-panel.active{
  display:block!important
}
.friends-main-panel[hidden]{
  display:none!important
}
.friend-section-head.compact{
  padding:0;
  border:0
}
.friends-list-toolbar,
.friend-search-primary{
  margin-top:10px
}
.friends-list-toolbar input,
.friend-search-primary input{
  width:100%;
  padding:12px 13px;
  border:1px solid #373d47;
  border-radius:10px;
  background:#0a0c10;
  color:#fff;
  font:700 13px Inter
}
.friend-search-help{
  margin:7px 0 0;
  color:#7f8792;
  font-size:9px
}
.friends-secondary-block{
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.08)
}
.friend-add-btn{
  min-width:122px!important
}
.friend-add-btn.already-friend{
  border-color:rgba(76,194,117,.35)!important;
  background:rgba(76,194,117,.08)!important;
  color:#83e5a4!important
}
.friend-add-btn.pending{
  border-color:rgba(239,199,84,.30)!important;
  background:rgba(239,199,84,.07)!important;
  color:#efd06d!important
}
.friend-search-card{
  grid-template-columns:auto 1fr auto!important
}
.friend-search-card .friend-block-btn{
  display:none!important
}
.friends-head p{
  color:#858c96!important
}
.friends-note{
  opacity:.7
}
@media(max-width:768px){
  .friends-main-tabs{
    position:sticky;
    top:0;
    z-index:5;
    margin-top:12px;
    background:#11141a
  }
  .friends-main-tab{
    min-height:42px;
    padding:5px;
    font-size:9px
  }
  .friend-search-card{
    grid-template-columns:auto 1fr!important
  }
  .friend-search-card .friend-add-btn{
    grid-column:1/-1;
    width:100%
  }
}

/* DOSMOS UNO V4.3.7 — Friends & Chat UX Rework */
html.social-overlay-open,
body.social-overlay-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
body.social-overlay-open{
  position:fixed!important;
  width:100%!important;
  inset:0!important;
}

/* Friends modal: cleaner desktop */
.friends-modal{
  overscroll-behavior:contain!important;
}
.friends-dialog{
  width:min(760px,94vw)!important;
  max-height:min(760px,90vh)!important;
  overflow:auto!important;
}

/* Private chat desktop */
.private-chat-modal{
  z-index:9999!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
.private-chat-dialog{
  width:min(920px,94vw)!important;
  height:min(700px,88vh)!important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto!important;
}
.private-chat-head{
  min-height:68px!important;
  padding:12px 16px!important;
}
.private-chat-back{
  display:none!important;
}
.private-chat-person h2{
  font-size:21px!important;
}
.private-chat-messages{
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:18px!important;
}
.private-chat-compose{
  position:sticky!important;
  bottom:0!important;
  z-index:3!important;
  align-items:end!important;
  padding:12px!important;
  background:#0f1218!important;
}
.private-chat-compose textarea{
  min-height:44px!important;
  max-height:110px!important;
  padding:12px 14px!important;
  line-height:1.4!important;
}
.private-chat-compose button{
  min-width:88px!important;
  min-height:44px!important;
}
.private-chat-note{
  padding:8px 12px 12px!important;
  background:#0f1218!important;
}

/* Mobile chat: true fullscreen */
@media(max-width:768px){
  .friends-modal:not([hidden]){
    position:fixed!important;
    inset:0!important;
    z-index:9997!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    background:#0b0e13!important;
  }
  .friends-dialog{
    width:100%!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom))!important;
    border-radius:0!important;
    border:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  .private-chat-modal:not([hidden]){
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    background:#0b0e13!important;
  }
  .private-chat-dialog{
    width:100%!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto auto!important;
    background:#0d1016!important;
  }
  .private-chat-head{
    min-height:62px!important;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px!important;
    background:#131925!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .private-chat-back{
    display:flex!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:25px!important;
  }
  .private-chat-person{
    flex:1!important;
    min-width:0!important;
  }
  .private-chat-person .friend-avatar{
    width:42px!important;
    height:42px!important;
  }
  .private-chat-person h2{
    font-size:18px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .private-chat-head-actions button:first-child{
    display:none!important;
  }
  .private-chat-head-actions button{
    width:38px!important;
    height:38px!important;
  }
  .private-chat-quick{
    padding:8px 10px!important;
    background:#10141c!important;
  }
  .private-chat-messages{
    padding:12px 10px!important;
    gap:10px!important;
  }
  .private-message{
    max-width:84%!important;
    padding:10px 12px!important;
  }
  .private-message p{
    font-size:14px!important;
  }
  .private-chat-typing{
    padding:0 10px 6px!important;
  }
  .private-chat-compose{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom))!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
  }
  .private-chat-compose textarea{
    min-height:44px!important;
    max-height:88px!important;
    border-radius:22px!important;
    font-size:14px!important;
  }
  .private-chat-compose button{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:50%!important;
    font-size:0!important;
  }
  .private-chat-compose button::before{
    content:'➤';
    font-size:18px;
  }
  .private-chat-note{
    display:none!important;
  }
}

/* DOSMOS UNO V4.3.7.3 — Reliable Private Chat Delivery */
.private-message.mine time{
  min-width:46px;
}

/* DOSMOS UNO V4.3.8 — Database Private Chat */
.private-chat-db-status{
  display:inline-block;
  margin-left:6px;
  padding:3px 6px;
  border:1px solid rgba(232,89,89,.35);
  border-radius:999px;
  background:rgba(232,89,89,.08);
  color:#ff9a9a;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.05em
}
.private-chat-db-status.online{
  border-color:rgba(76,194,117,.38);
  background:rgba(76,194,117,.08);
  color:#82e3a3
}

/* DOSMOS UNO V24.6.1 — Wild +4 Freeze Fix */
.wild4-challenge-modal{
  z-index:10050!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.wild4-challenge-modal.active,
.wild4-challenge-modal.active *{
  pointer-events:auto!important;
}
.wild4-challenge-dialog{
  position:relative;
  z-index:10051!important;
}
.wild4-actions button{
  min-height:48px!important;
  position:relative;
  z-index:10052!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.wild4-auto-timer{
  display:block;
  margin-top:10px;
  color:#efd06d;
  font-size:10px;
  font-weight:900;
}
body.wild4-challenge-active{
  overflow:hidden!important;
}

/* DOSMOS UNO V4.4.0 — Audio Engine */
.audio-dialog{
  width:min(610px,94vw)!important;
}
.audio-dialog .rules-title{
  align-items:flex-start!important;
}
.audio-dialog .rules-title small{
  display:block;
  color:#82baff;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.audio-dialog .rules-title h3{
  margin:4px 0 0;
}
.audio-engine-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:14px 0 10px;
}
.audio-engine-summary>div{
  padding:11px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.audio-engine-summary span{
  display:block;
  color:#858c96;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.1em;
}
.audio-engine-summary b{
  display:block;
  margin-top:5px;
  color:#e8edf4;
  font-size:11px;
}
.audio-engine-status.ready{color:#7ee3a0!important}
.audio-engine-status.warning{color:#efd06d!important}
.audio-mute-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(239,199,84,.22);
  border-radius:11px;
  background:rgba(239,199,84,.045);
  cursor:pointer;
}
.audio-mute-row b,.audio-setting-row b{display:block}
.audio-mute-row small,.audio-setting-row small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px;
}
.audio-mute-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.audio-mute-row i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s;
}
.audio-mute-row i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}
.audio-mute-row input:checked+i{
  background:#b33c46;
}
.audio-mute-row input:checked+i::after{
  transform:translateX(18px);
}
.audio-setting-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,250px)!important;
  gap:14px!important;
  align-items:center!important;
  padding:12px 0!important;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.audio-range-box{
  display:grid;
  grid-template-columns:1fr 48px;
  gap:9px;
  align-items:center;
}
.audio-range-box input{
  width:100%;
  accent-color:#d6ad3e;
}
.audio-range-box output{
  min-width:48px;
  padding:5px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:#0a0c10;
  color:#efd06d;
  text-align:center;
  font-size:9px;
  font-weight:900;
}
.audio-test-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:14px;
}
.audio-test-grid button,
.audio-cache-actions button{
  min-height:40px;
  border:1px solid rgba(95,161,255,.25);
  border-radius:9px;
  background:rgba(95,161,255,.07);
  color:#a8ceff;
  font-weight:900;
  cursor:pointer;
}
.audio-cache-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px;
}
.audio-cache-actions button:last-child{
  border-color:rgba(232,89,89,.25);
  background:rgba(232,89,89,.06);
  color:#ff9a9a;
}
.audio-browser-note{
  margin:12px 0 0!important;
  padding:10px!important;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:#858c96!important;
  font-size:9px!important;
  line-height:1.5!important;
}
@media(max-width:768px){
  .audio-dialog{
    width:100%!important;
    max-height:88vh!important;
    padding:16px 12px calc(18px + env(safe-area-inset-bottom))!important;
  }
  .audio-setting-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .audio-test-grid{
    grid-template-columns:1fr!important;
  }
}

/* DOSMOS UNO V4.4.1 — Gameplay Sound System */
.audio-gameplay-badge{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:center;
  margin:12px 0 8px;
  padding:10px 12px;
  border:1px solid rgba(76,194,117,.26);
  border-radius:10px;
  background:rgba(76,194,117,.055)
}
.audio-gameplay-badge span{
  color:#7ee3a0;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.11em
}
.audio-gameplay-badge b{
  color:#fff;
  font-size:10px
}
.audio-gameplay-badge small{
  color:#858c96;
  font-size:8px
}
@media(max-width:768px){
  .audio-gameplay-badge{
    grid-template-columns:1fr auto;
  }
  .audio-gameplay-badge small{
    grid-column:1/-1;
  }
}

/* DOSMOS UNO V4.4.2 — Voice Pack */
.voice-pack-panel{margin-top:12px;padding:12px;border:1px solid rgba(150,104,255,.25);border-radius:11px;background:rgba(150,104,255,.055)}
.voice-pack-title{display:flex;justify-content:space-between;gap:12px;align-items:center}
.voice-pack-title b{display:block}
.voice-pack-title small{display:block;margin-top:3px;color:#8d949e;font-size:9px}
.voice-pack-switch input{position:absolute;opacity:0;pointer-events:none}
.voice-pack-switch i{display:block;width:42px;height:24px;position:relative;border-radius:999px;background:#343a44;cursor:pointer;transition:.2s}
.voice-pack-switch i::after{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}
.voice-pack-switch input:checked+i{background:#7654d7}
.voice-pack-switch input:checked+i::after{transform:translateX(18px)}
.voice-pack-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:12px}
.voice-pack-grid label>span{display:block;margin-bottom:6px;color:#989faa;font-size:8px;font-weight:900}
.voice-pack-grid select{width:100%;min-height:38px;padding:0 9px;border:1px solid #373d47;border-radius:8px;background:#0a0c10;color:#fff}
.voice-pack-test{width:100%;min-height:40px;margin-top:10px;border:1px solid rgba(150,104,255,.35);border-radius:9px;background:rgba(150,104,255,.10);color:#c7b7ff;font-weight:900}
@media(max-width:768px){.voice-pack-grid{grid-template-columns:1fr}}

/* DOSMOS UNO V4.4.3 — Dynamic Music */
.dynamic-music-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(59,178,255,.24);
  border-radius:11px;
  background:rgba(59,178,255,.05)
}
.dynamic-music-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:8px
}
.dynamic-music-title b{display:block}
.dynamic-music-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.dynamic-music-title>span{
  min-width:82px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:#0a0c10;
  color:#9ecbff;
  text-align:center;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em
}
.dynamic-music-title>span[data-mode="countdown"]{
  border-color:rgba(255,99,99,.35);
  color:#ff9a9a
}
.dynamic-music-title>span[data-mode="match"]{
  border-color:rgba(239,199,84,.35);
  color:#efd06d
}
.dynamic-music-title>span[data-mode="lobby"]{
  border-color:rgba(76,194,117,.35);
  color:#82e3a3
}
.dynamic-music-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.dynamic-music-option b{display:block}
.dynamic-music-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.dynamic-music-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.dynamic-music-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.dynamic-music-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.dynamic-music-option input:checked+i{
  background:#287db4
}
.dynamic-music-option input:checked+i::after{
  transform:translateX(18px)
}

/* DOSMOS UNO V4.5.0 — Animation Engine */
.uno-flying-card{
  position:fixed;
  z-index:12000;
  pointer-events:none;
  perspective:900px;
  transform-origin:center;
  will-change:transform,opacity,filter;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}
.uno-flying-card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.8,.2,1);
}
.uno-flying-card-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:4px solid #fff;
  border-radius:14px;
  backface-visibility:hidden;
  overflow:hidden;
}
.uno-flying-card-face::after{
  content:'';
  position:absolute;
  width:70%;
  height:120%;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  transform:rotate(24deg);
  z-index:-1;
}
.uno-flying-card-face small{
  position:absolute;
  top:7px;
  left:8px;
  color:#fff;
  font-size:7px;
  font-weight:1000;
}
.uno-flying-card-face strong{
  color:#111;
  font-size:clamp(22px,4vw,42px);
  font-weight:1000;
  text-shadow:0 1px 0 #fff;
}
.uno-flying-card-face.back{
  transform:rotateY(180deg);
  background:radial-gradient(circle,#e74949 0 28%,#111 30% 100%);
  color:#fff;
  font-size:11px;
  font-weight:1000;
}
.uno-flying-card.red .front{background:#e63f49}
.uno-flying-card.yellow .front{background:#e6b92f}
.uno-flying-card.green .front{background:#31ac64}
.uno-flying-card.blue .front{background:#347fd9}
.uno-flying-card.wild .front{
  background:conic-gradient(#e63f49 0 25%,#347fd9 0 50%,#31ac64 0 75%,#e6b92f 0);
}
.uno-flying-card.is-flying{
  animation:unoCardFly .62s cubic-bezier(.16,.78,.22,1) forwards;
}
.uno-flying-card.is-flipping .uno-flying-card-inner{
  transform:rotateY(180deg) rotateZ(4deg);
}
.uno-flying-card.is-landing{
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));
}
@keyframes unoCardFly{
  0%{
    transform:translate3d(0,0,0) rotate(-7deg) scale(.92);
    opacity:.3;
  }
  18%{
    opacity:1;
  }
  55%{
    transform:translate3d(
      calc(var(--target-x)*.55),
      calc(var(--target-y)*.42 - 70px),
      0
    ) rotate(10deg) scale(1.12);
  }
  100%{
    transform:translate3d(
      var(--target-x),
      var(--target-y),
      0
    ) rotate(0deg) scale(var(--target-scale));
    opacity:1;
  }
}
.card-land-impact{
  animation:unoCardImpact .55s cubic-bezier(.2,.9,.25,1);
}
.card-land-special{
  position:relative;
}
.card-land-special::after{
  content:'';
  position:absolute;
  inset:-20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  animation:unoImpactRing .65s ease-out forwards;
  pointer-events:none;
}
@keyframes unoCardImpact{
  0%{transform:scale(.82) rotate(-3deg);filter:brightness(1.8)}
  45%{transform:scale(1.13) rotate(2deg)}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}
@keyframes unoImpactRing{
  0%{transform:scale(.35);opacity:1}
  100%{transform:scale(1.55);opacity:0}
}
.uno-draw-flying-card{
  position:fixed;
  z-index:11990;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:10px;
  background:radial-gradient(circle,#d94444 0 28%,#111 30% 100%);
  color:#fff;
  font-size:8px;
  font-weight:1000;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.38));
}
.uno-draw-flying-card.is-drawing{
  animation:unoDrawFly .52s cubic-bezier(.18,.75,.22,1) forwards;
}
@keyframes unoDrawFly{
  0%{transform:translate3d(0,0,0) rotate(-16deg) scale(.8);opacity:.2}
  30%{opacity:1}
  100%{
    transform:translate3d(var(--draw-x),var(--draw-y),0) rotate(8deg) scale(.72);
    opacity:0;
  }
}
.card-animation-busy .uno-card,
.card-animation-busy #drawPile{
  pointer-events:none!important;
}
@media(max-width:768px){
  .uno-flying-card-face{
    border-width:3px;
    border-radius:11px;
  }
  .uno-flying-card{
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.36));
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-flying-card,
  .uno-draw-flying-card{
    display:none!important;
  }
  .card-land-impact,
  .card-land-special::after{
    animation:none!important;
  }
}

/* DOSMOS UNO V4.5.1A — Draw +2 & Wild +4 FX */
.uno-special-fx-layer{
  position:fixed;
  inset:0;
  z-index:12500;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  transition:opacity .12s ease;
}
.uno-special-fx-layer.active{opacity:1}
.uno-special-fx-flash{
  position:absolute;
  inset:0;
  opacity:0;
}
.uno-special-fx-layer.draw2 .uno-special-fx-flash{
  background:radial-gradient(circle,rgba(110,204,255,.65),rgba(22,76,160,.18) 45%,transparent 72%);
  animation:unoBlueFlash .52s ease-out;
}
.uno-special-fx-layer.wild4 .uno-special-fx-flash{
  background:radial-gradient(circle,rgba(220,148,255,.9),rgba(96,25,160,.35) 38%,transparent 72%);
  animation:unoPurpleFlash .75s ease-out;
}
.uno-special-fx-center{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
}
.uno-special-fx-center>strong{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.2);
  font-size:clamp(72px,16vw,180px);
  font-weight:1000;
  color:#fff;
  text-shadow:0 0 14px currentColor,0 0 34px currentColor;
  animation:unoFxNumber .72s cubic-bezier(.16,.8,.2,1) forwards;
}
.uno-special-fx-center>span{
  position:absolute;
  left:50%;
  top:calc(50% + 70px);
  transform:translate(-50%,20px);
  white-space:nowrap;
  color:#fff;
  font-size:clamp(12px,2.4vw,24px);
  font-weight:1000;
  letter-spacing:.15em;
  opacity:0;
  animation:unoFxCaption .55s .18s ease-out forwards;
}
.uno-special-fx-layer.draw2 .uno-special-fx-center>strong{color:#78d8ff}
.uno-special-fx-layer.wild4 .uno-special-fx-center>strong{color:#d996ff}
.uno-fx-particle{
  position:absolute;
  left:0;
  top:0;
  width:var(--fx-size);
  height:var(--fx-size);
  border-radius:50%;
  opacity:0;
  animation:unoFxParticle .65s var(--fx-delay) cubic-bezier(.16,.75,.2,1) forwards;
}
.uno-fx-particle.blue{
  background:#73d6ff;
  box-shadow:0 0 14px #4aaaff;
}
.uno-fx-particle.purple{
  background:#e0a0ff;
  box-shadow:0 0 16px #9a4cff;
}
.uno-energy-trail{
  position:fixed;
  z-index:12520;
  height:5px;
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
}
.uno-energy-trail::before{
  content:'';
  position:absolute;
  inset:-8px 0;
  background:linear-gradient(90deg,transparent,currentColor 15%,#fff 50%,currentColor 85%,transparent);
  filter:blur(3px);
}
.uno-energy-trail.blue{color:#58c8ff}
.uno-energy-trail.purple{color:#c96dff}
.uno-energy-trail.active{
  animation:unoEnergyTrail .58s ease-out forwards;
}
.uno-lightning-bolt{
  position:absolute;
  width:8px;
  height:48%;
  opacity:0;
  transform:rotate(var(--bolt-rotate));
  animation:unoLightning .55s var(--bolt-delay) ease-out forwards;
  background:linear-gradient(180deg,transparent 0,#fff 12%,#cf7cff 38%,#fff 58%,transparent 100%);
  clip-path:polygon(42% 0,100% 0,62% 43%,100% 43%,16% 100%,40% 55%,0 55%);
  filter:drop-shadow(0 0 10px #be5cff);
}
body.uno-shake-light .game-shell,
body.uno-shake-light .uno-game{
  animation:unoShakeLight .34s linear;
}
body.uno-shake-heavy .game-shell,
body.uno-shake-heavy .uno-game{
  animation:unoShakeHeavy .55s linear;
}
@keyframes unoBlueFlash{
  0%{opacity:0}
  18%{opacity:1}
  100%{opacity:0}
}
@keyframes unoPurpleFlash{
  0%{opacity:0}
  12%{opacity:1}
  35%{opacity:.3}
  48%{opacity:.9}
  100%{opacity:0}
}
@keyframes unoFxNumber{
  0%{transform:translate(-50%,-50%) scale(.15) rotate(-8deg);opacity:0}
  45%{transform:translate(-50%,-50%) scale(1.2) rotate(4deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes unoFxCaption{
  0%{transform:translate(-50%,24px);opacity:0}
  35%{opacity:1}
  100%{transform:translate(-50%,0);opacity:0}
}
@keyframes unoFxParticle{
  0%{transform:translate(0,0) scale(.2);opacity:0}
  20%{opacity:1}
  100%{transform:translate(var(--fx-x),var(--fx-y)) scale(0);opacity:0}
}
@keyframes unoEnergyTrail{
  0%{transform:rotate(inherit) scaleX(0);opacity:0}
  20%{opacity:1}
  65%{transform:rotate(inherit) scaleX(1);opacity:1}
  100%{opacity:0}
}
@keyframes unoLightning{
  0%{opacity:0;transform:translateY(-40px) rotate(var(--bolt-rotate)) scaleY(.4)}
  22%{opacity:1}
  45%{opacity:.25}
  62%{opacity:1}
  100%{opacity:0;transform:translateY(120px) rotate(var(--bolt-rotate)) scaleY(1.15)}
}
@keyframes unoShakeLight{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(4px,-2px)}
  60%{transform:translate(-2px,-1px)}
  80%{transform:translate(2px,2px)}
}
@keyframes unoShakeHeavy{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-8px,4px) rotate(-.4deg)}
  20%{transform:translate(7px,-5px) rotate(.4deg)}
  30%{transform:translate(-6px,-3px)}
  40%{transform:translate(8px,4px)}
  52%{transform:translate(-5px,2px)}
  66%{transform:translate(4px,-3px)}
  80%{transform:translate(-2px,2px)}
}
@media(max-width:768px){
  .uno-special-fx-center>strong{
    font-size:clamp(66px,24vw,120px);
  }
  .uno-lightning-bolt:nth-of-type(n+6){
    display:none;
  }
  .uno-fx-particle:nth-of-type(n+24){
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-special-fx-layer,
  .uno-energy-trail,
  .uno-lightning-bolt{
    display:none!important;
  }
  body.uno-shake-light .game-shell,
  body.uno-shake-heavy .game-shell{
    animation:none!important;
  }
}

/* DOSMOS UNO V4.5.1B — Skip, Reverse & Wild Color FX */
.uno-special-fx-layer.skip .uno-special-fx-flash{
  background:radial-gradient(circle,rgba(255,90,90,.62),rgba(135,18,27,.25) 44%,transparent 72%);
  animation:unoRedFlash .58s ease-out;
}
.uno-special-fx-layer.reverse .uno-special-fx-flash{
  background:radial-gradient(circle,rgba(255,220,115,.52),rgba(117,77,12,.22) 46%,transparent 72%);
  animation:unoGoldFlash .7s ease-out;
}
.uno-special-fx-layer.wild-color .uno-special-fx-flash{
  background:conic-gradient(
    from 0deg,
    rgba(230,63,73,.35),
    rgba(52,127,217,.35),
    rgba(49,172,100,.35),
    rgba(230,185,47,.35),
    rgba(230,63,73,.35)
  );
  animation:unoWildFlash .75s ease-out;
}
.uno-skip-symbol{
  position:absolute;
  left:50%;
  top:50%;
  width:150px;
  height:150px;
  transform:translate(-50%,-50%) scale(.3);
  border:15px solid #ff585f;
  border-radius:50%;
  box-shadow:0 0 24px rgba(255,54,65,.7),inset 0 0 20px rgba(255,54,65,.5);
  animation:unoSkipPop .62s cubic-bezier(.15,.8,.22,1) forwards;
}
.uno-skip-symbol i{
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:16px;
  border-radius:999px;
  background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 18px #ff6268;
}
.uno-skip-symbol b{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.75);
  animation:unoImpactRing .65s ease-out forwards;
}
.uno-special-fx-layer.skip .uno-special-fx-center>strong{
  top:calc(50% + 115px);
  color:#ff686e;
  font-size:clamp(34px,8vw,72px);
}
.uno-special-fx-layer.skip .uno-special-fx-center>span{
  top:calc(50% + 162px);
}
.uno-reverse-symbol{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.2);
  color:#ffe078;
  font-size:clamp(120px,24vw,260px);
  line-height:1;
  font-weight:1000;
  text-shadow:0 0 22px rgba(255,198,60,.9);
  animation:unoReverseSymbol .78s cubic-bezier(.17,.76,.22,1) forwards;
}
.uno-reverse-symbol.left{
  animation-name:unoReverseSymbolLeft;
}
.uno-special-fx-layer.reverse .uno-special-fx-center>strong{
  top:calc(50% + 110px);
  color:#ffe078;
  font-size:clamp(30px,7vw,64px);
}
.uno-special-fx-layer.reverse .uno-special-fx-center>span{
  top:calc(50% + 154px);
}
.uno-wild-color-wheel{
  position:absolute;
  left:50%;
  top:50%;
  width:190px;
  height:190px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2) rotate(-120deg);
  background:conic-gradient(#e63f49 0 25%,#347fd9 0 50%,#31ac64 0 75%,#e6b92f 0);
  box-shadow:0 0 25px rgba(255,255,255,.5),0 0 65px rgba(124,86,255,.65);
  animation:unoWildWheel .72s cubic-bezier(.16,.8,.2,1) forwards;
}
.uno-wild-color-wheel::after{
  content:'';
  position:absolute;
  inset:24%;
  border-radius:50%;
  background:#111;
  border:5px solid #fff;
}
.uno-special-fx-layer.wild-red .uno-wild-color-wheel{filter:hue-rotate(0deg) saturate(1.2)}
.uno-special-fx-layer.wild-yellow .uno-wild-color-wheel{filter:hue-rotate(45deg) saturate(1.15)}
.uno-special-fx-layer.wild-green .uno-wild-color-wheel{filter:hue-rotate(95deg) saturate(1.1)}
.uno-special-fx-layer.wild-blue .uno-wild-color-wheel{filter:hue-rotate(180deg) saturate(1.15)}
.uno-special-fx-layer.wild-color .uno-special-fx-center>strong{
  top:calc(50% + 120px);
  color:#fff;
  font-size:clamp(30px,7vw,64px);
}
.uno-special-fx-layer.wild-color .uno-special-fx-center>span{
  top:calc(50% + 164px);
}
.uno-fx-particle.red{
  background:#ff666d;
  box-shadow:0 0 14px #ff343e;
}
.uno-fx-particle.gold,
.uno-fx-particle.yellow{
  background:#ffe079;
  box-shadow:0 0 14px #e9b82e;
}
.uno-fx-particle.green{
  background:#6ee59a;
  box-shadow:0 0 14px #32b869;
}
.uno-fx-particle.blue{
  background:#73d6ff;
  box-shadow:0 0 14px #4aaaff;
}
.uno-fx-particle.rainbow{
  background:conic-gradient(#e63f49,#347fd9,#31ac64,#e6b92f,#e63f49);
  box-shadow:0 0 16px rgba(255,255,255,.8);
}
.uno-arena-reverse-right{
  animation:unoArenaReverseRight .85s cubic-bezier(.15,.8,.22,1);
  transform-origin:center;
}
.uno-arena-reverse-left{
  animation:unoArenaReverseLeft .85s cubic-bezier(.15,.8,.22,1);
  transform-origin:center;
}
.uno-game,
.game-shell,
.game-board{
  transition:background .55s ease,box-shadow .55s ease,filter .55s ease;
}
.uno-arena-color-red{
  box-shadow:inset 0 0 90px rgba(230,63,73,.22)!important;
}
.uno-arena-color-yellow{
  box-shadow:inset 0 0 90px rgba(230,185,47,.22)!important;
}
.uno-arena-color-green{
  box-shadow:inset 0 0 90px rgba(49,172,100,.22)!important;
}
.uno-arena-color-blue{
  box-shadow:inset 0 0 90px rgba(52,127,217,.22)!important;
}
.uno-arena-color-wild{
  box-shadow:
    inset 0 0 80px rgba(121,88,255,.18),
    inset 35px 0 65px rgba(230,63,73,.12),
    inset -35px 0 65px rgba(52,127,217,.12)!important;
}
@keyframes unoRedFlash{
  0%{opacity:0}
  16%{opacity:1}
  100%{opacity:0}
}
@keyframes unoGoldFlash{
  0%{opacity:0}
  18%{opacity:.9}
  100%{opacity:0}
}
@keyframes unoWildFlash{
  0%{opacity:0;transform:rotate(-25deg) scale(.7)}
  30%{opacity:.85}
  100%{opacity:0;transform:rotate(90deg) scale(1.35)}
}
@keyframes unoSkipPop{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-25deg);opacity:0}
  48%{transform:translate(-50%,-50%) scale(1.12) rotate(7deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes unoReverseSymbol{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-240deg);opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.12) rotate(24deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(360deg);opacity:0}
}
@keyframes unoReverseSymbolLeft{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(240deg);opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.12) rotate(-24deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-360deg);opacity:0}
}
@keyframes unoWildWheel{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(-180deg);opacity:0}
  55%{transform:translate(-50%,-50%) scale(1.15) rotate(25deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(180deg);opacity:0}
}
@keyframes unoArenaReverseRight{
  0%{transform:rotate(0deg) scale(1)}
  45%{transform:rotate(8deg) scale(.97)}
  100%{transform:rotate(0deg) scale(1)}
}
@keyframes unoArenaReverseLeft{
  0%{transform:rotate(0deg) scale(1)}
  45%{transform:rotate(-8deg) scale(.97)}
  100%{transform:rotate(0deg) scale(1)}
}
@media(max-width:768px){
  .uno-skip-symbol{width:118px;height:118px;border-width:12px}
  .uno-wild-color-wheel{width:145px;height:145px}
  .uno-reverse-symbol{font-size:130px}
}
@media(prefers-reduced-motion:reduce){
  .uno-arena-reverse-right,
  .uno-arena-reverse-left{
    animation:none!important;
  }
}

/* DOSMOS UNO V4.5.2 — Victory & Defeat FX */
.uno-result-fx-layer{
  position:fixed;
  inset:0;
  z-index:13000;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:auto;
  opacity:0;
  transition:opacity .32s ease;
}
.uno-result-fx-layer.active{opacity:1}
.uno-result-fx-layer.closing{opacity:0}
.uno-result-backdrop{
  position:absolute;
  inset:0;
  backdrop-filter:blur(8px);
}
.uno-result-fx-layer.victory .uno-result-backdrop{
  background:
    radial-gradient(circle at 50% 38%,rgba(255,218,94,.34),transparent 32%),
    rgba(3,8,14,.88);
}
.uno-result-fx-layer.defeat .uno-result-backdrop{
  background:
    radial-gradient(circle at 50% 40%,rgba(120,42,55,.25),transparent 35%),
    rgba(3,5,9,.93);
}
.uno-result-rays{
  position:absolute;
  width:min(92vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
}
.uno-result-fx-layer.victory .uno-result-rays{
  background:repeating-conic-gradient(
    from 0deg,
    rgba(255,229,126,.20) 0 8deg,
    transparent 8deg 18deg
  );
  animation:unoVictoryRays 9s linear infinite;
}
.uno-result-fx-layer.celebrate .uno-result-rays{
  opacity:1;
  transition:opacity .5s ease;
}
.uno-result-content{
  position:relative;
  z-index:2;
  width:min(470px,88vw);
  padding:34px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(28,31,40,.97),rgba(8,10,15,.97));
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  text-align:center;
  transform:translateY(38px) scale(.82);
  opacity:0;
  cursor:pointer;
}
.uno-result-fx-layer.active .uno-result-content{
  animation:unoResultCardIn .72s cubic-bezier(.16,.82,.22,1) forwards;
}
.uno-result-icon{
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:50%;
  font-size:58px;
}
.uno-result-fx-layer.victory .uno-result-icon{
  background:linear-gradient(145deg,#f7d86b,#9d6e15);
  box-shadow:0 0 0 8px rgba(246,207,90,.09),0 0 48px rgba(246,207,90,.42);
  animation:unoTrophyBounce 1.15s .4s ease both;
}
.uno-result-fx-layer.defeat .uno-result-icon{
  background:linear-gradient(145deg,#923e4b,#35161d);
  box-shadow:0 0 0 8px rgba(210,77,91,.06),0 0 42px rgba(160,48,63,.25);
  animation:unoDefeatDrop .82s .35s ease both;
}
.uno-result-content>small{
  display:block;
  color:#8f97a3;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.15em;
}
.uno-result-content>h2{
  margin:6px 0 8px;
  font-size:clamp(42px,10vw,78px);
  line-height:1;
}
.uno-result-fx-layer.victory h2{
  color:#f2cf61;
  text-shadow:0 0 22px rgba(242,207,97,.35);
}
.uno-result-fx-layer.defeat h2{
  color:#d66c78;
  text-shadow:0 0 20px rgba(214,108,120,.24);
}
.uno-result-content>p{
  margin:0;
  color:#a2a9b3;
}
.uno-result-rank-change{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:18px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.uno-result-rank-change b{
  color:#fff;
  font-size:12px;
}
.uno-result-rank-change span{
  font-size:15px;
  font-weight:1000;
}
.uno-result-rank-change.rank-up span{color:#78e19c}
.uno-result-rank-change.rank-down span{color:#f07a88}
.uno-result-rank-change.rank-up{
  animation:unoRankUpGlow 1.2s .8s ease both;
}
.uno-result-rank-change.rank-down{
  animation:unoRankDownPulse 1s .7s ease both;
}
.uno-result-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.uno-result-confetti{
  position:absolute;
  top:-24px;
  width:10px;
  height:18px;
  background:var(--confetti-color);
  opacity:0;
  animation:unoConfettiFall var(--fall-duration) var(--fall-delay) linear forwards;
}
.uno-result-confetti.circle{border-radius:50%}
.uno-result-confetti.strip{
  width:5px;
  height:24px;
  border-radius:999px;
}
.uno-result-coin{
  position:absolute;
  left:50%;
  top:45%;
  width:24px;
  height:24px;
  border:3px solid #fff0a6;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7b4,#efc241 50%,#9b6911);
  box-shadow:0 0 14px rgba(239,194,65,.72);
  opacity:0;
  animation:unoCoinBurst .9s var(--coin-delay) cubic-bezier(.18,.78,.25,1) forwards;
}
.uno-result-coin::after{
  content:'D';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#7b5008;
  font-size:10px;
  font-weight:1000;
}
.uno-defeat-falling-card{
  position:absolute;
  top:-100px;
  width:54px;
  height:78px;
  display:grid;
  place-items:center;
  border:3px solid #d9dbe0;
  border-radius:9px;
  background:radial-gradient(circle,#882f3f 0 28%,#15171d 30%);
  color:#fff;
  font-size:6px;
  font-weight:1000;
  opacity:0;
  animation:unoDefeatCardFall var(--card-duration) var(--card-delay) ease-in forwards;
}
.uno-result-fx-layer.dimmed .uno-result-content{
  filter:saturate(.72) brightness(.82);
}
body.uno-result-active{
  overflow:hidden!important;
}
@keyframes unoResultCardIn{
  0%{transform:translateY(48px) scale(.78);opacity:0}
  62%{transform:translateY(-8px) scale(1.035);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes unoVictoryRays{
  to{transform:rotate(360deg)}
}
@keyframes unoTrophyBounce{
  0%{transform:translateY(-80px) rotate(-12deg) scale(.4);opacity:0}
  56%{transform:translateY(8px) rotate(6deg) scale(1.14);opacity:1}
  76%{transform:translateY(-5px) rotate(-2deg) scale(.98)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes unoDefeatDrop{
  0%{transform:translateY(-55px) rotate(16deg) scale(.55);opacity:0}
  65%{transform:translateY(7px) rotate(-5deg) scale(1.05);opacity:1}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@keyframes unoRankUpGlow{
  0%{box-shadow:0 0 0 rgba(89,220,134,0);transform:scale(.92);opacity:.3}
  55%{box-shadow:0 0 28px rgba(89,220,134,.26);transform:scale(1.04);opacity:1}
  100%{box-shadow:0 0 0 rgba(89,220,134,0);transform:scale(1)}
}
@keyframes unoRankDownPulse{
  0%{transform:translateX(0);opacity:.4}
  25%{transform:translateX(-5px);opacity:1}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}
@keyframes unoConfettiFall{
  0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}
  10%{opacity:1}
  100%{
    transform:translate3d(var(--fall-x),110vh,0) rotate(var(--fall-rotate));
    opacity:.8;
  }
}
@keyframes unoCoinBurst{
  0%{transform:translate(-50%,-50%) scale(.2) rotateY(0);opacity:0}
  18%{opacity:1}
  100%{
    transform:translate(
      calc(-50% + var(--coin-x)),
      calc(-50% + var(--coin-y))
    ) scale(.72) rotateY(720deg);
    opacity:0;
  }
}
@keyframes unoDefeatCardFall{
  0%{transform:translateY(-120px) rotate(0);opacity:0}
  12%{opacity:.75}
  100%{
    transform:translateY(120vh) rotate(var(--card-rotate));
    opacity:0;
  }
}
@media(max-width:768px){
  .uno-result-content{
    width:calc(100% - 24px);
    padding:28px 18px;
    border-radius:20px;
  }
  .uno-result-icon{
    width:92px;
    height:92px;
    font-size:48px;
  }
  .uno-result-confetti:nth-of-type(n+46),
  .uno-result-coin:nth-of-type(n+21),
  .uno-defeat-falling-card:nth-of-type(n+13){
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-result-confetti,
  .uno-result-coin,
  .uno-defeat-falling-card,
  .uno-result-rays{
    display:none!important;
  }
  .uno-result-content,
  .uno-result-icon,
  .uno-result-rank-change{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* DOSMOS UNO V4.5.3 — Combo, UNO Warning & MVP FX */
.uno-combo-fx{
  position:fixed;
  inset:0;
  z-index:12850;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.uno-combo-fx.active{opacity:1}
.uno-combo-fx.closing{opacity:0}
.uno-combo-energy{
  position:absolute;
  width:min(80vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,197,63,.34),rgba(104,50,255,.12) 38%,transparent 70%);
  animation:unoComboEnergy 1.15s ease-out;
}
.uno-combo-copy{
  position:relative;
  text-align:center;
  transform:scale(.35) rotate(-6deg);
  opacity:0;
  animation:unoComboCopy 1s cubic-bezier(.16,.8,.2,1) forwards;
}
.uno-combo-copy small{
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.uno-combo-copy strong{
  display:block;
  margin-top:4px;
  color:#ffd563;
  font-size:clamp(42px,11vw,100px);
  line-height:.9;
  font-weight:1000;
  text-shadow:0 0 15px #e09b20,0 0 38px rgba(130,72,255,.65);
}
.uno-combo-copy b{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:clamp(30px,7vw,62px);
  text-shadow:0 0 18px rgba(255,255,255,.45);
}
.uno-combo-fx.combo-10 .uno-combo-copy strong{
  color:#fff;
  background:linear-gradient(90deg,#ff6969,#ffd86c,#76e5a1,#75bbff,#d98cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.uno-combo-lightning{
  position:absolute;
  top:-10%;
  width:8px;
  height:48%;
  background:linear-gradient(180deg,transparent,#fff 16%,#ffd05b 42%,#fff 65%,transparent);
  clip-path:polygon(43% 0,100% 0,62% 42%,100% 42%,15% 100%,40% 56%,0 56%);
  filter:drop-shadow(0 0 12px #ffc342);
  opacity:0;
  transform:rotate(var(--combo-bolt-rotate));
  animation:unoComboBolt .65s var(--combo-bolt-delay) ease-out forwards;
}
body.uno-combo-shake .game-shell{
  animation:unoShakeLight .38s linear;
}
.uno-warning-fx{
  position:fixed;
  inset:0;
  z-index:12820;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(255,66,74,.18),transparent 52%);
  transition:opacity .16s ease;
}
.uno-warning-fx.active{opacity:1}
.uno-warning-fx.closing{opacity:0}
.uno-warning-ring{
  position:absolute;
  width:min(65vw,400px);
  aspect-ratio:1;
  border:5px solid rgba(255,77,86,.8);
  border-radius:50%;
  box-shadow:0 0 32px rgba(255,55,65,.55),inset 0 0 32px rgba(255,55,65,.25);
  animation:unoWarningRing 1.2s ease-out infinite;
}
.uno-warning-copy{
  position:relative;
  text-align:center;
  animation:unoWarningCopy .95s cubic-bezier(.16,.8,.2,1);
}
.uno-warning-copy small{
  display:block;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.uno-warning-copy strong{
  display:block;
  color:#ff525d;
  font-size:clamp(76px,22vw,180px);
  line-height:.9;
  font-weight:1000;
  text-shadow:0 0 15px #fff,0 0 42px #ff2633;
}
.uno-warning-copy span{
  display:block;
  margin-top:10px;
  color:#fff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.15em;
}
.uno-player-warning{
  animation:unoPlayerWarning 1.4s ease;
}
.uno-mvp-screen{
  position:fixed;
  inset:0;
  z-index:13100;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.uno-mvp-screen.active{
  opacity:1;
  pointer-events:auto;
}
.uno-mvp-screen.closing{opacity:0}
.uno-mvp-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%,rgba(250,203,72,.25),transparent 32%),
    rgba(3,6,11,.92);
  backdrop-filter:blur(8px);
}
.uno-mvp-card{
  position:relative;
  width:min(570px,94vw);
  max-height:90vh;
  overflow:auto;
  padding:30px 24px 24px;
  border:1px solid rgba(242,202,83,.38);
  border-radius:24px;
  background:linear-gradient(150deg,#20232c,#090b10);
  box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 42px rgba(240,192,62,.12);
  text-align:center;
  transform:translateY(38px) scale(.88);
  animation:unoMvpIn .7s cubic-bezier(.16,.8,.2,1) forwards;
}
.uno-mvp-close{
  position:absolute;
  right:12px;
  top:12px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:#20242c;
  color:#fff;
  font-size:24px;
}
.uno-mvp-crown{
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:50%;
  background:linear-gradient(145deg,#f6d665,#936312);
  box-shadow:0 0 0 8px rgba(244,204,84,.07),0 0 40px rgba(244,204,84,.32);
  font-size:48px;
  animation:unoMvpCrown 1.15s .35s ease both;
}
.uno-mvp-card>small{
  display:block;
  margin-top:14px;
  color:#9098a4;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
}
.uno-mvp-card>h2{
  margin:3px 0;
  color:#f2ce5d;
  font-size:54px;
  line-height:1;
}
.uno-mvp-card>strong{
  display:block;
  color:#fff;
  font-size:24px;
}
.uno-mvp-score{
  display:inline-block;
  margin-top:8px;
  padding:6px 13px;
  border-radius:999px;
  background:rgba(242,206,93,.09);
  color:#f2ce5d;
  font-size:11px;
  font-weight:1000;
}
.uno-mvp-awards{
  display:grid;
  gap:8px;
  margin-top:18px;
}
.uno-mvp-awards article{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  text-align:left;
}
.uno-mvp-awards article>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(242,206,93,.08);
  font-size:21px;
}
.uno-mvp-awards small{
  display:block;
  color:#888f99;
  font-size:7px;
  font-weight:900;
}
.uno-mvp-awards b{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:12px;
}
.uno-mvp-awards em{
  color:#f1cf62;
  font-size:17px;
  font-style:normal;
  font-weight:1000;
}
.uno-mvp-continue{
  width:100%;
  min-height:45px;
  margin-top:16px;
  border:1px solid rgba(242,206,93,.45);
  border-radius:10px;
  background:linear-gradient(135deg,#e2c15c,#916516);
  color:#181105;
  font-weight:1000;
}
@keyframes unoComboEnergy{
  0%{transform:scale(.2);opacity:0}
  35%{opacity:1}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes unoComboCopy{
  0%{transform:scale(.3) rotate(-10deg);opacity:0}
  50%{transform:scale(1.15) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes unoComboBolt{
  0%{transform:translateY(-80px) rotate(var(--combo-bolt-rotate)) scaleY(.4);opacity:0}
  28%{opacity:1}
  58%{opacity:.25}
  76%{opacity:1}
  100%{transform:translateY(150px) rotate(var(--combo-bolt-rotate)) scaleY(1.15);opacity:0}
}
@keyframes unoWarningRing{
  0%{transform:scale(.45);opacity:1}
  100%{transform:scale(1.35);opacity:0}
}
@keyframes unoWarningCopy{
  0%{transform:scale(.2) rotate(-8deg);opacity:0}
  58%{transform:scale(1.12) rotate(3deg);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes unoPlayerWarning{
  0%,100%{filter:none}
  20%,60%{filter:brightness(1.7) drop-shadow(0 0 16px #ff3d49)}
  40%,80%{filter:brightness(.85)}
}
@keyframes unoMvpIn{
  0%{transform:translateY(45px) scale(.84);opacity:0}
  65%{transform:translateY(-7px) scale(1.025);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes unoMvpCrown{
  0%{transform:translateY(-70px) rotate(-15deg) scale(.4);opacity:0}
  58%{transform:translateY(8px) rotate(6deg) scale(1.15);opacity:1}
  100%{transform:translateY(0) rotate(0) scale(1)}
}
@media(max-width:768px){
  .uno-combo-copy strong{font-size:50px}
  .uno-warning-ring{width:260px}
  .uno-warning-copy strong{font-size:92px}
  .uno-mvp-card{padding:25px 14px 16px}
}
@media(prefers-reduced-motion:reduce){
  .uno-combo-energy,
  .uno-combo-lightning,
  .uno-warning-ring{
    display:none!important;
  }
  .uno-combo-copy,
  .uno-warning-copy,
  .uno-mvp-card,
  .uno-mvp-crown{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
  }
}

/* DOSMOS UNO V4.5.4 — Arena FX & Performance Mode */
.uno-arena-fx-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
}
.uno-arena-fx-layer~*{
  position:relative;
  z-index:1;
}
.uno-arena-ambient{
  position:absolute;
  inset:-18%;
  opacity:.8;
  filter:blur(28px);
  transition:background 1s ease,opacity .5s ease;
  animation:unoArenaAmbientFloat 12s ease-in-out infinite alternate;
}
.uno-arena-ambient[data-color="red"]{
  background:
    radial-gradient(circle at 25% 25%,rgba(229,58,69,.30),transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(120,18,31,.24),transparent 34%);
}
.uno-arena-ambient[data-color="yellow"]{
  background:
    radial-gradient(circle at 24% 30%,rgba(234,188,43,.28),transparent 31%),
    radial-gradient(circle at 78% 75%,rgba(130,85,12,.22),transparent 34%);
}
.uno-arena-ambient[data-color="green"]{
  background:
    radial-gradient(circle at 24% 30%,rgba(42,181,101,.28),transparent 31%),
    radial-gradient(circle at 78% 75%,rgba(11,101,60,.22),transparent 34%);
}
.uno-arena-ambient[data-color="blue"]{
  background:
    radial-gradient(circle at 24% 30%,rgba(47,129,223,.30),transparent 31%),
    radial-gradient(circle at 78% 75%,rgba(29,60,142,.24),transparent 34%);
}
.uno-arena-ambient[data-color="wild"]{
  background:
    radial-gradient(circle at 18% 25%,rgba(229,58,69,.20),transparent 28%),
    radial-gradient(circle at 82% 25%,rgba(47,129,223,.20),transparent 28%),
    radial-gradient(circle at 20% 80%,rgba(42,181,101,.18),transparent 28%),
    radial-gradient(circle at 80% 80%,rgba(234,188,43,.18),transparent 28%);
}
.uno-arena-grid{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at center,#000,transparent 80%);
  animation:unoArenaGridMove 18s linear infinite;
}
.uno-arena-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.uno-arena-orbit::after{
  content:'';
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px currentColor;
}
.uno-arena-orbit.orbit-one{
  width:min(76vw,620px);
  aspect-ratio:1;
  color:#72baff;
  animation:unoArenaOrbit 18s linear infinite;
}
.uno-arena-orbit.orbit-two{
  width:min(54vw,430px);
  aspect-ratio:1;
  color:#f0ca58;
  animation:unoArenaOrbitReverse 13s linear infinite;
}
.uno-arena-particle{
  position:absolute;
  width:var(--arena-size);
  height:var(--arena-size);
  border-radius:50%;
  background:rgba(255,255,255,.65);
  box-shadow:0 0 10px rgba(255,255,255,.5);
  opacity:0;
  animation:unoArenaParticle var(--arena-duration) var(--arena-delay) ease-in-out infinite;
}
.uno-arena-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.30) 100%);
}
.uno-arena-fx-layer.my-turn .uno-arena-ambient{
  opacity:1;
  filter:blur(22px) brightness(1.16);
}
.uno-arena-fx-layer.my-turn .uno-arena-grid{
  opacity:.24;
}
.fx-quality-panel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(61,193,255,.22);
  border-radius:11px;
  background:rgba(61,193,255,.05);
}
.fx-quality-panel b{display:block}
.fx-quality-panel small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px;
}
.fx-quality-controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.fx-quality-controls select{
  min-height:38px;
  padding:0 9px;
  border:1px solid #39404a;
  border-radius:8px;
  background:#0a0c10;
  color:#fff;
}
.fx-quality-controls span{
  min-width:72px;
  padding:6px 8px;
  border-radius:999px;
  background:#151922;
  color:#8bcfff;
  text-align:center;
  font-size:8px;
  font-weight:1000;
}
html[data-uno-fx-quality="low"] .uno-arena-grid,
html[data-uno-fx-quality="low"] .uno-arena-orbit,
html[data-uno-fx-quality="low"] .uno-arena-particle:nth-child(n+9){
  display:none!important;
}
html[data-uno-fx-quality="low"] .uno-arena-ambient{
  animation:none!important;
  filter:blur(36px);
  opacity:.48;
}
html[data-uno-fx-quality="medium"] .uno-arena-particle:nth-child(n+19){
  display:none!important;
}
html[data-uno-fx-quality="medium"] .uno-arena-orbit.orbit-two{
  display:none!important;
}
@keyframes unoArenaAmbientFloat{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  100%{transform:translate3d(3%,2%,0) scale(1.08)}
}
@keyframes unoArenaGridMove{
  to{background-position:38px 38px}
}
@keyframes unoArenaOrbit{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes unoArenaOrbitReverse{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0)}
}
@keyframes unoArenaParticle{
  0%{transform:translate3d(0,20px,0) scale(.4);opacity:0}
  20%{opacity:.8}
  70%{opacity:.45}
  100%{transform:translate3d(var(--arena-x),var(--arena-y),0) scale(1.1);opacity:0}
}
@media(max-width:768px){
  .fx-quality-panel{
    grid-template-columns:1fr;
  }
  .fx-quality-controls{
    justify-content:space-between;
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-arena-ambient,
  .uno-arena-grid,
  .uno-arena-orbit,
  .uno-arena-particle{
    animation:none!important;
  }
  .uno-arena-grid,
  .uno-arena-orbit,
  .uno-arena-particle{
    display:none!important;
  }
}

/* DOSMOS UNO V4.5.5 — Final Polish & Stability */
.fx-stability-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(89,220,134,.22);
  border-radius:11px;
  background:rgba(89,220,134,.045);
}
.fx-stability-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.fx-stability-title b{display:block}
.fx-stability-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px;
}
.fx-stability-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(89,220,134,.09);
  color:#7ee3a0;
  font-size:8px;
  font-weight:1000;
}
.fx-stability-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer;
}
.fx-stability-option b{display:block}
.fx-stability-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px;
}
.fx-stability-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.fx-stability-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s;
}
.fx-stability-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}
.fx-stability-option input:checked+i{background:#2f9c59}
.fx-stability-option input:checked+i::after{transform:translateX(18px)}
.fx-stability-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:8px;
}
.fx-stability-metrics>div{
  padding:9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.022);
  text-align:center;
}
.fx-stability-metrics small{
  display:block;
  color:#858c96;
  font-size:7px;
  font-weight:900;
}
.fx-stability-metrics b{
  display:block;
  margin-top:4px;
  color:#e8edf4;
  font-size:11px;
}
.reset-fx-engine-btn{
  width:100%;
  min-height:40px;
  margin-top:9px;
  border:1px solid rgba(89,220,134,.28);
  border-radius:9px;
  background:rgba(89,220,134,.07);
  color:#82e3a3;
  font-weight:900;
}
html.uno-page-hidden .uno-arena-fx-layer,
html.uno-page-hidden .uno-flying-card,
html.uno-page-hidden .uno-draw-flying-card{
  animation-play-state:paused!important;
}
html.uno-battery-saver .uno-arena-grid,
html.uno-battery-saver .uno-arena-orbit,
html.uno-battery-saver .uno-combo-lightning,
html.uno-battery-saver .uno-lightning-bolt:nth-of-type(n+4),
html.uno-battery-saver .uno-result-confetti:nth-of-type(n+25),
html.uno-battery-saver .uno-result-coin:nth-of-type(n+13),
html.uno-battery-saver .uno-defeat-falling-card:nth-of-type(n+9){
  display:none!important;
}
html.uno-battery-saver .uno-arena-ambient{
  animation:none!important;
  filter:blur(42px)!important;
  opacity:.42!important;
}
html.uno-battery-saver .uno-special-fx-layer,
html.uno-battery-saver .uno-result-fx-layer{
  backdrop-filter:none!important;
}
html.uno-battery-saver .uno-flying-card{
  filter:none!important;
}
@media(max-width:768px){
  .fx-stability-metrics{
    grid-template-columns:1fr;
  }
}

/* DOSMOS UNO V5.0.0 — Human Thinking Engine */
.ai-thinking-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(143,102,255,.25);
  border-radius:11px;
  background:rgba(143,102,255,.055)
}
.ai-thinking-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.ai-thinking-title b{display:block}
.ai-thinking-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-thinking-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(143,102,255,.12);
  color:#c4b4ff;
  font-size:8px;
  font-weight:1000
}
.ai-thinking-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.ai-thinking-option b,.ai-thinking-speed-row b{display:block}
.ai-thinking-option small,.ai-thinking-speed-row small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-thinking-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.ai-thinking-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.ai-thinking-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.ai-thinking-option input:checked+i{background:#7654d7}
.ai-thinking-option input:checked+i::after{transform:translateX(18px)}
.ai-thinking-speed-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07)
}
.ai-thinking-speed-row select{
  min-height:38px;
  padding:0 9px;
  border:1px solid #393f49;
  border-radius:8px;
  background:#0a0c10;
  color:#fff
}
.uno-ai-is-thinking{
  position:relative
}
.uno-ai-thinking-badge{
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  z-index:30;
  display:flex;
  align-items:center;
  gap:3px;
  min-width:max-content;
  padding:6px 8px;
  border:1px solid rgba(143,102,255,.3);
  border-radius:999px;
  background:rgba(13,15,22,.94);
  color:#c8bcff;
  font-size:8px;
  font-weight:900;
  transform:translateX(-50%);
  box-shadow:0 8px 18px rgba(0,0,0,.28)
}
.uno-ai-thinking-badge i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ad93ff;
  animation:unoAiThinkingDot .9s ease-in-out infinite
}
.uno-ai-thinking-badge i:nth-child(2){animation-delay:.14s}
.uno-ai-thinking-badge i:nth-child(3){animation-delay:.28s}
.uno-ai-thinking-badge span{margin-left:3px}
@keyframes unoAiThinkingDot{
  0%,100%{transform:translateY(0);opacity:.35}
  50%{transform:translateY(-3px);opacity:1}
}
@media(max-width:768px){
  .ai-thinking-speed-row{grid-template-columns:1fr}
  .uno-ai-thinking-badge{
    font-size:7px;
    padding:5px 7px
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-ai-thinking-badge i{animation:none!important}
}

/* DOSMOS UNO V5.0.1 — Personality AI */
.ai-personality-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(255,139,76,.24);
  border-radius:11px;
  background:rgba(255,139,76,.05)
}
.ai-personality-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.ai-personality-title b{display:block}
.ai-personality-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-personality-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,139,76,.11);
  color:#ffb27d;
  font-size:8px;
  font-weight:1000
}
.ai-personality-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.ai-personality-option b{display:block}
.ai-personality-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-personality-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.ai-personality-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.ai-personality-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.ai-personality-option input:checked+i{background:#d76b34}
.ai-personality-option input:checked+i::after{transform:translateX(18px)}
.ai-personality-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px
}
.ai-personality-list span{
  padding:7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.022);
  color:#cbd1da;
  text-align:center;
  font-size:8px;
  font-weight:900
}
.uno-ai-personality-badge{
  position:absolute;
  right:4px;
  top:4px;
  z-index:35;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid rgba(255,139,76,.3);
  border-radius:999px;
  background:rgba(15,17,23,.92);
  color:#ffb27d;
  font-size:7px;
  font-weight:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.26)
}
.uno-ai-personality-badge span{font-size:10px}
@media(max-width:768px){
  .ai-personality-list{grid-template-columns:repeat(2,1fr)}
  .uno-ai-personality-badge{
    right:2px;
    top:2px;
    padding:3px 5px
  }
}

/* DOSMOS UNO V5.0.2 — Smart Bluff Engine */
.ai-bluff-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(214,85,255,.25);
  border-radius:11px;
  background:rgba(214,85,255,.05)
}
.ai-bluff-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.ai-bluff-title b{display:block}
.ai-bluff-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-bluff-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(214,85,255,.11);
  color:#e7a5ff;
  font-size:8px;
  font-weight:1000
}
.ai-bluff-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.ai-bluff-option b{display:block}
.ai-bluff-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-bluff-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.ai-bluff-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.ai-bluff-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.ai-bluff-option input:checked+i{background:#9b38bd}
.ai-bluff-option input:checked+i::after{transform:translateX(18px)}
.ai-bluff-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-top:8px
}
.ai-bluff-features span{
  padding:7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.022);
  color:#d8c7df;
  text-align:center;
  font-size:8px;
  font-weight:900
}
.ai-bluff-stats-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:#0b0d12
}
.ai-bluff-stats-row small{
  color:#868d97;
  font-size:7px;
  font-weight:900
}
.ai-bluff-stats-row b{
  color:#e7a5ff;
  font-size:10px
}
.uno-ai-bluff-badge{
  position:absolute;
  left:4px;
  top:4px;
  z-index:36;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid rgba(214,85,255,.3);
  border-radius:999px;
  background:rgba(15,17,23,.92);
  color:#e8b0ff;
  font-size:7px;
  font-weight:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.26)
}
.uno-ai-bluff-badge span{font-size:10px}
.uno-ai-bluff-badge em{
  color:#9da5af;
  font-size:7px;
  font-style:normal
}
.uno-ai-bluff-badge.active{
  border-color:rgba(255,86,232,.65);
  background:rgba(71,15,74,.95);
  box-shadow:0 0 18px rgba(214,85,255,.35);
  animation:unoAiBluffPulse 1s ease-in-out infinite
}
@keyframes unoAiBluffPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@media(max-width:768px){
  .uno-ai-bluff-badge{
    left:2px;
    top:2px;
    padding:3px 5px
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-ai-bluff-badge.active{animation:none!important}
}

/* DOSMOS UNO V5.0.3 — Revenge System */
.ai-revenge-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(255,75,88,.25);
  border-radius:11px;
  background:rgba(255,75,88,.05)
}
.ai-revenge-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.ai-revenge-title b{display:block}
.ai-revenge-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-revenge-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,75,88,.11);
  color:#ff9ca5;
  font-size:8px;
  font-weight:1000
}
.ai-revenge-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.ai-revenge-option b{display:block}
.ai-revenge-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.ai-revenge-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.ai-revenge-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.ai-revenge-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.ai-revenge-option input:checked+i{background:#b63542}
.ai-revenge-option input:checked+i::after{transform:translateX(18px)}
.ai-revenge-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-top:8px
}
.ai-revenge-features span{
  padding:7px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.022);
  color:#dcc8cb;
  text-align:center;
  font-size:8px;
  font-weight:900
}
.ai-revenge-stats-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:#0b0d12
}
.ai-revenge-stats-row small{
  color:#868d97;
  font-size:7px;
  font-weight:900
}
.ai-revenge-stats-row b{
  color:#ff9ca5;
  font-size:10px
}
.uno-ai-revenge-badge{
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:37;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid rgba(255,75,88,.3);
  border-radius:999px;
  background:rgba(15,17,23,.92);
  color:#ffadb5;
  font-size:7px;
  font-weight:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.26)
}
.uno-ai-revenge-badge span{font-size:10px}
.uno-ai-revenge-badge em{
  color:#a8afb8;
  font-size:7px;
  font-style:normal
}
.uno-ai-revenge-badge.hot{
  border-color:rgba(255,75,88,.75);
  background:rgba(77,15,22,.95);
  box-shadow:0 0 20px rgba(255,75,88,.4);
  animation:unoAiRevengeHot 1s ease-in-out infinite
}
@keyframes unoAiRevengeHot{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}
@media(max-width:768px){
  .uno-ai-revenge-badge{
    right:2px;
    bottom:2px;
    padding:3px 5px
  }
}
@media(prefers-reduced-motion:reduce){
  .uno-ai-revenge-badge.hot{animation:none!important}
}

/* DOSMOS UNO V5.0.3.2 — Wild +4 Challenge Click Fix */
#wild4ChallengeModal,
.wild4-challenge-modal{
  position:fixed!important;
  inset:0!important;
  z-index:20000!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  overscroll-behavior:contain!important;
}
#wild4ChallengeModal[hidden],
.wild4-challenge-modal[hidden]{
  display:none!important;
}
#wild4ChallengeModal.active,
.wild4-challenge-modal.active{
  display:flex!important;
  pointer-events:auto!important;
}
#wild4ChallengeModal::before,
.wild4-challenge-modal::before{
  pointer-events:none!important;
}
#wild4ChallengeModal .wild4-challenge-dialog,
.wild4-challenge-modal .wild4-challenge-dialog,
#wild4ChallengeModal .challenge-dialog{
  position:relative!important;
  z-index:20010!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
#wild4ChallengeModal button,
.wild4-challenge-modal button,
#acceptWild4Btn,
#challengeWild4Btn{
  position:relative!important;
  z-index:20020!important;
  min-height:48px!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:pointer!important;
}
#acceptWild4Btn:disabled,
#challengeWild4Btn:disabled{
  pointer-events:auto!important;
  opacity:1!important;
}
#wild4ChallengeModal.submitting button{
  pointer-events:none!important;
  opacity:.72;
}
body.wild4-challenge-active{
  overflow:hidden!important;
  touch-action:none!important;
}
body.wild4-challenge-active #wild4ChallengeModal,
body.wild4-challenge-active #wild4ChallengeModal *{
  touch-action:manipulation!important;
}
body.wild4-challenge-active .uno-special-fx-layer,
body.wild4-challenge-active .uno-result-fx-layer,
body.wild4-challenge-active .uno-combo-fx,
body.wild4-challenge-active .uno-warning-fx,
body.wild4-challenge-active .uno-flying-card,
body.wild4-challenge-active .uno-draw-flying-card{
  pointer-events:none!important;
}

/* DOSMOS UNO V5.0.3.3 — Wild +4 Stale Modal & Center Fix */
#wild4ChallengeModal,
.wild4-challenge-modal{
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  box-sizing:border-box!important;
}
#wild4ChallengeModal.active,
.wild4-challenge-modal.active{
  display:flex!important;
}
#wild4ChallengeModal .wild4-challenge-dialog,
.wild4-challenge-modal .wild4-challenge-dialog,
#wild4ChallengeModal .challenge-dialog,
#wild4ChallengeModal>[class*="dialog"]{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  margin:auto!important;
  transform:none!important;
  width:min(420px,calc(100vw - 32px))!important;
  max-width:420px!important;
  max-height:calc(100dvh - 32px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}
#wild4ChallengeModal .wild4-auto-timer{
  display:block!important;
  margin-top:8px!important;
  color:#e2bd48!important;
  font-size:9px!important;
  font-weight:900!important;
}
#wild4ChallengeModal.submitting .wild4-challenge-dialog,
#wild4ChallengeModal.submitting .challenge-dialog{
  opacity:.82!important;
}
#wild4ChallengeModal.submitting::after{
  content:'Memproses keputusan...';
  position:absolute;
  left:50%;
  bottom:26px;
  z-index:20080;
  transform:translateX(-50%);
  padding:7px 11px;
  border-radius:999px;
  background:#11151d;
  color:#fff;
  font-size:9px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
@media(max-width:768px){
  #wild4ChallengeModal,
  .wild4-challenge-modal{
    padding:12px!important;
  }
  #wild4ChallengeModal .wild4-challenge-dialog,
  .wild4-challenge-modal .wild4-challenge-dialog,
  #wild4ChallengeModal .challenge-dialog,
  #wild4ChallengeModal>[class*="dialog"]{
    width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
  }
}

/* DOSMOS UNO V5.0.3.4 — Advanced Voice Event System */
.voice-event-panel{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(88,168,255,.25);
  border-radius:11px;
  background:rgba(88,168,255,.05)
}
.voice-event-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.voice-event-title b{display:block}
.voice-event-title small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.voice-event-title>span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(88,168,255,.11);
  color:#9ecbff;
  font-size:8px;
  font-weight:1000
}
.voice-event-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer
}
.voice-event-option b{display:block}
.voice-event-option small{
  display:block;
  margin-top:3px;
  color:#8d949e;
  font-size:9px
}
.voice-event-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.voice-event-option i{
  width:42px;
  height:24px;
  position:relative;
  border-radius:999px;
  background:#343a44;
  transition:.2s
}
.voice-event-option i::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  transition:.2s
}
.voice-event-option input:checked+i{background:#337fcb}
.voice-event-option input:checked+i::after{transform:translateX(18px)}
.voice-event-status-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:8px
}
.voice-event-status-grid>div{
  padding:9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.022);
  text-align:center
}
.voice-event-status-grid small{
  display:block;
  color:#858c96;
  font-size:7px;
  font-weight:900
}
.voice-event-status-grid b{
  display:block;
  margin-top:4px;
  color:#e8edf4;
  font-size:11px
}
#voiceEventSystemStatus[data-state="playing"]{color:#7ee3a0}
#voiceEventSystemStatus[data-state="queued"]{color:#efd06d}
#voiceEventSystemStatus[data-state="ready"]{color:#9ecbff}
.voice-event-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:8px
}
.voice-event-actions button{
  min-height:40px;
  border:1px solid rgba(88,168,255,.26);
  border-radius:9px;
  background:rgba(88,168,255,.07);
  color:#a7d0ff;
  font-weight:900
}
.voice-event-actions button:last-child{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  color:#c4cad2
}
@media(max-width:768px){
  .voice-event-status-grid{grid-template-columns:1fr}
  .voice-event-actions{grid-template-columns:1fr}
}

/* DOSMOS UNO V5.0.3.5 — Mobile Touch & Input Recovery */
html,
body{
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
body:not(.wild4-challenge-active):not(.uno-result-active){
  touch-action:auto!important;
}
.uno-game,
.game-shell,
.game-board,
.game-content,
main{
  pointer-events:auto;
  touch-action:manipulation;
}
button,
.uno-card,
#drawPile,
.draw-pile,
input,
select,
textarea,
[role="button"]{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
[hidden]{
  display:none!important;
  pointer-events:none!important;
}
.uno-special-fx-layer,
.uno-combo-fx,
.uno-warning-fx,
.uno-flying-card,
.uno-draw-flying-card,
.uno-energy-trail,
.uno-arena-fx-layer{
  pointer-events:none!important;
}
#wild4ChallengeModal:not(.active),
.wild4-challenge-modal:not(.active){
  display:none!important;
  pointer-events:none!important;
}
#audioSettingsModal[hidden],
#rulesModal[hidden],
#matchSummaryModal[hidden]{
  display:none!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  body{
    min-height:100dvh;
    overscroll-behavior-y:none;
  }
  .uno-game,
  .game-shell,
  .game-board{
    isolation:isolate;
  }
  button:not(:disabled),
  .uno-card,
  #drawPile,
  .draw-pile{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .uno-card{
    cursor:pointer;
  }
  body.card-animation-busy .uno-card,
  body.card-animation-busy #drawPile{
    pointer-events:auto!important;
  }
}

/* DOSMOS UNO V5.0.3.8 — Mobile Boot & Core Input Fix */
html[data-uno-boot-status="recovered"] #matchmakingStatus,
#matchmakingStatus.offline{
  color:#78e19c!important;
  border-color:rgba(120,225,156,.45)!important;
  background:rgba(120,225,156,.08)!important;
}

#matchModeCasualBtn,
#matchModeRankedBtn,
#matchModeTournamentBtn,
#casualTabQuickBtn,
#casualTabCreateBtn,
#casualTabJoinBtn,
#rankedTabOpenBtn,
#tournamentTabOpenBtn{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:pointer!important;
}

.mobile-sheet-backdrop:not(.active),
body:not(.mobile-sheet-active) .mobile-sheet-backdrop{
  pointer-events:none!important;
}

body:not(.match-mode-open) #matchModeOverlay[hidden],
#matchModeOverlay[hidden]{
  display:none!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  #matchModeCasualBtn,
  #matchModeRankedBtn,
  #matchModeTournamentBtn{
    position:relative!important;
    z-index:40!important;
    min-height:70px!important;
  }

  .matchmaking-panel,
  .match-mode-buttons,
  .match-mode-card{
    pointer-events:auto!important;
  }
}

/* DOSMOS UNO V5.0.3.9 — Wild +4 Flicker Loop Fix */
#wild4ChallengeModal.active{
  animation:none!important;
  opacity:1!important;
  visibility:visible!important;
}
#wild4ChallengeModal.active .wild4-challenge-dialog,
#wild4ChallengeModal.active .challenge-dialog{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}
body.wild4-challenge-active{
  animation:none!important;
}
body.wild4-challenge-active #wild4ChallengeModal{
  display:flex!important;
  pointer-events:auto!important;
}


/* ==========================================================
   DOSMOS UNO V6.1.0 — CLEAN MOBILE STABLE
   Single mobile layer. No fullscreen, launcher or forced rotation.
   ========================================================== */

:root{
  --uno-bottom-nav-height:72px;
  --uno-viewport-height:100dvh;
}

html{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  background:#05070b;
}

body[data-page="game"]{
  width:100%;
  min-width:0;
  margin:0;
  overflow-x:hidden;
  background:#05070b;
}

body[data-page="game"] *,
body[data-page="game"] *::before,
body[data-page="game"] *::after{
  box-sizing:border-box;
}

body[data-page="game"] img,
body[data-page="game"] video,
body[data-page="game"] canvas,
body[data-page="game"] svg{
  max-width:100%;
}

body[data-page="game"] .uno-main{
  width:100%;
  min-width:0;
}

body[data-page="game"] .uno-shell.container{
  width:min(1180px,calc(100% - 32px));
  min-width:0;
  max-width:1180px;
  margin-inline:auto;
}

body[data-page="game"] #matchModeOverlay{
  touch-action:pan-y;
}

@media(max-width:900px){
  :root{
    --uno-bottom-nav-height:calc(70px + env(safe-area-inset-bottom,0px));
  }

  html,
  body[data-page="game"]{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    position:static!important;
    transform:none!important;
    touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;
  }

  body[data-page="game"]{
    padding-bottom:var(--uno-bottom-nav-height)!important;
  }

  body[data-page="game"] .topbar,
  body[data-page="game"] .portal-topbar,
  body[data-page="game"] .topbar .container,
  body[data-page="game"] .portal-topbar .container{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    transform:none!important;
  }

  body[data-page="game"] .topbar .container,
  body[data-page="game"] .portal-topbar .container{
    padding-inline:12px!important;
  }

  body[data-page="game"] .uno-main{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:12px 0 16px!important;
    margin:0!important;
    transform:none!important;
  }

  body[data-page="game"] .uno-shell.container{
    width:calc(100% - 16px)!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0 8px!important;
    padding:0!important;
    transform:none!important;
  }

  body[data-page="game"] .uno-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    margin-bottom:12px!important;
  }

  body[data-page="game"] .uno-head>div,
  body[data-page="game"] .uno-head-tools,
  body[data-page="game"] .mobile-primary-tools{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body[data-page="game"] .uno-head h1{
    font-size:clamp(24px,8vw,34px)!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
  }

  body[data-page="game"] .uno-head p{
    font-size:14px!important;
    line-height:1.5!important;
  }

  body[data-page="game"] .mobile-primary-tools{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }

  body[data-page="game"] .mobile-primary-tools>.head-tool{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
  }

  body[data-page="game"] .uno-panel,
  body[data-page="game"] .matchmaking-panel,
  body[data-page="game"] .lobby-screen,
  body[data-page="game"] .waiting-screen,
  body[data-page="game"] .game-screen{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin-inline:0!important;
  }

  body[data-page="game"] .uno-panel,
  body[data-page="game"] .matchmaking-panel{
    padding:14px!important;
    border-radius:16px!important;
    overflow:hidden;
  }

  body[data-page="game"] .matchmaking-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  body[data-page="game"] .matchmaking-status{
    justify-self:start!important;
    max-width:100%;
    white-space:normal!important;
  }

  body[data-page="game"] .match-mode-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }

  body[data-page="game"] .match-mode-card{
    width:100%!important;
    min-width:0!important;
    min-height:72px!important;
    padding:13px!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    text-align:left!important;
    touch-action:manipulation!important;
  }

  body[data-page="game"] .match-mode-card div,
  body[data-page="game"] .match-mode-card b,
  body[data-page="game"] .match-mode-card small{
    min-width:0!important;
    overflow-wrap:anywhere;
  }

  body[data-page="game"] .quick-match-box,
  body[data-page="game"] .lobby-forms,
  body[data-page="game"] .spectator-entry-form,
  body[data-page="game"] .room-settings-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
  }

  body[data-page="game"] input,
  body[data-page="game"] textarea,
  body[data-page="game"] select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  body[data-page="game"] button{
    max-width:100%;
    touch-action:manipulation!important;
  }

  body[data-page="game"] .waiting-screen{
    padding-bottom:14px!important;
  }

  body[data-page="game"] .waiting-room,
  body[data-page="game"] .room-panel,
  body[data-page="game"] .room-settings-panel,
  body[data-page="game"] .lobby-room-card{
    min-height:0!important;
    height:auto!important;
    margin-bottom:12px!important;
  }

  body[data-page="game"] .game-screen.active{
    min-height:calc(var(--uno-viewport-height) - var(--uno-bottom-nav-height) - 16px)!important;
  }

  body[data-page="game"] .game-screen:not(.active),
  body[data-page="game"] .waiting-screen:not(.active),
  body[data-page="game"] .lobby-screen:not(.active){
    display:none!important;
  }

  body[data-page="game"] .opponents{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(auto-fit,minmax(88px,1fr))!important;
  }

  body[data-page="game"] .table-area,
  body[data-page="game"] .table-center,
  body[data-page="game"] .game-table-center{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  body[data-page="game"] .my-area,
  body[data-page="game"] .my-head,
  body[data-page="game"] .my-hand{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  body[data-page="game"] .my-hand{
    overflow-x:auto!important;
    overflow-y:visible!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  body[data-page="game"] .mobile-bottom-nav{
    position:fixed!important;
    inset:auto 0 0 0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--uno-bottom-nav-height)!important;
    margin:0!important;
    padding:
      6px
      max(4px,env(safe-area-inset-right,0px))
      calc(6px + env(safe-area-inset-bottom,0px))
      max(4px,env(safe-area-inset-left,0px))!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    transform:none!important;
    overflow:hidden!important;
    z-index:12000!important;
  }

  body[data-page="game"] .mobile-nav-btn{
    min-width:0!important;
    padding:4px 1px!important;
  }

  body[data-page="game"] .mobile-nav-btn small{
    font-size:9px!important;
    white-space:nowrap;
  }

  body[data-page="game"] #matchModeOverlay{
    position:fixed!important;
    inset:0!important;
    z-index:24000!important;
    display:block;
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      calc(var(--uno-bottom-nav-height) + 10px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    background:rgba(2,4,8,.94)!important;
  }

  body[data-page="game"] #matchModeOverlay[hidden]{
    display:none!important;
    pointer-events:none!important;
  }

  body[data-page="game"] #matchModeOverlay .match-mode-dialog{
    width:100%!important;
    max-width:760px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    overflow:visible!important;
    border-radius:18px!important;
  }

  body[data-page="game"] .mobile-sheet-target.mobile-sheet-open,
  body[data-page="game"] .chat-panel.mobile-sheet-open,
  body[data-page="game"] .mobile-more-sheet.mobile-sheet-open{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
  }

  body[data-page="game"] .profile-dialog,
  body[data-page="game"] .wallet-dialog,
  body[data-page="game"] .shop-dialog,
  body[data-page="game"] .inventory-dialog,
  body[data-page="game"] .daily-mission-dialog,
  body[data-page="game"] .login-reward-dialog,
  body[data-page="game"] .ranked-queue-dialog,
  body[data-page="game"] .friends-dialog,
  body[data-page="game"] .private-chat-dialog{
    width:calc(100vw - 16px)!important;
    max-width:100%!important;
    max-height:calc(var(--uno-viewport-height) - 16px)!important;
    margin-inline:auto!important;
  }

  body[data-page="game"] .wild4-challenge-dialog,
  body[data-page="game"] .challenge-dialog,
  body[data-page="game"] .uno-result-content,
  body[data-page="game"] .color-dialog{
    width:min(420px,calc(100vw - 24px))!important;
    max-height:calc(var(--uno-viewport-height) - 24px)!important;
    overflow:auto!important;
  }
}

@media(max-width:430px){
  body[data-page="game"] .uno-shell.container{
    width:calc(100% - 12px)!important;
    margin-inline:6px!important;
  }

  body[data-page="game"] .uno-panel,
  body[data-page="game"] .matchmaking-panel{
    padding:12px!important;
  }

  body[data-page="game"] .mobile-nav-btn small{
    font-size:8px!important;
  }

  body[data-page="game"] .opponents{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(orientation:landscape) and (max-height:560px) and (max-width:1000px){
  body[data-page="game"] .uno-main{
    padding-top:6px!important;
  }

  body[data-page="game"] .uno-head{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
  }

  body[data-page="game"] .mobile-primary-tools{
    width:auto!important;
    grid-template-columns:repeat(4,52px)!important;
  }

  body[data-page="game"] .game-screen.active{
    min-height:calc(var(--uno-viewport-height) - var(--uno-bottom-nav-height) - 8px)!important;
  }
}


/* ==========================================================
   DOSMOS UNO V6.2.0 — iPHONE & ANDROID COMPATIBILITY HARDENING
   ========================================================== */

:root{
  --uno-viewport-width:100vw;
  --uno-viewport-height:100dvh;
  --uno-keyboard-offset:0;
  --uno-touch-min:44px;
}

@supports not (height:100dvh){
  :root{
    --uno-viewport-height:100vh;
  }
}

html[data-uno-platform="ios"],
html[data-uno-platform="android"]{
  overscroll-behavior-x:none;
}

html[data-uno-platform="ios"] body[data-page="game"]{
  -webkit-overflow-scrolling:touch;
}

body[data-page="game"]{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

body[data-page="game"] button,
body[data-page="game"] [role="button"],
body[data-page="game"] input,
body[data-page="game"] select,
body[data-page="game"] textarea{
  min-height:var(--uno-touch-min);
}

body[data-page="game"] button,
body[data-page="game"] [role="button"],
body[data-page="game"] .uno-card,
body[data-page="game"] .mobile-nav-btn,
body[data-page="game"] .match-mode-card{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

body[data-page="game"] [hidden]{
  display:none!important;
  pointer-events:none!important;
}

body[data-page="game"] .uno-special-fx-layer,
body[data-page="game"] .uno-combo-fx,
body[data-page="game"] .uno-warning-fx,
body[data-page="game"] .uno-energy-trail,
body[data-page="game"] .uno-arena-fx-layer{
  pointer-events:none!important;
}

body[data-page="game"] .mobile-sheet-backdrop:not(.active),
body[data-page="game"] #matchModeOverlay[hidden],
body[data-page="game"] #wild4ChallengeModal[hidden]{
  pointer-events:none!important;
}

body[data-page="game"].uno-keyboard-open .mobile-bottom-nav{
  transform:translateY(100%)!important;
  pointer-events:none!important;
}

body[data-page="game"].uno-keyboard-open .uno-main{
  padding-bottom:12px!important;
}

@media(max-width:900px){
  body[data-page="game"]{
    min-height:var(--uno-viewport-height)!important;
  }

  body[data-page="game"] .mobile-bottom-nav{
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
  }

  body[data-page="game"] .mobile-sheet-target.mobile-sheet-open,
  body[data-page="game"] .chat-panel.mobile-sheet-open,
  body[data-page="game"] .mobile-more-sheet.mobile-sheet-open{
    max-height:calc(var(--uno-viewport-height) - 8px)!important;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body[data-page="game"] #matchModeOverlay{
    height:var(--uno-viewport-height)!important;
    max-height:var(--uno-viewport-height)!important;
  }

  body[data-page="game"] .profile-dialog,
  body[data-page="game"] .wallet-dialog,
  body[data-page="game"] .shop-dialog,
  body[data-page="game"] .inventory-dialog,
  body[data-page="game"] .daily-mission-dialog,
  body[data-page="game"] .login-reward-dialog,
  body[data-page="game"] .ranked-queue-dialog,
  body[data-page="game"] .friends-dialog,
  body[data-page="game"] .private-chat-dialog{
    max-height:calc(var(--uno-viewport-height) - 16px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body[data-page="game"] .wild4-challenge-dialog,
  body[data-page="game"] .challenge-dialog,
  body[data-page="game"] .uno-result-content,
  body[data-page="game"] .color-dialog{
    max-height:calc(var(--uno-viewport-height) - 24px)!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media(hover:none) and (pointer:coarse){
  body[data-page="game"] button:hover,
  body[data-page="game"] [role="button"]:hover,
  body[data-page="game"] .match-mode-card:hover{
    transform:none!important;
  }

  body[data-page="game"] button:active,
  body[data-page="game"] [role="button"]:active,
  body[data-page="game"] .match-mode-card:active{
    transform:scale(.98);
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="game"] *,
  body[data-page="game"] *::before,
  body[data-page="game"] *::after{
    scroll-behavior:auto!important;
  }
}