/* =========================================================
   3秒5五将棋  -  style.css
   ========================================================= */
:root{
  --bg:#07060d;
  --bg2:#0d0b1a;
  --neon:#00e5ff;
  --neon2:#ff2d78;
  --gold:#ffd54a;
  --green:#7dff9b;
  --txt:#eef2ff;
  --dim:#8b93b5;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;overflow:hidden;}
body{
  background:radial-gradient(120% 90% at 50% 0%,#1a1030 0%,#0b0817 45%,var(--bg) 100%);
  color:var(--txt);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
}

/* ---- 背景の動くオーラ ---- */
#bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;filter:blur(60px);opacity:.55;}
#bgfx span{position:absolute;border-radius:50%;mix-blend-mode:screen;}
#bgfx span:nth-child(1){width:60vw;height:60vw;left:-15vw;top:-10vh;background:#3b1d7a;animation:drift1 18s ease-in-out infinite;}
#bgfx span:nth-child(2){width:55vw;height:55vw;right:-18vw;top:25vh;background:#06455c;animation:drift2 22s ease-in-out infinite;}
#bgfx span:nth-child(3){width:70vw;height:70vw;left:5vw;bottom:-25vh;background:#5c0a35;animation:drift3 26s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,10vh) scale(1.2)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-14vw,-8vh) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,-12vh) scale(1.25)}}

#fx{position:fixed;inset:0;z-index:50;pointer-events:none;}

/* ---- 画面 ---- */
.screen{
  position:fixed;inset:0;z-index:10;
  display:none;flex-direction:column;
  padding:calc(var(--sat) + 10px) 14px calc(var(--sab) + 10px);
  overflow:hidden;
}
.screen.active{display:flex;animation:scrIn .32s cubic-bezier(.2,.9,.25,1);}
@keyframes scrIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

.scr-title{
  text-align:center;font-size:20px;letter-spacing:.28em;margin:6px 0 14px;
  color:#fff;text-shadow:0 0 18px var(--neon),0 0 40px rgba(0,229,255,.45);
}

/* ---- タイトル ---- */
.title-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;}
.logo{text-align:center;}
.logo-sub{font-size:13px;letter-spacing:.5em;color:var(--neon);text-shadow:0 0 14px var(--neon);margin-bottom:6px;}
.logo-main{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;
  font-size:clamp(40px,13vw,80px);letter-spacing:.05em;line-height:1;
  display:flex;justify-content:center;gap:.03em;
}
/* 文字本体(koma-ch)は必ずposition指定ありにして、無指定(z-index:auto)のcapfxバッジより
   後のDOM順で重なりに参加させる -> これで確実に文字が手前・バッジが奥になる */
.koma-ch{
  position:relative;
  color:#ffdd8a;
  text-shadow:0 0 12px rgba(255,180,60,.75),0 0 34px rgba(255,45,120,.5);
  animation:komaIn .6s backwards cubic-bezier(.2,1.4,.4,1);
}
.ch-koma{position:relative;display:inline-block;}
/* 「棋」の右上に、駒を取った時のエフェクトを模したバッジを文字の裏側に添える */
.ch-koma .capfx{
  position:absolute;
  top:-.72em;right:-.95em;
  width:1.7em;height:1.7em;
  pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,213,74,.85) 22%,rgba(255,138,61,.55) 46%,rgba(255,45,120,0) 74%),
    repeating-conic-gradient(from 0deg,rgba(255,213,74,.92) 0deg 4deg,rgba(255,45,120,0) 4deg 22deg);
  animation:capfxPulse 1.7s ease-in-out .8s infinite;
}
@keyframes capfxPulse{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.75}
  50%{transform:scale(1.3) rotate(16deg);opacity:1}
}
/* グラデ文字に対応する環境でだけ、より華やかな表現に差し替える */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .koma-ch{
    background-image:linear-gradient(180deg,#fff 0%,var(--gold) 42%,#ff8a3d 78%,#ff2d78 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 12px rgba(255,180,60,.75)) drop-shadow(0 0 34px rgba(255,45,120,.5));
  }
}
.koma-ch.d1{animation-delay:.05s}
.koma-ch.d2{animation-delay:.12s}
.koma-ch.d3{animation-delay:.19s}
.koma-ch.d4{animation-delay:.26s}
.koma-ch.d5{animation-delay:.33s}
.koma-ch.d6{animation-delay:.40s}
@keyframes komaIn{from{opacity:0;transform:translateY(-40px) rotate(-14deg) scale(1.6)}to{opacity:1;transform:none}}
.logo-blaze{
  margin-top:8px;font-size:14px;font-weight:900;letter-spacing:.3em;color:#fff;
  text-shadow:0 0 10px var(--neon2),0 0 26px var(--neon2);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}

