/* ضبط ارتفاع تجربة الألوان مع شريط الحالة خارج الطاولة. */
.tg-topbar{-webkit-backdrop-filter:blur(16px)}
dialog::backdrop{-webkit-backdrop-filter:blur(5px)}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #f4d27a;outline-offset:2px}
@media(max-width:520px){.tg-topbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:#091016f7}dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}
.ludo-piece::after{content:"";position:absolute;inset:-8px}
.color-card.yellow{--card:#e2b438}
.color-card em{position:relative;z-index:2;font-size:.52em;font-style:italic;transform:rotate(-18deg)}
.uno-corner{position:absolute!important;z-index:3!important;inset:4px auto auto 5px;font-size:.35em;line-height:1;text-shadow:none}.uno-corner.bottom{inset:auto 5px 4px auto;transform:rotate(180deg)}
.uno-call{min-height:32px;padding:4px 12px;border:1px solid #e9c55e;border-radius:999px;color:#f6d66f;background:#342b19;font-weight:900}.uno-call.ready{color:#172017;background:#f0cc68;box-shadow:0 0 18px #eec85b80}
.ludo-center>div{width:100%;height:100%;display:grid;place-items:center;transform:rotate(-45deg)}.ludo-center>div>b{transform:none;font-size:7px}.ludo-center-dice{display:flex;gap:4px}.ludo-center-dice i{width:25px;height:25px;display:grid;place-items:center;border:1px solid #222;border-radius:6px;color:#171717;background:#fff7df;box-shadow:0 3px 7px #0006;font-size:17px;font-style:normal;font-weight:900}.ludo-center-dice.rolling i{animation:diceRoll .18s linear 4}@keyframes diceRoll{50%{transform:rotate(18deg) scale(.9)}}
@media(max-width:520px){.colors-game{min-height:calc(100svh - 132px)}}
@media(orientation:landscape) and (max-height:620px){.colors-game{min-height:calc(100svh - 105px)}}
.msl-die{position:relative;display:inline-block;flex:0 0 auto;border:1px solid #9d9486!important;border-radius:7px!important;color:#171717!important;background:linear-gradient(145deg,#fff,#e8e2d8)!important;box-shadow:inset 0 0 0 1px #fff,0 3px 7px #0006!important}.msl-die .pip{position:absolute;width:17%;aspect-ratio:1;border-radius:50%;background:#171717;box-shadow:inset 0 1px 1px #ffffff55}.msl-die .p1{left:18%;top:18%}.msl-die .p3{right:18%;top:18%}.msl-die .p4{left:18%;top:42%}.msl-die .p5{left:41.5%;top:41.5%}.msl-die .p6{right:18%;top:42%}.msl-die .p7{left:18%;bottom:18%}.msl-die .p9{right:18%;bottom:18%}.msl-die>i{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-style:normal}.ludo-center-dice .msl-die{width:25px;height:25px}.estate-dice{display:flex!important;align-items:center;justify-content:center;gap:5px}.estate-dice .msl-die{width:27px;height:27px}
.ludo-center-dice button.msl-die{min-width:25px;min-height:25px;padding:0;cursor:pointer;transition:transform .15s,opacity .15s,outline-color .15s}.ludo-center-dice button.msl-die.selected{z-index:2;outline:3px solid #f1c75e;outline-offset:2px;transform:translateY(-2px) scale(1.08)}.ludo-center-dice button.msl-die.spent{opacity:.28;filter:grayscale(1)}.ludo-center-dice button.msl-die:disabled:not(.spent){opacity:.72}.ludo-center-dice.rolling .msl-die{animation:diceRoll .18s linear 4}

/* أسماء لاعبي انحش يا الذيب تبقى داخل مربعاتهم ولا تزاحم مسار اللعب. */
.ludo-page{width:100%;max-width:none}
.ludo-wrap{grid-template-columns:minmax(320px,760px) minmax(190px,230px);gap:8px;padding:6px}
.ludo-board{width:min(100%,min(84svh,760px));max-width:760px}
.ludo-players-board{position:absolute;z-index:12;inset:0;display:block;pointer-events:none;direction:rtl}
.ludo-players-board .ludo-player{position:absolute;width:min(24%,112px);min-height:28px;padding:3px 5px;gap:4px;border-color:#ffffff52;background:#10171dde;box-shadow:0 5px 14px #0008;overflow:visible}
.ludo-players-board .ludo-player[data-seat="0"]{left:10%;top:10%}
.ludo-players-board .ludo-player[data-seat="1"]{right:10%;top:10%}
.ludo-players-board .ludo-player[data-seat="2"]{right:10%;bottom:10%}
.ludo-players-board .ludo-player[data-seat="3"]{left:10%;bottom:10%}
.ludo-players-board .ludo-player>i{flex:0 0 auto;width:14px;height:14px}
.ludo-players-board .ludo-player div{min-width:0}
.ludo-players-board .ludo-player b,.ludo-players-board .ludo-player small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ludo-players-board .ludo-player b{font-size:9px}
.ludo-players-board .ludo-player small{font-size:6px}
.ludo-side{width:100%;padding:6px}
.ludo-turn-dice{position:absolute;z-index:18;top:50%;display:flex;gap:3px;transform:translateY(-50%)}.ludo-player[data-seat="0"] .ludo-turn-dice,.ludo-player[data-seat="3"] .ludo-turn-dice{left:calc(100% + 5px)}.ludo-player[data-seat="1"] .ludo-turn-dice,.ludo-player[data-seat="2"] .ludo-turn-dice{right:calc(100% + 5px)}.ludo-turn-dice .msl-die{width:34px;height:34px}.ludo-turn-dice .msl-die em{position:absolute;inset:0;display:grid;place-items:center;color:#222;font-size:15px;font-style:normal;font-weight:900}.ludo-turn-dice.rolled .msl-die{animation:diceRoll .18s linear 3}
.ludo-center-dice{display:none!important}.ludo-turn-dice button.msl-die{min-width:34px;min-height:34px;padding:0;cursor:pointer}.ludo-turn-dice button.msl-die.selected{z-index:2;outline:3px solid #f1c75e;outline-offset:2px;transform:translateY(-2px) scale(1.08)}.ludo-turn-dice button.msl-die.spent{opacity:.28;filter:grayscale(1)}

@media(max-width:760px){
  .ludo-page{padding:0}
  .ludo-wrap{min-height:calc(100svh - 76px);padding:0 0 max(5px,env(safe-area-inset-bottom));grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:4px;border-inline:0;border-radius:0;background:#111a21}
  .ludo-board{width:min(100vw,calc(100svh - 180px));min-width:0;max-width:none;border-width:4px;border-radius:0;align-self:start}
  .ludo-side{padding:4px 7px}
  .ludo-roll{grid-template-columns:92px 1fr;gap:6px}
  .ludo-roll .tg-button,.ludo-roll .tg-status{min-height:44px;margin:0}
}

@media(orientation:landscape) and (max-height:620px){.ludo-wrap{min-height:calc(100svh - 51px);grid-template-columns:minmax(0,1fr) 205px;grid-template-rows:1fr;padding:0 5px;align-items:center}.ludo-board{width:min(calc(100svh - 57px),calc(100vw - 215px));min-width:0;max-width:none}.ludo-side{max-height:calc(100svh - 57px);padding:3px;overflow:auto}.ludo-players-board .ludo-player{width:min(23%,105px)}}

/* أوراق UNO الكلاسيكية: واجهة واضحة ومألوفة مرسومة بخفة عبر CSS. */
.color-card{
  --uno-ink:#fff;
  width:96px;
  aspect-ratio:5/7;
  padding:4px;
  overflow:hidden;
  isolation:isolate;
  border:4px solid #f8f3e9;
  outline:2px solid #11171b;
  border-radius:13px;
  color:var(--uno-ink);
  background:linear-gradient(145deg,color-mix(in srgb,var(--card) 88%,#fff),var(--card) 64%,color-mix(in srgb,var(--card) 80%,#000));
  box-shadow:0 9px 18px #0009;
  font-size:36px;
  text-shadow:none
}
.color-card::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:11% 17%;
  border:0;
  border-radius:50%;
  background:#fffdf5;
  box-shadow:inset 0 0 0 2px #00000012;
  transform:rotate(-28deg)
}
.color-card.red{--card:#d92f35}.color-card.yellow{--card:#efc52c;--uno-ink:#15191b}.color-card.green{--card:#24994f}.color-card.blue{--card:#176fc1}.color-card.wild{--card:#17191c;--uno-ink:#fff;background:linear-gradient(145deg,#35383c,#111315 65%,#050607)}
.color-card .uno-face{position:relative;z-index:2;display:grid;place-items:center;color:var(--card);font-size:.78em;font-style:normal;font-weight:1000;line-height:1;transform:rotate(-18deg);text-shadow:0 1px 0 #0002}
.color-card.yellow .uno-face{color:#1b1d1e}
.uno-draw-face{width:45px;height:54px;position:relative!important;display:block!important;transform:rotate(-18deg)!important}.uno-draw-face i{width:22px;height:31px;position:absolute;border:3px solid currentColor;border-radius:5px;background:currentColor;box-shadow:inset 0 0 0 3px #fff}.uno-draw-face i:first-child{left:2px;bottom:2px;transform:rotate(-13deg)}.uno-draw-face i:nth-child(2){right:2px;top:2px;transform:rotate(12deg)}.uno-draw-face strong{position:absolute;z-index:2;right:-5px;bottom:-3px;padding:2px;color:var(--card);background:#fff;border-radius:4px;font-size:12px;line-height:1}
.uno-corner{position:absolute!important;z-index:3!important;inset:5px auto auto 6px;color:var(--uno-ink);font-size:.34em;font-weight:1000;line-height:1;text-shadow:0 1px 2px #0008}.uno-corner.bottom{inset:auto 6px 5px auto;transform:rotate(180deg)}
.wild-face{gap:2px!important;transform:none!important}.wild-face strong{position:absolute;right:-9px;bottom:-8px;padding:2px 4px;border-radius:5px;color:#fff;background:#111;font-size:12px}
.uno-wild-wheel{width:35px;height:49px;display:grid;grid-template:1fr 1fr/1fr 1fr;overflow:hidden;border:2px solid #fff;border-radius:50%;transform:rotate(27deg);box-shadow:0 1px 4px #0006}.uno-wild-wheel i:nth-child(1){background:#d92f35}.uno-wild-wheel i:nth-child(2){background:#efc52c}.uno-wild-wheel i:nth-child(3){background:#176fc1}.uno-wild-wheel i:nth-child(4){background:#24994f}
.colors-pile .color-card{width:92px;background:repeating-linear-gradient(45deg,var(--skin-a,#34233c) 0 9px,var(--skin-b,#b98b2c) 9px 12px)!important}.colors-pile .color-card::before{inset:13% 15%;background:#11171b;border:2px solid #e6c45f;border-radius:50%;transform:rotate(-28deg)}.colors-pile .color-card em{z-index:2;color:#f6d878;font-size:15px;line-height:1.05;transform:rotate(-18deg)}
.colors-table{grid-template-columns:1fr 108px 108px 1fr}
.colors-hand-panel{min-height:169px}
.colors-hand{height:141px;padding-inline:18px;justify-content:center;touch-action:pan-x}
.colors-hand .color-card{flex:0 0 76px;width:76px;margin-inline:-8px;border-width:3px;border-radius:11px;font-size:29px}
.colors-round-state{display:flex;align-items:center;gap:7px}.colors-round-state>i{padding:4px 7px;border:1px solid #ffffff38;border-radius:999px;color:#fff;background:var(--active-color,#d92f35);font-size:8px;font-style:normal;font-weight:900}.colors-round-state>i[data-color="red"]{--active-color:#d92f35}.colors-round-state>i[data-color="yellow"]{--active-color:#b89108}.colors-round-state>i[data-color="green"]{--active-color:#24994f}.colors-round-state>i[data-color="blue"]{--active-color:#176fc1}

@media(max-width:520px){
  .colors-game{grid-template-rows:auto minmax(190px,1fr) 165px}
  .colors-table{grid-template-columns:1fr 104px 104px 1fr}
  .color-card{width:100px;font-size:38px}
  .colors-pile .color-card{width:96px}
  .colors-hand-panel{min-height:165px}
  .colors-hand{height:136px;padding-inline:14px;justify-content:flex-start}
  .colors-hand .color-card{flex-basis:74px;width:74px;margin-inline:-8px;font-size:28px}
  .colors-round-state{gap:4px;font-size:7px}
  .colors-round-state>i{padding:3px 5px;font-size:7px}
}

/* رمية سوق الديرة تظهر في مركز اللوحة بحجم واضح وحركة خفيفة. */
.estate-rules-note{margin:10px 0 2px;padding:8px 10px;border:1px solid #d0ae5a55;border-radius:12px;color:#eed487;background:#0b1712aa;text-align:right}.estate-rules-note summary{cursor:pointer;font-size:10px;font-weight:900}.estate-rules-note p{margin:6px 0 0;color:#b8c7c0;font-size:9px;line-height:1.7}.estate-roll-stage{position:absolute;z-index:25;inset:31%;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;border-radius:22px;background:#13201bc4;box-shadow:0 10px 30px #0008}.estate-roll-stage[hidden]{display:none}.estate-roll-stage .msl-die{width:58px;height:58px;border-radius:12px!important}.estate-roll-stage.throwing .msl-die:first-child{animation:estateThrowA .72s cubic-bezier(.2,.8,.25,1)}.estate-roll-stage.throwing .msl-die:last-child{animation:estateThrowB .72s cubic-bezier(.2,.8,.25,1)}.estate-dice .msl-die{width:35px;height:35px}@keyframes estateThrowA{0%{transform:translate(-80px,-70px) rotate(-260deg) scale(.55)}60%{transform:translate(8px,7px) rotate(24deg) scale(1.12)}100%{transform:none}}@keyframes estateThrowB{0%{transform:translate(85px,-55px) rotate(280deg) scale(.55)}60%{transform:translate(-7px,6px) rotate(-22deg) scale(1.12)}100%{transform:none}}@media(max-width:520px){.estate-roll-stage{inset:29%}.estate-roll-stage .msl-die{width:49px;height:49px}.estate-dice .msl-die{width:31px;height:31px}}
.estate-page{width:min(1280px,100%)}.estate-page .estate-wrap{grid-template-columns:minmax(420px,820px) minmax(270px,310px)}.estate-page .estate-board{width:min(100%,min(84svh,820px))}.estate-count{margin:12px 0;padding:6px;display:grid;grid-template-columns:1fr 1fr;gap:7px;border:0}.estate-count legend{width:100%;margin-bottom:5px;color:#d6bf85;font-size:10px;font-weight:900;text-align:center}.estate-count label{cursor:pointer}.estate-count input{position:absolute;opacity:0;pointer-events:none}.estate-count span{min-height:44px;display:grid;place-items:center;border:1px solid #43584f;border-radius:12px;color:#dce8e2;background:#15231d;font-size:12px;font-weight:900}.estate-count input:checked+span{border-color:#e2be61;color:#20180a;background:#e2be61;box-shadow:0 0 18px #e2be6145}.estate-page .estate-controls{grid-template-columns:minmax(112px,140px) 1fr}.estate-page .estate-dice{min-height:56px;padding:8px 12px;border-color:#d5ae58;color:#1f170a;background:linear-gradient(145deg,#f0cd70,#c8993f);font-size:13px}.estate-page .estate-cell[data-owner="0"]{box-shadow:inset 0 0 0 4px #c74d47}.estate-page .estate-cell[data-owner="1"]{box-shadow:inset 0 0 0 4px #3b83c4}.estate-page .estate-cell[data-owner="2"]{box-shadow:inset 0 0 0 4px #4ca36a}.estate-page .estate-cell[data-owner="3"]{box-shadow:inset 0 0 0 4px #bd8c2b}.estate-page .estate-roll-stage.throwing .msl-die:first-child{animation-duration:2s}.estate-page .estate-roll-stage.throwing .msl-die:last-child{animation-duration:2s}@media(max-width:760px){.estate-page .estate-wrap{grid-template-columns:1fr;grid-template-rows:auto auto}.estate-page .estate-board{width:min(100%,calc(100vw - 14px));min-width:0}.estate-page .estate-players{grid-template-columns:1fr 1fr}}
.estate-rules-note summary{min-height:44px;display:flex;align-items:center}