horiyouta/Machine-Learning-RPG
0
1/* --- SF UI THEME FOR MACHINE LEARNING RPG --- */2 3@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');4 5:root {6 --bg-color: #02041b;7 --glass-bg: rgba(20, 25, 70, 0.4);8 --glass-border: rgba(138, 143, 255, 0.2);9 --text-primary: #e0e0ff;10 --text-secondary: #a0a0c0;11 --accent-indigo: #8a8fff;12 --accent-cyan: #00f2ff;13 --accent-red: #ff4a6d;14 --accent-green: #4aff97;15 --font-main: 'Orbitron', sans-serif;16 --font-mono: 'Share Tech Mono', monospace;17}18 19* {20 user-select: none;21 box-sizing: border-box;22}23 24body {25 background-color: var(--bg-color);26 color: var(--text-primary);27 font-family: var(--font-main);28 overflow: hidden;29}30 31/* --- BACKGROUND EFFECTS --- */32.background-grid {33 position: fixed;34 top: 0;35 left: 0;36 width: 100%;37 height: 100%;38 background-image:39 linear-gradient(rgba(138, 143, 255, 0.1) 1px, transparent 1px),40 linear-gradient(90deg, rgba(138, 143, 255, 0.1) 1px, transparent 1px);41 background-size: 50px 50px;42 animation: pan-grid 60s linear infinite;43 z-index: -2;44}45 46@keyframes pan-grid {47 0% {48 background-position: 0 0;49 }50 51 100% {52 background-position: 500px 500px;53 }54}55 56.background-glow {57 position: fixed;58 top: 50%;59 left: 50%;60 width: 800px;61 height: 800px;62 background: radial-gradient(circle, rgba(79, 70, 229, 0.3) 0%, rgba(79, 70, 229, 0) 70%);63 transform: translate(-50%, -50%);64 animation: pulse-glow 10s ease-in-out infinite;65 z-index: -1;66}67 68@keyframes pulse-glow {69 70 0%,71 100% {72 transform: translate(-50%, -50%) scale(1);73 opacity: 0.8;74 }75 76 50% {77 transform: translate(-50%, -50%) scale(1.2);78 opacity: 1;79 }80}81 82/* --- TYPOGRAPHY & HEADERS --- */83.text-glow {84 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--accent-indigo), 0 0 20px var(--accent-indigo);85}86 87.text-glow-yellow {88 text-shadow: 0 0 5px #fff, 0 0 10px #facc15, 0 0 15px #facc15;89}90 91.section-title {92 font-size: 1.5rem;93 font-weight: bold;94 padding: 1rem;95 color: var(--accent-cyan);96 border-bottom: 1px solid var(--glass-border);97 text-shadow: 0 0 8px var(--accent-cyan);98}99 100.character-name {101 font-family: var(--font-mono);102 font-size: 1.25rem;103 text-align: center;104 letter-spacing: 0.2em;105 padding-bottom: 0.5rem;106}107 108/* --- GLASSMORPHISM PANELS --- */109.glass-pane {110 background: var(--glass-bg);111 backdrop-filter: blur(12px);112 -webkit-backdrop-filter: blur(12px);113 border-radius: 16px;114 border: 1px solid var(--glass-border);115 box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(138, 143, 255, 0.1);116 transition: all 0.3s ease;117}118 119.glass-pane-inner {120 background: rgba(0, 0, 0, 0.2);121 border-radius: 12px;122 padding: 0.5rem;123 border: 1px solid var(--glass-border);124}125 126/* --- LAYER & INVENTORY ITEMS --- */127.layer-item,128.player-layer {129 background: rgba(0, 0, 0, 0.3);130 border: 1px solid var(--glass-border);131 border-radius: 12px;132 padding: 0.75rem;133 text-align: center;134 transition: all 0.2s ease-in-out;135 position: relative;136 cursor: pointer;137 overflow: hidden;138}139 140.layer-item::before,141.player-layer::before {142 content: '';143 position: absolute;144 top: 0;145 left: -100%;146 width: 100%;147 height: 100%;148 background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);149 opacity: 0.3;150 transition: left 0.4s ease;151}152 153.layer-item:hover::before,154.player-layer:hover::before {155 left: 100%;156}157 158.layer-item:hover,159.player-layer:hover {160 transform: translateY(-4px);161 border-color: var(--accent-cyan);162 box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);163}164 165.player-layer {166 display: flex;167 justify-content: space-between;168 align-items: center;169 cursor: move;170}171 172.layer-icon {173 font-size: 1.75rem;174 margin-bottom: 0.25rem;175 color: var(--accent-cyan);176 text-shadow: 0 0 10px var(--accent-cyan);177}178 179/* Drag & Drop Styles */180.dragging {181 opacity: 0.5;182 transform: scale(0.95);183 box-shadow: 0 0 20px var(--accent-indigo);184}185 186#player-model-layers.drag-over {187 background-color: rgba(79, 70, 229, 0.3);188 box-shadow: inset 0 0 20px rgba(138, 143, 255, 0.5);189}190 191.drop-placeholder {192 height: 4px;193 background-color: var(--accent-cyan);194 margin: 4px 0;195 border-radius: 2px;196 box-shadow: 0 0 8px var(--accent-cyan);197}198 199/* --- BUTTONS --- */200.btn {201 font-family: var(--font-main);202 font-weight: bold;203 padding: 0.75rem 1.5rem;204 border-radius: 8px;205 border: 1px solid transparent;206 transition: all 0.3s ease;207 cursor: pointer;208}209 210.btn-primary {211 background-color: var(--accent-red);212 color: white;213 border-color: #ff7a8d;214 text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);215 box-shadow: 0 0 10px rgba(255, 74, 109, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.2);216}217 218.btn-primary:hover:not(:disabled) {219 background-color: #ff6a7d;220 box-shadow: 0 0 20px rgba(255, 74, 109, 0.8);221 transform: translateY(-2px);222}223 224.btn-primary:disabled {225 background-color: #552020;226 color: #a0a0a0;227 cursor: not-allowed;228 box-shadow: none;229 border-color: #773030;230}231 232.btn-secondary {233 background-color: #4a4a6a;234 color: var(--text-primary);235 border-color: #6a6a8a;236}237 238.btn-secondary:hover {239 background-color: #5a5a7a;240 transform: translateY(-2px);241 box-shadow: 0 0 15px rgba(138, 143, 255, 0.3);242}243 244/* --- BATTLE AREA --- */245.hp-bar-container {246 background: rgba(0, 0, 0, 0.4);247 border-radius: 9999px;248 padding: 4px;249 border: 1px solid var(--glass-border);250 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);251}252 253.hp-bar {254 border-radius: 9999px;255 transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);256 text-shadow: 1px 1px 2px black;257 font-weight: bold;258 color: white;259 text-align: center;260 height: 1.5rem;261 line-height: 1.5rem;262}263 264#player-hp-bar {265 background: linear-gradient(90deg, var(--accent-green), #8affc7);266}267 268#enemy-hp-bar {269 background: linear-gradient(90deg, var(--accent-red), #ff8a9d);270}271 272.enemy-image-style {273 border: 2px solid var(--accent-red);274 box-shadow: 0 0 20px var(--accent-red);275 filter: brightness(1.2) contrast(1.1);276}277 278#enemy-area {279 width: 200px;280 height: 200px;281 display: flex;282 flex-direction: column;283 align-items: center;284 justify-content: center;285}286 287.enemy-scanline {288 position: absolute;289 top: 0;290 left: 0;291 width: 100%;292 height: 100%;293 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);294 background-size: 100% 4px;295 animation: scan 5s linear infinite;296 pointer-events: none;297}298 299@keyframes scan {300 0% {301 background-position: 0 0;302 }303 304 100% {305 background-position: 0 200px;306 }307}308 309/* --- MESSAGE LOG --- */310#message-log-area {311 font-family: var(--font-mono);312}313 314#message-log-area p {315 opacity: 0;316 transform: translateY(10px);317 animation: fade-in-up 0.5s forwards;318}319 320@keyframes fade-in-up {321 to {322 opacity: 1;323 transform: translateY(0);324 }325}326 327/* --- MODALS --- */328#item-selection-modal,329#animation-modal {330 transition: opacity 0.3s ease;331}332 333#item-selection-modal .layer-item {334 width: 12rem;335 /* 192px */336 height: 12rem;337 /* 192px */338 display: flex;339 flex-direction: column;340 justify-content: center;341}342 343#item-selection-modal .layer-icon {344 font-size: 4rem;345}346 347/* --- PREVIEW AREA --- */348.idle-particles {349 position: absolute;350 width: 100%;351 height: 100%;352}353 354.idle-particles::after {355 content: "";356 position: absolute;357 width: 2px;358 height: 2px;359 background: var(--accent-cyan);360 border-radius: 50%;361 animation: particle-float 10s ease-in-out infinite;362 box-shadow: 0 0 5px var(--accent-cyan),363 -100px -50px 0 0 var(--accent-cyan),364 120px -80px 0 -0.5px var(--accent-cyan),365 80px 90px 0 0.5px var(--accent-cyan),366 -70px 100px 0 0 var(--accent-cyan),367 90px -120px 0 -0.2px var(--accent-cyan);368}369 370@keyframes particle-float {371 0% {372 transform: translate(0, 0);373 opacity: 0.5;374 }375 376 25% {377 transform: translate(10px, 20px);378 opacity: 1;379 }380 381 50% {382 transform: translate(-15px, -10px);383 opacity: 0.7;384 }385 386 75% {387 transform: translate(5px, -25px);388 opacity: 1;389 }390 391 100% {392 transform: translate(0, 0);393 opacity: 0.5;394 }395}396 397 398/* --- ANIMATION VISUALIZATION --- */399.stage-label {400 position: absolute;401 top: 50%;402 opacity: 0;403 transform: translateX(-50%) translateY(20px);404 transition: all 0.3s ease-in-out;405 font-size: 1.2rem;406 font-weight: bold;407 color: var(--accent-cyan);408 text-shadow: 0 0 10px var(--accent-cyan);409 white-space: nowrap;410}411 412.particle {413 position: absolute;414 width: 5px;415 height: 5px;416 background-color: #fde047;417 /* yellow-300 */418 border-radius: 50%;419 box-shadow: 0 0 8px #fde047, 0 0 15px #facc15;420 pointer-events: none;421 opacity: 0;422}423 424.grid-cell {425 transition: all 0.2s ease-in-out;426 box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);427}428 429/* ★★★ TITLE SCREEN STYLES ★★★ */430#title-screen {431 background: var(--bg-color);432 transition: opacity 1.5s ease-out;433}434.title-logo {435 text-align: center;436 line-height: 1;437 position: relative;438 animation: title-float 6s ease-in-out infinite;439}440.title-logo::before {441 content: '';442 position: absolute;443 top: 50%;444 left: 50%;445 width: 600px;446 height: 600px;447 background: radial-gradient(circle, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0) 65%);448 transform: translate(-50%, -50%);449 z-index: -1;450 animation: pulse-glow 8s ease-in-out infinite;451}452.title-logo h1 {453 color: var(--text-primary);454 text-shadow: 0 0 8px #fff, 0 0 15px var(--accent-indigo);455}456.title-logo h2 {457 margin-top: -1rem;458}459 460@keyframes title-float {461 0%, 100% { transform: translateY(0); }462 50% { transform: translateY(-20px); }463}464 465#start-game-btn {466 animation: start-btn-pulse 2s infinite;467}468@keyframes start-btn-pulse {469 0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 74, 109, 0.5); }470 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 74, 109, 0.9); }471 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 74, 109, 0.5); }472}473 474/* ★★★ GOLD RARE ITEM STYLES ★★★ */475.layer-item.gold-rare, .player-layer.gold-rare {476 background: radial-gradient(ellipse at center, rgba(30,25,0,0.5) 0%, rgba(0,0,0,0.5) 70%),477 linear-gradient(160deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.1));478 border-color: #ffd700; /* gold */479 box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 215, 0, 0.2);480}481 482.layer-item.gold-rare::before, .player-layer.gold-rare::before {483 background: linear-gradient(90deg, transparent, #fff, transparent);484 opacity: 0.3;485}486 487.layer-item.gold-rare:hover, .player-layer.gold-rare:hover {488 border-color: #fff;489 box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);490}491 492.layer-item.gold-rare .layer-icon, .player-layer.gold-rare .layer-icon {493 color: #ffd700;494 text-shadow: 0 0 10px #ffd700;495}496 497/* ゴールドレアアイテム用のキラキラエフェクト */498.sparkle-container {499 position: absolute;500 top: 0; left: 0;501 width: 100%; height: 100%;502 pointer-events: none;503 overflow: hidden;504 border-radius: 12px;505}506 507.sparkle {508 position: absolute;509 width: 3px;510 height: 3px;511 background: #fff;512 border-radius: 50%;513 box-shadow: 0 0 5px #fff, 0 0 10px #ffd700;514 animation: sparkle-anim 1.5s ease-in-out infinite;515 opacity: 0;516}517 518@keyframes sparkle-anim {519 0% { transform: scale(0); opacity: 0; }520 50% { transform: scale(1.5); opacity: 1; }521 100% { transform: scale(0); opacity: 0; }522}523 524/* ★★★ 新しいインベントリのスタイルを追加 ★★★ */525#layer-inventory {526 display: flex;527 flex-direction: column;528 gap: 0.75rem;529 overflow-y: auto; /* ★★★ スクロールを有効化 ★★★ */530}531 532/* ★★★ インベントリアイテムのスタイルを微調整 ★★★ */533#layer-inventory .layer-item {534 display: flex; /* アイコンとテキストを横並びに */535 align-items: center;536 text-align: left; /* テキストを左揃えに */537 padding: 0.5rem 1rem; /* パディングを調整 */538}539 540#layer-inventory .layer-item .layer-icon {541 font-size: 1.5rem; /* 24px */542 margin-bottom: 0; /* 下マージンを削除 */543 margin-right: 1rem; /* 右にマージンを追加 */544}545 546#layer-inventory .layer-item p {547 flex-grow: 1; /* テキストエリアが残りのスペースを埋める */548}549 550/* ★★★ SCROLLBAR STYLES ★★★ */551/* 既存の ::-webkit-scrollbar { display: none; } は削除またはコメントアウトしてください */552::-webkit-scrollbar {553 width: 8px;554}555::-webkit-scrollbar-track {556 background: rgba(0, 0, 0, 0.2);557 border-radius: 4px;558}559::-webkit-scrollbar-thumb {560 background: var(--glass-border);561 border-radius: 4px;562 border: 1px solid rgba(0,0,0,0.3);563}564::-webkit-scrollbar-thumb:hover {565 background: var(--accent-cyan);566}