:root{
  --ink:#0b0e2c; --deep:#151a4a; --panel:rgba(14,18,60,.82); --line:rgba(150,172,255,.30);
  --ring:#7de7ff; --pulse:#ff6fa6; --gold:#ffd66b; --mist:#c5cffd; --text:#f2f5ff;
  --easy:#5fe08f; --normal:#55b6ff; --hard:#ffb443; --expert:#ff5a86;
  --font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  color-scheme:dark;
}
html,body{height:100%;margin:0;padding:0;touch-action:manipulation;-webkit-text-size-adjust:100%;}
body{position:fixed;inset:0;}
/* 安全領域(ノッチ・ホームバー)を測るための見えない箱 */
#safeProbe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
*,*::before,*::after{box-sizing:border-box;}
body{
  background:var(--ink);color:var(--text);font-family:var(--font);font-weight:500;
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
}
#frame{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;}
#stage{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform-origin:0 0;--sw:390px;}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none;}
button{font-family:inherit;color:inherit;cursor:pointer;}
button:focus-visible,input:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:none;z-index:5;}
.screen.on{display:flex;}

#menu{background:transparent;}
/* 曲選択: イラストをぼかして背景に */
.menu-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--ink);}
.menu-bg::before{content:"";position:absolute;inset:-40px;background:url("img/bg.jpg") center/cover no-repeat;filter:blur(18px) brightness(.5) saturate(1.2);}
.menu-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,44,.15),rgba(11,14,44,.65));}
.menu-inner{position:relative;z-index:1;}
/* ジャケット(曲のイラスト) */
.jacket{display:block;width:100%;max-width:520px;aspect-ratio:16 / 9;object-fit:cover;border-radius:18px;
  border:2px solid rgba(255,255,255,.55);box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 6px rgba(125,231,255,.12);background:#1b1f55;}
.songtitle{margin:12px 0 0;font-weight:800;font-size:clamp(24px,calc(var(--sw) * .06),38px);line-height:1.1;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);}
.songtitle span{font-size:.62em;color:var(--ring);letter-spacing:.05em;margin-left:.3em;}
.menu-inner{
  width:100%;max-width:960px;margin:0 auto;height:100%;overflow-y:auto;
  padding:clamp(16px,calc(var(--sw) * .04),34px);
  display:grid;grid-template-rows:1fr auto auto auto;gap:14px;
}
.titleblock{align-self:end;padding-bottom:6px;}
.jp{
  margin:0;font-weight:800;line-height:1;letter-spacing:.02em;
  font-size:clamp(84px,calc(var(--sw) * .27),168px);color:#fff;
  text-shadow:.05em 0 0 rgba(125,231,255,.55),.10em 0 0 rgba(125,231,255,.30),.15em 0 0 rgba(125,231,255,.14),.20em 0 0 rgba(125,231,255,.06);
}
.en{margin:6px 0 0;font-size:clamp(22px,calc(var(--sw) * .064),38px);font-weight:800;letter-spacing:.06em;color:var(--ring);}
.meta{margin:4px 0 0;color:var(--mist);font-size:14px;}

.diffs{display:grid;gap:8px;}
.diff{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:11px 16px 11px 14px;text-align:left;border-radius:16px;
  background:rgba(20,26,84,.55);border:1.5px solid var(--line);border-left:6px solid var(--c);
}
.diff[aria-checked="true"]{background:rgba(34,42,120,.85);border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 26px -6px var(--c);}
.dname{font-weight:800;font-size:19px;color:var(--c);min-width:5.4em;}
.dinfo{color:var(--mist);font-size:13px;}
.dinfo b{color:var(--text);font-size:15px;}
.dbest{font-size:13px;color:var(--mist);text-align:right;font-variant-numeric:tabular-nums;}

.actions{display:flex;gap:10px;align-items:stretch;}
.primary{
  flex:1;border:0;border-radius:999px;padding:15px 24px;font-weight:800;font-size:20px;
  background:var(--pulse);color:#2a0620;
}
.primary:disabled{opacity:.45;cursor:default;}
.ghost{
  border:1.5px solid var(--line);background:rgba(20,26,84,.55);border-radius:999px;padding:15px 22px;font-weight:800;font-size:16px;
}
.help{margin:0;color:var(--mist);font-size:12.5px;line-height:1.6;}
#loadmsg{color:var(--gold);}

