:root{
  --felt-0:#0b1310; --felt-1:#0e1a14; --felt-2:#132420; --felt-3:#1b332b;
  --ivory:#f4ede0; --ivory-dim:#cdc7b8; --sage:#7f9488; --sage-dim:#546258;
  --gold:#d8b25c; --gold-soft:#a98a3f; --brick:#c8503f;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --font:"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:var(--font); color:var(--ivory);
  background:radial-gradient(120% 90% at 50% 4%, #14261f 0%, var(--felt-1) 46%, var(--felt-0) 100%);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
button{ font-family:inherit; cursor:pointer; color:inherit; border:none; background:none; }

.app{ max-width:960px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }

.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.top__title{ font-size:clamp(17px,2.4vw,22px); font-weight:700; letter-spacing:.02em; }
.top__title span.beta{ font-size:12px; color:#0c130f; background:var(--gold); padding:2px 8px; border-radius:100px; margin-left:6px; vertical-align:middle; }

.disclaimer{
  font-size:12.5px; color:var(--ivory-dim); line-height:1.6;
  background:rgba(216,178,92,.08); border:1px solid rgba(216,178,92,.28);
  border-radius:var(--r-sm); padding:10px 12px;
}
.disclaimer b{ color:var(--gold); }

/* コントロール */
.controls{ display:flex; flex-direction:column; gap:10px; }
.ctrl-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ctrl-label{ font-size:12px; color:var(--sage); min-width:72px; }
.segrp{ display:flex; gap:6px; }
.segrp.wrap{ flex-wrap:wrap; }
.chip{
  padding:7px 12px; border-radius:100px; font-size:13px; font-weight:600;
  background:var(--felt-2); border:1px solid var(--felt-3); color:var(--ivory-dim);
  transition:.15s; white-space:nowrap;
}
.chip:hover{ border-color:var(--gold-soft); }
.chip.is-on{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; border-color:transparent; }
.mode-note{ font-size:12.5px; color:var(--sage); }

/* 盤面 */
.board{ display:flex; gap:16px; align-items:flex-start; }
.grid-wrap{ flex:1 1 auto; min-width:0; }
.legend{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.legend__item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ivory-dim); }
.legend__item i{ width:14px; height:14px; border-radius:4px; display:inline-block; }

.grid{
  display:grid; grid-template-columns:repeat(13,1fr); gap:2px;
  width:100%; max-width:560px;
}
.cell{
  aspect-ratio:1/1; border-radius:3px;
  font-size:clamp(7px,1.5vw,12px); font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.25); transition:.05s;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}
.cell[data-suit="p"]{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); }
.cell.is-sel{ outline:2px solid var(--ivory); outline-offset:1px; z-index:1; }
.cell:hover{ filter:brightness(1.12); }

