/* lotterybhutan home page: tablet + phone layout. Desktop (>1180px) is untouched.
   ROLLBACK: remove the <link> to this file from index.php. */
img{max-width:100%}
#responsecontainer img,#responsecontainer2 img,#update_numb_div img,#update_time_div img{max-width:none}
@media (max-width:960px){
  html{overflow-x:hidden}
  #main_category{width:100% !important;max-width:100% !important;padding:10px 12px 0 !important}
  .lb-top{flex-direction:column !important;align-items:center !important;gap:12px !important}
  #logo_div{justify-content:center}
  #login_div{width:100% !important;flex-wrap:wrap;justify-content:center}
  #login_div form{flex-wrap:wrap;justify-content:center}
  #login_div input.input{width:min(150px,34vw) !important}
  #update_time_div{display:grid !important;grid-template-columns:1fr 1fr;gap:10px}
  #update_time_div > .col-xs-3{width:auto !important;padding:0 !important}
  #update_time_div > .col-xs-3 > div{width:100% !important;text-align:center;white-space:normal}
  #tabbutton_div{max-width:100%}
  #update_table_div{width:100% !important}
  #footer_div{margin-top:0;line-height:1.8;text-align:center !important}
  #sound-popup .popup-content{width:min(340px,92vw) !important;margin:84px auto 0 !important}
}
/* three draw tiles: smaller flap cards so they fit three across */
@media (max-width:900px){
  #main_category .row-fluid > .col-xs-4{padding:20px 6px 14px !important}
  #main_category .row-fluid > .col-xs-4 > .flap{--w:64px;--h:92px}
  .flap .half span{font-size:78px !important}
  #main_category .row-fluid > .col-xs-4 > div[id^=game_name_]{font-size:12px !important;letter-spacing:3px}
  /* the time-select strip */
  #time_data_table,#order_time_data_table{width:100% !important}
  #time_data_table td,#order_time_data_table td{display:block;width:100% !important;text-align:left !important;padding:4px 0}
  #game_time,#order_game_time{height:40px !important;font-size:16px}
  /* confirmed-orders grid scrolls sideways rather than squashing */
  #order_table_div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #order_table_div #data_table{min-width:720px;display:table}
}
@media (max-width:700px){
  #main_category .row-fluid{grid-template-columns:1fr !important;gap:14px !important}
  #main_category .row-fluid > .col-xs-4 > .flap{--w:84px;--h:120px}
  .flap .half span{font-size:100px !important}
}

/* popup: padding is inside the width, so the box can never be wider than the screen */
#sound-popup .popup-content{box-sizing:border-box}
@media (max-width:900px){
  #table_div{width:100% !important;height:auto !important;box-sizing:border-box;overflow:hidden}
}