.menu{display:flex;flex-direction:column;gap:12px;padding:0 6px;}

/* ---- ボタン ---- */
.btn{
  position:relative;border:0;cursor:pointer;font-family:inherit;color:#fff;
  border-radius:14px;padding:14px 18px;font-size:17px;font-weight:800;letter-spacing:.08em;
  background:linear-gradient(135deg,#1b8fff,#00e5ff 45%,#00ffc6);
  box-shadow:0 6px 0 rgba(0,90,120,.55),0 0 26px rgba(0,229,255,.45);
  transition:transform .08s, box-shadow .15s, filter .15s;
  overflow:hidden;
}
.btn small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.85;margin-top:3px;}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,90,120,.55),0 0 18px rgba(0,229,255,.4);}
.btn.big{padding:16px;font-size:19px;}
.btn.alt{background:linear-gradient(135deg,#ff2d78,#ff7a3d 60%,#ffd54a);box-shadow:0 6px 0 rgba(120,0,50,.55),0 0 26px rgba(255,45,120,.45);}
.btn.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:none;color:#cfd6ff;font-weight:700;}
.btn.tiny{padding:8px 14px;font-size:13px;border-radius:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);box-shadow:none;}
.btn::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s infinite;
}
.btn.ghost::after{display:none}
@keyframes sheen{0%{left:-60%}55%{left:130%}100%{left:130%}}

.row-btns{display:flex;gap:10px;margin-top:auto;padding-top:12px;}
.row-btns .btn{flex:1}

