/* إصدار 2.1.18: طبقة موحّدة للشاشات الضيقة، المتصفحات المضمنة، وهواتف الشاشات الطويلة. */
:root{--fbrkh-safe-top:env(safe-area-inset-top,0px);--fbrkh-safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{inline-size:100%;min-inline-size:320px;max-inline-size:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
*,*:before,*:after{min-inline-size:0}
img,svg,video,canvas{max-inline-size:100%;block-size:auto}
button,input,select,textarea{font:inherit;max-inline-size:100%}
#app,#qApp,#kApp{min-inline-size:0;overflow-x:clip}
.modal,.q-modal,.modal-card,.sound-modal,.player-sound-manager-modal,.participant-manager-modal{max-inline-size:calc(100vw - 12px)}

@media(max-width:700px){
  body{padding-bottom:var(--fbrkh-safe-bottom)}
  .topbar,.q-nav,.k-top,.top{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));gap:8px;flex-wrap:wrap}
  .topbar nav,.q-nav nav,.top nav{max-inline-size:100%;flex-wrap:wrap;gap:5px}
  .app-shell,.q-screen,.k-shell,.game-shell{inline-size:100%;max-inline-size:100%;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));box-sizing:border-box}
  .q-nav .q-brand small,.k-top #connection{display:none}
  .q-nav .q-brand,.top .brand{min-inline-size:0}
  .q-nav .q-brand b,.top .brand strong{font-size:.92rem}
  .q-nav nav button,.q-nav nav a,.top nav .top-btn{min-block-size:40px;padding-inline:9px;font-size:.78rem}
  .k-top{min-block-size:54px}.k-top strong{font-size:1rem}
  .modal,.q-modal{padding:max(8px,var(--fbrkh-safe-top)) 6px max(8px,var(--fbrkh-safe-bottom))}
  .modal-card,.q-modal>*{max-block-size:calc(100dvh - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

@media(max-width:430px){
  html,body{min-inline-size:0}
  .topbar,.q-nav,.k-top,.top{padding-inline:9px}
  .q-nav nav button:nth-of-type(2),.q-nav nav .q-platform-home{display:none}
  .top nav .top-btn{padding-inline:8px}
  .q-nav .q-brand span,.top .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .q-nav .q-brand img,.top .brand img{inline-size:31px;block-size:31px}
  .sound-grid,.join-sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-preset-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-height:620px) and (orientation:landscape){
  .topbar,.q-nav,.k-top,.top{min-block-size:46px;padding-block:4px}
  .modal-card,.q-modal>*{max-block-size:calc(100dvh - 8px)}
  body.game-active .game-settings-modal{max-block-size:calc(100dvh - 8px)!important}
}