* { 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:#10162b; color:#fff; overflow:hidden; width:100vw; height:100vh;
}
.screen { position:fixed; inset:0; display:none; justify-content:center; align-items:center; }
.screen.active { display:flex; }

/* ===== ボタン共通 ===== */
.btn-big {
  padding:16px 50px; font-size:clamp(1.1rem,3.5vw,1.6rem); border:none; border-radius:50px;
  background:linear-gradient(135deg,#f7971e,#ffd200); color:#333; font-weight:bold; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,200,0,.4); transition:transform .1s; margin-top:10px;
}
.btn-big:active { transform:scale(.95); }
.btn-small {
  margin-top:12px; padding:10px 26px; font-size:1rem; border:2px solid #8fb7e0; border-radius:50px;
  background:transparent; color:#8fb7e0; cursor:pointer;
}

/* ===== 設定画面 ===== */
#screen-setup { background:linear-gradient(135deg,#10162b,#1b2a4a); overflow-y:auto; }
.setup-box { text-align:center; padding:30px 20px; max-width:560px; width:100%; }
.setup-box h1 { font-size:clamp(1.6rem,5vw,2.6rem); margin-bottom:24px; color:#ffd200; }
.setup-section { margin-bottom:22px; }
.setup-section h3 { font-size:1.1rem; margin-bottom:10px; color:#aad4f5; }
.opt-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.opt-btn {
  padding:12px 20px; border-radius:16px; border:2px solid #3a4d72; background:#1c2b48; color:#fff;
  font-size:1.05rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:all .15s;
}
.opt-btn small { font-size:.7rem; color:#8fb7e0; }
.opt-btn.selected { border-color:#ffd200; background:#2e3f63; box-shadow:0 0 12px rgba(255,210,0,.5); }
#name-inputs { display:flex; flex-direction:column; gap:8px; align-items:center; }
.name-input {
  padding:10px 16px; border-radius:12px; border:2px solid #3a4d72; background:#0e1424; color:#fff;
  font-size:1.05rem; width:240px; text-align:center;
}
.name-input:focus { outline:none; border-color:#ffd200; }

/* ===== 特典演出 ===== */
#screen-intro { background:radial-gradient(circle at 50% 30%,#26315c,#0d1226); }
.intro-box { text-align:center; padding:30px 20px; animation:fadeUp .5s; }
.intro-box h2 { font-size:clamp(1.6rem,5vw,2.4rem); color:#ffd200; margin-bottom:6px; }
.intro-sub { color:#cce4ff; margin-bottom:20px; }
#intro-cards { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.intro-card {
  width:130px; background:#1c2b48; border-radius:16px; padding:12px; border:2px solid #3a4d72;
  display:flex; flex-direction:column; align-items:center; gap:8px; animation:popIn .4s backwards;
}
.intro-card img { width:80px; height:80px; object-fit:contain; background:#0e1424; border-radius:12px; }
.intro-card .badge { font-size:1.4rem; font-weight:bold; }
.intro-card .eff { font-size:.82rem; line-height:1.3; color:#cce4ff; }
.intro-card.plus { border-color:#4ade80; } .intro-card.plus .badge { color:#4ade80; }
.intro-card.plus2 { border-color:#34d399; } .intro-card.plus2 .badge { color:#34d399; }
.intro-card.skip { border-color:#60a5fa; } .intro-card.skip .badge { color:#60a5fa; }
.intro-card.all  { border-color:#fbbf24; } .intro-card.all  .badge { color:#fbbf24; }
.intro-secret { color:#ff9e9e; margin-bottom:16px; font-size:1.05rem; }

/* ===== ゲーム画面 ===== */
#screen-game { background:#0e1424; }
#center-area {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:64px 64px; gap:10px;
}
#turn-banner {
  font-size:clamp(1rem,3vw,1.4rem); font-weight:bold; color:#ffd200; min-height:1.6em;
  text-shadow:0 0 10px rgba(255,210,0,.6);
}
#board {
  position:relative; margin:auto;
}
.card {
  position:absolute; aspect-ratio:3/4; cursor:pointer; perspective:600px;
  transition:opacity .2s, box-shadow .2s;
  --rot:0deg;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.card:hover { z-index:2000 !important; }
.card-inner {
  position:absolute; inset:0; transform-style:preserve-3d; transition:transform .35s;
  border-radius:8px;
}
.card.flipped .card-inner, .card.matched .card-inner { transform:rotateY(180deg); }
.card-face {
  position:absolute; inset:0; backface-visibility:hidden; border-radius:8px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card-back {
  background:linear-gradient(135deg,#3b5cccc,#5b3bcc); background:linear-gradient(135deg,#3b5ccc,#7c3bcc);
  border:2px solid #9fb3ff;
}
.card-num {
  font-size:1.5rem; color:#fff; font-weight:bold;
  text-shadow:0 1px 3px rgba(0,0,0,.6); opacity:.95;
  font-family:'Arial Black','Arial',sans-serif;
}
.card-front {
  transform:rotateY(180deg); background:#fff; border:2px solid #ffd200;
}
.card-front img { width:100%; height:100%; object-fit:contain; padding:4px; }
.card.matched { animation:matchedPop .5s; pointer-events:none; }
.card.matched .card-inner { box-shadow:0 0 14px gold; }
.card.locked { pointer-events:none; }

/* 回転角(--rot)を保ったまま拡大する */
@keyframes matchedPop {
  0%{transform:rotate(var(--rot)) scale(1);}
  50%{transform:rotate(var(--rot)) scale(1.18);}
  100%{transform:rotate(var(--rot)) scale(1);}
}

/* アクションバー */
#action-bar { display:flex; gap:12px; margin-top:6px; }
.action-btn {
  padding:10px 22px; border-radius:40px; border:2px solid #8fb7e0; background:#1c2b48; color:#fff;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; gap:4px;
}
.action-btn:disabled { opacity:.35; cursor:default; }
.action-btn small { font-size:.75rem; color:#ffd200; }
#btn-skip { border-color:#60a5fa; }

/* ===== 四方のプレイヤー名 ===== */
.pname {
  position:absolute; z-index:20; padding:8px 18px; border-radius:14px;
  background:rgba(255,255,255,.08); border:2px solid transparent; color:#9fb0c8;
  font-size:clamp(.9rem,2.5vw,1.2rem); font-weight:bold; transition:all .25s;
  display:none; align-items:center; gap:8px; white-space:nowrap;
}
.pname.show { display:flex; }
.pname .score { font-size:.85em; color:#ffd200; }
.pname-bottom { bottom:10px; left:50%; transform:translateX(-50%); }
.pname-top    { top:10px;    left:50%; transform:translateX(-50%); }
.pname-left   { left:10px;   top:50%;  transform:translateY(-50%) rotate(0deg); }
.pname-right  { right:10px;  top:50%;  transform:translateY(-50%) rotate(0deg); }
/* 手番の人＝点灯 */
.pname.active {
  background:linear-gradient(135deg,#f7971e,#ffd200); color:#222; border-color:#fff;
  box-shadow:0 0 22px rgba(255,210,0,.8); transform-origin:center;
}
.pname-bottom.active { transform:translateX(-50%) scale(1.12); }
.pname-top.active    { transform:translateX(-50%) scale(1.12); }
.pname-left.active   { transform:translateY(-50%) scale(1.12); }
.pname-right.active  { transform:translateY(-50%) scale(1.12); }
.pname.active .score { color:#a8350a; }
/* 暗転中の人 */
.pname.dim { opacity:.4; filter:grayscale(.6); }
.pname.skipped { border-color:#ff6b6b; }

/* ===== めくったカードの大きい表示 ===== */
#flip-preview {
  position:fixed; top:12px; left:50%; transform:translateX(-50%) scale(.9);
  display:flex; gap:14px; z-index:5000; pointer-events:none; opacity:0;
  transition:opacity .2s, transform .2s;
}
#flip-preview.show { opacity:1; transform:translateX(-50%) scale(1); }
.pv-card {
  position:relative; background:#fff; border:3px solid #ffd200; border-radius:14px;
  padding:6px; box-shadow:0 8px 26px rgba(0,0,0,.6); animation:pvPop .25s;
}
.pv-card img { height:min(24vh,180px); width:auto; object-fit:contain; display:block; }
.pv-num {
  position:absolute; top:-10px; left:-10px; background:#5b3bcc; color:#fff;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:.95rem; border:2px solid #fff;
}
@keyframes pvPop { from{transform:scale(.6);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ===== 次のプレイヤーへ画面 ===== */
#pass-screen {
  position:fixed; inset:0; z-index:5500; background:rgba(8,12,24,.92);
  display:none; justify-content:center; align-items:center;
}
#pass-screen.show { display:flex; animation:fadeUp .3s; }
.pass-inner { text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; padding:30px; }
#pass-msg { font-size:clamp(1.3rem,4vw,2rem); font-weight:bold; color:#ff9e9e; }
#pass-cards { display:flex; gap:20px; justify-content:center; }
#pass-cards .pv-card { animation:pvPop .35s backwards; }
#pass-cards .pv-card:nth-child(2){ animation-delay:.12s; }
#pass-cards .pv-card img { height:min(34vh,260px); }

/* ===== トースト ===== */
#toast {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  background:rgba(0,0,0,.85); color:#fff; padding:20px 36px; border-radius:20px;
  font-size:clamp(1.2rem,4vw,2rem); font-weight:bold; z-index:300; opacity:0; pointer-events:none;
  text-align:center; line-height:1.4; border:3px solid #ffd200;
}
#toast.show { animation:toastPop 1.6s forwards; }
@keyframes toastPop {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}
  30%{transform:translate(-50%,-50%) scale(1);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1);}
}

/* ===== Cカード公開 ===== */
#screen-creveal { background:radial-gradient(circle at 50% 35%,#3a1530,#160a18); }
.creveal-box { text-align:center; padding:30px 20px; animation:fadeUp .5s; }
.creveal-box h2 { font-size:clamp(1.6rem,5vw,2.4rem); color:#ff8fb0; margin-bottom:20px; }
#creveal-card {
  width:140px; height:186px; margin:0 auto 18px; background:#fff; border-radius:14px;
  border:3px solid #ff6b6b; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 26px rgba(255,80,80,.6); animation:popIn .5s .2s backwards;
}
#creveal-card img { width:100%; height:100%; object-fit:contain; padding:6px; }
#creveal-text { font-size:clamp(1rem,3vw,1.3rem); color:#ffd9e2; line-height:1.6; margin-bottom:20px; }

/* ===== 結果はっぴょう ===== */
#screen-reveal { background:radial-gradient(circle at 50% 40%,#16213e,#0a0f1f); }
#reveal-center {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  padding:0; gap:0;
}
#reveal-title {
  flex:0 0 auto; font-size:clamp(1.2rem,3.5vw,1.8rem); font-weight:bold; color:#ffd200;
  text-shadow:0 0 12px rgba(255,210,0,.6); padding:14px 10px 8px; text-align:center;
}
#reveal-columns {
  flex:1 1 auto; width:100%; overflow-y:auto;
  display:flex; gap:14px; justify-content:center; align-items:flex-start;
  flex-wrap:nowrap; padding:6px 14px 14px;
}
.reveal-col {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.05); border-radius:16px; padding:0 10px 12px;
  border:2px solid #3a4d72; transition:opacity .3s, filter .3s;
  align-self:stretch;
}
.reveal-col.done { opacity:.4; filter:grayscale(.6); }
.rc-head {
  position:sticky; top:0; z-index:5; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:linear-gradient(#16213e 70%, rgba(22,33,62,0)); padding:10px 6px 8px; width:100%;
}
.rc-name { font-size:1rem; font-weight:bold; color:#fff; white-space:nowrap; }
.rc-score {
  font-size:1.5rem; font-weight:bold; color:#ffd200; display:inline-block;
  transition:transform .2s;
}
/* ペアを横並びグリッドにして縦に伸びすぎないように */
.rc-stack { display:grid; grid-template-columns:repeat(2, auto); gap:5px; justify-content:center; }
.tray-pair {
  display:flex; gap:2px; padding:3px; background:rgba(255,255,255,.06); border-radius:7px;
  animation:trayIn .4s; border:2px solid transparent;
}
.tray-pair img {
  width:32px; height:43px; object-fit:contain; background:#fff; border-radius:4px;
}
#btn-to-ranking { flex:0 0 auto; margin:10px 0 18px; }
.tray-pair.fx-bonus { border-color:#4ade80; box-shadow:0 0 16px rgba(74,222,128,.7); animation:trayIn .4s, fxPulse .6s 2; }
.tray-pair.fx-all   { border-color:#fbbf24; box-shadow:0 0 16px rgba(251,191,36,.7); animation:trayIn .4s, fxPulse .6s 2; }
.tray-pair.fx-minus { border-color:#ff5252; box-shadow:0 0 16px rgba(255,80,80,.8); animation:trayIn .4s, fxShake .4s 2; }
@keyframes trayIn { from{opacity:0;transform:scale(.5) translateY(-20px);} to{opacity:1;transform:scale(1);} }
@keyframes fxPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
@keyframes fxShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

#reveal-toast {
  position:absolute; top:18%; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.85); border:3px solid #ffd200; border-radius:18px;
  padding:14px 30px; font-size:clamp(1.1rem,3.5vw,1.7rem); font-weight:bold; color:#fff;
  opacity:0; z-index:300; pointer-events:none; text-align:center;
}
#reveal-toast.show { animation:toastPop 1.4s forwards; }

/* ===== 結果画面 ===== */
#screen-result { background:radial-gradient(circle at 50% 35%,#1e3c72,#0c1322); overflow-y:auto; }
.result-box { text-align:center; padding:30px 20px; width:100%; max-width:520px; }
.result-box h2 { font-size:clamp(1.6rem,5vw,2.4rem); color:#ffd200; margin-bottom:20px; }
#result-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.result-row {
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:14px;
  background:rgba(255,255,255,.08); font-size:1.1rem; animation:fadeUp .4s backwards;
}
.result-row .rank { font-size:1.5rem; width:1.8em; }
.result-row .rname { flex:1; text-align:left; font-weight:bold; }
.result-row .rpts { font-size:1.3rem; color:#ffd200; font-weight:bold; }
.result-row .rdetail { font-size:.78rem; color:#9fb0c8; }
.result-row.win { border:2px solid #ffd200; box-shadow:0 0 18px rgba(255,210,0,.5); }
.secret-tag { font-size:.72rem; color:#ff6b6b; }

/* ===== スキップモーダル ===== */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:400;
  display:none; justify-content:center; align-items:center;
}
.modal.show { display:flex; }
.modal-inner {
  background:#1c2b48; border-radius:20px; padding:28px; text-align:center; max-width:90vw;
  border:2px solid #60a5fa;
}
.modal-inner h3 { margin-bottom:16px; color:#fff; }
#skip-targets { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.skip-target-btn {
  padding:12px 24px; border-radius:12px; border:2px solid #60a5fa; background:#0e1424; color:#fff;
  font-size:1.1rem; cursor:pointer;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes popIn { from{opacity:0;transform:scale(.7);} to{opacity:1;transform:scale(1);} }