/* ---- パネル ---- */
.panel{
  background:rgba(14,12,28,.72);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 0 40px rgba(90,60,200,.12);
}
.panel.scrolly{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.panel h3{margin:14px 0 6px;font-size:15px;color:var(--gold);letter-spacing:.1em;}
.panel p{margin:0;font-size:13.5px;line-height:1.8;color:#c9d0ee;}
.label{font-size:12px;letter-spacing:.2em;color:var(--dim);margin:12px 0 7px;}
.label:first-child{margin-top:0}

.seg{display:flex;gap:8px;}
.seg button{
  flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#b9c1e6;border-radius:12px;padding:11px 4px;font-family:inherit;font-size:15px;font-weight:800;
  transition:.18s;
}
.seg button small{display:block;font-size:10px;font-weight:500;opacity:.7;margin-top:3px;}
.seg4 button{font-size:13px;padding:10px 2px;}
.seg4 button small{font-size:9px;}
.seg button.on{
  color:#fff;background:linear-gradient(160deg,rgba(0,229,255,.32),rgba(255,45,120,.28));
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 20px rgba(0,229,255,.45),inset 0 0 16px rgba(255,255,255,.18);
  transform:translateY(-2px);
}

.sw{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:15px;}
.sw input{display:none}
.sw span{width:48px;height:27px;border-radius:20px;background:rgba(255,255,255,.14);position:relative;transition:.2s;flex:none;}
.sw span::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s;}
.sw input:checked + span{background:linear-gradient(90deg,var(--neon),#00ffc6);box-shadow:0 0 16px rgba(0,229,255,.6);}
.sw input:checked + span::after{left:24px;}

.pass{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4);color:#fff;font-size:20px;font-family:inherit;
  padding:14px;text-align:center;letter-spacing:.1em;outline:none;
}
.pass:focus{border-color:var(--neon);box-shadow:0 0 20px rgba(0,229,255,.45);}
.hint{margin:12px 0 14px !important;font-size:12.5px !important;color:#9aa3cc !important;line-height:1.7;}
.netstat{margin-top:14px;min-height:22px;font-size:13px;text-align:center;color:var(--neon);letter-spacing:.06em;}
.netstat.err{color:#ff6f8e}

/* =========================================================
   対局画面
   ========================================================= */
#scr-game{padding:0;}
#stage{
  position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
  padding:calc(var(--sat) + 6px) 10px calc(var(--sab) + 4px);
  will-change:transform;
}

.ghud{display:flex;flex-direction:column;gap:8px;padding:2px 2px 8px;}
.ghud-top{display:flex;align-items:center;gap:10px;}
.icobtn{
  width:34px;height:34px;flex:none;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#cfd6ff;font-size:16px;font-family:inherit;
}
.turnline{flex:1;min-width:0;font-size:13px;font-weight:800;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.timebar{
  height:40px;border-radius:16px;
  background:rgba(0,0,0,.62);
  overflow:hidden;position:relative;
  border:3px solid rgba(255,255,255,.4);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.8),inset 0 -2px 6px rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.5);
}
.timebar i{
  display:block;height:100%;width:100%;border-radius:13px;
  background:linear-gradient(90deg,#00ffc6,var(--neon));
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.4) 0 12px,rgba(255,255,255,0) 12px 24px),
    linear-gradient(90deg,#00ffc6,var(--neon));
  box-shadow:0 0 28px var(--neon),inset 0 4px 7px rgba(255,255,255,.6),inset 0 -4px 7px rgba(0,0,0,.3);
  transition:background .2s;
}
.timebar.warn i{
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.4) 0 12px,rgba(255,255,255,0) 12px 24px),
    linear-gradient(90deg,#ffd54a,#ff8a3d);
  box-shadow:0 0 32px #ffa53d,inset 0 4px 7px rgba(255,255,255,.6),inset 0 -4px 7px rgba(0,0,0,.3);
}
.timebar.danger i{
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.45) 0 12px,rgba(255,255,255,0) 12px 24px),
    linear-gradient(90deg,#ff2d78,#ff5f3d);
  box-shadow:0 0 38px var(--neon2),inset 0 4px 7px rgba(255,255,255,.65),inset 0 -4px 7px rgba(0,0,0,.3);
  animation:barDanger .35s infinite;
}
@keyframes barDanger{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}
.clock{
  flex:none;min-width:92px;text-align:right;font-size:38px;font-weight:900;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  padding:3px 14px;border-radius:14px;
  background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.24);
  text-shadow:0 0 18px rgba(0,229,255,.75);
}
.clock.warn{color:var(--gold);text-shadow:0 0 22px var(--gold);border-color:rgba(255,213,74,.55);}
.clock.danger{color:#ff5f7a;text-shadow:0 0 26px var(--neon2);border-color:rgba(255,45,120,.65);animation:tickPop .5s infinite;}
@keyframes tickPop{0%,100%{transform:scale(1)}20%{transform:scale(1.22)}}

/* ---- 持ち駒エリア ---- */
.side{
  display:flex;align-items:center;gap:8px;min-height:52px;
  padding:5px 8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:rgba(10,8,22,.5);
  transition:.25s;
}
.side.active{
  border-color:rgba(0,229,255,.6);
  box-shadow:0 0 22px rgba(0,229,255,.35),inset 0 0 22px rgba(0,229,255,.1);
  background:rgba(0,60,80,.28);
}
.side.top{margin-bottom:6px}
.side.bottom{margin-top:6px}
.pname{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;flex:none;color:#cdd5f5;}
.pmark{font-size:16px;color:var(--gold);text-shadow:0 0 10px var(--gold);}
.hand{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-height:38px;align-items:center;}
.hand:empty::after{content:'持ち駒なし';font-size:11px;color:#5c638a;}

.chip{
  position:relative;width:30px;height:33px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;font-size:17px;color:#2b1a06;
  background:linear-gradient(160deg,#ffe9b6,#e0b978 60%,#c99a52);
  clip-path:polygon(50% 0%,88% 15%,100% 100%,0% 100%,12% 15%);
  transition:transform .12s, filter .12s;
}
.chip.sel{filter:drop-shadow(0 0 10px var(--neon)) brightness(1.25);transform:translateY(-5px) scale(1.12);}
.chip .cnt{
  position:absolute;right:-3px;bottom:-3px;min-width:15px;height:15px;border-radius:8px;
  background:var(--neon2);color:#fff;font-family:inherit;font-size:10px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px var(--neon2);
}
.hand.tappable .chip{cursor:pointer}
.hand.rot .chip{transform:rotate(180deg)}
.hand.rot .chip.sel{transform:rotate(180deg) translateY(-5px) scale(1.12)}
.hand.rot .chip .cnt{transform:rotate(180deg)}

/* ---- 盤 ---- */
.boardwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.board{
  position:relative;
  width:var(--bs,300px);height:var(--bs,300px);
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
  gap:2px;padding:6px;border-radius:10px;
  background:
    linear-gradient(145deg,rgba(90,60,140,.35),rgba(20,14,40,.6)),
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px);
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 0 50px rgba(120,60,255,.35),0 18px 50px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.5);
}
.cell{
  position:relative;border-radius:5px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.cell.last{background:linear-gradient(160deg,rgba(255,213,74,.28),rgba(255,138,61,.12));box-shadow:inset 0 0 0 1px rgba(255,213,74,.55);}
.cell.from{background:linear-gradient(160deg,rgba(255,213,74,.14),rgba(255,255,255,.03));}
.cell.check{animation:chkPulse .6s infinite;}
@keyframes chkPulse{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(255,45,120,.9),inset 0 0 24px rgba(255,45,120,.55);}
  50%{box-shadow:inset 0 0 0 3px rgba(255,255,255,.95),inset 0 0 34px rgba(255,45,120,.85);}
}
.cell .dot{
  position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;
  border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);
  animation:dotPulse .9s ease-in-out infinite;pointer-events:none;
}
@keyframes dotPulse{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.15);opacity:1}}
.cell .cap{
  position:absolute;inset:6%;border-radius:6px;border:3px solid var(--neon2);
  box-shadow:0 0 18px var(--neon2),inset 0 0 18px rgba(255,45,120,.5);
  animation:dotPulse .8s ease-in-out infinite;pointer-events:none;
}

