/* ratings.html */
html.ratings-world,html.ratings-world *{
 box-sizing:border-box;
}

html.ratings-world{
 color-scheme:light;
 --page:#eee7db;
 --page-glow:#fffaf0;
 --surface:#fffaf1;
 --surface-strong:#ffffff;
 --surface-soft:#f4ebdd;
 --navy:#0b2233;
 --navy-2:#10364e;
 --text:#1b2832;
 --muted:#6d756f;
 --gold:#b57a1d;
 --gold-bright:#d8a744;
 --gold-soft:#f3dfb7;
 --line:#dccdb6;
 --green:#2e8748;
 --red:#c84242;
 --shadow:0 18px 48px #60461d20;
}

html.ratings-world[data-theme="dark"]{
 color-scheme:dark;
 --page:#02070d;
 --page-glow:#0c2940;
 --surface:#071722;
 --surface-strong:#0b1f2d;
 --surface-soft:#0c2637;
 --navy:#061724;
 --navy-2:#0c3048;
 --text:#f7e8c1;
 --muted:#9fb0bc;
 --gold:#d7a948;
 --gold-bright:#f1cb73;
 --gold-soft:#3d2f18;
 --line:#27465c;
 --green:#68ca7b;
 --red:#ff7b7b;
 --shadow:0 20px 56px #0009;
}

html.ratings-world,html.ratings-world body{
 width:100%;
 height:100%;
 margin:0;
 overflow:hidden;
 font-family:
  Arial,
  Helvetica,
  sans-serif;
 background:var(--page);
 color:var(--text);
}

html.ratings-world body{
 position:relative;
 overscroll-behavior:none;
}

html.ratings-world body:before{
 content:"";
 position:fixed;
 inset:0;
 pointer-events:none;
 background:
  radial-gradient(
   circle at 50% 0,
   var(--page-glow) 0,
   transparent 58%
  );
 opacity:.9;
}

html.ratings-world button,html.ratings-world select,html.ratings-world a{
 font:inherit;
}

html.ratings-world .app{
 position:relative;
 width:min(1050px,100%);
 height:100dvh;
 margin:0 auto;
 display:grid;
 grid-template-rows:auto auto minmax(0,1fr);
 overflow:hidden;
 background:color-mix(
  in srgb,
  var(--page) 88%,
  transparent
 );
 box-shadow:var(--shadow);
}

html.ratings-world .topbar{
 min-height:66px;
 display:grid;
 grid-template-columns:44px minmax(0,1fr) auto;
 align-items:center;
 gap:10px;
 padding:9px 16px;
 color:#fff2d0;
 background:
  linear-gradient(
   135deg,
   var(--navy),
   var(--navy-2)
  );
 border-bottom:2px solid var(--gold);
}

html.ratings-world .back{
 width:42px;
 height:42px;
 display:grid;
 place-items:center;
 border:1px solid #f1c66c55;
 border-radius:13px;
 color:#fff2d0;
 text-decoration:none;
 font-size:28px;
 line-height:1;
 transition:
  background .15s ease,
  transform .15s ease;
}

html.ratings-world .back:hover{
 background:#ffffff12;
}

html.ratings-world .back:active{
 transform:scale(.96);
}

html.ratings-world .brand{
 min-width:0;
 display:flex;
 align-items:center;
 gap:10px;
}

html.ratings-world .brand-mark{
 color:var(--gold-bright);
 font-size:31px;
 line-height:1;
 filter:
  drop-shadow(
   0 2px 5px #0007
  );
}

html.ratings-world .brand-copy{
 min-width:0;
}

