:root{
  --bg:#10131f;
  --sky:#5ad7ff;
  --sky-2:#2569d8;
  --grass:#40d86f;
  --grass-dark:#1f9f51;
  --brick:#ff8f3d;
  --brick-dark:#d95d1f;
  --coin:#ffd84a;
  --panel:#fff8df;
  --panel-2:#fff1bf;
  --ink:#1b2136;
  --muted:#66708b;
  --line:#27304a;
  --white:#ffffff;
  --danger:#ff4e5b;
  --shadow:0 22px 60px rgba(9,13,31,.28);
  --radius:24px;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* RESET */
*{box-sizing:border-box}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  min-height:100vh;
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.55) 0 9%, transparent 10%),
    linear-gradient(180deg, #6ee5ff 0%, #4ba8ff 45%, #77df65 45.2%, #35b653 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:auto 0 0;
  height:88px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(24,117,50,.28) 0 25%, transparent 25% 50%, rgba(24,117,50,.28) 50% 75%, transparent 75%),
    linear-gradient(180deg, #2c9f45 0, #197733 100%);
  background-size:84px 100%, 100% 100%;
  border-top:8px solid #59e17c;
  z-index:0;
}

.stage-bg{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.cloud{
  position:absolute;
  display:block;
  width:170px;
  height:54px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:
    34px -22px 0 6px rgba(255,255,255,.88),
    78px -12px 0 14px rgba(255,255,255,.92),
    112px 2px 0 -3px rgba(255,255,255,.86);
}

.cloud-a{top:86px; left:7%; opacity:.72}
.cloud-b{top:148px; right:14%; transform:scale(.72); opacity:.62}

.coin{
  position:absolute;
  display:block;
  width:36px;
  height:36px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff8a7 0 18%, var(--coin) 19% 62%, #eaa91c 63% 100%);
  border:4px solid #b57812;
  box-shadow:0 8px 0 rgba(108,74,8,.18);
}

.coin::after{
  content:"";
  position:absolute;
  inset:7px 13px;
  border-radius:999px;
  background:#bd8115;
}

.coin-a{top:225px; left:9%}
.coin-b{top:320px; right:8%; transform:scale(.82)}
.coin-c{top:74px; right:31%; transform:scale(.68)}

.block{
  position:absolute;
  display:block;
  width:74px;
  height:74px;
  border:5px solid #9b421c;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 4px, transparent 4px 100%),
    linear-gradient(180deg, var(--brick) 0%, var(--brick-dark) 100%);
  box-shadow:0 10px 0 rgba(61,35,17,.16);
}

.block::before,
.block::after{
  content:"";
  position:absolute;
  background:rgba(112,48,20,.25);
}

.block::before{left:0; right:0; top:50%; height:4px}
.block::after{top:0; bottom:0; left:50%; width:4px}

.block-a{left:13%; bottom:118px}
.block-b{right:10%; bottom:210px; transform:scale(.74) rotate(4deg)}

/* LAYOUT */
.app-shell{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:30px 0 112px;
}

.site-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--ink);
}

.brand-mark{
  width:54px;
  height:54px;
  border:4px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(180deg, #ffef69 0 46%, #ffb928 47% 100%);
  box-shadow:0 7px 0 #a96511, 0 16px 30px rgba(19,33,77,.22);
  position:relative;
}

.brand-mark::before{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  left:15px;
  top:-13px;
  border:4px solid var(--line);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:#ffef69;
}

.brand-name{
  display:block;
  font-weight:900;
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(255,255,255,.45);
}

.brand-subtitle{
  display:block;
  margin-top:2px;
  color:#27304a;
  font:700 11px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:3px solid var(--line);
  border-radius:999px;
  background:rgba(255,248,223,.82);
  box-shadow:0 6px 0 rgba(28,44,82,.22);
  font:900 12px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#23d65b;
  box-shadow:0 0 0 4px rgba(35,214,91,.18);
}

/* MAIN */
.workspace{
  display:grid;
  gap:22px;
}

/* HERO */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:22px;
  align-items:stretch;
  padding:28px;
  border:4px solid var(--line);
  border-radius:32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,248,223,.92)),
    repeating-linear-gradient(45deg, rgba(255,216,74,.18) 0 18px, rgba(255,143,61,.14) 18px 36px);
  box-shadow:var(--shadow), inset 0 -8px 0 rgba(39,48,74,.12);
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:16px;
  background:repeating-linear-gradient(90deg, var(--brick) 0 42px, var(--brick-dark) 42px 84px);
  border-top:4px solid var(--line);
}

