/* Broad Stellar crystal faces, with clear reflections and a cool lower edge. */ .menugroup .button.mainmenu-rogue { background: #64b6c5 url(fantasy-rogue-stellar.svg); background-size: 100% 100%; background-repeat: no-repeat; border-color: #e1f4f5 #afcbd7 #789ebc; text-shadow: 0 1px 2px rgba(24, 49, 80, .85), 0 0 4px rgba(27, 47, 78, .45); box-shadow: 0 1px 2px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(21, 71, 107, .18); } .menugroup .button.mainmenu-rogue:hover { border-color: #f1fdff #cbe8f1 #92b6cd; box-shadow: 0 1px 3px rgba(0, 0, 0, .24), inset 0 1px 2px #fff, inset 0 -2px 3px rgba(21, 71, 107, .14); } .menugroup .button.mainmenu-rogue:focus-visible { outline: 2px solid #edfaff; outline-offset: 2px; box-shadow: 0 0 0 4px #52748f, inset 0 1px 2px #fff; } .menugroup .button.mainmenu-rogue:active { box-shadow: inset 0 2px 4px rgba(24, 58, 91, .32), inset 0 -1px 1px rgba(255, 255, 255, .65); } /* Compact spacing only: keep the existing text sizes and native icon atlases. */ /* Story scenes and keepsakes use existing sprites, with no video or per-frame JS. */ .fantasyrogue .rogue-codex-collections { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; } .fantasyrogue .rogue-codex-collections .button { flex: 1 1 230px; display: flex; gap: 12px; align-items: center; padding: 16px 20px; text-align: left; border-radius: 12px; } .fantasyrogue .rogue-codex-collections strong, .fantasyrogue .rogue-codex-collections small { display: block; } .fantasyrogue .rogue-codex-collections strong { font-size: 19px; margin-bottom: 5px; } .fantasyrogue .rogue-codex-collections small { font-size: 13px; opacity: .85; } .fantasyrogue .rogue-codex-collections .is-active { background: #456f8c; color: white; border-color: #31546d; } .fantasyrogue .rogue-story { margin: 18px 0; border: 1px solid #a5bbc8; border-radius: 9px; overflow: hidden; box-shadow: 0 6px 24px #203d5222; } .fantasyrogue .rogue-story-scene { position: relative; height: clamp(190px, 32vh, 320px); overflow: hidden; background: radial-gradient(ellipse at 50% 15%, #35475a, #101923 72%); } .fantasyrogue .rogue-story-scene::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 24%, #0003 24% 25%), repeating-linear-gradient(0deg, transparent 0 54px, #65718115 55px 56px); } .fantasyrogue .rogue-story-chapter { position: absolute; z-index: 2; left: 24px; top: 20px; letter-spacing: 3px; font-size: 16px; color: #e4e4d0; } .fantasyrogue .rogue-story-window { position: absolute; width: 120px; height: 55%; left: calc(50% - 60px); top: 20%; border: 12px solid #6d7b8b; border-bottom-width: 18px; border-radius: 70px 70px 0 0; background: linear-gradient(#849baa, #c8d8d5); opacity: .12; box-shadow: 0 0 70px #b8d2df44; } .fantasyrogue .rogue-story-window::after { content: ''; position: absolute; left: 47%; width: 6%; height: 100%; background: #6d7b8b; } .fantasyrogue .rogue-story-letter { display: none; position: absolute; top: 60px; left: calc(50% - 70px); width: 140px; height: 155px; padding-top: 45px; box-sizing: border-box; background: #f4e9cf; color: #61482f; text-align: center; font: 22px serif; letter-spacing: 5px; transform: rotate(-6deg); box-shadow: 8px 10px 25px #35251950; } .fantasyrogue .scene-letter { background: radial-gradient(ellipse at 50% 60%, #bc9e74, #4c4032); } .fantasyrogue .scene-letter .rogue-story-letter { display: block; } .fantasyrogue .scene-letter .rogue-story-window { display: none; } .fantasyrogue .rogue-story-figure { display: none; position: absolute; left: calc(50% - 65px); top: 100px; width: 130px; height: 210px; background: linear-gradient(100deg, #030911, #253342 54%, #080f18); border-radius: 70% 40% 0 0; transform: rotate(-8deg); box-shadow: 15px 15px 25px #0005; } .fantasyrogue .rogue-story-figure::before { content: ''; position: absolute; width: 65px; height: 80px; border: 15px solid #1d2936; background: #04090f; border-radius: 70% 70% 30% 40%; top: -48px; left: 0; box-sizing: border-box; } .fantasyrogue .scene-stranger .rogue-story-figure { display: block; } .fantasyrogue .rogue-story-portal { display: none; position: absolute; height: 75px; width: 75px; background: #fffef6; top: 100px; left: calc(50% - 38px); transform: rotate(45deg); box-shadow: 0 0 24px #fff, 0 0 80px #c6d9fc; } .fantasyrogue .scene-stairs .rogue-story-portal, .fantasyrogue .scene-portal .rogue-story-portal { display: block; } .fantasyrogue .scene-stairs::after { content: ''; position: absolute; left: 20%; right: 20%; height: 100px; bottom: 0; background: repeating-linear-gradient(0deg, #617386 0 2px, #233347 3px 22px); clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); } .fantasyrogue .scene-portal { background: radial-gradient(#ffffff, #c8dbef); } .fantasyrogue .scene-portal .rogue-story-chapter { color: #334f6c; } .fantasyrogue .scene-summit, .fantasyrogue .scene-home { background: linear-gradient(140deg, #8ea7ba, #efe6d2); } .fantasyrogue .scene-summit .rogue-story-window, .fantasyrogue .scene-home .rogue-story-window { opacity: 1; background: linear-gradient(#75b4df 30%, #ecf7ff 55%, #90bbc0 90%); border-color: #e6dcc5; box-shadow: 0 0 90px #f7e8bc; } .fantasyrogue .scene-home::after { content: ''; position: absolute; bottom: 0; right: 12%; width: 36%; height: 40px; background: #756558; border-top: 10px solid #e2d6bf; } .fantasyrogue .rogue-story-spirit { position: absolute; width: 160px; height: 160px; left: calc(50% - 80px); top: 70px; background-repeat: no-repeat; transform: scale(1.4); filter: drop-shadow(0 0 20px #e1ecfa); animation: rogue-story-appear 1.1s ease-out both; } .fantasyrogue .rogue-story-dialogue { display: block; width: 100%; min-height: 210px; padding: 22px 26px 14px; background: #f6faf5f5; color: #283c4d; text-align: left; border: 0; border-top: 2px solid #c5d0be; font: inherit; font-size: 20px; cursor: pointer; line-height: 1.85; } .fantasyrogue .rogue-story-dialogue > strong { display: block; color: #476582; font-size: 20px; margin-bottom: 8px; } .fantasyrogue .rogue-story-dialogue span strong, .fantasyrogue .rogue-event-text strong { color: #234a64; font-weight: 700; } .fantasyrogue .rogue-story-dialogue span { display: block; min-height: 5.55em; } .fantasyrogue .rogue-story-dialogue small { display: block; text-align: right; color: #658099; font-size: 14px; margin-top: 12px; } .fantasyrogue .rogue-story-dialogue:disabled { opacity: 1; cursor: pointer; } .fantasyrogue .rogue-story-dialogue:focus-visible { outline: 3px solid #547b9d; outline-offset: -4px; } .fantasyrogue .rogue-story-actions { padding: 6px 20px 12px; text-align: right; background: #f6faf5f5; } .fantasyrogue .scene-arena { background: radial-gradient(ellipse at 50% 90%, #667f98, #273e52 48%, #162430); } .fantasyrogue .scene-arena .rogue-story-window { display: none; } .fantasyrogue .rogue-story-trainer { position: absolute; left: 50%; bottom: 22px; height: 160px; max-height: 65%; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 8px 12px #0005); } .fantasyrogue .rogue-story-pokemon { position: absolute; width: 160px; height: 160px; left: calc(50% - 80px); bottom: 18px; background-repeat: no-repeat; filter: drop-shadow(0 0 16px #ece2ff); } .fantasyrogue .rogue-story-scene:has(.rogue-dialogue-actor) { height: clamp(190px, 27vh, 270px); } .fantasyrogue .rogue-dialogue-actor { position: absolute; top: 0; width: auto; max-width: 100%; aspect-ratio: 1; height: 100%; background-repeat: no-repeat; background-size: 200% 100%; background-position: var(--rogue-portrait-normal-x, 0%) center; filter: drop-shadow(0 5px 12px #08172266); } .fantasyrogue .rogue-dialogue-actor.is-approval { background-position: var(--rogue-portrait-approval-x, 100%) center; } .fantasyrogue .rogue-dialogue-single { width: 100%; height: 100%; object-fit: contain; } .fantasyrogue .rogue-mewtwo-bust { display: block; background-repeat: no-repeat; background-size: auto 160%; background-position: 54% top; overflow: hidden; } .fantasyrogue .rogue-companion-invitation { padding: 16px; border: 1px solid #82a7c5; border-radius: 10px; background: #f5faff; } .fantasyrogue .rogue-companion-invitation .button { display: block; margin: 8px 0; } .fantasyrogue .rogue-dialogue-actor.side-right { left: 98%; transform: translateX(-100%); animation: rogue-actor-right .42s ease-out both; } .fantasyrogue .rogue-dialogue-actor.side-left { left: 2%; transform: translateX(0); animation: rogue-actor-left .42s ease-out both; } .fantasyrogue .rogue-story-scene:has(.rogue-dialogue-actor) .rogue-story-chapter { max-width: 42%; line-height: 1.6; text-shadow: 0 2px 4px #000; } .fantasyrogue .rogue-story-scene:has(.rogue-dialogue-actor.side-left) .rogue-story-chapter { left: auto; right: 24px; text-align: right; } .fantasyrogue .rogue-failure { padding: 24px; border: 1px solid #cfa1a1; border-radius: 12px; background: #fff7f5; font-size: 18px; line-height: 1.8; } @keyframes rogue-actor-right { from { left: 50%; transform: translateX(-50%); filter: brightness(.12); opacity: .5; } to { left: 98%; transform: translateX(-100%); filter: brightness(1); opacity: 1; } } @keyframes rogue-actor-left { from { left: 50%; transform: translateX(-50%); filter: brightness(.12); opacity: .5; } to { left: 2%; transform: translateX(0); filter: brightness(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fantasyrogue .rogue-dialogue-actor { animation: none; } } .fantasyrogue .rogue-story-roster { position: absolute; inset: 48px 16px 10px; display: flex; align-items: center; justify-content: center; gap: 16px; color: #f1f6ff; } .fantasyrogue .rogue-roster-leader { display: flex; flex-direction: column; align-items: center; flex: 0 1 120px; text-align: center; gap: 8px; font-size: 15px; } .fantasyrogue .rogue-roster-leader img { height: 100px; max-width: 100%; object-fit: contain; image-rendering: pixelated; } .fantasyrogue .rogue-roster-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; max-width: 500px; flex: 1; } .fantasyrogue .rogue-roster-member { min-width: 0; text-align: center; font-size: 13px; line-height: 1.25; } .fantasyrogue .rogue-roster-member > div { width: 96px; height: 72px; max-width: 100%; margin: auto; background-repeat: no-repeat; } .fantasyrogue .rogue-roster-member span { display: block; overflow-wrap: anywhere; } .fantasyrogue .rogue-codex-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 10px; } .fantasyrogue .rogue-codex-entry .rogue-codex-title h3 { margin: 0; } .fantasyrogue .rogue-blessing-restriction { color: #677784; font-size: 12px; font-weight: normal; line-height: 1.5; } @media (max-height: 700px) { .fantasyrogue .rogue-story-scene:has(.rogue-story-roster) { height: 285px; } } .fantasyrogue .rogue-story-actions .button { margin-top: 6px; } .fantasyrogue .rogue-story-actions button[name=storyNext] { min-height: 40px; padding: 7px 14px; } .fantasyrogue .rogue-story-actions button[name=storyBattle] { min-height: 44px; padding: 9px 26px; border: 1px solid #4c7491; background: linear-gradient(#e4f3ff, #bed7e8); color: #234760; font-size: 16px; font-weight: bold; } .fantasyrogue .rogue-card-choice { padding: 22px 12px; text-align: center; background: radial-gradient(ellipse at 50% 30%, #fbf7e5ee, #e2edf5ed); border: 1px solid #b8cad2; border-radius: 9px; margin-top: 18px; } .fantasyrogue .rogue-card-choice h3 { border: 0; } .fantasyrogue .rogue-start-deck { position: relative; width: min(240px, 80%); height: 264px; margin: 24px auto 16px; perspective: 850px; } .fantasyrogue .rogue-card-back, .fantasyrogue .rogue-start-card { position: absolute; inset: 0; box-sizing: border-box; border-radius: 12px; } .fantasyrogue .rogue-card-back { color: #c7dacb; font: 110px/270px serif; border: 3px double #a7bfc8; background: repeating-linear-gradient(45deg, #819ba8 0 12px, #8ca7b2 12px 13px); transform: translate(calc(var(--stack) * 7px), calc(var(--stack) * -3px)) rotate(calc(var(--stack) * 4deg)); box-shadow: 1px 2px 4px #132c4433; } .fantasyrogue .rogue-start-card { display: flex; align-items: center; flex-direction: column; gap: 14px; padding: 22px 18px 14px; font: inherit; color: #2b4556; cursor: pointer; background: linear-gradient(145deg, #fffef6, #e1f0ee); border: 3px solid #52809c; box-shadow: 0 0 0 2px #fff, 0 10px 26px #29455f44; animation: rogue-story-appear .18s ease-out both; } .fantasyrogue .rogue-start-card strong { font-size: 19px; } .fantasyrogue .rogue-start-card > span:not(.rogue-card-symbol) { line-height: 1.7; font-size: 13px; } .fantasyrogue .rogue-start-card small { color: #587b8e; margin-top: auto; } .fantasyrogue .rogue-card-symbol { display: flex; justify-content: center; align-items: center; width: 60px; height: 50px; font-size: 38px; border-bottom: 1px solid #a6bfc2; } .fantasyrogue .rogue-card-symbol img { transform: scale(1.5); image-rendering: pixelated; } .fantasyrogue .rogue-card-navigation { display: flex; align-items: center; justify-content: center; gap: 22px; } .fantasyrogue .rogue-card-navigation .button { padding: 7px 12px; } .fantasyrogue .rogue-keepsake { padding: 12px; border: 1px solid #b8c9cf; border-left: 4px solid #7a9cad; border-radius: 5px; background: #f7faf1ee; margin: 12px 0; line-height: 1.65; } .fantasyrogue .rogue-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; margin: 14px 0 28px; align-items: start; } .fantasyrogue .rogue-clear-card { color: #294352; border: 1px solid #acbbc0; border-radius: 8px; padding: 16px; background: linear-gradient(135deg, #fcfaf0ed, #e9f2f5ed); box-shadow: 0 3px 12px #27495919; margin: 12px 0; } .fantasyrogue .rogue-clear-card header { border-bottom: 1px solid #c1cdd0; padding-bottom: 10px; } .fantasyrogue .rogue-clear-card h3 { border: 0; margin-top: 4px; } .fantasyrogue .rogue-clear-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; } .fantasyrogue .rogue-clear-mon { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; } .fantasyrogue .rogue-clear-mon > span { font-size: 12px; color: #607789; } .fantasyrogue .rogue-clear-sprite { width: 100px; height: 85px; max-width: 100%; background-repeat: no-repeat; } .fantasyrogue .rogue-clear-details { padding: 10px 0; border-bottom: 1px solid #c8d4d9; } .fantasyrogue .rogue-clear-card table { width: 100%; table-layout: fixed; border-collapse: collapse; } .fantasyrogue .rogue-clear-card td, .fantasyrogue .rogue-clear-card th { text-align: left; padding: 3px; border-bottom: 1px solid #cedbde; } .fantasyrogue .rogue-clear-card p { line-height: 1.7; } .rogue-clear-stat-scroll { overflow-x:auto; scrollbar-gutter:stable; } .fantasyrogue .rogue-clear-stat-scroll table { min-width:580px; } .rogue-clear-effects { display:grid; grid-template-columns:minmax(160px,1fr) minmax(200px,2fr); gap:6px 14px; } .rogue-clear-effects dt { font-weight:bold; } .rogue-clear-effects dt small { display:block; font-weight:normal; color:#617480; } .rogue-clear-effects dd { margin:0; line-height:1.6; } .rogue-clear-sources { padding-left:22px; line-height:1.8; } .rogue-clear-moves ul { display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; } .rogue-clear-blessing { margin:8px 0; padding:8px 12px; background:#ffffff80; border:1px solid #c4d2dd; border-radius:6px; } @media (max-width:600px) { .rogue-clear-effects { grid-template-columns:1fr; } } @keyframes rogue-story-appear { from { opacity: .15; translate: 0 5px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .fantasyrogue .rogue-start-card, .fantasyrogue .rogue-story-spirit { animation: none; } } .fantasyrogue .pad { max-width: 1080px; padding: 8px 12px 16px; container-type: inline-size; } .fantasyrogue .rogue-start-menu { max-width: 820px; margin: 32px auto 24px; padding: 22px 14px; color: #304e66; } .fantasyrogue .rogue-start-heading { text-align: center; margin-bottom: 26px; } .fantasyrogue .rogue-start-heading h2 { font-size: 25px; font-weight: 700; letter-spacing: .04em; margin: 8px 0; } .fantasyrogue .rogue-start-heading p { font-size: 14px; color: #526e80; } .fantasyrogue .rogue-start-primary { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 138px; box-sizing: border-box; padding: 24px 26px; border: 2px solid #e4f7ff; border-radius: 14px; text-align: left; cursor: pointer; color: #173b56; background: linear-gradient(100deg, #e8fbf6b8, #e4ddfba3 53%, #f9e6c9c7), url(fantasy-rogue-stellar.svg) center / cover; box-shadow: 0 8px 22px #3e62772b, inset 0 1px 0 #fff; transition: box-shadow .16s, border-color .16s; } .fantasyrogue .rogue-start-primary strong { display: block; font-size: clamp(19px, 3.6cqw, 29px); line-height: 1.5; letter-spacing: .025em; } .fantasyrogue .rogue-start-primary small { display: block; font-size: 13px; margin-top: 8px; color: #385c74; } .fantasyrogue .rogue-start-symbol { flex: 0 0 54px; height: 54px; display: grid; place-items: center; font-size: 32px; border: 1px solid #fff; border-radius: 50%; background: #ffffff65; } .fantasyrogue .rogue-start-symbol i { margin: 0; } .fantasyrogue .rogue-start-arrow { margin-left: auto; font-size: 30px; } .fantasyrogue .rogue-start-primary:hover { border-color: #628ca9; box-shadow: 0 8px 24px #3e627748, inset 0 1px 0 #fff; } .fantasyrogue .rogue-start-primary:disabled { cursor: wait; opacity: .65; } .fantasyrogue .rogue-start-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; } .fantasyrogue .rogue-start-book { --book-accent: #426e8b; --book-tint: #cbe8f0; display: flex; flex-direction: column; align-items: center; min-height: 260px; gap: 10px; padding: 25px 10px 18px; box-sizing: border-box; color: #314e61; cursor: pointer; border: 1px solid #a5bdcc; border-radius: 10px; background: linear-gradient(160deg, #ffffffed, #f2f8fbe8 58%, var(--book-tint)); box-shadow: 0 4px 12px #41596a18, inset 0 3px 0 #fff; transition: border-color .16s, box-shadow .16s; } .fantasyrogue .rogue-start-book.book-blessings { --book-accent: #77619b; --book-tint: #e0d7f1; } .fantasyrogue .rogue-start-book.book-events { --book-accent: #5e7d65; --book-tint: #d6e8db; } .fantasyrogue .rogue-start-book:hover { border-color: var(--book-accent); box-shadow: 0 4px 14px #41596a32, inset 0 3px 0 var(--book-accent); } .fantasyrogue .rogue-book-emblem { display: grid; place-items: center; width: 66px; height: 66px; font-size: 28px; color: var(--book-accent); background: #ffffff9c; border: 1px solid var(--book-tint); border-radius: 18px; margin-bottom: 4px; } .fantasyrogue .rogue-book-emblem i { margin: 0; } .fantasyrogue .rogue-start-book strong { font-size: 19px; } .fantasyrogue .rogue-start-book > span:not(.rogue-book-emblem) { font-size: 13px; color: var(--book-accent); } .fantasyrogue .rogue-start-book small { font-size: 12px; line-height: 1.9; color: #617789; } .fantasyrogue .rogue-start-book b { font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 8px; color: var(--book-accent); } .fantasyrogue .rogue-start-note { text-align: center; font-size: 12px; color: #536c7b; padding-top: 20px; } .fantasyrogue .rogue-start-primary:focus-visible, .fantasyrogue .rogue-start-book:focus-visible { outline: 3px solid #345f88; outline-offset: 4px; } .fantasyrogue .rogue-codex { padding: 14px 0 24px; color: #304c60; } .fantasyrogue .rogue-codex-heading { padding: 10px 0 14px; border-bottom: 1px solid #9fb9ca; margin-bottom: 16px; } .fantasyrogue .rogue-codex-heading h2 { font-size: 24px; } .fantasyrogue .rogue-guide-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fantasyrogue .rogue-guide-intro article, .fantasyrogue .rogue-guide-rules { background: #f5faffee; border: 1px solid #b5cbd8; border-radius: 8px; padding: 14px; line-height: 1.85; } .fantasyrogue .rogue-guide-intro h3 { border: 0; margin-top: 0; font-size: 16px; } .fantasyrogue .rogue-guide-rules { margin: 12px 0; } .fantasyrogue .rogue-guide-rules summary { font-weight: bold; } .fantasyrogue .rogue-guide-rules h4 { margin: 14px 0 4px; } .fantasyrogue .rogue-codex-progress { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .fantasyrogue .rogue-codex-progress span { flex-basis: 100%; color: #597487; font-size: 13px; padding: 4px 0 12px; } .fantasyrogue .rogue-codex-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 10px; } .fantasyrogue .rogue-codex-filters .button { padding: 7px 16px; border-radius: 18px; background: #f4f9fce8; color: #42627a; border: 1px solid #aec4d2; } .fantasyrogue .rogue-codex-filters .is-active { color: #fff; background: #466d89; border-color: #466d89; text-shadow: none; } .fantasyrogue .rogue-codex-search { display: flex; gap: 8px; align-items: center; margin: 10px 0 18px; flex-wrap: wrap; } .fantasyrogue .rogue-codex-search input { box-sizing: border-box; max-width: 100%; padding: 7px 9px; border: 1px solid #a9bdca; border-radius: 5px; background: #fffffff2; color: #2b4355; } .fantasyrogue .rogue-codex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .fantasyrogue .rogue-codex-entry { --codex-accent: #557589; --codex-tint: #e2edf4; border: 1px solid #b0c7d5; border-top: 3px solid var(--codex-accent); border-radius: 8px; background: linear-gradient(135deg, #ffffff, var(--codex-tint) 210px); padding: 14px; line-height: 1.8; min-width: 0; } .fantasyrogue .rogue-codex-entry.tier-silver { --codex-accent: #637587; --codex-tint: #e7ecf2; } .fantasyrogue .rogue-codex-entry.tier-gold { --codex-accent: #9a7025; --codex-tint: #fbefce; } .fantasyrogue .rogue-codex-entry.tier-prismatic { --codex-accent: #8760ae; --codex-tint: #ede2fa; background: linear-gradient(135deg, #fff, #e3f4fc 40%, #f1e4fa 75%, #fbe6ed); } .fantasyrogue .rogue-codex-entry.is-locked { filter: grayscale(.35); opacity: .68; } .fantasyrogue .rogue-codex-entry-top { display: flex; align-items: center; gap: 8px; color: var(--codex-accent); min-height: 30px; } .fantasyrogue .rogue-codex-entry-top > span:first-child { font-size: 20px; } .fantasyrogue .rogue-codex-entry-top .rogue-codex-lock { margin-left: auto; font-size: 11px; } .fantasyrogue .rogue-codex-entry h3 { font-size: 17px; color: var(--codex-accent); border: 0; margin: 8px 0; overflow-wrap: anywhere; } .fantasyrogue .rogue-codex-entry p { overflow-wrap: anywhere; } .fantasyrogue .rogue-codex-effect { font-size: 14px; white-space: pre-line; } .fantasyrogue .is-locked .rogue-codex-effect { letter-spacing: .2em; padding: 8px 0; } .fantasyrogue .rogue-codex-pagination { display: flex; justify-content: center; gap: 14px; align-items: center; margin-top: 22px; font-size: 12px; } .fantasyrogue .rogue-codex-empty { text-align: center; padding: 32px 0; } .fantasyrogue .rogue-event-reading { background: #f5faffef; padding: 14px; margin-top: 10px; border: 1px solid #aec6d5; border-radius: 10px; } .fantasyrogue .rogue-event-reading > p { margin: 9px 0; line-height: 1.65; font-size: 15px; } .fantasyrogue .rogue-event-reading .rogue-reading-note { font-size: 12px; color: #637988; padding-bottom: 14px; border-bottom: 1px solid #cedde7; } .fantasyrogue .rogue-reading-skip { color: #59718a; font-size: 13px; } .fantasyrogue .rogue-reading-options { display: grid; gap: 6px; margin: 12px 0; } .fantasyrogue .rogue-reading-options .button { padding: 12px 16px; text-align: left; white-space: normal; font-size: 14px; } .fantasyrogue .rogue-event-reading footer { border-top: 1px solid #cedde7; padding-top: 10px; } @media (max-height: 800px) { .fantasyrogue .rogue-start-menu { margin-top: 10px; padding-top: 8px; padding-bottom: 8px; } .fantasyrogue .rogue-start-heading { margin-bottom: 18px; } .fantasyrogue .rogue-start-heading h2 { font-size: 23px; } .fantasyrogue .rogue-start-primary { min-height: 105px; padding-top: 16px; padding-bottom: 16px; } .fantasyrogue .rogue-start-book { min-height: 215px; padding-top: 16px; gap: 8px; } .fantasyrogue .rogue-book-emblem { width: 48px; height: 48px; font-size: 25px; } .fantasyrogue .rogue-start-note { padding-top: 12px; } } @container (max-width: 510px) { .fantasyrogue .rogue-start-menu { padding: 10px 0; margin-top: 20px; } .fantasyrogue .rogue-start-primary { padding: 16px 14px; gap: 10px; min-height: 112px; } .fantasyrogue .rogue-start-symbol { flex-basis: 36px; height: 36px; font-size: 24px; } .fantasyrogue .rogue-start-books { gap: 8px; } .fantasyrogue .rogue-start-book { min-height: 225px; padding: 18px 5px 14px; } .fantasyrogue .rogue-start-book strong { font-size: 15px; } .fantasyrogue .rogue-book-emblem { width: 46px; height: 46px; font-size: 24px; } .fantasyrogue .rogue-start-book small { font-size: 11px; } .fantasyrogue .rogue-start-arrow { display: none; } .fantasyrogue .rogue-guide-intro, .fantasyrogue .rogue-codex-grid { grid-template-columns: 1fr; } } .fantasyrogue p { margin: 6px 0; } .fantasyrogue .pad > p:first-child { margin-top: 0; } .fantasyrogue h2 { margin: 10px 0 6px; } .fantasyrogue h3 { margin: 12px 0 6px; border-bottom: 1px solid #bbb; padding-bottom: 3px; } .fantasyrogue .rogue-party { list-style: none; padding: 0; } .fantasyrogue .rogue-party li { margin: 8px 0; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; } .fantasyrogue .picon { display: inline-block; vertical-align: middle; width: 40px; height: 30px; } .fantasyrogue .rogue-starters { display: flex; flex-wrap: wrap; gap: 3px 8px; } .fantasyrogue .rogue-starters label { padding: 2px; } .fantasyrogue .rogue-starters label.is-disabled { color: #7b838a; opacity: .6; filter: grayscale(1); cursor: not-allowed; } .fantasyrogue .rogue-unlock-guide { margin: 8px 0; padding: 7px 9px; background: rgba(247, 251, 255, .92); border: 1px solid #bccdda; border-radius: 4px; } .fantasyrogue .rogue-unlock-guide ul { margin: 4px 0; padding-left: 20px; line-height: 1.6; } .fantasyrogue .rogue-upgrades { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 12px; } .fantasyrogue .button { box-sizing: border-box; min-height: 24px; padding: 2px 6px; margin: 2px 0; vertical-align: middle; } .fantasyrogue .rogue-exp { margin: 5px 0 0; color: #24628b; font-size: 12px; } .fantasyrogue .rogue-notices { padding: 6px 8px; background: #f0f5f9; border: 1px solid #ccd6df; border-radius: 4px; } .fantasyrogue .rogue-notices ul { margin: 6px 0; padding-left: 22px; } .fantasyrogue summary { cursor: pointer; } .fantasyrogue select { max-width: 100%; } .fantasyrogue h4 { margin: 0 0 6px; font-size: 15px; } .fantasyrogue .rogue-caption { color: #4b6477; font-size: 12px; margin: 4px 0; } .fantasyrogue .rogue-floor { padding: 12px 10px; line-height: 1.65; background: rgba(245, 250, 255, .95); border: 1px solid #8bacbf; border-radius: 6px; } .fantasyrogue .rogue-floor > p { margin: 10px 0; } .fantasyrogue .rogue-floor > .button { margin: 6px 4px 6px 0; } .fantasyrogue .rogue-abandon { margin-top: 40px; padding: 18px 2px 12px; border-top: 1px solid #9baebc; font-style: normal; } .fantasyrogue .rogue-abandon-note { font-size: 14px; line-height: 1.7; color: #4b5d6b; margin: 0 0 10px; } .fantasyrogue .rogue-abandon-actions { display: flex; flex-wrap: wrap; gap: 12px; } .fantasyrogue .rogue-abandon .button { min-height: 36px; padding: 6px 16px; font-size: 14px; } .fantasyrogue .rogue-abandon button[name=askAbandon], .fantasyrogue .rogue-abandon button[name=abandon] { color: #803e40; border-color: #b78b8d; } .fantasyrogue .rogue-floor h3 { display: inline-block; vertical-align: middle; margin: 0 12px 4px 0; padding: 0; border: 0; } .fantasyrogue .rogue-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 8px; padding: 12px 2px 2px; margin-top: 0; } .fantasyrogue .rogue-routes .rogue-route { grid-template-rows: auto auto auto auto 1fr auto; } .fantasyrogue .rogue-route { --route-color: 178, 46, 65; --route-light: 247, 177, 184; --route-dark: 128, 35, 55; --card-cut: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); position: relative; isolation: isolate; min-width: 0; padding: 9px 10px 11px; background: none; color: #273b4a; border: 0; border-radius: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; gap: 4px 7px; align-items: start; font: inherit; text-align: left; line-height: inherit; cursor: pointer; transition: transform .15s, filter .15s; } .fantasyrogue .rogue-route::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; clip-path: var(--card-cut); background: rgba(var(--route-color), .4); } .fantasyrogue .rogue-route::after { content: ""; position: absolute; inset: 1.5px; z-index: 0; pointer-events: none; clip-path: var(--card-cut); background: url(fantasy-rogue-card-pattern.svg), linear-gradient(155deg, #f9fcff, rgb(var(--route-light))); background-size: 24px 21px, 100% 100%; box-shadow: inset 0 0 12px rgba(255, 255, 255, .5); } .fantasyrogue .rogue-route-blue { --route-color: 76, 109, 197; --route-light: 174, 222, 255; --route-dark: 29, 60, 123; } .fantasyrogue .rogue-route-green { --route-color: 46, 136, 108; --route-light: 174, 246, 197; --route-dark: 24, 86, 66; } .fantasyrogue .rogue-routes .rogue-route-red { --route-color: 181, 48, 25; --route-light: 246, 170, 124; --route-dark: 130, 35, 17; } .fantasyrogue .rogue-route-rose { --route-color: 177, 28, 115; --route-light: 248, 145, 205; --route-dark: 125, 16, 82; } .fantasyrogue .rogue-routes .rogue-route::before { background: rgba(var(--route-color), .85); } .fantasyrogue .rogue-routes .rogue-route.is-selected::before, .fantasyrogue .rogue-routes .rogue-route:focus-visible::before { background: rgb(var(--route-dark)); } .fantasyrogue .rogue-route > :not(.rogue-vortex) { position: relative; z-index: 2; } .fantasyrogue .rogue-route > .rogue-route-marker { position: absolute; z-index: 3; top: -10px; left: calc(50% - 9px); display: none; pointer-events: none; color: rgb(var(--route-dark)); } .fantasyrogue .rogue-route.is-selected > .rogue-route-marker { display: block; } .fantasyrogue .rogue-route-emblem { display: flex; align-items: center; justify-content: center; flex-shrink: 0; grid-column: 1; grid-row: 1; width: 28px; height: 28px; color: rgb(var(--route-color)); background: rgba(255, 255, 255, .6); border: 1px solid rgba(var(--route-color), .2); border-radius: 5px; } .fantasyrogue .rogue-route-emblem .fa { font-size: 19px; } .fantasyrogue .rogue-route > strong { grid-column: 2; grid-row: 1; align-self: center; text-align: left; } .fantasyrogue .rogue-route > .rogue-route-type { color: rgb(var(--route-dark)); font-size: 19px; font-weight: 750; } .fantasyrogue .rogue-route > .rogue-route-subtitle { grid-column: 1 / -1; font-size: 15px; font-weight: 650; line-height: 1.5; } .fantasyrogue .rogue-route > small { grid-column: 1 / -1; margin: 0; color: #4b6477; text-align: left; } .fantasyrogue .rogue-route > .rogue-caption { grid-column: 1 / -1; margin: 3px 0 0; padding-top: 4px; border-top: 1px solid rgba(var(--route-color), .16); color: #4b6477; } .fantasyrogue .rogue-route > .rogue-loot { grid-column: 1 / -1; width: 100%; flex-direction: row; align-content: flex-start; align-items: flex-start; gap: 3px 8px; margin: 0 0 3px; } .fantasyrogue .rogue-route .rogue-loot strong { color: #1c573c; } .fantasyrogue .rogue-route .rogue-growth-reward { color: #855a00; } .fantasyrogue .rogue-route > .rogue-route-hint { grid-column: 1 / -1; align-self: end; padding: 4px 0 0; border-top: 1px solid rgba(var(--route-color), .16); font-size: 12px; color: #4b6477; text-align: center; } .fantasyrogue .rogue-route-hint::after { content: ""; position: absolute; bottom: -6px; left: 23%; right: 23%; height: 2px; background: rgba(var(--route-color), .4); pointer-events: none; } .fantasyrogue .rogue-route:not(:disabled):hover, .fantasyrogue .rogue-route:not(:disabled):focus-visible { transform: translateY(-1px); filter: drop-shadow(0 1px 2px rgba(var(--route-color), .2)); } .fantasyrogue .rogue-route.is-selected, .fantasyrogue .rogue-route.is-selected:hover, .fantasyrogue .rogue-route.is-selected:focus-visible { transform: translateY(-2px); filter: drop-shadow(0 0 2px rgba(var(--route-color), .5)); } .fantasyrogue .rogue-route.is-selected::before { background: rgb(var(--route-dark)); } .fantasyrogue .rogue-route.is-selected::after { inset: 4px; box-shadow: inset 0 0 20px rgba(255, 255, 255, .18); } .fantasyrogue .rogue-route.is-selected > .rogue-route-hint { color: rgb(var(--route-color)); font-weight: bold; } .fantasyrogue .rogue-route:focus-visible { outline: none; } .fantasyrogue .rogue-route:focus-visible::before { background: rgb(var(--route-dark)); } .fantasyrogue .rogue-route:focus-visible::after { inset: 3px; } .fantasyrogue .rogue-route:disabled { cursor: default; opacity: .55; } .fantasyrogue .rogue-vortex { position: absolute; inset: 0; z-index: 1; clip-path: var(--card-cut); overflow: hidden; contain: strict; pointer-events: none; opacity: 0; transition: opacity .2s; color: rgb(var(--route-color)); } .fantasyrogue .rogue-particle-field { position: absolute; inset: 0; display: block; fill: currentColor; opacity: 0; transform: scale(.18); transform-origin: 50% 50%; } .fantasyrogue .rogue-route:not(:disabled):hover > .rogue-vortex, .fantasyrogue .rogue-route:not(:disabled):focus-visible > .rogue-vortex { opacity: 1; } .fantasyrogue .rogue-route:not(:disabled):hover .rogue-particle-field, .fantasyrogue .rogue-route:not(:disabled):focus-visible .rogue-particle-field { animation: rogue-particles-outward 6s linear infinite; animation-delay: var(--particle-delay); will-change: transform, opacity; } @keyframes rogue-particles-outward { 0% { transform: scale(.18); opacity: 0; } /* Only endpoints set the transform: a constant outward speed throughout the loop. */ 25% { opacity: .06; } 50% { opacity: .18; } 75% { opacity: .4; } 100% { transform: scale(1.6); opacity: .64; } } @media (prefers-reduced-motion: reduce) { .fantasyrogue .rogue-route, .fantasyrogue .rogue-vortex { transition: none; } .fantasyrogue .rogue-route:not(:disabled):hover, .fantasyrogue .rogue-route:not(:disabled):focus-visible { transform: none; } .fantasyrogue .rogue-route .rogue-vortex .rogue-particle-field { display: none; animation: none; will-change: auto; } .fantasyrogue .rogue-route .rogue-vortex { background: radial-gradient(ellipse, rgba(var(--route-light), .3), transparent 70%); } } .fantasyrogue .rogue-loot { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 6px; align-items: center; } .fantasyrogue .rogue-loot > span { display: inline-flex; align-items: center; gap: 4px; } .fantasyrogue .rogue-loot strong { font-size: 16px; color: #1c573c; white-space: nowrap; } .fantasyrogue .rogue-loot .rogue-cost strong { color: #a52b3f; } .fantasyrogue .rogue-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border: 1px solid #8cc6a8; background: #edf8ef; border-radius: 4px; padding: 6px 8px; margin-bottom: 8px; } .fantasyrogue .rogue-receipt > strong { color: #245c39; } .fantasyrogue .rogue-reward-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; border-top: 1px solid #c7d5df; margin-top: 6px; padding-top: 6px; } .fantasyrogue .rogue-reward-preview > .rogue-loot, .fantasyrogue .rogue-receipt > .rogue-loot { margin: 0; } .fantasyrogue .rogue-growth-reward { color: #855a00; } .fantasyrogue .rogue-boosts { color: #405369; font-size: 12px; padding: 0 4px; } .fantasyrogue .rogue-team-tabs { display: flex; overflow-x: auto; gap: 2px; } .fantasyrogue .rogue-team-tabs button { font: inherit; box-sizing: border-box; min-width: 94px; flex: 1 0 94px; max-width: 190px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; justify-items: center; column-gap: 2px; padding: 3px; border: 1px solid #aabac6; border-radius: 5px 5px 0 0; background: rgba(245, 248, 250, .9); cursor: pointer; } .fantasyrogue .rogue-team-tabs .picon { transform: scale(.8); margin: -3px -6px; } .fantasyrogue .rogue-team-tabs button[aria-selected=true] { background: #dcebf6; border-color: #638ba6; box-shadow: inset 0 3px #4c8aba; } .fantasyrogue .rogue-team-tabs small { grid-column: 1 / -1; font-size: 11px; margin-top: 0; white-space: nowrap; color: #4b6477; } .fantasyrogue .rogue-evolution-mark { margin-left: 5px; padding: 2px 6px; border-radius: 4px; border: 1px solid #3d865f; background: #d9f7df; color: #145b32; font-size: 12px; font-style: normal; font-weight: bold; white-space: nowrap; } .fantasyrogue .rogue-member-toolbar .rogue-evolution-trigger { margin-left: 8px; color: #1b653b; border-color: #77ab8b; background: #ecfff2; } .fantasyrogue .rogue-team-tabs button > span:not(.picon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fantasyrogue .rogue-member-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #e7f0f5; padding: 2px 8px; border: 1px solid #aabac6; border-bottom: 0; } .fantasyrogue .rogue-member-sheet { display: grid; grid-template-columns: 96px minmax(192px, 1.1fr) minmax(160px, 1.2fr) minmax(128px, .8fr); gap: 6px; background: #dce7f0; border: 1px solid #aabac6; border-radius: 0 0 5px 5px; padding: 6px; } .fantasyrogue .rogue-member-sheet > * { min-width: 0; } .fantasyrogue .rogue-identity { display: flex; flex-direction: column; gap: 2px; font-size: 12px; align-items: center; } .fantasyrogue .rogue-sprite-frame { width: 96px; height: 88px; } .fantasyrogue .rogue-sprite { width: 120px; height: 110px; } .fantasyrogue .rogue-sprite-frame > .rogue-sprite { transform: scale(.8); transform-origin: top left; } .fantasyrogue .rogue-identity meter { width: 100%; height: 12px; } .fantasyrogue .rogue-member-sheet label { display: block; color: #4c5d6b; font-weight: bold; font-size: 12px; margin-top: 3px; } .fantasyrogue .rogue-equipped-moves > label { margin-top: 0; } .fantasyrogue .rogue-details-line { display: grid; grid-template-columns: 30px 28px minmax(0, 1fr); min-height: 54px; background: #f7fafc; border: 1px solid #aabac6; border-radius: 4px; text-align: center; } .fantasyrogue .rogue-details-line > span { min-width: 0; padding: 2px; font-size: 11px; line-height: 14px; color: #566b78; } .fantasyrogue .rogue-details-line b { display: block; font-size: 13px; line-height: 18px; color: #222; } .fantasyrogue .rogue-nature-effect { display: block; min-height: 18px; white-space: nowrap; } .fantasyrogue .rogue-member-details > .rogue-exp { min-height: 18px; line-height: 18px; white-space: nowrap; } .fantasyrogue .rogue-member-details > .button { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fantasyrogue .rogue-equipment-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .fantasyrogue .rogue-equipment-slots .button { width: 100%; margin-left: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fantasyrogue .rogue-ability-line { display: flex; align-items: stretch; gap: 4px; } .fantasyrogue .rogue-ability-line > .button { margin: 0; min-width: 0; padding: 4px 8px; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.35; } .fantasyrogue .rogue-ability-line > .button:first-child { flex: 0 1 auto; max-width: 13em; } .fantasyrogue .rogue-ability-line > .rogue-extra-abilities { color: #705097; border-color: #b09ac8; background: #f5effc; } .rogue-extra-abilities-popup { max-width: 480px; } .rogue-extra-abilities-popup dl { max-height: 60vh; overflow-y: auto; } .rogue-extra-abilities-popup dt { font-weight: bold; color: #705097; margin: 14px 0 5px; } .rogue-extra-abilities-popup dd { margin: 0; line-height: 1.65; } .fantasyrogue .rogue-member-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 10px; width: 100%; } .fantasyrogue .rogue-member-choice { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; margin: 0; padding: 10px; border: 1px solid #9fb8cc; border-radius: 9px; background: linear-gradient(145deg, #f9fcff, #e0edf5); color: #314f65; white-space: normal; } .fantasyrogue .rogue-member-choice:hover:not(:disabled), .fantasyrogue .rogue-member-choice:focus-visible { border-color: #527fa4; box-shadow: 0 0 0 2px #8fbbd780; background: #edf8ff; } .fantasyrogue .rogue-member-choice:disabled { opacity: .55; } .fantasyrogue .rogue-member-choice .rogue-member-art { display: block; flex: 0 0 110px; width: 120px; height: 110px; } .fantasyrogue .rogue-member-choice strong { font-size: 15px; } .fantasyrogue .rogue-member-choice > span:not(.rogue-member-art), .fantasyrogue .rogue-member-choice > small { font-size: 12px; line-height: 1.4; } .fantasyrogue .rogue-blessing-progress { list-style: none; padding: 0; } .fantasyrogue .rogue-blessing-progress li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 0; } .fantasyrogue .rogue-equipped-moves > div { display: flex; align-items: stretch; gap: 3px; } .fantasyrogue .rogue-equipped-moves .button:first-child { flex: 1; min-width: 0; text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fantasyrogue .rogue-equipped-moves .selected .button:first-child { box-shadow: inset 0 0 0 1px #2383bd; background: #fff; } .fantasyrogue .rogue-stat-summary { color: #273949; font: inherit; font-size: 12px; cursor: pointer; background: #f7fafc; border: 1px solid #9baebc; border-radius: 4px; padding: 5px 6px; text-align: left; } .fantasyrogue .rogue-stat-summary > strong { display: block; margin-bottom: 4px; } .fantasyrogue .rogue-stat-summary > span { display: grid; grid-template-columns: 1fr 30px 24px; gap: 2px; margin: 3px 0; } .fantasyrogue .rogue-stat-summary b, .fantasyrogue .rogue-stat-summary small { text-align: right; } .fantasyrogue .rogue-stat-summary small { color: #61737e; } .fantasyrogue .rogue-editor-options { background: rgba(249, 252, 255, .94); padding: 8px; border: 1px solid #b9cbd8; border-top: 0; border-radius: 0 0 5px 5px; } .fantasyrogue .rogue-editor-options > h4 { display: inline-block; margin: 0 10px 4px 0; } .fantasyrogue .rogue-editor-options > h4 + .rogue-caption { display: inline-block; margin: 0 0 4px; } .fantasyrogue .rogue-move-row { display: grid; grid-template-columns: minmax(100px, 1.3fr) 90px 36px 48px 48px; align-items: center; gap: 3px 6px; font-size: 12px; padding: 5px 2px; flex: 1; min-width: 0; } .fantasyrogue .rogue-move-row small { display: block; color: #536879; font-size: 10px; } .fantasyrogue .rogue-move-name { font-size: 14px; } .fantasyrogue .rogue-move-icons { white-space: nowrap; } .fantasyrogue .rogue-move-icons img { vertical-align: middle; } .fantasyrogue .rogue-move-desc { grid-column: 1 / -1; color: #465d6d; line-height: 1.5; } .fantasyrogue .rogue-choice-row { display: flex; align-items: center; gap: 6px; padding: 2px; border-bottom: 1px solid #d3dfe8; } .fantasyrogue .rogue-choice-row > .button { font-size: 12px; flex-shrink: 0; } .fantasyrogue .rogue-new-move { background: #e9f3df; border: 1px solid #abc695; border-radius: 4px; padding: 3px 8px; } .fantasyrogue .rogue-option { display: grid; grid-template-columns: minmax(100px, .4fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; border-bottom: 1px solid #c8d9e6; padding: 6px 2px; } .fantasyrogue .rogue-option:last-child { border-bottom: 0; } .fantasyrogue .rogue-option p { color: #4b6477; font-size: 12px; margin: 0; } .fantasyrogue .rogue-badge { color: #765187; font-size: 11px; border: 1px solid #bfaccb; padding: 2px 5px; border-radius: 4px; } .fantasyrogue .rogue-stats { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; } .fantasyrogue .rogue-time { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 5px 12px; border: 2px solid #b79b47; border-radius: 8px; background: #fff3c5; color: #73521c; font-size: 16px; font-weight: bold; vertical-align: middle; } .fantasyrogue .rogue-time-night { background: #e1e3ff; border-color: #7771b1; color: #3f3a77; } .fantasyrogue .rogue-time-dusk { background: #ffe3d2; border-color: #c08268; color: #89482c; } .fantasyrogue .rogue-time-dawn { background: #f7e2f2; border-color: #b784af; color: #7c4775; } .fantasyrogue .rogue-environment { background: #e1f1ef; border-color: #629b9b; color: #275e61; } .fantasyrogue .rogue-activity-track { position: relative; height: 26px; margin: 12px 4px 5px; border: 2px solid #6b899d; border-radius: 7px; background: #dfe9f1; overflow: hidden; } .fantasyrogue .rogue-activity-zone { position: absolute; left: 31.25%; width: 37.5%; height: 100%; background: #a1d9ba; border-inline: 2px solid #438568; box-sizing: border-box; } .fantasyrogue .rogue-activity-beat { position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #234b6a; box-shadow: 0 0 4px #fff; } .fantasyrogue .rogue-activity-time { margin: 3px 4px; font-weight: bold; font-variant-numeric: tabular-nums; } .fantasyrogue .rogue-cat-abilities > div { padding: 8px 0; border-top: 1px solid #b7cddd; } .fantasyrogue .rogue-cat-abilities .button { margin: 3px; font-size: 13px; } .fantasyrogue { overflow-anchor: none; scrollbar-gutter: stable; } .fantasyrogue .rogue-preference { padding: 7px 10px; margin: 8px 0; border-left-width: 3px; } .fantasyrogue .rogue-preference p { font-size: 12px; line-height: 1.5; margin: 4px 0 0; } .fantasyrogue .rogue-bag .rogue-inventory { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 5px; } .fantasyrogue .rogue-bag .rogue-item-card { padding: 5px 6px; gap: 2px 4px; } .fantasyrogue .rogue-bag .rogue-item-heading { font-size: 13px; gap: 3px; } .fantasyrogue .rogue-bag .rogue-item-card > small { display: none; } .fantasyrogue .rogue-bag .rogue-item-card > p { font-size: 11px; line-height: 1.4; } .fantasyrogue .rogue-bag .rogue-item-card > .button { font-size: 12px; padding: 3px 5px; min-height: 28px; } .fantasyrogue .rogue-evolution-trigger { background: #e1f8e8; color: #145b32; border: 2px solid #4c8e67; font-weight: bold; } .fantasyrogue .rogue-save-status { position: absolute; right: 16px; top: 4px; z-index: 3; background: #fff9dc; padding: 4px 8px; } .fantasyrogue .rogue-evolution-details { padding: 10px; border: 1px solid #b9cbd8; border-top: 0; border-radius: 0 0 5px 5px; background: rgba(249, 252, 255, .94); } .fantasyrogue .rogue-evolution-details h4 { margin: 0 0 8px; } .fantasyrogue .rogue-evolution-details h4 > span { margin-left: 12px; font-weight: normal; } .fantasyrogue .rogue-evolution-details p { margin: 4px 0; } .fantasyrogue .rogue-evolution-branch { display: grid; grid-template-columns: minmax(90px, .3fr) minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 7px 0; border-top: 1px solid #d3dfe8; } .fantasyrogue .rogue-evolution-branch ul { margin: 0; padding: 0; list-style: none; line-height: 1.65; font-size: 13px; } .fantasyrogue .rogue-evolution-branch .met { color: #31654d; } .fantasyrogue .rogue-evolution-branch .unmet { color: #566b7b; } .fantasyrogue .rogue-stat-label-col { width: 12%; } .fantasyrogue .rogue-stat-base-col { width: 32%; } .fantasyrogue .rogue-stats th { text-align: left; } .fantasyrogue .rogue-stats td, .fantasyrogue .rogue-stats th { padding: 3px 4px; border-bottom: 1px solid #d3dfe8; } .fantasyrogue .rogue-stat-number { display: inline-block; min-width: 30px; font-weight: bold; } .fantasyrogue .rogue-stat-track { display: inline-block; width: calc(100% - 34px); max-width: 128px; vertical-align: middle; } .fantasyrogue .rogue-stat-bar { display: inline-block; height: 9px; background: #80b836; vertical-align: middle; } .fantasyrogue .rogue-stats input { width: 55px; max-width: 100%; box-sizing: border-box; } .fantasyrogue .rogue-bag { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 10px; margin-top: 12px; } .fantasyrogue .rogue-bag > h3 { margin: 0; padding: 0; border: 0; } .fantasyrogue .rogue-bag > p { margin: 0; min-width: 0; } .fantasyrogue .rogue-bag > p label { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; } .fantasyrogue .rogue-bag > .rogue-inventory { grid-column: 1 / -1; } .fantasyrogue .rogue-wallet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: #fff5d7; border: 1px solid #d1b77c; border-radius: 4px; color: #735100; } .fantasyrogue .rogue-wallet strong { font-size: 20px; } .fantasyrogue .rogue-inventory { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; margin-bottom: 10px; } .fantasyrogue .rogue-item-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 3px 6px; padding: 7px 8px; border: 1px solid #becdd8; border-radius: 5px; background: rgba(250, 253, 255, .94); } .fantasyrogue .rogue-item-card > .rogue-item-heading { grid-column: 1 / -1; } .fantasyrogue .rogue-item-card > small, .fantasyrogue .rogue-item-card > p { grid-column: 1; } .fantasyrogue .rogue-item-card > .button { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0; } .fantasyrogue .rogue-shop .rogue-item-card > p:first-of-type { grid-column: 1 / -1; } .fantasyrogue .rogue-shop .rogue-item-card > .button { grid-row: 3; } .fantasyrogue .rogue-item-heading { display: flex; align-items: center; gap: 6px; min-height: 26px; } .fantasyrogue .rogue-item-heading > b { margin-left: auto; white-space: nowrap; } .fantasyrogue .rogue-item-heading > span { flex-shrink: 0; } .fantasyrogue .rogue-item-card > p { color: #465d6d; font-size: 12px; line-height: 1.5; margin: 0; } .fantasyrogue .rogue-item-card > small { color: #6a7c88; } .fantasyrogue .itemicon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; } @container (max-width: 760px) { .fantasyrogue .rogue-member-sheet { grid-template-columns: 96px minmax(192px, 1fr) minmax(160px, 1.2fr); } .fantasyrogue .rogue-stat-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 4px 8px; } .fantasyrogue .rogue-stat-summary > strong { grid-column: 1 / -1; margin: 0; } .fantasyrogue .rogue-stat-summary > span { margin: 0; } } @container (max-width: 540px) { .fantasyrogue .rogue-stat-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fantasyrogue .rogue-bag { grid-template-columns: 1fr auto; } .fantasyrogue .rogue-bag > p { grid-column: 1 / -1; } .fantasyrogue .rogue-bag > p label { justify-content: flex-start; } .fantasyrogue .rogue-option { grid-template-columns: minmax(0, 1fr) auto; } .fantasyrogue .rogue-option > p { grid-column: 1; } .fantasyrogue .rogue-option > .button { grid-column: 2; grid-row: 1 / span 2; } .fantasyrogue .rogue-move-row { grid-template-columns: minmax(85px, 1fr) 85px 32px 43px 43px; gap: 3px; } .fantasyrogue .rogue-choice-row { display: block; } .fantasyrogue .rogue-choice-row > .button { margin-bottom: 4px; } .fantasyrogue .rogue-stat-track { display: none; } .fantasyrogue .rogue-stat-base-col { width: 22%; } } @container (max-width: 500px) { .fantasyrogue .rogue-member-sheet { grid-template-columns: 96px minmax(0, 1fr); } .fantasyrogue .rogue-equipped-moves { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .fantasyrogue .rogue-equipped-moves > label { grid-column: 1 / -1; } .fantasyrogue .rogue-floor { padding: 10px 8px; } .fantasyrogue .rogue-editor-options { padding: 6px; } } @container (max-width: 380px) { .fantasyrogue .rogue-details-line { grid-template-columns: 1fr 1fr; } .fantasyrogue .rogue-nature { grid-column: 1 / -1; } .fantasyrogue .rogue-move-row { grid-template-columns: 1fr 40px 50px 50px; } .fantasyrogue .rogue-move-name { grid-column: 1 / -1; } .fantasyrogue .rogue-inventory { grid-template-columns: 1fr; } } .rogue-balls { clear: both; padding: 8px; } .rogue-balls p { margin: 0 0 6px; } .rogue-retreat { clear: both; padding: 5px 8px; } .rogue-retreat .button { margin-right: 6px; } .rogue-retreat small { color: #555; } .rogue-defeat { margin: 6px 0 10px; padding: 8px 10px; color: #49372b; background: #fff3dc; border: 1px solid #c99750; border-left: 4px solid #bc5a43; border-radius: 4px; } .rogue-defeat > strong { color: #a3342d; } .rogue-defeat p { margin: 5px 0; line-height: 1.5; } .fantasyrogue .rogue-recovery { padding: 5px 8px; border-left: 3px solid #c5943e; background: #fff6df; } .fantasyrogue .rogue-item { display: inline-block; vertical-align: middle; background-image: url(../sprites/fantasy-rogue/items.png); background-repeat: no-repeat; image-rendering: pixelated; } .fantasyrogue .rogue-item-candy { width: 23px; height: 23px; background-position: -229px -400px; } .fantasyrogue .rogue-item-cord { width: 27px; height: 26px; background-position: -28px -115px; } .fantasyrogue .rogue-item-potion { width: 17px; height: 23px; background-position: -218px -169px; } .fantasyrogue .rogue-item-superpotion { width: 17px; height: 23px; background-position: -234px -192px; } .fantasyrogue .rogue-item-hyperpotion { width: 17px; height: 23px; background-position: -215px -331px; } .fantasyrogue .rogue-item-revive { width: 12px; height: 17px; background-position: -479px -54px; } .fantasyrogue .rogue-item-fullheal { width: 15px; height: 23px; background-position: -200px -331px; } .fantasyrogue .rogue-item-elixir { width: 18px; height: 24px; background-position: -77px -168px; } .fantasyrogue .rogue-item-blackaugurite { width: 22px; height: 25px; background-position: -55px -115px; } .fantasyrogue .rogue-item-bigmushroom { width: 19px; height: 19px; background-position: -336px -343px; } .fantasyrogue .rogue-item-nugget { width: 16px; height: 16px; background-position: -451px -351px; } .fantasyrogue .rogue-item-bignugget { width: 20px; height: 20px; background-position: -232px -22px; } .fantasyrogue .rogue-item-hpup { width: 16px; height: 24px; background-position: -103px -189px; } .fantasyrogue .rogue-item-protein { width: 16px; height: 24px; background-position: -165px -175px; } .fantasyrogue .rogue-item-iron { width: 16px; height: 24px; background-position: -103px -213px; } .fantasyrogue .rogue-item-calcium { width: 16px; height: 24px; background-position: -86px -139px; } .fantasyrogue .rogue-item-zinc { width: 16px; height: 24px; background-position: -181px -170px; } .fantasyrogue .rogue-item-carbos { width: 16px; height: 24px; background-position: -61px -169px; } .fantasyrogue .rogue-loot-icon { width: 24px; height: 24px; vertical-align: middle; image-rendering: pixelated; object-fit: contain; flex-shrink: 0; } .fantasyrogue .rogue-treasures { grid-column: 1 / -1; border-top: 1px solid #bdcedc; padding-top: 5px; } .fantasyrogue .rogue-treasures h4 { margin: 3px 0 6px; } .fantasyrogue .rogue-treasures h4 small { color: #5a6e80; font-weight: normal; margin-left: 8px; } .fantasyrogue .rogue-shop { margin: 8px 0; } .fantasyrogue .rogue-shop-balance { float: right; color: #715617; } .fantasyrogue .rogue-preparation-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; padding: 8px 10px; margin: 8px 0; background: #edf4f9; border: 1px solid #c4d5e2; border-radius: 6px; font-size: 13px; line-height: 1.5; } .rogue-candy-popup { width: 440px; max-width: calc(100vw - 60px); line-height: 1.6; } .rogue-candy-popup input { width: 80px; margin-left: 8px; padding: 5px; font-size: 16px; } .rogue-candy-popup .rogue-candy-amounts { display: flex; flex-wrap: wrap; gap: 5px; } .rogue-candy-popup .rogue-candy-preview { padding: 10px; background: #edf4f9; border-radius: 6px; font-weight: bold; } .rogue-candy-popup > .button { min-height: 36px; padding: 6px 14px; } .fantasyrogue .rogue-exchange { margin: 7px 0; padding: 7px 8px; background: #fff7df; border: 1px solid #e1c78c; border-radius: 4px; } .fantasyrogue .rogue-exchange > strong { margin-right: 10px; } .fantasyrogue .rogue-exchange .rogue-inventory { margin-top: 5px; } .fantasyrogue .rogue-shop-group { border-top: 1px solid #cbd9e5; padding-top: 5px; margin-top: 6px; } .fantasyrogue .rogue-shop-group > h4 { font-size: 14px; margin: 4px 0 8px; } .fantasyrogue .rogue-shop-group .rogue-inventory { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 6px; } .fantasyrogue .rogue-shop-group .rogue-item-card { padding: 6px 7px; gap: 3px 5px; align-content: stretch; } .fantasyrogue .rogue-shop-group .rogue-item-heading { font-size: 13px; line-height: 1.4; gap: 4px; } .fantasyrogue .rogue-shop-group .rogue-item-card > p { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; } .fantasyrogue .rogue-shop-group .rogue-item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-self: end; } .fantasyrogue .rogue-shop-group .rogue-item-actions > .button { min-height: 28px; margin: 0; padding: 3px 7px; font-size: 12px; } .ps-popup.rogue-starter-popup { width: 410px; max-width: calc(100vw - 24px); box-sizing: border-box; } .rogue-starter-config { max-height: calc(100vh - 72px); overflow-y: auto; } .rogue-starter-config h3 { margin: 3px 0 12px; } .rogue-starter-config .rogue-config-progress { margin: 0 0 8px; color: #52697b; } .rogue-starter-config .buttonbar { display: flex; flex-wrap: wrap; gap: 6px; } .rogue-starter-config select { max-width: 100%; } .rogue-starter-config table { width: 100%; border-collapse: collapse; background: #f4f8fb; } .rogue-starter-config th, .rogue-starter-config td { padding: 5px 8px; text-align: left; } .rogue-starter-config thead { background: #dce8f2; } .rogue-starter-config input[type=number] { width: 66px; } .rogue-starter-config .rogue-config-note { color: #52697b; font-size: 12px; line-height: 1.5; } .rogue-starter-config .rogue-config-error { color: #a32626; } .rogue-start-move-label { display: inline-block; width: 49%; margin: 3px 0; } .rogue-start-move-label select { width: 120px; max-width: 70%; } .rogue-start-move-preview .rogue-move-row { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px; background: #e8f2f8; } .rogue-start-move-preview small { display: block; color: #52697b; } .rogue-start-move-preview .rogue-move-desc { width: 100%; } .fantasyrogue .rogue-starter-builds p { margin: 5px 0; } .rogue-ball-option { position: relative; display: inline-block; margin: 2px 0; } .rogue-ball-option .itemicon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; } .rogue-catch-tip { display: none; position: absolute; z-index: 20; left: 0; bottom: calc(100% + 6px); width: 240px; max-width: 65vw; padding: 8px 10px; border: 1px solid #8ba9bf; border-radius: 5px; background: #f5faff; color: #273b4a; font-size: 12px; line-height: 1.5; box-shadow: 0 2px 7px #0003; pointer-events: none; } .rogue-ball-option:hover .rogue-catch-tip, .rogue-ball-option:focus-within .rogue-catch-tip { display: block; } .ps-popup.rogue-spirit-popup { width: 350px; max-width: calc(100vw - 28px); min-height: 330px; box-sizing: border-box; padding: 18px 22px; text-align: center; color: #263b50; border: 1px solid #91aeca; border-radius: 10px; background: linear-gradient(155deg, #f8fcffed, #dceaf4eb); box-shadow: 0 8px 30px #223d6755, inset 0 1px 0 #fff; backdrop-filter: blur(8px); } .rogue-evolution-popup { width: 370px; max-width: calc(100vw - 48px); line-height: 1.7; } .rogue-evolution-popup .button, .rogue-evolution-animation .button { margin: 4px; } .rogue-evolution-popup .rogue-evolution-cost { color: #80612d; } .rogue-evolution-animation { width: 360px; max-width: calc(100vw - 48px); text-align: center; } .rogue-evolution-stage { position: relative; height: 190px; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse, #f5fdff 12%, #d9eff7 70%, #c3dbe9); } .rogue-evolution-sprite { position: absolute; width: 140px; height: 130px; top: 30px; left: calc(50% - 70px); background-repeat: no-repeat; background-position: center !important; image-rendering: pixelated; } .rogue-evolution-sprite.before { animation: rogue-evolution-before 3.2s ease-in-out both; } .rogue-evolution-sprite.after { animation: rogue-evolution-after 3.2s ease-in-out both; } .rogue-evolution-glow { position: absolute; width: 140px; height: 140px; left: calc(50% - 70px); top: 25px; border-radius: 50%; background: radial-gradient(circle, #fff 15%, #e2fbff 40%, transparent 70%); animation: rogue-evolution-glow 3.2s ease-in-out both; } .rogue-evolution-sparks { position: absolute; inset: 0; } .rogue-evolution-sparks i { position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; background: #8ab6d2; animation: rogue-evolution-spark 2.4s ease-in-out var(--delay) both; } .rogue-evolution-result { min-height: 24px; } .rogue-evolution-animation.complete .before, .rogue-evolution-animation.complete .rogue-evolution-glow, .rogue-evolution-animation.complete .rogue-evolution-sparks { display: none; } .rogue-evolution-animation.complete .after { animation: none; opacity: 1; transform: none; filter: none; } @keyframes rogue-evolution-before { 0%, 15% { opacity: 1; transform: scale(1); filter: brightness(1); } 45% { opacity: 1; transform: scale(.8); filter: brightness(5); } 57%, 100% { opacity: 0; transform: scale(.6); filter: brightness(5); } } @keyframes rogue-evolution-after { 0%, 45% { opacity: 0; transform: scale(.6); filter: brightness(5); } 60% { opacity: 1; transform: scale(.9); filter: brightness(5); } 85%, 100% { opacity: 1; transform: scale(1); filter: brightness(1); } } @keyframes rogue-evolution-glow { 0% { opacity: 0; transform: scale(.4); } 45%, 60% { opacity: .9; transform: scale(1.7); } 100% { opacity: 0; transform: scale(2); } } @keyframes rogue-evolution-spark { 0% { opacity: 0; transform: rotate(var(--angle)) translateX(88px) rotate(0deg); } 20% { opacity: .7; } 55% { opacity: .3; transform: rotate(calc(var(--angle) + 90deg)) translateX(8px) rotate(90deg); } 72% { opacity: .8; } 100% { opacity: 0; transform: rotate(calc(var(--angle) + 110deg)) translateX(105px) rotate(180deg); } } @media (prefers-reduced-motion: reduce) { .rogue-evolution-animation * { animation: none !important; } .rogue-evolution-animation .before, .rogue-evolution-animation .rogue-evolution-glow, .rogue-evolution-animation .rogue-evolution-sparks { display: none; } } .rogue-spirit-popup .rogue-spirit-art { width: 140px; height: 120px; margin: 0 auto 5px; background-repeat: no-repeat; background-position: center !important; } .rogue-spirit-popup h3 { margin: 7px 0 10px; font-size: 19px; } .rogue-spirit-popup p { margin: 10px 0 18px; line-height: 1.65; text-align: left; } .rogue-spirit-popup .rogue-caption { color: #647e95; } .fantasyrogue .rogue-spirit-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .fantasyrogue .rogue-spirit-badge .button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 1px; } .fantasyrogue .rogue-stars { color: #95680f; letter-spacing: 2px; } .fantasyrogue .rogue-box { margin: 8px 0; } .fantasyrogue .rogue-box > .rogue-inventory { margin-top: 6px; } .fantasyrogue .rogue-box .rogue-item-card { min-width: 0; } .fantasyrogue .rogue-item-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; } .fantasyrogue .rogue-item-actions > .button { margin: 0; } .fantasyrogue .rogue-hp-shop { padding: 6px 8px; border-radius: 4px; border: 1px solid #cc9caa; background: #fff1f4; } /* Party and inventory are a native right-side room, alongside Lobby and Hellodex. */ .fantasyrogue.rogue-party-room > .pad { max-width: none; } .fantasyrogue .rogue-blessing-silver { --blessing-border: #90a3b6; --blessing-color: 91, 121, 151; --blessing-dark: 51, 77, 104; --blessing-bg: linear-gradient(145deg, #fafdff, #dce5ee); --blessing-emblem: linear-gradient(145deg, #8aa9c3, #4e6b89); --blessing-icon: #f6fbff; } .fantasyrogue .rogue-blessing-gold { --blessing-border: #c69b39; --blessing-color: 175, 124, 33; --blessing-dark: 119, 78, 16; --blessing-bg: linear-gradient(145deg, #fffae8, #efd28f); --blessing-emblem: linear-gradient(145deg, #d3a544, #937027); --blessing-icon: #fff7d6; } .fantasyrogue .rogue-blessing-prismatic, .fantasyrogue .rogue-blessing-mixed { --blessing-border: #9280be; --blessing-color: 124, 95, 167; --blessing-dark: 87, 54, 131; --blessing-bg: linear-gradient(125deg, #e5dcff, #f6dff1 28%, #dbe9ff 55%, #d1f1ed 78%, #e6ddff); --blessing-emblem: linear-gradient(145deg, #b8b9f0, #aa81c5 48%, #619cb4); --blessing-icon: #fff; } .fantasyrogue .rogue-blessing-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 16px; color: #456075; } .fantasyrogue .rogue-blessing-tier-badge { padding: 2px 10px; border: 1px solid var(--blessing-border); border-radius: 3px; background: var(--blessing-bg); color: rgb(var(--blessing-dark)); font-size: 13px; font-weight: bold; letter-spacing: 1px; } .fantasyrogue .rogue-blessing-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 6px 2px 0; } .fantasyrogue .rogue-blessing-options:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fantasyrogue .rogue-blessing-option { min-width: 0; display: flex; flex-direction: column; } /* The route frame, diamond marker and pressed/focus states are shared on purpose. */ .fantasyrogue .rogue-blessing-card { --route-color: var(--blessing-color); --route-dark: var(--blessing-dark); display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: 1; width: 100%; padding: 14px 14px 13px; color: #2c4354; line-height: 1.65; } .fantasyrogue .rogue-blessing-card::after { background-image: linear-gradient(180deg, #fff0 8%, #ffffff80 40%, #f8fbffed 77%), url(fantasy-rogue-blessing-pattern.svg), var(--blessing-bg); background-size: 100% 100%, 112px 98px, 100% 100%; } .fantasyrogue .rogue-blessing-art { display: flex; justify-content: center; align-items: center; height: 132px; margin: 12px -5px 8px; } .fantasyrogue .rogue-blessing-emblem { --emblem-cut: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); position: relative; display: flex; align-items: center; justify-content: center; width: 104px; height: 116px; color: var(--blessing-icon); filter: drop-shadow(0 3px 6px rgba(var(--blessing-color), .2)); } .fantasyrogue .rogue-blessing-emblem::before, .fantasyrogue .rogue-blessing-emblem::after { content: ''; position: absolute; inset: 0; clip-path: var(--emblem-cut); background: rgba(var(--blessing-color), .55); } .fantasyrogue .rogue-blessing-emblem::after { inset: 3px; border: 2px solid #ffffffb0; background: var(--blessing-emblem); } .fantasyrogue .rogue-blessing-emblem .fa { position: relative; z-index: 1; font-size: 40px; text-shadow: 0 2px 3px #1e304522; } .fantasyrogue .rogue-blessing-card > .rogue-blessing-title { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 2.9em; margin: 0; font-size: 17px; line-height: 1.45; text-align: center; color: rgb(var(--blessing-dark)); overflow-wrap: anywhere; } .fantasyrogue .rogue-blessing-card > .rogue-blessing-type { position: absolute; top: 10px; right: 10px; padding: 0 5px; border: 1px solid rgba(var(--blessing-color), .25); border-radius: 3px; background: #ffffffb3; color: rgb(var(--blessing-dark)); font-size: 11px; } .fantasyrogue .rogue-blessing-card > .rogue-blessing-quality { position: absolute; top: 10px; left: 12px; color: rgb(var(--blessing-dark)); font-size: 11px; letter-spacing: 1px; } .fantasyrogue .rogue-blessing-description { flex: 1; min-height: 8em; margin: 7px 0 14px; padding-top: 10px; border-top: 1px solid rgba(var(--blessing-color), .25); font-size: 14px; line-height: 1.75; text-align: left; overflow-wrap: anywhere; } .fantasyrogue .rogue-blessing-cost { margin: 0 0 7px; color: rgb(var(--blessing-dark)); font-size: 12px; text-align: center; } .fantasyrogue .rogue-blessing-card > .rogue-route-hint { align-self: stretch; } .fantasyrogue .rogue-blessing-card.is-chosen { opacity: .58; } .fantasyrogue .rogue-blessing-card.is-chosen > .rogue-route-hint { color: #2a614b; font-weight: bold; } .fantasyrogue .rogue-blessing-refresh { display: flex; justify-content: center; padding: 12px 0 4px; } .fantasyrogue .rogue-blessing-refresh .button { min-height: 34px; margin: 0; padding: 5px 13px; border: 1px solid rgba(var(--blessing-color), .38); border-radius: 18px; background: #f9fcffdb; color: rgb(var(--blessing-dark)); box-shadow: none; font-size: 13px; } .fantasyrogue .rogue-blessing-refresh .button:not(:disabled):hover { background: var(--blessing-bg); border-color: var(--blessing-border); } .fantasyrogue .rogue-blessing-refresh .button:focus-visible { outline: 2px solid rgb(var(--blessing-dark)); outline-offset: 2px; } .fantasyrogue .rogue-blessing-refresh .button:disabled { opacity: .5; cursor: default; } .fantasyrogue .rogue-blessing-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #d2dfeb; line-height: 1.8; } @container (max-width: 660px) { .fantasyrogue .rogue-blessing-options { gap: 8px; } .fantasyrogue .rogue-blessing-card { padding: 10px 10px 12px; } .fantasyrogue .rogue-blessing-art { height: 108px; margin-bottom: 4px; } .fantasyrogue .rogue-blessing-emblem { width: 80px; height: 90px; } .fantasyrogue .rogue-blessing-emblem .fa { font-size: 32px; } .fantasyrogue .rogue-blessing-card > .rogue-blessing-title { font-size: 15px; } .fantasyrogue .rogue-blessing-description { font-size: 13px; line-height: 1.7; } } @container (max-width: 460px) { .fantasyrogue .rogue-blessing-options, .fantasyrogue .rogue-blessing-options:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; gap: 16px; } .fantasyrogue .rogue-blessing-card { padding: 12px 16px; } .fantasyrogue .rogue-blessing-art { height: 86px; } .fantasyrogue .rogue-blessing-emblem { width: 68px; height: 76px; } .fantasyrogue .rogue-blessing-card > .rogue-blessing-title { min-height: 0; font-size: 17px; } .fantasyrogue .rogue-blessing-description { min-height: 0; font-size: 14px; } } .fantasyrogue .rogue-blessing-rewards { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; } .fantasyrogue .rogue-evolution-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; } .fantasyrogue .rogue-evolution-choice { padding: 18px 15px; border: 1px solid #a8bdd4; border-top: 4px solid #8970b1; border-radius: 12px; background: linear-gradient(145deg, #f7fcff, #ece7f8); color: #354c63; text-align: left; cursor: pointer; box-shadow: 0 2px 5px #3452; } .fantasyrogue .rogue-evolution-choice strong { display: block; font-size: 17px; line-height: 1.5; } .fantasyrogue .rogue-evolution-choice span { display: block; margin-top: 9px; font-size: 14px; line-height: 1.7; } .fantasyrogue .rogue-evolution-choice:hover, .fantasyrogue .rogue-evolution-choice:focus-visible { border-color: #7962a2; box-shadow: 0 0 0 2px #b9a7d8; } .fantasyrogue .rogue-evolution-choice:disabled { opacity: .6; cursor: default; } .fantasyrogue [data-shop-category] { scroll-margin-top: 14px; } .fantasyrogue .rogue-permanent-gains { padding: 4px 10px; background: #eef7f5; border-top: 1px solid #c1d8d0; } @media (max-width: 640px) { .fantasyrogue .rogue-evolution-choices { grid-template-columns: 1fr; } } .fantasyrogue .rogue-blessing-gift { padding: 12px; border: 1px solid #aac3d6; background: #edf7ffe8; border-radius: 6px; line-height: 1.7; } .fantasyrogue .rogue-owned-blessings { padding: 8px 0; } .fantasyrogue .rogue-owned-blessing { margin: 7px 0; padding: 9px 12px; border-left: 4px solid var(--blessing-border); background: var(--blessing-bg); border-radius: 4px; } .fantasyrogue .rogue-owned-blessing > summary { cursor: pointer; font-weight: bold; line-height: 1.6; } .fantasyrogue .rogue-owned-blessing p { margin: 8px 0; line-height: 1.65; } .fantasyrogue .rogue-event-text { font-size: 16px; line-height: 1.7; margin: 10px 0 14px; } .fantasyrogue .rogue-event-text p { margin: 12px 0; } .fantasyrogue .rogue-event-options { display: grid; gap: 7px; } .fantasyrogue .rogue-event-option { padding: 8px 12px; text-align: left; white-space: normal; } .fantasyrogue .rogue-event-option strong { display: block; font-size: 15px; } .fantasyrogue .rogue-event-option small { display: block; margin-top: 6px; color: #526d82; line-height: 1.6; } .fantasyrogue .rogue-event-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; } .fantasyrogue .rogue-event-teams > div { padding: 12px; border: 1px solid #b9cddd; border-radius: 5px; background: #f4f9fd; } .fantasyrogue .rogue-event-teams p { display: flex; align-items: center; margin: 5px 0; } .fantasyrogue .rogue-event-preview, .fantasyrogue .rogue-event-allocation, .fantasyrogue .rogue-event-picker { padding: 16px; margin: 16px 0; border: 1px solid #b9cddd; border-radius: 8px; background: #f5faff; } .fantasyrogue .rogue-event-form-sprite { width: 120px; height: 100px; margin: 8px auto; background-repeat: no-repeat; background-position: center; } .fantasyrogue .rogue-event-allocation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .fantasyrogue .rogue-event-allocation p { grid-column: 1 / -1; margin: 0; } .fantasyrogue .rogue-event-allocation label { display: flex; align-items: center; gap: 8px; } .fantasyrogue .rogue-event-allocation input { width: 64px; padding: 6px; font-size: 16px; } .fantasyrogue .rogue-event-picker select { display: block; max-width: 100%; width: 100%; margin: 10px 0; padding: 10px; font-size: 15px; } .fantasyrogue .rogue-event-picker .button { padding: 10px 20px; font-weight: bold; font-size: 16px; } .ps-popup.rogue-exchange-animation { width: 480px; max-width: calc(100vw - 32px); padding: 20px; } .rogue-exchange-stage { height: 180px; position: relative; container-type: inline-size; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg, #dcecf5, #eef3dc); } .rogue-exchange-before, .rogue-exchange-after { position: absolute; width: 120px; height: 110px; top: 35px; background-repeat: no-repeat; background-position: center; } .rogue-exchange-before { left: 10%; animation: rogue-memory-recall 2.4s linear forwards; } .rogue-exchange-after { right: 10%; opacity: 0; animation: rogue-memory-release 2.4s linear forwards; } .rogue-exchange-ball { position: absolute; top: 75px; width: 24px; height: 24px; border: 2px solid #344c60; border-radius: 50%; background: linear-gradient(#de5f70 46%, #344c60 46%, #344c60 54%, #fff 54%); opacity: 0; } .rogue-exchange-ball.left { left: 22%; --travel-distance: calc(56cqw - 28px); animation: rogue-memory-ball 2.4s linear forwards; } .rogue-exchange-ball.right { right: 22%; --travel-distance: calc(28px - 56cqw); animation: rogue-memory-ball 2.4s linear forwards; } @keyframes rogue-memory-recall { 0%, 10% { opacity: 1; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(.1); } } @keyframes rogue-memory-release { 0%, 75% { opacity: 0; transform: scale(.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes rogue-memory-ball { 0%, 20%, 100% { opacity: 0; } 30% { opacity: 1; transform: translateX(0); } 70%, 80% { opacity: 1; transform: translateX(var(--travel-distance)); } } @container (max-width: 460px) { .fantasyrogue .rogue-event-allocation { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rogue-exchange-animation.complete .rogue-exchange-before, .rogue-exchange-animation.complete .rogue-exchange-ball { animation: none; opacity: 0; } .rogue-exchange-animation.complete .rogue-exchange-after { animation: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .rogue-exchange-stage * { animation: none !important; } .rogue-exchange-before, .rogue-exchange-ball { opacity: 0; } .rogue-exchange-after { opacity: 1; } } .ps-popup.rogue-event-replay { width: 664px; max-width: calc(100vw - 20px); padding: 12px; box-sizing: border-box; } .rogue-event-replay .battle { position: relative; top: auto; left: auto; width: 640px; height: 360px; max-width: 100%; } .rogue-event-replay .battle-log { position: relative; top: auto; left: auto; right: auto; bottom: auto; height: 170px; margin-top: 10px; border: 1px solid #bbcddd; background: #f5f9fc; } .rogue-event-replay > p .button { margin: 4px; } .fantasyrogue .rogue-game-layout { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .fantasyrogue .rogue-game-content { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .fantasyrogue .rogue-game-layout > .rogue-abandon { flex: 0 0 auto; margin: 0 15px; padding: 12px 2px 16px; border-top: 1px solid #91aebf; background: rgba(240,247,251,.94); } .fantasyrogue .rogue-game-layout .rogue-abandon-note { margin: 4px 0 10px; } .fantasyrogue .rogue-codex-heading { position: relative; padding-bottom: 18px; } .fantasyrogue .button.rogue-codex-back { display: block; padding: 12px 24px; margin: 12px 0 0; font-size: 18px; font-weight: bold; background: #e4f2fc; color: #254a69; border: 2px solid #527d9e; border-radius: 8px; } .fantasyrogue .rogue-floor .button[name="act"][value="continue"], .fantasyrogue .rogue-floor .button[name="act"][value="battle"], .fantasyrogue .rogue-floor .button[name="chooseEvent"], .fantasyrogue .rogue-floor .button[name="chooseLongBlessingReward"] { padding: 12px 22px; margin: 10px 8px 10px 0; min-height: 46px; font-size: 17px; font-weight: bold; border: 2px solid #527d9e; border-radius: 8px; color: #244760; background: linear-gradient(#f5fbff, #c8e2f4); box-shadow: 0 2px 4px #56788c30; } .fantasyrogue .rogue-floor .button:focus-visible, .fantasyrogue .rogue-codex-back:focus-visible { outline: 3px solid #407ba4; outline-offset: 3px; } .fantasyrogue .rogue-floor .button:disabled, .fantasyrogue .rogue-center-actions > .button:disabled { color: #6c7880; border-color: #b9c3c9; background: #e6ebee; box-shadow: none; opacity: .65; cursor: not-allowed; } /* Route copy spans both grid columns, including narrow trade cards. */ .fantasyrogue .rogue-route-description { grid-column: 1 / -1; min-width: 0; line-height: 1.65; } .fantasyrogue .rogue-center-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .fantasyrogue .rogue-center-actions > .button { flex: 1 1 220px; min-height: 46px; padding: 10px 16px; font-size: 16px; font-weight: bold; color: #24546e; border: 1px solid #86acc1; background: linear-gradient(#f8fcff, #dbeef8); } .fantasyrogue .rogue-item-ether { width: 18px; height: 24px; background-position: -85px -192px; } /* Compact party details without changing column widths between partners. */ .fantasyrogue .rogue-system-status { font-size: 13px; line-height: 1.5; color: #4b6477; margin: 4px 0; } .fantasyrogue .rogue-team-tabs button { padding-top: 2px; padding-bottom: 2px; } .fantasyrogue .rogue-member-sheet { padding: 5px 6px; } .fantasyrogue .rogue-details-line { min-height: 46px; } .fantasyrogue .rogue-details-line > span { padding: 1px 2px; line-height: 12px; } .fantasyrogue .rogue-details-line b { line-height: 16px; } .fantasyrogue .rogue-nature-effect { min-height: 16px; } .fantasyrogue .rogue-member-details > .rogue-exp { min-height: 16px; line-height: 16px; margin: 2px 0; } .fantasyrogue .rogue-member-sheet label { margin-top: 1px; line-height: 16px; } .fantasyrogue .rogue-member-sheet .button { min-height: 24px; padding-top: 2px; padding-bottom: 2px; margin-top: 0; margin-bottom: 2px; } .fantasyrogue .rogue-stat-summary > span { margin: 2px 0; } .fantasyrogue .rogue-stats td, .fantasyrogue .rogue-stats th { padding-top: 1px; padding-bottom: 1px; line-height: 19px; } .fantasyrogue .rogue-editor-options { padding-top: 5px; padding-bottom: 5px; } .fantasyrogue .rogue-evolution-details { padding: 6px 8px; } .fantasyrogue .rogue-evolution-details h4 { margin-bottom: 4px; } .fantasyrogue .rogue-evolution-branch { padding: 4px 0; } .fantasyrogue .rogue-evolution-branch ul { line-height: 1.5; } /* Persistent panels and compact interactions. */ .fantasyrogue .rogue-move-picker { max-height: min(320px, 45vh); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-gutter: stable; border: 1px solid #c2d3df; border-radius: 4px; background: #f6faff; } .fantasyrogue .rogue-move-picker:focus-visible { outline: 2px solid #547b9d; outline-offset: 1px; } .fantasyrogue .rogue-move-picker .rogue-choice-row { display: flex; padding: 3px 6px; gap: 7px; } .fantasyrogue .rogue-move-picker .rogue-choice-row:last-child { border-bottom: 0; } .fantasyrogue .rogue-move-picker .rogue-choice-row:nth-child(even) { background: #eaf2f780; } .fantasyrogue .rogue-move-picker .rogue-choice-row:focus-within { background: #dfeef8; } .fantasyrogue .rogue-move-picker .rogue-choice-row.is-equipped { background: #d9eafb; border-left: 3px solid #39789f; } .fantasyrogue .rogue-move-picker .rogue-choice-row.is-equipped:focus-within { background: #c9e2f6; } .fantasyrogue .rogue-move-slot { flex: none; width: 18px; line-height: 18px; text-align: center; font-size: 11px; font-weight: bold; color: #fff; background: #39789f; border-radius: 4px; } .fantasyrogue .rogue-move-picker .rogue-move-row { grid-template-columns: minmax(78px, 1fr) 88px 30px 42px 46px minmax(130px, 2fr); gap: 2px 6px; padding: 2px 0; font-size: 12px; } .fantasyrogue .rogue-move-picker .rogue-move-name { grid-column: auto; font-size: 13px; } .fantasyrogue .rogue-move-picker .rogue-move-desc { grid-column: auto; line-height: 1.4; } .fantasyrogue .rogue-move-picker .button { min-height: 28px; margin: 0; padding: 3px 7px; font-size: 12px; } @container (max-width: 760px) { .fantasyrogue .rogue-move-picker .rogue-move-row { grid-template-columns: minmax(72px, 1fr) 88px 30px 42px 46px; } .fantasyrogue .rogue-move-picker .rogue-move-desc { grid-column: 1 / -1; } } @container (max-width: 460px) { .fantasyrogue .rogue-move-picker .rogue-choice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; } .fantasyrogue .rogue-move-picker .rogue-move-row { grid-column: 1 / -1; grid-template-columns: minmax(68px, 1fr) 85px 28px 38px 42px; gap: 2px; } .fantasyrogue .rogue-move-picker .button { grid-column: 2; } .fantasyrogue .rogue-move-picker .is-equipped { grid-template-columns: 18px minmax(0, 1fr) auto; } .fantasyrogue .rogue-move-picker .is-equipped .rogue-move-row { grid-column: 2 / -1; } .fantasyrogue .rogue-move-picker .is-equipped > .button { grid-column: 3; } } .rogue-partner-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; } .rogue-partner-actions .button { min-height:46px; min-width:140px; padding:10px 18px; font-size:16px; } .rogue-partner-actions .button:first-child { background:linear-gradient(135deg,#e3f4fc,#dae8f5); border-color:#6f9bb5; color:#274c68; font-weight:bold; } .rogue-mentor-cards { margin-bottom:16px; } .fantasyrogue .rogue-mentor-cards .rogue-routes { max-width: 720px; margin: 0 auto; gap: 8px; padding-top: 4px; } .fantasyrogue .rogue-mentor-card { min-height: 132px; grid-template-rows: auto 1fr auto; padding: 10px 12px 12px; } .fantasyrogue .rogue-mentor-card .rogue-route-description { grid-column: 1 / -1; width: auto; margin: 6px 0; line-height: 1.6; } .rogue-mentor-selected { padding:10px; border:1px solid #97b4c8; background:#eff8ff; border-radius:6px; } .rogue-fishing { display:flex; align-items:center; gap:16px; max-width:570px; } .rogue-fishing-scene { flex:1; min-width:0; border:1px solid #9bb6bd; border-radius:8px; overflow:hidden; background:#eaf5f5; } .rogue-fishing-scene svg { width:100%; display:block; image-rendering:pixelated; } .rogue-fishing-scene p { margin:8px; font-size:14px; text-align:center; } .rogue-fishing-meter { width:30px; flex-shrink:0; position:relative; background:#304b5d; border:3px solid #8ba9b7; border-radius:7px; height:150px; } .rogue-fishing-controls { display:flex; align-items:center; gap:16px; flex-shrink:0; } .rogue-fishing-controls p { font-size:13px; max-width:100px; } .rogue-fishing-controls button { min-height:46px; min-width:90px; font-size:18px; font-weight:bold; } .rogue-shop h3 { display:inline-block; margin-right:12px; } .rogue-shop-categories { display:inline-flex; flex-wrap:wrap; gap:5px; vertical-align:middle; } .rogue-shop-categories button { font-size:13px; padding:5px 9px; } @media (max-width:420px) { .rogue-fishing { gap:10px; } .rogue-fishing-controls { gap:10px; } .rogue-fishing-controls button { min-width:72px; } } .rogue-fishing-zone { position:absolute; width:100%; background:#8bd5a6; border-top:2px solid #e0ffb8; border-bottom:2px solid #e0ffb8; box-sizing:border-box; } .rogue-fishing-cursor { position:absolute; width:50px; height:6px; left:-11px; background:#fff6cf; border:1px solid #a87b35; transform:translateY(-50%); box-shadow:0 1px 4px #182d3b; } .rogue-fishing-progress { max-width:570px; height:10px; background:#d2e0e7; border-radius:5px; overflow:hidden; margin-top:10px; } .rogue-fishing-progress i { display:block; height:100%; background:#7a9fbe; transform-origin:left; } .rogue-fishing-feedback { min-height:24px; } .rogue-water-ripples { animation:rogue-water-drift 2s ease-in-out infinite alternate; } .rogue-fishing-float { animation:rogue-bob 1.2s ease-in-out infinite alternate; } @keyframes rogue-water-drift { to { transform:translateX(5px); opacity:.6; } } @keyframes rogue-bob { to { transform:translateY(3px); } } @media(prefers-reduced-motion:reduce) { .rogue-water-ripples,.rogue-fishing-float { animation:none; } } .rogue-onboarding { width: 620px; max-width: calc(100vw - 48px); color: #304b5d; } .rogue-onboarding h2 { margin: 4px 0 14px; } .rogue-onboarding-body { max-height: min(68vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding-right: 12px; font-size: 16px; line-height: 1.65; } .rogue-onboarding-body h3 { font-size: 18px; margin: 18px 0 6px; } .rogue-onboarding-body li { margin: 8px 0; } .rogue-onboarding-actions { text-align: right; margin-bottom: 0; } .rogue-onboarding-actions .button { min-width: 130px; padding: 10px 20px; font-size: 17px; font-weight: bold; } /* Reward scenes use the existing party portrait and compact inventory controls. */ .rogue-reward-scene > header { display:flex; align-items:center; gap:12px; } .rogue-reward-scene > header h3 { margin:0 0 4px; } .rogue-reward-npc { width:72px; height:72px; object-fit:contain; image-rendering:pixelated; flex:none; } .rogue-reward-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:10px; } .rogue-reward-options .rogue-event-option { width:auto; min-width:0; text-align:left; padding:12px; margin:0; } .rogue-reward-options small { display:block; line-height:1.6; white-space:normal; } .rogue-run-training { padding:9px 12px; margin:8px 0; border:1px solid #acc6cc; border-radius:6px; background:rgba(245,252,248,.92); } .rogue-run-training summary { cursor:pointer; font-weight:600; line-height:1.6; } .rogue-run-training p { margin:6px 0; font-size:13px; line-height:1.6; } .rogue-training-offers h4 { margin:2px 0 6px; } .fantasyrogue .rogue-training-offers .rogue-item-card > h4 { grid-column:1 / -1; } .rogue-training-offers small { display:block; margin-bottom:5px; } .rogue-companions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; } .rogue-companion { display:flex; align-items:center; flex:1 1 300px; min-width:0; border:1px solid #9db6cb; border-radius:10px; background:rgba(248,252,255,.94); padding:8px; } .rogue-companion-portrait { display:block; flex:none; width:132px; height:132px; padding:0; border:0; border-radius:6px; background-color:transparent; background-size:200% 100%; background-position:var(--rogue-portrait-normal-x, 0%) 0; background-repeat:no-repeat; cursor:pointer; } .rogue-companion-portrait.smiling { background-position:var(--rogue-portrait-approval-x, 100%) 0; } .rogue-companion-portrait.chatting { animation-name:rogue-companion-chat; animation-timing-function:steps(1,end); animation-fill-mode:forwards; } @keyframes rogue-companion-chat { from { background-position:var(--rogue-portrait-approval-x, 100%) 0; } to { background-position:var(--rogue-portrait-normal-x, 0%) 0; } } .rogue-companion-copy { flex:1; min-width:0; } .rogue-companion-copy > strong, .rogue-companion-copy > small { display:block; } .rogue-companion-copy .button { margin:5px 4px 0 0; white-space:normal; } .rogue-companion-speech { background:#eaf4fd; border:1px solid #c1d4e4; border-radius:8px; padding:7px 9px; font-size:15px; line-height:1.5; margin:6px 0; } .rogue-companion-choice { background:#f4f8ff; border:1px solid #9db6cb; border-radius:8px; padding:10px; } .rogue-companion-pick { display:grid; justify-items:center; padding:8px 20px; } .rogue-auction-board {padding: 12px; border: 1px solid #c8b07b; border-radius: 10px; background: #fff9e9;} .rogue-auction-board h4 {margin: 0 0 6px;} .rogue-auction-budgets {display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px;} .rogue-auction-budgets > div {padding: 8px; background: #ffffffb8; border-radius: 6px;} .rogue-auction-budgets span {display: block; margin-top: 4px;} .rogue-area-notice {padding: 10px; background: #edf7ff; border-left: 4px solid #578ba8;} /* Shared large action controls, including inventory, move lists and modal dialogs. */ .button.rogue-control, .fantasyrogue .button:not(.rogue-member-choice):not(.rogue-companion-pick):not(.rogue-event-option), .rogue-retreat .button { box-sizing: border-box; min-height: 36px; min-width: 36px; padding: 5px 10px; border: 1px solid #82a6bf; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #284d65; background: linear-gradient(180deg, #fbfdff 0%, #e2eff8 100%); box-shadow: 0 2px 3px #305c7620, inset 0 1px 0 #ffffff; text-shadow: none; white-space: normal; overflow-wrap: anywhere; cursor: pointer; } .button.rogue-control:not(:disabled):hover, .fantasyrogue .button:not(:disabled):hover, .rogue-retreat .button:not(:disabled):hover { border-color: #5487aa; background-color: #dceefa; box-shadow: 0 2px 5px #305c7630; } .button.rogue-control:focus-visible, .fantasyrogue .button:focus-visible, .rogue-retreat .button:focus-visible { outline: 3px solid #4887b4; outline-offset: 2px; } .button.rogue-control:disabled, .fantasyrogue .button:disabled, .rogue-retreat .button:disabled { color: #73818a; border-color: #c2cdd5; background: #e9eef2; box-shadow: none; opacity: .65; cursor: default; } /* Keep every codex's active category above the shared large-button theme, including hover. */ .fantasyrogue .rogue-codex .rogue-codex-filters .button.is-active[aria-pressed="true"], .fantasyrogue .rogue-codex .rogue-codex-collections .button.is-active[aria-pressed="true"] { color: #fff; border-color: #103858; background: linear-gradient(180deg, #205a88, #123c63); box-shadow: 0 2px 4px #133b6840, inset 0 1px 0 #ffffff30; } .fantasyrogue .rogue-codex .button.is-active[aria-pressed="true"] small { color: #e4f1ff; } .fantasyrogue .rogue-codex-seen { margin-left: auto; color: #246345; font-size: 12px; } .fantasyrogue .rogue-codex-single-portrait { float: right; width: 120px; max-width: 40%; height: 140px; object-fit: contain; margin: 0 0 8px 10px; } .fantasyrogue .rogue-item-actions { display: flex; flex-wrap: wrap; gap: 6px; } .fantasyrogue .rogue-shop .rogue-inventory { grid-template-columns: repeat(auto-fit, minmax(min(235px,100%),1fr)); } .fantasyrogue .rogue-equipped-moves .button:first-child { white-space: normal; } .fantasyrogue .rogue-choice-row > .button { max-width: 160px; } .rogue-crown-popup { min-width: 260px; max-width: 420px; } .rogue-crown-popup > p .button { width: 100%; text-align: left; } @media (prefers-reduced-motion: reduce) { .button.rogue-control { transition: none; } } .rogue-ski { max-width:600px; margin:12px auto; padding:10px; background:#f3f8fc; border:1px solid #90adbf; border-radius:12px; } .rogue-ski canvas { display:block; width:100%; height:auto; border-radius:8px; image-rendering:pixelated; } .rogue-ski-hud, .rogue-ski-controls { display:flex; justify-content:space-between; gap:12px; padding-top:8px; } .rogue-ski-controls .button { flex:1; } .rogue-codex-link { border:0; color:#4e6596; background:none; padding:0; font:inherit; cursor:pointer; text-decoration:underline; } .rogue-codex-link:focus-visible { outline:2px solid #4e6596; } .codex-portrait { float:right; margin:0 0 8px 10px; } .rogue-codex-search select { padding:7px; margin-right:5px; } .rogue-compound-allocation { width:100%; max-width:680px; table-layout:fixed; } .rogue-compound-allocation input { box-sizing:border-box; width:100%; max-width:100px; padding:7px; text-align:center; font:inherit; } .rogue-compound-allocation th, .rogue-compound-allocation td { padding:8px 5px; } .rogue-compound-remaining { color:#64408c; font-weight:700; } /* Compact tower panels. Text and controls never compete for an auto-sized grid column. */ .fantasyrogue .rogue-item-card > small, .fantasyrogue .rogue-item-card > p { grid-column: 1 / -1; min-width: 0; } .fantasyrogue .rogue-item-card > .button { grid-column: 1 / -1; grid-row: auto; justify-self: end; max-width: 100%; } .fantasyrogue .rogue-item-heading > strong { min-width: 0; overflow-wrap: anywhere; } .fantasyrogue .rogue-item-card { grid-template-columns: minmax(0, 1fr); } .fantasyrogue .rogue-bag .rogue-item-card { display: flex; flex-direction: column; } .fantasyrogue .rogue-bag .rogue-item-card > .button { margin-top: auto; align-self: flex-end; } .fantasyrogue .rogue-codex-grid { gap: 8px; } .fantasyrogue .rogue-codex-entry { padding: 10px 12px; min-height: 0; } .fantasyrogue .rogue-codex-entry h3 { font-size: 15px; margin: 5px 0; } .fantasyrogue .rogue-codex-entry p { margin: 6px 0; line-height: 1.55; } .fantasyrogue .rogue-codex-collections { margin: 10px 0; gap: 8px; } .fantasyrogue .rogue-codex-collections .button { padding: 9px 12px; } .fantasyrogue .rogue-codex-collections strong { font-size: 16px; margin: 0; } .fantasyrogue .rogue-story { margin: 10px 0; } .fantasyrogue .rogue-story-dialogue { min-height: 0; padding: 12px 16px; } .fantasyrogue .rogue-event-option strong { font-size: 14px; } .fantasyrogue .rogue-event-option small { margin-top: 3px; } .fantasyrogue .rogue-reward-options .rogue-event-option { padding: 8px 10px; } .fantasyrogue .rogue-keepsake { margin: 7px 0; padding: 8px 10px; } .fantasyrogue .rogue-companions { margin: 7px 0; gap: 6px; } .fantasyrogue .rogue-companion { padding: 5px 8px; gap: 5px; align-items: center; } .fantasyrogue .rogue-companion-speech { margin: 4px 0; padding: 5px 8px; font-size: 14px; } .fantasyrogue .rogue-companion-copy > p { margin: 4px 0; } .fantasyrogue .rogue-companion-copy .button { margin: 3px 4px 0 0; } .fantasyrogue .rogue-member-sheet .button { min-height: 32px; padding: 3px 7px; font-size: 13px; } .fantasyrogue .rogue-member-toolbar { padding: 4px 8px; } .fantasyrogue h3 { margin-top: 10px; margin-bottom: 6px; } .fantasyrogue .rogue-editor-options > section, .fantasyrogue .rogue-notices { margin: 6px 0; } .fantasyrogue .rogue-member-sheet .rogue-equipped-moves .button.rogue-equipped-move { border: 1px solid var(--move-color, #8996a3); border-left-width: 5px; background: linear-gradient(110deg, var(--move-tint, #f5f8fb), #fafcfe); padding: 3px 7px; min-height: 32px; font-size: 11px; text-align: left; } .fantasyrogue .rogue-member-sheet .rogue-equipped-moves .selected .button.rogue-equipped-move { box-shadow: inset 0 0 0 2px var(--move-color, #8996a3); } .fantasyrogue .rogue-member-sheet .rogue-equipped-moves .button.rogue-equipped-move:not(:disabled):hover { background: var(--move-tint, #f5f8fb); } .fantasyrogue .rogue-equipped-move strong, .fantasyrogue .rogue-equipped-move small { display: block; } .fantasyrogue .rogue-equipped-move strong { font-size: 12px; } .fantasyrogue .rogue-equipped-move small { font-size: 10px; font-weight: normal; color: #324a5a; line-height: 1.45; } @media (pointer: coarse) { .fantasyrogue .rogue-member-sheet .button, .fantasyrogue button.button, .fantasyrogue .rogue-member-sheet .rogue-equipped-moves .button.rogue-equipped-move { min-height: 40px; } } @container (max-width: 480px) { .fantasyrogue .rogue-companion-portrait { width: 108px; height: 108px; } } .rogue-equipped-move[data-type="Normal"] { --move-color: #9199a1; --move-tint: #9199a124; } .rogue-equipped-move[data-type="Fire"] { --move-color: #da653e; --move-tint: #da653e24; } .rogue-equipped-move[data-type="Water"] { --move-color: #447fce; --move-tint: #447fce24; } .rogue-equipped-move[data-type="Electric"] { --move-color: #b79313; --move-tint: #b7931324; } .rogue-equipped-move[data-type="Grass"] { --move-color: #568e3d; --move-tint: #568e3d24; } .rogue-equipped-move[data-type="Ice"] { --move-color: #459aaf; --move-tint: #459aaf24; } .rogue-equipped-move[data-type="Fighting"] { --move-color: #b25540; --move-tint: #b2554024; } .rogue-equipped-move[data-type="Poison"] { --move-color: #945f9e; --move-tint: #945f9e24; } .rogue-equipped-move[data-type="Ground"] { --move-color: #ad843b; --move-tint: #ad843b24; } .rogue-equipped-move[data-type="Flying"] { --move-color: #7b77ba; --move-tint: #7b77ba24; } .rogue-equipped-move[data-type="Psychic"] { --move-color: #cf6384; --move-tint: #cf638424; } .rogue-equipped-move[data-type="Bug"] { --move-color: #859322; --move-tint: #85932224; } .rogue-equipped-move[data-type="Rock"] { --move-color: #95864e; --move-tint: #95864e24; } .rogue-equipped-move[data-type="Ghost"] { --move-color: #716092; --move-tint: #71609224; } .rogue-equipped-move[data-type="Dragon"] { --move-color: #6655bd; --move-tint: #6655bd24; } .rogue-equipped-move[data-type="Dark"] { --move-color: #68606b; --move-tint: #68606b24; } .rogue-equipped-move[data-type="Steel"] { --move-color: #6c8897; --move-tint: #6c889724; } .rogue-equipped-move[data-type="Fairy"] { --move-color: #bf6eaf; --move-tint: #bf6eaf24; } .fantasyrogue .rogue-story-dialogue { font-size: 17px; line-height: 1.65; } .fantasyrogue .rogue-story-dialogue > strong { font-size: 17px; margin-bottom: 5px; } .fantasyrogue .rogue-story-dialogue span { min-height: 0; } .fantasyrogue .rogue-story-dialogue small { margin-top: 6px; } .rogue-beta-entry[hidden] { display: none !important; } .rogue-quiz-silhouette { width: 180px; height: 160px; margin: 8px auto; background-repeat: no-repeat; background-position: center; filter: brightness(0); } .rogue-rival-native { max-width: 100px; height: 130px; object-fit: contain; } .fantasyrogue .rogue-event-intro.has-portrait { display: grid; grid-template-columns: minmax(0, 1fr) clamp(72px, 24%, 132px); align-items: center; gap: 10px; } .fantasyrogue .rogue-event-intro > .rogue-event-text { min-width: 0; overflow-wrap: anywhere; } .fantasyrogue .rogue-event-intro > .rogue-companion-portrait, .fantasyrogue .rogue-event-intro > .rogue-rival-native { float: none; width: 100%; max-width: 132px; height: auto; aspect-ratio: 1; justify-self: end; } .fantasyrogue .rogue-codex-entry { display: flow-root; } .fantasyrogue .rogue-pending-move { padding: 6px 10px; margin-bottom: 10px; border-left: 4px solid #39789f; background: #edf6ff; scroll-margin-top: 16px; } .rogue-onboarding-body strong, .fantasyrogue .rogue-codex-effect strong { font-weight: 700; } .rogue-resource-panel { display: grid; gap: 5px; margin: 7px 0; } .rogue-resource { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; font-size: 13px; } .rogue-resource > strong { font-weight: 700; min-width: 4em; } .rogue-resource > progress { flex: 1 1 90px; min-width: 60px; max-width: 220px; height: 10px; accent-color: #347ca8; } .rogue-resource > b { min-width: 65px; font-variant-numeric: tabular-nums; } .rogue-resource > small { color: #526d83; } .rogue-robe-info { margin: 3px 0; font-size: 13px; } .rogue-companion-copy .rogue-resource { margin-top: 5px; } .rogue-status-badge { display: inline-flex; align-items: center; position: relative; gap: 3px; padding: 1px 6px; margin: 2px 0; border: 1px solid #fff; border-radius: 4px; box-shadow: 0 0 0 1px #8393a7; font: 700 12px/1.35 sans-serif; color: #fff; background: #677386; white-space: nowrap; } .rogue-status-badge.status-par { background: #f6cc43; color: #563c00; } .rogue-status-badge.status-brn { background: #b8361e; } .rogue-status-badge.status-psn, .rogue-status-badge.status-tox { background: #8848a0; } .rogue-status-badge.status-slp { background: #506a8d; } .rogue-status-badge.status-frz, .rogue-status-badge.status-fst { background: #bbebf3; color: #154b62; } .rogue-status-badge.status-fnt { background: #666; } .rogue-status-spark { font-size: 13px; line-height: 1; opacity: .85; } .rogue-reading-portrait { float: right; margin: 0 0 8px 12px; width: clamp(72px, 24%, 144px); } .rogue-reading-portrait > span, .rogue-reading-portrait > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; } .fantasyrogue .rogue-event-reading { display: flow-root; } .rogue-reading-options { clear: both; } .status-par .rogue-status-spark { animation: rogue-status-flicker 1.6s steps(2, end) infinite; } @keyframes rogue-status-flicker { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .status-par .rogue-status-spark { animation: none; } } .rogue-affection-gain { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3; padding: 4px 9px; border-radius: 12px; background: #fff2fa; color: #a31b61; border: 1px solid #d46ca4; font-size: 13px; font-weight: bold; pointer-events: none; animation: rogue-affection-rise 1.8s ease-out both; } @keyframes rogue-affection-rise { 0% { opacity: 0; margin-top: 12px; } 15%, 65% { opacity: 1; } 100% { opacity: 0; margin-top: -6px; } } @media (prefers-reduced-motion: reduce) { .rogue-affection-gain { animation: rogue-affection-still 2s step-end both; } } @keyframes rogue-affection-still { to { opacity: 0; } } .rogue-floor-heading .rogue-floor-subtitle { color: #6c7f8d; font-size: .86em; font-weight: 500; } .rogue-heading-region { font-weight: 800; color: #214f8a; } .rogue-heading-region[data-kind="wild"], .rogue-heading-region[data-kind="elite"], .rogue-heading-region[data-kind="trainer"], .rogue-heading-region[data-kind="boss"] { color: #a13516; } .rogue-heading-region[data-kind="adventure"] { color: #b31a72; } .rogue-heading-region[data-kind="trade"] { color: #a27015; } .rogue-biome-icons { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0; } .rogue-biome-icon { display: inline-flex; width: 40px; height: 32px; align-items: center; justify-content: center; border-radius: 5px; background: rgba(255, 255, 255, .6); } .rogue-biome-icon .picon { display: inline-block; width: 40px; height: 30px; image-rendering: pixelated; } .rogue-biome-icon.is-unknown .picon { filter: brightness(0); } .rogue-biome-visitors { margin-top: 10px; } .rogue-biome-visitors summary { cursor: pointer; font-weight: 700; }