.land .menu-inner{grid-template-columns:1fr 1.05fr;grid-template-rows:1fr auto auto;column-gap:32px;align-content:center;}
.land .titleblock{grid-row:1 / span 3;align-self:center;}
.land .jp{font-size:clamp(70px,calc(var(--sw) * .17),150px);}
.short .jacket{max-height:calc(var(--sh) - 150px);width:auto;max-width:100%;}
.short .songtitle{font-size:24px;margin-top:8px;}
.land .diffs{grid-column:2;align-self:end;}
.land .actions{grid-column:2;}
.land .help{grid-column:2;}
.short .diff{padding:7px 14px 7px 12px;}
.short .primary,.short .ghost{padding:10px 20px;}
.short .help{display:none;}

/* ---------- cards (settings / pause / result) ---------- */
.overlay{background:rgba(6,8,30,.72);align-items:center;justify-content:center;padding:16px;}
.card{
  width:min(440px,100%);max-height:100%;overflow-y:auto;background:var(--panel);border:1.5px solid var(--line);border-radius:26px;
  padding:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.card h2{margin:0 0 14px;font-size:22px;font-weight:800;}
.row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:14px 0;}
.row label{font-weight:800;font-size:15px;}
.row output{color:var(--ring);font-weight:800;font-variant-numeric:tabular-nums;}
.row input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--pulse);height:28px;}
.row small{grid-column:1 / -1;color:var(--mist);font-size:12px;line-height:1.5;}
.row .lbl{font-weight:800;font-size:15px;}
.seType{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px;}
.seType button{border:1.5px solid var(--line);background:rgba(20,26,84,.55);border-radius:12px;padding:10px 4px;font-weight:800;font-size:15px;}
.seType button[aria-checked="true"]{background:var(--pulse);color:#2a0620;border-color:transparent;}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;}
.switch span{font-weight:800;font-size:15px;}
.switch small{display:block;color:var(--mist);font-weight:500;font-size:12px;margin-top:2px;}
.switch input{width:26px;height:26px;accent-color:var(--pulse);flex:none;}
.stack{display:grid;gap:10px;margin-top:8px;}
.btn{border:1.5px solid var(--line);background:rgba(28,36,110,.7);border-radius:999px;padding:14px 20px;font-weight:800;font-size:17px;}
.btn.main{background:var(--pulse);color:#2a0620;border-color:transparent;}

#pauseWhy:empty{display:none;}
.why{margin:12px 0 0;color:var(--mist);font-size:12px;text-align:center;opacity:.8;}
#btnPause{
  position:absolute;z-index:4;top:10px;right:10px;width:44px;height:44px;border-radius:50%;display:none;
  border:1.5px solid var(--line);background:rgba(14,18,60,.6);align-items:center;justify-content:center;padding:0;
}
#btnPause.on{display:flex;transition:background .6s linear;}
#btnPause.holding{background:rgba(255,111,166,.65);}
#pauseHint{
  position:absolute;z-index:4;top:60px;right:10px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;
  background:rgba(14,18,60,.85);border:1.5px solid var(--line);opacity:0;pointer-events:none;transition:opacity .2s;
}
#pauseHint.on{opacity:1;}
#btnPause i{display:block;width:5px;height:16px;border-radius:2px;background:var(--text);margin:0 2.5px;}

