:root{
  --bg:#0f1418;
  --wallpaper-letterbox:#eae5de;
  --panel-alpha:0.88;
  --panel:rgba(23,31,38,var(--panel-alpha));
  --panel-alt:rgba(29,39,51,var(--panel-alpha));
  --border:#2a3540;
  --text:#e6edf3;
  --text-dim:#9fb0bf;
  --text-lead:#202020;
  --coop:#2fb3a3;
  --coop-bg:rgba(47,179,163,0.15);
  --defect:#e0724a;
  --defect-bg:rgba(224,114,74,0.15);
  --accent:#4c8bf5;
  --good:#2fb3a3;
  --bad:#e0724a;
  --avatar-bg:#7c7b7b;
  --remark-bg:#b8b8b8;
  --score-you:#3ddc84;
  --score-opp:#ff5c5c;
  --wp-h: min(100vh, calc(100vw * 941 / 1672));
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); min-height:100vh;
  background-image:
    linear-gradient(rgba(10,14,18,0.45), rgba(10,14,18,0.45)),
    url('images/background/IPD_wallpaper_left.png'),
    url('images/background/IPD_wallpaper_wall.png'),
    url('images/background/IPD_wallpaper_right.png');
  background-color: var(--wallpaper-letterbox);
  background-size:
    100% 100%,
    calc(var(--wp-h) * 702 / 941) var(--wp-h),
    calc(var(--wp-h) * 218 / 941) var(--wp-h),
    calc(var(--wp-h) * 752 / 941) var(--wp-h);
  background-position:
    center center,
    left center,
    center center,
    right center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}
