/* lotterybhutan index.php: its own modern look. Deep ink, saffron + crimson, flat rounded tiles.
   ROLLBACK: restore index.php and css/align.css from the scratchpad backup bk_lb_index2 (or the original in bk_lb_index). */
:root{--ink:#100c16;--ink2:#181220;--tile:#1d1626;--tile2:#241b2f;--line:rgba(255,255,255,.08);--text:#f3eef8;--muted:#9d93ad;
  --saffron:#ff9f1c;--saffron2:#ffbf47;--crimson:#e63946;--jade:#2ec4a6;--r:18px}
html{background:var(--ink) !important}
body{min-width:0 !important;background:transparent !important;
  color:var(--text);font-family:"Segoe UI",system-ui,Arial,sans-serif}
.pagebg{display:block;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(1.2) brightness(1.3) contrast(1.05)}
html::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(16,12,22,.16),rgba(16,12,22,.34))}

#main_category{width:900px !important;max-width:100%;margin:0 auto 36px !important;padding:0 14px !important}
#main_category .row{margin-left:0 !important;margin-right:0 !important}
#main_category [class*=col-md-]{float:none !important;width:100% !important;margin-left:0 !important;padding-left:0 !important;padding-right:0 !important}

/* ticker band */
.ticker{margin-top:10px;border-radius:999px;background:rgba(255,159,28,.08);border:1px solid rgba(255,159,28,.25)}
.ticker-item{color:var(--saffron2);font:600 15px/34px "Segoe UI",Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase}

/* header: brand left, login right */
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 18px;clear:both}
#logo_div{display:flex;align-items:center;gap:16px}
#logo_div > div{float:none !important}
#logo_div .cycle-slideshow{width:104px !important;height:auto !important}
#logo_div .cycle-slideshow img{width:104px !important;height:auto !important}
#logo_div img[src*="logo-text"]{height:70px;width:auto;filter:drop-shadow(0 2px 10px rgba(255,159,28,.35))}
#login_div{margin:0 !important;padding:6px 6px 6px 16px;background:var(--tile);border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:10px;font-size:13px !important;color:var(--text)}
#login_div form{margin:0;display:flex;align-items:center;gap:8px}
#login_div form > div{float:none !important;margin:0 !important;display:flex;align-items:center;gap:6px}
#login_div label{margin:0;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.9px;font-weight:700}
#login_div input.input{margin:0 !important;width:112px !important;height:32px;padding:0 12px;background:var(--ink);color:#fff !important;border:1px solid var(--line);border-radius:999px;outline:none}
#login_div input.input:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(255,159,28,.22)}
#login_div .btn,#login_div input[type=submit]{margin:0 !important;height:32px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--saffron2),var(--saffron));color:#2b1700;font-weight:800;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
#login_div .btn:hover,#login_div input[type=submit]:hover{filter:brightness(1.08)}
.lb-welcome{display:flex;flex-direction:column;line-height:1.3;margin-right:4px;font-size:12px}
.lb-welcome b{color:var(--saffron2);font-size:14px}

/* segmented tabs */
#tabbutton_div{display:inline-flex !important;gap:4px;margin:0 0 12px !important;padding:4px;width:auto !important;background:var(--tile);border:1px solid var(--line);border-radius:999px}
#tabbutton_div .topmenu_but{width:auto !important;height:auto !important;margin:0 !important;padding:8px 22px !important;border:0 !important;border-radius:999px !important;background:transparent !important;background-image:none !important;
  color:var(--muted) !important;font:700 12px "Segoe UI",Arial,sans-serif !important;letter-spacing:.8px;text-transform:uppercase;transition:color .15s,background .15s}
#tabbutton_div .topmenu_but:hover{color:var(--text) !important}
#tabbutton_div .topmenu_but.tab-active{background:linear-gradient(135deg,var(--saffron2),var(--saffron)) !important;color:#2b1700 !important}

