/* ===== GAMES (Email Client retro) ===== */

body.games-page{
  margin:0;
  min-height:100vh;
background: #000 url("gameImages/bal.GIF") repeat;  color:#ffd1e6;
  font: 13px/1.6 "MS PGothic","MS Gothic",system-ui,sans-serif;
}

/* リンク */
body.games-page a{ color:#ff4aa2; text-decoration:none; }
body.games-page a:visited{ color:#ff2a6d; }
body.games-page a:hover{ text-decoration: underline; }

/* 中央に置く */
.desk{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 26px 12px 40px;
}

/* ウィンドウ */
.win{
  width: min(980px, 96vw);
  border: 2px solid #ff2a6d;
  background: rgba(0,0,0,0.86);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 0 2px rgba(0,0,0,0.65) inset;
}

/* タイトルバー */
.titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(255,42,109,0.55), rgba(255,42,109,0.22));
  border-bottom: 2px solid #ff2a6d;
  letter-spacing: .6px;
}
.title-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.appdot{
  width:10px; height:10px;
  background:#ff2a6d;
  border:1px solid #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset;
}
.apptitle{ font-weight:bold; color:#ffd1e6; }
.appsub{ color:#ff8fc2; }

.title-right{ display:flex; gap:6px; }
.winbtn{
  width:12px; height:12px;
  border:1px solid #000;
  background: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 1px rgba(255,42,109,0.35) inset;
}
.winbtn.close{
  background: rgba(255,42,109,0.65);
}

/* ツールバー */
.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,42,109,0.65);
  background: rgba(0,0,0,0.55);
}
.tbtn{
  display:inline-block;
  padding: 4px 10px;
  border: 1px solid #ff2a6d;
  background: rgba(0,0,0,0.65);
  font-family: "Courier New", Courier, monospace;
  color:#ffd1e6;
}
.tbtn:hover{ background: rgba(255,42,109,0.18); }
.tbtn-strong{
  box-shadow: 0 0 0 1px rgba(255,42,109,0.45) inset;
}
.sep{
  width:1px;
  height:18px;
  background: rgba(255,42,109,0.7);
  margin: 0 4px;
}

/* 本体グリッド */
.bodygrid{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: 520px;
}

/* 左 */
.side{
  border-right: 2px solid #ff2a6d;
  background: rgba(0,0,0,0.72);
  padding: 10px;
}
.sidecard{
  display:flex;
  gap:10px;
  align-items:center;
  border: 1px solid rgba(255,42,109,0.7);
  background: rgba(0,0,0,0.55);
  padding: 8px;
  margin-bottom: 10px;
}
.avatar{
  width:42px; height:42px;
  border:1px solid #000;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,74,162,0.8), rgba(0,0,0,0.2)),
    rgba(0,0,0,0.55);
  box-shadow: 0 0 0 1px rgba(255,42,109,0.25) inset;
}
.who .name{ font-weight:bold; }
.who .meta{ font-size:12px; color:#ff8fc2; opacity:.9; }

.panehead{
  font-family: "Courier New", Courier, monospace;
  font-weight:bold;
  color:#ffd1e6;
  margin: 6px 0 6px;
}

.folders{
  list-style:none;
  padding:0;
  margin:0 0 10px;
}
.folders li{ margin: 5px 0; }
.folders a{
  display:block;
  padding: 3px 6px;
  border: 1px solid rgba(255,42,109,0.55);
  background: rgba(0,0,0,0.45);
}
.folders a:hover{ background: rgba(255,42,109,0.14); }

.dash{
  border:0;
  border-top: 1px dashed rgba(255,42,109,0.8);
  margin: 10px 0;
}

.small{ font-size:12px; }
.mono{ font-family: "Courier New", Courier, monospace; }

/* 右 */
.mainpane{
  padding: 10px;
  background: rgba(0,0,0,0.62);
}

.listwrap{
  border: 1px solid rgba(255,42,109,0.7);
  background: rgba(0,0,0,0.55);
  overflow:auto;
}

.msglist{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.msglist th,
.msglist td{
  border-bottom: 1px solid rgba(255,42,109,0.35);
  padding: 7px 8px;
  text-align:left;
  white-space: nowrap;
}
.msglist thead th{
  background: rgba(255,42,109,0.16);
  border-bottom: 1px solid rgba(255,42,109,0.75);
  font-family: "Courier New", Courier, monospace;
}
.col-flag{ width: 26px; text-align:center; }
.col-from{ width: 160px; }
.col-date{ width: 110px; text-align:right; }
.col-subj{ width: auto; white-space: normal; }
.msglist td.col-flag{ color:#ff8fc2; font-weight:bold; }

.link{
  color:#ffd1e6;
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

/* プレビュー */
.readpane{
  margin-top: 10px;
  border: 1px solid rgba(255,42,109,0.7);
  background: rgba(0,0,0,0.55);
}
.readhead{
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,42,109,0.55);
  background: rgba(255,42,109,0.12);
  font-family: "Courier New", Courier, monospace;
}
.readbody{
  padding: 10px 10px 14px;
  color:#ffb6d6;
}

/* ステータスバー */
.statusbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 6px 10px;
  border-top: 2px solid #ff2a6d;
  background: rgba(0,0,0,0.78);
  font-family: "Courier New", Courier, monospace;
}
.stat{ color:#ffd1e6; }
.stat.dim{ color:#ff8fc2; opacity:.85; }

/* 小さくなった時 */
@media (max-width: 760px){
  .bodygrid{ grid-template-columns: 1fr; }
  .side{ border-right: 0; border-bottom: 2px solid #ff2a6d; }
}

/* カカポ前提：ブラウザカーソル消す */
html, body, *{ cursor:none !important; }
#custom-cursor{ display:none; }