/* ---- 駒 ---- */
.piece{
  position:absolute;inset:4%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;
  font-size:calc(var(--bs,300px)/9.4);line-height:1;color:#241403;
  background:linear-gradient(165deg,#fff3d0,#e7c68a 55%,#caa055);
  clip-path:polygon(50% 0%,87% 14%,100% 100%,0% 100%,13% 14%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
  transition:filter .15s;
}
.piece.g{transform:rotate(180deg);background:linear-gradient(165deg,#f0dcc0,#d3ab74 55%,#ab8348);}
.piece.pro{color:#c81f3a;}
.piece.mine{cursor:pointer}
.piece.sel{
  filter:drop-shadow(0 0 14px var(--neon)) drop-shadow(0 0 26px var(--neon)) brightness(1.2);
  animation:selFloat .8s ease-in-out infinite;
}
@keyframes selFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7%) scale(1.06)}}
.piece.g.sel{animation:selFloatG .8s ease-in-out infinite;}
@keyframes selFloatG{0%,100%{transform:rotate(180deg) translateY(0) scale(1)}50%{transform:rotate(180deg) translateY(-7%) scale(1.06)}}
.piece.kingdanger{animation:kdanger .5s infinite;}
@keyframes kdanger{0%,100%{filter:drop-shadow(0 0 10px #ff2d78)}50%{filter:drop-shadow(0 0 26px #fff) brightness(1.3)}}

/* ---- フッタ ---- */
.gfoot{display:flex;align-items:center;gap:10px;padding:6px 2px 0;}
.kifu{
  flex:1;min-width:0;font-size:11.5px;color:#8d95bb;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;direction:rtl;text-align:left;font-family:"Hiragino Mincho ProN",serif;
}

/* ---- 大文字スラム ---- */
#slam{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  pointer-events:none;
}
#slam.show{display:flex}
#slam span{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;
  font-size:clamp(52px,17vw,120px);letter-spacing:.06em;white-space:nowrap;
  color:#fff;text-align:center;
  -webkit-text-stroke:2px rgba(0,0,0,.5);
  animation:slamIn .72s cubic-bezier(.16,1.2,.3,1) forwards;
}
#slam span.sm{font-size:clamp(34px,10vw,72px)}
/* 「玉を取った！/取られた…」専用: 画面幅ぎりぎりまで大きくしつつ、はみ出さない */
#slam span.lg{font-size:clamp(38px,12.5vw,96px)}
@keyframes slamIn{
  0%{opacity:0;transform:scale(3.4) rotate(-9deg);filter:blur(9px)}
  22%{opacity:1;transform:scale(1) rotate(-3deg);filter:blur(0)}
  30%{transform:scale(1.1) rotate(2deg)}
  40%{transform:scale(1) rotate(-1deg)}
  76%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}
#slam span.c-check{color:#fff;text-shadow:0 0 20px #ff2d78,0 0 50px #ff2d78,0 0 90px #ff004c;}
#slam span.c-take {color:#fff;text-shadow:0 0 20px var(--gold),0 0 55px #ff8a3d,0 0 100px #ff4d00;}
#slam span.c-lost {color:#ffd9e2;text-shadow:0 0 20px #ff2d78,0 0 60px #8b0030;}
#slam span.c-promo{color:#fff9e0;text-shadow:0 0 22px var(--gold),0 0 60px var(--gold),0 0 110px #ff9d00;}
#slam span.c-time {color:#fff;text-shadow:0 0 20px #00e5ff,0 0 55px #0077ff;}
#slam span.c-start{color:#fff;text-shadow:0 0 22px #7df9ff,0 0 60px #00e5ff,0 0 110px #7dff9b;}
#slam span.c-win  {color:#fff;text-shadow:0 0 24px var(--gold),0 0 70px #ff2d78,0 0 130px #00e5ff;}

/* ---- 思考中 ---- */
#thinking{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;
  display:none;align-items:center;gap:6px;padding:9px 16px;border-radius:20px;
  background:rgba(6,4,16,.8);border:1px solid rgba(0,229,255,.4);
  box-shadow:0 0 24px rgba(0,229,255,.35);font-size:13px;letter-spacing:.14em;
}
#thinking.show{display:flex}
#thinking i{width:5px;height:5px;border-radius:50%;background:var(--neon);animation:th .9s infinite;}
#thinking i:nth-child(3){animation-delay:.15s}
#thinking i:nth-child(4){animation-delay:.3s}
@keyframes th{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* ---- 成り確認 ---- */
#promoAsk,#askBox{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:20px;
}
#promoAsk.show,#askBox.show{display:flex}
.pa-box{
  background:rgba(16,12,32,.95);border:1px solid rgba(255,213,74,.5);border-radius:18px;
  padding:20px;text-align:center;box-shadow:0 0 50px rgba(255,213,74,.4);
  animation:scrIn .2s;
}
.pa-title{font-size:19px;font-weight:800;margin-bottom:16px;color:var(--gold);letter-spacing:.1em;}
.pa-btns{display:flex;gap:10px}
.pa-btns .btn{min-width:120px}

/* ---- 結果 ---- */
#result{
  position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(30,10,60,.75),rgba(0,0,0,.92));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px;
}
#result.show{display:flex;animation:scrIn .35s}
.res-box{text-align:center;width:100%;max-width:420px}
.res-main{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:900;
  font-size:clamp(44px,14vw,84px);letter-spacing:.08em;margin-bottom:8px;
  color:#ffe9a8;
  text-shadow:0 0 22px rgba(255,180,60,.85),0 0 46px rgba(255,110,40,.5),0 2px 3px rgba(0,0,0,.6);
  animation:slamIn2 .6s cubic-bezier(.16,1.3,.3,1);
}
@keyframes slamIn2{0%{opacity:0;transform:scale(2.6) rotate(-8deg)}100%{opacity:1;transform:none}}
.res-main.lose{color:#ccd6ff;text-shadow:0 0 20px rgba(90,110,220,.8),0 0 44px rgba(50,60,130,.6),0 2px 3px rgba(0,0,0,.6);}
.res-main.draw{color:#c9f7ff;text-shadow:0 0 20px rgba(0,229,255,.8),0 0 44px rgba(0,150,190,.55),0 2px 3px rgba(0,0,0,.6);}
.res-sub{font-size:14px;color:#b6bee6;margin-bottom:24px;letter-spacing:.08em;line-height:1.7;}
.res-btns{display:flex;flex-direction:column;gap:10px}
.res-wait{margin-top:12px;font-size:12.5px;color:var(--neon);min-height:18px;}

/* ---- トースト ---- */
#toast{
  position:fixed;left:50%;bottom:calc(var(--sab) + 24px);transform:translateX(-50%) translateY(20px);
  z-index:90;background:rgba(10,8,22,.94);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13.5px;padding:11px 18px;border-radius:12px;opacity:0;
  transition:.25s;pointer-events:none;max-width:88vw;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-height:640px){
  .side{min-height:44px}
  .chip{width:26px;height:29px;font-size:15px}
  .clock{font-size:25px;min-width:56px}
}