/* ===== 全テーマ共通：メッセージ窓・被ダメ演出・テーマ選択 ===== */
.msgwin { position: relative; z-index: 2; margin: 8px 12px 0; padding: 6px 12px; min-height: 36px; font-size: 14px; line-height: 1.6; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.enemy.hit { animation: hitShake .45s linear var(--fd, 0ms) both; }
.enemy.hit .eicon { animation: hitBlink .45s steps(1) var(--fd, 0ms) both; }
.enemy.hit.big { animation-name: hitShakeBig; }
.enemy.hit::before, .player.hit::before, .player.guardfx::before, .player.debufffx::before { content: ''; position: absolute; inset: 0; pointer-events: none; animation: hitFlash .45s ease-out var(--fd, 0ms) both; }
.enemy, .player { position: relative; }
.enemy.hit::before, .player.hit::before { background: #ff2a2a; mix-blend-mode: screen; }
.player.guardfx::before { background: #5a9cff; }
.player.debufffx::before { background: #b070ff; }
.player.hit { animation: hitShake .4s linear var(--fd, 0ms) both; }
@keyframes hitShake { 0%, 100% { transform: none; } 12% { transform: translateX(-9px); } 26% { transform: translateX(8px); } 40% { transform: translateX(-6px); } 56% { transform: translateX(4px); } 72% { transform: translateX(-2px); } }
@keyframes hitShakeBig { 0%, 100% { transform: none; } 10% { transform: translate(-14px, 3px) scale(1.04); } 24% { transform: translate(12px, -3px); } 38% { transform: translate(-9px, 2px); } 54% { transform: translate(6px, 0); } 70% { transform: translate(-3px, 0); } }
@keyframes hitBlink { 0% { opacity: 0; } 14% { opacity: 1; filter: brightness(2.6); } 28% { opacity: 0; } 42% { opacity: 1; filter: none; } 56% { opacity: 0; } 70% { opacity: 1; } }
@keyframes hitFlash { 0% { opacity: .75; } 100% { opacity: 0; } }
.tgroup { margin: 14px 0 6px; font-size: 14px; }
.themelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; }
.themebtn { display: grid; grid-template-columns: 36px 1fr; gap: 0 8px; align-items: center; text-align: left; padding: 8px; background: var(--card); border: 2px solid var(--ink); }
.themebtn .sw { grid-row: span 2; width: 36px; height: 30px; border: 3px solid; border-radius: 4px; }
.themebtn small { font-size: 11px; line-height: 1.4; }
.themebtn.on { outline: 3px solid var(--shu); outline-offset: 1px; }
@media (max-width: 760px) {
  .msgwin { margin: 6px 6px 0; font-size: 12px; min-height: 30px; padding: 4px 8px; }
  body[data-screen="battle"] #chat { top: 68px; height: 80px; }
}

/* ===== RPG風テーマの共通部分 ===== */
body.rpg { background: var(--page); color: var(--page-fg); }
body.rpg #app { background: var(--page); border: 0; }
body.rpg :is(.node, .style, .story, .detail, .mbox, .item, .brelic, .sitem, .ritem, .ach, .menu button, .msgwin, .gain, .subs, .tip, .result, .unlock, .easy, .asc, .metabox, .sumgrid, .strip, .themebtn, .pile, .credits, #toast, .banner) {
  background: var(--win-bg); color: var(--win-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); outline: 0;
}
body.rpg :is(.node, .style, .story, .detail, .mbox, .item, .brelic, .sitem, .ritem, .ach, .gain, .tip, .result, .metabox, .sumgrid, .themebtn, .msgwin) :is(small, .lead, .kwdesc) { color: var(--win-sub); }
body.rpg .screen > :is(h2, h3, .lead), body.rpg .logo :is(.l2, .l3) { color: var(--page-fg); border-color: var(--page-fg); }
body.rpg .screen > .lead { opacity: .85; }
body.rpg .detail.tut { transform: none; border-color: var(--acc); }
body.rpg .node:not(:disabled):hover, body.rpg .brelic:hover, body.rpg .sitem:hover { transform: none; box-shadow: var(--win-sh); filter: brightness(1.12); }
body.rpg .node:not(:disabled):active { transform: translateY(1px); }
body.rpg .node.hot { background: var(--win-bg); }
/* アイコンの代わりにRPGのカーソル */
body.rpg :is(.node, .style) .ic { background: transparent !important; color: var(--acc); transform: none; font-size: 0; width: 24px; height: 24px; border: 0; box-shadow: none; }
body.rpg :is(.node, .style) .ic::before { content: '▶'; font-size: 18px; opacity: .2; }
body.rpg :is(.node, .style):hover .ic::before, body.rpg .style.on .ic::before { opacity: 1; animation: cursor .6s steps(2) infinite; }
body.rpg .node:has(.ic) { grid-template-columns: 26px 1fr; }
@keyframes cursor { 50% { transform: translateX(3px); } }
body.rpg .style.on { outline: 2px solid var(--acc); outline-offset: -6px; box-shadow: var(--win-sh); }
body.rpg :is(.gl, .brelic span, .sitem span, .ritem span) { background: transparent; color: var(--acc); border: 1px solid var(--win-sub); border-radius: var(--win-rad); }
body.rpg .sitem em { color: var(--acc); }
body.rpg #top { background: var(--win-bg); color: var(--win-fg); border-bottom: var(--win-bd); }
body.rpg .stats i { color: var(--win-sub); }
body.rpg .stats button { border-color: var(--win-sub); color: var(--win-fg); border-radius: var(--win-rad); }
body.rpg .relic { background: transparent; color: var(--win-fg); border: 1px solid var(--win-sub); border-radius: var(--win-rad); }
body.rpg .potion:not(.empty) { background: var(--acc); color: var(--acc-fg); }
body.rpg .live { border-radius: var(--win-rad); }
body.rpg #chat { background: var(--win-bg); color: var(--win-fg); border-left: var(--win-bd); }
body.rpg .chathead { background: transparent; border-bottom: 1px solid var(--win-sub); color: var(--win-sub); }
body.rpg #chatlist { background: none !important; }
body.rpg .cn { color: var(--acc); }
body.rpg button.main { background: var(--acc); color: var(--acc-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); }
body.rpg button.sub { color: var(--page-fg); border-color: var(--page-fg); opacity: .8; }
body.rpg .logo .l1 { color: var(--page-fg); text-shadow: var(--logo-sh); }
body.rpg .hanko { color: var(--acc); border-color: var(--acc); }
body.rpg .next { color: var(--acc); }
body.rpg .day { border-color: var(--win-sub); }
body.rpg .day small { color: var(--win-sub); }
body.rpg .day.done { background: none; opacity: .5; color: var(--win-fg); }
body.rpg .day.now { background: var(--acc); color: var(--acc-fg); }
body.rpg .loop { background: var(--acc); color: var(--acc-fg); }
body.rpg .item button { background: var(--acc); color: var(--acc-fg); border-radius: var(--win-rad); }
/* カード */
body.rpg .card { background: var(--win-bg); color: var(--win-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); }
body.rpg .cname { background: transparent !important; color: var(--c, var(--win-fg)) !important; border-bottom: 1px solid var(--win-sub); border-radius: 0; }
body.rpg .t-atk { --c: var(--c-atk); } body.rpg .t-skl { --c: var(--c-skl); } body.rpg .t-pow { --c: var(--c-pow); } body.rpg .t-cmt { --c: var(--c-cmt); } body.rpg .t-curse { --c: var(--win-sub); }
body.rpg .ctype { color: var(--win-sub); border-color: transparent; }
body.rpg .ctext i { color: var(--win-sub); }
body.rpg .kw { background: none; color: var(--acc); }
body.rpg .shoken { color: var(--c-pow); }
body.rpg .plus { color: #7ee07e; } body.rpg .minus { color: #ff8a8a; }
body.rpg .card .cost { background: var(--acc); color: var(--acc-fg); border-color: var(--win-bg); }
body.rpg .card .cost.no { background: #666; color: #ccc; }
body.rpg .r-rare { outline-color: var(--c-pow); }
body.rpg .hand .card.sel { outline: 3px solid var(--acc); box-shadow: var(--win-sh); }
body.rpg .card.pickable:hover { box-shadow: var(--win-sh); filter: brightness(1.15); }
body.rpg .price { color: var(--acc); }
/* 戦闘 */
body.rpg .battle { background: var(--scene); color: var(--win-fg); }
body.rpg .battle::after { display: none; }
body.rpg .battle .ename, body.rpg .battle .pname { color: var(--scene-fg, #fff); text-shadow: 0 1px 0 #000, 0 0 3px #000; }
body.rpg .intent span { background: var(--win-bg); color: var(--win-fg); border: 1px solid var(--win-sub); border-radius: var(--win-rad); }
body.rpg .i-atk { background: #c41e1e !important; color: #fff !important; }
body.rpg .intent small { color: var(--scene-fg, #ddd); text-shadow: 0 1px 2px #000; }
body.rpg .eicon span { background: transparent; border: 0; transform: none !important; color: var(--mon); text-shadow: var(--mon-sh); font-family: var(--f-head); width: auto; height: auto; font-size: 66px; }
body.rpg .enemy:nth-child(2) .eicon span { color: var(--mon2, var(--mon)); }
body.rpg .enemy:nth-child(3) .eicon span { color: var(--mon3, var(--mon)); }
body.rpg .enemy.boss .eicon span { width: auto; height: auto; font-size: 104px; background: transparent; color: var(--mon-boss, var(--mon)); }
body.rpg .enemy.tgt { border-color: var(--acc); }
body.rpg .hpbar { background: var(--hpbg); border: 1px solid var(--win-fg); border-radius: var(--bar-rad, 0); overflow: hidden; }
body.rpg .hpfill { background: var(--hp); border-radius: 0; }
body.rpg .hpbar span { color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
body.rpg .blk { background: #2f62c8; border-color: #fff; border-radius: var(--bar-rad, 0); }
body.rpg .st { border-color: var(--win-sub); background: var(--win-bg); color: var(--win-fg); border-radius: var(--win-rad); }
body.rpg .wipe { background: #e8e4dc; border: var(--win-bd); border-radius: var(--win-rad); outline: 0; overflow: hidden; }
body.rpg #bottom { background: var(--page); border-top: var(--win-bd); }
body.rpg .hype { background: var(--win-bg); border: var(--win-bd); border-radius: var(--win-rad); overflow: hidden; }
body.rpg .hype span { color: var(--win-fg); text-shadow: 0 1px 2px #000; }
body.rpg .hfill { background: var(--hype, #e8902a); }
body.rpg .hype::after { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #0006 calc(10% - 1px) 10%); }
body.rpg .energy { background: var(--win-bg); color: var(--win-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); }
body.rpg .pile { color: var(--win-fg); }
body.rpg .endturn { background: var(--acc); color: var(--acc-fg); border: var(--win-bd); border-radius: var(--win-rad); box-shadow: var(--win-sh); }
body.rpg .endturn.glow { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { filter: brightness(1.35); } }
body.rpg .banner { font-family: var(--f-head); outline: 0; }
body.rpg .banner small { color: var(--win-sub); }
body.rpg .banner.kami { color: var(--acc); background: var(--win-bg); box-shadow: var(--win-sh); }
body.rpg .banner.red { color: #ff8080; }
body.rpg .msgwin { font-family: var(--f-body); }
body.rpg #modal { background: #000a; }

/* ===== クリスタル系RPG風 ===== */
body[data-theme="cr8"] {
  --f-head: 'DotGothic16', monospace; --f-body: 'DotGothic16', monospace; --f-num: 'DotGothic16', monospace;
  --page: #000; --page-fg: #fff; --win-bg: #1a2fa8; --win-fg: #fff; --win-sub: #aab8ff; --win-bd: 3px solid #fff; --win-rad: 6px; --win-sh: 0 0 0 2px #000;
  --acc: #fff; --acc-fg: #1a2fa8; --scene: #000; --hp: #f8f8f8; --hpbg: #3a3a6a; --hype: #f8d040;
  --c-atk: #ff9a8a; --c-skl: #9ad0ff; --c-pow: #ffe070; --c-cmt: #9af0a0; --mon: #f8a040; --mon2: #60d0f0; --mon3: #e070e0; --mon-boss: #f05050; --mon-sh: 4px 4px 0 #602000; --logo-sh: 4px 4px 0 #1a2fa8;
}
body[data-theme="cr16"] {
  --f-head: 'DotGothic16', monospace; --f-body: 'DotGothic16', monospace; --f-num: 'DotGothic16', monospace;
  --page: #0c0c1c; --page-fg: #fff; --win-bg: linear-gradient(180deg, #5878ea 0%, #2c3eb4 45%, #121c74 100%); --win-fg: #fff; --win-sub: #c4ccf4; --win-bd: 3px ridge #e4e4f4; --win-rad: 5px; --win-sh: 0 0 0 1px #000, 2px 3px 0 #0008;
  --acc: #fff; --acc-fg: #2c3eb4; --scene: linear-gradient(180deg, #2e5ec0 0%, #8cc4f2 46%, #5a9a48 47%, #2e5a28 100%); --hp: #f0f0f0; --hpbg: #24306a; --hype: #f8c840;
  --c-atk: #ffb0a0; --c-skl: #b0e0ff; --c-pow: #ffe890; --c-cmt: #b0f4b0; --mon: #7a3a8a; --mon2: #8a4a20; --mon3: #2a6a3a; --mon-boss: #4a2a6a; --mon-sh: 3px 3px 0 #fff8, -1px -1px 0 #0006; --logo-sh: 4px 4px 0 #2c3eb4;
}
body[data-theme="cr32"] {
  --f-head: 'Noto Sans JP', sans-serif; --f-body: 'Noto Sans JP', sans-serif; --f-num: 'Noto Sans JP', sans-serif;
  --page: #08080f; --page-fg: #e8ecf8; --win-bg: linear-gradient(135deg, #4c6ce4 0%, #20319a 50%, #0a1044 100%); --win-fg: #fff; --win-sub: #c8d0ea; --win-bd: 2px solid #c4ccdf; --win-rad: 9px; --win-sh: 0 0 0 1px #1a2040, 3px 3px 8px #0009;
  --acc: #f0f0f8; --acc-fg: #1a2a7a; --scene: radial-gradient(ellipse at 50% 85%, #5a6a40 0%, #232c16 55%, #0a0c06 100%); --hp: linear-gradient(90deg, #3a9a3a, #8ae07a); --hpbg: #1a1a2a; --hype: linear-gradient(90deg, #d07a1a, #ffd04a); --bar-rad: 3px;
  --c-atk: #ffb4a4; --c-skl: #b4dcff; --c-pow: #ffe48a; --c-cmt: #aef0b4; --mon: #d8c8a0; --mon2: #a0c8d8; --mon3: #d8a0c0; --mon-boss: #e0b060; --mon-sh: 0 6px 12px #000, 2px 2px 0 #000; --logo-sh: 0 4px 10px #3a5ae0;
}
body[data-theme="cr32"] .screen h2 { font-weight: 700; }
body[data-theme="cr128"] {
  --f-head: 'Noto Sans JP', sans-serif; --f-body: 'Noto Sans JP', sans-serif; --f-num: 'Noto Sans JP', sans-serif;
  --page: #0a1430; --page-fg: #eaf2ff; --win-bg: linear-gradient(180deg, rgba(64, 104, 206, .86), rgba(14, 28, 92, .9)); --win-fg: #fff; --win-sub: #c8daf8; --win-bd: 1.5px solid rgba(214, 228, 255, .85); --win-rad: 12px; --win-sh: 0 4px 14px rgba(0, 0, 30, .55);
  --acc: #ffe9a8; --acc-fg: #1a2a6a; --scene: linear-gradient(180deg, #7ac0e8 0%, #3a84b8 48%, #1a5a88 50%, #0a2a48 100%); --hp: linear-gradient(90deg, #e8a020, #fff07a); --hpbg: #0a1a3a; --hype: linear-gradient(90deg, #4ad0ff, #e8fbff); --bar-rad: 6px;
  --c-atk: #ffb8a8; --c-skl: #b8e4ff; --c-pow: #ffe8a0; --c-cmt: #b4f4c4; --mon: #f4f8ff; --mon-sh: 0 0 14px #4ad0ff, 0 4px 8px #000a; --mon-boss: #ffd6f0; --logo-sh: 0 0 18px #4a8aff;
}
body[data-theme="crhd"] {
  --f-head: 'Noto Sans JP', sans-serif; --f-body: 'Noto Sans JP', sans-serif; --f-num: 'Noto Sans JP', sans-serif;
  --page: #04080b; --page-fg: #d8f4ff; --win-bg: linear-gradient(90deg, rgba(6, 26, 36, .92), rgba(10, 44, 58, .72)); --win-fg: #e8faff; --win-sub: #8ac8dc; --win-bd: 1px solid rgba(120, 220, 255, .75); --win-rad: 0; --win-sh: 0 0 10px rgba(80, 200, 255, .35), inset 0 0 14px rgba(80, 200, 255, .12);
  --acc: #78dcff; --acc-fg: #04161e; --scene: radial-gradient(circle at 50% 30%, #1e5262 0%, #08202a 55%, #020608 100%); --hp: linear-gradient(90deg, #2ab0e0, #b8f4ff); --hpbg: #06202a; --hype: linear-gradient(90deg, #2ab0e0, #f0fcff);
  --c-atk: #ff9a9a; --c-skl: #8ae0ff; --c-pow: #f8e08a; --c-cmt: #8af0c0; --mon: #c8f4ff; --mon-sh: 0 0 18px #2ab0e0, 0 0 2px #fff; --mon-boss: #ffb0d8; --logo-sh: 0 0 16px #2ab0e0;
}
body[data-theme="crhd"] body, body[data-theme="crhd"] .msgwin, body[data-theme="crhd"] .ctext { font-weight: 300; }
body[data-theme="crhd"] :is(.node, .card, .sitem, .brelic, .msgwin, .detail) { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
body[data-theme="crnow"] {
  --f-head: 'Noto Sans JP', sans-serif; --f-body: 'Noto Sans JP', sans-serif; --f-num: 'Noto Sans JP', sans-serif;
  --page: #121212; --page-fg: #ece6d6; --win-bg: rgba(10, 10, 10, .8); --win-fg: #f2ede0; --win-sub: #a8a090; --win-bd: 1px solid rgba(217, 207, 180, .45); --win-rad: 0; --win-sh: none;
  --acc: #d9cfb4; --acc-fg: #121212; --scene: linear-gradient(180deg, #34302a 0%, #18160f 60%, #0a0908 100%); --hp: #e8e2d0; --hpbg: #2a2a2a; --hype: #c8a868;
  --c-atk: #e8a090; --c-skl: #a8c4e0; --c-pow: #e0c890; --c-cmt: #a8d0a8; --mon: #ece6d6; --mon-sh: 0 10px 24px #000; --mon-boss: #f0c890; --logo-sh: none;
}
body[data-theme="crnow"] { letter-spacing: .05em; }
body[data-theme="crnow"] .screen h2 { font-weight: 300; font-size: 26px; border-bottom: 1px solid var(--acc); padding-bottom: 6px; }
body[data-theme="crnow"] .logo .l1 { font-weight: 300; letter-spacing: .3em; }
body[data-theme="crnow"] :is(.node, .sitem, .brelic) { border-width: 0 0 0 2px; border-color: var(--acc); }

/* ===== 勇者系RPG風 ===== */
body[data-theme="hr8"] {
  --f-head: 'DotGothic16', monospace; --f-body: 'DotGothic16', monospace; --f-num: 'DotGothic16', monospace;
  --page: #000; --page-fg: #fff; --win-bg: #000; --win-fg: #fff; --win-sub: #bbb; --win-bd: 4px solid #fff; --win-rad: 10px; --win-sh: none;
  --acc: #fff; --acc-fg: #000; --scene: #000; --hp: #fff; --hpbg: #333; --hype: #f8b800;
  --c-atk: #ff7060; --c-skl: #60c8ff; --c-pow: #ffd860; --c-cmt: #80f080; --mon: #3cbcfc; --mon2: #f878f8; --mon3: #58d854; --mon-boss: #f83800; --mon-sh: none; --logo-sh: 4px 4px 0 #555;
}
body[data-theme="hr16"] {
  --f-head: 'DotGothic16', monospace; --f-body: 'DotGothic16', monospace; --f-num: 'DotGothic16', monospace;
  --page: #000; --page-fg: #fff; --win-bg: #000; --win-fg: #fff; --win-sub: #c8c8c8; --win-bd: 3px solid #fff; --win-rad: 8px; --win-sh: 0 0 0 2px #000, 0 0 0 4px #888;
  --acc: #fff; --acc-fg: #000; --scene: linear-gradient(180deg, #5c96e4 0%, #c4ddf6 44%, #6aa64e 45%, #3a7032 100%); --hp: #fff; --hpbg: #444; --hype: #f8c000;
  --c-atk: #ff8070; --c-skl: #80d0ff; --c-pow: #ffe070; --c-cmt: #90f090; --mon: #2848c0; --mon2: #a02890; --mon3: #208030; --mon-boss: #901818; --mon-sh: 2px 2px 0 #fff, 4px 4px 0 #0004; --logo-sh: 4px 4px 0 #444;
}
body[data-theme="hr32"] {
  --f-head: 'Kosugi Maru', sans-serif; --f-body: 'Kosugi Maru', sans-serif; --f-num: 'Kosugi Maru', sans-serif;
  --page: #0e0e0e; --page-fg: #fff; --win-bg: #000; --win-fg: #fff; --win-sub: #c0c0c0; --win-bd: 3px solid #fff; --win-rad: 14px; --win-sh: 0 0 0 2px #000;
  --acc: #fff; --acc-fg: #000; --scene: linear-gradient(180deg, #5a8ac8 0%, #b0d0e8 44%, #7a9a50 45%, #42622a 100%); --hp: #fff; --hpbg: #3a3a3a; --hype: #f8c840; --bar-rad: 4px;
  --c-atk: #ff9a8a; --c-skl: #9ad4ff; --c-pow: #ffe48a; --c-cmt: #a0f0a0; --mon: #f4f4f4; --mon-sh: 0 0 0 #000, 3px 4px 0 #0008, 0 0 2px #000; --mon-boss: #ffcc66; --logo-sh: 3px 3px 0 #555;
}
body[data-theme="hr128"] {
  --f-head: 'Kosugi Maru', sans-serif; --f-body: 'Kosugi Maru', sans-serif; --f-num: 'Kosugi Maru', sans-serif;
  --page: #16241a; --page-fg: #fff; --win-bg: rgba(0, 0, 0, .64); --win-fg: #fff; --win-sub: #d0d0d0; --win-bd: 3px solid #fff; --win-rad: 16px; --win-sh: 0 3px 8px #0007;
  --acc: #fff; --acc-fg: #000; --scene: linear-gradient(180deg, #82c2f6 0%, #dcf2ff 40%, #8cc860 41%, #4f8f36 100%); --hp: #fff; --hpbg: #222c; --hype: #ffcc33; --bar-rad: 6px;
  --c-atk: #ffa090; --c-skl: #a0dcff; --c-pow: #ffe890; --c-cmt: #aaf4aa; --mon: #3a8ad8; --mon2: #d85a3a; --mon3: #8a5ad8; --mon-boss: #6a2a8a; --mon-sh: 0 0 0 #fff, 2px 2px 0 #fff, 0 6px 10px #0006; --logo-sh: 0 3px 8px #000;
}
body[data-theme="hrhd"] {
  --f-head: 'M PLUS Rounded 1c', sans-serif; --f-body: 'M PLUS Rounded 1c', sans-serif; --f-num: 'M PLUS Rounded 1c', sans-serif;
  --page: #0a1030; --page-fg: #fff; --win-bg: rgba(8, 18, 66, .84); --win-fg: #fff; --win-sub: #c8d4f4; --win-bd: 3px solid #fff; --win-rad: 14px; --win-sh: 0 2px 10px #0008;
  --acc: #ffe27a; --acc-fg: #0a1440; --scene: linear-gradient(180deg, #4a82d2 0%, #aad2f2 44%, #5c9c4a 45%, #2a6a30 100%); --hp: linear-gradient(90deg, #f8f8f8, #d8e4ff); --hpbg: #1a2050; --hype: #ffcc33; --bar-rad: 6px;
  --c-atk: #ffa8a0; --c-skl: #a8dcff; --c-pow: #ffe48a; --c-cmt: #a8f0a8; --mon: #f0f4ff; --mon-sh: 2px 3px 0 #0a1440, 0 0 3px #000; --mon-boss: #ffb050; --logo-sh: 0 3px 0 #2a3a90;
}
body[data-theme="hrnow"] {
  --f-head: 'M PLUS Rounded 1c', sans-serif; --f-body: 'M PLUS Rounded 1c', sans-serif; --f-num: 'M PLUS Rounded 1c', sans-serif;
  --page: #0f0f16; --page-fg: #fff; --win-bg: linear-gradient(180deg, rgba(22, 22, 36, .88), rgba(4, 4, 12, .9)); --win-fg: #fff; --win-sub: #d0ccc0; --win-bd: 2px solid #f4f4f4; --win-rad: 12px; --win-sh: inset 0 0 0 3px #0008, 0 0 0 1px rgba(216, 180, 80, .7), 0 4px 12px #0008;
  --acc: #f0d070; --acc-fg: #141018; --scene: linear-gradient(180deg, #4aaaff 0%, #ccecff 42%, #9ad070 43%, #4a9a40 100%); --hp: linear-gradient(180deg, #ffffff, #c8d8f0); --hpbg: #10101a; --hype: linear-gradient(90deg, #f0a020, #ffe880); --bar-rad: 8px;
  --c-atk: #ffaaa0; --c-skl: #aadcff; --c-pow: #f0d070; --c-cmt: #aaf0aa; --mon: #2a6ad0; --mon2: #d0402a; --mon3: #7a3ac0; --mon-boss: #5a1a7a; --mon-sh: 2px 2px 0 #fff, 0 8px 12px #0005; --logo-sh: 0 3px 0 #a07a20;
}

/* ===== そのほかのRPG風 ===== */
body[data-theme="anime"] {
  --f-head: 'M PLUS Rounded 1c', sans-serif; --f-body: 'M PLUS Rounded 1c', sans-serif; --f-num: 'M PLUS Rounded 1c', sans-serif;
  --page: linear-gradient(180deg, #bfe4ff, #f0f9ff); --page-fg: #1a2a4a; --win-bg: linear-gradient(180deg, #ffffff 0%, #e2f1ff 100%); --win-fg: #1a2a4a; --win-sub: #4a6a90; --win-bd: 2px solid #5aa0e0; --win-rad: 16px; --win-sh: 0 3px 0 #2a6ab0;
  --acc: #ff8a2a; --acc-fg: #fff; --scene: linear-gradient(180deg, #78c4ff 0%, #dcf3ff 48%, #9ce07c 50%, #58ae5c 100%); --scene-fg: #1a2a4a; --hp: linear-gradient(180deg, #7aff9a, #20b050); --hpbg: #fff; --hype: linear-gradient(90deg, #ff8a2a, #ffd23a); --bar-rad: 8px;
  --c-atk: #e04a3a; --c-skl: #2a7ad0; --c-pow: #d08a00; --c-cmt: #2a9a50; --mon: #3a5aa0; --mon2: #c04a7a; --mon3: #4a9a4a; --mon-boss: #8a2ac0; --mon-sh: 3px 3px 0 #fff, -2px -2px 0 #fff, 0 6px 10px #0003; --logo-sh: 3px 3px 0 #ff8a2a;
}
body[data-theme="anime"] .battle .ename, body[data-theme="anime"] .battle .pname { text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
body[data-theme="anime"] .intent small { text-shadow: 0 0 3px #fff; }
body[data-theme="anime"] .plus { color: #1a9a3a; } body[data-theme="anime"] .minus { color: #d02a2a; }
body[data-theme="anime"] .hype span { color: #1a2a4a; text-shadow: 0 0 3px #fff; }
body[data-theme="redblack"] {
  --f-head: 'Dela Gothic One', sans-serif; --f-body: 'Noto Sans JP', sans-serif; --f-num: 'Dela Gothic One', sans-serif;
  --page: #c8000e; --page-fg: #fff; --win-bg: #000; --win-fg: #fff; --win-sub: #d0d0d0; --win-bd: 3px solid #fff; --win-rad: 0; --win-sh: 6px 6px 0 #000;
  --acc: #e60012; --acc-fg: #fff; --scene: linear-gradient(158deg, #0c0c0c 0 56%, #e60012 56% 64%, #0c0c0c 64%); --hp: #fff; --hpbg: #400; --hype: #e60012;
  --c-atk: #ff3a4a; --c-skl: #5ad8ff; --c-pow: #ffe23a; --c-cmt: #7aff8a; --mon: #fff; --mon-sh: 5px 5px 0 #e60012; --mon-boss: #e60012; --logo-sh: 6px 6px 0 #000;
}
body[data-theme="redblack"] :is(.node, .sitem, .brelic, .card, .msgwin, .detail, .themebtn) { clip-path: polygon(0 0, 100% 5px, 98% 100%, 2% calc(100% - 4px)); }
body[data-theme="redblack"] .screen h2 { display: inline-block; background: #000; padding: 4px 14px; transform: rotate(-2deg); box-shadow: 5px 5px 0 #fff; }
body[data-theme="redblack"] .hand .card:nth-child(odd) { transform: rotate(-2deg); }
body[data-theme="redblack"] .hand .card:nth-child(even) { transform: rotate(2deg); }
body[data-theme="redblack"] .hand .card.sel { transform: translateY(-16px) rotate(-4deg) scale(1.06); }
body[data-theme="redblack"] .banner.kami { transform-origin: center; --r: -8deg; background: #000; color: #fff; box-shadow: 10px 10px 0 #e60012; }
body[data-theme="redblack"] .eicon span { font-style: italic; }
body[data-theme="handheld"] {
  --f-head: 'DotGothic16', monospace; --f-body: 'DotGothic16', monospace; --f-num: 'DotGothic16', monospace;
  --page: #f4f4ec; --page-fg: #303030; --win-bg: #fff; --win-fg: #303030; --win-sub: #707880; --win-bd: 4px double #404858; --win-rad: 8px; --win-sh: 0 0 0 2px #fff, 0 0 0 4px #c8d0d8;
  --acc: #e03838; --acc-fg: #fff; --scene: linear-gradient(180deg, #f8f8e8 0%, #eaf2d4 100%); --scene-fg: #303030; --hp: #58c060; --hpbg: #506058; --hype: #f8b030; --bar-rad: 6px;
  --c-atk: #d03828; --c-skl: #3068c8; --c-pow: #c08800; --c-cmt: #289848; --mon: #5a7ac8; --mon2: #c85a7a; --mon3: #6aa848; --mon-boss: #7a48a8; --mon-sh: 3px 3px 0 #0002; --logo-sh: 3px 3px 0 #f8c030;
}
body[data-theme="handheld"] .battle .ename, body[data-theme="handheld"] .battle .pname { text-shadow: none; }
body[data-theme="handheld"] .intent small { text-shadow: none; }
body[data-theme="handheld"] .plus { color: #1a8a3a; } body[data-theme="handheld"] .minus { color: #c02a2a; }