/* styles.css */
:root{
  --bg:#0b0c10;
  --panel:#111319;
  --panel2:#0e1015;
  --text:#e8eaf0;
  --muted:#9aa3b2;
  --line:#232736;
  --good:#41d38c;
  --warn:#f6c344;
  --bad:#ff4d5f;
  --btn:#1a1f2c;
  --btn2:#141827;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, #141a2a 0%, var(--bg) 55%);
  color:var(--text);
}

a{ color:inherit; }

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: rgba(10,12,18,.8);
  backdrop-filter: blur(8px);
  position: sticky;
  top:0;
  z-index: 2;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ font-size:22px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:12px; }
.title .h1{ font-weight:800; letter-spacing:.02em; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.h2{ font-size:18px; font-weight:800; }
.bigtext{ font-size:14px; font-weight:800; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.topright{ display:flex; align-items:center; gap:10px; }
.badges{ display:flex; gap:8px; align-items:center; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color: var(--text);
}

.wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  padding:14px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px){
  .wrap{ grid-template-columns: 1fr; }
  .side{ order:2; }
}

.side, .main{
  background: rgba(17,19,25,.76);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.side{ padding:12px; }
.sideHead{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding:6px 6px 10px; border-bottom:1px solid var(--line); }
.players{ padding:10px 6px; display:flex; flex-direction:column; gap:10px; }

.main{ padding:12px; }
.phase{ padding:6px 4px 10px; border-bottom:1px solid var(--line); margin-bottom:12px; }

.card{
  background: rgba(14,16,21,.9);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.divider{ height:1px; background: var(--line); margin:10px 0; }

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.col{ display:flex; flex-direction:column; gap:8px; }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width: 700px){
  .split{ grid-template-columns: 1fr; }
}

label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }

input, textarea, select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  outline: none;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, textarea:focus, select:focus{ border-color: rgba(255,255,255,.25); }

.btn{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{ background: rgba(255,255,255,.10); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.tiny{ padding:7px 10px; border-radius:12px; font-size:12px; }
.btn.secondary{ background: rgba(0,0,0,.15); }
.btn.good{ background: rgba(65,211,140,.16); border-color: rgba(65,211,140,.35); }
.btn.warn{ background: rgba(246,195,68,.14); border-color: rgba(246,195,68,.35); }
.btn.bad{ background: rgba(255,77,95,.14); border-color: rgba(255,77,95,.35); }

.p{
  display:flex;
  gap:10px;
  align-items:center;
}
.icon{
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.icon img{ width:100%; height:100%; object-fit:cover; }

.name{ font-weight:800; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.tag{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.statement{
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.20);
  font-size:16px;
  line-height: 1.55;
}

.hint{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(246,195,68,.35);
  background: rgba(246,195,68,.12);
}

.right{ text-align:right; }

.footer{ margin-top:14px; padding:8px 4px; }

.toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.70);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 12px;
  border-radius: 999px;
  opacity:0;
  transition: .22s ease;
  pointer-events:none;
  max-width: 90vw;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* Chat */
.chatCard{ padding:12px; margin-top:12px; }
.chatTabs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chatTab{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: var(--text); cursor:pointer; }
.chatTab.on{ background: rgba(255,255,255,.10); }
.chatContent{ display:flex; flex-direction:column; gap:10px; }
.chatList{ height:220px; overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); padding:10px; display:flex; flex-direction:column; gap:8px; }
.chatItem{ display:flex; gap:8px; align-items:flex-start; }
.chatItem.system{ justify-content:center; }
.chatAvatar{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); overflow:hidden; display:flex; align-items:center; justify-content:center; flex: 0 0 auto; }
.chatAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.chatBody{ padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); max-width: 78%; word-break: break-word; }
.chatItem.system .chatBody{ background: rgba(104,211,145,.10); border-color: rgba(104,211,145,.22); max-width: 92%; }
.chatMeta{ font-size:11px; color: var(--muted); margin-bottom:4px; }
.chatStamp{ width:56px; height:56px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); display:block; }
.stampRow{ display:flex; gap:8px; flex-wrap:wrap; }
.chatLog{ height:220px; overflow:auto; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); padding:10px; display:flex; flex-direction:column; gap:8px; }
.chatMsg{ display:flex; gap:8px; align-items:flex-start; }
.chatMsg .bubble{ padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); max-width: 78%; word-break: break-word; }
.chatMsg .meta{ font-size:11px; color: var(--muted); margin-top:2px; }
.chatMsg.system .bubble{ background: rgba(104,211,145,.10); border-color: rgba(104,211,145,.22); }
.chatInputRow{ display:flex; gap:8px; margin-top:10px; }
.stampImg{ width:44px; height:44px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.stampBtn{ padding:6px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); cursor:pointer; }
.stampBtn img{ width:36px; height:36px; object-fit:cover; border-radius:10px; display:block; }
.stampBtn.small img{ width:28px; height:28px; border-radius:8px; }

/* Cropper modal */
.modalBack{ position:fixed; inset:0; background: rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index: 1000; padding: 18px; }
.modalCard{ width: min(420px, 96vw); background: rgba(20,24,36,.95); border:1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.modalHead{ display:flex; flex-direction:column; gap:4px; }
.cropCanvas{ width: 320px; height: 320px; max-width: 100%; border-radius: 14px; border:1px solid rgba(255,255,255,.12); touch-action:none; display:block; margin: 0 auto; }

/* Stamp overlay on player icons */
.icon{ position: relative; }
.iconOverlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.35); backdrop-filter: blur(1px); border-radius:12px; opacity:0; pointer-events:none; }
.iconOverlay.show{ opacity:1; animation: fadeOut 1s ease forwards; }
.iconOverlay img{ width: 80%; height: 80%; object-fit:cover; border-radius: 10px; }
@keyframes fadeOut{ 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }


#chatPanel{ margin:12px 0 0; }