#result .card{text-align:center;}
.short .overlay{padding:10px;}
.short .card{padding:16px 18px;border-radius:20px;}
.short .card h2{margin-bottom:10px;font-size:19px;}
.short .btn{padding:11px 18px;font-size:16px;}.short #result .card,#result .card{width:min(720px,100%);display:grid;grid-template-columns:1fr 1.25fr;gap:4px 22px;align-items:center;}
.short #result .rank{font-size:48px;}
.short #result .rank.F{font-size:44px;margin:6px 0;}
.short #result .rscore{font-size:30px;}
.short #result .grid{margin:0 0 8px;font-size:14px;gap:2px 16px;}
.short #result .stack{margin-top:4px;}
.short #settings .card{width:min(560px,100%);}
.rank{font-size:96px;font-weight:800;line-height:1;margin:0;font-style:italic;}
.rank.S{color:var(--gold);text-shadow:0 0 30px rgba(255,214,107,.5);}
.rank.F{color:var(--expert);font-size:58px;letter-spacing:.02em;margin:18px 0 8px;}
.rank.A{color:var(--pulse);}.rank.B{color:var(--ring);}.rank.C{color:var(--easy);}.rank.D{color:var(--mist);}
.badge{display:inline-block;margin:6px 0 2px;padding:5px 16px;border-radius:999px;font-weight:800;font-size:14px;background:var(--gold);color:#3a2600;}
.badge.fc{background:var(--ring);color:#04283a;}
.badge[hidden]{display:none;}
.rscore{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0 4px;}
.rnew{color:var(--gold);font-weight:800;font-size:14px;min-height:20px;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;margin:14px 0 6px;text-align:left;font-size:15px;}
.grid div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:4px 0;}
.grid b{font-variant-numeric:tabular-nums;}
.c-p{color:#fff2b0}.c-g{color:#ffa9d3}.c-o{color:#9cf5b8}.c-b{color:#98b8ff}.c-m{color:#9aa0c4}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}}

/* ================= 楽曲選択 ================= */
.menu-bg::before{background-image:var(--bgimg,none);}
.sel{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,.9fr) auto;
  gap:8px 18px;padding:10px 12px 10px;}
.land .sel{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;grid-template-rows:auto minmax(0,1fr);padding:10px 16px 12px 14px;}
.sel-head{grid-column:1 / -1;display:flex;align-items:center;gap:10px;}
.pill{display:inline-flex;align-items:baseline;gap:10px;padding:6px 18px 6px 16px;border-radius:999px;background:var(--pulse);color:#2a0620;
  box-shadow:0 4px 14px rgba(255,111,166,.35);transform:skewX(-10deg);}
.pill b,.pill small{display:inline-block;transform:skewX(10deg);}
.pill b{font-size:16px;font-weight:800;}
.pill small{font-size:12px;font-weight:800;opacity:.75;}
.iconbtn{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:rgba(14,18,60,.7);display:grid;place-items:center;padding:0;}

.sel-left{position:relative;min-height:0;display:flex;flex-direction:column;}
.songlist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:40% 18px 40% 10px;
  display:flex;flex-direction:column;gap:9px;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);}
.songlist::-webkit-scrollbar{display:none;}
.song{position:relative;flex:none;display:block;width:88%;margin-left:6%;height:54px;padding:0;border:0;background:none;text-align:left;
  transition:width .18s,margin .18s,height .18s;}
.song .skew{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:6px 18px 6px 22px;border-radius:12px;
  transform:skewX(-12deg);background:linear-gradient(180deg,rgba(235,240,255,.22),rgba(200,210,255,.12));border:1.5px solid rgba(255,255,255,.35);
  box-shadow:0 4px 12px rgba(0,0,0,.25);overflow:hidden;}