/* order panel */
#update_table_div{width:100% !important;height:auto !important;background:var(--tile) !important;background-image:none !important;border:1px solid var(--line);border-radius:var(--r) !important;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#main_category div[style*="width: 820px"]{width:100% !important}
#table_div,#order_table_div{width:100% !important;height:auto !important;padding:14px 16px 16px !important;color:var(--text) !important}
#time_data_table,#order_time_data_table{width:100% !important;margin-bottom:8px}
#time_data_table label,#order_time_data_table label{color:var(--muted);font:700 11px "Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:.9px}
#online_users{color:var(--jade) !important;font-weight:700;letter-spacing:.6px;font-size:12px !important;text-transform:uppercase}
#sel_draw_time_left{color:var(--text) !important}
#game_time,#order_game_time,select.text{background:var(--ink) !important;color:#fff !important;border:1px solid var(--line) !important;border-radius:999px !important;height:32px !important;padding:0 14px;font:600 13px "Segoe UI",Arial,sans-serif;outline:none;float:none !important}
#sel_time_div > div,#order_sel_time_div > div{float:none !important}

#data_table{width:100% !important;border-collapse:separate;border-spacing:0 6px;font-family:"Segoe UI",Arial,sans-serif}
#data_table thead th{background:transparent !important;color:var(--muted) !important;border:0 !important;height:auto !important;padding:2px 2px 4px !important;font:700 10px "Segoe UI",Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;text-align:center}
#data_table thead th:nth-child(2){color:var(--crimson) !important}
#data_table td{background:transparent !important;border:0 !important;color:var(--text) !important;height:auto !important;padding:4px 2px !important;font-weight:600;text-shadow:none !important;text-align:center}
#data_table td.commontd_first{font-size:17px !important;font-weight:800;text-align:left;padding-left:16px !important;color:#fff !important;letter-spacing:.2px}
#data_table td.commontd_first::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;background:var(--saffron);box-shadow:0 0 10px currentColor;color:var(--saffron)}
#data_table tbody tr:nth-child(2) td.commontd_first::before{background:var(--jade);color:var(--jade)}
#data_table tbody tr:nth-child(3) td.commontd_first::before{background:var(--crimson);color:var(--crimson)}
#data_table td.commontxt[style*="CD0C0C"]{color:var(--crimson) !important}
#table_div #data_table tbody tr:nth-child(-n+3) td,#order_table_div #data_table tbody tr:nth-child(-n+3) td{background:var(--tile2) !important}
#data_table tbody tr:nth-child(-n+3) td:first-child{border-radius:12px 0 0 12px}
#data_table tbody tr:nth-child(-n+3) td:last-child{border-radius:0 12px 12px 0}
.order_input{box-sizing:border-box;width:calc(100% - 4px) !important;height:28px !important;background:var(--ink) !important;color:var(--saffron2) !important;border:1px solid var(--line) !important;border-radius:9px !important;
  font:700 14px "Segoe UI",Arial,sans-serif !important;text-align:center !important;outline:none;box-shadow:none !important;transition:border-color .15s,box-shadow .15s}
.order_input:focus{border-color:var(--saffron) !important;box-shadow:0 0 0 3px rgba(255,159,28,.22) !important}
.order_input[readonly]{background:rgba(255,255,255,.04) !important;color:var(--text) !important;border-color:var(--line) !important}
#total_tab_qty,#total_tab_price{color:var(--saffron2) !important;font-size:15px !important}
#reset_table_button,#buy_table_button{width:120px !important;height:34px;margin:6px 0 0 !important;padding:0 !important;border-radius:999px;font-weight:800;letter-spacing:.8px;font-size:12px}
#reset_table_button{background:transparent !important;color:var(--muted) !important;border:1px solid var(--line) !important;box-shadow:none}
#reset_table_button:hover{color:var(--text) !important;border-color:var(--muted) !important}
#buy_table_button{background:linear-gradient(135deg,var(--saffron2),var(--saffron)) !important;color:#2b1700 !important;border:0 !important;box-shadow:0 8px 20px rgba(255,159,28,.3)}
#buy_table_button:hover{filter:brightness(1.08)}

/* draw info chips */
#main_category .col-md-8[style*="margin-top:30px"]{margin-top:14px !important}
#update_time_div{display:flex;gap:10px;color:var(--text) !important}
#update_time_div > .col-xs-3{float:none;flex:1;width:auto;padding:0}
#update_time_div > .col-xs-3 > div{margin:0 !important;width:auto !important;height:auto !important;padding:10px 8px;text-align:center;font-size:12px !important;font-weight:700;letter-spacing:.4px;color:var(--text) !important;
  background:var(--tile);border:1px solid var(--line);border-radius:14px;white-space:nowrap}