/* 推奨表示 */
.advice{
  flex:0 0 260px;
  background:var(--felt-2); border:1px solid var(--felt-3); border-radius:var(--r-md);
  padding:18px; min-height:150px;
  display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.advice__hint{ color:var(--sage); font-size:13px; }
.advice__cards{ display:flex; gap:8px; }
.card{ width:44px; height:62px; border-radius:6px; background:#f4ede0; color:#141414; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.4); border:1px solid rgba(0,0,0,.25); }
.card--red{ color:#c8341f; }
.card__r{ font-size:23px; font-weight:800; line-height:1; }
.card__s{ font-size:19px; line-height:1; }
.advice__hand{ font-size:34px; font-weight:800; letter-spacing:.03em; }
.advice__act{ font-size:22px; font-weight:800; }
.fbars{ display:flex; flex-direction:column; gap:6px; }
.fbar{ display:grid; grid-template-columns:96px 1fr 42px; align-items:center; gap:8px; font-size:12px; color:var(--ivory-dim); }
.fbar__track{ height:12px; background:rgba(0,0,0,.35); border-radius:100px; overflow:hidden; border:1px solid var(--felt-3); }
.fbar__track i{ display:block; height:100%; border-radius:100px; }
.fbar__p{ text-align:right; font-weight:700; color:var(--ivory); }
.advice__size{ font-size:12px; color:var(--gold); line-height:1.55; }
.advice__meta{ font-size:12px; color:var(--sage); }

/* 編集バー */
.editbar{
  background:rgba(0,0,0,.2); border:1px solid var(--felt-3); border-radius:var(--r-sm);
  padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.editbar__hint{ font-size:12px; color:var(--sage); }
.editbar__btns{ display:flex; gap:8px; flex-wrap:wrap; }

.btn{ padding:8px 14px; border-radius:var(--r-sm); font-size:13px; font-weight:600; transition:.15s; }
.btn--ghost{ background:var(--felt-2); border:1px solid var(--felt-3); color:var(--ivory-dim); }
.btn--ghost:hover{ border-color:var(--gold-soft); }
.btn--ghost.is-on{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; border-color:transparent; }

.foot{ font-size:11.5px; color:var(--sage-dim); text-align:center; padding:8px 0 2px; }

/* スタート画面 */
.gate{ position:fixed; inset:0; z-index:50; background:radial-gradient(80% 70% at 50% 40%, #14261f, var(--felt-0)); display:grid; place-items:center; transition:opacity .3s; }
.gate.is-hidden{ opacity:0; pointer-events:none; }
.gate__inner{ text-align:center; display:grid; gap:10px; padding:24px; max-width:420px; }
.gate__title{ font-size:26px; font-weight:800; }
.gate__sub{ color:var(--gold); letter-spacing:.2em; font-size:13px; }
.gate__desc{ color:var(--ivory-dim); font-size:14px; line-height:1.7; }
.gate__btn{ margin-top:8px; justify-self:center; padding:.7em 2.2em; border-radius:100px; background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; font-weight:800; font-size:18px; }
.gate__btn:hover{ filter:brightness(1.08); }

[hidden]{ display:none !important; }

/* 入力モード・円形テーブル */
#tableControls{ display:flex; flex-direction:column; gap:10px; }
.table-help{ font-size:12px; color:var(--sage); line-height:1.55; }
.table-help b{ color:var(--gold); }
.palette{ display:flex; flex-wrap:wrap; gap:6px; }
.seat-tool{ font-size:12px; }
.table-el{ position:relative; width:100%; max-width:460px; aspect-ratio:16/11; margin:4px auto; }
.table-felt{ position:absolute; inset:12% 8%; border-radius:50%; background:radial-gradient(circle at 50% 40%, #17352a, #0f241c); border:6px solid #23150e; box-shadow:inset 0 0 40px rgba(0,0,0,.5); display:grid; place-items:center; }
.table-felt__c{ color:var(--sage-dim); font-weight:700; letter-spacing:.12em; font-size:14px; }
.seat{ position:absolute; transform:translate(-50%,-50%); width:clamp(46px,12.5vw,62px); height:clamp(46px,12.5vw,62px); border-radius:50%; background:var(--felt-3); border:2px solid rgba(0,0,0,.35); color:var(--ivory); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-weight:700; box-shadow:0 3px 8px rgba(0,0,0,.4); transition:.1s; }
.seat__pos{ font-size:clamp(10px,2.4vw,13px); }
.seat__act{ font-size:clamp(8px,2vw,10px); font-weight:600; opacity:.95; }
.seat.st-hero{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3),0 3px 10px rgba(0,0,0,.5); }
.seat.st-open{ background:#c9563f; }
.seat.st-call{ background:#3a9d6a; }
.seat.st-threebet{ background:#e07b39; color:#0c130f; }
.seat.st-fourbet{ background:#b0442e; }
.seat.st-fold{ background:#28322c; color:var(--sage-dim); opacity:.72; }
.seat:hover{ filter:brightness(1.1); }
.table-summary{ text-align:center; font-size:13px; color:var(--ivory-dim); }
.table-summary b{ color:var(--gold); }

/* 意見フォーム */
.btn--primary{ background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#0c130f; border:none; }
.btn--primary:hover{ filter:brightness(1.06); }
.feedback{ background:var(--felt-2); border:1px solid var(--felt-3); border-radius:var(--r-md); padding:16px; display:flex; flex-direction:column; gap:10px; }
.fb__title{ font-size:15px; font-weight:700; color:var(--gold); }
.fb__note{ font-size:12px; color:var(--sage); line-height:1.6; }
.fb__note b{ color:var(--ivory-dim); }
.fb__text{ width:100%; background:var(--felt-1); border:1px solid var(--felt-3); border-radius:var(--r-sm); color:var(--ivory); padding:10px; font-family:inherit; font-size:14px; resize:vertical; }
.fb__actions{ display:flex; }
.fb__list{ display:flex; flex-direction:column; gap:8px; }
.fbitem{ background:var(--felt-1); border:1px solid var(--felt-3); border-radius:var(--r-sm); padding:10px 12px; }
.fbitem__t{ font-size:13px; color:var(--ivory); white-space:pre-wrap; }
.fbitem__b{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--sage-dim); }
.rowbtn{ background:var(--felt-3); color:var(--sage); border-radius:6px; padding:3px 10px; font-size:11px; }
.rowbtn:hover{ background:var(--brick); color:#fff; }

/* レスポンシブ：狭い画面は縦積み */
@media (max-width:720px){
  .board{ flex-direction:column; }
  .advice{ flex:1 1 auto; width:100%; min-height:120px; }
  .grid{ max-width:none; }
  .ctrl-label{ min-width:auto; width:100%; }
}