:root{
  --bg:#0c0a0b; --bg2:#161113; --panel:#1c1618; --line:#3a2a2c;
  --ink:#efe6dc; --ink-dim:#a99a91; --blood:#8a1620; --blood-bright:#c22233;
  --bronze:#8a6a4c; --silver:#b9c2c9; --gold:#d9a441; --plat:#4fb8b0; --diamond:#6ea8ff; --legend:#c23bd6;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px); height:100%;}
body{
  margin:0; min-height:100%; background:radial-gradient(circle at 50% -10%, #241417 0%, var(--bg) 55%);
  color:var(--ink); font-family:system-ui,sans-serif; padding:32px 16px 60px;
}
h1{
  font-weight:800; font-size:clamp(24px,4vw,36px);
  text-align:center; margin:0 0 6px; letter-spacing:.5px; color:var(--ink);
  text-shadow:0 0 18px rgba(194,34,51,.45);
}
.sub{text-align:center; color:var(--ink-dim); margin:0 0 24px; font-size:14px;}

.topbar{
  display:flex; justify-content:center; align-items:center; gap:14px;
  margin-bottom:24px; flex-wrap:wrap;
}
.twitch-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#9146FF; color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer;
}
.twitch-btn:hover{filter:brightness(1.1);}
.user-chip{
  display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 6px; font-size:13px;
}
.user-chip img{width:28px; height:28px; border-radius:50%;}
.user-chip a{color:var(--ink-dim); text-decoration:underline; margin-left:8px;}
.admin-badge{
  background:var(--blood-bright); color:#fff; font-size:11px; padding:2px 8px;
  border-radius:999px; margin-left:6px;
}

.status-msg{
  max-width:520px; margin:0 auto 24px; text-align:center; color:var(--ink-dim);
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 18px;
  font-size:14px;
}

.gallery{max-width:1180px; margin:0 auto;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.mini{
  border-radius:10px; padding:10px; text-align:center; border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(155deg, var(--rarity-a,#8a6a4c), var(--rarity-b,#3d2c1e) 60%, #17100f);
  cursor:pointer;
}
.mini .mini-photo{width:56px; height:56px; border-radius:50%; margin:0 auto 6px; overflow:hidden; background:#000 center/cover no-repeat; border:1px solid rgba(255,255,255,.5);}
.mini .mini-photo img{width:100%; height:100%; object-fit:cover;}
.mini .mn{font-size:12px; color:#fff;}
.mini .mg{font-size:20px; font-weight:800; color:#fff;}
.mini .mr{font-size:9px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.75);}
.empty-note{color:var(--ink-dim); text-align:center; font-size:13px;}

/* --- Panneau admin --- */
.layout{display:grid; grid-template-columns:1fr; gap:24px; max-width:1180px; margin:0 auto;}
@media(min-width:960px){.layout{grid-template-columns:1.1fr .9fr; align-items:start;}}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 22px;
}
.panel h2{
  font-size:15px; letter-spacing:.3px; margin:0 0 14px; color:var(--blood-bright);
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
label{display:block; font-size:13px; color:var(--ink-dim); margin-bottom:4px;}
select,input[type=text],input[type=number]{
  width:100%; background:#100c0d; border:1px solid var(--line); color:var(--ink);
  border-radius:6px; padding:8px 10px; font-size:14px; margin-bottom:12px;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.score-line{font-size:13px; margin-top:-6px; margin-bottom:12px; color:var(--gold);}
.chk{display:flex; align-items:center; gap:8px; margin:-4px 0 12px; font-size:13px; color:var(--ink-dim);}
.main-actions{display:flex; gap:10px; margin-top:16px;}
.main-actions button{
  flex:1; padding:11px; border-radius:7px; border:none;
  font-weight:600; font-size:13px; letter-spacing:.4px; cursor:pointer;
}
#genBtn{background:#221a1c; color:var(--ink); border:1px solid var(--line) !important;}
#saveBtn{background:linear-gradient(180deg,var(--blood-bright),var(--blood)); color:#fff;}
#genBtn:hover, #saveBtn:hover{filter:brightness(1.1);}
.viewer-item{display:flex; align-items:center; gap:8px;}
.viewer-item img{width:20px; height:20px; border-radius:50%;}

.card-wrap{position:sticky; top:16px; display:flex; flex-direction:column; align-items:center; gap:16px;}
.fut-card{
  width:280px; border-radius:16px; padding:18px 16px 20px; position:relative; overflow:hidden;
  background:linear-gradient(155deg, var(--rarity-a,#8a6a4c), var(--rarity-b,#3d2c1e) 55%, #17100f);
  border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.fut-top{display:flex; align-items:center; gap:10px;}
.global-note{font-size:34px; font-weight:800; color:#fff; line-height:1;}
.rarity-name{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.85); margin-top:2px;}
.photo-frame{
  width:88px; height:88px; border-radius:50%; overflow:hidden; margin-left:auto;
  border:2px solid rgba(255,255,255,.55); background:#000 center/cover no-repeat; flex:0 0 auto;
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.viewer-name{
  text-align:center; font-size:17px; margin:10px 0 4px; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.role-tag{text-align:center; font-size:10px; letter-spacing:1.5px; color:rgba(255,255,255,.7); margin-bottom:8px;}
svg.radar{display:block; margin:4px auto 2px;}
.stat-list{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; font-size:11px; color:rgba(255,255,255,.9); margin-top:6px;}
.stat-list div{display:flex; justify-content:space-between; border-bottom:1px dashed rgba(255,255,255,.15); padding:2px 0;}

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal-close{
  position:absolute; top:16px; right:16px; background:none; border:none; color:#fff;
  font-size:24px; cursor:pointer;
}