/* どどリアクション☆ フロント（ライト／ダーク両対応：html.land-dark） */
.drx-bar,.drx-rank{
  --drx-bg:#ffffff;
  --drx-bg2:#f6f7fc;
  --drx-line:#e4e7f1;
  --drx-text:#262b3b;
  --drx-dim:#7c839b;
  --drx-key:#ff6a88;
  --drx-key2:#ffb35c;
  --drx-on-bg:#fff0f3;
  --drx-on-line:#ff8fa6;
  --drx-shadow:0 6px 22px rgba(40,50,90,.08);
  color:var(--drx-text);
  line-height:1.5;
  box-sizing:border-box;
}
html.land-dark .drx-bar,html.land-dark .drx-rank{
  --drx-bg:#1c2030;
  --drx-bg2:#242a3d;
  --drx-line:#353c55;
  --drx-text:#eef0f8;
  --drx-dim:#9ba3bf;
  --drx-key:#ff7d97;
  --drx-key2:#ffc070;
  --drx-on-bg:#3a2432;
  --drx-on-line:#d8607c;
  --drx-shadow:0 6px 22px rgba(0,0,0,.35);
}
.drx-bar *,.drx-rank *{box-sizing:border-box}

/* ---------- ボタン列 ---------- */
.drx-bar{
  margin:2.2em auto 1.6em;
  padding:16px 14px 12px;
  max-width:640px;
  background:var(--drx-bg);
  border:1px solid var(--drx-line);
  border-radius:18px;
  box-shadow:var(--drx-shadow);
  text-align:center;
  position:relative;
}
.drx-head{margin:0 0 12px!important;padding:0!important;font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--drx-text)}
.drx-head::before{content:'';display:inline-block;width:.55em;height:.55em;border-radius:50%;background:linear-gradient(135deg,var(--drx-key),var(--drx-key2));margin-right:.45em;vertical-align:.08em}
.drx-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.drx-btn{
  -webkit-appearance:none;appearance:none;
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:86px;
  padding:8px 4px 6px;
  margin:0;
  font:inherit;color:var(--drx-text);
  background:var(--drx-bg2);
  border:2px solid transparent;
  border-radius:16px;
  cursor:pointer;
  transition:transform .15s ease,background-color .2s,border-color .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.drx-btn:hover{transform:translateY(-2px);border-color:var(--drx-line);box-shadow:0 4px 12px rgba(40,50,90,.08)}
.drx-btn:active{transform:scale(.94)}
.drx-btn:focus{outline:none}
.drx-btn:focus-visible{outline:3px solid var(--drx-key);outline-offset:2px}
.drx-btn.is-on{background:var(--drx-on-bg);border-color:var(--drx-on-line)}
.drx-emo{font-size:30px;line-height:1.15;display:block;transition:transform .2s;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.drx-btn:not(.is-on) .drx-emo{filter:saturate(.75)}
.drx-btn.is-on .drx-emo{transform:scale(1.08)}
.drx-lbl{font-size:12px;font-weight:700;color:var(--drx-dim);line-height:1.3}
.drx-btn.is-on .drx-lbl{color:var(--drx-key)}
.drx-num{position:relative;display:block;height:1.35em;min-width:2.5em;overflow:hidden;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.35}
.drx-n{display:block;transition:opacity .2s}
.drx-btn.is-zero .drx-n{opacity:.45}
.drx-bar:not(.is-ready) .drx-n{opacity:0}
.drx-btn.is-on .drx-n{color:var(--drx-key);opacity:1}

/* 数字くるっと */
.drx-out{position:absolute;left:0;right:0;top:0}
.drx-in-up{animation:drx-in-up .36s cubic-bezier(.2,.8,.3,1.2) both}
.drx-out-up{animation:drx-out-up .36s ease both}
.drx-in-down{animation:drx-in-down .36s cubic-bezier(.2,.8,.3,1.2) both}
.drx-out-down{animation:drx-out-down .36s ease both}
@keyframes drx-in-up{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes drx-out-up{from{transform:none;opacity:1}to{transform:translateY(-100%);opacity:0}}
@keyframes drx-in-down{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes drx-out-down{from{transform:none;opacity:1}to{transform:translateY(100%);opacity:0}}

/* ポン！ */
.drx-pop{animation:drx-pop .45s cubic-bezier(.3,1.6,.5,1)}
.drx-pop .drx-emo{animation:drx-emo .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes drx-pop{0%{transform:scale(1)}30%{transform:scale(.86)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes drx-emo{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.45) rotate(-12deg)}70%{transform:scale(.95) rotate(6deg)}100%{transform:scale(1.08) rotate(0)}}

/* 絵文字ふわっと */
.drx-burst{position:absolute;left:50%;top:32%;width:0;height:0;pointer-events:none;z-index:3}
.drx-burst span{position:absolute;left:-.5em;top:-.6em;font-size:20px;line-height:1;opacity:0;animation:drx-fly .95s cubic-bezier(.15,.7,.3,1) forwards;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
@keyframes drx-fly{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}
  15%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(var(--r))}
}

.drx-msg{margin:6px 0 0!important;padding:0!important;min-height:0;font-size:12px;color:var(--drx-key);opacity:0;transition:opacity .25s;height:0;overflow:hidden}
.drx-msg.is-show{opacity:1;height:auto}

@media (max-width:480px){
  .drx-bar{padding:14px 10px 10px;border-radius:16px}
  .drx-btns{grid-template-columns:repeat(5,1fr);gap:6px}
  .drx-btns:has(.drx-btn:nth-child(6)){grid-template-columns:repeat(4,1fr)}
  .drx-btn{min-height:78px;border-radius:14px;padding:6px 2px 5px}
  .drx-emo{font-size:26px}
  .drx-lbl{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .drx-btn,.drx-emo{transition:none}
  .drx-btn:hover{transform:none}
}

/* ---------- ランキング ---------- */
.drx-rank{
  margin:1.6em 0;
  padding:14px 14px 8px;
  max-width:640px;
  background:var(--drx-bg);
  border:1px solid var(--drx-line);
  border-radius:16px;
  box-shadow:var(--drx-shadow);
}
.drx-rank-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px!important;padding:0!important;font-weight:800;font-size:16px}
.drx-rank-h small{font-size:12px;font-weight:700;color:var(--drx-dim);background:var(--drx-bg2);border-radius:99px;padding:1px 9px}
.drx-rank-list{list-style:none!important;margin:0!important;padding:0!important}
.drx-rank-row{display:flex;align-items:center;gap:10px;padding:8px 2px!important;margin:0!important;border-top:1px solid var(--drx-line)}
.drx-rank-row:first-child{border-top:0}
.drx-rank-row::before,.drx-rank-row::marker{content:none!important}
.drx-rank-no{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--drx-dim);background:var(--drx-bg2)}
.drx-top1 .drx-rank-no{background:linear-gradient(135deg,#ffd54a,#ffab1f);color:#5a3a00}
.drx-top2 .drx-rank-no{background:linear-gradient(135deg,#e4e9f2,#b8c2d4);color:#39414f}
.drx-top3 .drx-rank-no{background:linear-gradient(135deg,#f3c49b,#d58a4f);color:#4a2a10}
.drx-rank-thumb{flex:0 0 48px;width:48px;height:48px;border-radius:10px;object-fit:cover;background:var(--drx-bg2)}
.drx-rank-nothumb{display:flex;align-items:center;justify-content:center;font-size:22px}
.drx-rank-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.drx-rank-title{font-weight:700;color:var(--drx-text)!important;text-decoration:none!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
.drx-rank-title:hover{color:var(--drx-key)!important}
.drx-rank-chips{display:flex;flex-wrap:wrap;gap:4px}
.drx-chip{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--drx-dim);background:var(--drx-bg2);border-radius:99px;padding:0 7px 0 5px;line-height:1.7}
.drx-chip.is-key{color:var(--drx-key);background:var(--drx-on-bg)}
.drx-rank-score{flex:0 0 auto;font-weight:800;font-size:15px;color:var(--drx-key);font-variant-numeric:tabular-nums;white-space:nowrap}
.drx-rank-empty{margin:6px 0 10px!important;color:var(--drx-dim);font-size:14px;text-align:center}
.drx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.drx-note{padding:8px 12px;border:1px dashed #d63638;color:#d63638;border-radius:6px}