/* ノーブル・エステート — ロイヤルサロン調UI（論理解像度 1920×1080） */
:root {
  --ivory: #fffaf2;
  --ivory-2: #f6ecdc;
  --cream: #efe1c8;
  --gold: #d8b25a;
  --gold-hi: #f7e3a1;
  --gold-dk: #9c7a2c;
  --wine: #7a1f3d;
  --wine-2: #a8325a;
  --rose: #e9809c;
  --ink: #3a2430;
  --ink-2: #6d5560;
  --navy: #22264a;
  --glass: rgba(255, 250, 242, 0.86);
  --shadow: 0 10px 30px rgba(60, 20, 40, 0.28);
  --serif: 'Shippori Mincho B1', 'Yu Mincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;
  --latin: 'Cinzel', 'Cormorant Garamond', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #140b12; overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center;
  overflow: hidden; background: #2a1622;
}
#screen-root, #fx-root { position: absolute; inset: 0; }
#fx-root { pointer-events: none; z-index: 50; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* ---------- 共通パーツ ---------- */
.panel {
  background: linear-gradient(180deg, rgba(255,252,246,.95), rgba(248,238,224,.93));
  border: 2px solid var(--gold);
  border-radius: 18px;
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(255,255,255,.6), inset 0 0 0 5px rgba(216,178,90,.45);
  position: relative;
}
.panel.ornate::before, .panel.ornate::after {
  content: '❦'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  color: var(--gold-dk); font-size: 28px; background: var(--ivory); padding: 0 12px; line-height: 32px; border-radius: 16px;
}
.panel.ornate::after { top: auto; bottom: -18px; transform: translateX(-50%) rotate(180deg); }
.btn {
  appearance: none; border: 0; cursor: pointer; position: relative;
  font-family: var(--serif); font-weight: 800; font-size: 26px; letter-spacing: .08em; color: #fff;
  padding: 16px 44px; border-radius: 999px;
  background: linear-gradient(180deg, #c2416e, var(--wine));
  box-shadow: 0 6px 0 #4e1027, 0 10px 24px rgba(80,10,40,.45), inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .12s, filter .12s;
}
.btn::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; border: 1.5px solid rgba(255,225,160,.65); pointer-events: none; }
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #4e1027; }
.btn.gold { background: linear-gradient(180deg, #f6dc8f, #c99a3c); color: #4a2a10; text-shadow: 0 1px 0 rgba(255,255,255,.5); box-shadow: 0 6px 0 #7d5a1a, 0 10px 24px rgba(80,50,10,.35), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.gold::after { border-color: rgba(255,255,255,.7); }
.btn.ghost { background: rgba(255,250,242,.9); color: var(--wine); box-shadow: 0 5px 0 #c6a9a0, 0 8px 18px rgba(80,10,40,.2); text-shadow: none; }
.btn.small { font-size: 20px; padding: 10px 28px; }
.title-ribbon {
  font-family: var(--serif); font-weight: 800; color: #fff; font-size: 34px; letter-spacing: .12em;
  padding: 10px 70px; position: relative; display: inline-block;
  background: linear-gradient(180deg, var(--wine-2), var(--wine));
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.latin { font-family: var(--latin); letter-spacing: .12em; }
.num { font-family: 'Cinzel', serif; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- タイトル ---------- */
.title-screen .bg { animation: slowzoom 30s ease-in-out infinite alternate; }
@keyframes slowzoom { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, -1%); } }
.title-screen .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,240,245,.88) 0%, rgba(255,240,245,.55) 30%, rgba(255,240,245,0) 52%); }
.title-chars { position: absolute; right: 0; bottom: 0; width: 1180px; height: 1080px; }
.title-chars img { position: absolute; bottom: -40px; filter: drop-shadow(0 10px 25px rgba(60,10,40,.35)); }
.logo-block { position: absolute; left: 110px; top: 150px; width: 760px; text-align: center; }
.logo-sub { font-family: var(--latin); font-weight: 700; color: var(--gold-dk); letter-spacing: .5em; font-size: 22px; }
.logo-main {
  font-family: var(--serif); font-weight: 800; font-size: 104px; line-height: 1.05; margin: 14px 0 6px;
  background: linear-gradient(180deg, #a8325a 10%, #6e1534 60%, #4a0d22);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 8px 14px rgba(120,30,60,.35));
}
.logo-en { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 40px; color: var(--wine); letter-spacing: .08em; }
.logo-tag { margin-top: 18px; font-family: var(--serif); font-size: 24px; color: var(--ink-2); letter-spacing: .2em; }
.logo-tag::before, .logo-tag::after { content: '—'; color: var(--gold); margin: 0 14px; }
.title-menu { position: absolute; left: 270px; top: 560px; width: 440px; display: flex; flex-direction: column; gap: 18px; }
.title-menu .btn { width: 100%; }
.title-foot { position: absolute; left: 40px; bottom: 26px; font-size: 16px; color: var(--ink-2); letter-spacing: .1em; }
.petals { position: absolute; inset: 0; pointer-events: none; }
.petal { position: absolute; top: -40px; width: 18px; height: 14px; background: radial-gradient(circle at 30% 30%, #fff, #ffc1d3 60%, #f48fb1); border-radius: 80% 0 80% 0; opacity: .9; animation: fall linear infinite; }
@keyframes fall { to { transform: translate(-260px, 1200px) rotate(720deg); } }

/* ---------- ライバル選択 ---------- */
.select-screen .bg { filter: blur(6px) brightness(1.05); transform: scale(1.05); }
.select-screen .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,246,240,.55), rgba(255,240,245,.8)); }
.select-head { position: absolute; top: 40px; left: 0; right: 0; text-align: center; }
.select-head .hint { margin-top: 12px; font-size: 22px; color: var(--ink-2); }
.roster { position: absolute; top: 170px; left: 70px; width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.rcard {
  height: 370px; border-radius: 16px; position: relative; overflow: hidden; cursor: pointer;
  border: 3px solid rgba(255,255,255,.8); box-shadow: 0 10px 24px rgba(60,20,40,.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 70%, #fff));
  transition: transform .15s, box-shadow .15s;
}
.rcard:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(60,20,40,.3); }
.rcard img { position: absolute; left: 50%; top: 18px; width: 150%; transform: translateX(-50%); }
.rcard .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 10px 10px; background: linear-gradient(180deg, transparent, rgba(40,10,25,.85)); color: #fff; text-align: center; }
.rcard .nm b { font-family: var(--serif); font-size: 28px; display: block; }
.rcard .nm small { font-size: 15px; opacity: .85; }
.rcard.locked { cursor: default; filter: grayscale(.6); }
.rcard.locked .sil { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--latin); font-size: 64px; color: rgba(255,255,255,.75); text-shadow: 0 4px 10px rgba(0,0,0,.3); }
.rcard.locked .nm b { font-size: 22px; }
.rcard.sel { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold), 0 0 30px rgba(255,210,120,.9); }
.rcard .badge { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, #f6dc8f, #c99a3c); color: #4a2a10; display: grid; place-items: center; font: 900 26px var(--latin); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.profile { position: absolute; top: 150px; right: 60px; width: 790px; height: 820px; padding: 0; overflow: hidden; }
.profile .art { position: absolute; right: -110px; bottom: -40px; height: 880px; filter: drop-shadow(0 10px 20px rgba(60,10,40,.3)); }
.profile .info { position: absolute; left: 36px; top: 36px; width: 370px; }
.profile .grade { font-size: 18px; color: var(--ink-2); letter-spacing: .1em; }
.profile .name { font-family: var(--serif); font-weight: 800; font-size: 54px; margin: 4px 0 0; color: var(--c); filter: brightness(.75); }
.profile .reading { font-size: 18px; letter-spacing: .3em; color: var(--ink-2); }
.profile .catch { margin: 22px 0 16px; font-family: var(--serif); font-size: 24px; line-height: 1.6; color: var(--wine); }
.profile .desc { font-size: 18px; line-height: 1.8; }
.profile .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 15px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--gold); color: var(--ink); }
.chip.c { background: var(--c); color: #fff; border-color: transparent; }
.profile .stake { position: absolute; left: 36px; bottom: 36px; width: 380px; padding: 16px 18px; border-radius: 12px; background: rgba(122,31,61,.08); border: 1.5px dashed var(--wine-2); font-size: 16px; line-height: 1.7; }
.profile .stake b { color: var(--wine); font-family: var(--serif); font-size: 18px; }
.select-foot { position: absolute; left: 70px; bottom: 50px; width: 980px; display: flex; align-items: center; gap: 24px; }
.diff { display: flex; gap: 10px; background: rgba(255,255,255,.7); padding: 8px; border-radius: 999px; border: 1.5px solid var(--gold); }
.diff button { border: 0; background: transparent; padding: 10px 22px; border-radius: 999px; font: 700 19px var(--sans); color: var(--ink-2); cursor: pointer; }
.diff button.on { background: var(--wine); color: #fff; }

/* ---------- ADV ---------- */
.adv-screen .bg { transition: filter .4s; }
.adv-chars { position: absolute; inset: 0; pointer-events: none; }
.adv-char { position: absolute; transition: transform .35s ease, filter .35s ease, opacity .35s; filter: drop-shadow(0 12px 24px rgba(40,10,30,.35)); }
.adv-char.dim { filter: brightness(.62) saturate(.8) drop-shadow(0 12px 24px rgba(40,10,30,.35)); }
.adv-char.talk { transform: translateY(-8px); }
.adv-still { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; }
.adv-still.on { opacity: 1; }
.msgwin {
  position: absolute; left: 160px; right: 160px; bottom: 34px; height: 250px; padding: 46px 64px 30px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,251,246,.93), rgba(250,238,228,.95));
  border-radius: 22px; border: 2px solid var(--gold);
  box-shadow: 0 14px 40px rgba(40,10,30,.35), inset 0 0 0 5px rgba(255,255,255,.65), inset 0 0 0 6.5px rgba(216,178,90,.5);
}
.msgwin .who {
  position: absolute; top: -26px; left: 46px; padding: 8px 40px 8px 30px; min-width: 220px;
  font-family: var(--serif); font-weight: 800; font-size: 28px; color: #fff; letter-spacing: .08em;
  background: linear-gradient(90deg, var(--c, var(--wine)), color-mix(in srgb, var(--c, var(--wine)) 60%, #000));
  border-radius: 10px 30px 10px 10px; box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.msgwin .who:empty { display: none; }
.msgwin .text { font-family: var(--serif); font-weight: 500; font-size: 33px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; }
.msgwin .next { position: absolute; right: 40px; bottom: 22px; color: var(--wine-2); font-size: 26px; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.adv-tools { position: absolute; right: 190px; bottom: 296px; display: flex; gap: 8px; }
.adv-tools button { border: 1.5px solid var(--gold); background: rgba(255,250,242,.9); color: var(--wine); border-radius: 999px; padding: 6px 18px; font: 700 16px var(--latin); letter-spacing: .1em; cursor: pointer; }
.adv-log { position: absolute; inset: 80px 260px 330px; overflow-y: auto; padding: 30px 40px; font-family: var(--serif); font-size: 22px; line-height: 1.7; display: none; z-index: 5; }
.adv-log.on { display: block; }
.contract {
  position: absolute; left: 50%; top: 46%; width: 760px; transform: translate(-50%, -50%) rotate(-1.5deg); padding: 46px 60px 40px;
  background: linear-gradient(180deg, #fffdf6, #f7edd8); border: 2px solid var(--gold); border-radius: 6px;
  box-shadow: 0 30px 60px rgba(40,10,30,.45), inset 0 0 0 10px #fffdf6, inset 0 0 0 12px var(--gold);
  font-family: var(--serif); text-align: center; animation: contractIn .6s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes contractIn { from { transform: translate(-50%, -40%) rotate(-8deg) scale(.8); opacity: 0; } }
.contract h2 { margin: 0; font-size: 40px; color: var(--wine); letter-spacing: .2em; }
.contract .en { font-family: var(--latin); color: var(--gold-dk); letter-spacing: .4em; font-size: 16px; }
.contract ol { text-align: left; font-size: 21px; line-height: 1.8; margin: 22px 0; padding-left: 1.4em; }
.contract .stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 26px; }
.contract .stakes div { padding: 12px; border: 1.5px dashed var(--wine-2); border-radius: 8px; font-size: 18px; line-height: 1.5; }
.contract .stakes b { display: block; color: var(--wine); font-size: 20px; }
.contract .sigs { display: flex; justify-content: space-around; margin-bottom: 20px; }
.contract .sig { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 30px; color: var(--c); border-bottom: 1.5px solid var(--ink-2); min-width: 170px; padding: 0 10px; }
.contract .seal { position: absolute; right: 40px; bottom: 30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d34f72, #8e1d3f); color: #ffe7b0; display: grid; place-items: center; font-size: 22px; box-shadow: 0 4px 10px rgba(0,0,0,.3); transform: rotate(12deg); animation: stamp .5s 1s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp { from { transform: scale(2.4) rotate(12deg); opacity: 0; } }

/* ---------- 盤面 ---------- */
.board-screen .bg { filter: saturate(.95); }
.board-screen .board3d { position: absolute; inset: 0; }
.board-screen .board3d canvas { display: block; }
.hud-top { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; z-index: 5; }
.pcard {
  width: 380px; height: 128px; position: relative; border-radius: 16px; padding: 12px 14px 10px 122px;
  background: linear-gradient(180deg, rgba(255,252,247,.95), rgba(246,236,222,.93));
  border: 2px solid color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 8px 20px rgba(40,10,30,.25);
  transition: transform .2s, box-shadow .2s;
}
.pcard.turn { transform: translateY(6px); box-shadow: 0 0 0 4px var(--gold), 0 12px 26px rgba(120,60,10,.4); }
.pcard .face { position: absolute; left: 10px; top: 10px; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--c) 35%, #fff); border: 2.5px solid var(--c); }
.pcard .face img { width: 100%; height: 100%; object-fit: cover; }
.pcard .rank { position: absolute; left: -10px; top: -12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 22px var(--latin); color: #fff; background: var(--c); border: 2.5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); z-index: 2; }
.pcard .pname { font-family: var(--serif); font-weight: 800; font-size: 21px; color: color-mix(in srgb, var(--c) 70%, #000); display: flex; justify-content: space-between; align-items: center; }
.suits { display: flex; gap: 3px; }
.suits span { font-size: 19px; line-height: 1; filter: grayscale(1) opacity(.28); }
.suits span.on { filter: none; text-shadow: 0 0 6px rgba(255,255,255,.9); }
.pcard .money { display: grid; grid-template-columns: 54px 1fr; font-size: 15px; color: var(--ink-2); margin-top: 3px; line-height: 1.25; }
.pcard .money .num { font-size: 25px; color: var(--ink); text-align: right; }
.pcard .money .num small { font-family: var(--sans); font-size: 13px; color: var(--ink-2); margin-left: 3px; }
.pride { position: relative; height: 15px; border-radius: 8px; background: rgba(60,30,40,.18); overflow: hidden; margin-top: 4px; }
.pride i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd56b, #ffb22e); border-radius: 8px; transition: width .4s; }
.pride.max i { background: linear-gradient(90deg, #ff5c8a, #ff2b55); animation: prideGlow 1s ease-in-out infinite; }
@keyframes prideGlow { 50% { filter: brightness(1.35); } }
.pride span { position: absolute; right: 6px; top: -1px; font: 700 12px var(--latin); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pride-lbl { position: absolute; left: 122px; bottom: 26px; font: 700 11px var(--latin); color: var(--ink-2); letter-spacing: .1em; }

.minimap { position: absolute; left: 26px; bottom: 140px; width: 300px; padding: 16px; z-index: 5; }
.minimap h4 { margin: 0 0 8px; font: 700 15px var(--latin); letter-spacing: .25em; color: var(--gold-dk); }
.minimap .grid { display: grid; gap: 3px; }
.minimap .mc { aspect-ratio: 1; border-radius: 4px; position: relative; }
.minimap .mc.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wine); z-index: 1; }
.minimap .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; }
.stage-info { position: absolute; left: 26px; top: 170px; width: 300px; padding: 16px 20px; z-index: 5; font-size: 16px; line-height: 1.7; }
.stage-info .sn { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--wine); }
.stage-info .row { display: flex; justify-content: space-between; }
.stage-info .row b { font-family: var(--latin); }

.side-right { position: absolute; right: 26px; top: 170px; width: 340px; z-index: 5; display: flex; flex-direction: column; gap: 14px; }
.turn-portrait { height: 380px; overflow: hidden; padding: 0; }
.turn-portrait img { position: absolute; left: 50%; top: 10px; width: 120%; transform: translateX(-50%); }
.turn-portrait .tp-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; background: linear-gradient(180deg, transparent, rgba(40,10,25,.82)); color: #fff; font-family: var(--serif); font-size: 22px; text-align: center; border-radius: 0 0 16px 16px; }
.turn-portrait .tp-name small { display: block; font-family: var(--latin); font-size: 13px; letter-spacing: .3em; color: var(--gold-hi); }
.log { height: 300px; padding: 14px 16px; overflow: hidden; font-size: 15px; line-height: 1.55; }
.log h4 { margin: 0 0 6px; font: 700 14px var(--latin); letter-spacing: .25em; color: var(--gold-dk); }
.log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.log li { padding: 4px 0; border-bottom: 1px dashed rgba(156,122,44,.3); }
.log li b { color: var(--c); }

.cmdbar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-end; z-index: 6; padding: 12px 18px; border-radius: 22px; }
.cmd { width: 88px; height: 88px; border-radius: 16px; border: 2px solid var(--gold); background: linear-gradient(180deg, #fffdf8, #f2e4cc); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--wine); box-shadow: 0 4px 0 #c9a97a; transition: transform .1s; }
.cmd:hover { transform: translateY(-3px); }
.cmd .ic { font-size: 34px; line-height: 1; }
.cmd .lb { font-size: 13px; font-weight: 700; color: var(--ink); }
.cmd.main { width: 150px; height: 108px; background: linear-gradient(180deg, #c2416e, var(--wine)); color: #fff; box-shadow: 0 6px 0 #4e1027, 0 0 24px rgba(255,120,160,.5); }
.cmd.main .lb { color: #fff; font-size: 17px; }
.cmd.main .ic { font-size: 44px; }
.cmd.off { opacity: .45; pointer-events: none; }

.steps-badge { position: absolute; left: 380px; top: 168px; z-index: 6; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff, #ffe9ef 50%, #f5b7c9); border: 4px solid var(--gold); box-shadow: var(--shadow); }
.steps-badge b { font: 900 64px var(--latin); color: var(--wine); line-height: 1; display: block; }
.steps-badge span { font-size: 15px; font-weight: 700; color: var(--ink-2); }

.dice-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle, rgba(40,10,30,.25), rgba(40,10,30,.55)); cursor: pointer; }
.dice3d { width: 220px; height: 220px; perspective: 900px; }
.dice3d .cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin .45s linear infinite; }
.dice3d.stop .cube { animation: none; transition: transform .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes spin { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
.face-d { position: absolute; inset: 0; border-radius: 30px; background: radial-gradient(circle at 30% 25%, #fff, #fbeff3 60%, #f0d2dc); border: 3px solid var(--gold); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 26px; box-shadow: inset 0 0 20px rgba(200,120,150,.3); }
.face-d i { width: 34px; height: 34px; border-radius: 50%; place-self: center; background: radial-gradient(circle at 35% 35%, #ff6f98, #a8174a); }
.face-d.one i { width: 54px; height: 54px; background: radial-gradient(circle at 35% 35%, #ff4f7b, #8e0e3a); }
.dice-hint { position: absolute; top: calc(50% + 170px); left: 0; right: 0; text-align: center; color: #fff; font: 700 28px var(--serif); text-shadow: 0 3px 10px rgba(0,0,0,.6); letter-spacing: .15em; }

.confirm-bar { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 980px; padding: 22px 28px; z-index: 12; display: flex; align-items: center; gap: 24px; animation: rise .3s ease both; }
@keyframes rise { from { transform: translate(-50%, 30px); opacity: 0; } }
.confirm-bar .q { flex: 1; font-family: var(--serif); font-size: 28px; font-weight: 700; }
.confirm-bar .q small { display: block; font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }

.tile-tip { position: absolute; z-index: 15; width: 330px; padding: 16px 18px; pointer-events: none; font-size: 16px; line-height: 1.6; }
.tile-tip .tt { font-family: var(--serif); font-weight: 800; font-size: 21px; display: flex; align-items: center; gap: 8px; }
.tile-tip .tt i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.tile-tip .row { display: flex; justify-content: space-between; }
.tile-tip .row b { font-family: var(--latin); }
.tile-tip .warn { color: #c2185b; font-weight: 700; }

.cutin { position: absolute; left: 0; right: 0; top: 330px; height: 300px; z-index: 30; pointer-events: none; overflow: visible; }
.cutin .band { position: absolute; inset: 40px 0; background: linear-gradient(90deg, transparent, var(--c) 15%, color-mix(in srgb, var(--c) 70%, #000) 85%, transparent); transform: skewY(-3deg); animation: bandIn .35s ease both, bandOut .35s 2.2s ease both; opacity: .92; }
.cutin .band::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 18px, transparent 18px 46px); }
.cutin .bust { position: absolute; right: 400px; top: -70px; width: 420px; height: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); animation: imgIn .45s ease both, bandOut .35s 2.2s ease both; filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
.cutin .line { position: absolute; left: 140px; top: 110px; color: #fff; font: 800 46px var(--serif); text-shadow: 0 4px 12px rgba(0,0,0,.5); animation: textIn .45s .1s ease both, bandOut .35s 2.2s ease both; transform: skewY(-3deg); }
.cutin .line small { display: block; font: 700 22px var(--latin); letter-spacing: .4em; color: var(--gold-hi); }
@keyframes bandIn { from { transform: skewY(-3deg) scaleX(0); } }
@keyframes imgIn { from { transform: translateX(300px); opacity: 0; } }
@keyframes textIn { from { transform: skewY(-3deg) translateX(-200px); opacity: 0; } }
@keyframes bandOut { to { opacity: 0; } }

.modal-wrap { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(30,8,22,.45); animation: fadeIn .2s both; }
.modal { padding: 40px 50px 36px; min-width: 760px; }
.modal h3 { margin: 0 0 20px; text-align: center; }
.modal table { width: 100%; border-collapse: collapse; font-size: 20px; }
.modal th { font: 700 15px var(--latin); letter-spacing: .15em; color: var(--gold-dk); padding: 8px; border-bottom: 2px solid var(--gold); text-align: right; }
.modal th:first-child, .modal td:first-child { text-align: left; }
.modal td { padding: 12px 8px; border-bottom: 1px dashed rgba(156,122,44,.4); text-align: right; }
.modal td .num { font-size: 24px; }
.modal .foot { text-align: center; margin-top: 26px; }
.who-cell { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; }
.who-cell img { width: 44px; height: 44px; border-radius: 8px; border: 2px solid var(--c); object-fit: cover; }

.auction { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: 1100px; padding: 22px 30px; z-index: 12; }
.auction .top { display: flex; align-items: center; gap: 20px; }
.auction .lot { font-family: var(--serif); font-weight: 800; font-size: 26px; flex: 1; }
.auction .lot small { display: block; font: 500 16px var(--sans); color: var(--ink-2); }
.auction .bid { text-align: center; }
.auction .bid .num { font-size: 52px; color: var(--wine); }
.auction .bidder { display: flex; align-items: center; gap: 10px; font: 700 18px var(--serif); }
.auction .bidder img { width: 64px; height: 64px; border-radius: 10px; border: 3px solid var(--c); object-fit: cover; }
.auction .timer { height: 14px; border-radius: 7px; background: rgba(60,30,40,.15); margin-top: 16px; overflow: hidden; }
.auction .timer i { display: block; height: 100%; background: linear-gradient(90deg, #ff4f7b, #ffb02e); }

/* ---------- 決着・リザルト ---------- */
.result-screen .bg { filter: blur(3px) brightness(.9); transform: scale(1.04); }
.result-screen .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,10,30,.35), rgba(40,10,30,.6)); }
.result-head { position: absolute; top: 46px; left: 0; right: 0; text-align: center; }
.result-head .big { font: 900 92px var(--latin); color: #fff; letter-spacing: .2em; background: linear-gradient(180deg, #fff6d6, #e8bf5a 60%, #a8792a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(80,30,10,.6)) drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.ranks { position: absolute; top: 230px; left: 160px; width: 1080px; display: flex; flex-direction: column; gap: 18px; }
.rankrow { height: 160px; position: relative; display: flex; align-items: center; padding-left: 300px; border-radius: 18px; overflow: hidden; animation: slideIn .5s ease both; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #fff), color-mix(in srgb, var(--c) 30%, #fff) 70%, rgba(255,255,255,.9)); border: 2.5px solid rgba(255,255,255,.85); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
@keyframes slideIn { from { transform: translateX(-120px); opacity: 0; } }
.rankrow .no { position: absolute; left: 22px; font: 900 82px var(--latin); color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,.35); width: 110px; text-align: center; }
.rankrow .no small { font-size: 30px; }
.rankrow .crop { position: absolute; left: 130px; top: 0; bottom: 0; overflow: hidden; }
.rankrow .crop img { position: absolute; width: 300px; left: -65px; top: -20px; }
.rankrow .nm { font: 800 38px var(--serif); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); flex: 1; }
.rankrow .nm small { display: block; font: 500 18px var(--sans); }
.rankrow .tot { font-size: 46px; color: var(--ink); padding-right: 40px; }
.rankrow .tot small { font-family: var(--sans); font-size: 18px; }
.rankrow.first { height: 190px; box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(255,210,120,.7); }
.result-side { position: absolute; right: -30px; bottom: 0; height: 1000px; }
.result-side img { height: 100%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
.result-actions { position: absolute; left: 160px; bottom: 60px; display: flex; gap: 20px; }
.result-verdict { position: absolute; left: 1275px; top: 230px; width: 400px; padding: 26px; text-align: center; font: 700 24px/1.6 var(--serif); color: var(--wine); }

/* ---------- ギャラリー ---------- */
.gallery-screen .bg { filter: blur(8px) brightness(.95); transform: scale(1.05); }
.gallery-screen .veil { position: absolute; inset: 0; background: rgba(255,246,248,.72); }
.gal-head { position: absolute; top: 40px; left: 0; right: 0; text-align: center; }
.gal-tabs { position: absolute; top: 140px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.gal-tabs button { border: 2px solid var(--gold); background: #fff; border-radius: 999px; padding: 10px 28px; font: 700 20px var(--serif); color: var(--wine); cursor: pointer; }
.gal-tabs button.on { background: var(--wine); color: #fff; }
.gal-grid { position: absolute; top: 220px; left: 140px; right: 140px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.gthumb { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; position: relative; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(60,20,40,.25); background: linear-gradient(135deg, #e9d3dc, #f7ecef); cursor: pointer; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gthumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; color: #fff; font: 700 16px var(--serif); background: linear-gradient(180deg, transparent, rgba(40,10,25,.85)); }
.gthumb.locked { cursor: default; display: grid; place-items: center; text-align: center; color: var(--ink-2); font-size: 15px; padding: 16px; }
.gthumb.locked b { display: block; font: 900 40px var(--latin); color: rgba(122,31,61,.35); }
.gal-progress { position: absolute; bottom: 56px; left: 0; right: 0; text-align: center; font: 700 20px var(--serif); color: var(--wine); }

/* ---------- セーブ ---------- */
.save-panel { width: 980px; padding: 40px 50px; }
.slot { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid rgba(216,178,90,.6); margin-bottom: 10px; background: rgba(255,255,255,.6); }
.slot .no { font: 900 26px var(--latin); color: var(--gold-dk); width: 90px; }
.slot .meta { flex: 1; font-size: 17px; color: var(--ink-2); }
.slot .meta b { color: var(--ink); font-size: 19px; }

/* ---------- モックナビ ---------- */
#mocknav { position: fixed; right: 10px; top: 10px; z-index: 1000; font-family: var(--sans); }
#mocknav .tog { background: rgba(30,10,20,.8); color: #ffd98a; border: 1px solid #ffd98a; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; letter-spacing: .1em; }
#mocknav ul { list-style: none; margin: 6px 0 0; padding: 6px; background: rgba(30,10,20,.88); border-radius: 10px; border: 1px solid #ffd98a; display: none; min-width: 230px; }
#mocknav.open ul { display: block; }
#mocknav li { padding: 7px 12px; color: #fff; cursor: pointer; border-radius: 6px; font-size: 14px; }
#mocknav li:hover { background: rgba(255,217,138,.2); }
#mocknav li.cur { color: #ffd98a; font-weight: 700; }
#mocknav li small { color: #c9a; margin-right: 6px; }

.toast { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); z-index: 60; padding: 14px 40px; border-radius: 999px; background: rgba(40,10,30,.85); color: #fff; font: 700 22px var(--serif); animation: fadeIn .2s both; }