.hero-copy{
  position:relative;
  z-index:1;
}

.eyebrow{
  margin:0 0 10px;
  color:#bd5a19;
  font:900 13px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}

h1{
  margin:0;
  max-width:780px;
  color:var(--ink);
  font-size:clamp(44px, 8vw, 92px);
  line-height:.86;
  font-weight:1000;
  letter-spacing:-.07em;
  text-transform:uppercase;
  text-shadow:0 5px 0 rgba(255,184,36,.48);
}

.hero-text{
  margin:18px 0 0;
  max-width:680px;
  color:#4b5877;
  font:800 15px/1.5 var(--mono);
}

.hero-badge{
  position:relative;
  z-index:1;
  width:190px;
  min-height:154px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:4px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg, #78eaff 0%, #2d96ff 100%);
  box-shadow:0 8px 0 #17579f;
  text-align:center;
}

.hero-badge strong{
  font:1000 18px/1 var(--mono);
  letter-spacing:.05em;
  color:var(--white);
  text-shadow:0 3px 0 rgba(0,0,0,.24);
}

.mini-level{
  display:grid;
  grid-template-columns:repeat(4, 26px);
  gap:5px;
}

.mini-level span{
  width:26px;
  height:26px;
  border:3px solid var(--line);
  border-radius:7px;
  background:#ffca37;
  box-shadow:0 4px 0 #a76610;
}