html.ratings-world .brand-name{
 overflow:hidden;
 margin:0;
 font-size:11px;
 font-weight:900;
 letter-spacing:.18em;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-world h1{
 overflow:hidden;
 margin:2px 0 0;
 font-size:clamp(21px,3.4vw,29px);
 line-height:1.05;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-world .language{
 min-width:62px;
 height:40px;
 padding:0 9px;
 border:1px solid #f1c66c66;
 border-radius:12px;
 outline:none;
 background:#051724aa;
 color:#fff2d0;
 font-weight:900;
 cursor:pointer;
}

html.ratings-world .overview{
 min-height:0;
 padding:12px 14px 10px;
}

html.ratings-world .scope{
 width:min(470px,100%);
 display:grid;
 grid-template-columns:1fr 1fr;
 margin:0 auto 10px;
 padding:3px;
 border:1px solid var(--line);
 border-radius:14px;
 background:var(--surface-soft);
}

html.ratings-world .scope button{
 min-height:38px;
 border:0;
 border-radius:10px;
 background:transparent;
 color:var(--muted);
 font-weight:900;
 cursor:pointer;
 transition:
  background .15s ease,
  color .15s ease,
  box-shadow .15s ease;
}

html.ratings-world .scope button.active{
 background:var(--navy);
 color:#fff2d0;
 box-shadow:
  0 6px 15px #07172530;
}

html.ratings-world .profile-card{
 display:grid;
 grid-template-columns:
  minmax(190px,1.25fr)
  repeat(3,minmax(90px,.75fr));
 gap:1px;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:18px;
 background:var(--line);
 box-shadow:var(--shadow);
}

html.ratings-world .profile-main,html.ratings-world .metric{
 min-width:0;
 min-height:78px;
 background:var(--surface);
}

html.ratings-world .profile-main{
 display:flex;
 align-items:center;
 gap:12px;
 padding:11px 15px;
}

html.ratings-world .profile-avatar{
 width:52px;
 height:52px;
 flex:0 0 52px;
 display:grid;
 place-items:center;
 border:2px solid var(--gold);
 border-radius:16px;
 background:
  linear-gradient(
   145deg,
   var(--gold-soft),
   var(--surface-strong)
  );
 color:var(--gold);
 font-size:25px;
 font-weight:900;
}

html.ratings-world .profile-copy{
 min-width:0;
}

html.ratings-world .small-label{
 display:block;
 overflow:hidden;
 color:var(--muted);
 font-size:11px;
 font-weight:900;
 letter-spacing:.07em;
 text-overflow:ellipsis;
 text-transform:uppercase;
 white-space:nowrap;
}

html.ratings-world .elo-line{
 display:flex;
 align-items:baseline;
 gap:8px;
 margin-top:3px;
}

html.ratings-world .elo{
 color:var(--text);
 font-size:31px;
 font-weight:900;
 letter-spacing:-.04em;
}

html.ratings-world .delta{
 color:var(--green);
 font-size:14px;
 font-weight:900;
}

html.ratings-world .metric{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 padding:9px;
 text-align:center;
}

html.ratings-world .metric strong{
 margin-top:5px;
 color:var(--text);
 font-size:22px;
 font-variant-numeric:tabular-nums;
}

html.ratings-world .metric.percent strong{
 color:var(--green);
}

html.ratings-world .ratings-panel{
 min-width:0;
 min-height:0;
 display:grid;
 grid-template-rows:auto auto minmax(0,1fr) auto;
 overflow:hidden;
 margin:0 14px 14px;
 border:1px solid var(--line);
 border-radius:18px;
 background:var(--surface);
 box-shadow:var(--shadow);
}

html.ratings-world .panel-title{
 min-height:44px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:14px;
 padding:8px 14px;
 border-bottom:1px solid var(--line);
 background:var(--surface-soft);
}

html.ratings-world .panel-title h2{
 margin:0;
 color:var(--text);
 font-size:17px;
}

html.ratings-world .updated{
 overflow:hidden;
 color:var(--muted);
 font-size:11px;
 font-weight:700;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-world .rating-row{
 display:grid;
 grid-template-columns:
  50px
  minmax(150px,1fr)
  86px
  94px
  82px;
 min-width:0;
 align-items:center;
}

html.ratings-world .rating-row>div{
 min-width:0;
 padding:8px 10px;
}

html.ratings-world .table-head{
 min-height:40px;
 color:var(--muted);
 border-bottom:1px solid var(--line);
 background:var(--surface-strong);
 font-size:11px;
 font-weight:900;
 letter-spacing:.04em;
 text-transform:uppercase;
}

html.ratings-world .rank{
 text-align:center;
 color:var(--muted);
 font-weight:900;
 font-variant-numeric:tabular-nums;
}

html.ratings-world .player{
 display:flex;
 align-items:center;
 gap:10px;
 overflow:hidden;
}

html.ratings-world .avatar-wrap{
 position:relative;
 width:40px;
 height:40px;
 flex:0 0 40px;
 display:grid;
 place-items:center;
}

html.ratings-world .avatar{
 width:36px;
 height:36px;
 display:grid;
 place-items:center;
 border:1px solid #b57a1d66;
 border-radius:11px;
 background:var(--gold-soft);
 color:var(--gold);
 font-size:16px;
 font-weight:900;
}

html.ratings-world .flag-badge{
 position:absolute;
 right:-3px;
 bottom:-2px;
 width:21px;
 height:16px;
 display:grid;
 place-items:center;
 overflow:hidden;
 border:1px solid var(--surface);
 border-radius:5px;
 background:var(--surface-strong);
 color:var(--gold);
 font-size:11px;
 line-height:1;
 filter:drop-shadow(0 2px 3px #0005);
}

html.ratings-world .flag-badge img,html.ratings-world .scope-flag img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}

html.ratings-world .scope-flag{
 width:24px;
 height:18px;
 display:inline-grid;
 place-items:center;
 overflow:hidden;
 margin-right:4px;
 border:1px solid var(--line);
 border-radius:4px;
 background:var(--surface-strong);
 color:var(--gold);
 font-size:12px;
 vertical-align:middle;
}

html.ratings-world .player-copy{
 min-width:0;
 flex:1;
}

html.ratings-world .player-top{
 display:flex;
 align-items:center;
 gap:7px;
 min-width:0;
}

html.ratings-world .player-name{
 overflow:hidden;
 font-weight:900;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-world .you-badge{
 flex:0 0 auto;
 padding:2px 6px;
 border-radius:999px;
 background:var(--gold);
 color:#fff9e9;
 font-size:9px;
 font-weight:900;
 letter-spacing:.04em;
 text-transform:uppercase;
}

html.ratings-world .current-login{
 grid-column:3/6;
 justify-self:end;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:92px;
 min-height:36px;
 margin-right:10px;
 padding:7px 14px;
 border:1px solid var(--gold);
 border-radius:11px;
 background:var(--navy);
 color:#fff2d0;
 text-decoration:none;
 font-size:13px;
 font-weight:900;
 box-shadow:0 6px 14px #07172528;
}

html.ratings-world .current-login:hover{
 background:var(--navy-2);
}

html.ratings-world .you-badge[hidden],html.ratings-world .current-login[hidden],html.ratings-world .current-stat[hidden]{
 display:none!important;
}

html.ratings-world .player-country{
 display:block;
 overflow:hidden;
 margin-top:3px;
 color:var(--muted);
 font-size:11px;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-world .number{
 text-align:right;
 font-weight:800;
 font-variant-numeric:tabular-nums;
}

html.ratings-world .leader-scroll{
 min-height:0;
 overflow-x:hidden;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-color:
  var(--gold)
  var(--surface-soft);
 scrollbar-width:thin;
}

html.ratings-world .leader-scroll::-webkit-scrollbar{
 width:8px;
}

html.ratings-world .leader-scroll::-webkit-scrollbar-track{
 background:var(--surface-soft);
}

html.ratings-world .leader-scroll::-webkit-scrollbar-thumb{
 border:2px solid var(--surface-soft);
 border-radius:999px;
 background:var(--gold);
}

html.ratings-world .leader-scroll .rating-row{
 min-height:55px;
 border-bottom:1px solid var(--line);
 background:var(--surface);
}

html.ratings-world .leader-scroll .rating-row:nth-child(even){
 background:
  color-mix(
   in srgb,
   var(--surface-soft) 58%,
   var(--surface)
  );
}

html.ratings-world .leader-scroll .rating-row:last-child{
 border-bottom:0;
}

html.ratings-world .current-user{
 position:relative;
 z-index:2;
 min-height:64px;
 border-top:2px solid var(--gold);
 background:
  linear-gradient(
   90deg,
   var(--gold-soft),
   var(--surface)
  );
 box-shadow:0 -7px 18px #07172518;
}

html.ratings-world .current-user .rank,html.ratings-world .current-user .number,html.ratings-world .current-user .player-name{
 color:var(--text);
}

html.ratings-world .profile-avatar img,html.ratings-world .avatar img{
 width:100%;
 height:100%;
 display:block;
 border-radius:inherit;
 object-fit:cover;
}

html.ratings-world .delta.negative{
 color:var(--red);
}

html.ratings-world .leader-scroll .rating-row.is-me{
 background:
  linear-gradient(
   90deg,
   var(--gold-soft),
   var(--surface)
  );
}

html.ratings-world .message-row{
 min-height:100%;
 display:grid;
 place-items:center;
 padding:24px;
 color:var(--muted);
 text-align:center;
 font-weight:800;
}

html.ratings-world .placeholder{
 display:inline-block;
 position:relative;
 overflow:hidden;
 height:11px;
 border-radius:999px;
 background:var(--line);
 opacity:.75;
}

html.ratings-world .placeholder:after{
 content:"";
 position:absolute;
 inset:0;
 transform:translateX(-100%);
 background:
  linear-gradient(
   90deg,
   transparent,
   #ffffff78,
   transparent
  );
 animation:shimmer 1.6s infinite;
}

html.ratings-world[data-theme="dark"]
.placeholder:after{
 background:
  linear-gradient(
   90deg,
   transparent,
   #ffffff15,
   transparent
  );
}

html.ratings-world .placeholder.name{
 width:min(170px,78%);
}

html.ratings-world .placeholder.number-placeholder{
 width:46px;
}

@keyframes shimmer{
 to{
  transform:translateX(100%);
 }
}

@media(max-width:680px){
 html.ratings-world .topbar{
  min-height:58px;
  padding:7px 10px;
 }

 html.ratings-world .back{
  width:38px;
  height:38px;
  border-radius:11px;
  font-size:25px;
 }

 html.ratings-world .brand{
  gap:7px;
 }

 html.ratings-world .brand-mark{
  font-size:25px;
 }

 html.ratings-world .brand-name{
  display:none;
 }

 html.ratings-world h1{
  margin:0;
  font-size:21px;
 }

 html.ratings-world .language{
  min-width:56px;
  height:37px;
  padding:0 6px;
 }

 html.ratings-world .overview{
  padding:9px 9px 8px;
 }

 html.ratings-world .scope{
  margin-bottom:8px;
 }

 html.ratings-world .scope button{
  min-height:34px;
  font-size:13px;
 }

 html.ratings-world .profile-card{
  grid-template-columns:
   minmax(145px,1.4fr)
   repeat(3,minmax(58px,.6fr));
  border-radius:14px;
 }

 html.ratings-world .profile-main,html.ratings-world .metric{
  min-height:67px;
 }

 html.ratings-world .profile-main{
  gap:8px;
  padding:8px 9px;
 }

 html.ratings-world .profile-avatar{
  width:42px;
  height:42px;
  flex-basis:42px;
  border-radius:13px;
  font-size:21px;
 }

 html.ratings-world .small-label{
  font-size:8px;
  letter-spacing:.03em;
 }

 html.ratings-world .elo{
  font-size:25px;
 }

 html.ratings-world .delta{
  font-size:11px;
 }

 html.ratings-world .metric{
  padding:6px 3px;
 }

 html.ratings-world .metric strong{
  margin-top:4px;
  font-size:17px;
 }

 html.ratings-world .ratings-panel{
  margin:
   0 9px 9px;
  border-radius:14px;
 }

 html.ratings-world .panel-title{
  min-height:39px;
  padding:6px 9px;
 }

 html.ratings-world .panel-title h2{
  font-size:15px;
 }

 html.ratings-world .updated{
  max-width:44%;
  font-size:9px;
 }

 html.ratings-world .rating-row{
  grid-template-columns:
   34px
   minmax(105px,1fr)
   57px
   63px
   57px;
 }

 html.ratings-world .rating-row>div{
  padding:7px 5px;
 }

 html.ratings-world .table-head{
  min-height:36px;
  font-size:8px;
 }

 html.ratings-world .leader-scroll .rating-row{
  min-height:49px;
 }

 html.ratings-world .avatar-wrap{
  width:34px;
  height:34px;
  flex-basis:34px;
 }

 html.ratings-world .avatar{
  width:30px;
  height:30px;
  border-radius:9px;
  font-size:13px;
 }

 html.ratings-world .flag-badge{
  right:-2px;
  bottom:-1px;
  width:18px;
  height:14px;
  font-size:10px;
 }

 html.ratings-world .player{
  gap:6px;
 }

 html.ratings-world .player-name{
  font-size:12px;
 }

 html.ratings-world .player-country{
  font-size:9px;
 }

 html.ratings-world .number,html.ratings-world .rank{
  font-size:11px;
 }

 html.ratings-world .current-user{
  min-height:56px;
 }

 html.ratings-world .you-badge{
  padding:1px 4px;
  font-size:7px;
 }
}

@media(max-width:390px){
 html.ratings-world .profile-card{
  grid-template-columns:
   minmax(135px,1.35fr)
   repeat(3,minmax(52px,.55fr));
 }

 html.ratings-world .profile-avatar{
  display:none;
 }

 html.ratings-world .rating-row{
  grid-template-columns:
   30px
   minmax(96px,1fr)
   52px
   57px
   52px;
 }

}

@media(max-height:650px){
 html.ratings-world .topbar{
  min-height:52px;
 }

 html.ratings-world .overview{
  padding-top:6px;
  padding-bottom:6px;
 }

 html.ratings-world .scope{
  margin-bottom:5px;
 }

 html.ratings-world .scope button{
  min-height:30px;
 }

 html.ratings-world .profile-main,html.ratings-world .metric{
  min-height:55px;
 }

 html.ratings-world .profile-avatar{
  width:38px;
  height:38px;
  flex-basis:38px;
 }

 html.ratings-world .elo{
  font-size:22px;
 }

 html.ratings-world .metric strong{
  font-size:16px;
 }

 html.ratings-world .panel-title{
  min-height:34px;
 }

 html.ratings-world .table-head{
  min-height:32px;
 }

 html.ratings-world .leader-scroll .rating-row{
  min-height:45px;
 }

 html.ratings-world .current-user{
  min-height:49px;
 }
}

@media(prefers-reduced-motion:reduce){
 html.ratings-world,html.ratings-world *,html.ratings-world *:before,html.ratings-world *:after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  scroll-behavior:auto!important;
 }
}

/* puzzle-ratings.html */
html.ratings-puzzles,html.ratings-puzzles *{box-sizing:border-box}

html.ratings-puzzles{
 --page:#07131e;
 --page-deep:#02070d;
 --panel:#0b1925;
 --panel-soft:#07131e;
 --border:#a87322;
 --border-soft:#294255;
 --gold:#f4cd73;
 --text:#f7e8c1;
 --muted:#aebdca;
 --shadow:#0009;
 --blue:#2b86ff;
 --green:#31bd68;
}

html.ratings-puzzles[data-theme="light"]{
 --page:#edf3f8;
 --page-deep:#dfe9f1;
 --panel:#fffdf8;
 --panel-soft:#fffaf2;
 --border:#b7812d;
 --border-soft:#c8b89f;
 --gold:#8f5e0d;
 --text:#26394b;
 --muted:#627687;
 --shadow:#72522a2b;
 --blue:#1467d8;
 --green:#17743a;
}

html.ratings-puzzles,html.ratings-puzzles body{
 margin:0;
 min-height:100%;
 font-family:Arial,sans-serif;
 background:var(--page-deep);
 color:var(--text);
}

html.ratings-puzzles body{
 min-height:100dvh;
 background:
  radial-gradient(
   circle at 50% 24%,
   var(--page) 0,
   var(--page-deep) 72%
  );
}

html.ratings-puzzles button,html.ratings-puzzles a{font:inherit}

html.ratings-puzzles .app{
 width:min(1040px,100%);
 min-height:100dvh;
 margin:auto;
 padding:
  max(12px,env(safe-area-inset-top))
  14px
  max(14px,env(safe-area-inset-bottom));
}

html.ratings-puzzles .topbar{
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 gap:12px;
 min-height:58px;
}

html.ratings-puzzles .top-button{
 min-height:40px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 padding:8px 12px;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--panel);
 color:var(--gold);
 box-shadow:0 5px 18px var(--shadow);
 text-decoration:none;
 font-weight:800;
}

html.ratings-puzzles .home-button{justify-self:start}
html.ratings-puzzles .profile-button{
 justify-self:end;
 max-width:220px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-puzzles .brand{text-align:center}

html.ratings-puzzles .brand h1{
 margin:0;
 color:var(--gold);
 font-family:Georgia,serif;
 font-size:clamp(28px,4vw,42px);
 letter-spacing:4px;
}

html.ratings-puzzles .brand p{
 margin:3px 0 0;
 color:var(--muted);
 font-size:11px;
 font-weight:800;
 letter-spacing:1.8px;
 text-transform:uppercase;
}

html.ratings-puzzles .leaderboard{
 margin-top:18px;
 padding:20px;
 border:1px solid var(--border);
 border-radius:18px;
 background:var(--panel);
 box-shadow:0 18px 55px var(--shadow);
}

html.ratings-puzzles .leaderboard-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:18px;
}

html.ratings-puzzles .leaderboard-title{
 margin:0;
 color:var(--text);
 font-family:Georgia,serif;
 font-size:clamp(25px,4vw,34px);
}

html.ratings-puzzles .leaderboard-description{
 max-width:650px;
 margin:7px 0 0;
 color:var(--muted);
 font-size:13px;
 line-height:1.45;
}

html.ratings-puzzles .updated{
 flex:0 0 auto;
 padding-top:5px;
 color:var(--muted);
 font-size:11px;
 text-align:right;
}

html.ratings-puzzles .scope-tabs{
 display:flex;
 gap:7px;
 margin-top:14px;
}

html.ratings-puzzles .scope-button{
 min-height:38px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 padding:7px 14px;
 border:1px solid var(--border-soft);
 border-radius:9px;
 background:var(--panel-soft);
 color:var(--muted);
 cursor:pointer;
 font-size:12px;
 font-weight:900;
}

html.ratings-puzzles .scope-button:hover{
 border-color:var(--border);
 color:var(--gold);
}

html.ratings-puzzles .scope-button.active{
 border-color:var(--border);
 background:color-mix(in srgb,var(--gold) 10%,var(--panel-soft));
 color:var(--gold);
}

html.ratings-puzzles .scope-button:disabled{
 cursor:wait;
 opacity:.7;
}

html.ratings-puzzles .scope-flag{
 width:21px;
 height:16px;
 display:inline-grid;
 place-items:center;
 overflow:hidden;
 border:1px solid var(--border-soft);
 border-radius:4px;
 background:var(--panel);
 color:var(--gold);
 font-size:10px;
 line-height:1;
}

html.ratings-puzzles .scope-flag img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}

html.ratings-puzzles .me-card{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 margin-top:16px;
 padding:12px 14px;
 border:1px solid var(--blue);
 border-radius:11px;
 background:color-mix(in srgb,var(--blue) 10%,var(--panel-soft));
}

html.ratings-puzzles .me-card[hidden]{display:none}

html.ratings-puzzles .me-label{
 color:var(--muted);
 font-size:10px;
 font-weight:900;
 letter-spacing:1px;
 text-transform:uppercase;
}

html.ratings-puzzles .me-position{
 margin-top:3px;
 color:var(--text);
 font-size:15px;
 font-weight:900;
}

html.ratings-puzzles .me-position strong{
 color:var(--gold);
 font-size:21px;
}

html.ratings-puzzles .me-details{
 color:var(--muted);
 font-size:12px;
 font-weight:800;
 text-align:right;
}

html.ratings-puzzles .table-wrap{
 margin-top:16px;
 overflow:hidden;
 border:1px solid var(--border-soft);
 border-radius:12px;
 background:var(--panel-soft);
}

html.ratings-puzzles table{
 width:100%;
 border-collapse:collapse;
 table-layout:fixed;
}

html.ratings-puzzles th{
 padding:10px 8px;
 border-bottom:1px solid var(--border-soft);
 color:var(--muted);
 font-size:10px;
 letter-spacing:.7px;
 text-align:center;
 text-transform:uppercase;
}

html.ratings-puzzles th.player-head{text-align:left}

html.ratings-puzzles td{
 height:58px;
 padding:8px;
 border-bottom:1px solid var(--border-soft);
 text-align:center;
 font-size:13px;
 font-weight:800;
}

html.ratings-puzzles tr:last-child td{border-bottom:0}

html.ratings-puzzles .leader-row{
 cursor:pointer;
 transition:background .15s ease;
}

html.ratings-puzzles .leader-row:hover{
 background:color-mix(in srgb,var(--gold) 7%,transparent);
}

html.ratings-puzzles .leader-row.is-me{
 background:color-mix(in srgb,var(--blue) 12%,transparent);
}

html.ratings-puzzles .rank-cell{width:60px}

html.ratings-puzzles .rank{
 width:34px;
 height:34px;
 margin:auto;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid var(--border-soft);
 border-radius:50%;
 background:var(--panel);
 color:var(--muted);
 font-size:13px;
}

html.ratings-puzzles .rank.podium{
 border-color:var(--border);
 color:var(--gold);
 font-size:18px;
}

html.ratings-puzzles .player-cell{
 width:auto;
 text-align:left;
}

html.ratings-puzzles .player-link{
 min-width:0;
 display:flex;
 align-items:center;
 gap:10px;
 color:inherit;
 text-decoration:none;
}

html.ratings-puzzles .avatar-wrap{
 position:relative;
 width:42px;
 height:42px;
 flex:0 0 42px;
 display:grid;
 place-items:center;
}

html.ratings-puzzles .avatar{
 width:38px;
 height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--panel);
 color:var(--gold);
 font-size:16px;
 font-weight:900;
}

html.ratings-puzzles .avatar img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}