.song .skew>*{transform:skewX(12deg);}
.song .tag{justify-self:start;font-size:10px;font-weight:800;padding:1px 8px;border-radius:6px;background:#4fb4ff;color:#fff;}
.song .stitle{align-self:center;font-weight:800;font-size:17px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.song .stitle small{font-size:.66em;margin-left:.6em;color:#d7e4ff;font-weight:800;}
.song .smeta{display:none;font-size:11.5px;font-weight:800;color:#ffe3ef;}
.song[aria-selected="true"]{width:100%;margin-left:0;height:86px;}
.song[aria-selected="true"] .skew{background:linear-gradient(180deg,#ff86b4,#ff5a93);border-color:#fff;box-shadow:0 8px 24px rgba(255,90,147,.45),0 0 0 3px rgba(255,255,255,.25);}
.song[aria-selected="true"] .stitle{font-size:24px;}
.song[aria-selected="true"] .smeta{display:block;}
.song.soon .skew{background:rgba(160,170,210,.10);border-style:dashed;border-color:rgba(255,255,255,.22);}
.song.soon .stitle{grid-row:1 / -1;color:rgba(220,228,255,.45);font-size:14px;letter-spacing:.12em;}

.tool{border:1.5px solid rgba(255,255,255,.4);background:rgba(240,244,255,.14);border-radius:12px;font-weight:800;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.tool small{font-size:10px;font-weight:800;opacity:.85;}
.sortbtn{position:static;z-index:2;padding:6px 10px;font-size:12.5px;background:rgba(14,18,60,.78);}
.sortbtn small{color:var(--pulse);}

.sel-right{min-height:0;display:flex;flex-direction:column;gap:8px;}
.jacketbox{flex:1;min-height:60px;display:flex;align-items:center;justify-content:center;}
.jacketbox .jacket{height:100%;width:auto;max-width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:14px;max-height:100%;
  border:3px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 5px rgba(95,224,143,.45);}
.selinfo{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch;}
.selname{display:none;}
.hs,.nn{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:10px;background:rgba(245,248,255,.9);color:#2a2f5c;}
.hs span,.nn span{font-size:11px;font-weight:800;color:#6b7199;}
.hs b,.nn b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.hs{grid-column:1 / 3;}
.srank{font-style:italic;font-weight:800;font-size:17px;}
.srank.rS{color:#e0a800}.srank.rA{color:#ff4f86}.srank.rB{color:#1aa6d6}.srank.rC{color:#2fb86a}.srank.rD{color:#8a90b4}
.hs em{font-style:normal;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--ring);color:#04283a;}
.hs em[hidden]{display:none;}
.dsel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 8px;border-radius:14px;background:rgba(245,248,255,.14);border:1.5px solid rgba(255,255,255,.2);}
.dbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;aspect-ratio:1;max-height:62px;margin:0 auto;height:100%;
  border-radius:50%;border:3px solid rgba(255,255,255,.55);background:rgba(220,226,245,.25);color:rgba(255,255,255,.7);padding:0;min-width:48px;}
.dbtn .dlv{font-size:18px;font-weight:800;line-height:1.05;}
.dbtn .dname{font-size:8.5px;font-weight:800;letter-spacing:.03em;color:var(--c);min-width:0;}
.dbtn[aria-checked="true"] .dname{color:#fff;}
.dbtn[aria-checked="true"]{background:var(--c);color:#fff;border-color:#fff;box-shadow:0 0 0 3px var(--c),0 6px 16px rgba(0,0,0,.3);transform:scale(1.08);}
.selact{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch;}
.randbtn{width:62px;padding:4px 0;}
.randbtn.spin svg{animation:spin .45s ease;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.selact .primary{padding:12px 20px;font-size:22px;border-radius:16px;box-shadow:0 6px 0 #c23e72,0 10px 22px rgba(255,90,147,.35);transform:translateY(-3px);}
.selact .primary:active{transform:translateY(0);box-shadow:0 2px 0 #c23e72;}
.selact .primary:disabled{box-shadow:none;transform:none;}
.sel .help{margin:0;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--mist);min-height:14px;}
#loadmsg{color:var(--gold);}
.howto{margin:14px 0 6px;font-size:12px;line-height:1.6;color:var(--mist);}
.rsong{margin:0 0 6px;color:var(--mist);font-size:13px;font-weight:800;}
/* 縦長(回転なし)のとき */
.sel:not(.x) .jacketbox{max-height:34vh;}
.land .sel .jacketbox{max-height:none;}
.short .dbtn{max-height:52px;min-width:44px;}
.short .dbtn .dlv{font-size:16px;}
.short .selact .primary{padding:8px 16px;font-size:19px;}
.short .hs,.short .nn{padding:3px 10px;}
.short .hs b,.short .nn b{font-size:15px;}
.short .song{height:46px;}
.short .song[aria-selected="true"]{height:74px;}
.short .song[aria-selected="true"] .stitle{font-size:20px;}

/* ================= タイトル画面 ================= */
body.title-on{background:#9be7ff;}
#title{background:linear-gradient(180deg,#b0ecff 0%,#9be7ff 50%,#85e1ff 100%);align-items:center;justify-content:center;z-index:6;
  transition:opacity .45s ease;}
#title.fade{opacity:0;pointer-events:none;}
.titlewrap{position:relative;width:100%;max-width:calc(var(--sh,100vh) * 16 / 9);aspect-ratio:16 / 9;max-height:100%;}
.titleart{display:block;width:100%;height:100%;object-fit:contain;}
.tapstart{position:absolute;left:61.8%;top:72%;transform:translateX(-50%);margin:0;white-space:nowrap;
  font-weight:800;font-size:clamp(18px,calc(var(--sw,390px) * .038),40px);letter-spacing:.14em;color:#fff;
  text-shadow:0 2px 10px rgba(0,120,190,.55),0 0 22px rgba(255,255,255,.65);
  animation:blink 1.8s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tapstart{animation:none;}}

/* ================= メニュー画面 ================= */
#home{align-items:center;justify-content:center;background:linear-gradient(180deg,#b0ecff,#85e1ff);}   /* 背景画像が読み込まれるまでの下地 */
.home-bg::before{inset:0;background-image:url("img/home.jpg");filter:none;}
.home-bg::after{background:linear-gradient(180deg,rgba(11,14,44,0),rgba(11,14,44,.18));}
.homeinner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;height:100%;padding:14px;}
  width:100%;height:100%;padding:14px;}
.homelogo{width:min(420px,72%);max-height:42%;object-fit:cover;object-position:62% 45%;aspect-ratio:16 / 7;border-radius:18px;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 12px 34px rgba(0,0,0,.45);}
.homebtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(380px,68%);max-height:80vh;overflow-y:auto;position:absolute;right:12%;top:50%;transform:translateY(-50%);}
.homebtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:18px;font-weight:800;font-size:22px;
  border:1.5px solid var(--line);background:rgba(20,26,84,.75);color:#fff;}
.homebtn small{font-size:12px;font-weight:800;color:var(--mist);}
.homebtn.main{background:var(--pulse);color:#2a0620;border-color:transparent;box-shadow:0 6px 0 #c23e72,0 10px 22px rgba(255,90,147,.35);}
.homebtn.main small{color:rgba(42,6,32,.7);}
.homebtn.main:active{transform:translateY(3px);box-shadow:0 2px 0 #c23e72;}
.land .homeinner{flex-direction:row;justify-content:flex-end;padding-right:6%;gap:26px;}
.land .homelogo{width:44%;max-height:74%;}
.land .homebtns{width:min(360px,42%);}
.short .homebtn{padding:10px 18px;font-size:19px;}
.iconbtn.back{margin-right:2px;}
.sel-head{gap:8px;}
.sel-head .pill{margin-right:auto;}

/* ================= アカウント / カード / ガチャ ================= */
.homebtn.small{font-size:17px;padding:10px 18px;}
.accname{margin:0 0 6px;font-size:17px;font-weight:800;}
.accnote,.accerr{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--mist);}
.accerr{color:#ff9cb8;min-height:18px;}
.row input[type=text],.row input[type=password]{-webkit-text-security:none;grid-column:1 / -1;width:100%;padding:11px 14px;border-radius:12px;font-size:16px;
  border:1.5px solid var(--line);background:rgba(8,10,40,.7);color:var(--text);font-family:inherit;}
.sub{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;gap:8px;padding:10px 12px;}
.subnote{margin:0;font-size:12px;color:var(--mist);}
.deckpow,.gems{font-weight:800;font-size:13px;color:var(--mist);}
.deckpow b,.gems b{color:#fff;font-size:17px;font-variant-numeric:tabular-nums;}
.deckrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.deckslot{position:relative;aspect-ratio:3 / 4;border-radius:12px;border:1.5px dashed var(--line);background:rgba(245,248,255,.10);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;}
.deckslot.filled{border-style:solid;}
.deckslot img{width:100%;height:100%;object-fit:cover;}
.deckslot .slotno{position:absolute;left:4px;top:3px;font-size:10px;font-weight:800;color:var(--mist);text-shadow:0 1px 3px #000;}
.deckslot .lead{position:absolute;right:4px;top:3px;font-size:9px;font-weight:800;background:var(--gold);color:#3a2600;border-radius:6px;padding:1px 5px;}
.cardgrid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding-bottom:6px;}
.cardcell{position:relative;aspect-ratio:3 / 4;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:rgba(8,10,40,.6);padding:0;}
.cardcell img{width:100%;height:100%;object-fit:cover;}
.cardcell.r3{border-color:var(--gold);}
.cardcell.r4{border-color:var(--pulse);box-shadow:0 0 12px -2px var(--pulse);}
.cardcell.unknown{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:center;}
.cardcell.unknown .qmark{font-size:30px;font-weight:800;color:rgba(220,228,255,.35);}
.cardcell .cnt{position:absolute;right:3px;top:3px;font-size:10px;font-weight:800;background:rgba(8,10,40,.8);border-radius:6px;padding:1px 5px;}
.cardcell .skill{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:800;padding:3px 4px;background:linear-gradient(transparent,rgba(6,8,30,.92));}
.cardcell.inDeck{outline:3px solid var(--ring);outline-offset:-3px;}
.gachaarea{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:center;overflow-y:auto;}
.gachaarea .got{position:relative;aspect-ratio:3 / 4;border-radius:12px;overflow:hidden;border:2px solid var(--line);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1) backwards;}
.gachaarea .got img{width:100%;height:100%;object-fit:cover;}
.gachaarea .got.r3{border-color:var(--gold);}
.gachaarea .got.r4{border-color:var(--pulse);box-shadow:0 0 16px -2px var(--pulse);}
.gachaarea .got .new{position:absolute;left:3px;top:3px;font-size:9px;font-weight:800;background:var(--pulse);color:#2a0620;border-radius:6px;padding:1px 5px;}
@keyframes pop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.gachaempty{grid-column:1 / -1;text-align:center;color:var(--mist);font-size:13px;}
.gachabtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gachabtns .btn{display:flex;flex-direction:column;gap:1px;padding:10px 16px;}
.gachabtns .btn small{font-size:11px;opacity:.8;}
.short .cardgrid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));}
.short .gachabtns .btn{padding:8px 14px;font-size:16px;}

/* カード・ガチャ画面は背景を暗くして文字を読みやすく */
#cards .home-bg::after,#gacha .home-bg::after{background:linear-gradient(180deg,rgba(11,14,44,.80),rgba(11,14,44,.90));}
#cards .home-bg::before,#gacha .home-bg::before{filter:blur(14px) brightness(.7);}
.deckslot{max-height:calc(var(--sh,600px) * .34);margin:0 auto;width:100%;}
.deckrow{align-items:start;}
.sel-head .deckpow,.sel-head .gems{margin-left:auto;white-space:nowrap;}

.short .deckslot{max-height:calc(var(--sh,400px) * .30);}
.short .cardgrid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;}
.short .cardcell .skill{font-size:8px;padding:2px 3px;}
.short .subnote{font-size:11px;}

.codebox{margin:0 0 12px;padding:14px;border-radius:14px;background:rgba(8,10,40,.8);border:1.5px solid var(--ring);
  font-size:clamp(20px,calc(var(--sw,390px) * .05),30px);font-weight:800;letter-spacing:.12em;text-align:center;color:var(--ring);
  font-family:ui-monospace,Menlo,Consolas,monospace;user-select:all;-webkit-user-select:all;}
.btn.slim{padding:9px 16px;font-size:14px;}

.row input.pw{-webkit-text-security:disc;text-security:disc;}   /* type=textのまま見た目だけ伏せ字にする(パスワード欄だとiOSがかな漢字変換を禁止するため) */

/* ================= カード画面: デッキと所持カードを別の区画に ================= */
.cardsbody{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;}
.land .cardsbody{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.panel{min-height:0;display:flex;flex-direction:column;gap:8px;border-radius:18px;padding:10px 12px 12px;}
.panelhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.panelhead>b{font-size:15px;letter-spacing:.08em;}
/* デッキ: 金色の枠・明るい地で「ここが編成中」と分かるように */
.deckpanel{background:linear-gradient(180deg,rgba(255,214,107,.16),rgba(255,214,107,.06));
  border:2px solid rgba(255,214,107,.75);box-shadow:0 0 24px -8px rgba(255,214,107,.55) inset;}
.deckpanel .panelhead>b{color:var(--gold);}
.deckpanel .deckpow{margin-left:0;}
.deckpanel .deckrow{flex:1;min-height:0;align-items:center;}
.deckslot{background:rgba(11,14,44,.55);border-color:rgba(255,214,107,.45);}
.deckslot.filled{border-color:rgba(255,214,107,.95);}
/* 所持カード: 落ち着いた暗い地・細い枠 */
.ownpanel{background:rgba(8,10,34,.55);border:1.5px solid var(--line);}
.ownpanel .panelhead>b{color:var(--mist);}
.owncount{font-size:12px;font-weight:800;color:var(--mist);}
.ownpanel .cardgrid{flex:1;min-height:0;}
.land .deckslot{max-height:calc(var(--sh,400px) * .52);}
.short.land .deckslot{max-height:calc(var(--sh,400px) * .5);}

/* 所持カードが重ならないように、行の高さをカードの大きさに合わせる */
.ownpanel .cardgrid{align-content:start;grid-auto-rows:max-content;overflow-y:auto;}
.cardcell{width:100%;height:auto;align-self:start;}

#account.on ~ #frame,
body:has(#account.on) #frame {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
}

/* アカウント画面 縦持ち横向き対応 */
#stage:not(.land) #account.on,
#stage:not(.land) #settings.on {
  transform: rotate(90deg) translateX(0);
  transform-origin: 0 0;
  width: var(--sh);
  height: var(--sw);
}

/* 縦持ち時はページ全体を90度回転して横向き表示 */


@media (orientation: portrait) {
  #portraitLock { display: flex !important; }
}
.homebtn-account{display:flex;flex-direction:row;align-items:center;gap:6px;padding:5px 16px;border-radius:18px;font-weight:800;font-size:13px;background:rgba(42,6,32,.5);color:var(--mist);white-space:nowrap;position:absolute;right:4%;bottom:6%;}
#stage.land .sel{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;}