.mini-level span:nth-child(2){transform:translateY(-8px); background:#4ade80}
.mini-level span:nth-child(3){transform:translateY(-18px); background:#ff6f61}
.mini-level span:nth-child(4){transform:translateY(-28px); background:#7c5cff}

.stat-grid{
  grid-column:1 / -1;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:2px;
}

.stat-card{
  min-height:108px;
  padding:18px;
  border:4px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow:0 7px 0 rgba(39,48,74,.22);
}

.stat-card span{
  display:block;
  color:#5a6684;
  font:900 12px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.stat-card strong{
  display:block;
  margin-top:12px;
  color:#1f7e3d;
  font:1000 34px/1 var(--sans);
  letter-spacing:-.04em;
}

/* PANEL */
.board-panel{
  border:4px solid var(--line);
  border-radius:32px;
  background:rgba(255,248,223,.96);
  box-shadow:var(--shadow), inset 0 -8px 0 rgba(39,48,74,.10);
  overflow:hidden;
}

.board-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px;
  border-bottom:4px solid var(--line);
  background:
    radial-gradient(circle at 100% 0, rgba(255,216,74,.42), transparent 34%),
    linear-gradient(180deg, #fff7d4, #ffe99e);
}

.section-kicker{
  margin:0 0 6px;
  color:#bd5a19;
  font:900 11px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
}

.board-toolbar h2{
  margin:0;
  color:var(--ink);
  font-size:28px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
  text-transform:uppercase;
}

.board-toolbar p{
  margin:7px 0 0;
  color:#5b6681;
  font-weight:700;
}

/* CONTROLS */
.controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.btn{
  min-height:42px;
  padding:0 16px;
  border:3px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, #ff7467, #e83f4c);
  color:var(--white);
  box-shadow:0 5px 0 #982331;
  font:1000 12px/1 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn.ghost{
  background:linear-gradient(180deg, #65dfff, #268be9);
  box-shadow:0 5px 0 #15579c;
}

.btn:hover:not(:disabled){
  transform:translateY(-2px);
  filter:saturate(1.08);
}

.btn:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:0 2px 0 #982331;
}

.btn.ghost:active:not(:disabled){
  box-shadow:0 2px 0 #15579c;
}

.btn:disabled{
  cursor:not-allowed;
  opacity:.48;
  filter:grayscale(.35);
}

.page-indicator{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:0 13px;
  border:3px solid var(--line);
  border-radius:14px;
  background:#fffdf2;
  color:#38445f;
  font:900 12px/1 var(--mono);
  white-space:nowrap;
}

/* TABLE */
.table-wrap{
  width:100%;
  overflow:auto;
  background:
    linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px),
    linear-gradient(180deg, #fff9e7, #fff3c5);
  background-size:28px 28px, 100% 100%;
}

.table-wrap:focus{
  outline:4px solid rgba(255,216,74,.75);
  outline-offset:-4px;
}

table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
}

thead{
  position:sticky;
  top:0;
  z-index:2;
}

th{
  padding:16px 18px;
  border-bottom:4px solid var(--line);
  background:#26314e;
  color:#fff3c4;
  text-align:left;
  font:1000 12px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}

td{
  padding:16px 18px;
  border-bottom:3px solid rgba(39,48,74,.16);
  background:rgba(255,255,255,.58);
  vertical-align:middle;
}

tbody tr{
  transition:transform .12s ease, filter .12s ease;
}

tbody tr:hover{
  transform:translateX(4px);
  filter:saturate(1.08);
}

tbody tr:hover td{
  background:#fffdf4;
}

.rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  min-height:42px;
  padding:0 12px;
  border:3px solid var(--line);
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 4px 0 rgba(39,48,74,.18);
}

.rank-num{
  font:1000 13px/1 var(--mono);
  color:var(--ink);
}

.rank-1 .rank{
  background:linear-gradient(180deg, #fff58c, #ffc933);
  box-shadow:0 5px 0 #b16f13;
}

.rank-2 .rank{
  background:linear-gradient(180deg, #f4fbff, #b6d6ef);
  box-shadow:0 5px 0 #6e8eae;
}

.rank-3 .rank{
  background:linear-gradient(180deg, #ffd0a1, #df7f39);
  box-shadow:0 5px 0 #934616;
}

.user{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.avatar{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:3px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, #72ee8e, #28b857);
  box-shadow:0 5px 0 #176c35;
  color:#fff;
  font:1000 18px/1 var(--mono);
  text-shadow:0 2px 0 rgba(0,0,0,.20);
}

.uname{
  max-width:420px;
  overflow:hidden;
  color:var(--ink);
  font-weight:1000;
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.uid{
  max-width:420px;
  overflow:hidden;
  margin-top:4px;
  color:#66708b;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.score{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border:3px solid #b57910;
  border-radius:999px;
  background:linear-gradient(180deg, #fff6a4, #ffc72f);
  color:#6c4400;
  box-shadow:0 4px 0 rgba(150,91,8,.35);
  font-size:14px;
  font-weight:1000;
}

.col-date{
  color:#5d6682;
  font-size:12px;
  font-weight:800;
}

.mono{
  font-family:var(--mono);
}

.state-cell{
  padding:34px 18px;
  color:#5d6682;
  text-align:center;
  font:900 13px/1.4 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.panel-bottom{
  min-height:52px;
  display:flex;
  align-items:center;
  padding:0 22px;
  border-top:4px solid var(--line);
  background:#26314e;
}

.hint{
  color:#ffe99e;
  font:800 12px/1.4 var(--mono);
}

#errorLine:not(:empty){
  color:#ffb7bd;
}

/* Legacy classes from older layout */
.sidebar,
.rank-badge,
.utag,
.modal{
  display:none;
}

/* RESPONSIVE */
@media (max-width:860px){
  .site-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .hero{
    grid-template-columns:1fr;
    padding:22px;
  }

  .hero-badge{
    width:100%;
    min-height:112px;
  }

  .stat-grid{
    grid-template-columns:1fr;
  }

  .board-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .controls{
    width:100%;
    justify-content:flex-start;
  }

  .btn,
  .page-indicator{
    flex:1 1 auto;
  }
}

@media (max-width:520px){
  .app-shell{
    width:min(100% - 20px, 1180px);
    padding-top:16px;
  }

  .brand-mark{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .brand-name{
    font-size:14px;
  }

  .brand-subtitle{
    font-size:9px;
  }

  .status-pill{
    width:100%;
    justify-content:center;
  }

  .hero,
  .board-panel{
    border-width:3px;
    border-radius:24px;
  }

  h1{
    font-size:44px;
    letter-spacing:-.06em;
  }

  .hero-text{
    font-size:12px;
  }

  .stat-card{
    min-height:92px;
  }

  .stat-card strong{
    font-size:28px;
  }

  .board-toolbar{
    padding:18px;
  }

  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .page-indicator{
    grid-column:1 / -1;
    justify-content:center;
    order:-1;
  }

  table{
    min-width:680px;
  }
}