/* result tiles: three columns, name on top, the two digits side by side, draw time below */
#main_category .row-fluid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;margin:16px 0 0 !important}
#main_category .row-fluid > .col-xs-4{float:none;width:auto;min-width:0 !important;min-height:0 !important;padding:16px 10px 14px !important;margin:0 !important;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;row-gap:10px;justify-items:center;align-items:center;
  background:linear-gradient(180deg,var(--tile2),var(--tile));border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
#main_category .row-fluid > .col-xs-4::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--saffron)}
#main_category .row-fluid > .col-xs-4:nth-child(2)::before{background:var(--jade)}
#main_category .row-fluid > .col-xs-4:nth-child(3)::before{background:var(--crimson)}
#main_category .row-fluid > .col-xs-4 > div[style*="position:absolute;"]:first-child{display:none}
#main_category .row-fluid > .col-xs-4 > div[id^=result_]{position:static !important;width:auto !important;height:auto !important;min-height:60px;margin:0 !important;grid-row:2;display:flex;align-items:center;justify-content:center}
#main_category .row-fluid > .col-xs-4 > div[id^=result_] img{display:block;max-height:78px;width:auto}
#main_category .row-fluid > .col-xs-4 > div[id^=result_]:nth-of-type(2){grid-column:1;justify-self:end;padding-right:3px}
#main_category .row-fluid > .col-xs-4 > div[id^=result_]:nth-of-type(3){grid-column:2;justify-self:start;padding-left:3px}
#main_category .row-fluid > .col-xs-4 > div[id^=game_name_]{position:static !important;width:auto !important;height:auto !important;margin:0 !important;grid-column:1 / 3;grid-row:1;text-align:center !important;
  color:#fff !important;text-shadow:none !important;font:800 17px "Segoe UI",Arial,sans-serif !important;letter-spacing:.4px;text-transform:uppercase}
#main_category .row-fluid > .col-xs-4 > div[id^=on_time_]{position:static !important;width:auto !important;height:auto !important;margin:0 !important;grid-column:1 / 3;grid-row:3;text-align:center;
  padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted) !important;text-shadow:none !important;font:600 12px "Segoe UI",Arial,sans-serif !important;letter-spacing:.4px}
#update_numb_div{border:0 !important;background:transparent !important;box-shadow:none !important}

/* view results + footer */
#main_category .col-md-9.text-center{margin:26px 0 8px !important;text-align:center}
#view_reslts{background:transparent;color:var(--text);border:1px solid var(--saffron);border-radius:999px;padding:11px 30px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;font-size:12px;transition:background .15s,color .15s}
#view_reslts:hover{background:var(--saffron);color:#2b1700}
#view_reslts .glyphicon{color:var(--saffron) !important}
#view_reslts:hover .glyphicon{color:#2b1700 !important}
#footer_div{position:static !important;width:auto !important;height:auto !important;text-align:center !important;margin-top:6px;color:var(--muted)}
#footer_div a{color:var(--saffron2) !important;font-weight:600 !important}

/* voice popup */
#sound-popup{background:rgba(8,6,12,.82) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#sound-popup .popup-content{background:var(--tile) !important;border:1px solid var(--line);border-radius:var(--r) !important;box-shadow:0 30px 80px rgba(0,0,0,.7);margin:140px auto 0 !important;width:340px;max-width:90vw;padding:26px 24px !important}
#sound-popup h3{margin:0 0 6px;color:#fff;font:700 18px "Segoe UI",Arial,sans-serif}
#btn-yes{background:linear-gradient(135deg,var(--saffron2),var(--saffron)) !important;color:#2b1700 !important;border:0 !important;border-radius:999px !important;padding:10px 36px !important;font:800 13px "Segoe UI",Arial,sans-serif;letter-spacing:.6px}

/* grand total row */
#data_table tbody tr:last-child td{white-space:nowrap;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted) !important}
#data_table tbody tr:last-child td[colspan="2"]{text-align:right;padding-right:10px !important}

