/* northlottery home page: tablet + phone layout. Desktop (>900px) is untouched.
   ROLLBACK: remove the <link> to this file and the "nl-fit" <script> from index.php. */
img{max-width:100%}
#responsecontainer img,#responsecontainer2 img,#update_numb_div img,.bottom_btn img{max-width:none}
@media (max-width:900px){
  html{overflow-x:hidden}
  body{min-width:0 !important}
  #holder{box-sizing:border-box;position:static !important;width:100% !important;left:0 !important;margin:0 !important;height:auto !important}
  #side_ribbon{display:none !important}
  #top_text{box-sizing:border-box}
  #container div:not(#update_numb_div):not(#update_numb_div *):not(#responsecontainer2 *){max-width:100%}
  #top_text{box-sizing:border-box;position:static !important;width:100% !important;height:auto !important;padding:8px 10px 0}
  #container{position:static !important;width:100% !important;height:auto !important;padding:6px 12px 28px !important;box-sizing:border-box}
  #logo_div{float:none !important;width:100% !important;display:flex;justify-content:center;margin:6px 0}
  #login_div{float:none !important;margin:8px 0 !important;width:100% !important;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;box-sizing:border-box}
  #login_div form{margin:0}
  #login_div input.input,#user_id,#user_pin{width:min(150px,34vw) !important}
  #tabbutton_div{float:none !important;margin:12px 0 0 !important;width:100% !important;display:flex;gap:6px}
  #tabbutton_div .topmenu_but{flex:1}
  #tabbutton_div{flex-wrap:wrap}
  #tabbutton_div > div{flex:0 0 auto;margin-left:auto}
  #mark,textarea{box-sizing:border-box;width:100% !important;max-width:100% !important;float:none !important}
  #update_table_div,#update_time_div{float:none !important;width:100% !important;height:auto !important;margin:0 0 12px !important;box-sizing:border-box}
  #update_table_div{overflow:visible !important;border:0 !important;background:none !important}
  /* the two panels are normally stacked and slid with transforms; here only the active one shows, in normal flow */
  #table_div,#order_table_div{position:static !important;transform:none !important;visibility:visible !important;transition:none !important;width:100% !important;height:auto !important;box-sizing:border-box}
  #table_div:not(.panel-active),#order_table_div:not(.panel-active){display:none !important}
  .nl-shine{display:none !important}
  #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}
  #time_data_table #sel_time_div > div,#order_sel_time_div > div{float:none !important;margin-left:0 !important}
  #game_time,#order_game_time{height:40px !important;font-size:16px}
  /* order grid -> one card per game */
  #table_div #data_table{display:block;width:100% !important;table-layout:auto;border:0 !important}
  #table_div #data_table thead{display:none}
  #table_div #data_table tbody{display:block}
  #table_div #data_table tbody tr:nth-child(-n+3){display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px 6px;margin:0 0 12px;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);align-items:end}
  #table_div #data_table tbody tr:nth-child(-n+3) > td{display:block;width:auto !important;min-width:0 !important;padding:0 !important;background:none !important;border:0 !important;text-align:center;border-radius:0 !important}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(1){grid-column:1 / -1;text-align:left;padding:2px 4px 6px !important}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(2){grid-column:1 / span 5;text-align:left;font-size:12px}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(2)::before{content:"Win ";opacity:.7}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(3){grid-column:6 / span 5;text-align:right;font-size:12px}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(3)::before{content:"MRP ";opacity:.7}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(n+4):nth-child(-n+15)::before{display:block;font:700 11px/1.4 Arial,sans-serif;opacity:.75;margin-bottom:2px}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(4)::before{content:"0"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(5)::before{content:"1"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(6)::before{content:"2"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(7)::before{content:"3"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(8)::before{content:"4"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(9)::before{content:"5"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(10)::before{content:"6"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(11)::before{content:"7"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(12)::before{content:"8"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(13)::before{content:"9"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(14){grid-column:1 / span 4}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(14)::before{content:"Tot Qty"}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(15){grid-column:5 / span 4}
  #table_div #data_table tbody tr:nth-child(-n+3) > td:nth-child(15)::before{content:"Total Rs"}
  #table_div .order_input{width:100% !important;max-width:none !important;height:40px !important;font-size:16px !important}
  #table_div #data_table tbody tr:nth-child(4){display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-items:center;padding:4px 0 8px}
  #table_div #data_table tbody tr:nth-child(4) > td{display:block;width:auto !important;padding:0 !important;background:none !important;border:0 !important}
  #table_div #data_table tbody tr:nth-child(4) .order_input{width:110px !important}
  #reset_table_button,#buy_table_button{height:44px !important;min-width:120px}
  /* confirmed orders: sideways scroll */
  #order_table_div{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #order_table_div #data_table{min-width:720px}
  /* draw info -> 2 x 2 */
  #update_time_div{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;background:none !important}
  #update_time_div > div{float:none !important;width:auto !important;height:auto !important;margin:0 !important;padding:10px 6px !important;text-align:center;white-space:normal}
  /* result tiles are fixed art: scaled to fit (the script at the bottom of index.php sets the zoom) */
  #update_numb_div{float:none !important;position:absolute !important;left:0;top:0;margin:0 !important;transform-origin:0 0;height:360px !important;width:820px !important;max-width:none}
  #update_numb_div > div:first-child{position:absolute}
  #responsecontainer2{position:absolute !important;left:48px !important;top:-92px !important}
  .bottom_btn{position:static !important;display:block !important;width:auto !important;height:auto !important;margin:10px auto !important;text-align:center !important;max-width:60%}
  .bottom_btn img{height:auto;max-width:100%}
  #footer_div{position:static !important;width:100% !important;height:auto !important;text-align:center !important;margin-top:12px;line-height:1.9}
  #sound-popup .popup-content{width:min(340px,92vw) !important;margin:84px auto 0 !important}
}

/* ---- phones: stacked result tiles instead of the scaled fixed picture ---- */
#nl-mini{display:none}
@media (max-width:700px){
  #update_numb_div,#responsecontainer2,#nl-fitwrap{display:none !important}
  #nl-mini{display:grid;gap:12px;margin:0 0 14px}
  .nlm-tile{position:relative;padding:14px 12px 16px;text-align:center;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#26232f,#16141d);box-shadow:0 10px 24px rgba(0,0,0,.4)}
  .nlm-name{font:700 20px Georgia,serif;letter-spacing:1px;color:#fff;text-transform:uppercase;text-shadow:0 2px 3px #000}
  .nlm-time{margin:4px 0 10px;font:700 13px "Segoe UI",Arial,sans-serif;color:#ffd979}
  .nlm-digits{display:flex;justify-content:center;gap:12px}
  .nlm-digits span{display:flex;align-items:center;justify-content:center;width:64px;height:84px;border-radius:12px;background:#0b0a10;border:3px solid #c9ced6;
    font:900 56px/1 "Arial Black",Impact,sans-serif;color:#eef1f6;text-shadow:0 2px 0 #7b8089,0 0 14px rgba(255,255,255,.25);box-shadow:inset 0 0 14px rgba(0,0,0,.8),0 4px 10px rgba(0,0,0,.5)}
}

/* popup: padding is inside the width, so the box can never be wider than the screen */
#sound-popup .popup-content{box-sizing:border-box}