:root{
  --felt:#16613a; --felt2:#0f4a2c;
  --ink:#12212b; --panel:#ffffff; --line:#d5dde4; --muted:#6b7783;
  --accent:#1f6feb; --accent-d:#1858c4; --gold:#e9b949; --red:#d0342c; --black:#1a1a1a;
  --shadow:0 6px 18px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,"Segoe UI","Yu Gothic UI",Meiryo,sans-serif;
  color:var(--ink); background:#0c2b1c;
  -webkit-user-select:none; user-select:none;
}
.hidden{display:none !important}
.screen{min-height:100%}

/* ---------- 開始画面 ---------- */
#startScreen{
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #1c7a49, #0c2b1c);
}
.start-card{
  background:var(--panel); border-radius:18px; padding:28px 26px; width:min(440px,94vw);
  box-shadow:var(--shadow);
}
.start-card h1{margin:0 0 4px; font-size:1.8rem}
.start-card h1 small{font-size:.9rem; color:var(--muted); font-weight:600}
.lead{color:var(--muted); margin:0 0 18px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0}
.row span{font-weight:600}
select{font-size:1rem; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; min-width:130px}
.note{font-size:.85rem; color:var(--muted); min-height:1.2em; margin:4px 0 0}
button{font-family:inherit; cursor:pointer; border:none; border-radius:10px; font-size:1rem; font-weight:700}
button:disabled{opacity:.45; cursor:not-allowed}
.primary{background:var(--accent); color:#fff; padding:11px 18px}
.primary:hover:not(:disabled){background:var(--accent-d)}
.big{width:100%; margin-top:16px; padding:14px; font-size:1.1rem}
.ghost{background:#eef2f6; color:var(--ink); padding:10px 16px}
.ghost:hover{background:#e2e8ef}
.rulelink{text-align:center; margin:16px 0 0}
.rulelink a{color:var(--accent); text-decoration:none; font-size:.9rem}

/* ---------- ゲーム画面 ---------- */
#gameScreen{display:flex; flex-direction:column; height:100vh; background:linear-gradient(180deg,#1a6e42,#0f4a2c)}
#topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:rgba(0,0,0,.22); color:#fff}
.topctrl{display:flex; align-items:center; gap:12px; flex-shrink:0}
.topctrl .ctrl{display:flex; align-items:center; gap:5px; font-size:.8rem; font-weight:700; color:#e8f2ec; cursor:pointer}
.topctrl .ctrl select{font-size:.8rem; padding:3px 6px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink)}
.topctrl .ctrl input[type=checkbox]{width:16px; height:16px; cursor:pointer}
.status{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(255,255,255,.16)}
.chip.clickable{cursor:pointer}
.chip.clickable:hover{background:rgba(255,255,255,.32)}
.chip.hot{background:var(--gold); color:#3a2c00}
.chip.rev{background:#c0392b}
.chip.eb{background:#8e44ad}
.chip.lock{background:#2c3e50}

#opponents{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:10px; align-content:flex-start}
.opp{background:rgba(255,255,255,.10); border-radius:12px; padding:8px 10px; min-width:132px; color:#fff; position:relative}
.opp.turn{outline:3px solid var(--gold); background:rgba(255,255,255,.18)}
.opp.done{opacity:.55}
.opp-head{display:flex; align-items:center; gap:6px; margin-bottom:6px}
.opp-name{font-weight:700; font-size:.92rem}
.opp-count{margin-left:auto; font-size:.8rem; background:rgba(0,0,0,.28); padding:1px 8px; border-radius:99px}
.opp-mini{display:flex; gap:2px; flex-wrap:wrap; min-height:22px}
.opp-say{font-size:.75rem; min-height:1.1em; color:#ffe9a8; margin-top:4px}
.badge{font-size:.68rem; font-weight:800; padding:1px 7px; border-radius:6px}
.b-daifugo{background:var(--gold); color:#3a2c00}
.b-fugo{background:#bfe3c9; color:#0f4a2c}
.b-heimin{background:#dfe6ec; color:#333}
.b-hinmin{background:#f3c6a5; color:#5a2a00}
.b-daihinmin{background:#e0796b; color:#3a0000}

#center{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:6px}
#fieldArea{background:rgba(0,0,0,.16); border-radius:16px; padding:14px 20px; min-width:180px; min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px}
.field-label{color:#dff3e6; font-size:.85rem; letter-spacing:.06em}
.field-label b{color:#fff}
.field-label.mine b{color:var(--gold)}
/* 場に出た瞬間のドロップ演出 */
@keyframes dropIn{0%{transform:translateY(-26px) scale(.8); opacity:.2}70%{transform:translateY(3px) scale(1.05)}100%{transform:translateY(0) scale(1); opacity:1}}
#fieldCards .card.drop{animation:dropIn .28s ease-out}
#fieldCards .card.byme{outline:3px solid var(--gold)}
/* 新しく手に入ったカードの強調 */
@keyframes newGlow{0%{box-shadow:0 0 0 3px var(--gold),0 0 14px 3px rgba(233,185,73,.9)}100%{box-shadow:0 0 0 3px var(--gold),0 0 4px 1px rgba(233,185,73,.4)}}
.hand .card.newcard{outline:3px solid var(--gold); animation:newGlow .7s ease-in-out infinite alternate; z-index:2}
.hand .card.newcard::before{content:"NEW"; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#3a2c00; font-size:8px; font-weight:800; padding:1px 5px; border-radius:6px; letter-spacing:.05em}
#turnBanner{color:#fff; font-weight:700; min-height:1.4em; text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* カード */
.cards{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.card{
  width:78px; height:110px; background:#fff; border-radius:11px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; line-height:1; position:relative; border:1px solid #e3e3e3;
}
.card .r{font-size:1.6rem}
.card .s{font-size:1.35rem; margin-top:2px}
.card.red{color:var(--red)} .card.black{color:var(--black)}

/* --- トランプ風フェイス（四隅インデックス＋ピップ配置） --- */
.card .corner{position:absolute; display:flex; flex-direction:column; align-items:center; line-height:.86; font-weight:800}
.card .corner.tl{top:5px; left:5px}
.card .corner.br{bottom:5px; right:5px; transform:rotate(180deg)}
.card .corner .cr{font-size:18px}
.card .corner .cs{font-size:15px}
.card .pips{position:absolute; inset:0}
.card .pip{position:absolute; transform:translate(-50%,-50%); font-size:18px; line-height:1}
.card .pip.flip{transform:translate(-50%,-50%) rotate(180deg)}
.card .court{position:absolute; inset:16% 12%; border:1.5px solid currentColor; border-radius:5px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(0,0,0,.02)}
.card .court .cl{font-size:27px; font-weight:800}
.card .court .cc{font-size:18px}
/* 小サイズ（捨て札一覧など） */
.card.small .corner .cr{font-size:12px} .card.small .corner .cs{font-size:10px}
.card.small .pip{font-size:11px} .card.small .court .cl{font-size:17px} .card.small .court .cc{font-size:12px}

.card.joker{background:linear-gradient(135deg,#fff,#fff5d6)}
.card .joker-face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#b8860b}
.card .joker-face .jstar{font-size:26px; line-height:1}
.card .joker-face .jtext{font-size:9px; font-weight:800; letter-spacing:.12em; margin-top:2px}
.card.small .joker-face .jstar{font-size:20px} .card.small .joker-face .jtext{font-size:8px}
.card.mini{width:22px; height:30px; border-radius:4px; font-size:.62rem; box-shadow:none}
.card.back{background:repeating-linear-gradient(45deg,#2b5fa3,#2b5fa3 5px,#24508c 5px,#24508c 10px); border:1px solid #1d4176}
.card.small{width:52px;height:74px}
.card.small .r{font-size:1.15rem}

/* 手札 */
#me{background:rgba(0,0,0,.28); padding:10px 12px 12px; color:#fff}
#myInfo{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:700}
.hand{gap:8px}
.hand .card{cursor:pointer; transition:transform .08s; width:92px; height:130px}
.hand .card .corner .cr{font-size:21px} .hand .card .corner .cs{font-size:17px}
.hand .card .pip{font-size:21px}
.hand .card .court .cl{font-size:32px} .hand .card .court .cc{font-size:21px}
.hand .card .joker-face .jstar{font-size:34px} .hand .card .joker-face .jtext{font-size:11px}
.hand .card:hover{transform:translateY(-8px)}
.hand .card.sel{transform:translateY(-16px); outline:3px solid var(--gold)}
.hand .card.playable{box-shadow:0 0 0 2px var(--accent), var(--shadow)}
#controls{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.hint{font-size:.85rem; color:#ffd9d0}

/* ログ */
#logPanel{position:fixed; right:8px; bottom:8px; width:min(260px,80vw); max-height:34vh; overflow:auto;
  background:rgba(0,0,0,.55); color:#e8f2ec; border-radius:10px; padding:8px 10px; font-size:.78rem; pointer-events:none}
#logInner div{margin:2px 0; line-height:1.35}
#logPanel .hl{color:#ffe08a}

/* モーダル */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50}
.modal{background:#fff; color:var(--ink); border-radius:16px; padding:22px; width:min(560px,96vw); max-height:90vh; overflow:auto; box-shadow:var(--shadow)}
.modal h2{margin:0 0 6px; font-size:1.3rem}
.modal-desc{color:var(--muted); margin:0 0 14px}
.modal .cards{margin:8px 0 16px}
.modal .card{cursor:pointer}
.modal .card.sel{outline:3px solid var(--gold); transform:translateY(-8px)}
.modal-buttons{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.result-table{width:100%; border-collapse:collapse; margin:6px 0 12px}
.result-table td{padding:6px 8px; border-bottom:1px solid var(--line)}
.result-table th{padding:6px 8px; border-bottom:2px solid var(--line); font-size:.78rem; color:var(--muted); white-space:nowrap}
.result-table.stats td, .result-table.stats th{text-align:center}
.result-table.stats td:first-child, .result-table.stats th:first-child{text-align:left}
.result-table .me{font-weight:800; background:rgba(233,185,73,.14)}
.table-scroll{overflow-x:auto; margin:4px 0 12px}
.modal h3{margin:14px 0 4px; font-size:1rem}

@media (max-width:560px){
  .card{width:56px;height:80px}
  .card .corner .cr{font-size:13px} .card .corner .cs{font-size:11px}
  .card .pip{font-size:13px}
  .card .court .cl{font-size:19px} .card .court .cc{font-size:13px}
  .card .joker-face .jstar{font-size:22px}
  .hand .card{width:62px; height:88px}
  .hand .card .corner .cr{font-size:15px} .hand .card .corner .cs{font-size:12px}
  .hand .card .pip{font-size:15px}
  .hand .card .court .cl{font-size:23px} .hand .card .court .cc{font-size:15px}
  .hand .card .joker-face .jstar{font-size:26px}
  .opp{min-width:112px}
}