:root{
  --bg:#222;
  --bg2:#1c1c1c;
  --panel:#2b2b2b;
  --panel2:#333;
  --panel3:#3a3a3a;

  --text:#f2f2f2;
  --muted:#c9c9c9;
  --soft:#9f9f9f;

  --line:#4a4a4a;
  --line2:#5b5b5b;

  --accent:#d08a2a;     /* lichess-like orange */
  --accent2:#ffb24a;
  --bad:#d44e4e;
  --ok:#5fd07a;

  --radius:14px;
  --border:4px solid var(--line2);
  --shadow:0 18px 38px rgba(0,0,0,.42);

  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --huge: 26px;
  --big: 20px;
  --mid: 16px;
  --small: 13px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 40% 0%, #2a2a2a 0%, #1c1c1c 55%, #141414 100%),
    linear-gradient(#1a1a1a,#141414);
  color:var(--text);
  font-family:var(--font);
  overflow-x:hidden;
}

.bgmark{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.09;
  background:
    url('/diffido-mark.png') center/680px no-repeat;
  filter: blur(.2px);
}

.app{ min-height:100%; display:flex; flex-direction:column; }

.topbar{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  border-bottom:5px solid #141414;
  background: linear-gradient(#2a2a2a,#232323);
}

.brand{ display:flex; align-items:center; gap:12px; min-width:260px; }
.brandLogo{
  width:58px; height:58px;
  border:4px solid var(--line2);
  border-radius:14px;
  background:#222;
  box-shadow: var(--shadow);
}
.brandName{ font-size:24px; letter-spacing:2px; font-weight:900; }
.brandTag{ font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:1px; }

.tabs{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex:1;
  justify-content:center;
}
.tab{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  padding:10px 12px;
  letter-spacing:.5px;
  cursor:pointer;
  position:relative;
  text-transform:none;
}
.tab:hover{ color:var(--text); }
.tabActive{
  color:var(--accent2);
}
.tabActive::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:5px;
  background:var(--accent);
  border-radius:999px;
}

.topRight{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  min-width:340px;
}

.netBadge{
  font-weight:900;
  letter-spacing:1px;
  font-size:13px;
  padding:10px 12px;
  border:4px solid var(--line2);
  border-radius:999px;
  user-select:none;
}
.netGood{ color:#0b1; background:rgba(0,200,0,.12); }
.netBad{ color:#f66; background:rgba(200,0,0,.12); }

.iconBtn{
  width:54px; height:54px;
  border:var(--border);
  border-radius:16px;
  background:linear-gradient(#383838,#2d2d2d);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
  box-shadow: var(--shadow);
}
.iconBtn:hover{ outline:4px solid rgba(208,138,42,.25); }

.btn{
  border:var(--border);
  border-radius:16px;
  padding:14px 18px;
  font-weight:900;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow: var(--shadow);
  font-size:18px;
}
.btnHuge{
  padding:14px 20px;
  font-size:18px;
}
.btnPrimary{
  background:linear-gradient(#3a3a3a,#2f2f2f);
  color:var(--text);
}
.btnPrimary:hover{
  outline:4px solid rgba(208,138,42,.35);
}
.btnGhost{
  background:linear-gradient(#2c2c2c,#242424);
  color:var(--muted);
}
.btnGhost:hover{ color:var(--text); outline:4px solid rgba(255,178,74,.20); }

.grid{
  display:grid;
  gap:16px;
  padding:16px;
  grid-template-columns: 360px 1fr 360px;
  align-items:stretch;
  flex:1;
}
.panel{
  border:var(--border);
  border-radius:var(--radius);
  background:linear-gradient(#2f2f2f,#272727);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
}
.panelHeader{
  padding:14px 14px;
  background:linear-gradient(#3a3a3a,#323232);
  border-bottom:4px solid #202020;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.panelTitle{
  font-size:18px;
  font-weight:900;
  letter-spacing:1px;
  color:var(--text);
}
.panelBody{ padding:14px; }

.kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:2px solid rgba(255,255,255,.06);
  font-size:15px;
}
.kv span:first-child{ color:var(--muted); }
.kv span:last-child{ font-weight:900; }

.tileGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.tile{
  border:var(--border);
  border-radius:18px;
  background:linear-gradient(#3b3b3b,#2f2f2f);
  padding:18px 14px;
  cursor:pointer;
  text-align:center;
  box-shadow: var(--shadow);
  user-select:none;
}
.tile:hover{ outline:4px solid rgba(208,138,42,.28); }
.tileTop{
  font-size:42px;
  font-weight:1000;
  letter-spacing:1px;
}
.tileSub{
  margin-top:6px;
  font-size:16px;
  color:var(--muted);
  letter-spacing:1px;
}
.tileTag{
  margin-top:10px;
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  font-size:12px;
  letter-spacing:1px;
  color:var(--accent2);
}

.bigActions{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bigAction{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 14px;
  border:var(--border);
  border-radius:18px;
  background:linear-gradient(#3a3a3a,#2f2f2f);
  cursor:pointer;
  box-shadow: var(--shadow);
}
.bigAction:hover{ outline:4px solid rgba(208,138,42,.28); }
.bigActionIcon{
  width:52px; height:52px;
  border:4px solid var(--line2);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:#222;
}
.bigActionText{ flex:1; }
.bigActionTitle{
  font-size:18px;
  font-weight:1000;
  letter-spacing:1px;
}
.bigActionDesc{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.5px;
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.table th,.table td{
  padding:12px 10px;
  border-bottom:2px solid rgba(255,255,255,.07);
  text-align:left;
}
.table th{ color:var(--muted); font-weight:1000; letter-spacing:1px; font-size:13px; }
.table tr:hover td{ background:rgba(255,255,255,.04); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.15);
  font-size:12px;
  letter-spacing:1px;
  font-weight:1000;
}
.badgeAccent{ color:var(--accent2); }
.badgeOk{ color:var(--ok); }
.badgeBad{ color:#ff7a7a; }

.matchTop{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.playerCard{
  flex:1;
  min-width:220px;
  border:var(--border);
  border-radius:18px;
  background:linear-gradient(#3a3a3a,#2f2f2f);
  padding:12px;
  box-shadow: var(--shadow);
}
.playerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.playerName{
  font-weight:1000;
  font-size:16px;
  letter-spacing:1px;
}
.playerMeta{
  color:var(--muted);
  font-size:12px;
  letter-spacing:1px;
  margin-top:6px;
}
.symbolPill{
  display:flex;
  align-items:center;
  gap:8px;
  border:4px solid var(--line2);
  border-radius:999px;
  padding:8px 10px;
  background:#222;
  font-weight:1000;
  letter-spacing:1px;
  font-size:13px;
}
.symbolPill img{ width:20px; height:20px; }

.turnBox{
  margin-top:14px;
  border:var(--border);
  border-radius:18px;
  background:linear-gradient(#3a3a3a,#2f2f2f);
  padding:16px;
  box-shadow: var(--shadow);
}
.turnTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:1000;
  letter-spacing:1px;
  font-size:16px;
}
.question{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:4px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}
.questionText{
  font-size:28px;
  font-weight:1000;
  letter-spacing:1px;
}
.question img{ width:44px; height:44px; }

.choiceRow{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.choiceBtn{
  flex:1;
  border:var(--border);
  border-radius:18px;
  padding:16px 14px;
  font-size:22px;
  font-weight:1000;
  letter-spacing:2px;
  cursor:pointer;
  background:linear-gradient(#3a3a3a,#2f2f2f);
  box-shadow: var(--shadow);
}
.choiceBtn:hover{ outline:4px solid rgba(255,178,74,.22); }
.choiceYes{ }
.choiceNo{ }

.smallNote{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.5px;
}

.chatLog{
  border:4px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.18);
  padding:12px;
  max-height:220px;
  overflow:auto;
}
.chatItem{
  padding:8px 8px;
  border-bottom:2px solid rgba(255,255,255,.06);
  font-size:14px;
}
.chatItem:last-child{ border-bottom:0; }
.chatWho{ font-weight:1000; color:var(--accent2); letter-spacing:.5px; }
.chatMsg{ color:var(--text); margin-left:6px; }

.presetGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
.presetBtn{
  border:var(--border);
  border-radius:16px;
  padding:12px 10px;
  background:linear-gradient(#3a3a3a,#2f2f2f);
  cursor:pointer;
  font-weight:1000;
  letter-spacing:1px;
  font-size:14px;
  box-shadow: var(--shadow);
}
.presetBtn:hover{ outline:4px solid rgba(208,138,42,.25); }

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:1000;
}
.hidden{ display:none !important; }
.modalCard{
  width:min(760px, 100%);
  border:6px solid var(--line2);
  border-radius:20px;
  background:linear-gradient(#343434,#2a2a2a);
  box-shadow: var(--shadow);
  padding:16px;
}
.modalTitle{
  font-size:18px;
  font-weight:1000;
  letter-spacing:1px;
  margin-bottom:10px;
}
.modalActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.input{
  width:100%;
  border:4px solid var(--line2);
  border-radius:16px;
  padding:14px 14px;
  background:#222;
  color:var(--text);
  font-size:18px;
  font-weight:900;
  letter-spacing:1px;
  outline:none;
}
.input:focus{ outline:4px solid rgba(208,138,42,.25); }

.toastHost{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2000;
}
.toast{
  min-width:260px;
  border:4px solid var(--line2);
  border-radius:18px;
  padding:12px 14px;
  background:linear-gradient(#343434,#2b2b2b);
  box-shadow: var(--shadow);
  font-size:14px;
  letter-spacing:.5px;
}
.toast strong{ color:var(--accent2); }

@media (max-width: 1180px){
  .grid{ grid-template-columns: 1fr; }
  .brand{ min-width:unset; }
  .topRight{ min-width:unset; }
  .tabs{ justify-content:flex-start; overflow:auto; }
  .tileGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .tileGrid{ grid-template-columns: 1fr; }
  .choiceRow{ flex-direction:column; }
  .topbar{ flex-wrap:wrap; }
  .brandLogo{ width:52px; height:52px; }
}