/* © 2026 神ゲーカンパニー All rights reserved. */
/* 架空恐竜バトル: 明るいポップ(はっきりした輪郭+ベタ塗り+ずらした影) */
[hidden]{display:none!important}
body.pop{
  --ink:#2a2350; --bg:#fff4d6; --fg:#2a2350; --muted:#7a6f9b; --accent:#2fbf71; --gold:#ffb400; --gold2:#ff8a00;
  --danger:#ff4d6d; --card:#ffffff; --line:#2a2350; --sky:#4cc9f0; --grape:#8b5cf6; --mint:#59d98e; --tomato:#ff6b4a;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
  background:radial-gradient(circle,#ffe6a3 16%,transparent 17%) 0 0/30px 30px,#fff4d6;background-attachment:fixed}
body.pop::before{display:none}
.pop .site-header{background:#fff;border-bottom:3px solid var(--ink);color:var(--ink);backdrop-filter:none}
.pop .site-header a{font-weight:800}
.pop .site-header .brand{background:none;-webkit-text-fill-color:initial;color:var(--ink);letter-spacing:.02em}
.hr{display:flex;align-items:center;gap:8px}
.sndbtn{font-size:16px;background:#fff;border:2px solid var(--ink);border-radius:999px;width:34px;height:34px;cursor:pointer}
.lvchip{background:var(--tomato);color:#fff;border:2px solid var(--ink);padding:2px 10px;border-radius:999px;font-weight:900;font-size:12px}
.pop .btn{background:#ffc93c;color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);font-weight:900}
.pop .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.pop .btn.ghost{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.pop .btn:disabled{opacity:.4;box-shadow:0 2px 0 var(--ink);transform:translateY(3px)}
#stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));min-height:0;overflow-y:auto}
/* きろく */
.history{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:8px 10px;flex:0 0 auto}
.history h2{margin:0 0 6px;font-size:12px;color:var(--tomato);letter-spacing:.2em;font-weight:900}
.history ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-height:46px}
.history ol::-webkit-scrollbar{display:none}
.history .empty{color:var(--muted);font-size:12px;padding:10px 4px}
.history li{flex:0 0 auto;min-width:112px;max-width:170px;padding:6px 10px;border-radius:12px;font-size:12px;line-height:1.35;
  background:#f3efff;border:2px solid var(--ink);animation:pop .35s}
.history li.win{background:#dff9e8}
.history li:not(.win){background:#ffe3e8}
.history li.rec{background:#fff0b3}
.history li .w{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history li .n{color:var(--muted);font-size:11px}
.history li b{font-variant-numeric:tabular-nums}
.history li .e{font-weight:900}.history li.win .e{color:#1d9a57}.history li:not(.win) .e{color:var(--danger)}
.history li .star{color:#e08a00;font-weight:900;font-size:11px}
@keyframes pop{from{transform:scale(.7);opacity:0}}
/* プレイ */
.play{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:12px 10px;
  border:3px solid var(--ink);border-radius:24px;position:relative;background:#fffdf5;box-shadow:6px 6px 0 var(--ink)}
.credit{font-size:11px;letter-spacing:.2em;font-weight:900;color:var(--tomato)}
.info{display:flex;gap:8px;width:100%;max-width:560px}
.stat{flex:1;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:4px 8px;box-shadow:3px 3px 0 var(--ink)}
.stat small{display:block;color:var(--muted);font-size:11px;font-weight:700}
.stat b{font-size:20px;font-variant-numeric:tabular-nums}
.stat.gold{background:#ffe9a0}
.challenge{width:100%;max-width:560px;background:#ffe3e8;border:3px solid var(--ink);border-radius:14px;padding:8px 12px;font-weight:800;font-size:14px}
/* アリーナ */
  color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink)}
@keyframes popup{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.2)}100%{opacity:0;transform:translate(-50%,-44px) scale(1)}}
.log{min-height:2.6em;font-weight:900;font-size:15px;max-width:560px;padding:0 6px}
/* ガチャ */
.build,.result{width:100%;max-width:560px;display:flex;flex-direction:column;gap:10px}
.hand{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wcard{perspective:700px;aspect-ratio:3/4;max-height:150px;width:100%}
.wcard .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.wcard.flip .in{transform:rotateY(180deg)}
.wcard .f,.wcard .b{position:absolute;inset:0;backface-visibility:hidden;border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px}
.wcard .b{background:repeating-linear-gradient(45deg,#8b5cf6 0 10px,#7c4de8 10px 20px);color:#fff;font-size:34px;font-weight:900}
.wcard .f{transform:rotateY(180deg);background:#fff}
.wcard .f .wd{font-weight:900;font-size:clamp(17px,5.4vw,24px);line-height:1.15;word-break:break-all}
.wcard .f .st{font-size:13px;font-weight:900;letter-spacing:.05em}
.wcard .f .el{font-size:10px;font-weight:800;color:var(--muted)}
.wcard.r0 .f{background:#d9dde8}.wcard.r0 .st{color:#6b7280}
.wcard.r1 .f{background:#fff}.wcard.r1 .st{color:#8a84a8}
.wcard.r2 .f{background:#d8f8e3}.wcard.r2 .st{color:#1d9a57}
.wcard.r3 .f{background:#cdefff}.wcard.r3 .st{color:#1584b5}
.wcard.r4 .f{background:#e5d8ff}.wcard.r4 .st{color:#6a3fd0}
.wcard.r5 .f{background:linear-gradient(135deg,#fff3a8,#ffd1f0,#bff0ff);animation:rare 1.2s infinite alternate}
.wcard.r5 .st{color:#d97a00}
.wcard.r4.flip,.wcard.r5.flip{animation:big .6s}
.wcard.r0.flip{animation:sad .6s}
@keyframes rare{to{filter:brightness(1.12) saturate(1.3)}}
@keyframes big{30%{transform:scale(1.18) rotate(-3deg)}60%{transform:scale(1.1) rotate(2deg)}}
@keyframes sad{20%{transform:translateY(8px)}40%{transform:translateY(0)}60%{transform:translateY(5px)}}
.cmp{font-weight:900;font-size:14px;min-height:1.6em}
.cmp .up{color:#1d9a57}.cmp .down{color:var(--danger)}
.gbtns{display:flex;gap:10px}
.btn.go{flex:1.3;font-size:22px;padding:14px 8px}
.btn.stand{flex:1;font-size:16px;padding:14px 8px}
.hint{min-height:1.4em;font-size:12px;color:var(--muted);font-weight:700}
.hint.warn{color:var(--danger);font-weight:900}
/* 結果 */
.rtitle{font-size:38px;font-weight:900;letter-spacing:.05em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}
.rtitle.win{color:#59d98e}.rtitle.lose{color:var(--danger)}
.rsub{color:var(--ink);font-size:14px;line-height:1.6;font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.skip{position:absolute;right:12px;bottom:12px;font:inherit;font-size:12px;font-weight:900;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 12px}
.gfoot{position:relative;z-index:1;text-align:center;color:var(--muted);font-size:11px;font-weight:700;padding:0 14px calc(6px + env(safe-area-inset-bottom));flex:0 0 auto}
.gfoot a{text-decoration:underline}
@media (max-height:700px){.gfoot{display:none}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}
/* 演出: 必殺技カットイン / 決めの一撃 / 新記録 */
.cutin{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;display:flex;align-items:center;background:rgba(42,35,80,.55)}
.cutin.show{animation:cut 1.05s ease-out forwards}
.cutin .band{width:120%;margin-left:-10%;transform:rotate(-5deg);background:linear-gradient(90deg,var(--tomato),#ffc93c);border-top:5px solid var(--ink);border-bottom:5px solid var(--ink);padding:14px 0 12px;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.cutin small{display:block;font-weight:900;color:var(--ink);font-size:14px;letter-spacing:.2em}
.cutin b{display:block;font-size:min(13vw,76px);font-weight:900;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
@keyframes cut{0%{opacity:0}10%{opacity:1}85%{opacity:1}100%{opacity:0}}
.cutin.show .band{animation:slide .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes slide{from{transform:translateX(-120%) rotate(-5deg)}to{transform:translateX(0) rotate(-5deg)}}
.flash{position:fixed;inset:0;z-index:8;background:#fff;pointer-events:none;opacity:0}
.flash.show{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.95}100%{opacity:0}}
#stage.finish{animation:fin 1.4s}
@keyframes fin{0%{transform:scale(1)}10%{transform:scale(1.04) translate(5px,-4px)}20%{transform:scale(1.04) translate(-6px,4px)}30%{transform:scale(1.03) translate(4px,3px)}45%{transform:scale(1.02)}100%{transform:scale(1)}}
.record{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;text-align:center;background:rgba(255,244,214,.88)}
.record.show{animation:rec 2.2s ease-out forwards}
@keyframes rec{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.08)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.rk{font-size:min(11vw,60px);font-weight:900;letter-spacing:.04em;color:#ffc93c;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.rv{font-size:min(20vw,110px);font-weight:900;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink)}
.rs{font-size:18px;color:var(--ink);margin-top:10px;font-weight:900}
/* PC横画面: 左に履歴、右にプレイ */
@media (orientation:landscape) and (min-width:800px){
  #stage{flex-direction:row;padding:14px 28px;gap:20px;overflow:hidden}
  .history{width:250px;display:flex;flex-direction:column;padding:12px;min-height:0}
  .history ol{flex-direction:column;overflow-y:auto;overflow-x:hidden;flex:1}
  .history li{min-width:0;max-width:none;font-size:13px;padding:7px 12px}
  .play{overflow-y:auto}
}
@media (orientation:landscape) and (min-width:800px) and (max-height:820px){
  .fighter .dimg{max-width:140px}
  .vs{padding-bottom:30px;font-size:18px}
  .play{gap:6px;padding:8px 10px}
  .log{min-height:1.6em}
  .wcard{max-height:96px}
  .wcard .b{font-size:24px}
  .btn.go,.btn.stand{padding:9px 8px;font-size:17px}
}
.log:empty{display:none}

/* ---- 走って突進するステージ ---- */
.world{position:relative;width:100%;max-width:640px;height:min(46vw,250px);min-height:190px;overflow:hidden;border:3px solid var(--ink);border-radius:20px;background:linear-gradient(#bfeaff 0 58%,#9be37a 58%)}
.world .layer{position:absolute;left:0;right:0;background-repeat:repeat-x}
.world .hills{bottom:42%;height:34%;background:radial-gradient(ellipse 120px 80px at 60px 100%,#7fd36a 98%,transparent 100%) 0 0/200px 100%,radial-gradient(ellipse 90px 60px at 150px 100%,#6cc45a 98%,transparent 100%) 0 0/260px 100%}
.world .ground{bottom:0;height:42%;background:repeating-linear-gradient(90deg,#8fda6f 0 38px,#85d065 38px 76px);border-top:3px solid var(--ink)}
.world.running .hills{animation:scrollx var(--hs,6s) linear infinite}
.world.running .ground{animation:scrollx var(--gs,1.4s) linear infinite}
@keyframes scrollx{to{background-position-x:-400px}}
.hero{position:absolute;bottom:6%;left:50%;width:min(44vw,210px);transform:translateX(-50%);transition:left .7s cubic-bezier(.3,1.2,.5,1),width .7s,transform .7s}
.world.running .hero{left:6%;width:min(30vw,150px);transform:none}
.hero .himg svg,.hero .himg img{width:100%;height:auto;display:block}
.world.running .hero .himg{animation:bob .32s infinite alternate ease-in-out}
@keyframes bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-8px) rotate(2deg)}}
.hero.lunge .himg{animation:lunge .3s}
@keyframes lunge{40%{transform:translateX(24px) scale(1.08)}}
.hero.hurt .himg{animation:hurtx .3s}
@keyframes hurtx{25%{transform:translateX(-10px);filter:brightness(2) saturate(.3)}60%{transform:translateX(5px)}}
.hero.ko .himg{animation:ko 1s forwards}
@keyframes ko{to{transform:rotate(90deg) translateX(40px);filter:grayscale(1);opacity:.7}}
.world.charging .hero .himg{animation:shake .08s infinite}
@keyframes shake{25%{transform:translate(-4px,2px) scale(1.02)}75%{transform:translate(4px,-2px) scale(1.04)}}
.world.charging{animation:wshake .12s infinite}
@keyframes wshake{25%{transform:translate(2px,-2px)}75%{transform:translate(-2px,2px)}}
.foe{position:absolute;bottom:6%;left:110%;width:110px;z-index:2}
.foe .fimg svg,.foe .fimg img{width:100%;height:auto;display:block}
.foe .fhp{height:8px;border:2px solid var(--ink);border-radius:99px;background:#fff;overflow:hidden;margin:0 10% 2px}
.foe .fhp i{display:block;height:100%;width:100%;background:var(--tomato);transition:width .15s}
.foe.hurt .fimg{animation:hurtx .3s}
.foe.fly{transition:none!important;animation:fly .75s ease-out forwards;pointer-events:none}
@keyframes fly{to{transform:translate(340px,-260px) rotate(900deg) scale(.5);opacity:0}}
.dpop{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-weight:900;font-size:26px;pointer-events:none;opacity:0;white-space:nowrap;
  color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);z-index:5}
.dpop.show{animation:popup .8s ease-out}
.dpop.crit{color:#ffc93c;font-size:34px}.dpop.kill{color:var(--mint);font-size:30px}.dpop.hurt{color:var(--danger)}
.hud{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;z-index:6}
.hud .hp{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 10px;font-weight:900;font-size:12px;min-width:44%}
.hud .hp .hpbar{flex:1;height:12px;border-radius:99px;background:#eee;border:2px solid var(--ink);overflow:hidden;visibility:visible;margin:0}
.hud .hp .hpbar i{display:block;height:100%;width:100%;background:var(--mint);transition:width .2s}
.hud .kills{background:#ffc93c;border:3px solid var(--ink);border-radius:14px;padding:0 12px;text-align:center;box-shadow:3px 3px 0 var(--ink)}
.hud .kills small{display:block;font-size:10px;font-weight:900;line-height:1.2}
.hud .kills b{font-size:24px;line-height:1}
.chargefx{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.chargefx .ring{position:absolute;left:50%;top:60%;width:40px;height:40px;margin:-20px;border:6px solid #ffc93c;border-radius:50%;opacity:0;animation:ringx 1s infinite}
.chargefx .r2{animation-delay:.5s;border-color:#ff6b4a}
@keyframes ringx{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(9)}}
.cname{font-weight:900;font-size:min(8vw,34px);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);animation:namein .5s}
@keyframes namein{from{transform:scale(2.5);opacity:0}}
.cshout{font-weight:900;font-size:min(14vw,64px);color:#ff6b4a;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);margin-top:2px;animation:shout 1.8s forwards}
@keyframes shout{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.35)}}
.herotag{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.herotag .fn{font-weight:900;font-size:14px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:1px 10px}
.herotag .fp{font-size:12px;font-weight:900}
.result .big{font-size:min(16vw,76px);line-height:1}
/* 調整: ステージを大きく・ため演出の文字を小さく */
.world{height:min(62vw,300px);min-height:230px}
.cname{font-size:min(5.6vw,24px);max-width:92%;text-align:center;line-height:1.2;-webkit-text-stroke:3px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.cshout{font-size:min(11vw,48px);white-space:nowrap;-webkit-text-stroke:4px var(--ink);text-shadow:4px 4px 0 var(--ink)}
@keyframes shout{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.1)}}
.foe .fhp{margin-bottom:-14%}
.foe .fhp{display:none}

/* ---- ★6(神)のカード ---- */
.wcard.r6 .f{background:linear-gradient(135deg,#fff3a8,#ffb3e6,#aee9ff,#fff3a8);background-size:300% 300%;animation:rainbow 1.6s linear infinite;box-shadow:0 0 0 3px #ffc93c,0 0 24px #ffc93c}
.wcard.r6 .st{color:#c0188a;font-size:15px}
.wcard.r6.flip{animation:big .8s}
@keyframes rainbow{to{background-position:300% 300%}}
/* ---- ロケット加速: 加速が高い間は飛ぶ ---- */
.hero .himg{position:relative}
.world.flying .hero{bottom:30%}
.world.flying .hero .himg::after{content:'';position:absolute;left:-34%;top:42%;width:62%;height:28%;border-radius:50%;background:linear-gradient(90deg,transparent,#ff6b4a 45%,#ffe27a);animation:flame .07s infinite alternate;z-index:-1}
@keyframes flame{to{transform:scaleX(1.5) scaleY(.75)}}
.world.flying::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.7) 22px 24px);background-size:200px 100%;animation:streak .18s linear infinite;opacity:.55}
@keyframes streak{to{background-position-x:-200px}}
.world.flying .ground{filter:blur(1px)}
.hero{transition:left .7s cubic-bezier(.3,1.2,.5,1),width .7s,transform .7s,bottom .6s ease-out}

.shareimg{width:100%;max-width:520px;border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);align-self:center}
.bosstag{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#ff4d6d;color:#fff;border:3px solid var(--ink);border-radius:999px;padding:0 12px;font-weight:900;font-size:13px;letter-spacing:.15em;z-index:6}