/* ===== neon light running round the border (result tiles fast, order panel slow) ===== */
#main_category .row-fluid > .col-xs-4{--c:var(--saffron);isolation:isolate;border:0 !important;background:transparent !important;box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 28px color-mix(in srgb,var(--c) 18%,transparent)}
#main_category .row-fluid > .col-xs-4:nth-child(2){--c:var(--jade)}
#main_category .row-fluid > .col-xs-4:nth-child(3){--c:var(--crimson)}
#main_category .row-fluid > .col-xs-4::before{content:"";position:absolute;inset:-60%;left:-60%;right:-60%;top:-60%;bottom:-60%;height:auto;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--c) 80%,#fff 86%,transparent 92%) !important;animation:lbSpin 4.5s linear infinite}
#main_category .row-fluid > .col-xs-4:nth-child(2)::before{animation-delay:-1.5s}
#main_category .row-fluid > .col-xs-4:nth-child(3)::before{animation-delay:-3s}
#main_category .row-fluid > .col-xs-4::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:calc(var(--r) - 2px);
  background:radial-gradient(90% 70% at 50% 0,color-mix(in srgb,var(--c) 22%,var(--tile2)),var(--tile) 75%);box-shadow:inset 0 0 36px color-mix(in srgb,var(--c) 16%,transparent)}
@keyframes lbSpin{to{transform:rotate(360deg)}}
/* tile contents sit above the light; undo the page's inline left/top offsets now that they are positioned */
#main_category .row-fluid > .col-xs-4 > div{left:auto !important;top:auto !important;right:auto !important;bottom:auto !important}
#main_category .row-fluid > .col-xs-4 > div[id^=result_],#main_category .row-fluid > .col-xs-4 > div[id^=game_name_],#main_category .row-fluid > .col-xs-4 > div[id^=on_time_]{position:relative !important;z-index:1}
#main_category .row-fluid > .col-xs-4 > div[id^=result_] img{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 65%,transparent))}
#main_category .row-fluid > .col-xs-4 > div[id^=on_time_]{border:1px solid color-mix(in srgb,var(--c) 50%,transparent)}

/* order panel: same light, slower, saffron */
#update_table_div{--c:var(--saffron);position:relative;isolation:isolate;background:transparent !important;border:0 !important;overflow:hidden}
#update_table_div::before{content:"";position:absolute;inset:-70%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 70%,var(--c) 86%,#fff 90%,transparent 95%);animation:lbSpin 9s linear infinite}
#update_table_div::after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:calc(var(--r) - 2px);background:var(--tile)}
#update_table_div > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){#main_category .row-fluid > .col-xs-4::before,#update_table_div::before{animation:none}}

/* ===== split-flap scoreboard digits (cards built by the script at the bottom of index.php) ===== */
#main_category .row-fluid > .col-xs-4 > div.has-flap{display:none !important}
#main_category .row-fluid > .col-xs-4 > .flap{--w:92px;--h:128px;position:relative;z-index:1;width:var(--w);height:var(--h);grid-row:2;perspective:640px;margin:2px 0;
  border-radius:10px;box-shadow:0 10px 22px rgba(0,0,0,.65),0 0 24px color-mix(in srgb,var(--c) 38%,transparent)}
