/* ================= مجلس الضيافة — واجهة ================= */
:root{
  --ink:#1A130E;
  --ink-2:#241A13;
  --wood:#3A2A1E;
  --wood-2:#4B3626;
  --brass:#C9A227;
  --brass-lite:#F2D07A;
  --brass-dark:#8A6A14;
  --cream:#F3E7D3;
  --cream-dim:#BFAF95;
  --terracotta:#8C3B2E;
  --olive:#2F5D50;
  --good:#6FBF7A;
  --warn:#E0A33A;
  --bad:#D4624C;
  --font: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--ink);overflow:hidden}
body{
  font-family:var(--font);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.hidden{display:none !important}

#app{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100dvh;
  height:100%;
  min-height:0;
  background:radial-gradient(120% 80% at 80% 0%, #2C2016 0%, #1A130E 70%);
}

/* ---------------- HUD ---------------- */
.hud{
  flex:0 0 auto;
  padding:6px 10px 5px;
  background:linear-gradient(180deg,#2A1E15 0%, #211710 100%);
  border-bottom:1px solid #4A3626;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  position:relative;
  z-index:6;
}
.hud-row{display:flex;align-items:center;gap:8px}
.karam{flex:1 1 auto;min-width:0}
.karam-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:3px}
.karam-name{font-size:11.5px;font-weight:700;color:var(--cream-dim);letter-spacing:.2px}
.karam-val{font-size:13px;font-weight:800;color:var(--brass-lite)}
.karam-bar{height:9px;border-radius:6px;background:#120C08;border:1px solid #4A3626;overflow:hidden;position:relative}
.karam-bar i{
  display:block;height:100%;width:50%;border-radius:5px;
  background:linear-gradient(90deg,#8A6A14,#C9A227 60%,#F2D07A);
  transition:width .35s cubic-bezier(.22,.8,.3,1), background .3s;
}
.karam-bar i.low{background:linear-gradient(90deg,#7A2A1E,#D4624C 70%,#F09A7A)}
.hud-stats{display:flex;gap:6px;flex:0 0 auto}
.hs{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:44px;padding:2px 6px;border-radius:8px;
  background:#16100B;border:1px solid #43301F;
}
.hs b{font-size:14px;font-weight:800;color:var(--brass-lite);line-height:1.05}
.hs em{font-size:9.5px;font-style:normal;color:var(--cream-dim);line-height:1.2}
.icon-btn{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;color:var(--cream);
  background:#191209;border:1px solid #43301F;
}
.icon-btn:active{transform:scale(.94);background:#241A10}
.hud-turn{
  display:flex;align-items:center;gap:6px;margin-top:5px;
  font-size:11.5px;color:var(--cream-dim);min-width:0;
}
.hud-turn #turnText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.turn-dot{width:8px;height:8px;border-radius:50%;background:#4A3626;flex:0 0 auto;transition:background .3s}
.turn-dot.live{background:var(--brass-lite);box-shadow:0 0 8px rgba(242,208,122,.8);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tray-mini{
  margin-inline-start:auto;flex:0 0 auto;font-size:10.5px;
  padding:2px 7px;border-radius:20px;background:#16100B;border:1px solid #43301F;color:#BFAF95;
}

/* ---------------- STAGE ---------------- */
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#1E1712}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.toast{
  position:absolute;top:10px;left:50%;transform:translate(-50%,-14px);
  max-width:92%;padding:7px 14px;border-radius:20px;
  background:rgba(24,16,10,.94);border:1px solid #6B4A2F;color:var(--cream);
  font-size:12.5px;font-weight:600;text-align:center;
  pointer-events:none;opacity:0;transition:opacity .25s, transform .25s;
  backdrop-filter:blur(6px);z-index:7;box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.music-bar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:8px;padding:5px 8px;
  background:rgba(24,16,10,.9);border-bottom:1px solid #4A3626;
  backdrop-filter:blur(8px);
}
.mb-label{font-size:11px;font-weight:700;color:var(--brass-lite);flex:0 0 auto}
.music-bar audio{flex:1 1 auto;height:30px;min-width:0;filter:sepia(.5) saturate(.7) hue-rotate(-12deg)}
.mb-dl{
  flex:0 0 auto;width:32px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--brass-lite);background:#2A1E15;border:1px solid #4A3626;text-decoration:none;
}

/* ---------------- DOCK ---------------- */
.dock{
  flex:0 0 auto;position:relative;z-index:6;
  padding:7px 8px 9px;
  background:linear-gradient(0deg,#2A1E15 0%, #211710 100%);
  border-top:1px solid #4A3626;
  display:flex;flex-direction:column;gap:7px;
}
.src-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.src{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:50px;padding:4px 2px 6px;border-radius:11px;
  background:#191209;border:1.5px solid #43301F;color:#BFAF95;
  transition:border-color .15s, background .15s, transform .1s, color .15s;
}
.src-ic{width:22px;height:22px;flex:0 0 auto;transition:transform .18s}
.src-tx{font-size:10px;font-weight:700;line-height:1.15;text-align:center;letter-spacing:-.1px}
@media (max-width:440px){
  .src{padding:4px 1px 6px}
  .src-ic{width:19px;height:19px}
  .src-tx{font-size:9.5px}
}
@media (max-width:340px){
  .src-ic{width:17px;height:17px}
  .src-tx{font-size:8.5px}
}
.src-charge{position:absolute;left:4px;right:4px;bottom:2px;height:3px;border-radius:3px;background:#2E2117;overflow:hidden}
.src-charge i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8A6A14,#F2D07A);transition:width .3s}
.src.on{border-color:var(--brass-lite);background:#2A2010;color:var(--cream);box-shadow:0 0 0 1px rgba(242,208,122,.25) inset, 0 4px 14px rgba(201,162,39,.18)}
.src.on .src-ic{transform:scale(1.1)}
.src:active{transform:scale(.96)}
.src.empty .src-charge i{background:#7A2A1E}

.act-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.act{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:54px;border-radius:14px;font-size:12px;font-weight:700;
  background:#231810;border:1.5px solid #4A3626;color:var(--cream);
  transition:transform .1s, background .15s, border-color .15s, opacity .2s;
}
.act span{font-size:11.5px}
.act:active:not(:disabled){transform:scale(.96);background:#2E2013}
.act:disabled{opacity:.4;cursor:default}
.act.side{color:#E7D8BE}
.act.hot{border-color:var(--brass-lite);animation:hotpulse 1.1s infinite}
@keyframes hotpulse{0%,100%{box-shadow:0 0 0 0 rgba(242,208,122,.45)}50%{box-shadow:0 0 0 7px rgba(242,208,122,0)}}

.act.pour{
  position:relative;width:84px;height:84px;min-height:84px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #6B4A1A 0%, #3A2A12 55%, #241708 100%);
  border:2px solid var(--brass);
  color:var(--brass-lite);
  box-shadow:0 6px 18px rgba(0,0,0,.55), inset 0 2px 8px rgba(242,208,122,.16);
  touch-action:none;
}
.act.pour .ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6}
.ring-fg{
  fill:none;stroke:var(--brass-lite);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:276.46;stroke-dashoffset:276.46;
  transition:stroke-dashoffset .06s linear, stroke .15s;
}
.ring-fg.perfect{stroke:#8FE39A}
.ring-fg.over{stroke:#E0A33A}
.act.pour:hover{border-color:var(--brass-lite)}
.act.pour.pressing{transform:scale(.94);background:radial-gradient(circle at 34% 28%, #7C5720 0%, #4A3516 55%, #2A1B09 100%)}
.pour-ic{line-height:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pour-tx{font-size:15px;font-weight:800;line-height:1;margin-top:1px}
.pour-sub{font-size:8.5px;font-weight:600;opacity:.72;line-height:1}
.act.pour.disabled{opacity:.45}
.act.pour.needwipe{border-color:var(--bad);color:#F0A08E}
.act.pour.needwipe .pour-sub{color:#F0A08E;opacity:1}

/* ---------------- OVERLAYS ---------------- */
.overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:16px;overflow-y:auto;
  background:radial-gradient(120% 90% at 70% 10%, rgba(40,26,14,.86) 0%, rgba(12,8,5,.94) 70%);
  backdrop-filter:blur(7px);
  animation:fadein .28s ease-out;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.panel{
  width:100%;max-width:430px;margin:auto;
  background:linear-gradient(180deg,#2A1E15 0%, #1F1610 100%);
  border:1px solid #57402A;border-radius:20px;
  padding:20px 18px 18px;
  box-shadow:0 22px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(242,208,122,.12);
  animation:rise .34s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:14px}
.brand-mark{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 25%, #4A3516, #211708);
  border:1px solid #6B4A2F;box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(242,208,122,.25);
}
.brand h1{margin:2px 0 0;font-size:25px;font-weight:800;color:var(--cream);letter-spacing:-.3px}
.tagline{margin:0;font-size:12.5px;color:#BFAF95;line-height:1.5}
.panel h2{margin:0 0 6px;font-size:21px;font-weight:800;color:var(--cream);text-align:center}
.lead{margin:0 0 14px;font-size:13px;color:#BFAF95;line-height:1.6;text-align:center}

.how{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.how li{
  position:relative;font-size:12.5px;line-height:1.6;color:#DCCDB4;
  background:#191209;border:1px solid #3D2C1D;border-radius:12px;
  padding:8px 34px 8px 11px;
}
.how li::before{
  content:"❖";position:absolute;inset-inline-start:12px;inset-inline-end:auto;top:8px;
  color:var(--brass);font-size:11px;
}
.how li{padding-inline-start:34px;padding-inline-end:11px}
.how li b{color:var(--brass-lite)}

.menu-music{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:#191209;border:1px solid #3D2C1D;border-radius:12px;
  padding:9px 11px;margin-bottom:14px;
}
.mm-txt{display:flex;flex-direction:column;min-width:0}
.mm-txt b{font-size:12.5px;color:var(--cream)}
.mm-txt span{font-size:10.5px;color:#9E8F79;line-height:1.4}
.mini{
  flex:0 0 auto;padding:9px 14px;min-height:40px;border-radius:10px;
  background:#2E2013;border:1px solid var(--brass-dark);color:var(--brass-lite);
  font-size:12px;font-weight:700;white-space:nowrap;
}
.mini:active{transform:scale(.95)}
.mini:disabled{opacity:.5}
.mini.busy{color:#BFAF95;border-color:#4A3626}

.best-line{text-align:center;font-size:12px;color:#9E8F79;margin-bottom:12px}
.best-line b{color:var(--brass-lite);font-size:14px}

.primary{
  display:block;width:100%;min-height:54px;border-radius:14px;
  background:linear-gradient(180deg,#D8B243 0%, #A8801C 100%);
  color:#241708;font-size:16px;font-weight:800;
  box-shadow:0 8px 22px rgba(201,162,39,.28), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .1s, filter .15s;
}
.primary:active{transform:scale(.975);filter:brightness(.95)}
.ghost{
  display:block;width:100%;min-height:48px;margin-top:9px;border-radius:14px;
  background:#231810;border:1px solid #4A3626;color:#DCCDB4;font-size:14px;font-weight:700;
}
.ghost:active{transform:scale(.975)}

.pause-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.pause-stats div{
  background:#191209;border:1px solid #3D2C1D;border-radius:12px;
  padding:10px;text-align:center;display:flex;flex-direction:column;gap:2px;
}
.pause-stats b{font-size:20px;color:var(--brass-lite);font-weight:800}
.pause-stats span{font-size:11px;color:#9E8F79}

.end-title{color:var(--brass-lite)}
.score-hero{text-align:center;margin-bottom:14px}
.score-hero b{display:block;font-size:46px;line-height:1;font-weight:800;color:var(--brass-lite);text-shadow:0 4px 20px rgba(201,162,39,.4)}
.score-hero span{font-size:12.5px;color:#BFAF95}
.end-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.end-grid div:last-child{grid-column:1/-1}
.end-grid div{
  background:#191209;border:1px solid #3D2C1D;border-radius:12px;
  padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:2px;
}
.end-grid b{font-size:19px;color:var(--cream);font-weight:800}
.end-grid span{font-size:10.5px;color:#9E8F79}
.tip{
  margin:0 0 14px;padding:11px 12px;border-radius:12px;
  background:linear-gradient(180deg,#2E2013,#241A10);border:1px solid #57402A;
  font-size:12.5px;line-height:1.65;color:#E7D8BE;text-align:center;
}

/* focus */
:focus-visible{outline:2px solid var(--brass-lite);outline-offset:2px;border-radius:8px}

/* short screens */
@media (max-height:640px){
  .panel{padding:15px 14px 14px}
  .brand-mark{width:44px;height:44px;border-radius:13px}
  .brand h1{font-size:21px}
  .how li{font-size:11.5px;padding-top:6px;padding-bottom:6px}
  .score-hero b{font-size:36px}
  .act.pour{width:72px;height:72px;min-height:72px}
  .src{min-height:46px}
  .src-tx{font-size:9.5px}
}
@media (max-width:360px){
  .src-tx{font-size:9px}
  .hs{min-width:40px;padding:2px 4px}
  .karam-name{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.06s !important}
}

/* ---- ضمان بقاء المشهد ظاهرًا على أي ارتفاع ---- */
.stage{min-height:56px}

/* شاشات قصيرة: نضغط اللوحة ليبقى للمشهد متّسع */
@media (max-height:560px){
  .icon-btn{width:34px;height:34px}
  .dock{padding:5px 7px 6px;gap:5px}
  .src{min-height:44px}
  .act.pour{width:66px;height:66px;min-height:66px}
}
@media (max-height:440px){
  .hud{padding:3px 7px}
  .hud-turn{display:none}
  .icon-btn{width:32px;height:32px}
  .hs b{font-size:13px}
  .hs em{font-size:9px}
  .dock{padding:4px 6px 5px;gap:4px}
  .src{min-height:38px;border-radius:9px}
  .src-ic{width:16px;height:16px}
  .src-tx{font-size:9px}
  .act{min-height:42px;border-radius:11px}
  .act span{font-size:10.5px}
  .act.side svg{width:18px;height:18px}
  .act.pour{width:52px;height:52px;min-height:52px}
  .pour-ic svg{width:20px;height:20px}
  .pour-tx{font-size:12px}
  .pour-sub{display:none}
}
@media (max-height:340px){
  .hud{padding:2px 6px}
  .icon-btn{width:28px;height:28px}
  .karam-head{margin-bottom:2px}
  .karam-bar{height:7px}
  .dock{padding:3px 5px 4px;gap:3px}
  .src{min-height:34px}
  .src-charge{height:2px;bottom:1px}
  .act{min-height:36px}
  .act.pour{width:44px;height:44px;min-height:44px}
  .pour-ic svg{width:17px;height:17px}
}