/* うたげじっけん室 共通スタイル — 暗い部屋のテーブルの上で映える高コントラスト。
   各アプリは :root で --u-accent を上書きし、固有の署名スタイルを重ねる */
:root{
  --u-bg:#14121A; --u-panel:#201D29; --u-text:#F4F1EA; --u-sub:#9A94A6;
  --u-accent:#FFC53D; --u-danger:#FF5A5A; --u-ok:#69DB7C;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  background:var(--u-bg);color:var(--u-text);min-height:100dvh;
  overflow-x:hidden;line-height:1.6;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  /* iOS は長押しで拡大鏡（loupe）とコールアウトを出す。ちんちろのチャージの
     ように長押しが操作になっているゲームで邪魔になるので、まとめて止める。
     入力欄だけは下で戻す */
  -webkit-touch-callout:none;
}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* 長押しが操作のボタンは、iOS のスクロール・ズーム判定に持っていかれないようにする */
button{touch-action:manipulation}
/* 上の余白にもセーフエリアを足す。左上「もどる」と右上のピルは
   top:calc(10px + env(safe-area-inset-top)) で実機では59px下がるのに、
   中身だけ24px固定だと、ノッチのある端末でだけボタンが中身に食い込む
   （ぐるりでジャンルのピルが隠れて発覚）。上下を同じ基準にそろえる */
.u-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;
  padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  text-align:center}
/* 奥行き。上方からの光と四隅の落ちで、平らな単色を「部屋」にする。
   固有の背景を持つゲーム（さいころとーく等）が body を上書きしても効くよう
   別レイヤーに重ねる。z-index:-1 で内容の後ろ、body の背景の前に入る。 */
.u-screen::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(100% 85% at 50% 52%, transparent 40%, rgba(0,0,0,.45));
}
/* カメラ。決着の瞬間に画面ごと寄る・揺れる・光る。
   transform は .u-screen にだけ掛ける。モーダルと戻るボタンは body 直下にあるので
   position:fixed の基準がずれる心配がない。 */
.u-screen{transform-origin:50% 45%}
.u-screen.u-cam-push{animation:u-cam-push .42s cubic-bezier(.2,1.5,.35,1)}
@keyframes u-cam-push{
  0%{transform:scale(1)}
  22%{transform:scale(1.045)}
  100%{transform:scale(1)}
}
.u-screen.u-cam-shake{animation:u-cam-shake .34s cubic-bezier(.3,.9,.4,1)}
@keyframes u-cam-shake{
  0%,100%{transform:translate3d(0,0,0)}
  18%{transform:translate3d(-7px,2px,0) rotate(-.5deg)}
  38%{transform:translate3d(6px,-3px,0) rotate(.4deg)}
  58%{transform:translate3d(-4px,2px,0) rotate(-.25deg)}
  80%{transform:translate3d(3px,-1px,0)}
}
/* 閃光。決着を「見えた」ことにする1枚。
   基準の opacity は 0 にする。reduced-motion で animation が無効化されたとき、
   既定の 1 だと色膜がベタッと出て「動きを減らす」の逆になる */