#main_category .row-fluid > .col-xs-4 > .flap.fa{grid-column:1;justify-self:end;margin-right:3px}
#main_category .row-fluid > .col-xs-4 > .flap.fb{grid-column:2;justify-self:start;margin-left:3px}
/* centre hinge pins */
#main_category .row-fluid > .col-xs-4 > .flap::before,#main_category .row-fluid > .col-xs-4 > .flap::after{content:"";position:absolute;top:50%;width:9px;height:14px;margin-top:-7px;z-index:6;background:linear-gradient(90deg,#555,#161616);border-radius:3px;box-shadow:0 0 0 1px #000}
#main_category .row-fluid > .col-xs-4 > .flap::before{left:-4px}
#main_category .row-fluid > .col-xs-4 > .flap::after{right:-4px;inset:auto;left:auto;right:-4px;top:50%}
.flap .half{position:absolute;left:0;right:0;height:calc(50% - 1px);overflow:hidden;background:linear-gradient(180deg,#26262c,#0d0d11);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap .half.top,.flap .half.flip-top{top:0;border-radius:10px 10px 0 0;border-bottom:1px solid #000;background:linear-gradient(180deg,#2c2c33,#121216)}
.flap .half.bot,.flap .half.flip-bot{bottom:0;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#17171b,#0a0a0d)}
.flap .half span{position:absolute;left:0;right:0;height:calc(var(--h) - 2px);display:flex;align-items:center;justify-content:center;
  font:900 108px/1 "Arial Black","Segoe UI Black",Impact,sans-serif;color:#f7f3e8;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.flap .half.top span,.flap .half.flip-top span{top:0}
.flap .half.bot span,.flap .half.flip-bot span{bottom:0}
.flap .half.top::after,.flap .half.flip-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 40%)}
.flap .half.flip-top{transform-origin:50% 100%;z-index:4;animation:flapTop .165s ease-in forwards}
.flap .half.flip-bot{transform-origin:50% 0;transform:rotateX(90deg);z-index:5;animation:flapBot .165s ease-out forwards}
@keyframes flapTop{to{transform:rotateX(-90deg);filter:brightness(.55)}}
@keyframes flapBot{from{filter:brightness(.55)}to{transform:rotateX(0);filter:none}}
@media (prefers-reduced-motion:reduce){.flap .half.flip-top,.flap .half.flip-bot{animation:none}}

/* hinge pins removed */
#main_category .row-fluid > .col-xs-4 > .flap::before,#main_category .row-fluid > .col-xs-4 > .flap::after{content:none !important;display:none !important}

/* tab switch: both panels share one grid cell so the box never changes size mid-transition (cross-fade, see "tabfade" in index.php) */
#update_table_div{display:grid !important}
#update_table_div > #table_div,#update_table_div > #order_table_div{grid-area:1 / 1;align-self:start}
#update_table_div{min-height:300px}

/* tab switch keeps the page's own slideUp/slideDown. The two panels share one cell; the Confirmed panel sits on top with a solid
   background, so it slides down over Place order and slides up to reveal it - no resize, no see-through overlap. */
#table_div,#order_table_div{background:var(--tile)}
#update_table_div > #order_table_div{z-index:2 !important}
#update_table_div > #table_div{z-index:1}

/* the spinning border light must never leak outside the rounded corners (it did while the panel animated between tabs) */
#update_table_div{clip-path:inset(0 round var(--r));contain:paint;will-change:clip-path}
#update_table_div::before{will-change:transform}
#main_category .row-fluid > .col-xs-4{clip-path:inset(0 round var(--r));contain:paint}

/* both tabs start their content at exactly the same height (Confirmed order was 8px higher, so content jumped on every switch) */
#order_sel_time_div > div{padding-top:10px}

/* horizontal slide between the two order panels (see "hslide" in index.php): panels are clipped by the card, move with transforms only */
#table_div,#order_table_div{will-change:transform;backface-visibility:hidden}

/* ===== border light v2: a thin ring (masked conic gradient) whose start angle is animated, so the light really travels round the edge ===== */
@property --lbA{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lbA{to{--lbA:360deg}}
/* undo the old clipping / giant-spinner approach */
#update_table_div,#main_category .row-fluid > .col-xs-4{clip-path:none !important;contain:none !important;will-change:auto !important}
#main_category .row-fluid > .col-xs-4::before,#update_table_div::before{
  content:"" !important;position:absolute !important;inset:0 !important;left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;width:auto !important;height:auto !important;
  box-sizing:border-box;padding:2px;border-radius:var(--r);z-index:3 !important;pointer-events:none;transform:none !important;
  background:conic-gradient(from var(--lbA),transparent 0 58%,color-mix(in srgb,var(--c) 60%,transparent) 74%,var(--c) 84%,#fff 90%,transparent 95%) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 5px var(--c));animation:lbA 4.5s linear infinite !important}
#update_table_div::before{animation-duration:9s !important}
#main_category .row-fluid > .col-xs-4:nth-child(2)::before{animation-delay:-1.5s !important}
#main_category .row-fluid > .col-xs-4:nth-child(3)::before{animation-delay:-3s !important}
#update_table_div,#main_category .row-fluid > .col-xs-4{border-radius:var(--r) !important}
@media (prefers-reduced-motion:reduce){#main_category .row-fluid > .col-xs-4::before,#update_table_div::before{animation:none !important}}