:root{
  --bg:#05030c;
  --p1:#46e0ff;
  --p2:#ff3d8b;
  --gold:#ffcf4a;
  --ink:#f4f1ff;
  --dim:#a9a3c4;
  --ui:"Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;
  --brush:"Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); overflow:hidden; overscroll-behavior:none; }
body{ font-family:var(--ui); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#ink{ touch-action:none; cursor:crosshair; }
button{ font:inherit; color:inherit; }

/* ---------- HUD ---------- */
#hud{ position:fixed; inset:0; pointer-events:none; }
#hud[hidden]{ display:none; }
.side{ position:absolute; top:max(14px, env(safe-area-inset-top)); width:min(40vw, 420px); }
.side.p1{ left:16px; }
.side.p2{ right:16px; text-align:right; }
.nm{ font-size:15px; letter-spacing:.1em; margin-bottom:6px; text-shadow:0 0 10px currentColor; }
.p1 .nm{ color:var(--p1); } .p2 .nm{ color:var(--p2); }
.hp{ position:relative; height:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.25); transform:skewX(-18deg); overflow:hidden; }
.hp b,.hp i{ position:absolute; top:0; bottom:0; width:100%; transition:none; }
.p1 .hp b,.p1 .hp i{ left:0; } .p2 .hp b,.p2 .hp i{ right:0; }
.hp b{ background:#fff; opacity:.75; }
.p1 .hp i{ background:linear-gradient(90deg, #1f7fff, var(--p1)); box-shadow:0 0 14px var(--p1); }
.p2 .hp i{ background:linear-gradient(270deg, #b0105a, var(--p2)); box-shadow:0 0 14px var(--p2); }
.hp.low i{ animation:low .5s steps(2) infinite; }
@keyframes low{ 50%{ filter:brightness(1.8); } }
.mp{ position:relative; margin-top:6px; height:7px; width:72%; background:rgba(255,255,255,.07); transform:skewX(-18deg); }
.p2 .mp{ margin-left:auto; }
.mp i{ position:absolute; top:0; bottom:0; width:0; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.p1 .mp i{ left:0; } .p2 .mp i{ right:0; }
.mp.ready i{ background:#fff3b8; }
.mp span{ position:absolute; top:9px; font-size:10px; color:var(--dim); transform:skewX(18deg); }
.p1 .mp span{ left:0; } .p2 .mp span{ right:0; }
.hint{ position:absolute; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px);
  font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); text-align:center; opacity:.85; }
.hint em{ font-style:normal; font-family:var(--brush); font-size:18px; color:var(--ink); }
#chip{ position:absolute; left:50%; bottom:calc(max(14px, env(safe-area-inset-bottom)) + 30px); transform:translateX(-50%);
  font-size:14px; padding:6px 14px; border-radius:999px; background:rgba(10,6,24,.6); border:1px solid rgba(255,255,255,.18); opacity:0; transition:opacity .25s; white-space:nowrap; }
#chip.on{ opacity:1; }
#chip .c{ font-family:var(--brush); font-size:22px; vertical-align:-3px; margin-right:6px; }
#quit{ pointer-events:auto; position:absolute; top:max(14px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(10,6,24,.5); color:var(--dim); font-size:18px; cursor:pointer; }

/* ---------- 浮かぶ文字 ---------- */
#fx{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.pop{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-weight:400; will-change:transform, opacity; }
.glyph{ font-family:var(--brush); font-size:clamp(64px, 13vmin, 140px); line-height:1; animation:glyph 1s cubic-bezier(.2,1.4,.4,1) forwards; }
.glyph.p1{ color:#dffbff; text-shadow:0 0 12px var(--p1), 0 0 34px var(--p1), 0 0 70px #1f7fff; }
.glyph.p2{ color:#ffe3ef; text-shadow:0 0 12px var(--p2), 0 0 34px var(--p2), 0 0 70px #b0105a; }
@keyframes glyph{
  0%{ transform:translate(-50%,-50%) scale(2.4) rotate(-8deg); opacity:0; filter:blur(8px); }
  18%{ transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; filter:blur(0); }
  70%{ transform:translate(-50%,-62%) scale(1.04); opacity:1; }
  100%{ transform:translate(-50%,-90%) scale(1.15); opacity:0; filter:blur(4px); }
}
.msg{ font-size:clamp(20px, 4.2vmin, 40px); letter-spacing:.06em; animation:msg 1.1s ease-out forwards; text-shadow:0 0 10px currentColor, 0 2px 0 #000; }
.msg.gold{ color:var(--gold); font-size:clamp(26px, 6vmin, 58px); }
.msg.dmg{ color:#fff; font-size:clamp(22px, 4.6vmin, 44px); }
.msg.small{ font-size:clamp(14px, 2.6vmin, 22px); color:var(--dim); }
@keyframes msg{
  0%{ transform:translate(-50%,-30%) scale(.6); opacity:0; }
  15%{ transform:translate(-50%,-50%) scale(1.15); opacity:1; }
  30%{ transform:translate(-50%,-50%) scale(1); }
  100%{ transform:translate(-50%,-130%) scale(1); opacity:0; }
}
.big{ left:50%; top:42%; font-size:clamp(70px, 20vmin, 220px); animation:big .9s cubic-bezier(.2,1.3,.4,1) forwards; text-shadow:0 0 20px #fff, 0 0 60px var(--p1), 0 0 120px var(--p2); }
.big.brush{ font-family:var(--brush); }
@keyframes big{
  0%{ transform:translate(-50%,-50%) scale(3); opacity:0; }
  25%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  75%{ transform:translate(-50%,-50%) scale(1.05); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1.6); opacity:0; }
}
.ko{ animation-duration:2.2s; color:#fff; }

/* ---------- 画面 ---------- */
.screen{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px, 3.4vh, 30px);
  padding:24px 16px; text-align:center; background:radial-gradient(ellipse at center, rgba(5,3,12,.25), rgba(5,3,12,.75)); }
.screen[hidden]{ display:none; }
.logo h1{ margin:0; font-family:var(--brush); font-weight:400; font-size:clamp(84px, 22vmin, 230px); line-height:1; letter-spacing:-.02em; }
.logo .d{ color:#e6fcff; text-shadow:0 0 14px var(--p1), 0 0 48px var(--p1), 0 0 110px #1f7fff; display:inline-block; animation:float 3s ease-in-out infinite; }
.logo .p{ color:#ffe6f1; text-shadow:0 0 14px var(--p2), 0 0 48px var(--p2), 0 0 110px #b0105a; display:inline-block; animation:float 3s ease-in-out -1.5s infinite; }
.logo .k{ color:#fff; font-size:.62em; margin-left:.08em; text-shadow:0 0 18px rgba(255,255,255,.6), 0 0 50px var(--gold); }
@keyframes float{ 50%{ transform:translateY(-6%) rotate(-3deg); } }
.tag{ margin:.6em 0 0; color:#d6d0ee; text-shadow:0 2px 8px #000; font-size:clamp(14px, 2.4vmin, 20px); letter-spacing:.3em; }
.rules{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.rule{ display:flex; align-items:center; gap:12px; text-align:left; padding:12px 18px 12px 14px; min-width:220px;
  border:1px solid rgba(255,255,255,.16); background:rgba(12,8,30,.55); backdrop-filter:blur(6px); border-radius:14px;
  font-family:system-ui, sans-serif; font-size:13px; line-height:1.55; color:var(--dim); }
.rule b{ font-family:var(--ui); font-weight:400; font-size:17px; color:var(--ink); }
.rule strong{ color:var(--gold); }
.rule .g{ font-family:var(--brush); font-size:58px; line-height:1; width:64px; text-align:center; }
.rule.do .g{ color:#e6fcff; text-shadow:0 0 16px var(--p1); }
.rule.pa .g{ color:#ffe6f1; text-shadow:0 0 16px var(--p2); }
.diff{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.diff button{ cursor:pointer; padding:12px 22px; min-width:108px; font-size:18px; letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(16,10,36,.7);
  box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .12s, box-shadow .2s, border-color .2s; }
.diff button:hover{ transform:translateY(-2px); border-color:#fff; box-shadow:0 0 24px rgba(70,224,255,.45); }
.diff button.main{ background:linear-gradient(135deg, rgba(31,127,255,.55), rgba(176,16,90,.55)); border-color:rgba(255,255,255,.6); }
.diff button[data-d="oni"]{ font-family:var(--brush); font-size:22px; }
.foot{ margin:0; font-family:system-ui, sans-serif; font-size:13px; color:var(--dim); }
.foot a{ color:var(--dim); }
.link{ background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; color:var(--dim); font-family:system-ui, sans-serif; }
#result h2{ margin:0; font-size:clamp(70px, 18vmin, 190px); letter-spacing:.06em; }
#result h2.win{ color:#fff; text-shadow:0 0 18px var(--gold), 0 0 60px var(--gold); }
#result h2.lose{ color:#cfc8e6; text-shadow:0 0 18px var(--p2), 0 0 60px #b0105a; }
#resStats{ padding:14px 22px; border-radius:14px; background:rgba(8,5,20,.72); border:1px solid rgba(255,255,255,.14); display:grid; grid-template-columns:auto auto; gap:6px 22px; font-family:system-ui, sans-serif; font-size:15px; color:var(--dim); text-align:left; }
#resStats b{ font-family:var(--ui); font-weight:400; color:var(--ink); text-align:right; }
#resStats .rank{ grid-column:1 / -1; text-align:center; font-family:var(--brush); font-size:min(30px, 6.6vw); white-space:nowrap; color:var(--gold); margin-top:6px; }   /* 「みみずの這ったような字」も1行に収める */
#nogl p{ font-family:system-ui, sans-serif; color:var(--dim); }

@media (max-width:600px){
  .side{ width:42vw; }
  .nm{ font-size:12px; }
  .hp{ height:12px; }
  .hint{ font-size:11px; }
  .hint .wide{ display:none; }
  .rule{ min-width:0; width:100%; max-width:340px; }
  .diff button{ min-width:0; padding:10px 16px; font-size:16px; }
}

/* ---------- オンライン・共有 ---------- */
.online-btn{ cursor:pointer; padding:12px 28px; font-size:18px; letter-spacing:.1em; border-radius:12px;
  border:1px solid rgba(255,207,74,.7); background:linear-gradient(135deg, rgba(255,207,74,.22), rgba(255,61,139,.22));
  box-shadow:0 0 22px rgba(255,207,74,.25); transition:transform .12s, box-shadow .2s; }
.online-btn:hover{ transform:translateY(-2px); box-shadow:0 0 32px rgba(255,207,74,.5); }
/* ホームの CPU対戦ボタン（押すと難易度を選ぶ画面） */
.cpu-btn{ cursor:pointer; padding:12px 28px; font-size:18px; letter-spacing:.1em; border-radius:12px;
  border:1px solid rgba(127,239,255,.75); background:linear-gradient(135deg, rgba(31,127,255,.4), rgba(70,224,255,.18));
  box-shadow:0 0 22px rgba(70,224,255,.25); transition:transform .12s, box-shadow .2s; }
.cpu-btn:hover{ transform:translateY(-2px); box-shadow:0 0 32px rgba(70,224,255,.5); }
/* 難易度を選ぶ画面：2×2 */
.cpu-diff{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(380px, 100%); }
.cpu-diff button{ width:100%; min-height:56px; }
.x-btn{ cursor:pointer; padding:10px 20px; font-size:15px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  background:#000; color:#fff; font-family:system-ui, sans-serif; font-weight:700; }
.x-btn:hover{ background:#16131f; border-color:#fff; }
.ol-h{ margin:0; font-size:clamp(30px, 6vmin, 52px); letter-spacing:.08em; text-shadow:0 0 16px var(--gold); }
.ol-box{ display:flex; flex-direction:column; align-items:stretch; gap:12px; width:min(360px, 100%);
  padding:20px; border-radius:16px; background:rgba(12,8,30,.72); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.ol-box[hidden]{ display:none; }
.ol-box > button, .ol-join button, .ol-row button:not(.x-btn){ cursor:pointer; padding:12px 16px; font-size:16px; letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(16,10,36,.7); }
.ol-box > button.main{ background:linear-gradient(135deg, rgba(31,127,255,.55), rgba(176,16,90,.55)); border-color:rgba(255,255,255,.6); }
.ol-join{ display:flex; gap:8px; }
.ol-join input{ flex:1; min-width:0; padding:12px 14px; font:inherit; font-size:20px; letter-spacing:.3em; text-transform:uppercase; text-align:center;
  color:var(--ink); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.3); border-radius:12px; }
.ol-join input:focus{ outline:2px solid var(--p1); outline-offset:1px; }
.ol-label{ font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); }
.ol-code{ font-size:clamp(44px, 12vmin, 72px); letter-spacing:.25em; padding-left:.25em; color:#fff; text-shadow:0 0 18px var(--p1), 0 0 40px var(--p2); user-select:all; }
.ol-row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#resStats .note{ grid-column:1 / -1; text-align:center; color:var(--gold); margin-bottom:4px; }
.diff button:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

/* ---------- ニックネーム・ランキング ---------- */
.title-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.rank-btn{ cursor:pointer; padding:12px 24px; font-size:18px; letter-spacing:.1em; border-radius:12px;
  border:1px solid rgba(255,255,255,.35); background:rgba(16,10,36,.7); transition:transform .12s, border-color .2s; }
.rank-btn:hover{ transform:translateY(-2px); border-color:#fff; }
.nick{ display:flex; flex-direction:column; gap:8px; padding-bottom:12px; margin-bottom:2px; border-bottom:1px solid rgba(255,255,255,.12); }
.nick-show{ font-family:system-ui, sans-serif; font-size:15px; color:var(--dim); }
.nick-show[hidden], .nick .ol-join[hidden]{ display:none; }
.nick-show b{ font-family:var(--ui); font-weight:400; font-size:18px; color:var(--ink); margin:0 6px; }
.nick .ol-join input{ font-size:16px; letter-spacing:.04em; text-transform:none; text-align:left; }
.nick-msg{ margin:0; font-family:system-ui, sans-serif; font-size:12px; line-height:1.5; color:var(--dim); text-align:left; }
.nick-msg.err{ color:#ff8fb0; }
.nick-msg.ok{ color:#9ff3c8; }
.rank-sub{ margin:-6px 0 0; padding:4px 12px; border-radius:999px; background:rgba(8,5,20,.7); font-family:system-ui, sans-serif; font-size:13px; color:#e6e1f7; }
.rank-note{ width:min(420px, 100%); margin:-4px 0 0; padding:5px 12px; border-radius:10px; text-align:left;
  font-family:system-ui, sans-serif; font-size:12px; line-height:1.5; color:#fff3c4;
  background:rgba(40,28,6,.6); border:1px solid rgba(255,207,74,.4); }
/* 案内は1行に畳んでおき、タップでくわしく */
.rank-note summary{ cursor:pointer; color:#ffcf4a; font-weight:700; list-style-position:inside; }
.rank-note p{ margin:4px 0 2px; color:#f3ead0; }
.rank-note[hidden]{ display:none; }
.rank-note b{ color:#ffcf4a; }
.rank-box{ width:min(420px, 100%); max-height:min(60vh, 600px); overflow-y:auto; padding:8px; border-radius:16px;
  background:rgba(12,8,30,.72); border:1px solid rgba(255,255,255,.16); }
#rankList{ list-style:none; margin:0; padding:0; font-family:system-ui, sans-serif; }
#rankList li{ display:grid; grid-template-columns:2.4em 1fr auto; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:15px; }
#rankList li:nth-child(odd){ background:rgba(255,255,255,.04); }
#rankList li.me{ background:rgba(70,224,255,.16); outline:1px solid rgba(70,224,255,.5); }
#rankList .r{ font-family:var(--ui); font-size:18px; color:var(--dim); text-align:center; }
#rankList li.top1 .r{ color:var(--gold); text-shadow:0 0 10px var(--gold); }
#rankList li.top2 .r{ color:#dfe6f0; } #rankList li.top3 .r{ color:#e6a26b; }
/* 名前は省略せずに全部出す（長い名前は折り返す） */
#rankList .n{ min-width:0; color:var(--ink); text-align:left; white-space:normal; overflow-wrap:anywhere; line-height:1.45; }
#rankList .w{ font-family:var(--ui); color:var(--ink); white-space:nowrap; }
#rankList .w small{ font-family:system-ui, sans-serif; color:var(--dim); margin-left:6px; }
#rankList .empty{ display:block; text-align:center; color:var(--dim); }
.rank-me{ margin:0; font-family:system-ui, sans-serif; font-size:13px; color:var(--ink); min-height:1.4em; }
.res-rec{ margin:0; max-width:min(420px, 100%); font-family:system-ui, sans-serif; font-size:15px; line-height:1.55; color:var(--gold); text-align:center; }
/* 1行ずつ並べ、まとまり（.seg）の途中では折り返さない */
.res-rec .rec-line{ display:block; }
.res-rec .rec-line.note{ margin-top:4px; font-size:12.5px; color:#e6dcb8; }
.res-rec .seg{ display:inline-block; white-space:nowrap; margin:0 .25em; }
.res-rec .rec-line.note .seg{ margin:0; }
.res-rec[hidden]{ display:none; }

/* ---------- ニックネーム登録（専用画面）・OFUSE ---------- */
.nick-badge{ position:absolute; top:max(14px, env(safe-area-inset-top)); right:16px; display:inline-flex; align-items:center; gap:8px;
  max-width:calc(100vw - 32px); padding:9px 16px; border-radius:999px; cursor:pointer; font-size:15px; letter-spacing:.04em;
  border:1px solid rgba(255,207,74,.75); background:rgba(40,28,6,.6); color:#fff3c4; box-shadow:0 0 18px rgba(255,207,74,.3); }
.nick-badge svg{ width:18px; height:18px; flex:none; }
.nick-badge span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nick-badge.done{ border-color:rgba(255,255,255,.3); background:rgba(16,10,36,.6); color:var(--ink); box-shadow:none; }
.nick-badge:hover{ border-color:#fff; }
.nick-screen{ background:rgba(5,3,12,.82); backdrop-filter:blur(4px); z-index:5; }
.nick-box{ width:min(420px, 100%); gap:14px; text-align:left; }
.nick-h{ margin:0; text-align:center; font-size:clamp(20px, 4.2vmin, 28px); letter-spacing:.04em; white-space:nowrap; text-shadow:0 0 14px var(--gold); }
.nick-why{ margin:0; padding-left:1.2em; font-family:system-ui, sans-serif; font-size:14px; line-height:1.7; color:#d8d2ee; }
#nickInput{ width:100%; padding:14px 16px; font:inherit; font-size:22px; letter-spacing:.04em; text-align:center; color:var(--ink);
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.4); border-radius:12px; }
#nickInput:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.nick-box .nick-msg{ min-height:1.5em; text-align:center; font-size:14px; }
.nick-box > button.main{ font-size:18px; padding:14px 16px; }
.nick-box > button.link{ align-self:center; font-size:14px; }
.nick-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:2px 2px 12px;
  border-bottom:1px solid rgba(255,255,255,.12); font-family:system-ui, sans-serif; font-size:14px; color:var(--dim); text-align:left; }
.nick-line b{ font-family:var(--ui); font-weight:400; font-size:18px; color:var(--ink); margin-left:6px; }
.nick-cta{ cursor:pointer; padding:10px 18px; border-radius:999px; font-size:14px; letter-spacing:.04em;
  border:1px solid rgba(255,207,74,.75); background:rgba(40,28,6,.6); color:#fff3c4; }
.nick-cta:hover{ border-color:#fff; }
.nick-cta[hidden]{ display:none; }
.nick-line .nick-cta{ padding:7px 14px; font-size:13px; }
/* ホーム画面のリンク（LINE オープンチャット・作者の他のゲーム） */
.home-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.more-games{ display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; font-family:system-ui, sans-serif; font-size:14px; font-weight:700;
  color:#fff; text-decoration:none; border:1px solid rgba(255,207,74,.7); background:rgba(40,28,6,.6); box-shadow:0 0 14px rgba(255,207,74,.25); }
.more-games svg{ width:18px; height:18px; }
.more-games:hover{ border-color:#fff; }
/* 幅の狭いスマホでは2つのボタンを1段に収める */
@media (max-width:420px){
  .home-links{ gap:6px; flex-wrap:nowrap; }
  .home-links .line-oc, .home-links .more-games{ padding:7px 10px; font-size:12px; gap:4px; white-space:nowrap; }
  .home-links svg{ width:15px; height:15px; }
}
/* LINE オープンチャットへのリンク（ホーム画面） */
.line-oc{ display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px; font-family:system-ui, sans-serif; font-size:14px; font-weight:700;
  color:#fff; text-decoration:none; background:#06c755; box-shadow:0 0 16px rgba(6,199,85,.35); }
.line-oc svg{ width:18px; height:18px; }
.line-oc:hover{ filter:brightness(1.1); }
.ofuse{ display:inline-flex; align-items:center; gap:5px; color:var(--dim); font-weight:700; text-decoration:none; vertical-align:middle; }
.ofuse svg{ width:16px; height:16px; }
.ofuse:hover{ color:#ff8fbd; }
.res-foot{ margin-top:-4px; }

/* ---------- スキン ---------- */
/* 左のキャラがそのまま試着の見本になるよう、パネルは右に寄せる */
.shop-screen{ align-items:flex-end; justify-content:center; background:linear-gradient(to left, rgba(5,3,12,.9) 0, rgba(5,3,12,.75) 44%, rgba(5,3,12,0) 70%); }
.shop-box{ display:flex; flex-direction:column; gap:10px; width:min(400px, 100%); max-height:calc(100vh - 32px); overflow-y:auto;
  padding:18px; border-radius:16px; background:rgba(12,8,30,.78); border:1px solid rgba(255,255,255,.16); text-align:left; }
.shop-box .ol-h{ text-align:center; }
.shop-coins{ margin:0; text-align:center; font-family:system-ui, sans-serif; color:var(--dim); }
.shop-coins b{ font-family:var(--ui); font-weight:400; font-size:28px; color:var(--gold); margin-left:8px; text-shadow:0 0 12px rgba(255,207,74,.5); }
.shop-note{ margin:-6px 0 4px; text-align:center; font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); }
.shop-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
.skin{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background:rgba(16,10,36,.7); color:var(--ink); font-size:14px; }
.skin:hover{ border-color:rgba(255,255,255,.5); }
.skin.sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 0 16px rgba(255,207,74,.3); }
.skin .sw{ width:40px; height:40px; border-radius:50%; box-shadow:0 0 14px currentColor; }
.skin .st{ font-family:system-ui, sans-serif; font-size:11px; color:var(--dim); }
.skin .st.eq{ color:#9ff3c8; } .skin .st.own{ color:var(--ink); } .skin .st.price{ color:var(--gold); }
.skin.locked .sw{ opacity:.5; }
.shop-desc{ margin:2px 0 0; min-height:1.4em; font-family:system-ui, sans-serif; font-size:13px; color:#d8d2ee; text-align:center; }
.shop-act{ cursor:pointer; padding:13px 16px; border-radius:12px; font-size:17px; letter-spacing:.04em; color:var(--ink);
  border:1px solid rgba(255,255,255,.6); background:linear-gradient(135deg, rgba(31,127,255,.55), rgba(176,16,90,.55)); }
.shop-act:disabled{ opacity:.55; cursor:default; }
.shop-act.buy{ border-color:rgba(255,207,74,.8); background:linear-gradient(135deg, rgba(120,80,0,.6), rgba(176,16,90,.45)); }
.shop-box > .link{ align-self:center; }
@media (max-aspect-ratio: 17/20){
  /* 縦長の画面ではキャラが下に来るので、パネルは上に置く */
  .shop-screen{ align-items:center; justify-content:flex-start; background:linear-gradient(to bottom, rgba(5,3,12,.9) 0, rgba(5,3,12,.75) 50%, rgba(5,3,12,0) 72%); }
  .shop-box{ max-height:60vh; }
}

/* ---------- ショップのタブ・ガチャ・称号 ---------- */
.shop-tabs{ display:flex; gap:4px; padding:4px; border-radius:12px; background:rgba(0,0,0,.35); }
.shop-tabs .tab{ flex:1; cursor:pointer; padding:9px 4px; border-radius:9px; border:0; background:none; color:var(--dim); font-size:14px; letter-spacing:.04em; }
.shop-tabs .tab.on{ background:rgba(255,255,255,.12); color:var(--ink); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; }
#tabSkin, #tabGacha, #tabTitle{ display:flex; flex-direction:column; gap:10px; }
#tabSkin[hidden], #tabGacha[hidden], #tabTitle[hidden]{ display:none; }
.gacha-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gacha-btns .shop-act{ font-size:15px; padding:12px 8px; }
.gacha-reveal{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; min-height:0; }
.gacha-reveal.one{ grid-template-columns:1fr; justify-items:center; }
.card{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:3/4; border-radius:8px; padding:4px;
  font-family:var(--brush); font-size:18px; line-height:1.1; text-align:center; color:#1b1408;
  background:linear-gradient(160deg, #fbf6e8, #e9dfc3); box-shadow:0 2px 0 rgba(0,0,0,.4);
  animation:cardIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.gacha-reveal.one .card{ width:140px; font-size:40px; }
.card .rr{ position:absolute; top:3px; left:5px; font-family:var(--ui); font-size:9px; letter-spacing:.04em; color:#7a6a45; }
.gacha-reveal.one .card .rr{ font-size:13px; }
.card .nw{ position:absolute; bottom:3px; right:4px; font-family:var(--ui); font-size:9px; color:#d01e5a; }
.card.R{ box-shadow:0 0 0 2px #7fb3ff, 0 0 12px rgba(127,179,255,.6); }
.card.SR{ box-shadow:0 0 0 2px #c78bff, 0 0 18px rgba(199,139,255,.8); background:linear-gradient(160deg, #fff, #efe2ff); }
.card.SSR{ box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(255,207,74,.95); background:linear-gradient(160deg, #fff7d1, #ffd970); animation:cardIn .5s cubic-bezier(.2,1.4,.4,1) both, ssr 1.2s ease-in-out infinite alternate; }
@keyframes cardIn{ 0%{ transform:rotateY(90deg) scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes ssr{ to{ box-shadow:0 0 0 2px var(--gold), 0 0 40px rgba(255,207,74,1); } }
.zukan-h{ margin:6px 0 0; font-family:system-ui, sans-serif; font-size:13px; color:var(--dim); }
.zukan-h b{ font-family:var(--ui); font-weight:400; color:var(--ink); margin-left:4px; }
.zukan{ display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:5px; }
.zukan .card{ font-size:13px; animation:none; }
.zukan .card.none{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.25); box-shadow:none; font-family:var(--ui); }
.zukan .card .cnt{ position:absolute; bottom:2px; right:4px; font-family:var(--ui); font-size:9px; color:#7a6a45; }
.rates{ margin:0; text-align:center; font-family:system-ui, sans-serif; font-size:11px; color:var(--dim); }
.title-list{ display:flex; flex-direction:column; gap:6px; }
.ttl-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(16,10,36,.7); border:1px solid rgba(255,255,255,.12); }
.ttl-row .tn{ flex:1; min-width:0; }
.ttl-row .tn b{ display:block; font-family:var(--ui); font-weight:400; font-size:15px; color:var(--ink); }
.ttl-row .tn span{ font-family:system-ui, sans-serif; font-size:11px; color:var(--dim); }
.ttl-row.locked b{ color:rgba(255,255,255,.35); }
.ttl-row.on{ border-color:var(--gold); box-shadow:0 0 12px rgba(255,207,74,.3); }
.ttl-row button{ cursor:pointer; flex:none; padding:7px 12px; border-radius:999px; font-size:12px; color:var(--ink);
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.3); }
.ttl-row.on button{ border-color:var(--gold); color:#fff3c4; }
/* 称号は名前と同じ行に小さな札で出す（称号の有無で高さが変わらないように） */
.ttl{ display:inline-block; flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:1px 7px; border-radius:999px; border:1px solid rgba(255,207,74,.55); background:rgba(40,28,6,.6);
  font-family:system-ui, sans-serif; font-size:10px; line-height:1.5; letter-spacing:.03em; color:#ffe08a; text-shadow:none; vertical-align:middle; }
.side .nm{ display:flex; align-items:center; gap:7px; height:20px; min-width:0; white-space:nowrap; }
.side.p2 .nm{ flex-direction:row-reverse; }
.side .nm .nmt{ flex:0 0.25 auto; min-width:2.5em; overflow:hidden; text-overflow:ellipsis; }
.side .nm .ttl{ flex:0 1 auto; min-width:5.5em; }
#rankList .n .ttl{ margin-left:7px; vertical-align:1px; max-width:none; overflow:visible; white-space:nowrap; }

/* 演出の文字（ガチャの「ドパッ!!」など）はメニューより手前に出す */
#fx{ z-index:4; }

/* ---------- 攻撃スキン ---------- */
#tabBeam{ display:flex; flex-direction:column; gap:10px; }
#tabBeam[hidden]{ display:none; }
.skin .bsw{ width:56px; height:14px; border-radius:7px; margin:13px 0; }
.skin .ssw{ width:56px; height:34px; border-radius:8px; margin:3px 0; border:1px solid rgba(255,255,255,.25); }
.ssw-s_neon{ background:radial-gradient(circle at 50% 62%, #ffb04a 0 22%, transparent 23%), linear-gradient(180deg, #2a0b3a 0 60%, #0a0618 60%), repeating-linear-gradient(90deg, transparent 0 9px, rgba(127,239,255,.6) 9px 10px); }
.ssw-s_jinja{ background:
  linear-gradient(#c8321a,#c8321a) 50% 30%/70% 3px no-repeat, linear-gradient(#c8321a,#c8321a) 50% 44%/56% 2px no-repeat,
  linear-gradient(#c8321a,#c8321a) 30% 100%/3px 62% no-repeat, linear-gradient(#c8321a,#c8321a) 70% 100%/3px 62% no-repeat,
  radial-gradient(circle at 50% 30%, #fff6d8 0 14%, rgba(255,240,200,.25) 15% 30%, transparent 31%), linear-gradient(180deg, #2b1240, #0a0a1e); }
.shop-tabs .tab{ font-size:13px; }

/* ---------- もどるボタン（どの画面でも同じ見た目・押しやすい大きさ） ---------- */
.back-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:9px 22px 9px 16px; cursor:pointer;
  border-radius:999px; border:1px solid rgba(255,255,255,.5); background:rgba(16,10,36,.82); color:var(--ink);
  font-family:var(--ui); font-size:15px; letter-spacing:.08em; box-shadow:0 2px 10px rgba(0,0,0,.35); transition:border-color .15s, background .15s, transform .12s; }
.back-btn svg{ width:18px; height:18px; flex:none; }
.back-btn:hover{ border-color:#fff; background:rgba(40,28,80,.9); transform:translateX(-2px); }
.back-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* ショップは中身が長いので、もどるはパネルの下に常に見えるようにする */
/* ショップのもどるは、パネルの下の帯に常に表示する（下の中身は帯の後ろへ流れて見えなくなる） */
.shop-foot{ position:sticky; bottom:-18px; z-index:1; display:flex; justify-content:center; margin:4px -18px -18px; padding:14px 18px 18px;
  background:linear-gradient(to bottom, rgba(12,8,30,0), rgba(12,8,30,.97) 38%); border-radius:0 0 16px 16px; }
.shop-tabs .tab{ white-space:nowrap; }
@media (max-width:420px){ .shop-tabs .tab{ font-size:12px; letter-spacing:0; padding:9px 2px; } }

/* 称号の状態の札（条件はいつでも下に出す） */
.ttl-row .tn b{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tst{ font-style:normal; font-family:system-ui, sans-serif; font-size:10px; font-weight:700; letter-spacing:.04em; padding:1px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); color:var(--dim); }
.tst.got{ border-color:rgba(159,243,200,.55); color:#9ff3c8; }
.tst.on{ border-color:rgba(255,207,74,.75); color:#ffe08a; background:rgba(40,28,6,.6); }
.ttl-row.locked .tst{ color:rgba(255,255,255,.4); }
.ttl-row .tn span{ display:block; margin-top:2px; }

/* 名前の変更ボタン */
.nick-edit{ display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer; min-height:36px; padding:6px 14px; border-radius:999px;
  border:1px solid rgba(255,207,74,.7); background:rgba(40,28,6,.55); color:#fff3c4; font-family:var(--ui); font-size:13px; letter-spacing:.04em; }
.nick-edit svg{ width:15px; height:15px; }
.nick-edit:hover{ border-color:#fff; background:rgba(70,50,10,.7); }
.nick-edit:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.nick-badge .pen{ display:inline-flex; margin-left:2px; opacity:.85; }
.nick-badge .pen[hidden]{ display:none; }
.nick-badge .pen svg{ width:14px; height:14px; }
#rankJoin.nick-edit{ min-height:40px; padding:8px 18px; font-size:14px; }

/* ---------- スマホ縦画面のタイトル（ホーム） ---------- */
@media (max-width:600px){
  /* 中身が画面より長いときは切らずにスクロールさせる（上下中央は safe で、はみ出したら上から並べる） */
  #title{ justify-content:safe center; overflow-y:auto; gap:14px;
    padding:calc(max(14px, env(safe-area-inset-top)) + 54px) 16px calc(max(16px, env(safe-area-inset-bottom)) + 8px); }
  #title .logo h1{ font-size:clamp(60px, 19vw, 96px); }
  #title .tag{ margin-top:.35em; font-size:12px; letter-spacing:.22em; }
  #title .nick-badge{ position:fixed; top:max(12px, env(safe-area-inset-top)); right:12px; z-index:2; padding:7px 13px; font-size:13px; }

  /* ドとパの説明は横に2枚並べる */
  #title .rules{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(380px, 100%); }
  #title .rule{ flex-direction:column; align-items:center; text-align:center; gap:2px; min-width:0; width:auto; max-width:none; padding:10px 8px 12px; font-size:12px; line-height:1.45; }
  #title .rule .g{ width:auto; font-size:40px; }
  #title .rule b{ font-size:15px; }

  /* 難易度は 2×2、オンライン対戦は1段、ランキングとショップは横に2つ。幅をそろえる */
  #title .diff{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(380px, 100%); }
  #title .diff button{ min-width:0; width:100%; min-height:48px; padding:10px 6px; font-size:16px; }
  #title .diff button[data-d="oni"]{ font-size:20px; }
  #title .title-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:min(380px, 100%); }
  #title .title-row .online-btn, #title .title-row .cpu-btn{ min-width:0; padding:10px 6px; min-height:52px; font-size:17px; letter-spacing:.04em; }
  #title .title-row .rank-btn{ min-height:48px; padding:10px 6px; font-size:16px; }

  /* 下のリンクは中央にそろえて、きれいに折り返す */
  #title .foot{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 16px; max-width:340px; font-size:13px; line-height:1.6; }
  #title .foot .link, #title .foot a{ padding:4px 0; }
}
/* 背の低いスマホ（iPhone SE など）は、すき間を詰める */
@media (max-width:600px) and (max-height:700px){
  #title{ gap:10px; padding-top:calc(max(10px, env(safe-area-inset-top)) + 50px); }
  #title .logo h1{ font-size:clamp(54px, 16vw, 80px); }
  #title .rule{ padding:8px 6px 10px; }
  #title .rule .g{ font-size:34px; }
  #title .diff button, #title .title-row .rank-btn{ min-height:44px; }
  #title .title-row .online-btn, #title .title-row .cpu-btn{ min-height:48px; }
}

/* ---------- スマホのホームを上詰めに（X などのアプリ内ブラウザは上下にバーが出て、使える高さが短い） ---------- */
@media (max-width:600px){
  #title{ justify-content:flex-start; gap:12px; padding-top:calc(max(10px, env(safe-area-inset-top)) + 50px); }
  #title .logo h1{ line-height:.95; }
}
@media (max-width:600px) and (max-height:700px){
  #title{ gap:9px; padding-top:calc(max(8px, env(safe-area-inset-top)) + 46px); }
  #title .nick-badge{ top:max(8px, env(safe-area-inset-top)); }
}
/* 高さ 620px 以下（X のブラウザなど） */
@media (max-width:600px) and (max-height:620px){
  #title{ gap:8px; padding-bottom:10px; }
  #title .logo h1{ font-size:clamp(46px, 14vw, 64px); }
  #title .tag{ font-size:11px; margin-top:.25em; }
  #title .rule{ padding:6px 6px 8px; font-size:11px; line-height:1.4; }
  #title .rule .g{ font-size:28px; }
  #title .rule b{ font-size:13px; }
  #title .diff button, #title .title-row .rank-btn{ min-height:40px; padding:7px 6px; font-size:15px; }
  #title .diff button[data-d="oni"]{ font-size:18px; }
  #title .title-row .online-btn, #title .title-row .cpu-btn{ min-height:44px; font-size:16px; }
  #title .foot{ font-size:12px; gap:2px 14px; }
}
/* 高さ 500px 以下：説明カードは1行ずつに縮める */
@media (max-width:600px) and (max-height:500px){
  #title .rule{ flex-direction:row; justify-content:center; gap:8px; text-align:left; padding:6px 8px; }
  #title .rule .g{ font-size:24px; }
  #title .rule > div:last-child{ font-size:0; }
  #title .rule > div:last-child b{ font-size:13px; }
}

/* ---------- ドパーガッキーの秘密の部屋 ---------- */
.room-door{ cursor:pointer; padding:12px 18px; border-radius:14px; font-size:16px; letter-spacing:.06em; color:#e9ffd8;
  border:1px solid rgba(140,255,110,.7); background:linear-gradient(135deg, rgba(40,90,20,.65), rgba(90,20,110,.6));
  box-shadow:0 0 24px rgba(140,255,110,.35); animation:doorGlow 1.6s ease-in-out infinite alternate; }
.room-door[hidden]{ display:none; }
.room-door.small{ padding:8px 16px; font-size:14px; }
@keyframes doorGlow{ to{ box-shadow:0 0 40px rgba(180,90,255,.55); } }
#roomHud{ position:fixed; inset:0; pointer-events:none; }
#roomHud[hidden]{ display:none; }
.rm-top{ position:absolute; top:max(12px, env(safe-area-inset-top)); left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-start; }
.rm-score small, .rm-combo small{ display:block; font-family:system-ui, sans-serif; font-size:11px; letter-spacing:.2em; color:var(--dim); }
.rm-score b{ font-family:var(--ui); font-weight:400; font-size:clamp(24px, 6vmin, 36px); color:#fff; text-shadow:0 0 12px rgba(140,255,110,.6); }
.rm-combo{ text-align:right; }
.rm-combo b{ font-family:var(--ui); font-weight:400; font-size:clamp(28px, 8vmin, 48px); color:var(--gold); text-shadow:0 0 14px rgba(255,207,74,.6); }
.rm-bar{ position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 64px); left:16px; right:16px; height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.rm-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #8cff6e, #b98bff); }
.rm-talk{ position:absolute; left:50%; top:calc(max(12px, env(safe-area-inset-top)) + 80px); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px);
  margin:0; padding:7px 14px; border-radius:14px; background:rgba(10,20,6,.75); border:1px solid rgba(140,255,110,.5);
  font-family:var(--ui); font-size:14px; color:#e9ffd8; text-align:center; opacity:0; transition:opacity .25s; }
.rm-talk.on{ opacity:1; }
.rm-hint{ position:absolute; left:50%; top:calc(max(12px, env(safe-area-inset-top)) + 160px); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px);
  margin:0; font-family:system-ui, sans-serif; font-size:12px; color:#d8d0ee; text-shadow:0 1px 3px #000, 0 0 8px #000; text-align:center; opacity:0; }
.rm-hint.on{ animation:rmHint 7s ease forwards; }
@keyframes rmHint{ 0%{ opacity:0; } 6%{ opacity:1; } 80%{ opacity:1; } 100%{ opacity:0; } }
#rmQuit{ pointer-events:auto; position:absolute; left:50%; bottom:max(10px, env(safe-area-inset-bottom)); transform:translateX(-50%); min-height:38px; padding:6px 16px 6px 12px; font-size:13px; }
#rmQuit:hover{ transform:translateX(calc(-50% - 2px)); }
.rm-res-h{ margin:0; font-family:var(--ui); font-size:clamp(16px, 4vmin, 22px); letter-spacing:.06em; color:#e9ffd8; text-shadow:0 0 12px rgba(140,255,110,.6); }
.rm-rank{ font-family:var(--ui); font-size:clamp(80px, 22vmin, 160px); line-height:1; color:#fff; text-shadow:0 0 24px var(--gold), 0 0 60px #8cff6e; }
.rm-best{ margin:-6px 0 0; font-family:system-ui, sans-serif; font-size:14px; color:var(--gold); min-height:1.4em; }
.rm-stats{ display:grid; grid-template-columns:auto auto; gap:4px 22px; padding:14px 22px; border-radius:14px; background:rgba(8,5,20,.72); border:1px solid rgba(255,255,255,.14);
  font-family:system-ui, sans-serif; font-size:15px; color:var(--dim); }
.rm-stats b{ font-family:var(--ui); font-weight:400; color:var(--ink); text-align:right; }
.rm-last{ margin:0; font-family:var(--ui); font-size:15px; color:#e9ffd8; text-align:center; }

/* ---------- 相手待ち：大きな待機表示と、試し打ちの案内 ---------- */
#olWait{ width:min(440px, 100%); background:rgba(12,8,30,.42); backdrop-filter:none; }
#olStatus{ margin:4px 0; font-family:var(--ui); font-size:clamp(20px, 5.6vmin, 32px); line-height:1.35; letter-spacing:.04em; color:#fff;
  text-shadow:0 0 14px rgba(127,239,255,.7), 0 0 30px rgba(255,143,189,.45); animation:olPulse 1.6s ease-in-out infinite; }
@keyframes olPulse{ 50%{ opacity:.62; } }
.ol-tap{ margin:0; font-family:system-ui, sans-serif; font-size:13px; color:var(--gold); }
#olPractice{ font-size:15px; min-height:1.5em; }
/* 相手待ちの練習：待ち画面の上からでも下の書くキャンバスに届くように。ボタン・入力・合言葉は押せるまま */
#online.practice, #online.practice *{ pointer-events:none; }
#online.practice button, #online.practice a, #online.practice input, #online.practice .ol-code{ pointer-events:auto; }
/* 低い画面ではスクロールできるように */
#online{ overflow-y:auto; justify-content:safe center; }

/* ---------- マイページ ---------- */
.my-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:10px 18px; border-radius:12px; font-size:15px; letter-spacing:.05em;
  color:#e9fbff; border:1px solid rgba(127,239,255,.65); background:rgba(10,30,44,.7); box-shadow:0 0 14px rgba(127,239,255,.25); }
.my-btn[hidden]{ display:none; }
.my-btn:hover{ border-color:#fff; }
.my-btn svg{ width:18px; height:18px; }
.my-name{ margin:-6px 0 0; font-size:18px; color:#fff; }
.my-name .ttl{ margin-left:8px; }
.my-body{ width:min(520px, 100%); max-height:min(60vh, 640px); overflow-y:auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.my-card{ padding:12px 14px; border-radius:14px; text-align:left; background:rgba(12,8,30,.78); border:1px solid rgba(255,255,255,.16); }
.my-card.wide{ grid-column:1 / -1; }
.my-card h3{ margin:0 0 6px; font-family:system-ui, sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--dim); }
.my-card .my-big{ font-size:clamp(34px, 9vmin, 48px); line-height:1.1; color:#fff; text-shadow:0 0 14px rgba(255,207,74,.55); }
.my-card .my-big small{ font-size:.45em; margin-left:4px; color:var(--dim); }
.my-card .sub{ margin-top:4px; font-family:system-ui, sans-serif; font-size:13px; color:#e6e1f7; }
.my-rows{ margin:0; padding:0; list-style:none; font-family:system-ui, sans-serif; font-size:14px; color:#e6e1f7; }
.my-rows li{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.my-rows b{ font-family:var(--ui); font-weight:400; font-size:17px; color:#fff; }
.my-rows .g-do{ color:#7fefff; } .my-rows .g-pa{ color:#ff8fbd; } .my-rows .g-gk{ color:#c6ff7a; }
.my-note{ margin:0; max-width:min(520px, 100%); font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); }
@media (max-width:420px){ .my-body{ grid-template-columns:1fr; } }

/* ---------- 音楽（ショップの「音楽」タブ） ---------- */
/* タブが6つになったので2段に並べる */
.shop-tabs{ flex-wrap:wrap; }
.shop-tabs .tab{ flex:1 0 30%; }
.music-list{ display:flex; flex-direction:column; gap:10px; }
.music-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  background:rgba(16,10,36,.7); border:1px solid rgba(255,255,255,.14); text-align:left; }
.music-row.on{ border-color:rgba(127,239,255,.7); box-shadow:0 0 16px rgba(127,239,255,.25); }
.music-play{ width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,.4); background:linear-gradient(135deg, rgba(31,127,255,.55), rgba(176,16,90,.55)); }
.music-play svg{ width:20px; height:20px; }
.music-title{ font-family:var(--ui); font-size:16px; color:#fff; letter-spacing:.03em; }
.music-time{ margin-top:2px; font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; }
.music-bar{ margin-top:8px; height:10px; border-radius:5px; background:rgba(255,255,255,.12); cursor:pointer; position:relative; touch-action:none; }
.music-bar i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:5px; background:linear-gradient(90deg, #7fefff, #ff8fbd); }

/* ---------- お知らせ ---------- */
/* 左上のボタン（お知らせ・プレゼント）を横に並べる */
.tl-btns{ position:absolute; top:max(14px, env(safe-area-inset-top)); left:16px; display:flex; gap:8px; z-index:2; }
.news-btn{ position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:999px; cursor:pointer; font-size:15px; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.3); background:rgba(16,10,36,.6); color:var(--ink); }
.news-btn:hover{ border-color:#fff; }
.news-btn svg{ width:18px; height:18px; flex:none; }
.news-dot{ position:absolute; top:5px; right:7px; width:9px; height:9px; border-radius:50%; background:#ff4d6d; box-shadow:0 0 8px #ff4d6d; }
.news-dot[hidden]{ display:none; }
/* お知らせボタンと重ならないよう、ニックネームの幅を抑える */
#title .nick-badge{ max-width:calc(100vw - 32px - 260px); }
.news-box{ width:min(520px, 100%); max-height:min(62vh, 620px); overflow-y:auto; padding:6px; border-radius:16px; text-align:left;
  background:rgba(12,8,30,.78); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.news-item{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.news-item:last-child{ border-bottom:0; }
.news-item time{ font-family:system-ui, sans-serif; font-size:12px; color:var(--dim); letter-spacing:.06em; }
.news-item h3{ margin:4px 0 6px; font-size:17px; line-height:1.4; color:#fff; letter-spacing:.03em; font-weight:400; }
.news-item ul{ margin:0; padding-left:1.2em; font-family:system-ui, sans-serif; font-size:14px; line-height:1.7; color:#e6e1f7; }
.news-new{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; font-family:system-ui, sans-serif; font-size:11px; font-weight:700;
  vertical-align:2px; color:#fff; background:#ff4d6d; }
.news-empty{ margin:0; padding:20px; text-align:center; font-family:system-ui, sans-serif; font-size:14px; color:var(--dim); }
@media (max-width:420px){
  .news-btn{ padding:9px 12px; }
  .news-btn span{ display:none; }   /* 幅が狭いときはベルだけ */
  #title .nick-badge{ max-width:calc(100vw - 32px - 120px); }
}
/* ランキング画面の登録ボタンは控えめに（一覧を広く見せる） */
#rank .nick-cta{ font-size:12.5px; padding:8px 14px; letter-spacing:.02em; }

/* マイページのアカウント削除（目立たない文字リンク → 押すと確認の枠） */
.my-del-open{ font-size:12px; color:var(--dim); text-decoration:underline; }
.my-del-open[hidden], .my-del[hidden]{ display:none; }
.my-del{ width:min(420px, 100%); padding:12px 14px; border-radius:12px; text-align:left; font-family:system-ui, sans-serif; font-size:13px; line-height:1.6; color:#f4f1ff;
  background:rgba(40,6,18,.85); border:1px solid rgba(255,90,120,.6); }
.my-del p{ margin:0 0 8px; }
.my-del b{ color:#ff8fb0; }
.my-del label{ display:block; margin-bottom:4px; font-size:12px; color:#e6e1f7; }
.my-del input{ width:100%; padding:9px 10px; border-radius:8px; font-size:16px; color:#fff; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.3); }
.my-del-msg{ min-height:1.4em; margin:6px 0 !important; font-size:12px; color:#ffcf4a; }
.my-del-btns{ display:flex; gap:8px; justify-content:flex-end; }
.my-del-btns button{ cursor:pointer; padding:8px 16px; border-radius:10px; font-size:14px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3); }
.my-del-btns .danger{ background:rgba(220,40,80,.75); border-color:rgba(255,120,150,.9); }
.my-del-btns .danger:disabled{ opacity:.4; cursor:not-allowed; }
/* マイページの「遊んだ人の数」（開発者だけ）。リンクだがボタンと同じ見た目に */
a.my-btn{ text-decoration:none; color:#e9fbff; font-family:var(--ui); }
/* 形が変わるスキンの見本：色の丸ではなく絵文字 */
.skin .sw.shape{ display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px currentColor; }
.skin .sw.shape img{ width:44px; height:44px; image-rendering:pixelated; }
/* 音楽タブ：対戦BGMを選ぶボタン */
.music-set{ display:inline-block; margin-top:8px; padding:5px 12px; border-radius:999px; cursor:pointer; font-family:system-ui, sans-serif; font-size:12px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); }
.music-set.on{ cursor:default; color:#05030c; background:#ffcf4a; border-color:#ffcf4a; }
.music-row.music-def{ grid-template-columns:1fr auto; }
.music-def .music-set{ margin-top:0; }
/* シークレットスキン：ショップの「？？？」と、ガチャで当たったときの札 */
.skin.secret .sw{ font-family:var(--ui); font-size:22px; color:#9ff37a; background:rgba(10,20,6,.8); box-shadow:0 0 14px rgba(120,255,90,.45); }
.skin .st.sec{ color:#9ff37a; }
.card.secret-hit{ border-color:#9ff37a !important; box-shadow:0 0 22px rgba(120,255,90,.6); background:linear-gradient(160deg, rgba(20,40,10,.95), rgba(5,10,3,.95)); }
.card.secret-hit .rr{ color:#9ff37a; }
.card.secret-hit{ color:#d2ffae !important; font-size:12px !important; line-height:1.25; letter-spacing:0 !important; text-shadow:0 0 10px rgba(120,255,90,.85); }
.gacha-reveal.one .card.secret-hit{ font-size:17px !important; white-space:nowrap; }
/* 結果画面：画面に収まらないとき（小さいスマホ・横向き・低いウィンドウ）は上下が切れずにスクロールできるように。
   収まるときは今までどおり真ん中に置く（上下の余白を auto にして中央に。古い Safari でも効くように safe center は使わない） */
#result{ overflow-y:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
#result > :first-child{ margin-top:auto; }
#result > :last-child{ margin-bottom:auto; }
@media (max-height:700px){
  #result{ gap:10px; padding-top:14px; padding-bottom:14px; }
  #result h2{ font-size:clamp(56px, 14vmin, 120px); }
  #resStats{ padding:10px 18px; gap:3px 18px; font-size:14px; }
  #resStats .rank{ margin-top:2px; }
}
@media (max-height:460px){
  /* 横向きのスマホ：見出しをさらに小さく */
  #result h2{ font-size:52px; }
  #resStats{ font-size:13px; }
}
/* 動くスキンの見本：コマを並べた画像の1コマ目だけを見せる */
.skin .sw .anim-thumb{ display:block; width:44px; height:44px; background-repeat:no-repeat; background-position:0 0; }
/* 先頭が画像の攻撃スキンの見本：帯の右はしに画像をのせる */
.skin .bsw.himg::after{ content:''; position:absolute; right:-12px; top:50%; width:30px; height:30px; transform:translateY(-50%); background:var(--hi) center/contain no-repeat; image-rendering:pixelated; }
/* ブラウザのデータを消さないでという注意（ニックネーム登録・マイページ） */
.keep-warn{ width:min(420px, 100%); margin:0; padding:9px 12px; border-radius:10px; text-align:left; font-family:system-ui, sans-serif; font-size:12px; line-height:1.55;
  color:#fff3c4; background:rgba(60,36,4,.78); border:1px solid rgba(255,207,74,.65); }
.keep-warn b{ display:block; margin-bottom:2px; font-size:13px; color:#ffcf4a; }
/* ニックネーム登録も、小さい画面で収まらないときは上下が切れずにスクロールできるように（結果画面と同じ） */
#nickDlg{ overflow-y:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
#nickDlg > :first-child{ margin-top:auto; }
#nickDlg > :last-child{ margin-bottom:auto; }
.keep-warn.short{ padding:5px 10px; font-size:11.5px; line-height:1.45; color:#ffe7a0; }
/* ランキングの切り替え（勝利数 / 裏ランキング） */
.rank-tabs{ display:flex; gap:6px; width:min(420px, 100%); margin:-4px 0 0; padding:4px; border-radius:12px; background:rgba(8,5,20,.7); }
.rank-tabs button{ flex:1; cursor:pointer; padding:7px 6px; border-radius:9px; font-size:13px; color:var(--dim); background:none; border:1px solid transparent; }
.rank-tabs button.on{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
#rank.ura .rank-tabs button.on{ color:#d8c8ff; border-color:rgba(185,139,255,.6); background:rgba(120,70,200,.25); }
#rank.ura .rank-box{ border-color:rgba(185,139,255,.45); }
.ura-note{ margin:0; color:#e6dcff; }
.ura-note b{ color:#d8b8ff; }
#rank.ura .rank-note{ background:rgba(40,20,70,.65); border-color:rgba(185,139,255,.55); }
/* ランキングの見出しと、表／裏を切り替える円い矢印のボタン */
.rank-head{ display:flex; align-items:center; justify-content:center; gap:10px; }
.rank-flip{ width:40px; height:40px; flex:none; display:grid; place-items:center; cursor:pointer; border-radius:50%; color:#e6e1f7;
  background:rgba(8,5,20,.7); border:1px solid rgba(255,255,255,.3); transition:transform .35s, border-color .2s, color .2s; }
.rank-flip svg{ width:22px; height:22px; }
.rank-flip:hover{ border-color:#fff; }
.rank-flip:active{ transform:rotate(180deg); }
#rank.ura .rank-flip{ color:#d8c8ff; border-color:rgba(185,139,255,.7); background:rgba(120,70,200,.3); transform:rotate(180deg); }
/* プレゼント（ギフト箱）のボタンと画面 */
.gift-btn{ padding:9px 12px; }
.gift-btn[hidden]{ display:none; }
.gift-dot{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-style:normal; font-family:system-ui, sans-serif;
  font-size:11px; font-weight:700; line-height:18px; text-align:center; color:#fff; background:#ff4d6d; box-shadow:0 0 8px #ff4d6d; }
.gift-dot[hidden]{ display:none; }
.gift-item h3{ font-family:system-ui, sans-serif; font-size:16px; font-weight:700; }
.gift-note{ margin:0 0 8px; font-family:system-ui, sans-serif; font-size:13px; line-height:1.6; color:#e6e1f7; }
.gift-get{ cursor:pointer; padding:7px 18px; border-radius:999px; font-size:14px; color:#05030c; background:var(--gold); border:0; }
.gift-get:disabled, .gift-all:disabled{ opacity:.5; cursor:default; }
.gift-all[hidden]{ display:none; }
.gift-all{ cursor:pointer; padding:11px 28px; border-radius:12px; font-size:16px; letter-spacing:.06em; color:#fff;
  background:linear-gradient(135deg, rgba(31,127,255,.55), rgba(176,16,90,.55)); border:1px solid rgba(255,255,255,.6); }
/* ---------- ホーム画面の見直し（音のアイコン・X シェア・スポンサー募集） ---------- */
.icon-btn{ padding:9px 11px; }
.icon-btn .snd-off{ display:none; }
.icon-btn.off .snd-on{ display:none; }
.icon-btn.off .snd-off{ display:block; }
.icon-btn.off{ color:#ff8fb0; border-color:rgba(255,143,176,.55); }
/* X でシェア：黒い丸ボタン（LINE と同じ大きさ） */
.x-share{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px; cursor:pointer; font-family:system-ui, sans-serif;
  font-size:14px; font-weight:700; color:#fff; background:#000; border:1px solid rgba(255,255,255,.55); box-shadow:0 0 14px rgba(255,255,255,.18); }
.x-share .x-logo{ font-size:16px; line-height:1; }
.x-share:hover{ background:#16131f; border-color:#fff; }
/* スポンサー募集：光るグラデーションで目立たせる */
.sponsor-cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px; font-family:system-ui, sans-serif; font-size:14px; font-weight:700;
  color:#fff; text-decoration:none; background:linear-gradient(120deg, #ff3d8b, #ff9a3d 55%, #ffcf4a); box-shadow:0 0 18px rgba(255,120,80,.55);
  border:1px solid rgba(255,255,255,.6); animation:sponsorGlow 2.4s ease-in-out infinite; }
.sponsor-cta:hover{ filter:brightness(1.08); }
@keyframes sponsorGlow{ 0%,100%{ box-shadow:0 0 14px rgba(255,120,80,.45); } 50%{ box-shadow:0 0 26px rgba(255,150,80,.85); } }
@media (prefers-reduced-motion: reduce){ .sponsor-cta{ animation:none; } }
@media (max-width:420px){
  .home-links .x-share, .home-links .sponsor-cta{ padding:7px 10px; font-size:12px; gap:4px; white-space:nowrap; }
  .home-links .x-share .x-logo{ font-size:14px; }
  /* 左上のボタンが3つになったので、ニックネームの幅をそのぶん抑える */
  #title .nick-badge{ max-width:calc(100vw - 32px - 170px); }
}
/* ホーム画面も、収まらないときは上下が切れずにスクロールできるように */
#title{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* ラッキーボーナスの行（結果画面） */
.res-rec .rec-line.lucky{ display:table; margin:0 auto 6px; padding:6px 18px; border-radius:999px; font-size:17px; font-weight:800; color:#fff;
  text-shadow:0 0 6px rgba(0,30,90,.9); border:1px solid rgba(200,240,255,.9);
  background:linear-gradient(120deg, #0a3cff, #1fa8ff 50%, #7ff0ff); box-shadow:0 0 22px rgba(60,170,255,.9), inset 0 0 10px rgba(255,255,255,.35);
  animation:luckyPop .6s ease-out both, luckyGlow 1.6s ease-in-out .6s infinite; }
/* 珍しい当たりなので、青く光り続ける */
@keyframes luckyGlow{ 0%,100%{ box-shadow:0 0 18px rgba(60,170,255,.75), inset 0 0 10px rgba(255,255,255,.3); } 50%{ box-shadow:0 0 34px rgba(110,210,255,1), inset 0 0 14px rgba(255,255,255,.5); } }
@media (prefers-reduced-motion: reduce){ .res-rec .rec-line.lucky{ animation:none; } }
@keyframes luckyPop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.15); opacity:1; } 100%{ transform:scale(1); } }