* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Hiragino Maru Gothic ProN','BIZ UDPGothic',sans-serif;
  background:linear-gradient(165deg,#fff6e2,#ffe9d6 55%,#e8f0ff);
  color:#4a3b2a; min-height:100vh; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
}
.screen { display:none; padding:12px; max-width:640px; margin:0 auto; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

.title { font-size:1.8rem; text-align:center; color:#e0722f; margin:8px 0 6px; text-shadow:0 2px 0 #fff; }
.lead { text-align:center; color:#8a6c4c; line-height:1.7; margin-bottom:12px; font-size:.95rem; }
.hint { text-align:center; color:#a2795a; font-size:.82rem; margin-top:12px; line-height:1.6; }

.card { background:#fff; border-radius:20px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.1); }
.row-label { font-weight:bold; color:#c2703a; margin:12px 0 8px; font-size:.95rem; }
.row-label:first-child { margin-top:0; }

.opt-row { display:flex; gap:8px; flex-wrap:wrap; }
.opt { flex:1 1 70px; min-width:70px; padding:11px 6px; border:3px solid #f0d6b0; background:#fffaf2;
  border-radius:14px; font-family:inherit; font-size:1rem; font-weight:bold; color:#a2795a; cursor:pointer; }
.opt.on { background:linear-gradient(135deg,#ffcf6b,#ff9f45); border-color:#e08a2a; color:#fff; box-shadow:0 4px 0 #d9791f; }
.opt:active { transform:translateY(2px); }

.big-btn { display:block; width:100%; margin-top:14px; padding:16px; border:none; border-radius:18px;
  font-family:inherit; font-size:1.3rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ffb03a,#ff7e5f); box-shadow:0 6px 0 #d9642f; }
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #d9642f; }
.big-btn.sub { background:linear-gradient(135deg,#c9bda8,#a2937c); box-shadow:0 6px 0 #85765f; font-size:1.05rem; }

/* プレイヤー せってい */
.pset { display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:14px;
  background:#fffaf2; border:2px solid #f0e0c8; margin-bottom:8px; }
.pname { padding:9px 12px; border:2px solid #f0c48a; border-radius:12px; font-family:inherit;
  font-size:1rem; color:#4a3b2a; -webkit-user-select:text; user-select:text; }
.pname:focus { outline:none; border-color:#ffb03a; }
.pchars { display:flex; gap:5px; overflow-x:auto; padding-bottom:4px; }
.pchar { flex:0 0 auto; width:46px; height:46px; border:3px solid #f0e0c8; background:#fff;
  border-radius:12px; padding:2px; cursor:pointer; }
.pchar.on { border-color:#ff9f45; box-shadow:0 0 0 3px #ffe0b8; }
.pchar img { width:100%; height:100%; object-fit:contain; }

/* トップバー */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.back-btn { background:#fff; border:2px solid #f0e0c8; border-radius:12px; padding:7px 12px;
  font-family:inherit; font-weight:bold; color:#a2795a; cursor:pointer; font-size:.85rem; }
.zone-name { font-weight:bold; color:#e0722f; }
.progress { font-size:.8rem; color:#a2795a; }

/* プレイヤー ちっぷ */
.players { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:8px; }
.pchip { flex:0 0 auto; display:flex; align-items:center; gap:5px; background:#fff; border-radius:20px;
  padding:4px 12px 4px 4px; box-shadow:0 3px 8px rgba(0,0,0,.08); border:3px solid transparent; }
.pchip.now { border-color:#ff9f45; box-shadow:0 0 0 3px #ffe0b8; }
.pchip.done { opacity:.55; }
.pchip img { width:30px; height:30px; object-fit:contain; }
.pchip span { font-size:.82rem; font-weight:bold; }
.pchip b { font-size:.82rem; color:#e0722f; }

/* ターン */
.turn-bar { display:flex; align-items:center; gap:10px; background:#fff; border-radius:16px;
  padding:8px 14px; margin-top:8px; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.turn-bar img { width:44px; height:44px; object-fit:contain; }
.turn-txt { display:flex; flex-direction:column; }
.turn-txt b { font-size:1.05rem; color:#e0722f; }
.turn-txt span { font-size:.85rem; color:#a2795a; }

.dice-btn { margin-top:8px; padding:12px; border:none; border-radius:20px; cursor:pointer;
  font-family:inherit; background:linear-gradient(135deg,#ffd85f,#ff9f2a); box-shadow:0 6px 0 #d9791f;
  display:flex; align-items:center; justify-content:center; gap:14px; }
.dice-btn:active:not(:disabled) { transform:translateY(4px); box-shadow:0 2px 0 #d9791f; }
.dice-btn:disabled { filter:grayscale(.6) brightness(.9); cursor:default; }
.dice-face { font-size:2.6rem; line-height:1; }
.dice-label { font-size:1.2rem; font-weight:bold; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.15); }

/* けっか */
.rank-list { list-style:none; counter-reset:r; }
.rank-list li { counter-increment:r; display:flex; align-items:center; gap:10px;
  background:#fffaf2; border-radius:14px; padding:10px 14px; margin-bottom:8px; font-weight:bold; }
.rank-list li::before { content:counter(r) 'い'; color:#e0722f; font-size:1.1rem; min-width:38px; }
.rank-list li img { width:40px; height:40px; object-fit:contain; }

/* まど */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; z-index:80; padding:16px; }
.modal.show { display:flex; }
.modal-box { background:#fff; border-radius:26px; padding:20px; width:min(430px,94vw);
  max-height:92vh; overflow-y:auto; text-align:center; animation:pop .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform:scale(.7); opacity:0; } to { transform:none; opacity:1; } }
.mo-big { font-size:3rem; line-height:1; }
.mo-title { font-size:1.5rem; font-weight:bold; color:#e0722f; margin:6px 0; }
.mo-sub { color:#8a6c4c; font-size:.95rem; line-height:1.6; }
.mo-q { font-size:1.35rem; font-weight:bold; color:#3a5a7a; margin:14px 0 4px; line-height:1.5; }
.mo-quest { margin:12px 0; padding:12px; background:#fffaf2; border-radius:16px; border:3px solid #f0d6b0; }
.mo-quest svg { width:44%; max-width:150px; display:block; margin:0 auto; }
.mo-word { font-size:1.7rem; font-weight:bold; color:#e0722f; margin-top:6px; }
.mo-hint { font-size:.85rem; color:#a2795a; margin-top:2px; }
.mo-note { font-size:.78rem; color:#c0392b; font-weight:bold; }
.mo-btns { display:flex; gap:8px; margin-top:14px; }
.mo-btn { flex:1; padding:13px 8px; border:none; border-radius:14px; font-family:inherit;
  font-size:1rem; font-weight:bold; cursor:pointer; background:#e8e0d0; color:#7a6a55; }
.mo-btn.primary { background:linear-gradient(135deg,#7ed957,#3fa64a); color:#fff; box-shadow:0 4px 0 #2f8038; }
.mo-btn:active { transform:translateY(2px); }

/* キャラあて */
.silhouette { margin:12px auto; width:44%; max-width:150px; }
.silhouette img { width:100%; display:block; filter:brightness(0) opacity(.85); transition:filter .4s; }
.silhouette.reveal img { filter:none; }
.mo-opts { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.mo-opt { border:3px solid #f0e0c8; background:#fffaf2; border-radius:14px; padding:6px;
  font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.mo-opt img { width:56px; height:56px; object-fit:contain; }
.mo-opt span { font-size:.8rem; font-weight:bold; color:#7a6a55; }
.mo-opt.ok { border-color:#3fa64a; background:#eafbe7; }
.mo-opt.ng { border-color:#d9534f; background:#fdecea; animation:shake .4s; }
@keyframes shake { 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

/* トースト */
.toast { position:fixed; left:50%; bottom:22%; transform:translate(-50%,10px); opacity:0;
  background:rgba(0,0,0,.8); color:#fff; font-weight:bold; padding:10px 22px; border-radius:20px;
  pointer-events:none; z-index:90; transition:all .25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* あそぶ画面は 1画面に おさめて、ばんめんだけ スクロールさせる */
#screen-play { height:100dvh; overflow:hidden; }
#screen-play .board-wrap { min-height:0; }

/* =========================================
   マップ
   ========================================= */
.map-wrap { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; border-radius:18px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.12); background:#e8f0ff; }
.map-inner { position:relative; width:100%; }
#map-svg { width:100%; height:100%; display:block; }
.cells, .pieces { position:absolute; inset:0; pointer-events:none; }

.cell { position:absolute; transform:translate(-50%,-50%);
  width:6.4%; aspect-ratio:1; border-radius:50%; background:#fffaf0;
  border:2px solid #d8bf90; box-shadow:0 2px 4px rgba(0,0,0,.2);
  display:flex; align-items:center; justify-content:center; }
.cell .ce { font-size:min(3.4vw,17px); line-height:1; }
.cell .ci { font-size:min(2.1vw,11px); font-weight:bold; color:#a2895f; }
.cell.special { width:8.6%; background:#fff; border-width:3px; }
.c-start { background:#ffe9a8 !important; border-color:#e0a94a !important; }
.c-goal  { background:#ffd0e0 !important; border-color:#e07aa4 !important; width:9.5% !important;
  animation:goalPulse 1.6s ease-in-out infinite; }
@keyframes goalPulse { 50% { box-shadow:0 0 0 6px rgba(224,122,164,.25); } }
.c-go    { border-color:#3fa64a !important; }
.c-back  { border-color:#d9534f !important; }
.c-warp  { border-color:#9b5ac8 !important; }
.c-mini  { border-color:#ff8c28 !important; }
.c-qall, .c-qsolo { border-color:#468cd2 !important; }

/* コマ */
.piece { position:absolute; width:9%; z-index:5;
  transform:translate(calc(-50% + var(--n,0) * 62%), -86%);
  transition:left .22s ease, top .22s ease; }
.piece img { width:100%; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.piece .pnametag { display:none; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  background:rgba(255,255,255,.9); border-radius:8px; padding:0 4px;
  font-size:min(2.2vw,10px); font-weight:bold; color:#5a4a3a; white-space:nowrap; }
.piece.now .pnametag { display:block; }
.piece.now { z-index:9; animation:hop .9s ease-in-out infinite; }
@keyframes hop { 50% { transform:translate(calc(-50% + var(--n,0) * 62%), -106%); } }
.piece.done { opacity:.55; }

/* ロビー */
.lobby-list { display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.lobby-item { display:flex; align-items:center; gap:10px; background:#fffaf2;
  border:3px solid #f0e0c8; border-radius:14px; padding:8px 12px; font-weight:bold; }
.lobby-item.me { border-color:#ff9f45; background:#fff4e4; }
.lobby-item img { width:36px; height:36px; object-fit:contain; }
.lobby-item b { margin-left:auto; font-size:.72rem; color:#e0722f; }
.conn { font-size:.75rem; color:#c0392b; font-weight:bold; }
.conn.on { color:#3fa64a; }
.pname.room { text-align:center; font-size:1.15rem; font-weight:bold; color:#e0722f;
  width:100%; margin-bottom:6px; }

/* あそびかた えらび */
#screen-mode .mode-row { display:flex; gap:10px; margin-top:6px; }
#screen-mode .mode-btn { flex:1; padding:18px 10px; border:3px solid #f0d6b0; background:#fff;
  border-radius:20px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  box-shadow:0 5px 14px rgba(0,0,0,.1); }
#screen-mode .mode-btn:active { transform:translateY(3px); }
#screen-mode .mode-emoji { font-size:2.6rem; }
#screen-mode .mode-name { font-size:1.05rem; font-weight:bold; color:#e0722f; }
#screen-mode .mode-desc { font-size:.75rem; color:#a2795a; text-align:center; line-height:1.4; }

.pchip.me { background:#fff4e4; }
#screen-play { height:100dvh; overflow:hidden; }

/* =========================================
   ルーレット／サイコロ
   ========================================= */
.spinner { position:fixed; inset:0; background:rgba(30,20,10,.62); display:none;
  align-items:center; justify-content:center; z-index:85; padding:16px; }
.spinner.show { display:flex; }
.sp-box { background:#fff; border-radius:28px; padding:20px 18px 18px; width:min(360px,92vw);
  text-align:center; box-shadow:0 14px 34px rgba(0,0,0,.4);
  animation:spPop .38s cubic-bezier(.3,1.5,.5,1); }
@keyframes spPop { from{ transform:scale(.75); opacity:0; } to{ transform:none; opacity:1; } }
.sp-title { font-size:1.15rem; font-weight:bold; color:#e0722f; margin-bottom:10px; }

/* ルーレット */
.wheel-wrap { position:relative; width:min(260px,72vw); aspect-ratio:1; margin:0 auto; }
.wheel { width:100%; height:100%; display:block; border-radius:50%;
  box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 0 0 5px #fff; }
.wheel-pin { position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  font-size:2rem; color:#e0342a; text-shadow:0 2px 4px rgba(0,0,0,.35); z-index:3; line-height:1; }
.wheel-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26%; aspect-ratio:1; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:0 3px 8px rgba(0,0,0,.25); }

/* サイコロ */
.dice-wrap { position:relative; width:min(220px,64vw); aspect-ratio:1; margin:0 auto;
  display:flex; align-items:center; justify-content:center; }
.dice3d { font-size:min(9rem,26vw); line-height:1; color:#4a3b2a;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); transition:transform .12s; }
.dice3d.shaking { animation:diceShake .12s linear infinite; }
@keyframes diceShake {
  0%{ transform:translate(-6px,-3px) rotate(-9deg); }
  25%{ transform:translate(5px,4px) rotate(7deg); }
  50%{ transform:translate(-4px,5px) rotate(-5deg); }
  75%{ transform:translate(6px,-4px) rotate(10deg); }
  100%{ transform:translate(-6px,-3px) rotate(-9deg); }
}
.dice3d.landed { animation:diceLand .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes diceLand { 0%{ transform:scale(1.5) rotate(-14deg);} 100%{ transform:none; } }
.dice-shadow { position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  width:46%; height:12px; background:rgba(0,0,0,.22); border-radius:50%; filter:blur(4px); }

.sp-result { min-height:2.1em; margin-top:10px; font-size:1.15rem; font-weight:bold; color:#8a6c4c; }
.sp-result b { font-size:2.4rem; color:#e0722f; }
.sp-btn { width:100%; margin-top:6px; padding:16px; border:none; border-radius:18px;
  font-family:inherit; font-size:1.35rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ffb03a,#ff7e5f); box-shadow:0 6px 0 #d9642f; touch-action:none; }
.sp-btn:active:not(:disabled) { transform:translateY(4px); box-shadow:0 2px 0 #d9642f; }
.sp-btn:disabled { filter:grayscale(.5) brightness(.92); cursor:default; }

/* マスの なまえ（ひらがな） */
.cell .cname { position:absolute; left:50%; top:100%; transform:translateX(-50%);
  margin-top:2px; background:rgba(255,255,255,.94); border-radius:8px; padding:1px 5px;
  font-size:min(2.3vw,11px); font-weight:bold; color:#5a4a3a; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.22); pointer-events:none; }
.cell .cnum { position:absolute; right:-4px; top:-5px; background:#fff; border-radius:50%;
  min-width:15px; height:15px; display:flex; align-items:center; justify-content:center;
  font-size:min(1.9vw,9px); font-weight:bold; color:#a2895f; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.c-start .cname { background:#ffe9a8; }
.c-goal .cname { background:#ffd0e0; }
.cells { z-index:2; }

/* こたえを うちこむ */
.ans-row { display:flex; gap:8px; margin-top:12px; }
.ans-input { flex:1; padding:12px 14px; border:3px solid #f0c48a; border-radius:14px;
  font-family:inherit; font-size:1.15rem; text-align:center; color:#4a3b2a;
  -webkit-user-select:text; user-select:text; }
.ans-input:focus { outline:none; border-color:#ffb03a; }
.ans-input.ok { border-color:#3fa64a; background:#eafbe7; }
.ans-input.ng { border-color:#d9534f; background:#fdecea; animation:shake .4s; }
.ans-btn { flex:0 0 auto; padding:12px 18px; border:none; border-radius:14px;
  font-family:inherit; font-size:1rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#7ed957,#3fa64a); box-shadow:0 4px 0 #2f8038; }
.ans-btn:active { transform:translateY(2px); box-shadow:0 1px 0 #2f8038; }
.ans-hint { margin-top:8px; font-size:.85rem; color:#a2795a; font-weight:bold; }