html.ratings-puzzles .flag-badge{
 position:absolute;
 right:-2px;
 bottom:-1px;
 width:20px;
 height:15px;
 display:grid;
 place-items:center;
 overflow:hidden;
 border:1px solid var(--panel);
 border-radius:4px;
 background:var(--panel-soft);
 color:var(--gold);
 font-size:10px;
 line-height:1;
 filter:drop-shadow(0 2px 3px #0005);
}

html.ratings-puzzles .flag-badge img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}

html.ratings-puzzles .player-copy{min-width:0}

html.ratings-puzzles .username{
 overflow:hidden;
 color:var(--text);
 font-size:13px;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.ratings-puzzles .country{
 margin-top:3px;
 color:var(--muted);
 font-size:10px;
 font-weight:700;
}

html.ratings-puzzles .value-main{
 color:var(--gold);
 font-size:17px;
}

html.ratings-puzzles .value-streak{color:var(--green)}

html.ratings-puzzles .loading-row td,html.ratings-puzzles .empty-row td,html.ratings-puzzles .error-row td{
 height:110px;
 color:var(--muted);
 font-weight:700;
}

html.ratings-puzzles .error-row td{color:#d9534f}

@media(max-width:700px){
 html.ratings-puzzles .app{
  padding:
   max(8px,env(safe-area-inset-top))
   8px
   max(10px,env(safe-area-inset-bottom));
 }

 html.ratings-puzzles .topbar{
  gap:6px;
  min-height:48px;
 }

 html.ratings-puzzles .top-button{
  min-height:34px;
  padding:6px 8px;
  font-size:11px;
 }

 html.ratings-puzzles .profile-button{
  max-width:90px;
 }

 html.ratings-puzzles .brand h1{
  font-size:22px;
  letter-spacing:2px;
 }

 html.ratings-puzzles .brand p{display:none}

 html.ratings-puzzles .leaderboard{
  margin-top:8px;
  padding:12px 8px;
  border-radius:13px;
 }

 html.ratings-puzzles .leaderboard-head{
  display:block;
 }

 html.ratings-puzzles .leaderboard-title{font-size:23px}

 html.ratings-puzzles .leaderboard-description{
  margin-top:5px;
  font-size:11px;
 }

 html.ratings-puzzles .updated{
  margin-top:5px;
  padding:0;
  text-align:left;
 }

 html.ratings-puzzles .scope-tabs{
  margin-top:9px;
 }

 html.ratings-puzzles .scope-button{
  flex:1;
  min-height:34px;
  padding:5px 8px;
  font-size:10px;
 }

 html.ratings-puzzles .me-card{
  margin-top:10px;
  padding:9px 10px;
 }

 html.ratings-puzzles .me-details{font-size:10px}

 html.ratings-puzzles .table-wrap{margin-top:10px}

 html.ratings-puzzles th{
  padding:8px 4px;
  font-size:8px;
 }

 html.ratings-puzzles td{
  height:52px;
  padding:6px 4px;
  font-size:11px;
 }

 html.ratings-puzzles .rank-cell{width:42px}

 html.ratings-puzzles .rank{
  width:29px;
  height:29px;
  font-size:11px;
 }

 html.ratings-puzzles .rank.podium{font-size:15px}

 html.ratings-puzzles .avatar-wrap{
  width:38px;
  height:38px;
  flex-basis:38px;
 }

 html.ratings-puzzles .avatar{
  width:34px;
  height:34px;
 }

 html.ratings-puzzles .username{font-size:11px}

 html.ratings-puzzles .country{font-size:8px}

 html.ratings-puzzles .value-main{font-size:14px}

 html.ratings-puzzles .col-attempts,html.ratings-puzzles .col-current{
  display:none;
 }
}

@media(max-width:400px){
 html.ratings-puzzles .home-button{font-size:0}
 html.ratings-puzzles .home-button::after{
  content:"←";
  font-size:18px;
 }

 html.ratings-puzzles .profile-button{
  width:36px;
  padding:4px;
  font-size:0;
 }

 html.ratings-puzzles .profile-button::after{
  content:"♙";
  font-size:18px;
 }

 html.ratings-puzzles .me-details{display:none}
}