/* #064 追加6: 新デザインのゲーム画面（右の縦メニュー・ワールドに入った時のタイトル） */

/* 右の縦メニュー: 背景なしでワールドの上に重ね、各ボタンは角丸の四角 */
html[data-dg-theme="space"] #app { position: relative; }
html[data-dg-theme="space"] #right-menu {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: 78px;
  background: transparent; border: 0; padding: 12px 0; gap: 8px; pointer-events: none;
}
html[data-dg-theme="space"] #right-menu::before { display: none; }
html[data-dg-theme="space"] #right-menu .menu-btn { pointer-events: auto; }
html[data-dg-theme="space"] .menu-btn {
  width: 64px; height: 64px; padding: 6px 2px 5px; gap: 3px; border-radius: 14px;
  background: rgba(17,17,15,.8); border: 1px solid rgba(255,204,0,.45); color: #ffcc00;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); backdrop-filter: blur(6px);
  transition: transform .15s, background .15s, border-color .15s;
}
html[data-dg-theme="space"] .menu-btn svg {
  width: 26px; height: 26px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit;
}
html[data-dg-theme="space"] .menu-btn .tooltip {
  background: none; color: #f8f8f2; padding: 0; font: 700 9.5px/1.15 "Noto Sans JP", sans-serif; clip-path: none; max-width: 60px;
}
html[data-dg-theme="space"] .menu-btn:hover { background: rgba(35,37,33,.92); border-color: #ffcc00; color: #ffcc00; transform: translateX(-3px); }
html[data-dg-theme="space"] .menu-btn:hover svg { transform: none; background: none; }
html[data-dg-theme="space"] .menu-btn:focus-visible { outline: 2px solid #31d9ff; outline-offset: 2px; }
html[data-dg-theme="space"] .menu-btn.active { background: #ffcc00; border-color: #ffcc00; color: #11110f; }
html[data-dg-theme="space"] .menu-btn.active svg { background: none; }
html[data-dg-theme="space"] .menu-btn.active .tooltip { background: none; color: #11110f; }
/* 終了ボタンは赤で区別 */
html[data-dg-theme="space"] #btn-exit { border-color: rgba(255,84,143,.6); color: #ff548f; }
html[data-dg-theme="space"] #btn-exit:hover { border-color: #ff548f; }
/* 黄モード: 黄の四角＋黒線 */
html[data-dg-theme="space"][data-dg-mode="yellow"] .menu-btn { background: rgba(255,204,0,.92); border-color: #11110f; color: #11110f; box-shadow: 3px 3px 0 rgba(17,17,15,.55); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .menu-btn .tooltip { color: #11110f; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .menu-btn:hover { background: #fff3b0; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .menu-btn.active { background: #11110f; color: #ffcc00; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .menu-btn.active .tooltip { color: #ffcc00; }
html[data-dg-theme="space"][data-dg-mode="yellow"] #btn-exit { color: #b0003a; }
@media (max-width: 768px) {
  html[data-dg-theme="space"] #right-menu { top: auto; left: 0; width: auto; height: auto; flex-direction: row; justify-content: center; padding: 6px; }
  html[data-dg-theme="space"] .menu-btn { width: 52px; height: 52px; }
}

/* ワールドに入った時のタイトル・ゲーム内メッセージ */
html[data-dg-theme="space"] .dg-game-toast {
  background: rgba(17,17,15,.9); color: #f8f8f2; border: 1px solid rgba(255,204,0,.5); box-shadow: 0 14px 40px rgba(0,0,0,.45);
  font-family: "Noto Sans JP", sans-serif; backdrop-filter: blur(8px);
  clip-path: polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
html[data-dg-theme="space"] .dg-game-toast.title {
  font-size: clamp(22px, 3.2vw, 34px); padding: 26px 56px 22px; text-align: center; letter-spacing: .06em;
  background: linear-gradient(135deg, rgba(17,17,15,.94), rgba(30,32,28,.94)); border-color: #ffcc00; --toast-accent: #ffcc00;
}
html[data-dg-theme="space"] .dg-game-toast.title::before { content: "WORLD // ENTER"; position: absolute; left: 50%; top: 8px; bottom: auto; width: auto; transform: translateX(-50%);
  background: none; color: #ffcc00; font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .3em; }
html[data-dg-theme="space"] .dg-game-toast.title::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 8px; top: auto; width: auto; height: 3px;
  background: linear-gradient(90deg, transparent, #ffcc00, transparent); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast { background: rgba(248,248,242,.95); color: #11110f; border-color: #11110f; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title { background: #ffcc00; color: #11110f; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title::before { color: #11110f; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title::after { background: linear-gradient(90deg, transparent, #11110f, transparent); }

/* #064 追加7: ゲーム内パネル（白地）の文字を黒系に（黒モードでは --pop-ink が白になり見えなかった） */
html[data-dg-theme="space"] .tab-btn, html[data-dg-theme="space"] .tab-btn.active,
html[data-dg-theme="space"] .hint-tab-btn, html[data-dg-theme="space"] .hint-tab-btn.active,
html[data-dg-theme="space"] .settings-row label,
html[data-dg-theme="space"] .hint-step, html[data-dg-theme="space"] #chat-send,
html[data-dg-theme="space"] .danger-btn { color: #11110f; }
html[data-dg-theme="space"] .hint-step-num { color: #11110f; background: #ffcc00; border-radius: 3px; padding: 5px 10px; }

/* #064 追加8: 黒モードでも ゲーム画面・ミッション作成・結果・実行ダイアログ は白地の部品が多く、
   --pop-ink（文字・見出し帯の色）が白になると文字が見えなくなるため、この範囲だけ黄モードと同じ「黒インク」の変数に戻す */
html[data-dg-theme="space"] #app, html[data-dg-theme="space"] #mission-creator, html[data-dg-theme="space"] #result-overlay,
html[data-dg-theme="space"] .dg-run-dialog-overlay, html[data-dg-theme="space"] #pl-guide-toast {
  --pop-ink: #11110f; --pop-paper: #f8f8f2; --pop-cyan-pale: #dff7ff; --pop-magenta-pale: #ffe1ee; --pop-yellow-pale: #fff3b0;
  --pop-shadow: 6px 6px 0 rgba(17,17,15,.16); --pop-shadow-sm: 4px 4px 0 rgba(17,17,15,.14); --dg-text-sub: #4b4112;
  --sp-bg: #f8f8f2; --sp-panel: #f8f8f2; --sp-panel-solid: #f8f8f2; --sp-line: #11110f; --sp-text: #11110f; --sp-sub: #4b4112; --sp-accent: #11110f;
}
/* パネル見出し: 黄の帯＋黒文字 */
html[data-dg-theme="space"] .panel-header h2 { background: #ffcc00; color: #11110f; }
/* ワールド入場タイトル等: 切り欠き角にも黄の線（clip-path で枠が切れるため斜めの線を描く） */
html[data-dg-theme="space"] .dg-game-toast {
  background-image: linear-gradient(135deg, transparent 10px, rgba(255,204,0,.8) 10px, rgba(255,204,0,.8) 11.5px, transparent 11.5px),
                    linear-gradient(-45deg, transparent 10px, rgba(255,204,0,.8) 10px, rgba(255,204,0,.8) 11.5px, transparent 11.5px);
}
html[data-dg-theme="space"] .dg-game-toast.title {
  background-image: linear-gradient(135deg, transparent 10px, #ffcc00 10px, #ffcc00 11.5px, transparent 11.5px),
                    linear-gradient(-45deg, transparent 10px, #ffcc00 10px, #ffcc00 11.5px, transparent 11.5px),
                    linear-gradient(135deg, rgba(17,17,15,.94), rgba(30,32,28,.94));
}
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast, html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title {
  background-image: linear-gradient(135deg, transparent 10px, #11110f 10px, #11110f 11.5px, transparent 11.5px),
                    linear-gradient(-45deg, transparent 10px, #11110f 10px, #11110f 11.5px, transparent 11.5px);
}
html[data-dg-theme="space"] .mc-confirm-note, html[data-dg-theme="space"] .mc-confirm-note rt, html[data-dg-theme="space"] #result-crown { color: #c8175d; }
/* 灰色の副ボタン（やめる・とじる・もどる）は白文字、主ボタンは黄地＋黒文字、フィルタの選択中は白文字 */
html[data-dg-theme="space"] .dg-run-dialog-cancel-btn, html[data-dg-theme="space"] .mc-btn-back { color: #f8f8f2; }
html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) .dg-run-dialog-overlay .dg-btn-primary, html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) #app .dg-btn-primary, html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) #mission-creator .dg-btn-primary { color: #11110f; }
html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) .dg-run-dialog-overlay .dg-btn-primary::before, html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) #app .dg-btn-primary::before, html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) #mission-creator .dg-btn-primary::before { background: #ffcc00; }
html[data-dg-theme="space"] .spot-filter-tab.active { color: #fff; }

/* #064 追加9: 右メニュー（ワールドの上に重ねた）の下に中身が隠れないよう、右に余白 */
html[data-dg-theme="space"] #app .panel-body, html[data-dg-theme="space"] #app .panel-header, html[data-dg-theme="space"] #app .hint-quest-tabs,
html[data-dg-theme="space"] #app .chat-input-row, html[data-dg-theme="space"] #app .lesson-footer, html[data-dg-theme="space"] #app .blockly-tabs { padding-right: 82px; }
html[data-dg-theme="space"] #app .panel-body { padding: 14px 82px 14px 14px; }
@media (max-width: 768px) { html[data-dg-theme="space"] #app .panel-body, html[data-dg-theme="space"] #app .panel-header, html[data-dg-theme="space"] #app .hint-quest-tabs,
  html[data-dg-theme="space"] #app .chat-input-row, html[data-dg-theme="space"] #app .lesson-footer, html[data-dg-theme="space"] #app .blockly-tabs { padding-right: 14px; } }

/* せってい: 1 項目 = 1 枚のカード（左に名前・右に操作）。二重の枠・影をやめ、余白を取る */
html[data-dg-theme="space"] .settings-body { display: flex; flex-direction: column; gap: 10px; }
html[data-dg-theme="space"] .settings-row {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; align-items: center; gap: 16px; margin: 0; padding: 14px 18px;
  background: #fff; border: 1px solid #d6d6cc; border-left: 4px solid #ffcc00; border-radius: 8px; box-shadow: none; clip-path: none;
}
html[data-dg-theme="space"] .settings-row label { margin: 0; font-size: 14px; font-weight: 700; color: #11110f; }
html[data-dg-theme="space"] .settings-value { justify-self: start; border: 0; border-radius: 6px; padding: 6px 12px; background: #11110f; color: #ffcc00; font-weight: 800; font-size: 14px; }
html[data-dg-theme="space"] .settings-row input[type="range"] { width: 100%; margin: 0; accent-color: #e6b800; }
html[data-dg-theme="space"] .settings-row input[type="range"]:disabled { opacity: .4; }
html[data-dg-theme="space"] .settings-actions { display: flex; justify-content: flex-end; padding: 6px 0 0; }
html[data-dg-theme="space"] .danger-btn { border: 0; border-radius: 8px; box-shadow: 0 3px 0 #9c1e4f; background: #ff548f; color: #11110f; padding: 10px 20px; font-weight: 800; }
html[data-dg-theme="space"] .danger-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c1e4f; }
html[data-dg-theme="space"] .settings-version { color: #4b4112; font-size: 12px; text-align: right; }
@media (max-width: 480px) { html[data-dg-theme="space"] .settings-row { grid-template-columns: 1fr; gap: 8px; } }

/* 切り欠き角（clip-path）で消える枠線を、角の斜め線で補う（0.707 × 切り欠き幅 の位置に枠線の太さ分） */
/* （world-card・spot-card・dg-study-card・dash-stat-card は角丸にしているので対象外） */
html[data-dg-theme="space"] .pop-panel, html[data-dg-theme="space"] .result-card, html[data-dg-theme="space"] .mc-panel,
html[data-dg-theme="space"] .mycode-card, html[data-dg-theme="space"] .quest-card, html[data-dg-theme="space"] .mission-world-locked,
html[data-dg-theme="space"] .dg-world-card, html[data-dg-theme="space"] .dg-study-level {
  background-image: linear-gradient(135deg, transparent 10px, var(--sp-line) 10px, var(--sp-line) 11.5px, transparent 11.5px),
                    linear-gradient(-45deg, transparent 10px, var(--sp-line) 10px, var(--sp-line) 11.5px, transparent 11.5px);
}
html[data-dg-theme="space"] .pop-btn-ghost::before, html[data-dg-theme="space"] .dg-run-dialog-cancel-btn::before, html[data-dg-theme="space"] .mc-btn-back::before {
  background-image: linear-gradient(135deg, transparent 5.7px, var(--sp-line) 5.7px, var(--sp-line) 7px, transparent 7px),
                    linear-gradient(-45deg, transparent 5.7px, var(--sp-line) 5.7px, var(--sp-line) 7px, transparent 7px);
}
.dgsel-switch button { background-image: linear-gradient(135deg, transparent 5px, #11120f 5px, #11120f 7px, transparent 7px), linear-gradient(-45deg, transparent 5px, #11120f 5px, #11120f 7px, transparent 7px); }
html[data-dg-theme="space"] .dg-studio-form input:not([type=checkbox]), html[data-dg-theme="space"] .dg-studio-form select, html[data-dg-theme="space"] .dg-settings-block select {
  background-image: linear-gradient(135deg, transparent 5px, #4c443b 5px, #4c443b 8px, transparent 8px), linear-gradient(-45deg, transparent 5px, #4c443b 5px, #4c443b 8px, transparent 8px), linear-gradient(#fff,#e5e9e9);
}
html[data-dg-theme="space"] .dg-level-card, html[data-dg-theme="space"] .dg-companion-card {
  background-image: linear-gradient(135deg, transparent 12.7px, var(--sp-yellow) 12.7px, var(--sp-yellow) 14.7px, transparent 14.7px), linear-gradient(-45deg, transparent 12.7px, var(--sp-yellow) 12.7px, var(--sp-yellow) 14.7px, transparent 14.7px),
                    linear-gradient(45deg, transparent 12.7px, var(--sp-yellow) 12.7px, var(--sp-yellow) 14.7px, transparent 14.7px), linear-gradient(-135deg, transparent 12.7px, var(--sp-yellow) 12.7px, var(--sp-yellow) 14.7px, transparent 14.7px);
}
.dgs-top-stats span { background-image: linear-gradient(135deg, transparent 4.2px, rgba(255,204,0,.28) 4.2px, rgba(255,204,0,.28) 5.3px, transparent 5.3px), linear-gradient(-45deg, transparent 4.2px, rgba(255,204,0,.28) 4.2px, rgba(255,204,0,.28) 5.3px, transparent 5.3px); }
html[data-dg-mode="yellow"] .dgs-top-stats span { background-image: linear-gradient(135deg, transparent 4.2px, #11110f 4.2px, #11110f 5.3px, transparent 5.3px), linear-gradient(-45deg, transparent 4.2px, #11110f 4.2px, #11110f 5.3px, transparent 5.3px); }

/* #064 追加10: 角の斜め線は枠線の外側（border-box）基準で描く（padding-box 基準だと枠の太さ分ずれていた） */
html[data-dg-theme="space"] .dg-game-toast, html[data-dg-theme="space"] .pop-panel, html[data-dg-theme="space"] .result-card, html[data-dg-theme="space"] .mc-panel,
html[data-dg-theme="space"] .mycode-card, html[data-dg-theme="space"] .quest-card, html[data-dg-theme="space"] .mission-world-locked,
html[data-dg-theme="space"] .dg-world-card, html[data-dg-theme="space"] .dg-study-level,
html[data-dg-theme="space"] .pop-btn-ghost::before, html[data-dg-theme="space"] .dg-run-dialog-cancel-btn::before, html[data-dg-theme="space"] .mc-btn-back::before,
.dgsel-switch button, html[data-dg-theme="space"] .dg-studio-form input:not([type=checkbox]), html[data-dg-theme="space"] .dg-studio-form select, html[data-dg-theme="space"] .dg-settings-block select,
html[data-dg-theme="space"] .dg-level-card, html[data-dg-theme="space"] .dg-companion-card, .dgs-top-stats span { background-origin: border-box; }
html[data-dg-theme="space"] .dg-game-toast.title { border-width: 2px; }
html[data-dg-theme="space"] .dg-game-toast.title { background-image: linear-gradient(135deg, transparent 9.9px, #ffcc00 9.9px, #ffcc00 12px, transparent 12px), linear-gradient(-45deg, transparent 9.9px, #ffcc00 9.9px, #ffcc00 12px, transparent 12px), linear-gradient(135deg, rgba(17,17,15,.94), rgba(30,32,28,.94)); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title { border-color: #11110f; background-image: linear-gradient(135deg, transparent 9.9px, #11110f 9.9px, #11110f 12px, transparent 12px), linear-gradient(-45deg, transparent 9.9px, #11110f 9.9px, #11110f 12px, transparent 12px); }

/* フィルタのタブ: 以前のデザインの「ずらした影のボタン」（::before）が残って角が崩れていた → 消して 1 枚の形に */
html[data-dg-theme="space"] .spot-filter-tab::before { display: none; }
html[data-dg-theme="space"] .spot-filter-tab { border: 0; background: #f7f8f5; color: #22261f; padding: 10px 16px; transform: none; animation: none;
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); box-shadow: none; }
html[data-dg-theme="space"] .spot-filter-tab:hover { background: #fff3b0; color: #11110f; }
html[data-dg-theme="space"] .spot-filter-tab.active { background: #ffcc00; color: #11110f; box-shadow: none; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .spot-filter-tab { background: #f8f8f2; color: #11110f; filter: drop-shadow(0 3px 0 rgba(17,17,15,.55)); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .spot-filter-tab.active { background: #11110f; color: #ffcc00; }

/* #064 追加11: もちもの を作り直し（切り欠き＋二重枠をやめ、角丸のカードで整理） */
html[data-dg-theme="space"] .dg-level-card, html[data-dg-theme="space"] .dg-companion-card {
  clip-path: none; border-radius: 14px; border: 2px solid var(--sp-yellow); background: var(--sp-panel-solid); background-image: none; padding: 22px 24px; min-height: 0;
}
html[data-dg-theme="space"] .dg-level-card::before, html[data-dg-theme="space"] .dg-level-card::after,
html[data-dg-theme="space"] .dg-companion-card::before, html[data-dg-theme="space"] .dg-companion-card::after { display: none; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-level-card, html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-companion-card { border-color: #11110f; background: #f8f8f2; box-shadow: 4px 4px 0 rgba(17,17,15,.18); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-level-meta, html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-companion-hint,
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-companion-bond { color: #4b4112; }

html[data-dg-theme="space"] .dg-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
html[data-dg-theme="space"] .dg-item-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; text-align: center;
  background: #1b1d1b; color: #f8f8f2; border: 1px solid rgba(255,204,0,.4); border-radius: 12px; box-shadow: none; clip-path: none; animation: none;
}
html[data-dg-theme="space"] .dg-item-card::before { display: none; }
html[data-dg-theme="space"] .dg-item-card > * { position: static; }
html[data-dg-theme="space"] .dg-item-card.has-3d { cursor: pointer; }
html[data-dg-theme="space"] .dg-item-card:hover { border-color: #ffcc00; transform: translateY(-2px); }
html[data-dg-theme="space"] .dg-item-icon { margin: 0; width: 64px; height: 64px; border: 0; border-radius: 12px; background: rgba(255,204,0,.14); display: grid; place-items: center; font-size: 2.2rem; }
html[data-dg-theme="space"] .dg-item-icon img { max-width: 44px; max-height: 44px; }
html[data-dg-theme="space"] .dg-item-name { margin: 0; padding: 0; font-weight: 800; font-size: .92rem; line-height: 1.35; }
html[data-dg-theme="space"] .dg-item-card .dg-item-count { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border: 0; border-radius: 999px; box-shadow: none;
  background: #ffcc00; color: #11110f; font: 800 .75rem "Chakra Petch", sans-serif; }
html[data-dg-theme="space"] .dg-item-card .dg-item-3d-badge { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border: 0; border-radius: 999px; background: #31d9ff; color: #11110f; font-size: .68rem; font-weight: 800; }
html[data-dg-theme="space"] .dg-item-hint { margin: 0; padding: 0; font-size: .72rem; color: #aeb3ae; opacity: 1; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-item-card { background: #f8f8f2; color: #11110f; border-color: #11110f; box-shadow: 3px 3px 0 rgba(17,17,15,.18); }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-item-icon { background: #ffcc00; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-item-card .dg-item-count { background: #11110f; color: #ffcc00; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-item-hint { color: #4b4112; }
html[data-dg-theme="space"] .dg-item-card .dg-item-3d-badge { right: auto; }
html[data-dg-theme="space"] .dg-companion-rename { border: 1px solid currentColor; border-radius: 999px; background: transparent; padding: 2px 10px; font-size: 11px; box-shadow: none; clip-path: none; }
html[data-dg-theme="space"] .dg-companion-rename::before { display: none; }

/* #064 追加12: 「枠線あり＋切り欠き角」は角の線がどうしても崩れるため、枠線のある部品はすべて角丸に統一
   （切り欠き角は 枠線のない塗りだけの部品＝見出し帯などに限る） */
html[data-dg-theme="space"] .pop-panel, html[data-dg-theme="space"] .result-card, html[data-dg-theme="space"] .mc-panel,
html[data-dg-theme="space"] .mycode-card, html[data-dg-theme="space"] .quest-card, html[data-dg-theme="space"] .mission-world-locked,
html[data-dg-theme="space"] .dg-world-card, html[data-dg-theme="space"] .dg-study-level, html[data-dg-theme="space"] .dg-study-card,
html[data-dg-theme="space"] .dg-settings-block, html[data-dg-theme="space"] .dg-studio-form, html[data-dg-theme="space"] .hint-step,
html[data-dg-theme="space"] .dgs-top-stats span, .dgsel-switch button,
html[data-dg-theme="space"] .dg-studio-form input:not([type=checkbox]), html[data-dg-theme="space"] .dg-studio-form select, html[data-dg-theme="space"] .dg-settings-block select {
  clip-path: none !important; border-radius: 10px; background-image: none;
}
html[data-dg-theme="space"] .dg-settings-block::before, html[data-dg-theme="space"] .dg-studio-form::before { clip-path: none; border-radius: 8px; }
html[data-dg-theme="space"] .mycode-card, html[data-dg-theme="space"] .quest-card, html[data-dg-theme="space"] .hint-step, html[data-dg-theme="space"] .result-card {
  border: 1px solid #d6d6cc; border-left: 4px solid #ffcc00; box-shadow: none; background-color: #fff; padding: 14px 16px;
}
html[data-dg-theme="space"] .dg-game-toast, html[data-dg-theme="space"] .dg-game-toast.title { clip-path: none; border-radius: 12px; background-image: none; }
html[data-dg-theme="space"] .dg-game-toast.title { background: rgba(17,17,15,.92); border: 2px solid #ffcc00; }
html[data-dg-theme="space"][data-dg-mode="yellow"] .dg-game-toast.title { background: #ffcc00; border-color: #11110f; }
html[data-dg-theme="space"] .dg-game-toast.title::after { border-radius: 2px; }

/* ボタン（主・副）: 角丸 8px の 1 枚。斜め・ずらし影・角の飾りをやめ、1 行に収める */
html[data-dg-theme="space"] :is(.pop-btn, .dg-btn-primary, .world-card-play-btn, .spot-card-play-btn, .dg-create-mission-btn, .mc-btn-next, .mc-btn-submit, .dg-resume-btn, #chat-send, .mycode-load-btn,
  .pop-btn-ghost, .dg-run-dialog-cancel-btn, .mc-btn-back, .mycode-new-btn, .mycode-delete-btn) {
  white-space: nowrap; font-size: 14px; line-height: 1.2; padding: 10px 20px; min-width: 0; width: auto; max-width: 100%; margin-left: 0; margin-right: 0; letter-spacing: .02em;
}
html[data-dg-theme="space"] :is(.pop-btn, .dg-btn-primary, .world-card-play-btn, .spot-card-play-btn, .dg-create-mission-btn, .mc-btn-next, .mc-btn-submit, .dg-resume-btn, #chat-send, .mycode-load-btn,
  .pop-btn-ghost, .dg-run-dialog-cancel-btn, .mc-btn-back, .mycode-new-btn, .mycode-delete-btn)::before {
  clip-path: none !important; border-radius: 8px; transform: none !important; box-shadow: none !important; background-image: none !important;
}
html[data-dg-theme="space"] :is(.pop-btn, .dg-btn-primary, .world-card-play-btn, .spot-card-play-btn, .dg-create-mission-btn, .mc-btn-next, .mc-btn-submit, .dg-resume-btn, #chat-send, .mycode-load-btn,
  .pop-btn-ghost, .dg-run-dialog-cancel-btn, .mc-btn-back, .mycode-new-btn, .mycode-delete-btn)::after { display: none !important; }
html[data-dg-theme="space"] .dg-study-card .dg-btn-primary { align-self: flex-start; margin-top: auto; }
html[data-dg-theme="space"] .mycode-load-btn { display: block; margin-top: 10px; }
html[data-dg-theme="space"] :is(.pop-btn, .dg-btn-primary, .world-card-play-btn, .spot-card-play-btn, .dg-create-mission-btn, .mc-btn-next, .mc-btn-submit, .dg-resume-btn, #chat-send, .mycode-load-btn,
  .pop-btn-ghost, .dg-run-dialog-cancel-btn, .mc-btn-back, .mycode-new-btn, .mycode-delete-btn) { box-shadow: none !important; border: 0 !important; border-radius: 8px; filter: drop-shadow(0 3px 0 rgba(17,17,15,.35)) !important; }
html[data-dg-theme="space"] :is(.pop-btn-ghost, .dg-run-dialog-cancel-btn, .mc-btn-back, .mycode-new-btn, .mycode-delete-btn)::before { border: 1px solid rgba(17,17,15,.35) !important; }

/* #064 追加13: フォーム（入力欄・セレクト・テキストエリア・チェックボックス）は 3px の直角の枠に統一（切り欠き・角丸なし） */
html[data-dg-theme="space"] :is(input:not([type=range]):not([type=radio]):not([type=hidden]), select, textarea) {
  clip-path: none !important; border-radius: 0 !important; border: 3px solid #4c443b !important; box-shadow: none !important; background-image: none !important; transform: none !important;
}
html[data-dg-theme="space"] :is(input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea) { background-color: #fff !important; color: #11110f !important; padding: 9px 12px; }
html[data-dg-theme="space"]:not([data-dg-mode="yellow"]) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea) { border-color: #5a5d57 !important; }
html[data-dg-theme="space"][data-dg-mode="yellow"] :is(input:not([type=range]):not([type=radio]), select, textarea) { border-color: #11110f !important; }
html[data-dg-theme="space"] :is(input, select, textarea):focus { border-color: #ffcc00 !important; outline: none; }
html[data-dg-theme="space"][data-dg-mode="yellow"] :is(input, select, textarea):focus { border-color: #31a9d9 !important; }
html[data-dg-theme="space"] input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; background: #fff !important; vertical-align: -5px; cursor: pointer; }
html[data-dg-theme="space"] input[type=checkbox]:checked { background: #ffcc00 !important; }
html[data-dg-theme="space"] input[type=checkbox]:checked::after { content: "✓"; display: block; color: #11110f; font-size: 15px; font-weight: 900; line-height: 16px; text-align: center; transform: none; }
/* ログインの入力欄は暗い透過のままにする */
html[data-dg-theme="space"] input.login-input.login-input.login-input.login-input { background-color: rgba(17,17,15,.72) !important; color: #fff !important; border-color: #5a5d57 !important; }

/* #064 追加14: 自動ログイン中はログイン画面を見せない（背景だけ） */
body.dg-restoring.state-login #login-screen { visibility: hidden; }

/* #064 追加15: ログイン画面・読み込み中は黄モードでも背景を黒に（リロード時に黄色が一瞬見えないように） */
html[data-dg-theme="space"]:not(:has(body.state-dashboard)):not(:has(body.state-game)),
html[data-dg-theme="space"] body.state-login, html[data-dg-theme="space"] body.dg-restoring { background: #0e100f; }
html[data-dg-theme="space"] #login-screen { background-color: #0e100f !important; color: #fff; }
html[data-dg-theme="space"] #login-screen .dgs-brand-mark { background: hsl(0deg 0% 100% / 30%); }
html[data-dg-theme="space"] #login-screen .dgs-brand, html[data-dg-theme="space"] #login-screen .dgs-brand .tech, html[data-dg-theme="space"] #login-screen .dgs-brand small { color: #fff; }

/* #064 追加16: 左の線のカードをやめ、全周の枠＋下の影のカードに */
html[data-dg-theme="space"] :is(.settings-row, .mycode-card, .quest-card, .hint-step, .result-card) {
  border: 2px solid #11110f !important; border-radius: 12px; box-shadow: 0 4px 0 rgba(17,17,15,.18) !important; background-color: #fff;
}
/* 「ワールドに戻る」などの再開ボタン: 大きく目立つゲームボタン */
html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn {
  font-size: 22px; padding: 18px 44px; letter-spacing: .06em; color: #11110f !important;
  filter: drop-shadow(0 0 18px rgba(255,204,0,.55)) !important; animation: dgsResumePulse 1.8s ease-in-out infinite;
}
html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn::before {
  background: linear-gradient(180deg, #ffe04d, #ffcc00 55%, #f0b400) !important; border: 3px solid #11110f !important; border-radius: 16px;
  box-shadow: 0 6px 0 #11110f, inset 0 2px 0 rgba(255,255,255,.6) !important;
}
html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn:hover { transform: translateY(-2px); }
html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn:active { transform: translateY(4px); }
html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn:active::before { box-shadow: 0 2px 0 #11110f !important; }
html[data-dg-theme="space"] .dg-resume-btn rt { font-size: 11px; color: #11110f; }
@keyframes dgsResumePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { html[data-dg-theme="space"] :is(#dgs-x, .dg-resume-btn).dg-resume-btn { animation: none; } }

/* #064 追加17: 単体詳細・左右選択の大きな枠 — 中の画像が左上の切り欠き部分に被って枠線を隠していた → 中身も角を切る */
:is(.dgsel-detail, .dgsel-solo) > :first-child { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
:is(.dgsel-detail, .dgsel-solo) > :last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }

/* #064 追加18: 単体詳細・左右選択を「ゲームの選択画面」型に — 左に大きな画像／3D、右は背景なしで情報 */
.dgsel-detail, .dgsel-solo {
  background: none !important; clip-path: none !important; box-shadow: none !important; padding: 0;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(18px, 3vw, 40px); align-items: center; min-height: 380px;
}
.dgsel-detail::before, .dgsel-solo::before { display: none !important; }
:is(.dgsel-detail, .dgsel-solo) > :first-child, :is(.dgsel-detail, .dgsel-solo) > :last-child { clip-path: none; }
.dgsel-art.big {
  position: relative; min-height: 360px; aspect-ratio: 1 / 1; max-height: 460px; width: 100%; border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(49,217,255,.55), rgba(32,48,92,.9) 58%, rgba(14,16,15,.95) 100%);
  box-shadow: 0 0 0 2px rgba(255,204,0,.55), 0 0 40px rgba(49,217,255,.25); display: grid; place-items: center; font-size: 9rem;
}
.dgsel-art.big::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 9%; height: 14px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.45), transparent 70%); }
.dgsel-art.big img { max-width: 62%; max-height: 62%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.dgsel-art.big > span:not(.dgsel-3d) { filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); animation: dgselFloat 3.2s ease-in-out infinite; }
.dgsel-3d { position: absolute; inset: 0; display: block; }
.dgsel-3d canvas { width: 100% !important; height: 100% !important; }
@keyframes dgselFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.dgsel-detail-info { background: none !important; border: 0 !important; padding: 8px 4px; color: #f7f7f0; }
.dgsel-detail-info small { color: #ffcc00; letter-spacing: .14em; }
.dgsel-detail-info h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 8px 0 12px; line-height: 1.15; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.dgsel-detail-info p { opacity: .85; line-height: 1.8; margin: 0 0 14px; }
.dgsel-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 14px 0; }
.dgsel-fields > div { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.dgsel-fields dt { font-size: .7rem; opacity: .7; margin: 0; }
.dgsel-fields dd { margin: 2px 0 0; font-weight: 800; font-size: 1.05rem; }
.dgsel-lv { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; margin: 10px 0 14px; }
.dgsel-lv b { font-size: 1.6rem; color: #ffcc00; }
.dgsel-lv-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.dgsel-lv-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a8ff18, #ffcc00); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.dgsel-lv small { grid-column: 2; font-size: .75rem; opacity: .75; }
.dgsel-detail-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dgsel-act { cursor: pointer; border: 2px solid currentColor; background: transparent; color: inherit; border-radius: 10px; padding: 9px 16px; font: 800 .9rem "Noto Sans JP", sans-serif; }
.dgsel-act:hover { background: rgba(255,255,255,.1); }
/* 黄モード */
html[data-dg-mode="yellow"] .dgsel-detail-info { color: #11110f; }
html[data-dg-mode="yellow"] .dgsel-detail-info small, html[data-dg-mode="yellow"] .dgsel-lv b { color: #11110f; }
html[data-dg-mode="yellow"] .dgsel-detail-info h2 { text-shadow: none; }
html[data-dg-mode="yellow"] .dgsel-art.big { box-shadow: 0 0 0 3px #11110f, 8px 8px 0 rgba(17,17,15,.2); }
html[data-dg-mode="yellow"] .dgsel-fields > div { background: rgba(255,255,255,.55); border-color: #11110f; }
html[data-dg-mode="yellow"] .dgsel-lv-bar { background: rgba(17,17,15,.15); }
/* リスト: 行を押すと 1 つずつ表示で開く */
.dgsel-reward.dgsel-open { cursor: pointer; transition: transform .15s; }
.dgsel-reward.dgsel-open:hover { transform: translateX(4px); }
/* レベルアップ演出 */
.dgsel-levelup .dgsel-art.big { animation: dgselLvPop .9s cubic-bezier(.2,1.6,.4,1) both; box-shadow: 0 0 0 3px #ffcc00, 0 0 70px rgba(255,204,0,.8); }
.dgsel-levelup .dgsel-art.big::before { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,229,0,.35) 0 10deg, transparent 10deg 20deg); animation: dgsSpin 6s linear infinite; }
.dgsel-lvup-text { position: absolute; left: 26%; top: 8%; transform: translateX(-50%); z-index: 5; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 900; color: #ffcc00;
  text-shadow: 0 4px 0 #11110f, 0 0 24px rgba(255,204,0,.8); animation: dgselLvText 2.6s ease-out both; pointer-events: none; white-space: nowrap; }
@keyframes dgselLvPop { 0% { transform: scale(1); } 35% { transform: scale(1.08) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes dgselLvText { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 80% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(1); } }
@keyframes dgsSpin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .dgsel-detail, .dgsel-solo { grid-template-columns: 1fr; }
  .dgsel-art.big { min-height: 240px; max-height: 300px; aspect-ratio: auto; }
  .dgsel-lvup-text { left: 50%; }
}
@media (prefers-reduced-motion: reduce) { .dgsel-art.big > span, .dgsel-levelup .dgsel-art.big, .dgsel-levelup .dgsel-art.big::before { animation: none !important; } }
.dgsel-stage.dgsel-l-solo { padding: 0 64px; } @media (max-width: 760px) { .dgsel-stage.dgsel-l-solo { padding: 0 44px; } }
html[data-dg-mode="yellow"] .dgsel-switch button.active { background: #11110f; color: #ffcc00; }
