:root { --bg:#12211b; --table:#1c3a2e; --fg:#f4efe3; --warm:#ffb454; --cool:#6aa6ff; --gold:#c9a24d; --ink:#2a1a08; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); overscroll-behavior:none;
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Trebuchet MS",system-ui,sans-serif; font-size:16px; }
body { background:radial-gradient(120% 80% at 50% 0%, #1b3a2d 0%, var(--bg) 70%); }
button { font:inherit; color:inherit; }

#app { position:relative; max-width:420px; margin:0 auto; height:100vh; height:100dvh; background:var(--table);
  display:flex; flex-direction:column; padding:0 12px calc(16px + env(safe-area-inset-bottom)); overflow:hidden;
  box-shadow:0 0 0 1px #0004, 0 0 60px #0008; user-select:none; -webkit-user-select:none; }

#header { height:44px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; font-weight:700; }
#h-opp { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#lang { display:flex; border:1px solid #fff4; border-radius:8px; overflow:hidden; background:#0005; }
#lang button { min-width:44px; min-height:32px; background:none; border:0; font-size:13px; font-weight:700; opacity:.65; cursor:pointer; }
#lang button[aria-pressed="true"] { background:var(--warm); color:var(--ink); opacity:1; }

#turn { height:28px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-radius:14px;
  font-size:14px; font-weight:700; background:var(--warm); color:var(--ink); transition:background .25s; }
#turn.deceive { background:var(--cool); color:#08182e; }
#turn.auto, #turn.over { background:#ffffff26; color:var(--fg); }
#h-counts { font-weight:400; font-size:13px; }

#face-wrap { flex:none; padding-top:4px; }
#face-host { display:flex; justify-content:center; }
#face-host svg { display:block; width:min(300px, 100%, 38dvh); height:auto; }
#focus { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; opacity:.9; height:18px; margin-top:2px; }
#focus-bar { width:200px; height:6px; background:#0006; border-radius:3px; overflow:hidden; }
#focus-bar i { display:block; height:100%; width:100%; background:var(--warm); transform-origin:left; }

#opp-wrap { position:relative; flex:none; }
#opp-hand, #you-hand { display:flex; justify-content:center; gap:6px; }
#opp-hand { touch-action:none; padding:24px 0 20px; min-height:140px; align-items:center; cursor:grab; }
#opp-hand.shuffle .card { animation:shuf .28s ease; }
@keyframes shuf { 0%{transform:translateX(0)} 30%{transform:translateX(-10px) rotate(-3deg)} 70%{transform:translateX(10px) rotate(3deg)} 100%{transform:none} }

/* 札。紙の白、丸い角、うすい縁、厚み、影 */
.card { width:56px; height:96px; border-radius:7px; flex:none; position:relative; transition:transform .12s ease, opacity .15s, box-shadow .12s; will-change:transform; }
.card .art { position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; }
.card.back { background:#7a1c2e; border:1.5px solid #f3ead2; border-radius:7px; overflow:hidden;
  box-shadow:0 1px 0 #fff6 inset, 0 2px 0 #4d0f1c, 0 4px 6px #0007, -2px 0 5px #0004;
  transform:var(--lift,none) translateY(var(--dy,0px)) rotate(var(--rot,0deg)); transform-origin:50% 130%; }
#opp-hand .card.back { flex:0 0 56px; min-width:0; margin-left:-18px; }
#opp-hand .card.back:first-child { margin-left:0; }
.card.back.over { box-shadow:0 1px 0 #fff6 inset, 0 2px 0 #4d0f1c, 0 14px 14px #0008; z-index:2; }
.card.back.armed { border-color:#fff3a8; box-shadow:0 0 18px 4px #ffd34dcc; }
.card.face { width:64px; height:92px; background:linear-gradient(160deg,#fffdf7 0%,#f4ecd8 100%); border:1px solid #d9cfb4; touch-action:none; cursor:grab;
  box-shadow:0 1px 0 #fff inset, 0 2px 0 #cdc2a4, 0 5px 8px #0007; }
.card.face.joker { background:linear-gradient(160deg,#fffdf0 0%,#f7e9c4 100%); }
#you-hand .card.face { flex:0 1 64px; min-width:0; }
.card.face.offer { transform:translateY(-40px); box-shadow:0 1px 0 #fff inset, 0 2px 0 #cdc2a4, 0 16px 14px #0008, 0 0 18px 3px #6aa6ffcc; outline:3px solid var(--cool); z-index:2; }
.card.face.dragging { transition:none; z-index:3; box-shadow:0 1px 0 #fff inset, 0 14px 16px #0008; }

/* 卓: 布の質感と、まわりの暗がり */
#app { background:
    radial-gradient(120% 90% at 50% 45%, #0000 40%, #04100b99 100%),
    repeating-linear-gradient(45deg, #ffffff07 0 1px, #0000 1px 3px),
    repeating-linear-gradient(-45deg, #0000000d 0 1px, #0000 1px 3px),
    radial-gradient(90% 60% at 50% 55%, #24493a 0%, #1a362a 100%); }

/* 引いた札・引かれた札の見せ場 */
#stage { position:absolute; left:0; right:0; z-index:5; display:flex; justify-content:center; align-items:flex-end; gap:0; height:136px; pointer-events:none; }
#stage[hidden] { display:none; }
#stage .slot { position:relative; width:90px; height:130px; perspective:700px; animation:stin .22s ease-out both; }
#stage .slot + .slot { margin-left:-6px; }
#stage .slot.mate { transform:rotate(-7deg) translateX(-10px); animation:stmate .3s .06s ease-out both; }
#stage .slot.main { transform:rotate(4deg); }
@keyframes stin { from { opacity:0; transform:translateY(40px) scale(.7); } }
@keyframes stmate { from { opacity:0; transform:translateX(30px) rotate(0) scale(.8); } }
#stage .flip { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .38s cubic-bezier(.3,.7,.3,1); }
#stage .slot.up .flip { transform:rotateY(180deg); }
#stage .flip .card { position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 1px 0 #fff inset, 0 3px 0 #cdc2a4, 0 14px 22px #000a; border-radius:9px; }
#stage .flip .card.back { box-shadow:0 3px 0 #4d0f1c, 0 14px 22px #000a; transform:none; }
#stage .flip .card.face { transform:rotateY(180deg); }
#stage .slot.still .flip { transition:none; }
#stage .slot.out { animation:stout .18s ease-in both; }
@keyframes stout { to { opacity:0; transform:translateY(-130px) scale(.35); } }
#stage .slot.out-down { animation:stoutd .18s ease-in both; }
@keyframes stoutd { to { opacity:0; transform:translateY(60px) scale(.5) rotate(10deg); } }
#stage .slot.joker-glow .card.face { box-shadow:0 0 0 2px #ffd34d, 0 0 26px 6px #ffd34daa, 0 14px 22px #000a; }
#app.staged #opp-hand, #app.staged #you-hand { opacity:.3; transition:opacity .15s; }
#stage-tap { position:absolute; inset:0; z-index:4; }
#stage-tap[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) {
  #stage .flip { transition:none; }
  #stage .flip .card { transition:opacity .12s; }
  #stage .flip .card.back { opacity:1; } #stage .slot.up .flip .card.back { opacity:0; }
  #stage .flip { transform:none !important; }
  #stage .flip .card.face { transform:none; opacity:0; } #stage .slot.up .flip .card.face { opacity:1; }
  #stage .slot, #stage .slot.mate { animation:none; }
}

#focus-note { position:absolute; left:0; right:0; top:100%; text-align:center; font-size:12px; line-height:1.3; opacity:.9; pointer-events:none; padding:0 8px; z-index:2; text-wrap:balance; }
#focus-note[hidden] { display:none; }
#face-wrap { position:relative; }

#finger { position:absolute; left:50%; top:30px; width:44px; height:58px; margin-left:-22px; pointer-events:none; opacity:.8; z-index:3;
  animation:sweep 2.2s ease-in-out infinite; filter:drop-shadow(0 3px 3px #0006); }
#finger[hidden] { display:none; }
#finger svg { width:100%; height:100%; transform:rotate(-12deg); }
@keyframes sweep { 0%,100%{transform:translateX(-96px)} 50%{transform:translateX(96px)} }

#line { flex:none; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; padding:2px 6px;
  font-size:16px; line-height:1.35; font-weight:700; cursor:pointer; }
#line.guide { font-size:14px; font-weight:400; opacity:.95; white-space:pre-line; text-wrap:balance; }
#line.pair { font-size:14px; opacity:.8; }
#line.tap::after { content:'▸'; margin-left:8px; opacity:.55; animation:tapnudge 1s ease-in-out infinite; }
@keyframes tapnudge { 50% { transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce) { #line.tap::after { animation:none; } }

#you-hand { margin-top:auto; padding:44px 0 4px; min-height:132px; align-items:flex-end; }
#actions { flex:none; display:flex; justify-content:center; min-height:56px; align-items:center; }
button.primary, #act { min-width:200px; min-height:52px; padding:0 24px; border-radius:26px; border:0; background:var(--warm); color:var(--ink);
  font-weight:800; font-size:17px; cursor:pointer; box-shadow:0 4px 0 #b97a1f; }
button.primary:active, #act:active { transform:translateY(2px); box-shadow:0 2px 0 #b97a1f; }
#act.cool { background:var(--cool); box-shadow:0 4px 0 #3e6fb5; color:#08182e; }
#act[hidden], #sheet[hidden], #curtain[hidden], #ghost[hidden] { display:none; }

#ghost { position:absolute; width:30px; height:40px; z-index:6; pointer-events:none; transition:left var(--ms,300ms) ease-in-out, top .2s; filter:drop-shadow(0 3px 3px #0006); }
#ghost svg { width:100%; height:100%; transform:rotate(180deg); }

/* シート */
#sheet { position:absolute; inset:0; z-index:10; display:flex; align-items:flex-end; justify-content:center; background:#000a; animation:fade .2s; }
#sheet.sheet-win, #sheet.sheet-lose { background:linear-gradient(to top, #000b 0%, #0000 70%); }
#app.sheeted #opp-hand, #app.sheeted #you-hand, #app.sheeted #actions { opacity:0; transition:opacity .2s; }
#sheet.sheet-result { align-items:center; }
@keyframes fade { from{opacity:0} }
.panel { width:100%; background:#f4efe3; color:#1d1a14; border-radius:22px 22px 0 0; padding:20px 20px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; animation:rise .25s ease-out; }
@keyframes rise { from{transform:translateY(40px)} }
.panel h2 { margin:0; font-size:22px; }
.kicker { font-size:15px; font-weight:800; color:#b3701b; letter-spacing:.05em; }
.kicker.lose { color:#8a3a30; }
.panel .body { margin:0; font-size:16px; line-height:1.6; }
.pics { display:flex; justify-content:center; gap:10px; }
.pic { margin:0; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:13px; }
.mini svg { display:block; width:120px; height:120px; }
.pics:has(.pic:nth-child(3)) .mini svg { width:96px; height:96px; }
.panel button.primary { margin-top:6px; }
button.primary.big { min-width:220px; min-height:60px; font-size:20px; }
button.link { background:none; border:0; text-decoration:underline; font-size:14px; color:#5a4a30; padding:8px; cursor:pointer; min-height:36px; }
button.secondary { background:#ffffff1f; border:1px solid #fff6; border-radius:22px; min-width:140px; min-height:44px; font-weight:700; cursor:pointer; }

.card-result { width:calc(100% - 8px); max-height:calc(100% - 16px); overflow:auto; background:linear-gradient(180deg,#2b1f46,#1c3a2e); border:2px solid var(--gold); border-radius:22px; padding:22px 14px 18px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; animation:rise .3s ease-out; box-shadow:0 10px 40px #000a; }
.card-result .kicker { color:var(--warm); font-size:16px; }
.card-result .title { margin:0; font-size:38px; color:#fff3c8; line-height:1.15; text-shadow:0 2px 0 #0006; }
.card-result .big { margin:0; font-size:20px; font-weight:800; }
.result-faces { display:flex; justify-content:center; gap:4px; margin:6px 0; }
.rf { margin:0; display:flex; flex-direction:column; align-items:center; font-size:13px; font-weight:700; }
.rf .mini svg { width:112px; height:112px; }
.card-result .status { min-height:20px; font-size:14px; color:var(--warm); }
.card-result .primary { margin-top:2px; }

#curtain { position:absolute; inset:0; z-index:12; background:var(--curtain,#333); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; }
#curtain.go { animation:curt 1.1s ease both; }
#curtain .n { font-size:22px; font-weight:700; opacity:.85; }
#curtain .name { font-size:44px; font-weight:800; text-shadow:0 3px 0 #0005; }
@keyframes curt { 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} }

@media (max-height:700px) { #opp-hand { min-height:128px; padding:18px 0 14px; } #you-hand { min-height:118px; padding-top:32px; } #line { min-height:38px; } }
@media (prefers-reduced-motion: reduce) { #finger { animation:none; } }

/* 札を持つ手（扇の左右）と、動揺の下の1行の置き場所 */
#opp-hands { position:absolute; inset:0; pointer-events:none; z-index:3; }
#opp-hands .holding-hand { position:absolute; width:52px; height:83px; filter:none; }
#opp-hands .holding-hand.mirror { transform:scaleX(-1); }
#focus-note { top:auto; bottom:24px; left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:92%; background:#000b; border-radius:10px; padding:4px 10px; z-index:4; }
.card-result .blind { margin:0; font-size:15px; font-weight:700; color:#ffe9a8; }

/* 2本先取: 本数の星、何本目、警戒の札、幕 */
#series { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:8px; padding:3px 12px;
  border-radius:14px; background:#000a; font-size:15px; font-weight:800; white-space:nowrap; }
#series[hidden], #guard[hidden] { display:none; }
#series .stars { letter-spacing:2px; font-size:16px; }
#series .stars.you { color:var(--warm); }
#series .stars.opp { color:#ff8f8f; }
#round { font-size:13px; opacity:.95; padding:0 2px; }
#guard { position:absolute; top:40px; right:4px; z-index:3; padding:3px 10px; border-radius:12px; background:#b3261e; color:#fff; font-size:13px; font-weight:800;
  box-shadow:0 2px 0 #6d140f; animation:guardpulse 1.4s ease-in-out infinite; }
@keyframes guardpulse { 50% { transform:scale(1.06); } }
#focus.guarded #focus-label { color:#ff9a8f; font-weight:700; }
#focus.guarded #focus-bar i { background:#ff7b6b; }
#curtain.go { animation:curt var(--dur,1.1s) ease both; }
#curtain .note { font-size:18px; font-weight:700; opacity:.9; padding:0 24px; text-align:center; text-wrap:balance; }
#curtain .name.small { font-size:32px; text-align:center; padding:0 16px; text-wrap:balance; }
#curtain .n { letter-spacing:3px; }
@media (prefers-reduced-motion: reduce) { #guard { animation:none; } }

/* 待っている間は読めない（札が暗い）。読める状態になると明るくなり、顔が反応する */
#opp-hand.wait .card.back { filter:brightness(.72) saturate(.8); transition:filter .2s, transform .12s ease, opacity .15s, box-shadow .12s; }

/* 本数の印: 左が自分、右が相手 */
#series { gap:6px; padding:3px 10px; font-size:13px; }
#series .side { display:flex; align-items:center; gap:4px; }
#series .side b { font-size:12px; font-weight:800; opacity:.9; }
#series .side.you b { color:var(--warm); }
#series .side.opp b { color:#ff8f8f; }
#series .stars { letter-spacing:1px; font-size:15px; }
#round { padding:0 6px; border-left:1px solid #fff4; border-right:1px solid #fff4; }

/* だます番: 相手の手が向かう札、変えられる回数の印 */
.card.face.aim { box-shadow:0 1px 0 #fff inset, 0 2px 0 #cdc2a4, 0 0 0 3px #ff8f6b, 0 0 20px 6px #ff8f6bcc; }
#chg { padding:6px 16px; border-radius:18px; background:#6aa6ff; color:#08182e; font-weight:800; font-size:15px; }
#chg::before { content:'◆ '; }
#chg.spent { background:#ffffff26; color:var(--fg); font-weight:600; }
#chg.spent::before { content:'◇ '; }
#chg[hidden] { display:none; }
#ghost { z-index:7; }

/* 最初の画面: 動揺の下の説明は帯にせず、棒の下に1行で置く */
#focus-note { position:static; transform:none; width:auto; max-width:none; background:none; padding:0 8px; margin-top:2px; font-size:11.5px; opacity:.85; text-align:center; }

/* 捨てたペアの山（相手の札と自分の札の間の面） */
#pile { flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; gap:10px; overflow:hidden; font-size:13px; opacity:.9; }
#pile[hidden] { display:none; }
#pile .stack { position:relative; width:44px; height:42px; }
#pile .stack i { position:absolute; left:0; width:30px; height:42px; border-radius:4px; background:#7a1c2e; border:1px solid #f3ead2; box-shadow:0 2px 3px #0008; }
#pile .stack i:nth-child(odd) { transform:rotate(-6deg); } #pile .stack i:nth-child(even) { transform:rotate(5deg); }
#app.staged #pile { opacity:.3; }
@media (max-height:830px) { #pile { display:none; } }