.u-flash{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;
  animation:u-flash .34s ease-out forwards;
}
@keyframes u-flash{from{opacity:.85}to{opacity:0}}
.u-title{font-size:12px;font-weight:600;color:var(--u-sub);letter-spacing:.45em;text-indent:.45em}
.u-big{
  font-size:clamp(34px,11vw,72px);font-weight:800;line-height:1.25;overflow-wrap:anywhere;
  text-shadow:0 2px 0 rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.5);
}
.u-btn{
  display:block;width:min(86vw,420px);padding:16px 18px;border:0;border-radius:16px;
  /* 上を明るく下を暗くして、平らな単色ではなく面として見せる */
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.06)), var(--u-accent);
  color:#1A1408;font-size:17px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;transition:transform .07s ease, box-shadow .07s ease;
  /* すいっちの .sw と同じ「厚み＋落ち影」。押すと沈む */
  box-shadow:0 5px 0 rgba(0,0,0,.32), 0 12px 22px rgba(0,0,0,.34);
  /* a要素にも当てるので、中央寄せと下線消しを持たせる（buttonには影響しない） */
  text-align:center;text-decoration:none;
}
.u-btn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.3);
}
.u-btn-sub{
  display:block;width:min(86vw,420px);padding:12px;border:1px solid #ffffff2e;border-radius:14px;
  background:rgba(255,255,255,.04);color:var(--u-text);font-size:14px;cursor:pointer;
  transition:transform .07s ease, background .12s ease;
}
.u-btn-sub:active{transform:translateY(2px);background:rgba(255,255,255,.1)}
/* シートはふわっと出す。あそびかた・ペナルティ・モード選択・なまえ入力・
   戻る確認がすべてこの部品なので、ここだけで手触りが大きく変わる */
@keyframes u-veil-in{from{opacity:0}to{opacity:1}}
@keyframes u-card-in{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
.u-modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,14,.82);backdrop-filter:blur(4px);padding:20px;
  animation:u-veil-in .16s ease both;
}
.u-modal-card{
  width:min(92vw,440px);border-radius:20px;padding:26px 20px;
  /* 人数を増やしてもボタンが画面外に出ないように。中身が伸びたらカード内でスクロール */
  max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:12px;align-items:center;
  /* 上端に光を置いて、板ではなく浮いたカードに見せる */
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%), var(--u-panel);
  border:1px solid #ffffff1f;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset;
  animation:u-card-in .26s cubic-bezier(.2,.9,.25,1) both;
}
.u-modal-name{font-size:20px;font-weight:800;color:var(--u-accent)}
/* 2回目からだけ出す。責める見せ方にしないよう、名前より小さく静かに置く */
.u-penalty-nth{font-size:12px;color:var(--u-sub);letter-spacing:.08em;margin-top:-6px}
.u-modal-title{font-size:14px;color:var(--u-sub)}
.u-task{
  font-size:19px;font-weight:700;line-height:1.5;padding:14px 6px;
  overflow-wrap:anywhere;color:var(--u-text);
}
.u-mode-hint{display:block;font-size:12px;font-weight:600;opacity:.7;margin-top:4px}
/* あそびかたは複数文になりうるので、u-task と違い左寄せで読ませる */
.u-rule{
  font-size:16px;line-height:1.7;text-align:left;padding:4px 4px 8px;
  overflow-wrap:anywhere;color:var(--u-text);
}
.u-skip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--u-sub);cursor:pointer}
.u-skip input{width:18px;height:18px;accent-color:var(--u-accent);flex:none}
/* 画面の隅のピル。左上=メニューへ戻る、右上=あそびかた・メンバー変更。
   z-index はモーダル（50）より上にして、なまえ入力やあそびかたの
   途中でも抜けられるようにする */
.u-corner-r{
  position:fixed;z-index:60;
  top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));
  display:flex;gap:8px;
}
.u-back,.u-members,.u-rules-btn{
  border:0;border-radius:999px;padding:10px 14px;
  background:#ffffff14;color:var(--u-sub);
  font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;
  cursor:pointer;
}
.u-back{
  position:fixed;z-index:60;
  top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));
}
/* 並び順は呼び出し順に依存させない。メンバーが常に右端 */
.u-rules-btn{order:1}
.u-members{order:2}
.u-back:active,.u-members:active,.u-rules-btn:active{background:#ffffff2e}
.u-back[hidden]{display:none}
.u-players-note{font-size:12px;color:var(--u-sub);line-height:1.6}
/* 名前の一覧はここだけスクロールさせ、「はじめる」は常に見えるまま */
.u-players{display:flex;flex-direction:column;gap:8px;width:100%;
  max-height:38dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:none}
.u-player-input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #ffffff24;
  background:#171420;color:var(--u-text);font-size:16px;
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}