/* Word Path v90 — restored full stylesheet */
/* v88: .word-app كان height:100dvh + max-height:100dvh فوق position:fixed;inset:0 —
   inset:0 لوحده كافي يثبّت الصندوق بالضبط على حدود العرض المرئي فعليًا،
   وإضافة height:100dvh فوقه يتعارض معه في متصفحات الـ"in-app" (واتساب/انستقرام)
   المعروف إنها ما تحسب dvh صح (تحسبه أكبر من المساحة المرئية الفعلية لأنها
   ما تخصم شريط التطبيق نفسه) — فتضخم الصندوق فوق المساحة الحقيقية.
   الحل: نشيل height/max-height ونخلي inset:0 لوحده يتحكم بالحجم. */
.word-app{position:fixed;inset:0;z-index:1100;background:radial-gradient(ellipse at 85% 0,#173b42 0,transparent 42%),#090c14;color:#f8eed9;display:flex;flex-direction:column;font-family:inherit;direction:rtl;overflow:hidden}
.word-app *{box-sizing:border-box}.word-app button,.word-app input,.word-app select{font:inherit}.word-app [hidden]{display:none!important}
.wa-head{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px;flex-shrink:0;border-bottom:1px solid #e6ca7926;background:#081019ed}
.wa-head>div{flex:1;text-align:center}.wa-head h2{margin:0;color:#f5dda1;font-size:21px}.wa-head small{color:#a9c9c8}.wa-exit{width:40px;height:40px;border:1px solid #ecd39c55;border-radius:12px;background:#ffffff09;color:#fff}
.wa-clock{font-variant-numeric:tabular-nums;border:1px solid #e3c57f55;padding:8px 12px;border-radius:12px;color:#f6d888;min-width:65px;text-align:center;font-weight:900}.wa-clock.urgent{color:#ff7494;border-color:#ff7494}
.wa-main{flex:1;min-height:0;height:100%;overflow:hidden;padding:8px max(10px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px))}
.wa-inner{max-width:1280px;margin:auto;height:100%;min-height:0}
.wa-intro{text-align:center;max-width:720px;margin:4px auto 18px}.wa-intro h1{font-size:clamp(26px,4vw,40px);margin:8px;color:#ffe1a1}.wa-intro p{color:#b9cacd;line-height:1.7;margin:8px}.wa-kicker{color:#60dcc6;font-size:13px}
.wa-mode-card{max-width:760px;margin:0 auto 16px;display:flex;align-items:center;gap:18px;padding:18px;border:1px solid #d5bd8138;border-radius:20px;background:linear-gradient(135deg,#19383e,#171b27)}.wa-mode-hero{font-size:52px}.wa-mode-card b{font-size:22px;color:#ffe1a1}.wa-mode-card p{margin:5px 0;color:#bdd0cf}
.wa-lobby-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:18px 0}.word-app select,.wa-input{background:#19222e;border:1px solid #e3cb9955;border-radius:12px;padding:12px;color:#fff}
.wa-go{border:0;border-radius:13px;background:linear-gradient(#ffe5a1,#e5b64e);color:#2d2109;font-weight:800;padding:12px 25px;box-shadow:0 4px 0 #987322}
#waStart{min-width:min(92vw,420px);min-height:72px;font-size:clamp(24px,5vw,34px);border-radius:20px;padding:16px 34px;box-shadow:0 7px 0 #8a651f,0 12px 28px #0006}
.wa-muted{color:#a8bcbd;font-size:13px;text-align:center;line-height:1.5}
.wa-players,.wa-scores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0}.wa-player{padding:6px 11px;background:#ffffff09;border:1px solid #c6d9ce25;border-radius:100px;font-size:13px}.wa-player.me{border-color:#50d6bc;color:#73e0cc}.wa-player b{color:#f2d588;margin-inline-start:8px}
.wa-route{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 5px;direction:ltr}.wa-route span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #d4c29960;color:#a7b4b8;font-size:12px}.wa-route .past{background:#238774;color:white}.wa-route .now{background:#f3cf79;color:#30210e}
#waRound{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}#waStage{flex:1;min-height:0;overflow:hidden}

.wa-path-layout{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px;max-width:1100px;margin:auto;overflow:hidden}
/* v88: كانت clamp(150px,26dvh,260px) — نفس مشكلة dvh أعلاه، بدّلناها لـ
   flex-basis ثابت + min/max بالبكسل، بدون أي اعتماد على وحدة viewport،
   فيصير حجمها مضمون ومتناسق حتى لو dvh غلط بمتصفح المستخدم. */
.wa-path-picture{position:relative;flex:0 1 260px;min-height:150px;max-height:260px;overflow:hidden;display:grid;place-items:center;padding:8px;border-radius:18px;background:#08131c;box-shadow:0 10px 28px #0006}
.wa-path-picture small{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);background:#07131acc;color:#9fc8c4;padding:3px 9px;border-radius:999px;font-size:11px;z-index:2}
.wa-path-image,.wa-path-picture img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.wa-path-visual{font-size:clamp(56px,14dvh,150px);filter:drop-shadow(0 12px 20px #0008);line-height:1}
.wa-path-game{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 2px}
.wa-path-game>.wa-muted{flex:0 0 auto;margin:2px 0}
.wa-secret-title{flex:0 0 auto;text-align:center;font-size:clamp(17px,4vw,26px);font-weight:900;color:#ffe29a;margin:2px 0 6px}
.wa-clues{flex:0 1 auto;display:grid;gap:6px;max-width:650px;width:100%;margin:0 auto 6px;overflow:auto}
.wa-clue{padding:8px 14px;background:#1c2c35;border-inline-start:3px solid #55d6bc;border-radius:10px;text-align:right;font-size:clamp(13px,3vw,16px);line-height:1.3}.wa-clue.locked{color:#7e999e;border-color:#62717c;font-size:12px}
.wa-path-targets,.wa-targets{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 6px}
.wa-target{padding:5px 9px;border:1px solid #74848655;border-radius:10px;color:#aebcbe;min-width:60px;text-align:center;background:#ffffff05;font-size:13px}
.wa-target.found{color:#dffcf5;background:color-mix(in srgb,var(--player-color,#55d6bc) 28%,#13222a);border-color:var(--player-color,#55d6bc);box-shadow:inset 0 0 0 1px var(--player-color,#55d6bc)}
.wa-target.revealed{border-color:#e7c47d;color:#f8df9d}.wa-target small{display:block;font-size:10px;color:#b2ceca}
.wa-letter-slots{display:flex;gap:3px;justify-content:center}.wa-letter-slots i{display:block;width:13px;height:17px;border:1px solid #ead29c88;border-bottom:3px solid #f4d68f;border-radius:4px}.wa-length{margin-top:3px}
.wa-path-grid{--cols:5;flex:1 1 0%;min-height:0;align-self:center;width:auto;aspect-ratio:1/1;max-width:100%;max-height:100%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:min(1.8%,8px);margin:2px auto;touch-action:none;user-select:none;-webkit-user-select:none}
.wa-path-cell{aspect-ratio:1;min-width:0;min-height:0;border:1px solid #d5f1ec75;border-radius:16%;background:linear-gradient(145deg,#e9f7f5,#b9d9dc);color:#173c49;box-shadow:0 4px 0 #436d79,0 7px 16px #0005;font-size:clamp(15px,5vw,32px);font-weight:900;display:grid;place-items:center;transition:.12s transform,.12s background,.12s box-shadow}
.wa-path-cell.selected{transform:scale(.94);background:var(--active-color,#f1c75e)!important;color:#07131a!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--active-color,#f1c75e) 65%,white),0 3px 10px #0005!important}
.wa-path-cell.solved{background:var(--solver-color,#55d6bc)!important;color:#08131a!important;box-shadow:inset 0 0 0 3px #ffffff88,0 3px 10px #0005!important;opacity:1!important;filter:saturate(1.1)}.wa-path-cell.solved:disabled{opacity:1!important}
.wa-path-grid.done{opacity:.6;pointer-events:none}
.wa-path-live{flex:0 0 auto;min-height:24px;display:grid;place-items:center;font-size:clamp(14px,4vw,22px);font-weight:900;color:#f7dda1;text-align:center;margin-top:2px}.wa-path-live.bad{color:#ff9bac}#waDone{flex:0 0 auto;margin:2px 0}
.wa-path-secret .wa-path-picture{flex-basis:52px;height:52px;max-height:52px;min-height:52px;border-radius:14px;padding:4px}
.wa-path-secret .wa-path-picture small{display:none}.wa-path-secret .wa-path-visual{font-size:30px}

.wa-answer{display:flex;gap:8px;margin:12px auto;max-width:640px}.wa-input{flex:1;min-width:0;text-align:center;font-size:20px}.wa-feedback{min-height:28px;text-align:center;font-size:14px;color:#7fe6cf}.wa-feedback.bad{color:#ff9bac}
.wa-summary{text-align:center;padding:20px;border:1px solid #e3c88a44;border-radius:18px;background:#15272c;margin:15px auto;max-width:760px}.wa-summary h2{color:#ffe2a2}.wa-rank{display:flex;justify-content:space-between;max-width:600px;padding:14px 20px;border-radius:12px;background:#ffffff09;margin:8px auto}.wa-rank:first-child{border:1px solid #eac975}
#waShare .dgl-share{gap:10px;flex-wrap:wrap}#waShare .dg-btn{color:#fff5df!important;background:#263746;border:1px solid #e3cb9970;font-size:15px;font-weight:700;min-height:48px;padding:12px 16px;opacity:1;flex:1 1 120px}#waShare .dg-btn.wa{background:linear-gradient(#167f5a,#0a5840);border-color:#68ddb2}
@media(orientation:landscape){
 .wa-path-layout{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(260px,1.2fr);gap:12px;height:100%;align-items:stretch}
 .wa-path-picture{flex-basis:auto;height:100%;max-height:100%}
 .wa-path-secret .wa-path-picture{flex-basis:auto;height:100%;max-height:100%;min-height:0}
 .wa-path-game{height:100%}
 .wa-path-cell{font-size:clamp(13px,3.2vw,24px)}
}

/* -- v87: ارتفاع Landscape قصير جدًا (دوران الجهاز مع شريط أدوات المتصفح) --
   المشكلة: .wa-clues/.wa-path-targets كانت flex:0 0 auto (حجمها الطبيعي)
   فتأكل أغلب الارتفاع المتاح قبل ما توصل الشبكة، فتنكمش الشبكة لحجم غير مقروء.
   الحل: نحدد سقف ارتفاع صريح للعناصر النصية (مع سكرول داخلي لها هي فقط لو
   احتاجت، مو للصفحة كلها) ونضمن للشبكة حد أدنى معقول من المساحة. */
@media(orientation:landscape) and (max-height:480px){
 .wa-path-picture{flex-basis:auto;width:clamp(56px,18vw,110px);height:auto;align-self:center;padding:4px}
 .wa-path-picture small{display:none}
 .wa-path-game>.wa-muted{font-size:11px;margin:1px 0}
 .wa-secret-title{font-size:clamp(14px,3.4vw,20px);margin:1px 0 3px}
 .wa-clues{gap:2px;max-height:20dvh;margin:0 auto 2px;overflow:auto}
 .wa-clue{padding:3px 8px;font-size:10.5px;line-height:1.1}.wa-clue.locked{font-size:9.5px}
 .wa-path-targets,.wa-targets{gap:3px;margin:1px 0 2px}
 .wa-target{padding:2px 5px;min-width:40px;font-size:10.5px}
 .wa-letter-slots i{width:9px;height:12px}
 .wa-path-grid{min-height:min(34dvh,180px);min-width:min(34dvh,180px)}
 .wa-path-cell{font-size:clamp(10px,3.6vw,16px)}
}

@media(max-width:650px){
 .wa-head{gap:6px;padding-top:calc(5px + env(safe-area-inset-top,0px));padding-bottom:5px}
 .wa-head h2{font-size:18px}.wa-head small{font-size:12px}.wa-clock{padding:6px 9px;min-width:58px}
 .wa-main{padding-top:5px}.wa-route{margin-bottom:3px}.wa-route span{width:26px;height:26px}.wa-scores{margin:2px 0 4px}.wa-player{padding:5px 9px}
}
@media(max-width:420px){.wa-target{min-width:52px;padding:4px 7px}}

/* v90: consistent image panel across browsers. */
.wa-path-picture{background:#08131c}
.wa-path-image,.wa-path-picture img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
@media(orientation:portrait){
  .wa-path-picture{flex:0 0 220px!important;min-height:220px!important;max-height:220px!important}
}
@media(orientation:landscape){
  .wa-path-picture{width:auto!important;min-width:0!important;height:100%!important;min-height:0!important;max-height:100%!important}
}