.screen{max-width:900px; margin:0 auto; padding:28px 20px 60px;}
h1{font-size:1.5rem; margin-bottom:4px;}
h2{font-size:1.15rem; color:var(--text);}
p{line-height:1.55; color:var(--text-dim);}
.screen > p, .transition-screen p{color:var(--text-lead);}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:20px 22px; margin-bottom:18px;
}
.btn{
  background:var(--accent); color:#fff; border:none; padding:12px 22px;
  border-radius:8px; font-size:1rem; cursor:pointer; font-weight:600;
  transition:opacity .15s;
}
.btn:disabled{opacity:.35; cursor:not-allowed;}
.btn:hover:not(:disabled){opacity:.88;}
.btn-secondary{background:var(--panel-alt); color:var(--text); border:1px solid var(--border);}
.btn-row{display:flex; gap:14px; margin-top:16px; flex-wrap:wrap;}
table{width:100%; border-collapse:collapse; font-size:0.92rem;}
th,td{padding:6px 8px; text-align:center; border-bottom:1px solid var(--border);}
th{color:var(--text-dim); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.02em;}
.tag-C{color:var(--coop); font-weight:700;}
.tag-D{color:var(--defect); font-weight:700;}
.payoff-schematic{display:grid; grid-template-columns:52px 1fr 1fr; gap:5px; font-size:0.72rem;}
.pm-row{display:contents;}
.pm-col-label, .pm-row-label{
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-dim); text-transform:uppercase; letter-spacing:.02em; padding:2px;
}
.pm-row-label{justify-content:flex-end; text-align:right;}
.pm-cell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--panel-alt); border:1px solid var(--border); border-radius:8px;
  padding:9px 4px; font-weight:700; font-size:0.85rem;
}
.pm-cell-values{display:flex; align-items:center; gap:1px; white-space:nowrap;}
.pm-cell-label{
  font-size:0.62rem; font-weight:500; color:var(--text-dim); text-transform:none;
  letter-spacing:0; text-align:center; line-height:1.25;
}
.pm-sep{color:var(--text-dim); font-weight:400; margin:0 1px;}
.pm-good{color:var(--good);}
.pm-bad{color:var(--bad);}
.pm-mid{color:var(--accent);}
.sticky-panel{
  position:sticky; top:12px; z-index:5;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; margin-bottom:14px;
}
.stat{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:8px;
  padding:10px 16px; text-align:center; min-width:110px;
}
.stat .num{font-size:1.4rem; font-weight:700;}
.stat .lbl{font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em;}
.stat-grid{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:6px 0;}
.stat-grid + .stat-grid{margin-top:14px;}
.stat-you .num{color:var(--score-you);}
.stat-opp .num{color:var(--score-opp);}
.chart{display:flex; gap:4px; margin-top:6px;}
.chart-col{flex:1; display:flex; flex-direction:column; align-items:center;}
.chart-bars{display:flex; align-items:flex-end; justify-content:center; height:60px; width:100%;}
.chart-bar{
  width:100%; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px;
  transition:height .25s;
}
.chart-bar-empty{
  height:4px; background:transparent; border:1px dashed var(--border); opacity:.5;
}
.chart-label{font-size:0.65rem; font-weight:600; color:var(--text-dim); margin-top:4px;}
.history-wrap{
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.row-pending td{color:var(--text-dim); opacity:.45;}
.play-layout{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
.history-sidebar{flex:0 0 260px; width:260px;}
.history-sidebar .card{padding:14px 14px;}
.history-sidebar table{font-size:0.82rem;}
.play-main{flex:1 1 420px; min-width:280px;}
.bot-descriptor{font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim);}
.bot-name{font-weight:700; overflow-wrap:break-word; word-break:break-word; line-height:1.25;}
.bot-id{text-align:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border);}
.bot-id .bot-descriptor{font-size:0.75rem;}
.bot-id .bot-name{font-size:1.15rem; margin-top:2px;}
.bot-id-avatars{display:flex; align-items:flex-start; justify-content:center; gap:10px; margin-bottom:2px;}
.bot-id-side{display:flex; flex-direction:column; align-items:center; gap:4px; max-width:80px;}
.bot-id-side-name{font-size:0.78rem; font-weight:600; color:var(--text); text-align:center; overflow-wrap:break-word;}
.bot-id-vs{font-size:0.62rem; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:12px;}
.round-indicator{font-size:1.3rem; font-weight:700; color:var(--text); margin-top:2px;}
.avatar-frame{position:relative; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; background:var(--avatar-bg);}
.avatar-frame img{width:100%; height:100%; object-fit:contain; display:block;}
.avatar-lg{width:224px; height:224px; transition:width .2s ease, height .2s ease;}
.avatar-lg.avatar-half{width:112px; height:112px;}
.avatar-sm{width:44px; height:44px;}
.bot-avatar-toggle, .player-avatar-toggle{cursor:pointer; pointer-events:auto;}
.bot-avatar-toggle.avatar-muted{filter:grayscale(1) brightness(.6); opacity:.6;}
.corner-avatar{
  position:fixed; bottom:16px; z-index:4; display:flex; flex-direction:column;
  align-items:center; gap:6px; pointer-events:none;
}
.corner-avatar.corner-left{left:16px;}
.corner-avatar.corner-right{right:16px;}
.corner-avatar .vs-name{font-size:0.88rem; font-weight:600; color:var(--text); text-align:center; max-width:224px; overflow-wrap:break-word;}
.avatar-grid{display:grid; grid-template-columns:repeat(10, 1fr); gap:8px; max-width:680px;}
.avatar-pick{cursor:pointer; border-radius:50%; border:3px solid transparent; overflow:hidden; aspect-ratio:1/1; background:var(--avatar-bg); transition:border-color .15s, transform .15s;}
.avatar-pick img{width:100%; height:100%; object-fit:contain; display:block;}
.avatar-pick:hover{transform:scale(1.06);}
.avatar-pick.selected{border-color:var(--accent);}
.bot-avatar-img{width:104px; height:104px; object-fit:contain; display:block; margin:0 auto;}
.action-buttons{display:flex; gap:20px; justify-content:center;}
.action-col{flex:1; max-width:220px; display:flex; flex-direction:column; align-items:stretch; gap:10px;}
.action-btn{
  position:relative; overflow:hidden; width:100%; padding:26px 10px;
  border-radius:12px; border:2px solid transparent;
  font-size:1.15rem; font-weight:700; cursor:pointer; letter-spacing:.02em;
  -webkit-user-select:none; user-select:none; touch-action:none;
}
.action-btn.coop{background:var(--coop-bg); color:var(--coop); border-color:var(--coop);}
.action-btn.defect{background:var(--defect-bg); color:var(--defect); border-color:var(--defect);}
.action-btn:hover{filter:brightness(1.2);}
.action-btn.holding{filter:brightness(1.35);}
.action-btn:disabled{opacity:.4; cursor:not-allowed; filter:none;}
.action-btn .btn-label{position:relative; z-index:1;}
.action-btn .fill-bar{
  position:absolute; left:0; top:0; bottom:0; width:0%; z-index:0;
  background:rgba(255,255,255,0.28);
}
.action-btn .hold-hint{
  position:relative; z-index:1; display:block; font-size:0.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; opacity:.7; margin-top:4px;
}
.move-flavor{
  font-size:0.85rem; font-style:italic; color:var(--text-dim); text-align:center;
  line-height:1.4; min-height:2.8em;
}
.move-flavor.coop{color:var(--coop);}
.move-flavor.defect{color:var(--defect);}
.env-description{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:14px;
  padding:16px 20px; margin:16px 0; font-size:0.92rem; color:var(--text);
}
.env-description h3{margin:0 0 8px; font-size:1rem; color:var(--text);}
.env-description p{margin:0 0 8px; color:var(--text-dim); line-height:1.5;}
.env-description p:last-child{margin-bottom:0;}
.env-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin-top:20px;
}
.env-card{
  cursor:pointer; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--panel-alt); text-align:center; transition:transform .15s, border-color .15s;
}
.env-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.env-card .env-art{
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
}
.env-card .env-art img{
  display:block; width:100%; height:82px; object-fit:cover;
}
.env-card .env-name{padding:8px 8px 2px; font-weight:600; font-size:0.76rem; line-height:1.3;}
.env-dots{display:flex; gap:4px; justify-content:center; padding-bottom:8px;}
.env-dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}
.bot-card{
  position:relative; cursor:pointer; border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--panel-alt); text-align:center; transition:transform .15s, border-color .15s, opacity .2s;
}
.bot-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.bot-card .bot-art{
  position:relative; font-size:2.4rem; padding:12px 0;
  background:linear-gradient(135deg, var(--panel) 0%, var(--panel-alt) 100%);
}
.bot-card .bot-descriptor{padding-top:10px;}
.bot-card .bot-name{font-size:0.95rem; padding:2px 10px 14px;}
.bot-card-dimmed{opacity:.25; filter:grayscale(.6); pointer-events:none; cursor:default;}
.bot-card-dimmed:hover{transform:none; border-color:var(--border);}
.bot-card-played{opacity:.4; pointer-events:none; cursor:default;}
.bot-card-played:hover{transform:none; border-color:var(--border);}
.bot-card-played .bot-art::after{
  content:'✕'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:112px; height:112px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; font-weight:700; color:var(--bad); background:rgba(0,0,0,0.55);
}
.nav-bot-message{
  display:flex; align-items:center; gap:10px; background:var(--panel-alt); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; margin:16px 0 4px; font-size:0.9rem; color:var(--text);
}
.nav-bot-message .nav-icon{font-size:1.4rem;}
input[type=text]{
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:10px 12px; font-size:0.95rem; width:100%; max-width:320px;
}
input[type=text]:focus{outline:1px solid var(--accent);}
.badge{
  display:inline-block; padding:3px 10px; border-radius:12px; font-size:0.78rem;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-dim);
}
.checkbox-row{display:flex; align-items:center; gap:10px; margin:16px 0;}
.center{text-align:center;}
.transition-screen{text-align:center; padding-top:60px;}
.transition-screen h2{font-size:1.6rem; margin-bottom:10px;}
input[type=checkbox]{width:18px; height:18px;}
a.link{color:var(--accent);}
.hidden{display:none !important;}
.footnote{font-size:0.78rem; color:var(--text-dim); margin-top:10px;}
.toast-container{
  position:fixed; right:16px; bottom:280px; z-index:50;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
  max-width:400px; pointer-events:none;
}
.toast{
  background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 20px; font-size:1.15rem; color:var(--text); line-height:1.4;
  font-style:italic; cursor:pointer; pointer-events:auto;
  box-shadow:0 8px 22px rgba(0,0,0,0.4);
  opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.coop{border-left-color:var(--coop);}
.toast.defect{border-left-color:var(--defect);}
.bot-remark{
  position:absolute; top:112px; right:100%; transform:translateY(-50%); margin-right:16px;
  width:230px; background:var(--remark-bg); border-radius:14px;
  padding:14px 18px; font-size:0.86rem; color:#000; line-height:1.5; letter-spacing:0.2px;
  font-family:Consolas,'Lucida Console','Courier New',monospace;
  box-shadow:0 8px 22px rgba(0,0,0,0.4); cursor:pointer; pointer-events:auto;
  animation:remark-fade-in .25s ease;
}
.bot-remark.remark-small{top:56px;}
.bot-remark::before{
  content:''; position:absolute; inset:6px; border:1.5px solid rgba(0,0,0,0.55);
  border-radius:9px; pointer-events:none;
}
.bot-remark::after{
  content:''; position:absolute; top:50%; left:100%; transform:translateY(-50%);
  border:8px solid transparent; border-left-color:var(--remark-bg);
}
@keyframes remark-fade-in{
  from{opacity:0; transform:translateY(-50%) translateX(6px);}
  to{opacity:1; transform:translateY(-50%) translateX(0);}
}
.card, .pm-cell, .stat, .env-description, .env-card, .bot-card,
.nav-bot-message, input[type=text], .badge, .toast{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Utility classes replacing former inline style="" attributes in index.html */
.h1-tight{margin-bottom:2px;}
.h2-flush{margin-top:0;}
.topbar-stats{display:flex; gap:10px;}
.nav-bot-message--start{align-items:flex-start;}
.nav-bot-message--note{text-align:left; max-width:460px; margin:16px auto;}
.summary-score-card{max-width:280px; margin:20px auto;}
.field-group{margin:16px 0;}
.field-label{display:block; margin-bottom:6px; font-size:0.9rem;}
.field-label--spaced{margin-bottom:10px;}
.strategy-label{display:block; margin-bottom:8px; font-size:0.92rem;}
.mt-20{margin-top:20px;}
.mt-14{margin-top:14px;}