@charset "UTF-8";

/* ===================================================================
   ワードクラウド・フォーム関連の追加スタイル（共栄ワークス担当分）

   制作会社から受領した common.css / question.css / results.css /
   playerprofiles.css は編集していません。
   受領データに定義がなかった部分だけをこのファイルに追加しています。

   ・回答画面の「結果をジャッジ！」ボタン（a → button に変えたぶんの打ち消し）
   ・回答画面の選択肢の折り返し位置と、PCで2行の選択肢と並んだときの上下中央寄せ
   ・回答画面のエラー表示
   ・選手紹介画面のワードクラウド（吹き出し・語の見た目）

   ワードクラウドはデザインカンプ「選手紹介画面（回答公開前）」に合わせています。
   語の位置・大きさの規則は js/wordcloud.js（表示時に集計JSONを読んで組み立てる）、
   どの語をどの区分（lg/md/sm/xs）で出すかは wordcloud-app/rules.php にあります。
   =================================================================== */

/* -------------------------------------------------------------------
   回答画面：送信ボタン
   受領データでは <a href="../results/"> だったものを <button type="submit">
   に変えているため、ボタンの既定スタイルを打ち消す。
   ------------------------------------------------------------------- */
.wc-judgeBtn {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* -------------------------------------------------------------------
   回答画面：選択肢の折り返し
   選択肢の文言には文節の切れ目に <wbr> を入れて出力している（cloud_layout.php の
   wc_phrases_html）。keep-all で <wbr> の位置でだけ折り返し、1文節が1行に
   収まらないときだけ途中で折り返す。
   ------------------------------------------------------------------- */
.question__optionLabel {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* PCでは選択肢が2列に並び、隣が2行だと枠が高くなる。
   受領CSSでは中身が上寄せ（display: block）のため、1行の側を上下中央に置く */
@media (min-width: 961px) {
  .question__optionListItem {
    display: flex;
  }
  .question__option {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------
   回答画面：エラー表示
   未回答のまま送信された場合などに出る。通常は表示されない。
   ------------------------------------------------------------------- */
.wc-errors {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto 24px;
  padding: 16px 20px;
  border: 2px solid #fae452;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-family: "Kazesawa", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.wc-errors__item {
  margin: 0;
}

.wc-errors__item + .wc-errors__item {
  margin-top: 8px;
}

/* -------------------------------------------------------------------
   ワードクラウド（メイン・設問パネル共通）
   配置は js/wordcloud.js が計算し、位置・大きさは
   style 属性（% と cqw）で出している。ここでは見た目だけを指定する。
   ------------------------------------------------------------------- */
.wc-line {
  display: block;
  white-space: nowrap;
}

/* 上位の語：金色のグラデーション（カンプ：下 #E2BF53 → 上 #FEF378） */
.wc-gold .wc-line {
  background: linear-gradient(0deg, #e2bf53 15%, #fef378 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------------------------------------------------------------------
   選手紹介画面：メイン（シルエットの左右に並ぶ吹き出し）
   枠は .playerprofiles__fansContent（PC 1120×630 / SP 幅358・高さ約1007px）。
   PC：左右に 457×640 の塊、SP：同じ塊を縦に2つ積んで縮小。
   ------------------------------------------------------------------- */
.wc-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

@media (min-width: 961px) {
  .wc-main {
    container-type: inline-size;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* 吹き出しを並べる塊。中の文字サイズは塊の幅に対する割合（cqw） */
.wc-main__group {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 358px;
  aspect-ratio: 457 / 640;
  container-type: inline-size;
}

/* PC：枠が1120pxより狭い幅（961〜1151px）では、塊とシルエットを枠の幅に合わせて縮める。
   457px のままだと左右の塊が真ん中で寄り、シルエットに被るため（2026-10-28） */
@media (min-width: 961px) {
  .wc-main__group {
    width: min(457px, 40.8cqw);
    max-width: none;
  }
}

/* 選手のシルエット（吹き出しの後ろ） */
.wc-main__figure {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 84%;
  transform: translate(-50%, -50%);
  font-size: 0;
  pointer-events: none;
}

.wc-main__figure img {
  width: 100%;
  height: auto;
}

/* PC：柳田選手の人物の高さがカンプのシルエット（約662px）と同じになる大きさ。
   素材は全選手 768×1019 の同じキャンバスで足元が下端に揃っているため、
   キャンバスごと中央に置き、足元をカンプと同じ位置（枠の上から664px）に合わせる */
@media (min-width: 961px) {
  .wc-main__figure {
    top: max(-124px, -11.07cqw);
    left: 50%;
    width: min(594px, 53.04cqw);
    transform: translateX(-50%);
  }
}

/* 見出し（ファンの答え・選手名）をシルエットより手前に出す。
   PC ではシルエットが枠（.playerprofiles__fansContent、z-index: 1）の上にはみ出し、
   背の高い選手は見出しに被るため（2026-10-16 修正依頼） */
.playerprofiles__fansHead {
  position: relative;
  z-index: 2;
}

/* 集計時点 */
.wc-main__date {
  position: absolute;
  right: 0;
  bottom: -28px;
  z-index: 1;
  margin: 0;
  color: #999;
  font-family: "Kazesawa", sans-serif;
  font-size: 11px;
  font-weight: 400;
}

@media (min-width: 961px) {
  .wc-main__date {
    bottom: -32px;
  }
}

/* SP：カンプSPに合わせ、吹き出しは1つの塊（縦24マス。PCの規則を0.78倍した 358×1008px）にして、
   シルエットはその下に置く（吹き出しに重ねない）。JS が .wc-main--sp を付け、左の塊に全部入れる。
   シルエットはカンプSPで人物の高さ約344px（柳田選手の素材でキャンバス幅308px＝枠の86%）、
   キャンバスの上端は塊の下端より約50px上（キャンバス上部は透明なので吹き出しには重ならない） */
@media (max-width: 960px) {
  /* 受領CSSではセクションの高さが 1736px 固定で、吹き出しの枠は絶対配置（上から300px）。
     画面が狭いときや、タブレットで横に並ぶ数が増えたときに下が大きく空くため、
     枠を流れの中に置き、セクションの高さを中身に合わせる（2026-10-28）。
     見出しとの間（margin-top）と下の余白（padding-bottom）は、幅390pxで受領CSSと同じ位置になる値 */
  .playerprofiles__fans {
    height: auto;
    padding-bottom: 48px;
  }

  .playerprofiles__fansContent {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    margin: 100px auto 0;
    transform: none;
  }

  /* 高さは JS が実際に使った段数から決める（style の aspect-ratio）。これは読み込み前の仮の値 */
  .wc-main__group--left {
    aspect-ratio: 457 / 1286;
  }

  .wc-main__group--right {
    display: none;
  }

  .wc-main__date {
    position: static;
    order: 2;
    align-self: flex-end;
    margin-top: 4px;
  }

  .wc-main__figure {
    position: relative;
    top: auto;
    left: auto;
    order: 3;
    width: 86%;
    max-width: 308px;
    margin-top: -14%;
    transform: none;
  }
}

/* 吹き出し。形と影は制作会社の .playerprofiles__answersBubble と同じ作り
   （角丸10px・下中央に尾・右下6pxに25%の影・背景ぼかし） */
.wc-tile {
  --tile-bg: rgba(255, 255, 255, 0.2);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

.wc-tile::before,
.wc-tile::after {
  content: "";
  position: absolute;
  inset: 0;
}

.wc-tile::before {
  background: rgba(0, 0, 0, 0.25);
  transform: translate(6px, 6px);
  clip-path: shape(evenodd from 10px 0, hline to calc(100% - 10px), arc to 100% 10px of 10px cw, vline to calc(100% - 20px), arc to calc(100% - 10px) calc(100% - 10px) of 10px cw, hline to calc(50% + 10px), line to 50% 100%, line to calc(50% - 10px) calc(100% - 10px), hline to 10px, arc to 0 calc(100% - 20px) of 10px cw, vline to 10px, arc to 10px 0 of 10px cw, close, move to 4px -6px, hline to calc(100% - 16px), arc to calc(100% - 6px) 4px of 10px cw, vline to calc(100% - 26px), arc to calc(100% - 16px) calc(100% - 16px) of 10px cw, hline to calc(50% + 4px), line to calc(50% - 6px) calc(100% - 6px), line to calc(50% - 16px) calc(100% - 16px), hline to 4px, arc to -6px calc(100% - 26px) of 10px cw, vline to 4px, arc to 4px -6px of 10px cw, close);
}

.wc-tile::after {
  background: var(--tile-bg);
  backdrop-filter: blur(5px);
  clip-path: shape(from 10px 0, hline to calc(100% - 10px), arc to 100% 10px of 10px cw, vline to calc(100% - 20px), arc to calc(100% - 10px) calc(100% - 10px) of 10px cw, hline to calc(50% + 10px), line to 50% 100%, line to calc(50% - 10px) calc(100% - 10px), hline to 10px, arc to 0 calc(100% - 20px) of 10px cw, vline to 10px, arc to 10px 0 of 10px cw, close);
}

/* clip-path: shape() に対応していないブラウザでは、尾なしの角丸で出す */
@supports not (clip-path: shape(from 0 0, line to 1px 1px)) {
  .wc-tile::before {
    display: none;
  }

  .wc-tile::after {
    bottom: 10px;
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
  }
}

.wc-tile__text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Kazesawa", sans-serif;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* -------------------------------------------------------------------
   選手紹介画面：設問ごとのパネル
   枠は .playerprofiles__answersBubbleInner。受領CSSの flex 組みを打ち消し、
   語を絶対配置で並べる。文字サイズはパネルの幅に対する割合（cqw）。
   ------------------------------------------------------------------- */
.playerprofiles__answersBubble {
  container-type: inline-size;
}

.playerprofiles__answersBubbleInner.wc-panel {
  display: block;
  padding: 0;
}

.wc-panel__word {
  position: absolute;
  color: #fff;
  font-family: "Kazesawa", sans-serif;
  font-weight: 800;
  line-height: 1.2;
}

/* -------------------------------------------------------------------
   仮の選手一覧（11th/index.php）
   制作会社のトップページに差し替える前提の確認用スタイル。
   ------------------------------------------------------------------- */
.wc-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 16px 80px;
  color: #fff;
  font-family: "Kazesawa", sans-serif;
}

.wc-top__head {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.wc-top__note {
  margin: 0 0 32px;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  opacity: 0.7;
}

.wc-top__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.wc-top__item {
  padding: 16px;
  border: 2px solid #333;
  border-radius: 8px;
  background: linear-gradient(180deg, #000 0%, #333 100%);
}

.wc-top__team {
  margin: 0 0 4px;
  font-size: 12px;
  opacity: 0.8;
}

.wc-top__name {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.wc-top__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}

.wc-top__links a {
  color: #fae452;
}