/* tryout2025-profile-style.css (v3) */
:root{
  --bg:#f7f8fb;
  --card:#fff;
  --text:#1f2937;
  --muted:#1f2937;
  --border:#e5e7eb;
  --accent:#fbfcfe;

  --radius:16px;
  --shadow:0 18px 44px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Roboto,"Segoe UI","Yu Gothic UI",sans-serif;
  background: radial-gradient(ellipse at 50% -10%, #fff 0%, var(--bg) 60%);
}

.wrap{max-width:1100px; margin:0 auto; padding:24px 14px 60px}
.page-head{margin:0 0 6px}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* ===== カード本体 ===== */
.profile{
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; box-shadow:var(--shadow);
  padding:16px 16px 22px;
}

/* ===== 上段：写真 + 右側コンテンツ ===== */
.profile-top{
  display:grid;
  grid-template-columns: 320px 1fr;   /* 写真は少し小さめ */
  gap:22px;
  align-items: center;                /* PCは縦センターで頭に余白 */
}
@media (max-width: 980px){
  .profile-top{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* 左：写真 */
.photo{
  border:1px solid var(--border);
  border-radius:14px; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.photo img{ display:block; width:100%; height:auto; object-fit:cover; }

/* 右：テキストコンテンツ */
.content{padding:4px 2px}

/* ===== フィールドボックス（枠で囲む） ===== */
.field,
.meta .row,
.section{
  background:var(--accent);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px 16px;
}
.field{ margin:0 0 14px; }
.meta{ display:grid; grid-template-columns: 1fr 1fr; gap:14px 18px; margin:0 0 14px; }
@media (max-width: 640px){
  .meta{ grid-template-columns: 1fr; }
}
.section{ margin-top:6px; }

/* ラベル（見出し） */
.label{
  color:var(--muted);
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  margin:0 0 8px;
}

/* 選手名 */
.name{
  margin:0; font-weight:900; letter-spacing:.01em;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height:1.25;
}

/* 値テキスト */
.meta .row .value,
.text{
  color:var(--text);
  font-size:17px;
  line-height:1.9;
}

/* ===== ボタン ===== */
.actions{
  margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-block; padding:11px 20px; border-radius:999px; font-weight:800; text-decoration:none;
  border:1px solid var(--border); background:#fff; color:#141414;
  box-shadow:0 10px 24px rgba(15,23,42,.08); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(15,23,42,.12); }
.btn:active{ transform:none }
.btn.ghost{ background:#f8fafc }
.btn.green{ background:#eaf7ee; color:#14532d; border-color:#cdebd6 }

/* ===== ステータス/エラー ===== */
.status{ margin:14px 0 0; color:var(--muted); text-align:center }
.error{
  margin:14px 0 0; color:#c21d1d; background:#fff4f4; border:1px solid #ffdede;
  padding:10px 12px; border-radius:12px; text-align:center;
}

/* ===== モバイル微調整 ===== */
@media (max-width:640px){
  .wrap{ padding:20px 12px 44px; }
  .profile{ padding:14px 14px 18px; }

  .field,
  .meta .row,
  .section{ padding:12px 12px; }

  .label{ font-size:15px; margin-bottom:6px; }
  .meta .row .value,
  .text{ font-size:16px; line-height:1.8; }
}