#history-page{display:none;color:#f3f6fa;font-family:Inter,Segoe UI,Arial,sans-serif}#desktop-design.history-open>.dp-body,#desktop-design.history-open>.dp-footer,#desktop-design.history-open>#leaderboard-page{display:none!important}#desktop-design.history-open>#history-page{display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 70px);padding:10px 26px 18px;background:radial-gradient(circle at 40% 0,#11202d,#070d13 65%)}
.hp-hero{min-height:112px;display:flex;align-items:center;justify-content:space-between;padding:18px 25px;border:1px solid #ffffff24;border-radius:12px;background:linear-gradient(90deg,#06101af2,#07111b82 55%,#06101ae0),url('../images/ludo-bg.jpg') center 47%/cover}.hp-hero h1{margin:0 0 7px;font-size:34px}.hp-hero em{color:#ffdc00;font-style:normal}.hp-hero p{margin:0;color:#d2d8df}.hp-hero blockquote{margin:0;color:#b9c4d4;line-height:1.5;font-style:italic}
.hp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.hp-stats article{min-width:0;display:flex;align-items:center;gap:13px;padding:11px 13px;border:1px solid #263846;border-radius:10px;background:#0a1721}.hp-stats svg{width:39px;height:39px;padding:8px;border-radius:8px;color:#00df8a;background:#003526}.hp-stats article:nth-child(2) svg{color:#ffda00;background:#342d0c}.hp-stats article:nth-child(4) svg{color:#ff4756;background:#37151b}.hp-stats small,.hp-stats strong{display:block}.hp-stats small{color:#b8c3d0}.hp-stats strong{margin-top:4px;font-size:20px;white-space:nowrap}
.hp-workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:12px;min-height:0;flex:1}.hp-panel{min-width:0;border:1px solid #263846;border-radius:11px;background:linear-gradient(145deg,#0b1822f5,#07121bf5)}.hp-main{display:flex;flex-direction:column;padding:12px}.hp-types{display:grid;grid-template-columns:repeat(5,1fr);border-radius:8px;overflow:hidden;background:#101c26}.hp-types button{min-height:43px;border:0;background:transparent;color:#ccd4de}.hp-types .active{background:#ffdc00;color:#181300;font-weight:800}.hp-filters{display:grid;grid-template-columns:150px 160px 150px minmax(180px,1fr) 76px;gap:9px;padding:12px 0}.hp-filters select,.hp-filters input,.hp-filters>button{min-width:0;height:38px;border:1px solid #40515e;border-radius:7px;background:#0d1923;color:#eef2f6;padding:0 11px}.hp-filters label{position:relative;min-width:0}.hp-filters label svg{position:absolute;left:11px;top:10px;width:18px}.hp-filters label input{width:100%;padding-left:37px}.hp-table{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#b89b38 #101720}.hp-table table{min-width:850px;width:100%;border-collapse:collapse;font-size:12px}.hp-table th{height:35px;padding:8px;text-align:left;color:#d2dae4;background:#142330}.hp-table td{height:43px;padding:7px 8px;border-bottom:1px solid #ffffff0b}.hp-chip{display:inline-flex;padding:5px 9px;border:1px solid #8c7420;border-radius:18px;color:#ffdc00;background:#463b104f}.hp-chip.private{border-color:#7449ae;color:#c98cff;background:#3b17654f}.green{color:#16e38e!important}.red{color:#ff4b57!important}.hp-opponents{display:flex}.hp-opponents i{width:25px;height:25px;display:grid;place-items:center;margin-left:-4px;border:1px solid #73869a;border-radius:50%;background:#253e62;font-style:normal;font-size:9px}.hp-view{padding:6px 16px;border:1px solid #526677;border-radius:6px;background:#0d1923;color:white}.hp-empty{text-align:center;color:#93a1af}.hp-main>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;color:#b5c0cb}.hp-main>footer>div{display:flex;gap:5px}.hp-main>footer button{width:31px;height:31px;border:0;border-radius:5px;background:#101e29;color:white}.hp-main>footer button.active{background:#ffdc00;color:#171300;font-weight:800}.hp-main>footer select{height:32px;margin-left:6px;border:1px solid #40515e;border-radius:6px;background:#0d1923;color:white}
.hp-detail{padding:14px}.hp-detail>header{display:flex;align-items:center;justify-content:space-between}.hp-detail h2{font-size:17px}.hp-detail>header button{border:0;background:none;color:white;font-size:25px}.hp-detail-empty{height:80%;display:grid;place-content:center;text-align:center;color:#8f9eab}.hp-detail-empty svg{width:42px;height:42px;margin:auto}.hp-detail-empty strong{margin-top:12px;color:white}.hp-detail-empty p{margin-top:7px}.hp-victory{display:flex;flex-direction:column;align-items:center;gap:5px;margin:12px 0;padding:17px;border-radius:9px;background:linear-gradient(#604a0d88,#18201c88)}.hp-victory svg{width:44px;height:44px;color:#ffda00}.hp-victory strong{font-size:24px}.hp-victory span{color:#d5dde5}.hp-detail dl{margin:0}.hp-detail dl div{display:flex;justify-content:space-between;gap:12px;padding:6px 1px}.hp-detail dt{color:#b7c1cc}.hp-detail dd{margin:0;text-align:right}.hp-players{margin-top:10px;border:1px solid #263846;border-radius:8px;overflow:hidden}.hp-players h3{margin:0;padding:10px;font-size:13px;border-bottom:1px solid #263846}.hp-players p{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:8px;margin:0;padding:7px 9px;border-bottom:1px solid #ffffff0b}.hp-players p b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#ffdc00;color:#171300}.hp-players em{color:#ffdc00;font-style:normal}.hp-play-again{width:100%;min-height:45px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;border:0;border-radius:7px;background:#ffdc00;color:#171300;font-weight:800}.hp-play-again svg{width:17px}.hp-detail.collapsed{display:none}.hp-detail.collapsed+.none{display:none}
@media(max-width:1100px){.hp-workspace{grid-template-columns:1fr}.hp-detail{order:-1}.hp-detail-empty{min-height:130px}.hp-stats{grid-template-columns:repeat(3,1fr)}.hp-filters{grid-template-columns:repeat(3,1fr)}.hp-filters label{grid-column:span 2}.hp-main>footer{flex-wrap:wrap}}
@media(max-width:700px){#desktop-design.history-open>#history-page{padding:8px 8px 82px}.hp-hero{min-height:120px;padding:14px}.hp-hero h1{font-size:27px}.hp-hero blockquote{display:none}.hp-stats{grid-template-columns:repeat(2,1fr);gap:7px}.hp-stats article{padding:9px}.hp-stats article:last-child{grid-column:1/-1}.hp-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.hp-types button{min-width:0;padding:0 5px;font-size:11px}.hp-filters{grid-template-columns:1fr 1fr}.hp-filters label{grid-column:1/-1}.hp-filters>button{grid-column:2}.hp-detail{display:none}.hp-detail.has-selection{display:block}.hp-main{padding:8px}.hp-table{max-height:none;overflow:visible}.hp-table table,.hp-table tbody{display:block;min-width:0}.hp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hp-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:4px 10px;min-height:112px;margin:7px 0;padding:10px;border:1px solid #ffffff14;border-radius:9px;background:#ffffff03}.hp-table td{display:none;height:auto!important;min-width:0;padding:0!important;border:0!important;font-size:12px!important;white-space:normal!important;overflow-wrap:anywhere}.hp-table td:nth-child(1){display:block;grid-column:1;grid-row:1;font-weight:800}.hp-table td:nth-child(6){display:block;grid-column:2;grid-row:1;font-weight:800}.hp-table td:nth-child(2){display:block;grid-column:1/-1;grid-row:2;color:#aeb9c6;font-size:11px!important}.hp-table td:nth-child(3){display:block;grid-column:1;grid-row:3}.hp-table td:nth-child(4){display:block;grid-column:2;grid-row:3;color:#c5cfda}.hp-table td:nth-child(5){display:block;grid-column:1;grid-row:4;font-weight:700}.hp-table td:nth-child(9){display:block;grid-column:2;grid-row:4}.hp-view{min-width:58px}.hp-main>footer{align-items:flex-start}.hp-main>footer>span{width:100%}.hp-main>footer label{display:none}}

/* Prevent legacy board colour classes from painting History result cells. */
#history-page .green,#history-page .red{background:transparent!important;box-shadow:none!important}

@media(max-width:700px){
  #desktop-design .hp-table td{display:none!important}
  #desktop-design .hp-table td:nth-child(1),#desktop-design .hp-table td:nth-child(2),#desktop-design .hp-table td:nth-child(3),#desktop-design .hp-table td:nth-child(4),#desktop-design .hp-table td:nth-child(5),#desktop-design .hp-table td:nth-child(6),#desktop-design .hp-table td:nth-child(7),#desktop-design .hp-table td:nth-child(8),#desktop-design .hp-table td:nth-child(9){display:block!important}
  #desktop-design .hp-table td:nth-child(1){grid-column:1;grid-row:1}
  #desktop-design .hp-table td:nth-child(6){grid-column:2;grid-row:1;text-align:right}
  #desktop-design .hp-table td:nth-child(2){grid-column:1/-1;grid-row:2}
  #desktop-design .hp-table td:nth-child(3){grid-column:1;grid-row:3}
  #desktop-design .hp-table td:nth-child(4){grid-column:2;grid-row:3;text-align:right}
  #desktop-design .hp-table td:nth-child(4)::before{content:'Players ';color:#7f90a1;font-weight:400}
  #desktop-design .hp-table td:nth-child(5){grid-column:1;grid-row:4}
  #desktop-design .hp-table td:nth-child(7){grid-column:2;grid-row:4;text-align:right}
  #desktop-design .hp-table td:nth-child(7)::before{content:'Position ';color:#7f90a1}
  #desktop-design .hp-table td:nth-child(8){grid-column:1;grid-row:5;display:flex!important;align-items:center;gap:7px}
  #desktop-design .hp-table td:nth-child(8)::before{content:'Opponents';color:#7f90a1}
  #desktop-design .hp-table td:nth-child(9){grid-column:2;grid-row:5}
#desktop-design .hp-table tbody tr{grid-template-rows:repeat(5,auto);min-height:142px}
}

/* The scaled desktop shell is fixed to the viewport. Keep History inside the
   remaining shell height and restore a real page scrollbar whenever its
   content is taller than that space. */
@media(min-width:844px){
  #desktop-design.history-open{height:100%;min-height:0;overflow:hidden}
  #desktop-design.history-open>#history-page{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:#b89b38 #101720;
  }
}

/* Compact History composition for the 1280 x 598 reference canvas. */
@media(min-width:844px){
  #desktop-design.history-open>#history-page{gap:8px;padding:6px 16px;scrollbar-gutter:auto}
  #desktop-design.history-open .hp-hero{min-height:84px;flex:0 0 84px;padding:12px 24px}
  #desktop-design.history-open .hp-hero h1{margin:0 0 4px;font-size:31px;line-height:1}
  #desktop-design.history-open .hp-hero p{font-size:12px}
  #desktop-design.history-open .hp-hero blockquote{font-size:12px;line-height:1.45;text-align:right}
  #desktop-design.history-open .hp-stats{flex:0 0 58px;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  #desktop-design.history-open .hp-stats article{height:58px;gap:9px;padding:7px 11px;border-radius:8px}
  #desktop-design.history-open .hp-stats svg{width:38px;height:38px;padding:8px}
  #desktop-design.history-open .hp-stats small{font-size:10px}
  #desktop-design.history-open .hp-stats strong{margin-top:2px;font-size:17px}
  #desktop-design.history-open .hp-workspace{grid-template-columns:minmax(0,1fr) 360px;gap:10px;min-height:0}
  #desktop-design.history-open .hp-workspace>.hp-main{order:0}
  #desktop-design.history-open .hp-workspace>.hp-detail{order:0}
  #desktop-design.history-open .hp-workspace.detail-collapsed{grid-template-columns:minmax(0,1fr) 0;gap:0}
  #desktop-design.history-open .hp-workspace .hp-detail{min-width:0;transition:opacity .2s ease,transform .28s ease,padding .28s ease,border-width .28s ease}
  #desktop-design.history-open .hp-workspace.detail-collapsed .hp-detail.collapsed{display:block;visibility:hidden;overflow:hidden;padding:0;border-width:0;opacity:0;transform:translateX(16px);pointer-events:none}
  #desktop-design.history-open .hp-main{min-height:0;padding:10px}
  #desktop-design.history-open .hp-types{display:none}
  #desktop-design.history-open .hp-filters{grid-template-columns:145px 145px 130px minmax(220px,1fr) 72px;gap:8px;padding:0 0 10px}
  #desktop-design.history-open .hp-filters label,
  #desktop-design.history-open .hp-filters>button{grid-column:auto}
  #desktop-design.history-open .hp-filters select,
  #desktop-design.history-open .hp-filters input,
  #desktop-design.history-open .hp-filters>button{height:32px;font-size:11px}
  #desktop-design.history-open .hp-filters select,
  #desktop-design.history-open .hp-filters>button,
  #desktop-design.history-open .hp-main>footer button,
  #desktop-design.history-open .hp-main>footer select{cursor:pointer}
  #desktop-design.history-open .hp-filters input{cursor:text}
  #desktop-design.history-open .hp-filters label input{height:32px;line-height:32px;padding-left:34px}
  #desktop-design.history-open .hp-filters label svg{left:10px;width:15px;height:15px}
  #desktop-design.history-open .hp-table{flex:1 1 auto;max-height:none}
  #desktop-design.history-open .hp-table table{min-width:780px;font-size:10px}
  #desktop-design.history-open .hp-table th{height:34px;padding:6px 8px}
  #desktop-design.history-open .hp-table td{height:36px;padding:5px 8px}
  #desktop-design.history-open .hp-chip{padding:4px 8px}
  #desktop-design.history-open .hp-view{padding:5px 14px}
  #desktop-design.history-open .hp-main>footer{min-height:34px;padding-top:7px;font-size:10px}
  #desktop-design.history-open .hp-main>footer{flex-wrap:nowrap}
  #desktop-design.history-open .hp-main>footer button{width:29px;height:29px}
  #desktop-design.history-open .hp-main>footer select{height:29px}
  #desktop-design.history-open .hp-detail{min-height:0;padding:12px}
  #desktop-design.history-open .hp-detail h2{font-size:15px}
  #desktop-design.history-open .hp-detail{display:flex;flex-direction:column}
  #desktop-design.history-open .hp-detail-empty{flex:1 1 auto;height:auto;min-height:0}
  #desktop-design.history-open .hp-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0}
  #desktop-design.history-open .hp-extra-grid article{min-width:0;display:grid;grid-template-columns:25px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:7px;padding:7px;border:1px solid #263846;border-radius:7px;background:#0a1721}
  #desktop-design.history-open .hp-extra-grid svg{grid-row:1/3;width:22px;height:22px;color:#ffdc00}
  #desktop-design.history-open .hp-extra-grid small{color:#9fabb7;font-size:8px}
  #desktop-design.history-open .hp-extra-grid strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  #desktop-design.history-open .hp-players{margin-top:7px}
  #desktop-design.history-open .hp-players h3{padding:7px 9px;font-size:10px}
  #desktop-design.history-open .hp-players p{min-height:31px;padding:4px 7px;font-size:9px}
  #desktop-design.history-open .hp-players p b{width:22px;height:22px}
  #desktop-design.history-open .hp-order-empty{display:block;text-align:center;color:#8f9eab}
}
.hp-zero{min-height:260px;display:grid;place-content:center;justify-items:center;gap:9px;padding:30px}.hp-zero svg{width:62px;height:62px;padding:12px;border-radius:16px;background:#14283a;color:#a9c2e8}.hp-zero strong{font-size:22px;color:#eef4fb}.hp-zero p{max-width:360px;margin:0}.hp-zero button{margin-top:8px;padding:11px 25px;border:0;border-radius:7px;background:#ffdc00;color:#171300;font-weight:800}

/* History layout refinements: compact filters, aligned search, and collapsible details. */
.hp-workspace{transition:grid-template-columns .28s ease}
.hp-filters{grid-template-columns:160px 160px minmax(260px,1fr) 82px}
#desktop-design .hp-filters label{position:relative;display:block;min-width:0}
#desktop-design .hp-filters label svg{position:absolute;z-index:2;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);pointer-events:none;color:#a9b5c1}
#desktop-design .hp-filters label input{width:100%;height:38px;padding:0 12px 0 39px;line-height:38px;text-indent:0;text-overflow:ellipsis}
#desktop-design .hp-filters label input::placeholder{color:#7f8d9a;opacity:1}

@media(min-width:1101px){
  .hp-workspace.detail-collapsed{grid-template-columns:minmax(0,1fr) 0}
  .hp-workspace .hp-detail{min-width:0;transition:opacity .2s ease,transform .28s ease,padding .28s ease,border-width .28s ease}
  .hp-workspace.detail-collapsed .hp-detail.collapsed{display:block;visibility:hidden;overflow:hidden;padding:0;border-width:0;opacity:0;transform:translateX(16px);pointer-events:none}
}

@media(max-width:1100px){
  .hp-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-filters label{grid-column:1/-1}
  .hp-filters>button{grid-column:2}
}

@media(max-width:700px){
  /* Keep match history as a true row table; only the table itself scrolls sideways. */
  #desktop-design .hp-table{max-height:420px;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth}
  #desktop-design .hp-table table{display:table;width:100%;min-width:820px;border-collapse:collapse}
  #desktop-design .hp-table thead{position:static;display:table-header-group;width:auto;height:auto;overflow:visible;clip-path:none}
  #desktop-design .hp-table tbody{display:table-row-group}
  #desktop-design .hp-table thead tr{display:table-row}
  #desktop-design .hp-table tbody tr{display:table-row;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent}
  #desktop-design .hp-table th,
  #desktop-design .hp-table td,
  #desktop-design .hp-table td:nth-child(n){position:static;display:table-cell!important;width:auto;height:43px!important;min-width:0;padding:7px 8px!important;border:0;border-bottom:1px solid #ffffff0b!important;text-align:left!important;vertical-align:middle;white-space:nowrap!important;overflow-wrap:normal;font-size:11px!important}
  #desktop-design .hp-table td::before{content:none!important}
  #desktop-design .hp-table th:first-child,
  #desktop-design .hp-table td:first-child{position:sticky;left:0;z-index:2;background:#0b1822}
  #desktop-design .hp-table th:first-child{z-index:3;background:#142330}
  #desktop-design .hp-table .hp-empty{position:static;display:table-cell!important;text-align:center!important}
  #desktop-design .hp-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #desktop-design .hp-filters label{grid-column:1/-1}
  #desktop-design .hp-filters>button{grid-column:2}
}